@windward/games 0.0.1

package/components/settings/FlashCardSlidesManager.vue

@@ -0,0 +1,489 @@
+<template>
+    <div>
+        <v-text-field
+            v-model="block.metadata.config.title"
+            :counter="50"
+            :label="
+                $t('plugin.games.components.settings.bucket_game.form.title')
+            "
+            ref="title"
+        ></v-text-field>
+        <br />
+        <v-textarea
+            outlined
+            auto-grow
+            v-model="block.metadata.config.instructions"
+            :label="
+                $t(
+                    'plugin.games.components.settings.bucket_game.form.instructions'
+                )
+            "
+        ></v-textarea>
+        <br />
+        <v-expansion-panels flat>
+            <v-expansion-panel>
+                <v-expansion-panel-header class="pa-0"
+                    ><h3>Sortable Flashcards</h3></v-expansion-panel-header
+                >
+                <v-expansion-panel-content class="ma-0">
+                    <v-container class="pa-0">
+                        <draggable
+                            v-model="block.metadata.config.cards"
+                            class="d-flex flex-column mb-6"
+                            group="cards"
+                        >
+                            <v-card
+                                v-for="(item, index) in block.metadata.config
+                                    .cards"
+                                :key="'card_' + index"
+                                class="pa-2 flex-fill"
+                                elevation="0"
+                                outlined
+                                tile
+                            >
+                                <v-row class="pa-3">
+                                    <div
+                                        class="text-truncate pa-0 ma-0"
+                                        @click="onOpenEditor(index)"
+                                        v-on:keyup.enter="onOpenEditor(index)"
+                                        @mouseover="onHover"
+                                        @mouseleave="onHoverLeave"
+                                        :class="cursor"
+                                        tabindex="0"
+                                    >
+                                        <v-icon class="pl-2"
+                                            >mdi-gesture-tap-hold
+                                        </v-icon>
+                                        {{
+                                            item.title
+                                                ? block.metadata.config.cards[
+                                                      index
+                                                  ].title
+                                                : $t(
+                                                      'plugin.games.components.settings.flashcard.form.card'
+                                                  ) +
+                                                  ' ' +
+                                                  (index + 1)
+                                        }}
+                                    </div>
+                                    <v-spacer />
+                                    <v-icon
+                                        class="float-right"
+                                        @click="onDelete(index, $event)"
+                                    >
+                                        mdi-delete-outline
+                                    </v-icon>
+                                </v-row>
+
+                                <div
+                                    v-if="
+                                        block.metadata.config.cards[index]
+                                            .expand
+                                    "
+                                >
+                                    <br />
+                                    <hr />
+
+                                    <v-row
+                                        class="d-flex justify-space-around pt-8"
+                                        align="center"
+                                        justify="center"
+                                        ><v-btn
+                                            @click="flipCardFront(index)"
+                                            color="primary"
+                                            :outlined="
+                                                !block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            >{{
+                                                $t(
+                                                    'plugin.games.components.settings.flashcard.form.front'
+                                                )
+                                            }}</v-btn
+                                        >
+                                        {{
+                                            $t(
+                                                'plugin.games.components.settings.flashcard.form.card'
+                                            ) +
+                                            ' ' +
+                                            (index + 1) +
+                                            ' ' +
+                                            (block.metadata.config.cards[index]
+                                                .side
+                                                ? $t(
+                                                      'plugin.games.components.settings.flashcard.form.front'
+                                                  )
+                                                : $t(
+                                                      'plugin.games.components.settings.flashcard.form.back'
+                                                  ))
+                                        }}<v-btn
+                                            @click="flipCardBack(index)"
+                                            color="primary"
+                                            :outlined="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                        >
+                                            {{
+                                                $t(
+                                                    'plugin.games.components.settings.flashcard.form.back'
+                                                )
+                                            }}</v-btn
+                                        ></v-row
+                                    ><br />
+                                    <v-form ref="form">
+                                        <v-text-field
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].title
+                                            "
+                                            label="Title"
+                                        ></v-text-field>
+                                        <br />
+                                        <v-textarea
+                                            v-if="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            outlined
+                                            auto-grow
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].front.header
+                                            "
+                                            label="Header"
+                                        />
+                                        <v-textarea
+                                            v-if="
+                                                !block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            outlined
+                                            auto-grow
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].back.header
+                                            "
+                                            :counter="255"
+                                            label="Header"
+                                            required
+                                        />
+                                        <textEditor
+                                            v-show="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            outlined
+                                            auto-grow
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].front.text
+                                            "
+                                            label="Text"
+                                            required
+                                        />
+                                        <textEditor
+                                            v-show="
+                                                !block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            outlined
+                                            auto-grow
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].back.text
+                                            "
+                                            label="Text"
+                                            required
+                                        />
+                                        <br />
+                                        <ContentBlockAsset
+                                            v-show="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].front.img
+                                            "
+                                            mimes="image/png,image/jpeg"
+                                            @click:file="onImageSelect"
+                                        >
+                                            <template #title>
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.settings.flashcard.form.image.title'
+                                                    )
+                                                }}
+                                            </template>
+                                            <template #description>
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.settings.flashcard.form.image.configure_blurb'
+                                                    )
+                                                }}
+                                            </template>
+                                        </ContentBlockAsset>
+                                        <ContentBlockAsset
+                                            v-show="
+                                                !block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].back.img
+                                            "
+                                            mimes="image/png,image/jpeg"
+                                            @click:file="onImageSelect"
+                                        >
+                                            <template #title>
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.settings.flashcard.form.image.title'
+                                                    )
+                                                }}
+                                            </template>
+                                            <template #description>
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.settings.flashcard.form.image.configure_blurb'
+                                                    )
+                                                }}
+                                            </template>
+                                        </ContentBlockAsset>
+                                        <br />
+                                        <v-textarea
+                                            auto-grow
+                                            v-show="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            outlined
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].front.altText
+                                            "
+                                            label="Alt Text"
+                                            required
+                                        ></v-textarea>
+                                        <v-textarea
+                                            auto-grow
+                                            v-show="
+                                                !block.metadata.config.cards[
+                                                    index
+                                                ].side
+                                            "
+                                            outlined
+                                            v-model="
+                                                block.metadata.config.cards[
+                                                    index
+                                                ].back.altText
+                                            "
+                                            label="Alt Text"
+                                            required
+                                        ></v-textarea>
+                                        <v-row
+                                            class="d-flex justify-space-around pt-8"
+                                            align="center"
+                                            justify="center"
+                                            ><v-btn
+                                                @click="flipCardFront(index)"
+                                                color="primary"
+                                                :outlined="
+                                                    !block.metadata.config
+                                                        .cards[index].side
+                                                "
+                                                >{{
+                                                    $t(
+                                                        'plugin.games.components.settings.flashcard.form.front'
+                                                    )
+                                                }}</v-btn
+                                            >
+
+                                            <v-btn
+                                                @click="flipCardBack(index)"
+                                                color="primary"
+                                                :outlined="
+                                                    block.metadata.config.cards[
+                                                        index
+                                                    ].side
+                                                "
+                                            >
+                                                {{
+                                                    $t(
+                                                        'plugin.games.components.settings.flashcard.form.back'
+                                                    )
+                                                }}</v-btn
+                                            ></v-row
+                                        >
+                                        <br />
+                                    </v-form>
+                                </div>
+                            </v-card>
+                        </draggable>
+                        <p
+                            @click="onAddCard"
+                            v-on:keyup.enter="onAddCard"
+                            class="fullWidth"
+                            tabindex="0"
+                        >
+                            <v-icon class="primary addIcon">mdi-plus</v-icon>
+                            {{
+                                $t(
+                                    'plugin.games.components.settings.flashcard.form.add_card'
+                                )
+                            }}
+                        </p>
+                    </v-container>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import {
+    MathExpressionEditor,
+    MathLiveWrapper,
+    ContentViewer,
+} from '@windward/core/utils'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import draggable from 'vuedraggable'
+
+export default {
+    name: 'FlashCardSlidesManager',
+    extends: BaseContentSettings,
+    components: {
+        MathExpressionEditor,
+        MathLiveWrapper,
+        ContentViewer,
+        ContentBlockAsset,
+        draggable,
+        TextEditor,
+    },
+    data() {
+        return {
+            cursor: null,
+        }
+    },
+    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 = {}
+            this.block.metadata.config.currentSlide = 0
+            this.block.metadata.config.title = ''
+            this.block.metadata.config.instructions = ''
+        }
+    },
+
+    computed: {
+        defaultCard() {
+            return {
+                front: {
+                    img: {},
+                    header: 'front header',
+                    text: 'front text',
+                    imgAltText: 'alt',
+                },
+                back: {
+                    img: {},
+                    header: 'back header ',
+                    text: 'back text ',
+                    imgAltText: 'back alt ',
+                },
+                expand: false,
+                title: '',
+                side: true,
+            }
+        },
+    },
+    methods: {
+        onAddCard() {
+            this.block.metadata.config.cards.forEach((element) => {
+                element.expand = false
+            })
+            this.block.metadata.config.cards.push(this.defaultCard)
+        },
+        onDelete(index) {
+            this.$toast.info(this.$t('shared.forms.confirm_delete_text'), {
+                duration: null,
+                action: [
+                    {
+                        text: this.$t('shared.forms.cancel'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                        },
+                    },
+                    {
+                        text: this.$t('shared.forms.confirm'),
+                        onClick: (e, toastObject) => {
+                            toastObject.goAway(0)
+                            this.block.metadata.config.cards.splice(index, 1)
+                        },
+                    },
+                ],
+            })
+        },
+        onOpenEditor(index) {
+            this.block.metadata.config.currentSlide = index
+            this.block.metadata.config.cards[index].expand =
+                !this.block.metadata.config.cards[index].expand
+            this.block.metadata.config.cards.forEach(
+                (element, element_index) => {
+                    if (index !== element_index) {
+                        element.expand = false
+                    }
+                }
+            )
+        },
+        onImageSelect(img) {
+            let currentSlide = this.block.metadata.config.currentSlide
+            this.block.metadata.config.cards[currentSlide].img = img
+            //this.face.img = img
+        },
+        flipCardFront(index) {
+            this.block.metadata.config.cards[index].side = true
+        },
+        flipCardBack(index) {
+            this.block.metadata.config.cards[index].side = false
+        },
+        onHover(index) {
+            this.cursor = 'changePointer'
+        },
+        onHoverLeave() {
+            this.cursor = ''
+        },
+    },
+}
+</script>
+
+<style scoped>
+.changePointer {
+    cursor: pointer !important;
+}
+</style>