working on event handlers for mobile devices

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/task/EasyList.svelte

@@ -16,17 +16,15 @@
     let router  = useTinyRouter();
     let sorted  = $derived(tasks ? Object.values(tasks).filter(noNoIndex).sort(byName) : null);
 
+    let start     = 0;
+    let x         = 0;
+    let y         = 0;
+
+
     function byName(a,b){
         return a.name.localeCompare(b.name);
     }
 
-
-    function close(e,task){
-        e.stopPropagation();
-        e.preventDefault();
-        update(task,60);
-    }
-
     function goTag(e,newTag){
         e.preventDefault();
         e.stopPropagation();
@@ -39,9 +37,8 @@
         const url = api(`task/tagged/${tag}`);
         const res = await get(url);
         if (res.ok){
-            tasks = await res.json();
-            console.log(Object.values(tasks).map(t => t.name));
             yikes();
+            tasks = await res.json();
             input.focus();
         } else error(res);
     }
@@ -50,6 +47,12 @@
         return !task.no_index;
     }
 
+    function ignore(evt){
+        evt.preventDefault();
+        evt.stopPropagation();
+        return false;
+    }
+
     function extend(e,task){
         e.preventDefault();
         e.stopPropagation();
@@ -57,10 +60,47 @@
         return false;
     }
 
-    function open(e,task){
-        e.stopPropagation();
-        e.preventDefault();
-        update(task,20);
+
+    function getTask(evt){
+        var link = evt.target;
+        var id = link.getAttribute('task_id');
+        return tasks[id];
+    }
+
+    function onclick(evt) {
+        let task = getTask(evt);
+        if (task.status <= 20) { // open
+            update(task,60);
+        } else update(task,20);
+        return ignore(evt);
+    }
+
+    function oncontextmenu(evt) {
+        highlight = getTask(evt);
+        return ignore(evt);
+    }
+
+    function ontouchstart(evt){
+        start = evt.timeStamp;
+        x     = evt.touches[0].clientX;
+        y     = evt.touches[0].clientY;
+        return ignore(evt);
+    }
+
+    function ontouchend(evt){
+        let d = Math.abs(x - evt.changedTouches[0].clientX) + Math.abs(y - evt.changedTouches[0].clientY);
+        measured(evt, evt.timeStamp - start, d);
+        return ignore(evt);
+    }
+
+
+    function measured(evt,duration,d){
+        if (d > 100) return;
+        if (duration < 500){
+            onclick(evt);
+        } else {
+            oncontextmenu(evt);
+        }
     }
 
     async function update(task,newState){
@@ -87,7 +127,7 @@
         {#if sorted}
         {#each sorted as task}
             {#if task.status == 20 && (!filter || task.name.toLowerCase().includes(search))}
-            <a href={`/task/${task.id}/view`} title={task.description.source} onclick={e => close(e,task)} oncontextmenu={e => extend(e,task)} >
+        <a href={`/task/${task.id}/view`} title={task.description.source} task_id={task.id} {onclick} {oncontextmenu} {ontouchstart} {ontouchend} >
                 {task.name}
             </a>
             {#if highlight == task}
@@ -103,7 +143,7 @@
         {#if sorted}
         {#each sorted as task}
         {#if task.status > 20 && (!filter || task.name.toLowerCase().includes(search))}
-        <a href={`/task/${task.id}/view`} title={task.description.source} onclick={e => open(e,task)} oncontextmenu={e => extend(e,task)} >
+        <a href={`/task/${task.id}/view`} title={task.description.source} task_id={task.id} {onclick} {oncontextmenu} {ontouchstart} {ontouchend} >
         {task.name}
         </a>
         {#if highlight == task}