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

package/src/media-menu.js

@@ -1,154 +0,0 @@
-import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
-
-import './media-button.js';
-import mediaMenuCSS from './styles/media-menu.js';
-import formatUrl from './lib/formatUrl.js';
-
-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',
-  },
-];
-
-class MediaMenu extends LitElement {
-  static get styles() {
-    return mediaMenuCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      openMenu: { type: String },
-      selectedMenuOption: { type: String },
-      currentTab: { type: Object },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-    this.selectedMenuOption = '';
-    this.currentTab = {};
-  }
-
-  updated(props) {
-    if (props.has('currentTab')) {
-      const mediaButtons = Array.from(this.shadowRoot.querySelectorAll('media-button'));
-
-      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.blur();
-
-            const newFocusIndex = this.currentTab.moveTo === 'next' ? index + 1 : index - 1;
-            mediaButtons[newFocusIndex].shadowRoot.querySelector('a.menu-item').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, 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>
-    `;
-  }
-}
-
-customElements.define('media-menu', MediaMenu);

package/src/media-subnav.js

@@ -1,112 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import './wayback-slider.js';
-import './more-slider.js';
-import mediaSubnavCSS from './styles/media-subnav.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import formatUrl from './lib/formatUrl.js';
-
-class MediaSubnav extends TrackedElement {
-  static get styles() {
-    return mediaSubnavCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      menu: { type: String },
-      menuItems: { type: Object },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.config = {};
-    this.menu = '';
-    this.menuItems = {};
-
-    // Begin properties not monitored by LitElement
-    this.links = MediaSubnav.defaultLinks;
-  }
-
-  shouldUpdate() {
-    if (this.menuItems) {
-      this.links = this.menuItems;
-    }
-    return true;
-  }
-
-  static get defaultLinks() {
-    return { iconLinks: [], featuredLinks: [], links: [] };
-  }
-
-  analyticsEvent(title) {
-    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="${link.icon}" loading="lazy" />${link.title}</a>
-      `
-    ));
-  }
-
-  renderLinks(category) {
-    return this.links[category].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}>
-        </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('featuredLinks')}
-        </ul>
-      </div>
-      <div class="links top">
-        <h4>Top</h4>
-        <ul>
-          ${this.renderLinks('links')}
-        </ul>
-      </div>
-    `;
-  }
-}
-
-customElements.define('media-subnav', MediaSubnav);

package/src/more-slider.js

@@ -1,33 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import moreSliderCSS from './styles/more-slider.js';
-import formatUrl from './lib/formatUrl.js';
-
-class MoreSlider extends TrackedElement {
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      menuItems: { type: Array },
-    };
-  }
-
-  static get styles() {
-    return moreSliderCSS;
-  }
-
-  analyticsEvent(title) {
-    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>
-    `;
-  }
-}
-
-customElements.define('more-slider', MoreSlider);

package/src/nav-search.js

@@ -1,111 +0,0 @@
-import { nothing, html } from 'https://offshoot.prod.archive.org/lit.js';
-
-import TrackedElement from './tracked-element.js';
-import navSearchCSS from './styles/nav-search.js';
-import icons from './assets/img/icons.js';
-import formatUrl from './lib/formatUrl.js';
-
-class NavSearch extends TrackedElement {
-  static get styles() {
-    return navSearchCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      locationHandler: { type: Object },
-      open: { type: Boolean },
-      openMenu: { type: String },
-      searchIn: { type: String },
-      searchQuery: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.locationHandler = () => { };
-    this.open = false;
-    this.openMenu = '';
-    this.searchIn = '';
-  }
-
-  search(e) {
-    const query = this.shadowRoot.querySelector('[name=query]').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}`, 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, 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>
-    `;
-  }
-}
-
-customElements.define('nav-search', NavSearch);

package/src/primary-nav.js

@@ -1,258 +0,0 @@
-import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import icons from './assets/img/icons.js';
-import './assets/img/hamburger.js';
-import './login-button.js';
-import './nav-search.js';
-import './media-menu.js';
-import logoWordmarkStacked from './assets/img/wordmark-stacked.js';
-import primaryNavCSS from './styles/primary-nav.js';
-import locationHandler from './lib/location-handler.js';
-import formatUrl from './lib/formatUrl.js';
-
-class PrimaryNav extends TrackedElement {
-  static get styles() {
-    return primaryNavCSS;
-  }
-
-  static get properties() {
-    return {
-      mediaBaseHost: { type: String },
-      baseHost: { type: String },
-      hideSearch: { type: Boolean },
-      config: { type: Object },
-      openMenu: { type: String },
-      screenName: { type: String },
-      searchIn: { type: String },
-      searchQuery: { type: String },
-      secondIdentitySlotMode: { type: String },
-      selectedMenuOption: { type: String },
-      signedOutMenuOpen: { type: Boolean },
-      userMenuOpen: { type: Boolean },
-      username: { type: String },
-      userProfileImagePath: { type: String },
-      currentTab: { type: Object },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-    this.searchIn = '';
-    this.selectedMenuOption = '';
-    this.signedOutMenuOpen = false;
-    this.userMenuOpen = false;
-    this.mediaBaseHost = 'https://archive.org';
-    this.secondIdentitySlotMode = '';
-    this.currentTab = {};
-  }
-
-  toggleMediaMenu(e) {
-    this.trackClick(e);
-    this.dispatchEvent(
-      new CustomEvent('menuToggled', {
-        detail: {
-          menuName: 'media',
-        },
-      }),
-    );
-  }
-
-  toggleSearchMenu(e) {
-    this.trackClick(e);
-    this.dispatchEvent(
-      new CustomEvent('menuToggled', {
-        detail: {
-          menuName: 'search',
-        },
-      }),
-    );
-  }
-
-  toggleUserMenu(e) {
-    this.trackClick(e);
-    this.dispatchEvent(
-      new CustomEvent('menuToggled', {
-        detail: {
-          menuName: 'user',
-        },
-      }),
-    );
-  }
-
-  updated(props) {
-    if (props.has('currentTab')) {
-      // early return
-      if (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.focus();
-        }
-      } else if (this.currentTab.moveTo === 'next') {
-        if (this.shadowRoot.querySelector('.user-menu')) {
-          this.shadowRoot.querySelector('.user-menu').focus();
-        } else {
-          this.shadowRoot.querySelector('login-button').shadowRoot.querySelectorAll('span a')[0]?.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', this.baseHost)}>
-        ${icons.donateUnpadded}
-        <span class="sr-only">"Donate to the archive"</span>
-      </a>
-    `;
-  }
-
-  get uploadButtonTemplate() {
-    return html`
-      <a href="${formatUrl('/create', 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' : nothing}>
-        <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('/', 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>
-    `;
-  }
-}
-
-customElements.define('primary-nav', PrimaryNav);