[PE] Add plugins.

apps/presentationeditor/main/app.js

@@ -157,7 +157,8 @@ require([
             , 'Common.Controllers.Chat',
             'Common.Controllers.Comments',
             /** coauthoring end **/
-            'Common.Controllers.ExternalDiagramEditor'
+            ,'Common.Controllers.Plugins'
+            ,'Common.Controllers.ExternalDiagramEditor'
         ]
     });
 
@@ -184,6 +185,7 @@ require([
         ,'common/main/lib/controller/Comments',
         'common/main/lib/controller/Chat',
         /** coauthoring end **/
+        'common/main/lib/controller/Plugins',
         'presentationeditor/main/app/view/ChartSettings',
         'common/main/lib/controller/ExternalDiagramEditor'
     ], function() {

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

@@ -172,6 +172,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) {
@@ -331,6 +339,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 ) {
@@ -445,7 +454,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.leftMenu.close();
                         Common.NotificationCenter.trigger('layout:changed', 'leftmenu');

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

@@ -127,6 +127,7 @@ define([
                     // Initialize api gateway
                     this.editorConfig = {};
                     this.appOptions = {};
+                    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));
@@ -222,6 +223,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.getApplication()
                     .getController('Viewport')
@@ -606,7 +609,8 @@ define([
                     fontsController             = application.getController('Common.Controllers.Fonts'),
                     rightmenuController         = application.getController('RightMenu'),
                     leftmenuController          = application.getController('LeftMenu'),
-                    chatController              = application.getController('Common.Controllers.Chat');
+                    chatController              = application.getController('Common.Controllers.Chat'),
+                    pluginsController           = application.getController('Common.Controllers.Plugins');
 
                 leftmenuController.getView('LeftMenu').getMenu('file').loadDocument({doc:me.document});
                 leftmenuController.setMode(me.appOptions).setApi(me.api).createDelayedElements();
@@ -614,6 +618,10 @@ define([
                 chatController.setApi(this.api).setMode(this.appOptions);
                 application.getController('Common.Controllers.ExternalDiagramEditor').setApi(this.api).loadConfig({config:this.editorConfig, customization: this.editorConfig.customization});
 
+                pluginsController.setApi(me.api);
+                me.updatePluginsList(me.plugins);
+                me.api.asc_registerCallback('asc_onPluginsInit', _.bind(me.updatePluginsList, me));
+
                 documentHolderController.setApi(me.api);
                 documentHolderController.createDelayedElements();
                 statusbarController.createDelayedElements();
@@ -1478,6 +1486,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]=='word') {
+                                    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();
+            },
+
             // Translation
             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.',
             defaultTitleText: 'ONLYOFFICE Presentation Editor',

apps/presentationeditor/main/app/template/LeftMenu.template

@@ -7,6 +7,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>
@@ -15,5 +16,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/presentationeditor/main/app/view/LeftMenu.js

@@ -50,6 +50,7 @@ define([
     'common/main/lib/view/Comments',
     'common/main/lib/view/Chat',
     /** coauthoring end **/
+    'common/main/lib/view/Plugins',
     'common/main/lib/view/SearchDialog',
     'presentationeditor/main/app/view/FileMenu'
 ], function (menuTemplate, $, _, Backbone) {
@@ -69,6 +70,7 @@ define([
                 /** coauthoring begin **/
                 'click #left-btn-comments': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
+                'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
                 /** coauthoring end **/
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
@@ -154,6 +156,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.btnThumbs.on('click',          _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
@@ -216,8 +228,8 @@ define([
             (!btn.pressed) && this.fireEvent('panel:show', [this, btn.options.action, btn.pressed]);
         },
 
-        /** coauthoring begin **/
         onCoauthOptions: function(e) {
+            /** coauthoring begin **/
             if (this.mode.canCoAuthoring) {
                 if (this.mode.canComments) {
                     if (this.btnComments.pressed && this.btnComments.$el.hasClass('notify'))
@@ -235,16 +247,28 @@ define([
                         this.panelChat['hide']();
                 }
             }
+            /** coauthoring end **/
+            if (this.mode.canPlugins && this.panelPlugins) {
+                if (this.btnPlugins.pressed) {
+                    this.panelPlugins.show();
+                } else
+                    this.panelPlugins['hide']();
+            }
         },
 
         setOptionsPanel: function(name, panel) {
+            /** coauthoring begin **/
             if (name == 'chat') {
                 this.panelChat = panel.render('#left-panel-chat');
             } else if (name == 'comment') {
                 this.panelComments = panel;
+            } else /** coauthoring end **/
+            if (name == 'plugins' && !this.panelPlugins) {
+                this.panelPlugins = panel.render('#left-panel-plugins');
             }
         },
 
+        /** coauthoring begin **/
         markCoauthOptions: function(opt, ignoreDisabled) {
             if (opt=='chat' && this.btnChat.isVisible() &&
                     !this.btnChat.isDisabled() && !this.btnChat.pressed) {
@@ -276,6 +300,10 @@ define([
                 }
             }
             /** coauthoring end **/
+            if (this.mode.canPlugins && this.panelPlugins) {
+                this.panelPlugins['hide']();
+                this.btnPlugins.toggle(false, true);
+            }
             this.fireEvent('panel:show', [this, '', false]);
         },
 
@@ -297,6 +325,7 @@ define([
             this.btnComments.setDisabled(disable);
             this.btnChat.setDisabled(disable);
             /** coauthoring end **/
+            this.btnPlugins.setDisabled(disable);
         },
 
         showMenu: function(menu) {
@@ -352,6 +381,7 @@ define([
         tipSupport  : 'Feedback & Support',
         tipFile     : 'File',
         tipSearch   : 'Search',
-        tipSlides: 'Slides'
+        tipSlides: 'Slides',
+        tipPlugins  : 'Add-ons'
     }, PE.Views.LeftMenu || {}));
 });

apps/presentationeditor/main/app_dev.js

@@ -148,7 +148,8 @@ require([
             , 'Common.Controllers.Chat',
             'Common.Controllers.Comments',
             /** coauthoring end **/
-            'Common.Controllers.ExternalDiagramEditor'
+            ,'Common.Controllers.Plugins'
+            ,'Common.Controllers.ExternalDiagramEditor'
         ]
     });
 
@@ -175,6 +176,7 @@ require([
         ,'common/main/lib/controller/Comments',
         'common/main/lib/controller/Chat',
         /** coauthoring end **/
+        'common/main/lib/controller/Plugins',
         'presentationeditor/main/app/view/ChartSettings',
         'common/main/lib/controller/ExternalDiagramEditor'
     ], function() {

apps/presentationeditor/main/locale/en.json

@@ -91,6 +91,9 @@
   "Common.Views.InsertTableDialog.txtMinText": "The minimum value for this field is {0}.",
   "Common.Views.InsertTableDialog.txtRows": "Number of Rows",
   "Common.Views.InsertTableDialog.txtTitle": "Table Size",
+  "Common.Views.Plugins.strPlugins": "Add-ons",
+  "Common.Views.Plugins.textLoading": "Loading",
+  "Common.Views.Plugins.textStart": "Start",
   "PE.Controllers.LeftMenu.newDocumentTitle": "Unnamed presentation",
   "PE.Controllers.LeftMenu.requestEditRightsText": "Requesting editing rights...",
   "PE.Controllers.LeftMenu.textNoTextFound": "The data you have been searching for could not be found. Please adjust your search options.",
@@ -420,6 +423,7 @@
   "PE.Views.LeftMenu.tipChat": "Chat",
   "PE.Views.LeftMenu.tipComments": "Comments",
   "PE.Views.LeftMenu.tipFile": "File",
+  "PE.Views.LeftMenu.tipPlugins": "Add-ons",
   "PE.Views.LeftMenu.tipSearch": "Search",
   "PE.Views.LeftMenu.tipSlides": "Slides",
   "PE.Views.LeftMenu.tipSupport": "Feedback & Support",

apps/presentationeditor/main/resources/less/app.less

@@ -109,6 +109,7 @@
 @import "../../../../common/main/resources/less/scroller.less";
 @import "../../../../common/main/resources/less/synchronize-tip.less";
 @import "../../../../common/main/resources/less/common.less";
+@import "../../../../common/main/resources/less/plugins.less";
 
 // App
 // --------------------------------------------------

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -15,6 +15,7 @@
             .toolbar-btn-icon(btn-menu-chat,        53, @toolbar-icon-size);
             .toolbar-btn-icon(btn-menu-about,       55, @toolbar-icon-size);
             .toolbar-btn-icon(btn-menu-support,     68, @toolbar-icon-size);
+            .toolbar-btn-icon(btn-menu-plugin,      73, @toolbar-icon-size);
 
             button.notify .btn-menu-chat,
             button.notify.over > .btn-menu-chat {background-position: -0*@toolbar-icon-size -54*@toolbar-icon-size;}