@internetarchive/ia-topnav 1.3.6-alpha.0 → 1.3.6-alpha1

package/src/user-menu.js

@@ -1,42 +1,56 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-import DropdownMenu from './dropdown-menu.js';
-import userMenuCSS from './styles/user-menu.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 = '';
-  }
-
-  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);
+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 +1,18 @@
-// 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;
+// 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 +1,87 @@
-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;
+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 +1,15 @@
-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/);
-  });
-});
+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 +1,15 @@
-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;
-  });
-});
+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 +1,19 @@
-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;
-    });
-  });
-});
+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;
+    });
+  });
+});

package/test/dropdown-menu.test.js

@@ -1,25 +1,25 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import DropdownMenu from '../src/dropdown-menu';
-
-customElements.define('dropdown-menu', DropdownMenu);
-
-const component = html`<dropdown-menu></dropdown-menu>`;
-
-describe('<dropdown-menu>', () => {
-  it('sets default properties', async () => {
-    const el = await fixture(component);
-
-    expect(el.animate).to.be.false;
-    expect(el.open).to.be.false;
-    expect(el.menuItems.length).to.equal(0);
-  });
-
-  it('renders a closed class if component is animating', async () => {
-    const el = await fixture(component);
-
-    el.animate = true;
-    await el.updateComplete;
-    expect(el.shadowRoot.querySelector('.closed')).to.not.be.undefined;
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+
+import DropdownMenu from '../src/dropdown-menu';
+
+customElements.define('dropdown-menu', DropdownMenu);
+
+const component = html`<dropdown-menu></dropdown-menu>`;
+
+describe('<dropdown-menu>', () => {
+  it('sets default properties', async () => {
+    const el = await fixture(component);
+
+    expect(el.animate).to.be.false;
+    expect(el.open).to.be.false;
+    expect(el.menuItems.length).to.equal(0);
+  });
+
+  it('renders a closed class if component is animating', async () => {
+    const el = await fixture(component);
+
+    el.animate = true;
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.closed')).to.not.be.undefined;
+  });
+});

package/test/ia-icon.test.js

@@ -1,13 +1,13 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../src/assets/img/ia-icon';
-
-describe('<ia-icon>', () => {
-  it('renders an icon with a fill color', async () => {
-    const iconType = 'web';
-    const fill = '#999';
-    const iaIcon = await fixture(html`<ia-icon .icon=${iconType} .fill=${fill}></ia-icon>`);
-
-    expect(iaIcon.icon).to.equal(iconType);
-    expect(iaIcon.fill).to.equal(fill);
-  });
-});
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/assets/img/ia-icon';
+
+describe('<ia-icon>', () => {
+  it('renders an icon with a fill color', async () => {
+    const iconType = 'web';
+    const fill = '#999';
+    const iaIcon = await fixture(html`<ia-icon .icon=${iconType} .fill=${fill}></ia-icon>`);
+
+    expect(iaIcon.icon).to.equal(iconType);
+    expect(iaIcon.fill).to.equal(fill);
+  });
+});