From fe90c69ebe6f2c8a78ab7502292c266126dcd647 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 30 May 2019 13:15:49 +0300 Subject: [PATCH] [SSE] Add data tab. Add group/ungroup cells --- apps/spreadsheeteditor/main/app.js | 2 + .../main/app/controller/DataTab.js | 145 ++++++++++++++++ .../main/app/controller/Toolbar.js | 10 +- .../main/app/template/Toolbar.template | 6 + .../main/app/view/DataTab.js | 160 ++++++++++++++++++ .../main/app/view/GroupDialog.js | 119 +++++++++++++ .../main/app/view/Toolbar.js | 6 +- apps/spreadsheeteditor/main/app_dev.js | 2 + apps/spreadsheeteditor/main/locale/en.json | 12 ++ 9 files changed, 457 insertions(+), 5 deletions(-) create mode 100644 apps/spreadsheeteditor/main/app/controller/DataTab.js create mode 100644 apps/spreadsheeteditor/main/app/view/DataTab.js create mode 100644 apps/spreadsheeteditor/main/app/view/GroupDialog.js diff --git a/apps/spreadsheeteditor/main/app.js b/apps/spreadsheeteditor/main/app.js index e8c18af4f..18e1393c6 100644 --- a/apps/spreadsheeteditor/main/app.js +++ b/apps/spreadsheeteditor/main/app.js @@ -156,6 +156,7 @@ require([ 'LeftMenu', 'Main', 'PivotTable', + 'DataTab', 'Common.Controllers.Fonts', 'Common.Controllers.Chat', 'Common.Controllers.Comments', @@ -178,6 +179,7 @@ require([ 'spreadsheeteditor/main/app/controller/Main', 'spreadsheeteditor/main/app/controller/Print', 'spreadsheeteditor/main/app/controller/PivotTable', + 'spreadsheeteditor/main/app/controller/DataTab', 'spreadsheeteditor/main/app/view/FileMenuPanels', 'spreadsheeteditor/main/app/view/ParagraphSettings', 'spreadsheeteditor/main/app/view/ImageSettings', diff --git a/apps/spreadsheeteditor/main/app/controller/DataTab.js b/apps/spreadsheeteditor/main/app/controller/DataTab.js new file mode 100644 index 000000000..824c0f158 --- /dev/null +++ b/apps/spreadsheeteditor/main/app/controller/DataTab.js @@ -0,0 +1,145 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 + * + */ + +/** + * DataTab.js + * + * Created by Julia Radzhabova on 30.05.2019 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'spreadsheeteditor/main/app/view/DataTab', + 'spreadsheeteditor/main/app/view/GroupDialog' +], function () { + 'use strict'; + + SSE.Controllers.DataTab = Backbone.Controller.extend(_.extend({ + models : [], + collections : [ + ], + views : [ + 'DataTab' + ], + sdkViewName : '#id_main', + + initialize: function () { + + this.addListeners({ + 'DataTab': { + 'data:group': this.onGroup, + 'data:ungroup': this.onUngroup + } + }); + }, + 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_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('DataTab', { + toolbar: this.toolbar.toolbar + }); + }, + + 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) { + // special disable conditions + }, + + onUngroup: function(type) { + var me = this; + if (type=='rows') { + me.api.asc_ungroup(true) + } else if (type=='columns') { + me.api.asc_ungroup(false) + } else if (type=='clear') { + me.api.asc_clearOutline(); + } else + (new SSE.Views.GroupDialog({ + title: me.view.capBtnUngroup, + props: 'rows', + handler: function (dlg, result) { + if (result=='ok') { + me.api.asc_ungroup(dlg.getSettings()); + } + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + })).show(); + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + }, + + onGroup: function(btn) { + var me = this, + val = me.api.asc_checkAddGroup(); + if (val===null) { + (new SSE.Views.GroupDialog({ + title: me.view.capBtnGroup, + props: 'rows', + handler: function (dlg, result) { + if (result=='ok') { + me.api.asc_group(dlg.getSettings()); + } + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + })).show(); + } else if (val!==undefined) //undefined - error, true - rows, false - columns + me.api.asc_group(val); + } + + }, SSE.Controllers.DataTab || {})); +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 3a15b8e88..633e1db27 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -3104,11 +3104,15 @@ define([ me.toolbar.setApi(me.api); if ( !config.isEditDiagram && !config.isEditMailMerge ) { + var datatab = me.getApplication().getController('DataTab'); + datatab.setApi(me.api).setConfig({toolbar: me}); + Array.prototype.push.apply(me.toolbar.lockControls, datatab.getView('DataTab').getButtons()); + if ( !config.isOffline ) { tab = {action: 'pivot', caption: me.textPivot}; $panel = me.getApplication().getController('PivotTable').createToolbarPanel(); if ($panel) { - me.toolbar.addTab(tab, $panel, 3); + me.toolbar.addTab(tab, $panel, 4); me.toolbar.setVisible('pivot', true); } } @@ -3116,7 +3120,7 @@ define([ var tab = {action: 'review', caption: me.toolbar.textTabCollaboration}; var $panel = me.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel(); if ( $panel ) - me.toolbar.addTab(tab, $panel, 4); + me.toolbar.addTab(tab, $panel, 5); if (!(config.customization && config.customization.compactHeader)) { // hide 'print' and 'save' buttons group and next separator @@ -3135,7 +3139,7 @@ define([ tab = {action: 'protect', caption: me.toolbar.textTabProtect}; $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel(); if ($panel) - me.toolbar.addTab(tab, $panel, 5); + me.toolbar.addTab(tab, $panel, 6); } } } diff --git a/apps/spreadsheeteditor/main/app/template/Toolbar.template b/apps/spreadsheeteditor/main/app/template/Toolbar.template index 69e985163..327647549 100644 --- a/apps/spreadsheeteditor/main/app/template/Toolbar.template +++ b/apps/spreadsheeteditor/main/app/template/Toolbar.template @@ -152,6 +152,12 @@ +
+
+ + +
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/DataTab.js b/apps/spreadsheeteditor/main/app/view/DataTab.js new file mode 100644 index 000000000..7a342e785 --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/DataTab.js @@ -0,0 +1,160 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 + * + */ +/** + * DataTab.js + * + * Created by Julia Radzhabova on 30.05.2019 + * Copyright (c) 2019 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.DataTab = Common.UI.BaseView.extend(_.extend((function(){ + function setEvents() { + var me = this; + me.btnUngroup.menu.on('item:click', function (menu, item, e) { + me.fireEvent('data:ungroup', [item.value]); + }); + me.btnUngroup.on('click', function (b, e) { + me.fireEvent('data:ungroup'); + }); + + me.btnGroup.on('click', function (b, e) { + me.fireEvent('data:group'); + }); + } + + 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; + + var _injectComponent = function (id, cmp) { + var $slot = $host.find(id); + if ($slot.length) + cmp.rendered ? $slot.append(cmp.$el) : cmp.render($slot); + }; + + this.btnGroup = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'btn-img-group', + caption: this.capBtnGroup, + split: false, + disabled: true, + lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth] + }); + _injectComponent('#slot-btn-group', this.btnGroup); + this.lockedControls.push(this.btnGroup); + + this.btnUngroup = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top', + iconCls: 'btn-img-group', + caption: this.capBtnUngroup, + split: true, + menu: true, + disabled: true, + lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth] + }); + _injectComponent('#slot-btn-ungroup', this.btnUngroup); + this.lockedControls.push(this.btnUngroup); + + this._state = {disabled: false}; + 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.btnUngroup.updateHint( me.tipUngroup ); + var _menu = new Common.UI.Menu({ + items: [ + {caption: me.textRows, value: 'rows'}, + {caption: me.textColumns, value: 'columns'}, + {caption: me.textClear, value: 'clear'} + ] + }); + me.btnUngroup.setMenu(_menu); + + me.btnGroup.updateHint(me.tipGroup); + + setEvents.call(me); + }); + }, + + show: function () { + Common.UI.BaseView.prototype.show.call(this); + this.fireEvent('show', this); + }, + + getButtons: function() { + return this.lockedControls; + }, + + SetDisabled: function (state) { + this.lockedControls && this.lockedControls.forEach(function(button) { + if ( button ) { + button.setDisabled(state); + } + }, this); + }, + + capBtnGroup: 'Group', + capBtnUngroup: 'Ungroup', + textRows: 'Ungroup rows', + textColumns: 'Ungroup columns', + textClear: 'Clear outline', + tipGroup: 'Group range of cells', + tipUngroup: 'Ungroup range of cells' + } + }()), SSE.Views.DataTab || {})); +}); diff --git a/apps/spreadsheeteditor/main/app/view/GroupDialog.js b/apps/spreadsheeteditor/main/app/view/GroupDialog.js new file mode 100644 index 000000000..0b918f9c3 --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/GroupDialog.js @@ -0,0 +1,119 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 + * + */ +/** + * GroupDialog.js + * + * Created by Julia Radzhabova on 30.05.2019 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ +define([ + 'common/main/lib/component/Window', + 'common/main/lib/component/ComboBox' +], function () { 'use strict'; + + SSE.Views.GroupDialog = Common.UI.Window.extend(_.extend({ + options: { + width: 214, + header: true, + style: 'min-width: 214px;', + cls: 'modal-dlg' + }, + + initialize : function(options) { + _.extend(this.options, options || {}); + + this.template = [ + '
', + '
', + '
', + '
', + '', + '', + '
' + ].join(''); + + this.options.tpl = _.template(this.template)(this.options); + + Common.UI.Window.prototype.initialize.call(this, this.options); + }, + + render: function() { + Common.UI.Window.prototype.render.call(this); + + this.radioRows = new Common.UI.RadioBox({ + el: $('#group-radio-rows'), + labelText: this.textRows, + name: 'asc-radio-group-cells', + checked: this.options.props=='rows' + }); + + this.radioColumns = new Common.UI.RadioBox({ + el: $('#group-radio-cols'), + labelText: this.textColumns, + name: 'asc-radio-group-cells', + checked: this.options.props=='columns' + }); + (this.options.props=='rows') ? this.radioRows.setValue(true) : this.radioColumns.setValue(true); + + var $window = this.getChild(); + $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); + }, + + _handleInput: function(state) { + if (this.options.handler) { + this.options.handler.call(this, this, state); + } + + this.close(); + }, + + onBtnClick: function(event) { + this._handleInput(event.currentTarget.attributes['result'].value); + }, + + getSettings: function() { + return this.radioRows.getValue(); + }, + + onPrimary: function() { + this._handleInput('ok'); + return false; + }, + + cancelButtonText: 'Cancel', + okButtonText: 'Ok', + textRows: 'Rows', + textColumns: 'Columns' + }, SSE.Views.GroupDialog || {})) +}); \ 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 a167b3b26..9eea239fa 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -311,7 +311,8 @@ define([ { caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false}, { caption: me.textTabHome, action: 'home', extcls: 'canedit'}, { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}, - {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'} + {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}, + {caption: me.textTabData, action: 'data', extcls: 'canedit'} ]} ); @@ -2430,6 +2431,7 @@ define([ textAddPrintArea: 'Add to Print Area', tipPrintArea: 'Print Area', capBtnInsHeader: 'Header/Footer', - tipEditHeader: 'Edit header or footer' + tipEditHeader: 'Edit header or footer', + textTabData: 'Data' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app_dev.js b/apps/spreadsheeteditor/main/app_dev.js index d96105dcd..882239a0f 100644 --- a/apps/spreadsheeteditor/main/app_dev.js +++ b/apps/spreadsheeteditor/main/app_dev.js @@ -146,6 +146,7 @@ require([ 'LeftMenu', 'Main', 'PivotTable', + 'DataTab', 'Common.Controllers.Fonts', 'Common.Controllers.Chat', 'Common.Controllers.Comments', @@ -168,6 +169,7 @@ require([ 'spreadsheeteditor/main/app/controller/Main', 'spreadsheeteditor/main/app/controller/Print', 'spreadsheeteditor/main/app/controller/PivotTable', + 'spreadsheeteditor/main/app/controller/DataTab', 'spreadsheeteditor/main/app/view/FileMenuPanels', 'spreadsheeteditor/main/app/view/ParagraphSettings', 'spreadsheeteditor/main/app/view/ImageSettings', diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index bae0596f2..e4b3d7ded 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -1317,6 +1317,13 @@ "SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title", "SSE.Views.ChartSettingsDlg.textZero": "Zero", "SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required", + "SSE.Views.DataTab.capBtnGroup": "Group", + "SSE.Views.DataTab.capBtnUngroup": "Ungroup", + "SSE.Views.DataTab.textRows": "Ungroup rows", + "SSE.Views.DataTab.textColumns": "Ungroup columns", + "SSE.Views.DataTab.textClear": "Clear outline", + "SSE.Views.DataTab.tipGroup": "Group range of cells", + "SSE.Views.DataTab.tipUngroup": "Ungroup range of cells", "SSE.Views.DigitalFilterDialog.cancelButtonText": "Cancel", "SSE.Views.DigitalFilterDialog.capAnd": "And", "SSE.Views.DigitalFilterDialog.capCondition1": "equals", @@ -1582,6 +1589,10 @@ "SSE.Views.FormulaDialog.textGroupDescription": "Select Function Group", "SSE.Views.FormulaDialog.textListDescription": "Select Function", "SSE.Views.FormulaDialog.txtTitle": "Insert Function", + "SSE.Views.GroupDialog.cancelButtonText": "Cancel", + "SSE.Views.GroupDialog.okButtonText": "Ok", + "SSE.Views.GroupDialog.textRows": "Rows", + "SSE.Views.GroupDialog.textColumns": "Columns", "SSE.Views.HeaderFooterDialog.cancelButtonText": "Cancel", "SSE.Views.HeaderFooterDialog.okButtonText": "Ok", "SSE.Views.HeaderFooterDialog.tipFontName": "Font", @@ -2337,6 +2348,7 @@ "SSE.Views.Toolbar.txtYen": "¥ Yen", "SSE.Views.Toolbar.capBtnInsHeader": "Header/Footer", "SSE.Views.Toolbar.tipEditHeader": "Edit header or footer", + "SSE.Views.Toolbar.textTabData": "Data", "SSE.Views.Top10FilterDialog.cancelButtonText": "Cancel", "SSE.Views.Top10FilterDialog.okButtonText": "OK", "SSE.Views.Top10FilterDialog.textType": "Show",