From 55049ba9d23c8d1abe0002e235f914c33443f30d Mon Sep 17 00:00:00 2001 From: Marc-Andre Ferland Date: Sat, 24 Dec 2022 04:42:43 -0500 Subject: [PATCH 1/2] Add a debounce delay to allow mobile to bouble tap. --- ui/media/js/main.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5fd34844..2f46d1a1 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -828,12 +828,17 @@ function createTask(task) { ` createCollapsibles(taskEntry) - + let draghandle = taskEntry.querySelector('.drag-handle') - draghandle.addEventListener('mousedown', (e) => { taskEntry.setAttribute('draggable',true)}) - draghandle.addEventListener('mouseup', (e) => { taskEntry.setAttribute('draggable',false)}) - taskEntry.addEventListener('dragend', (e) => { - taskEntry.setAttribute('draggable',false); + draghandle.addEventListener('mousedown', (e) => { + taskEntry.setAttribute('draggable', true) + }) + // Add a debounce delay to allow mobile to bouble tap. + draghandle.addEventListener('mouseup', debounce((e) => { + taskEntry.setAttribute('draggable', false) + }, 2000)) + taskEntry.addEventListener('dragend', (e) => { + taskEntry.setAttribute('draggable', false); imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { itc.classList.remove('dropTargetBefore','dropTargetAfter'); }); @@ -846,7 +851,6 @@ function createTask(task) { startY = e.target.closest(".imageTaskContainer").offsetTop; }) - if (task.reqBody.init_image !== undefined) { createInitImageHover(taskEntry) } From 04d67a24b6f8e001820e4d61d3300b77157f7cfb Mon Sep 17 00:00:00 2001 From: Marc-Andre Ferland Date: Sat, 24 Dec 2022 04:55:28 -0500 Subject: [PATCH 2/2] Don't allow the results to be collapsed when clicking draghandle --- ui/media/js/main.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 2f46d1a1..b518c8c1 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -837,6 +837,9 @@ function createTask(task) { draghandle.addEventListener('mouseup', debounce((e) => { taskEntry.setAttribute('draggable', false) }, 2000)) + draghandle.addEventListener('click', (e) => { + e.preventDefault() // Don't allow the results to be collapsed... + }) taskEntry.addEventListener('dragend', (e) => { taskEntry.setAttribute('draggable', false); imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => {