@windward/core 0.0.1

package/components/Content/Blocks/Video.vue

@@ -0,0 +1,245 @@
+<template>
+    <div>
+        <v-card v-if="render && !hasSource">
+            <v-card-title>
+                <v-icon class="mr-2">mdi-cloud-question</v-icon>
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.video.video.not_configured_title'
+                    )
+                }}
+            </v-card-title>
+            <v-card-text>{{
+                $t(
+                    'windward.core.components.content.blocks.video.video.edit_prompt'
+                )
+            }}</v-card-text>
+        </v-card>
+
+        <v-skeleton-loader
+            v-if="!render && !hasSource"
+            type="image, image, list-item-avatar"
+            class="reload-skeleton"
+        ></v-skeleton-loader>
+        <h2 v-if="block.metadata.config.title" class="pl-4">
+            {{ block.metadata.config.title }}
+        </h2>
+        <VuetifyPlayer
+            v-if="hasSource"
+            :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
+            :type="block.metadata.config.type"
+            :playlist="block.metadata.config.playlist"
+            :autoplay="block.metadata.config.attributes.autoplay"
+            :autopictureinpicture="
+                block.metadata.config.attributes.autopictureinpicture
+            "
+            :controls="block.metadata.config.attributes.controls"
+            :controlslist="block.metadata.config.attributes.controlslist"
+            :crossorigin="block.metadata.config.attributes.crossorigin"
+            :disablepictureinpicture="
+                block.metadata.config.attributes.disablepictureinpicture
+            "
+            :disableremoteplayback="
+                block.metadata.config.attributes.disableremoteplayback
+            "
+            :height="block.metadata.config.attributes.height"
+            :width="block.metadata.config.attributes.width"
+            :rewind="block.metadata.config.attributes.rewind"
+            :loop="block.metadata.config.attributes.loop"
+            :muted="block.metadata.config.attributes.muted"
+            :playsinline="block.metadata.config.attributes.playsinline"
+            :poster="block.metadata.config.attributes.poster"
+            :preload="block.metadata.config.attributes.preload"
+            :captionsmenu="block.metadata.config.attributes.captionsmenu"
+            :playlistmenu="block.metadata.config.attributes.playlistmenu"
+            :playlistautoadvance="
+                block.metadata.config.attributes.playlistautoadvance
+            "
+            :playbackrates="block.metadata.config.attributes.playbackrates"
+        />
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import VuetifyPlayer from '@mindedge/vuetify-player'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockVideo',
+    components: {
+        VuetifyPlayer,
+        ContentBlockAsset,
+    },
+    extends: BaseContentBlock,
+    computed: {
+        hasSource() {
+            // __isDirty is used to communicate from the settings panel that a source / caption
+            // has changed and to reload the video player
+            if (this.block.metadata.config.__isDirty) {
+                return false
+            }
+
+            return !_.isEmpty(
+                _.get(
+                    this.block.metadata.config,
+                    'playlist[0].sources[0]',
+                    null
+                )
+            )
+        },
+    },
+    data() {
+        return {
+            saveState: false,
+
+            fileTab: null,
+
+            saveKey: null, // Used for checking changes in settings
+            // Default config settings
+            defaultConfig: {
+                // Default settings for new blocks
+                // This will be overridden in beforeMount()
+                type: 'video', // Allowed video|audio. In audio mode the player has a max-height of 40px
+                attributes: {
+                    autoplay: false, // Autoplay on load. It's in the spec but DON'T USE THIS
+                    autopictureinpicture: false, // Start with picture in picture mode
+                    controls: true, // Show video controls. When false only play/pause allowed but clicking on the video itself
+                    controlslist: 'nodownload noremoteplayback', // Space separated string per <video>. Allowed 'nodownload nofullscreen noremoteplayback'
+                    crossorigin: 'anonymous',
+                    disablepictureinpicture: true, // Shows the picture in picture button
+                    disableremoteplayback: true, // Shows the remote playback button but functionality does not exist when clicked
+                    height: 'auto',
+                    width: '100%',
+                    rewind: true, // Enabled the rewind 10s button
+                    loop: false, // Loop the video on completion
+                    muted: false, // Start the video muted
+                    playsinline: false, // Force inline & disable fullscreen
+                    poster: '', // Overridden with the playlist.poster if one is set there
+                    preload: '',
+                    captionsmenu: true, // Show the captions below the video
+                    playlistmenu: true, // Show the playlist menu if there's multiple videos
+                    playlistautoadvance: true, // Play the next source group
+                    playbackrates: [0.5, 1, 1.5, 2], // Default playback speeds
+                },
+                playlist: [
+                    /*{
+                        name: '', // The video name to appear on playlists
+                        poster: '', // A video specific poster in the playlist
+                        ads: [
+                            {
+                            play_at_percent: 0,
+                            sources: [
+                                {
+                                    src: "https://domain.test/ad_example.mp4",
+                                    type: "video/mp4",
+                                },
+                            ],
+                            tracks: [
+                                {
+                                    src: "https://domain.test/ad_example-US.vtt",
+                                    kind: "captions",
+                                    srclang: "en-US",
+                                    default: true,
+                                },
+                            ],
+                        },
+                        ],
+                        sources: [
+                            {
+                                src: "https://domain.test/example.mp4",
+                                type: "video/mp4",
+                            },
+                        ],
+                        tracks: [
+                            {
+                                src: "https://domain.test/example_en-US.vtt",
+                                kind: "captions",
+                                srclang: "en-US",
+                                default: true,
+                            },
+                        ],
+                    },*/
+                ],
+            },
+        }
+    },
+    beforeMount() {
+        // Apply the default config
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = this.defaultConfig
+        }
+    },
+    mounted() {
+        // TODO Check privs
+        //const hasPrivs = true
+        //if (hasPrivs) {
+        //this.blockSettings = this.initEditorSettings(this.settings)
+        //}
+        this.saveKey = this.settingsKey()
+    },
+    methods: {
+        /**
+         * Hash out the settings to see if there's any changes
+         */
+        settingsKey() {
+            const str = JSON.stringify(this.block.metadata.config)
+            return str.split('').reduce(function (a, b) {
+                a = (a << 5) - a + b.charCodeAt(0)
+                return a & a
+            }, 0)
+        },
+        async onActionPanelEdit() {
+            // Push any setting changes up
+            await this.onBeforeSave
+
+            // We're moving from edit mode to render mode
+            // Prompt about any unsaved changes
+            if (!this.render && this.settingsKey() !== this.saveKey) {
+                const self = this
+                this.$toast.info(this.$t('shared.forms.unsaved'), {
+                    icon: 'mdi-help',
+                    duration: null,
+                    action: [
+                        {
+                            text: this.$t('shared.forms.cancel'),
+                            onClick: (e, toastObject) => {
+                                toastObject.goAway(0)
+                                self.render = true
+                            },
+                        },
+                        {
+                            text: this.$t('shared.forms.confirm'),
+                            // router navigation
+                            onClick: async (e, toastObject) => {
+                                await this.onBeforeSave()
+                                // Saved, rehash the setting changes key
+                                this.saveKey = this.settingsKey()
+
+                                self.render = true
+                                toastObject.goAway(0)
+                            },
+                        },
+                    ],
+                })
+            } else {
+                this.render = !this.render
+            }
+        },
+        async onBeforeSave() {
+            this.block.body = 'video'
+        },
+        onAfterSave() {
+            this.saveKey = this.settingsKey()
+        },
+    },
+}
+</script>
+
+<style scoped>
+.reload-skeleton {
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+}
+</style>

package/components/Navigation/Items/CourseGlossaryToolNav.vue

@@ -0,0 +1,39 @@
+<template>
+    <v-list-item @click="dialog = true">
+        <v-list-item-action>
+            <v-icon>{{ config.icon }}</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+            <v-list-item-title>{{ $t(config.i18n) }}</v-list-item-title>
+            <Dialog v-model="dialog" color="primary" text :trigger="false">
+                <template #title>{{ $t(config.i18n) }}</template>
+                <template #form="{ on, attrs }">
+                    <div v-bind="attrs" v-on="on">
+                        <CourseGlossary />
+                    </div>
+                </template>
+            </Dialog>
+        </v-list-item-content>
+    </v-list-item>
+</template>
+
+<script>
+import CourseGlossary from '../../utils/glossary/CourseGlossary.vue'
+export default {
+    name: 'NavigationItemCourseGlossary',
+    components: { CourseGlossary },
+    props: {
+        config: { type: Object, required: true },
+    },
+    data() {
+        return {
+            dialog: false,
+        }
+    },
+    methods: {
+        close() {
+            this.dialog = false
+        },
+    },
+}
+</script>

package/components/Navigation/Items/GlossaryNav.vue

@@ -0,0 +1,32 @@
+<template>
+    <v-list-item :to="'/course/' + course.id + '/glossary'">
+        <v-list-item-action>
+            <v-icon>mdi-comment-text-multiple</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+            <v-list-item-title
+                >{{ $t('windward.core.shared.menu.course_glossary') }}
+            </v-list-item-title>
+        </v-list-item-content>
+    </v-list-item>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'GlossaryNav',
+    layout: 'course',
+    middleware: ['auth'],
+    data() {
+        return {}
+    },
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+        }),
+    },
+}
+</script>
+
+<style scoped></style>

package/components/Navigation/Items/UserUploadNav.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-list-item :to="'/course/' + course.id + '/user-uploads'">
+        <v-list-item-action>
+            <v-icon>mdi-cloud-upload</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+            <v-list-item-title
+                >{{
+                    $t('windward.core.components.navigation.user_upload.title')
+                }}
+            </v-list-item-title>
+        </v-list-item-content>
+    </v-list-item>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    components: {},
+    layout: 'course',
+    middleware: ['auth'],
+    data() {
+        return {}
+    },
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+        }),
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+}
+</script>

package/components/Settings/AccordionSettings.vue

@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <v-container class="pa-0">
+            <v-btn
+                color="primary"
+                outlined
+                @click="onAddElement"
+                class="fullWidth"
+                ><v-icon>mdi-plus</v-icon>{{ $t('shared.forms.add') }}</v-btn
+            >
+            <v-expansion-panels flat>
+                <v-expansion-panel
+                    v-for="(item, itemIndex) in block.metadata.config.items"
+                    :key="itemIndex"
+                    class="elevation-0"
+                >
+                    <v-expansion-panel-header class="elevation-0">{{
+                        'item ' + (itemIndex + 1)
+                    }}</v-expansion-panel-header>
+                    <v-expansion-panel-content
+                        class="elevation-0"
+                        :key="expansionPanelKey"
+                    >
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.items[itemIndex].header
+                            "
+                            :label="'Item Title'"
+                        ></v-text-field>
+                        <v-btn
+                            @click="
+                                onToggleExpand(
+                                    block.metadata.config.items[itemIndex]
+                                )
+                            "
+                        >
+                            <v-icon
+                                v-if="
+                                    !block.metadata.config.items[itemIndex]
+                                        .expand
+                                "
+                                >mdi-arrow-expand-all</v-icon
+                            >
+                            <v-icon
+                                v-if="
+                                    block.metadata.config.items[itemIndex]
+                                        .expand
+                                "
+                            >
+                                mdi-arrow-collapse-all
+                            </v-icon>
+                        </v-btn>
+                        <TextEditor
+                            :api_key="api_key"
+                            v-show="
+                                !block.metadata.config.items[itemIndex].expand
+                            "
+                            v-model="
+                                block.metadata.config.items[itemIndex].content
+                            "
+                        ></TextEditor>
+                        <br />
+                        <v-btn
+                            class="mt-2 fullWidth"
+                            color="primary"
+                            outlined
+                            @click="onRemoveElement(itemIndex)"
+                            ><v-icon>mdi-delete-outline</v-icon
+                            >{{ $t('shared.forms.delete') }}</v-btn
+                        >
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </v-container>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import TextEditor from '~/components/Text/TextEditor'
+
+export default {
+    name: 'AccordionSettings',
+    components: {
+        TextEditor,
+    },
+    extends: BaseContentSettings,
+    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.editOnContentItem)) {
+            this.block.metadata.config.editOnContentItem = false
+        }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            const defaultObject = {
+                header: '',
+                expand: false,
+                content: '',
+            }
+            this.block.metadata.config.items = []
+            this.block.metadata.config.items.push(defaultObject)
+        }
+        this.block.body = 'accordion'
+    },
+    data() {
+        return {
+            api_key: process.env.TINY_MCE_API_KEY,
+            expansionPanelKey: '0',
+        }
+    },
+    mounted() {},
+    beforeDestroy() {
+        if (this.debouncer) {
+            clearTimeout(this.debouncer)
+        }
+    },
+
+    methods: {
+        onAddElement() {
+            const default_item = {
+                header: '',
+                expand: false,
+                content: '',
+            }
+            this.block.metadata.config.items.push(default_item)
+        },
+        onRemoveElement(index) {
+            this.block.metadata.config.items.splice(index, 1)
+            this.expansionPanelKey = Crypto.id()
+        },
+        onToggleExpand(item) {
+            this.expansionPanelKey = Crypto.id()
+            return (item.expand = !item.expand)
+        },
+    },
+}
+</script>
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+.fullWidth {
+    width: 100%;
+}
+</style>

package/components/Settings/ClickableIconsSettings.vue

@@ -0,0 +1,189 @@
+<template>
+    <div>
+        <v-container>
+            <v-col>
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.title'
+                        )
+                    "
+                ></v-text-field>
+                <v-text-field
+                    v-model="block.metadata.config.description"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.description'
+                        )
+                    "
+                ></v-text-field>
+                <v-btn color="primary" outlined @click="onAddElement"
+                    ><v-icon>mdi-plus</v-icon
+                    >{{ $t('shared.forms.add') }}</v-btn
+                >
+            </v-col>
+            <v-expansion-panels flat>
+                <v-expansion-panel
+                    v-for="(item, itemIndex) in block.metadata.config.items"
+                    :key="itemIndex"
+                    class="elevation-0"
+                >
+                    <v-expansion-panel-header class="elevation-0">{{
+                        'item ' + (itemIndex + 1)
+                    }}</v-expansion-panel-header>
+                    <v-expansion-panel-content
+                        class="elevation-0"
+                        :key="expansionPanelKey"
+                    >
+                        <v-text-field
+                            :counter="1"
+                            maxlength="1"
+                            v-model="
+                                block.metadata.config.items[itemIndex].icon
+                            "
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.clickable_icon.item_icon',
+                                    [itemIndex + 1]
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.items[itemIndex].title
+                            "
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.clickable_icon.item_title'
+                                )
+                            "
+                        ></v-text-field>
+
+                        <ColorPicker
+                            v-model="
+                                block.metadata.config.items[itemIndex].color
+                            "
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.clickable_icon.item_color'
+                                )
+                            "
+                        ></ColorPicker>
+                        <v-divider class="mt-3 mb-3" />
+                        <span>{{
+                            $t(
+                                'windward.core.components.settings.clickable_icon.item_text'
+                            )
+                        }}</span>
+                        <TextEditor
+                            :api_key="api_key"
+                            v-model="
+                                block.metadata.config.items[itemIndex].body
+                            "
+                        ></TextEditor>
+                        <v-divider class="mt-3 mb-3" />
+                        <v-btn
+                            class="mt-2"
+                            color="primary"
+                            block
+                            outlined
+                            @click="onRemoveElement(itemIndex)"
+                            ><v-icon>mdi-delete-outline</v-icon
+                            >{{ $t('shared.forms.delete') }}</v-btn
+                        >
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </v-container>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import TextEditor from '~/components/Text/TextEditor'
+import ColorPicker from '~/components/ColorPicker.vue'
+export default {
+    name: 'ClickableIconsSettings',
+    components: {
+        TextEditor,
+        ColorPicker,
+    },
+    extends: BaseContentSettings,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'clickable icons'
+        }
+        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.items)) {
+            this.block.metadata.config.items = []
+        }
+    },
+    data() {
+        return {
+            valid: true,
+            debounce: null,
+            loading: false,
+            api_key: process.env.TINY_MCE_API_KEY,
+            title: '',
+            description: '',
+            items: [
+                {
+                    icon: '',
+                    title: '',
+                    body: '',
+                    active: false,
+                },
+            ],
+            expansionPanelKey: '0',
+        }
+    },
+    mounted() {
+        if (this.block.metadata.config.items.length <= 0) {
+            this.onAddElement()
+        }
+    },
+    beforeDestroy() {
+        if (this.debouncer) {
+            clearTimeout(this.debouncer)
+        }
+    },
+
+    methods: {
+        async onBeforeSave() {
+            this.block.metadata.config.items = this.items
+        },
+        onAddElement() {
+            const defaultObject = {
+                icon: '',
+                title: '',
+                body: '',
+                color: {},
+                active: false,
+            }
+            this.block.metadata.config.items.push(defaultObject)
+        },
+        onRemoveElement(index) {
+            this.block.metadata.config.items.splice(index, 1)
+            this.expansionPanelKey = Crypto.id()
+        },
+    },
+}
+</script>
+<style scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+</style>