@windward/core 0.8.0 → 0.9.1

package/components/Settings/ImageSettings.vue

@@ -1,176 +1,10 @@
 <template>
     <v-container>
-        <ContentBlockAsset
-            mimes="image/jpeg,image/png,image/gif"
-            v-model="block.metadata.config.asset"
-            class="mb-4"
-            :label="
-                $t(
-                    'windward.core.components.settings.image.current_image_file'
-                ) + ':'
-            "
-            :disabled="render"
+        <ImageAssetSettings
+            v-model="block.metadata.config"
             :assets.sync="block.assets"
-            @click:file="onFileSelect"
         >
-            <template #title>
-                {{ $t('windward.core.components.settings.image.place_image') }}
-            </template>
-        </ContentBlockAsset>
-
-        <v-switch
-            v-model="block.metadata.config.hideBackground"
-            :label="
-                $t('windward.core.components.settings.image.hide_background')
-            "
-            :disabled="render"
-        ></v-switch>
-        <v-switch
-            v-model="block.metadata.config.modal"
-            :label="$t('windward.core.components.settings.image.modal')"
-            :disabled="render"
-        ></v-switch>
-        <v-tooltip top color="primary">
-            <template #activator="{ on, attrs }">
-                <v-switch
-                    v-model="block.metadata.config.decorative"
-                    :disabled="render"
-                    @change="onDecorativeToggled($event)"
-                >
-                    <template #label>
-                        <span v-bind="attrs" v-on="on">
-                            {{
-                                $t(
-                                    'windward.core.components.settings.image.decorative'
-                                )
-                            }}
-                            <v-icon x-small class="help-offset-icon">
-                                mdi-help
-                            </v-icon>
-                        </span>
-                    </template>
-                </v-switch>
-            </template>
-            <span class="span-description">{{
-                $t(
-                    'windward.core.components.settings.image.decorative_toggle_description'
-                )
-            }}</span>
-        </v-tooltip>
-
-        <v-form v-if="!block.metadata.config.decorative">
-            <v-tooltip top color="primary">
-                <template #activator="{ on, attrs }">
-                    <v-switch
-                        v-model="block.metadata.config.inherit"
-                        :disabled="render"
-                    >
-                        <template #label>
-                            <span v-bind="attrs" v-on="on">
-                                {{
-                                    $t(
-                                        'windward.core.components.settings.image.inherit'
-                                    )
-                                }}
-                                <v-icon x-small class="help-offset-icon">
-                                    mdi-help
-                                </v-icon>
-                            </span>
-                        </template>
-                    </v-switch>
-                </template>
-                <span class="span-description">{{
-                    $t(
-                        'windward.core.components.settings.image.inherit_global_toggle_description'
-                    )
-                }}</span>
-            </v-tooltip>
-
-            <v-alert
-                v-if="block.metadata.config.inherit && !assetAltText"
-                type="warning"
-            >
-                {{
-                    $t('windward.core.components.settings.image.inherit_no_alt')
-                }}
-            </v-alert>
-
-            <v-text-field
-                v-if="block.metadata.config.inherit && assetAltText"
-                :value="assetAltText"
-                :label="
-                    $t('windward.core.components.navigation.image.default_alt')
-                "
-                outlined
-                counter
-                maxlength="125"
-                :rules="$Validation.getRule('exists')"
-                disabled
-            >
-            </v-text-field>
-
-            <v-text-field
-                v-if="!block.metadata.config.inherit"
-                v-model="block.metadata.config.alt"
-                outlined
-                counter
-                maxlength="125"
-                :label="
-                    $t('windward.core.components.navigation.image.default_alt')
-                "
-                :rules="$Validation.getRule('exists')"
-                :disabled="render"
-            >
-                <template #append>
-                    <v-tooltip top color="primary">
-                        <template #activator="{ on }">
-                            <v-icon v-on="on" small>mdi-help</v-icon>
-                        </template>
-                        <span class="span-description">{{
-                            $t(
-                                'windward.core.components.settings.image.alt_description'
-                            )
-                        }}</span>
-                    </v-tooltip>
-                </template>
-            </v-text-field>
-            <h5 class="pb-2">
-                {{ $t('windward.core.components.settings.image.screenreader') }}
-                <v-tooltip top color="primary">
-                    <template #activator="{ on }">
-                        <v-icon v-on="on" small class="help-offset-icon">
-                            mdi-help
-                        </v-icon>
-                    </template>
-                    <span class="span-description">{{
-                        $t(
-                            'windward.core.components.settings.image.screenreader_description'
-                        )
-                    }}</span>
-                </v-tooltip>
-            </h5>
-            <TextEditor
-                v-if="!block.metadata.config.inherit"
-                v-model="block.metadata.config.ariaDescribedBy"
-                menubar="bullist numlist"
-                :disabled="render"
-            ></TextEditor>
-
-            <div v-if="block.metadata.config.inherit">
-                <v-card v-if="assetDescribedByText">
-                    <v-card-text>
-                        <TextViewer v-model="assetDescribedByText"></TextViewer>
-                    </v-card-text>
-                </v-card>
-                <v-alert v-if="!assetDescribedByText" type="warning">
-                    {{
-                        $t(
-                            'windward.core.components.settings.image.inherit_no_aria'
-                        )
-                    }}
-                </v-alert>
-            </div>
-        </v-form>
+        </ImageAssetSettings>
     </v-container>
 </template>
 
@@ -180,35 +14,22 @@ import TextEditor from '~/components/Text/TextEditor'
 import TextViewer from '~/components/Text/TextViewer'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
     name: 'ImageSettings',
     extends: BaseContentSettings,
-    components: { ContentBlockAsset, TextEditor, TextViewer },
+    components: {
+        ImageAssetSettings,
+        ContentBlockAsset,
+        TextEditor,
+        TextViewer,
+    },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },
     },
-    computed: {
-        assetAltText() {
-            // Get the block aria info and fallback to the asset metadata
-            return _.get(this.fileAsset, 'metadata.props.alt', null)
-        },
-        assetDescribedByText() {
-            // Get the block aria info and fallback to the asset metadata
-            return _.get(
-                this.fileAsset,
-                'metadata.props.aria_describedby',
-                null
-            )
-        },
-        fileAsset() {
-            return _.get(this.block, 'assets[0].asset', null)
-        },
-        fileAssetMap() {
-            return _.get(this.block, 'metadata.config.asset', null)
-        },
-    },
+    computed: {},
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -249,55 +70,6 @@ export default {
     },
     watch: {},
     mounted() {},
-    methods: {
-        onDecorativeToggled(evt) {
-            if (evt) {
-                this.block.metadata.config.ariaDescribedBy = ''
-                this.block.metadata.config.alt = ''
-            }
-        },
-        onFileSelect(file) {
-            // Clear out the body since we're defining a proper file link now
-            this.block.body = ''
-
-            // file = null when you remove a file
-            if (_.isEmpty(file)) {
-                this.block.assets = []
-            } else {
-                this.block.assets = [file]
-
-                //Assign height and width for skeleton loader
-                if (!_.isEmpty(file.asset.metadata.props)) {
-                    this.block.metadata.config.height =
-                        file.asset.metadata.props['height']
-                    this.block.metadata.config.width =
-                        file.asset.metadata.props['width']
-                }
-                // Assign any alt text from the filemanager file
-                this.block.metadata.config.alt = _.get(
-                    file,
-                    'asset.metadata.props.alt',
-                    ''
-                )
-
-                this.block.metadata.config.ariaDescribedBy = _.get(
-                    file,
-                    'asset.metadata.props.aria_describedby',
-                    ''
-                )
-            }
-        },
-    },
+    methods: {},
 }
 </script>
-<style>
-.span-description {
-    display: flex;
-    justify-content: center;
-    width: 200px;
-}
-.help-offset-icon {
-    position: relative;
-    top: -8px;
-}
-</style>

package/components/Settings/TabSettings.vue

@@ -74,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>
@@ -103,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)) {
@@ -146,6 +160,7 @@ export default {
                 tabHeader: '',
                 expand: false,
                 content: '',
+                imageAsset: null,
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -175,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/TextEditorSettings.vue

@@ -8,9 +8,9 @@
                         <v-btn
                             elevation="0"
                             v-bind="attrs"
-                            v-on="on"
                             text
                             :disabled="render"
+                            v-on="on"
                         >
                             <v-icon>mdi-comment-text-multiple</v-icon>
                             {{
@@ -34,9 +34,9 @@
                         <v-btn
                             elevation="0"
                             v-bind="attrs"
-                            v-on="on"
                             text
                             :disabled="render"
+                            v-on="on"
                         >
                             <v-icon> mdi-text-long</v-icon>
                             {{
@@ -55,14 +55,14 @@
                     >
                 </v-tooltip>
 
-                <v-tooltip top v-if="settingSelector.includes(1)">
+                <v-tooltip v-if="settingSelector.includes(1)" top>
                     <template #activator="{ on, attrs }">
                         <v-btn
                             v-bind="attrs"
-                            v-on="on"
                             elevation="0"
                             text
                             :disabled="render"
+                            v-on="on"
                             @click="
                                 block.metadata.config.expand =
                                     !block.metadata.config.expand
@@ -94,7 +94,7 @@
         </v-card>
         <div v-show="settingSelector.includes(0)" class="pt-4">
             <br />
-            <v-card elevation="0" outlined v-if="verifiedTerms.length > 0">
+            <v-card v-if="verifiedTerms.length > 0" elevation="0" outlined>
                 <v-card-title outlined class="text-capitalize">
                     {{
                         $t(
@@ -113,11 +113,11 @@
                         :disabled="render"
                         @click:close="editTerm(verified)"
                     >
-                        {{ verified.term }}
+                        <TextViewer v-model="verified.term"></TextViewer>
                     </v-chip>
                 </v-card-text>
             </v-card>
-            <v-card elevation="0" outlined v-if="unVerifiedTerms.length > 0">
+            <v-card v-if="unVerifiedTerms.length > 0" elevation="0" outlined>
                 <v-card-title outlined class="text-capitalize">
                     {{
                         $t(
@@ -136,16 +136,16 @@
                         :disabled="render"
                         @click:close="addGlossaryTerm(unVerified)"
                     >
-                        {{ unVerified.term }}
+                        <TextViewer v-model="unVerified.term"></TextViewer>
                     </v-chip>
                 </v-card-text>
             </v-card>
             <v-card
-                elevation="0"
-                outlined
                 v-if="
                     verifiedTerms.length === 0 && unVerifiedTerms.length === 0
                 "
+                elevation="0"
+                outlined
                 ><v-card-text class="text-capitalize font-weight-bold">
                     {{
                         $t(
@@ -164,9 +164,9 @@
             allow-read
         ></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-show="settingSelector.includes(1) && block.metadata.config.expand"
         ></v-skeleton-loader>
         <DialogBox
             v-model="dialog"
@@ -196,20 +196,22 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import DialogBox from '~/components/Core/DialogBox.vue'
 import GlossaryHelper from '../../helpers/GlossaryHelper'
+import CourseGlossaryForm from '../utils/glossary/CourseGlossaryForm.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'
-import CourseGlossaryForm from '../utils/glossary/CourseGlossaryForm.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
 export default {
     name: 'TextEditorSettings',
-    extends: BaseContentSettings,
     components: {
         DialogBox,
         TextEditor,
         CourseGlossaryForm,
+        TextViewer,
     },
+    extends: BaseContentSettings,
     data() {
         return {
             dialog: false,
@@ -255,7 +257,7 @@ export default {
     },
     methods: {
         async save() {
-            let currentGlossary = _.cloneDeep(this.glossary)
+            const currentGlossary = _.cloneDeep(this.glossary)
             let currentItemIndex = -1
             currentGlossary.filter((item, index) => {
                 if (item.term === this.selectedTerm.term) {

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() {