@windward/core 0.2.1 → 0.2.3

package/components/Settings/EmailSettings.vue

@@ -18,20 +18,14 @@
                 :label="$t('windward.core.shared.settings.title.instructions')"
             ></v-textarea>
         </v-container>
-        <v-container class="pa-0">
-            <v-text-field
-                v-model="block.metadata.config.subject"
-                outlined
-                :label="$t('windward.core.components.settings.email.subject')"
-            ></v-text-field>
-        </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
-            <p>Email Items</p>
+            <p>{{ $t('windward.core.components.settings.email.items') }}</p>
             <SortableExpansionPanel
                 v-model="block.metadata.config.emails"
                 @click:close="onRemoveElement($event)"
                 @change="onDragged"
+                @update:currentPanel="onUpdatePanel"
             >
                 <template #header="{ item }">{{
                     item.from
@@ -66,6 +60,17 @@
                                 $t('windward.core.components.settings.email.cc')
                             "
                         ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.emails[index].subject
+                            "
+                            outlined
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.email.subject'
+                                )
+                            "
+                        ></v-text-field>
                         <v-btn
                             @click="
                                 onToggleExpand(
@@ -73,24 +78,37 @@
                                     index
                                 )
                             "
+                            text
                         >
                             <v-icon
                                 v-if="
-                                    !block.metadata.config.emails[index].expand
+                                    !block.metadata.config.emails[index]
+                                        .tinymce_expand
                                 "
+                                color="primary"
                                 >mdi-arrow-expand-all</v-icon
                             >
                             <v-icon
                                 v-if="
-                                    block.metadata.config.emails[index].expand
+                                    block.metadata.config.emails[index]
+                                        .tinymce_expand
                                 "
+                                color="primary"
                             >
                                 mdi-arrow-collapse-all
                             </v-icon>
                         </v-btn>
                         <TextEditor
-                            v-show="!block.metadata.config.emails[index].expand"
+                            v-show="
+                                !block.metadata.config.emails[index]
+                                    .tinymce_expand
+                            "
                             v-model="block.metadata.config.emails[index].body"
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.email.placeholder'
+                                )
+                            "
                         ></TextEditor>
                     </v-container>
                 </template>
@@ -101,7 +119,7 @@
                 <v-btn color="primary" @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
                     >{{
-                        $t('windward.core.components.settings.accordion.add')
+                        $t('windward.core.components.settings.email.add')
                     }}</v-btn
                 >
             </v-row>
@@ -155,19 +173,23 @@ export default {
                 from: '',
                 to: '',
                 cc: '',
+                subject: '',
                 body: '',
-                expand: false,
+                tinymce_expand: false,
                 initials: '',
             }
             this.block.metadata.config.emails.push(defaultObject)
         }
-        this.block.body = this.$t('windward.core.components.content.blocks.email.title')
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.email.title'
+        )
     },
     data() {
         return {
             valid: true,
             loading: false,
             expansionPanelKey: 0,
+            editingPanel: 0,
         }
     },
     beforeDestroy() {
@@ -175,14 +197,29 @@ export default {
             clearTimeout(this.debouncer)
         }
     },
+    mounted() {
+        this.block.metadata.config.selectedPanels = 0
+    },
     methods: {
         onBeforeSave() {
             this.block.metadata.config.emails.forEach((element) => {
-                let matches = element.from.match(/\b(\w)/g)
-                element.initials = matches.join('')
-                element.expand = false
+                if (element.from) {
+                    let matches = element.from.match(/\b(\w)/g)
+                    element.initials = matches.join('')
+                }
+                element.tinymce_expand = false
             })
         },
+        onUpdatePanel($event) {
+            if ($event !== this.block.metadata.config.selectedPanels) {
+                //catch click event to open selected panel to edit
+                this.block.metadata.config.selectedPanels = $event
+            } else {
+                // if user clicks same panel again expansion panel closes
+                // setting selected to null will close content blocks expansion panels
+                this.block.metadata.config.selectedPanels = null
+            }
+        },
         onRemoveElement(event) {
             this.block.metadata.config.emails.splice(event, 1)
             this.expansionPanelKey = Crypto.id()
@@ -192,19 +229,24 @@ export default {
                 from: '',
                 to: '',
                 cc: '',
+                subject: '',
                 body: '',
-                expand: false,
+                tinymce_expand: false,
                 initials: '',
             }
             this.block.metadata.config.emails.push(defaultObject)
+            this.block.metadata.config.selectedPanels =
+                this.block.metadata.config.emails.length - 1
         },
         onToggleExpand(item, index) {
             this.expansionPanelKey = Crypto.id()
-            return (item.expand = !item.expand)
+            return (item.tinymce_expand = !item.tinymce_expand)
         },
         onDragged() {
             // need to remount body after dragged to update the content body on the element
             this.expansionPanelKey = Crypto.id()
+            //close all panels on drag, leaving them open confuses the tracking as indexes changes around
+            this.block.metadata.config.selectedPanels = null
         },
     },
 }

package/components/Settings/MathSettings.vue

@@ -1,11 +1,11 @@
 <template>
     <div>
         <br />
-        <v-btn @click="onToggleExpand" class="mb-2">
-            <v-icon v-if="!block.metadata.config.expand"
+        <v-btn @click="onToggleExpand" text class="mb-2">
+            <v-icon v-if="!block.metadata.config.expand" color="primary"
                 >mdi-arrow-expand-all</v-icon
             >
-            <v-icon v-if="block.metadata.config.expand">
+            <v-icon v-if="block.metadata.config.expand" color="primary">
                 mdi-arrow-collapse-all
             </v-icon>
         </v-btn>
@@ -36,7 +36,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = this.$t('windward.core.shared.content_blocks.title.math')
+            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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-container>
+        <v-container class="pa-0">
             <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
@@ -47,28 +47,8 @@
                         )
                     "
                 ></v-switch>
-
-                <v-btn
-                    color="primary"
-                    outlined
-                    block
-                    :disabled="block.metadata.config.items.length > 26"
-                    @click="onAddElement"
-                >
-                    <v-icon>mdi-plus</v-icon>
-                    <span v-if="block.metadata.config.items.length <= 26">
-                        {{ $t('shared.forms.add') }}
-                    </span>
-                    <span v-else>
-                        {{
-                            $t(
-                                'windward.core.components.settings.scenario_choice.over_item_limit'
-                            )
-                        }}
-                    </span>
-                </v-btn>
             </v-col>
-            <v-col>
+            <v-col class="pa-0">
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
                     @click:close="onRemoveElement"
@@ -84,37 +64,64 @@
                         </span>
                     </template>
                     <template #body="{ index }">
-                        <v-text-field
-                            v-model="block.metadata.config.items[index].title"
-                            :id="'item-' + index + '-title'"
-                            :label="
-                                $t(
-                                    'windward.core.components.settings.scenario_choice.item_title'
-                                )
-                            "
-                        ></v-text-field>
+                        <v-container>
+                            <v-text-field
+                                v-model="
+                                    block.metadata.config.items[index].title
+                                "
+                                :id="'item-' + index + '-title'"
+                                :label="
+                                    $t(
+                                        'windward.core.components.settings.scenario_choice.item_title'
+                                    )
+                                "
+                            ></v-text-field>
 
-                        <v-switch
-                            v-model="block.metadata.config.items[index].correct"
-                            :label="
+                            <v-switch
+                                v-model="
+                                    block.metadata.config.items[index].correct
+                                "
+                                :label="
+                                    $t(
+                                        'windward.core.components.settings.scenario_choice.correct_choice'
+                                    )
+                                "
+                            ></v-switch>
+
+                            <span>{{
                                 $t(
-                                    'windward.core.components.settings.scenario_choice.correct_choice'
+                                    'windward.core.components.settings.scenario_choice.item_text'
                                 )
-                            "
-                        ></v-switch>
-
-                        <span>{{
-                            $t(
-                                'windward.core.components.settings.scenario_choice.item_text'
-                            )
-                        }}</span>
-                        <TextEditor
-                            v-model="block.metadata.config.items[index].body"
-                            :height="200"
-                        ></TextEditor>
+                            }}</span>
+                            <TextEditor
+                                v-model="
+                                    block.metadata.config.items[index].body
+                                "
+                                :height="200"
+                            ></TextEditor>
+                        </v-container>
                     </template>
                 </SortableExpansionPanel>
             </v-col>
+            <v-row justify="center" class="my-4">
+                <v-btn
+                    color="primary"
+                    :disabled="block.metadata.config.items.length > 26"
+                    @click="onAddElement"
+                >
+                    <v-icon>mdi-plus</v-icon>
+                    <span v-if="block.metadata.config.items.length <= 26">
+                        {{ $t('shared.forms.add') }}
+                    </span>
+                    <span v-else>
+                        {{
+                            $t(
+                                'windward.core.components.settings.scenario_choice.over_item_limit'
+                            )
+                        }}
+                    </span>
+                </v-btn>
+            </v-row>
         </v-container>
 
         <DialogBox

package/components/Settings/TabSettings.vue

@@ -29,15 +29,17 @@
                             "
                             :placeholder="'item ' + (index + 1)"
                         ></v-text-field>
-                        <v-btn @click="onToggleExpand(index)" class="mb-3">
+                        <v-btn @click="onToggleExpand(index)" text class="mb-3">
                             <v-icon
                                 v-if="
                                     !block.metadata.config.items[index].expand
                                 "
+                                color="primary"
                                 >mdi-arrow-expand-all</v-icon
                             >
                             <v-icon
                                 v-if="block.metadata.config.items[index].expand"
+                                color="primary"
                             >
                                 mdi-arrow-collapse-all
                             </v-icon>

package/components/Settings/TextEditorSettings.vue

@@ -2,37 +2,79 @@
     <div>
         <br />
         <v-card elevation="0">
-            <v-btn-toggle v-model="settingSelector" multiple>
-                <v-btn>
-                    <v-icon>mdi-comment-text-multiple</v-icon>
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.glossary'
-                        )
-                    }}
-                </v-btn>
-                <v-btn>
-                    <v-icon> mdi-text-long</v-icon>
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.Text_editor'
-                        )
-                    }}
-                </v-btn>
-                <v-btn
-                    v-if="settingSelector.includes(1)"
-                    @click="
-                        block.metadata.config.expand =
-                            !block.metadata.config.expand
-                    "
-                >
-                    <v-icon v-if="!block.metadata.config.expand"
-                        >mdi-arrow-expand-all</v-icon
+            <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-icon>mdi-comment-text-multiple</v-icon>
+                            {{
+                                $t(
+                                    'windward.core.components.settings.text_editor.glossary'
+                                )
+                            }}
+                        </v-btn>
+                    </template>
+                    <span>
+                        {{
+                            $t(
+                                'windward.core.components.settings.text_editor.click_to_hide_glossary'
+                            )
+                        }}</span
+                    >
+                </v-tooltip>
+
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-btn v-bind="attrs" v-on="on" text>
+                            <v-icon> mdi-text-long</v-icon>
+                            {{
+                                $t(
+                                    'windward.core.components.settings.text_editor.text_editor'
+                                )
+                            }}
+                        </v-btn>
+                    </template>
+                    <span>
+                        {{
+                            $t(
+                                'windward.core.components.settings.text_editor.click_to_hide_editor'
+                            )
+                        }}</span
+                    >
+                </v-tooltip>
+
+                <v-tooltip top v-if="settingSelector.includes(1)">
+                    <template #activator="{ on, attrs }">
+                        <v-btn
+                            v-bind="attrs"
+                            v-on="on"
+                            @click="
+                                block.metadata.config.expand =
+                                    !block.metadata.config.expand
+                            "
+                            text
+                        >
+                            <v-icon
+                                v-if="!block.metadata.config.expand"
+                                color="primary"
+                                >mdi-arrow-expand-all</v-icon
+                            >
+                            <v-icon
+                                v-if="block.metadata.config.expand"
+                                color="primary"
+                            >
+                                mdi-arrow-collapse-all
+                            </v-icon>
+                        </v-btn>
+                    </template>
+                    <span>
+                        {{
+                            $t(
+                                'windward.core.components.settings.text_editor.click_to_expand'
+                            )
+                        }}</span
                     >
-                    <v-icon v-if="block.metadata.config.expand">
-                        mdi-arrow-collapse-all
-                    </v-icon>
-                </v-btn>
+                </v-tooltip>
             </v-btn-toggle>
             <br />
         </v-card>

package/components/Settings/UserUploadSettings.vue

@@ -20,11 +20,11 @@
                 $t('windward.core.components.settings.user_upload.accept_types')
             "
         ></v-select>
-        <v-btn @click="onToggleExpand()" class="mt-4">
-            <v-icon v-if="!block.metadata.config.expand"
+        <v-btn @click="onToggleExpand()" text class="mt-4">
+            <v-icon v-if="!block.metadata.config.expand" color="primary"
                 >mdi-arrow-expand-all</v-icon
             >
-            <v-icon v-if="block.metadata.config.expand">
+            <v-icon v-if="block.metadata.config.expand" color="primary">
                 mdi-arrow-collapse-all
             </v-icon>
         </v-btn>

package/components/Settings/VideoSettings.vue

@@ -257,7 +257,7 @@
                             <v-btn
                                 v-bind="attrs"
                                 v-on="on"
-                                outlined
+                                text
                                 color="error"
                                 :disabled="
                                     block.metadata.config.playlist.length <= 1
@@ -287,7 +287,7 @@
                                 v-bind="attrs"
                                 v-on="on"
                                 color="primary"
-                                outlined
+                                text
                                 @click="onAddPlaylistItem"
                             >
                                 <v-icon>mdi-plus</v-icon>

package/components/utils/MathExpressionEditor.vue

@@ -34,17 +34,16 @@
                     >
                         <v-container>
                             <div class="flex-wrap col-12">
-                                <v-btn
-                                    :min-height="index < 4 ? 40 : 60"
+                                <button
                                     v-for="(
                                         button, buttonIndex
                                     ) in keyboard.buttons"
                                     :key="buttonIndex"
                                     class="btn"
                                     @click="insert(button)"
-                                    v-html="convertLatexToMarkup(button.text)"
+                                    v-html="'<strong>'+convertLatexToMarkup(button.text)+'</strong>'"
                                 >
-                                </v-btn>
+                                </button>
                             </div>
                         </v-container>
                     </v-tab-item>
@@ -134,7 +133,7 @@ export default {
             options: {
                 smartFence: true,
                 smartMode: false,
-                virtualKeyboardMode: 'auto',
+                virtualKeyboardMode: 'none',
                 keypressSound: 'none',
                 plonkSound: 'none',
                 readOnly: false,

package/components/utils/TinyMCEWrapper.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <div class="included">
+    <div :class="'tinymce-included-' + seed">
+        <div>
             <editor
                 :key="seed + config.skin"
                 v-model="text"
@@ -10,13 +10,31 @@
                 tag-name="div"
                 model-events="change keydown blur focus mouseDown paste input submit SetContent"
                 @onfocus="onEditorFocus"
+                v-click-outside="{
+                    handler: onClickOutside,
+                    closeConditional,
+                    include,
+                }"
             >
             </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>
+            <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>
@@ -45,9 +63,10 @@ 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
@@ -81,7 +100,7 @@ export default {
         },
         filteredHeight() {
             if (!this.render) {
-                return 50
+                return 100
             } else if (this.height !== null) {
                 return this.height
             } else {
@@ -90,6 +109,7 @@ export default {
         },
         config() {
             return {
+                draggable_modal: true,
                 height: this.filteredHeight,
                 visual: false,
                 forced_root_block: this.root_block,
@@ -263,9 +283,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',
@@ -284,6 +306,10 @@ export default {
                 importcss_append: true,
             }
         },
+
+        elementBody() {
+            return [document.querySelector('.tinymce-included-' + this.seed)]
+        },
     },
     methods: {
         onEditorFocus() {
@@ -292,12 +318,39 @@ export default {
                 this.render = true
             }
         },
-        onClickCollapse() {
+        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
+        },
+
+        closeConditional(e) {
+            const targetClass = e.target.className
+            let parentNode
+            //check if target is svg element
+            if (e.target.matches('svg') || e.target instanceof SVGElement) {
+                parentNode = e.target.parentNode.parentNode
+            } else {
+                parentNode = e.target.parentNode
+            }
+
+            if (
+                parentNode.closest('.tinymce-included-' + this.seed) ||
+                _.includes(targetClass, 'tinymce-included-' + this.seed) ||
+                _.includes(targetClass, 'tox') ||
+                _.includes(parentNode.className, 'tox')
+            ) {
+                return false
+            } else {
+                this.onClickOutside()
+                return true
+            }
+        },
     },
 }
 </script>