Added content-perms API examples and docs tweaks

[bookstack] / resources / js / components / global-search.js

diff --git a/resources/js/components/global-search.js b/resources/js/components/global-search.js
index b3719c8fd02a86c0fe0d14dcc01fd20342509c31..7bc8a1d45187f8f711f0362c15bcab42119996db 100644 (file)
--- a/resources/js/components/global-search.js
+++ b/resources/js/components/global-search.js
@@ -1,10 +1,13 @@
 import {htmlToDom} from "../services/dom";
 import {debounce} from "../services/util";
 import {htmlToDom} from "../services/dom";
 import {debounce} from "../services/util";

+import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
+import {Component} from "./component";

 
 /**
 
 /**

- * @extends {Component}
+ * Global (header) search box handling.
+ * Mainly to show live results preview.

  */
  */

-class GlobalSearch {
+export class GlobalSearch extends Component {

 
     setup() {
         this.container = this.$el;
 
     setup() {
         this.container = this.$el;


@@ -12,6 +15,7 @@ class GlobalSearch {
         this.suggestions = this.$refs.suggestions;
         this.suggestionResultsWrap = this.$refs.suggestionResults;
         this.loadingWrap = this.$refs.loading;
         this.suggestions = this.$refs.suggestions;
         this.suggestionResultsWrap = this.$refs.suggestionResults;
         this.loadingWrap = this.$refs.loading;

+        this.button = this.$refs.button;

 
         this.setupListeners();
     }
 
         this.setupListeners();
     }


@@ -34,27 +38,26 @@ class GlobalSearch {
         // Allow double click to show auto-click suggestions
         this.input.addEventListener('dblclick', () => {
             this.input.setAttribute('autocomplete', 'on');
         // Allow double click to show auto-click suggestions
         this.input.addEventListener('dblclick', () => {
             this.input.setAttribute('autocomplete', 'on');

-            this.input.blur();
+            this.button.focus();

             this.input.focus();
             this.input.focus();

-        })
+        });
+
+        new KeyboardNavigationHandler(this.container, () => {
+            this.hideSuggestions();
+        });

     }
 
     /**
      * @param {String} search
      */
     async updateSuggestions(search) {
     }
 
     /**
      * @param {String} search
      */
     async updateSuggestions(search) {

-        const {data: results} = await window.$http.get('/ajax/search/entities', {term: search, count: 5});
+        const {data: results} = await window.$http.get('/search/suggest', {term: search});

         if (!this.input.value) {
             return;
         }
         
         const resultDom = htmlToDom(results);
 
         if (!this.input.value) {
             return;
         }
         
         const resultDom = htmlToDom(results);
 

-        const childrenToTrim = Array.from(resultDom.children).slice(9);
-        for (const child of childrenToTrim) {
-            child.remove();
-        }
-

         this.suggestionResultsWrap.innerHTML = '';
         this.suggestionResultsWrap.style.opacity = '1';
         this.loadingWrap.style.display = 'none';
         this.suggestionResultsWrap.innerHTML = '';
         this.suggestionResultsWrap.style.opacity = '1';
         this.loadingWrap.style.display = 'none';


@@ -76,6 +79,4 @@ class GlobalSearch {
         this.suggestions.classList.remove('search-suggestions-animation');
         this.suggestionResultsWrap.innerHTML = '';
     }
         this.suggestions.classList.remove('search-suggestions-animation');
         this.suggestionResultsWrap.innerHTML = '';
     }

-}
-
-export default GlobalSearch;
\ No newline at end of file
+}
\ No newline at end of file