@concretecms/bedrock 1.3.7 → 1.4.0

package/.eslintrc.yml

@@ -1,6 +1,8 @@
 ---
 extends:
   - plugin:vue/base
+parserOptions:
+  ecmaVersion: 2020
 rules:
   indent:
   - error

package/assets/account/js/frontend/components/AvatarCropper.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="ccm-account-avatar-cropper">
+        <div class="card">
+            <div class="card-header">{{ lang.header }}</div>
+            <div class="card-body">
+                <template v-if="image">
+                    <cropper
+                        ref="cropper"
+                        :stencil-props="{
+                            handlers: {},
+                            resizable: false,
+                        }"
+                        :stencil-size="stencilSize"
+                        :canvas="canvas"
+                        image-restriction="stencil"
+                        :src="image.src"
+                    />
+                    <div class="ccm-account-avatar-cropper-controls">
+                        <a @click="zoomIn"><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M8 11h3m3 0h-3m0 0V8m0 3v3M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
+                        <a @click="zoomOut"><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0zM8 11h6" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
+                    </div>
+                    <div class="ccm-account-avatar-cropper-save" v-if="image">
+                        <button @click="image = null" class="btn btn-secondary float-start">{{ lang.reset }}</button>
+                        <template v-if="saveInProgress">
+                            <button class="btn btn-primary float-end" disabled>
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                                {{ lang.saveInProgress }}
+                            </button>
+                        </template>
+                        <button @click="saveAvatar" class="btn btn-primary float-end" v-else>{{ lang.save }}</button>
+                    </div>
+                </template>
+                <template v-else>
+                    <div :class="{'ccm-account-avatar-cropper-drop': true, 'ccm-account-avatar-crop-drop-hover': isDragging}"
+                         @dragover="dragover"
+                         @dragleave="dragleave"
+                         @drop="drop"
+                         @click="$refs.file.click()">
+                        <input type="file" ref="file" @change="onChange" accept="image/*">
+                    </div>
+                    <div class="ccm-account-avatar-cropper-focus">
+                        <div class="ccm-account-avatar-cropper-icon">
+                            <svg width="100%" height="100%" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M3 20.4V3.6a.6.6 0 01.6-.6h16.8a.6.6 0 01.6.6v16.8a.6.6 0 01-.6.6H3.6a.6.6 0 01-.6-.6z" stroke="#000000" stroke-width="1.5"></path><path d="M6 18h12M12 14V6m0 0l3.5 3.5M12 6L8.5 9.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                        </div>
+                        <div class="ccm-account-avatar-cropper-text">{{ lang.upload }}</div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Cropper } from 'vue-advanced-cropper'
+import 'vue-advanced-cropper/dist/style.css'
+export default {
+    components: {
+        Cropper
+    },
+    props: {
+        width: {
+            type: Number,
+            required: true
+        },
+        height: {
+            type: Number,
+            required: true
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        lang: {
+            type: Object,
+            required: true
+        },
+        uploadUrl: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+        isDragging: false,
+        image: null,
+        saveInProgress: false
+    }),
+    computed: {
+        stencilSize: function() {
+            const stencilSize = {}
+            stencilSize.width = this.width
+            stencilSize.height = this.height
+            return stencilSize
+        },
+        canvas: function() {
+            const canvas = {}
+            canvas.maxWidth = this.width
+            canvas.maxHeight = this.height
+            return canvas
+        }
+    },
+    methods: {
+        zoomIn() {
+            this.$refs.cropper.zoom(1.2)
+        },
+        zoomOut() {
+            this.$refs.cropper.zoom(0.8)
+        },
+        dragover(e) {
+            e.preventDefault()
+            this.isDragging = true
+        },
+        dragleave() {
+            this.isDragging = false
+        },
+        drop(e) {
+            e.preventDefault()
+            this.$refs.file.files = e.dataTransfer.files
+            this.onChange()
+            this.isDragging = false
+        },
+        onChange() {
+            var files = this.$refs.file.files
+            if (files && files[0]) {
+                if (this.image && this.image.src) {
+                    URL.revokeObjectURL(this.image.src)
+                }
+                const blob = URL.createObjectURL(files[0])
+                const reader = new FileReader()
+                reader.onload = (e) => {
+                    this.image = {
+                        src: blob,
+                        type: files[0].type
+                    }
+                }
+                reader.readAsArrayBuffer(files[0])
+            }
+        },
+        saveAvatar() {
+            this.saveInProgress = true
+            const { canvas } = this.$refs.cropper.getResult()
+            if (canvas) {
+                const form = new FormData()
+                form.append('ccm_token', this.accessToken)
+                canvas.toBlob(blob => {
+                    form.append('file', blob)
+                    // You can use axios, superagent and other libraries instead here
+                    fetch(this.uploadUrl, {
+                        method: 'POST',
+                        body: form
+                    }).then(() => {
+                        window.location.reload()
+                    })
+                })
+            }
+        }
+    },
+    mounted() {
+    }
+}
+</script>

package/assets/account/js/frontend.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-new */
 
-import AvatarCropper from './frontend/components/Avatar/Cropper.vue'
+import AvatarCropper from './frontend/components/AvatarCropper.vue'
 
 $(function() {
     window.Concrete.Vue.createContext('frontend', {

package/assets/account/scss/frontend/_frontend.scss

@@ -3,3 +3,5 @@
 @import 'bootstrap/scss/mixins';
 
 @import 'sidebar/navigation';
+@import 'avatar/avatar';
+@import 'avatar/avatar-cropper';

package/assets/account/scss/frontend/avatar/_avatar-cropper.scss

@@ -0,0 +1,82 @@
+div.ccm-account-avatar-cropper {
+  .card-body {
+    align-items: center;
+    display: flex;
+    height: 400px;
+    padding: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  div.ccm-account-avatar-cropper-drop {
+    cursor: pointer;
+    height: 100%;
+    position: absolute;
+    transition: all 0.1s linear;
+    width: 100%;
+    z-index: 100;
+
+    input[type=file] {
+      display: none;
+    }
+
+    &.ccm-account-avatar-crop-drop-hover,
+    &:hover {
+      background-color: rgba($primary, 0.1);
+    }
+  }
+
+  .ccm-account-avatar-cropper-focus {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .ccm-account-avatar-cropper-icon {
+    height: 120px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 120px;
+  }
+
+  .ccm-account-avatar-cropper-text {
+    color: $secondary;
+  }
+
+  .ccm-account-avatar-cropper-controls {
+    left: 20px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    a {
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.8);
+      cursor: pointer;
+      display: flex;
+      height: 40px;
+      margin-bottom: 10px;
+      text-align: center;
+      width: 40px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        background-color: $primary;
+      }
+
+      svg {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  .ccm-account-avatar-cropper-save {
+    bottom: 20px;
+    left: 20px;
+    position: absolute;
+    right: 20px;
+  }
+}

package/assets/account/scss/frontend/avatar/_avatar.scss

@@ -0,0 +1,6 @@
+div.ccm-page-account {
+  img.u-avatar {
+    height: auto;
+    max-width: 100%;
+  }
+}

package/assets/bedrock/scss/_frontend.scss

@@ -8,5 +8,4 @@
 @import 'theme-context-root';
 @import 'mixins';
 @import 'utilities';
-@import 'theme-grid';
 @import 'pagination';

package/assets/calendar/js/backend/duration.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
-/* global moment, _ */
+/* global TomSelect, moment, _ */
 
 ;(function(global, $) {
     'use strict'
@@ -132,18 +132,16 @@
         setupTimes: function () {
             var my = this
             var $startTime = my.$element.find('select[data-select=start-time]')
-            $startTime.selectpicker({
-                liveSearch: true,
-                liveSearchStyle: 'startsWith'
-            })
-            $startTime.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
+            var $endTime = my.$element.find('select[data-select=end-time]')
+            var startTimeSelect = new TomSelect($startTime.get(0))
+            var endTimeSelect = new TomSelect($endTime.get(0))
+
+            $startTime.data('TomSelect', startTimeSelect)
+            $startTime.on('change', function () {
                 my.calculateEndDate()
             })
 
-            my.$element.find('select[data-select=end-time]').selectpicker({
-                liveSearch: true,
-                liveSearchStyle: 'startsWith'
-            })
+            $endTime.data('TomSelect', endTimeSelect)
         },
 
         getSelectedEndDate: function () {
@@ -243,8 +241,10 @@
 
             my.$element.find('input[name=' + my.options.namespace + '_pdEndDate_pub_' + my.getSetID() + ']').datepicker('setDate', endDateFormatted)
 
-            var $bsSelect = my.$element.find('select[name=' + my.options.namespace + '_pdEndDateSelectTime_' + my.getSetID() + ']')
-            $bsSelect.selectpicker('val', endTime)
+            var $select = my.$element.find('select[name=' + my.options.namespace + '_pdEndDateSelectTime_' + my.getSetID() + ']')
+            $select.val(endTime)
+            // TomSelect specifically. Need to do this to update the value.
+            $select.data('TomSelect').sync()
         },
 
         setupDates: function () {
@@ -392,7 +392,7 @@
                 my.$element.find('select[data-select=start-time]').parent().hide()
                 my.$element.find('select[data-select=end-time]').parent().hide()
             } else {
-                my.$element.find('div[data-column=date]').removeClass().addClass('col-sm-6')
+                my.$element.find('div[data-column=date]').removeClass().addClass('col-sm-5')
                 my.$element.find('select[data-select=start-time]').parent().show()
                 my.$element.find('select[data-select=end-time]').parent().show()
             }

package/assets/calendar/js/vendor/fullcalendar.js

@@ -1,3 +1,4 @@
 /* eslint-disable no-unused-vars */
 import $ from 'jquery'
 import 'fullcalendar'
+import 'fullcalendar/dist/locale-all.js'

package/assets/cms/components/Announcement/Action/ExternalLinkAction.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <a target="_blank" :href="url">
+            <i class="fas fa-external-link-alt"></i>
+            Learn More
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        url: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+    }),
+    methods: {
+    },
+    mounted() {
+    }
+}
+</script>

package/assets/cms/components/Announcement/Action/GuideAction.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <a href="#" @click="launchGuide">
+            <i class="fas fa-cog"></i>
+            Run Guide
+        </a>
+    </div>
+</template>
+
+<script>
+/* global ConcreteHelpGuideManager bootstrap */
+export default {
+    props: {
+        guide: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+    }),
+    methods: {
+        launchGuide() {
+            var tour = ConcreteHelpGuideManager.getGuide(this.guide)
+            const announcementModal = $(this.$el).closest('.modal')
+            const modal = bootstrap.Modal.getOrCreateInstance(announcementModal.get(0))
+            if (modal) {
+                modal.hide()
+            }
+            tour.start()
+        }
+    },
+    mounted() {
+
+    }
+}
+</script>

package/assets/cms/components/Announcement/Action/VideoAction.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <a :href="url" ref="link">
+            <i class="fas fa-play-circle"></i>
+            Watch Video
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        url: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+    }),
+    mounted() {
+        $(this.$refs.link).magnificPopup({
+            disableOn: 700,
+            type: 'iframe',
+            mainClass: 'mfp-fade',
+            removalDelay: 160,
+            preloader: false,
+            fixedContentPos: false
+        })
+    }
+}
+</script>

package/assets/cms/components/Announcement/Broadcast.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="ccm-ui">
+        <div class="modal fade" data-bs-backdrop="static" role="dialog" tabindex="-1" id="concrete-announcement-modal">
+            <component
+                :key="announcementKey"
+                :is="announcementComponent"
+                :handle="announcementKey"
+                :slides="announcementComponentSlides"
+                :total-slides="announcementComponentSlides.length"
+                @advance-broadcast="advanceBroadcast"
+            ></component>
+        </div>
+    </div>
+</template>
+<script>
+/* global bootstrap */
+import ConcreteAnnouncementModal from './Modal/Modal'
+
+export default {
+    components: {
+        ConcreteAnnouncementModal
+    },
+    props: {
+        broadcast: {
+            type: Object,
+            required: true
+        }
+    },
+    data: () => ({
+        currentAnnouncement: 0
+    }),
+    computed: {
+        announcementKey: function() {
+            return this.broadcast.announcements[this.currentAnnouncement].handle
+        },
+        announcementComponent: function() {
+            return this.broadcast.announcements[this.currentAnnouncement].component
+        },
+        announcementComponentSlides: function() {
+            return this.broadcast.announcements[this.currentAnnouncement].slides
+        }
+    },
+    methods: {
+        advanceBroadcast() {
+            if ((this.currentAnnouncement + 1) === this.broadcast.announcements.length) {
+                this.getModal().hide()
+            } else {
+                this.currentAnnouncement++
+            }
+        },
+        getModal() {
+            const modal = document.getElementById('concrete-announcement-modal')
+            return bootstrap.Modal.getOrCreateInstance(modal)
+        }
+    },
+    mounted() {
+        var modal = this.getModal()
+        if (modal) {
+            modal.show()
+        }
+    }
+}
+</script>

package/assets/cms/components/Announcement/Button/ExternalLinkButton.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <a target="_blank" class="btn btn-secondary" :href="url">{{ title }}</a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        url: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+    }),
+    methods: {
+    },
+    mounted() {
+    }
+}
+</script>

package/assets/cms/components/Announcement/Header/Header.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="modal-header">
+        <div class="row w-100 align-items-center">
+            <div class="col-md-3 text-center">
+                <svg width="100" fill="white" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                     viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
+                                <path d="M21.6,15.9c-2.1-2.5-5.4,2.8-7.1,3.9c-1.2,0.8-3,0.9-4.3,0.1c-1.8-1-1.2-3.5,0.6-4.1c1.7-0.5,4.6,1.2,5.6-0.5
+                                    c1.3-2.2-3.1-2.7-4.4-2.6c-2.4,0.1-4.6,0.9-6,2.6c-1.5,1.9-1.2,4.3,0.5,6c1.7,1.6,4.2,2.3,6.6,2.1c0.6-0.1,1.7-0.3,2.5-0.8
+                                    C17.1,21.8,22,16.4,21.6,15.9z M6.1,14C7,14.2,5.4,9.6,5.3,9C5.1,8.2,4.9,7.2,4.1,7C3.2,6.9,3,7.9,3.2,8.8C3.4,9.7,5.4,13.9,6.1,14z
+                                     M12.9,11.7c1.3,0.2,1.2-5.9,1.2-6.7c0-0.7,0.3-2.8-0.7-3c-1.4-0.3-1.5,1.5-1.5,2.5C11.9,5.4,11.6,11.5,12.9,11.7z M15.9,12.6
+                                    c1.4,0.6,2.4-5.6,2.6-6.4c0.2-0.8,0.2-2.5-1.2-2c-0.7,0.3-0.8,1.4-0.9,2C16.2,7.1,14.9,12.2,15.9,12.6z M9.3,12.1
+                                    c1.6,0.1,0.1-6.1,0-6.9C9.1,4.4,8.5,2.7,7.4,3.7C6.8,4.2,7.1,5.3,7.2,6C7.3,6.8,8.1,12,9.3,12.1z"/>
+                                </svg>
+            </div>
+            <div class="col-md-9">
+                <h4 class="modal-title">{{title}}</h4>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true
+        }
+    },
+    data: () => ({
+    })
+}
+</script>

package/assets/cms/components/Announcement/Item/Item.vue

@@ -0,0 +1,50 @@
+<template>
+    <section class="row w-100 align-items-center">
+        <div class="col-md-3 text-center" v-if="showSidebar">
+            <span class="d-inline-block" style="max-width: 100px;" v-html="item.icon.element" v-if="item.icon"></span>
+        </div>
+        <div :class="{'col-md-9': showSidebar, 'col-md-12': !showSidebar}">
+            <h5>{{ item.title }}</h5>
+            <div class="text-muted">{{ item.description }}</div>
+            <div class="ccm-help-media">
+                <component :key="action.component" v-for="action in item.actions" :is="action.component"
+                           v-bind="action.componentProps"
+                ></component>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+import ConcreteAnnouncementVideoAction from '../Action/VideoAction'
+import ConcreteAnnouncementGuideAction from '../Action/GuideAction'
+import ConcreteAnnouncementExternalLinkAction from '../Action/ExternalLinkAction'
+
+export default {
+    components: {
+        ConcreteAnnouncementVideoAction,
+        ConcreteAnnouncementGuideAction,
+        ConcreteAnnouncementExternalLinkAction
+    },
+    props: {
+        indentIfIconEmpty: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
+        item: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        showSidebar() {
+            return this.item.icon || this.indentIfIconEmpty
+        }
+    },
+    data: () => ({
+    }),
+    methods: {
+    }
+}
+</script>