@concretecms/bedrock 1.5.5 → 1.5.7

package/assets/cms/components/form/ConcreteFileDirectoryInput.vue

@@ -2,16 +2,18 @@
     <div>
         <div class="ccm-directory-selector-container">
             <div class="form-group">
-                <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{inputLabel}}</label>
+                <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{ inputLabel }}</label>
                 <div v-if="showAddDirectoryButton" class="input-group">
-                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
+                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID"
+                           ref="directoryInput" :disabled="disabled"/>
                     <button type="button"
                             :class="{'btn': true, 'btn-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
                             @click="toggleDirectoryInput" :disabled="disabled">
                         {{ i18n.createNewFolder }}
                     </button>
                 </div>
-                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
+                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID"
+                       ref="directoryInput" :disabled="disabled"/>
             </div>
         </div>
         <div v-if="showAddDirectoryButton" v-show="showAddDirectoryInput" class="ccm-new-directory-name-container">
@@ -113,6 +115,7 @@ export default {
             this.selectedDirectoryID = this.directoryId
         }
 
+        var my = this
         this.selectMenu = new TomSelect(this.$refs.directoryInput, {
             maxOptions: 200,
             maxItems: 1,
@@ -122,15 +125,20 @@ export default {
             searchField: 'directoryName',
             render: {
                 option: function (data, escape) {
-                    return `<div class="level-${data.directoryLevel}"><i class="fa fa-folder"></i> ${data.directoryName}</div>`
+                    return `<div class="level-${data.directoryLevel}"><i class="fa fa-folder"></i> ${my.sanitizeDirectoryName(data.directoryName)} </div>`
                 },
                 item: function (item, escape) {
-                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${item.directoryName}</div>`
+                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${my.sanitizeDirectoryName(item.directoryName)} </div>`
                 }
             }
         })
     },
     methods: {
+        sanitizeDirectoryName(directoryName) {
+            const div = document.createElement('div')
+            div.textContent = directoryName
+            return div.innerHTML
+        },
         createDirectory() {
             const me = this
             if (!me.showAddDirectoryInput || me.disabled) {

package/assets/cms/js/tree.js

@@ -138,8 +138,17 @@ ConcreteTree.prototype = {
             },
             select: function (select, data) {
                 if (options.chooseNodeInForm) {
-                    const keys = my.getSelectedNodeKeys(data.tree.getRootNode(), ajaxData.treeNodeSelectedIDs)
+                    let keys = []
+                    if (selectMode == 1) {
+                        keys = [data.node.key]
+                        my.deselectNodes(data.tree.getRootNode(), data.node)
+                    } else {
+                        keys = my.getSelectedNodeKeys(data.tree.getRootNode(), ajaxData.treeNodeSelectedIDs)
+                    }
+                    // Call onSelect callback
                     options.onSelect(keys)
+                    // Update selected nodes for ajax request to avoid hidden nodes to be selected unexpectedly
+                    ajaxData.treeNodeSelectedIDs = keys
                 }
             },
 
@@ -226,11 +235,13 @@ ConcreteTree.prototype = {
             },
             collapse: function(event, data) {
                 // loop over child nodes and check if node is still selected. If not remove it from the 'options.ajaxData.selected' array.
-                data.node.children.forEach(function(nodeChild) {
-                    if (options.ajaxData.selected.includes(parseInt(nodeChild.key)) && !nodeChild.isSelected()) {
-                        options.ajaxData.selected.splice(options.ajaxData.selected.indexOf(nodeChild.key), 1)
-                    }
-                })
+                if (options.ajaxData.selected) {
+                    data.node.children.forEach(function(nodeChild) {
+                        if (options.ajaxData.selected.includes(parseInt(nodeChild.key)) && !nodeChild.isSelected()) {
+                            options.ajaxData.selected.splice(options.ajaxData.selected.indexOf(nodeChild.key), 1)
+                        }
+                    })
+                }
             },
             dnd: {
                 preventRecursiveMoves: true, // Prevent dropping nodes on own descendants,
@@ -338,6 +349,22 @@ ConcreteTree.prototype = {
         return selected
     },
 
+    deselectNodes: function (parentNode, selectedNode) {
+        var my = this
+
+        // Walk through all child nodes
+        if (parentNode.hasChildren()) {
+            parentNode.getChildren().forEach(function (child) {
+                // If the node is not the selected node, deselect it
+                if (parseInt(child.key) !== parseInt(selectedNode.key)) {
+                    child.setSelected(false)
+                }
+                // call the function recursively
+                my.deselectNodes(child, selectedNode)
+            })
+        }
+    },
+
     getLoadNodePromise: function (node) {
         var my = this
         var ajaxData = my.options.ajaxData != false ? my.options.ajaxData : {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",