diff options
author | tdro <tdro@noreply.example.com> | 2023-11-30 17:11:23 -0500 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2023-11-30 17:11:23 -0500 |
commit | 0cc8a72e45fe2891c9e11de8566fce91c16d62d3 (patch) | |
tree | a041072caa5f1e1750a2b1849f32dc57c615e490 | |
parent | 602e7058ed234db7d18a2225c68323c089fe0622 (diff) | |
download | canory-0cc8a72e45fe2891c9e11de8566fce91c16d62d3.tar.gz canory-0cc8a72e45fe2891c9e11de8566fce91c16d62d3.tar.bz2 canory-0cc8a72e45fe2891c9e11de8566fce91c16d62d3.zip |
static/js/index: Add hover fix
Show visibility and transition-delay based :hovers only when mouse has stopped
-rw-r--r-- | assets/js/index.js | 41 | ||||
-rw-r--r-- | static/js/hoverfix.ts | 62 | ||||
-rw-r--r-- | static/js/index.ts | 1 |
3 files changed, 104 insertions, 0 deletions
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 @@ -600,6 +600,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", numeric: "always", 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"); |