@internetarchive/ia-topnav 1.1.30 → 1.1.31-alpha.0

package/src/nav-search.js

@@ -1,125 +1,125 @@
-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 = '';
-    this.inSearchBeta = false;
-
-    this.initSearchBetaOptIn();
-  }
-
-  updated() {
-    if (this.open) {
-      this.shadowRoot.querySelector('[name=query]').focus();
-    }
-    return true;
-  }
-
-  initSearchBetaOptIn() {
-    this.inSearchBeta = !!window.localStorage?.getItem('SearchBeta-opt-in') ||
-      !!window.localStorage?.getItem('SearchBeta-launched');
-  }
-
-  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 this.inSearchBeta ? '/search' : '/search.php';
-  }
-
-  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"
-            @focus=${this.toggleSearchMenu}
-            value=${this.searchQuery || ''}
-          />
-          ${this.searchInsideInput}
-          <button
-            type="submit"
-            class="search"
-            data-event-click-tracking="${this.config.eventCategory}|NavSearchClose"
-          >
-            ${icons.search}
-          </button>
-        </form>
-      </div>
-    `;
-  }
-}
-
-customElements.define('nav-search', NavSearch);
+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 = '';
+    this.inSearchBeta = false;
+
+    this.initSearchBetaOptIn();
+  }
+
+  updated() {
+    if (this.open) {
+      this.shadowRoot.querySelector('[name=query]').focus();
+    }
+    return true;
+  }
+
+  initSearchBetaOptIn() {
+    this.inSearchBeta = !!window.localStorage?.getItem('SearchBeta-opt-in') ||
+      !!window.localStorage?.getItem('SearchBeta-launched');
+  }
+
+  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 this.inSearchBeta ? '/search' : '/search.php';
+  }
+
+  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"
+            @focus=${this.toggleSearchMenu}
+            value=${this.searchQuery || ''}
+          />
+          ${this.searchInsideInput}
+          <button
+            type="submit"
+            class="search"
+            data-event-click-tracking="${this.config.eventCategory}|NavSearchClose"
+          >
+            ${icons.search}
+          </button>
+        </form>
+      </div>
+    `;
+  }
+}
+
+customElements.define('nav-search', NavSearch);

package/src/primary-nav.js

@@ -1,203 +1,215 @@
-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 },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-    this.searchIn = '';
-    this.selectedMenuOption = '';
-    this.signedOutMenuOpen = false;
-    this.userMenuOpen = false;
-    this.mediaBaseHost = 'https://archive.org';
-    this.secondIdentitySlotMode = '';
-  }
-
-  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',
-        },
-      }),
-    );
-  }
-
-  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 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>
-        <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>
-        ${this.searchMenu}
-        <a href="${formatUrl('/create', this.baseHost)}" class="upload">
-          ${icons.upload}
-          <span>Upload</span>
-        </a>
-        <div class="user-info">
-          ${this.username ? this.userIcon : this.loginIcon}
-        </div>
-        <media-menu
-          .baseHost=${this.baseHost}
-          .config=${this.config}
-          ?mediaMenuAnimate="${this.mediaMenuAnimate}"
-          tabindex="${mediaMenuTabIndex}"
-          .selectedMenuOption=${this.selectedMenuOption}
-          .openMenu=${this.openMenu}
-        ></media-menu>
-        <button
-          class="hamburger"
-          @click="${this.toggleMediaMenu}"
-          tabindex="1"
-          data-event-click-tracking="${this.config.eventCategory}|NavHamburger"
-          title="Open main menu"
-        >
-          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
-        </button>
-      </nav>
-    `;
-  }
-}
-
-customElements.define('primary-nav', PrimaryNav);
+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 },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.openMenu = '';
+    this.searchIn = '';
+    this.selectedMenuOption = '';
+    this.signedOutMenuOpen = false;
+    this.userMenuOpen = false;
+    this.mediaBaseHost = 'https://archive.org';
+    this.secondIdentitySlotMode = '';
+  }
+
+  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',
+        },
+      }),
+    );
+  }
+
+  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)}>
+        <span class="icon">
+        ${icons.donate}
+      </span>
+      <span class="label">"Donate to the archive"</span>
+      </a>
+    `;
+  }
+
+  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}>
+        <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>
+        ${this.mobileDonateHeart}
+        ${this.searchMenu}
+        <a href="${formatUrl('/create', this.baseHost)}" class="upload">
+          ${icons.upload}
+          <span>Upload</span>
+        </a>
+        <div class="user-info">
+          ${this.username ? this.userIcon : this.loginIcon}
+        </div>
+        <media-menu
+          .baseHost=${this.baseHost}
+          .config=${this.config}
+          ?mediaMenuAnimate="${this.mediaMenuAnimate}"
+          tabindex="${mediaMenuTabIndex}"
+          .selectedMenuOption=${this.selectedMenuOption}
+          .openMenu=${this.openMenu}
+        ></media-menu>
+        <button
+          class="hamburger"
+          @click="${this.toggleMediaMenu}"
+          tabindex="1"
+          data-event-click-tracking="${this.config.eventCategory}|NavHamburger"
+          title="Open main menu"
+        >
+          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
+        </button>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('primary-nav', PrimaryNav);