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

package/src/models.ts

@@ -0,0 +1,114 @@
+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 IATopNavIconLink extends IATopNavLink {
+//   /**
+//    * Icon URL
+//    */
+//   icon: string;
+// }
+
+// export interface IATopNavAnalyticsLink extends IATopNavLink {
+//   /**
+//    * Google analytics event name
+//    */
+//   analyticsEvent?: string;
+// }
+
+// export interface IATopNavExternalLink extends IATopNavLink {
+//   /**
+//    * Is the link external or not
+//    */
+//   external: boolean;
+// }
+
+export interface IATopNavMediaMenu {
+  heading: string;
+  iconLinks: IATopNavLink[];
+  featuredLinks: IATopNavLink[];
+  links: IATopNavLink[];
+  mobileAppsLinks: IATopNavLink[];
+  browserExtensionsLinks: IATopNavLink[];
+  archiveItLinks: IATopNavLink[];
+}
+
+// export interface IATopNavWaybackMenuConfig {
+//   mobileAppsLinks: IATopNavLink[];
+//   browserExtensionsLinks: IATopNavLink[];
+//   archiveItLinks: IATopNavLink[];
+// }
+
+export interface IATopNavMenuConfig {
+  audio: IATopNavMediaMenu;
+  images: IATopNavMediaMenu;
+  more: IATopNavLink[];
+  signedOut: IATopNavLink[];
+  software: IATopNavMediaMenu;
+  texts: IATopNavMediaMenu;
+  user: IATopNavLink[];
+  userAdmin: IATopNavLink[];
+  userAdminFlags: IATopNavLink[];
+  video: IATopNavMediaMenu;
+  web: IATopNavMediaMenu;
+}
+
+export type IATopNavSecondIdentitySlotMode = 'allow' | '';
+
+// export declare class IATopNav extends LitElement {
+//   localLinks?: boolean;
+//   baseHost?: string;
+//   config?: IATopNavConfig;
+//   hideSearch?: boolean;
+//   mediaBaseHost?: string;
+//   menuSliderOpen?: boolean;
+//   openMenu?: string;
+//   screenName?: string;
+//   searchIn?: string;
+//   searchQuery?: string;
+//   secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
+//   selectedMenuOption?: string;
+//   username?: string;
+//   userProfileImagePath?: string;
+//   menus: IATopNavMenuConfig;
+//   /**
+//    * Copy to display for number of pages archived at the top of the Wayback search form
+//    *
+//    * ie. "425 billion"
+//    */
+//   waybackPagesArchived?: string;
+// }

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/toSentenceCase';
+import moreSliderCSS from './styles/more-slider';
+import formatUrl from './lib/formatUrl';
+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>
+    `;
+  }
+}

package/src/nav-search.ts

@@ -0,0 +1,113 @@
+import { nothing, html } from 'lit';
+
+import TrackedElement from './tracked-element';
+import navSearchCSS from './styles/nav-search';
+import icons from './assets/img/icons';
+import formatUrl from './lib/formatUrl';
+import { customElement, property, query } from 'lit/decorators.js';
+import { defaultTopNavConfig } from './data/menus';
+import { IATopNavConfig } from './models';
+
+@customElement('nav-search')
+export class NavSearch extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Object }) locationHandler = (url: string) => {};
+  @property({ type: Boolean }) open = false;
+  @property({ type: String }) openMenu = '';
+  @property({ type: String }) searchIn = '';
+  @property({ type: String }) searchQuery = '';
+
+  @query('[name=query]') queryInput: HTMLInputElement | undefined;
+
+  static get styles() {
+    return navSearchCSS;
+  }
+
+  search(e: CustomEvent) {
+    const query = this.queryInput?.value;
+
+    if (!query) {
+      e.preventDefault();
+      return false;
+    }
+
+    // TV search points to a detail page with a q param instead
+    if (this.searchIn === 'TV') {
+      this.locationHandler(
+        formatUrl(`/details/tv?q=${query}` as string & Location, this.baseHost),
+      );
+      e.preventDefault();
+      return false;
+    }
+
+    this.trackSubmit(e);
+    return true;
+  }
+
+  toggleSearchMenu() {
+    if (this.openMenu === 'search') {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        detail: {
+          menuName: 'search',
+        },
+        composed: true,
+        bubbles: true,
+      }),
+    );
+  }
+
+  get searchInsideInput() {
+    return this.searchIn
+      ? html`<input type="hidden" name="sin" value="${this.searchIn}" />`
+      : nothing;
+  }
+
+  get searchEndpoint() {
+    return '/search';
+  }
+
+  render() {
+    const searchMenuClass = this.open ? 'flex' : 'search-inactive';
+
+    return html`
+      <div class="search-activated fade-in ${searchMenuClass}">
+        <form
+          id="nav-search"
+          class="highlight"
+          .action=${formatUrl(
+            this.searchEndpoint as string & Location,
+            this.baseHost,
+          )}
+          method="get"
+          @submit=${this.search}
+          data-event-submit-tracking="${this.config
+            ?.eventCategory}|NavSearchSubmit"
+        >
+          <input
+            type="text"
+            name="query"
+            class="search-field"
+            placeholder="Search"
+            autocomplete="off"
+            value=${this.searchQuery || ''}
+            @focus=${this.toggleSearchMenu}
+          />
+          ${this.searchInsideInput}
+          <button
+            type="submit"
+            class="search"
+            tabindex="-1"
+            data-event-click-tracking="${this.config
+              ?.eventCategory}|NavSearchClose"
+          >
+            ${icons.search}
+          </button>
+        </form>
+      </div>
+    `;
+  }
+}

package/src/primary-nav.ts

@@ -0,0 +1,266 @@
+import { html, nothing, PropertyValues } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import './assets/img/hamburger';
+import './login-button';
+import './nav-search';
+import './media-menu';
+import logoWordmarkStacked from './assets/img/wordmark-stacked';
+import primaryNavCSS from './styles/primary-nav';
+import locationHandler from './lib/location-handler';
+import formatUrl from './lib/formatUrl';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('primary-nav')
+export class PrimaryNav extends TrackedElement {
+  @property({ type: String }) mediaBaseHost = 'https://archive.org';
+  @property({ type: String }) baseHost = '';
+  @property({ type: Boolean }) hideSearch = false;
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
+  @property({ type: String }) screenName = '';
+  @property({ type: String }) searchIn = '';
+  @property({ type: String }) searchQuery = '';
+  @property({ type: String })
+  secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';
+  @property({ type: String }) selectedMenuOption = '';
+  @property({ type: Boolean }) signedOutMenuOpen = false;
+  @property({ type: Boolean }) userMenuOpen = false;
+  @property({ type: Boolean }) mediaMenuAnimate = false;
+  @property({ type: String }) username = '';
+  @property({ type: String }) userProfileImagePath = '';
+  @property({ type: Object }) currentTab:
+    | { mediatype: string; moveTo: string }
+    | undefined;
+  signedOutMenuToggled: unknown;
+
+  static get styles() {
+    return primaryNavCSS;
+  }
+
+  toggleMediaMenu(e: Event) {
+    this.trackClick(e);
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        detail: {
+          menuName: 'media',
+        },
+      }),
+    );
+  }
+
+  toggleSearchMenu(e: Event) {
+    this.trackClick(e);
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        detail: {
+          menuName: 'search',
+        },
+      }),
+    );
+  }
+
+  toggleUserMenu(e: Event) {
+    this.trackClick(e);
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        detail: {
+          menuName: 'user',
+        },
+      }),
+    );
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('currentTab')) {
+      // early return
+      if (!this.currentTab || Object.keys(this.currentTab).length === 0)
+        return nothing;
+
+      const isUserMenuTab =
+        this.currentTab && this.currentTab.mediatype === 'usermenu';
+      if (isUserMenuTab) {
+        const mediaButtons = Array.from(
+          this.shadowRoot
+            ?.querySelector('media-menu')
+            ?.shadowRoot?.querySelectorAll('media-button') ?? [],
+        );
+        const lastMediaButton = mediaButtons.filter((element) => {
+          return element.shadowRoot
+            ?.querySelector('a')
+            ?.classList.contains('images');
+        });
+
+        const focusElement =
+          this.currentTab.moveTo === 'next'
+            ? this.shadowRoot?.querySelector('a.upload')
+            : lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');
+
+        if (focusElement) {
+          (focusElement as HTMLElement).focus();
+        }
+      } else if (this.currentTab.moveTo === 'next') {
+        if (this.shadowRoot?.querySelector('.user-menu')) {
+          (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();
+        } else {
+          (
+            this.shadowRoot
+              ?.querySelector('login-button')
+              ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement
+          )?.focus();
+        }
+      }
+    }
+  }
+
+  get userIcon() {
+    const userMenuClass = this.openMenu === 'user' ? 'active' : '';
+    const userMenuToolTip =
+      this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';
+
+    return html`
+      <button
+        class="user-menu ${userMenuClass}"
+        title="${userMenuToolTip}"
+        @click="${this.toggleUserMenu}"
+        data-event-click-tracking="${this.config?.eventCategory}|NavUserMenu"
+      >
+        <img
+          src="${this.mediaBaseHost}${this.userProfileImagePath}"
+          alt="${this.screenName}"
+        />
+        <span class="screen-name" dir="auto">${this.screenName}</span>
+      </button>
+    `;
+  }
+
+  get loginIcon() {
+    return html`
+      <login-button
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .dropdownOpen=${this.signedOutMenuOpen}
+        .openMenu=${this.openMenu}
+        @signedOutMenuToggled=${this.signedOutMenuToggled}
+      ></login-button>
+    `;
+  }
+
+  get searchMenuOpen() {
+    return this.openMenu === 'search';
+  }
+
+  get allowSecondaryIcon() {
+    return this.secondIdentitySlotMode === 'allow';
+  }
+
+  get searchMenu() {
+    if (this.hideSearch) return nothing;
+
+    return html`
+      <button
+        class="search-trigger"
+        @click="${this.toggleSearchMenu}"
+        data-event-click-tracking="${this.config?.eventCategory}|NavSearchOpen"
+      >
+        ${icons.search}
+      </button>
+      <nav-search
+        .baseHost=${this.baseHost}
+        .config=${this.config}
+        .locationHandler=${locationHandler}
+        .open=${this.searchMenuOpen}
+        .openMenu=${this.openMenu}
+        .searchIn=${this.searchIn}
+        .searchQuery=${this.searchQuery}
+      ></nav-search>
+    `;
+  }
+
+  get mobileDonateHeart() {
+    return html`
+      <a
+        class="mobile-donate-link"
+        .href=${formatUrl(
+          '/donate/?origin=iawww-mbhrt' as string & Location,
+          this.baseHost,
+        )}
+      >
+        ${icons.donateUnpadded}
+        <span class="sr-only">"Donate to the archive"</span>
+      </a>
+    `;
+  }
+
+  get uploadButtonTemplate() {
+    return html` <a
+      .href="${formatUrl('/create' as string & Location, this.baseHost)}"
+      class="upload"
+      @focus=${this.toggleMediaMenu}
+    >
+      ${icons.upload}
+      <span>Upload</span>
+    </a>`;
+  }
+
+  get userStateTemplate() {
+    return html`<div class="user-info">
+      ${this.username ? this.userIcon : this.loginIcon}
+    </div>`;
+  }
+
+  get secondLogoSlot() {
+    return this.allowSecondaryIcon
+      ? html`
+          <slot name="opt-sec-logo"></slot>
+          <slot name="opt-sec-logo-mobile"></slot>
+        `
+      : nothing;
+  }
+
+  get secondLogoClass() {
+    return this.allowSecondaryIcon ? 'second-logo' : '';
+  }
+
+  render() {
+    // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
+    return html`
+      <nav class=${this.hideSearch ? 'hide-search' : ''}>
+        <button
+          class="hamburger"
+          @click="${this.toggleMediaMenu}"
+          data-event-click-tracking="${this.config?.eventCategory}|NavHamburger"
+          title="Open main menu"
+        >
+          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
+        </button>
+
+        <div class=${`branding ${this.secondLogoClass}`}>
+          <a
+            .href=${formatUrl('/' as string & Location, this.baseHost)}
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.config?.eventCategory}|NavHome"
+            title="Go home"
+            class="link-home"
+            >${icons.iaLogo}${logoWordmarkStacked}</a
+          >
+          ${this.secondLogoSlot}
+        </div>
+        <media-menu
+          .baseHost=${this.baseHost}
+          .config=${this.config}
+          ?mediaMenuAnimate=${this.mediaMenuAnimate}
+          .selectedMenuOption=${this.selectedMenuOption}
+          .openMenu=${this.openMenu}
+          .currentTab=${this.currentTab}
+        ></media-menu>
+        <div class="right-side-section">
+          ${this.mobileDonateHeart} ${this.userStateTemplate}
+          ${this.uploadButtonTemplate} ${this.searchMenu}
+        </div>
+      </nav>
+    `;
+  }
+}

package/src/save-page-form.ts

@@ -0,0 +1,59 @@
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import savePageFormCSS from './styles/save-page-form';
+import { customElement, property, state } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('save-page-form')
+export class SavePageForm extends TrackedElement {
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+
+  @state() inputValid = true;
+
+  static get styles() {
+    return savePageFormCSS;
+  }
+
+  private validateURL(e: SubmitEvent) {
+    const target = e.target as HTMLFormElement;
+    const urlInput = target.querySelector(
+      '[name="url_preload"]',
+    ) as HTMLInputElement;
+    const valid = /\..{2,}$/.test(urlInput.value);
+
+    if (!valid) {
+      e.preventDefault();
+      this.inputValid = false;
+      return;
+    }
+    this.inputValid = true;
+    this.trackSubmit(e);
+  }
+
+  get errorClass() {
+    return `error${this.inputValid ? '' : ' visible'}`;
+  }
+
+  render() {
+    return html`
+      <form
+        action="//web.archive.org/save"
+        method="post"
+        data-event-submit-tracking="${this.config.eventCategory}|SavePageSubmit"
+        @submit=${this.validateURL}
+      >
+        <h3>Save Page Now</h3>
+        <p>
+          Capture a web page as it appears now for use as a trusted citation in
+          the future.
+        </p>
+        <div>
+          <input type="text" name="url_preload" placeholder="https://" />
+          <input type="submit" value="Save" />
+        </div>
+        <p class=${this.errorClass}>Please enter a valid web address</p>
+      </form>
+    `;
+  }
+}