static/js/index: Add hover fix

Show visibility and transition-delay based :hovers only when mouse has stopped

2 files changed, 63 insertions, 0 deletions

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");