@windward/core 0.3.0 → 0.4.1

package/components/Content/Blocks/Video.vue

@@ -21,14 +21,14 @@
             type="image, image, list-item-avatar"
             class="reload-skeleton"
         ></v-skeleton-loader>
-        <h3 v-if="block.metadata.config.title" class="pl-4">
+        <h2 v-if="block.metadata.config.title" class="pl-4">
             {{ block.metadata.config.title }}
-        </h3>
+        </h2>
         <VuetifyPlayer
             v-if="hasSource"
             :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
             :type="block.metadata.config.type"
-            :playlist="block.metadata.config.playlist"
+            :playlist="linkedPlaylist"
             :autoplay="block.metadata.config.attributes.autoplay"
             :autopictureinpicture="
                 block.metadata.config.attributes.autopictureinpicture
@@ -48,7 +48,7 @@
             :loop="block.metadata.config.attributes.loop"
             :muted="block.metadata.config.attributes.muted"
             :playsinline="block.metadata.config.attributes.playsinline"
-            :poster="block.metadata.config.attributes.poster"
+            :poster="linkedPosterPublicUrl"
             :preload="block.metadata.config.attributes.preload"
             :captionsmenu="block.metadata.config.attributes.captionsmenu"
             :playlistmenu="block.metadata.config.attributes.playlistmenu"
@@ -63,14 +63,12 @@
 <script>
 import _ from 'lodash'
 import VuetifyPlayer from '@mindedge/vuetify-player'
-import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 
 export default {
     name: 'ContentBlockVideo',
     components: {
         VuetifyPlayer,
-        ContentBlockAsset,
     },
     extends: BaseContentBlock,
     computed: {
@@ -89,6 +87,73 @@ export default {
                 )
             )
         },
+        linkedPosterPublicUrl() {
+            const file = this.resolveAsset(
+                _.get(this.block, 'metadata.config.attributes.poster', null)
+            )
+            return _.get(file, 'asset.public_url')
+        },
+        /**
+         * Resolve assets to their playlist items
+         */
+        linkedPlaylist() {
+            const playlist = _.cloneDeep(this.block.metadata.config.playlist)
+
+            for (const index in playlist) {
+                for (const sourceIndex in playlist[index].sources) {
+                    let file = this.resolveAsset(
+                        playlist[index].sources[sourceIndex]
+                    )
+
+                    playlist[index].sources[sourceIndex] = {
+                        src: _.get(file, 'asset.public_url', ''),
+                        type: _.get(file, 'asset.metadata.mime', ''),
+                    }
+                }
+
+                for (const trackIndex in playlist[index].tracks) {
+                    let file = this.resolveAsset(
+                        playlist[index].tracks[trackIndex]
+                    )
+
+                    playlist[index].tracks[trackIndex] = {
+                        src: _.get(file, 'asset.public_url', ''),
+                        kind: 'captions',
+                        srclang: 'en-US',
+                        default: true,
+                    }
+                }
+
+                for (const adIndex in playlist[index].ads) {
+                    for (const adSourceIndex in playlist[index].ads[adIndex]
+                        .sources) {
+                        let file = this.resolveAsset(
+                            playlist[index].ads[adIndex].sources[adSourceIndex]
+                        )
+
+                        playlist[index].ads[adIndex].sources[adSourceIndex] = {
+                            src: _.get(file, 'asset.public_url', ''),
+                            type: _.get(file, 'asset.metadata.mime', ''),
+                        }
+                    }
+                    for (const adTrackIndex in playlist[index].ads[adIndex]
+                        .tracks) {
+                        let file = this.resolveAsset(
+                            playlist[index].ads[adIndex].tracks[adTrackIndex]
+                        )
+
+                        playlist[index].ads[adIndex].tracks[adTrackIndex] = {
+                            src: _.get(file, 'asset.public_url', ''),
+                            kind: 'captions',
+                            srclang: 'en-US',
+                            default: true,
+                        }
+                    }
+                }
+            }
+
+            return playlist
+        },
     },
     data() {
         return {
@@ -170,13 +235,19 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = this.defaultConfig
         }
+        // If no playback rates were set then re-init it as an array with the rate 1 or normal only
+        if (
+            _.isEmpty(
+                _.get(this.block, 'metadata.config.attributes.playbackrates')
+            )
+        ) {
+            this.block.metadata.config.attributes.playbackrates = [1]
+        }
+        if (_.isEmpty(this.block.assets)) {
+            this.$set(this.block, 'assets', [])
+        }
     },
     mounted() {
-        // TODO Check privs
-        //const hasPrivs = true
-        //if (hasPrivs) {
-        //this.blockSettings = this.initEditorSettings(this.settings)
-        //}
         this.saveKey = this.settingsKey()
     },
     methods: {

package/components/Navigation/Items/AskTheExpert.vue

@@ -92,6 +92,7 @@
                                     >
                                         <v-btn
                                             class="primary"
+                                            elevation="0"
                                             :disabled="valid"
                                             @click="onSubmit"
                                             >{{

package/components/Settings/AccordionSettings.vue

@@ -40,6 +40,7 @@
                             ></v-text-field>
                             <v-btn
                                 text
+                                elevation="0"
                                 :disabled="render"
                                 @click="
                                     onToggleExpand(
@@ -79,6 +80,53 @@
                                 "
                                 :disabled="render"
                             ></TextEditor>
+                            <v-container class="pa-0 pt-3">
+                                <h4>
+                                    {{
+                                        $t(
+                                            'windward.core.shared.settings.upload_file'
+                                        )
+                                    }}
+                                </h4>
+                                <v-text-field
+                                    v-model="
+                                        block.metadata.config.items[index]
+                                            .altText
+                                    "
+                                    class="pt-3 pb-3"
+                                    :hide-details="true"
+                                    dense
+                                    outlined
+                                    :autofocus="true"
+                                    :label="
+                                        $t(
+                                            'windward.core.shared.settings.alt_image'
+                                        )
+                                    "
+                                ></v-text-field>
+                                <v-text-field
+                                    v-model="
+                                        block.metadata.config.items[index]
+                                            .ariaDescribedBy
+                                    "
+                                    class="pt-3 pb-3"
+                                    :hide-details="true"
+                                    dense
+                                    outlined
+                                    :label="
+                                        $t(
+                                            'windward.core.shared.settings.aria_described'
+                                        )
+                                    "
+                                ></v-text-field>
+                                <ContentBlockAsset
+                                    v-model="
+                                        block.metadata.config.items[index].file
+                                    "
+                                    mimes="image/png,image/jpeg"
+                                    :assets.sync="block.assets"
+                                ></ContentBlockAsset>
+                            </v-container>
                         </v-container>
                     </template>
                 </SortableExpansionPanel>
@@ -87,6 +135,7 @@
                 <v-row justify="center" class="my-4">
                     <v-btn
                         color="primary"
+                        elevation="0"
                         :disabled="render"
                         @click="onAddElement"
                         ><v-icon>mdi-plus</v-icon
@@ -141,6 +190,9 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -180,6 +232,9 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
             }
             this.block.metadata.config.items.push(default_item)
             this.block.metadata.config.selectedPanels =

package/components/Settings/ClickableIconsSettings.vue

@@ -60,6 +60,15 @@
                     "
                     :disabled="render"
                 ></v-switch>
+                <v-switch
+                    v-model="block.metadata.config.display.large_icon"
+                    :label="
+                        $t(
+                            'windward.core.components.settings.clickable_icon.display.large_icon'
+                        )
+                    "
+                    :disabled="render"
+                ></v-switch>
                 <v-switch
                     v-model="block.metadata.config.display.autocolor"
                     :label="
@@ -77,12 +86,25 @@
                     @click:close="onRemoveElement"
                 >
                     <template #header="{ item }">
-                        <v-icon v-if="item.icon && isIcon(item.icon)">{{
-                            item.icon
-                        }}</v-icon>
-                        <span v-else-if="item.icon && !isIcon(item.icon)">{{
-                            item.icon
-                        }}</span>
+                        <v-avatar v-if="item.iconImage && item.iconAsset">
+                            <v-img :src="getImagePublicUrl(item.iconAsset)" />
+                        </v-avatar>
+                        <v-icon
+                            v-else-if="
+                                !item.iconImage &&
+                                item.icon &&
+                                isIcon(item.icon)
+                            "
+                            >{{ item.icon }}</v-icon
+                        >
+                        <span
+                            v-else-if="
+                                !item.iconImage &&
+                                item.icon &&
+                                !isIcon(item.icon)
+                            "
+                            >{{ item.icon }}</span
+                        >
                         <span v-else class="font-italic">
                             {{
                                 $t(
@@ -93,7 +115,24 @@
                     </template>
                     <template #body="{ index }">
                         <v-container>
+                            <v-switch
+                                v-model="
+                                    block.metadata.config.items[index].iconImage
+                                "
+                                :label="
+                                    $t(
+                                        'windward.core.components.settings.clickable_icon.icon_image'
+                                    )
+                                "
+                                @click="onClickToggleIconImage(index)"
+                                :disabled="render"
+                            ></v-switch>
+
                             <TextIconPicker
+                                v-if="
+                                    !block.metadata.config.items[index]
+                                        .iconImage
+                                "
                                 v-model="
                                     block.metadata.config.items[index].icon
                                 "
@@ -105,6 +144,20 @@
                                 "
                                 :disabled="render"
                             ></TextIconPicker>
+
+                            <ContentBlockAsset
+                                v-if="
+                                    block.metadata.config.items[index].iconImage
+                                "
+                                v-model="
+                                    block.metadata.config.items[index].iconAsset
+                                "
+                                :assets.sync="block.assets"
+                                class="mb-4"
+                                mimes="image/jpeg,image/png,image/gif"
+                                :disabled="render"
+                                @click:file="onFileSelect($event, index)"
+                            ></ContentBlockAsset>
                             <v-text-field
                                 v-model="
                                     block.metadata.config.items[index].title
@@ -118,7 +171,6 @@
                                 "
                                 :disabled="render"
                             ></v-text-field>
-
                             <ColorPicker
                                 v-if="!block.metadata.config.display.autocolor"
                                 v-model="
@@ -149,7 +201,11 @@
                 </SortableExpansionPanel>
             </v-col>
             <v-row justify="center" class="my-4">
-                <v-btn color="primary" :disabled="render" @click="onAddElement"
+                <v-btn
+                    color="primary"
+                    elevation="0"
+                    :disabled="render"
+                    @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
                     >{{ $t('shared.forms.add') }}</v-btn
                 >
@@ -164,6 +220,7 @@ import TextEditor from '~/components/Text/TextEditor'
 import TextIconPicker from '~/components/Core/TextIconPicker.vue'
 import ColorPicker from '~/components/Core/ColorPicker.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 
 export default {
     name: 'ClickableIconsSettings',
@@ -172,6 +229,7 @@ export default {
         TextEditor,
         TextIconPicker,
         ColorPicker,
+        ContentBlockAsset,
     },
     extends: BaseContentSettings,
 
@@ -202,6 +260,7 @@ export default {
                 show_background: false,
                 round_icon: false,
                 italic_icon: false,
+                large_icon: false,
                 autocolor: true,
             }
         }
@@ -218,6 +277,8 @@ export default {
         onAddElement() {
             const defaultObject = {
                 icon: '',
+                iconAsset: null,
+                iconImage: false,
                 title: '',
                 body: '<p></p>',
                 color: {
@@ -233,6 +294,26 @@ export default {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
+        getImagePublicUrl(fileAssetId) {
+            const foundAsset = this.resolveAsset(fileAssetId)
+
+            return _.get(foundAsset, 'asset.public_url', null)
+        },
+        onClickToggleIconImage(index) {
+            // We're switching between images / text. Clear the relevant fields
+            this.block.metadata.config.items[index].icon = ''
+            this.block.metadata.config.items[index].iconAsset = null
+        },
+        onFileSelect(file, index) {
+            // file = null when you remove a file
+            if (_.isEmpty(file)) {
+                this.block.metadata.config.items[index].icon = null
+            } else {
+                this.block.assets.push(file)
+                this.block.metadata.config.items[index].icon =
+                    file.file_asset_id
+            }
+        },
     },
 }
 </script>

package/components/Settings/EmailSettings.vue

@@ -85,6 +85,7 @@
                                     index
                                 )
                             "
+                            elevation="0"
                             text
                             :disabled="render"
                         >
@@ -125,7 +126,11 @@
         </v-container>
         <v-container class="pa-0">
             <v-row justify="center" class="my-4">
-                <v-btn color="primary" :disabled="render" @click="onAddElement"
+                <v-btn
+                    color="primary"
+                    elevation="0"
+                    :disabled="render"
+                    @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
                     >{{
                         $t('windward.core.components.settings.email.add')
@@ -210,15 +215,6 @@ export default {
         this.block.metadata.config.selectedPanels = 0
     },
     methods: {
-        onBeforeSave() {
-            this.block.metadata.config.emails.forEach((element) => {
-                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

package/components/Settings/FeedbackSettings.vue

@@ -10,6 +10,7 @@
                         <v-btn
                             class="preset-btn text-sm-body-2 text-none"
                             color="primary"
+                            elevation="0"
                             outlined
                             v-bind="attrs"
                             v-on="on"