test: 💍 fix img

jaskaransarkaria · Dec 24, 2021 · 5934871 · 5934871
1 parent 3cfac74
commit 5934871
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 56 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-12-12T09:10:47.590Z',
+  started: '2021-12-24T17:33:44.336Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Sun Dec 12 2021 09:10:50 GMT+0000 (Greenwich Mean Time)
+ * File generated Fri Dec 24 2021 17:33:48 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-12-12T09:10:50.186Z';
+export const __timestamp = '2021-12-24T17:33:48.463Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -11,9 +11,9 @@
 
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1639300247588.css" />
+    <link rel="stylesheet" href="/build/bundle-1640367224334.css" />
 
-    <script defer src="/build/bundle-1639300247588.js"></script>
+    <script defer src="/build/bundle-1640367224334.js"></script>
   </head>
   <body></body>
 </html>
diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
@@ -1,12 +1,20 @@
 <script lang="typescript">
-  import { fade } from 'svelte/transition';
+  import { fade, slide } from 'svelte/transition';
   import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.svelte';
 
   import type { Base, BaseFn } from '@/types/base';
 
   export let data: Base[] = [];
   export let categoryFn: BaseFn;
 
+  const gridCols: { [key: string]: number } = {
+    lessThan360AndDefault: 10,
+    upTo600: 4,
+    '600to900': 6,
+    '900to1200': 8,
+    '1960plus': 14,
+  };
+
   const createEmptyArray = (length: number) =>
     new Array(length).fill(undefined);
 
@@ -18,15 +26,32 @@
     sourceElemArr[idx].srcset = imgElemArr[idx].src;
   };
 
-  $: showGrid = data.length >= 3 ? true : false;
+  const getGridCols = (width: number) => {
+    if (width >= 1960) {
+      return gridCols['1960plus'];
+    }
+    if (width >= 900 && width <= 1200) {
+      return gridCols['900to1200'];
+    }
+    if (width >= 600 && width <= 900) {
+      return gridCols['600to900'];
+    }
+    if (width <= 600) {
+      return gridCols['upTo600'];
+    }
+    return gridCols['lessThan360AndDefault'];
+  };
+
+  $: showGrid =
+    getGridCols(window.innerWidth) - data.length * 2 <= 2 ? true : false;
 </script>
 
 <ul class={showGrid ? 'root-categories-container' : 'flexbox-container'}>
   {#each data as category, idx (category.Id)}
     <li class={showGrid ? 'hex' : 'hex-flex'}>
       <div class="hex-in">
         <div class="hex-link">
-          <picture in:fade={{ duration: 250 }}>
+          <picture in:fade={{ duration: 1000 }}>
             <source
               srcset={`https://enki.imgix.net/${category.Id}`}
               type="image/jpg"
@@ -42,7 +67,7 @@
             />
           </picture>
           <img
-            in:fade={{ delay: 250, duration: 350 }}
+            in:fade|local={{ delay: 200, duration: 1200 }}
             src={`https://enki.imgix.net/hex_${Math.floor(
               Math.random() * (6 - 1 + 1) + 1
             )}.svg`}

diff --git a/src/components/Image/Image.svelte b/src/components/Image/Image.svelte
@@ -0,0 +1,75 @@
+<script lang="typescript">
+  export let src: string;
+  export let alt: string;
+
+  import { onMount } from 'svelte';
+
+  let loaded = false;
+  let thisImage: HTMLElement;
+
+  onMount(() => {
+    thisImage.onload = () => {
+      loaded = true;
+    };
+  });
+</script>
+
+<div class="img-container">
+  <img {src} {alt} class:loaded bind:this={thisImage} loading="lazy" />
+</div>
+
+<style>
+  .img-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 140px;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    opacity: 0;
+    transition: opacity 1300ms ease-out;
+  }
+  img.loaded {
+    opacity: 1;
+  }
+
+  @media (min-width: 360px) {
+    .img-container {
+      height: 190px;
+    }
+  }
+
+  @media (min-width: 700px) {
+    .img-container {
+      height: 350px;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .img-container {
+      height: 250px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .img-container {
+      height: 180px;
+    }
+  }
+
+  @media (min-width: 1600px) {
+    .img-container {
+      height: 180px;
+    }
+  }
+
+  @media (min-width: 2000px) {
+    .img-container {
+      height: 225px;
+    }
+  }
+</style>
diff --git a/src/components/Image/ImageLoader.svelte b/src/components/Image/ImageLoader.svelte
@@ -0,0 +1,13 @@
+<script lang="typescript">
+  import IntersectionObserver from './IntersectionObserver.svelte';
+  import Image from './Image.svelte';
+
+  export let src: string;
+  export let alt: string;
+</script>
+
+<IntersectionObserver once={true} let:intersecting>
+  {#if intersecting}
+    <Image {alt} {src} />
+  {/if}
+</IntersectionObserver>
diff --git a/src/components/Image/IntersectionObserver.svelte b/src/components/Image/IntersectionObserver.svelte
@@ -0,0 +1,62 @@
+<script lang="typescript">
+  import { onMount } from 'svelte';
+
+  export let once = false;
+  export let top = 0;
+  export let bottom = 0;
+  export let left = 0;
+  export let right = 0;
+
+  let intersecting = false;
+  let container: HTMLElement;
+
+  onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          intersecting = entries[0].isIntersecting;
+          if (intersecting && once) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+        }
+      );
+
+      observer.observe(container);
+      return () => observer.unobserve(container);
+    }
+
+    // The following is a fallback for older browsers
+    function handler() {
+      const bcr = container.getBoundingClientRect();
+
+      intersecting =
+        bcr.bottom + bottom > 0 &&
+        bcr.right + right > 0 &&
+        bcr.top - top < window.innerHeight &&
+        bcr.left - left < window.innerWidth;
+
+      if (intersecting && once) {
+        window.removeEventListener('scroll', handler);
+      }
+    }
+
+    window.addEventListener('scroll', handler);
+    return () => window.removeEventListener('scroll', handler);
+  });
+</script>
+
+<div bind:this={container}>
+  <slot {intersecting} />
+</div>
+
+<style>
+  div {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/components/ProductView/ProductView.svelte b/src/components/ProductView/ProductView.svelte
@@ -26,7 +26,7 @@
     {#each groupedVariantProducts as variants (variants)}
       <div
         in:fade={{ delay: 500 }}
-        class={showDetailedView
+        class={showDetailedView || productArr.length <= 3
           ? 'detailed-products-container'
           : 'products-container'}
       >
@@ -38,7 +38,7 @@
   {:else}
     <div
       in:fade={{ delay: 500 }}
-      class={showDetailedView
+      class={showDetailedView || productArr.length <= 3
         ? 'detailed-products-container'
         : 'products-container'}
     >

diff --git a/src/components/SingleProduct/SingleProduct.svelte b/src/components/SingleProduct/SingleProduct.svelte
@@ -2,6 +2,7 @@
   import { goto } from '@roxi/routify';
   import AddToBasket from '@/components/AddToBasket/AddToBasket.svelte';
   import ProductImage from '@/components/ProductImage/ProductImage.svelte';
+  import ImageLoader from '@/components/Image/ImageLoader.svelte';
 
   import type { Product } from '@/types/product';
 
@@ -33,12 +34,10 @@
       </div>
     {:else}
       <h3 class="basic-header">{`${product.Name}`}</h3>
-      <figure class="img-container">
-        <img
-          src={`https://enki.imgix.net/${product.Id}-0`}
-          alt={`${product.Name}`}
-        />
-      </figure>
+      <ImageLoader
+        src={`https://enki.imgix.net/${product.Id}-0`}
+        alt={`${product.Name}`}
+      />
       <h3 class="basic-header">
         {`£${product.SalePrice} -- ${
           product.CurrentStock >= 0
@@ -88,17 +87,6 @@
     box-shadow: 0 3px 65px rgb(0 0 0 / 0.2);
   }
 
-  .img-container {
-    display: flex;
-    height: 100px;
-  }
-
-  .img-container img {
-    max-width: 100%;
-    max-height: 100%;
-    height: auto;
-  }
-
   .detailed-products-footer {
     display: flex;
     height: 70px;
@@ -136,10 +124,6 @@
       width: 300px;
     }
 
-    .img-container {
-      height: 125px;
-    }
-
     h3 {
       font-size: 0.8;
     }
@@ -156,10 +140,6 @@
       width: 650px;
     }
 
-    .img-container {
-      height: 250px;
-    }
-
     h2 {
       font-size: 2em;
       justify-self: start;
@@ -202,10 +182,6 @@
       height: 250px;
     }
 
-    .img-container {
-      height: 200px;
-    }
-
     h4 {
       font-size: 1.25em;
     }
@@ -221,30 +197,19 @@
       width: 900px;
       height: 900px;
     }
-
-    .img-container {
-      height: 150px;
-    }
   }
+
   @media (min-width: 1600px) {
     .simple-container {
       height: 385px;
       width: 385px;
     }
-
-    .img-container {
-      height: 150px;
-    }
   }
 
   @media (min-width: 2000px) {
     .simple-container {
       height: 450px;
       width: 450px;
     }
-
-    .img-container {
-      height: 200px;
-    }
   }
 </style>
diff --git a/src/components/SingleProduct/SingleProduct.test.ts b/src/components/SingleProduct/SingleProduct.test.ts
@@ -22,10 +22,6 @@ describe('Given SingleProduct', () => {
       expect(
         screen.getByRole('heading', { name: /red jacket/i })
       ).toHaveTextContent('Red jacket');
-      expect(screen.getByRole('img', { name: /red jacket/i })).toHaveAttribute(
-        'src',
-        'https://enki.imgix.net/123-0'
-      );
       expect(
         screen.getByRole('button', { name: 'Add to Basket' })
       ).toBeInTheDocument();