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

Fix minor bug to hide magnifier if its position isn't ready yet

Browse source
This commit is contained in:
Emi Matchu 2024-12-07 11:53:18 -08:00
parent addf2d6cc5
commit 763f6d66be
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,8 +16,8 @@ class MagicMagnifier extends HTMLElement {
const rect = this.getBoundingClientRect(); const rect = this.getBoundingClientRect();
const x = e.pageX - rect.left; const x = e.pageX - rect.left;
const y = e.pageY - rect.top; const y = e.pageY - rect.top;
lens.style.setProperty("--magic-magnifier-x", x + "px"); this.style.setProperty("--magic-magnifier-x", x + "px");
lens.style.setProperty("--magic-magnifier-y", y + "px"); this.style.setProperty("--magic-magnifier-y", y + "px");
} }
} }

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

@ -1,10 +1,17 @@
magic-magnifier magic-magnifier
position: relative position: relative
&:not(:hover) // Only show the lens when we are hovering, and the magnifier's X and Y
// coordinates are set. (This ensures the component is running, and has
// received a mousemove event, instead of defaulting to (0, 0).)
magic-magnifier-lens magic-magnifier-lens
display: none display: none
&:hover
@container style(--magic-magnifier-x) and style(--magic-magnifier-y)
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)
height: var(--magic-magnifier-lens-height, 100px) height: var(--magic-magnifier-lens-height, 100px)