feat: 🎸 scroll product thumbnails with arrow keys

jaskaransarkaria · Nov 29, 2021 · a31e8dc · a31e8dc
1 parent 8612b56
commit a31e8dc
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-11-25T19:05:29.616Z',
+  started: '2021-11-29T14:55:39.540Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Thu Nov 25 2021 19:05:33 GMT+0000 (Greenwich Mean Time)
+ * File generated Mon Nov 29 2021 14:55:42 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-11-25T19:05:33.824Z';
+export const __timestamp = '2021-11-29T14:55:42.460Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,18 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
-    />
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
     <title>Enki</title>
-
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1637867129614.css" />
-
-    <script defer src="/build/bundle-1637867129614.js"></script>
+    
+    <link rel='icon' type='image/png' href='/favicon.png'>
+    <link rel='stylesheet' href='/global.css'>
+    <link rel='stylesheet' href='/build/bundle-1638197739539.css'>
+    
+    <script defer src='/build/bundle-1638197739539.js'></script>
   </head>
-  <body></body>
-</html>
+  <body>
+  </body>
+</html>
diff --git a/src/components/SingleProduct/SingleProduct.svelte b/src/components/SingleProduct/SingleProduct.svelte
@@ -7,8 +7,22 @@
   export let showDetailedView = false;
 
   let selectedIdx = 0;
+
+  const handleArrowKeydown = (event: KeyboardEvent) => {
+    if (showDetailedView)
+      if (event.key === 'ArrowLeft' && selectedIdx !== 0) {
+        selectedIdx -= 1;
+      }
+    if (
+      event.key === 'ArrowRight' &&
+      selectedIdx + 1 !== product.ProductImages.length
+    ) {
+      selectedIdx += 1;
+    }
+  };
 </script>
 
+<svelte:window on:keydown={handleArrowKeydown} />
 {#if product}
   <button
     class={showDetailedView ? 'details-container' : 'container'}