From 0cc8a72e45fe2891c9e11de8566fce91c16d62d3 Mon Sep 17 00:00:00 2001
From: tdro <tdro@noreply.example.com>
Date: Thu, 30 Nov 2023 17:11:23 -0500
Subject: static/js/index: Add hover fix

Show visibility and transition-delay based :hovers only when mouse has stopped
---
 assets/js/index.js    | 41 ++++++++++++++++++++++++++++++++++
 static/js/hoverfix.ts | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++
 static/js/index.ts    |  1 +
 3 files changed, 104 insertions(+)
 create mode 100644 static/js/hoverfix.ts

diff --git a/assets/js/index.js b/assets/js/index.js
index 78fb432..b4e0120 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -599,6 +599,47 @@
         });
     });
 })();
+(function() {
+    if (typeof Element !== "undefined") {
+        if (!Element.prototype.matches) {
+            Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+        }
+        if (!Element.prototype.closest) {
+            Element.prototype.closest = function(s) {
+                var el = this;
+                do {
+                    if (el.matches(s)) return el;
+                    el = el.parentElement || el.parentNode;
+                }while (el !== null && el.nodeType === 1)
+                return null;
+            };
+        }
+    }
+    const disabled = "0s";
+    function walk(children, callback) {
+        for(let i1 = 0; i1 < children.length; i1++){
+            callback(children[i1]);
+            walk(children[i1].children, callback);
+        }
+    }
+    self.addEventListener("mousemove", function(event) {
+        tree = event.target.closest("figure") || event.target.closest("article");
+        if (tree !== null) {
+            walk(tree.children, function(element) {
+                const delay = self.getComputedStyle(element).getPropertyValue("transition-delay");
+                if (delay !== disabled) {
+                    element.style.setProperty("visibility", "hidden");
+                }
+            });
+            walk(tree.children, function(element) {
+                const delay = self.getComputedStyle(element).getPropertyValue("transition-delay");
+                if (delay !== disabled) {
+                    element.style.removeProperty("visibility");
+                }
+            });
+        }
+    });
+})();
 (function() {
     const relative = new Intl.RelativeTimeFormat("en", {
         localeMatcher: "best fit",
diff --git a/static/js/hoverfix.ts b/static/js/hoverfix.ts
new file mode 100644
index 0000000..c08d089
--- /dev/null
+++ b/static/js/hoverfix.ts
@@ -0,0 +1,62 @@
+(function () {
+  /*/
+   *  Element.closest() polyfill
+   *  https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+   *  https://github.com/idmadj/element-closest-polyfill#readme
+   *  Abdelmadjid Hammou | ISC License: https://opensource.org/license/isc-license-txt/
+  /*/
+
+  if (typeof Element !== "undefined") {
+    if (!Element.prototype.matches) {
+      Element.prototype.matches = Element.prototype.msMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+    }
+    if (!Element.prototype.closest) {
+      Element.prototype.closest = function (s) {
+        var el = this;
+        do {
+          if (el.matches(s)) return el;
+          el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+        return null;
+      };
+    }
+  }
+
+  /*/
+   * -----------------------------------------------------------------
+  /*/
+
+  const disabled = "0s";
+
+  function walk(children, callback) {
+    for (let i = 0; i < children.length; i++) {
+      callback(children[i]);
+      walk(children[i].children, callback);
+    }
+  }
+
+  self.addEventListener("mousemove", function (event) {
+    tree = event.target.closest("figure") || event.target.closest("article");
+
+    if (tree !== null) {
+      walk(tree.children, function (element) {
+        const delay = self.getComputedStyle(element).getPropertyValue(
+          "transition-delay",
+        );
+        if (delay !== disabled) {
+          element.style.setProperty("visibility", "hidden");
+        }
+      });
+
+      walk(tree.children, function (element) {
+        const delay = self.getComputedStyle(element).getPropertyValue(
+          "transition-delay",
+        );
+        if (delay !== disabled) {
+          element.style.removeProperty("visibility");
+        }
+      });
+    }
+  });
+})();
diff --git a/static/js/index.ts b/static/js/index.ts
index da4defa..8495c2c 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -5,6 +5,7 @@ import "./instantpage.ts";
 import "./contextmenu.ts";
 import "./fixedsearch.ts";
 import "./autoplay.ts";
+import "./hoverfix.ts";
 import "./timeago.ts";
 
 console.log("Surface Control: Complete");
-- 
cgit v1.2.3