@nanoporetech-digital/components 6.0.1 → 6.2.0

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

@@ -7,6 +7,7 @@ import { clientFetch } from '../../utils/fetch';
 import { ComponentStore } from '../../utils/store/component-store';
 import { debounce } from '../../utils/throttle';
 import { displayTransition } from '../../utils/transitions';
+import searchInsight from '../../utils/search-insights';
 // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
 const THRESHOLDBREAKS = {
   about: 0,
@@ -137,7 +138,7 @@ export class GlobalNav {
         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();
@@ -402,6 +403,7 @@ export class GlobalNav {
     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)
@@ -513,6 +515,11 @@ export class GlobalNav {
       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() {
@@ -577,14 +584,17 @@ export class GlobalNav {
   // 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) {
       this.threshold = THRESHOLDLIMIT;
+      this.mainBarDiv.clientWidth; // force reflow
     }
     this.currSize = window.innerWidth;
     this.searchbarHide();
+    this.handleBarResize();
   }
   // Burger / Overflow Menu
   /* listen to nav-item secondary open / close events primarily for resizing the menu */
@@ -649,7 +659,7 @@ export class GlobalNav {
       this.el.focus();
     }
   }
-  searchbarShow() {
+  async searchbarShow() {
     this.searchBarShown = true;
     this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
     this.searchBarEl.style.display = 'block';
@@ -687,6 +697,7 @@ export class GlobalNav {
     this.algoliaSearchResults = null;
     const queries = this.internalSearchIndeces.map((index) => {
       return {
+        clickAnalytics: true,
         attributesToSnippet: ['body:5', 'title:8'],
         indexName: index.index,
         query: this.searchValInternal,
@@ -737,7 +748,7 @@ export class GlobalNav {
         setTimeout(() => {
           this.mainBarDiv.clientWidth; // force reflow
           resolve();
-        }, 500);
+        }, 200);
       });
     };
     // Decrease the threshold until content fits
@@ -784,20 +795,6 @@ export class GlobalNav {
       });
     });
   }
-  /**
-   * Attach the ResizeObserver - from which all threshold / breakpoint logic hinges
-   */
-  attachResizeObserver() {
-    if (!Build.isBrowser || 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');
@@ -809,20 +806,15 @@ export class GlobalNav {
   }
   componentDidLoad() {
     if (Build.isBrowser) {
-      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;
-    }
     if (Build.isBrowser)
       window.removeEventListener('resize', this.debounceResize);
   }
@@ -851,7 +843,15 @@ export class GlobalNav {
         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 &&