diff --git a/loleaflet/css/spreadsheet.css b/loleaflet/css/spreadsheet.css index afa7ce2b4..5f0549477 100644 --- a/loleaflet/css/spreadsheet.css +++ b/loleaflet/css/spreadsheet.css @@ -58,6 +58,27 @@ border-top: 0px; } +#first-tab-drop-site { + height: 20px; + width: 3px; + opacity: 0; + margin-top: 4px; + padding-top: 8px; + vertical-align: bottom; + display: inline-block; + background-color: gray; + padding-bottom: 5px; +} + +.tab-dropsite { + border-right: gray solid 5px; +} + +#first-tab-drop-site.tab-dropsite { + width: 0 !important; + opacity: 100% !important; +} + #spreadsheet-row-column-frame { position: absolute; left: 0; diff --git a/loleaflet/src/control/Control.Tabs.js b/loleaflet/src/control/Control.Tabs.js index 097786a5a..0f4a4c4e7 100644 --- a/loleaflet/src/control/Control.Tabs.js +++ b/loleaflet/src/control/Control.Tabs.js @@ -132,6 +132,11 @@ L.Control.Tabs = L.Control.extend({ var menuData = L.Control.JSDialogBuilder.getMenuStructureForMobileWizard(this._menuItem, true, ''); } + var frame = L.DomUtil.create('div', '', ssTabScroll); + frame.setAttribute('draggable', false); + frame.setAttribute('id', 'first-tab-drop-site'); + this._addDnDHandlers(frame); + for (var i = 0; i < parts; i++) { if (e.hiddenParts.indexOf(i) !== -1) continue; @@ -165,6 +170,7 @@ L.Control.Tabs = L.Control.extend({ .on(tab, 'click', L.DomEvent.stop) .on(tab, 'click', this._setPart, this) .on(tab, 'click', this._map.focus, this._map); + this._addDnDHandlers(tab); this._spreadsheetTabs[id] = tab; } } @@ -190,6 +196,18 @@ L.Control.Tabs = L.Control.extend({ } }, + _addDnDHandlers: function(element) { + if (!this._map.isPermissionReadOnly()) { + element.setAttribute('draggable', true); + element.addEventListener('dragstart', this._handleDragStart.bind(this), false); + element.addEventListener('dragenter', this._handleDragEnter, false); + element.addEventListener('dragover', this._handleDragOver, false); + element.addEventListener('dragleave', this._handleDragLeave, false); + element.addEventListener('drop', this._handleDrop.bind(this), false); + element.addEventListener('dragend', this._handleDragEnd, false); + } + }, + _setPart: function (e) { var part = e.target.id.match(/\d+/g)[0]; if (part !== null) { @@ -264,6 +282,46 @@ L.Control.Tabs = L.Control.extend({ _hideSheet: function() { this._map.hidePage(this._tabForContextMenu); + }, + + _handleDragStart: function(e) { + this._setPart(e); + e.dataTransfer.effectAllowed = 'move'; + }, + + _handleDragEnter: function() { + + }, + + _handleDragOver: function(e) { + if (e.preventDefault) { + e.preventDefault(); + } + + // By default we move when dragging, but can + // support duplication with ctrl in the future. + e.dataTransfer.dropEffect = 'move'; + + this.classList.add('tab-dropsite'); + return false; + }, + + _handleDragLeave: function() { + this.classList.remove('tab-dropsite'); + }, + + _handleDrop: function(e) { + if (e.stopPropagation) { + e.stopPropagation(); + } + e.target.classList.remove('tab-dropsite'); + var targetIndex = this._map._docLayer._partNames.indexOf(e.target.innerText); + + this._moveSheet(targetIndex+2); + }, + + _handleDragEnd: function() { + this.classList.remove('tab-dropsite'); } });