From 5e47e7965958c776060bfa7c8c1054ac0f81aeab Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 12 Dec 2019 14:35:57 +0300 Subject: [PATCH 01/11] [SSE] Drag and drop for move sheet --- apps/common/main/lib/component/TabBar.js | 2 ++ apps/spreadsheeteditor/main/app/view/Statusbar.js | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 9b77da678..17406f67c 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/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); } } } diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 0d50e0bfc..3c415d6c1 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -200,6 +200,12 @@ define([ me.fireEvent('sheet:move', [undefined, false, true, tabIndex, index]); } + }, this), + 'tab:drag' : _.bind(function (selectTabs) { + + }, this), + 'tab:drop' : _.bind(function (selectTabs) { + }, this) }); From 45b7b71a0ad79ea9217a647a10ed4040d32b4075 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 24 Dec 2019 10:52:37 +0300 Subject: [PATCH 02/11] [SSE] Move sheet: drag and drop --- apps/common/main/lib/component/Tab.js | 2 +- apps/common/main/lib/component/TabBar.js | 31 ++++++++++++++++++++++-- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js index 108672047..be04ba493 100644 --- a/apps/common/main/lib/component/Tab.js +++ b/apps/common/main/lib/component/Tab.js @@ -52,7 +52,7 @@ define([ this.label = 'Tab'; this.cls = ''; this.template = _.template(['
  • ', - '<%- label %>', + '<%- label %>', '
    • '].join('')); this.initialize.call(this, opts); diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index 17406f67c..d0d82bd6a 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -233,15 +233,32 @@ 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 (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) { if (!tab.isLockTheDrag) { if (!e.ctrlKey && !e.metaKey && !e.shiftKey) tab.changeState(); dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs); } - } + }*/ + 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), + dragover: $.proxy(function (e) { + var event = e.originalEvent; + if (event.preventDefault) { + event.preventDefault(); // Necessary. Allows us to drop. + } + event.dataTransfer.dropEffect = 'move'; + return false; + }, this), + }); }; StateManager.prototype.detach = function (tab) { @@ -276,6 +293,16 @@ 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], 'dragover', _.bind(function (event) { + if (event.preventDefault) { + event.preventDefault(); // Necessary. Allows us to drop. + } + event.dataTransfer.dropEffect = 'move'; + return false; + }, this)); this.manager = new StateManager({bar: this}); From d8e1f30847398cdd78f9aee33a88e602dbfc1166 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 13 Jan 2020 11:36:22 +0300 Subject: [PATCH 03/11] [SSE] Move sheet: drag and drop --- apps/common/main/lib/component/Tab.js | 3 ++- apps/common/main/lib/component/TabBar.js | 17 ++++++++++++++++- .../main/app/controller/Main.js | 2 +- .../main/app/view/Statusbar.js | 17 +++++++++++++---- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/apps/common/main/lib/component/Tab.js b/apps/common/main/lib/component/Tab.js index be04ba493..199911557 100644 --- a/apps/common/main/lib/component/Tab.js +++ b/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(['
  • ', - '<%- label %>', + '<%- label %>', '
    • '].join('')); this.initialize.call(this, opts); diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index d0d82bd6a..a7a93d000 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -249,6 +249,11 @@ define([ 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'); }, this), dragover: $.proxy(function (e) { var event = e.originalEvent; @@ -258,6 +263,15 @@ define([ event.dataTransfer.dropEffect = 'move'; return false; }, this), + dragend: $.proxy(function (e) { + 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) }); }; @@ -273,7 +287,7 @@ define([ }, tabs: [], - template: _.template('
      '), + template: _.template('