OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Oops, fix showing the magic magnifier in Firefox

Browse source 
Oh, guess Firefox doesn't support this CSS container query feature yet!
Use a more compatible technique instead.
This commit is contained in:
Emi Matchu 2024-12-28 16:08:28 -08:00
parent 34bf27069b
commit 019484b6dd
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/magic-magnifier.js
View file

@ -1,4 +1,6 @@
class MagicMagnifier extends HTMLElement { class MagicMagnifier extends HTMLElement {
#internals = this.attachInternals();
connectedCallback() { connectedCallback() {
setTimeout(() => this.#attachLens(), 0); setTimeout(() => this.#attachLens(), 0);
this.addEventListener("mousemove", this.#onMouseMove); this.addEventListener("mousemove", this.#onMouseMove);
@ -18,6 +20,7 @@ class MagicMagnifier extends HTMLElement {
const y = e.clientY - rect.top; const y = e.clientY - rect.top;
this.style.setProperty("--magic-magnifier-x", x + "px"); this.style.setProperty("--magic-magnifier-x", x + "px");
this.style.setProperty("--magic-magnifier-y", y + "px"); this.style.setProperty("--magic-magnifier-y", y + "px");
this.#internals.states.add("ready");
} }
} }

9
app/assets/stylesheets/application/magic-magnifier.sass
View file

@ -7,10 +7,11 @@ magic-magnifier
magic-magnifier-lens magic-magnifier-lens
display: none display: none
&:hover // TODO: Once container query support is broader, we can remove the CSS state
@container style(--magic-magnifier-x) and style(--magic-magnifier-y) // and read for the presence of the X and Y custom properties instead.
magic-magnifier-lens &:hover:state(ready)
display: block magic-magnifier-lens
display: block
magic-magnifier-lens magic-magnifier-lens
width: var(--magic-magnifier-lens-width, 100px) width: var(--magic-magnifier-lens-width, 100px)