From 15a8b573218835e3f7dd1ab442506936b985de18 Mon Sep 17 00:00:00 2001
From: Santiago Cattaneo <santiago@rd-its.com>
Date: Mon, 18 Apr 2022 14:14:59 -0300
Subject: [PATCH] * touch events

---
 BlazorReorderList/Reorder.razor               | 20 +++++++++++++++++--
 BlazorReorderList/ReorderService.cs           |  4 ++--
 BlazorReorderList/wwwroot/ReorderJsInterop.js |  3 ++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/BlazorReorderList/Reorder.razor b/BlazorReorderList/Reorder.razor
index a6f0fbe..8bdeacf 100644
--- a/BlazorReorderList/Reorder.razor
+++ b/BlazorReorderList/Reorder.razor
@@ -19,7 +19,7 @@
         @foreach (var item in Items.Select((v, i) => (v, i)))
         {
             <div @ref="itemElem[item.i]" @key="item.i" class="item @((object)item.v == (object)rs.selected ? "active" : "")"
-            @onmousedown="async (e) => await onPress(e, item.v, item.i)">
+            @onmousedown="async (e) => await onPress(e, item.v, item.i)" @ontouchstart="async (e) => await onTouch(e, item.v, item.i)">
                 @ChildContent(item.v)
             </div>
         }
@@ -87,7 +87,23 @@
         var ghostElem = itemElem[index];
         elemWidth = await rs.getWidth(ghostElem);
         elemPosition = await rs.getPosition(ghostElem);
-        clickPosition = await rs.getPoint(m);
+        clickPosition = await rs.getPoint(m.PageX, m.PageY, m.ClientX, m.ClientY);
+        TItem? clone = Copy != null ? Copy(item) : default(TItem);
+        rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
+        await OnStart.InvokeAsync(rs.selected);
+    }
+
+    public async Task onTouch(TouchEventArgs m, TItem item, int index)
+    {
+        if (Disabled || DisableDrag) return;
+        if (itemElem == null) return;
+
+        shouldRender = false; // Because the method triggers re-render, the click propagation is canceled, if you have a link/or any click event inside it's going to stop working
+        var ghostElem = itemElem[index];
+        elemWidth = await rs.getWidth(ghostElem);
+        elemPosition = await rs.getPosition(ghostElem);
+        var p = m.TargetTouches.First();
+        clickPosition = await rs.getPoint(p.PageX, p.PageY, p.ClientX, p.ClientY);
         TItem? clone = Copy != null ? Copy(item) : default(TItem);
         rs.Set(Items, clone != null ? clone : item, index, clickPosition, clone != null);
         await OnStart.InvokeAsync(rs.selected);
diff --git a/BlazorReorderList/ReorderService.cs b/BlazorReorderList/ReorderService.cs
index d5ecf47..80e5d62 100644
--- a/BlazorReorderList/ReorderService.cs
+++ b/BlazorReorderList/ReorderService.cs
@@ -71,10 +71,10 @@ public class ReorderService<TItem> : IAsyncDisposable
         return await module.InvokeAsync<point>("getPosition", el);
     }
 
-    public async ValueTask<point> getPoint(MouseEventArgs ev)
+    public async ValueTask<point> getPoint(double PageX, double PageY, double ClientX, double ClientY)
     {
         var module = await moduleTask.Value;
-        return await module.InvokeAsync<point>("getPoint", ev.PageX, ev.PageY, ev.ClientX, ev.ClientY);
+        return await module.InvokeAsync<point>("getPoint", PageX, PageY, ClientX, ClientY);
     }
 
     public async ValueTask<clientRect> getClientRect(ElementReference el)
diff --git a/BlazorReorderList/wwwroot/ReorderJsInterop.js b/BlazorReorderList/wwwroot/ReorderJsInterop.js
index 21125d6..bc25c29 100644
--- a/BlazorReorderList/wwwroot/ReorderJsInterop.js
+++ b/BlazorReorderList/wwwroot/ReorderJsInterop.js
@@ -30,7 +30,8 @@ export function removeEvents(dotNet) {
 
 // only invoke events form the collection
 function onMove(e) {
-    var point = getPoint(e.pageX, e.pageY, e.clientX, e.clientY);
+    var p = e.touches && e.touches.length > 0 ? e.touches[0] : e;
+    var point = getPoint(p.pageX, p.pageY, p.clientX, p.clientY);
     for (var i = 0; i < dotNetInstance.length; i++) {
         dotNetInstance[i].invokeMethodAsync("onMove", point);
     }