ashpie/tabs
ashpie/tabs
1
0
Fork 0
Code Issues 12 Pull Requests Releases 49 Wiki Activity

Greatly improve service reordering drag and drop

Browse Source
This commit is contained in:
Alice Gaudon 2020-05-19 05:28:52 +02:00
parent c503016941
commit 7dea8d9484
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/index.js
View File

@ -22,6 +22,7 @@ let addButton;
let emptyPage; let emptyPage;
let urlPreview; let urlPreview;
let lastDragPosition;
// Service context menu // Service context menu
function openServiceContextMenu(event, serviceId) { function openServiceContextMenu(event, serviceId) {
@ -146,7 +147,7 @@ ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices,
} }
// Init drag last position // Init drag last position
const lastDragPosition = document.getElementById('service-last-drag-position'); lastDragPosition = document.getElementById('service-last-drag-position');
lastDragPosition.addEventListener('dragover', () => { lastDragPosition.addEventListener('dragover', () => {
const index = services.length; const index = services.length;
if (draggedId !== index && draggedId !== index - 1) { if (draggedId !== index && draggedId !== index - 1) {
@ -311,13 +312,25 @@ function initDrag(index, li) {
event.dataTransfer.dropEffect = 'move'; event.dataTransfer.dropEffect = 'move';
document.getElementById('service-last-drag-position').classList.remove('hidden'); document.getElementById('service-last-drag-position').classList.remove('hidden');
}); });
li.addEventListener('dragover', () => { li.addEventListener('dragover', (e) => {
if (draggedId !== index && draggedId !== index - 1) { let realIndex = index;
resetDrag(); let rect = li.getBoundingClientRect();
lastDragTarget = dragTargetId = index;
document.getElementById('service-last-drag-position').classList.remove('hidden'); if ((e.clientY - rect.y) / rect.height >= 0.5) {
li.classList.add('drag-target'); realIndex++;
} }
if (draggedId === realIndex - 1) {
realIndex--;
}
resetDrag();
let el = realIndex === services.length ? lastDragPosition : services[realIndex].li;
lastDragTarget = dragTargetId = realIndex;
lastDragPosition.classList.remove('hidden');
el.classList.add('drag-target');
if (draggedId === realIndex || draggedId === realIndex - 1) el.classList.add('drag-target-self');
}); });
li.addEventListener('dragend', () => { li.addEventListener('dragend', () => {
reorderService(draggedId, lastDragTarget); reorderService(draggedId, lastDragTarget);
@ -331,6 +344,7 @@ function resetDrag() {
dragTargetCount = 0; dragTargetCount = 0;
document.getElementById('service-selector').querySelectorAll('li').forEach(li => { document.getElementById('service-selector').querySelectorAll('li').forEach(li => {
li.classList.remove('drag-target'); li.classList.remove('drag-target');
li.classList.remove('drag-target-self');
}); });
const lastDragPosition = document.getElementById('service-last-drag-position'); const lastDragPosition = document.getElementById('service-last-drag-position');
lastDragPosition.classList.remove('drag-target'); lastDragPosition.classList.remove('drag-target');

4
resources/style/index.css
View File

@ -38,7 +38,7 @@ body {
user-drag: none; user-drag: none;
} }
#service-selector .drag-target button { #service-selector .drag-target:not(.drag-target-self) button {
height: 96px; height: 96px;
padding-top: 48px; padding-top: 48px;
} }
@ -49,8 +49,6 @@ body {
height: 48px; height: 48px;
border: 1px dashed #fff; border: 1px dashed #fff;
box-sizing: border-box; box-sizing: border-box;
background-color: rgb(43, 43, 43);
} }
#service-selector .drag-target button::after { #service-selector .drag-target button::after {