@windward/core 0.7.0 → 0.9.0

package/components/Settings/TabSettings.vue

@@ -2,21 +2,22 @@
     <div>
         <v-row class="pl-3 pr-3">
             <v-text-field
+                id="block-settings-title"
                 v-model="block.metadata.config.title"
                 :autofocus="true"
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('block.title')"
+                :counter="$Validation.getLimit('block.title')"
                 outlined
-                id="title"
                 :label="
                     $t('windward.core.components.settings.clickable_icon.title')
                 "
                 :disabled="render"
             ></v-text-field>
             <v-textarea
+                id="block-settings-instructions"
                 v-model="block.metadata.config.instructions"
-                :rules="validation.instructionRule"
-                :counter="255"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
                 outlined
                 :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
@@ -43,8 +44,8 @@
                         outlined
                         :autofocus="true"
                         v-model="block.metadata.config.items[index].tabHeader"
-                        :counter="50"
-                        :rules="validation.shortInputRules"
+                        :rules="$Validation.getRule('shortInput')"
+                        :counter="$Validation.getLimit('shortInput')"
                         :label="'item ' + (index + 1)"
                         :disabled="render"
                     ></v-text-field>
@@ -73,6 +74,19 @@
                         :key="textEditorUpdateKey"
                         :disabled="render"
                     ></TextEditor>
+
+                    <v-card class="mt-2">
+                        <v-card-text>
+                            <ImageAssetSettings
+                                v-model="
+                                    block.metadata.config.items[index]
+                                        .imageAsset
+                                "
+                                :assets.sync="block.assets"
+                            >
+                            </ImageAssetSettings>
+                        </v-card-text>
+                    </v-card>
                 </v-container>
             </template>
         </SortableExpansionPanel>
@@ -102,13 +116,14 @@
 import _, { get } from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'TabSettings',
-    components: { TextEditor, SortableExpansionPanel },
+    components: { TextEditor, ImageAssetSettings, SortableExpansionPanel },
     extends: BaseContentSettings,
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -145,6 +160,7 @@ export default {
                 tabHeader: '',
                 expand: false,
                 content: '',
+                imageAsset: null,
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -156,32 +172,6 @@ export default {
             textEditorUpdateKey: Crypto.id(),
             valid: true,
             loading: false,
-            validation: {
-                shortInputRules: [
-                    (v) => {
-                        if (v && v.length >= 50) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [50]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                instructionRule: [
-                    (v) => {
-                        if (v && v.length >= 255) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [255]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-            },
         }
     },
     mounted() {
@@ -200,6 +190,7 @@ export default {
                 tabHeader: '',
                 expand: false,
                 content: '',
+                imageAsset: null,
             }
             this.block.metadata.config.items.push(defaultObject)
             this.block.metadata.config.currentTab =

package/components/Settings/UserUploadSettings.vue

@@ -1,18 +1,20 @@
 <template>
     <div>
         <v-text-field
+            id="block-settings-title"
             v-model="block.metadata.config.title"
             outlined
-            :rules="validation.titleRules"
-            :counter="50"
+            :rules="$Validation.getRule('block.title')"
+            :counter="$Validation.getLimit('block.title')"
             :autofocus="true"
             :label="$t('components.content.settings.base.title')"
             :disabled="render"
         ></v-text-field>
         <v-textarea
+            id="block-settings-instructions"
             v-model="block.metadata.config.instructions"
-            :rules="validation.instructionRule"
-            :counter="255"
+            :rules="$Validation.getRule('block.instructions')"
+            :counter="$Validation.getLimit('block.instructions')"
             outlined
             :label="$t('components.content.settings.base.instructions')"
             :disabled="render"
@@ -129,32 +131,6 @@ export default {
                 boilerplate: true,
                 elevation: 0,
             },
-            validation: {
-                titleRules: [
-                    (v) => {
-                        if (v && v.length >= 50) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [50]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                instructionRule: [
-                    (v) => {
-                        if (v && v.length >= 255) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [255]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-            },
         }
     },
     mounted() {},

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -84,6 +84,7 @@
             :assets="assets"
             mimes="text/vtt,text/xml"
             allow-url
+            outlined
             class="mb-4"
             :disabled="disabled || sourceInherit || !source"
             @input="$emit('update:track', $event)"

package/components/Settings/VideoSettings.vue

@@ -3,19 +3,21 @@
         <v-row>
             <v-col cols="12">
                 <v-text-field
+                    id="block-settings-title"
                     v-model="block.metadata.config.title"
-                    :counter="50"
+                    :rules="$Validation.getRule('block.title')"
+                    :counter="$Validation.getLimit('block.title')"
                     outlined
-                    :rules="validation.shortInputRules"
                     :label="$t('windward.core.components.settings.video.title')"
                     :disabled="render"
                 ></v-text-field>
                 <v-textarea
+                    id="block-settings-instructions"
                     v-model="block.metadata.config.description"
                     outlined
                     auto-grow
-                    :rules="validation.instructionRule"
-                    :counter="255"
+                    :rules="$Validation.getRule('block.instructions')"
+                    :counter="$Validation.getLimit('block.instructions')"
                     :label="
                         $t(
                             'components.content.settings.base.description_optional'
@@ -426,44 +428,6 @@ export default {
                     },
                 },
             },
-            validation: {
-                shortInputRules: [
-                    (v) => {
-                        if (v && v.length >= 50) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [50]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                instructionRule: [
-                    (v) => {
-                        if (v && v.length >= 255) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [255]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                clueRule: [
-                    (v) => {
-                        if (v && v.length >= 155) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [155]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-            },
             showPreRoll: false,
             showPostRoll: false,
         }

package/components/utils/ContentViewer.vue

@@ -62,9 +62,6 @@ export default {
 </script>
 
 <style lang="scss">
-.text-viewer {
-    min-height: 50px !important;
-}
 .text-viewer table tr td {
     padding: 10px !important;
 }

package/components/utils/FillInBlank/FillInBlankInput.vue

@@ -2,30 +2,24 @@
     <span class="fib">
         <v-dialog v-model="show" max-width="300">
             <v-card>
-                <v-card-title class="text-h5">
-                    {{
-                        answerIsCorrect
-                            ? $t(
-                                  'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.correct'
-                              )
-                            : $t(
-                                  'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.incorrect'
-                              )
-                    }}
-                </v-card-title>
-                <v-card-text>
-                    <div v-if="answerIsCorrect || showAnswer">
+                <v-card-text class="pt-6">
+                    <div>
                         <p>
-                            <ContentViewer v-model="computedDescription" />
+                            {{
+                                $t(
+                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.user_input',
+                                    [userInput]
+                                )
+                            }}
+                        </p>
+                        <p class="pb-0 mb-0">
+                            {{
+                                $t(
+                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.correct_answer',
+                                    [answer]
+                                )
+                            }}
                         </p>
-                    </div>
-                    <div v-else-if="!answerIsCorrect && userInput">
-                        {{
-                            $t(
-                                'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.input_incorrect',
-                                [userInput]
-                            )
-                        }}
                     </div>
                 </v-card-text>
                 <v-card-actions>
@@ -37,31 +31,14 @@
                                 elevation="0"
                                 outlined
                                 @click="show = false"
-                            >
-                                {{
-                                    answerIsCorrect
-                                        ? $t(
-                                              'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.close'
-                                          )
-                                        : $t(
-                                              'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.try_again'
-                                          )
-                                }}
-                            </v-btn>
-                            <v-btn
-                                color="primary"
-                                outlined
-                                elevation="0"
-                                @click="displayAnswer"
-                                v-if="!answerIsCorrect"
                             >
                                 {{
                                     $t(
-                                        'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.answer'
+                                        'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.close'
                                     )
                                 }}
-                            </v-btn></v-row
-                        >
+                            </v-btn>
+                        </v-row>
                     </v-container>
                 </v-card-actions>
             </v-card>
@@ -142,8 +119,16 @@ export default {
     computed: {
         answerIsCorrect() {
             if (
-                _.replace(_.trim(_.toLower(this.answer)),new RegExp(' ','g'), '', ) ===
-                _.replace(_.trim(_.toLower(this.userInput)),new RegExp(' ','g'), '', )
+                _.replace(
+                    _.trim(_.toLower(this.answer)),
+                    new RegExp(' ', 'g'),
+                    ''
+                ) ===
+                _.replace(
+                    _.trim(_.toLower(this.userInput)),
+                    new RegExp(' ', 'g'),
+                    ''
+                )
             ) {
                 return true
             }
@@ -158,9 +143,6 @@ export default {
             }
             return ''
         },
-        computedDescription() {
-            return atob(this.description)
-        },
     },
     methods: {
         setFocusAction() {

package/components/utils/TinyMCEWrapper.vue

@@ -7,8 +7,9 @@
             "
             :data-cy="dataCy"
         >
-            <label v-if="label" class="editor-label">{{ label }}</label>
-
+            <slot name="label" :render="render">
+                <label v-if="label" class="editor-label">{{ label }}</label>
+            </slot>
             <Editor
                 :id="id"
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
@@ -17,22 +18,18 @@
                 :init="config"
                 tag-name="div"
                 model-events="change keydown blur focus mouseDown paste input submit SetContent"
-                @onfocus="onEditorFocus"
-                v-click-outside="{
-                    handler: onClickOutside,
-                    closeConditional,
-                    include,
-                }"
             >
             </Editor>
 
-            <label v-if="hint" class="editor-hint">{{ hint }}</label>
+            <slot name="hint" :render="render">
+                <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 dense v-if="allowRead">
+                <v-btn-toggle v-if="allowRead" dense>
                     <v-btn v-if="render" color="primary" outlined @click="read">
                         <v-icon> mdi-play</v-icon>
                     </v-btn>
@@ -48,19 +45,6 @@
                         <v-icon> mdi-stop</v-icon>
                     </v-btn>
                 </v-btn-toggle>
-
-                <v-btn
-                    v-if="render && !inline"
-                    color="primary"
-                    elevation="0"
-                    outlined
-                    @click="onClickOutside"
-                    >{{
-                        $t(
-                            'windward.core.components.utils.tiny_mce_wrapper.minimize'
-                        )
-                    }}
-                </v-btn>
             </slot>
             <slot name="actions-append" :render="render"></slot>
         </v-btn-toggle>
@@ -121,12 +105,14 @@ import 'tinymce/skins/ui/oxide-dark/content.js'
 import 'tinymce/skins/content/default/content.js'
 import 'tinymce/skins/content/dark/content.js'
 
+import { Synthesizer } from 'speechreader'
+import Crypto from '~/helpers/Crypto'
+import MathHelper from '../../helpers/MathHelper'
 import { WindwardPlugins } from '../../helpers/tinymce/WindwardPlugins'
+
 import ContentCss from '!raw-loader!sass-loader!./assets/tinymce/content/global.scss'
 import EditorCss from '!raw-loader!sass-loader!./assets/tinymce/ui/global.scss'
-import Crypto from '~/helpers/Crypto'
-import MathHelper from '../../helpers/MathHelper'
-import { Synthesizer } from 'speechreader'
+
 export default {
     name: 'ContentEditorRichText',
     components: {
@@ -147,19 +133,12 @@ export default {
             default:
                 'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table tablerowprops tablecellprops |bullist numlist outdent indent |glossaryButton fibFormatButton mathButton a11yButton',
         },
-        root_block: { type: String, required: false, default: 'div' },
+        rootBlock: { type: String, required: false, default: 'div' },
         label: { type: String, required: false, default: '' },
         hint: { type: String, required: false, default: '' },
         inline: { type: Boolean, required: false, default: false },
         allowRead: { type: Boolean, required: false, default: false },
     },
-    beforeMount() {
-        if (MathHelper.containsLatex(this.value)) {
-            this.text = MathHelper.wrapMathContentForTinyMCE(this.value)
-        } else {
-            this.text = this.value
-        }
-    },
     data() {
         return {
             render: false,
@@ -169,11 +148,7 @@ export default {
             paused: false,
         }
     },
-    watch: {
-        text: function (newVal) {
-            this.$emit('input', this.text)
-        },
-    },
+
     computed: {
         dataCy() {
             return (
@@ -186,36 +161,12 @@ export default {
         isDarkTheme() {
             return this.$vuetify.theme.isDark
         },
-        filteredMenubar() {
-            if (this.render) {
-                return this.menubar
-            } else {
-                return ''
-            }
-        },
-        filteredToolbar() {
-            if (this.render) {
-                return this.toolbar
-            } else {
-                return ''
-            }
-        },
-        filteredHeight() {
-            if (!this.render) {
-                return 100
-            } else if (this.height !== null) {
-                return this.height
-            } else {
-                return 500
-            }
-        },
         config() {
             return {
                 draggable_modal: true,
-                height: this.filteredHeight,
                 visual: false,
-                forced_root_block: this.root_block,
-                menubar: this.filteredMenubar,
+                forced_root_block: this.rootBlock,
+                menubar: this.menubar,
                 toolbar_mode: 'sliding',
                 browser_spellcheck: true,
                 contextmenu: false,
@@ -241,7 +192,11 @@ export default {
                         items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | language | removeformat',
                     },
                 },
+                autoresize_min_height: 100,
+                autoresize_max_height: 1000,
+                autoresize_bottom_margin: 0,
                 plugins: [
+                    'autoresize',
                     'advlist',
                     'autolink',
                     'lists',
@@ -257,8 +212,13 @@ export default {
                     'wordcount',
                     'table',
                     'WindwardToolKit',
+                    'help',
                 ],
-                toolbar: this.filteredToolbar,
+                help_accessibility: true,
+                iframe_aria_text: this.$t(
+                    'windward.core.components.utils.tiny_mce_wrapper.aria_text'
+                ),
+                toolbar: this.toolbar,
                 inline: this.inline,
                 table_advtab: false,
                 table_cell_advtab: false,
@@ -349,7 +309,6 @@ export default {
                         }
                     )
                 },
-
                 formats: {
                     glossary: {
                         inline: 'span',
@@ -477,6 +436,21 @@ export default {
             return []
         },
     },
+
+    watch: {
+        text: function (_newVal) {
+            this.$emit('input', this.text)
+        },
+    },
+
+    beforeMount() {
+        if (MathHelper.containsLatex(this.value)) {
+            this.text = MathHelper.wrapMathContentForTinyMCE(this.value)
+        } else {
+            this.text = this.value
+        }
+    },
+
     methods: {
         read() {
             if (this.paused) {
@@ -507,18 +481,6 @@ export default {
                 this.paused = false
             }
         },
-        onEditorFocus() {
-            if (!this.render) {
-                this.seed = Crypto.id()
-                this.render = true
-            }
-        },
-        onClickOutside() {
-            if (this.render) {
-                this.seed = Crypto.id()
-                this.render = false
-            }
-        },
         include() {
             // vuetify function to include an element with this class into clickable area without close
             return this.elementBody
@@ -527,7 +489,7 @@ export default {
         closeConditional(e) {
             const targetClass = e.target.className
             let parentNode
-            //check if target is svg element
+            // check if target is svg element
             if (e.target.matches('svg') || e.target instanceof SVGElement) {
                 parentNode = e.target.parentNode.parentNode
             } else {
@@ -543,7 +505,6 @@ export default {
             ) {
                 return false
             } else {
-                this.onClickOutside()
                 return true
             }
         },

package/components/utils/glossary/GlossaryToolTip.vue

@@ -1,6 +1,7 @@
 <template>
     <div
         class="glossary-word"
+        :class="{ active: show }"
         v-click-outside="onClickOutside"
         @click="show = !show"
     >
@@ -19,6 +20,7 @@
             <div>
                 <div v-if="this.$slots['definition']">
                     <h6 class="text-capitalize">
+                        <slot name="term"></slot>
                         {{
                             $t(
                                 'windward.core.components.utils.tiny_mce_wrapper.definition'
@@ -32,6 +34,7 @@
                 </div>
                 <div v-if="this.$slots['alternate_forms']">
                     <h4 class="text-capitalize">
+                        <slot name="term"></slot>
                         {{
                             $t(
                                 'windward.core.components.utils.tiny_mce_wrapper.alternate_forms'
@@ -84,4 +87,7 @@ export default {
     font-weight: bold;
     color: var(--v-dark-text-base);
 }
+.active {
+    background: var(--v-secondary-base) !important;
+}
 </style>