From 829362b02f139575c89a8e025482b9ff9e1e3c4e Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Mon, 9 Aug 2021 15:17:37 +0200
Subject: [PATCH 1/7] Preload previous, current and next image and calculate
 aspect-ratio dynamially based on current image

---
 views/components/ScrollContainer.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/views/components/ScrollContainer.svelte b/views/components/ScrollContainer.svelte
index c3daff7..8fbcc2f 100644
--- a/views/components/ScrollContainer.svelte
+++ b/views/components/ScrollContainer.svelte
@@ -27,8 +27,8 @@
   $: maxHeight = 2 * containerWidth;
   $: variant = containerWidth < 500 ? "small" : "large";
 
-  let index,
-    offset,
+  let index = 0;
+  let offset,
     progress,
     windowHeight,
     top,
@@ -38,7 +38,7 @@
     paddingBottom;
 
   $: {
-    aspectRatio = images[0].width / images[0].height;
+    aspectRatio = images[index].width / images[index].height;
     imageHeight = containerWidth / aspectRatio;
     if (variant === "small") {
       // set 90px distance to top on mobile
@@ -92,7 +92,7 @@
               => smooth transition n to n+1
       -->
       {#each imageUrlsReverse as { id, image }}
-        {#if [index, index + 1].includes(id)}
+        {#if [index - 1, index, index + 1].includes(id)}
           <picture>
             <source
               type="image/webp"
@@ -105,6 +105,7 @@
               class="q-scroll-graphic-image"
               class:image--horizontal-fit={imageHeight <= windowHeight - top}
               class:image--vertical-fit={imageHeight > windowHeight - top}
+              class:image--hidden={[index - 1, index + 1].includes(id)}
               src={image.png1x}
               alt=""
               transition:fade={{ duration: 50 }}
@@ -143,4 +144,8 @@
     left: 50%;
     transform: translate(-50%, 0);
   }
+
+  .image--hidden {
+    visibility: hidden;
+  }
 </style>

From 7187478d5bd9eab64045fe23d2a2d06951dfb040 Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Tue, 10 Aug 2021 14:02:38 +0200
Subject: [PATCH 2/7] Better handle case when no variant was found

---
 views/components/ScrollContainer.svelte | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/views/components/ScrollContainer.svelte b/views/components/ScrollContainer.svelte
index 8fbcc2f..74b85b4 100644
--- a/views/components/ScrollContainer.svelte
+++ b/views/components/ScrollContainer.svelte
@@ -21,7 +21,11 @@
       .sort((a, b) => b.minWidth - a.minWidth)
       .find((variant) => containerWidth >= variant.minWidth);
 
-    return variant.asset;
+    if (variant && variant.asset) {
+      return variant.asset;
+    } else {
+      return {};
+    }
   });
 
   $: maxHeight = 2 * containerWidth;
@@ -63,9 +67,11 @@
     }
   }
 
-  $: imageUrls = images.map((image) =>
-    getImageUrls(image, containerWidth, imageServiceUrl)
-  );
+  $: imageUrls = images.map((image) => {
+    if (image && image.key) {
+      return getImageUrls(image, containerWidth, imageServiceUrl);
+    }
+  });
 
   $: imageUrlsReverse = imageUrls.map((image, id) => ({ id, image })).reverse();
 </script>
@@ -92,7 +98,7 @@
               => smooth transition n to n+1
       -->
       {#each imageUrlsReverse as { id, image }}
-        {#if [index - 1, index, index + 1].includes(id)}
+        {#if image && [index - 1, index, index + 1].includes(id)}
           <picture>
             <source
               type="image/webp"

From 9b82e92320e366b5f05e3dbe627c49ff1ffa5896 Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Tue, 10 Aug 2021 14:51:39 +0200
Subject: [PATCH 3/7] Move footer out of background

---
 views/ScrollGraphic.svelte              | 2 ++
 views/components/ScrollContainer.svelte | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/ScrollGraphic.svelte b/views/ScrollGraphic.svelte
index 0eb1695..69edb67 100644
--- a/views/ScrollGraphic.svelte
+++ b/views/ScrollGraphic.svelte
@@ -1,5 +1,6 @@
 <script>
   import ScrollContainer from "./components/ScrollContainer.svelte";
+  import Footer from "./components/Footer.svelte";
 
   export let item;
   export let imageServiceUrl;
@@ -11,4 +12,5 @@
   {#if containerWidth}
     <ScrollContainer {containerWidth} {imageServiceUrl} {item} />
   {/if}
+  <Footer {item} />
 </div>
diff --git a/views/components/ScrollContainer.svelte b/views/components/ScrollContainer.svelte
index 74b85b4..44dce39 100644
--- a/views/components/ScrollContainer.svelte
+++ b/views/components/ScrollContainer.svelte
@@ -1,7 +1,6 @@
 <script>
   import TextBox from "./TextBox.svelte";
   import Scroller from "./Scroller.svelte";
-  import Footer from "./Footer.svelte";
   import { fade } from "svelte/transition";
   import { getImageUrls } from "./helpers.js";
 
@@ -120,7 +119,6 @@
         {/if}
       {/each}
     </div>
-    <Footer {item} />
   </div>
 
   <div slot="foreground" class="s-font-text">

From 6973a3c2e27d68ca144d6c33ae485d2873c36327 Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Wed, 11 Aug 2021 09:21:54 +0200
Subject: [PATCH 4/7] Make first step shorter

---
 views/components/ScrollContainer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/components/ScrollContainer.svelte b/views/components/ScrollContainer.svelte
index 44dce39..46a04a7 100644
--- a/views/components/ScrollContainer.svelte
+++ b/views/components/ScrollContainer.svelte
@@ -122,7 +122,7 @@
   </div>
 
   <div slot="foreground" class="s-font-text">
-    <div style="height: 100vh; max-height: {maxHeight}px;" />
+    <div style="height: 80vh; max-height: {maxHeight}px;" />
     {#each item.steps as step}
       <TextBox {item} {maxHeight} {variant} {step} />
     {/each}

From 6d47ae0fe04b52f9b3f052db8ed9a8bab1fd44bc Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Wed, 11 Aug 2021 09:23:10 +0200
Subject: [PATCH 5/7] Release v1.0.1

---
 package-lock.json | 20 ++++++++++----------
 package.json      |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 25f6372..17406d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "Q-scroll-graphic",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2066,9 +2066,9 @@
       }
     },
     "joi": {
-      "version": "17.4.1",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.4.1.tgz",
-      "integrity": "sha512-gDPOwQ5sr+BUxXuPDGrC1pSNcVR/yGGcTI0aCnjYxZEa3za60K/iCQ+OFIkEHWZGVCUcUlXlFKvMmrlmxrG6UQ==",
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.4.2.tgz",
+      "integrity": "sha512-Lm56PP+n0+Z2A2rfRvsfWVDXGEWjXxatPopkQ8qQ5mxCEhwHG+Ettgg5o98FFaxilOxozoa14cFhrE/hOzh/Nw==",
       "requires": {
         "@hapi/hoek": "^9.0.0",
         "@hapi/topo": "^5.0.0",
@@ -2821,9 +2821,9 @@
       }
     },
     "rollup": {
-      "version": "2.55.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.55.0.tgz",
-      "integrity": "sha512-Atc3QqelKzrKwRkqnSdq0d2Mi8e0iGuL+kZebKMZ4ysyWHD5hw9VfVCAuODIW5837RENV8LXcbAEHurYf+ArvA==",
+      "version": "2.56.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.2.tgz",
+      "integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -3195,9 +3195,9 @@
       }
     },
     "svelte": {
-      "version": "3.41.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.41.0.tgz",
-      "integrity": "sha512-X9/lnTcRBCrMdyFBVjfmqy1T2vyN8ejUE1OfbWSccc2Z42Amn3ab3XdBgVl+oDkZvzPfPMoxo6CEbWca7pXOew=="
+      "version": "3.42.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.42.1.tgz",
+      "integrity": "sha512-XtExLd2JAU3T7M2g/DkO3UNj/3n1WdTXrfL63OZ5nZq7nAqd9wQw+lR4Pv/wkVbrWbAIPfLDX47UjFdmnY+YtQ=="
     },
     "table": {
       "version": "5.4.6",
diff --git a/package.json b/package.json
index 1ad83b7..2c6b831 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Q-scroll-graphic",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -22,8 +22,8 @@
     "@hapi/hapi": "^20.1.3",
     "@hapi/inert": "^6.0.3",
     "ajv": "^6.12.6",
-    "joi": "^17.4.0",
-    "svelte": "^3.38.2"
+    "joi": "^17.4.2",
+    "svelte": "^3.42.1"
   },
   "devDependencies": {
     "@hapi/code": "^8.0.3",
@@ -34,7 +34,7 @@
     "glob": "^7.1.7",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
-    "rollup": "^2.50.2",
+    "rollup": "^2.56.2",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.1.0",

From eeb7c0d53593a00410e7e6e52c2bb0b9a8366c08 Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Wed, 18 Aug 2021 12:04:12 +0200
Subject: [PATCH 6/7] Improve hidding image

---
 views/components/ScrollContainer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/components/ScrollContainer.svelte b/views/components/ScrollContainer.svelte
index 46a04a7..af47ea8 100644
--- a/views/components/ScrollContainer.svelte
+++ b/views/components/ScrollContainer.svelte
@@ -150,6 +150,6 @@
   }
 
   .image--hidden {
-    visibility: hidden;
+    display: none;
   }
 </style>

From d9032239ad80c752f75f83fd034fca559b56884f Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Wed, 18 Aug 2021 12:25:34 +0200
Subject: [PATCH 7/7] Improve css

---
 views/components/ScrollContainer.svelte | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/views/components/ScrollContainer.svelte b/views/components/ScrollContainer.svelte
index af47ea8..a95f3b5 100644
--- a/views/components/ScrollContainer.svelte
+++ b/views/components/ScrollContainer.svelte
@@ -108,9 +108,14 @@
             />
             <img
               class="q-scroll-graphic-image"
-              class:image--horizontal-fit={imageHeight <= windowHeight - top}
-              class:image--vertical-fit={imageHeight > windowHeight - top}
-              class:image--hidden={[index - 1, index + 1].includes(id)}
+              class:q-scroll-graphic-image--horizontal-fit={imageHeight <=
+                windowHeight - top}
+              class:q-scroll-graphic-image--vertical-fit={imageHeight >
+                windowHeight - top}
+              class:q-scroll-graphic-image--hidden={[
+                index - 1,
+                index + 1,
+              ].includes(id)}
               src={image.png1x}
               alt=""
               transition:fade={{ duration: 50 }}
@@ -139,17 +144,17 @@
     background: currentColor;
   }
 
-  .image--horizontal-fit {
+  .q-scroll-graphic-image--horizontal-fit {
     width: 100%;
   }
 
-  .image--vertical-fit {
+  .q-scroll-graphic-image--vertical-fit {
     height: 100%;
     left: 50%;
     transform: translate(-50%, 0);
   }
 
-  .image--hidden {
+  .q-scroll-graphic-image--hidden {
     display: none;
   }
 </style>