@windward/core 0.3.0 → 0.4.0

package/components/Content/Blocks/Accordion.vue

@@ -38,6 +38,27 @@
                             "
                         ></TextEditor>
                     </v-container>
+                    <v-container>
+                        <v-img
+                            v-if="block.metadata.config.items[itemIndex].file"
+                            :aria-describedby="
+                                block.metadata.config.items[itemIndex]
+                                    .ariaDescribedBy
+                            "
+                            :alt="
+                                getImageAlt(
+                                    block.metadata.config.items[itemIndex].file,
+                                    block.metadata.config.items[itemIndex]
+                                        .altText
+                                )
+                            "
+                            :src="
+                                getImagePublicUrl(
+                                    block.metadata.config.items[itemIndex].file
+                                )
+                            "
+                        ></v-img>
+                    </v-container>
                 </v-expansion-panel-content>
             </v-expansion-panel>
         </v-expansion-panels>
@@ -73,6 +94,9 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -129,6 +153,19 @@ export default {
         },
     },
     methods: {
+        getImagePublicUrl(asset) {
+            const foundAsset = this.resolveAsset(asset)
+
+            return _.get(foundAsset, 'asset.public_url', null)
+        },
+        getImageAlt(asset, defaultText = '') {
+            // If a default / override was defined
+            if (defaultText) {
+                return defaultText
+            }
+            const foundAsset = this.resolveAsset(asset)
+            return _.get(foundAsset, 'asset.metadata.props.alt', null)
+        },
         async onBeforeSave() {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false

package/components/Content/Blocks/ClickableIcons.vue

@@ -20,23 +20,34 @@
                 no-gutters
                 :class="rowClass(itemIndex)"
             >
-                <v-col cols="12" xl="2" lg="3" md="3" sm="3">
-                    <v-btn
-                        class="button-icon pa-1 mb-4"
-                        :color="itemColor(itemIndex)"
-                        :fab="block.metadata.config.display.round_icon"
-                        outlined
+                <v-col cols="12" v-bind="iconColumnAttrs" class="pa-4">
+                    <button
+                        :class="activatorButtonClass(itemIndex)"
                         @click="item.active = !item.active"
                     >
-                        <v-icon v-if="isIcon(item.icon)" class="black--text">{{
-                            item.icon
-                        }}</v-icon>
+                        <v-avatar
+                            v-if="item.iconImage && item.icon"
+                            class="clickable--image"
+                            :rounded="
+                                block.metadata.config.display.round_icon
+                                    ? '100%'
+                                    : '0'
+                            "
+                            size="100%"
+                        >
+                            <v-img :src="getImagePublicUrl(item.iconAsset)" />
+                        </v-avatar>
+                        <v-icon
+                            v-else-if="isIcon(item.icon)"
+                            class="clickable--icon black--text"
+                            >{{ item.icon }}</v-icon
+                        >
                         <span v-else :class="iconClass + ' black--text'">{{
                             decode(item.icon)
                         }}</span>
-                    </v-btn>
+                    </button>
                 </v-col>
-                <v-col cols="12" xl="10" lg="9" md="9" sm="9">
+                <v-col cols="12" v-bind="bodyColumnAttrs">
                     <h4
                         v-if="
                             block.metadata.config.display.show_title ||
@@ -62,6 +73,7 @@
 <script>
 import _ from 'lodash'
 import he from 'he'
+import Uuid from '~/helpers/Uuid'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
 
@@ -111,7 +123,7 @@ export default {
         },
         rowClass() {
             return (itemIndex) => {
-                let classes = 'option-container mb-4 pa-1'
+                let classes = 'option-container 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
@@ -128,8 +140,42 @@ export default {
                 return classes
             }
         },
+        iconColumnAttrs() {
+            if (this.block.metadata.config.display.large_icon) {
+                return {
+                    xl: '3',
+                    lg: '4',
+                    md: '4',
+                    sm: '4',
+                }
+            } else {
+                return {
+                    xl: '2',
+                    lg: '3',
+                    md: '3',
+                    sm: '3',
+                }
+            }
+        },
+        bodyColumnAttrs() {
+            if (this.block.metadata.config.display.large_icon) {
+                return {
+                    xl: '9',
+                    lg: '8',
+                    md: '8',
+                    sm: '8',
+                }
+            } else {
+                return {
+                    xl: '10',
+                    lg: '9',
+                    md: '9',
+                    sm: '9',
+                }
+            }
+        },
         iconClass() {
-            let classes = 'text-icon'
+            let classes = 'clickable--text'
             if (
                 _.get(this.block, 'metadata.config.display.italic_icon', false)
             ) {
@@ -137,6 +183,22 @@ export default {
             }
             return classes
         },
+        activatorButtonClass() {
+            return (itemIndex) => {
+                let classes =
+                    'button-icon button-icon--outline pa-1 ' +
+                    this.itemColor(itemIndex)
+                if (this.block.metadata.config.display.large_icon) {
+                    classes += ' button-icon--large'
+                } else {
+                    classes += ' button-icon--normal'
+                }
+                if (this.block.metadata.config.display.round_icon) {
+                    classes += ' button-icon--rounded'
+                }
+                return classes
+            }
+        },
         itemColor() {
             return (itemIndex) => {
                 // If autocolor is enabled then calculate the color on the index
@@ -179,20 +241,45 @@ export default {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
+        getImagePublicUrl(asset) {
+            const foundAsset = this.resolveAsset(asset)
+
+            return _.get(foundAsset, 'asset.public_url', null)
+        },
     },
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .option-container {
     border-radius: 1rem;
 }
-.button-icon {
+button.button-icon {
+    border-width: 4px;
+    width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 1 / 1;
+}
+
+button.button-icon.button-icon--outline {
+    background-color: #fff !important;
     border-width: 4px;
-    background: #fff;
-    height: 74px !important;
-    width: 74px;
+    border-style: solid;
+}
+
+button.button-icon.button-icon--rounded {
+    border-radius: 100%;
+}
+
+.button-icon--normal {
+    .clickable--icon,
+    .clickable--text {
+        font-size: 1.5rem;
+    }
 }
-.text-icon {
-    font-size: 1.5rem;
+.button-icon--large {
+    .clickable--icon,
+    .clickable--text {
+        font-size: 2.5rem;
+    }
 }
 </style>

package/components/Content/Blocks/Email.vue

@@ -294,6 +294,15 @@ export default {
         onRemoveTags(body) {
             return body.replace(/(<([^>]+)>)/gi, '')
         },
+        async 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
+            })
+        },
     },
 }
 </script>

package/components/Content/Blocks/Image.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-container class="pa-0 ma-0">
-            <div v-if="!block.body" class="img-holder">
+            <div v-if="!imageUrl" class="img-holder">
                 <v-skeleton-loader
                     height="300px"
                     :elevation="2"
@@ -19,11 +19,11 @@
             </div>
             <v-responsive :aspect-ratio="aspectRatio">
                 <v-img
-                    v-if="block.body"
-                    :alt="block.metadata.config.alt"
-                    :aria-describedby="block.metadata.config.aria_described_by"
+                    v-if="imageUrl"
+                    :alt="altText"
+                    :aria-describedby="describedByText"
                     :class="imageClass"
-                    :src="block.body"
+                    :src="imageUrl"
                     contain
                     @click="onHandleModal"
                 >
@@ -52,13 +52,11 @@
                     v-on="on"
                 >
                     <v-img
-                        v-if="block.body"
-                        :alt="block.metadata.config.alt"
-                        :aria-describedby="
-                            block.metadata.config.aria_described_by
-                        "
+                        v-if="imageUrl"
+                        :alt="altText"
+                        :aria-describedby="describedByText"
                         :class="imageClass"
-                        :src="block.body"
+                        :src="imageUrl"
                         contain
                         @click="onHandleModal"
                     >
@@ -104,27 +102,57 @@ export default {
         if (_.isEmpty(this.block.metadata.config.alt)) {
             this.block.metadata.config.alt = ''
         }
-        if (!_.isBoolean(this.block.metadata.config.hide_background)) {
-            this.block.metadata.config.hide_background = false
+        if (!_.isBoolean(this.block.metadata.config.hideBackground)) {
+            this.block.metadata.config.hideBackground = false
         }
         if (!_.isBoolean(this.block.metadata.config.modal)) {
             this.block.metadata.config.modal = false
         }
-        if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
-            this.block.metadata.config.aria_describedby = ''
+        if (_.isEmpty(this.block.metadata.config.ariaDescribedBy)) {
+            this.block.metadata.config.ariaDescribedBy = ''
         }
     },
     computed: {
         describedById() {
             // If there's a described by
-            if (_.get(this.block.metadata, 'config.aria_describedby', null)) {
+            if (this.describedByText) {
                 return this.id
             } else {
                 return null
             }
         },
+        altText() {
+            // Get the asset info first and fallback to the block metadata if inherit is set to false
+            if (_.get(this.block.metadata, 'config.inherit', true)) {
+                return _.get(this.fileAsset, 'metadata.props.alt', null)
+            } else {
+                return _.get(this.block.metadata, 'config.alt', null)
+            }
+        },
         describedByText() {
-            return _.get(this.block.metadata, 'config.aria_describedby', null)
+            // Get the asset info first and fallback to the block metadata if inherit is set to false
+            if (_.get(this.block.metadata, 'config.inherit', true)) {
+                return _.get(
+                    this.fileAsset,
+                    'metadata.props.aria_describedby',
+                    null
+                )
+            } else {
+                return _.get(
+                    this.block.metadata,
+                    'config.ariaDescribedBy',
+                    null
+                )
+            }
+        },
+        fileAsset() {
+            return this.resolveAsset(
+                _.get(this.block, 'metadata.config.asset', null)
+            )
+        },
+        imageUrl() {
+            // Get the image public url and fallback to the block body
+            return _.get(this.fileAsset, 'asset.public_url', this.block.body)
         },
         imageClass() {
             let imageClass = ''
@@ -133,7 +161,7 @@ export default {
                 imageClass += ' container-pointer'
             }
             // If NOT hide background, inclide the extra class
-            if (!_.get(this.block.metadata, 'config.hide_background', false)) {
+            if (!_.get(this.block.metadata, 'config.hideBackground', false)) {
                 imageClass += ' img-white'
             }
             return 'img-display' + imageClass
@@ -164,7 +192,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .img-display {
     border-radius: 3px;
 }

package/components/Content/Blocks/Video.vue

@@ -28,7 +28,7 @@
             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/Settings/AccordionSettings.vue

@@ -79,6 +79,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>
@@ -141,6 +188,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 +230,9 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
             }
             this.block.metadata.config.items.push(default_item)
             this.block.metadata.config.selectedPanels =