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

package/src/lib/makeBooleanString.ts

@@ -0,0 +1,12 @@
+export function makeBooleanFromString(value: string): 'true' | 'false' {
+  const lowerValue = value.toLowerCase();
+  let booleanValue: boolean = false;
+  if (lowerValue === 'true' || lowerValue === '1') {
+    booleanValue = true;
+  }
+  return makeBooleanString(booleanValue);
+}
+
+export function makeBooleanString(value: boolean): 'true' | 'false' {
+  return value ? 'true' : 'false';
+}

package/src/lib/query-handler.ts

@@ -0,0 +1,7 @@
+/* istanbul ignore file */
+
+export default {
+  performQuery(query: string) {
+    window.location.href = `https://web.archive.org/web/*/${query}`;
+  },
+};

package/src/lib/toSentenceCase.ts

@@ -0,0 +1,10 @@
+const toSentenceCase = (phrase: string): string => {
+  const words = phrase.split(' ');
+  const lastWord = words.pop();
+  const capitalizedWord = `${lastWord?.substr(0, 1).toUpperCase()}${lastWord?.substr(1)}`;
+  return words.length
+    ? toSentenceCase(`${words.join(' ')}${capitalizedWord}`)
+    : capitalizedWord;
+};
+
+export default toSentenceCase;

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

@@ -1,26 +1,22 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import icons from './assets/img/icons.js';
-import loginButtonCSS from './styles/login-button.js';
-import formatUrl from './lib/formatUrl.js';
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import loginButtonCSS from './styles/login-button';
+import formatUrl from './lib/formatUrl';
+import { customElement, property, state } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
 
-class LoginButton extends TrackedElement {
-  static get styles() {
-    return loginButtonCSS;
-  }
+@customElement('login-button')
+export class LoginButton extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
 
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      openMenu: { type: String },
-    };
-  }
+  @state() private dropdownTabIndex = '';
 
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
+  static get styles() {
+    return loginButtonCSS;
   }
 
   get signupPath() {
@@ -32,7 +28,7 @@ class LoginButton extends TrackedElement {
   }
 
   get analyticsEvent() {
-    return `${this.config.eventCategory}|NavLoginIcon`;
+    return `${this.config?.eventCategory}|NavLoginIcon`;
   }
 
   get menuOpened() {
@@ -43,17 +39,19 @@ class LoginButton extends TrackedElement {
     return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
   }
 
-  toggleDropdown(e) {
+  toggleDropdown(e: Event) {
     e.preventDefault();
     this.trackClick(e);
     this.dropdownTabIndex = this.menuOpened ? '' : '-1';
-    this.dispatchEvent(new CustomEvent('menuToggled', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        menuName: 'login'
-      }
-    }));
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          menuName: 'login',
+        },
+      }),
+    );
   }
 
   render() {
@@ -75,5 +73,3 @@ class LoginButton extends TrackedElement {
     `;
   }
 }
-
-customElements.define('login-button', LoginButton);

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

@@ -1,44 +1,32 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import icons from './assets/img/icons.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import mediaButtonCSS from './styles/media-button.js';
+import { html, TemplateResult } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import toSentenceCase from './lib/toSentenceCase';
+import mediaButtonCSS from './styles/media-button';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('media-button')
+export class MediaButton extends TrackedElement {
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) icon = '';
+  @property({ type: String }) href = '';
+  @property({ type: String }) label = '';
+  @property({ type: String }) mediatype = '';
+  @property({ type: String }) openMenu = '';
+  @property({ type: Boolean }) selected = false;
+  @property({ type: Boolean }) followable = false;
 
-class MediaButton extends TrackedElement {
   static get styles() {
     return mediaButtonCSS;
   }
 
-  static get properties() {
-    return {
-      config: { type: Object },
-      icon: { type: String },
-      href: { type: String },
-      label: { type: String },
-      mediatype: { type: String },
-      openMenu: { type: String },
-      selected: { type: Boolean },
-      followable: { type: Boolean },
-    };
-  }
-
-  static get icons() {
+  static get icons(): Record<string, TemplateResult> {
     return icons;
   }
 
-  constructor() {
-    super();
-    this.config = {};
-    this.icon = '';
-    this.href = '';
-    this.label = '';
-    this.mediatype = '';
-    this.openMenu = '';
-    this.selected = false;
-    this.followable = false;
-  }
-
-  onClick(e) {
+  onClick(e: Event) {
     this.trackClick(e);
     e.preventDefault();
     // On desktop viewport widths, the media subnav is always visible. To
@@ -51,23 +39,27 @@ class MediaButton extends TrackedElement {
   }
 
   dispatchMenuToggledEvent() {
-    this.dispatchEvent(new CustomEvent('menuToggled', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        menuName: 'media'
-      }
-    }));
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          menuName: 'media',
+        },
+      }),
+    );
   }
 
   dispatchMediaTypeSelectedEvent() {
-    this.dispatchEvent(new CustomEvent('mediaTypeSelected', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        mediatype: this.mediatype
-      }
-    }));
+    this.dispatchEvent(
+      new CustomEvent('mediaTypeSelected', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          mediatype: this.mediatype,
+        },
+      }),
+    );
   }
 
   get buttonClass() {
@@ -109,5 +101,3 @@ class MediaButton extends TrackedElement {
     `;
   }
 }
-
-customElements.define('media-button', MediaButton);

package/src/media-menu.ts

@@ -0,0 +1,143 @@
+import { LitElement, PropertyValues, html } from 'lit';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/formatUrl';
+import './media-button';
+import { MediaButton } from './media-button';
+import { IATopNavConfig } from './models';
+import mediaMenuCSS from './styles/media-menu';
+
+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',
+  },
+];
+
+@customElement('media-menu')
+export class MediaMenu extends LitElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
+  @property({ type: String }) selectedMenuOption = '';
+  @property({ type: Object }) currentTab: { moveTo: string } | undefined;
+
+  @queryAll('media-button') mediaButtons?: MediaButton[];
+
+  static get styles() {
+    return mediaMenuCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('currentTab')) {
+      const mediaButtons = Array.from(this.mediaButtons ?? []);
+
+      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 as HTMLElement).blur();
+
+            const newFocusIndex =
+              this.currentTab?.moveTo === 'next' ? index + 1 : index - 1;
+            (
+              mediaButtons[newFocusIndex]?.shadowRoot?.querySelector(
+                'a.menu-item',
+              ) as HTMLElement
+            ).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 as string & Location, 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>
+    `;
+  }
+}

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

@@ -1,47 +1,48 @@
-import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
-import './media-subnav.js';
-import mediaSliderCSS from './styles/media-slider.js';
-import KeyboardNavigation from './lib/keyboard-navigation.js';
+import { LitElement, PropertyValues, html } from 'lit';
+import './media-subnav';
+import mediaSliderCSS from './styles/media-slider';
+import KeyboardNavigation from './lib/keyboard-navigation';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavMenuConfig } from './models';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
 
-class MediaSlider extends LitElement {
-  static get styles() {
-    return mediaSliderCSS;
-  }
+@customElement('media-slider')
+export class MediaSlider extends LitElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Boolean }) mediaSliderOpen = false;
+  @property({ type: Object }) menus: IATopNavMenuConfig = buildTopNavMenus();
+  @property({ type: String }) selectedMenuOption = 'texts';
 
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      mediaSliderOpen: { type: Boolean },
-      menus: { type: Object },
-      selectedMenuOption: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
+  private previousKeydownListener: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ((this: HTMLElement, ev: KeyboardEvent) => any) | undefined;
 
-    this.config = {};
-    this.mediaSliderOpen = false;
-    this.menus = {};
-    this.selectedMenuOption = 'texts';
+  static get styles() {
+    return mediaSliderCSS;
   }
 
-  updated(props) {
+  updated(props: PropertyValues) {
     if (props.has('selectedMenuOption') && this.selectedMenuOption) {
-      const container = this.shadowRoot?.querySelector('.has-focused')?.shadowRoot;
-  
+      const container = this.shadowRoot?.querySelector('.has-focused'); //?.shadowRoot;
+
       if (container) {
-        const keyboardNavigation = new KeyboardNavigation(container, this.selectedMenuOption);
+        const keyboardNavigation = new KeyboardNavigation(
+          container as HTMLElement,
+          this.selectedMenuOption,
+        );
         this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
-        this.removeEventListener('keydown', this.previousKeydownListener);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
         this.previousKeydownListener = keyboardNavigation.handleKeyDown;
       }
     }
   }
 
   shouldUpdate() {
-    const scrollPane = this.shadowRoot ? this.shadowRoot.querySelector('.information-menu') : null;
+    const scrollPane = this.shadowRoot
+      ? this.shadowRoot.querySelector('.information-menu')
+      : null;
 
     if (scrollPane) {
       scrollPane.scrollTop = 0;
@@ -49,7 +50,6 @@ class MediaSlider extends LitElement {
     return true;
   }
 
-
   render() {
     const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';
 
@@ -61,51 +61,65 @@ class MediaSlider extends LitElement {
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'audio' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'audio'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="audio"
                 .menuItems=${this.menus.audio}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'images' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'images'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="images"
                 .menuItems=${this.menus.images}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'software' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'software'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="software"
                 .menuItems=${this.menus.software}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'texts' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'texts'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="texts"
                 .menuItems=${this.menus.texts}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'video' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'video'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="video"
                 .menuItems=${this.menus.video}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'web' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'web'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="web"
                 .menuItems=${this.menus.web}
               ></media-subnav>
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                class="${this.selectedMenuOption === 'more' ? 'has-focused' : 'hidden'}"
+                class="${this.selectedMenuOption === 'more'
+                  ? 'has-focused'
+                  : 'hidden'}"
                 menu="more"
-                .menuItems=${this.menus.more}
+                .menuItems=${this.menus.web}
               ></media-subnav>
             </div>
           </div>
@@ -114,5 +128,3 @@ class MediaSlider extends LitElement {
     `;
   }
 }
-
-customElements.define('media-slider', MediaSlider);

package/src/media-subnav.ts

@@ -0,0 +1,132 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import TrackedElement from './tracked-element';
+import './wayback-slider';
+import './more-slider';
+import mediaSubnavCSS from './styles/media-subnav';
+import toSentenceCase from './lib/toSentenceCase';
+import formatUrl from './lib/formatUrl';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavLink, IATopNavMediaMenu } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('media-subnav')
+export class MediaSubnav extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) menu:
+    | ''
+    | 'web'
+    | 'more'
+    | 'audio'
+    | 'images'
+    | 'software'
+    | 'texts'
+    | 'video' = '';
+  @property({ type: Object }) menuItems: IATopNavMediaMenu =
+    MediaSubnav.defaultLinks;
+
+  private links: IATopNavMediaMenu = MediaSubnav.defaultLinks;
+
+  static get styles() {
+    return mediaSubnavCSS;
+  }
+
+  shouldUpdate() {
+    if (this.menuItems) {
+      this.links = this.menuItems;
+    }
+    return true;
+  }
+
+  static get defaultLinks(): IATopNavMediaMenu {
+    return {
+      heading: '',
+      iconLinks: [],
+      featuredLinks: [],
+      links: [],
+      mobileAppsLinks: [],
+      browserExtensionsLinks: [],
+      archiveItLinks: [],
+    };
+  }
+
+  analyticsEvent(title: string) {
+    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="${ifDefined(link.icon)}" loading="lazy" />${link.title}</a
+        >
+      `,
+    );
+  }
+
+  renderLinks(links: IATopNavLink[]) {
+    return links.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(this.links.featuredLinks)}
+        </ul>
+      </div>
+      <div class="links top">
+        <h4>Top</h4>
+        <ul>
+          ${this.renderLinks(this.links.links)}
+        </ul>
+      </div>
+    `;
+  }
+}