pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 05:30:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add items to toolbar buttons

Browse Source
This commit is contained in:
Julia Radzhabova
2024-07-31 11:53:22 +03:00
parent aa1ffebfe1
commit 671b80a455
4 changed files with 247 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/common/main/lib/component/Button.js
View File

@ -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 ( /(?<!-)svg-icon(?!-)/.test(me.options.iconCls) )
// me.options.scaling = false;

212
apps/common/main/lib/controller/LayoutManager.js
View File

@ -112,6 +112,8 @@ Common.UI.LayoutManager = new(function() {
}
};
// add custom items to toolbar
var _findCustomButton = function(toolbar, action, guid, id) {
if (toolbar && toolbar.customButtonsArr && toolbar.customButtonsArr[guid] ) {
for (var i=0; i< toolbar.customButtonsArr[guid].length; i++) {
@ -143,7 +145,7 @@ Common.UI.LayoutManager = new(function() {
return arr;
}
var _fillButtonMenu = function(items, guid, lang, toMenu) {
var _fillButtonMenu = function(items, guid, callback, toMenu) {
if (toMenu)
toMenu.removeAll();
else {
@ -153,7 +155,7 @@ Common.UI.LayoutManager = new(function() {
items: []
});
toMenu.on('item:click', function(menu, mi, e) {
_api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
callback && callback(mi.options.guid, mi.value);
});
}
items.forEach(function(menuItem) {
@ -161,7 +163,7 @@ Common.UI.LayoutManager = new(function() {
menuItem.text && toMenu.addItem({
caption: menuItem.text || '',
value: menuItem.id,
menu: menuItem.items ? _fillButtonMenu(menuItem.items, guid, lang) : false,
menu: menuItem.items ? _fillButtonMenu(menuItem.items, guid, callback) : false,
iconImg: Common.UI.getSuitableIcons(Common.UI.iconsStr2IconsObj(menuItem.icons)),
guid: guid
});
@ -169,11 +171,10 @@ Common.UI.LayoutManager = new(function() {
return toMenu;
}
var _addCustomItems = function (toolbar, data) {
var _addCustomItems = function (toolbar, data, callback) {
if (!data) return;
var lang = Common.Locale.getCurrentLanguage(),
btns = [];
var btns = [];
data.forEach(function(plugin) {
/*
plugin = {
@ -234,10 +235,10 @@ Common.UI.LayoutManager = new(function() {
if (typeof btn.menu !== 'object') {
btn.setMenu(new Common.UI.Menu({items: []}));
btn.menu.on('item:click', function(menu, mi, e) {
_api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
callback && callback(mi.options.guid, mi.value);
});
}
_fillButtonMenu(item.items, plugin.guid, lang, btn.menu);
_fillButtonMenu(item.items, plugin.guid, callback, btn.menu);
}
}
return;
@ -265,13 +266,13 @@ Common.UI.LayoutManager = new(function() {
if (item.items && typeof item.items === 'object') {
btn.setMenu(new Common.UI.Menu({items: []}));
btn.menu.on('item:click', function(menu, mi, e) {
_api && _api.onPluginToolbarMenuItemClick(mi.options.guid, mi.value);
callback && callback(mi.options.guid, mi.value);
});
_fillButtonMenu(item.items, plugin.guid, lang, btn.menu);
_fillButtonMenu(item.items, plugin.guid, callback, btn.menu);
}
if ( !btn.menu || btn.split) {
btn.on('click', function(b, e) {
_api && _api.onPluginToolbarMenuItemClick(b.options.guid, b.options.value, b.pressed);
callback && callback(b.options.guid, b.options.value, b.pressed);
});
}
added.push(btn);
@ -292,13 +293,200 @@ Common.UI.LayoutManager = new(function() {
return btns;
};
// add custom items to button menu
var _addCustomMenuItems = function (toolbar, action, data, callback) {
if (!data) return;
var btns = _findButtonByAction(toolbar, action);
if (!btns) return;
btns.forEach(function(btn) {
if (typeof btn.menu === 'object') {
_updateCustomMenuItems(btn.menu, data, callback);
} else if ( btn.menu === true ) { // delay add items
}
});
};
var _findButtonByAction = function(toolbar, action) {
if (!toolbar || !toolbar.lockControls) return;
var arr = [];
toolbar.lockControls.forEach(function(item) {
if (item instanceof Common.UI.Button && item.action === action) {
arr.push(item);
}
});
return arr;
};
var _findCustomMenuItem = function(menu, guid, id) {
if (menu && menu.items.length>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
}
})();

44
apps/documenteditor/main/app/controller/Toolbar.js
View File

@ -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) {

1
apps/documenteditor/main/app/view/Toolbar.js
View File

@ -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: [