From 763f6d66be779c702cc20eba4980373b10860089 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sat, 7 Dec 2024 11:53:18 -0800 Subject: [PATCH] Fix minor bug to hide magnifier if its position isn't ready yet --- app/assets/javascripts/magic-magnifier.js | 4 ++-- .../stylesheets/application/magic-magnifier.sass | 13 ++++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/magic-magnifier.js b/app/assets/javascripts/magic-magnifier.js index 2d3ed82f..f671bf45 100644 --- a/app/assets/javascripts/magic-magnifier.js +++ b/app/assets/javascripts/magic-magnifier.js @@ -16,8 +16,8 @@ class MagicMagnifier extends HTMLElement { const rect = this.getBoundingClientRect(); const x = e.pageX - rect.left; const y = e.pageY - rect.top; - lens.style.setProperty("--magic-magnifier-x", x + "px"); - lens.style.setProperty("--magic-magnifier-y", y + "px"); + this.style.setProperty("--magic-magnifier-x", x + "px"); + this.style.setProperty("--magic-magnifier-y", y + "px"); } } diff --git a/app/assets/stylesheets/application/magic-magnifier.sass b/app/assets/stylesheets/application/magic-magnifier.sass index 79752e76..cd05acca 100644 --- a/app/assets/stylesheets/application/magic-magnifier.sass +++ b/app/assets/stylesheets/application/magic-magnifier.sass @@ -1,9 +1,16 @@ magic-magnifier position: relative - &:not(:hover) - magic-magnifier-lens - display: none + // 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 + display: none + + &:hover + @container style(--magic-magnifier-x) and style(--magic-magnifier-y) + magic-magnifier-lens + display: block magic-magnifier-lens width: var(--magic-magnifier-lens-width, 100px)