@windward/core 0.1.4 → 0.2.1

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>
@@ -141,8 +133,8 @@ export default {
             spokenTextChanged: false,
             options: {
                 smartFence: true,
-                smartMode: true,
-                virtualKeyboardMode: 'manual',
+                smartMode: false,
+                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>

package/components/utils/TinyMCEWrapper.vue

@@ -1,14 +1,24 @@
 <template>
-    <editor
-        :key="seed + config.skin"
-        v-model="text"
-        initial-value=""
-        :api-key="api_key"
-        :init="config"
-        tag-name="div"
-        model-events="change keydown blur focus paste input submit SetContent"
-    >
-    </editor>
+    <div>
+        <div class="included">
+            <editor
+                :key="seed + config.skin"
+                v-model="text"
+                initial-value=""
+                :api-key="api_key"
+                :init="config"
+                tag-name="div"
+                model-events="change keydown blur focus mouseDown paste input submit SetContent"
+                @onfocus="onEditorFocus"
+            >
+            </editor>
+        </div>
+        <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
+            <v-btn v-if="render" color="primary" @click="onClickCollapse">{{
+                $t('windward.core.components.utils.tiny_mce_wrapper.minimize')
+            }}</v-btn>
+        </v-btn-toggle>
+    </div>
 </template>
 
 <script>
@@ -41,13 +51,10 @@ export default {
     },
     beforeMount() {
         this.text = this.value
-        if (this.height !== null) {
-            this.config.height = this.height
-        }
     },
     data() {
         return {
-            render: true,
+            render: false,
             text: '',
             seed: Crypto.id(),
         }
@@ -58,12 +65,38 @@ export default {
         },
     },
     computed: {
+        filteredMenubar() {
+            if (this.render) {
+                return this.menubar
+            } else {
+                return ''
+            }
+        },
+        filteredToolbar() {
+            if (this.render) {
+                return this.toolbar
+            } else {
+                return ''
+            }
+        },
+        filteredHeight() {
+            if (!this.render) {
+                return 50
+            } else if (this.height !== null) {
+                return this.height
+            } else {
+                return 500
+            }
+        },
         config() {
             return {
-                height: 500,
+                height: this.filteredHeight,
                 visual: false,
                 forced_root_block: this.root_block,
-                menubar: this.menubar,
+                menubar: this.filteredMenubar,
+                browser_spellcheck: true,
+                contextmenu: false,
+                statusbar: false,
                 menu: {
                     insert: {
                         title: 'Insert',
@@ -82,9 +115,9 @@ export default {
                     'advlist autolink lists link  charmap',
                     'searchreplace visualblocks code fullscreen',
                     'anchor insertdatetime ',
-                    'paste code wordcount table WindwardToolKit ',
+                    'paste code wordcount table WindwardToolKit',
                 ],
-                toolbar: this.toolbar,
+                toolbar: this.filteredToolbar,
                 table_advtab: false,
                 table_cell_advtab: false,
                 table_row_advtab: false,
@@ -252,5 +285,19 @@ export default {
             }
         },
     },
+    methods: {
+        onEditorFocus() {
+            if (!this.render) {
+                this.seed = Crypto.id()
+                this.render = true
+            }
+        },
+        onClickCollapse() {
+            if (this.render) {
+                this.seed = Crypto.id()
+                this.render = false
+            }
+        },
+    },
 }
 </script>

package/components/utils/glossary/CourseGlossary.vue

@@ -11,7 +11,7 @@
                 >
                     <template #top>
                         <v-toolbar flat>
-                            <Dialog
+                            <DialogBox
                                 v-model="dialog"
                                 color="primary"
                                 max-width="600px"
@@ -60,7 +60,7 @@
                                         v-on="on"
                                     />
                                 </template>
-                            </Dialog>
+                            </DialogBox>
                             <v-spacer></v-spacer>
                             <v-text-field
                                 v-model="search"
@@ -77,7 +77,20 @@
                         <tr>
                             <td>{{ item.term }}</td>
                             <td>{{ item.definition }}</td>
-                            <td>{{ item.alternate_forms }}</td>
+                            <td>
+                                <v-row>
+                                    <div
+                                        v-for="(
+                                            item, index
+                                        ) in item.alternate_forms"
+                                        :key="index"
+                                    >
+                                        <v-chip>
+                                            {{ item }}
+                                        </v-chip>
+                                    </div>
+                                </v-row>
+                            </td>
                             <td>{{ item.related_term }}</td>
 
                             <td>

package/components/utils/glossary/CourseGlossaryForm.vue

@@ -1,11 +1,13 @@
 <template>
     <v-form ref="form" v-model="formValid" class="pa-6">
         <v-text-field
+            id="glossary-form-term"
             v-model="selectedTerm.term"
             :counter="50"
             :label="$t('windward.core.pages.glossary.term')"
             required
             :rules="validation.termRules"
+            :disabled="editMode"
         ></v-text-field>
         <br />
         <v-textarea

package/components/utils/glossary/GlossaryToolTip.vue

@@ -18,14 +18,14 @@
             </template>
             <div>
                 <div v-if="this.$slots['definition']">
-                    <h4 class="text-capitalize">
+                    <h6 class="text-capitalize">
                         {{
                             $t(
                                 'windward.core.components.utils.tiny_mce_wrapper.definition'
                             )
                         }}
                         :
-                    </h4>
+                    </h6>
                     <p>
                         <slot name="definition"></slot>
                     </p>