Fix background tappable on mobile

migaku-official · Mar 6, 2025 · 696e904 · 696e904
1 parent 0250068
commit 696e904
Show file tree

Hide file tree

Showing 11 changed files with 2,409 additions and 2,468 deletions.
diff --git a/src/languages/de/card/support.html b/src/languages/de/card/support.html
diff --git a/src/languages/en/card/support.html b/src/languages/en/card/support.html
diff --git a/src/languages/es/card/support.html b/src/languages/es/card/support.html
diff --git a/src/languages/fr/card/support.html b/src/languages/fr/card/support.html
diff --git a/src/languages/ja/card/support.html b/src/languages/ja/card/support.html
diff --git a/src/languages/ko/card/support.html b/src/languages/ko/card/support.html
diff --git a/src/languages/pt/card/support.html b/src/languages/pt/card/support.html
diff --git a/src/languages/vi/card/support.html b/src/languages/vi/card/support.html
diff --git a/src/languages/yue/card/support.html b/src/languages/yue/card/support.html
diff --git a/src/languages/zh_CN/card/support.html b/src/languages/zh_CN/card/support.html
@@ -533,12 +533,6 @@
             }
         }
 
-        function on_closeAllActiveBody(event) {
-            if (!event.target.closest('.word')) {
-                closeAllActive()
-            }
-        }
-
         function activeEnablePopup(elem) {
             const popup_elem = elem.querySelector('.popup')
             if (!popup_elem) {
@@ -602,25 +596,26 @@
             this.classList.remove('active', 'popup-active')
         }
 
+        function on_activeToggle() {
+            if (this.classList.contains('active')) {
+                this.classList.remove('active', 'popup-active')
+            } else {
+                closeAllActive()
+                this.classList.add('active')
+                activeEnablePopup(this)
+            }
+        }
+
         const word_elements = document.querySelectorAll('.word')
         const is_mobile = typeof (pycmd) === typeof (undefined)
-
         for (elem of word_elements) {
-            elem.addEventListener('mouseenter', on_activeEnter)
-            elem.addEventListener('ontouchend', on_activeEnter)
-            if (!is_mobile) {
-                elem.addEventListener('mouseleave', on_activeLeave)
-            }
             if (is_mobile) {
-                elem.addEventListener('click', on_activeEnter)
+                elem.addEventListener('click', on_activeToggle)
                 elem.classList.add('tappable')
+            } else {
+                elem.addEventListener('mouseenter', on_activeEnter)
+                elem.addEventListener('mouseleave', on_activeLeave)
             }
         }
-
-        if (is_mobile) {
-            document.body.addEventListener('click', on_closeAllActiveBody)
-            document.body.classList.add('tappable')
-        }
-
     }());
 </script>
diff --git a/src/languages/zh_TW/card/support.html b/src/languages/zh_TW/card/support.html
@@ -536,12 +536,6 @@
             }
         }
 
-        function on_closeAllActiveBody(event) {
-            if (!event.target.closest('.word')) {
-                closeAllActive()
-            }
-        }
-
         function activeEnablePopup(elem) {
             const popup_elem = elem.querySelector('.popup')
             if (!popup_elem) {
@@ -605,25 +599,26 @@
             this.classList.remove('active', 'popup-active')
         }
 
+        function on_activeToggle() {
+            if (this.classList.contains('active')) {
+                this.classList.remove('active', 'popup-active')
+            } else {
+                closeAllActive()
+                this.classList.add('active')
+                activeEnablePopup(this)
+            }
+        }
+
         const word_elements = document.querySelectorAll('.word')
         const is_mobile = typeof (pycmd) === typeof (undefined)
-
         for (elem of word_elements) {
-            elem.addEventListener('mouseenter', on_activeEnter)
-            elem.addEventListener('ontouchend', on_activeEnter)
-            if (!is_mobile) {
-                elem.addEventListener('mouseleave', on_activeLeave)
-            }
             if (is_mobile) {
-                elem.addEventListener('click', on_activeEnter)
+                elem.addEventListener('click', on_activeToggle)
                 elem.classList.add('tappable')
+            } else {
+                elem.addEventListener('mouseenter', on_activeEnter)
+                elem.addEventListener('mouseleave', on_activeLeave)
             }
         }
-
-        if (is_mobile) {
-            document.body.addEventListener('click', on_closeAllActiveBody)
-            document.body.classList.add('tappable')
-        }
-
     }());
 </script>