new slideshow type

package.json

@@ -85,6 +85,7 @@
     "vue-slide-bar": "^1.2.0",
     "vue-slider-component": "^3.1.2",
     "vue-video-player": "^5.0.2",
+    "vueperslides": "^2.15.2",
     "vuera": "^0.2.7",
     "vuex": "^3.1.3",
     "yaml": "^1.7.2"

src/charts/allCharts.ts

@@ -11,6 +11,7 @@ import line from './line.vue'
 import pie from './pie.vue'
 import sankey from './sankey.vue'
 import scatter from './scatter.vue'
+import slideshow from './slideshow.vue'
 import text from './text.vue'
 import transit from './transit.vue'
 import vega from './vega.vue'
@@ -34,6 +35,7 @@ export const plotlyCharts = {
   line,
   pie,
   sankey,
+  slideshow,
   text,
   transit,
   scatter,

src/charts/slideshow.vue

@@ -0,0 +1,80 @@
+<template>
+
+<vueper-slides v-bind="options">
+  <vueper-slide v-for="(slide, i) in slides" :key="i" v-bind="slide" />
+</vueper-slides>
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+import { VueperSlides, VueperSlide } from 'vueperslides'
+import 'vueperslides/dist/vueperslides.css'
+
+import { FileSystemConfig } from '@/Globals'
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+import { hasOwnProperty } from 'vega'
+
+@Component({ components: {VueperSlides, VueperSlide}})
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+
+  private options : { [key: string]: any } = {}
+  private slides: any[] = []
+
+  // true for absolute URLs
+  private r: RegExp = new RegExp('^(?:[a-z]+:)?//', 'i')
+
+  private async mounted() {
+    const fileApi = new HTTPFileSystem(this.fileSystemConfig)
+
+    if (this.config.options != null)
+      Object.assign(this.options, this.config.options)
+
+
+    this.slides = []
+    // Check if defined and iterable, throwing an error otherwise would be good
+    if (this.config.slides != null && typeof this.config.slides[Symbol.iterator] === 'function') {
+      // Resolve relative URLs
+      for (const data of this.config.slides) {
+
+        if (hasOwnProperty(data, 'image')) {
+          if (!this.r.test(data.image))
+            data.image = fileApi.cleanURL(`${this.subfolder}/${data.image}`)          
+        }
+
+        if (hasOwnProperty(data, 'video')) {
+          if (!this.r.test(data.video))
+            data.video = fileApi.cleanURL(`${this.subfolder}/${data.video}`)
+        }
+
+        this.slides.push(data)
+      }
+    }
+
+    console.log(this.slides)
+
+    this.$emit('isLoaded')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.dash-element {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>