@windward/core 0.0.8 → 0.0.9

package/components/Content/Blocks/ClickableIcons.vue

@@ -1,42 +1,60 @@
 <template>
     <div>
         <v-container>
-            <v-row no-gutters>
-                <h3>{{ block.metadata.config.title }}</h3>
-            </v-row>
-            <v-row no-gutters>
-                <h4>{{ block.metadata.config.description }}</h4>
-            </v-row>
-            <v-row no-gutters>
-                <p>
-                    {{
-                        $t(
-                            'windward.core.components.settings.clickable_icon.information'
-                        )
-                    }}
-                </p>
-            </v-row>
+            <h3>{{ block.metadata.config.title }}</h3>
+
+            <h4>{{ block.metadata.config.description }}</h4>
+
+            <p>
+                {{
+                    $t(
+                        'windward.core.components.settings.clickable_icon.information'
+                    )
+                }}
+            </p>
         </v-container>
         <v-container>
             <v-row
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
                 no-gutters
+                :class="rowClass(itemIndex)"
             >
                 <v-col cols="2">
                     <v-btn
                         class="pt-8 pb-8 outlined-button mb-4"
-                        :color="itemColor(item.color)"
+                        :color="itemColor(itemIndex)"
+                        :fab="block.metadata.config.display.round_icon"
                         x-large
                         outlined
                         @click="item.active = !item.active"
                     >
-                        <v-icon>{{ onHandleHtmlEntities(item.icon) }}</v-icon>
+                        <v-icon v-if="isIcon(item.icon)" class="black--text">{{
+                            item.icon
+                        }}</v-icon>
+                        <span v-else :class="iconClass + ' black--text'">{{
+                            decode(item.icon)
+                        }}</span>
                     </v-btn>
                 </v-col>
-                <v-col cols="10" v-if="item.active">
-                    <h4>{{ item.title }}</h4>
-                    <TextViewer v-model="item.body"></TextViewer>
+                <v-col cols="10">
+                    <h4
+                        v-if="
+                            block.metadata.config.display.show_title ||
+                            item.active
+                        "
+                        class="mt-4"
+                        role="button"
+                        @click="item.active = !item.active"
+                    >
+                        {{ item.title }}
+                    </h4>
+                    <v-expand-transition>
+                        <div v-if="item.active">
+                            <v-divider light class="my-4" />
+                            <TextViewer v-model="item.body"></TextViewer>
+                        </div>
+                    </v-expand-transition>
                 </v-col>
             </v-row>
         </v-container>
@@ -44,6 +62,7 @@
 </template>
 <script>
 import _ from 'lodash'
+import he from 'he'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
 
@@ -53,13 +72,77 @@ export default {
         TextViewer,
     },
     extends: BaseContentBlock,
+    data() {
+        return {}
+    },
     computed: {
+        decode() {
+            return (str) => {
+                return he.decode(str || '')
+            }
+        },
+        rowClass() {
+            return (itemIndex) => {
+                let classes = 'option-container mb-4 pa-1'
+                // If show background is enabled and the item has a color
+                // Otherwise we do NOT want to apply the `black--text` class since there's no color
+                // And things will look bad in dark mode
+                if (
+                    _.get(
+                        this.block,
+                        'metadata.config.display.show_background',
+                        false
+                    ) &&
+                    this.itemColor(itemIndex)
+                ) {
+                    classes += ' ' + this.itemColor(itemIndex) + ' black--text'
+                }
+                return classes
+            }
+        },
+        iconClass() {
+            let classes = 'text-icon'
+            if (
+                _.get(this.block, 'metadata.config.display.italic_icon', false)
+            ) {
+                classes += ' font-italic'
+            }
+            return classes
+        },
         itemColor() {
-            return (v) => {
-                if (_.isObject(v)) {
-                    return _.get(v, 'class', '')
+            return (itemIndex) => {
+                // If autocolor is enabled then calculate the color on the index
+                if (this.block.metadata.config.display.autocolor) {
+                    const colors = [
+                        'light-blue lighten-4',
+                        'light-green lighten-4',
+                        'yellow lighten-4',
+                        'orange lighten-3',
+                        'red lighten-3',
+                        'deep-purple lighten-3',
+                    ]
+                    let colorIndex = itemIndex
+                    // If we exceed the above list of colors loop back around to the beginning
+                    if (colorIndex >= colors.length) {
+                        colorIndex =
+                            colorIndex -
+                            Math.floor(colorIndex / colors.length) *
+                                colors.length
+                    }
+
+                    return colors[colorIndex]
                 } else {
-                    return v
+                    // Otherwise get the predefined color
+                    const color = _.get(
+                        this.block,
+                        'metadata.config.items[' + itemIndex + '].color',
+                        ''
+                    )
+                    if (_.isObject(color)) {
+                        return _.get(color, 'class', '')
+                    } else {
+                        return color
+                    }
                 }
             }
         },
@@ -76,32 +159,37 @@ export default {
         if (_.isEmpty(this.block.metadata.config.description)) {
             this.block.metadata.config.description = ''
         }
-        if (this.block.metadata.config.items) {
-            this.block.metadata.config.items.forEach((element) => {
-                element.active = false
-            })
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
         }
-    },
-    data() {
-        return {
-            api_key: process.env.TINY_MCE_API_KEY,
-            title: 'Title',
-            displayText: false,
+        if (this.block.metadata.config.items.length) {
+            for (const index in this.block.metadata.config.items) {
+                this.block.metadata.config.items[index].active = false
+            }
         }
     },
     methods: {
-        onHandleHtmlEntities(str) {
-            let txt = document.createElement('textarea')
-
-            txt.innerHTML = str
-
-            return txt.value
+        isIcon(str) {
+            return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
     },
 }
 </script>
 <style scoped>
+.option-container {
+    border-radius: 1rem;
+}
 .outlined-button {
     border-width: 4px;
+    background: #fff;
+}
+.text-icon {
+    font-size: 1.5rem;
 }
 </style>

package/components/Content/Blocks/Image.vue

@@ -25,7 +25,7 @@
                 :src="block.body"
                 contain
             >
-                <template v-slot:placeholder>
+                <template #placeholder>
                     <v-skeleton-loader
                         type="image, image, list-item-avatar"
                         height="100%"
@@ -121,7 +121,7 @@ export default {
     border-radius: 3px;
 }
 .img-holder {
-    max-height: 300px;
+    height: 300px;
 }
 .img-white {
     background: #fff;

package/components/Content/Blocks/ScenarioChoice.vue

@@ -0,0 +1,262 @@
+<template>
+    <div>
+        <v-container>
+            <h3>{{ block.metadata.config.title }}</h3>
+            <h4>{{ block.metadata.config.description }}</h4>
+            <p>
+                {{
+                    $t(
+                        'windward.core.components.content.blocks.scenario_choice.information'
+                    )
+                }}
+            </p>
+            <div
+                v-if="choiceIndex !== null && block.metadata.config.show_reset"
+                class="text-right"
+            >
+                <v-btn color="primary" outlined @click="onClickReset">
+                    {{
+                        $t(
+                            'windward.core.components.content.blocks.scenario_choice.try_again'
+                        )
+                    }}
+                </v-btn>
+            </div>
+        </v-container>
+        <v-container>
+            <v-row
+                v-for="(item, itemIndex) in block.metadata.config.items"
+                :key="itemIndex"
+                no-gutters
+                :class="rowClass(item, itemIndex)"
+            >
+                <v-col cols="2" class="text-center">
+                    <div
+                        class="pt-8 pb-8 text-icon-container mb-4 mx-auto"
+                        role="button"
+                        @click="onClickItem(itemIndex)"
+                    >
+                        <span :class="iconClass(itemIndex)">{{
+                            itemIcon(itemIndex)
+                        }}</span>
+                    </div>
+                    <strong v-if="choiceIndex === itemIndex">
+                        {{
+                            $t(
+                                'windward.core.components.content.blocks.scenario_choice.selected_choice'
+                            )
+                        }}
+                    </strong>
+                </v-col>
+                <v-col cols="10">
+                    <h4
+                        role="button"
+                        class="mt-4"
+                        @click="onClickItem(itemIndex)"
+                    >
+                        {{ item.title }}
+                    </h4>
+
+                    <v-expand-transition>
+                        <div v-if="choiceIndex !== null">
+                            <v-divider light class="my-4" />
+                            <TextViewer v-model="item.body"></TextViewer>
+                            <a
+                                v-if="linkedPage !== null"
+                                class="white--text text-decoration-underline"
+                                @click="
+                                    onClickLink(linkedPage.course_content_id)
+                                "
+                            >
+                                {{ linkedPage.text }}
+                            </a>
+                        </div>
+                    </v-expand-transition>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import TextViewer from '~/components/Text/TextViewer'
+
+export default {
+    name: 'ClickableIcons',
+    components: {
+        TextViewer,
+    },
+    extends: BaseContentBlock,
+    data() {
+        return {
+            choiceIndex: null,
+        }
+    },
+    computed: {
+        rowClass() {
+            return (item, itemIndex) => {
+                let classes = 'option-container mb-4 pa-1 black--text '
+
+                // If an option was picked set the background to correct / incorrect
+                // Otherwise do the autocolor
+                if (this.choiceIndex !== null && item.correct) {
+                    classes += 'success'
+                } else if (this.choiceIndex !== null && !item.correct) {
+                    classes += 'error'
+                } else {
+                    classes += this.itemColor(itemIndex)
+                }
+                return classes
+            }
+        },
+        iconClass() {
+            return (itemIndex) => {
+                let classes = 'text-icon '
+                // Add the appropriate color / modifiers to make the icon color
+                const color = this.itemColor(itemIndex).split(' ')
+                classes += color[0] + '--text text--' + color[1]
+
+                return classes
+            }
+        },
+        itemColor() {
+            return (itemIndex) => {
+                const colors = [
+                    'light-blue lighten-4',
+                    'light-green lighten-4',
+                    'yellow lighten-4',
+                    'orange lighten-3',
+                    'red lighten-3',
+                    'deep-purple lighten-3',
+                ]
+                let colorIndex = itemIndex
+                // If we exceed the above list of colors loop back around to the beginning
+                if (colorIndex >= colors.length) {
+                    colorIndex =
+                        colorIndex -
+                        Math.floor(colorIndex / colors.length) * colors.length
+                }
+
+                return colors[colorIndex]
+            }
+        },
+        itemIcon() {
+            return (itemIndex) => {
+                if (isNaN(itemIndex) || itemIndex < 0) {
+                    return 'ERR'
+                }
+                // Return a letter if the display style is letter (with super complicated logic)
+                // ... or return the index + 1 for number styles
+                if (this.block.metadata.config.display_style === 'letter') {
+                    if (itemIndex <= 25) {
+                        // 65 is where capitals start
+                        return String.fromCharCode(65 + itemIndex)
+                    } else {
+                        // Calculate two character AA-ZZ or a max list length of 625 which we will never hit
+                        // I'd be surprised if we ever get to AA tbh but I'm gonna support it just in case
+                        const prependIndex = Math.floor(itemIndex / 26) - 1
+
+                        return (
+                            String.fromCharCode(65 + prependIndex) +
+                            String.fromCharCode(
+                                65 + (itemIndex - 26 * (prependIndex + 1))
+                            )
+                        )
+                    }
+                } else if (
+                    this.block.metadata.config.display_style === 'number'
+                ) {
+                    return itemIndex + 1
+                }
+            }
+        },
+        linkedPage() {
+            const isLinked =
+                !_.isEmpty(this.block.metadata.config.link_content_id) &&
+                !_.isEmpty(this.block.metadata.config.link_text)
+
+            if (isLinked) {
+                const flatTree = this.$ContentService.getFlatTree()
+                // Find the course_content_id that this content id is referencing
+                const pages = flatTree.filter((c) => {
+                    return (
+                        c.content_id ===
+                        this.block.metadata.config.link_content_id
+                    )
+                })
+
+                // We found it, so return it otherwise null
+                if (pages.length > 0) {
+                    return {
+                        text: this.block.metadata.config.link_text,
+                        course_content_id: pages[0].id,
+                    }
+                } else {
+                    return null
+                }
+            } else {
+                return null
+            }
+        },
+    },
+    beforeMount() {
+        // Apply the default config
+        this.block.body = 'scenario choice'
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.description)) {
+            this.block.metadata.config.description = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.display_style)) {
+            this.block.metadata.config.display_style = 'letter'
+        }
+        if (_.isEmpty(this.block.metadata.config.link_content_id)) {
+            this.block.metadata.config.link_content_id = null
+        }
+        if (_.isEmpty(this.block.metadata.config.link_text)) {
+            this.block.metadata.config.link_text = null
+        }
+        if (!_.isBoolean(this.block.metadata.config.show_reset)) {
+            this.block.metadata.config.show_reset = false
+        }
+    },
+    methods: {
+        onClickReset() {
+            this.choiceIndex = null
+        },
+        onClickItem(itemIndex) {
+            // Only set the choice if it's null
+            if (this.choiceIndex === null) {
+                this.choiceIndex = itemIndex
+            }
+        },
+        onClickLink(id) {
+            this.$ContentService.set(id, { direct: true })
+        },
+    },
+}
+</script>
+<style scoped>
+.option-container {
+    border-radius: 1rem;
+}
+.text-icon-container {
+    background: #fff;
+    width: 5rem;
+    height: 5rem;
+    text-align: center;
+    line-height: 0;
+    margin: 1rem;
+    border-radius: 4rem;
+}
+.text-icon {
+    font-size: 4rem;
+    vertical-align: text-bottom;
+    filter: brightness(0.5);
+}
+</style>

package/components/Content/Blocks/Tab.vue

@@ -5,7 +5,7 @@
                 background-color="primary"
                 v-model="block.metadata.config.tab"
             >
-                <v-tabs-slider color="primary"></v-tabs-slider>
+                <v-tabs-slider></v-tabs-slider>
                 <v-tab
                     v-for="(tab, tabIndex) in block.metadata.config.items"
                     :key="tabIndex"
@@ -24,12 +24,7 @@
                     <v-container>
                         <TextViewer
                             v-if="!tabContent.expand"
-                            v-model="
-                                tabContent.content === '' ||
-                                tabContent.content === null
-                                    ? 'Item ' + (tabContentIndex + 1)
-                                    : tabContent.content
-                            "
+                            v-model="tabContent.content"
                             text-viewer
                         ></TextViewer>
                         <TextEditor