Merge branch 'feature/sse-move-sheet' into develop

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

@@ -51,8 +51,9 @@ define([
         this.active     = false;
         this.label      = 'Tab';
         this.cls        = '';
+        this.index = -1;
         this.template   = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
-                                            '<a title="<%= label %>"><%- label %></a>',
+                                            '<span title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
                                         '</li>'].join(''));
 
         this.initialize.call(this, opts);
@@ -124,7 +125,7 @@ define([
         },
 
         setCaption: function(text) {
-            this.$el.find('> a').text(text);
+            this.$el.find('> span').text(text);
         }
     });
 

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

@@ -144,6 +144,7 @@ define([
                             }
 
                             me.drag  = undefined;
+                            me.bar.trigger('tab:drop', this);
                         }
                     }
                     function dragMove (event) {
@@ -187,6 +188,7 @@ define([
                             $(document).off('mouseup.tabbar');
                             $(document).off('mousemove.tabbar', dragMove);
                         });
+                        this.bar.trigger('tab:drag', this.bar.selectTabs);
                     }
                 }
             }
@@ -231,14 +233,66 @@ define([
                 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 ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-                    if (!tab.isLockTheDrag) {
+                    var lockDrag = tab.isLockTheDrag;
-                        if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+                    this.bar.selectTabs.forEach(function (item) {
+                        if (item.isLockTheDrag) {
+                            lockDrag = true;
+                        }
+                    });
+                    if (this.bar.selectTabs.length === this.bar.tabs.length || this.bar.tabs.length === 1) {
+                        lockDrag = true;
+                    }
+                    this.bar.$el.find('ul > li > span').attr('draggable', !lockDrag);
                     tab.changeState();
-                            dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs);
+                } else {
+                    this.bar.$el.find('ul > li > span').attr('draggable', 'false');
                 }
+                this.bar.trigger('tab:drag', this.bar.selectTabs);
+            }, this)
+        });
+        tab.$el.children().on(
+            {dragstart: $.proxy(function (e) {
+                var event = e.originalEvent,
+                    img = document.createElement('div');
+                event.dataTransfer.setDragImage(img, 0, 0);
+                event.dataTransfer.effectAllowed = 'move';
+                this.bar.trigger('tab:dragstart', event.dataTransfer, this.bar.selectTabs);
+            }, this),
+            dragenter: $.proxy(function (e) {
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+                $(e.currentTarget).parent().addClass('mousemove');
+                var event = e.originalEvent;
+                var data = event.dataTransfer.getData("onlyoffice");
+                event.dataTransfer.dropEffect = data ? 'move' : 'none';
+            }, this),
+            dragover: $.proxy(function (e) {
+                var event = e.originalEvent;
+                if (event.preventDefault) {
+                    event.preventDefault(); // Necessary. Allows us to drop.
                 }
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+                $(e.currentTarget).parent().addClass('mousemove');
+                return false;
+            }, this),
+            dragleave: $.proxy(function (e) {
+                $(e.currentTarget).parent().removeClass('mousemove right');
+            }, this),
+            dragend: $.proxy(function (e) {
+                var event = e.originalEvent;
+                if (event.dataTransfer.dropEffect === 'move') {
+                    this.bar.trigger('tab:dragend', true);
+                } else {
+                    this.bar.trigger('tab:dragend', false);
                 }
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+            }, this),
+            drop: $.proxy(function (e) {
+                var event = e.originalEvent,
+                    index = $(event.currentTarget).data('index');
+                this.bar.$el.find('.mousemove').removeClass('mousemove right');
+                this.bar.trigger('tab:drop', event.dataTransfer, index);
+                this.bar.isDrop = true;
             }, this)
         });
     };
@@ -255,7 +309,7 @@ define([
         },
 
         tabs: [],
-        template: _.template('<ul class="nav nav-tabs <%= placement %>" />'),
+        template: _.template('<ul id="statusbar_bottom" class="nav nav-tabs <%= placement %>"/>'),
         selectTabs: [],
 
         initialize : function (options) {
@@ -275,6 +329,34 @@ define([
 
             var eventname=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
             addEvent(this.$bar[0], eventname, _.bind(this._onMouseWheel,this));
+            addEvent(this.$bar[0], 'dragstart', _.bind(function (event) {
+                event.dataTransfer.effectAllowed = 'move';
+            }, this));
+            addEvent(this.$bar[0], 'dragenter', _.bind(function (event) {
+                var data = event.dataTransfer.getData("onlyoffice");
+                event.dataTransfer.dropEffect = data ? 'move' : 'none';
+            }, this));
+            addEvent(this.$bar[0], 'dragover', _.bind(function (event) {
+                if (event.preventDefault) {
+                    event.preventDefault(); // Necessary. Allows us to drop.
+                }
+                event.dataTransfer.dropEffect = 'move';
+                this.tabs[this.tabs.length - 1].$el.addClass('mousemove right');
+                return false;
+            }, this));
+            addEvent(this.$bar[0], 'dragleave', _.bind(function (event) {
+                event.dataTransfer.dropEffect = 'none';
+                this.tabs[this.tabs.length - 1].$el.removeClass('mousemove right');
+            }, this));
+            addEvent(this.$bar[0], 'drop', _.bind(function (event) {
+                var index = this.tabs.length;
+                this.$el.find('.mousemove').removeClass('mousemove right');
+                if (this.isDrop === undefined) {
+                    this.trigger('tab:drop', event.dataTransfer, index);
+                } else {
+                    this.isDrop = undefined;
+                }
+            }, this));
 
             this.manager = new StateManager({bar: this});
 

apps/common/main/resources/less/tabbar.less

@@ -4,10 +4,10 @@
 
     > li {
         float: none;
-        display: inline;
+        display: inline-block;
 
         &.active {
-            > a, > a:hover, > a:focus {
+            > span, > span:hover, > span:focus {
                 background-color: #fff;
                 color: #000;
                 border-color: #fff;
@@ -19,7 +19,7 @@
             transition: left .2s;
         }
 
-        > a {
+        > span {
             display: inline;
             background-color: #7a7a7a;
             color: #fff;
@@ -50,7 +50,7 @@
         > li {
             vertical-align: middle;
 
-            > a {
+            > span {
                 padding-bottom: 1px;
                 border-radius: 0 0 4px 4px;
             }

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

@@ -162,7 +162,8 @@ define([
                 },
                 'cells:range': function(status){
                     me.onCellsRange(status);
-                }
+                },
+                'tabs:dragend': _.bind(me.onDragEndMouseUp, me)
             });
 
             Common.Gateway.on('processmouse', _.bind(me.onProcessMouse, me));
@@ -1526,6 +1527,10 @@ define([
             (data.type == 'mouseup') && (this.mouse.isLeftButtonDown = false);
         },
 
+        onDragEndMouseUp: function() {
+            this.mouse.isLeftButtonDown = false;
+        },
+
         onDocumentMouseMove: function(e) {
             if (e.target.localName !== 'canvas') {
                 this.hideHyperlinkTip();

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

@@ -242,7 +242,7 @@ define([
                     }
                 }).on('dragover', function(e) {
                     var event = e.originalEvent;
-                    if (event.target && $(event.target).closest('#editor_sdk').length<1 ) {
+                    if (event.target && $(event.target).closest('#editor_sdk').length<1 && !($(event.target).is('#statusbar_bottom') || $.contains($('#statusbar_bottom'), $(event.target))) ) {
                         event.preventDefault();
                         event.dataTransfer.dropEffect ="none";
                         return false;
@@ -415,6 +415,8 @@ define([
                     docInfo.put_Permissions(_permissions);
 
                     this.headerView && this.headerView.setDocumentCaption(data.doc.title);
+
+                    Common.Utils.InternalSettings.set("sse-doc-info-key", data.doc.key);
                 }
 
                 this.api.asc_registerCallback('asc_onGetEditorPermissions', _.bind(this.onEditorPermissions, this));

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

@@ -159,6 +159,7 @@ define([
 //                        else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex);
                 } else {
                     item.disable(locked);
+                    item.$el.children(':first-child').attr('draggable', locked?'false':'true');
                 }
             }
         },
@@ -170,6 +171,7 @@ define([
                 if (index == tab.sheetindex) {
                     tab[locked?'addClass':'removeClass']('coauth-locked');
                     tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable);
+                    tab.$el.children(':first-child').attr('draggable', tab.isLockTheDrag?'false':'true');
                     break;
                 }
             }
@@ -550,7 +552,7 @@ define([
                     if ('transparent' === color) {
                         this.api.asc_setWorksheetTabColor(null, arrIndex);
                         selectTabs.forEach(function (tab) {
-                            tab.$el.find('a').css('box-shadow', '');
+                            tab.$el.find('span').css('box-shadow', '');
                         });
                     } else {
                         var asc_clr = Common.Utils.ThemeColor.getRgbColor(color);
@@ -681,9 +683,9 @@ define([
                         color = '0px 4px 0 ' + color + ' inset';
                     }
 
-                    tab.$el.find('a').css('box-shadow', color);
+                    tab.$el.find('span').css('box-shadow', color);
                 } else {
-                    tab.$el.find('a').css('box-shadow', '');
+                    tab.$el.find('span').css('box-shadow', '');
                 }
             }
         },

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

@@ -200,6 +200,92 @@ define([
                             me.fireEvent('sheet:move', [undefined, false, true, tabIndex, index]);
                         }
 
+                    }, this),
+                    'tab:dragstart': _.bind(function (dataTransfer, selectTabs) {
+                        this.api.asc_closeCellEditor();
+                        var arrTabs = [],
+                            arrName = [],
+                            me = this;
+                        var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1;
+                        while (++i < wc) {
+                            if (!this.api.asc_isWorksheetHidden(i)) {
+                                items.push({
+                                    value: me.api.asc_getWorksheetName(i),
+                                    inindex: i
+                                });
+                            }
+                        }
+                        var arrSelectIndex = [];
+                        selectTabs.forEach(function (item) {
+                            arrSelectIndex.push(item.sheetindex);
+                        });
+                        items.forEach(function (item) {
+                            if (arrSelectIndex.indexOf(item.inindex) !== -1) {
+                                arrTabs.push(item.inindex);
+                                arrName.push(item.value);
+                            }
+                        });
+                        var stringSheet, arr = [];
+                        stringSheet = this.api.asc_StartMoveSheet(_.clone(arrTabs));
+                        arr.push({type: 'onlyoffice', value: stringSheet});
+                        arr.push({type: 'indexes', value: arrTabs});
+                        arr.push({type: 'names', value: arrName});
+                        arr.push({type: 'key', value: Common.Utils.InternalSettings.get("sse-doc-info-key")});
+                        var json = JSON.stringify(arr);
+                        dataTransfer.setData("onlyoffice", json);
+                        this.dropTabs = selectTabs;
+                    }, this),
+                    'tab:drop': _.bind(function (dataTransfer, index) {
+                         var data = dataTransfer.getData("onlyoffice");
+                         if (data) {
+                             var arrData = JSON.parse(data);
+                             if (arrData) {
+                                 var key = _.findWhere(arrData, {type: 'key'}).value;
+                                 if (Common.Utils.InternalSettings.get("sse-doc-info-key") === key) {
+                                     this.api.asc_moveWorksheet(index, _.findWhere(arrData, {type: 'indexes'}).value);
+                                     Common.NotificationCenter.trigger('tabs:dragend', this);
+                                 } else {
+                                     var names = [], wc = this.api.asc_getWorksheetsCount();
+                                     while (wc--) {
+                                         names.push(this.api.asc_getWorksheetName(wc).toLowerCase());
+                                     }
+                                     var newNames = [];
+                                     var arrNames = _.findWhere(arrData, {type: 'names'}).value;
+                                     arrNames.forEach(function (name) {
+                                         var ind = 0,
+                                             name = name;
+                                         var first = name;
+                                         if (names.indexOf(name.toLowerCase()) !== -1) {
+                                             while (true) {
+                                                 if (names.indexOf(name.toLowerCase()) === -1) {
+                                                     newNames.push(name);
+                                                     break;
+                                                 } else {
+                                                     ind++;
+                                                     name = first + '(' + ind + ')';
+                                                 }
+                                             }
+                                         } else {
+                                             newNames.push(name);
+                                         }
+                                     });
+                                     this.api.asc_EndMoveSheet(index, newNames, _.findWhere(arrData, {type: 'onlyoffice'}).value);
+                                 }
+                             }
+                         }
+                    }, this),
+                    'tab:dragend':  _.bind(function (cut) {
+                        if (cut) {
+                            if (this.dropTabs.length > 0) {
+                                var arr = [];
+                                this.dropTabs.forEach(function (tab) {
+                                    arr.push(tab.sheetindex);
+                                });
+                                me.api.asc_deleteWorksheet(arr);
+                            }
+                        }
+                        this.dropTabs = undefined;
+                        Common.NotificationCenter.trigger('tabs:dragend', this);
                     }, this)
                 });
 
@@ -326,6 +412,7 @@ define([
                         locked = me.api.asc_isWorksheetLockedOrDeleted(i);
                         tab = {
                             sheetindex    : i,
+                            index         : items.length,
                             active        : sindex == i,
                             label         : me.api.asc_getWorksheetName(i),
 //                          reorderable   : !locked,
@@ -357,6 +444,7 @@ define([
                         this.tabbar.setTabVisible(sindex);
 
                     this.btnAddWorksheet.setDisabled(me.mode.isDisconnected || me.api.asc_isWorkbookLocked() || me.api.isCellEdited);
+                    $('#status-addtabs-box').css('border-right', 'none');
                     $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100)));
 
                     me.fireEvent('sheet:changed', [me, sindex]);

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

@@ -159,11 +159,7 @@
             > li {
                 background-color: @gray-light;
 
-                &:first-child > a {
+                > span {
-                    border-left: 0 none;
-                }
-
-                > a {
                     display: inline-block;
                     .border-radius(0);
                     padding: 0 10px 0;
@@ -171,9 +167,9 @@
                     margin-right: -1px;
                     background-color: @gray-light;
                     outline: none;
-                    border-left-color: @gray-dark;
+                    border-left: 1px solid @gray-dark;
-                    border-right-color: @gray-dark;
+                    border-right: 1px solid @gray-dark;
-                    border-top-color: @gray-dark;
+                    border-top: 1px solid @gray-dark;
 
                     &:hover {
                         border-top-color: @gray-dark;
@@ -183,7 +179,7 @@
                 }
 
                 &.active {
-                    > a {
+                    > span {
                         border-bottom-color: @body-bg;
                         background-color: @body-bg;
                         outline: none;
@@ -195,7 +191,7 @@
                 }
 
                 &.selected {
-                    > a {
+                    > span {
                         border-bottom-color: @body-bg;
                         background-color: @body-bg;
                         box-shadow: 0px 4px 0 #49795d inset;
@@ -205,14 +201,14 @@
                 &.coauth-locked {
                     vertical-align: top;
                     &.active {
-                        > a {
+                        > span {
                             border-top-width: 1px;
                         }
                     }
-                    > a {
+                    > span {
                         outline: none;
                     }
-                    > a:after {
+                    > span:after {
                         position: absolute;
                         content: '';
                         width: 7px;
@@ -228,34 +224,29 @@
                 &.disabled {
                     opacity: 0.5;
 
-                    > a {
+                    > span {
                         cursor: default;
                     }
                 }
 
                 &:not(.active) {
-                    > a {
+                    > span {
                         color: @gray-darker;
                     }
                 }
 
                 &.mousemove {
-                    > a {
+
-                        background: linear-gradient(to right, @gray-deep 0px, @gray-deep 2px, @gray-light 2px);
+                    > span {
+                        border-left: 3px solid #49795d;
+                        padding-left: 8px;
                     }
                     &.right {
-                        > a {
+                        > span {
-                            background: linear-gradient(to left, @gray-deep 0px, @gray-deep 2px, @gray-light 2px);
+                            border-left: 1px solid @gray-dark;
-                        }
+                            border-right: 3px solid #49795d;
-                    }
+                            padding-right: 8px;
-                    &.selected {
+                            padding-left: 10px;
-                        > a {
-                            background: linear-gradient(to right, @gray-deep 0px, @gray-deep 2px, #FFFFFF 2px);
-                        }
-                        &.right {
-                            > a {
-                                background: linear-gradient(to left, @gray-deep 0px, @gray-deep 2px, #FFFFFF 2px);
-                            }
                         }
                     }
                 }
@@ -313,7 +304,7 @@
             li {
                 text-align: center;
 
-                > a {
+                > span {
                       padding-left: 15px;
                       padding-right: 15px;
                 }