diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 25e3083781..dcca1ab324 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -191,6 +191,10 @@ define([ 'print(\' \'); %>' + '<% } %>'; + var templateBtnCaption = + '<%= caption %>' + + ''; + var templateHugeCaption = ' data-hint-title="<%= dataHintTitle %>" <% } %>> ' + '' + @@ -208,9 +212,7 @@ define([ templateBtnIcon + '' + '' + - '<%= caption %>' + - '' + - '' + + '' + templateBtnCaption + '' + '' + '' + '' + @@ -225,9 +227,7 @@ define([ '' + ' data-hint-title="<%= dataHintTitle %>" <% } %>>' + '' + - '<%= caption %>' + - '' + - '' + + '' + templateBtnCaption + '' + '' + '' + '' + @@ -880,7 +880,7 @@ define([ setCaption: function(caption) { if (this.caption != caption) { - if ( /icon-top/.test(this.cls) && !!this.caption && /huge/.test(this.cls) ) { + if ( /icon-top/.test(this.options.cls) && !!this.caption && /huge/.test(this.options.cls) ) { var newCaption = this.getCaptionWithBreaks(caption); this.caption = newCaption || caption; } else @@ -890,7 +890,7 @@ define([ var captionNode = this.cmpEl.find('.caption'); if (captionNode.length > 0) { - captionNode.html(this.caption); + captionNode.html((this.split || this.menu) ? _.template(templateBtnCaption)({caption: this.caption}) : this.caption); } else { this.cmpEl.find('button:first').addBack().filter('button').html(this.caption); } diff --git a/apps/common/main/lib/controller/LayoutManager.js b/apps/common/main/lib/controller/LayoutManager.js index fb0914a4b5..3d0480f0ad 100644 --- a/apps/common/main/lib/controller/LayoutManager.js +++ b/apps/common/main/lib/controller/LayoutManager.js @@ -48,10 +48,12 @@ if (Common.UI === undefined) { Common.UI.LayoutManager = new(function() { var _config, _licensed, + _api, _lastInternalTabIdx = 10; - var _init = function(config, licensed) { + var _init = function(config, licensed, api) { _config = config; _licensed = licensed; + _api = api; }; var _applyCustomization = function(config, el, prefix) { @@ -111,6 +113,43 @@ Common.UI.LayoutManager = new(function() { } }; + var _findCustomButton = function(toolbar, action, guid, id) { + if (toolbar && toolbar.customButtonsArr) { + for (var i=0; i< toolbar.customButtonsArr.length; i++) { + var btn = toolbar.customButtonsArr[i]; + if (btn.options.tabid === action && btn.options.guid === guid && btn.options.value === id) { + return btn; + } + } + } + } + + var _fillButtonMenu = function(items, guid, lang, toMenu) { + if (toMenu) + toMenu.removeAll(); + else { + toMenu = new Common.UI.Menu({ + cls: 'shifted-right', + menuAlign: 'tl-tr', + items: [] + }); + toMenu.on('item:click', function(menu, mi, e) { + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); + }); + } + items.forEach(function(menuItem) { + if (menuItem.separator) toMenu.addItem({caption: '--'}); + menuItem.text && toMenu.addItem({ + caption: ((typeof menuItem.text == 'object') ? menuItem.text[lang] || menuItem.text['en'] : menuItem.text) || '', + value: menuItem.id, + menu: menuItem.items ? _fillButtonMenu(menuItem.items, guid, lang) : false, + iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)), + guid: guid + }); + }); + return toMenu; + } + var _createTab = function(toolbar, action, caption) { if (!toolbar || !action || !caption) return; @@ -130,7 +169,7 @@ Common.UI.LayoutManager = new(function() { return toolbar.getTab(action) || _createTab(toolbar, action, caption); }; - var _addCustomItems = function (toolbar, data, api) { + var _addCustomItems = function (toolbar, data) { if (!data || data.length<1) return; var lang = Common.Locale.getCurrentLanguage(), @@ -148,7 +187,7 @@ Common.UI.LayoutManager = new(function() { id: 'button-id', type: 'button'='big-button' or 'small-button', icons: 'template string' or object - text: 'caption' or { "fr": "french caption", "es": "spanish caption"}, + text: 'caption' or { "fr": "french caption", "es": "spanish caption"} or - can be empty hint: 'hint' or { "fr": "french hint", "es": "spanish hint"}, separator: true/false - inserted before item, split: true/false - used when has menu @@ -157,10 +196,12 @@ Common.UI.LayoutManager = new(function() { id: 'item-id', text: 'caption' or { "fr": "french caption", "es": "spanish caption"}, separator: true/false - inserted before item, + icons: 'template string' or object } ], enableToggle: true/false - can press and depress button, only when no menu or has split menu - lockInViewMode: true/false - lock in view mode + lockInViewMode: true/false - lock in view modes (preview review, view forms, disconnect, etc.), + disabled: true/false } ] } @@ -169,6 +210,31 @@ Common.UI.LayoutManager = new(function() { var $panel = _getTab(toolbar, plugin.tab.id, plugin.tab.text) || _getTab(toolbar, 'plugins'); if ($panel) { plugin.items && plugin.items.forEach(function(item) { + var btn = _findCustomButton(toolbar, plugin.tab.id, plugin.guid, item.id), + _set = Common.enumLock; + if (btn) { // change caption, hint, disable state, menu items + if (btn instanceof Common.UI.Button) { + var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ''; + if (btn.options.caption !== (caption || ' ')) { + btn.cmpEl.closest('.btn-slot.x-huge').toggleClass('emptycaption', !caption); + btn.setCaption(caption || ' '); + btn.options.caption = caption || ' '; + } + btn.updateHint(((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',); + (item.disabled!==undefined) && Common.Utils.lockControls(_set.customLock, !!item.disabled, {array: [btn]}); + if (btn.menu && item.menu && item.menu.length > 0) {// update menu items + if (typeof btn.menu !== 'object') { + btn.setMenu(new Common.UI.Menu({items: []})); + btn.menu.on('item:click', function(menu, mi, e) { + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); + }); + } + _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu); + } + } + return; + } + var _groups = $panel.children().filter('.group'), _group; if (_groups.length>0 && !item.separator) @@ -180,51 +246,45 @@ Common.UI.LayoutManager = new(function() { } if (item.type==='button' || item.type==='big-button') { - var _set = Common.enumLock; - var btn = new Common.UI.ButtonCustom({ + var caption = ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || ''; + btn = new Common.UI.ButtonCustom({ cls: 'btn-toolbar x-huge icon-top', iconsSet: item.icons, - caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '', - menu: item.menu && item.menu.length > 0, - split: item.menu && item.menu.length > 0 && !!item.split, + caption: caption || ' ', + menu: item.menu, + split: item.menu && !!item.split, enableToggle: item.enableToggle && (!item.menu || !!item.split), value: item.id, guid: plugin.guid, + tabid: plugin.tab.id, hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '', - lock: item.lockInViewMode ? [_set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [], + lock: item.lockInViewMode ? [_set.customLock, _set.viewMode, _set.previewReviewMode, _set.viewFormMode, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.selRangeEdit, _set.editFormula ] : [_set.customLock], dataHint: '1', dataHintDirection: 'bottom', dataHintOffset: 'small' }); - if (btn.menu) { - var _menu_items = []; - item.menu.forEach(function(menuItem) { - if (menuItem.separator) _menu_items.push({caption: '--'}); - menuItem.text && _menu_items.push({ - caption: ((typeof menuItem.text == 'object') ? menuItem.text[lang] || menuItem.text['en'] : menuItem.text) || '', - value: menuItem.id, - iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)), - guid: plugin.guid - }); - }); - btn.setMenu(new Common.UI.Menu({ - items: _menu_items - })); + if (item.menu && typeof item.menu === 'object') { + btn.setMenu(new Common.UI.Menu({items: []})); btn.menu.on('item:click', function(menu, mi, e) { - api && api.onPluginButtonClick && api.onPluginButtonClick(mi.options.guid, mi.value); + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(mi.options.guid, mi.value); }); + _fillButtonMenu(item.menu, plugin.guid, lang, btn.menu); } if ( !btn.menu || btn.split) { btn.on('click', function(b, e) { - api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed); + _api && _api.onPluginButtonClick && _api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed); }); } - var $slot = $('').appendTo(_group); + var $slot = $('').appendTo(_group); btn.render($slot); btns.push(btn); + item.disabled && Common.Utils.lockControls(_set.customLock, item.disabled, {array: [btn]}); } }); + if (!toolbar.customButtonsArr) + toolbar.customButtonsArr = []; + Array.prototype.push.apply(toolbar.customButtonsArr, btns); } } }); diff --git a/apps/common/main/lib/view/ReviewChanges.js b/apps/common/main/lib/view/ReviewChanges.js index dab7de765d..485e982553 100644 --- a/apps/common/main/lib/view/ReviewChanges.js +++ b/apps/common/main/lib/view/ReviewChanges.js @@ -65,7 +65,8 @@ define([ viewFormMode: 'view-form-mode', // view form mode on Forms tab viewMode: 'view-mode', // view mode on disconnect, version history etc (used for locking buttons not in toolbar) or view mode from header mode button (for toolbar) hideComments: 'hide-comments', // no live comments and left panel is closed - cantShare: 'cant-share' + cantShare: 'cant-share', + customLock: 'custom-lock' // for custom buttons in toolbar }; for (var key in enumLock) { if (enumLock.hasOwnProperty(key)) { diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 1d245586d9..89b4c7a78f 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -1656,7 +1656,7 @@ define([ this.appOptions.canRename && appHeader.setCanRename(true); this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins); this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api); - this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt); + this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api); this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt); Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers); this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 5436f757ca..af94b74f46 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -3780,6 +3780,7 @@ define([ hint: 'hint', separator: true, split: false, + // disabled: true, menu: [ { id: 'item-id-1', @@ -3803,6 +3804,17 @@ define([ { id: 'item-id-2', text: 'Text2', + items: [ + { + id: 'item-id-3', + text: 'Text3' + }, + { + id: 'item-id-3', + text: 'Text3', + separator: true + } + ], separator: true } ], @@ -3831,8 +3843,7 @@ define([ } ] }]; - var btns = Common.UI.LayoutManager.addCustomItems(this.toolbar, data, this.api); - Array.prototype.push.apply(this.toolbar.lockControls, btns); + Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data)); }, textEmptyImgUrl : 'You need to specify image URL.', diff --git a/apps/pdfeditor/main/app/controller/Main.js b/apps/pdfeditor/main/app/controller/Main.js index 157bdcdec4..6c09ced7a5 100644 --- a/apps/pdfeditor/main/app/controller/Main.js +++ b/apps/pdfeditor/main/app/controller/Main.js @@ -1266,7 +1266,7 @@ define([ this.appOptions.canRename && appHeader.setCanRename(true); this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins); this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions, this.api); - this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt); + this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api); this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt); Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers); this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image); diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js index 523a06e116..20727e34d1 100644 --- a/apps/presentationeditor/main/app/controller/Main.js +++ b/apps/presentationeditor/main/app/controller/Main.js @@ -1296,7 +1296,7 @@ define([ this.appOptions.canRename && appHeader.setCanRename(true); this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins); this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions); - this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt); + this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api); this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt); Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers); this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image); diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index ddab25f8e1..4cd846266a 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -1412,7 +1412,7 @@ define([ if (!this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle) { this.appOptions.canBrandingExt = params.asc_getCanBranding() && (typeof this.editorConfig.customization == 'object' || this.editorConfig.plugins); this.getApplication().getController('Common.Controllers.Plugins').setMode(this.appOptions); - this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt); + this.editorConfig.customization && Common.UI.LayoutManager.init(this.editorConfig.customization.layout, this.appOptions.canBrandingExt, this.api); this.editorConfig.customization && Common.UI.FeaturesManager.init(this.editorConfig.customization.features, this.appOptions.canBrandingExt); Common.UI.ExternalUsers.init(this.appOptions.canRequestUsers); this.appOptions.user.image && Common.UI.ExternalUsers.setImage(this.appOptions.user.id, this.appOptions.user.image);