Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for dynamic slideshow #411

Merged
merged 1 commit into from
Mar 21, 2024
Merged

add support for dynamic slideshow #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions StoryRampSchema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down Expand Up @@ -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",
Expand All @@ -348,7 +358,7 @@
"enum": ["slideshow"]
}
},
"required": ["images", "type"]
"required": ["items", "type"]
},
"dqvchartOptions": {
"type": "object",
Expand Down
37 changes: 26 additions & 11 deletions public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -208,7 +210,7 @@
"type": "text"
},
{
"images": [
"items": [
{
"src": "00000000-0000-0000-0000-000000000000/assets/en/substances/1_AuroraNorth_RelDisp.PNG",
"type": "image"
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -295,7 +311,7 @@
"type": "text"
},
{
"images": [
"items": [
{
"src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/AuroraNorth_Tailings.PNG",
"type": "image"
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
]
}
Expand Down
96 changes: 4 additions & 92 deletions src/components/panels/chart-panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/panels/helpers/chart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import type { PropType } from 'vue';
import { inject, onMounted, ref } from 'vue';
import {
ChartConfig,
ChartPanel,
ConfigFileStructure,
DQVChartConfig,
LineSeriesData,
Expand Down Expand Up @@ -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: {
Expand Down
20 changes: 19 additions & 1 deletion src/components/panels/image-panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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>
Expand Down
Loading
Loading