@concretecms/bedrock 1.3.7 → 1.4.1

package/assets/cms/js/search/base.js

@@ -54,7 +54,6 @@
         this.setupCheckboxes()
         this.setupSort()
         this.setupPagination()
-        this.setupSelectize()
         this.setupAdvancedSearch()
         this.setupCustomizeColumns()
         this.updateResults(options.result)
@@ -120,23 +119,6 @@
         return data
     }
 
-    ConcreteAjaxSearch.prototype.setupSelectize = function() {
-        var selects = this.$element.find('.ccm-enhanced-select')
-        console.log('base')
-        if (selects.length) {
-            selects.selectpicker({
-                liveSearch: true,
-                width: '100%'
-            })
-        }
-        // var selects = this.$element.find('.selectize-select')
-        // if (selects.length) {
-        //     selects.selectize({
-        //         plugins: ['remove_button']
-        //     })
-        // }
-    }
-
     /**
      * The legacy create menu function for simple list items without multiple selection
      * @param $selector

package/assets/cms/js/search/field-selector.js

@@ -36,13 +36,9 @@
                         var $content = $container.append(
                             renderFieldRowTemplate({ field: r })
                         )
-                        var selects = $content.find('select.ccm-enhanced-select')
-                        if (selects.length) {
-                            selects.selectpicker({
-                                liveSearch: true,
-                                width: '100%'
-                            })
-                        }
+                        $content.find('[data-vue]').each(function() {
+                            $(this).concreteVue({ context: $(this).attr('data-vue') })
+                        })
                     }
                 })
             }
@@ -73,13 +69,9 @@
             })
         }
 
-        var selects = $container.find('select.ccm-enhanced-select')
-        if (selects.length) {
-            selects.selectpicker({
-                liveSearch: true,
-                width: '100%'
-            })
-        }
+        $container.find('[data-vue]').each(function() {
+            $(this).concreteVue({ context: $(this).attr('data-vue') })
+        })
     }
 
     // jQuery Plugin

package/assets/cms/js/select-combo-box.js

@@ -0,0 +1,2 @@
+import TomSelect from 'tom-select'
+window.TomSelect = TomSelect

package/assets/cms/js/sitemap/sitemap-selector.js

@@ -35,13 +35,13 @@
                 if (options.selected) {
                     if (options.mode == 'multiple') {
                         $.each(options.selected, function(i, cID) {
-                            var node = my.$element.find('.ccm-sitemap-tree').fancytree('getTree').getNodeByKey(String(cID))
+                            var node = $.ui.fancytree.getTree(my.$element.find('.ccm-sitemap-tree')).getNodeByKey(String(cID))
                             if (node) {
                                 node.setSelected(true)
                             }
                         })
                     } else {
-                        var tree = my.$element.find('.ccm-sitemap-tree').fancytree('getTree')
+                        var tree = $.ui.fancytree.getTree(my.$element.find('.ccm-sitemap-tree'))
                         var node = tree.getNodeByKey(String(options.selected))
                         if (node) {
                             node.setSelected(true)

package/assets/cms/js/sitemap/sitemap.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
-/* global _, ccmi18n_sitemap, CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, CCM_REL, Concrete, ConcreteAlert, ConcretePageMenu, ccm_parseJSON, ConcreteProgressiveOperation, ConcreteEvent */
+/* global TomSelect, _, ccmi18n_sitemap, CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, CCM_REL, Concrete, ConcreteAlert, ConcretePageMenu, ccm_parseJSON, ConcreteProgressiveOperation, ConcreteEvent */
 
 /* Base search class for AJAX forms in the UI */
 ;(function(global, $) {
@@ -47,7 +47,7 @@
 
         getTree: function() {
             var my = this
-            return my.$sitemap.fancytree('getTree')
+            return $.ui.fancytree.getTree(my.$sitemap)
         },
 
         setupSiteTreeSelector: function(tree) {
@@ -60,13 +60,14 @@
                     my.$element.find('div.ccm-sitemap-tree-selector-wrapper').append($(my.localesWrapperTemplate))
                     var $menu = my.$element.find('div.ccm-sitemap-tree-selector-wrapper select')
 
+                    // @todo - refactor TomSelect to bring back nice styling of flags, etc...
                     if (tree.entryGroups && tree.entryGroups.length) {
                         $.each(tree.entryGroups, function (gi, group) {
                             var $optgroup = $('<optgroup label="' + group.label + '">')
 
                             $.each(tree.entries, function (ti, entry) {
                                 if (entry.class == group.value) {
-                                    var $option = '<option value="' + entry.siteTreeID + '" data-content=\'<div class="option">' + entry.element + '</div>\''
+                                    var $option = '<option value="' + entry.siteTreeID + '"'
 
                                     if (entry.isSelected) {
                                         $option += ' selected'
@@ -81,7 +82,7 @@
                         })
                     } else {
                         $.each(tree.entries, function (ti, entry) {
-                            var $option = '<option value="' + entry.siteTreeID + '" data-content=\'<div class="option">' + entry.element + '</div>\''
+                            var $option = '<option value="' + entry.siteTreeID + '"'
 
                             if (entry.isSelected) {
                                 $option += ' selected'
@@ -92,19 +93,13 @@
                         })
                     }
 
-                    $menu.selectpicker({
-                        liveSearch: true,
-                        maxOptions: 1
-                    })
+                    var menuSelect = new TomSelect($menu.get(0))
 
-                    $menu.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
-                        var treeID = $(this).selectpicker('val')
-                        if (treeID != previousValue) {
-                            var source = my.getTree().options.source
-                            my.options.siteTreeID = treeID
-                            source.data.siteTreeID = treeID
-                            my.getTree().reload(source)
-                        }
+                    menuSelect.on('change', function (treeID) {
+                        var source = my.getTree().options.source
+                        my.options.siteTreeID = treeID
+                        source.data.siteTreeID = treeID
+                        my.getTree().reload(source)
                     })
                 }
             }
@@ -340,10 +335,10 @@
             }
             ConcreteEvent.unsubscribe('SitemapDeleteRequestComplete.sitemap')
             ConcreteEvent.subscribe('SitemapDeleteRequestComplete.sitemap', function(e) {
-                var node = my.$sitemap.fancytree('getActiveNode')
+                var node = $.ui.fancytree.getTree($(my.$sitemap)).getActiveNode()
                 var parent = node.parent
                 my.reloadNode(parent)
-                $(my.$sitemap).fancytree('getTree').visit(function(node) {
+                $.ui.fancytree.getTree($(my.$sitemap)).visit(function(node) {
                     // update the trash node when a page is deleted
                     if (node.data.isTrash) {
                         var isTrashNodeExpanded = node.expanded
@@ -456,7 +451,7 @@
             if (pg.length) {
                 pg.find('a:not([disabled])').unbind('click').on('click', function() {
                     var href = $(this).attr('href')
-                    var root = my.$sitemap.fancytree('getRootNode')
+                    var root = $.ui.fancytree.getTree(my.$sitemap).getRootNode()
                     jQuery.fn.dialog.showLoader()
                     $.ajax({
                         dataType: 'json',
@@ -482,7 +477,7 @@
 
             (my.options.onDisplaySingleLevel || $.noop).call(this, node)
 
-            var root = my.$sitemap.fancytree('getRootNode')
+            var root = $.ui.fancytree.getTree(my.$sitemap).getRootNode()
             // my.$sitemap.fancytree('option', 'minExpandLevel', minExpandLevel);
             var ajaxData = $.extend({
                 dataType: 'json',

package/assets/cms/js/toolbar.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
-/* global CCM_DISPATCHER_FILENAME, ConcreteEvent, ConcreteHelpGuideManager, ConcretePanelManager, bootstrap */
+/* global CCM_DISPATCHER_FILENAME, ConcreteModal, ConcreteEvent, ConcreteHelpGuideManager, ConcretePanelManager, bootstrap */
 
 /* Basic toolbar class */
 ;(function(global, $) {
@@ -14,6 +14,28 @@
         $searchResults.css('right', $(window).width() - $searchInput.offset().left - $searchResults.width() - 1)
     }
 
+    function setupAnnouncementAndHelp() {
+        if (document.querySelectorAll('div[data-wrapper=concrete-announcement-broadcast]').length) {
+            Concrete.Vue.activateContext('cms', function (Vue, config) {
+                new Vue({
+                    el: 'div[data-wrapper=concrete-announcement-broadcast]',
+                    components: config.components
+                })
+            })
+        }
+
+        $(document.body).on('click', 'a[data-launch=help-modal]', function (e) {
+            e.stopPropagation()
+            e.preventDefault()
+
+            const modal = new ConcreteModal()
+            const url = new URL($(this).attr('href'))
+            modal.openExternal(url, ccmi18n.helpPopup, {
+                size: 'lg'
+            })
+        })
+    }
+
     function setupHelpNotifications() {
         var manager = ConcreteHelpGuideManager.get()
         if (manager.getGuideToLaunchOnRefresh()) {
@@ -62,7 +84,7 @@
 
         const tooltipTriggerList = [].slice.call(document.querySelectorAll('.launch-tooltip'))
         tooltipTriggerList.map(function (tooltipTriggerEl) {
-            return new bootstrap.Tooltip(tooltipTriggerEl, {
+            return bootstrap.Tooltip.getInstance(tooltipTriggerEl) || new bootstrap.Tooltip(tooltipTriggerEl, {
                 container: '#ccm-tooltip-holder',
                 delay: {
                     show: 500,
@@ -324,6 +346,7 @@
                 setupTooltips()
                 setupPageAlerts()
                 setupHelpNotifications()
+                setupAnnouncementAndHelp()
                 setupMobileNav()
             }
         },

package/assets/cms/js/tree.js

@@ -155,7 +155,7 @@ ConcreteTree.prototype = {
                 if (options.removeNodesByKey.length) {
                     for (var i = 0; i < options.removeNodesByKey.length; i++) {
                         var nodeID = options.removeNodesByKey[i]
-                        var node = $tree.fancytree('getTree').getNodeByKey(String(nodeID))
+                        var node = $.ui.fancytree.getTree($tree).getNodeByKey(String(nodeID))
                         if (node) {
                             node.remove()
                         }
@@ -168,7 +168,7 @@ ConcreteTree.prototype = {
 
                 var selectedNodes
                 if (options.chooseNodeInForm) {
-                    selectedNodes = $tree.fancytree('getTree')
+                    selectedNodes = $.ui.fancytree.getTree($tree)
                     selectedNodes = selectedNodes.getSelectedNodes()
                     if (selectedNodes.length) {
                         var keys = $.map(selectedNodes, function (node) {
@@ -332,7 +332,7 @@ ConcreteTree.prototype = {
                     ConcreteAlert.dialog(ccmi18n.error, r.errors.join('<br>'))
                 } else {
                     jQuery.fn.dialog.closeTop()
-                    var node = $tree.fancytree('getTree').getNodeByKey(String(r.treeNodeParentID))
+                    var node = $.ui.fancytree.getTree($tree).getNodeByKey(String(r.treeNodeParentID))
                     jQuery.fn.dialog.showLoader()
                     my.reloadNode(node, function () {
                         jQuery.fn.dialog.hideLoader()
@@ -411,23 +411,23 @@ ConcreteTree.setupTreeEvents = function (my) {
         var node
         if (nodes.length) {
             for (var i = 0; i < nodes.length; i++) {
-                node = $tree.fancytree('getTree').getNodeByKey(String(nodes[i].treeNodeParentID))
+                node = $.ui.fancytree.getTree($tree).getNodeByKey(String(nodes[i].treeNodeParentID))
                 node.addChildren(nodes)
             }
         } else {
-            node = $tree.fancytree('getTree').getNodeByKey(String(nodes.treeNodeParentID))
+            node = $.ui.fancytree.getTree($tree).getNodeByKey(String(nodes.treeNodeParentID))
             node.addChildren(nodes)
         }
     })
     ConcreteEvent.subscribe('ConcreteTreeUpdateTreeNode.concreteTree', function (e, r) {
         var $tree = $('[data-tree=' + my.options.treeID + ']')
-        var node = $tree.fancytree('getTree').getNodeByKey(String(r.node.key))
+        var node = $.ui.fancytree.getTree($tree).getNodeByKey(String(r.node.key))
         node.fromDict(r.node)
         node.render()
     })
     ConcreteEvent.subscribe('ConcreteTreeDeleteTreeNode.concreteTree', function (e, r) {
         var $tree = $('[data-tree=' + my.options.treeID + ']')
-        var node = $tree.fancytree('getTree').getNodeByKey(String(r.node.treeNodeID))
+        var node = $.ui.fancytree.getTree($tree).getNodeByKey(String(r.node.treeNodeID))
         node.remove()
     })
 }

package/assets/cms/js/users/group-manager.js

@@ -0,0 +1,55 @@
+/* global ccmi18n, CCM_DISPATCHER_FILENAME, ConcreteAjaxRequest, ConcreteEvent */
+class ConcreteUserGroupManager {
+    static launchDialog(callback, opts) {
+        const options = {
+            displayDialogButtons: true
+        }
+
+        $.extend(options, opts)
+
+        $.fn.dialog.open({
+            title: ccmi18n.chooseGroup,
+            href: `${CCM_DISPATCHER_FILENAME}/ccm/system/dialogs/groups/search`,
+            width: '740px',
+            modal: true,
+            height: '600px',
+            data: options,
+            onOpen: function() {
+                ConcreteEvent.unsubscribe('SelectGroup.core')
+                ConcreteEvent.subscribe('SelectGroup.core', function (e, response) {
+                    $.fn.dialog.closeTop()
+                    callback(response)
+                })
+            }
+        })
+    }
+
+    static getGroupDetails(groupID, callbackSuccess, callbackFailure) {
+        const options = {
+            url: `${CCM_DISPATCHER_FILENAME}/ccm/system/group/get_json`,
+            data: { gID: groupID },
+            skipResponseValidation: true,
+            success(r) {
+                if (r.error) {
+                    if (callbackFailure) {
+                        callbackFailure(r)
+                    } else {
+                        ConcreteAjaxRequest.validateResponse(r)
+                    }
+                } else if (callbackSuccess) {
+                    callbackSuccess(r)
+                }
+            }
+        }
+        if (callbackFailure) {
+            options.error = function(r) {
+                callbackFailure(r)
+            }
+        }
+        /* eslint-disable no-new */
+        new ConcreteAjaxRequest(options)
+        /* eslint-enable no-new */
+    }
+}
+
+global.ConcreteUserGroupManager = ConcreteUserGroupManager

package/assets/cms/js/users/user-manager.js

@@ -2,7 +2,8 @@
 class ConcreteUserManager {
     static launchDialog(callback, opts) {
         const options = {
-            multipleSelection: ''
+            multipleSelection: false,
+            hideUsername: false
         }
 
         $.extend(options, opts)

package/assets/cms/js/users.js

@@ -1 +1,2 @@
 import './users/user-manager'
+import './users/group-manager'

package/assets/cms/js/vue/Manager.js

@@ -51,9 +51,12 @@ export default class Manager {
      * @param {Function} callback (Vue, options) => new Vue(options)
      */
     activateContext(context, callback) {
-        return callback(Vue, {
-            components: this.getContext(context)
-        })
+        // This is stupid but sometimes activateContext and extendContext are called essentially simultaneously and we need this to fire after
+        setTimeout(() => {
+            return callback(Vue, {
+                components: this.getContext(context)
+            })
+        }, 10)
     }
 
     /**

package/assets/cms/scss/_base.scss

@@ -4,6 +4,7 @@
 @import 'buttons';
 @import 'tables';
 @import 'breadcrumb';
+@import 'cards';
 @import 'list-group';
 
 // Support classes
@@ -65,10 +66,6 @@
 // File Uploader
 @import './file-uploader';
 
-// Bootstrap Select
-@import 'bootstrap-select/sass/bootstrap-select';
-@import 'ajax-bootstrap-select/dist/css/ajax-bootstrap-select';
-
 // Forms
 @import './forms';
 
@@ -77,10 +74,6 @@
 // Previously wasn't throwing the error because Selectize includes the BS mixins
 @import '~bootstrap/scss/mixins';
 
-//TODO: Check Selectize replacement
-//@import '~selectize-bootstrap4-theme/scss/selectize.bootstrap4';
-//@import './selectize';
-
 // Miscellaneous components
 @import './vue';
 @import './boards';
@@ -90,6 +83,7 @@
 @import './tabs';
 @import './item-selector';
 @import './item-select-list';
+@import './select-combo-box';
 @import './permission-grid';
 @import './tooltips';
 @import 'spectrum-colorpicker2/dist/spectrum';

package/assets/cms/scss/_cards.scss

@@ -0,0 +1,7 @@
+.ccm-ui {
+  .card {
+    // Let's disable borders on the outside of the cards. We can't use the $card-border-width variable for this
+    // because it also disables borders between card headers and bodies and footers
+    border-width: 0;
+  }
+}

package/assets/cms/scss/_file-manager.scss

@@ -1,3 +1,4 @@
 // CSS for the chooser dialog window:
 @import 'file-manager/file-chooser';
 @import 'file-manager/image-cell';
+@import 'file-manager/thumbnail-image-editor';

package/assets/cms/scss/_file-uploader.scss

@@ -30,16 +30,26 @@
 
 .ccm-incoming-files-container {
   margin-bottom: 15px;
-  max-height: 400px;
+  max-height: 280px;
   overflow-y: scroll;
 }
 
 .ccm-directory-selector-container {
   margin-top: 15px;
 
-  .dropdown-item {
+  .item {
+    i {
+      margin-right: 10px;
+    }
+  }
+
+  .option {
     padding-left: 204px; // We need this default in order to handle the many levels of sub-nodes.
 
+    i {
+      margin-right: 5px; // item and option require diferent margins because one is flexbox and the other is not
+    }
+
     &.level-1 {
       padding-left: 12px;
     }
@@ -77,7 +87,7 @@
 
 .ccm-file-upload-container {
   display: block;
-  height: 400px;
+  height: 280px;
   overflow-y: auto;
   position: relative;
   user-select: none;

package/assets/cms/scss/_help.scss

@@ -18,6 +18,7 @@ div#ccm-toolbar {
 .ccm-ui {
   .ccm-help-tour {
     background-color: $help-tour-background-color;
+    border-color: $help-tour-background-color;
     font-size: 1rem;
     padding: $help-tour-padding;
 
@@ -127,9 +128,8 @@ div#ccm-toolbar {
         color: $help-tour-position-color !important;
         margin-left: 1rem;
 
-        &,
         &:hover {
-          text-decoration: none;
+          text-decoration: underline;
         }
       }
     }
@@ -144,3 +144,12 @@ div#ccm-toolbar {
     padding: 10px 20px;
   }
 }
+
+.ccm-help-media {
+  display: flex;
+  margin-top: 0.5rem;
+
+  > div {
+    margin-right: 1rem;
+  }
+}

package/assets/cms/scss/_item-selector.scss

@@ -2,6 +2,10 @@
  * New selector style
  */
 .ccm-item-selector-group {
+  .btn-group {
+    max-width: 100%;
+  }
+
   .btn {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -31,6 +35,12 @@
     }
   }
 
+  &.is-invalid {
+    .btn {
+      border-color: $danger;
+    }
+  }
+
 }
 
 

package/assets/cms/scss/_layouts.scss

@@ -88,3 +88,19 @@ div.ccm-area-layout-control-bar i {
   position: absolute;
   top: -2px;
 }
+
+// Ensure that many grids will display properly within our layout tools.
+// NOTE: If you implement a custom grid framework you must ensure that your row DIVs appear
+// with position: relative within the following two IDs.
+// This ensures that the layout tools work with this theme grid.
+// Note: This HAD been a part of the bedrock frontend toolkit, meant to be included by themes when they include
+// Bedrock. However, if a theme wasn't built on bedrock then it was borking in the layout tools, including Elemental
+// So instead, let's include the very basic implementation of this here, with div.row (which should catch BS4, BS5
+// and other derived grid frameworks). If you have a different series of classes you'll have to figure out your own
+// implementation based on this.
+div#ccm-theme-grid-temp,
+div#ccm-theme-grid-edit-mode-row-wrapper {
+  div.row {
+    position: relative; // This is necessary in order for the javascript to correctly use jquery position() calls
+  }
+}