@windward/core 0.7.0 → 0.8.0

package/components/Content/Blocks/Accordion.vue

@@ -7,9 +7,17 @@
                 block.metadata.config.instructions
             "
         >
-            <h2>{{ block.metadata.config.title }}</h2>
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
 
-            <p>{{ block.metadata.config.instructions }}</p>
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
         </v-container>
         <v-expansion-panels
             :value="selectedPanels"

package/components/Content/Blocks/BlockQuote.vue

@@ -7,10 +7,14 @@
             "
         >
             <v-col cols="12" class="pb-0">
-                <h2 v-if="block.metadata.config.title">
+                <h2 v-if="block.metadata.config.title" tabindex="0">
                     {{ block.metadata.config.title }}
                 </h2>
-                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                <p
+                    v-if="block.metadata.config.instructions"
+                    tabindex="0"
+                    class="pt-3"
+                >
                     {{ block.metadata.config.instructions }}
                 </p>
             </v-col>

package/components/Content/Blocks/ClickableIcons.vue

@@ -1,9 +1,17 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <h2>{{ block.metadata.config.title }}</h2>
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
 
-            <p>{{ block.metadata.config.description }}</p>
+            <p
+                v-if="block.metadata.config.description"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.description }}
+            </p>
 
             <p>
                 {{

package/components/Content/Blocks/Email.vue

@@ -7,10 +7,14 @@
             "
         >
             <v-col cols="12" class="pa-0">
-                <h2 v-if="block.metadata.config.title">
+                <h2 v-if="block.metadata.config.title" tabindex="0">
                     {{ block.metadata.config.title }}
                 </h2>
-                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                <p
+                    v-if="block.metadata.config.instructions"
+                    tabindex="0"
+                    class="pt-3"
+                >
                     {{ block.metadata.config.instructions }}
                 </p>
             </v-col>
@@ -171,11 +175,7 @@
                         >
                             <v-row class="pt-4">
                                 <v-col cols="10" class="pa-0">
-                                    <v-btn
-                                        elevation="0"
-                                        color="primary"
-                                        text
-                                    >
+                                    <v-btn elevation="0" color="primary" text>
                                         <v-icon>mdi-reply</v-icon>
                                         {{
                                             $t(

package/components/Content/Blocks/HorizontalRule.vue

@@ -25,6 +25,8 @@ export default {
     },
     data() {
         return {
+            saveState: false,
+            trackable: false,
             isDashed: 'solid',
         }
     },

package/components/Content/Blocks/OpenResponse.vue

@@ -1,5 +1,24 @@
 <template>
     <div>
+        <v-container
+            class="pa-0"
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+        >
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
+
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
+        </v-container>
         <div v-if="stateLoaded">
             <div v-if="block.body && !submitted">
                 <TextViewer v-model="block.body" :height="200"></TextViewer>
@@ -118,6 +137,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
         if (_.isEmpty(this.block.metadata.config.sample_response)) {
             this.block.metadata.config.sample_response = ''
         }

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -1,7 +1,13 @@
 <template>
     <div>
         <div v-if="block.metadata.config.linked.length">
-            <v-btn elevation="0" color="primary" outlined block @click="onCollate">
+            <v-btn
+                elevation="0"
+                color="primary"
+                outlined
+                block
+                @click="onCollate"
+            >
                 <v-icon class="mr-3">mdi-file-word</v-icon>
                 {{
                     $t(
@@ -74,19 +80,14 @@ export default {
                         'metadata->block->block_id',
                         this.block.metadata.config.linked
                     )
+                    .with('contentBlock')
                     .get()
-                let collated = ''
-                const sortedStates = []
 
-                // Sorted the states based on the linked order
-                this.block.metadata.config.linked.forEach((linkedId) => {
-                    const found = userState.find((state) => {
-                        return state.metadata.block.block_id === linkedId
-                    })
-                    if (found) {
-                        sortedStates.push(found)
-                    }
-                })
+                let collated = ''
+                // sort by order on the page
+                const sortedStates = userState.sort((a, b) =>
+                    a.content_block.order < b.content_block.order ? -1 : 1
+                )
 
                 sortedStates.forEach((state) => {
                     // Prepend the prompt from the state if include prompts is enabled

package/components/Content/Blocks/ScenarioChoice.vue

@@ -1,8 +1,16 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <h2>{{ block.metadata.config.title }}</h2>
-            <p>{{ block.metadata.config.description }}</p>
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
+            <p
+                v-if="block.metadata.config.description"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.description }}
+            </p>
             <div
                 v-if="choiceIndex !== null && block.metadata.config.show_reset"
                 class="text-right"

package/components/Content/Blocks/Tab.vue

@@ -1,9 +1,23 @@
 <template>
     <div>
-        <v-container class="pa-0">
-            <h2>{{ block.metadata.config.title }}</h2>
+        <v-container
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+            class="pa-0"
+        >
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
 
-            <p>{{ block.metadata.config.instructions }}</p>
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
         </v-container>
         <v-container class="pa-0">
             <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>

package/components/Content/Blocks/UserUpload.vue

@@ -1,12 +1,14 @@
 <template>
     <v-container class="pa-0">
         <div>
-            <h2 v-if="block.metadata.config.title">
+            <h2 v-if="block.metadata.config.title" tabindex="0">
                 {{ block.metadata.config.title }}
             </h2>
             <v-row>
-                <v-col cols="12">
-                  <p>{{ block.metadata.config.instructions }}</p>
+                <v-col v-if="block.metadata.config.instructions" cols="12">
+                    <p tabindex="0" class="pt-3">
+                        {{ block.metadata.config.instructions }}
+                    </p>
                 </v-col>
                 <v-col v-if="!blockExists" cols="12">
                     <v-alert color="warning">

package/components/Content/Blocks/Video.vue

@@ -1,5 +1,12 @@
 <template>
     <div>
+        <h2 v-if="block.metadata.config.title" tabindex="0">
+            {{ block.metadata.config.title }}
+        </h2>
+        <p v-if="block.metadata.config.description" tabindex="0" class="pt-3">
+            {{ block.metadata.config.description }}
+        </p>
+
         <v-card v-if="render && !hasSource">
             <v-card-title>
                 <v-icon class="mr-2">mdi-cloud-question</v-icon>
@@ -19,12 +26,7 @@
             type="image, image, list-item-avatar"
             class="reload-skeleton"
         ></v-skeleton-loader>
-        <h2 v-if="block.metadata.config.title">
-            {{ block.metadata.config.title }}
-        </h2>
-        <p v-if="block.metadata.config.description" class="pb-0 mb-0">
-            {{ block.metadata.config.description }}
-        </p>
+
         <VuetifyPlayer
             v-if="hasSource"
             :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
@@ -57,6 +59,8 @@
                 block.metadata.config.attributes.playlistautoadvance
             "
             :playbackrates="block.metadata.config.attributes.playbackrates"
+            @seeking="onSeeking"
+            @timeupdate="onTimeupdate"
         />
         <!--    display first note in the playlist for now    -->
         <v-alert
@@ -213,7 +217,6 @@ export default {
     },
     data() {
         return {
-            saveState: false,
             fileTab: null,
             // Default config settings
             defaultConfig: {
@@ -283,6 +286,10 @@ export default {
                     },*/
                 ],
             },
+            tracking: {
+                hasSkipped: false,
+                percentComplete: 0,
+            },
         }
     },
     beforeMount() {
@@ -303,6 +310,25 @@ export default {
         }
     },
     methods: {
+        onSeeking(e) {
+            this.tracking.hasSkipped = true
+        },
+        onTimeupdate(e) {
+            // If you were seeking / skipped parts only "resume" if you start back from where you left off
+            if (e.current_percent <= this.tracking.percentComplete) {
+                this.tracking.hasSkipped = false
+            }
+
+            if (!this.tracking.hasSkipped) {
+                if (e.current_percent >= this.tracking.percentComplete) {
+                    this.tracking.percentComplete = e.current_percent
+                }
+
+                if (!this.completed && this.tracking.percentComplete >= 90) {
+                    this.emitCompleted()
+                }
+            }
+        },
         async onBeforeSave() {
             this.block.body = 'video'
         },

package/components/Settings/AccordionSettings.vue

@@ -3,12 +3,12 @@
         <v-container class="pa-0">
             <v-row class="pl-3 pr-3">
                 <v-text-field
+                    id="block-settings-title"
                     v-model="block.metadata.config.title"
                     :autofocus="true"
-                    :rules="validation.shortInputRules"
-                    :counter="50"
+                    :rules="$Validation.getRule('block.title')"
+                    :counter="$Validation.getLimit('block.title')"
                     outlined
-                    id="title"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.title'
@@ -17,9 +17,10 @@
                     :disabled="render"
                 ></v-text-field>
                 <v-textarea
+                    id="block-settings-instructions"
                     v-model="block.metadata.config.instructions"
-                    :rules="validation.instructionRule"
-                    :counter="255"
+                    :rules="$Validation.getRule('block.instructions')"
+                    :counter="$Validation.getLimit('block.instructions')"
                     outlined
                     :label="$t('components.content.settings.base.instructions')"
                     :disabled="render"
@@ -46,8 +47,8 @@
                         <v-text-field
                             v-model="block.metadata.config.items[index].header"
                             :autofocus="true"
-                            :counter="50"
-                            :rules="validation.shortInputRules"
+                            :rules="$Validation.getRule('shortInput')"
+                            :counter="$Validation.getLimit('shortInput')"
                             outlined
                             :label="
                                 $t('components.content.settings.base.title')
@@ -110,6 +111,7 @@
                                         'windward.core.shared.settings.alt_image'
                                     )
                                 "
+                                :disabled="render"
                             ></v-text-field>
                             <v-text-field
                                 v-model="
@@ -125,6 +127,7 @@
                                         'windward.core.shared.settings.aria_described'
                                     )
                                 "
+                                :disabled="render"
                             ></v-text-field>
                             <ContentBlockAsset
                                 v-model="
@@ -132,7 +135,16 @@
                                 "
                                 mimes="image/png,image/jpeg"
                                 :assets.sync="block.assets"
-                            ></ContentBlockAsset>
+                                outlined
+                            >
+                                <template #title>
+                                    {{
+                                        $t(
+                                            'windward.core.components.settings.image.place_image'
+                                        )
+                                    }}
+                                </template>
+                            </ContentBlockAsset>
                         </v-container>
                     </v-container>
                 </template>
@@ -222,32 +234,6 @@ export default {
         return {
             expansionPanelKey: '0',
             loading: false,
-            validation: {
-                shortInputRules: [
-                    (v) => {
-                        if (v && v.length >= 50) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [50]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                instructionRule: [
-                    (v) => {
-                        if (v && v.length >= 255) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [255]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-            },
         }
     },
     beforeDestroy() {

package/components/Settings/BlockQuoteSettings.vue

@@ -2,21 +2,23 @@
     <div>
         <v-container class="pa-0">
             <v-text-field
+                id="block-settings-title"
+                ref="title"
                 v-model="block.metadata.config.title"
                 :autofocus="true"
                 outlined
-                :counter="50"
-                :rules="validation.shortInputRules"
+                :counter="$Validation.getLimit('block.title')"
+                :rules="$Validation.getRule('block.title')"
                 :label="$t('components.content.settings.base.title')"
-                ref="title"
                 :disabled="render"
             ></v-text-field>
             <v-textarea
+                id="block-settings-instructions"
                 v-model="block.metadata.config.instructions"
                 outlined
                 auto-grow
-                :rules="validation.longInputRules"
-                :counter="255"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
                 :label="$t('components.content.settings.base.instructions')"
                 :disabled="render"
             ></v-textarea>
@@ -25,10 +27,10 @@
         <v-container class="pa-0">
             <TextEditor
                 v-model="block.metadata.config.block_quote.quote"
-                :rules="validation.longInputRules"
+                :rules="$Validation.getRule('longInput')"
+                :counter="$Validation.getLimit('longInput')"
                 outlined
                 auto-grow
-                :counter="255"
                 :height="200"
                 :label="
                     $t('windward.core.components.settings.block_quote.body')
@@ -40,8 +42,8 @@
         <v-container class="pa-0">
             <v-text-field
                 v-model="block.metadata.config.block_quote.author"
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 outlined
                 auto-grow
                 :label="
@@ -52,8 +54,8 @@
             <v-text-field
                 v-model="block.metadata.config.block_quote.author_title"
                 outlined
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 auto-grow
                 :label="
                     $t('windward.core.components.settings.block_quote.title')
@@ -62,8 +64,8 @@
             ></v-text-field>
             <v-text-field
                 v-model="block.metadata.config.block_quote.organization"
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 outlined
                 auto-grow
                 :label="$t('windward.core.components.settings.block_quote.org')"
@@ -72,8 +74,8 @@
             <v-text-field
                 v-model="block.metadata.config.block_quote.source_title"
                 outlined
-                :rules="validation.shortInputRules"
-                :counter="50"
+                :rules="$Validation.getRule('shortInput')"
+                :counter="$Validation.getLimit('shortInput')"
                 auto-grow
                 :label="
                     $t(
@@ -182,32 +184,6 @@ export default {
                     value: 'online_journal',
                 },
             ],
-            validation: {
-                shortInputRules: [
-                    (v) => {
-                        if (v && v.length >= 50) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [50]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                longInputRules: [
-                    (v) => {
-                        if (v && v.length >= 255) {
-                            return this.$t(
-                                'windward.core.shared.settings.errors.input_limitations',
-                                [255]
-                            )
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-            },
         }
     },
     methods: {},

package/components/Settings/ClickableIconsSettings.vue

@@ -3,12 +3,12 @@
         <v-container class="pa-0">
             <v-col class="pa-0">
                 <v-text-field
+                    id="block-settings-title"
                     v-model="block.metadata.config.title"
                     :autofocus="true"
-                    :rules="validation.shortInputRules"
-                    :counter="50"
+                    :rules="$Validation.getRule('block.title')"
+                    :counter="$Validation.getLimit('block.title')"
                     outlined
-                    id="title"
                     :label="
                         $t(
                             'windward.core.components.settings.clickable_icon.title'
@@ -17,9 +17,10 @@
                     :disabled="render"
                 ></v-text-field>
                 <v-textarea
+                    id="block-settings-instructions"
                     v-model="block.metadata.config.description"
-                    :rules="validation.instructionRule"
-                    :counter="255"
+                    :rules="$Validation.getRule('block.instructions')"
+                    :counter="$Validation.getLimit('block.instructions')"
                     outlined
                     :label="$t('components.content.settings.base.instructions')"
                     :disabled="render"
@@ -157,16 +158,25 @@
                                 class="mb-4"
                                 mimes="image/jpeg,image/png,image/gif"
                                 :disabled="render"
+                                outlined
                                 @click:file="onFileSelect($event, index)"
-                            ></ContentBlockAsset>
+                            >
+                                <template #title>
+                                    {{
+                                        $t(
+                                            'windward.core.components.settings.image.place_image'
+                                        )
+                                    }}
+                                </template>
+                            </ContentBlockAsset>
                             <v-text-field
                                 v-model="
                                     block.metadata.config.items[index].title
                                 "
                                 :id="'item-' + index + '-title'"
                                 outlined
-                                :counter="50"
-                                :rules="validation.shortInputRules"
+                                :rules="$Validation.getRule('shortInput')"
+                                :counter="$Validation.getLimit('shortInput')"
                                 :label="
                                     $t(
                                         'windward.core.components.settings.clickable_icon.item_title'
@@ -238,38 +248,6 @@ export default {
     data() {
         return {
             validation: {
-                shortInputRules: [
-                    (v) => {
-                        if (v) {
-                            if (v.length <= 50) {
-                                return true
-                            } else {
-                                return this.$t(
-                                    'windward.core.shared.settings.errors.input_limitations',
-                                    [50]
-                                )
-                            }
-                        } else {
-                            return true
-                        }
-                    },
-                ],
-                instructionRule: [
-                    (v) => {
-                        if (v) {
-                            if (v.length <= 255) {
-                                return true
-                            } else {
-                                return this.$t(
-                                    'windward.core.shared.settings.errors.input_limitations',
-                                    [255]
-                                )
-                            }
-                        } else {
-                            return true
-                        }
-                    },
-                ],
                 iconRules: [
                     (v) => {
                         if (v) {