@internetarchive/ia-topnav 0.0.0-webdev7666-1

package/src/login-button.ts

@@ -0,0 +1,75 @@
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import loginButtonCSS from './styles/login-button';
+import formatUrl from './lib/format-url';
+import { customElement, property, state } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('login-button')
+export class LoginButton extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
+
+  @state() private dropdownTabIndex = '';
+
+  static get styles() {
+    return loginButtonCSS;
+  }
+
+  get signupPath() {
+    return formatUrl('/account/signup', this.baseHost);
+  }
+
+  get loginPath() {
+    return formatUrl('/account/login', this.baseHost);
+  }
+
+  get analyticsEvent() {
+    return `${this.config?.eventCategory}|NavLoginIcon`;
+  }
+
+  get menuOpened() {
+    return this.openMenu === 'login';
+  }
+
+  get avatarClass() {
+    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+  }
+
+  toggleDropdown(e: Event) {
+    e.preventDefault();
+    this.trackClick(e);
+    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          menuName: 'login',
+        },
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="logged-out-toolbar">
+        <a
+          class="${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+        >
+          ${icons.user}
+        </a>
+        <span>
+          <a href="${this.signupPath}">Sign up</a>
+          |
+          <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+  }
+}

package/src/media-button.ts

@@ -0,0 +1,103 @@
+import { html, TemplateResult } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import toSentenceCase from './lib/t-sentence-case';
+import mediaButtonCSS from './styles/media-button';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('media-button')
+export class MediaButton extends TrackedElement {
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) icon = '';
+  @property({ type: String }) href = '';
+  @property({ type: String }) label = '';
+  @property({ type: String }) mediatype = '';
+  @property({ type: String }) openMenu = '';
+  @property({ type: Boolean }) selected = false;
+  @property({ type: Boolean }) followable = false;
+
+  static get styles() {
+    return mediaButtonCSS;
+  }
+
+  static get icons(): Record<string, TemplateResult> {
+    return icons;
+  }
+
+  onClick(e: Event) {
+    this.trackClick(e);
+    e.preventDefault();
+    // On desktop viewport widths, the media subnav is always visible. To
+    // ensure the media subnav is open on mobile if the viewport is
+    // resized, the openMenu needs to be set to 'media'.
+    if (this.openMenu !== 'media') {
+      this.dispatchMenuToggledEvent();
+    }
+    this.dispatchMediaTypeSelectedEvent();
+  }
+
+  dispatchMenuToggledEvent() {
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          menuName: 'media',
+        },
+      }),
+    );
+  }
+
+  dispatchMediaTypeSelectedEvent() {
+    this.dispatchEvent(
+      new CustomEvent('mediaTypeSelected', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          mediatype: this.mediatype,
+        },
+      }),
+    );
+  }
+
+  get buttonClass() {
+    return this.selected ? 'selected' : '';
+  }
+
+  get tooltipPrefix() {
+    return this.selected ? 'Collapse' : 'Expand';
+  }
+
+  get iconClass() {
+    return this.selected ? 'active' : '';
+  }
+
+  get analyticsEvent() {
+    return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;
+  }
+
+  get menuItem() {
+    return html`
+      <span class="icon ${this.iconClass}">
+        ${MediaButton.icons[this.icon]}
+      </span>
+      <span class="label">${this.label}</span>
+    `;
+  }
+
+  render() {
+    return html`
+      <a
+        href="${this.href}"
+        class="menu-item ${this.mediatype} ${this.buttonClass}"
+        @click=${this.followable ? this.trackClick : this.onClick}
+        data-event-click-tracking="${this.analyticsEvent}"
+        title="${this.tooltipPrefix} ${this.mediatype} menu"
+      >
+        ${this.menuItem}
+      </a>
+    `;
+  }
+}

package/src/media-menu.ts

@@ -0,0 +1,143 @@
+import { LitElement, PropertyValues, html } from 'lit';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/format-url';
+import './media-button';
+import { MediaButton } from './media-button';
+import { IATopNavConfig } from './models';
+import mediaMenuCSS from './styles/media-menu';
+
+const menuSelection = [
+  {
+    icon: 'web',
+    menu: 'web',
+    href: 'https://web.archive.org',
+    label: 'Wayback Machine',
+  },
+  {
+    icon: 'texts',
+    menu: 'texts',
+    href: '/details/texts',
+    label: 'Texts',
+  },
+  {
+    icon: 'video',
+    menu: 'video',
+    href: '/details/movies',
+    label: 'Video',
+  },
+  {
+    icon: 'audio',
+    menu: 'audio',
+    href: '/details/audio',
+    label: 'Audio',
+  },
+  {
+    icon: 'software',
+    menu: 'software',
+    href: '/details/software',
+    label: 'Software',
+  },
+  {
+    icon: 'images',
+    menu: 'images',
+    href: '/details/image',
+    label: 'Images',
+  },
+  {
+    icon: 'donate',
+    menu: 'donate',
+    href: '/donate/',
+    label: 'Donate',
+    followable: true,
+  },
+  {
+    icon: 'ellipses',
+    menu: 'more',
+    href: '/about/',
+    label: 'More',
+  },
+];
+
+@customElement('media-menu')
+export class MediaMenu extends LitElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
+  @property({ type: String }) selectedMenuOption = '';
+  @property({ type: Object }) currentTab: { moveTo: string } | undefined;
+
+  @queryAll('media-button') mediaButtons?: MediaButton[];
+
+  static get styles() {
+    return mediaMenuCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('currentTab')) {
+      const mediaButtons = Array.from(this.mediaButtons ?? []);
+
+      mediaButtons.map((button, index) => {
+        const linkItem = button.shadowRoot?.querySelector('a.menu-item');
+        if (linkItem) {
+          if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {
+            linkItem.classList.remove('selected');
+            (linkItem as HTMLElement).blur();
+
+            const newFocusIndex =
+              this.currentTab?.moveTo === 'next' ? index + 1 : index - 1;
+            (
+              mediaButtons[newFocusIndex]?.shadowRoot?.querySelector(
+                'a.menu-item',
+              ) as HTMLElement
+            ).focus();
+          }
+        }
+      });
+    }
+  }
+
+  get mediaMenuOptionsTemplate() {
+    const buttons = menuSelection.map(
+      ({ icon, menu, label, href, followable }) => {
+        const selected = this.selectedMenuOption === menu;
+        return html`
+          <media-button
+            .config=${this.config}
+            .icon=${icon}
+            .href=${formatUrl(href as string & Location, this.baseHost)}
+            ?followable=${followable}
+            .label=${label}
+            .mediatype=${menu}
+            .openMenu=${this.openMenu}
+            .selected=${selected}
+            .selectedMenuOption=${this.selectedMenuOption}
+            data-mediatype="${menu}"
+          ></media-button>
+        `;
+      },
+    );
+    return buttons;
+  }
+
+  get menuOpened() {
+    return this.openMenu === 'media';
+  }
+
+  get menuClass() {
+    return this.menuOpened ? 'open' : 'closed';
+  }
+
+  render() {
+    return html`
+      <div class="media-menu-container ${this.menuClass}">
+        <div class="overflow-clip">
+          <nav class="media-menu-inner" aria-expanded="${this.menuOpened}">
+            <div class="menu-group">${this.mediaMenuOptionsTemplate}</div>
+          </nav>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/media-slider.ts

@@ -0,0 +1,130 @@
+import { LitElement, PropertyValues, html } from 'lit';
+import './media-subnav';
+import mediaSliderCSS from './styles/media-slider';
+import KeyboardNavigation from './lib/keyboard-navigation';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavMenuConfig } from './models';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
+
+@customElement('media-slider')
+export class MediaSlider extends LitElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Boolean }) mediaSliderOpen = false;
+  @property({ type: Object }) menus: IATopNavMenuConfig = buildTopNavMenus();
+  @property({ type: String }) selectedMenuOption = 'texts';
+
+  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;
+
+  static get styles() {
+    return mediaSliderCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('selectedMenuOption') && this.selectedMenuOption) {
+      const container = this.shadowRoot?.querySelector('.has-focused'); //?.shadowRoot;
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(
+          container as HTMLElement,
+          this.selectedMenuOption,
+        );
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  shouldUpdate() {
+    const scrollPane = this.shadowRoot
+      ? this.shadowRoot.querySelector('.information-menu')
+      : null;
+
+    if (scrollPane) {
+      scrollPane.scrollTop = 0;
+    }
+    return true;
+  }
+
+  render() {
+    const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';
+
+    return html`
+      <div class="media-slider-container">
+        <div class="overflow-clip ${sliderDetailsClass}">
+          <div class="information-menu ${sliderDetailsClass}">
+            <div class="info-box">
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'audio'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="audio"
+                .menuItems=${this.menus.audio}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'images'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="images"
+                .menuItems=${this.menus.images}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'software'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="software"
+                .menuItems=${this.menus.software}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'texts'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="texts"
+                .menuItems=${this.menus.texts}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'video'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="video"
+                .menuItems=${this.menus.video}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'web'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="web"
+                .menuItems=${this.menus.web}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'more'
+                  ? 'has-focused'
+                  : 'hidden'}"
+                menu="more"
+                .menuItems=${this.menus.more}
+              ></media-subnav>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/media-subnav.ts

@@ -0,0 +1,132 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import TrackedElement from './tracked-element';
+import './wayback-slider';
+import './more-slider';
+import mediaSubnavCSS from './styles/media-subnav';
+import toSentenceCase from './lib/t-sentence-case';
+import formatUrl from './lib/format-url';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavLink, IATopNavMediaMenu } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('media-subnav')
+export class MediaSubnav extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) menu:
+    | ''
+    | 'web'
+    | 'more'
+    | 'audio'
+    | 'images'
+    | 'software'
+    | 'texts'
+    | 'video' = '';
+  @property({ type: Object }) menuItems: IATopNavMediaMenu =
+    MediaSubnav.defaultLinks;
+
+  private links: IATopNavMediaMenu = MediaSubnav.defaultLinks;
+
+  static get styles() {
+    return mediaSubnavCSS;
+  }
+
+  shouldUpdate() {
+    if (this.menuItems) {
+      this.links = this.menuItems;
+    }
+    return true;
+  }
+
+  static get defaultLinks(): IATopNavMediaMenu {
+    return {
+      heading: '',
+      iconLinks: [],
+      featuredLinks: [],
+      links: [],
+      mobileAppsLinks: [],
+      browserExtensionsLinks: [],
+      archiveItLinks: [],
+    };
+  }
+
+  analyticsEvent(title: string) {
+    return `${this.config?.eventCategory}|${toSentenceCase(title)}${toSentenceCase(this.menu)}`;
+  }
+
+  get iconLinks() {
+    return this.links.iconLinks.map(
+      (link) => html`
+        <a
+          .href="${formatUrl(link.url, this.baseHost)}"
+          @click=${this.trackClick}
+          data-event-click-tracking="${this.analyticsEvent(link.title)}"
+          ><img src="${ifDefined(link.icon)}" loading="lazy" />${link.title}</a
+        >
+      `,
+    );
+  }
+
+  renderLinks(links: IATopNavLink[]) {
+    return links.map(
+      (link) => html`
+        <li>
+          <a
+            .href="${formatUrl(link.url, this.baseHost)}"
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.analyticsEvent(link.title)}"
+            >${link.title}</a
+          >
+        </li>
+      `,
+    );
+  }
+
+  render() {
+    if (!this.menu) {
+      return html``;
+    }
+
+    if (this.menuItems) {
+      this.links = this.menuItems;
+    }
+
+    if (this.menu === 'web') {
+      return html` <wayback-slider
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .archiveItLinks=${this.menuItems.archiveItLinks}
+        .browserExtensionsLinks=${this.menuItems.browserExtensionsLinks}
+        .mobileAppsLinks=${this.menuItems.mobileAppsLinks}
+      ></wayback-slider>`;
+    }
+
+    if (this.menu === 'more') {
+      return html` <more-slider
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .menuItems=${this.menuItems.links}
+      >
+      </more-slider>`;
+    }
+
+    return html`
+      <h3>${this.links.heading}</h3>
+      <div class="icon-links">${this.iconLinks}</div>
+      <div class="links featured">
+        <h4>Featured</h4>
+        <ul>
+          ${this.renderLinks(this.links.featuredLinks)}
+        </ul>
+      </div>
+      <div class="links top">
+        <h4>Top</h4>
+        <ul>
+          ${this.renderLinks(this.links.links)}
+        </ul>
+      </div>
+    `;
+  }
+}

package/src/models.ts

@@ -0,0 +1,63 @@
+export interface IATopNavConfig {
+  /**
+   * Google Analytics event category
+   */
+  eventCategory?: string;
+
+  /**
+   * Copy to display for number of pages archived at the top of the Wayback search form
+   *
+   * ie. "425 billion"
+   */
+  waybackPagesArchived?: string;
+
+  /**
+   * Array of strings representing the values of options that should be hidden from search options
+   */
+  hiddenSearchOptions?: string[];
+
+  /**
+   * Map from dropdown item ids to any callout text that should be applied beside them
+   */
+  callouts?: Record<string, string>;
+}
+
+export interface IATopNavLink {
+  title: string;
+
+  url?: string;
+
+  class?: string;
+
+  icon?: string;
+
+  analyticsEvent?: string;
+
+  external?: boolean;
+}
+
+export interface IATopNavMediaMenu {
+  heading: string;
+  iconLinks: IATopNavLink[];
+  featuredLinks: IATopNavLink[];
+  links: IATopNavLink[];
+  mobileAppsLinks: IATopNavLink[];
+  browserExtensionsLinks: IATopNavLink[];
+  archiveItLinks: IATopNavLink[];
+}
+
+export interface IATopNavMenuConfig {
+  audio: IATopNavMediaMenu;
+  images: IATopNavMediaMenu;
+  more: IATopNavMediaMenu;
+  signedOut: IATopNavLink[];
+  software: IATopNavMediaMenu;
+  texts: IATopNavMediaMenu;
+  user: IATopNavLink[];
+  userAdmin: IATopNavLink[];
+  userAdminFlags: IATopNavLink[];
+  video: IATopNavMediaMenu;
+  web: IATopNavMediaMenu;
+}
+
+export type IATopNavSecondIdentitySlotMode = 'allow' | '';

package/src/more-slider.ts

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import TrackedElement from './tracked-element';
+import toSentenceCase from './lib/t-sentence-case';
+import moreSliderCSS from './styles/more-slider';
+import formatUrl from './lib/format-url';
+import { IATopNavConfig, IATopNavLink } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('more-slider')
+export class MoreSlider extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Array }) menuItems: IATopNavLink[] = [];
+
+  static get styles() {
+    return moreSliderCSS;
+  }
+
+  analyticsEvent(title: string) {
+    return `${this.config.eventCategory}|NavMore${toSentenceCase(title)}`;
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.menuItems.map(
+          (item) =>
+            html`<li>
+              <a
+                @click=${this.trackClick}
+                href=${formatUrl(item.url, this.baseHost)}
+                data-event-click-tracking="${this.analyticsEvent(item.title)}"
+                >${item.title}</a
+              >
+            </li>`,
+        )}
+      </ul>
+    `;
+  }
+}