@internetarchive/ia-topnav 1.3.6 → 1.3.7-0

package/src/search-menu.js

@@ -1,115 +1,145 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import searchMenuCSS from './styles/search-menu.js';
-import formatUrl from './lib/formatUrl.js';
-
-class SearchMenu extends TrackedElement {
-  static get styles() {
-    return searchMenuCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      hideSearch: { type: Boolean },
-      openMenu: { type: String },
-      searchMenuOpen: { type: Boolean },
-      searchMenuAnimate: { type: Boolean },
-      selectedSearchType: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-    this.searchMenuOpen = false;
-    this.searchMenuAnimate = false;
-    this.selectedSearchType = '';
-  }
-
-  selectSearchType(e) {
-    this.selectedSearchType = e.target.value;
-  }
-
-  searchInChanged(e) {
-    this.dispatchEvent(new CustomEvent('searchInChanged', {
-      detail: {
-        searchIn: e.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() {
-    const searchMenuHidden = Boolean(!this.searchMenuOpen).toString();
-    const searchMenuExpanded = Boolean(this.searchMenuOpen).toString();
-
-    if (this.hideSearch) {
-      return html``;
-    }
-
-    return html`
-      <div class="menu-wrapper">
-        <div
-          class="search-menu-inner tx-slide ${this.menuClass}"
-          aria-hidden="${searchMenuHidden}"
-          aria-expanded="${searchMenuExpanded}"
-        >
-          ${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>
-    `;
-  }
-}
-
-customElements.define('search-menu', SearchMenu);
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import searchMenuCSS from './styles/search-menu.js';
+import formatUrl from './lib/formatUrl.js';
+
+class SearchMenu extends TrackedElement {
+  static get styles() {
+    return searchMenuCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      hideSearch: { type: Boolean },
+      openMenu: { type: String },
+      searchMenuOpen: { type: Boolean },
+      searchMenuAnimate: { type: Boolean },
+      selectedSearchType: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.openMenu = '';
+    this.searchMenuOpen = false;
+    this.searchMenuAnimate = false;
+    this.selectedSearchType = '';
+  }
+
+  firstUpdated() {
+    this.shadowRoot.addEventListener('keydown', e => this.handleKeyDownEvent(e));
+  }
+
+  disconnectedCallback() {
+    // Clean up event listener when the element is removed
+    this.shadowRoot.removeEventListener('keydown', e => this.handleKeyDownEvent(e));
+  }
+
+  handleKeyDownEvent(e) {
+    const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
+
+    const length = searchTypes.length - 1;
+    if (!length) return;
+
+    const searchTypeHandler = (index) => {
+      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) {
+    this.selectedSearchType = e.target.value;
+  }
+
+  searchInChanged(e) {
+    this.dispatchEvent(new CustomEvent('searchInChanged', {
+      detail: {
+        searchIn: e.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() {
+    const searchMenuHidden = Boolean(!this.openMenu).toString();
+    const searchMenuExpanded = Boolean(this.searchMenuOpen).toString();
+
+    if (this.hideSearch) {
+      return html``;
+    }
+
+    return html`
+      <div class="menu-wrapper">
+        <div
+          class="search-menu-inner tx-slide ${this.menuClass}"
+          aria-hidden="${searchMenuHidden}"
+          aria-expanded="${searchMenuExpanded}"
+        >
+          ${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>
+    `;
+  }
+}
+
+customElements.define('search-menu', SearchMenu);

package/src/signed-out-dropdown.js

@@ -1,10 +1,10 @@
-import DropdownMenu from './dropdown-menu.js';
-import signedOutDropdownStyles from './styles/signed-out-dropdown.js';
-
-class SignedOutDropdown extends DropdownMenu {
-  static get styles() {
-    return [DropdownMenu.styles, signedOutDropdownStyles];
-  }
-}
-
-customElements.define('signed-out-dropdown', SignedOutDropdown);
+import DropdownMenu from './dropdown-menu.js';
+import signedOutDropdownStyles from './styles/signed-out-dropdown.js';
+
+class SignedOutDropdown extends DropdownMenu {
+  static get styles() {
+    return [DropdownMenu.styles, signedOutDropdownStyles];
+  }
+}
+
+customElements.define('signed-out-dropdown', SignedOutDropdown);

package/src/styles/base.js

@@ -1,48 +1,48 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
-
-export const subnavListCSS = css`
-  h4 {
-    font-size: 1.6rem;
-  }
-
-  a {
-    text-decoration: none;
-    color: var(--activeColor);
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  li + li {
-    padding-top: 1.5rem;
-  }
-
-  @media (min-width: 890px) {
-    h4 {
-      margin: 0 0 1rem 0;
-      font-weight: 100;
-    }
-
-    ul {
-      font-size: 1.3rem;
-    }
-
-    li {
-      padding-bottom: .5rem;
-    }
-
-    li + li {
-      padding-top: 0;
-    }
-
-    li a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-`;
+import { css } from 'https://offshoot.prod.archive.org/lit.js';
+
+export const subnavListCSS = css`
+  h4 {
+    font-size: 1.6rem;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--activeColor);
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  li + li {
+    padding-top: 1.5rem;
+  }
+
+  @media (min-width: 890px) {
+    h4 {
+      margin: 0 0 1rem 0;
+      font-weight: 100;
+    }
+
+    ul {
+      font-size: 1.3rem;
+    }
+
+    li {
+      padding-bottom: .5rem;
+    }
+
+    li + li {
+      padding-top: 0;
+    }
+
+    li a {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+`;

package/src/styles/desktop-subnav.js

@@ -1,37 +1,37 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
-
-export default css`
-  ul {
-    position: relative;
-    z-index: 3;
-    padding: .8rem 0;
-    margin: 0;
-    font-size: 1.2rem;
-    text-transform: uppercase;
-    text-align: center;
-    background: var(--desktopSubnavBg);
-  }
-
-  li {
-    display: inline-block;
-    padding: 0 15px;
-  }
-
-  a {
-    text-decoration: none;
-    color: var(--subnavLinkColor);
-  }
-
-  a:hover,
-  a:active,
-  a:focus {
-    color: var(--linkHoverColor);
-  }
-
-  .donate svg {
-    width: 1.6rem;
-    height: 1.6rem;
-    vertical-align: top;
-    fill: #f00;
-  }
-`;
+import { css } from 'https://offshoot.prod.archive.org/lit.js';
+
+export default css`
+  ul {
+    position: relative;
+    z-index: 3;
+    padding: .8rem 0;
+    margin: 0;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    text-align: center;
+    background: var(--desktopSubnavBg);
+  }
+
+  li {
+    display: inline-block;
+    padding: 0 15px;
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--subnavLinkColor);
+  }
+
+  a:hover,
+  a:active,
+  a:focus {
+    color: var(--linkHoverColor);
+  }
+
+  .donate svg {
+    width: 1.6rem;
+    height: 1.6rem;
+    vertical-align: top;
+    fill: #f00;
+  }
+`;