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

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/formatUrl';
+import { IATopNavConfig } from './models';
+import { makeBooleanString } from './lib/makeBooleanString';
+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.js → base.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export const subnavListCSS = css`
   h4 {
@@ -31,7 +31,7 @@ export const subnavListCSS = css`
     }
 
     li {
-      padding-bottom: .5rem;
+      padding-bottom: 0.5rem;
     }
 
     li + li {

package/src/styles/{desktop-subnav.js → desktop-subnav.ts}

@@ -1,10 +1,10 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   ul {
     position: relative;
     z-index: 3;
-    padding: .8rem 0;
+    padding: 0.8rem 0;
     margin: 0;
     font-size: 1.2rem;
     text-transform: uppercase;

package/src/styles/{dropdown-menu.js → dropdown-menu.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   .nav-container {
@@ -134,7 +134,9 @@ export default css`
     a {
       padding: 0.5rem 2rem;
       color: var(--inverseTextColor);
-      transition: background 0.1s ease-out, color 0.1s ease-out;
+      transition:
+        background 0.1s ease-out,
+        color 0.1s ease-out;
     }
 
     .info-item {

package/src/styles/{ia-topnav.js → ia-topnav.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   :host {

package/src/styles/{login-button.js → login-button.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   .dropdown-toggle {

package/src/styles/{media-button.js → media-button.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   a {
@@ -97,7 +97,7 @@ export default css`
 
     .web:after {
       display: none;
-      content: "web";
+      content: 'web';
     }
     .donate,
     .more {

package/src/styles/{media-menu.js → media-menu.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   :host {

package/src/styles/{media-slider.js → media-slider.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   .media-slider-container {

package/src/styles/media-subnav.ts

@@ -0,0 +1,159 @@
+import { css } from 'lit';
+import { subnavListCSS } from './base';
+
+export default [
+  subnavListCSS,
+  css`
+    img {
+      display: block;
+      width: 90px;
+      height: 90px;
+      margin: 0 auto 1rem auto;
+      border-radius: 45px;
+    }
+
+    h3 {
+      margin-top: 0;
+      font-size: 1.8rem;
+    }
+
+    .icon-links {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+      justify-content: space-evenly;
+      text-align: center;
+    }
+
+    .icon-links a {
+      display: inline-block;
+      width: 12rem;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-align: center;
+      text-overflow: ellipsis;
+    }
+
+    .icon-links a + a {
+      margin-left: 2rem;
+    }
+
+    .featured h4 {
+      display: none;
+    }
+
+    @media (min-width: 890px) {
+      :host {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-columns: 40% 20% 40%;
+        grid-template-columns: 40% 20% 40%;
+      }
+
+      .wayback-search {
+        -ms-grid-column: 1;
+        -ms-grid-column-span: 3;
+        grid-column: 1 / 4;
+      }
+
+      h3 {
+        display: none;
+      }
+
+      .icon-links {
+        -ms-grid-column: 1;
+      }
+
+      .icon-links a {
+        padding-top: 3.5rem;
+        max-width: 16rem;
+      }
+
+      .links {
+        padding: 0 1.5rem;
+      }
+
+      .featured {
+        -ms-grid-column: 2;
+      }
+
+      .featured h4 {
+        display: block;
+      }
+
+      .top {
+        -ms-grid-column: 3;
+      }
+
+      .top ul {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-columns: 50% 3rem 50%;
+        grid-template-columns: 50% 50%;
+        -ms-grid-rows: (auto) [7];
+        grid-template-rows: repeat(7, auto);
+        grid-column-gap: 3rem;
+        grid-auto-flow: column;
+      }
+      .top ul > *:nth-child(1) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(2) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(3) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(4) {
+        -ms-grid-row: 4;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(5) {
+        -ms-grid-row: 5;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(6) {
+        -ms-grid-row: 6;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(7) {
+        -ms-grid-row: 7;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(8) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(9) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(10) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(11) {
+        -ms-grid-row: 4;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(12) {
+        -ms-grid-row: 5;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(13) {
+        -ms-grid-row: 6;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(14) {
+        -ms-grid-row: 7;
+        -ms-grid-column: 3;
+      }
+    }
+  `,
+];

package/src/styles/{more-slider.js → more-slider.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   ul {

package/src/styles/{nav-search.js → nav-search.ts}

@@ -1,7 +1,7 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
-  input[type="text"] {
+  input[type='text'] {
     color: var(--grey13);
   }
 

package/src/styles/{primary-nav.js → primary-nav.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   button:focus,
@@ -138,7 +138,7 @@ export default css`
 
   .upload svg {
     height: 3rem;
-    width: 3rem; 
+    width: 3rem;
   }
 
   .screen-name {
@@ -292,7 +292,6 @@ export default css`
       float: right;
       margin-left: 1rem;
     }
-
   }
 
   @media (min-width: 990px) {

package/src/styles/{save-page-form.js → save-page-form.ts}

@@ -1,30 +1,30 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   div {
     display: grid;
     grid-template-columns: 1fr auto;
-    grid-column-gap: .8rem;
+    grid-column-gap: 0.8rem;
     margin: 0;
     padding: 0;
     border: none;
   }
 
-  input[type="text"] {
+  input[type='text'] {
     width: 100%;
     height: 3rem;
     box-sizing: border-box;
     border: 1px solid var(--savePageInputBorder);
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     color: var(--grey13);
     font-size: inherit;
   }
 
-  input[type="submit"] {
+  input[type='submit'] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    padding: .4rem .8rem;
+    padding: 0.4rem 0.8rem;
     font: normal 1.3rem var(--themeFontFamily);
     text-transform: uppercase;
     color: var(--savePageSubmitText);
@@ -36,7 +36,7 @@ export default css`
 
   .error {
     display: none;
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     font-weight: bold;
     color: var(--savePageErrorText);
   }

package/src/styles/{search-menu.js → search-menu.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   .menu-wrapper {

package/src/styles/{signed-out-dropdown.js → signed-out-dropdown.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   @media (min-width: 890px) {

package/src/styles/{user-menu.js → user-menu.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   @media (min-width: 890px) {

package/src/styles/{wayback-search.js → wayback-search.ts}

@@ -1,4 +1,4 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
+import { css } from 'lit';
 
 export default css`
   form {
@@ -11,14 +11,14 @@ export default css`
   }
 
   fieldset {
-    padding: .5rem;
+    padding: 0.5rem;
     border-radius: 5px;
     box-shadow: none;
   }
 
   input {
     padding-left: 3rem;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
     font-size: 1.4rem;
     border-color: #bca38e;
     background: #fff;

package/src/styles/wayback-slider.ts

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+import { subnavListCSS } from './base';
+
+export default [
+  subnavListCSS,
+  css`
+    @media (min-width: 890px) {
+      :host {
+        display: block;
+        grid-column: 1 / 4;
+        padding: 0 1.5rem;
+      }
+
+      h4 {
+        margin-top: 0;
+        font: normal 100 1.6rem var(--themeFontFamily);
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
+        /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
+        grid-column-gap: 2.5rem;
+      }
+
+      .link-lists {
+        display: grid;
+        grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
+        grid-column-gap: 2.5rem;
+      }
+    }
+  `,
+];

package/src/tracked-element.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+
+export default class TrackedElement extends LitElement {
+  trackClick(e: Event) {
+    const event = (e.currentTarget as HTMLElement)?.dataset?.eventClickTracking;
+    if (event === undefined) return;
+    this.dispatchEvent(
+      new CustomEvent('trackClick', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+        },
+      }),
+    );
+  }
+
+  trackSubmit(e: Event) {
+    const event = (e.currentTarget as HTMLElement)?.dataset
+      ?.eventSubmitTracking;
+    if (event === undefined) return;
+    this.dispatchEvent(
+      new CustomEvent('trackSubmit', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+        },
+      }),
+    );
+  }
+}

package/src/user-menu.ts

@@ -0,0 +1,57 @@
+import { CSSResult, html, PropertyValues } from 'lit';
+import DropdownMenu from './dropdown-menu';
+import userMenuCSS from './styles/user-menu';
+import dropdownStyles from './styles/dropdown-menu';
+import KeyboardNavigation from './lib/keyboard-navigation';
+import { customElement, property } from 'lit/decorators.js';
+import { makeBooleanFromString } from './lib/makeBooleanString';
+
+@customElement('user-menu')
+export default class UserMenu extends DropdownMenu {
+  @property({ type: String }) username = '';
+  @property({ type: String }) screenName = '';
+
+  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (this: HTMLElement, ev: KeyboardEvent) => any;
+
+  static get styles(): CSSResult[] {
+    return [dropdownStyles, userMenuCSS];
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('open') && this.open) {
+      const container = this.shadowRoot?.querySelector(
+        '.nav-container',
+      ) as HTMLElement;
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(
+          container,
+          'usermenu',
+        );
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${makeBooleanFromString(this.ariaHidden ?? 'true')}"
+          aria-expanded="${makeBooleanFromString(this.ariaExpanded ?? 'false')}"
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}

package/src/wayback-search.ts

@@ -0,0 +1,10 @@
+import WaybackSearch from '@internetarchive/ia-wayback-search';
+import waybackSearchCSS from './styles/wayback-search';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('wayback-search')
+export default class NavWaybackSearch extends WaybackSearch {
+  static get styles() {
+    return [WaybackSearch.styles, waybackSearchCSS];
+  }
+}