@nanoporetech-digital/components 6.0.1 → 6.1.0

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

@@ -10,6 +10,7 @@ const algoliasearchLite_esm_browser = require('./algoliasearch-lite.esm.browser-
 const componentStore = require('./component-store-7427cb36.js');
 const throttle = require('./throttle-dfa64b9e.js');
 const transitions = require('./transitions-20fce787.js');
+const searchInsights = require('./search-insights-b2bb12bd.js');
 
 async function clientFetch(url, { body, ...customConfig } = {}) {
   const headers = {
@@ -160,7 +161,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();
@@ -424,6 +425,7 @@ const GlobalNav = class {
     this.cartUrl = null;
     this.msgUrl = null;
     this.assessSlottedContent = throttle.debounce(this.assessSlottedContent.bind(this), 10);
+    this.handleBarResize = throttle.debounce(this.handleBarResize.bind(this), 200);
   }
   handleMyAccountData() {
     if (!this.myAccountData)
@@ -535,6 +537,11 @@ const GlobalNav = class {
       return;
     this.algoliaClient = algoliasearchLite_esm_browser.algoliasearch(this.searchAppId, this.searchApiKey);
     this.addAlgoliaIndeces();
+    // setup algolia analytics
+    searchInsights.searchInsight.init(this.searchAppId, this.searchApiKey).then(() => {
+      if (this.myAccountUser)
+        searchInsights.searchInsight.setUser(this.myAccountUser.uuid);
+    });
   }
   /** Public facing set of Algolia indices. Add to any indices we may already have (e.g. from MyAccount) */
   addIndeces() {
@@ -598,7 +605,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) {
@@ -606,6 +614,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 */
@@ -670,7 +679,7 @@ const GlobalNav = class {
       this.el.focus();
     }
   }
-  searchbarShow() {
+  async searchbarShow() {
     this.searchBarShown = true;
     this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
     this.searchBarEl.style.display = 'block';
@@ -708,6 +717,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,
@@ -757,7 +767,7 @@ const GlobalNav = class {
         this.threshold--;
         setTimeout(() => {
           resolve();
-        }, 500);
+        }, 200);
       });
     };
     // Decrease the threshold until content fits
@@ -804,20 +814,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.ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
@@ -829,20 +825,15 @@ const GlobalNav = class {
   }
   componentDidLoad() {
     {
-      this.debounceResize = throttle.debounce(this.onWindowResize.bind(this), 300);
+      this.debounceResize = throttle.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
@@ -870,7 +861,15 @@ const GlobalNav = class {
         let scopeSuggestions = 0;
         content = (index.h("div", null, !currentScopeHits && (index.h("div", { class: "search-autocomplete-hit search-autocomplete-hit--no-result" }, "No results matching '", this.searchValInternal, "' were found in", ' ', index.h("strong", null, this.currentIndex.name), ". Try another phrase.")), this.autocompleteResults && [
           this.autocompleteResults.hits.map((hit, i) => {
-            return (index.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 (index.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: () => {
+                searchInsights.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 &&