@windward/core 0.2.0 → 0.2.2

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,84 @@
                 </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">
+                                <button
+                                    v-for="(
+                                        button, buttonIndex
+                                    ) in keyboard.buttons"
+                                    :key="buttonIndex"
+                                    class="btn"
+                                    @click="insert(button)"
+                                    v-html="'<strong>'+convertLatexToMarkup(button.text)+'</strong>'"
+                                >
+                                </button>
+                            </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 +133,7 @@ export default {
             options: {
                 smartFence: true,
                 smartMode: false,
-                virtualKeyboardMode: 'manual',
+                virtualKeyboardMode: 'none',
                 keypressSound: 'none',
                 plonkSound: 'none',
                 readOnly: false,
@@ -268,7 +259,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,41 @@
 <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"
+                v-click-outside="{
+                    handler: onClickOutside,
+                    include,
+                }"
+            >
+            </editor>
+        </div>
+
+        <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
+                    v-if="render"
+                    color="primary"
+                    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>
+    </div>
 </template>
 
 <script>
@@ -35,19 +62,17 @@ export default {
             type: String,
             required: false,
             default:
-                'undo redo | formatselect | fontsizeselect  | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | mathButton ',
+                'undo redo | formatselect | fontsizeselect  | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | glossaryButton fibButton mathButton ',
         },
         root_block: { type: String, required: false, default: 'div' },
+        label: { type: String, required: true, 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,14 +83,39 @@ 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,
+                draggable_modal: true,
+                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',
@@ -86,7 +136,7 @@ export default {
                     'anchor insertdatetime ',
                     'paste code wordcount table WindwardToolKit',
                 ],
-                toolbar: this.toolbar,
+                toolbar: this.filteredToolbar,
                 table_advtab: false,
                 table_cell_advtab: false,
                 table_row_advtab: false,
@@ -232,9 +282,11 @@ export default {
                     },
                 ],
                 style_formats_merge: true,
-                placeholder: this.$t(
-                    'windward.core.shared.settings.title.placeholder'
-                ),
+                placeholder: this.label
+                    ? this.label
+                    : this.$t(
+                          'windward.core.shared.settings.title.placeholder'
+                      ),
                 //required as it will be displayed as inline style in tinymce renderer
 
                 skin: this.$vuetify.theme.isDark ? 'oxide-dark' : 'oxide',
@@ -254,5 +306,23 @@ export default {
             }
         },
     },
+    methods: {
+        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 [document.querySelector('.included')]
+        },
+    },
 }
 </script>

package/components/utils/glossary/CourseGlossary.vue

@@ -94,36 +94,45 @@
                             <td>{{ item.related_term }}</td>
 
                             <td>
-                                <v-btn
-                                    class="primary"
-                                    :disabled="
-                                        !$PermissionService.userHasAccessTo(
-                                            'windward.global.course,windward.organization.course.contentBlock',
-                                            'writable'
-                                        )
-                                    "
-                                    @click="editTerm(item)"
+                                <SpeedDial
+                                    direction="left"
+                                    transition="slide-x-reverse-transition"
                                 >
-                                    <v-icon small> mdi-pencil </v-icon>
-                                    <span class="sr-only">{{
-                                        $t('forms.edit')
-                                    }}</span>
-                                </v-btn>
-                                <v-btn
-                                    class="primary"
-                                    :disabled="
-                                        !$PermissionService.userHasAccessTo(
-                                            'windward.global.course,windward.organization.course.contentBlock',
-                                            'writable'
-                                        )
-                                    "
-                                    @click="onDelete(item)"
-                                >
-                                    <v-icon small> mdi-delete </v-icon>
-                                    <span class="sr-only">{{
-                                        $t('shared.forms.delete')
-                                    }}</span>
-                                </v-btn>
+                                    <v-btn
+                                        color="error"
+                                        class="outlined"
+                                        outlined
+                                        :disabled="
+                                            !$PermissionService.userHasAccessTo(
+                                                'windward.global.course,windward.organization.course.contentBlock',
+                                                'writable'
+                                            )
+                                        "
+                                        @click="onDelete(item)"
+                                    >
+                                        {{ $t('shared.forms.delete') }}
+                                        <span class="sr-only">{{
+                                            $t('shared.forms.delete')
+                                        }}</span>
+                                    </v-btn>
+                                    <v-btn
+                                        color="primary"
+                                        class="outlined"
+                                        outlined
+                                        :disabled="
+                                            !$PermissionService.userHasAccessTo(
+                                                'windward.global.course,windward.organization.course.contentBlock',
+                                                'writable'
+                                            )
+                                        "
+                                        @click="editTerm(item)"
+                                    >
+                                        {{ $t('shared.forms.edit') }}
+                                        <span class="sr-only">{{
+                                            $t('forms.edit')
+                                        }}</span>
+                                    </v-btn>
+                                </SpeedDial>
                             </td>
                         </tr>
                     </template>
@@ -138,11 +147,12 @@ import { mapGetters, mapMutations } from 'vuex'
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import Course from '~/models/Course'
+import SpeedDial from '~/components/SpeedDial.vue'
 
 import CourseGlossaryForm from './CourseGlossaryForm'
 export default {
     name: 'CourseGlossary',
-    components: { CourseGlossaryForm },
+    components: { CourseGlossaryForm, SpeedDial },
     layout: 'course',
     middleware: ['auth'],
     props: {},
@@ -176,6 +186,11 @@ export default {
                     sortable: true,
                     value: 'related_term',
                 },
+                {
+                    text: this.$t('shared.forms.actions'),
+                    value: 'actions',
+                    sortable: false,
+                },
             ],
             dialog: false,
             editMode: false,
@@ -297,5 +312,3 @@ export default {
     },
 }
 </script>
-
-<!--<style scoped></style>-->

package/components/utils/glossary/CourseGlossaryForm.vue

@@ -1,6 +1,7 @@
 <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')"