Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[Common] fill plugins panel on collection events

Browse source
This commit is contained in:
Maxim Kadushkin 2017-09-04 17:25:45 +03:00
parent f71fb5a370
commit e462f5851f
2 changed files with 83 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
apps/common/main/lib/controller/Plugins.js
View file

@ -61,9 +61,9 @@ define([
if ( appOptions.isEdit && !appOptions.isEditMailMerge && !appOptions.isEditDiagram ) { if ( appOptions.isEdit && !appOptions.isEditMailMerge && !appOptions.isEditDiagram ) {
var tab = {action: 'plugins', caption: me.panelPlugins.groupCaption}; var tab = {action: 'plugins', caption: me.panelPlugins.groupCaption};
var $panel = me.panelPlugins.getPanel(); me.$toolbarPanelPlugins = me.panelPlugins.getPanel();
toolbar.addTab(tab, $panel, 4); // TODO: clear plugins list in left panel toolbar.addTab(tab, me.$toolbarPanelPlugins, 4); // TODO: clear plugins list in left panel
} }
} }
}, },
@ -82,11 +82,18 @@ define([
}, },
onLaunch: function() { onLaunch: function() {
var store = this.getApplication().getCollection('Common.Collections.Plugins');
this.panelPlugins= this.createView('Common.Views.Plugins', { this.panelPlugins= this.createView('Common.Views.Plugins', {
storePlugins: this.getApplication().getCollection('Common.Collections.Plugins') storePlugins: store
}); });
this.panelPlugins.on('render:after', _.bind(this.onAfterRender, this)); this.panelPlugins.on('render:after', _.bind(this.onAfterRender, this));
store.on({
add: this.onAddPlugin.bind(this),
reset: this.onResetPlugins.bind(this)
});
this._moveOffset = {x:0, y:0}; this._moveOffset = {x:0, y:0};
}, },
@ -105,13 +112,6 @@ define([
setMode: function(mode) { setMode: function(mode) {
if (mode.canPlugins) { if (mode.canPlugins) {
this.updatePluginsList(); this.updatePluginsList();
var toolbar = this.getApplication().getController('Toolbar').getView('Toolbar');
var $panel = toolbar.$el.find('#plugins-panel');
if ( $panel ) {
this.panelPlugins.renderTo( $panel );
this.panelPlugins._onAppReady();
}
} }
}, },
@ -173,6 +173,28 @@ define([
this.api.asc_pluginsRegister('', arr); this.api.asc_pluginsRegister('', arr);
}, },
onAddPlugin: function (model) {
var me = this;
var btn = me.panelPlugins.createPluginButton(model);
var _group = $('> .group', me.$toolbarPanelPlugins);
var $slot = $('<span class="slot"></span>').appendTo(_group);
btn.render($slot);
},
onResetPlugins: function (collection) {
var me = this;
me.$toolbarPanelPlugins.empty();
var _group = $('<div class="group"></div>');
collection.each(function (model) {
var $slot = $('<span class="slot"></span>').appendTo(_group);
me.panelPlugins.createPluginButton(model).render($slot);
});
_group.appendTo(me.$toolbarPanelPlugins);
},
onSelectPlugin: function(picker, item, record, e){ onSelectPlugin: function(picker, item, record, e){
var btn = $(e.target); var btn = $(e.target);
if (btn && btn.hasClass('plugin-caret')) { if (btn && btn.hasClass('plugin-caret')) {

92
apps/common/main/lib/view/Plugins.js
View file

@ -73,7 +73,6 @@ define([
initialize: function(options) { initialize: function(options) {
_.extend(this, options); _.extend(this, options);
this._locked = false; this._locked = false;
this._pluginsIsInited = false;
this._state = { this._state = {
DisabledControls: true DisabledControls: true
}; };
@ -86,9 +85,8 @@ define([
}, },
render: function(el) { render: function(el) {
el = el || this.el; el && (this.$el = $(el));
$(el).html(this.template({scope: this})); this.$el.html(this.template({scope: this}));
this.$el = $(el);
this.viewPluginsList = new Common.UI.DataView({ this.viewPluginsList = new Common.UI.DataView({
el: $('#plugins-list'), el: $('#plugins-list'),
@ -109,7 +107,7 @@ define([
this.pluginName = $('#current-plugin-header label'); this.pluginName = $('#current-plugin-header label');
this.pluginsPanel = $('#plugins-box'); this.pluginsPanel = $('#plugins-box');
this.pluginsMask = $('#plugins-mask'); this.pluginsMask = $('#plugins-mask', this.$el);
this.currentPluginPanel = $('#current-plugin-box'); this.currentPluginPanel = $('#current-plugin-box');
this.currentPluginFrame = $('#current-plugin-frame'); this.currentPluginFrame = $('#current-plugin-frame');
@ -124,8 +122,8 @@ define([
getPanel: function () { getPanel: function () {
var _panel = $('<section id="plugins-panel" class="panel" data-tab="plugins"></section>'); var _panel = $('<section id="plugins-panel" class="panel" data-tab="plugins"></section>');
var _group = $('<div class="group"></div>');
if ( !this.storePlugins.isEmpty() ) { if ( !this.storePlugins.isEmpty() ) {
var _group = $('<div class="group"></div>');
this.storePlugins.each(function (model) { this.storePlugins.each(function (model) {
// var btn = new Common.UI.Button({ // var btn = new Common.UI.Button({
// cls: 'btn-toolbar x-huge icon-top', // cls: 'btn-toolbar x-huge icon-top',
@ -138,10 +136,9 @@ define([
// var $slot = $('<span class="slot"></span>').appendTo(_group); // var $slot = $('<span class="slot"></span>').appendTo(_group);
// btn.render($slot); // btn.render($slot);
}); });
_group.appendTo(_panel);
} }
_group.appendTo(_panel);
return _panel; return _panel;
}, },
@ -155,13 +152,13 @@ define([
icons = modes[model.get('currentVariation')].get('icons'), icons = modes[model.get('currentVariation')].get('icons'),
_icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)], _icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)],
btn = new Common.UI.Button({ btn = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconImg: _icon_url, iconImg: _icon_url,
caption: model.get('name'), caption: model.get('name'),
menu: modes && modes.length > 1, menu: modes && modes.length > 1,
split: modes && modes.length > 1, split: modes && modes.length > 1,
value: guid, value: guid,
hint: model.get('name') hint: model.get('name')
}); });
var $slot = $('<span class="slot"></span>').appendTo(_group); var $slot = $('<span class="slot"></span>').appendTo(_group);
@ -276,40 +273,53 @@ define([
}, },
_onAppReady: function (mode) { _onAppReady: function (mode) {
if (this._pluginsIsInited) return; },
createPluginButton: function (model) {
var me = this; var me = this;
this._pluginsIsInited = (this.storePlugins.length>0);
this.storePlugins.each(function(model) {
var _plugin_btn = model.get('button');
if ( _plugin_btn ) { var modes = model.get('variations'),
_plugin_btn.on('click', function(b, e) { guid = model.get('guid'),
me.fireEvent('plugin:select', [b.options.value, 0]); icons = modes[model.get('currentVariation')].get('icons'),
icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)];
var btn = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconImg: icon_url,
caption: model.get('name'),
menu: modes && modes.length > 1,
split: modes && modes.length > 1,
value: guid,
hint: model.get('name')
});
if ( btn.split ) {
var _menu_items = [];
_.each(model.get('variations'), function(version, index) {
_menu_items.push({
caption : index > 0 ? version.get('description') : me.textStart,
value : parseInt(version.get('index'))
}); });
});
if ( _plugin_btn.split ) { btn.setMenu(
var _menu_items = []; new Common.UI.Menu({
_.each(model.get('variations'), function(version, index) { items: _menu_items,
_menu_items.push({ pluginGuid: model.get('guid')
caption : index > 0 ? version.get('description') : me.textStart, })
value : parseInt(version.get('index')) );
});
});
_plugin_btn.setMenu( btn.menu.on('item:click', function(menu, item, e) {
new Common.UI.Menu({ me.fireEvent('plugin:select', [menu.options.pluginGuid, item.value]);
items: _menu_items, });
pluginGuid: model.get('guid') }
})
);
_plugin_btn.menu.on('item:click', function(menu, item, e) { btn.on('click', function(b, e) {
me.fireEvent('plugin:select', [menu.options.pluginGuid, item.value]); me.fireEvent('plugin:select', [b.options.value, 0]);
});
}
}
}); });
model.set('button', btn);
me.lockedControls.push(btn);
return btn;
}, },
strPlugins: 'Plugins', strPlugins: 'Plugins',