From cde233479c3b52f8618a60ca09c1d4bced518154 Mon Sep 17 00:00:00 2001
From: Ryan Coulson <ryan.coulson@ec.gc.ca>
Date: Wed, 13 Mar 2024 16:23:34 -0400
Subject: [PATCH] add support for dynamic slideshow

---
 StoryRampSchema.json                          |  30 ++--
 ...000000-0000-0000-0000-000000000000_en.json |  37 +++--
 src/components/panels/chart-panel.vue         |  96 +-----------
 src/components/panels/helpers/chart.vue       |   4 +-
 src/components/panels/image-panel.vue         |  20 ++-
 src/components/panels/slideshow-panel.vue     | 139 ++++++++----------
 src/definitions.ts                            |  11 +-
 7 files changed, 136 insertions(+), 201 deletions(-)

diff --git a/StoryRampSchema.json b/StoryRampSchema.json
index f5cf5ab..b0c9fdc 100644
--- a/StoryRampSchema.json
+++ b/StoryRampSchema.json
@@ -202,11 +202,6 @@
                     "type": "object",
                     "description": "Configured Highcharts JSON object (from editor)."
                 },
-                "fullscreen": {
-                    "type": "boolean",
-                    "description": "Specifies whether the panel can be expanded to full screen.",
-                    "default": true
-                },
                 "type": {
                     "type": "string",
                     "enum": ["chart"]
@@ -326,13 +321,28 @@
             "type": "object",
             "description": "A multimedia slideshow component.",
             "properties": {
-                "images": {
+                "items": {
                     "type": "array",
+                    "description": "An array of items to display in the slideshow.",
                     "items": {
-                        "$ref": "#/$defs/multimediaImage"
+                        "type": "object",
+                        "description": "A config representing one of the following panel types.",
+                        "oneOf": [
+                            {
+                                "$ref": "#/$defs/multimediaImage"
+                            },
+                            {
+                                "$ref": "#/$defs/mapPanel"
+                            },
+                            {
+                                "$ref": "#/$defs/textPanel"
+                            },
+                            {
+                                "$ref": "#/$defs/dqvchartPanel"
+                            }
+                        ]
                     },
-                    "description": "An array of images to display in the slideshow.",
-                    "minItems": 1
+                    "minItems": 1,
                 },
                 "loop": {
                     "type": "boolean",
@@ -348,7 +358,7 @@
                     "enum": ["slideshow"]
                 }
             },
-            "required": ["images", "type"]
+            "required": ["items", "type"]
         },
         "dqvchartOptions": {
             "type": "object",
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 68ced64..cef9f3f 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
@@ -65,12 +65,14 @@
                         {
                             "id": "panel-3",
                             "panel": {
-                                "type": "chart",
-                                "charts": [
+                                "type": "slideshow",
+                                "items": [
                                     {
+                                        "type": "chart",
                                         "src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
                                     },
                                     {
+                                        "type": "chart",
                                         "src": "00000000-0000-0000-0000-000000000000/charts/en/1 Mount royal.csv",
                                         "options": {
                                             "title": "Selenium releases and disposals in 2019",
@@ -208,7 +210,7 @@
                     "type": "text"
                 },
                 {
-                    "images": [
+                    "items": [
                         {
                             "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/1_AuroraNorth_RelDisp.PNG",
                             "type": "image"
@@ -236,6 +238,20 @@
                         {
                             "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/7_Syncrude_RelDisp.PNG",
                             "type": "image"
+                        },
+                        {
+                            "config": "00000000-0000-0000-0000-000000000000/ramp-config/ReleasesandDisposalsbyMiningFacilitiesin2019(satellite).json",
+                            "type": "map",
+                            "scrollguard": true
+                        },
+                        {
+                            "title": "Text Section",
+                            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar ultricies dolor, vel vehicula quam convallis sit amet. Cras pellentesque congue tellus ut elementum. Phasellus sagittis, odio quis fermentum maximus, metus eros fermentum lorem, eget interdum metus orci eget risus. Integer ut ante aliquam, pretium diam vitae, gravida sapien. Curabitur ac ipsum sit amet arcu laoreet sollicitudin id imperdiet quam. Duis magna ipsum, laoreet eu malesuada vitae, tristique nec felis. Integer quis neque egestas, imperdiet arcu et, faucibus elit. Duis et fermentum urna. Nulla vulputate sapien eget laoreet interdum. Vivamus tempus nulla ante, sagittis rutrum justo semper in. Cras eu iaculis massa.</p><p>Sed dictum dictum rhoncus. Praesent sit amet accumsan elit. Nulla facilisi. Vestibulum tincidunt tincidunt leo vel placerat. Integer sit amet aliquet felis, quis finibus turpis. Vivamus sit amet sodales nisl. Mauris imperdiet, nisl vulputate dignissim consectetur, mi urna tempus felis, non cursus sapien ante sodales erat. Cras a nisi id purus vehicula aliquet et sit amet dolor. Vestibulum vehicula vel lectus sed tempus. Mauris sodales vulputate augue eu sagittis. Aenean bibendum viverra laoreet. Nunc scelerisque arcu sed libero porttitor, eget tincidunt felis congue. Cras nec nulla eget lacus tincidunt condimentum vel eget orci. Vestibulum fermentum non elit non ultricies. Ut eu ante porttitor, pretium ipsum eget, commodo magna. In eget tristique mauris.</p><p>Donec id quam tempor, mollis urna et, dapibus massa. Mauris venenatis condimentum ex, vel ullamcorper sem porta vitae. Donec ac dapibus nisl, ut placerat quam. Proin consequat accumsan nibh in interdum. Ut quis justo vitae lorem vestibulum molestie blandit a nunc. Aliquam vel rutrum ex. Nunc tempus, sapien vitae pretium blandit, nisl orci lacinia lorem, et bibendum libero lectus sed nulla. Integer ut eros pretium, consequat erat id, fringilla odio. Donec convallis tortor ex, hendrerit viverra velit hendrerit sit amet. Mauris volutpat dignissim metus molestie aliquet. Etiam pulvinar urna ut vehicula venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pharetra elit ac nunc pulvinar egestas.</p><p>Phasellus vitae tincidunt massa. Mauris consectetur, ex sit amet rutrum condimentum, magna nisi tincidunt eros, euismod maximus nisl augue eu magna. Integer volutpat pretium risus, ut volutpat lacus rhoncus id. Morbi accumsan commodo orci, sit amet ultricies sapien pellentesque a. Curabitur sit amet arcu luctus, consectetur sapien ut, varius urna. Integer id tempus quam. Mauris hendrerit purus nisl, non euismod diam luctus vel.</p><p>Praesent convallis ante ac augue porttitor sagittis. Aliquam erat volutpat. Nullam odio urna, molestie facilisis mi id, semper malesuada sapien. Phasellus ipsum odio, maximus eget malesuada at, auctor quis odio. Nullam at mi nec magna fermentum luctus. Cras aliquam magna eros, et pharetra libero blandit eu. Pellentesque euismod condimentum congue. Maecenas hendrerit volutpat turpis non venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+                            "type": "text"
+                        },
+                        {
+                            "type": "chart",
+                            "src": "00000000-0000-0000-0000-000000000000/charts/en/hybridChartConfig.json"
                         }
                     ],
                     "loop": true,
@@ -295,7 +311,7 @@
                     "type": "text"
                 },
                 {
-                    "images": [
+                    "items": [
                         {
                             "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/AuroraNorth_Tailings.PNG",
                             "type": "image"
@@ -460,12 +476,14 @@
                     "type": "text"
                 },
                 {
-                    "type": "chart",
-                    "charts": [
+                    "type": "slideshow",
+                    "items": [
                         {
+                            "type": "chart",
                             "src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
                         },
                         {
+                            "type": "chart",
                             "src": "00000000-0000-0000-0000-000000000000/charts/en/Total releases of ethylene glycol for 2019, by province_en.csv",
                             "options": {
                                 "title": "Figure 2: Total releases of ethylene glycol for 2019, by province",
@@ -475,6 +493,7 @@
                             }
                         },
                         {
+                            "type": "chart",
                             "src": "00000000-0000-0000-0000-000000000000/charts/en/EG_releases_2019_en.csv",
                             "options": {
                                 "title": "Figure 1: Percentage of total ethylene glycol releases for 2019, by sector",
@@ -496,11 +515,7 @@
                 },
                 {
                     "type": "chart",
-                    "charts": [
-                        {
-                            "src": "00000000-0000-0000-0000-000000000000/charts/en/hybridChartConfig.json"
-                        }
-                    ]
+                    "src": "00000000-0000-0000-0000-000000000000/charts/en/hybridChartConfig.json"
                 }
             ]
         }
diff --git a/src/components/panels/chart-panel.vue b/src/components/panels/chart-panel.vue
index b812d57..d3f3dfb 100644
--- a/src/components/panels/chart-panel.vue
+++ b/src/components/panels/chart-panel.vue
@@ -1,48 +1,12 @@
 <template>
-    <div ref="el" class="flex">
-        <div class="carousel-container self-center px-10 my-8 mx-auto bg-gray-200_" :style="{ width: `${width}px` }">
-            <carousel v-if="width !== -1 && config.charts.length > 1" class="h-full" :wrap-around="config.loop">
-                <slide
-                    v-for="(chartConfig, index) in config.charts"
-                    :key="`chart-${index}`"
-                    :index="index"
-                    class="self-center"
-                >
-                    <chart :config="chartConfig" :configFileStructure="configFileStructure" />
-                </slide>
-
-                <template #addons>
-                    <navigation>
-                        <template #next>
-                            <svg class="icon icon-arrowRight" viewBox="0 0 24 24" width="24px" height="24px">
-                                <path d="M0 0h24v24H0z" fill="none"></path>
-                                <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
-                            </svg>
-                        </template>
-                        <template #prev>
-                            <svg class="icon icon-arrowLeft" viewBox="0 0 24 24" width="24px" height="24px">
-                                <path d="M0 0h24v24H0z" fill="none"></path>
-                                <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
-                            </svg>
-                        </template>
-                    </navigation>
-                    <pagination />
-                </template>
-            </carousel>
-
-            <div v-else-if="width !== -1">
-                <chart :config="config.charts[0]" :configFileStructure="configFileStructure" />
-            </div>
-        </div>
+    <div class="chart self-center px-10 my-8 mx-auto bg-gray-200_">
+        <chart :config="config" :configFileStructure="configFileStructure" />
     </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { onMounted, ref } from 'vue';
 import { ChartPanel, ConfigFileStructure } from '@storylines/definitions';
-import { Carousel, Navigation, Pagination, Slide } from 'vue3-carousel';
-import 'vue3-carousel/dist/carousel.css';
 import Chart from '@storylines/components/panels/helpers/chart.vue';
 
 defineProps({
@@ -54,67 +18,15 @@ defineProps({
         type: Object as PropType<ConfigFileStructure>
     }
 });
-
-const width = ref(-1);
-const el = ref();
-
-onMounted(() => {
-    setTimeout(() => {
-        width.value = el.value.clientWidth - 64;
-    });
-});
 </script>
 
 <style lang="scss" scoped>
-.carousel {
+.chart {
     height: auto;
-
-    :deep(.carousel__prev > svg),
-    :deep(.carousel__next > svg) {
-        min-height: 0;
-        min-width: 0;
-        overflow: visible;
-        padding-left: initial !important;
-        border-radius: 100%;
-        background: radial-gradient(white, transparent 75%);
-    }
-
-    :deep(.carousel__next) {
-        right: calc(-4px - 2em);
-    }
-
-    :deep(.carousel__prev) {
-        left: calc(-4px - 2em);
-    }
-
-    :deep(.carousel__pagination-button) {
-        border: 1px solid #878787;
-
-        width: 24px;
-        height: 6px;
-        margin: 10px 2px;
-        border-radius: 0px;
-        padding: 0px;
-
-        &.carousel__pagination-button--active {
-            border: none;
-            background-color: var(--sr-accent-colour);
-        }
-
-        &.carousel__pagination-button::after {
-            display: none;
-        }
-
-        &:hover {
-            background-color: white;
-            // background-color: lighten(#00d2d3, 20%);
-            border-color: var(--sr-accent-colour);
-        }
-    }
 }
 
 @media screen and (max-width: 640px) {
-    .carousel-container {
+    .chart {
         max-width: 100vw;
         max-height: 50vh;
         background-color: white;
diff --git a/src/components/panels/helpers/chart.vue b/src/components/panels/helpers/chart.vue
index 67b597b..bb6a035 100644
--- a/src/components/panels/helpers/chart.vue
+++ b/src/components/panels/helpers/chart.vue
@@ -16,7 +16,7 @@
 import type { PropType } from 'vue';
 import { inject, onMounted, ref } from 'vue';
 import {
-    ChartConfig,
+    ChartPanel,
     ConfigFileStructure,
     DQVChartConfig,
     LineSeriesData,
@@ -45,7 +45,7 @@ const emit = defineEmits(['loaded']);
 
 const props = defineProps({
     config: {
-        type: Object as PropType<ChartConfig>,
+        type: Object as PropType<ChartPanel>,
         required: true
     },
     configFileStructure: {
diff --git a/src/components/panels/image-panel.vue b/src/components/panels/image-panel.vue
index 8b09d88..047e55d 100644
--- a/src/components/panels/image-panel.vue
+++ b/src/components/panels/image-panel.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { ref, onMounted, getCurrentInstance } from 'vue';
 import type { PropType } from 'vue';
-import { ImagePanel } from '@storylines/definitions';
+import { ImagePanel, ConfigFileStructure } from '@storylines/definitions';
 
 import MarkdownIt from 'markdown-it';
 import Fullscreen from '@storylines/components/panels/helpers/fullscreen.vue';
@@ -32,6 +32,9 @@ const props = defineProps({
         type: Object as PropType<ImagePanel>,
         required: true
     },
+    configFileStructure: {
+        type: Object as PropType<ConfigFileStructure>
+    },
     slideIdx: {
         type: Number,
         default: 0
@@ -54,6 +57,21 @@ onMounted((): void => {
             }
         });
     }
+
+    // obtain image files from ZIP folder in editor preview mode
+    if (props.configFileStructure) {
+        const image = props.config;
+
+        const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
+        const imageFile = props.configFileStructure?.zip.file(assetSrc);
+        if (imageFile) {
+            imageFile.async('blob').then((res: Blob) => {
+                props.config.src = URL.createObjectURL(res);
+                getCurrentInstance()?.proxy?.$forceUpdate();
+            });
+        }
+    }
+
     observer.value?.observe(img.value as Element);
 });
 </script>
diff --git a/src/components/panels/slideshow-panel.vue b/src/components/panels/slideshow-panel.vue
index f107695..421114f 100644
--- a/src/components/panels/slideshow-panel.vue
+++ b/src/components/panels/slideshow-panel.vue
@@ -1,54 +1,47 @@
 <template>
     <div ref="el">
-        <div v-if="config.images.length === 1">
-            <image-panel
-                :config="config.images[0]"
-                :configFileStructure="configFileStructure"
-                :key="config.images[0].src"
-            ></image-panel>
-        </div>
-        <div class="flex" v-else>
+        <div class="flex">
             <div
-                ref="images"
-                class="carousel-container self-center px-10 my-8 mx-auto bg-gray-200_ h-28_"
+                ref="slideshow"
+                class="carousel-container self-center px-10 my-8 mx-auto bg-gray-200_"
                 :style="{ width: `${width}px` }"
             >
-                <fullscreen :expandable="config.fullscreen" :type="config.type">
-                    <carousel ref="carousel" v-if="width !== -1" class="h-full bg-white" :wrap-around="config.loop">
-                        <slide v-for="(image, index) in config.images" :key="index" :index="index" class="self-center">
-                            <img
-                                :data-src="image.src"
-                                :src="slideIdx > 2 ? '' : image.src"
-                                :alt="image.altText || ''"
-                                :style="{ width: `${image.width}px`, height: `${image.height}px` }"
-                                class="m-auto story-graphic carousel-image"
-                            />
-                            <div
-                                v-if="image.caption"
-                                class="text-center my-8 text-sm"
-                                v-html="md.render(image.caption)"
-                            ></div>
-                        </slide>
-
-                        <template #addons>
-                            <navigation>
-                                <template #next>
-                                    <svg class="icon icon-arrowRight" viewBox="0 0 24 24" width="24px" height="24px">
-                                        <path d="M0 0h24v24H0z" fill="none"></path>
-                                        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
-                                    </svg>
-                                </template>
-                                <template #prev>
-                                    <svg class="icon icon-arrowLeft" viewBox="0 0 24 24" width="24px" height="24px">
-                                        <path d="M0 0h24v24H0z" fill="none"></path>
-                                        <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
-                                    </svg>
-                                </template>
-                            </navigation>
-                            <pagination />
-                        </template>
-                    </carousel>
-                </fullscreen>
+                <carousel
+                    ref="carousel"
+                    v-if="width !== -1"
+                    class="h-full bg-white"
+                    :wrap-around="config.loop"
+                    :mouseDrag="false"
+                    :touchDrag="false"
+                >
+                    <slide v-for="(panelConfig, index) in config.items" :key="index" :index="index">
+                        <panel
+                            :config="panelConfig"
+                            :configFileStructure="configFileStructure"
+                            :slideIdx="slideIdx"
+                            class="carousel-item"
+                            :class="{ 'overflow-y-auto': panelConfig.type === 'text' }"
+                        ></panel>
+                    </slide>
+
+                    <template #addons>
+                        <navigation>
+                            <template #next>
+                                <svg class="icon icon-arrowRight" viewBox="0 0 24 24" width="24px" height="24px">
+                                    <path d="M0 0h24v24H0z" fill="none"></path>
+                                    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
+                                </svg>
+                            </template>
+                            <template #prev>
+                                <svg class="icon icon-arrowLeft" viewBox="0 0 24 24" width="24px" height="24px">
+                                    <path d="M0 0h24v24H0z" fill="none"></path>
+                                    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
+                                </svg>
+                            </template>
+                        </navigation>
+                        <pagination />
+                    </template>
+                </carousel>
 
                 <div v-if="config.caption" class="text-center mt-5 text-sm" v-html="md.render(config.caption)"></div>
             </div>
@@ -64,8 +57,8 @@ import { Carousel, Navigation, Pagination, Slide } from 'vue3-carousel';
 import 'vue3-carousel/dist/carousel.css';
 
 import MarkdownIt from 'markdown-it';
-import Fullscreen from '@storylines/components/panels/helpers/fullscreen.vue';
 import ImagePanel from '@storylines/components/panels/image-panel.vue';
+import Panel from '@storylines/components/panels/panel.vue';
 
 const md = new MarkdownIt({ html: true });
 
@@ -84,51 +77,23 @@ const props = defineProps({
 });
 
 const el = ref();
-const images = ref<Element>();
 const width = ref(-1);
-const observer = ref<IntersectionObserver | undefined>(undefined);
 
 onMounted(() => {
     setTimeout(() => {
         width.value = el.value.clientWidth;
     }, 100);
+});
 
-    if (props.slideIdx > 2) {
-        observer.value = new IntersectionObserver(([image]) => {
-            // lazy load images
-            if (image.isIntersecting) {
-                (images.value as Element).querySelectorAll('.carousel-image').forEach((img) => {
-                    img.setAttribute('src', img.getAttribute('data-src') as string);
-                });
-                getCurrentInstance()?.proxy?.$forceUpdate();
-                (observer.value as IntersectionObserver).disconnect();
-            }
-        });
-    }
-
-    // obtain image files from ZIP folder in editor preview mode
-    if (props.configFileStructure) {
-        props.config.images.forEach((image) => {
-            const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
-            const imageFile = props.configFileStructure?.zip.file(assetSrc);
-            if (imageFile) {
-                imageFile.async('blob').then((res: Blob) => {
-                    image.src = URL.createObjectURL(res);
-                    getCurrentInstance()?.proxy?.$forceUpdate();
-                });
-            }
-        });
-    }
-
-    if (props.config.images.length > 1) {
-        observer.value?.observe(images.value as Element);
-    }
+window.addEventListener('resize', () => {
+    width.value = el.value.clientWidth;
 });
 </script>
 
 <style lang="scss" scoped>
 .carousel {
     height: auto;
+    text-align: left;
 
     :deep(.carousel__prev > svg),
     :deep(.carousel__next > svg) {
@@ -155,6 +120,14 @@ onMounted(() => {
         transform: translate(-50%, 0);
     }
 
+    /* Some slight modifications for existing styles */
+    :deep(.rv-map) {
+        height: calc(90vh - 5rem) !important;
+    }
+    :deep(.graphic-image) {
+        padding: 0px;
+    }
+
     :deep(.carousel__pagination-button) {
         border: 1px solid #878787;
 
@@ -180,14 +153,20 @@ onMounted(() => {
         }
     }
 }
+.carousel-item {
+    height: 80vh;
+}
 
 @media screen and (max-width: 640px) {
     .carousel-container {
         max-width: 100vw;
         background-color: white;
     }
-    .carousel-image {
+    .carousel-item {
         max-height: 48vh;
     }
+    :deep(.fullscreenButton) {
+        right: 0px;
+    }
 }
 </style>
diff --git a/src/definitions.ts b/src/definitions.ts
index 0932756..a980147 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -203,17 +203,18 @@ export interface AudioPanel extends BasePanel {
 
 export interface SlideshowPanel extends BasePanel {
     type: PanelType.Slideshow;
-    images: ImagePanel[];
-    fullscreen?: boolean;
+    items: Array<ChartPanel | TextPanel | ImagePanel | MapPanel>;
     loop?: boolean;
     caption?: string;
 }
 
 export interface ChartPanel extends BasePanel {
     type: PanelType.Chart;
-    charts: ChartConfig[];
-    fullscreen?: boolean;
-    loop?: boolean;
+    src: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    config?: any;
+    name?: string;
+    options?: DQVOptions;
 }
 
 export interface ChartConfig {