@windward/core 0.0.8 → 0.1.0

package/components/Settings/TabSettings.vue

@@ -1,60 +1,69 @@
 <template>
     <div>
-        <v-btn color="primary" @click="onAddElement" class="fullWidth">
-            <v-icon>mdi-plus</v-icon>
-            {{ $t('windward.core.components.content.blocks.tab.add_tab') }}
-        </v-btn>
-        <v-expansion-panels flat v-model="block.metadata.config.tab">
-            <v-expansion-panel
-                v-for="(item, itemIndex) in block.metadata.config.items"
-                :key="itemIndex"
-                class="elevation-0"
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-divider class="my-4 primary"></v-divider>
+            <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
+            <SortableExpansionPanel
+                v-model="block.metadata.config.items"
+                @change="onDragged"
+                @click:close="onRemoveElement($event)"
             >
-                <v-expansion-panel-header>{{
-                    'Tab ' + (itemIndex + 1)
-                }}</v-expansion-panel-header>
-                <v-expansion-panel-content :key="expansionPanelKey">
-                    <v-text-field
-                        v-model="
-                            block.metadata.config.items[itemIndex].tabHeader
-                        "
-                        :placeholder="'item ' + (itemIndex + 1)"
-                    ></v-text-field>
-                    <v-btn @click="onToggleExpand(item)" class="mb-3">
-                        <v-icon
-                            v-if="
-                                !block.metadata.config.items[itemIndex].expand
+                <template #header="{ item }">
+                    {{ item.tabHeader !== '' ? item.tabHeader : 'No Header' }}
+                </template>
+                <template #body="{ item, index }">
+                    <v-container :key="expansionPanelKey">
+                        <p class="p-label">
+                            {{
+                                $t(
+                                    'windward.core.components.settings.tab.header'
+                                )
+                            }}
+                        </p>
+                        <v-text-field
+                            outlined
+                            :autofocus="true"
+                            v-model="
+                                block.metadata.config.items[index].tabHeader
                             "
-                            >mdi-arrow-expand-all</v-icon
-                        >
-                        <v-icon
-                            v-if="block.metadata.config.items[itemIndex].expand"
-                        >
-                            mdi-arrow-collapse-all
-                        </v-icon>
-                    </v-btn>
-                    <br />
-                    <TextEditor
-                        :api_key="api_key"
-                        v-model="block.metadata.config.items[itemIndex].content"
-                        v-show="!block.metadata.config.items[itemIndex].expand"
-                    ></TextEditor>
-                    <br />
-                    <v-btn
-                        color="primary"
-                        @click="onRemoveElement(itemIndex)"
-                        class="fullWidth"
-                    >
-                        <v-icon>mdi-minus</v-icon>
-                        {{
-                            $t(
-                                'windward.core.components.content.blocks.tab.delete_tab'
-                            )
-                        }}
-                    </v-btn>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-        </v-expansion-panels>
+                            :placeholder="'item ' + (index + 1)"
+                        ></v-text-field>
+                        <v-btn @click="onToggleExpand(index)" class="mb-3">
+                            <v-icon
+                                v-if="
+                                    !block.metadata.config.items[index].expand
+                                "
+                                >mdi-arrow-expand-all</v-icon
+                            >
+                            <v-icon
+                                v-if="block.metadata.config.items[index].expand"
+                            >
+                                mdi-arrow-collapse-all
+                            </v-icon>
+                        </v-btn>
+                        <TextEditor
+                            v-model="block.metadata.config.items[index].content"
+                            v-if="!item.expand"
+                            :key="textEditorUpdateKey"
+                        ></TextEditor>
+                    </v-container>
+                </template>
+            </SortableExpansionPanel>
+            <v-row justify="center" class="my-4">
+                <v-btn color="primary" @click="onAddElement">
+                    <v-icon>mdi-plus</v-icon>
+                    {{ $t('windward.core.components.settings.tab.add_tab') }}
+                </v-btn>
+            </v-row>
+        </v-form>
+        <div v-if="loading" class="text-center">
+            <v-progress-circular
+                :size="70"
+                :width="7"
+                color="primary"
+                indeterminate
+            ></v-progress-circular>
+        </div>
     </div>
 </template>
 
@@ -63,17 +72,20 @@ import _, { get } from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'TabSettings',
-    components: { TextEditor },
+    components: { TextEditor, SortableExpansionPanel },
     extends: BaseContentSettings,
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = ''
+            this.block.body = this.$t(
+                'windward.core.components.settings.tab.tab'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}
@@ -93,12 +105,13 @@ export default {
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
         }
-        this.block.body = 'tab'
     },
     data() {
         return {
             expansionPanelKey: '0',
-            api_key: process.env.TINY_MCE_API_KEY,
+            textEditorUpdateKey: Crypto.id(),
+            valid: true,
+            loading: false,
         }
     },
     mounted() {
@@ -111,7 +124,6 @@ export default {
             clearTimeout(this.debouncer)
         }
     },
-
     methods: {
         onAddElement() {
             const defaultObject = {
@@ -125,9 +137,13 @@ export default {
             this.block.metadata.config.items.splice(index, 1)
             this.expansionPanelKey = Crypto.id()
         },
-        onToggleExpand(item) {
+        onToggleExpand(index) {
             this.expansionPanelKey = Crypto.id()
-            return (item.expand = !item.expand)
+            return (this.block.metadata.config.items[index].expand =
+                !this.block.metadata.config.items[index].expand)
+        },
+        onDragged() {
+            this.textEditorUpdateKey = Crypto.id()
         },
     },
 }
@@ -136,7 +152,8 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.fullWidth {
-    width: 100%;
+.p-label {
+    font-size: 16px;
+    font-weight: 500;
 }
 </style>

package/components/Settings/TextEditorSettings.vue

@@ -100,9 +100,7 @@
         <br />
         <text-editor
             v-model="block.body"
-            v-show="
-                settingSelector.includes(1) && !block.metadata.config.expand
-            "
+            v-if="settingSelector.includes(1) && !block.metadata.config.expand"
             autofill
         ></text-editor>
         <v-skeleton-loader

package/components/utils/FillInBlank/FillInBlankInput.vue

@@ -133,7 +133,10 @@ export default {
 
     computed: {
         answerIsCorrect() {
-            if (_.toLower(this.answer) === _.toLower(this.userInput)) {
+            if (
+                _.trim(_.toLower(this.answer)) ===
+                _.trim(_.toLower(this.userInput))
+            ) {
                 return true
             }
             return false

package/components/utils/MathExpressionEditor.vue

@@ -1,14 +1,23 @@
 <template>
     <div>
         <v-card flat class="py-12">
-            <label>Add Math Below</label>
-            <math-live-wrapper
-                ref="mathfield"
-                v-model="formula"
-                :options="options"
-                :value="value"
-                @change="submit"
-            ></math-live-wrapper>
+            <v-card-title>
+                {{
+                    $t(
+                        'windward.core.components.utils.math_expression_editor.title'
+                    )
+                }}
+            </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>
@@ -115,6 +124,7 @@
 import MathHelper from '../../helpers/MathHelper'
 import MathLiveWrapper from './MathLiveWrapper'
 import tinymceConfig from '../../config/tinymce.config'
+import Crypto from '~/helpers/Crypto'
 export default {
     components: { MathLiveWrapper },
     layout: 'plugin',
@@ -140,6 +150,7 @@ export default {
             tab: null,
             toggle_exclusive: true,
             panel: [],
+            mathElementId: '',
         }
     },
     computed: {
@@ -158,6 +169,7 @@ export default {
         },
     },
     beforeMount() {
+        this.mathElementId = Crypto.id()
         if (this.mode === 'standalone') {
             this.initStandaloneMode()
         }
@@ -172,7 +184,6 @@ export default {
                 '*'
             )
         }
-        this.$refs.mathfield.focus()
     },
     created() {
         if (this.mode === 'plugin') {
@@ -263,24 +274,28 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 /* stylelint-disable-next-line selector-type-no-unknown */
 math-field {
     min-height: 150px;
-    outline: 2px solid #64b5f6;
+    outline: 2px solid var(--v-primary-base);
     border-radius: 4px;
+    width: 100%;
+    background: var(--v-background-base);
+    color: var(--v-primary-base);
 }
 /* stylelint-disable-next-line selector-type-no-unknown */
 math-field:focus-within {
-    outline: 4px solid #52d70b;
+    outline: 2px solid var(--v-secondary-base);
     border-radius: 4px;
-    background: rgba(251, 187, 182, 0.1);
+    background: var(--v-background-base);
+    color: var(--v-primary-base);
 }
 .btn {
     cursor: pointer;
     margin: 0 5px 5px 0;
     border: 1px solid #595959;
-    background: white;
+    background: var(--v-background-base);
     border-radius: 5px;
     padding: 5px 10px;
     min-height: 40px;
@@ -288,7 +303,7 @@ math-field:focus-within {
 
 .btn:hover {
     background: #595959;
-    color: white;
+    color: var(--v-background-base);
 }
 .adjustFont {
     font-size: 12px !important;

package/components/utils/TinyMCEWrapper.vue

@@ -37,6 +37,7 @@ export default {
             default:
                 'undo redo | formatselect | fontsizeselect  | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | mathButton ',
         },
+        root_block: { type: String, required: false, default: 'div' },
     },
     beforeMount() {
         this.text = this.value
@@ -61,6 +62,7 @@ export default {
             return {
                 height: 500,
                 visual: false,
+                forced_root_block: this.root_block,
                 menubar: this.menubar,
                 menu: {
                     insert: {
@@ -190,7 +192,7 @@ export default {
                             contenteditable: 'true',
                             'data-feedback': btoa(
                                 this.$t(
-                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.default.description'
+                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.default_description'
                                 )
                             ),
                         },

package/helpers/FillInBlankHelper.ts

@@ -1,5 +1,3 @@
-import * as _ from "lodash";
-import GlossaryTerm from "~/helpers/GlossaryTerm";
 
 export default class FillInBlankHelper {
 

package/i18n/en-US/components/content/blocks/block_quote.ts

@@ -0,0 +1,3 @@
+export default {
+    body: 'Blockquote Body',
+}

package/i18n/en-US/components/content/blocks/index.ts

@@ -2,18 +2,20 @@ import user_upload from './user_upload'
 import image from './image'
 import video from './video'
 import table from './table'
-import tab from './tab'
 import feedback from './feedback'
 import open_response from './open_response'
 import open_response_collate from './open_response_collate'
+import scenarioChoice from './scenario_choice'
+import block_quote from './block_quote'
 
 export default {
     user_upload,
     image,
     video,
     table,
-    tab,
     feedback,
     open_response,
     open_response_collate,
+    scenario_choice: scenarioChoice,
+    block_quote
 }

package/i18n/en-US/components/content/blocks/scenario_choice.ts

@@ -0,0 +1,5 @@
+export default {
+    information: 'Click one of the items below to make a choice.',
+    try_again: 'Try again',
+    selected_choice: 'Your choice',
+}

package/i18n/en-US/components/settings/accordion.ts

@@ -0,0 +1,5 @@
+export default {
+    items: 'Accordion Items',
+    add: 'Add Accordion',
+    accordion: 'Accordion',
+}

package/i18n/en-US/components/settings/block_quote.ts

@@ -0,0 +1,9 @@
+export default {
+    block_quote: 'Block Quote',
+    body: 'Blockquote Body',
+    name: 'Name',
+    title: 'Title',
+    org: 'Organization',
+    source_title: 'Source Title',
+    type: 'Source Type',
+}

package/i18n/en-US/components/settings/clickable_icon.ts

@@ -2,8 +2,16 @@ export default {
     title: 'Title',
     description: 'Description',
     information: 'Click on each of the list items below for more information.',
+    no_icon: 'No Icon',
     item_icon: 'Item {0} icon',
     item_title: 'Item Title',
     item_color: 'Item Color',
     item_text: 'Item Text',
+    autocolor: 'Auto-color Options',
+    display: {
+        show_title: 'Always Show Title',
+        show_background: 'Show Background',
+        round_icon: 'Round Icons',
+        italic_icon: 'Italic Icons',
+    },
 }

package/i18n/en-US/components/settings/index.ts

@@ -5,13 +5,21 @@ import video from './video'
 import clickable_icon from './clickable_icon'
 import open_response from './open_response'
 import open_response_collate from './open_response_collate'
+import scenarioChoice from './scenario_choice'
+import accordion from './accordion'
+import tab from './tab'
+import block_quote from './block_quote'
 
 export default {
+    accordion,
     image,
     user_upload,
     text_editor,
+    tab,
     video,
     clickable_icon,
     open_response,
     open_response_collate,
+    scenario_choice: scenarioChoice,
+    block_quote,
 }

package/i18n/en-US/components/settings/scenario_choice.ts

@@ -0,0 +1,19 @@
+export default {
+    title: 'Title',
+    description: 'Description',
+    over_item_limit: 'Cannot add more items',
+    no_title: 'No Title',
+    item_title: 'Item Title',
+    item_text: 'Item Text',
+    correct_choice: 'Is Correct Choice',
+    show_reset: 'Allow Retries',
+    display_style: 'Display Style',
+    is_linked: 'Block links to a page',
+    link_content: 'Link Content',
+    link_text: 'Link Text',
+    link_required: 'Link text and target page are required',
+    style: {
+        letter: 'Letters',
+        number: 'Numbers',
+    },
+}

package/i18n/en-US/components/settings/tab.ts

@@ -0,0 +1,7 @@
+export default {
+    tab: 'Tab',
+    tabs: 'Tabs',
+    header: 'Tab Header',
+    add_tab: 'Add Tab',
+    delete_tab: 'Delete Tab',
+}

package/i18n/en-US/components/utils/FillInBlank/FillInBlankInput.ts

@@ -5,7 +5,7 @@ export default {
     check_answer: 'Click to check answer',
     close: 'Close',
     correct: 'Correct',
-    default_description: 'default description',
+    default_description: 'Your input is correct',
     incorrect: 'Incorrect',
     input_incorrect: "'{0}' is incorrect",
     reset: 'reset',

package/i18n/en-US/components/utils/index.ts

@@ -1,6 +1,8 @@
 import tiny_mce_wrapper from './tiny_mce_wrapper'
 import fill_in_the_blank from './FillInBlank/index'
+import math_expression_editor from './math_expression_editor'
 export default {
     tiny_mce_wrapper,
     fill_in_the_blank,
+    math_expression_editor,
 }

package/i18n/en-US/components/utils/math_expression_editor.ts

@@ -0,0 +1,3 @@
+export default {
+    title: 'Mathematical Expression editor',
+}

package/i18n/en-US/shared/content_blocks.ts

@@ -12,7 +12,9 @@ export default {
         image: 'Image',
         user_upload: 'User Upload',
         clickable_icons: 'Clickable Icons',
+        scenario_choice: 'Scenario Choice',
         feedback: 'Feedback',
+        block_quote: 'Block Quote',
     },
     grouping: {
         basic: 'Basic Components',

package/i18n/en-US/shared/settings.ts

@@ -8,10 +8,14 @@ export default {
         tab_settings: 'Tab Settings',
         text_editor: 'Text Editor Settings',
         clickable_icons: 'Clickable Icons Settings',
+        scenario_choice: 'Scenario Choice',
         accordion: 'Accordion Settings',
         video: 'Video Settings',
         table: 'Table Settings',
         math: 'Math Settings',
         feedback: 'Feedback Settings',
+        block_quote: 'Block Quote Settings',
+        title: 'Title',
+        instructions: 'Instructions',
     },
 }

package/i18n/es-ES/components/content/blocks/block_quote.ts

@@ -0,0 +1,3 @@
+export default {
+    body: 'Cuerpo de la cotización en bloque',
+}

package/i18n/es-ES/components/content/blocks/feedback.ts

@@ -4,6 +4,8 @@ export default {
     module: 'Módulo',
     preset: 'Preajustes',
     likert: 'Agregar preguntas tipo Likert estándar',
+    likert_directions:
+        'Haga clic para elegir la primera opción y luego use la pestaña para cambiar los grupos de botones y luego las flechas para navegar entre las opciones.',
     contact_mindedge: 'Póngase en contacto con Mindedge pregunta',
     open_response: 'Respuesta abierta',
     response_prompt: 'Proporcione comentarios sobre el curso a continuación',

package/i18n/es-ES/components/content/blocks/index.ts

@@ -2,18 +2,20 @@ import user_upload from './user_upload'
 import image from './image'
 import video from './video'
 import table from './table'
-import tab from './tab'
 import feedback from './feedback'
 import open_response from './open_response'
 import open_response_collate from './open_response_collate'
+import scenarioChoice from './scenario_choice'
+import block_quote from './block_quote'
 
 export default {
     user_upload,
     image,
     video,
     table,
-    tab,
     feedback,
     open_response,
     open_response_collate,
+    scenario_choice: scenarioChoice,
+    block_quote
 }

package/i18n/es-ES/components/content/blocks/scenario_choice.ts

@@ -0,0 +1,6 @@
+export default {
+    information:
+        'Haga clic en uno de los elementos siguientes para tomar una decisión.',
+    try_again: 'Inténtalo de nuevo',
+    selected_choice: 'Tu elección',
+}

package/i18n/es-ES/components/navigation/index.ts

@@ -1,7 +1,9 @@
+import ask_the_expert from './ask_the_expert'
 import user_upload from './user_upload'
 import image from './image'
 
 export default {
     user_upload,
     image,
+    ask_the_expert,
 }

package/i18n/es-ES/components/settings/accordion.ts

@@ -0,0 +1,5 @@
+export default {
+    items: 'Artículos de acordeón',
+    add: 'Agregar Acordeón',
+    accordion: 'Acordeón',
+}

package/i18n/es-ES/components/settings/block_quote.ts

@@ -0,0 +1,9 @@
+export default {
+    block_quote: 'Cita en bloque',
+    body: 'Cuerpo de la cita en bloque',
+    name: 'Nombre',
+    title: 'Título',
+    org: 'Organización',
+    source_title: 'Título de la fuente' ,
+    type: 'Tipo de fuente',
+}

package/i18n/es-ES/components/settings/clickable_icon.ts

@@ -3,8 +3,16 @@ export default {
     description: 'Descripción',
     information:
         'Haga clic en cada uno de los elementos de la lista a continuación para obtener más información.',
+    no_icon: 'Sin icono',
     item_icon: 'Ícono de elemento {0}',
     item_title: 'Título del artículo',
     item_color: 'Color del artículo',
     item_text: 'Texto del elemento',
+    autocolor: 'Opciones de color automático',
+    display: {
+        show_title: 'Mostrar siempre el título',
+        show_background: 'Mostrar fondo',
+        round_icon: 'Iconos redondos',
+        italic_icon: 'Iconos en cursiva',
+    },
 }

package/i18n/es-ES/components/settings/index.ts

@@ -5,13 +5,21 @@ import video from './video'
 import clickable_icon from './clickable_icon'
 import open_response from './open_response'
 import open_response_collate from './open_response_collate'
+import scenarioChoice from './scenario_choice'
+import accordion from './accordion'
+import tab from './tab'
+import block_quote from './block_quote'
 
 export default {
+    accordion,
     image,
     user_upload,
     text_editor,
+    tab,
     video,
     clickable_icon,
     open_response,
     open_response_collate,
+    scenario_choice: scenarioChoice,
+    block_quote
 }