@internetarchive/ia-topnav 1.3.6 → 1.3.7

package/src/media-subnav.js

@@ -1,112 +1,112 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import './wayback-slider.js';
-import './more-slider.js';
-import mediaSubnavCSS from './styles/media-subnav.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import formatUrl from './lib/formatUrl.js';
-
-class MediaSubnav extends TrackedElement {
-  static get styles() {
-    return mediaSubnavCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      menu: { type: String },
-      menuItems: { type: Object },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.config = {};
-    this.menu = '';
-    this.menuItems = {};
-
-    // Begin properties not monitored by LitElement
-    this.links = MediaSubnav.defaultLinks;
-  }
-
-  shouldUpdate() {
-    if (this.menuItems) {
-      this.links = this.menuItems;
-    }
-    return true;
-  }
-
-  static get defaultLinks() {
-    return { iconLinks: [], featuredLinks: [], links: [] };
-  }
-
-  analyticsEvent(title) {
-    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="${link.icon}" loading="lazy" />${link.title}</a>
-      `
-    ));
-  }
-
-  renderLinks(category) {
-    return this.links[category].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('featuredLinks')}
-        </ul>
-      </div>
-      <div class="links top">
-        <h4>Top</h4>
-        <ul>
-          ${this.renderLinks('links')}
-        </ul>
-      </div>
-    `;
-  }
-}
-
-customElements.define('media-subnav', MediaSubnav);
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import './wayback-slider.js';
+import './more-slider.js';
+import mediaSubnavCSS from './styles/media-subnav.js';
+import toSentenceCase from './lib/toSentenceCase.js';
+import formatUrl from './lib/formatUrl.js';
+
+class MediaSubnav extends TrackedElement {
+  static get styles() {
+    return mediaSubnavCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      menu: { type: String },
+      menuItems: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.config = {};
+    this.menu = '';
+    this.menuItems = {};
+
+    // Begin properties not monitored by LitElement
+    this.links = MediaSubnav.defaultLinks;
+  }
+
+  shouldUpdate() {
+    if (this.menuItems) {
+      this.links = this.menuItems;
+    }
+    return true;
+  }
+
+  static get defaultLinks() {
+    return { iconLinks: [], featuredLinks: [], links: [] };
+  }
+
+  analyticsEvent(title) {
+    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="${link.icon}" loading="lazy" />${link.title}</a>
+      `
+    ));
+  }
+
+  renderLinks(category) {
+    return this.links[category].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('featuredLinks')}
+        </ul>
+      </div>
+      <div class="links top">
+        <h4>Top</h4>
+        <ul>
+          ${this.renderLinks('links')}
+        </ul>
+      </div>
+    `;
+  }
+}
+
+customElements.define('media-subnav', MediaSubnav);

package/src/more-slider.js

@@ -1,33 +1,33 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import moreSliderCSS from './styles/more-slider.js';
-import formatUrl from './lib/formatUrl.js';
-
-class MoreSlider extends TrackedElement {
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      menuItems: { type: Array },
-    };
-  }
-
-  static get styles() {
-    return moreSliderCSS;
-  }
-
-  analyticsEvent(title) {
-    return `${this.config.eventCategory}|NavMore${toSentenceCase(title)}`;
-  }
-
-  render() {
-    return html`
-      <ul>
-        ${this.menuItems.map(item => html`<li><a @click=${this.trackClick} href=${formatUrl(item.url, this.baseHost)} data-event-click-tracking="${this.analyticsEvent(item.title)}">${item.title}</a></li>`)}
-      </ul>
-    `;
-  }
-}
-
-customElements.define('more-slider', MoreSlider);
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import toSentenceCase from './lib/toSentenceCase.js';
+import moreSliderCSS from './styles/more-slider.js';
+import formatUrl from './lib/formatUrl.js';
+
+class MoreSlider extends TrackedElement {
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      menuItems: { type: Array },
+    };
+  }
+
+  static get styles() {
+    return moreSliderCSS;
+  }
+
+  analyticsEvent(title) {
+    return `${this.config.eventCategory}|NavMore${toSentenceCase(title)}`;
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.menuItems.map(item => html`<li><a @click=${this.trackClick} href=${formatUrl(item.url, this.baseHost)} data-event-click-tracking="${this.analyticsEvent(item.title)}">${item.title}</a></li>`)}
+      </ul>
+    `;
+  }
+}
+
+customElements.define('more-slider', MoreSlider);

package/src/nav-search.js

@@ -1,117 +1,111 @@
-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 = '';
-  }
-
-  updated() {
-    if (this.open) {
-      this.shadowRoot.querySelector('[name=query]').focus();
-    }
-    return true;
-  }
-
-  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 '/search';
-  }
-
-  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 = '';
+  }
+
+  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 '/search';
+  }
+
+  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"
+            value=${this.searchQuery || ''}
+            @focus=${this.toggleSearchMenu}
+          />
+          ${this.searchInsideInput}
+          <button
+            type="submit"
+            class="search"
+            tabindex="-1"
+            data-event-click-tracking="${this.config.eventCategory}|NavSearchClose"
+          >
+            ${icons.search}
+          </button>
+        </form>
+      </div>
+    `;
+  }
+}
+
+customElements.define('nav-search', NavSearch);