From 84b0a557a770548b42f10fadf7311c2dddbe833d Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Thu, 11 Jul 2024 23:49:52 +0200
Subject: [PATCH] fix: layering on episode cards fix: mobile hover touch

---
 common/components/cards/EpisodeCard.svelte |  6 +++-
 common/modules/click.js                    | 39 ++++++++++++----------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/common/components/cards/EpisodeCard.svelte b/common/components/cards/EpisodeCard.svelte
index da0ddf1..0bdbf43 100644
--- a/common/components/cards/EpisodeCard.svelte
+++ b/common/components/cards/EpisodeCard.svelte
@@ -25,7 +25,7 @@
   const progress = liveAnimeEpisodeProgress(media?.id, data?.episode)
 </script>
 
-<div class='d-flex p-20 pb-10 position-relative' use:hoverClick={[data.onclick || viewMedia, setHoverState]}>
+<div class='d-flex p-20 pb-10 position-relative episode-card' use:hoverClick={[data.onclick || viewMedia, setHoverState]}>
   {#if preview}
     <EpisodePreviewCard {data} />
   {/if}
@@ -82,6 +82,10 @@
 </div>
 
 <style>
+  .episode-card:hover {
+    z-index: 30;
+    /* fixes transform scaling on click causing z-index issues */
+  }
   .material-symbols-outlined {
     font-size: 3rem;
   }
diff --git a/common/modules/click.js b/common/modules/click.js
index 08e3a4e..3f6b1ea 100644
--- a/common/modules/click.js
+++ b/common/modules/click.js
@@ -51,7 +51,7 @@ export function click (node, cb = noop) {
  * @param {HTMLElement} node - The node to attach the event listeners to.
  */
 export function hoverClick (node, [cb = noop, hoverUpdate = noop]) {
-  let pointerType = 'mouse'
+  let pointerType = 'touch'
   node.tabIndex = 0
   node.role = 'button'
   node.addEventListener('pointerenter', e => {
@@ -68,26 +68,25 @@ export function hoverClick (node, [cb = noop, hoverUpdate = noop]) {
     if (lastTapElement === hoverUpdate) {
       lastTapElement = null
       navigator.vibrate(15)
+      hoverUpdate(false)
       cb(e)
     } else {
       lastTapElement = hoverUpdate
     }
   })
-  if (!SUPPORTS.isAndroid) {
-    node.addEventListener('keydown', e => {
-      if (e.key === 'Enter') {
-        e.stopPropagation()
-        lastTapElement?.(false)
-        if (lastTapElement === hoverUpdate) {
-          lastTapElement = null
-          cb(e)
-        } else {
-          hoverUpdate(true)
-          lastTapElement = hoverUpdate
-        }
+  node.addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation()
+      lastTapElement?.(false)
+      if (lastTapElement === hoverUpdate) {
+        lastTapElement = null
+        cb(e)
+      } else {
+        hoverUpdate(true)
+        if (!SUPPORTS.isAndroid) lastTapElement = hoverUpdate
       }
-    })
-  }
+    }
+  })
   node.addEventListener('pointerup', e => {
     e.stopPropagation()
     if (e.pointerType === 'mouse') setTimeout(() => hoverUpdate(false))
@@ -102,7 +101,7 @@ export function hoverClick (node, [cb = noop, hoverUpdate = noop]) {
 }
 
 const Directions = { up: 1, right: 2, down: 3, left: 4 }
-const InverseDirections = { up: 'down', down: 'up', left: 'right', right: 'left' }
+// const InverseDirections = { up: 'down', down: 'up', left: 'right', right: 'left' }
 const DirectionKeyMap = { ArrowDown: 'down', ArrowUp: 'up', ArrowLeft: 'left', ArrowRight: 'right' }
 
 /**
@@ -219,9 +218,13 @@ function navigateDPad (direction = 'up') {
 
     const isInput = element.matches('input[type=text], input[type=url], input[type=number], textarea')
     // make readonly
-    if (isInput) element.readOnly = true
+    let wasReadOnly = false
+    if (isInput) {
+      wasReadOnly = element.readOnly
+      element.readOnly = true
+    }
     element.focus()
-    if (isInput) setTimeout(() => { element.readOnly = false })
+    if (isInput && !wasReadOnly) setTimeout(() => { element.readOnly = false })
     element.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' })
     // return
   }