From 1ea8cea6651849f8c93754d268ba57b9c962d653 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 4 Sep 2017 11:12:30 +0300 Subject: [PATCH] [Common] fill plugins panel on collection events --- apps/common/main/lib/controller/Plugins.js | 42 +++++++--- apps/common/main/lib/view/Plugins.js | 92 ++++++++++++---------- 2 files changed, 83 insertions(+), 51 deletions(-) diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index f96151968..b4a32a9b8 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/apps/common/main/lib/controller/Plugins.js @@ -61,9 +61,9 @@ define([ if ( appOptions.isEdit && !appOptions.isEditMailMerge && !appOptions.isEditDiagram ) { 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() { + var store = this.getApplication().getCollection('Common.Collections.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)); + store.on({ + add: this.onAddPlugin.bind(this), + reset: this.onResetPlugins.bind(this) + }); + + this._moveOffset = {x:0, y:0}; }, @@ -105,13 +112,6 @@ define([ setMode: function(mode) { if (mode.canPlugins) { 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); }, + onAddPlugin: function (model) { + var me = this; + var btn = me.panelPlugins.createPluginButton(model); + + var _group = $('> .group', me.$toolbarPanelPlugins); + var $slot = $('').appendTo(_group); + btn.render($slot); + }, + + onResetPlugins: function (collection) { + var me = this; + me.$toolbarPanelPlugins.empty(); + + var _group = $('
'); + collection.each(function (model) { + var $slot = $('').appendTo(_group); + me.panelPlugins.createPluginButton(model).render($slot); + }); + + _group.appendTo(me.$toolbarPanelPlugins); + }, + onSelectPlugin: function(picker, item, record, e){ var btn = $(e.target); if (btn && btn.hasClass('plugin-caret')) { diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js index dbb60954a..07baf5720 100644 --- a/apps/common/main/lib/view/Plugins.js +++ b/apps/common/main/lib/view/Plugins.js @@ -73,7 +73,6 @@ define([ initialize: function(options) { _.extend(this, options); this._locked = false; - this._pluginsIsInited = false; this._state = { DisabledControls: true }; @@ -86,9 +85,8 @@ define([ }, render: function(el) { - el = el || this.el; - $(el).html(this.template({scope: this})); - this.$el = $(el); + el && (this.$el = $(el)); + this.$el.html(this.template({scope: this})); this.viewPluginsList = new Common.UI.DataView({ el: $('#plugins-list'), @@ -109,7 +107,7 @@ define([ this.pluginName = $('#current-plugin-header label'); this.pluginsPanel = $('#plugins-box'); - this.pluginsMask = $('#plugins-mask'); + this.pluginsMask = $('#plugins-mask', this.$el); this.currentPluginPanel = $('#current-plugin-box'); this.currentPluginFrame = $('#current-plugin-frame'); @@ -124,8 +122,8 @@ define([ getPanel: function () { var _panel = $('
'); + var _group = $('
'); if ( !this.storePlugins.isEmpty() ) { - var _group = $('
'); this.storePlugins.each(function (model) { // var btn = new Common.UI.Button({ // cls: 'btn-toolbar x-huge icon-top', @@ -138,10 +136,9 @@ define([ // var $slot = $('').appendTo(_group); // btn.render($slot); }); - - _group.appendTo(_panel); } + _group.appendTo(_panel); return _panel; }, @@ -155,13 +152,13 @@ define([ icons = modes[model.get('currentVariation')].get('icons'), _icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)], 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') + 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') }); var $slot = $('').appendTo(_group); @@ -276,40 +273,53 @@ define([ }, _onAppReady: function (mode) { - if (this._pluginsIsInited) return; + }, + createPluginButton: function (model) { var me = this; - this._pluginsIsInited = (this.storePlugins.length>0); - this.storePlugins.each(function(model) { - var _plugin_btn = model.get('button'); - if ( _plugin_btn ) { - _plugin_btn.on('click', function(b, e) { - me.fireEvent('plugin:select', [b.options.value, 0]); + var modes = model.get('variations'), + guid = model.get('guid'), + 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 ) { - 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')) - }); - }); + btn.setMenu( + new Common.UI.Menu({ + items: _menu_items, + pluginGuid: model.get('guid') + }) + ); - _plugin_btn.setMenu( - new Common.UI.Menu({ - items: _menu_items, - pluginGuid: model.get('guid') - }) - ); + btn.menu.on('item:click', function(menu, item, e) { + me.fireEvent('plugin:select', [menu.options.pluginGuid, item.value]); + }); + } - _plugin_btn.menu.on('item:click', function(menu, item, e) { - me.fireEvent('plugin:select', [menu.options.pluginGuid, item.value]); - }); - } - } + btn.on('click', function(b, e) { + me.fireEvent('plugin:select', [b.options.value, 0]); }); + + model.set('button', btn); + me.lockedControls.push(btn); + return btn; }, strPlugins: 'Plugins',