@internetarchive/ia-topnav 0.0.0-webdev7666-1

package/src/nav-search.ts

@@ -0,0 +1,114 @@
+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/format-url';
+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;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  @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]') private queryInput?: HTMLInputElement;
+
+  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/format-url';
+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>
+    `;
+  }
+}

package/src/search-menu.ts

@@ -0,0 +1,156 @@
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import TrackedElement from './tracked-element';
+import searchMenuCSS from './styles/search-menu';
+import formatUrl from './lib/format-url';
+import { IATopNavConfig } from './models';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('search-menu')
+export class SearchMenu extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Boolean }) hideSearch = false;
+  @property({ type: String }) openMenu = '';
+  @property({ type: Boolean }) searchMenuOpen = false;
+  @property({ type: Boolean }) searchMenuAnimate = false;
+  @property({ type: String }) selectedSearchType = '';
+
+  static get styles() {
+    return searchMenuCSS;
+  }
+
+  firstUpdated() {
+    this.shadowRoot?.addEventListener('keydown', (e) =>
+      this.handleKeyDownEvent(e as KeyboardEvent),
+    );
+  }
+
+  disconnectedCallback() {
+    // Clean up event listener when the element is removed
+    this.shadowRoot?.removeEventListener('keydown', (e) =>
+      this.handleKeyDownEvent(e as KeyboardEvent),
+    );
+  }
+
+  private handleKeyDownEvent(e: KeyboardEvent) {
+    if (!this.shadowRoot) return;
+
+    const searchTypes = this.shadowRoot.querySelectorAll(
+      '.search-menu-inner label input[type=radio]',
+    ) as NodeListOf<HTMLInputElement>;
+
+    const length = searchTypes.length - 1;
+    if (!length) return;
+
+    const searchTypeHandler = (index: number) => {
+      e.preventDefault();
+      const searchType = searchTypes[index];
+      searchType.checked = true;
+      searchType.dispatchEvent(new Event('change'));
+      searchType.focus();
+    };
+
+    if (e.key === 'Home') {
+      searchTypeHandler(0);
+    } else if (e.key === 'End') {
+      searchTypeHandler(length);
+    }
+  }
+
+  selectSearchType(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.selectedSearchType = target.value;
+  }
+
+  searchInChanged(e: InputEvent) {
+    const target = e.target as HTMLInputElement;
+    this.dispatchEvent(
+      new CustomEvent('searchInChanged', {
+        detail: {
+          searchIn: target.value,
+        },
+      }),
+    );
+  }
+
+  get searchTypesTemplate() {
+    const searchTypes = [
+      {
+        label: 'metadata',
+        value: '',
+        isDefault: true,
+      },
+      {
+        label: 'text contents',
+        value: 'TXT',
+      },
+      {
+        label: 'TV news captions',
+        value: 'TV',
+      },
+      {
+        label: 'radio transcripts',
+        value: 'RADIO',
+      },
+      {
+        label: 'archived web sites',
+        value: 'WEB',
+      },
+    ].map(({ value, label, isDefault }) => {
+      if (
+        this.config.hiddenSearchOptions &&
+        this.config.hiddenSearchOptions.includes(value)
+      ) {
+        return html``;
+      }
+      return html`
+        <label @click="${this.selectSearchType}">
+          <input
+            form="nav-search"
+            type="radio"
+            name="sin"
+            value="${value}"
+            ?checked=${isDefault}
+            @change=${this.searchInChanged}
+          />
+          Search ${label}
+        </label>
+      `;
+    });
+
+    return searchTypes;
+  }
+
+  get menuClass() {
+    return this.openMenu === 'search' ? 'open' : 'closed';
+  }
+
+  render() {
+    if (this.hideSearch) {
+      return html``;
+    }
+
+    return html`
+      <div class="menu-wrapper">
+        <div
+          class="search-menu-inner tx-slide ${this.menuClass}"
+          aria-hidden="${makeBooleanString(!this.openMenu)}"
+          aria-expanded="${makeBooleanString(this.searchMenuOpen)}"
+        >
+          ${this.searchTypesTemplate}
+          <a
+            class="advanced-search"
+            href="${formatUrl('/advancedsearch.php', this.baseHost)}"
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.config
+              .eventCategory}|NavAdvancedSearch"
+            >Advanced Search</a
+          >
+        </div>
+      </div>
+    `;
+  }
+}

package/src/signed-out-dropdown.ts

@@ -0,0 +1,11 @@
+import { customElement } from 'lit/decorators.js';
+import DropdownMenu from './dropdown-menu';
+import dropdownMenuCSS from './styles/dropdown-menu';
+import signedOutDropdownStyles from './styles/signed-out-dropdown';
+
+@customElement('signed-out-dropdown')
+export class SignedOutDropdown extends DropdownMenu {
+  static get styles() {
+    return [dropdownMenuCSS, signedOutDropdownStyles];
+  }
+}

package/src/styles/base.ts

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+
+export const subnavListCSS = css`
+  h4 {
+    font-size: 1.6rem;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--activeColor);
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  li + li {
+    padding-top: 1.5rem;
+  }
+
+  @media (min-width: 890px) {
+    h4 {
+      margin: 0 0 1rem 0;
+      font-weight: 100;
+    }
+
+    ul {
+      font-size: 1.3rem;
+    }
+
+    li {
+      padding-bottom: 0.5rem;
+    }
+
+    li + li {
+      padding-top: 0;
+    }
+
+    li a {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+`;

package/src/styles/desktop-subnav.ts

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+
+export default css`
+  ul {
+    position: relative;
+    z-index: 3;
+    padding: 0.8rem 0;
+    margin: 0;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    text-align: center;
+    background: var(--desktopSubnavBg);
+  }
+
+  li {
+    display: inline-block;
+    padding: 0 15px;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--subnavLinkColor);
+  }
+
+  a:hover,
+  a:active,
+  a:focus {
+    color: var(--linkHoverColor);
+  }
+
+  .donate svg {
+    width: 1.6rem;
+    height: 1.6rem;
+    vertical-align: top;
+    fill: #f00;
+  }
+`;