@windward/core 0.2.0 → 0.2.1

package/components/Content/Blocks/Accordion.vue

@@ -5,13 +5,16 @@
             flat
             accordion
             focusable
-            id="expansion-panel-setting"
+            class="expansion-panels-container"
         >
             <v-expansion-panel
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
             >
-                <v-expansion-panel-header class="header" color="primary">
+                <v-expansion-panel-header
+                    class="expansion-panel-header"
+                    color="primary"
+                >
                     {{
                         item.header === '' || item.header === null
                             ? 'Item ' + (itemIndex + 1)
@@ -19,7 +22,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content
-                    class="body"
+                    class="expansion-panel-body"
                     :key="expansionPanelKey"
                 >
                     <v-container>
@@ -77,7 +80,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.currentAccordion)) {
             this.block.metadata.config.currentAccordion = 0
         }
-        this.block.body = 'accordion'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.accordion'
+        )
     },
     data() {
         return {
@@ -125,14 +130,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header {
+.expansion-panel-header {
     color: white;
     margin-top: 1px;
 }
-.body {
+.expansion-panel-body {
     background: var(--v-surface-base);
 }
-#expansion-panel-setting {
+.expansion-panels-container {
     z-index: 0;
 }
 </style>

package/components/Content/Blocks/BlockQuote.vue

@@ -70,7 +70,9 @@ export default {
                 source_type: '',
             }
         }
-        this.block.body = 'block quote'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.block_quote.body'
+        )
     },
     data() {
         return {

package/components/Content/Blocks/ClickableIcons.vue

@@ -71,6 +71,35 @@ export default {
         TextViewer,
     },
     extends: BaseContentBlock,
+    beforeMount() {
+        // Apply the default config
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.clickable_icons'
+        )
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.description)) {
+            this.block.metadata.config.description = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
+        }
+        if (this.block.metadata.config.items.length) {
+            for (const index in this.block.metadata.config.items) {
+                this.block.metadata.config.items[index].active = false
+            }
+        }
+    },
     data() {
         return {}
     },
@@ -146,33 +175,6 @@ export default {
             }
         },
     },
-    beforeMount() {
-        // Apply the default config
-        this.block.body = 'clickable icons'
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            this.block.metadata.config.items = []
-        }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.description)) {
-            this.block.metadata.config.description = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.display)) {
-            this.block.metadata.config.display = {
-                show_title: false,
-                show_background: false,
-                round_icon: false,
-                italic_icon: false,
-                autocolor: true,
-            }
-        }
-        if (this.block.metadata.config.items.length) {
-            for (const index in this.block.metadata.config.items) {
-                this.block.metadata.config.items[index].active = false
-            }
-        }
-    },
     methods: {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0

package/components/Content/Blocks/Email.vue

@@ -231,7 +231,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.activeEmail)) {
             this.block.metadata.config.activeEmail = 0
         }
-        this.block.body = 'emails'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.email.title'
+        )
     },
     data() {
         return {

package/components/Content/Blocks/Feedback.vue

@@ -186,7 +186,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.definition)) {
             this.block.metadata.config.definition = {}
         }
-        this.block.body = 'feedback'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.feedback.feedback'
+        )
     },
     data() {
         return {
@@ -318,14 +320,3 @@ export default {
     },
 }
 </script>
-<style scoped>
-.question {
-    font-weight: bold;
-}
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
-</style>

package/components/Content/Blocks/Image.vue

@@ -78,7 +78,7 @@
 
 <script>
 import _ from 'lodash'
-import DialogBox from '~/components/DialogBox'
+import DialogBox from '~/components/DialogBox.vue'
 import TextViewer from '~/components/Text/TextViewer'
 import Crypto from '~/helpers/Crypto'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'

package/components/Content/Blocks/Math.vue

@@ -33,7 +33,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'Math Editor'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.math'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Content/Blocks/ScenarioChoice.vue

@@ -202,7 +202,9 @@ export default {
     },
     beforeMount() {
         // Apply the default config
-        this.block.body = 'scenario choice'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.scenario_choice'
+        )
         if (_.isEmpty(this.block.metadata.config.items)) {
             this.block.metadata.config.items = []
         }

package/components/Content/Blocks/Tab.vue

@@ -49,7 +49,9 @@ export default {
     },
     extends: BaseContentBlock,
     beforeMount() {
-        this.block.body = 'tab'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.tab'
+        )
         if (_.isEmpty(this.block.metadata.config.items)) {
             const defaultObject = {
                 tabHeader: '',

package/components/Content/Blocks/UserUpload.vue

@@ -119,7 +119,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'user uplaod'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.user_upload'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/AccordionSettings.vue

@@ -134,9 +134,7 @@ export default {
         if (_.isEmpty(this.block.metadata.config.currentAccordion)) {
             this.block.metadata.config.currentAccordion = 0
         }
-        this.block.body = this.$t(
-            'windward.core.components.settings.accordion.accordion'
-        )
+        this.block.body = this.$t('windward.core.shared.content_blocks.title.accordion')
     },
     data() {
         return {

package/components/Settings/BlockQuoteSettings.vue

@@ -117,7 +117,7 @@ export default {
             }
         }
         this.block.body = this.$t(
-            'windward.core.shared.settings.title.block_quote'
+            'windward.core.components.content.blocks.block_quote.body'
         )
     },
     data() {

package/components/Settings/ClickableIconsSettings.vue

@@ -171,7 +171,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'clickable icons'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.clickable_icons')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/EmailSettings.vue

@@ -161,7 +161,7 @@ export default {
             }
             this.block.metadata.config.emails.push(defaultObject)
         }
-        this.block.body = 'emails'
+        this.block.body = this.$t('windward.core.components.content.blocks.email.title')
     },
     data() {
         return {

package/components/Settings/FeedbackSettings.vue

@@ -53,7 +53,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.definition)) {
             this.block.metadata.config.definition = {}
         }
-        this.block.body = 'feedback'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.feedback.feedback'
+        )
     },
     data() {
         return {

package/components/Settings/MathSettings.vue

@@ -36,7 +36,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'Math Editor'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.math')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/ScenarioChoiceSettings.vue

@@ -231,7 +231,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'scenario choice'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.scenario_choice'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/TabSettings.vue

@@ -85,7 +85,7 @@ export default {
         }
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
-                'windward.core.components.settings.tab.tab'
+                'windward.core.shared.content_blocks.title.tab'
             )
         }
         if (_.isEmpty(this.block.metadata)) {

package/components/Settings/UserUploadSettings.vue

@@ -62,7 +62,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'user uplaod'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.user_upload')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/utils/ContentViewer.vue

@@ -33,7 +33,8 @@ export default {
                 content = _.cloneDeep(this.value)
                 if (
                     MathHelper.containsMathML(content) ||
-                    MathHelper.containsLatex(content)
+                    MathHelper.containsLatex(content) ||
+                    MathHelper.containSREnhancedLatex(content)
                 ) {
                     content = MathHelper.convertMathContentToHtml(content)
                 }

package/components/utils/FillInBlank/FillInTheBlanksManager.vue

@@ -1,30 +1,26 @@
 <template>
     <v-container>
         <v-row align="center" justify="center">
-            <v-col>
-                <v-row align="center" justify="center">
-                    <v-text-field
-                        class="col-10"
-                        :label="
-                            $t(
-                                'windward.core.components.utils.fill_in_the_blank.fill_in_the_blank_manager.answer'
-                            )
-                        "
-                        v-model="answer"
-                        outlined
-                        @input="submit"
-                    ></v-text-field>
-                </v-row>
-
-                <br />
-
-                <v-row align="center" justify="center">
-                    <TextEditor
-                        :key="key"
-                        v-model="feedback"
-                        @input="submit"
-                    ></TextEditor>
-                </v-row>
+            <v-col cols="12">
+                <v-text-field
+                    :label="
+                        $t(
+                            'windward.core.components.utils.fill_in_the_blank.fill_in_the_blank_manager.answer'
+                        )
+                    "
+                    v-model="answer"
+                    outlined
+                    @input="submit"
+                ></v-text-field>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12">
+                <TextEditor
+                    :key="key"
+                    v-model="feedback"
+                    @input="submit"
+                ></TextEditor>
             </v-col>
         </v-row>
     </v-container>

package/components/utils/MathExpressionEditor.vue

@@ -8,18 +8,7 @@
                     )
                 }}
             </v-card-title>
-            <v-card-text>
-                <math-live-wrapper
-                    ref="mathfield"
-                    v-model="formula"
-                    :id="mathElementId"
-                    :options="options"
-                    :value="value"
-                    @change="submit"
-                ></math-live-wrapper>
-            </v-card-text>
-        </v-card>
-        <v-card>
+
             <v-card-text>
                 <v-tabs
                     v-model="tab"
@@ -29,9 +18,7 @@
                     show-arrows
                 >
                     <v-tabs-slider color="primary"></v-tabs-slider>
-                    <v-tab>
-                        {{ $t('shared.accessibility.accessibility') }}</v-tab
-                    >
+
                     <v-tab
                         v-for="(keyboard, index) in config.buttons.groups"
                         :key="index"
@@ -41,80 +28,85 @@
                 </v-tabs>
 
                 <v-tabs-items v-model="tab">
-                    <v-tab-item>
-                        <v-card-text>
-                            <v-container>
-                                <v-row align="center">
-                                    <v-checkbox
-                                        v-model="spokenTextChanged"
-                                        hide-details
-                                        class="shrink mr-2 mt-0"
-                                    ></v-checkbox>
-                                    <v-textarea
-                                        v-model="spokenText"
-                                        :disabled="!spokenTextChanged"
-                                        :label="
-                                            $t(
-                                                'shared.accessibility.set_aria_label_text'
-                                            )
-                                        "
-                                        class="col-md-12"
-                                        @input="submit"
-                                    ></v-textarea>
-                                </v-row>
-                            </v-container>
-
-                            <br />
-                            <v-btn
-                                primary
-                                color="success"
-                                @click="setSRText"
-                                :class="fontSize"
-                                >{{ $t('shared.accessibility.default_text') }}
-                            </v-btn>
-                            <v-btn
-                                :disabled="spokenTextChanged"
-                                color="primary"
-                                :class="fontSize"
-                                @click="readSRText"
-                                >{{
-                                    $t(
-                                        'shared.accessibility.read_default_aria_label_text'
-                                    )
-                                }}</v-btn
-                            >
-                        </v-card-text>
-                    </v-tab-item>
                     <v-tab-item
                         v-for="(keyboard, index) in config.buttons.groups"
                         :key="index"
                     >
-                        <v-card flat>
-                            <v-card-text>
-                                <v-container>
-                                    <v-btn-toggle mandatory>
-                                        <button
-                                            v-for="(
-                                                button, buttonIndex
-                                            ) in keyboard.buttons"
-                                            :key="buttonIndex"
-                                            class="btn"
-                                            @click="insert(button)"
-                                        >
-                                            <div
-                                                v-html="
-                                                    convertLatexToMarkup(
-                                                        button.text
-                                                    )
-                                                "
-                                            ></div>
-                                        </button>
-                                    </v-btn-toggle>
-                                </v-container>
-                            </v-card-text>
-                        </v-card>
+                        <v-container>
+                            <div class="flex-wrap col-12">
+                                <v-btn
+                                    :min-height="index < 4 ? 40 : 60"
+                                    v-for="(
+                                        button, buttonIndex
+                                    ) in keyboard.buttons"
+                                    :key="buttonIndex"
+                                    class="btn"
+                                    @click="insert(button)"
+                                    v-html="convertLatexToMarkup(button.text)"
+                                >
+                                </v-btn>
+                            </div>
+                        </v-container>
                     </v-tab-item>
                 </v-tabs-items>
+
+                <math-live-wrapper
+                    ref="mathfield"
+                    v-model="formula"
+                    :id="mathElementId"
+                    :options="options"
+                    :value="value"
+                    @change="submit"
+                ></math-live-wrapper>
+                <br />
+                <v-container>
+                    <v-row align="center">
+                        <v-switch
+                            v-model="spokenTextChanged"
+                            :label="
+                                $t(
+                                    'windward.core.components.utils.math_expression_editor.custom_screen_reader_text'
+                                )
+                            "
+                            hide-details
+                            class="shrink mr-2 mt-0"
+                        ></v-switch>
+                        <v-textarea
+                            v-model="spokenText"
+                            :disabled="!spokenTextChanged"
+                            :label="
+                                $t(
+                                    'windward.core.components.utils.math_expression_editor.screen_reader_text'
+                                )
+                            "
+                            class="col-md-12"
+                            @input="submit"
+                        ></v-textarea>
+                    </v-row>
+                </v-container>
+
+                <br />
+                <v-row class="float-right">
+                    <v-btn
+                        primary
+                        color="success"
+                        @click="setSRText"
+                        :class="fontSize"
+                        >{{
+                            $t(
+                                'windward.core.components.utils.math_expression_editor.default_screen_reader_text'
+                            )
+                        }}
+                    </v-btn>
+                    &nbsp;
+                    <v-btn color="primary" :class="fontSize" @click="readSRText"
+                        >{{
+                            $t(
+                                'windward.core.components.utils.math_expression_editor.read_text_aloud'
+                            )
+                        }}
+                    </v-btn>
+                </v-row>
             </v-card-text>
         </v-card>
     </div>
@@ -142,7 +134,7 @@ export default {
             options: {
                 smartFence: true,
                 smartMode: false,
-                virtualKeyboardMode: 'manual',
+                virtualKeyboardMode: 'auto',
                 keypressSound: 'none',
                 plonkSound: 'none',
                 readOnly: false,
@@ -268,7 +260,12 @@ export default {
             this.spokenText = this.convertLatexToSpeakableText(this.formula)
         },
         readSRText() {
-            this.$refs.mathfield.executeCommand('speak')
+            if (!this.spokenText) {
+                this.$refs.mathfield.executeCommand('speak')
+            } else {
+                const utterance = new SpeechSynthesisUtterance(this.spokenText)
+                speechSynthesis.speak(utterance)
+            }
         },
     },
 }

package/components/utils/MathLiveWrapper.vue

@@ -1,5 +1,7 @@
 <template>
-    <math-field :id="id"><slot></slot></math-field>
+    <math-field :id="id" style="font-size: 1.5rem; display: block"
+        ><slot></slot
+    ></math-field>
 </template>
 
 <script>