@windward/core 0.8.0 → 0.9.0

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/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

@@ -18,12 +18,6 @@
                 :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>
 
@@ -35,7 +29,7 @@
         <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>
@@ -51,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>
@@ -124,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: {
@@ -150,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,
@@ -172,11 +148,7 @@ export default {
             paused: false,
         }
     },
-    watch: {
-        text: function (newVal) {
-            this.$emit('input', this.text)
-        },
-    },
+
     computed: {
         dataCy() {
             return (
@@ -189,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,
@@ -244,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',
@@ -260,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,
@@ -352,7 +309,6 @@ export default {
                         }
                     )
                 },
-
                 formats: {
                     glossary: {
                         inline: 'span',
@@ -480,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) {
@@ -510,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
@@ -530,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 {
@@ -546,7 +505,6 @@ export default {
             ) {
                 return false
             } else {
-                this.onClickOutside()
                 return true
             }
         },