@internetarchive/ia-topnav 1.3.9 → 1.3.10-webdev-7394.0

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/formatUrl';
+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,105 @@
+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/formatUrl';
+import { makeBooleanString } from './lib/makeBooleanString';
+import { IATopNavConfig, IATopNavLink } from './models';
+import dropdownMenuCSS from './styles/dropdown-menu';
+import TrackedElement from './tracked-element';
+
+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="${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.js → ia-topnav.ts}

@@ -1,119 +1,115 @@
-import { LitElement, html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
-
-import './primary-nav.js';
-import './user-menu.js';
-import './search-menu.js';
-import './media-slider.js';
-import './desktop-subnav.js';
-import './dropdown-menu.js';
-import './signed-out-dropdown.js';
-import iaTopNavCSS from './styles/ia-topnav.js';
-import { buildTopNavMenus, defaultTopNavConfig } from './data/menus.js';
-
+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 default class IATopNav extends LitElement {
-  static get styles() {
-    return iaTopNavCSS;
-  }
+  @property({ type: Boolean }) localLinks = false;
 
-  // NOTE:
-  // When adding properties, also add them to index.d.ts in the root `ia-topnav` directory
-  // so Typescript can find them
-  static get properties() {
-    return {
-      // we default to fully-qualified `https://archive.org` urls in nav, set to false for relatives
-      localLinks: Boolean,
-      // @see `data/menus.js` for a description:
-      waybackPagesArchived: String,
-      // the base host is for navigation, so may be empty for relative links
-      baseHost: { type: String },
-      // the media base host is the base host for images, such as the profile picture
-      // which may not be hosted locally
-      mediaBaseHost: { type: String },
-      /** Whether the user has privs to edit all items */
-      admin: { type: Boolean },
-      /** Whether the user has privs to manage item flags */
-      canManageFlags: { type: Boolean },
-      config: {
-        type: Object,
-        converter(value) {
-          return JSON.parse(atob(value));
-        },
-      },
-      hideSearch: { type: Boolean },
-      /** Identifier for the item or collection currently being viewed */
-      itemIdentifier: { type: String },
-      mediaSliderOpen: { type: Boolean },
-      menus: {
-        type: Object,
-        converter(value) {
-          return JSON.parse(atob(value));
-        },
-      },
-      openMenu: { type: String },
-      screenName: { type: String },
-      searchIn: { type: String },
-      searchQuery: {
-        type: String,
-        converter(value) {
-          return atob(value);
-        },
-      },
-      selectedMenuOption: { type: String },
-      username: { type: String },
-      userProfileImagePath: { type: String },
-      secondIdentitySlotMode: { type: String },
-      currentTab: { type: Object },
-    };
+  @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 : '';
   }
 
-  constructor() {
-    super();
-    this.menuSetup();
-    this.mediaBaseHost = 'https://archive.org';
-    this.userProfileImagePath = '/services/img/user/profile';
-    this.config = defaultTopNavConfig;
-    this.hideSearch = false;
-    this.mediaSliderOpen = false;
-    this.openMenu = '';
-    this.searchIn = '';
-    this.selectedMenuOption = '';
-    this.secondIdentitySlotMode = '';
-    this.currentTab = {};
+  static get styles() {
+    return iaTopNavCSS;
   }
 
-  updated(props) {
-    if (props.has('username') || props.has('localLinks') || props.has('baseHost') ||
-      props.has('waybackPagesArchived') || props.has('itemIdentifier')) {
+  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);
+    // close open menu on `esc` click
+    document.addEventListener(
+      'keydown',
+      (e) => {
+        if (e.key === 'Escape') {
+          this.openMenu = '';
+          this.mediaSliderOpen = false;
+        }
+      },
+      false,
+    );
   }
 
   menuSetup() {
-    this.localLinks = this.getAttribute('localLinks') !== 'false' && this.getAttribute('localLinks') !== false;
-    this.username = this.getAttribute('username')
-    this.screenName = this.getAttribute('screenname');
-    this.waybackPagesArchived = this.getAttribute('waybackPagesArchived') ?? ''
-
-    // ensure we update other components that use `baseHost`
-    this.baseHost = this.localLinks ? '' : 'https://archive.org';
-
     // re/build the nav
-    this.menus = buildTopNavMenus(this.username, this.localLinks, this.waybackPagesArchived, this.itemIdentifier);
+    this.menus = buildTopNavMenus(
+      this.username,
+      this.normalizedBaseHost,
+      this.waybackPagesArchived,
+      this.itemIdentifier,
+    );
   }
 
-  menuToggled({ detail }) {
+  menuToggled(e: CustomEvent) {
     const currentMenu = this.openMenu;
-    this.openMenu = currentMenu === detail.menuName ? '' : detail.menuName;
+    this.openMenu = currentMenu === e.detail.menuName ? '' : e.detail.menuName;
     // Keeps media slider open if media menu is open
     if (this.openMenu === 'media') {
       return;
@@ -135,32 +131,36 @@ export default class IATopNav extends LitElement {
     this.closeMediaSlider();
   }
 
-  searchInChanged(e) {
+  searchInChanged(e: CustomEvent) {
     this.searchIn = e.detail.searchIn;
   }
 
-  trackClick({ detail }) {
-    this.dispatchEvent(new CustomEvent('analyticsClick', {
-      bubbles: true,
-      composed: true,
-      detail,
-    }));
+  trackClick(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('analyticsClick', {
+        bubbles: true,
+        composed: true,
+        detail: e.detail,
+      }),
+    );
   }
 
-  trackSubmit({ detail }) {
-    this.dispatchEvent(new CustomEvent('analyticsSubmit', {
-      bubbles: true,
-      composed: true,
-      detail,
-    }));
+  trackSubmit(e: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('analyticsSubmit', {
+        bubbles: true,
+        composed: true,
+        detail: e.detail,
+      }),
+    );
   }
 
-  mediaTypeSelected({ detail }) {
-    if (this.selectedMenuOption === detail.mediatype) {
+  mediaTypeSelected(e: CustomEvent) {
+    if (this.selectedMenuOption === e.detail.mediatype) {
       this.closeMediaSlider();
       return;
     }
-    this.selectedMenuOption = detail.mediatype;
+    this.selectedMenuOption = e.detail.mediatype;
     this.openMediaSlider();
   }
 
@@ -195,7 +195,7 @@ export default class IATopNav extends LitElement {
   get userMenu() {
     return html`
       <user-menu
-        .baseHost=${this.baseHost}
+        .baseHost=${this.normalizedBaseHost}
         .config=${this.config}
         .menuItems=${this.userMenuItems}
         ?open=${this.openMenu === 'user'}
@@ -204,7 +204,8 @@ export default class IATopNav extends LitElement {
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
-        @focusToOtherMenuItem=${(e) => this.currentTab = e.detail}
+        @focusToOtherMenuItem=${(e: CustomEvent) =>
+          (this.currentTab = e.detail)}
       ></user-menu>
     `;
   }
@@ -212,7 +213,7 @@ export default class IATopNav extends LitElement {
   get signedOutDropdown() {
     return html`
       <signed-out-dropdown
-        .baseHost=${this.baseHost}
+        .baseHost=${this.normalizedBaseHost}
         .config=${this.config}
         .open=${this.signedOutOpened}
         ?hideSearch=${this.hideSearch}
@@ -241,7 +242,7 @@ export default class IATopNav extends LitElement {
 
     return this.itemIdentifier && this.admin
       ? [basicItems, adminItems]
-      : basicItems;
+      : [basicItems];
   }
 
   get desktopSubnavMenuItems() {
@@ -269,7 +270,7 @@ export default class IATopNav extends LitElement {
     return html`
       <div class="topnav">
         <primary-nav
-          .baseHost=${this.baseHost}
+          .baseHost=${this.normalizedBaseHost}
           .mediaBaseHost=${this.mediaBaseHost}
           .config=${this.config}
           .openMenu=${this.openMenu}
@@ -283,7 +284,6 @@ export default class IATopNav extends LitElement {
           .currentTab=${this.currentTab}
           ?hideSearch=${this.hideSearch}
           @mediaTypeSelected=${this.mediaTypeSelected}
-          @toggleSearchMenu=${this.toggleSearchMenu}
           @trackClick=${this.trackClick}
           @trackSubmit=${this.trackSubmit}
           @menuToggled=${this.menuToggled}
@@ -291,18 +291,19 @@ export default class IATopNav extends LitElement {
           ${this.secondLogoSlot}
         </primary-nav>
         <media-slider
-          .baseHost=${this.baseHost}
+          .baseHost=${this.normalizedBaseHost}
           .config=${this.config}
           .selectedMenuOption=${this.selectedMenuOption}
           .mediaSliderOpen=${this.mediaSliderOpen}
           .menus=${this.menus}
           tabindex="${this.mediaSliderOpen ? '1' : '-1'}"
-          @focusToOtherMenuItem=${(e) => this.currentTab = e.detail}
+          @focusToOtherMenuItem=${(e: CustomEvent) =>
+            (this.currentTab = e.detail)}
         ></media-slider>
       </div>
       ${this.username ? this.userMenu : this.signedOutDropdown}
       <search-menu
-        .baseHost=${this.baseHost}
+        .baseHost=${this.normalizedBaseHost}
         .config=${this.config}
         .openMenu=${this.openMenu}
         tabindex="${this.searchMenuTabIndex}"
@@ -312,13 +313,15 @@ export default class IATopNav extends LitElement {
         @trackSubmit=${this.trackSubmit}
       ></search-menu>
       <desktop-subnav
-        .baseHost=${this.baseHost}
+        .baseHost=${this.normalizedBaseHost}
         .menuItems=${this.desktopSubnavMenuItems}
         @focus=${this.closeMenus}
       ></desktop-subnav>
-      <div id="close-layer" class="${this.closeLayerClass}" @click=${this.closeMenus}></div>
+      <div
+        id="close-layer"
+        class="${this.closeLayerClass}"
+        @click=${this.closeMenus}
+      ></div>
     `;
   }
 }
-
-customElements.define('ia-topnav', IATopNav);

package/src/lib/formatUrl.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.js → keyboard-navigation.ts}

@@ -1,10 +1,15 @@
 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, menuOption) {
+  constructor(elementsContainer: HTMLElement, menuOption: string) {
     this.elementsContainer = elementsContainer;
     this.menuOption = menuOption;
     this.focusableElements = this.getFocusableElements();
@@ -18,7 +23,7 @@ export default class KeyboardNavigation {
    * Returns the initial focused index based on the menu option.
    * @returns {number} The initial focused index (0 for 'web', 1 for 'usermenu').
    */
-  getInitialFocusedIndex() {
+  getInitialFocusedIndex(): number {
     return this.menuOption === 'usermenu' ? 1 : 0;
   }
 
@@ -26,38 +31,57 @@ export default class KeyboardNavigation {
    * Gets an array of focusable elements within the container.
    * @returns {HTMLElement[]} An array of focusable elements.
    */
-  getFocusableElements() {
-    const focusableTagSelectors = 'a[href], button, input, [tabindex]:not([tabindex="-1"])';
-    const isDisabledOrHidden = el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden');
+  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));
+      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];
+      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);
+    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) {
+  handleKeyDown(event: KeyboardEvent) {
     const { key } = event;
-    const isArrowKey = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key);
+    const isArrowKey = [
+      'ArrowDown',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowLeft',
+    ].includes(key);
     const isTabKey = key === 'Tab';
 
     if (isArrowKey) {
@@ -72,9 +96,13 @@ export default class KeyboardNavigation {
    * 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) {
+  handleArrowKey(key: string) {
     const isDownOrRight = ['ArrowDown', 'ArrowRight'].includes(key);
-    isDownOrRight ? this.focusNext() : this.focusPrevious();
+    if (isDownOrRight) {
+      this.focusNext();
+    } else {
+      this.focusPrevious();
+    }
   }
 
   /**
@@ -82,7 +110,9 @@ export default class KeyboardNavigation {
    */
   focusPrevious() {
     if (this.focusableElements.length === 0) return;
-    this.focusedIndex = (this.focusedIndex - 1 + this.focusableElements.length) % this.focusableElements.length;
+    this.focusedIndex =
+      (this.focusedIndex - 1 + this.focusableElements.length) %
+      this.focusableElements.length;
     this.focusableElements[this.focusedIndex]?.focus();
   }
 
@@ -99,7 +129,7 @@ export default class KeyboardNavigation {
    * Handles the Tab key event and focuses the next or previous menu item.
    * @param {KeyboardEvent} event - The keyboard event object.
    */
-  handleTabKey(event) {
+  handleTabKey(event: KeyboardEvent) {
     if (this.menuOption) {
       const isShiftPressed = event.shiftKey;
       this.focusToOtherMenuItems(isShiftPressed);
@@ -113,7 +143,7 @@ export default class KeyboardNavigation {
    * 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 = false) {
+  focusToOtherMenuItems(isPrevious: boolean = false) {
     this.elementsContainer.dispatchEvent(
       new CustomEvent('focusToOtherMenuItem', {
         bubbles: true,
@@ -122,7 +152,7 @@ export default class KeyboardNavigation {
           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;
+}