Merge branch 'search_preview' into development

resources/js/components/dropdown.js

@@ -1,4 +1,5 @@
 import {onSelect} from "../services/dom";
+import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
 import {Component} from "./component";
 
 /**
@@ -17,8 +18,9 @@ export class Dropdown extends Component {
         this.direction = (document.dir === 'rtl') ? 'right' : 'left';
         this.body = document.body;
         this.showing = false;
-        this.setupListeners();
+
         this.hide = this.hide.bind(this);
+        this.setupListeners();
     }
 
     show(event = null) {
@@ -52,7 +54,7 @@ export class Dropdown extends Component {
         }
 
         // Set listener to hide on mouse leave or window click
-        this.menu.addEventListener('mouseleave', this.hide.bind(this));
+        this.menu.addEventListener('mouseleave', this.hide);
         window.addEventListener('click', event => {
             if (!this.menu.contains(event.target)) {
                 this.hide();
@@ -97,33 +99,25 @@ export class Dropdown extends Component {
         this.showing = false;
     }
 
-    getFocusable() {
-        return Array.from(this.menu.querySelectorAll('[tabindex]:not([tabindex="-1"]),[href],button,input:not([type=hidden])'));
-    }
-
-    focusNext() {
-        const focusable = this.getFocusable();
-        const currentIndex = focusable.indexOf(document.activeElement);
-        let newIndex = currentIndex + 1;
-        if (newIndex >= focusable.length) {
-            newIndex = 0;
-        }
-
-        focusable[newIndex].focus();
-    }
-
-    focusPrevious() {
-        const focusable = this.getFocusable();
-        const currentIndex = focusable.indexOf(document.activeElement);
-        let newIndex = currentIndex - 1;
-        if (newIndex < 0) {
-            newIndex = focusable.length - 1;
-        }
-
-        focusable[newIndex].focus();
-    }
-
     setupListeners() {
+        const keyboardNavHandler = new KeyboardNavigationHandler(this.container, (event) => {
+            this.hide();
+            this.toggle.focus();
+            if (!this.bubbleEscapes) {
+                event.stopPropagation();
+            }
+        }, (event) => {
+            if (event.target.nodeName === 'INPUT') {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            this.hide();
+        });
+
+        if (this.moveMenu) {
+            keyboardNavHandler.shareHandlingToEl(this.menu);
+        }
+
         // Hide menu on option click
         this.container.addEventListener('click', event => {
              const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
@@ -136,39 +130,9 @@ export class Dropdown extends Component {
             event.stopPropagation();
             this.show(event);
             if (event instanceof KeyboardEvent) {
-                this.focusNext();
-            }
-        });
-
-        // Keyboard navigation
-        const keyboardNavigation = event => {
-            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-                this.focusNext();
-                event.preventDefault();
-            } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-                this.focusPrevious();
-                event.preventDefault();
-            } else if (event.key === 'Escape') {
-                this.hide();
-                this.toggle.focus();
-                if (!this.bubbleEscapes) {
-                    event.stopPropagation();
-                }
-            }
-        };
-        this.container.addEventListener('keydown', keyboardNavigation);
-        if (this.moveMenu) {
-            this.menu.addEventListener('keydown', keyboardNavigation);
-        }
-
-        // Hide menu on enter press or escape
-        this.menu.addEventListener('keydown ', event => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.hide();
+                keyboardNavHandler.focusNext();
             }
         });
     }
 
-}
+}

resources/js/components/entity-selector.js

@@ -115,7 +115,7 @@ export class EntitySelector extends Component {
     }
 
     searchUrl() {
-        return `/ajax/search/entities?types=${encodeURIComponent(this.entityTypes)}&permission=${encodeURIComponent(this.entityPermission)}`;
+        return `/search/entity-selector?types=${encodeURIComponent(this.entityTypes)}&permission=${encodeURIComponent(this.entityPermission)}`;
     }
 
     searchEntities(searchTerm) {

resources/js/components/global-search.js

@@ -0,0 +1,82 @@
+import {htmlToDom} from "../services/dom";
+import {debounce} from "../services/util";
+import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
+
+/**
+ * @extends {Component}
+ */
+class GlobalSearch {
+
+    setup() {
+        this.container = this.$el;
+        this.input = this.$refs.input;
+        this.suggestions = this.$refs.suggestions;
+        this.suggestionResultsWrap = this.$refs.suggestionResults;
+        this.loadingWrap = this.$refs.loading;
+        this.button = this.$refs.button;
+
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        const updateSuggestionsDebounced = debounce(this.updateSuggestions.bind(this), 200, false);
+
+        // Handle search input changes
+        this.input.addEventListener('input', () => {
+            const value = this.input.value;
+            if (value.length > 0) {
+                this.loadingWrap.style.display = 'block';
+                this.suggestionResultsWrap.style.opacity = '0.5';
+                updateSuggestionsDebounced(value);
+            }  else {
+                this.hideSuggestions();
+            }
+        });
+
+        // Allow double click to show auto-click suggestions
+        this.input.addEventListener('dblclick', () => {
+            this.input.setAttribute('autocomplete', 'on');
+            this.button.focus();
+            this.input.focus();
+        });
+
+        new KeyboardNavigationHandler(this.container, () => {
+            this.hideSuggestions();
+        });
+    }
+
+    /**
+     * @param {String} search
+     */
+    async updateSuggestions(search) {
+        const {data: results} = await window.$http.get('/search/suggest', {term: search});
+        if (!this.input.value) {
+            return;
+        }
+        
+        const resultDom = htmlToDom(results);
+
+        this.suggestionResultsWrap.innerHTML = '';
+        this.suggestionResultsWrap.style.opacity = '1';
+        this.loadingWrap.style.display = 'none';
+        this.suggestionResultsWrap.append(resultDom);
+        if (!this.container.classList.contains('search-active')) {
+            this.showSuggestions();
+        }
+    }
+
+    showSuggestions() {
+        this.container.classList.add('search-active');
+        window.requestAnimationFrame(() => {
+            this.suggestions.classList.add('search-suggestions-animation');
+        })
+    }
+
+    hideSuggestions() {
+        this.container.classList.remove('search-active');
+        this.suggestions.classList.remove('search-suggestions-animation');
+        this.suggestionResultsWrap.innerHTML = '';
+    }
+}
+
+export default GlobalSearch;

resources/js/components/index.js

@@ -55,4 +55,4 @@ export {ToggleSwitch} from "./toggle-switch.js"
 export {TriLayout} from "./tri-layout.js"
 export {UserSelect} from "./user-select.js"
 export {WebhookEvents} from "./webhook-events";
-export {WysiwygEditor} from "./wysiwyg-editor.js"
+export {WysiwygEditor} from "./wysiwyg-editor.js"

resources/js/components/page-editor.js

@@ -1,5 +1,6 @@
 import * as Dates from "../services/dates";
 import {onSelect} from "../services/dom";
+import {debounce} from "../services/util";
 import {Component} from "./component";
 
 export class PageEditor extends Component {
@@ -66,7 +67,8 @@ export class PageEditor extends Component {
         });
 
         // Changelog controls
-        this.changelogInput.addEventListener('change', this.updateChangelogDisplay.bind(this));
+        const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
+        this.changelogInput.addEventListener('input', updateChangelogDebounced);
 
         // Draft Controls
         onSelect(this.saveDraftButton, this.saveDraft.bind(this));
@@ -205,4 +207,4 @@ export class PageEditor extends Component {
         }
     }
 
-}
+}