@nanoporetech-digital/components 5.9.6 → 5.11.0

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

@@ -15,6 +15,7 @@ const THRESHOLDBREAKS = {
   search: 3,
   icon: 4,
 };
+const THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
 /**
  * Nanopore digital global navigation and search bar.
  * Incorporates MyAccount / SSO states (messages / cart / user name etc).
@@ -44,8 +45,6 @@ const THRESHOLDBREAKS = {
 export class GlobalNav {
   constructor() {
     this.currSize = 0;
-    this.thresholdsGoingUp = false;
-    this.THRESHOLDLIMIT = Object.keys(THRESHOLDBREAKS).length;
     this.autocompleteEles = [];
     this.currAIndex = -1;
     this.isLoggedIn = false;
@@ -69,7 +68,6 @@ export class GlobalNav {
       }
       else {
         this.isResizing = false;
-        this.thresholdsGoingUp = false;
       }
     };
     this.onMenuBtnKeyDown = (ev) => {
@@ -142,10 +140,7 @@ export class GlobalNav {
     // Search bar (smaller screens / mobile)
     this.onSearchBtnClick = (ev) => {
       ev.preventDefault();
-      if (!this.searchBarShown)
-        this.searchbarShow();
-      else
-        this.searchbarHide();
+      this.searchBarShown ? this.searchbarHide() : this.searchbarShow();
     };
     this.onSearchBtnKeyDown = (ev) => {
       switch (ev.key) {
@@ -164,9 +159,10 @@ export class GlobalNav {
     this.searchbarHide = (ev) => {
       if (ev &&
         ev.relatedTarget &&
-        ev.relatedTarget.closest('#global-nav-search-bar'))
+        ev.relatedTarget.closest('#global-nav-search-bar')) {
         return;
-      this.showAutocomplete = false;
+      }
+      this.showAutocomplete = this.searchBarShown = false;
       if (this.searchValInternal.length && ev)
         return;
       this.searchBarEl.addEventListener('transitionend', this.onSearchBarHidden);
@@ -176,7 +172,6 @@ export class GlobalNav {
     this.onSearchBarHidden = () => {
       this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
       this.searchBarEl.style.display = 'none';
-      this.searchBarShown = false;
     };
     this.onSearchInput = (ev) => {
       this.searchValInternal = this.searchInput.value;
@@ -189,6 +184,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 +204,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) => {
@@ -390,8 +369,7 @@ export class GlobalNav {
     this.remoteDataReady = false;
     this.ready = false;
     this.isResizing = false;
-    this.intersectRatio = undefined;
-    this.threshold = this.THRESHOLDLIMIT;
+    this.threshold = THRESHOLDLIMIT;
     this.modalOpen = false;
     this.modalIsOpen = false;
     this.searchBarShown = false;
@@ -535,91 +513,38 @@ export class GlobalNav {
     this.algoliaClient = algoliasearch(this.searchAppId, this.searchApiKey);
     this.addAlgoliaIndeces();
   }
+  /** Public facing set of Algolia indices. Add to any indices we may already have (e.g. from MyAccount) */
   addIndeces() {
     this.internalSearchIndeces = [
       ...this.internalSearchIndeces,
       ...this.searchIndeces,
     ];
   }
+  /** Internal set of of Algolia indices. Includes public & private (e.g. from MyAccount) */
   addAlgoliaIndeces() {
     if (!this.algoliaClient || !this.internalSearchIndeces.length)
       return;
     this.internalSearchIndeces.forEach((searchIndex) => {
       searchIndex.alogliaIndex = this.algoliaClient.initIndex(searchIndex.index);
     });
-    if (!this.searchIndex)
+    if (!this.searchIndex) {
       this.searchIndex = this.internalSearchIndeces[0].index;
+    }
   }
+  /** Current content breakpoint. If it goes up, things can look wonky for a second so we temporarily hide stuff */
   thresholdChange(newThreshold, oldThreshold) {
     if (newThreshold > oldThreshold) {
       // we've resized to larger screen.
-      this.thresholdsGoingUp = true;
       this.setResizingState(true);
     }
   }
-  /**
-   * Primary logic for resizing changes.
-   * When content doesn't fit - we loop down through break points until it does
-   */
-  ratioChange() {
-    if (this.intersectRatio < 1 && this.threshold > 0) {
-      // content doesn't fit
-      if (this.thresholdsGoingUp)
-        this.setResizingState(true);
-      this.threshold--;
-      setTimeout(() => this.ratioChange(), 500);
-    }
-    else {
-      this.thresholdReady = true;
-      // content now fits so add / remove context classes
-      // on nav-items depending on whether they're added to bar or burger.
-      let menuItems, barItems;
-      readTask(() => {
-        menuItems = [
-          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),
-          ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
-        ];
-        barItems = [];
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.login)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.main)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
-        if (this.threshold < this.THRESHOLDLIMIT - THRESHOLDBREAKS.about)
-          menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
-        else
-          barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
-      });
-      writeTask(() => {
-        menuItems.forEach((item) => {
-          item.classList.add('nano-global-nav-menu');
-          item.classList.remove('nano-global-nav-bar');
-        });
-        barItems.forEach((item) => {
-          item.classList.remove('nano-global-nav-menu');
-          item.classList.add('nano-global-nav-bar');
-        });
-      });
-    }
-  }
+  /* Check if data and item placement is ready */
   assessReady() {
     if (this.thresholdReady && this.remoteDataReady) {
       this.ready = true;
+      this.nanoIsReady.emit();
     }
   }
-  remoteReady() {
-    this.attachIO();
-  }
-  isReady() {
-    this.nanoIsReady.emit();
-  }
   /**
    * Add / remove events when autocomplete results show / hide.
    */
@@ -636,13 +561,9 @@ export class GlobalNav {
     if (!!this.secondaryMenuOpen && this.searchBarShown)
       this.searchbarHide();
   }
-  /**
-   * As relevant slotted items change, reset resizing breakpoints
-   */
+  /** As relevant slotted items change, reset resizing breakpoints */
   slotChange() {
-    this.threshold = this.THRESHOLDLIMIT;
-    if (this.ready)
-      this.ratioChange();
+    this.threshold = THRESHOLDLIMIT;
   }
   // General classes for visuals
   thresholdClasses() {
@@ -653,17 +574,19 @@ export class GlobalNav {
     return classes;
   }
   // Global DOM Events
+  /**
+   * 1) Reset threshold (item fit breakpoint) when screen is bigger than before.
+   * 2) Hide search bar whenever we resize
+   */
   onWindowResize() {
-    if (this.threshold < this.THRESHOLDLIMIT &&
-      window.innerWidth > this.currSize) {
-      this.threshold = this.THRESHOLDLIMIT;
-      this.ratioChange();
+    if (this.threshold < THRESHOLDLIMIT && window.innerWidth > this.currSize) {
+      this.threshold = THRESHOLDLIMIT;
     }
     this.currSize = window.innerWidth;
-    this.searchBarShown = false;
+    this.searchbarHide();
   }
   // Burger / Overflow Menu
-  // listen to nav-item secondary open / close events primarily for resizing the menu
+  /* listen to nav-item secondary open / close events primarily for resizing the menu */
   secondaryOpen(ev) {
     if (!ev.detail.secondaryMenu)
       return;
@@ -756,6 +679,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;
@@ -770,24 +731,83 @@ export class GlobalNav {
     autocompleteEle.focus({ preventScroll: true });
     autocompleteEle.setAttribute('aria-selected', 'true');
   }
+  async handleBarResize() {
+    const descreaseThreshold = () => {
+      return new Promise((resolve) => {
+        this.threshold--;
+        setTimeout(() => {
+          this.mainBarDiv.clientWidth; // force reflow
+          resolve();
+        }, 500);
+      });
+    };
+    // Decrease the threshold until content fits
+    while (this.threshold > 0) {
+      if (this.mainBarDiv.scrollWidth <= this.mainBarDiv.parentElement.clientWidth)
+        break;
+      await descreaseThreshold();
+    }
+    /* content now fits so add / remove context classes
+    on nav-items depending on whether they're added to bar or burger. */
+    this.thresholdReady = true;
+    let menuItems, barItems;
+    readTask(() => {
+      menuItems = [
+        ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="site"]')),
+        ...Array.from(this.el.querySelectorAll('nano-nav-item[slot="overflow"]')),
+      ];
+      barItems = [];
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="icon"]')));
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="loggedin"]')));
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="main"]')));
+      if (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about)
+        menuItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
+      else
+        barItems.push(...Array.from(this.el.querySelectorAll('nano-nav-item[slot="about"]')));
+    });
+    writeTask(() => {
+      menuItems.forEach((item) => {
+        item.classList.add('nano-global-nav-menu');
+        item.classList.remove('nano-global-nav-bar');
+      });
+      barItems.forEach((item) => {
+        item.classList.remove('nano-global-nav-menu');
+        item.classList.add('nano-global-nav-bar');
+      });
+    });
+  }
   /**
-   * Attach the IntersectionObserver - from which all threshold / breakpoint logic hinges
+   * Attach the ResizeObserver - from which all threshold / breakpoint logic hinges
    */
-  attachIO() {
-    if (this.io)
+  attachResizeObserver() {
+    if (!Build.isBrowser || this.resizeObserver || !this.mainBarDiv)
       return;
-    const root = this.el.shadowRoot.querySelector('.global-nav .main-bar');
-    if (Build.isBrowser &&
-      typeof window !== 'undefined' &&
-      window.IntersectionObserver &&
-      !!root) {
-      const io = (this.io = new window.IntersectionObserver((data) => {
-        this.intersectRatio = data.slice(-1)[0].intersectionRatio;
-      }, { root, threshold: 1 }));
-      io.observe(root.querySelector('.measure-ele'));
-    }
+    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');
+    this.assessSlottedContent();
+  }
+  connectedCallback() {
+    this.handleMyAccountData();
+    this.getMyAccData();
+  }
   componentDidLoad() {
     if (Build.isBrowser) {
       this.debounceResize = debounce(this.onWindowResize.bind(this), 300);
@@ -796,29 +816,17 @@ export class GlobalNav {
     }
     this.initAlgoliaClient();
     this.addAlgoliaIndeces();
-    if (this.remoteDataReady)
-      this.attachIO();
-  }
-  componentWillLoad() {
-    ComponentStore.init(this, ['searchIndex', 'searchValue'], 'url-hash', 'gns');
-    this.assessSlottedContent();
+    this.attachResizeObserver();
+    requestAnimationFrame(() => this.handleBarResize());
   }
   disconnectedCallback() {
-    if (this.io) {
-      this.io.disconnect();
-      this.io = undefined;
-    }
-    if (this.mo) {
-      this.mo.disconnect();
-      this.mo = undefined;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
     }
     if (Build.isBrowser)
       window.removeEventListener('resize', this.debounceResize);
   }
-  connectedCallback() {
-    this.handleMyAccountData();
-    this.getMyAccData();
-  }
   // Render output
   autocompleteList() {
     let content;
@@ -875,9 +883,9 @@ export class GlobalNav {
           'search-icon': true,
           'search-icon--search': true,
           'search-icon--show': !!this.searchValue && !this.searchLoading,
-        }, slot: "end", onMouseDown: (e) => {
+        }, slot: "end", onClick: (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,10 +915,7 @@ 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 - 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 && [
+      }, "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 < THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/times", "aria-label": "close menu" })), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && (h("nano-icon", { name: "light/bars", "aria-label": "close menu" }))), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
       this.myAccData &&
         (!this.activeMyAccountSections ||
@@ -918,61 +923,52 @@ export class GlobalNav {
         this.msgUrl && (h("a", { href: this.msgUrl, class: "icon-btn" }, h("nano-icon", { name: "light/bell" }), this.msgCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.msgCount)))),
         this.cartUrl && (h("a", { href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
-    ], this.myAccData && this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { name: "solid/chevron-right" })))), h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { class: "content", part: "burger-content" }, h("nav", { class: "nav-links nav-links--main", role: "menu" }, h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold <
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
+    ], this.myAccData && this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register", ' ', h("nano-icon", { name: "solid/chevron-right" })))), h("div", { class: "content-wrap", ref: (div) => (this.menuContentDiv = div) }, h("div", { class: "content", part: "burger-content" }, h("nav", { class: "nav-links nav-links--main", role: "menu" }, h("slot", { name: "overflow", onSlotchange: this.assessSlottedContent }), this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main &&
       !!this.mainSlotLen && (h("slot", { name: "main", onSlotchange: this.assessSlottedContent }))), (((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
       this.hasSiteSlot) ||
       !!this.siteNavItms.length) && (h("div", null, (this.hasSiteSlot || !!this.siteNavItms.length) && [
-      (this.threshold >= this.THRESHOLDLIMIT - 2 ||
+      (this.threshold >= THRESHOLDLIMIT - 2 ||
         this.mainSlotLen < 2) &&
         this.overflowSlotLen < 2 && (h("div", { class: "nav-links-wrap" }, h("h4", { class: "nav-links_title nav-links_title--sites" }, "Sites"), h("nav", { class: "nav-links nav-links--sub nav-links--sites", "aria-label": "Different company site links" }, h("slot", { name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
         return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
       })))),
-      ((this.threshold < this.THRESHOLDLIMIT - 2 &&
+      ((this.threshold < THRESHOLDLIMIT - 2 &&
         this.mainSlotLen >= 2) ||
         this.overflowSlotLen >= 2) && (h("nav", { class: "nav-links", "aria-label": "Different company site links" }, h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu", closeOnBlur: false }, "Sites", h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), "Sites"), h("div", { class: "content--sub" }, h("slot", { name: "site", onSlotchange: this.assessSlottedContent }), this.siteNavItms.map((link) => {
         return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
       }))))))),
     ]))), this.isLoggedIn &&
-      this.threshold <
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
+      this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login &&
       (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back" }), this.myAccountUser.name), !!((_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url) && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "content--sub" }, h("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
     }), h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: this.myAccData.urls.forgot_password +
         this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { class: "sticker-trigger" }), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 }, part: "sticker" }, h("div", { class: "bars", part: "bars" }, h("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
       !!this.overflowSlotLen ||
       ((this.myAccData || !!this.iconSlotLen) &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
       (this.isLoggedIn &&
         (!!this.loggedInNavItms.length || this.hasLoggedinSlot) &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login) ||
       (!!this.mainSlotLen &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.main) ||
       ((!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-        this.threshold <
-          this.THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
+        this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.about) ||
       this.hasSiteSlot ||
       !!this.siteNavItms.length) && (h("button", { class: "menu-btn icon-btn", onMouseDown: this.menuOpen, onKeyDown: this.onMenuBtnKeyDown, "aria-expanded": this.modalOpen ? 'true' : 'false', "aria-controls": "global-nav-menu", ref: (btn) => (this.menuBtn = btn) }, h("nano-icon", { name: "light/bars", "aria-label": "open menu" }))), this.showLogo && (h("a", { href: this.logoUrl, class: "logo-link", part: "logo-link" }, h("img", { src: getAssetPath(`../nano-assets/ont-logo.svg`), alt: "Oxford Nanopore Technologies Logo", class: "logo" }))), !this.showLogo && (h("div", { class: "logo-link" }, h("slot", { name: "logo", onSlotchange: this.assessSlottedContent }))), h("div", { class: "nav-links nav-links--main" }, h("slot", { name: "main", onSlotchange: this.assessSlottedContent })), this.mainSlotLen === 0 &&
-      this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
+      this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.search && [
       this.showSearch && !!this.internalSearchIndeces.length && (h("div", { class: "search-widget", role: "combobox", "aria-owns": "autocomplete-results", "aria-expanded": this.showAutocomplete && this.autocompleteResults
           ? 'true'
           : 'false' }, searchWidget)),
       (!this.showSearch || !this.myAccData) &&
         !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent })),
     ], (this.mainSlotLen > 0 ||
-      this.threshold <
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
+      this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) &&
       ((this.showSearch && !!this.internalSearchIndeces.length) ||
         !!this.searchSlotLen) && (h("button", { class: {
         'icon-btn': true,
         'search-btn': true,
         'search-btn--open': this.searchBarShown,
-      }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onMouseDown: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown }, h("nano-icon", { name: "light/search" }))), this.threshold >=
-      this.THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
+      }, "aria-controls": "global-nav-search-bar", "aria-expanded": this.searchBarShown ? 'true' : 'false', onClick: this.onSearchBtnClick, onKeyDown: this.onSearchBtnKeyDown }, h("nano-icon", { name: "light/search" }))), this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.icon && [
       !!this.iconSlotLen && h("slot", { name: "icon" }),
       this.myAccData &&
         (!this.activeMyAccountSections ||
@@ -981,12 +977,10 @@ export class GlobalNav {
         this.cartUrl && !!this.cartCount && (h("a", { href: this.cartUrl, class: "icon-btn" }, h("nano-icon", { name: "light/shopping-cart" }), this.cartCount > 0 && (h("span", { class: "gn-menu_actions-counter" }, this.cartCount)))),
       ],
     ], (!!this.aboutSlotLen || !!this.aboutNavItms.length) &&
-      this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
+      this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.about && (h("nav", { class: "nav-links nav-links--sub", "aria-label": "About the company. Links", role: "menu" }, h("slot", { name: "about", onSlotchange: this.assessSlottedContent }), !!this.aboutNavItms.length && (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-bar" }, h("a", { href: this.aboutNavItms[0].address, target: this.aboutNavItms[0].target }, this.aboutNavItms[0].title))))), this.myAccData &&
       (!this.activeMyAccountSections ||
         this.activeMyAccountSections.includes('loggedin')) &&
-      this.threshold >=
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
+      this.threshold >= THRESHOLDLIMIT - THRESHOLDBREAKS.login && [
       this.myAccData.urls.login && (h("a", { href: this.myAccData.urls.login + this.ssoRedirect, class: "login-btn" }, "Login / Register")),
       this.myAccountUser && (h("div", { class: "user-links" }, h("button", { class: {
           'icon-btn': true,
@@ -996,25 +990,33 @@ export class GlobalNav {
         return (h("a", { href: link.address, target: link.target }, link.title));
       })), h("div", { class: "user-links-panel-foot" }, h("a", { href: this.myAccData.urls.forgot_password +
           this.ssoRedirect }, "Change Password"), h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout"))))),
-    ], h("span", { class: "measure-ele" })), (this.mainSlotLen > 0 ||
-      this.threshold <
-        this.THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { id: "global-nav-search-bar", class: {
+    ]), (this.mainSlotLen > 0 ||
+      this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.search) && (h("div", { id: "global-nav-search-bar", class: {
         '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 - THRESHOLDBREAKS.login ||
+      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < 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;
@@ -1033,6 +1035,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;
@@ -1055,6 +1060,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;
@@ -1507,7 +1515,6 @@ export class GlobalNav {
       "remoteDataReady": {},
       "ready": {},
       "isResizing": {},
-      "intersectRatio": {},
       "threshold": {},
       "modalOpen": {},
       "modalIsOpen": {},
@@ -1677,21 +1684,12 @@ export class GlobalNav {
       }, {
         "propName": "threshold",
         "methodName": "thresholdChange"
-      }, {
-        "propName": "intersectRatio",
-        "methodName": "ratioChange"
       }, {
         "propName": "thresholdReady",
         "methodName": "assessReady"
       }, {
         "propName": "remoteDataReady",
         "methodName": "assessReady"
-      }, {
-        "propName": "remoteDataReady",
-        "methodName": "remoteReady"
-      }, {
-        "propName": "ready",
-        "methodName": "isReady"
       }, {
         "propName": "showAutocomplete",
         "methodName": "setupAutocompleteBlur"