From 0acbad6fa04e36f6146345af6623b09ccee06e5f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 9 Jul 2020 14:53:22 +0300 Subject: [PATCH] [SSE] Add View tab --- apps/common/main/lib/component/Mixtbar.js | 2 + apps/spreadsheeteditor/main/app.js | 2 + .../main/app/controller/Toolbar.js | 4 + .../main/app/controller/ViewTab.js | 121 ++++++++ .../main/app/template/Toolbar.template | 42 +++ .../main/app/view/Toolbar.js | 7 +- .../main/app/view/ViewTab.js | 287 ++++++++++++++++++ apps/spreadsheeteditor/main/app_dev.js | 2 + .../main/resources/less/toolbar.less | 5 + 9 files changed, 470 insertions(+), 2 deletions(-) create mode 100644 apps/spreadsheeteditor/main/app/controller/ViewTab.js create mode 100644 apps/spreadsheeteditor/main/app/view/ViewTab.js diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js index 74b785c60..0081cad91 100644 --- a/apps/common/main/lib/component/Mixtbar.js +++ b/apps/common/main/lib/component/Mixtbar.js @@ -94,11 +94,13 @@ define([ '' + '' + '' + diff --git a/apps/spreadsheeteditor/main/app.js b/apps/spreadsheeteditor/main/app.js index f274e5365..98f81f10a 100644 --- a/apps/spreadsheeteditor/main/app.js +++ b/apps/spreadsheeteditor/main/app.js @@ -158,6 +158,7 @@ require([ 'Main', 'PivotTable', 'DataTab', + 'ViewTab', 'Common.Controllers.Fonts', 'Common.Controllers.Chat', 'Common.Controllers.Comments', @@ -181,6 +182,7 @@ require([ 'spreadsheeteditor/main/app/controller/Print', 'spreadsheeteditor/main/app/controller/PivotTable', 'spreadsheeteditor/main/app/controller/DataTab', + 'spreadsheeteditor/main/app/controller/ViewTab', 'spreadsheeteditor/main/app/view/FileMenuPanels', 'spreadsheeteditor/main/app/view/ParagraphSettings', 'spreadsheeteditor/main/app/view/ImageSettings', diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 856454690..6b916879a 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -3304,6 +3304,10 @@ define([ me.toolbar.addTab(tab, $panel, 7); } } + + var viewtab = me.getApplication().getController('ViewTab'); + viewtab.setApi(me.api).setConfig({toolbar: me}); + } } }, diff --git a/apps/spreadsheeteditor/main/app/controller/ViewTab.js b/apps/spreadsheeteditor/main/app/controller/ViewTab.js new file mode 100644 index 000000000..92c2d8bad --- /dev/null +++ b/apps/spreadsheeteditor/main/app/controller/ViewTab.js @@ -0,0 +1,121 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * ViewTab.js + * + * Created by Julia Radzhabova on 08.07.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'spreadsheeteditor/main/app/view/ViewTab' +], function () { + 'use strict'; + + SSE.Controllers.ViewTab = Backbone.Controller.extend(_.extend({ + models : [], + collections : [ + ], + views : [ + 'ViewTab' + ], + sdkViewName : '#id_main', + + initialize: function () { + }, + onLaunch: function () { + }, + + setApi: function (api) { + if (api) { + this.api = api; + this.api.asc_registerCallback('asc_onSelectionChanged', _.bind(this.onSelectionChanged, this)); + this.api.asc_registerCallback('asc_onWorksheetLocked', _.bind(this.onWorksheetLocked, this)); + this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this)); + Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); + } + return this; + }, + + setConfig: function(config) { + this.toolbar = config.toolbar; + this.view = this.createView('ViewTab', { + toolbar: this.toolbar.toolbar + }); + this.addListeners({ + 'ViewTab': { + 'viewtab:freeze': this.onFreeze + } + }); + }, + + SetDisabled: function(state) { + this.view && this.view.SetDisabled(state); + }, + + getView: function(name) { + return !name && this.view ? + this.view : Backbone.Controller.prototype.getView.call(this, name); + }, + + onCoAuthoringDisconnect: function() { + this.SetDisabled(true); + }, + + onSelectionChanged: function(info) { + if (!this.toolbar.editMode || !this.view) return; + }, + + onFreeze: function() { + var me = this; + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + }, + + onWorksheetLocked: function(index,locked) { + if (index == this.api.asc_getActiveWorksheetIndex()) { + Common.Utils.lockControls(SSE.enumLock.sheetLock, locked, {array: this.view.btnsSortDown.concat(this.view.btnsSortUp, this.view.btnCustomSort, this.view.btnGroup, this.view.btnUngroup)}); + } + }, + + onApiSheetChanged: function() { + if (!this.toolbar.mode || !this.toolbar.mode.isEdit || this.toolbar.mode.isEditDiagram || this.toolbar.mode.isEditMailMerge) return; + + var currentSheet = this.api.asc_getActiveWorksheetIndex(); + this.onWorksheetLocked(currentSheet, this.api.asc_isWorksheetLockedOrDeleted(currentSheet)); + } + + }, SSE.Controllers.ViewTab || {})); +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template index cb7050e5f..312b2bc1c 100644 --- a/apps/spreadsheeteditor/main/app/template/Toolbar.template +++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template @@ -225,6 +225,48 @@ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 86434fc0d..c7d70c6c3 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -323,7 +323,9 @@ define([ { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}, {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}, {caption: me.textTabFormula, action: 'formula', extcls: 'canedit'}, - {caption: me.textTabData, action: 'data', extcls: 'canedit'} + {caption: me.textTabData, action: 'data', extcls: 'canedit'}, + undefined, undefined, undefined, + {caption: me.textTabView, action: 'view', extcls: 'canedit'} ]} ); @@ -2422,6 +2424,7 @@ define([ tipPrintTitles: 'Print titles', capBtnInsSlicer: 'Slicer', tipInsertSlicer: 'Insert slicer', - textVertical: 'Vertical Text' + textVertical: 'Vertical Text', + textTabView: 'View' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/ViewTab.js b/apps/spreadsheeteditor/main/app/view/ViewTab.js new file mode 100644 index 000000000..785c957d0 --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/ViewTab.js @@ -0,0 +1,287 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ +/** + * ViewTab.js + * + * Created by Julia Radzhabova on 08.07.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/util/utils', + 'common/main/lib/component/BaseView', + 'common/main/lib/component/Layout' +], function () { + 'use strict'; + + SSE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){ + function setEvents() { + var me = this; + me.btnFreezePanes.on('click', function (btn, e) { + me.fireEvent('viewtab:freeze', [btn.pressed]); + }); + } + + return { + options: {}, + + initialize: function (options) { + Common.UI.BaseView.prototype.initialize.call(this); + this.toolbar = options.toolbar; + + this.lockedControls = []; + + var me = this, + $host = me.toolbar.$el, + _set = SSE.enumLock; + + this.btnSheetView = new Common.UI.Button({ + parentEl: $host.find('#slot-btn-sheet-view'), + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-sheetview', + caption: me.capBtnSheetView, + lock : [_set.lostConnect, _set.coAuth], + menu: true + }); + this.lockedControls.push(this.btnSheetView); + + this.btnCreateView = new Common.UI.Button({ + id : 'id-toolbar-btn-createview', + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-createview', + caption : this.textCreate, + lock : [_set.coAuth, _set.lostConnect] + }); + this.lockedControls.push(this.btnCreateView); + Common.Utils.injectComponent($host.find('#slot-createview'), this.btnCreateView); + + this.btnCloseView = new Common.UI.Button({ + id : 'id-toolbar-btn-closeview', + cls : 'btn-toolbar', + iconCls : 'toolbar__icon btn-closeview', + caption : this.textClose, + lock : [_set.coAuth, _set.lostConnect] + }); + this.lockedControls.push(this.btnCloseView); + Common.Utils.injectComponent($host.find('#slot-closeview'), this.btnCloseView); + + this.btnFreezePanes = new Common.UI.Button({ + parentEl: $host.find('#slot-btn-freeze'), + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'toolbar__icon btn-to-freeze', + caption: this.capBtnFreeze, + split: false, + enableToggle: true, + lock: [_set.lostConnect, _set.coAuth] + }); + this.lockedControls.push(this.btnFreezePanes); + + this.cmbZoom = new Common.UI.ComboBox({ + cls : 'input-group-nr', + menuStyle : 'min-width: 55px;', + hint : me.tipFontSize, + editable : false, + lock : [_set.coAuth, _set.lostConnect], + data : [ + { displayValue: "50%", value: 50 }, + { displayValue: "75%", value: 75 }, + { displayValue: "100%", value: 100 }, + { displayValue: "125%", value: 125 }, + { displayValue: "150%", value: 150 }, + { displayValue: "175%", value: 175 }, + { displayValue: "200%", value: 200 } + ] + }); + Common.Utils.injectComponent($host.find('#slot-field-zoom'), this.cmbZoom); + + this.chFormula = new Common.UI.CheckBox({ + el: $host.findById('#slot-chk-formula'), + labelText: this.textFormula, + lock : [_set.lostConnect, _set.coAuth] + }); + this.lockedControls.push(this.chFormula); + + this.chHeadings = new Common.UI.CheckBox({ + el: $host.findById('#slot-chk-heading'), + labelText: this.textHeadings, + lock : [_set.lostConnect, _set.coAuth] + }); + this.lockedControls.push(this.chHeadings); + + this.chGridlines = new Common.UI.CheckBox({ + el: $host.findById('#slot-chk-gridlines'), + labelText: this.textGridlines, + lock : [_set.lostConnect, _set.coAuth] + }); + this.lockedControls.push(this.chGridlines); + + $host.find('#slot-lbl-zoom').text(this.textZoom); + + Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this)); + }, + + render: function (el) { + return this; + }, + + onAppReady: function (config) { + var me = this; + (new Promise(function (accept, reject) { + accept(); + })).then(function(){ + me.btnSheetView.updateHint( me.tipSheetView ); + me.setButtonMenu(me.btnSheetView); + + me.btnCreateView.updateHint(me.tipCreate); + me.btnCloseView.updateHint(me.tipClose); + me.btnFreezePanes.updateHint(me.tipFreeze); + + setEvents.call(me); + }); + }, + + focusInner: function(menu, e) { + if (e.keyCode == Common.UI.Keys.UP) + menu.items[menu.items.length-1].cmpEl.find('> a').focus(); + else + menu.items[0].cmpEl.find('> a').focus(); + }, + + focusOuter: function(menu, e) { + menu.items[2].cmpEl.find('> a').focus(); + }, + + onBeforeKeyDown: function(menu, e) { + if (e.keyCode == Common.UI.Keys.RETURN) { + e.preventDefault(); + e.stopPropagation(); + var li = $(e.target).closest('li'); + (li.length>0) && li.click(); + Common.UI.Menu.Manager.hideAll(); + } else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) { + var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a'); + if (!$items.length) return; + var index = $items.index($items.filter(':focus')), + me = this; + if (menu._outerMenu && (e.keyCode == Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length - 1) || + menu._innerMenu && (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) && index!==-1) { + e.preventDefault(); + e.stopPropagation(); + _.delay(function() { + menu._outerMenu ? me.focusOuter(menu._outerMenu, e) : me.focusInner(menu._innerMenu, e); + }, 10); + } + } + }, + + setButtonMenu: function(btn) { + var me = this, + arr = [{caption: me.textDefault, value: 'default'}]; + btn.setMenu(new Common.UI.Menu({ + items: [ + {template: _.template('
')}, + { caption: '--' }, + { + caption: me.textManager, + value: 'manager' + } + ] + })); + btn.menu.items[2].on('click', function (item, e) { + me.fireEvent('viewtab:manager'); + }); + btn.menu.on('show:after', function (menu, e) { + var internalMenu = menu._innerMenu; + internalMenu.scroller.update({alwaysVisibleY: true}); + _.delay(function() { + menu._innerMenu && menu._innerMenu.cmpEl.focus(); + }, 10); + }).on('keydown:before', _.bind(me.onBeforeKeyDown, this)); + + var menu = new Common.UI.Menu({ + maxHeight: 300, + cls: 'internal-menu', + items: arr + }); + menu.render(btn.menu.items[0].cmpEl.children(':first')); + menu.cmpEl.css({ + display : 'block', + position : 'relative', + left : 0, + top : 0 + }); + menu.cmpEl.attr({tabindex: "-1"}); + menu.on('item:click', function (menu, item, e) { + me.fireEvent('viewtab:openview', [{name: item.caption, value: item.value}]); + }).on('keydown:before', _.bind(me.onBeforeKeyDown, this)); + btn.menu._innerMenu = menu; + menu._outerMenu = btn.menu; + }, + + show: function () { + Common.UI.BaseView.prototype.show.call(this); + this.fireEvent('show', this); + }, + + getButtons: function(type) { + if (type===undefined) + return this.lockedControls; + return []; + }, + + SetDisabled: function (state) { + this.lockedControls && this.lockedControls.forEach(function(button) { + if ( button ) { + button.setDisabled(state); + } + }, this); + }, + + capBtnSheetView: 'Sheet View', + capBtnFreeze: 'Freeze Panes', + textZoom: 'Zoom', + tipSheetView: 'Sheet view', + textDefault: 'Default', + textManager: 'View manager', + tipFreeze: 'Freeze panes', + tipCreate: 'Create sheet view', + tipClose: 'Close sheet view', + textCreate: 'New', + textClose: 'Close', + textFormula: 'Formula bar', + textHeadings: 'Headings', + textGridlines: 'Gridlines' + } + }()), SSE.Views.ViewTab || {})); +}); diff --git a/apps/spreadsheeteditor/main/app_dev.js b/apps/spreadsheeteditor/main/app_dev.js index d3b10623a..2ca0622ca 100644 --- a/apps/spreadsheeteditor/main/app_dev.js +++ b/apps/spreadsheeteditor/main/app_dev.js @@ -148,6 +148,7 @@ require([ 'Main', 'PivotTable', 'DataTab', + 'ViewTab', 'Common.Controllers.Fonts', 'Common.Controllers.Chat', 'Common.Controllers.Comments', @@ -171,6 +172,7 @@ require([ 'spreadsheeteditor/main/app/controller/Print', 'spreadsheeteditor/main/app/controller/PivotTable', 'spreadsheeteditor/main/app/controller/DataTab', + 'spreadsheeteditor/main/app/controller/ViewTab', 'spreadsheeteditor/main/app/view/FileMenuPanels', 'spreadsheeteditor/main/app/view/ParagraphSettings', 'spreadsheeteditor/main/app/view/ImageSettings', diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index ebc025adc..4592a867d 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -161,3 +161,8 @@ width: 38px; height: 38px; } + +#slot-field-zoom { + float: left; + min-width: 45px; +} \ No newline at end of file