click instead of mouseup to close images

jldec · Jan 25, 2025 · b44b999 · b44b999
1 parent 23df80e
commit b44b999
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 19 deletions.
diff --git a/public/js/image-enlarge.js b/public/js/image-enlarge.js
@@ -1,6 +1,13 @@
 let overlay
 
-document.addEventListener('mousedown', function (event) {
+document.addEventListener('click', function (event) {
+  // First check if we need to close an existing overlay
+  if (overlay) {
+    closeOverlay()
+    return // Stop here to prevent opening new overlay while closing
+  }
+
+  // Only proceed to create new overlay if clicking an original image
   if (event.target.tagName === 'IMG' && event.target.id !== 'splashimage') {
     event.preventDefault()
 
@@ -20,6 +27,22 @@ document.addEventListener('mousedown', function (event) {
       'opacity-0'
     )
 
+    // Create close button
+    const closeButton = document.createElement('button')
+    closeButton.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8" role="img" aria-label="Close Icon"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>`
+    closeButton.setAttribute('aria-label', 'Close image viewer')
+    closeButton.setAttribute('type', 'button')
+    closeButton.setAttribute('title', 'Close image viewer (ESC)')
+    closeButton.classList.add(
+      'absolute',
+      'top-4',
+      'right-4',
+      'p-2',
+      'hover:bg-white/10',
+      'rounded-full',
+      'transition-colors'
+    )
+    closeButton.addEventListener('click', closeOverlay)
     const enlargedImg = event.target.cloneNode()
     enlargedImg.classList.add(
       'enlarged-image',
@@ -29,30 +52,36 @@ document.addEventListener('mousedown', function (event) {
       'animate-pop-in',
       'rounded-md'
     )
+    enlargedImg.setAttribute('title', 'Click or press ESC to close')
 
     overlay.appendChild(enlargedImg)
+    overlay.appendChild(closeButton)
     document.body.appendChild(overlay)
 
     // Trigger reflow to ensure the transition applies
-    overlay.offsetHeight;
-    overlay.classList.remove('opacity-0');
+    overlay.offsetHeight
+    overlay.classList.remove('opacity-0')
   }
 })
-document.addEventListener('mouseup', function () {
-  if (overlay) {
-    const enlargedImg = overlay.querySelector('.enlarged-image')
-    enlargedImg.classList.remove('animate-pop-in')
-    enlargedImg.classList.add('animate-pop-out')
-
-    overlay.classList.add('opacity-0')
-
-    enlargedImg.addEventListener(
-      'animationend',
-      function () {
-        document.body.removeChild(overlay)
-        overlay = null
-      },
-      { once: true }
-    )
+
+document.addEventListener('keydown', function (event) {
+  if (event.key === 'Escape' && overlay) {
+    closeOverlay()
   }
 })
+
+function closeOverlay() {
+  const enlargedImg = overlay.querySelector('.enlarged-image')
+  enlargedImg.classList.remove('animate-pop-in')
+  enlargedImg.classList.add('animate-pop-out')
+  overlay.classList.add('opacity-0')
+
+  enlargedImg.addEventListener(
+    'animationend',
+    function () {
+      document.body.removeChild(overlay)
+      overlay = null
+    },
+    { once: true }
+  )
+}
diff --git a/src/worker/src/components/icons.tsx b/src/worker/src/components/icons.tsx
@@ -188,6 +188,26 @@ export function Home(props: IconProps) {
   )
 }
 
+// https://lucide.dev/icons/x
+export function Close(props: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentcolor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={props.class}
+      role="img"
+      aria-label={props.name || 'Close Icon'}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  )
+}
+
 /*
 Not from Lucide below
 */