diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js index 92a0380f1..c863f3580 100644 --- a/apps/common/main/lib/controller/Plugins.js +++ b/apps/common/main/lib/controller/Plugins.js @@ -55,7 +55,10 @@ define([ initialize: function() { }, - events: { + events: function() { + return { + 'click #id-plugin-close':_.bind(this.onToolClose,this) + }; }, onLaunch: function() { @@ -83,6 +86,7 @@ define([ onAfterRender: function(historyView) { historyView.viewPluginsList.on('item:click', _.bind(this.onSelectPlugin, this)); + this.bindViewEvents(this.panelPlugins, this.events); }, updatePluginsList: function() { @@ -131,34 +135,40 @@ define([ var variation = plugin.get_Variations()[0]; if (!variation.get_Visual()) return; - var me = this, - arrBtns = variation.get_Buttons(), - newBtns = {}; + if (variation.get_InsideMode()) { + this.panelPlugins.openInsideMode(plugin.get_Name(), ((plugin.get_BaseUrl().length == 0) ? this.panelPlugins.pluginsPath : plugin.get_BaseUrl()) + variation.get_Url()); + } else { + var me = this, + arrBtns = variation.get_Buttons(), + newBtns = {}; - if (_.isArray(arrBtns)) { - _.each(arrBtns, function(b, index){ - newBtns[index] = {text: b.text, cls: 'custom' + ((b.primary) ? ' primary' : '')}; + if (_.isArray(arrBtns)) { + _.each(arrBtns, function(b, index){ + newBtns[index] = {text: b.text, cls: 'custom' + ((b.primary) ? ' primary' : '')}; + }); + } + + var _baseUrl = (plugin.get_BaseUrl().length == 0) ? me.panelPlugins.pluginsPath : plugin.get_BaseUrl(); + me.pluginDlg = new Common.Views.PluginDlg({ + title: plugin.get_Name(), + url: _baseUrl + variation.get_Url(), + buttons: newBtns, + toolcallback: _.bind(this.onToolClose, this) }); + me.pluginDlg.on('render:after', function(obj){ + obj.getChild('.footer .dlg-btn').on('click', _.bind(me.onDlgBtnClick, me)); + }).on('close', function(obj){ + me.pluginDlg = undefined; + }); + me.pluginDlg.show(); } - - var _baseUrl = (plugin.get_BaseUrl().length == 0) ? me.panelPlugins.pluginsPath : plugin.get_BaseUrl(); - me.pluginDlg = new Common.Views.PluginDlg({ - title: plugin.get_Name(), - url: _baseUrl + variation.get_Url(), - buttons: newBtns, - toolcallback: _.bind(this.onToolClose, this) - }); - me.pluginDlg.on('render:after', function(obj){ - obj.getChild('.footer .dlg-btn').on('click', _.bind(me.onDlgBtnClick, me)); - }).on('close', function(obj){ - me.pluginDlg = undefined; - }); - me.pluginDlg.show(); }, onPluginClose: function() { if (this.pluginDlg) this.pluginDlg.close(); + else + this.panelPlugins.closeInsideMode(); }, onDlgBtnClick: function(event) { diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js index 5de009b37..27df8478d 100644 --- a/apps/common/main/lib/view/Plugins.js +++ b/apps/common/main/lib/view/Plugins.js @@ -60,7 +60,10 @@ define([ '', '', '
' @@ -98,6 +101,10 @@ define([ }); this.lockedControls.push(this.viewPluginsList); + this.pluginName = $('#current-plugin-header label'); + this.pluginsPanel = $('#plugins-box'); + this.currentPluginPanel = $('#current-plugin-box'); + this.trigger('render:after', this); return this; }, @@ -119,7 +126,48 @@ define([ } }, - strPlugins: 'Add-ons' + openInsideMode: function(name, url) { + this.pluginsPanel.toggleClass('hidden', true); + this.currentPluginPanel.toggleClass('hidden', false); + + this.pluginName.text(name); + if (!this.iframePlugin) { + this.iframePlugin = document.createElement("iframe"); + this.iframePlugin.id = 'plugin_iframe'; + this.iframePlugin.name = 'pluginFrameEditor', + this.iframePlugin.width = '100%'; + this.iframePlugin.height = '100%'; + this.iframePlugin.align = "top"; + this.iframePlugin.frameBorder = 0; + this.iframePlugin.scrolling = "no"; + this.iframePlugin.onload = _.bind(this._onLoad,this); + $('#current-plugin-frame').append(this.iframePlugin); + + if (!this.loadMask) + this.loadMask = new Common.UI.LoadMask({owner: $('#current-plugin-frame')}); + this.loadMask.setTitle(this.textLoading); + this.loadMask.show(); + + this.iframePlugin.src = url; + } + }, + + closeInsideMode: function() { + if (this.iframePlugin) { + this.iframePlugin.remove(); + this.iframePlugin = null; + } + this.currentPluginPanel.toggleClass('hidden', true); + this.pluginsPanel.toggleClass('hidden', false); + }, + + _onLoad: function() { + if (this.loadMask) + this.loadMask.hide(); + }, + + strPlugins: 'Add-ons', + textLoading: 'Loading' }, Common.Views.Plugins || {})); diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less index 46b3dc455..101b26939 100644 --- a/apps/common/main/resources/less/plugins.less +++ b/apps/common/main/resources/less/plugins.less @@ -65,3 +65,43 @@ } } +#current-plugin-box { + position: relative; + width: 100%; + height: 100%; + + #current-plugin-header { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 38px; + padding: 10px 12px; + border-bottom: 1px solid @gray-dark; + + label { + width: 100%; + padding-right: 20px; + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .plugin-close { + position: absolute; + top: 9px; + right: 7px; + width: 16px; + height: 16px; + background-position: -26px -150px; + cursor: pointer; + } + + #current-plugin-frame { + width: 100%; + height: 100%; + padding-top: 38px; + } +} diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 857f32aa1..537134592 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -158,6 +158,7 @@ "Common.Views.OpenDialog.txtEncoding": "Encoding ", "Common.Views.OpenDialog.txtTitle": "Choose %1 options", "Common.Views.Plugins.strPlugins": "Add-ons", + "Common.Views.Plugins.textLoading": "Loading", "Common.Views.ReviewChanges.txtAccept": "Accept", "Common.Views.ReviewChanges.txtAcceptAll": "Accept All Changes", "Common.Views.ReviewChanges.txtAcceptCurrent": "Accept Current Change",