@nanoporetech-digital/components 6.0.0 → 6.1.0

package/dist/esm/nano-global-nav.entry.js

@@ -6,6 +6,7 @@ import { a as algoliasearch } from './algoliasearch-lite.esm.browser-d71a28dc.js
 import { C as ComponentStore } from './component-store-486d9d7a.js';
 import { d as debounce } from './throttle-ac4fcefa.js';
 import { d as displayTransition } from './transitions-bd15e312.js';
+import { s as searchInsight } from './search-insights-f64a6b4c.js';
 
 async function clientFetch(url, { body, ...customConfig } = {}) {
   const headers = {
@@ -156,7 +157,7 @@ const GlobalNav = class {
         return false;
       this.userMenuOpen = false;
     };
-    // Search bar (smaller screens / mobile)
+    // Search bar open / closed
     this.onSearchBtnClick = (ev) => {
       ev.preventDefault();
       this.searchBarShown ? this.searchbarHide() : this.searchbarShow();
@@ -420,6 +421,7 @@ const GlobalNav = class {
     this.cartUrl = null;
     this.msgUrl = null;
     this.assessSlottedContent = debounce(this.assessSlottedContent.bind(this), 10);
+    this.handleBarResize = debounce(this.handleBarResize.bind(this), 200);
   }
   handleMyAccountData() {
     if (!this.myAccountData)
@@ -531,6 +533,11 @@ const GlobalNav = class {
       return;
     this.algoliaClient = algoliasearch(this.searchAppId, this.searchApiKey);
     this.addAlgoliaIndeces();
+    // setup algolia analytics
+    searchInsight.init(this.searchAppId, this.searchApiKey).then(() => {
+      if (this.myAccountUser)
+        searchInsight.setUser(this.myAccountUser.uuid);
+    });
   }
   /** Public facing set of Algolia indices. Add to any indices we may already have (e.g. from MyAccount) */
   addIndeces() {
@@ -594,7 +601,8 @@ const GlobalNav = class {
   // Global DOM Events
   /**
    * 1) Reset threshold (item fit breakpoint) when screen is bigger than before.
-   * 2) Hide search bar whenever we resize
+   * 2) Assess the all threshold / breakpoints to see if content fits
+   * 3) Hide search bar whenever we resize
    */
   onWindowResize() {
     if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
@@ -602,6 +610,7 @@ const GlobalNav = class {
     }
     this.currSize = window.innerWidth;
     this.searchbarHide();
+    this.handleBarResize();
   }
   // Burger / Overflow Menu
   /* listen to nav-item secondary open / close events primarily for resizing the menu */
@@ -666,7 +675,7 @@ const GlobalNav = class {
       this.el.focus();
     }
   }
-  searchbarShow() {
+  async searchbarShow() {
     this.searchBarShown = true;
     this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
     this.searchBarEl.style.display = 'block';
@@ -704,6 +713,7 @@ const GlobalNav = class {
     this.algoliaSearchResults = null;
     const queries = this.internalSearchIndeces.map((index) => {
       return {
+        clickAnalytics: true,
         attributesToSnippet: ['body:5', 'title:8'],
         indexName: index.index,
         query: this.searchValInternal,
@@ -753,7 +763,7 @@ const GlobalNav = class {
         this.threshold--;
         setTimeout(() => {
           resolve();
-        }, 500);
+        }, 200);
       });
     };
     // Decrease the threshold until content fits
@@ -800,20 +810,6 @@ const GlobalNav = class {
       });
     });
   }
-  /**
-   * Attach the ResizeObserver - from which all threshold / breakpoint logic hinges
-   */
-  attachResizeObserver() {
-    if (this.resizeObserver || !this.mainBarDiv)
-      return;
-    const ro = (this.resizeObserver = new ResizeObserver(() => {
-      if (this.mainBarDiv.scrollWidth <= this.mainBarDiv.parentElement.clientWidth) {
-        return;
-      }
-      this.handleBarResize();
-    }));
-    ro.observe(this.mainBarDiv);
-  }
   // Stencil Lifecycle / Rendering
   componentWillLoad() {
     ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
@@ -825,20 +821,15 @@ const GlobalNav = class {
   }
   componentDidLoad() {
     {
-      this.debounceResize = debounce(this.onWindowResize.bind(this), 300);
+      this.debounceResize = debounce(this.onWindowResize.bind(this), 200);
       window.addEventListener('resize', this.debounceResize);
       this.currSize = window.innerWidth;
     }
     this.initAlgoliaClient();
     this.addAlgoliaIndeces();
-    this.attachResizeObserver();
     requestAnimationFrame(() => this.handleBarResize());
   }
   disconnectedCallback() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = undefined;
-    }
     window.removeEventListener('resize', this.debounceResize);
   }
   // Render output
@@ -866,7 +857,15 @@ const GlobalNav = class {
         let scopeSuggestions = 0;
         content = (h("div", null, !currentScopeHits && (h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found in", ' ', h("strong", null, this.currentIndex.name), ". Try another phrase.")), this.autocompleteResults && [
           this.autocompleteResults.hits.map((hit, i) => {
-            return (h("a", { role: "option", ref: (a) => this.autocompleteEles.push(a), tabindex: "-1", id: 'autocomplete-hit-' + i, href: hit.url, class: "search-autocomplete-hit", innerHTML: this.autocompleteSnippet(hit) }));
+            return (h("a", { role: "option", ref: (a) => this.autocompleteEles.push(a), tabindex: "-1", id: 'autocomplete-hit-' + i, href: hit.url, class: "search-autocomplete-hit", innerHTML: this.autocompleteSnippet(hit), onClick: () => {
+                searchInsight.sendClick({
+                  index: this.currentIndex.index,
+                  eventName: 'Global nav quick search - search result clicked',
+                  queryID: this.autocompleteResults.queryID,
+                  objectIDs: [hit.objectID],
+                  positions: [i + 1],
+                });
+              } }));
           }),
         ], (!currentScopeHits || this.currentIndex.allGroup) &&
           this.scopeSearch &&