Support users with disabled JS

EthanThatOneKid · Feb 1, 2023 · 3a79111 · 3a79111
1 parent 0ebb971
commit 3a79111
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 20 deletions.
diff --git a/src/routes/(site)/genuary/collage.svelte b/src/routes/(site)/genuary/collage.svelte
@@ -1,10 +1,23 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
   import Dialog from './dialog.svelte';
   import Media from './media.svelte';
 
   import type { CollagePiece } from './collage';
 
   export let data: CollagePiece[] = [];
+
+  const anchors: HTMLAnchorElement[] = [];
+
+  onMount(() => {
+    anchors.forEach((anchor) => {
+      anchor.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    });
+  });
 </script>
 
 <div class="grid-outer-wrapper">
@@ -14,7 +27,13 @@
       {@const video = src.endsWith('.mp4') || src.endsWith('.mov')}
       {@const ext = src.split('.').pop()}
       <div class="artwork-container">
-        <div class="artwork">
+        <a
+          class="artwork"
+          bind:this={anchors[i]}
+          href={src}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <Dialog>
             <Media {src} {video} {alt} {view} slot="opener" rounded={true} />
 
@@ -28,7 +47,7 @@
               <span role="button" class="closer">Close</span>
             </div>
           </Dialog>
-        </div>
+        </a>
       </div>
     {/each}
   </div>

diff --git a/src/routes/(site)/genuary/media.svelte b/src/routes/(site)/genuary/media.svelte
@@ -6,23 +6,25 @@
   export let rounded = false;
 </script>
 
-<svelte:element
-  this={video ? 'video' : 'img'}
-  class="media"
-  {src}
-  {alt}
-  class:wide={view === 'wide'}
-  class:tall={view === 'tall'}
-  class:big={view === 'big'}
-  autoplay={video}
-  loop={video}
-  muted={true}
-  playsinline={video}
-  style:--border-radius={rounded ? '5px' : undefined}
-/>
+<a href={src} class="media-container" target="_blank" rel="noopener noreferrer">
+  <svelte:element
+    this={video ? 'video' : 'img'}
+    {src}
+    {alt}
+    class="media"
+    class:wide={view === 'wide'}
+    class:tall={view === 'tall'}
+    class:big={view === 'big'}
+    loading="lazy"
+    autoplay={video}
+    loop={video}
+    muted={true}
+    style:--border-radius={rounded ? '5px' : undefined}
+  />
+</a>
 
 <style lang="scss">
-  .media {
+  .media-container {
     max-width: 100%;
     vertical-align: middle;
     display: inline-block;
@@ -32,17 +34,24 @@
     border-radius: var(--border-radius, 0);
   }
 
-  .media.wide {
+  .media {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--border-radius, 0);
+  }
+
+  .media-container.wide {
     width: 100%;
     height: auto;
   }
 
-  .media.tall {
+  .media-container.tall {
     width: auto;
     height: 100%;
   }
 
-  .media.big {
+  .media-container.big {
     width: 100%;
     height: 100%;
   }