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

Add/update custom toolbar buttons, handle adding menus

Browse Source
This commit is contained in:
Julia Radzhabova
2024-01-26 20:18:10 +03:00
parent b1d5099d76
commit fdca25ff1d
8 changed files with 114 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,6 +191,10 @@ define([
'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
'<% } %>';
var templateBtnCaption =
'<%= caption %>' +
'<i class="caret"></i>';
var templateHugeCaption =
'<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>> ' +
'<div class="inner-box-icon">' +
@ -208,9 +212,7 @@ define([
templateBtnIcon +
'</div>' +
'<div class="inner-box-caption">' +
'<span class="caption"><%= caption %>' +
'<i class="caret"></i>' +
'</span>' +
'<span class="caption">' + templateBtnCaption + '</span>' +
'<i class="caret compact-caret"></i>' +
'</div>' +
'</button>' +
@ -225,9 +227,7 @@ define([
'</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" <% if (dataHintTitle) { %> data-hint-title="<%= dataHintTitle %>" <% } %>>' +
'<span class="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %>' +
'<i class="caret"></i>' +
'</span>' +
'<span class="caption">' + templateBtnCaption + '</span>' +
'<i class="caret compact-caret"></i>' +
'</span>' +
'</button>' +
@ -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);
}

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

@ -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 = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
var $slot = $('<span class="btn-slot text x-huge ' + (!caption ? 'emptycaption' : '') + '"></span>').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);
}
}
});

3
apps/common/main/lib/view/ReviewChanges.js
View File

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

2
apps/documenteditor/main/app/controller/Main.js
View File

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

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

@ -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.',

2
apps/pdfeditor/main/app/controller/Main.js
View File

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

2
apps/presentationeditor/main/app/controller/Main.js
View File

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

2
apps/spreadsheeteditor/main/app/controller/Main.js
View File

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