@nanoporetech-digital/components 5.9.5 → 5.10.0

package/dist/collection/components/global-nav/global-nav.js

@@ -189,6 +189,11 @@ export class GlobalNav {
         this.searchLoading = true;
       }
     };
+    /**
+     * Called whenever the search input value changes.
+     * Performs Algolia search and shows autocomplete results.
+     * @param ev optional input change event
+     */
     this.onSearchChange = async (ev) => {
       this.searchValInternal = this.searchValue = ev
         ? ev.detail.value
@@ -204,64 +209,43 @@ export class GlobalNav {
       }
       if (!this.currentIndex)
         this.currentSelectedIndex();
-      try {
-        this.autocompleteResults = this.processSearchResults((await this.currentIndex.alogliaIndex.search(this.searchValInternal, {
-          attributesToSnippet: ['body:5', 'title:8'],
-          hitsPerPage: 5,
-          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
-        })));
-      }
-      catch (e) {
-        console.error(e);
-      }
+      // start search
+      this.searchLoading = true;
+      const algoliaHits = await this.doAlgoliaSearch();
       this.scopeSearch = null;
-      this.scopeSearch = await this.onSearchSubmit(null, false);
-      this.searchLoading = false;
+      this.scopeSearch = algoliaHits;
+      // set / show autocomplete results
+      this.autocompleteResults = algoliaHits.results.find((res) => res.selected);
       this.showAutocompleteResults();
+      this.searchLoading = false;
     };
-    this.onSearchSubmit = async (ev, emit = true) => {
+    /**
+     * Called whenever the search form is submitted (but can also be called manually).
+     * Fires event which will activate / display `nano-global-search-results`
+     * @param ev optional form submit event
+     */
+    this.onSearchSubmit = async (ev) => {
       if (ev)
         ev.preventDefault();
       if (!this.isSearchValSet())
         return;
-      this.searchLoading = true;
-      this.algoliaSearchResults = null;
       if (!this.currentIndex)
         this.currentSelectedIndex();
-      const queries = this.internalSearchIndeces.map((index) => {
-        return {
-          indexName: index.index,
-          query: this.searchValInternal,
-          facets: index.filters,
-          hitsPerPage: 10,
-          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
-        };
-      });
-      try {
-        this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
-      }
-      catch (e) {
-        this.nanoSearchError.emit(e);
-      }
-      this.searchLoading = false;
       if (!this.algoliaSearchResults)
-        return;
-      this.algoliaSearchResults.results.map((result, i) => {
-        result.indexName = this.internalSearchIndeces[i].name;
-        result.selected =
-          this.currentIndex.name === this.internalSearchIndeces[i].name;
-        result.domain = this.currentIndex.domain || null;
-        result.domains = this.myAccData.domains || null;
-        result.allGroup = !!this.internalSearchIndeces[i].allGroup;
-        result.filters = this.internalSearchIndeces[i].filters;
+        await this.doAlgoliaSearch();
+      const activeIndex = this.algoliaSearchResults.results.find((res) => res.selected);
+      const { index, domain, filters, query } = activeIndex;
+      this.nanoSearchResult.emit({
+        meta: {
+          indexTitle: activeIndex.indexName,
+          index,
+          domain,
+          filters,
+          query,
+        },
+        client: { apiKey: this.searchApiKey, appId: this.searchAppId },
       });
-      if (emit) {
-        this.nanoSearchResult.emit({
-          results: this.algoliaSearchResults.results,
-          client: { apiKey: this.searchApiKey, appId: this.searchAppId },
-        });
-        this.showAutocomplete = false;
-      }
+      this.showAutocomplete = false;
       return this.algoliaSearchResults;
     };
     this.onSearchIndexChange = async (index) => {
@@ -689,7 +673,7 @@ export class GlobalNav {
         this.menuSelectedItems.forEach((i) => (i.selected = true));
         this.menuSelectedItems = null;
       }
-    }, 200);
+    }, 300);
   }
   menuClose(ev, force = false) {
     if (!this.modalIsOpen)
@@ -756,6 +740,44 @@ export class GlobalNav {
     }
     return hit.title;
   }
+  /**
+   * Constructs a multi-search query for all set search indices
+   * (which are normally controlled via the myAccount payload) then sends to Algolia.
+   * Post-processes results, adding correct domains to url fields.
+   * @returns formatted algolia results
+   */
+  async doAlgoliaSearch() {
+    this.algoliaSearchResults = null;
+    const queries = this.internalSearchIndeces.map((index) => {
+      return {
+        attributesToSnippet: ['body:5', 'title:8'],
+        indexName: index.index,
+        query: this.searchValInternal,
+        facets: index.filters,
+        hitsPerPage: 5,
+        filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
+      };
+    });
+    try {
+      this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
+    }
+    catch (e) {
+      this.nanoSearchError.emit(e);
+    }
+    this.searchLoading = false;
+    if (!this.algoliaSearchResults)
+      return;
+    this.algoliaSearchResults.results.map((result, i) => {
+      result.indexName = this.internalSearchIndeces[i].name;
+      result.selected =
+        this.currentIndex.name === this.internalSearchIndeces[i].name;
+      result.domain = this.currentIndex.domain || null;
+      result.domains = this.myAccData.domains || null;
+      result.allGroup = !!this.internalSearchIndeces[i].allGroup;
+      result.filters = this.internalSearchIndeces[i].filters;
+    });
+    return this.algoliaSearchResults;
+  }
   isSearchValSet() {
     if (this.searchValInternal.length < 3)
       return false;
@@ -877,7 +899,7 @@ export class GlobalNav {
           'search-icon--show': !!this.searchValue && !this.searchLoading,
         }, slot: "end", onMouseDown: (e) => {
           this.searchValInternal = this.searchInput.value;
-          this.onSearchSubmit(e, true);
+          this.onSearchSubmit(e);
         } }, h("nano-icon", { name: "light/search" })), h("span", { class: {
           'search-icon': true,
           'search-icon--loader': true,
@@ -907,7 +929,9 @@ export class GlobalNav {
         'has-promotion': this.hasPromotionSlot,
         'menu-full-screen': this.menuFullScreen,
         'secondary-open': !!this.secondaryMenuOpen,
-      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold < this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= this.THRESHOLDLIMIT - 3 && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
+      }, "aria-expanded": this.modalOpen ? 'true' : 'false', ref: (div) => (this.menuDiv = div), part: "burger" }, h("div", { class: "gn-menu_wrap", ref: (div) => (this.menuWrapDiv = div), tabindex: "-1", part: "burger-menu" }, h("div", { class: "gn-menu_actions", part: "burger-actions-bar" }, h("button", { class: "menu-btn icon-btn icon-btn", onMouseDown: this.onMenuBtnClick, onKeyDown: this.onMenuBtnKeyDown }, this.threshold <
+      this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >=
+      this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold <
       this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
       this.myAccData &&
@@ -1000,19 +1024,28 @@ export class GlobalNav {
         'search-bar': true,
         show: this.searchBarShown,
       }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
-      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - 3 ||
+      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
       this.menuFullScreen) && (h("div", { class: {
         mask: true,
         open: this.modalOpen,
       }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { class: "site-content" }, h("slot", null))));
   }
   // Data processing
+  /**
+   * Finds a correct domain (as defined by myAccount data) for a given origin
+   * @returns a domain string for this origin
+   */
   domainFor(origin) {
     if (!this.myAccData)
       return '';
     const domain = this.myAccData.domains.find((dm) => dm.origin === origin);
     return domain ? domain.domain : '';
   }
+  /**
+   * process a set, or multiple sets of algolia results
+   * and applies correct domain names / http protocol to each result's url
+   * @returns results where partial paths are turned to full urls
+   */
   processSearchResults(results) {
     const multiResults = results;
     const singleResult = results;
@@ -1031,6 +1064,9 @@ export class GlobalNav {
       return singleResult;
     }
   }
+  /**
+   * Ingests the data blob from myAccount; turns prescient fields to internal state
+   */
   processMyAccData() {
     if (!this.myAccData || !this.myAccData.search.indeces.length)
       return;
@@ -1053,6 +1089,9 @@ export class GlobalNav {
     if (this.myAccData.urls.messages && !this.msgUrl)
       this.msgUrl = this.myAccData.urls.messages;
   }
+  /**
+   * Ingests the data blob from myAccount links; applies prescient fields to internal state
+   */
   processMyAccLinks() {
     if (!this.myAccData.links || !this.myAccData.links.length)
       return;