Merge pull request #1 from BookStackApp/master

[bookstack] / resources / assets / js / components / entity-selector.js

diff --git a/resources/assets/js/components/entity-selector.js b/resources/assets/js/components/entity-selector.js
index a72578af69ec903f25c8a0a46bf283311d3379ae..58879a20c0c5d8c76534e3af2bfc5a2da59c9e46 100644 (file)
--- a/resources/assets/js/components/entity-selector.js
+++ b/resources/assets/js/components/entity-selector.js
@@ -5,6 +5,7 @@ class EntitySelector {
         this.elem = elem;
         this.search = '';
         this.lastClick = 0;
+        this.selectedItemData = null;
 
         const entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
         const entityPermission = elem.hasAttribute('entity-permission') ? elem.getAttribute('entity-permission') : 'view';
@@ -14,6 +15,7 @@ class EntitySelector {
         this.searchInput = elem.querySelector('[entity-selector-search]');
         this.loading = elem.querySelector('[entity-selector-loading]');
         this.resultsContainer = elem.querySelector('[entity-selector-results]');
+        this.addButton = elem.querySelector('[entity-selector-add-button]');
 
         this.elem.addEventListener('click', this.onClick.bind(this));
 
@@ -31,6 +33,15 @@ class EntitySelector {
             if (event.keyCode === 13) event.preventDefault();
         });
 
+        if (this.addButton) {
+            this.addButton.addEventListener('click', event => {
+                if (this.selectedItemData) {
+                    this.confirmSelection(this.selectedItemData);
+                    this.unselectAll();
+                }
+            });
+        }
+
         this.showLoading();
         this.initialLoad();
     }
@@ -86,31 +97,37 @@ class EntitySelector {
         this.unselectAll();
         this.input.value = isSelected ? `${type}:${id}` : '';
 
+        const link = item.getAttribute('href');
+        const name = item.querySelector('.entity-list-item-name').textContent;
+        const data = {id: Number(id), name: name, link: link};
+
         if (isSelected) {
             item.classList.add('selected');
+            this.selectedItemData = data;
         } else {
             window.$events.emit('entity-select-change', null)
         }
 
         if (!isDblClick && !isSelected) return;
 
-        const link = item.getAttribute('href');
-        const name = item.querySelector('.entity-list-item-name').textContent;
-        const data = {id: Number(id), name: name, link: link};
-
         if (isDblClick) {
-            window.$events.emit('entity-select-confirm', data)
+            this.confirmSelection(data);
         }
         if (isSelected) {
             window.$events.emit('entity-select-change', data)
         }
     }
 
+    confirmSelection(data) {
+        window.$events.emit('entity-select-confirm', data);
+    }
+
     unselectAll() {
         let selected = this.elem.querySelectorAll('.selected');
         for (let selectedElem of selected) {
             selectedElem.classList.remove('selected', 'primary-background');
         }
+        this.selectedItemData = null;
     }
 
 }