@windward/core 0.0.8 → 0.1.0

package/components/Content/Blocks/BlockQuote.vue

@@ -0,0 +1,191 @@
+<template>
+    <v-container class="container-left-border">
+        <v-row
+            v-if="
+                block.metadata.config.title ||
+                block.metadata.config.instructions
+            "
+        >
+            <v-col cols="12" class="pb-0">
+                <h3 v-if="block.metadata.config.title">
+                    {{ block.metadata.config.title }}
+                </h3>
+                <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
+                    {{ block.metadata.config.instructions }}
+                </p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="1">
+                <v-icon color="primary">mdi-format-quote-open</v-icon>
+            </v-col>
+            <v-col cols="11" class="pl-0">
+                <p class="pt-2">
+                    {{ block.metadata.config.block_quote.quote }}
+                </p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12">
+                <p v-if="render">
+                    {{ finalcitation
+                    }}<span :class="classCitation">{{ finalsource }}</span>
+                </p>
+                <p v-if="!render">Citation Here</p>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockTab',
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        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.block_quote)) {
+            this.block.metadata.config.block_quote = {
+                quote: '',
+                author: '',
+                author_title: '',
+                organization: '',
+                source_title: '',
+                source_type: '',
+            }
+        }
+        this.block.body = 'block quote'
+    },
+    data() {
+        return {
+            finalcitation: '',
+            finalsource: '',
+            classCitation: '',
+        }
+    },
+    watch: {
+        render(newValue) {
+            if (newValue) {
+                this.createCitation()
+            }
+        },
+    },
+    mounted() {
+        this.createCitation()
+    },
+    methods: {
+        createCitation() {
+            this.finalcitation = ''
+            this.finalsource = ''
+            let counter = 0
+            for (const property in this.block.metadata.config.block_quote) {
+                // author details processed here counter added to see if a comma is needed before key
+                if (
+                    property !== 'quote' &&
+                    property !== 'source_type' &&
+                    property !== 'source_title' &&
+                    this.block.metadata.config.block_quote[property] !== null &&
+                    this.block.metadata.config.block_quote[property] !== ''
+                ) {
+                    if (counter > 0) {
+                        //not first hit so a comma is needed before key
+                        counter = counter + 1
+                        this.finalcitation =
+                            this.finalcitation +
+                            ', ' +
+                            this.block.metadata.config.block_quote[property]
+                    } else {
+                        //first hit, no comma needed
+                        counter = counter + 1
+                        this.finalcitation =
+                            '—' +
+                            this.finalcitation +
+                            this.block.metadata.config.block_quote[property]
+                    }
+                    // checks that source_type isn't none and there is a source title
+                } else if (
+                    property === 'source_title' &&
+                    this.block.metadata.config.block_quote['source_type'] !==
+                        'None' &&
+                    this.block.metadata.config.block_quote[property] !== null &&
+                    this.block.metadata.config.block_quote[property] !== ''
+                ) {
+                    // filters out source types book. Adds class to italicize books
+                    if (
+                        this.block.metadata.config.block_quote[
+                            'source_type'
+                        ] === 'Book'
+                    ) {
+                        // checks if comma needed or not
+                        if (counter > 0) {
+                            this.finalsource =
+                                ', ' +
+                                this.block.metadata.config.block_quote[property]
+                            this.classCitation = 'span-title'
+                        } else {
+                            this.finalsource =
+                                '—' +
+                                this.block.metadata.config.block_quote[property]
+                            this.classCitation = 'span-title'
+                        }
+                        //checks if online journal
+                    } else if (
+                        this.block.metadata.config.block_quote[
+                            'source_type'
+                        ] === 'Online Journal'
+                    ) {
+                        // checks if comma needed or not. Not Italicized
+                        if (counter > 0) {
+                            this.finalsource =
+                                ', ' +
+                                '"' +
+                                this.block.metadata.config.block_quote[
+                                    property
+                                ] +
+                                '"'
+                            this.classCitation = ''
+                        } else {
+                            this.finalsource =
+                                '—' +
+                                '"' +
+                                this.block.metadata.config.block_quote[
+                                    property
+                                ] +
+                                '"'
+                            this.classCitation = ''
+                        }
+                    }
+                }
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.container-left-border {
+    border-style: solid;
+    border-color: var(--v-secondary-base);
+    border-width: 2px 2px 2px 16px;
+    border-radius: 4px;
+}
+.span-title {
+    font-style: italic;
+}
+</style>

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/FeedbackTemplates/FeedbackQuestionLikert.vue

@@ -3,7 +3,7 @@
         <p class="question">
             {{ value.body }}
         </p>
-        <div class="d-flex justify-space-around">
+        <div class="d-flex">
             <v-radio-group
                 :rules="[
                     (v) =>
@@ -12,12 +12,12 @@
                             'windward.core.components.content.blocks.feedback.required'
                         ),
                 ]"
-                row
                 class="radio-group"
+                :row="row"
+                :column="column"
                 v-model="value.response"
             >
                 <v-radio
-                    class="likert-radio"
                     color="green"
                     :label="
                         $t(
@@ -27,7 +27,6 @@
                     value="5"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="light-green"
                     :label="
                         $t(
@@ -37,7 +36,6 @@
                     value="4"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="amber"
                     :label="
                         $t(
@@ -47,7 +45,6 @@
                     value="3"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="orange"
                     :label="
                         $t(
@@ -57,7 +54,6 @@
                     value="2"
                 ></v-radio>
                 <v-radio
-                    class="likert-radio"
                     color="red"
                     :label="
                         $t(
@@ -78,7 +74,28 @@ export default {
         value: { type: Object, required: true, default: '' },
     },
     data() {
-        return {}
+        return {
+            windowWidth: window.innerWidth,
+            row: true,
+            column: false,
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            window.addEventListener('resize', this.onResize)
+        })
+    },
+    methods: {
+        onResize() {
+            this.windowWidth = window.innerWidth
+            if (this.windowWidth <= 760) {
+                this.row = false
+                this.column = true
+            } else {
+                this.row = true
+                this.column = false
+            }
+        },
     },
 }
 </script>
@@ -86,10 +103,4 @@ export default {
 .question {
     font-weight: bold;
 }
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
 </style>

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionTrueFalse.vue

@@ -24,7 +24,9 @@
             ></v-radio>
             <v-radio
                 class="likert-radio"
-                :label="$t('windward.core.components.content.blocks.feedback.no')"
+                :label="
+                    $t('windward.core.components.content.blocks.feedback.no')
+                "
                 value="false"
             ></v-radio>
         </v-radio-group>
@@ -46,10 +48,4 @@ export default {
 .question {
     font-weight: bold;
 }
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
 </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/OpenResponse.vue

@@ -128,22 +128,28 @@ export default {
             // Check to see if we have a state already for this block with the same block_id
             // States are loaded via the ContentBlock.id but in this particular case we want to
             // maintain the state ACROSS different ContentBlock.ids but with the same linked Block.id
-            const userState = await UserContentBlockState.where({
-                'metadata->block->tag': 'plugin-core-open-response',
-                course_user_id: this.enrollment.id,
-            })
-                .where('metadata->block->block_id', this.block.block_id)
-                .first()
+            if (this.block.block_id) {
+                const userState = await UserContentBlockState.where({
+                    'metadata->block->tag': 'plugin-core-open-response',
+                    course_user_id: this.enrollment.id,
+                })
+                    .where('metadata->block->block_id', this.block.block_id)
+                    .first()
 
-            // Apply the "True" state
-            if (!_.isEmpty(userState)) {
-                this.response = _.get(userState, 'metadata.response', '')
-                this.submitted = _.get(userState, 'metadata.submitted', false)
-            }
+                // Apply the "True" state
+                if (!_.isEmpty(userState)) {
+                    this.response = _.get(userState, 'metadata.response', '')
+                    this.submitted = _.get(
+                        userState,
+                        'metadata.submitted',
+                        false
+                    )
+                }
 
-            // If after the state is applied the response is still empty then apply the default response
-            if (this.response === '') {
-                this.response = this.block.metadata.config.starting_text
+                // If after the state is applied the response is still empty then apply the default response
+                if (this.response === '') {
+                    this.response = this.block.metadata.config.starting_text
+                }
             }
 
             this.stateLoaded = true