feat(MobileSearch): Updated mobile search to the new algolia view (#1797

) * feat(MobileSearch): Updated mobile search to the new algolia view * Fixed auto focus, and header color when searching * Added back the delete and removed the empty array for one character * Removed console statement * Added mobile selector to theme * Clear body locks on setup of global nav * Fixed interacting with the veil to close the veil and autocomplete
mbta · Dec 1, 2023 · 7cad001 · 7cad001
1 parent 3eccda7
commit 7cad001
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/apps/site/assets/css/_autocomplete-theme.scss b/apps/site/assets/css/_autocomplete-theme.scss
@@ -137,6 +137,10 @@
     padding-right: var(--aa-spacing-half);
   }
 }
+
+#header-mobile {
+  @extend %shared-autocomplete;
+}
 
 #error-page {
   --aa-search-input-height: 2.5rem;

diff --git a/apps/site/assets/ts/app/global-navigation.ts b/apps/site/assets/ts/app/global-navigation.ts
@@ -67,6 +67,8 @@ export function setHeaderElementPositions(
 }
 
 export function setup(rootElement: HTMLElement): void {
+  // This clears any existing  body locks on page loading
+  clearAllBodyScrollLocks();
   if (!rootElement) return;
 
   const header: HTMLElement = rootElement.querySelector("header")!;
@@ -125,7 +127,7 @@ export function setup(rootElement: HTMLElement): void {
     if ("searchOpen" in header.dataset) {
       // pass focus to search bar
       (rootElement.querySelector(
-        "[data-nav='search'] #search-header-mobile__input"
+        "[data-nav='search'] #input"
       ) as HTMLElement)!.focus();
     }
   });
@@ -299,25 +301,36 @@ export function setup(rootElement: HTMLElement): void {
     });
   }
 
+  function closeVeil(): void {
+    if (document.documentElement.dataset.navOpen === "true") {
+      delete document.documentElement.dataset.navOpen;
+    }
+  }
+
+  function resetPage(): void {
+    closeAllMenus();
+    closeVeil();
+  }
+
   // menu click closes
   const menu_links = rootElement.querySelectorAll("[data-nav='link']");
   for (let i = 0; i < menu_links.length; i += 1) {
-    menu_links[i].addEventListener("click", closeAllMenus);
+    menu_links[i].addEventListener("click", resetPage);
   }
 
   // T logo click closes
   header
     .querySelector("[data-nav='logo']")
-    ?.addEventListener("click", closeAllMenus);
+    ?.addEventListener("click", resetPage);
 
   // Veil click or Esc key closes everything
   rootElement.addEventListener("keydown", e => {
-    handleNativeEscapeKeyPress(e, closeAllMenus);
+    handleNativeEscapeKeyPress(e, resetPage);
   });
 
   rootElement
     .querySelector("[data-nav='veil']")
-    ?.addEventListener("click", closeAllMenus);
+    ?.addEventListener("click", resetPage);
 
   // Closes veil before navigating to search result
   document.addEventListener("autocomplete:selected", closeAllMenus);

diff --git a/apps/site/assets/ts/ui/autocomplete/index.ts b/apps/site/assets/ts/ui/autocomplete/index.ts
@@ -1,4 +1,8 @@
-import { AutocompleteOptions, autocomplete } from "@algolia/autocomplete-js";
+import {
+  AutocompleteApi,
+  AutocompleteOptions,
+  autocomplete
+} from "@algolia/autocomplete-js";
 import { createElement, Fragment } from "react";
 import { render } from "react-dom";
 import getSources from "./sources";
@@ -12,6 +16,13 @@ const reactRenderer = {
   render
 } as AutocompleteOptions<Item>["renderer"];
 
+// Listens to the veil click to close the autocomplete suggestions
+function setupVeilCloseListener(autocompleteApi: AutocompleteApi<Item>): void {
+  document
+    .querySelector("[data-nav='veil']")
+    ?.addEventListener("click", () => autocompleteApi.setIsOpen(false));
+}
+
 /**
  * Creates the Algolia Autocomplete instances for various search experiences on
  * MBTA.com.
@@ -42,7 +53,7 @@ function setupAlgoliaAutocomplete(wrapper: HTMLElement): void {
     getSources: params => getSources(container.dataset, params),
     renderer: reactRenderer
   };
-  autocomplete(options);
+  setupVeilCloseListener(autocomplete(options));
 }
 
 export default setupAlgoliaAutocomplete;
diff --git a/apps/site/assets/ts/ui/autocomplete/sources.ts b/apps/site/assets/ts/ui/autocomplete/sources.ts
@@ -68,10 +68,6 @@ const getSources: GetSourcesFn = (
   if (!query) {
     return defaultSources;
   }
-  // Don't search on 1 character unless it's a number
-  if (query.length < 2 && Number.isNaN(parseInt(query, 10))) {
-    return [];
-  }
   if (locations !== undefined) {
     sources.push(locationSource);
   }

diff --git a/...templates/layout/_new_nav_mobile.html.eex → ...emplates/layout/_new_nav_mobile.html.heex b/...templates/layout/_new_nav_mobile.html.eex → ...emplates/layout/_new_nav_mobile.html.heex
@@ -2,8 +2,8 @@
   <div class="m-menu__content" data-nav="mobile-content">
     <h1 class="m-menu__title heading-2">Main Menu</h1>
     <%= for {%{menu_section: menu_section, sub_menus: sub_menus}, index} <- Enum.with_index(nav_link_content_redesign(@conn)) do %>
-      <nav aria-labelledby="section-heading-<%= menu_section %>" class="m-menu__section">
-        <h2 id="section-heading-<%= menu_section %>" class="m-menu__section-heading"><%= menu_section %></h2>
+      <nav aria-labelledby={"section-heading-#{menu_section}"} class="m-menu__section">
+        <h2 id={"section-heading-#{menu_section}"} class="m-menu__section-heading"><%= menu_section %></h2>
         <%= SiteWeb.PartialView.render("_accordion_ui_no_bootstrap.html",
             Map.merge(assigns, %{
               id: menu_section,
@@ -33,6 +33,11 @@
     <div class="m-menu__language m-menu__section"></div>
   </div>
   <div class="m-menu__search" data-nav="search">
-    <%= render SiteWeb.PageView, "_search_bar.html", conn: @conn, placeholder: "Search for routes, info, and more", id: "header-mobile" %>
+    <.algolia_autocomplete
+      id="header-mobile"
+      geolocation={true}
+      locations={true}
+      algolia_indexes={[:stops, :routes, :drupal]}
+    />
   </div>
 </nav>