[SSE] Add View tab

apps/common/main/lib/component/Mixtbar.js

@@ -94,12 +94,14 @@ define([
                         '<a class="scroll left"></a>' +
                         '<ul>' +
                             '<% for(var i in items) { %>' +
+                                '<% if (typeof items[i] == "object") { %>' +
                                 '<li class="ribtab' +
                                         '<% if (items[i].haspanel===false) print(" x-lone") %>' +
                                         '<% if (items[i].extcls) print(\' \' + items[i].extcls) %>">' +
                                     '<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>"><%= items[i].caption %></a>' +
                                 '</li>' +
                                 '<% } %>' +
+                            '<% } %>' +
                         '</ul>' +
                         '<a class="scroll right"></a>' +
                     '</section>';

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

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});
+
                 }
             }
         },

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 || {}));
+});

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -225,6 +225,48 @@
                     <!--</div>-->
                 <!--</div>-->
             </section>
+            <section class="panel" data-tab="view">
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>
+                </div>
+                <div class="group" style="padding-left: 5px;">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-createview"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-closeview"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <div class="elset" style="display: flex;">
+                        <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
+                    </div>
+                    <div class="elset" style="text-align: center;">
+                        <span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-freeze"></span>
+                </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-formula"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-heading"></span>
+                    </div>
+                </div>
+                <div class="group">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-gridlines"></span>
+                    </div>
+                    <div class="elset">
+                    </div>
+                </div>
+            </section>
         </section>
     </section>
 </section>

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 || {}));
 });

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('<div id="id-toolbar-sheet-view-menu-" style="display: flex;" class="open"></div>')},
+                        { 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 || {}));
+});

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

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -161,3 +161,8 @@
     width: 38px;
     height: 38px;
 }
+
+#slot-field-zoom {
+    float: left;
+    min-width: 45px;
+}