From ec4d3fe9f931c27fd13a2910a1a875ebb03fb25f Mon Sep 17 00:00:00 2001
From: Ryan Coulson <ryan.coulson@ec.gc.ca>
Date: Tue, 2 Apr 2024 16:48:46 -0400
Subject: [PATCH] add support for transitional background images

---
 ...000000-0000-0000-0000-000000000000_en.json |  8 ++
 src/components/panels/dynamic-panel.vue       | 14 ++-
 src/components/panels/image-panel.vue         | 13 ++-
 src/components/panels/map-panel.vue           | 16 +++-
 src/components/panels/panel.vue               |  4 +
 src/components/panels/slideshow-panel.vue     | 18 +++-
 src/components/panels/text-panel.vue          | 11 ++-
 src/components/story/background-image.vue     | 85 +++++++++++++++++++
 src/components/story/slide.vue                | 23 ++++-
 src/components/story/story-content.vue        | 76 +++++++++++++----
 src/definitions.ts                            |  1 +
 11 files changed, 245 insertions(+), 24 deletions(-)
 create mode 100644 src/components/story/background-image.vue

diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index cef9f3fb..81ae8523 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -11,6 +11,7 @@
     "slides": [
         {
             "title": "Overview",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
             "panel": [
                 {
                     "title": "Overview",
@@ -26,6 +27,7 @@
         },
         {
             "title": "Default RAMP4 Sample",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
             "panel": [
                 {
                     "config": "00000000-0000-0000-0000-000000000000/ramp-config/test-ramp4.json",
@@ -41,6 +43,7 @@
         },
         {
             "title": "Dynamic Panel Test",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
             "panel": [
                 {
                     "title": "This Slide Is Dynamic!",
@@ -127,6 +130,8 @@
         },
         {
             "title": "Video Panel",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
+
             "panel": [
                 {
                     "title": "Video Test for YoutTube content",
@@ -174,6 +179,8 @@
         },
         {
             "title": "In-situ extraction",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
+
             "panel": [
                 {
                     "title": "In-situ extraction",
@@ -203,6 +210,7 @@
         },
         {
             "title": "NPRI substances reported for oil sands mining facilities",
+            "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
             "panel": [
                 {
                     "title": "NPRI substances reported for oil sands mining facilities",
diff --git a/src/components/panels/dynamic-panel.vue b/src/components/panels/dynamic-panel.vue
index 0020b5f6..b2315906 100644
--- a/src/components/panels/dynamic-panel.vue
+++ b/src/components/panels/dynamic-panel.vue
@@ -1,6 +1,9 @@
 <template>
     <div ref="el" :id="key" class="story-slide w-full h-full flex sm:flex-row flex-col">
-        <VueScrollama class="flex-1 order-2 sm:order-1 prose max-w-none my-5">
+        <VueScrollama
+            class="flex-1 order-2 sm:order-1 prose max-w-none my-5 mx-1 py-5"
+            :class="{ 'has-background': background }"
+        >
             <component
                 :is="config.titleTag || 'h2'"
                 class="px-10 mb-0 chapter-title top-20"
@@ -36,6 +39,7 @@
                 :slideIdx="slideIdx"
                 :dynamicIdx="activeIdx"
                 :ratio="false"
+                :background="background"
                 ref="content"
             >
             </panel>
@@ -60,6 +64,9 @@ const props = defineProps({
     },
     slideIdx: {
         type: Number
+    },
+    background: {
+        type: Boolean
     }
 });
 
@@ -174,6 +181,11 @@ const clickBack = (): void => {
 .return-button img {
     margin: 0px;
 }
+.has-background {
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 20px;
+    color: black;
+}
 
 @media screen and (max-width: 640px) {
     .return-button-container {
diff --git a/src/components/panels/image-panel.vue b/src/components/panels/image-panel.vue
index 047e55d9..e16c008a 100644
--- a/src/components/panels/image-panel.vue
+++ b/src/components/panels/image-panel.vue
@@ -7,7 +7,7 @@
                 :class="config.class"
                 :alt="config.altText || ''"
                 :style="{ width: `${config.width}px`, height: `${config.height}px` }"
-                class="graphic-image px-10 mx-auto my-6 flex object-contain sm:max-w-screen sm:max-h-screen"
+                class="graphic-image px-10 mx-auto flex object-contain sm:max-w-screen sm:max-h-screen"
             />
         </fullscreen>
 
@@ -15,6 +15,7 @@
             v-if="config.caption"
             class="text-center text-sm max-w-full graphic-caption"
             v-html="md.render(config.caption)"
+            :class="{ 'has-background': background }"
         ></div>
     </div>
 </template>
@@ -38,6 +39,9 @@ const props = defineProps({
     slideIdx: {
         type: Number,
         default: 0
+    },
+    background: {
+        type: Boolean
     }
 });
 
@@ -76,7 +80,12 @@ onMounted((): void => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.has-background {
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 0px 0px 20px 20px;
+    color: black;
+}
 @media screen and (max-width: 640px) {
     .graphic {
         max-width: 100vw;
diff --git a/src/components/panels/map-panel.vue b/src/components/panels/map-panel.vue
index 2fdb7dae..c3470fd2 100644
--- a/src/components/panels/map-panel.vue
+++ b/src/components/panels/map-panel.vue
@@ -1,6 +1,10 @@
 <template>
     <div ref="el" class="flex flex-col h-full align-middle w-full">
-        <div class="px-10 mb-0 chapter-title top-20 map-title text-center" v-if="config.title">
+        <div
+            class="px-10 mb-0 chapter-title top-20 map-title text-center"
+            :class="{ 'has-background': background }"
+            v-if="config.title"
+        >
             {{ config.title }}
         </div>
         <div :id="`ramp-map-${slideIdx}`" class="w-full bg-gray-200 h-story rv-map"></div>
@@ -29,6 +33,9 @@ const props = defineProps({
     },
     configFileStructure: {
         type: Object as PropType<ConfigFileStructure>
+    },
+    background: {
+        type: Boolean
     }
 });
 
@@ -119,6 +126,13 @@ const init = async () => {
     width: 100%;
 }
 
+.has-background {
+    background-color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 0em !important;
+    padding-bottom: 1em;
+    color: black;
+}
+
 .map-title {
     color: #111827;
     font-weight: 700;
diff --git a/src/components/panels/panel.vue b/src/components/panels/panel.vue
index 780fb702..a8c5d236 100644
--- a/src/components/panels/panel.vue
+++ b/src/components/panels/panel.vue
@@ -17,6 +17,7 @@
             :slideIdx="slideIdx"
             :lang="lang"
             :style="config.customStyles"
+            :background="background"
         ></component>
     </div>
 </template>
@@ -51,6 +52,9 @@ const props = defineProps({
     },
     lang: {
         type: String
+    },
+    background: {
+        type: Boolean
     }
 });
 
diff --git a/src/components/panels/slideshow-panel.vue b/src/components/panels/slideshow-panel.vue
index 421114f5..1fd0a00b 100644
--- a/src/components/panels/slideshow-panel.vue
+++ b/src/components/panels/slideshow-panel.vue
@@ -43,7 +43,12 @@
                     </template>
                 </carousel>
 
-                <div v-if="config.caption" class="text-center mt-5 text-sm" v-html="md.render(config.caption)"></div>
+                <div
+                    v-if="config.caption"
+                    class="text-center mt-5 text-sm"
+                    :class="{ 'has-background': background }"
+                    v-html="md.render(config.caption)"
+                ></div>
             </div>
         </div>
     </div>
@@ -73,6 +78,9 @@ const props = defineProps({
     slideIdx: {
         type: Number,
         required: true
+    },
+    background: {
+        type: Boolean
     }
 });
 
@@ -91,6 +99,14 @@ window.addEventListener('resize', () => {
 </script>
 
 <style lang="scss" scoped>
+.has-background {
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 0px 0px 20px 20px;
+    color: black;
+    margin-top: 0px !important;
+    padding-top: 5px;
+}
+
 .carousel {
     height: auto;
     text-align: left;
diff --git a/src/components/panels/text-panel.vue b/src/components/panels/text-panel.vue
index 8a94854b..a1c666a9 100644
--- a/src/components/panels/text-panel.vue
+++ b/src/components/panels/text-panel.vue
@@ -1,5 +1,5 @@
 <template>
-    <VueScrollama class="prose max-w-none my-5">
+    <VueScrollama class="prose max-w-none my-5 mx-1 py-5" :class="{ 'has-background': background }">
         <component :is="config.titleTag || 'h2'" class="px-10 mb-0 chapter-title top-20">
             {{ config.title }}
         </component>
@@ -20,6 +20,9 @@ const props = defineProps({
     config: {
         type: Object as PropType<TextPanel>,
         required: true
+    },
+    background: {
+        type: Boolean
     }
 });
 
@@ -39,6 +42,12 @@ onMounted((): void => {
 </script>
 
 <style scoped lang="scss">
+.has-background {
+    background-color: rgba(255, 255, 255, 0.6);
+    border-radius: 20px;
+    color: black;
+}
+
 @media screen and (max-width: 640px) {
     .chapter-title {
         max-width: 100vw;
diff --git a/src/components/story/background-image.vue b/src/components/story/background-image.vue
new file mode 100644
index 00000000..8eb39189
--- /dev/null
+++ b/src/components/story/background-image.vue
@@ -0,0 +1,85 @@
+<template>
+    <div class="sticky z-10 grid-background" style="top: 60px; height: 100vh">
+        <!-- Vue3 transition for switching between a slide with no background a slide with a background. -->
+        <Transition name="fade" mode="out-in">
+            <div v-if="newImage !== 'none'" class="w-full h-full">
+                <img v-if="oldImage !== 'none'" class="fade-in w-full h-full" :src="oldImage" />
+                <img class="fade-in w-full h-full" :class="{ hide: activeImage === 1 }" :src="newImage" />
+            </div>
+            <div class="w-full h-full" v-else></div>
+        </Transition>
+    </div>
+</template>
+
+<script setup>
+import { watch, ref } from 'vue';
+
+const emit = defineEmits(['background-changed']);
+const props = defineProps({
+    src: {
+        type: String,
+        required: true
+    }
+});
+
+const oldImage = ref('none');
+const newImage = ref('none');
+const activeImage = ref(0);
+
+watch(
+    () => props.src,
+    () => {
+        // Here's how the fancy crossfade works. We have a primary image element and a secondary image element.
+        // The primary element is what's displaying the current slide background, and the secondary element is only used
+        // DURING a transition period.
+
+        // When a new slide comes into view with a background applied, we display this background on the secondary component
+        // whilst gradually transitioning the opacity of the primary element to 0 (triggers when `activeImage` is 1). This gives
+        // us the effect of the new background smoothly coming in. Once the opacity hits 0, we move the new background image
+        // to the primary element and set the opacity back to 1.
+
+        oldImage.value = props.src;
+        activeImage.value = 1;
+
+        // This is the crossfade case where we're switching between two background images.
+        if (props.src !== 'none' && newImage.value !== 'none') {
+            setTimeout(() => {
+                activeImage.value = 0;
+                oldImage.value = newImage.value;
+                newImage.value = props.src;
+                emit('background-changed', true);
+            }, 350); // timeout length is set to animation time (0.3s) plus a little bit of buffer.
+        } else {
+            // Not a crossfade case. We're either transitioning from nothing into an image or from an image into nothing.
+            // This case uses Vue3 transitions.
+            newImage.value = props.src;
+            activeImage.value = 0;
+
+            emit('background-changed', newImage.value !== 'none');
+        }
+    },
+    { immediate: false }
+);
+</script>
+
+<style scoped>
+.hide {
+    opacity: 0 !important;
+    transition: opacity 0.3s linear;
+}
+
+img {
+    position: absolute;
+    opacity: 1;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/src/components/story/slide.vue b/src/components/story/slide.vue
index c03623e6..93e463b7 100644
--- a/src/components/story/slide.vue
+++ b/src/components/story/slide.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="key" class="story-slide h-full w-full flex sm:flex-row flex-col">
+    <div ref="slide" :id="key" class="story-slide pt-24 h-full w-full flex sm:flex-row flex-col">
         <panel
             v-for="(panel, idx) in config.panel"
             :key="idx"
@@ -10,6 +10,7 @@
             :slideIdx="slideIdx"
             :lang="lang"
             :class="determinePanelOrder(idx)"
+            :background="background"
         ></panel>
     </div>
 </template>
@@ -22,6 +23,7 @@ import Panel from '@storylines/components/panels/panel.vue';
 
 const key = getCurrentInstance()?.vnode.key as string;
 
+const emit = defineEmits(['slide-changed']);
 const props = defineProps({
     config: {
         type: Object as PropType<Slide>,
@@ -35,13 +37,30 @@ const props = defineProps({
     },
     lang: {
         type: String
+    },
+    background: {
+        type: Boolean
     }
 });
 
 const defaultRatio = ref(false);
 
+const slide = ref<Element>();
+const observer = ref<IntersectionObserver | undefined>(undefined);
+
 onMounted(() => {
     const panels = props.config.panel;
+
+    observer.value = new IntersectionObserver(
+        ([slide]) => {
+            // emit a `slide-changed` event when a new slide hits the middle of the screen.
+            if (slide.isIntersecting) {
+                emit('slide-changed', props.slideIdx);
+            }
+        },
+        { rootMargin: '0px', threshold: 0.45 }
+    );
+
     // check if there is one text panel and one non-text panel in the slide and user did not specify a width in config
     if (panels.length == 2 && !panels[0]?.width && !panels[1]?.width) {
         const panelText1 = panels[0]?.type === PanelType.Text;
@@ -52,6 +71,8 @@ onMounted(() => {
             defaultRatio.value = true;
         }
     }
+
+    observer.value?.observe(slide.value as Element);
 });
 
 /**
diff --git a/src/components/story/story-content.vue b/src/components/story/story-content.vue
index e33c763b..f126539c 100644
--- a/src/components/story/story-content.vue
+++ b/src/components/story/story-content.vue
@@ -21,22 +21,27 @@
             v-else
         />
 
-        <VueScrollama class="relative story-scrollama w-full flex-grow min-w-0" @step-enter="stepEnter">
-            <div
-                v-for="(slide, idx) in config.slides"
-                class="flex pt-24"
-                :key="idx"
-                :data-chapter-index="idx"
-                :id="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
-                :name="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
-            >
-                <slide
-                    :config="slide"
-                    :configFileStructure="configFileStructure"
-                    :slideIdx="idx"
-                    :lang="lang"
-                    :style="{ 'margin-top': horizontalNavHeight + 'px' }"
-                ></slide>
+        <VueScrollama class="grid-container story-scrollama w-full flex-grow min-w-0" @step-enter="stepEnter">
+            <BackgroundImage :src="backgroundImage" @background-changed="handleBackgroundChange"></BackgroundImage>
+
+            <div class="grid-content z-20">
+                <div
+                    v-for="(slide, idx) in config.slides"
+                    class="flex"
+                    :key="idx"
+                    :data-chapter-index="idx"
+                    :id="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
+                    :name="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
+                >
+                    <slide
+                        :config="slide"
+                        :configFileStructure="configFileStructure"
+                        :slideIdx="idx"
+                        :lang="lang"
+                        :background="hasBackground"
+                        @slide-changed="handleSlideChange"
+                    ></slide>
+                </div>
             </div>
         </VueScrollama>
     </div>
@@ -52,12 +57,13 @@ import { ConfigFileStructure, StoryRampConfig } from '@storylines/definitions';
 
 import ChapterMenu from './chapter-menu.vue';
 import HorizontalMenu from './horizontal-menu.vue';
+import BackgroundImage from './background-image.vue';
 import Slide from './slide.vue';
 
 const route = useRoute();
 const emit = defineEmits(['step']);
 
-defineProps({
+const props = defineProps({
     config: {
         type: Object as PropType<StoryRampConfig>,
         required: true
@@ -79,6 +85,8 @@ defineProps({
 
 const activeChapterIndex = ref(-1);
 const horizontalNavHeight = ref(0);
+const backgroundImage = ref<string>('none');
+const hasBackground = ref<boolean>(false); // different from above; this considers animation time
 
 onMounted(() => {
     const hash = route?.hash.substring(1);
@@ -90,8 +98,24 @@ onMounted(() => {
             el?.scrollIntoView();
         }, 200);
     }
+
+    // See if the first slide has a background image applied. If so, set it early to it appears as soon
+    // as you scroll down.
+    handleSlideChange(0);
 });
 
+const handleSlideChange = (event: number): void => {
+    const img = props.config.slides[event].backgroundImage;
+    backgroundImage.value = img ?? 'none';
+};
+
+/**
+ * This event is fired when the background image actually switches backgrounds (after the animation).
+ */
+const handleBackgroundChange = (event: boolean): void => {
+    hasBackground.value = event;
+};
+
 const stepEnter = ({ element }: { element: HTMLElement }): void => {
     activeChapterIndex.value = parseInt(element.dataset.chapterIndex || '-1');
     emit('step', activeChapterIndex.value);
@@ -103,6 +127,24 @@ const stepEnter = ({ element }: { element: HTMLElement }): void => {
 </script>
 
 <style lang="scss" scoped>
+.grid-container {
+    display: grid;
+    grid-template-areas: 'backgroundOverlay';
+}
+.grid-content {
+    grid-area: backgroundOverlay;
+}
+.grid-background {
+    grid-area: backgroundOverlay;
+    background: var(--sr-content-background);
+
+    border-style: solid none solid solid;
+    border-width: 1px 0 1px 1px;
+
+    // border-gray-200
+    border-color: var(--sr-border-colour);
+}
+
 .story-scrollama {
     background: var(--sr-content-background);
     // background: linear-gradient(to right, var(--sr-content-background) 33.3%, #fff 33.3%);
diff --git a/src/definitions.ts b/src/definitions.ts
index 0837c959..92a3ac1f 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -117,6 +117,7 @@ export interface Slide {
     // tuple definition to restrict array size
     // panel: [BasePanel, BasePanel | undefined];
     panel: BasePanel[];
+    backgroundImage: string;
 }
 
 export enum PanelType {