@internetarchive/ia-topnav 0.0.0-webdev7666-1

package/src/desktop-subnav.ts

@@ -0,0 +1,49 @@
+import { html, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import TrackedElement from './tracked-element';
+import desktopSubnavCSS from './styles/desktop-subnav';
+import icons from './assets/img/icons';
+import formatUrl from './lib/format-url';
+import { IATopNavLink } from './models';
+
+@customElement('desktop-subnav')
+export class DesktopSubnav extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Array }) menuItems: IATopNavLink[] = [];
+
+  static get styles() {
+    return desktopSubnavCSS;
+  }
+
+  get listItems() {
+    return this.menuItems
+      ? this.menuItems.map(
+          (link) => html`
+            <li>
+              <a
+                class="${link.title.toLowerCase()}"
+                .href="${formatUrl(link.url, this.baseHost)}"
+                >${link.title}${DesktopSubnav.iconFor(link.title)}</a
+              >
+            </li>
+          `,
+        )
+      : nothing;
+  }
+
+  static iconFor(title: string): TemplateResult {
+    const subnavIcons: Record<string, TemplateResult> = {
+      Donate: icons.donate,
+    };
+    return subnavIcons[title] ? subnavIcons[title] : html``;
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.listItems}
+      </ul>
+    `;
+  }
+}

package/src/dropdown-menu.ts

@@ -0,0 +1,106 @@
+import { CSSResult, html, nothing, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import icons from './assets/img/icons';
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { IATopNavConfig, IATopNavLink } from './models';
+import dropdownMenuCSS from './styles/dropdown-menu';
+import TrackedElement from './tracked-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export default class DropdownMenu extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Boolean }) hideSearch = false;
+  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
+  @property({ type: Boolean }) animated = false;
+  @property({ type: Boolean }) open = false;
+
+  static get styles(): CSSResult[] {
+    return [dropdownMenuCSS];
+  }
+
+  get dropdownItems() {
+    if (!this.menuItems) return nothing;
+
+    if (!Array.isArray(this.menuItems[0])) {
+      const submenu = this.menuItems as IATopNavLink[];
+      return this.dropdownSection(submenu);
+    }
+    return this.menuItems.map((submenu, i) => {
+      const joiner = i ? DropdownMenu.dropdownDivider : html``;
+      if (!Array.isArray(submenu)) {
+        return;
+      }
+      return [joiner, ...this.dropdownSection(submenu)];
+    });
+  }
+
+  static get dropdownDivider() {
+    return html`<li role="presentation" class="divider"></li>`;
+  }
+
+  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
+    return submenu.map(
+      (item) => html`
+        <li>
+          ${item.url
+            ? this.dropdownLink(item)
+            : DropdownMenu.dropdownText(item)}
+        </li>
+      `,
+    );
+  }
+
+  dropdownLink(link: IATopNavLink): TemplateResult {
+    const calloutText = this.config?.callouts?.[link.title];
+    return html`<a
+      href="${formatUrl(link.url, this.baseHost)}"
+      class=${ifDefined(link.class)}
+      tabindex="${this.open ? '' : '-1'}"
+      @click=${this.trackClick}
+      data-event-click-tracking="${this.config
+        ?.eventCategory}|Nav${link.analyticsEvent}"
+      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
+    >
+      ${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing}
+      ${link.title}
+      ${calloutText
+        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
+        : nothing}
+    </a>`;
+  }
+
+  static dropdownText(item: IATopNavLink) {
+    return html`<span class="info-item">${item.title}</span>`;
+  }
+
+  get menuClass() {
+    const hiddenClass = this.hideSearch ? ' search-hidden' : '';
+    if (this.open) {
+      return `open${hiddenClass}`;
+    }
+    if (this.animated) {
+      return `closed${hiddenClass}`;
+    }
+    return `initial${hiddenClass}`;
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${makeBooleanString(!this.open)}"
+          aria-expanded="${makeBooleanString(this.open)}"
+        >
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}

package/src/ia-topnav.ts

@@ -0,0 +1,323 @@
+import { LitElement, PropertyValues, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
+import './desktop-subnav';
+import './dropdown-menu';
+import './media-slider';
+import {
+  IATopNavConfig,
+  IATopNavMenuConfig,
+  IATopNavSecondIdentitySlotMode,
+} from './models';
+import './primary-nav';
+import './search-menu';
+import './signed-out-dropdown';
+import iaTopNavCSS from './styles/ia-topnav';
+import './user-menu';
+
+@customElement('ia-topnav')
+export class IATopNav extends LitElement {
+  @property({ type: Boolean }) localLinks = false;
+
+  @property({ type: String }) waybackPagesArchived = '';
+
+  @property({ type: String }) baseHost = 'https://archive.org';
+
+  @property({ type: String }) mediaBaseHost = 'https://archive.org';
+
+  @property({ type: Boolean }) admin = false;
+
+  @property({ type: Boolean }) canManageFlags = false;
+
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+
+  @property({ type: Boolean }) hideSearch = false;
+
+  @property({ type: String }) itemIdentifier = '';
+
+  @property({ type: Boolean }) mediaSliderOpen = false;
+
+  @property({ type: String }) openMenu = '';
+
+  @property({ type: String }) screenName: string = '';
+
+  @property({ type: String }) searchIn = '';
+
+  @property({ type: String }) searchQuery = '';
+
+  @property({ type: String }) selectedMenuOption = '';
+
+  @property({ type: String }) username: string = '';
+
+  @property({ type: String }) userProfileImagePath =
+    '/services/img/user/profile';
+
+  @property({ type: String })
+  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';
+
+  @property({ type: Object }) currentTab?: {
+    mediatype: string;
+    moveTo: string;
+  };
+
+  @state() private menus: IATopNavMenuConfig = buildTopNavMenus();
+
+  private get normalizedBaseHost() {
+    return !this.localLinks ? this.baseHost : '';
+  }
+
+  static get styles() {
+    return iaTopNavCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (
+      props.has('username') ||
+      props.has('waybackPagesArchived') ||
+      props.has('itemIdentifier') ||
+      props.has('localLinks') ||
+      props.has('baseHost')
+    ) {
+      this.menuSetup();
+    }
+  }
+
+  firstUpdated() {
+    // close open menu on `esc` click
+    document.addEventListener(
+      'keydown',
+      (e) => {
+        if (e.key === 'Escape') {
+          this.openMenu = '';
+          this.mediaSliderOpen = false;
+        }
+      },
+      false,
+    );
+  }
+
+  menuSetup() {
+    // re/build the nav
+    this.menus = buildTopNavMenus(
+      this.username,
+      this.normalizedBaseHost,
+      this.waybackPagesArchived,
+      this.itemIdentifier,
+    );
+  }
+
+  menuToggled(e: CustomEvent) {
+    const currentMenu = this.openMenu;
+    this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;
+    // Keeps media slider open if media menu is open
+    if (this.openMenu === 'media') {
+      return;
+    }
+    this.closeMediaSlider();
+  }
+
+  openMediaSlider() {
+    this.mediaSliderOpen = true;
+  }
+
+  closeMediaSlider() {
+    this.mediaSliderOpen = false;
+    this.selectedMenuOption = '';
+  }
+
+  closeMenus() {
+    this.openMenu = '';
+    this.closeMediaSlider();
+  }
+
+  searchInChanged(e: CustomEvent) {
+    this.searchIn = e.detail.searchIn;
+  }
+
+  trackClick(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('analyticsClick', {
+        bubbles: true,
+        composed: true,
+        detail: e.detail,
+      }),
+    );
+  }
+
+  trackSubmit(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('analyticsSubmit', {
+        bubbles: true,
+        composed: true,
+        detail: e.detail,
+      }),
+    );
+  }
+
+  mediaTypeSelected(e: CustomEvent) {
+    if (this.selectedMenuOption === e.detail.mediatype) {
+      this.closeMediaSlider();
+      return;
+    }
+    this.selectedMenuOption = e.detail.mediatype;
+    this.openMediaSlider();
+  }
+
+  get searchMenuOpened() {
+    return this.openMenu === 'search';
+  }
+
+  get signedOutOpened() {
+    return this.openMenu === 'login';
+  }
+
+  get userMenuOpened() {
+    return this.openMenu === 'user';
+  }
+
+  get searchMenuTabIndex() {
+    return this.searchMenuOpened ? '' : '-1';
+  }
+
+  get userMenuTabIndex() {
+    return this.userMenuOpened ? '' : '-1';
+  }
+
+  get signedOutTabIndex() {
+    return this.signedOutOpened ? '' : '-1';
+  }
+
+  get closeLayerClass() {
+    return !!this.openMenu || this.mediaSliderOpen ? 'visible' : '';
+  }
+
+  get userMenu() {
+    return html`
+      <user-menu
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .menuItems=${this.userMenuItems}
+        ?open=${this.openMenu === 'user'}
+        .username=${this.username}
+        ?hideSearch=${this.hideSearch}
+        tabindex="${this.userMenuTabIndex}"
+        @menuToggled=${this.menuToggled}
+        @trackClick=${this.trackClick}
+        @focusToOtherMenuItem=${(e: CustomEvent) =>
+          (this.currentTab = e.detail)}
+      ></user-menu>
+    `;
+  }
+
+  get signedOutDropdown() {
+    return html`
+      <signed-out-dropdown
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .open=${this.signedOutOpened}
+        ?hideSearch=${this.hideSearch}
+        tabindex="${this.signedOutTabIndex}"
+        .menuItems=${this.signedOutMenuItems}
+      ></signed-out-dropdown>
+    `;
+  }
+
+  get signedOutMenuItems() {
+    return this.menus.signedOut;
+  }
+
+  /**
+   * Most users just get the basic menu items.
+   * For users with `/items` priv, additional admin menu items are included too.
+   * Having the `/flags` priv adds a further admin item for managing flags.
+   */
+  get userMenuItems() {
+    const basicItems = this.menus.user;
+
+    let adminItems = this.menus.userAdmin;
+    if (this.canManageFlags) {
+      adminItems = adminItems.concat(this.menus.userAdminFlags);
+    }
+
+    return this.itemIdentifier && this.admin
+      ? [basicItems, adminItems]
+      : [basicItems];
+  }
+
+  get allowSecondaryIcon() {
+    return this.secondIdentitySlotMode === 'allow';
+  }
+
+  get secondLogoSlot() {
+    return this.allowSecondaryIcon
+      ? html`
+          <slot name="opt-sec-logo" slot="opt-sec-logo"></slot>
+          <slot name="opt-sec-logo-mobile" slot="opt-sec-logo-mobile"></slot>
+        `
+      : nothing;
+  }
+
+  get separatorTemplate() {
+    return html`<li class="divider" role="presentation"></li>`;
+  }
+
+  render() {
+    return html`
+      <div class="topnav">
+        <primary-nav
+          .baseHost=${this.normalizedBaseHost}
+          .mediaBaseHost=${this.mediaBaseHost}
+          .config=${this.config}
+          .openMenu=${this.openMenu}
+          .screenName=${this.screenName}
+          .searchIn=${this.searchIn}
+          .searchQuery=${this.searchQuery}
+          .secondIdentitySlotMode=${this.secondIdentitySlotMode}
+          .selectedMenuOption=${this.selectedMenuOption}
+          .username=${this.username}
+          .userProfileImagePath=${this.userProfileImagePath}
+          .currentTab=${this.currentTab}
+          ?hideSearch=${this.hideSearch}
+          @mediaTypeSelected=${this.mediaTypeSelected}
+          @trackClick=${this.trackClick}
+          @trackSubmit=${this.trackSubmit}
+          @menuToggled=${this.menuToggled}
+        >
+          ${this.secondLogoSlot}
+        </primary-nav>
+        <desktop-subnav
+          .baseHost=${this.normalizedBaseHost}
+          .menuItems=${this.menus.more.links}
+          @focus=${this.closeMenus}
+        ></desktop-subnav>
+        <media-slider
+          .baseHost=${this.normalizedBaseHost}
+          .config=${this.config}
+          .selectedMenuOption=${this.selectedMenuOption}
+          .mediaSliderOpen=${this.mediaSliderOpen}
+          .menus=${this.menus}
+          tabindex="${this.mediaSliderOpen ? '1' : '-1'}"
+          @focusToOtherMenuItem=${(e: CustomEvent) =>
+            (this.currentTab = e.detail)}
+        ></media-slider>
+      </div>
+      ${this.username ? this.userMenu : this.signedOutDropdown}
+      <search-menu
+        .baseHost=${this.normalizedBaseHost}
+        .config=${this.config}
+        .openMenu=${this.openMenu}
+        tabindex="${this.searchMenuTabIndex}"
+        ?hideSearch=${this.hideSearch}
+        @searchInChanged=${this.searchInChanged}
+        @trackClick=${this.trackClick}
+        @trackSubmit=${this.trackSubmit}
+      ></search-menu>
+      <div
+        id="close-layer"
+        class="${this.closeLayerClass}"
+        @click=${this.closeMenus}
+      ></div>
+    `;
+  }
+}

package/src/lib/format-url.ts

@@ -0,0 +1,2 @@
+export default (url: string = '', baseHost: string): string =>
+  /^https?:/.test(url) ? url : (`${baseHost}${url}` as string & Location);

package/src/lib/keyboard-navigation.ts

@@ -0,0 +1,158 @@
+export default class KeyboardNavigation {
+  elementsContainer: HTMLElement;
+  menuOption: string;
+  focusableElements: HTMLElement[];
+  focusedIndex: number;
+
+  /**
+   * Constructor for the KeyboardNavigation class.
+   * @param {HTMLElement} elementsContainer - The container element that holds the focusable elements.
+   * @param {string} menuOption - The type of menu option ('web' or 'usermenu').
+   */
+  constructor(elementsContainer: HTMLElement, menuOption: string) {
+    this.elementsContainer = elementsContainer;
+    this.menuOption = menuOption;
+    this.focusableElements = this.getFocusableElements();
+    this.focusedIndex = this.getInitialFocusedIndex();
+
+    this.focusableElements[this.focusedIndex]?.focus();
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  /**
+   * Returns the initial focused index based on the menu option.
+   * @returns {number} The initial focused index (0 for 'web', 1 for 'usermenu').
+   */
+  getInitialFocusedIndex(): number {
+    return this.menuOption === 'usermenu' ? 1 : 0;
+  }
+
+  /**
+   * Gets an array of focusable elements within the container.
+   * @returns {HTMLElement[]} An array of focusable elements.
+   */
+  getFocusableElements(): HTMLElement[] {
+    const focusableTagSelectors =
+      'a[href], button, input, [tabindex]:not([tabindex="-1"])';
+    const isDisabledOrHidden = (el: Element) =>
+      !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden');
+
+    let elements;
+    if (this.menuOption === 'web') {
+      // wayback focusable elements
+      const waybackSlider =
+        this.elementsContainer.querySelector('wayback-slider')?.shadowRoot;
+      const waybackSearch = waybackSlider?.querySelector('wayback-search');
+      const waybackSearchElements = Array.from(
+        waybackSearch?.shadowRoot?.querySelectorAll(focusableTagSelectors) ??
+          [],
+      );
+
+      const normalElements = Array.from(
+        waybackSlider?.querySelectorAll(focusableTagSelectors) ?? [],
+      );
+
+      // wayback save-form focusable elements
+      const savePageForm = waybackSlider?.querySelector('save-page-form');
+      const savePageFormElements = Array.from(
+        savePageForm?.shadowRoot?.querySelectorAll(focusableTagSelectors) ?? [],
+      );
+
+      elements = [
+        ...waybackSearchElements,
+        ...normalElements,
+        ...savePageFormElements,
+      ];
+    } else {
+      elements = this.elementsContainer.querySelectorAll(focusableTagSelectors);
+    }
+
+    return Array.from(elements).filter(isDisabledOrHidden) as HTMLElement[];
+  }
+
+  /**
+   * Handles keyboard events and focuses the appropriate element.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  handleKeyDown(event: KeyboardEvent) {
+    const { key } = event;
+    const isArrowKey = [
+      'ArrowDown',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowLeft',
+    ].includes(key);
+    const isTabKey = key === 'Tab';
+
+    if (isArrowKey) {
+      this.handleArrowKey(key);
+      event.preventDefault();
+    } else if (isTabKey) {
+      this.handleTabKey(event);
+    }
+  }
+
+  /**
+   * Handles arrow key events and focuses the next or previous element for topnav sub-nav and usermenu
+   * @param {string} key - The key that was pressed ('ArrowDown', 'ArrowRight', 'ArrowUp', or 'ArrowLeft').
+   */
+  handleArrowKey(key: string) {
+    const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
+    if (isDownOrRight) {
+      this.focusNext();
+    } else {
+      this.focusPrevious();
+    }
+  }
+
+  /**
+   * Focuses the previous focusable element in the container.
+   */
+  focusPrevious() {
+    if (this.focusableElements.length === 0) return;
+    this.focusedIndex =
+      (this.focusedIndex - 1 + this.focusableElements.length) %
+      this.focusableElements.length;
+    this.focusableElements[this.focusedIndex]?.focus();
+  }
+
+  /**
+   * Focuses the next focusable element in the container.
+   */
+  focusNext() {
+    if (this.focusableElements.length === 0) return;
+    this.focusedIndex = (this.focusedIndex + 1) % this.focusableElements.length;
+    this.focusableElements[this.focusedIndex]?.focus();
+  }
+
+  /**
+   * Handles the Tab key event and focuses the next or previous menu item.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  handleTabKey(event: KeyboardEvent) {
+    if (this.menuOption) {
+      const isShiftPressed = event.shiftKey;
+      this.focusToOtherMenuItems(isShiftPressed);
+    }
+
+    this.focusableElements[this.focusedIndex]?.blur();
+    event.preventDefault();
+  }
+
+  /**
+   * Focuses the other parent menu items based on the provided flag.
+   * @param {boolean} isPrevious - A flag indicating whether to focus the previous menu item.
+   */
+  focusToOtherMenuItems(isPrevious: boolean = false) {
+    this.elementsContainer.dispatchEvent(
+      new CustomEvent('focusToOtherMenuItem', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          mediatype: this.menuOption,
+          moveTo: isPrevious ? 'prev' : 'next',
+        },
+      }),
+    );
+  }
+}

package/src/lib/location-handler.ts

@@ -0,0 +1,5 @@
+/* istanbul ignore file */
+
+export default function (url: string) {
+  window.location.href = url;
+}

package/src/lib/make-boolean-string.ts

@@ -0,0 +1,12 @@
+export function makeBooleanFromString(value: string): 'true' | 'false' {
+  const lowerValue = value.toLowerCase();
+  let booleanValue: boolean = false;
+  if (lowerValue === 'true' || lowerValue === '1') {
+    booleanValue = true;
+  }
+  return makeBooleanString(booleanValue);
+}
+
+export function makeBooleanString(value: boolean): 'true' | 'false' {
+  return value ? 'true' : 'false';
+}

package/src/lib/query-handler.ts

@@ -0,0 +1,7 @@
+/* istanbul ignore file */
+
+export default {
+  performQuery(query: string) {
+    window.location.href = `https://web.archive.org/web/*/${query}`;
+  },
+};

package/src/lib/t-sentence-case.ts

@@ -0,0 +1,10 @@
+const toSentenceCase = (phrase: string): string => {
+  const words = phrase.split(' ');
+  const lastWord = words.pop();
+  const capitalizedWord = `${lastWord?.substr(0, 1).toUpperCase()}${lastWord?.substr(1)}`;
+  return words.length
+    ? toSentenceCase(`${words.join(' ')}${capitalizedWord}`)
+    : capitalizedWord;
+};
+
+export default toSentenceCase;