Improve compatibility with touch devices

7nik · Sep 2, 2023 · de18f53 · de18f53
1 parent 318cbf5
commit de18f53
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # NeonMob Trade Enhancements changelog
 
+## 3.3.2
+* Improve compatibility with touch devices
+
 ## 3.3.1
 * Fixed not running in Safari (old version only?)
 * Fixed not playing animated cards in some cases

diff --git a/app/components/elements/DoubleRange.svelte b/app/components/elements/DoubleRange.svelte
@@ -93,21 +93,23 @@
         }, 300);
     }
 
-    function startDrag (ev: MouseEvent, isLeft: boolean) {
+    function startDrag (ev: MouseEvent | TouchEvent, isLeft: boolean) {
         ev.preventDefault();
+        const isTouch = ev instanceof TouchEvent;
         const elem = ev.target as HTMLElement;
         elem.classList.add("dragging");
         const { left,  width } = elem.closest(".slider")!.getBoundingClientRect();
-        window.addEventListener("mousemove", move);
+        window.addEventListener(isTouch ? "touchmove" : "mousemove", move);
         window.addEventListener(
-            "mouseup",
+            isTouch ? "touchend" : "mouseup",
             () => {
-                window.removeEventListener("mousemove", move);
+                window.removeEventListener(isTouch ? "touchmove" : "mousemove", move);
                 elem.classList.remove("dragging");
             },
             { once: true },
         );
-        function move ({ clientX: x }: MouseEvent) {
+        function move (ev: MouseEvent | TouchEvent) {
+            const x = ev instanceof MouseEvent ? ev.clientX : ev.touches[0].clientX;
             if (isLeft) {
                 setValue(0, lim(0, end, (x - left) / width));
             } else {
@@ -165,11 +167,17 @@
 <span class="slider" style:--start="{start * 100}%" style:--end="{end * 100}%">
     <div class="range"></div>
     <div class="handles">
-        <div class="handle" on:mousedown={(ev) => startDrag(ev, true)}>
+        <div class="handle"
+            on:mousedown={(ev) => startDrag(ev, true)}
+            on:touchstart={(ev) => startDrag(ev, true)}
+        >
             <div class="label">{num2text(toStep(start))}</div>
         </div>
         {#if start < 1}
-            <div class="handle" on:mousedown={(ev) => startDrag(ev, false)}>
+            <div class="handle"
+                on:mousedown={(ev) => startDrag(ev, false)}
+                on:touchstart={(ev) => startDrag(ev, false)}
+            >
                 <div class="label">{num2text(toStep(end))}</div>
             </div>
         {/if}

diff --git a/app/components/trade-window/TradeWindowEditOffer.svelte b/app/components/trade-window/TradeWindowEditOffer.svelte
@@ -148,6 +148,8 @@
         filterMenuBtn.style.setProperty("--left", `${left}px`);
         filterMenuBtn.style.setProperty("--top", `${top}px`);
     }
+
+    let holdMenuOpened = false;
 </script>
 
 <svelte:window on:resize={updateFilterMenuPosition}/>
@@ -156,11 +158,22 @@
     <header>
         <Avatar user={cardOwner} />
         Add cards {isItYou ? "you" : cardOwner.first_name} will give
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <span class="edit-filters-btn"
+            class:opened={holdMenuOpened}
             on:mouseenter={updateFilterMenuPosition}
+            on:click|self={() => {
+                holdMenuOpened = false;
+            }}
             bind:this={filterMenuBtn}
         >
-            <Button type="subdued-light" size="mini">Edit filters</Button>
+            <Button type="subdued-light" size="mini"
+                on:click={() => {
+                    console.log("open");
+                    holdMenuOpened = true;
+                    updateFilterMenuPosition();
+                }}
+            >Edit filters</Button>
             <div class="filters-menu">
                 <FiltersMenu
                     {sett}
@@ -169,6 +182,7 @@
                 />
             </div>
         </span>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <span class=close-btn on:click={() => dispatch("close")}>
             <Icon icon="close"/>
         </span>
@@ -298,11 +312,20 @@
         }
     }
     .edit-filters-btn > :global(:first-child:hover + .filters-menu),
-    .edit-filters-btn > :global(:first-child:active + .filters-menu),
+    .edit-filters-btn.opened > :global(.filters-menu),
     .filters-menu:hover {
         visibility: visible;
         transition-delay: 0s;
     }
+    .edit-filters-btn.opened:after {
+        content: "";
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+    }
     .close-btn {
         align-self: flex-start;
         cursor: pointer;

diff --git a/app/utils/tooltip.css b/app/utils/tooltip.css
@@ -37,3 +37,13 @@
 #nmte-tips > div[data-placement=left] .arrow svg {
     transform: rotate(-90deg);
 }
+
+#nmte-tips > .backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    max-width: none;
+    opacity: 0;
+}
diff --git a/app/utils/tooltip.ts b/app/utils/tooltip.ts
@@ -192,6 +192,19 @@ export default <Params, C extends ContentType>(
             if (!param) return;
             showTooltip(elem, typeof provider === "function" ? () => provider(param!) : provider);
         });
+        elem.addEventListener("touchstart", (ev) => {
+            if (!param) return;
+            ev.preventDefault();
+            showTooltip(elem, typeof provider === "function" ? () => provider(param!) : provider);
+
+            const backdrop = document.createElement("div");
+            backdrop.classList.add("backdrop");
+            backdrop.addEventListener("touchstart", () => {
+                hideTooltip();
+                backdrop.remove();
+            }, { once: true });
+            attachTip(backdrop);
+        });
         return {
             update (p) {
                 param = p;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neonmob-trade-enhancements",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "private": true,
   "description": "Adds enhancements to improve trading and usage experience",
   "scripts": {