##// END OF EJS Templates
js: use ES6 classes for polymer 2.x
js: use ES6 classes for polymer 2.x

File last commit:

r3172:d37fc984 default
r3172:d37fc984 default
Show More
rhodecode-app.html
195 lines | 8.7 KiB | text/html | HtmlLexer
frontend: introduce rhodecode-app for more complex cross element wiring
r787 <link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../channelstream-connection/channelstream-connection.html">
favicon: added favicon notifications
r882 <link rel="import" href="../rhodecode-toast/rhodecode-toast.html">
<link rel="import" href="../rhodecode-favicon/rhodecode-favicon.html">
frontend: introduce rhodecode-app for more complex cross element wiring
r787
<dom-module id="rhodecode-app">
<template>
<channelstream-connection
id="channelstream-connection"
on-channelstream-listen-message="receivedMessage"
on-channelstream-connected="handleConnected"
on-channelstream-subscribed="handleSubscribed">
</channelstream-connection>
components: small order of elements change and a cleanup
r983 <rhodecode-favicon></rhodecode-favicon>
frontend: introduce rhodecode-app for more complex cross element wiring
r787 </template>
polymer: prepare for 3.x migration
r3149 <script>
frontend: use webpack instead of vulcanize
r3171 var ccLog = Logger.get('RhodeCodeApp');
polymer: prepare for 3.x migration
r3149 ccLog.setLevel(Logger.OFF);
js: use ES6 classes for polymer 2.x
r3172 class RhodecodeApp extends Polymer.Element {
static get is() {
return 'rhodecode-app';
}
connectedCallback() {
super.connectedCallback();
polymer: prepare for 3.x migration
r3149 ccLog.debug('rhodeCodeApp created');
$.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
$.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this));
$.Topic('/connection_controller/subscribe').subscribe(
this.subscribeToChannelTopic.bind(this));
// this event can be used to coordinate plugins to do their
// initialization before channelstream is kicked off
$.Topic('/__MAIN_APP__').publish({});
for (var i = 0; i < alertMessagePayloads.length; i++) {
$.Topic('/notifications').publish(alertMessagePayloads[i]);
}
this.initPlugins();
// after rest of application loads and topics get fired, launch connection
$(document).ready(function () {
this.kickoffChannelstreamPlugin();
}.bind(this));
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
js: use ES6 classes for polymer 2.x
r3172 initPlugins() {
polymer: prepare for 3.x migration
r3149 for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
var pluginDef = window.APPLICATION_PLUGINS[i];
js: use ES6 classes for polymer 2.x
r3172 if (pluginDef.component) {
polymer: prepare for 3.x migration
r3149 var pluginElem = document.createElement(pluginDef.component);
this.shadowRoot.appendChild(pluginElem);
js: use ES6 classes for polymer 2.x
r3172 if (typeof pluginElem.init !== 'undefined') {
polymer: prepare for 3.x migration
r3149 pluginElem.init();
}
}
}
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149 /** proxy to channelstream connection */
js: use ES6 classes for polymer 2.x
r3172 getChannelStreamConnection() {
polymer: prepare for 3.x migration
r3149 return this.$['channelstream-connection'];
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
js: use ES6 classes for polymer 2.x
r3172 handleNotifications(data) {
polymer: prepare for 3.x migration
r3149 var elem = document.getElementById('notifications');
js: use ES6 classes for polymer 2.x
r3172 if (elem) {
polymer: prepare for 3.x migration
r3149 elem.handleNotification(data);
}
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
js: use ES6 classes for polymer 2.x
r3172 faviconUpdate(data) {
polymer: prepare for 3.x migration
r3149 this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count;
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
/** opens connection to ws server */
js: use ES6 classes for polymer 2.x
r3172 kickoffChannelstreamPlugin(data) {
polymer: prepare for 3.x migration
r3149 ccLog.debug('kickoffChannelstreamPlugin');
var channels = ['broadcast'];
var addChannels = this.checkViewChannels();
for (var i = 0; i < addChannels.length; i++) {
channels.push(addChannels[i]);
}
js: use ES6 classes for polymer 2.x
r3172 if (window.CHANNELSTREAM_SETTINGS && CHANNELSTREAM_SETTINGS.enabled) {
polymer: prepare for 3.x migration
r3149 var channelstreamConnection = this.getChannelStreamConnection();
channelstreamConnection.connectUrl = CHANNELSTREAM_URLS.connect;
channelstreamConnection.subscribeUrl = CHANNELSTREAM_URLS.subscribe;
channelstreamConnection.websocketUrl = CHANNELSTREAM_URLS.ws + '/ws';
channelstreamConnection.longPollUrl = CHANNELSTREAM_URLS.longpoll + '/listen';
// some channels might already be registered by topic
for (var i = 0; i < channels.length; i++) {
channelstreamConnection.push('channels', channels[i]);
}
// append any additional channels registered in other plugins
$.Topic('/connection_controller/subscribe').processPrepared();
channelstreamConnection.connect();
}
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
js: use ES6 classes for polymer 2.x
r3172 checkViewChannels() {
polymer: prepare for 3.x migration
r3149 // subscribe to different channels data is sent.
var channels = [];
// subscribe to PR repo channel for PR's'
if (templateContext.pull_request_data.pull_request_id) {
var channelName = '/repo$' + templateContext.repo_name + '$/pr/' +
String(templateContext.pull_request_data.pull_request_id);
channels.push(channelName);
}
if (templateContext.commit_data.commit_id) {
var channelName = '/repo$' + templateContext.repo_name + '$/commit/' +
String(templateContext.commit_data.commit_id);
channels.push(channelName);
}
return channels;
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
/** subscribes users from channels in channelstream */
js: use ES6 classes for polymer 2.x
r3172 subscribeToChannelTopic(channels) {
polymer: prepare for 3.x migration
r3149 var channelstreamConnection = this.getChannelStreamConnection();
var toSubscribe = channelstreamConnection.calculateSubscribe(channels);
ccLog.debug('subscribeToChannelTopic', toSubscribe);
if (toSubscribe.length > 0) {
// if we are connected then subscribe
if (channelstreamConnection.connected) {
channelstreamConnection.subscribe(toSubscribe);
}
// not connected? just push channels onto the stack
else {
for (var i = 0; i < toSubscribe.length; i++) {
channelstreamConnection.push('channels', toSubscribe[i]);
}
}
}
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
/** publish received messages into correct topic */
js: use ES6 classes for polymer 2.x
r3172 receivedMessage(event) {
polymer: prepare for 3.x migration
r3149 for (var i = 0; i < event.detail.length; i++) {
var message = event.detail[i];
if (message.message.topic) {
ccLog.debug('publishing', message.message.topic);
$.Topic(message.message.topic).publish(message);
}
js: use ES6 classes for polymer 2.x
r3172 else if (message.type === 'presence') {
polymer: prepare for 3.x migration
r3149 $.Topic('/connection_controller/presence').publish(message);
}
else {
ccLog.warn('unhandled message', message);
}
}
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149
js: use ES6 classes for polymer 2.x
r3172 handleConnected(event) {
polymer: prepare for 3.x migration
r3149 var channelstreamConnection = this.getChannelStreamConnection();
channelstreamConnection.set('channelsState',
event.detail.channels_info);
channelstreamConnection.set('userState', event.detail.state);
channelstreamConnection.set('channels', event.detail.channels);
this.propagageChannelsState();
js: use ES6 classes for polymer 2.x
r3172 }
handleSubscribed(event) {
polymer: prepare for 3.x migration
r3149 var channelstreamConnection = this.getChannelStreamConnection();
var channelInfo = event.detail.channels_info;
var channelKeys = Object.keys(event.detail.channels_info);
for (var i = 0; i < channelKeys.length; i++) {
var key = channelKeys[i];
channelstreamConnection.set(['channelsState', key], channelInfo[key]);
}
channelstreamConnection.set('channels', event.detail.channels);
this.propagageChannelsState();
js: use ES6 classes for polymer 2.x
r3172 }
polymer: prepare for 3.x migration
r3149 /** propagates channel states on topics */
js: use ES6 classes for polymer 2.x
r3172 propagageChannelsState(event) {
polymer: prepare for 3.x migration
r3149 var channelstreamConnection = this.getChannelStreamConnection();
var channel_data = channelstreamConnection.channelsState;
var channels = channelstreamConnection.channels;
for (var i = 0; i < channels.length; i++) {
var key = channels[i];
$.Topic('/connection_controller/channel_update').publish(
{channel: key, state: channel_data[key]}
);
}
}
js: use ES6 classes for polymer 2.x
r3172 }
customElements.define(RhodecodeApp.is, RhodecodeApp);
polymer: prepare for 3.x migration
r3149 </script>
frontend: introduce rhodecode-app for more complex cross element wiring
r787 </dom-module>