@windward/games 0.0.1

package/components/content/blocks/slideshow/SlideShow.vue

@@ -0,0 +1,175 @@
+<template>
+    <div>
+        <div class="header-description">
+            <h1
+                :aria-label="
+                    $t(
+                        'plugin.games.components.content.blocks.slideshow.slideshow_title'
+                    )
+                "
+                tabindex="0"
+            >
+                {{ block.metadata.config.title }}
+            </h1>
+
+            <p tabindex="0" class="pt-3">
+                {{ block.metadata.config.instructions }}
+            </p>
+            <p tabindex="0">
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.slideshow.basic_instructions'
+                    )
+                }}
+            </p>
+        </div>
+        <div>
+            <template v-if="block.metadata.config.slides.length !== 0">
+                <v-carousel v-model="model">
+                    <template #prev="{ on, attrs }">
+                        <v-btn
+                            variant="elevated"
+                            color="primary"
+                            fab
+                            class="nav-buttons"
+                            v-bind="attrs"
+                            v-on="on"
+                            ><v-icon>mdi-chevron-left</v-icon></v-btn
+                        >
+                    </template>
+                    <template #next="{ on, attrs }">
+                        <v-btn
+                            variant="elevated"
+                            color="primary"
+                            fab
+                            class="nav-buttons"
+                            v-bind="attrs"
+                            v-on="on"
+                            ><v-icon>mdi-chevron-right</v-icon></v-btn
+                        >
+                    </template>
+                    <v-container
+                        class="pa-0 ma-0"
+                        v-for="(slide, index) in block.metadata.config.slides"
+                        :key="index"
+                    >
+                        <v-carousel-item>
+                            <div class="fill-height d-flex flex-column">
+                                <div>
+                                    <h3 class="header-description">
+                                        {{ slide['header'] }} :
+                                    </h3>
+                                    <p class="header-description">
+                                        {{ slide['description'] }}
+                                    </p>
+                                </div>
+                                <div style="overflow: auto">
+                                    <v-img
+                                        v-if="slide['image']"
+                                        :src="
+                                            slide['image']['asset'][
+                                                'public_url'
+                                            ]
+                                        "
+                                        :alt="slide['image_alt']"
+                                        height="100%"
+                                        contain
+                                    />
+                                </div>
+                            </div>
+                        </v-carousel-item>
+                    </v-container>
+                </v-carousel>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'SlideShow',
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
+
+        if (_.isEmpty(this.block.metadata.config.slides)) {
+            this.block.metadata.config.slides = []
+        }
+    },
+    data() {
+        return {
+            next: {},
+            prev: {},
+            model: null,
+        }
+    },
+    methods: {},
+}
+</script>
+<style scoped>
+.img-sizing {
+    height: 100% !important;
+    width: 100% !important;
+    object-fit: contain;
+    max-width: 87%;
+}
+.sheet-height {
+    height: 100%;
+    position: relative;
+}
+.fullHeight {
+    height: 75% !important;
+}
+.seventy {
+    height: 70% !important;
+}
+.sixty {
+    height: 60% !important;
+}
+.fifty {
+    height: 50% !important;
+}
+.forty {
+    height: 40% !important;
+}
+.thirty {
+    height: 30% !important;
+}
+.twenty {
+    height: 20% !important;
+}
+.ten {
+    height: 10% !important;
+}
+.nav-buttons {
+    font-size: 34px;
+    font-weight: 340;
+}
+</style>
+<style>
+.v-carousel__controls {
+    background: var(--v-primary-base) !important;
+}
+.header-description {
+    padding-left: 75px;
+    padding-right: 75px;
+}
+</style>