@concretecms/bedrock 1.3.7 → 1.4.0

package/assets/cms/components/groups/Chooser.vue

@@ -87,7 +87,7 @@ export default {
             if (my.mode === 'select') {
                 options.onClick = function(node) {
                     if (node.data.gID) {
-                        my.triggerSelect(node.data.gID, node.title)
+                        my.triggerSelect(node.data.gID, node.data.gName ?? node.title, node.data.gDisplayName ?? node.title)
                     } else {
                         return false
                     }
@@ -122,12 +122,13 @@ export default {
                 window.location.href = CCM_DISPATCHER_FILENAME + '/dashboard/users/groups/edit/' + group.gID
             }
             if (this.mode === 'select') {
-                this.triggerSelect(group.gID, group.gDisplayName)
+                this.triggerSelect(group.gID, group.gName, group.gDisplayName)
             }
         },
-        triggerSelect(gID, gName) {
-            ConcreteEvent.publish('SelectGroup', { gID: gID, gName: gName })
-            this.$emit('select', { gID: gID, gName: gName })
+        triggerSelect(gID, gName, gDisplayName) {
+            gID = parseInt(gID) || 0
+            ConcreteEvent.publish('SelectGroup', { gID, gName, gDisplayName })
+            this.$emit('select', { gID, gName, gDisplayName })
         },
         performSearch(event) {
             this.searchSubmitted = 'searching'

package/assets/cms/components/index.js

@@ -20,7 +20,19 @@ import ConcreteFileChooser from './file-manager/Chooser'
 import ConcreteExpressEntrySelector from './express/Selector'
 import ConcreteUserChooser from './user/Chooser'
 import ConcreteGroupChooser from './groups/Chooser'
+import ConcreteSelect from './form/ConcreteSelect'
+import ConcreteAjaxSelect from './form/ConcreteAjaxSelect'
+import ConcreteExpressEntrySelect from './form/ConcreteExpressEntrySelect'
+import ConcretePageSelect from './form/ConcretePageSelect'
+import ConcreteUserSelect from './form/ConcreteUserSelect'
+import ConcreteOptionSelect from './form/ConcreteOptionSelect'
+import ConcreteLocaleSelect from './form/ConcreteLocaleSelect'
+import ConcreteToolbarSiteList from './toolbar/ConcreteToolbarSiteList'
+import ConcreteGroupInput from './form/ConcreteGroupInput'
 import ConcreteFileUploader from './file-manager/Uploader/UploadFromComputer'
+import ConcreteAnnouncementBroadcast from './Announcement/Broadcast'
+import ConcreteThumbnailEditor from './Image/ThumbnailEditor'
+import ConcreteHelpModal from './Help/Modal'
 import Board from './Board'
 import BoardSlot from './BoardSlot'
 import BoardInstanceRule from './BoardInstanceRule'
@@ -52,14 +64,26 @@ export default {
     ConcreteFileInput,
     ConcreteThemeColorInput,
     ConcreteExpressEntryInput,
+    ConcreteExpressEntrySelect,
     ConcreteExpressEntrySelector,
     ConcreteFileUploader,
     ConcreteGroupChooser,
+    ConcreteGroupInput,
     ConcretePageChooserSearch,
     ConcretePageInput,
+    ConcreteSelect,
+    ConcreteAjaxSelect,
+    ConcretePageSelect,
+    ConcreteUserSelect,
+    ConcreteOptionSelect,
+    ConcreteLocaleSelect,
+    ConcreteThumbnailEditor,
+    ConcreteToolbarSiteList,
     ConcreteUserInput,
     ConcreteEventOccurrenceInput,
     ConcreteFileDirectoryInput,
+    ConcreteAnnouncementBroadcast,
+    ConcreteHelpModal,
     Board,
     BoardSlot,
     BoardInstanceRule,

package/assets/cms/components/toolbar/ConcreteToolbarSiteList.vue

@@ -0,0 +1,62 @@
+<template>
+    <input />
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+export default {
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        token: {
+            type: String,
+            required: true
+        },
+        uri: {
+            type: String,
+            required: true
+        },
+        selectedSite: {
+            type: [String, Number],
+            required: false
+        },
+        sites: {
+            type: Array,
+            required: true
+        }
+    },
+    watch: {
+    },
+    computed: {
+        options: function() {
+            const options = []
+            this.sites.forEach((site) => {
+                options.push({ value: site.id, text: site.name })
+            })
+            return options
+        }
+    },
+    mounted() {
+        var config = {}
+        config.maxOptions = null
+        config.options = this.options
+        config.maxItems = 1
+        config.items = [this.selectedSite]
+        this.$nextTick(() => {
+            const select = new TomSelect(this.$el, config)
+            select.on('change', (option) => {
+                const url = CCM_DISPATCHER_FILENAME + '/ccm/site/redirect/' + option +
+                    '?rUri=' + encodeURIComponent(this.uri) +
+                    '&ccm_token=' + this.token
+                window.location.href = url
+            })
+        })
+    },
+    methods: {
+    }
+}
+</script>

package/assets/cms/components/user/Chooser/Search.vue

@@ -24,6 +24,7 @@
             <users v-if="keywords"
                 :selectedUsers.sync="selectedUsers"
                 :multipleSelection="multipleSelection"
+                :hideUsername="hideUsername"
                 :routePath="this.routePath + keywords"/>
         </div>
     </div>
@@ -57,6 +58,10 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        hideUsername: {
+            type: Boolean,
+            default: false
         }
     },
     watch: {

package/assets/cms/components/user/Chooser/Users.vue

@@ -6,7 +6,7 @@
                 <thead>
                     <tr>
                         <th></th>
-                        <th @click="sortBy('name')" :class="getSortColumnClassName('name')"><a href="javascript:void(0)">{{ i18n.username }}</a></th>
+                        <th v-if="!hideUsername" @click="sortBy('name')" :class="getSortColumnClassName('name')"><a href="javascript:void(0)">{{ i18n.username }}</a></th>
                         <th @click="sortBy('email')" :class="getSortColumnClassName('email')"><a href="javascript:void(0)">{{ i18n.email }}</a></th>
                         <th @click="sortBy('dateAdded')" :class="getSortColumnClassName('dateAdded')"><a href="javascript:void(0)">{{ i18n.date }}</a></th>
                         <th>{{ i18n.status }}</th>
@@ -19,7 +19,7 @@
                             <input type="checkbox" v-if="multipleSelection" v-model="selectedUsers" :id="'user-' + user.id" :value="user">
                             <input type="radio" v-if="!multipleSelection" v-model="selectedUsers" :id="'user-' + user.id" :value="user">
                         </td>
-                        <td>{{user.name}}</td>
+                        <td v-if="!hideUsername">{{user.name}}</td>
                         <td>{{user.email}}</td>
                         <td>{{user.dateAdded}}</td>
                         <td>{{user.status}}</td>
@@ -58,6 +58,10 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        hideUsername: {
+            type: Boolean,
+            default: true
         }
     },
     methods: {

package/assets/cms/components/user/Chooser.vue

@@ -1,6 +1,10 @@
 <template>
     <div>
-        <search :selectedUsers.sync="selectedUsers" :multiple-selection="multipleSelection"/>
+        <search
+            :selectedUsers.sync="selectedUsers"
+            :multiple-selection="multipleSelection"
+            :hide-username="hideUsername"
+        />
         <div class="dialog-buttons">
             <button class="btn btn-secondary" data-dialog-action="cancel">{{ i18n.cancel }}</button>
             <button type="button" @click="chooseUsers" :disabled="selectedUsers.length === 0" class="btn btn-primary">{{ i18n.choose }}</button>
@@ -9,18 +13,20 @@
 </template>
 
 <script>
-import Users from './Chooser/Users'
 import Search from './Chooser/Search'
 
 export default {
     components: {
-        Users,
         Search
     },
     props: {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        hideUsername: {
+            type: Boolean,
+            default: false
         }
     },
     data() {

package/assets/cms/js/ajax-request/base.js

@@ -49,10 +49,19 @@
         },
 
         error: function(r, my) {
-            ConcreteEvent.fire('AjaxRequestError', {
-                response: r
-            })
-            ConcreteAlert.dialog(ccmi18n.error, ConcreteAjaxRequest.renderErrorResponse(r, true))
+            if (r.readyState !== 0) {
+                // This happens in Firefox. I don't know why. It happens when an AJAX request is in process and then
+                // the page is navigated away from. I feel like Chrome handles this transparently, or maybe jQuery
+                // handles it better behind the scenes and doesn't send the error object on to the 'error' handler
+                // of the jquery .ajax() method. Regardless, sometimes incomplete AJAX requests in Firefox
+                // trigger the error handler without real data, so they just show "Undefined" as a popup.
+                // (e.g. https://github.com/concretecms/concretecms/issues/11135)
+                // So let's only pop the dialog if the readyState is NOT 0.
+                ConcreteEvent.fire('AjaxRequestError', {
+                    response: r
+                })
+                ConcreteAlert.dialog(ccmi18n.error, ConcreteAjaxRequest.renderErrorResponse(r, true))
+            }
         },
 
         validateResponse: function(r, callback) {

package/assets/cms/js/alert.js

@@ -98,13 +98,14 @@ class ConcreteAlert {
             icon: 'check-circle',
             title: false,
             message: false,
+            plainTextMessage: false,
             delay: 2000,
             callback: () => {}
         }, defaults)
 
         const notifyOptions = {
             text: options.message,
-            textTrusted: true,
+            textTrusted: !options.plainTextMessage,
             icon: 'fas fa-' + options.icon,
             type: options.type,
             delay: options.delay,

package/assets/cms/js/base.js

@@ -7,10 +7,6 @@ import PNotify from './pnotify'
 import 'json5'
 import 'jquery.cookie'
 import 'jquery-form'
-import 'bootstrap-select/js/bootstrap-select'
-import './modifiable-bootstrap-select'
-import 'ajax-bootstrap-select'
-import './modifiable-ajax-bootstrap-select'
 import 'dropzone/dist/dropzone'
 
 // jQuery UI components
@@ -32,8 +28,10 @@ import './concrete'
 import './panels'
 import './toolbar'
 import './legacy-dialog'
+import './modal'
 import './alert'
 import './page-notification'
+import './select-combo-box'
 
 // Edit Mode
 import './edit-mode'
@@ -74,17 +72,11 @@ import './users'
 // Express
 import './express'
 
-// Style customizer
-
-// In-page editable fields
-// TBD
-
 // File Manager
 import './file-manager/uploader'
 import './file-manager/file-manager'
 
 // Miscellaneous UI components
-import 'selectize'
 import 'spectrum-colorpicker2'
 import 'tristate/jquery.tristate'
 import 'jquery-text-counter/textcounter'
@@ -101,6 +93,7 @@ import './calendar'
 // Vue components.
 import components from '@concretecms/bedrock/assets/cms/components/index'
 import VueManager from '@concretecms/bedrock/assets/cms/js/vue/Manager'
+import './jquery-vue'
 
 window.NProgress = NProgress
 window._ = _

package/assets/cms/js/edit-mode/area.js

@@ -154,11 +154,6 @@
                 menu: $('[data-area-menu=' + elem.attr('data-launch-area-menu') + ']')
             }
 
-            if (my.getElem().hasClass('ccm-global-area')) {
-                menu_config.menuActiveClass += ' ccm-global-area-highlight'
-                menu_config.highlightClassName += ' ccm-global-area-highlight'
-            }
-
             my.setAttr('menu', new ConcreteMenu(elem, menu_config))
 
             $menuElem.find('a[data-menu-action=add-inline]')
@@ -181,36 +176,6 @@
                     return false
                 })
 
-            $menuElem.find('a[data-menu-action=edit-container-layout]')
-                .off('click.edit-mode')
-                .on('click.edit-mode', function (e) {
-                    // we are going to place this at the END of the list.
-                    var $link = $(this)
-                    var bID = parseInt($link.attr('data-container-layout-block-id'))
-                    var editor = Concrete.getEditMode()
-                    var block = _.findWhere(editor.getBlocks(), { id: bID })
-                    Concrete.event.fire('EditModeBlockEditInline', {
-                        block: block,
-                        arGridMaximumColumns: $link.attr('data-area-grid-maximum-columns'),
-                        event: e
-                    })
-                    return false
-                })
-
-            $menuElem.find('a[data-menu-action=edit-container-layout-style]')
-                .off('click.edit-mode')
-                .on('click.edit-mode', function (e) {
-                    e.preventDefault()
-                    // we are going to place this at the END of the list.
-                    var $link = $(this)
-                    var bID = parseInt($link.attr('data-container-layout-block-id'))
-                    var editor = Concrete.getEditMode()
-                    var block = _.findWhere(editor.getBlocks(), { id: bID })
-                    Concrete.event.fire('EditModeBlockEditInline', {
-                        block: block, event: e, action: CCM_DISPATCHER_FILENAME + '/ccm/system/dialogs/block/design'
-                    })
-                })
-
             $menuElem.find('a[data-menu-action=area-add-block]')
                 .off('click.edit-mode')
                 .on('click.edit-mode', function(e) {

package/assets/cms/js/edit-mode/block.js

@@ -83,6 +83,14 @@
                 e.stopPropagation()
                 return false
             }).pep(my.getPepSettings())
+
+            my.getPeper().on('mouseover', function(e) {
+                my.getElem().addClass('ccm-block-move-hover')
+            })
+
+            my.getPeper().on('mouseout', function(e) {
+                my.getElem().removeClass('ccm-block-move-hover')
+            })
         },
 
         /**
@@ -583,6 +591,25 @@
             })
         },
 
+        /**
+         * Sets an area as accepting a block drag operation. By default all areas will be set up as possible
+         * in this block.js, but extending classes like layout.js and containerblock.js can restrict this
+         * to just their own areas.
+         *
+         * Note: This payload is JUST visual - other operations deeper within on dragstop actually handle rejecting
+         * this operation. This is only so that when we drag layouts and blocks around we don't see drop areas
+         * that _look_ like they will work, only to have the operation rejected when we attempt to drop.
+         *
+         * @param areas
+         */
+        setupAreaDragPayloads: function setupAreaDragPayloads(areas) {
+            _(areas).map((area) => {
+                if (area.acceptsBlockType(this.getHandle())) {
+                    area.getElem().addClass('ccm-area-accepts-block-drag-payload')
+                }
+            })
+        },
+
         pepStop: function blockPepStop(context, event, pep) {
             var my = this; var drag_area
             my.getDragger().stop(1)

package/assets/cms/js/edit-mode/containerblock.js

@@ -16,24 +16,54 @@ import _ from 'underscore'
             var my = this
             Concrete.Block.prototype.init.call(my, elem, edit_mode, $())
 
+            var notch = elem.siblings('.ccm-edit-mode-title-notch-wrapper').find('.ccm-edit-mode-title-notch')
+            my.setAttr('notch', notch)
+
             elem.children('.ccm-block-cover').remove()
             my.bindDrag()
             my.bindDelete()
             my.bindEditDesign()
+            my.bindNotchMenu()
+        },
+
+        getMenu: function() {
+            var my = this
+            return $('[data-container-menu=' + my.getId() + ']')
+        },
+
+        bindNotchMenu: function() {
+            var my = this
+            var menu_config = {
+                highlightClassName: 'ccm-edit-mode-title-notch-highlight',
+                menuActiveClass: 'ccm-edit-mode-title-notch-highlight',
+                menu: my.getMenu(),
+                onShow: function(menu) {
+                    my.getElem().addClass('ccm-block-edit-container-highlight')
+                },
+                onHide: function(menu) {
+                    my.getElem().removeClass('ccm-block-edit-container-highlight')
+                }
+            }
+            new ConcreteMenu(my.getNotch(), menu_config)
         },
 
         bindDelete: function ContainerBlockDelete() {
             var my = this
-            var deleter = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=delete-block]')
+            var deleter = my.getMenu().find('a[data-inline-command=delete-block]')
             deleter.unbind('click.containerDelete').on('click.containerDelete', function(e) {
                 e.preventDefault()
                 my.delete()
             })
         },
 
+        setupAreaDragPayloads: function setupAreaDragPayloads(areas) {
+            var my = this
+            my.getArea().getElem().addClass('ccm-area-accepts-block-drag-payload')
+        },
+
         bindEditDesign: function ContainerBlockEditDesign() {
             var my = this
-            var menuElem = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=edit-container-design]')
+            var menuElem = my.getMenu().find('a[data-inline-command=edit-container-design]')
             menuElem.off('click.edit-mode')
                 .on('click.edit-mode', function (e) {
                     e.preventDefault()
@@ -51,7 +81,7 @@ import _ from 'underscore'
 
         bindDrag: function ContainerBlockBindDrag() {
             var my = this
-            var mover = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=move-block]').parent()
+            var mover = my.getNotch().find('a[data-inline-command=move-block]').parent()
 
             $.pep.unbind(mover)
             mover.pep(my.getPepSettings())

package/assets/cms/js/edit-mode/editmode.js

@@ -322,6 +322,12 @@
                 }
             }
 
+            my.bindEvent('EditModeBlockDragInitialization', function(event, data) {
+                var block = data.block
+                var areas = my.getAreas()
+                block.setupAreaDragPayloads(areas)
+            })
+
             my.bindEvent('EditModeBlockDrag', _.throttle(function editModeEditModeBlockDragEventHandler(event, data) {
                 if (!my.getDragging()) {
                     return
@@ -374,6 +380,12 @@
                 Concrete.event.fire('EditModeSelectableContender')
                 html.removeClass('ccm-block-dragging')
 
+                _(my.getAreas()).map((area) => {
+                    area.getElem().removeClass('ccm-area-accepts-block-drag-payload')
+                })
+
+                my.setDragging(false)
+
                 if (data.block instanceof Concrete.BlockType) return
                 my.scanBlocks()
             })

package/assets/cms/js/edit-mode/layout.js

@@ -21,7 +21,57 @@ import _ from 'underscore'
             })
             Concrete.Block.prototype.init.call(my, elem, edit_mode, $())
 
+            my.setAttr('notch', elem.siblings('.ccm-edit-mode-title-notch-wrapper').find('.ccm-edit-mode-title-notch'))
+
             elem.children('.ccm-block-cover').remove()
+            my.bindNotchMenu()
+        },
+
+        bindNotchMenu: function() {
+            var my = this
+            var $menuElem = $('[data-layout-menu=' + my.getId() + ']')
+            var menu_config = {
+                highlightClassName: 'ccm-edit-mode-title-notch-highlight',
+                menuActiveClass: 'ccm-edit-mode-title-notch-highlight',
+                menu: $menuElem,
+                onShow: function(menu) {
+                    my.getElem().addClass('ccm-block-edit-layout-highlight')
+                },
+                onHide: function(menu) {
+                    my.getElem().removeClass('ccm-block-edit-layout-highlight')
+                }
+            }
+            new ConcreteMenu(my.getNotch(), menu_config)
+
+            $menuElem.find('a[data-menu-action=edit-container-layout]')
+                .off('click.edit-mode')
+                .on('click.edit-mode', function (e) {
+                    // we are going to place this at the END of the list.
+                    var $link = $(this)
+                    var bID = parseInt($link.attr('data-container-layout-block-id'))
+                    var editor = Concrete.getEditMode()
+                    var block = _.findWhere(editor.getBlocks(), { id: bID })
+                    Concrete.event.fire('EditModeBlockEditInline', {
+                        block: block,
+                        arGridMaximumColumns: $link.attr('data-area-grid-maximum-columns'),
+                        event: e
+                    })
+                    return false
+                })
+
+            $menuElem.find('a[data-menu-action=edit-container-layout-style]')
+                .off('click.edit-mode')
+                .on('click.edit-mode', function (e) {
+                    e.preventDefault()
+                    // we are going to place this at the END of the list.
+                    var $link = $(this)
+                    var bID = parseInt($link.attr('data-container-layout-block-id'))
+                    var editor = Concrete.getEditMode()
+                    var block = _.findWhere(editor.getBlocks(), { id: bID })
+                    Concrete.event.fire('EditModeBlockEditInline', {
+                        block: block, event: e, action: CCM_DISPATCHER_FILENAME + '/ccm/system/dialogs/block/design'
+                    })
+                })
         },
 
         bindDrag: function layoutBindDrag() {
@@ -31,6 +81,12 @@ import _ from 'underscore'
             peper.pep(my.getPepSettings())
         },
 
+        setupAreaDragPayloads: function setupAreaDragPayloads(areas) {
+            var my = this
+
+            my.getArea().getElem().addClass('ccm-area-accepts-block-drag-payload')
+        },
+
         addToDragArea: function layoutAddToDragArea() {
             Concrete.Block.prototype.addToDragArea.apply(this, _.toArray(arguments))
 

package/assets/cms/js/edit-mode/style-customizer/style-customizer.js

@@ -1,4 +1,3 @@
-// import './inline-toolbar'
 import './palette'
 import './color'
 import './image'