From db786d00e450396e680686e95db97ec353fe32f8 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 26 Nov 2023 19:07:26 -0400 Subject: client, css: define tooltip transitions 100% in JS --- src/static/client3.js | 40 +++++++++++++++++++++++++++++++++------- src/static/site6.css | 8 -------- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/static/client3.js b/src/static/client3.js index 285a5ef6..59e889a8 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -63,8 +63,25 @@ function pick(array) { return array[Math.floor(Math.random() * array.length)]; } -function cssProp(el, key) { - return getComputedStyle(el).getPropertyValue(key).trim(); +function cssProp(el, ...args) { + if (typeof args[0] === 'string' && args.length === 1) { + return getComputedStyle(el).getPropertyValue(args[0]).trim(); + } + + if (typeof args[0] === 'string' && args.length === 2) { + if (args[1] === null) { + el.style.removeProperty(args[0]); + } else { + el.style.setProperty(args[0], args[1]); + } + return; + } + + if (typeof args[0] === 'object') { + for (const [property, value] of Object.entries(args[0])) { + cssProp(el, property, value); + } + } } // TODO: These should pro8a8ly access some shared urlSpec path. We'd need to @@ -772,9 +789,13 @@ function beginTransitioningTooltipHidden(tooltip) { cancelTransitioningTooltipHidden(); } - tooltip.classList.add('transition-tooltip-hidden'); - tooltip.style.transitionDuration = - `${settings.transitionHiddenDuration / 1000}s`; + cssProp(tooltip, { + 'display': 'block', + 'opacity': '0', + 'transition-property': 'opacity', + 'transition-timing-function': 'linear', + 'transition-duration': `${settings.transitionHiddenDuration / 1000}s`, + }); state.currentlyTransitioningHiddenTooltip = tooltip; state.transitionHiddenTimeout = @@ -800,8 +821,13 @@ function endTransitioningTooltipHidden() { if (!tooltip) return; - tooltip.classList.remove('transition-tooltip-hidden'); - tooltip.style.removeProperty('transition-duration'); + cssProp(tooltip, { + 'display': null, + 'opacity': null, + 'transition-property': null, + 'transition-timing-function': null, + 'transition-duration': null, + }); state.currentlyTransitioningHiddenTooltip = null; } diff --git a/src/static/site6.css b/src/static/site6.css index b06417db..830e32f2 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -504,14 +504,6 @@ a:not([href]):hover { display: none; } -.icons-tooltip:not(.visible).transition-tooltip-hidden { - display: block !important; - opacity: 0; - - transition-property: opacity; - transition-timing-function: linear; -} - .icons-tooltip-content { display: block; padding: 6px 2px 2px 2px; -- cgit 1.3.0-6-gf8a5