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

package/src/desktop-subnav.js

@@ -1,45 +1,45 @@
-import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import desktopSubnavCSS from './styles/desktop-subnav.js';
-import icons from './assets/img/icons.js';
-import formatUrl from './lib/formatUrl.js';
-
-class DesktopSubnav extends TrackedElement {
-  static get styles() {
-    return desktopSubnavCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      menuItems: { type: Array },
-    };
-  }
-
-  get listItems() {
-    return this.menuItems ? this.menuItems.map(link => (
-      html`
-        <li>
-          <a class="${link.title.toLowerCase()}" href="${formatUrl(link.url, this.baseHost)}">${link.title}${DesktopSubnav.iconFor(link.title)}</a>
-        </li>
-      `
-    )) : nothing;
-  }
-
-  static iconFor(title) {
-    const subnavIcons = {
-      Donate: icons.donate
-    };
-    return subnavIcons[title] ? subnavIcons[title] : html``;
-  }
-
-  render() {
-    return html`
-      <ul>
-        ${this.listItems}
-      </ul>
-    `;
-  }
-}
-
-customElements.define('desktop-subnav', DesktopSubnav);
+import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import desktopSubnavCSS from './styles/desktop-subnav.js';
+import icons from './assets/img/icons.js';
+import formatUrl from './lib/formatUrl.js';
+
+class DesktopSubnav extends TrackedElement {
+  static get styles() {
+    return desktopSubnavCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      menuItems: { type: Array },
+    };
+  }
+
+  get listItems() {
+    return this.menuItems ? this.menuItems.map(link => (
+      html`
+        <li>
+          <a class="${link.title.toLowerCase()}" href="${formatUrl(link.url, this.baseHost)}">${link.title}${DesktopSubnav.iconFor(link.title)}</a>
+        </li>
+      `
+    )) : nothing;
+  }
+
+  static iconFor(title) {
+    const subnavIcons = {
+      Donate: icons.donate
+    };
+    return subnavIcons[title] ? subnavIcons[title] : html``;
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.listItems}
+      </ul>
+    `;
+  }
+}
+
+customElements.define('desktop-subnav', DesktopSubnav);

package/src/dropdown-menu.js

@@ -1,98 +1,102 @@
-import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import dropdownMenuCSS from './styles/dropdown-menu.js';
-import formatUrl from './lib/formatUrl.js';
-
-class DropdownMenu extends TrackedElement {
-  static get styles() {
-    return dropdownMenuCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      hideSearch: { type: Boolean },
-      menuItems: { type: Array },
-      animate: { type: Boolean },
-      open: { type: Boolean },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.menuItems = [];
-    this.open = false;
-    this.animate = false;
-  }
-
-  get dropdownItems() {
-    if (!this.menuItems) return nothing;
-
-    if (!Array.isArray(this.menuItems[0])) {
-      return this.dropdownSection(this.menuItems);
-    }
-    return this.menuItems.map((submenu, i) => {
-      const joiner = i ? DropdownMenu.dropdownDivider : html``;
-      return [joiner, ...this.dropdownSection(submenu)];
-    });
-  }
-
-  static get dropdownDivider() {
-    return html`<li role="presentation" class="divider"></li>`;
-  }
-
-  dropdownSection(submenu) {
-    return submenu.map(item => (
-      html`
-        <li>${item.url ? this.dropdownLink(item) : DropdownMenu.dropdownText(item)}</li>
-      `
-    ));
-  }
-
-  dropdownLink(link) {
-    return html`<a href="${formatUrl(link.url, this.baseHost)}" @click=${this.trackClick} data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}">${link.title}</a>`;
-  }
-
-  static dropdownText(item) {
-    return html`<span class="info-item">${item.title}</span>`;
-  }
-
-  get menuClass() {
-    const hiddenClass = this.hideSearch ? ' search-hidden' : '';
-    if (this.open) {
-      return `open${hiddenClass}`;
-    }
-    if (this.animate) {
-      return `closed${hiddenClass}`;
-    }
-    return `initial${hiddenClass}`;
-  }
-
-  get ariaHidden() {
-    return Boolean(!this.open).toString();
-  }
-
-  get ariaExpanded() {
-    return Boolean(this.open).toString();
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden="${this.ariaHidden}"
-          aria-expanded="${this.ariaExpanded}"
-        >
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
-
-export default DropdownMenu;
+import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import dropdownMenuCSS from './styles/dropdown-menu.js';
+import formatUrl from './lib/formatUrl.js';
+
+class DropdownMenu extends TrackedElement {
+  static get styles() {
+    return dropdownMenuCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      hideSearch: { type: Boolean },
+      menuItems: { type: Array },
+      animate: { type: Boolean },
+      open: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.menuItems = [];
+    this.open = false;
+    this.animate = false;
+  }
+
+  get dropdownItems() {
+    if (!this.menuItems) return nothing;
+
+    if (!Array.isArray(this.menuItems[0])) {
+      return this.dropdownSection(this.menuItems);
+    }
+    return this.menuItems.map((submenu, i) => {
+      const joiner = i ? DropdownMenu.dropdownDivider : html``;
+      return [joiner, ...this.dropdownSection(submenu)];
+    });
+  }
+
+  static get dropdownDivider() {
+    return html`<li role="presentation" class="divider"></li>`;
+  }
+
+  dropdownSection(submenu) {
+    return submenu.map(item => (
+      html`
+        <li>${item.url ? this.dropdownLink(item) : DropdownMenu.dropdownText(item)}</li>
+      `
+    ));
+  }
+
+  dropdownLink(link) {
+    const calloutText = this.config.callouts?.[link.title];
+    return html`<a href="${formatUrl(link.url, this.baseHost)}" @click=${this.trackClick} data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}">
+      ${link.title}
+      ${calloutText ? html`<span class="callout">${calloutText}</span>` : nothing}
+    </a>`;
+  }
+
+  static dropdownText(item) {
+    return html`<span class="info-item">${item.title}</span>`;
+  }
+
+  get menuClass() {
+    const hiddenClass = this.hideSearch ? ' search-hidden' : '';
+    if (this.open) {
+      return `open${hiddenClass}`;
+    }
+    if (this.animate) {
+      return `closed${hiddenClass}`;
+    }
+    return `initial${hiddenClass}`;
+  }
+
+  get ariaHidden() {
+    return Boolean(!this.open).toString();
+  }
+
+  get ariaExpanded() {
+    return Boolean(this.open).toString();
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${this.ariaHidden}"
+          aria-expanded="${this.ariaExpanded}"
+        >
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}
+
+export default DropdownMenu;