Merge branch 'feature/Bug_37388' into develop.

[SSE] Fix bug 37388: work with several tabs

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

@@ -51,7 +51,7 @@ define([
         this.active     = false;
         this.label      = 'Tab';
         this.cls        = '';
-        this.template   = _.template(['<li class="<% if(active){ %>active<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
+        this.template   = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
                                             '<a><%- label %></a>',
                                         '</li>'].join(''));
 
@@ -82,6 +82,10 @@ define([
                 this.$el.addClass('active');
         },
 
+        isSelected: function() {
+            return this.$el.hasClass('selected');
+        },
+
         deactivate: function(){
             this.$el.removeClass('active');
         },
@@ -110,6 +114,11 @@ define([
                 this.$el.removeClass(cls);
         },
 
+        toggleClass: function(cls) {
+            if (cls.length)
+                this.$el.toggleClass(cls);
+        },
+
         hasClass: function(cls) {
             return this.$el.hasClass(cls);
         },

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

@@ -69,12 +69,28 @@ define([
     };
 
     StateManager.prototype.attach = function (tab) {
-        tab.changeState = $.proxy(function () {
+        tab.changeState = $.proxy(function (select) {
-            this.trigger('tab:change', tab);
+            if (select) {
-            this.bar.$el.find('ul > li.active').removeClass('active');
+                tab.toggleClass('selected');
-            tab.activate();
+                var selectTab = _.find(this.bar.selectTabs, function (item) {return item.sheetindex === tab.sheetindex;});
+                if (selectTab) {
+                    this.bar.selectTabs = _.without(this.bar.selectTabs, selectTab);
+                } else {
+                    this.bar.selectTabs.push(tab);
+                }
+            } else {
+                if (!tab.isSelected()) {
+                    this.bar.$el.find('ul > li.selected').removeClass('selected');
+                    tab.addClass('selected');
+                    this.bar.selectTabs.length = 0;
+                    this.bar.selectTabs.push(tab);
+                }
+                this.trigger('tab:change', tab);
+                this.bar.$el.find('ul > li.active').removeClass('active');
+                tab.activate();
 
-            this.bar.trigger('tab:changed', this.bar, this.bar.tabs.indexOf(tab), tab);
+                this.bar.trigger('tab:changed', this.bar, this.bar.tabs.indexOf(tab), tab);
+            }
         }, this);
 
         var dragHelper = new (function() {
@@ -278,17 +294,91 @@ define([
                             document.removeEventListener('dragstart',dragDropText);
                         });
                     }
+                },
+
+                setHookTabs: function (e, bar, tabs) {
+                    var me = this;
+                    function dragComplete() {
+                        if (!_.isUndefined(me.drag)) {
+                            bar.dragging = false;
+                            bar.$el.find('li.mousemove').removeClass('mousemove right');
+                            var arrSelectIndex = [];
+                            tabs.forEach(function (item) {
+                                arrSelectIndex.push(item.sheetindex);
+                            });
+                            if (!_.isUndefined(me.drag.place)) {
+                                me.bar.trigger('tab:move', arrSelectIndex, me.drag.place);
+                                me.bar.$bar.scrollLeft(me.scrollLeft);
+                                me.bar.scrollX = undefined;
+                            } else {
+                                me.bar.trigger('tab:move', arrSelectIndex);
+                                me.bar.$bar.scrollLeft(me.scrollLeft);
+                                me.bar.scrollX = undefined;
+                            }
+
+                            me.drag  = undefined;
+                        }
+                    }
+                    function dragMove (event) {
+                        if (!_.isUndefined(me.drag)) {
+                            me.drag.moveX = event.clientX*Common.Utils.zoom();
+                            if (me.drag.moveX > me.tabBarRight) {
+                                bar.tabs[bar.tabs.length - 1].$el.addClass('mousemove right');
+                                me.drag.place = bar.tabs.length;
+                            } else {
+                                $(event.target).parent().parent().find('li.mousemove').removeClass('mousemove right');
+                                $(event.target).parent().addClass('mousemove');
+                                var name = event.target.parentElement.dataset.label,
+                                    currentTab = _.findWhere(bar.tabs, {label: name});
+                                if (!_.isUndefined(currentTab)) {
+                                    me.drag.place = currentTab.sheetindex;
+                                }
+                            }
+                        }
+                    }
+                    if (!_.isUndefined(bar) && !_.isUndefined(tabs) && bar.tabs.length > 1) {
+                        me.bar      = bar;
+                        me.drag     = {tabs: tabs};
+                        bar.dragging = true;
+                        this.calculateBounds();
+
+                        $(document).on('mousemove.tabbar', dragMove);
+                        $(document).on('mouseup.tabbar', function (e) {
+                            dragComplete(e);
+                            $(document).off('mouseup.tabbar');
+                            $(document).off('mousemove.tabbar', dragMove);
+                        });
+                    }
                 }
             }
         });
 
         tab.$el.on({
-            click: $.proxy(function () {
+            click: $.proxy(function (event) {
-                if (!tab.disabled && !tab.$el.hasClass('active')) {
+                if (!tab.disabled) {
-                    if (tab.control == 'manual') {
+                    if (event.ctrlKey || event.metaKey) {
-                        this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab);
+                        tab.changeState(true);
-                    } else {
+                    } else if (event.shiftKey) {
-                        tab.changeState();
+                        this.bar.$el.find('ul > li.selected').removeClass('selected');
+                        this.bar.selectTabs.length = 0;
+                        var $active = this.bar.$el.find('ul > li.active'),
+                            indexAct = $active.index(),
+                            indexCur = this.bar.tabs.indexOf(tab);
+                        var startIndex = (indexCur > indexAct) ? indexAct : indexCur,
+                            endIndex = (indexCur > indexAct) ? indexCur : indexAct;
+                        for (var i = startIndex; i <= endIndex; i++) {
+                            this.bar.tabs[i].changeState(true);
+                        }
+                    } else if (!tab.$el.hasClass('active')) {
+                        if (this.bar.tabs.length === this.bar.selectTabs.length) {
+                            this.bar.$el.find('ul > li.selected').removeClass('selected');
+                            this.bar.selectTabs.length = 0;
+                        }
+                        if (tab.control == 'manual') {
+                            this.bar.trigger('tab:manual', this.bar, this.bar.tabs.indexOf(tab), tab);
+                        } else {
+                            tab.changeState();
+                        }
                     }
                 }
                 !tab.disabled && Common.NotificationCenter.trigger('edit:complete', this.bar);
@@ -297,12 +387,16 @@ define([
                 this.trigger('tab:dblclick', this, this.tabs.indexOf(tab), tab);
             }, this.bar),
             contextmenu: $.proxy(function () {
-                this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab);
+                this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs);
             }, this.bar),
             mousedown: $.proxy(function (e) {
                 if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) {
                     if (!tab.isLockTheDrag) {
-                        dragHelper.setHook(e, this.bar, tab);
+                        if (this.bar.selectTabs.length > 1) {
+                            dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs);
+                        } else {
+                            dragHelper.setHook(e, this.bar, tab);
+                        }
                     }
                 }
             }, this)
@@ -322,6 +416,7 @@ define([
 
         tabs: [],
         template: _.template('<ul class="nav nav-tabs <%= placement %>" />'),
+        selectTabs: [],
 
         initialize : function (options) {
             _.extend(this.config, options);
@@ -397,6 +492,10 @@ define([
                                 me.$bar.append(tab.render().$el);
                                 me.tabs.push(tab);
                                 me.manager.attach(tab);
+                                if (tab.isActive()) {
+                                    me.selectTabs.length = 0;
+                                    me.selectTabs.push(tab);
+                                }
                             }
                         } else {
                             for (i = tabs.length; i-- > 0 ; ) {
@@ -410,6 +509,11 @@ define([
                                     me.tabs.splice(index, 0, tab);
                                 }
 
+                                if (tab.isActive()) {
+                                    me.selectTabs.length = 0;
+                                    me.selectTabs.push(tab);
+                                }
+
                                 me.manager.attach(tab);
                             }
                         }
@@ -462,6 +566,27 @@ define([
             this.checkInvisible();
         },
 
+        setSelectAll: function(isSelect) {
+            var me = this;
+            me.selectTabs.length = 0;
+            if (isSelect) {
+                me.tabs.forEach(function(tab){
+                    if (!tab.isSelected()) {
+                        tab.addClass('selected');
+                    }
+                    me.selectTabs.push(tab);
+                });
+            } else {
+                me.tabs.forEach(function(tab){
+                    if (tab.isActive()) {
+                        me.selectTabs.push(tab);
+                    } else if (tab.isSelected()) {
+                        tab.removeClass('selected');
+                    }
+                });
+            }
+        },
+
         getActive: function(iselem) {
             return iselem ? this.$bar.find('> li.active') : this.$bar.find('> li.active').index();
         },

apps/spreadsheeteditor/main/app/controller/Statusbar.js

@@ -247,24 +247,42 @@ define([
 
         onTabMenu: function(obj, item, e) {
             var me = this;
-            switch (item.value){
+            var selectTabs = this.statusbar.tabbar.selectTabs,
-            case 'ins':
+                arrIndex = [];
-                setTimeout(function(){
+            selectTabs.forEach(function (item) {
-                    me.api.asc_insertWorksheet(me.createSheetName());
+                arrIndex.push(item.sheetindex);
-                }, 1);
+            });
-                break;
+            switch (item.value) {
-            case 'del':     this.deleteWorksheet(); break;
+                case 'ins':
-            case 'ren':     this.renameWorksheet(); break;
+                    var arrNames = [];
-            case 'copy':    this.moveWorksheet(false); break;
+                    for(var i = 0; i < arrIndex.length; i++) {
-            case 'move':    this.moveWorksheet(true); break;
+                        arrNames.push(me.createSheetName(arrNames));
-            case 'hide':
+                    }
-                setTimeout(function(){
+                    setTimeout(function () {
-                    me.hideWorksheet(true);}, 1);
+                        me.api.asc_insertWorksheet(arrNames);
-                break;
+                     }, 1);
+                    break;
+                case 'del':
+                    this.deleteWorksheet(arrIndex);
+                    break;
+                case 'ren':
+                    this.renameWorksheet();
+                    break;
+                case 'copy':
+                    this.moveWorksheet(arrIndex, false);
+                    break;
+                case 'move':
+                    this.moveWorksheet(arrIndex, true);
+                    break;
+                case 'hide':
+                    setTimeout(function () {
+                        me.hideWorksheet(true, arrIndex);
+                    }, 1);
+                    break;
             }
         },
 
-        createSheetName: function() {
+        createSheetName: function(curArrNames) {
             var items = [], wc = this.api.asc_getWorksheetsCount();
             while (wc--) {
                 items.push(this.api.asc_getWorksheetName(wc).toLowerCase());
@@ -276,10 +294,21 @@ define([
                 if (items.indexOf(name.toLowerCase()) < 0) break;
             }
 
+            if (curArrNames && curArrNames.length > 0) {
+                var arr = [];
+                curArrNames.forEach(function (item) {
+                    arr.push(item.toLowerCase());
+                });
+                while(arr.indexOf(name.toLowerCase()) !== -1) {
+                    index++;
+                    name = this.strSheet + index;
+                }
+            }
+
             return name;
         },
 
-        createCopyName: function(orig) {
+        createCopyName: function(orig, curArrNames) {
             var wc = this.api.asc_getWorksheetsCount(), names = [];
             while (wc--) {
                 names.push(this.api.asc_getWorksheetName(wc).toLowerCase());
@@ -294,20 +323,31 @@ define([
                 if (names.indexOf(name.toLowerCase()) < 0) break;
             }
 
+            if (curArrNames && curArrNames.length > 0) {
+                var arr = [];
+                curArrNames.forEach(function (item) {
+                    arr.push(item.toLowerCase());
+                });
+                while(arr.indexOf(name.toLowerCase()) !== -1) {
+                    index++;
+                    name = first + '(' + index + ')';
+                }
+            }
+
             return name;
         },
 
-        deleteWorksheet: function() {
+        deleteWorksheet: function(selectTabs) {
             var me = this;
 
-            if (this.statusbar.tabbar.tabs.length == 1) {
+            if (this.statusbar.tabbar.tabs.length == 1 || selectTabs.length === this.statusbar.tabbar.tabs.length) {
                 Common.UI.warning({msg: this.errorLastSheet});
             } else {
                 Common.UI.warning({
                     msg: this.warnDeleteSheet,
                     buttons: ['ok','cancel'],
                     callback: function(btn) {
-                        if (btn == 'ok' && !me.api.asc_deleteWorksheet()) {
+                        if (btn == 'ok' && !me.api.asc_deleteWorksheet(selectTabs)) {
                             _.delay(function(){
                                 Common.UI.error({msg: me.errorRemoveSheet});
                             },10);
@@ -319,7 +359,7 @@ define([
 
         hideWorksheet: function(hide, index) {
             if ( hide ) {
-                this.statusbar.tabbar.tabs.length == 1 ?
+                (this.statusbar.tabbar.tabs.length == 1 || index.length === this.statusbar.tabbar.tabs.length) ?
                     Common.UI.warning({msg: this.errorLastSheet}) :
                     this.api['asc_hideWorksheet'](index);
             } else {
@@ -376,26 +416,38 @@ define([
             }
         },
 
-        moveWorksheet: function(cut, silent, index, destPos) {
+        moveWorksheet: function(selectArr, cut, silent, index, destPos) {
             var me = this;
-            var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1;
+            var wc = me.api.asc_getWorksheetsCount(), items = [], arrIndex = [], i = -1;
             while (++i < wc) {
                 if (!this.api.asc_isWorksheetHidden(i)) {
                     items.push({
-                        value       : me.api.asc_getWorksheetName(i),
+                        value: me.api.asc_getWorksheetName(i),
-                        inindex     : i
+                        inindex: i
                     });
                 }
             }
+            if (!_.isUndefined(selectArr)) {
+                items.forEach(function (item) {
+                    if (selectArr.indexOf(item.inindex) !== -1) {
+                        arrIndex.push(item.inindex);
+                    }
+                });
+            }
             if (!_.isUndefined(silent)) {
-                me.api.asc_showWorksheet(items[index].inindex);
+                if (_.isUndefined(selectArr)) {
+                    me.api.asc_showWorksheet(items[index].inindex);
 
-                Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + this.api.asc_getActiveWorksheetId()]);
+                    Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + this.api.asc_getActiveWorksheetId()]);
 
-                if (!_.isUndefined(destPos)) {
+                    if (!_.isUndefined(destPos)) {
-                    me.api.asc_moveWorksheet(items.length === destPos ? wc : items[destPos].inindex);
+                        me.api.asc_moveWorksheet(items.length === destPos ? wc : items[destPos].inindex);
+                    }
+                } else {
+                    if (!_.isUndefined(destPos)) {
+                        me.api.asc_moveWorksheet(destPos, arrIndex);
+                    }
                 }
-
                 return;
             }
 
@@ -406,10 +458,13 @@ define([
                 handler : function(btn, i) {
                     if (btn == 'ok') {
                         if (cut) {
-                            me.api.asc_moveWorksheet(i == -255 ? wc : i);
+                            me.api.asc_moveWorksheet(i == -255 ? wc : i, arrIndex);
                         } else {
-                            var new_text = me.createCopyName(me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex()));
+                            var arrNames = [];
-                            me.api.asc_copyWorksheet(i == -255 ? wc : i, new_text);
+                            arrIndex.forEach(function (item) {
+                                arrNames.push(me.createCopyName(me.api.asc_getWorksheetName(item), arrNames));
+                            });
+                            me.api.asc_copyWorksheet(i == -255 ? wc : i, arrNames, arrIndex);
                         }
                     }
                     me.api.asc_enableKeyEvents(true);
@@ -481,18 +536,26 @@ define([
         },
 
         setWorksheetColor: function (color) {
+            var me = this;
             if (this.api) {
-                var sindex = this.api.asc_getActiveWorksheetIndex();
+                var selectTabs = this.statusbar.tabbar.selectTabs,
-                var tab = _.findWhere(this.statusbar.tabbar.tabs, {sheetindex: sindex});
+                    arrIndex = [];
-                if (tab) {
+                selectTabs.forEach(function (item) {
+                    arrIndex.push(item.sheetindex);
+                });
+                if (arrIndex) {
                     if ('transparent' === color) {
-                        this.api.asc_setWorksheetTabColor(null, [sindex]);
+                        this.api.asc_setWorksheetTabColor(null, arrIndex);
-                        tab.$el.find('a').css('box-shadow', '');
+                        selectTabs.forEach(function (tab) {
+                            tab.$el.find('a').css('box-shadow', '');
+                        });
                     } else {
                         var asc_clr = Common.Utils.ThemeColor.getRgbColor(color);
                         if (asc_clr) {
-                            this.api.asc_setWorksheetTabColor(asc_clr, [sindex]);
+                            this.api.asc_setWorksheetTabColor(asc_clr, arrIndex);
-                            this.setTabLineColor(tab, asc_clr);
+                            selectTabs.forEach(function (tab) {
+                                me.setTabLineColor(tab, asc_clr);
+                            });
                         }
                     }
                 }

apps/spreadsheeteditor/main/app/view/Statusbar.js

@@ -182,19 +182,23 @@ define([
                             me.fireEvent('sheet:changename');
                         }
                     }, this),
-                    'tab:move'          : _.bind(function (tabIndex, index) {
+                    'tab:move'          : _.bind(function (selectTabs, index) {
                         me.tabBarScroll = {scrollLeft: me.tabbar.scrollX};
-
+                        if (_.isUndefined(selectTabs) || _.isUndefined(index) || selectTabs === index) {
-                        if (_.isUndefined(index) || tabIndex === index) {
                             return;
                         }
+                        if (_.isArray(selectTabs)) {
+                            me.fireEvent('sheet:move', [selectTabs, false, true, undefined, index]);
+                        } else {
+                            var tabIndex = selectTabs;
 
-                        if (tabIndex < index) {
+                            if (tabIndex < index) {
-                            ++index;
+                                ++index;
+                            }
+
+                            me.fireEvent('sheet:move', [undefined, false, true, tabIndex, index]);
                         }
 
-                        me.fireEvent('sheet:move', [false, true, tabIndex, index]);
-
                     }, this)
                 });
 
@@ -241,7 +245,10 @@ define([
                         {
                             caption: this.itemTabColor,
                             menu: menuColorItems
-                        }
+                        },
+                        { caption: '--' },
+                        {caption: this.selectAllSheets,  value: 'selectall'},
+                        {caption: this.ungroupSheets,  value: 'noselect'}
                     ]
                 }).on('render:after', function(btn) {
                         var colorVal = $('<div class="btn-color-value-line"></div>');
@@ -409,7 +416,7 @@ define([
                 // Common.NotificationCenter.trigger('comments:updatefilter', ['doc', 'sheet' + this.api.asc_getActiveWorksheetId()], false); //  hide popover
             },
 
-            onTabMenu: function (o, index, tab) {
+            onTabMenu: function (o, index, tab, select) {
                 if (this.mode.isEdit && !this.isEditFormula && (this.rangeSelectionMode !== Asc.c_oAscSelectionDialogType.Chart) &&
                                                                (this.rangeSelectionMode !== Asc.c_oAscSelectionDialogType.FormatTable) &&
                     !this.mode.isDisconnected ) {
@@ -432,6 +439,15 @@ define([
                         this.tabMenu.items[6].setDisabled(isdoclocked);
                         this.tabMenu.items[7].setDisabled(issheetlocked);
 
+                        if (select.length === 1) {
+                            this.tabMenu.items[10].hide();
+                        } else {
+                            this.tabMenu.items[10].show();
+                        }
+
+                        this.tabMenu.items[9].setDisabled(issheetlocked);
+                        this.tabMenu.items[10].setDisabled(issheetlocked);
+
                         this.api.asc_closeCellEditor();
                         this.api.asc_enableKeyEvents(false);
 
@@ -473,6 +489,11 @@ define([
             onTabMenuClick: function (o, item) {
                 if (item && this.api) {
                     this.enableKeyEvents = (item.value === 'ins' || item.value === 'hide');
+                    if (item.value === 'selectall') {
+                        this.tabbar.setSelectAll(true);
+                    } else if (item.value === 'noselect') {
+                        this.tabbar.setSelectAll(false);
+                    }
                 }
             },
 
@@ -544,7 +565,9 @@ define([
             textMin             : 'MIN',
             textMax             : 'MAX',
             filteredRecordsText : '{0} of {1} records filtered',
-            filteredText        : 'Filter mode'
+            filteredText        : 'Filter mode',
+            selectAllSheets     : 'Select All Sheets',
+            ungroupSheets       : 'Ungroup Sheets'
         }, SSE.Views.Statusbar || {}));
 
         SSE.Views.Statusbar.RenameDialog = Common.UI.Window.extend(_.extend({

apps/spreadsheeteditor/main/resources/less/statusbar.less

@@ -194,6 +194,14 @@
                     }
                 }
 
+                &.selected {
+                    > a {
+                        border-bottom-color: @body-bg;
+                        background-color: @body-bg;
+                        box-shadow: 0px 2px 0 @gray-deep inset;
+                    }
+                }
+
                 &.coauth-locked {
                     > a {
                         outline: none;
@@ -224,6 +232,17 @@
                         color: @gray-darker;
                     }
                 }
+
+                &.mousemove {
+                    > a {
+                        background: linear-gradient(to right, @black, @gray-light 1px);
+                    }
+                    &.right {
+                        > a {
+                            background: linear-gradient(to left, @black, @gray-light 1px);
+                        }
+                    }
+                }
             }
         }