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

package/src/save-page-form.js

@@ -1,59 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import TrackedElement from './tracked-element.js';
-import savePageFormCSS from './styles/save-page-form.js';
-
-class SavePageForm extends TrackedElement {
-  static get styles() {
-    return savePageFormCSS;
-  }
-
-  static get properties() {
-    return {
-      config: { type: Object },
-      inputValid: { type: Boolean }
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {
-      eventCategory: ''
-    };
-    this.inputValid = true;
-  }
-
-  validateURL(e) {
-    const urlInput = e.target.querySelector('[name="url_preload"]');
-    const valid = /\..{2,}$/.test(urlInput.value);
-
-    if (!valid) {
-      e.preventDefault();
-      this.inputValid = false;
-      return;
-    }
-    this.inputValid = true;
-    this.trackSubmit(e);
-  }
-
-  get errorClass() {
-    return `error${this.inputValid ? '' : ' visible'}`;
-  }
-
-  render() {
-    return html`
-      <form action="//web.archive.org/save" method="post" data-event-submit-tracking="${this.config.eventCategory}|SavePageSubmit" @submit=${this.validateURL}>
-        <h3>Save Page Now</h3>
-        <p>Capture a web page as it appears now for use as a trusted citation in the future.</p>
-        <div>
-          <input type="text" name="url_preload" placeholder="https://" />
-          <input type="submit" value="Save" />
-        </div>
-        <p class=${this.errorClass}>Please enter a valid web address</p>
-      </form>
-    `;
-  }
-}
-
-customElements.define('save-page-form', SavePageForm);
-
-export default SavePageForm;

package/src/search-menu.js

@@ -1,145 +0,0 @@
-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 +0,0 @@
-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/media-subnav.js

@@ -1,156 +0,0 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
-import { subnavListCSS } from './base.js';
-
-export default [subnavListCSS, css`
-  img {
-    display: block;
-    width: 90px;
-    height: 90px;
-    margin: 0 auto 1rem auto;
-    border-radius: 45px;
-  }
-
-  h3 {
-    margin-top: 0;
-    font-size: 1.8rem;
-  }
-
-  .icon-links {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: space-evenly;
-    -ms-flex-pack: space-evenly;
-    justify-content: space-evenly;
-    text-align: center;
-  }
-
-  .icon-links a {
-    display: inline-block;
-    width: 12rem;
-    margin-bottom: 1.5rem;
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: center;
-    text-overflow: ellipsis;
-  }
-
-  .icon-links a + a {
-    margin-left: 2rem;
-  }
-
-  .featured h4 {
-    display: none;
-  }
-
-  @media (min-width: 890px) {
-    :host {
-      display: -ms-grid;
-      display: grid;
-      -ms-grid-columns: 40% 20% 40%;
-      grid-template-columns: 40% 20% 40%;
-    }
-
-    .wayback-search {
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 3;
-      grid-column: 1 / 4;
-    }
-
-    h3 {
-      display: none;
-    }
-
-    .icon-links {
-      -ms-grid-column: 1;
-    }
-
-    .icon-links a {
-      padding-top: 3.5rem;
-      max-width: 16rem;
-    }
-
-    .links {
-      padding: 0 1.5rem;
-    }
-
-    .featured {
-      -ms-grid-column: 2;
-    }
-
-    .featured h4 {
-      display: block;
-    }
-
-    .top {
-      -ms-grid-column: 3;
-    }
-
-    .top ul {
-      display: -ms-grid;
-      display: grid;
-      -ms-grid-columns: 50% 3rem 50%;
-      grid-template-columns: 50% 50%;
-      -ms-grid-rows: (auto)[7];
-      grid-template-rows: repeat(7, auto);
-      grid-column-gap: 3rem;
-      grid-auto-flow: column;
-    }
-    .top ul > *:nth-child(1) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(2) {
-      -ms-grid-row: 2;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(3) {
-      -ms-grid-row: 3;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(4) {
-      -ms-grid-row: 4;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(5) {
-      -ms-grid-row: 5;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(6) {
-      -ms-grid-row: 6;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(7) {
-      -ms-grid-row: 7;
-      -ms-grid-column: 1;
-    }
-    .top ul > *:nth-child(8) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 3;
-    }
-    .top ul > *:nth-child(9) {
-      -ms-grid-row: 2;
-      -ms-grid-column: 3;
-    }
-    .top ul > *:nth-child(10) {
-      -ms-grid-row: 3;
-      -ms-grid-column: 3;
-    }
-    .top ul > *:nth-child(11) {
-      -ms-grid-row: 4;
-      -ms-grid-column: 3;
-    }
-    .top ul > *:nth-child(12) {
-      -ms-grid-row: 5;
-      -ms-grid-column: 3;
-    }
-    .top ul > *:nth-child(13) {
-      -ms-grid-row: 6;
-      -ms-grid-column: 3;
-    }
-    .top ul > *:nth-child(14) {
-      -ms-grid-row: 7;
-      -ms-grid-column: 3;
-    }
-  }
-`];

package/src/styles/wayback-slider.js

@@ -1,30 +0,0 @@
-import { css } from 'https://offshoot.prod.archive.org/lit.js';
-import { subnavListCSS } from './base.js';
-
-export default [subnavListCSS, css`
-  @media (min-width: 890px) {
-    :host {
-      display: block;
-      grid-column: 1 / 4;
-      padding: 0 1.5rem;
-    }
-
-    h4 {
-      margin-top: 0;
-      font: normal 100 1.6rem var(--themeFontFamily);
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
-      /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
-      grid-column-gap: 2.5rem;
-    }
-
-    .link-lists {
-      display: grid;
-      grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
-      grid-column-gap: 2.5rem;
-    }
-  }
-`];

package/src/tracked-element.js

@@ -1,29 +0,0 @@
-import { LitElement } from 'https://offshoot.prod.archive.org/lit.js';
-
-class TrackedElement extends LitElement {
-  trackClick(e) {
-    const event = e.currentTarget?.dataset?.eventClickTracking;
-    if (event === undefined) return;
-    this.dispatchEvent(new CustomEvent('trackClick', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        event
-      },
-    }));
-  }
-
-  trackSubmit(e) {
-    const event = e.currentTarget?.dataset?.eventSubmitTracking;
-    if (event === undefined) return;
-    this.dispatchEvent(new CustomEvent('trackSubmit', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        event
-      },
-    }));
-  }
-}
-
-export default TrackedElement;

package/src/user-menu.js

@@ -1,56 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import DropdownMenu from './dropdown-menu.js';
-import userMenuCSS from './styles/user-menu.js';
-import KeyboardNavigation from './lib/keyboard-navigation.js';
-
-class UserMenu extends DropdownMenu {
-  static get styles() {
-    return [DropdownMenu.styles, userMenuCSS];
-  }
-
-  static get properties() {
-    const props = {
-      ...DropdownMenu.properties,
-      username: { type: String },
-      screenName: { type: String },
-    };
-    return props;
-  }
-
-  constructor() {
-    super();
-    this.username = '';
-  }
-
-  updated(props) {
-    if (props.has('open') && this.open) {
-      const container = this.shadowRoot?.querySelector('.nav-container');
-
-      if (container) {
-        const keyboardNavigation = new KeyboardNavigation(container, 'usermenu');
-        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
-        this.removeEventListener('keydown', this.previousKeydownListener);
-        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
-      }
-    }
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden="${this.ariaHidden}"
-          aria-expanded="${this.ariaExpanded}"
-        >
-          <h3>${this.screenName}</h3>
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
-
-customElements.define('user-menu', UserMenu);

package/src/wayback-search.js

@@ -1,18 +0,0 @@
-// NOTE: for fully local testing, you can toggle these two lines
-import WaybackSearch from '@internetarchive/ia-wayback-search';
-// import WaybackSearch from '../../../packages/ia-wayback-search/index.js';
-
-// future way we could move to:
-// import WaybackSearch from 'https://esm.archive.org/@internetarchive/ia-wayback-search@^0.2.3';
-
-import waybackSearchCSS from './styles/wayback-search.js';
-
-class NavWaybackSearch extends WaybackSearch {
-  static get styles() {
-    return [WaybackSearch.styles, waybackSearchCSS];
-  }
-}
-
-customElements.define('wayback-search', NavWaybackSearch);
-
-export default NavWaybackSearch;

package/src/wayback-slider.js

@@ -1,87 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import './wayback-search.js';
-import TrackedElement from './tracked-element.js';
-import './save-page-form.js';
-import queryHandler from './lib/query-handler.js';
-import waybackSliderCSS from './styles/wayback-slider.js';
-import toSentenceCase from './lib/toSentenceCase.js';
-import formatUrl from './lib/formatUrl.js';
-
-class WaybackSlider extends TrackedElement {
-  static get styles() {
-    return waybackSliderCSS;
-  }
-
-  static get properties() {
-    return {
-      archiveItLinks: { type: Array },
-      baseHost: { type: String },
-      browserExtensionsLinks: { type: Array },
-      config: { type: Object },
-      mobileAppsLinks: { type: Array },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.archiveItLinks = [];
-    this.browserExtensionsLinks = [];
-    this.mobileAppsLinks = [];
-  }
-
-  get mobileAppsItems() {
-    return this.linkList('mobileAppsLinks', 'Wayback');
-  }
-
-  get browserExtensionsItems() {
-    return this.linkList('browserExtensionsLinks', 'Wayback');
-  }
-
-  get archiveItItems() {
-    return this.linkList('archiveItLinks', 'ArchiveIt');
-  }
-
-  linkList(linkType, eventPrefix) {
-    return this[linkType].map(link => html`<li>
-      <a href=${formatUrl(link.url, this.baseHost)} @click=${this.trackClick} data-event-click-tracking="${this.analyticsEvent(`${eventPrefix}${link.title}`)}" target=${link.external ? '_blank' : ''} rel=${link.external ? 'noreferrer noopener' : ''}>${link.title}</a>
-    </li>`);
-  }
-
-  analyticsEvent(title) {
-    return `${this.config.eventCategory}|${toSentenceCase(title)}`;
-  }
-
-  render() {
-    return html`
-      <div class="grid">
-        <wayback-search
-          waybackPagesArchived=${this.config.waybackPagesArchived}
-          .queryHandler=${queryHandler}></wayback-search>
-        <div class="link-lists">
-          <div>
-            <h4>Mobile Apps</h4>
-            <ul class="mobile-apps">
-              ${this.mobileAppsItems}
-            </ul>
-            <h4>Browser Extensions</h4>
-            <ul class="browser-extensions">
-              ${this.browserExtensionsItems}
-            </ul>
-          </div>
-          <div>
-            <h4>Archive-It Subscription</h4>
-            <ul class="archive-it">
-              ${this.archiveItItems}
-            </ul>
-          </div>
-        </div>
-        <save-page-form .config=${this.config}></save-page-form>
-      </div>
-    `;
-  }
-}
-
-customElements.define('wayback-slider', WaybackSlider);
-
-export default WaybackSlider;

package/test/assets/img/hamburger.test.js

@@ -1,15 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../../../src/assets/img/hamburger';
-
-describe('<icon-hamburger>', () => {
-  it('toggles close icon when property toggled', async () => {
-    const icon = await fixture(html`<icon-hamburger></icon-hamburger>`);
-
-    icon.active = true;
-    await icon.updateComplete;
-
-    const titleElement = icon.shadowRoot.querySelector('svg title');
-
-    expect(titleElement.getAttribute('id')).to.match(/close/);
-  });
-});

package/test/assets/img/user.test.js

@@ -1,15 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../../../src/assets/img/user';
-
-describe('<user-image>', () => {
-  it('toggles active class when property toggled', async () => {
-    const icon = await fixture(html`<user-image></user-image>`);
-
-    icon.active = true;
-    await icon.updateComplete;
-
-    const styleElement = icon.shadowRoot.querySelector('svg > path');
-
-    expect(styleElement.classList.contains('active')).to.be.true;
-  });
-});

package/test/data/menus.test.js

@@ -1,19 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { buildTopNavMenus } from '../../src/data/menus.js';
-
-describe('Menu data', () => {
-  it('returns a collection for each media category', () => {
-    [
-      'texts',
-      'video',
-      'audio',
-      'software',
-      'images',
-      'user',
-      'more',
-    ].forEach((category) => {
-      const menus = buildTopNavMenus();
-      expect(menus[category]).to.not.be.undefined;
-    });
-  });
-});