@internetarchive/ia-topnav 1.1.19 → 1.1.21-alpha

package/src/login-button.js

@@ -1,79 +1,79 @@
-import { html } from 'https://offshoot.ux.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';
-
-class LoginButton extends TrackedElement {
-  static get styles() {
-    return loginButtonCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      openMenu: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-  }
-
-  get signupPath() {
-    return formatUrl('/account/signup', this.baseHost);
-  }
-
-  get loginPath() {
-    return formatUrl('/account/login', this.baseHost);
-  }
-
-  get analyticsEvent() {
-    return `${this.config.eventCategory}|NavLoginIcon`;
-  }
-
-  get menuOpened() {
-    return this.openMenu === 'login';
-  }
-
-  get avatarClass() {
-    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
-  }
-
-  toggleDropdown(e) {
-    e.preventDefault();
-    this.trackClick(e);
-    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
-    this.dispatchEvent(new CustomEvent('menuToggled', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        menuName: 'login'
-      }
-    }));
-  }
-
-  render() {
-    return html`
-      <div class="logged-out-toolbar">
-        <a
-          class="${this.avatarClass}"
-          @click=${this.toggleDropdown}
-          data-event-click-tracking="${this.analyticsEvent}"
-        >
-          ${icons.user}
-        </a>
-        <span>
-        <a href="${this.signupPath}">Sign up</a>
-        |
-        <a href="${this.loginPath}">Log in</a>
-        </span>
-      </div>
-    `;
-  }
-}
-
-customElements.define('login-button', LoginButton);
+import { html } from 'https://offshoot.ux.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';
+
+class LoginButton extends TrackedElement {
+  static get styles() {
+    return loginButtonCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      openMenu: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.openMenu = '';
+  }
+
+  get signupPath() {
+    return formatUrl('/account/signup', this.baseHost);
+  }
+
+  get loginPath() {
+    return formatUrl('/account/login', this.baseHost);
+  }
+
+  get analyticsEvent() {
+    return `${this.config.eventCategory}|NavLoginIcon`;
+  }
+
+  get menuOpened() {
+    return this.openMenu === 'login';
+  }
+
+  get avatarClass() {
+    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+  }
+
+  toggleDropdown(e) {
+    e.preventDefault();
+    this.trackClick(e);
+    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
+    this.dispatchEvent(new CustomEvent('menuToggled', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        menuName: 'login'
+      }
+    }));
+  }
+
+  render() {
+    return html`
+      <div class="logged-out-toolbar">
+        <a
+          class="${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+        >
+          ${icons.user}
+        </a>
+        <span>
+        <a href="${this.signupPath}">Sign up</a>
+        |
+        <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('login-button', LoginButton);

package/src/media-button.js

@@ -1,113 +1,113 @@
-import { html } from 'https://offshoot.ux.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';
-
-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() {
-    return icons;
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.icon = '';
-    this.href = '';
-    this.label = '';
-    this.mediatype = '';
-    this.openMenu = '';
-    this.selected = false;
-    this.followable = false;
-  }
-
-  onClick(e) {
-    this.trackClick(e);
-    e.preventDefault();
-    // On desktop viewport widths, the media subnav is always visible. To
-    // ensure the media subnav is open on mobile if the viewport is
-    // resized, the openMenu needs to be set to 'media'.
-    if (this.openMenu !== 'media') {
-      this.dispatchMenuToggledEvent();
-    }
-    this.dispatchMediaTypeSelectedEvent();
-  }
-
-  dispatchMenuToggledEvent() {
-    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
-      }
-    }));
-  }
-
-  get buttonClass() {
-    return this.selected ? 'selected' : '';
-  }
-
-  get tooltipPrefix() {
-    return this.selected ? 'Collapse' : 'Expand';
-  }
-
-  get iconClass() {
-    return this.selected ? 'active' : '';
-  }
-
-  get analyticsEvent() {
-    return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;
-  }
-
-  get menuItem() {
-    return html`
-      <span class="icon ${this.iconClass}">
-        ${MediaButton.icons[this.icon]}
-      </span>
-      <span class="label">${this.label}</span>
-    `;
-  }
-
-  render() {
-    return html`
-      <a
-        href="${this.href}"
-        class="menu-item ${this.mediatype} ${this.buttonClass}"
-        @click=${this.followable ? this.trackClick : this.onClick}
-        data-event-click-tracking="${this.analyticsEvent}"
-        title="${this.tooltipPrefix} ${this.mediatype} menu"
-      >
-        ${this.menuItem}
-      </a>
-    `;
-  }
-}
-
-customElements.define('media-button', MediaButton);
+import { html } from 'https://offshoot.ux.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';
+
+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() {
+    return icons;
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.icon = '';
+    this.href = '';
+    this.label = '';
+    this.mediatype = '';
+    this.openMenu = '';
+    this.selected = false;
+    this.followable = false;
+  }
+
+  onClick(e) {
+    this.trackClick(e);
+    e.preventDefault();
+    // On desktop viewport widths, the media subnav is always visible. To
+    // ensure the media subnav is open on mobile if the viewport is
+    // resized, the openMenu needs to be set to 'media'.
+    if (this.openMenu !== 'media') {
+      this.dispatchMenuToggledEvent();
+    }
+    this.dispatchMediaTypeSelectedEvent();
+  }
+
+  dispatchMenuToggledEvent() {
+    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
+      }
+    }));
+  }
+
+  get buttonClass() {
+    return this.selected ? 'selected' : '';
+  }
+
+  get tooltipPrefix() {
+    return this.selected ? 'Collapse' : 'Expand';
+  }
+
+  get iconClass() {
+    return this.selected ? 'active' : '';
+  }
+
+  get analyticsEvent() {
+    return `${this.config.eventCategory}|NavMenu${toSentenceCase(this.mediatype)}`;
+  }
+
+  get menuItem() {
+    return html`
+      <span class="icon ${this.iconClass}">
+        ${MediaButton.icons[this.icon]}
+      </span>
+      <span class="label">${this.label}</span>
+    `;
+  }
+
+  render() {
+    return html`
+      <a
+        href="${this.href}"
+        class="menu-item ${this.mediatype} ${this.buttonClass}"
+        @click=${this.followable ? this.trackClick : this.onClick}
+        data-event-click-tracking="${this.analyticsEvent}"
+        title="${this.tooltipPrefix} ${this.mediatype} menu"
+      >
+        ${this.menuItem}
+      </a>
+    `;
+  }
+}
+
+customElements.define('media-button', MediaButton);

package/src/media-menu.js

@@ -1,133 +1,133 @@
-import { LitElement, html } from 'https://offshoot.ux.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: '/web/',
-    label: 'Wayback Machine',
-  },
-  {
-    icon: 'texts',
-    menu: 'texts',
-    href: '/details/texts',
-    label: 'Books',
-  },
-  {
-    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 },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-    this.selectedMenuOption = '';
-  }
-
-  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}
-          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-hidden="${!this.menuOpened}"
-            aria-expanded="${this.menuOpened}"
-          >
-            <div class="menu-group">
-              ${this.mediaMenuOptionsTemplate}
-            </div>
-          </nav>
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('media-menu', MediaMenu);
+import { LitElement, html } from 'https://offshoot.ux.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: '/web/',
+    label: 'Wayback Machine',
+  },
+  {
+    icon: 'texts',
+    menu: 'texts',
+    href: '/details/texts',
+    label: 'Books',
+  },
+  {
+    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 },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.openMenu = '';
+    this.selectedMenuOption = '';
+  }
+
+  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}
+          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-hidden="${!this.menuOpened}"
+            aria-expanded="${this.menuOpened}"
+          >
+            <div class="menu-group">
+              ${this.mediaMenuOptionsTemplate}
+            </div>
+          </nav>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('media-menu', MediaMenu);