diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 9eba22679e..7da52f6f90 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -277,7 +277,8 @@ define([ dataHintOffset: '0, 0', scaling : true, canFocused : false, // used for button with menu - takeFocusOnClose: false // used for button with menu, for future use in toolbar when canFocused=true, but takeFocusOnClose=false + takeFocusOnClose: false, // used for button with menu, for future use in toolbar when canFocused=true, but takeFocusOnClose=false + action: '' // action for button }, template: _.template([ @@ -353,6 +354,7 @@ define([ me.rendered = false; me.stopPropagation = me.options.stopPropagation; me.delayRenderHint = me.options.delayRenderHint; + me.action = me.options.action || ''; // if ( /(?0) { + for (var i = menu.items.length-1; i >=0 ; i--) { + if (menu.items[i].options.isCustomItem && (id===undefined && menu.items[i].options.guid === guid || menu.items[i].options.guid === guid && menu.items[i].value === id)) { + return menu.items[i]; + } + } + } + }; + + var _getMenu = function(items, guid, callback, toMenu) { + var me = this; + if (toMenu) + toMenu.removeAll(); + else { + toMenu = new Common.UI.Menu({ + cls: 'shifted-right', + menuAlign: 'tl-tr', + items: [] + }); + toMenu.on('item:click', function(menu, item, e) { + !me._preventCustomClick && callback && callback(item.options.guid, item.value); + }); + toMenu.on('menu:click', function(menu, e) { + me._preventCustomClick && e.stopPropagation(); + }); + } + items.forEach(function(item) { + item.separator && toMenu.addItem({ + caption: '--', + isCustomItem: true, + guid: guid + }); + item.text && toMenu.addItem({ + caption: item.text || '', + isCustomItem: true, + value: item.id, + menu: item.items ? _getMenu(item.items, guid, callback) : false, + iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(item.icons)), + guid: guid, + disabled: !!item.disabled + }); + }); + return toMenu; + }; + + var _updateCustomMenuItems = function (menu, data, callback) { + if (!menu || !data || data.length<1) return; + + var me = this; + + me._preventCustomClick && clearTimeout(me._preventCustomClick); + menu._hasCustomItems && (me._preventCustomClick = setTimeout(function () { + me._preventCustomClick = null; + },500)); // set delay only on update existing items + menu._hasCustomItems = true; + + var focused; + data.forEach(function(plugin) { + /* + plugin = { + guid: 'plugin-guid', + items: [ + { + id: 'item-id', + text: 'caption', + icons: 'template string' or object + separator: true/false - inserted before item, + disabled: true/false, + items: [ + { + id: 'item-id', + text: 'caption', + separator: true/false - inserted before item, + icons: 'template string' or object, + disabled: true/false, + items: [] + }, ... + ], + }, + { ... }, + ... + ] + } + */ + + var isnew = !_findCustomMenuItem(menu, plugin.guid); + if (plugin && plugin.items && plugin.items.length>0) { + plugin.items.forEach(function(item) { + if (item.separator && isnew) {// add separator only to new plugins menu + menu.addItem({ + caption: '--', + isCustomItem: true, + guid: plugin.guid + }); + } + + if (!item.text) return; + var mnu = _findCustomMenuItem(menu, plugin.guid, item.id), + caption = item.text || ''; + if (mnu) { + mnu.setCaption(caption); + mnu.setDisabled(!!item.disabled); + if (item.items) { + if (mnu.menu) { + if (mnu.menu.isVisible() && mnu.menu.cmpEl.find(' > li:not(.divider):not(.disabled):visible').find('> a').filter(':focus').length>0) { + mnu.menu.isOver = true; + focused = mnu.cmpEl; + } + _getMenu(item.items, plugin.guid, callback, mnu.menu); + } else + mnu.setMenu(_getMenu(item.items, plugin.guid, callback)); + } + } else { + var mnu = new Common.UI.MenuItem({ + caption : caption, + isCustomItem: true, + value: item.id, + guid: plugin.guid, + menu: item.items && item.items.length>=0 ? _getMenu(item.items, plugin.guid, callback) : false, + iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(item.icons)), + disabled: !!item.disabled + }).on('click', function(item, e) { + !me._preventCustomClick && callback && callback(item.options.guid, item.value); + }); + menu.addItem(mnu); + } + }); + } + }); + + if (focused) { + var $subitems = $('> [role=menu]', focused).find('> li:not(.divider):not(.disabled):visible > a'); + ($subitems.length>0) && $subitems.eq(0).focus(); + } + menu.alignPosition(); + }; + + _clearCustomMenuItems = function(toolbar, action) { + if (!toolbar) return; + + var btns = _findButtonByAction(toolbar, action); + btns && btns.forEach(function(btn) { + var menu = btn.menu; + if (menu && typeof menu === 'object' && menu.items.length>0) { + for (var i = 0; i < menu.items.length; i++) { + if (menu.items[i].options.isCustomItem) { + menu.removeItem(menu.items[i]); + i--; + } + } + menu._hasCustomItems = false; + } + }); + }; + return { init: _init, applyCustomization: _applyCustomization, isElementVisible: _isElementVisible, getInitValue: _getInitValue, lastTabIdx: _lastInternalTabIdx, - addCustomItems: _addCustomItems + addCustomItems: _addCustomItems, // add controls to toolbar + addCustomMenuItems: _addCustomMenuItems, // add menu items to toolbar buttons + clearCustomMenuItems: _clearCustomMenuItems } })(); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 6d1107d0c2..bdc4a03add 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -483,6 +483,7 @@ define([ } } this.api.asc_registerCallback('onPluginToolbarMenu', _.bind(this.onPluginToolbarMenu, this)); + this.api.asc_registerCallback('onPluginToolbarCustomMenuItems', _.bind(this.onPluginToolbarCustomMenuItems, this)); this.api.asc_registerCallback('asc_onDownloadUrl', _.bind(this.onDownloadUrl, this)); Common.NotificationCenter.on('protect:doclock', _.bind(this.onChangeProtectDocument, this)); }, @@ -3876,7 +3877,48 @@ define([ }, onPluginToolbarMenu: function(data) { - this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data)); + var api = this.api; + this.toolbar && Array.prototype.push.apply(this.toolbar.lockControls, Common.UI.LayoutManager.addCustomItems(this.toolbar, data, function(guid, value, pressed) { + api && api.onPluginToolbarMenuItemClick(guid, value, pressed); + })); + }, + + onPluginToolbarCustomMenuItems: function(data) { + data = [ + { + guid: 'plugin-guid', + items: [ + { + id: 'item-id', + text: 'caption', + // icons: 'template string' or object + separator: false, + disabled: false, + items: [ + { + id: 'item-id-2', + text: 'caption 2', + separator: false, + // icons: 'template string' or object, + disabled: false + }, + { + id: 'item-id-3', + text: 'caption 3', + separator: true, + // icons: 'template string' or object, + disabled: true + } + ], + } + ] + } + ]; + var api = this.api; + this.toolbar && Common.UI.LayoutManager.addCustomMenuItems(this.toolbar, 'change-case', data, function(guid, value) { + console.log(guid + ', ' + value); + api && api.onPluginContextMenuItemClick(guid, value); + }); }, onActiveTab: function(tab) { diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 98fdacfdf4..f607fe8163 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -437,6 +437,7 @@ define([ id: 'id-toolbar-btn-case', cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-change-case', + action: 'change-case', lock: [_set.paragraphLock, _set.headerLock, _set.richEditLock, _set.plainEditLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.viewMode], menu: new Common.UI.Menu({ items: [