@windward/core 0.13.0 → 0.15.0

package/components/Settings/TabSettings.vue

@@ -41,39 +41,49 @@
                         {{ $t('windward.core.components.settings.tab.header') }}
                     </p>
                     <v-text-field
+                        v-model="block.metadata.config.items[index].tabHeader"
                         outlined
                         :autofocus="true"
-                        v-model="block.metadata.config.items[index].tabHeader"
                         :rules="$Validation.getRule('shortInput')"
                         :counter="$Validation.getLimit('shortInput')"
                         :label="'item ' + (index + 1)"
                         :disabled="render"
                     ></v-text-field>
-                    <v-btn
-                        @click="onToggleExpand(index)"
-                        text
-                        elevation="0"
-                        class="mb-3"
-                        :disabled="render"
-                    >
-                        <v-icon
-                            v-if="!block.metadata.config.items[index].expand"
-                            color="primary"
-                            >mdi-arrow-expand-all</v-icon
-                        >
-                        <v-icon
-                            v-if="block.metadata.config.items[index].expand"
-                            color="primary"
-                        >
-                            mdi-arrow-collapse-all
-                        </v-icon>
-                    </v-btn>
                     <TextEditor
-                        v-model="block.metadata.config.items[index].content"
-                        v-if="!item.expand"
                         :key="textEditorUpdateKey"
+                        v-model="block.metadata.config.items[index].content"
                         :disabled="render"
-                    ></TextEditor>
+                        show-glossary
+                        :hide-text-editor="item.expand"
+                    >
+                        <template #glossary-actions-append>
+                            <v-btn
+                                text
+                                elevation="0"
+                                class="mb-3"
+                                :disabled="render"
+                                @click="onToggleExpand(index)"
+                            >
+                                <v-icon
+                                    v-if="
+                                        !block.metadata.config.items[index]
+                                            .expand
+                                    "
+                                    color="primary"
+                                    >mdi-arrow-expand-all</v-icon
+                                >
+                                <v-icon
+                                    v-if="
+                                        block.metadata.config.items[index]
+                                            .expand
+                                    "
+                                    color="primary"
+                                >
+                                    mdi-arrow-collapse-all
+                                </v-icon>
+                            </v-btn>
+                        </template>
+                    </TextEditor>
 
                     <v-card class="mt-2">
                         <v-card-text class="pa-0">

package/components/Settings/TextEditorSettings.vue

@@ -1,61 +1,15 @@
 <template>
     <div>
-        <br />
-        <v-card elevation="0">
-            <v-btn-toggle v-model="settingSelector" multiple borderless>
-                <v-tooltip top>
-                    <template #activator="{ on, attrs }">
-                        <v-btn
-                            elevation="0"
-                            v-bind="attrs"
-                            text
-                            :disabled="render"
-                            v-on="on"
-                        >
-                            <v-icon>mdi-comment-text-multiple</v-icon>
-                            {{
-                                $t(
-                                    'windward.core.components.settings.text_editor.glossary'
-                                )
-                            }}
-                        </v-btn>
-                    </template>
-                    <span>
-                        {{
-                            $t(
-                                'windward.core.components.settings.text_editor.click_to_hide_glossary'
-                            )
-                        }}</span
-                    >
-                </v-tooltip>
-
+        <TextEditor
+            v-model="block.body"
+            autofill
+            :disabled="render"
+            allow-read
+            show-glossary
+            :hide-text-editor="hideTextEditor"
+        >
+            <template #glossary-actions-append>
                 <v-tooltip top>
-                    <template #activator="{ on, attrs }">
-                        <v-btn
-                            elevation="0"
-                            v-bind="attrs"
-                            text
-                            :disabled="render"
-                            v-on="on"
-                        >
-                            <v-icon> mdi-text-long</v-icon>
-                            {{
-                                $t(
-                                    'windward.core.components.settings.text_editor.text_editor'
-                                )
-                            }}
-                        </v-btn>
-                    </template>
-                    <span>
-                        {{
-                            $t(
-                                'windward.core.components.settings.text_editor.click_to_hide_editor'
-                            )
-                        }}</span
-                    >
-                </v-tooltip>
-
-                <v-tooltip v-if="settingSelector.includes(1)" top>
                     <template #activator="{ on, attrs }">
                         <v-btn
                             v-bind="attrs"
@@ -63,10 +17,7 @@
                             text
                             :disabled="render"
                             v-on="on"
-                            @click="
-                                block.metadata.config.expand =
-                                    !block.metadata.config.expand
-                            "
+                            @click="onExpand"
                         >
                             <v-icon
                                 v-if="!block.metadata.config.expand"
@@ -89,129 +40,23 @@
                         }}</span
                     >
                 </v-tooltip>
-            </v-btn-toggle>
-            <br />
-        </v-card>
-        <div v-show="settingSelector.includes(0)" class="pt-4">
-            <br />
-            <v-card v-if="verifiedTerms.length > 0" elevation="0" outlined>
-                <v-card-title outlined class="text-capitalize">
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.verified_terms'
-                        )
-                    }}
-                </v-card-title>
-                <v-card-text>
-                    <v-chip
-                        v-for="(verified, index) in verifiedTerms"
-                        :key="index"
-                        class="ma-2"
-                        close
-                        color="success"
-                        close-icon="mdi-pencil"
-                        :disabled="render"
-                        @click:close="editTerm(verified)"
-                    >
-                        <ContentViewer v-model="verified.term"></ContentViewer>
-                    </v-chip>
-                </v-card-text>
-            </v-card>
-            <v-card v-if="unVerifiedTerms.length > 0" elevation="0" outlined>
-                <v-card-title outlined class="text-capitalize">
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.unverified_terms'
-                        )
-                    }}
-                </v-card-title>
-                <v-card-text>
-                    <v-chip
-                        v-for="(unVerified, index) in unVerifiedTerms"
-                        :key="index"
-                        class="ma-2"
-                        close
-                        color="error"
-                        close-icon="mdi-content-save-plus-outline"
-                        :disabled="render"
-                        @click:close="addGlossaryTerm(unVerified)"
-                    >
-                        <ContentViewer
-                            v-model="unVerified.term"
-                        ></ContentViewer>
-                    </v-chip>
-                </v-card-text>
-            </v-card>
-            <v-card
-                v-if="
-                    verifiedTerms.length === 0 && unVerifiedTerms.length === 0
-                "
-                elevation="0"
-                outlined
-                ><v-card-text class="text-capitalize font-weight-bold">
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.no_glossary'
-                        )
-                    }}
-                </v-card-text></v-card
-            >
-        </div>
-        <br />
-        <TextEditor
-            v-if="settingSelector.includes(1) && !block.metadata.config.expand"
-            v-model="block.body"
-            autofill
-            :disabled="render"
-            allow-read
-        ></TextEditor>
+            </template>
+        </TextEditor>
         <v-skeleton-loader
             v-show="settingSelector.includes(1) && block.metadata.config.expand"
             v-bind="attrs"
             type=" table-row-divider, list-item, divider, list-item, divider, image,image"
         ></v-skeleton-loader>
-        <DialogBox
-            v-model="dialog"
-            color="primary"
-            max-width="600px"
-            action-save
-            :trigger="false"
-            :disabled="render"
-            @click:save="save"
-            @click:outside="close"
-            @click:close="close"
-            @keydown.esc="close"
-        >
-            <template #title> {{ formTitle }} </template>
-            <template #form="{ on, attrs }">
-                <course-glossary-form
-                    v-model="selectedTerm"
-                    :glossary="glossary"
-                    :edit-mode="glossaryEdit"
-                    v-bind="attrs"
-                    v-on="on"
-                />
-            </template>
-        </DialogBox>
     </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
-import GlossaryHelper from '../../helpers/GlossaryHelper'
-import CourseGlossaryForm from '../utils/glossary/CourseGlossaryForm.vue'
-import ContentViewer from '../utils/ContentViewer.vue'
-import DialogBox from '~/components/Core/DialogBox.vue'
-import Course from '~/models/Course'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
 export default {
     name: 'TextEditorSettings',
     components: {
-        DialogBox,
         TextEditor,
-        CourseGlossaryForm,
-        ContentViewer,
     },
     extends: BaseContentSettings,
     data() {
@@ -226,90 +71,16 @@ export default {
                 boilerplate: true,
                 elevation: 0,
             },
+            hideTextEditor: false,
         }
     },
-    computed: {
-        ...mapGetters({
-            course: 'course/get',
-        }),
-        ...mapMutations({
-            saveCourse: 'course/set',
-        }),
-        glossary() {
-            return _.isObject(this.course.metadata) &&
-                _.isArray(this.course.metadata.glossary)
-                ? this.course.metadata.glossary
-                : []
-        },
-        verifiedTerms() {
-            return GlossaryHelper.getContentVerifiedGlossaryTerms(
-                this.block.body,
-                this.glossary
-            )
-        },
-        unVerifiedTerms() {
-            return GlossaryHelper.getContentUnVerifiedGlossaryTerms(
-                this.block.body,
-                this.glossary
-            )
-        },
-    },
     mounted() {
         this.setConfig({ expand: false })
     },
     methods: {
-        async save() {
-            const currentGlossary = _.cloneDeep(this.glossary)
-            let currentItemIndex = -1
-            currentGlossary.filter((item, index) => {
-                if (item.term === this.selectedTerm.term) {
-                    currentItemIndex = index
-                    return item
-                }
-            })
-            if (currentItemIndex > -1) {
-                currentGlossary[currentItemIndex] = this.selectedTerm
-            } else {
-                currentGlossary.push(this.selectedTerm)
-            }
-            const course = new Course(this.course)
-
-            // If the course metadata is empty then init it
-            if (_.isEmpty(course.metadata)) {
-                course.metadata = {}
-                course.metadata.glossary = {}
-            }
-
-            // Set the updated glossary
-            course.metadata.glossary = currentGlossary
-
-            const updatedCourse = await course.save()
-            this.$store.commit('course/set', updatedCourse)
-            this.$toast.success(this.$t('shared.forms.saved'))
-        },
-        editTerm(term) {
-            this.selectedTerm = term
-
-            this.formTitle =
-                this.$t('shared.forms.edit') +
-                ' ' +
-                this.$t('pages.glossary.page_glossary.term')
-            this.glossaryEdit = true
-            this.dialog = true
-        },
-        addGlossaryTerm(term) {
-            this.selectedTerm = term
-
-            this.formTitle =
-                this.$t('shared.forms.add') +
-                ' ' +
-                this.$t('pages.glossary.page_glossary.term')
-            this.glossaryEdit = false
-            this.dialog = true
-        },
-        close() {
-            this.glossaryEdit = false
-            this.dialog = false
+        onExpand() {
+            this.hideTextEditor = !this.hideTextEditor
+            this.block.metadata.config.expand = this.hideTextEditor
         },
     },
 }

package/components/Settings/VideoSettings.vue

@@ -412,7 +412,7 @@ export default {
     data() {
         return {
             fileTab: null,
-            playbackRateOptions: [0.25, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4],
+            playbackRateOptions: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
             playlistPaginator: 1,
             media: {
                 source: null,

package/components/utils/ContentViewer.vue

@@ -27,6 +27,7 @@ export default {
     computed: {
         ...mapGetters({
             course: 'course/get',
+            glossaryTerms: 'glossary/getTerms',
         }),
         convertedContent() {
             let content = ''
@@ -45,12 +46,11 @@ export default {
                 }
                 if (
                     GlossaryHelper.containsGlossaryTerms(content) &&
-                    _.isObject(this.course.metadata) &&
-                    _.isArray(this.course.metadata.glossary)
+                    this.glossaryTerms
                 ) {
                     content = GlossaryHelper.renderGlossaryWordsHtml(
                         content,
-                        this.course.metadata.glossary
+                        this.glossaryTerms
                     )
                 }
 

package/components/utils/TinyMCEWrapper.vue

@@ -1,5 +1,14 @@
 <template>
     <div :class="'tinymce-included-' + seed">
+        <GlossaryVerification
+            v-if="showGlossary"
+            :render="render"
+            :value="text"
+        >
+            <template #actions-append>
+                <slot name="glossary-actions-append"></slot>
+            </template>
+        </GlossaryVerification>
         <div
             :class="
                 'windward-tinymce-wrapper windward-tinymce-wrapper' +
@@ -11,8 +20,9 @@
                 <label v-if="label" class="editor-label">{{ label }}</label>
             </slot>
             <Editor
-                ref="editor"
+                v-if="!render && !hideTextEditor"
                 :id="editorId"
+                ref="editor"
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
                 initial-value=""
@@ -26,28 +36,22 @@
                 <label v-if="hint" class="editor-hint">{{ hint }}</label>
             </slot>
         </div>
-
         <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
             <slot name="actions-prepend" :render="render"></slot>
             <slot name="actions" :render="render">
-                <v-btn-toggle v-if="allowRead" dense>
-                    <v-btn v-if="render" color="primary" outlined @click="read">
+                <v-btn-toggle v-if="allowRead && !render" dense>
+                    <v-btn color="primary" outlined @click="read">
                         <v-icon> mdi-play</v-icon>
                     </v-btn>
-                    <v-btn
-                        v-if="render"
-                        color="primary"
-                        outlined
-                        @click="pause"
-                    >
+                    <v-btn color="primary" outlined @click="pause">
                         <v-icon> mdi-pause</v-icon>
                     </v-btn>
-                    <v-btn v-if="render" color="primary" outlined @click="stop">
+                    <v-btn color="primary" outlined @click="stop">
                         <v-icon> mdi-stop</v-icon>
                     </v-btn>
                 </v-btn-toggle>
             </slot>
-            <slot name="actions-append" :render="render"></slot>
+            <slot name="actions-append"></slot>
         </v-btn-toggle>
     </div>
 </template>
@@ -57,7 +61,7 @@ import _ from 'lodash'
 import 'tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import { getTinymce } from '@tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE'
-
+import GlossaryVerification from '../Glossary/GlossaryVerification.vue'
 /* Required TinyMCE components */
 import 'tinymce/icons/default/icons.min.js'
 import 'tinymce/themes/silver/theme.min.js'
@@ -118,6 +122,7 @@ export default {
     name: 'ContentEditorRichText',
     components: {
         Editor,
+        GlossaryVerification,
     },
     props: {
         value: { type: String, required: true, default: '' },
@@ -140,10 +145,12 @@ export default {
         hint: { type: String, required: false, default: '' },
         inline: { type: Boolean, required: false, default: false },
         allowRead: { type: Boolean, required: false, default: false },
+        showGlossary: { type: Boolean, required: false, default: false },
+        render: { type: Boolean, required: false, default: false },
+        hideTextEditor: { type: Boolean, required: false, default: false },
     },
     data() {
         return {
-            render: true,
             text: '',
             seed: Crypto.id(),
             synthesizer: null,
@@ -245,6 +252,9 @@ export default {
                 },
                 font_size_formats:
                     '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
+                table_default_attributes: {
+                    border: '1',
+                },
                 table_class_list: [
                     { title: 'None', value: ' ' },
                     {