@windward/core 0.2.3 → 0.4.0

package/components/Settings/ImageSettings.vue

@@ -2,8 +2,10 @@
     <v-container>
         <ContentBlockAsset
             mimes="image/jpeg,image/png,image/gif"
-            @click:file="onFileSelect"
+            v-model="block.metadata.config.asset"
             class="mb-4"
+            :disabled="render"
+            @click:file="onFileSelect"
         >
             <template #title>
                 {{ $t('windward.core.components.content.blocks.image.title') }}
@@ -18,39 +20,98 @@
         </ContentBlockAsset>
 
         <v-switch
-            v-model="block.metadata.config.hide_background"
+            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 v-slot:activator="{ on, attrs }">
-                <div v-bind="attrs" v-on="on" class="d-flex justify-content">
-                    <v-switch
-                        v-model="block.metadata.config.decorative"
-                        @change="onDecorativeToggled($event)"
-                        :label="
-                            $t(
-                                'windward.core.components.settings.image.decorative'
-                            )
-                        "
-                    ></v-switch>
-                    <div class="d-flex align-center pb-4">
-                        <v-icon x-small>mdi-help</v-icon>
-                    </div>
-                </div>
+            <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.toggle_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.textRules"
+                disabled
+            >
+            </v-text-field>
+
             <v-text-field
+                v-if="!block.metadata.config.inherit"
                 v-model="block.metadata.config.alt"
                 outlined
                 counter
@@ -59,10 +120,11 @@
                     $t('windward.core.components.navigation.image.default_alt')
                 "
                 :rules="validation.textRules"
+                :disabled="render"
             >
-                <template v-slot:append>
+                <template #append>
                     <v-tooltip top color="primary">
-                        <template v-slot:activator="{ on }">
+                        <template #activator="{ on }">
                             <v-icon v-on="on" small>mdi-help</v-icon>
                         </template>
                         <span class="span-description">{{
@@ -76,8 +138,10 @@
             <h5 class="pb-2">
                 {{ $t('windward.core.components.settings.image.screenreader') }}
                 <v-tooltip top color="primary">
-                    <template v-slot:activator="{ on }">
-                        <v-icon v-on="on" small class="pb-3">mdi-help</v-icon>
+                    <template #activator="{ on }">
+                        <v-icon v-on="on" small class="help-offset-icon">
+                            mdi-help
+                        </v-icon>
                     </template>
                     <span class="span-description">{{
                         $t(
@@ -87,9 +151,26 @@
                 </v-tooltip>
             </h5>
             <TextEditor
-                v-model="block.metadata.config.aria_describedby"
+                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>
     </v-container>
 </template>
@@ -97,17 +178,38 @@
 <script>
 import _ from 'lodash'
 import TextEditor from '~/components/Text/TextEditor'
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import TextViewer from '~/components/Text/TextViewer'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 
 export default {
     name: 'ImageSettings',
     extends: BaseContentSettings,
-    components: { ContentBlockAsset, TextEditor },
+    components: { 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)
+        },
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -121,11 +223,17 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.asset)) {
+            this.block.metadata.config.asset = null
+        }
         if (_.isEmpty(this.block.metadata.config.alt)) {
             this.block.metadata.config.alt = ''
         }
-        if (!_.isBoolean(this.block.metadata.config.hide_background)) {
-            this.block.metadata.config.hide_background = false
+        if (!_.isBoolean(this.block.metadata.config.hideBackground)) {
+            this.block.metadata.config.hideBackground = false
+        }
+        if (!_.isBoolean(this.block.metadata.config.inherit)) {
+            this.block.metadata.config.inherit = true
         }
         if (!_.isBoolean(this.block.metadata.config.modal)) {
             this.block.metadata.config.modal = false
@@ -133,18 +241,12 @@ export default {
         if (!_.isBoolean(this.block.metadata.config.decorative)) {
             this.block.metadata.config.decorative = false
         }
-        if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
-            this.block.metadata.config.aria_describedby = ''
+        if (_.isEmpty(this.block.metadata.config.ariaDescribedBy)) {
+            this.block.metadata.config.ariaDescribedBy = ''
         }
     },
     data() {
         return {
-            imageSettings: {
-                // Default values
-                alt_text: '',
-                aria_described: '',
-                release_results: 'submitted',
-            },
             validation: {
                 textRules: [
                     (v) => !!v || this.$t('shared.forms.errors.required'),
@@ -157,16 +259,19 @@ export default {
     methods: {
         onDecorativeToggled(evt) {
             if (evt) {
-                this.block.metadata.config.aria_describedby = ''
+                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.body = ''
+                this.block.assets = []
             } else {
-                this.block.body = file.asset.public_url
+                this.block.assets = [file]
 
                 //Assign height and width for skeleton loader
                 if (!_.isEmpty(file.asset.metadata.props)) {
@@ -182,7 +287,7 @@ export default {
                     ''
                 )
 
-                this.block.metadata.config.aria_describedby = _.get(
+                this.block.metadata.config.ariaDescribedBy = _.get(
                     file,
                     'asset.metadata.props.aria_describedby',
                     ''
@@ -198,4 +303,8 @@ export default {
     justify-content: center;
     width: 200px;
 }
+.help-offset-icon {
+    position: relative;
+    top: -8px;
+}
 </style>

package/components/Settings/MathSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <br />
-        <v-btn @click="onToggleExpand" text class="mb-2">
+        <v-btn :disabled="render" @click="onToggleExpand" text class="mb-2">
             <v-icon v-if="!block.metadata.config.expand" color="primary"
                 >mdi-arrow-expand-all</v-icon
             >
@@ -11,18 +11,19 @@
         </v-btn>
         <math-expression-editor
             v-if="!block.metadata.config.expand"
-            :key="key"
-            :shrinkFont="true"
             v-model="block.metadata.config.formula"
-            mode="standalone"
             :value="block.metadata.config.formula"
+            mode="standalone"
+            :key="key"
+            :shrinkFont="true"
+            :disabled="render"
         ></math-expression-editor>
         <br />
     </div>
 </template>
 
 <script>
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import MathExpressionEditor from '../utils/MathExpressionEditor.vue'
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'

package/components/Settings/OpenResponseCollateSettings.vue

@@ -15,6 +15,7 @@
                         'windward.core.components.settings.open_response_collate.include_prompts'
                     )
                 "
+                :disabled="render"
             ></v-switch>
             <v-text-field
                 v-model="block.metadata.config.filename"
@@ -23,6 +24,7 @@
                         'windward.core.components.settings.open_response_collate.filename'
                     )
                 "
+                :disabled="render"
             ></v-text-field>
             <v-list>
                 <v-list-item-group
@@ -60,6 +62,7 @@
                                     <v-checkbox
                                         :input-value="active"
                                         color="primary"
+                                        :disabled="render"
                                     ></v-checkbox>
                                 </v-list-item-action>
                             </template>
@@ -76,7 +79,7 @@ import _ from 'lodash'
 import { mapGetters } from 'vuex'
 import draggable from 'vuedraggable'
 import TextEditor from '~/components/Text/TextEditor'
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlock from '~/models/ContentBlock'
 import Course from '~/models/Course'
 
@@ -103,6 +106,7 @@ export default {
         dragOptions() {
             return {
                 animation: 200,
+                disabled: this.render,
             }
         },
     },

package/components/Settings/OpenResponseSettings.vue

@@ -8,7 +8,11 @@
                     )
                 }}
             </p>
-            <TextEditor v-model="block.body" :height="200"></TextEditor>
+            <TextEditor
+                v-model="block.body"
+                :height="200"
+                :disabled="render"
+            ></TextEditor>
             <p class="pt-4">
                 {{
                     $t(
@@ -19,6 +23,7 @@
             <TextEditor
                 v-model="block.metadata.config.sample_response"
                 :height="200"
+                :disabled="render"
             ></TextEditor>
             <p class="pt-4">
                 {{
@@ -30,6 +35,7 @@
             <TextEditor
                 v-model="block.metadata.config.starting_text"
                 :height="200"
+                :disabled="render"
             ></TextEditor>
         </v-form>
     </v-container>
@@ -38,13 +44,12 @@
 <script>
 import _ from 'lodash'
 import TextEditor from '~/components/Text/TextEditor'
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 
 export default {
     name: 'ImageSettings',
     extends: BaseContentSettings,
-    components: { ContentBlockAsset, TextEditor },
+    components: { TextEditor },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },

package/components/Settings/ScenarioChoiceSettings.vue

@@ -10,6 +10,7 @@
                             'windward.core.components.settings.scenario_choice.title'
                         )
                     "
+                    :disabled="render"
                 ></v-text-field>
                 <v-text-field
                     v-model="block.metadata.config.description"
@@ -19,6 +20,7 @@
                             'windward.core.components.settings.scenario_choice.description'
                         )
                     "
+                    :disabled="render"
                 ></v-text-field>
                 <v-select
                     v-model="block.metadata.config.display_style"
@@ -28,6 +30,7 @@
                             'windward.core.components.settings.scenario_choice.display_style'
                         )
                     "
+                    :disabled="render"
                 ></v-select>
                 <v-switch
                     v-model="isLinked"
@@ -36,6 +39,7 @@
                             'windward.core.components.settings.scenario_choice.is_linked'
                         )
                     "
+                    :disabled="render"
                     @click="onClickLinkSwitch"
                 ></v-switch>
 
@@ -46,11 +50,13 @@
                             'windward.core.components.settings.scenario_choice.show_reset'
                         )
                     "
+                    :disabled="render"
                 ></v-switch>
             </v-col>
             <v-col class="pa-0">
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
+                    :disabled="render"
                     @click:close="onRemoveElement"
                 >
                     <template #header="{ item }">
@@ -75,6 +81,7 @@
                                         'windward.core.components.settings.scenario_choice.item_title'
                                     )
                                 "
+                                :disabled="render"
                             ></v-text-field>
 
                             <v-switch
@@ -86,6 +93,7 @@
                                         'windward.core.components.settings.scenario_choice.correct_choice'
                                     )
                                 "
+                                :disabled="render"
                             ></v-switch>
 
                             <span>{{
@@ -98,6 +106,7 @@
                                     block.metadata.config.items[index].body
                                 "
                                 :height="200"
+                                :disabled="render"
                             ></TextEditor>
                         </v-container>
                     </template>
@@ -106,7 +115,9 @@
             <v-row justify="center" class="my-4">
                 <v-btn
                     color="primary"
-                    :disabled="block.metadata.config.items.length > 26"
+                    :disabled="
+                        render || block.metadata.config.items.length > 26
+                    "
                     @click="onAddElement"
                 >
                     <v-icon>mdi-plus</v-icon>
@@ -184,10 +195,10 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
-import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
-import DialogBox from '~/components/DialogBox.vue'
+import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import DialogBox from '~/components/Core/DialogBox.vue'
 
 export default {
     name: 'ScenarioChoiceSettings',

package/components/Settings/TabSettings.vue

@@ -6,6 +6,7 @@
             <SortableExpansionPanel
                 v-model="block.metadata.config.items"
                 v-bind:currentPanel.sync="block.metadata.config.currentTab"
+                :disabled="render"
                 @change="onDragged"
                 @click:close="onRemoveElement($event)"
             >
@@ -28,8 +29,14 @@
                                 block.metadata.config.items[index].tabHeader
                             "
                             :placeholder="'item ' + (index + 1)"
+                            :disabled="render"
                         ></v-text-field>
-                        <v-btn @click="onToggleExpand(index)" text class="mb-3">
+                        <v-btn
+                            @click="onToggleExpand(index)"
+                            text
+                            class="mb-3"
+                            :disabled="render"
+                        >
                             <v-icon
                                 v-if="
                                     !block.metadata.config.items[index].expand
@@ -48,12 +55,13 @@
                             v-model="block.metadata.config.items[index].content"
                             v-if="!item.expand"
                             :key="textEditorUpdateKey"
+                            :disabled="render"
                         ></TextEditor>
                     </v-container>
                 </template>
             </SortableExpansionPanel>
             <v-row justify="center" class="my-4">
-                <v-btn color="primary" @click="onAddElement">
+                <v-btn color="primary" :disabled="render" @click="onAddElement">
                     <v-icon>mdi-plus</v-icon>
                     {{ $t('windward.core.components.settings.tab.add_tab') }}
                 </v-btn>
@@ -74,8 +82,8 @@
 import _, { get } from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor'
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 
 export default {
     name: 'TabSettings',

package/components/Settings/TextEditorSettings.vue

@@ -5,7 +5,7 @@
             <v-btn-toggle v-model="settingSelector" multiple borderless>
                 <v-tooltip top>
                     <template #activator="{ on, attrs }">
-                        <v-btn v-bind="attrs" v-on="on" text>
+                        <v-btn v-bind="attrs" v-on="on" text :disabled="render">
                             <v-icon>mdi-comment-text-multiple</v-icon>
                             {{
                                 $t(
@@ -25,7 +25,7 @@
 
                 <v-tooltip top>
                     <template #activator="{ on, attrs }">
-                        <v-btn v-bind="attrs" v-on="on" text>
+                        <v-btn v-bind="attrs" v-on="on" text :disabled="render">
                             <v-icon> mdi-text-long</v-icon>
                             {{
                                 $t(
@@ -48,11 +48,12 @@
                         <v-btn
                             v-bind="attrs"
                             v-on="on"
+                            text
+                            :disabled="render"
                             @click="
                                 block.metadata.config.expand =
                                     !block.metadata.config.expand
                             "
-                            text
                         >
                             <v-icon
                                 v-if="!block.metadata.config.expand"
@@ -96,6 +97,7 @@
                         close
                         color="success"
                         close-icon="mdi-pencil"
+                        :disabled="render"
                         @click:close="editTerm(verified)"
                     >
                         {{ verified.term }}
@@ -118,6 +120,7 @@
                         close
                         color="error"
                         close-icon="mdi-content-save-plus-outline"
+                        :disabled="render"
                         @click:close="addGlossaryTerm(unVerified)"
                     >
                         {{ unVerified.term }}
@@ -140,11 +143,12 @@
             >
         </div>
         <br />
-        <text-editor
-            v-model="block.body"
+        <TextEditor
             v-if="settingSelector.includes(1) && !block.metadata.config.expand"
+            v-model="block.body"
             autofill
-        ></text-editor>
+            :disabled="render"
+        ></TextEditor>
         <v-skeleton-loader
             v-bind="attrs"
             type=" table-row-divider, list-item, divider, list-item, divider, image,image"
@@ -156,6 +160,7 @@
             max-width="600px"
             action-save
             :trigger="false"
+            :disabled="render"
             @click:save="save"
             @click:outside="close"
             @click:close="close"
@@ -177,15 +182,17 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import DialogBox from '~/components/Core/DialogBox.vue'
 import GlossaryHelper from '../../helpers/GlossaryHelper'
 import Course from '~/models/Course'
-import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
 import CourseGlossaryForm from '../utils/glossary/CourseGlossaryForm.vue'
 export default {
     name: 'TextEditorSettings',
     extends: BaseContentSettings,
     components: {
+        DialogBox,
         TextEditor,
         CourseGlossaryForm,
     },