strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

leaflet: support reordering sheet tabs via drag and drop

Browse source 
Signed-off-by: Pranam Lashkari <lpranam@collabora.com>
Change-Id: Ibe4106aca08456410c4c524eeb8a630993737815
This commit is contained in:
Pranam Lashkari 2020-11-24 20:41:19 +05:30 committed by Henry Castro
parent 5eb8e5448f
commit 005132da03
2 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
loleaflet/css/spreadsheet.css
View file

@ -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;

58
loleaflet/src/control/Control.Tabs.js
View file

@ -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');
}
});