[SSE] Add plugins.

apps/documenteditor/main/app/view/LeftMenu.js

@@ -141,6 +141,13 @@ define([
                 toggleGroup: 'leftMenuGroup'
             });
 
+            this.btnComments.hide();
+            this.btnChat.hide();
+
+            this.btnComments.on('click',        _.bind(this.onBtnMenuClick, this));
+            this.btnChat.on('click',            _.bind(this.onBtnMenuClick, this));
+            /** coauthoring end **/
+
             this.btnPlugins = new Common.UI.Button({
                 el: $('#left-btn-plugins'),
                 hint: this.tipPlugins,
@@ -148,15 +155,8 @@ define([
                 disabled: true,
                 toggleGroup: 'leftMenuGroup'
             });
-
-            this.btnComments.hide();
-            this.btnChat.hide();
             this.btnPlugins.hide();
-
-            this.btnComments.on('click',        _.bind(this.onBtnMenuClick, this));
-            this.btnChat.on('click',            _.bind(this.onBtnMenuClick, this));
             this.btnPlugins.on('click',         _.bind(this.onBtnMenuClick, this));
-            /** coauthoring end **/
 
             this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
@@ -279,12 +279,12 @@ define([
                     this.panelChat['hide']();
                     this.btnChat.toggle(false, true);
                 }
-                if (this.mode.canPlugins && this.panelPlugins) {
-                    this.panelPlugins['hide']();
-                    this.btnPlugins.toggle(false, true);
-                }
             }
             /** coauthoring end **/
+            if (this.mode.canPlugins && this.panelPlugins) {
+                this.panelPlugins['hide']();
+                this.btnPlugins.toggle(false, true);
+            }
         },
 
         isOpened: function() {

apps/spreadsheeteditor/main/app.js

@@ -157,7 +157,8 @@ require([
             'Main',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
-            'Common.Controllers.Comments'
+            'Common.Controllers.Comments',
+            'Common.Controllers.Plugins'
         ]
     });
 
@@ -182,7 +183,8 @@ require([
         'common/main/lib/util/LocalStorage',
         'common/main/lib/controller/Fonts',
         'common/main/lib/controller/Comments',
-        'common/main/lib/controller/Chat'
+        'common/main/lib/controller/Chat',
+        'common/main/lib/controller/Plugins'
     ], function() {
         app.start();
     });

apps/spreadsheeteditor/main/app/controller/LeftMenu.js

@@ -181,6 +181,14 @@ define([
             return this;
         },
 
+        enablePlugins: function() {
+            if (this.mode.canPlugins) {
+                this.leftMenu.btnPlugins.show();
+                this.leftMenu.setOptionsPanel('plugins', this.getApplication().getController('Common.Controllers.Plugins').getView('Common.Views.Plugins'));
+            } else
+                this.leftMenu.btnPlugins.hide();
+        },
+
         clickMenuFileItem: function(menu, action, isopts) {
             var close_menu = true;
             switch (action) {
@@ -496,6 +504,7 @@ define([
             this.leftMenu.btnComments.setDisabled(true);
             this.leftMenu.btnChat.setDisabled(true);
             /** coauthoring end **/
+            this.leftMenu.btnPlugins.setDisabled(true);
 
             this.leftMenu.getMenu('file').setMode({isDisconnected: true});
             if ( this.dlgSearch ) {
@@ -605,7 +614,14 @@ define([
                         $.fn.dropdown.Constructor.prototype.keydown.call(menu_opened[0], e);
                         return false;
                     }
-                    if (this.leftMenu.btnFile.pressed ||  this.leftMenu.btnAbout.pressed ||
+                    if (this.mode.canPlugins && this.leftMenu.panelPlugins) {
+                        menu_opened = this.leftMenu.panelPlugins.$el.find('#menu-plugin-container.open > [data-toggle="dropdown"]');
+                        if (menu_opened.length) {
+                            $.fn.dropdown.Constructor.prototype.keydown.call(menu_opened[0], e);
+                            return false;
+                        }
+                    }
+                    if (this.leftMenu.btnFile.pressed ||  this.leftMenu.btnAbout.pressed || this.leftMenu.btnPlugins.pressed ||
                         $(e.target).parents('#left-menu').length && this.api.isCellEdited!==true) {
                         this.leftMenu.close();
                         Common.NotificationCenter.trigger('layout:changed', 'leftmenu');

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -136,6 +136,7 @@ define([
 
                 // Initialize api gateway
                 this.editorConfig = {};
+                this.plugins = undefined;
                 Common.Gateway.on('init', _.bind(this.loadConfig, this));
                 Common.Gateway.on('showmessage', _.bind(this.onExternalMessage, this));
                 Common.Gateway.on('opendocument', _.bind(this.loadDocument, this));
@@ -250,6 +251,8 @@ define([
                 this.appOptions.canBackToFolder = (this.editorConfig.canBackToFolder!==false) && (typeof (this.editorConfig.customization) == 'object')
                                                   && (typeof (this.editorConfig.customization.goback) == 'object') && !_.isEmpty(this.editorConfig.customization.goback.url);
                 this.appOptions.canBack         = this.editorConfig.nativeApp !== true && this.appOptions.canBackToFolder === true;
+                this.appOptions.canPlugins      = false;
+                this.plugins                    = this.editorConfig.plugins;
 
                 this.headerView = this.getApplication().getController('Viewport').getView('Common.Views.Header');
                 this.headerView.setCanBack(this.appOptions.canBackToFolder === true);
@@ -584,10 +587,18 @@ define([
                     statusbarView               = statusbarController.getView('Statusbar'),
                     leftMenuView                = leftmenuController.getView('LeftMenu'),
                     documentHolderView          = documentHolderController.getView('DocumentHolder'),
-                    chatController              = application.getController('Common.Controllers.Chat');
+                    chatController              = application.getController('Common.Controllers.Chat'),
+                    pluginsController           = application.getController('Common.Controllers.Plugins');
 
                 leftMenuView.getMenu('file').loadDocument({doc:me.appOptions.spreadsheet});
                 leftmenuController.setMode(me.appOptions).createDelayedElements().setApi(me.api);
+
+                 if (!me.appOptions.isLightVersion && !me.appOptions.isEditMailMerge && !me.appOptions.isEditDiagram) {
+                    pluginsController.setApi(me.api);
+                    me.updatePluginsList(me.plugins);
+                    me.api.asc_registerCallback('asc_onPluginsInit', _.bind(me.updatePluginsList, me));
+                }
+
                 leftMenuView.disableMenu('all',false);
 
                 if (!me.appOptions.isEditMailMerge && !me.appOptions.isEditDiagram && me.appOptions.canBranding) {
@@ -1685,6 +1696,61 @@ define([
                 if (url) this.iframePrint.src = url;
             },
 
+            updatePluginsList: function(plugins) {
+                var pluginStore = this.getApplication().getCollection('Common.Collections.Plugins'),
+                    isEdit = this.appOptions.isEdit;
+                if (pluginStore && plugins) {
+                    var arr = [];
+                    plugins.pluginsData.forEach(function(item){
+                        var variations = item.variations,
+                            variationsArr = [];
+                        variations.forEach(function(itemVar){
+                            var isSupported = false;
+                            for (var i=0; i<itemVar.EditorsSupport.length; i++){
+                                if (itemVar.EditorsSupport[i]=='cell') {
+                                    isSupported = true; break;
+                                }
+                            }
+                            if (isSupported && (isEdit || itemVar.isViewer))
+                                variationsArr.push(new Common.Models.PluginVariation({
+                                    description: itemVar.description,
+                                    index: variationsArr.length,
+                                    url : itemVar.url,
+                                    icons  : itemVar.icons,
+                                    isViewer: itemVar.isViewer,
+                                    EditorsSupport: itemVar.EditorsSupport,
+                                    isVisual: itemVar.isVisual,
+                                    isModal: itemVar.isModal,
+                                    isInsideMode: itemVar.isInsideMode,
+                                    initDataType: itemVar.initDataType,
+                                    initData: itemVar.initData,
+                                    isUpdateOleOnResize : itemVar.isUpdateOleOnResize,
+                                    buttons: itemVar.buttons
+                                }));
+                        });
+                        if (variationsArr.length>0)
+                            arr.push(new Common.Models.Plugin({
+                                name : item.name,
+                                guid: item.guid,
+                                baseUrl : item.baseUrl,
+                                variations: variationsArr,
+                                currentVariation: 0
+                            }));
+                    });
+
+                    pluginStore.reset(arr);
+
+                    this.appOptions.pluginsPath = (plugins.url);
+                    this.appOptions.canPlugins = (arr.length>0);
+                } else {
+                    this.appOptions.pluginsPath = '';
+                    this.appOptions.canPlugins = false;
+                }
+                if (this.appOptions.canPlugins)
+                    this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions);
+                this.getApplication().getController('LeftMenu').enablePlugins();
+            },
+            
             leavePageText: 'You have unsaved changes in this document. Click \'Stay on this Page\' then \'Save\' to save them. Click \'Leave this Page\' to discard all the unsaved changes.',
             criticalErrorTitle: 'Error',
             notcriticalErrorTitle: 'Warning',

apps/spreadsheeteditor/main/app/template/LeftMenu.template

@@ -6,6 +6,7 @@
         <button id="left-btn-comments" class="btn btn-category" content-target="left-panel-comments"><span class="btn-icon img-toolbarmenu btn-menu-comments">&nbsp;</span></button>
         <button id="left-btn-chat" class="btn btn-category" content-target="left-panel-chat"><span class="btn-icon img-toolbarmenu btn-menu-chat">&nbsp;</span></button>
         <!-- /** coauthoring end **/ -->
+        <button id="left-btn-plugins" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-plugin">&nbsp;</span></button>
         <button id="left-btn-support" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-support">&nbsp;</span></button>
         <button id="left-btn-about" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-about">&nbsp;</span></button>
     </div>
@@ -14,5 +15,6 @@
         <div id="left-panel-comments" class="" style="display: none;" />
         <div id="left-panel-chat" class="" style="display: none;" />
         <!-- /** coauthoring end **/ -->
+        <div id="left-panel-plugins" class="" style="display: none; height: 100%;" />
     </div>
 </div>

apps/spreadsheeteditor/main/app/view/LeftMenu.js

@@ -42,6 +42,7 @@ define([
     'common/main/lib/view/Chat',
     /** coauthoring end **/
     'common/main/lib/view/SearchDialog',
+    'common/main/lib/view/Plugins',
     'spreadsheeteditor/main/app/view/FileMenu'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
@@ -61,6 +62,7 @@ define([
                 'click #left-btn-comments': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
                 /** coauthoring end **/
+                'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -136,6 +138,16 @@ define([
             this.btnChat.on('click',            _.bind(this.onBtnMenuClick, this));
             /** coauthoring end **/
 
+            this.btnPlugins = new Common.UI.Button({
+                el: $('#left-btn-plugins'),
+                hint: this.tipPlugins,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'leftMenuGroup'
+            });
+            this.btnPlugins.hide();
+            this.btnPlugins.on('click',         _.bind(this.onBtnMenuClick, this));
+
             this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
             this.btnFile.on('toggle',           _.bind(this.onBtnMenuToggle, this));
@@ -205,6 +217,12 @@ define([
                         this.panelChat['hide']();
                }
             }
+            if (this.mode.canPlugins && this.panelPlugins) {
+                if (this.btnPlugins.pressed) {
+                    this.panelPlugins.show();
+                } else
+                    this.panelPlugins['hide']();
+            }
         },
 
         setOptionsPanel: function(name, panel) {
@@ -212,6 +230,9 @@ define([
                 this.panelChat = panel.render('#left-panel-chat');
             } else if (name == 'comment') {
                 this.panelComments = panel;
+            } else
+            if (name == 'plugins' && !this.panelPlugins) {
+                this.panelPlugins = panel.render('#left-panel-plugins');
             }
         },
 
@@ -245,6 +266,10 @@ define([
                 }
             }
             /** coauthoring end **/
+            if (this.mode.canPlugins && this.panelPlugins) {
+                this.panelPlugins['hide']();
+                this.btnPlugins.toggle(false, true);
+            }
         },
 
         isOpened: function() {
@@ -264,6 +289,7 @@ define([
             this.btnComments.setDisabled(false);
             this.btnChat.setDisabled(false);
             /** coauthoring end **/
+            this.btnPlugins.setDisabled(false);
         },
 
         showMenu: function(menu) {
@@ -319,6 +345,7 @@ define([
         tipAbout    : 'About',
         tipSupport  : 'Feedback & Support',
         tipFile     : 'File',
-        tipSearch   : 'Search'
+        tipSearch   : 'Search',
+        tipPlugins  : 'Add-ons'
     }, SSE.Views.LeftMenu || {}));
 });

apps/spreadsheeteditor/main/app_dev.js

@@ -147,7 +147,8 @@ require([
             'Main',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
-            'Common.Controllers.Comments'
+            'Common.Controllers.Comments',
+            'Common.Controllers.Plugins'
         ]
     });
 
@@ -172,7 +173,8 @@ require([
         'common/main/lib/util/LocalStorage',
         'common/main/lib/controller/Fonts',
         'common/main/lib/controller/Comments',
-        'common/main/lib/controller/Chat'
+        'common/main/lib/controller/Chat',
+        'common/main/lib/controller/Plugins'
     ], function() {
         app.start();
     });

apps/spreadsheeteditor/main/locale/en.json

@@ -84,6 +84,9 @@
   "Common.Views.OpenDialog.txtSpace": "Space",
   "Common.Views.OpenDialog.txtTab": "Tab",
   "Common.Views.OpenDialog.txtTitle": "Choose %1 options",
+  "Common.Views.Plugins.strPlugins": "Add-ons",
+  "Common.Views.Plugins.textLoading": "Loading",
+  "Common.Views.Plugins.textStart": "Start",
   "SSE.Controllers.DocumentHolder.guestText": "Guest",
   "SSE.Controllers.DocumentHolder.textChangeColumnWidth": "Column Width {0} symbols ({1} pixels)",
   "SSE.Controllers.DocumentHolder.textChangeRowHeight": "Row Height {0} points ({1} pixels)",
@@ -625,6 +628,7 @@
   "SSE.Views.LeftMenu.tipChat": "Chat",
   "SSE.Views.LeftMenu.tipComments": "Comments",
   "SSE.Views.LeftMenu.tipFile": "File",
+  "SSE.Views.LeftMenu.tipPlugins": "Add-ons",
   "SSE.Views.LeftMenu.tipSearch": "Search",
   "SSE.Views.LeftMenu.tipSupport": "Feedback & Support",
   "SSE.Views.MainSettingsPrint.okButtonText": "Save",

apps/spreadsheeteditor/main/resources/less/app.less

@@ -111,6 +111,7 @@
 @import "../../../../common/main/resources/less/tabbar.less";
 @import "../../../../common/main/resources/less/common.less";
 @import "../../../../common/main/resources/less/opendialog.less";
+@import "../../../../common/main/resources/less/plugins.less";
 
 // App
 // --------------------------------------------------

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -14,6 +14,7 @@
             .toolbar-btn-icon(btn-menu-chat,        59, @toolbar-icon-size);
             .toolbar-btn-icon(btn-menu-about,       58, @toolbar-icon-size);
             .toolbar-btn-icon(btn-menu-support,     75, @toolbar-icon-size);
+            .toolbar-btn-icon(btn-menu-plugin,      75, @toolbar-icon-size);
 
             button.notify .btn-menu-chat,
             button.notify.over > .btn-menu-chat {background-position: -0*@toolbar-icon-size -60*@toolbar-icon-size;}