@concretecms/bedrock 1.3.7 → 1.4.0

package/assets/cms/js/file-manager/uploader.js

@@ -1,5 +1,6 @@
 /* global ccmi18n_fileuploader, CCM_SECURITY_TOKEN, NProgress, ConcreteEvent */
 /* eslint indent: [2, 4, {"SwitchCase": 1}] */
+/* eslint-disable no-new */
 
 (function ($) {
     $.fn.concreteFileUploader = function (options) {
@@ -384,73 +385,32 @@
 
                         $column.append($tabContent)
 
-                        /*
-                         * Add folder selector
-                         */
-
-                        const $selectDirectoryContainer = $('<div/>')
-                            .addClass('ccm-directory-selector-container')
-
-                        const $selectDirectoryFormGroup = $('<div/>')
-                            .addClass('form-group')
-
-                        const selectDirectoryId = 'input-' + fileUploader.getUniqueId()
-
-                        // noinspection JSUnresolvedVariable
-                        const $selectDirectoryLabel = $('<label/>')
-                            .addClass('form-label')
-                            .attr('for', selectDirectoryId)
-                            .html(ccmi18n_fileuploader.uploadFilesTo)
-
-                        const $selectDirectoryInputGroup = $('<div/>')
-                            .addClass('input-group')
-
-                        const $select = $('<select/>')
-                            .addClass('ccm-directory-selector')
-                            .attr('data-size', 5)
-                            .attr('data-live-search', 'true')
-                            .attr('id', selectDirectoryId)
-
-                        // noinspection JSUnresolvedVariable
-                        const $a = $('<a/>')
-                            .attr('href', 'javascript:void(0);')
-                            .addClass('btn btn-outline-secondary ccm-file-uploader-create-new-directory-button')
-                            .html(ccmi18n_fileuploader.createNewDirectoryButton)
-
-                        $selectDirectoryInputGroup.append($select)
-                        $selectDirectoryInputGroup.append($a)
-                        $selectDirectoryFormGroup.append($selectDirectoryLabel)
-                        $selectDirectoryFormGroup.append($selectDirectoryInputGroup)
-
-                        $selectDirectoryContainer.append($selectDirectoryFormGroup)
-                        $column.append($selectDirectoryContainer)
-
-                        const $div = $('<div/>')
-                            .addClass('ccm-file-uploader-new-directory-name-container')
-                            .addClass('hidden-container')
-
-                        const $formGroup = $('<div/>')
-                            .addClass('form-group')
-
-                        const inputId = 'input-' + fileUploader.getUniqueId()
-
-                        const $label = $('<label/>')
-                            .addClass('form-label')
-                            .attr('for', inputId)
-                            .html(ccmi18n_fileuploader.directoryName)
-
-                        // noinspection JSUnresolvedVariable
-                        const $input = $('<input/>')
-                            .attr('type', 'text')
-                            .attr('placeholder', ccmi18n_fileuploader.directoryPlaceholder)
-                            .attr('id', inputId)
-                            .addClass('ccm-file-uploader-new-directory-name')
-                            .addClass('form-control')
+                        let directoryId = 0
+                        if (fileUploader.isFunction(fileUploader.options.folderID)) {
+                            directoryId = parseInt(fileUploader.options.folderID())
+                        }
 
-                        $formGroup.append($label)
-                        $formGroup.append($input)
-                        $div.append($formGroup)
-                        $column.append($div)
+                        const $directoryContainer = $('<div/>')
+                            .attr('style', 'min-height: 200px')
+                        $directoryContainer.html('<concrete-file-directory-input input-label="Upload files to" :directory-id="' + directoryId + '" input-name="uploadDirectoryId" :show-add-directory-button="true" @change="currentFolder = $event"></concrete-file-directory-input>')
+
+                        $('<input />').attr('type', 'hidden').attr('name', 'fileUploaderDirectoryId').appendTo($directoryContainer)
+                        $column.append($directoryContainer)
+
+                        Concrete.Vue.activateContext('cms', function (Vue, config) {
+                            new Vue({
+                                el: $directoryContainer.get(0),
+                                components: config.components,
+                                data: {
+                                    currentFolder: 0
+                                },
+                                watch: {
+                                    currentFolder() {
+                                        $('input[name=fileUploaderDirectoryId]').val(this.currentFolder)
+                                    }
+                                }
+                            })
+                        })
 
                         $row.append($column)
 
@@ -588,9 +548,6 @@
 
                     fileUploader.refresh()
 
-                    $dialogEl.find('.ccm-directory-selector').removeAttr('disabled').selectpicker('refresh')
-                    $dialogEl.find('.ccm-file-uploader-create-new-directory-button').removeClass('disabled')
-
                     let error = ''
 
                     for (error of errors) {
@@ -627,7 +584,7 @@
                             ccm_token: CCM_SECURITY_TOKEN,
                             send_file: fileIds,
                             removeFilesAfterPost: removeFilesAfterPost,
-                            currentFolder: $dialogEl.find('select.ccm-directory-selector').find('option:selected').val()
+                            currentFolder: $('input[name=fileUploaderDirectoryId]').val()
                         }, fileUploader.options.formData),
                         dataType: 'json',
                         success: function (data) {
@@ -654,7 +611,7 @@
                         data: $.extend({
                             ccm_token: CCM_SECURITY_TOKEN,
                             url_upload: $dialogEl.find('.ccm-remote-file-url:not(.d-none)').val(),
-                            currentFolder: $dialogEl.find('select.ccm-directory-selector').find('option:selected').val()
+                            currentFolder: $('input[name=fileUploaderDirectoryId]').val()
                         }, fileUploader.options.formData),
                         dataType: 'json',
                         success: function (data) {
@@ -715,98 +672,6 @@
                     $dialogEl.append(fileUploader.templates.getDialog())
                 },
 
-                createDirectory: function (directoryName) {
-                    $.ajax({
-                        url: CCM_DISPATCHER_FILENAME + '/ccm/system/file/create_directory' + '?_=' + new Date().getTime(),
-                        method: 'POST',
-                        data: {
-                            ccm_token: CCM_SECURITY_TOKEN,
-                            directoryName: directoryName,
-                            currentFolder: $dialogEl.find('select.ccm-directory-selector').find('option:selected').val()
-                        },
-                        dataType: 'json',
-                        success: function (data) {
-                            if (!data.error) {
-                                // re-fetch the directories and select the new folder
-                                // noinspection JSUnresolvedVariable
-                                fileUploader.fetchDirectories(data.directoryId, function () {
-                                    fileUploader.upload()
-                                })
-                            } else {
-                                fileUploader.raiseError(data.errors)
-                            }
-                        }
-                    })
-                },
-
-                fetchDirectories: function (selectedDirectoryId, clb) {
-                    $.ajax({
-                        url: CCM_DISPATCHER_FILENAME + '/ccm/system/file/fetch_directories' + '?_=' + new Date().getTime(),
-                        method: 'POST',
-                        data: {
-                            ccm_token: CCM_SECURITY_TOKEN
-                        },
-                        dataType: 'json',
-                        success: function (data) {
-                            if (!data.error) {
-                                const $selectBox = $dialogEl.find('select.ccm-directory-selector')
-
-                                if (typeof selectedDirectoryId === 'undefined' || selectedDirectoryId === null) {
-                                    selectedDirectoryId = $selectBox.find('option:selected').val()
-                                }
-
-                                $selectBox.empty()
-
-                                let directory = ''
-
-                                for (directory of data.directories) {
-                                    const $option = $('<option/>')
-
-                                    // noinspection JSUnresolvedVariable
-                                    $option
-                                        .attr('data-icon', 'fas fa-folder')
-                                        .addClass('level-' + directory.directoryLevel)
-                                        .attr('value', directory.directoryId)
-                                        .html(directory.directoryName)
-
-                                    $selectBox.append($option)
-                                }
-
-                                // refresh options
-                                $selectBox.selectpicker('refresh')
-
-                                if ($selectBox.find('option[value=\'' + selectedDirectoryId + '\']').length) {
-                                    // re-selected previous selected option
-                                    $selectBox.selectpicker('val', '' + selectedDirectoryId)
-                                } else {
-                                    // the option is not available, select first options instead
-                                    const firstDirectoryId = $selectBox.find('option:first').val()
-
-                                    $selectBox.selectpicker('val', '' + firstDirectoryId)
-                                }
-
-                                $dialogEl.find('.ccm-file-uploader-new-directory-name').val('')
-
-                                if (!$dialogEl.find('.ccm-file-uploader-new-directory-name-container').hasClass('hidden-container')) {
-                                    $dialogEl.find('.ccm-file-uploader-create-new-directory-button').trigger('click')
-                                }
-
-                                if (typeof clb === 'function') {
-                                    clb()
-                                }
-                            } else {
-                                fileUploader.raiseError(data.errors)
-                            }
-                        }
-                    })
-                },
-
-                initDirectorySelector: function () {
-                    $dialogEl.find('select.ccm-directory-selector')
-                        .selectpicker()
-                        .addClass('form-control')
-                },
-
                 fetchFilesFromIncomingDirectory: function () {
                     $.ajax({
                         url: CCM_DISPATCHER_FILENAME + '/ccm/system/file/fetch_incoming_files' + '?_=' + new Date().getTime(),
@@ -941,11 +806,6 @@
 
                             break
                     }
-
-                    if (!$dialogEl.find('.ccm-file-uploader-new-directory-name-container').hasClass('hidden-container') &&
-                        $dialogEl.find('.ccm-file-uploader-new-directory-name').val().length === 0) {
-                        $dialogEl.closest('.ui-dialog').find('.ccm-file-uploader-submit-button').attr('disabled', 'disabled')
-                    }
                 },
 
                 reset: function () {
@@ -1020,11 +880,9 @@
                         },
 
                         sending: function (file, xhr, formData) {
-                            const $selectBox = $dialogEl.find('select.ccm-directory-selector')
-
                             formData.append('responseFormat', 'dropzone')
                             formData.append('ccm_token', CCM_SECURITY_TOKEN)
-                            formData.append('currentFolder', $selectBox.find('option:selected').val())
+                            formData.append('currentFolder', $('input[name=fileUploaderDirectoryId]').val())
 
                             if (typeof fileUploader.options.formData === 'object') {
                                 let key = ''
@@ -1047,9 +905,6 @@
 
                                 fileUploader.dropzone.options.autoProcessQueue = false
 
-                                $dialogEl.find('.ccm-directory-selector').removeAttr('disabled').selectpicker('refresh')
-                                $dialogEl.find('.ccm-file-uploader-create-new-directory-button').removeClass('disabled')
-
                                 if (fileUploader.uploadedFiles.length !== 0) {
                                     if (typeof fileUploader.options.formData.fID === 'undefined') {
                                         ConcreteEvent.publish('FileManagerAddFilesComplete', {
@@ -1091,9 +946,6 @@
 
                             $fileElement.find('.ccm-file-upload-progress-text-value').html(parseInt(progress) + '%')
                             $fileElement.addClass('in-progress')
-
-                            $dialogEl.find('.ccm-directory-selector').attr('disabled', 'disabled').selectpicker('refresh')
-                            $dialogEl.find('.ccm-file-uploader-create-new-directory-button').addClass('disabled')
                         }
                     }
                     if (this.options && this.options.dropzone) {
@@ -1177,7 +1029,6 @@
                     $dialogEl.dialog({
                         title: ccmi18n_fileuploader.dialogTitle,
                         width: '80%',
-                        height: '800',
                         modal: true,
                         autoOpen: false,
                         buttons: [{
@@ -1189,21 +1040,7 @@
                             text: ccmi18n_fileuploader.continueButton,
                             click: function (e) {
                                 e.preventDefault()
-
-                                if (!$dialogEl.find('.ccm-file-uploader-new-directory-name-container').hasClass('hidden-container')) {
-                                    /*
-                                     * Create the directory before uploading.
-                                     *
-                                     * In this case the upload will be started after the directory has been created.
-                                     */
-
-                                    fileUploader.createDirectory(
-                                        $dialogEl.find('.ccm-file-uploader-new-directory-name').val()
-                                    )
-                                } else {
-                                    fileUploader.upload()
-                                }
-
+                                fileUploader.upload()
                                 return false
                             }
                         }],
@@ -1235,12 +1072,6 @@
 
                             fileUploader.forceClose = false
 
-                            // select the first value in directory input
-                            const $selectBox = $dialogEl.find('select.ccm-directory-selector')
-
-                            $selectBox.val($selectBox.find('option:first').val())
-                            $selectBox.selectpicker('refresh')
-
                             // reset everything
                             fileUploader.reset()
 
@@ -1249,12 +1080,6 @@
                         },
 
                         open: function () {
-                            if (fileUploader.isFunction(fileUploader.options.folderID)) {
-                                fileUploader.fetchDirectories(parseInt(fileUploader.options.folderID()))
-                            } else {
-                                fileUploader.fetchDirectories()
-                            }
-
                             /*
                              * Ugly polyfill to re-initialize the bootstrap tab navigation
                              * because within a dynamic window the tab's wont work after
@@ -1317,7 +1142,6 @@
 
                             // init components
                             fileUploader.initTabNavigation()
-                            fileUploader.initDirectorySelector()
                             fileUploader.initCreateNewFolderFunctionality()
 
                             fileUploader.initYourComputerTab()

package/assets/cms/js/help/help.js

@@ -2,12 +2,15 @@ import 'bootstrap-tourist'
 
 import './guide-manager'
 
-import './guides/add-content'
-import './guides/add-content-edit-mode'
-import './guides/add-page'
-import './guides/change-content'
-import './guides/change-content-edit-mode'
-import './guides/dashboard'
-import './guides/location-panel'
-import './guides/personalize'
 import './guides/toolbar'
+
+// These guides are no longer used but let's keep them in the source in case we need to repurpose them
+// and/or bring them back.
+// import './guides/add-content'
+// import './guides/add-content-edit-mode'
+// import './guides/add-page'
+// import './guides/change-content'
+// import './guides/change-content-edit-mode'
+// import './guides/dashboard'
+// import './guides/location-panel'
+// import './guides/personalize'

package/assets/cms/js/in-context-menu.js

@@ -19,6 +19,7 @@
             menuLauncherHoverParentClass: 'ccm-parent-menu-item-hover',
             enabled: true,
             enableClickProxy: true,
+            onShow: false,
             onHide: false
         }, options)
 
@@ -280,6 +281,10 @@
             ConcreteMenuManager.activeMenu = my
 
             ConcreteEvent.publish('ConcreteMenuShow', { menu: my, menuElement: $menu })
+
+            if (my.options.onShow) {
+                my.options.onShow(my)
+            }
         },
 
         hide: function (e) {

package/assets/cms/js/jquery-vue.js

@@ -0,0 +1,22 @@
+/* I know this is an insane library name. This is a simple plugin meant to bring our vue contexts to different
+/* places */
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* global _, ccmi18n, ccmi18n_filemanager, ConcreteProgressiveOperation, ConcreteAlert, ConcreteAssetLoader, ConcreteEvent, ConcreteMenu */
+;(function(global, $) {
+    'use strict'
+    // jQuery Plugin
+    $.fn.concreteVue = function(options) {
+        this.each(function () {
+            var $element = $(this)
+            if (!$element.data('jquery-vue-attached')) {
+                Concrete.Vue.activateContext(options.context, function (Vue, config) {
+                    new Vue({
+                        el: $element.get(0),
+                        components: config.components
+                    })
+                })
+                $element.data('jquery-vue-attached', true)
+            }
+        })
+    }
+})(global, jQuery)

package/assets/cms/js/legacy-dialog.js

@@ -302,82 +302,91 @@
     }
 
     $.fn.dialog.activateDialogContents = function($dialog) {
-        // handle buttons
-        $dialog.find('button[data-dialog-action=cancel]').on('click', function() {
-            $.fn.dialog.closeTop()
-        })
-        $dialog.find('[data-dialog-form]').each(function() {
-            var $form = $(this)
-            var options = {}
-            if ($form.attr('data-dialog-form-processing') == 'progressive') {
-                options.progressiveOperation = true
-                options.progressiveOperationElement = 'div[data-dialog-form-element=progress-bar]'
-            }
-            $form.concreteAjaxForm(options)
-        })
-
-        $dialog.find('button[data-dialog-action=submit]').on('click', function() {
-            $dialog.find('[data-dialog-form]').submit()
-        })
-
-        fixDialogButtons($dialog)
+        setTimeout(function () {
+            // handle buttons
+            $dialog.find('button[data-dialog-action=cancel]').on('click', function () {
+                $.fn.dialog.closeTop()
+            })
+            $dialog.find('[data-dialog-form]').each(function () {
+                var $form = $(this)
+                var options = {}
+                if ($form.attr('data-dialog-form-processing') == 'progressive') {
+                    options.progressiveOperation = true
+                    options.progressiveOperationElement = 'div[data-dialog-form-element=progress-bar]'
+                }
+                $form.concreteAjaxForm(options)
+            })
 
-        // make dialogs
-        $dialog.find('.dialog-launch').dialog()
+            $dialog.find('button[data-dialog-action=submit]').on('click', function () {
+                $dialog.find('[data-dialog-form]').submit()
+            })
 
-        // automated close handling
-        $dialog.find('.ccm-dialog-close').on('click', function() {
-            $dialog.dialog('close')
-        })
+            fixDialogButtons($dialog)
 
-        const tooltipTriggerList = [].slice.call($dialog.find('.launch-tooltip'))
-        tooltipTriggerList.map(function (tooltipTriggerEl) {
-            return new bootstrap.Tooltip(tooltipTriggerEl, { container: '#ccm-tooltip-holder' })
-        })
+            // make dialogs
+            $dialog.find('.dialog-launch').dialog()
 
-        // help handling
-        if ($dialog.find('.dialog-help').length > 0) {
-            $dialog.find('.dialog-help').hide()
-            var helpContent = $dialog.find('.dialog-help').html()
-            var helpText
-            if (ccmi18n.helpPopup) {
-                helpText = ccmi18n.helpPopup
-            } else {
-                helpText = 'Help'
-            }
-            var button = $('<button class="btn-help"><svg><use xlink:href="#icon-dialog-help" /></svg></button>')
-            var container = $('#ccm-tooltip-holder')
-            button.insertBefore($dialog.parent().find('.ui-dialog-titlebar-close'))
+            // Handle vue components within
+            $dialog.find('[data-vue]').each(function() {
+                $(this).concreteVue({ context: $(this).attr('data-vue') })
+            })
 
-            button.popover({
-                content: function() {
-                    return helpContent
-                },
-                placement: 'bottom',
-                html: true,
-                container: container,
-                trigger: 'click'
+            // automated close handling
+            $dialog.find('.ccm-dialog-close').on('click', function () {
+                $dialog.dialog('close')
             })
-            button.on('shown.bs.popover', function() {
-                var binding = function() {
-                    button.popover('hide', button)
-                    binding = $.noop
-                }
 
-                button.on('hide.bs.popover', function(event) {
-                    button.unbind(event)
-                    binding = $.noop
+            const tooltipTriggerList = [].slice.call($dialog.find('.launch-tooltip'))
+            tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl, {
+                    container: '#ccm-tooltip-holder'
                 })
+            })
 
-                $('body').mousedown(function(e) {
-                    if ($(e.target).closest(container).length || $(e.target).closest(button).length) {
-                        return
+            // help handling
+            if ($dialog.find('.dialog-help').length > 0) {
+                $dialog.find('.dialog-help').hide()
+                var helpContent = $dialog.find('.dialog-help').html()
+                var helpText
+                if (ccmi18n.helpPopup) {
+                    helpText = ccmi18n.helpPopup
+                } else {
+                    helpText = 'Help'
+                }
+                var button = $('<button class="btn-help"><svg><use xlink:href="#icon-dialog-help" /></svg></button>')
+                var container = $('#ccm-tooltip-holder')
+                button.insertBefore($dialog.parent().find('.ui-dialog-titlebar-close'))
+
+                button.popover({
+                    content: function () {
+                        return helpContent
+                    },
+                    placement: 'bottom',
+                    html: true,
+                    container: container,
+                    trigger: 'click'
+                })
+                button.on('shown.bs.popover', function () {
+                    var binding = function () {
+                        button.popover('hide', button)
+                        binding = $.noop
                     }
-                    $(this).unbind(e)
-                    binding()
+
+                    button.on('hide.bs.popover', function (event) {
+                        button.unbind(event)
+                        binding = $.noop
+                    })
+
+                    $('body').mousedown(function (e) {
+                        if ($(e.target).closest(container).length || $(e.target).closest(button).length) {
+                            return
+                        }
+                        $(this).unbind(e)
+                        binding()
+                    })
                 })
-            })
-        }
+            }
+        }, 10)
     }
 
     $.fn.dialog.getTop = function() {

package/assets/cms/js/modal.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* global bootstrap */
+// This is a bridge between our various old custom code and Bootstrap Modals. The ultimate goal is to first
+// Remove jQuery UI, on the way to removing jQuery (if the latter is ever an option.) So the first thing we need to
+// do is remove all instances of dialog-launch legacy jQuery UI dialogs in favor of a single modal BS modal approach.
+
+import bootbox from 'bootbox'
+
+class ConcreteModal {
+    openExternal(url, title, options) {
+        var my = this
+        new ConcreteAjaxRequest({
+            url: url,
+            dataType: 'html',
+            success: function (r) {
+                options.message = r
+                options.title = title
+                my.show(options)
+            }
+        })
+    }
+
+    show(options) {
+        options = $.extend(options, {
+            className: 'ccm-ui',
+            centerVertical: true,
+            show: false,
+            backdrop: 'static',
+            container: '#ccm-tooltip-holder' // This was we get the .ccm-ui namespace for things like transition, etc..
+        })
+        const $_dialog = bootbox.dialog(options)
+        const element = $_dialog.get(0)
+
+        // Turn the _dialog jQuery object into the new Bs5 modal
+        const dialog = new bootstrap.Modal(element)
+
+        // Handle buttons in the response
+        const responseButtons = $_dialog.find('.dialog-buttons')
+        if (responseButtons.length) {
+            // move it out to the root.
+            responseButtons.attr('class', 'modal-footer').insertAfter($_dialog.find('.modal-body'))
+        }
+
+        // Handle the legacy dialog buttons
+        $_dialog.find('[data-dialog-form]').concreteAjaxForm()
+        $_dialog.find('button[data-dialog-action=cancel]').on('click', function() {
+            dialog.hide()
+        })
+        $_dialog.find('button[data-dialog-action=submit]').on('click', function() {
+            $_dialog.find('[data-dialog-form]').submit()
+        })
+
+        // Change the Close button to be white.
+        $_dialog.find('.btn-close').addClass('btn-close-white')
+
+        // Show the dialog
+        // dialog._config.backdrop = 'static'
+        dialog.show()
+
+        if (options.backdrop === 'static') {
+            dialog._config.backdrop = 'static'
+        }
+
+        element.addEventListener('hide.bs.modal', function() {
+            ConcreteModal.totalOpen--
+        })
+        ConcreteModal.totalOpen++
+    }
+}
+
+ConcreteModal.totalOpen = 0
+
+global.ConcreteModal = ConcreteModal

package/assets/cms/js/panels.js

@@ -337,6 +337,10 @@ function ConcretePanel(options) {
             $('[data-panel-detail-form]').submit()
         })
 
+        $content.find('[data-vue]').each(function() {
+            $(this).concreteVue({ context: $(this).attr('data-vue') })
+        })
+
         ConcreteEvent.subscribe('AjaxFormSubmitSuccess', function (e, data) {
             if ($('[data-panel-detail-form="' + data.form + '"]').data('action-after-save') == 'reload') {
                 window.location.reload()
@@ -413,6 +417,10 @@ function ConcretePanel(options) {
         })
 
         $panel.find('.dialog-launch').dialog()
+        $panel.find('[data-vue]').each(function() {
+            $(this).concreteVue({ context: $(this).attr('data-vue') })
+        })
+
         $panel.find('[data-launch-panel-detail]').unbind('.detail').on('click.detail', function () {
             $.fn.dialog.showLoader()
             $('.ccm-panel-menu-item-active').removeClass('ccm-panel-menu-item-active')