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

package/src/media-menu.js

@@ -1,133 +1,154 @@
-import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
-
-import './media-button.js';
-import mediaMenuCSS from './styles/media-menu.js';
-import formatUrl from './lib/formatUrl.js';
-
-const menuSelection = [
-  {
-    icon: 'web',
-    menu: 'web',
-    href: 'https://web.archive.org',
-    label: 'Wayback Machine',
-  },
-  {
-    icon: 'texts',
-    menu: 'texts',
-    href: '/details/texts',
-    label: 'Books',
-  },
-  {
-    icon: 'video',
-    menu: 'video',
-    href: '/details/movies',
-    label: 'Video',
-  },
-  {
-    icon: 'audio',
-    menu: 'audio',
-    href: '/details/audio',
-    label: 'Audio',
-  },
-  {
-    icon: 'software',
-    menu: 'software',
-    href: '/details/software',
-    label: 'Software',
-  },
-  {
-    icon: 'images',
-    menu: 'images',
-    href: '/details/image',
-    label: 'Images',
-  },
-  {
-    icon: 'donate',
-    menu: 'donate',
-    href: '/donate/',
-    label: 'Donate',
-    followable: true,
-  },
-  {
-    icon: 'ellipses',
-    menu: 'more',
-    href: '/about/',
-    label: 'More',
-  },
-];
-
-class MediaMenu extends LitElement {
-  static get styles() {
-    return mediaMenuCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      openMenu: { type: String },
-      selectedMenuOption: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.config = {};
-    this.openMenu = '';
-    this.selectedMenuOption = '';
-  }
-
-  get mediaMenuOptionsTemplate() {
-    const buttons = menuSelection.map(({
-      icon,
-      menu,
-      label,
-      href,
-      followable,
-    }) => {
-      const selected = this.selectedMenuOption === menu;
-      return html`
-        <media-button
-          .config=${this.config}
-          .icon=${icon}
-          .href=${formatUrl(href, this.baseHost)}
-          .followable=${followable}
-          .label=${label}
-          .mediatype=${menu}
-          .openMenu=${this.openMenu}
-          .selected=${selected}
-          data-mediatype="${menu}"
-        ></media-button>
-      `;
-    });
-    return buttons;
-  }
-
-  get menuOpened() {
-    return this.openMenu === 'media';
-  }
-
-  get menuClass() {
-    return this.menuOpened ? 'open' : 'closed';
-  }
-
-  render() {
-    return html`
-      <div class="media-menu-container ${this.menuClass}">
-        <div class="overflow-clip">
-          <nav
-            class="media-menu-inner"
-            aria-hidden="${!this.menuOpened}"
-            aria-expanded="${this.menuOpened}"
-          >
-            <div class="menu-group">
-              ${this.mediaMenuOptionsTemplate}
-            </div>
-          </nav>
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('media-menu', MediaMenu);
+import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
+
+import './media-button.js';
+import mediaMenuCSS from './styles/media-menu.js';
+import formatUrl from './lib/formatUrl.js';
+
+const menuSelection = [
+  {
+    icon: 'web',
+    menu: 'web',
+    href: 'https://web.archive.org',
+    label: 'Wayback Machine',
+  },
+  {
+    icon: 'texts',
+    menu: 'texts',
+    href: '/details/texts',
+    label: 'Texts',
+  },
+  {
+    icon: 'video',
+    menu: 'video',
+    href: '/details/movies',
+    label: 'Video',
+  },
+  {
+    icon: 'audio',
+    menu: 'audio',
+    href: '/details/audio',
+    label: 'Audio',
+  },
+  {
+    icon: 'software',
+    menu: 'software',
+    href: '/details/software',
+    label: 'Software',
+  },
+  {
+    icon: 'images',
+    menu: 'images',
+    href: '/details/image',
+    label: 'Images',
+  },
+  {
+    icon: 'donate',
+    menu: 'donate',
+    href: '/donate/',
+    label: 'Donate',
+    followable: true,
+  },
+  {
+    icon: 'ellipses',
+    menu: 'more',
+    href: '/about/',
+    label: 'More',
+  },
+];
+
+class MediaMenu extends LitElement {
+  static get styles() {
+    return mediaMenuCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      openMenu: { type: String },
+      selectedMenuOption: { type: String },
+      currentTab: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = {};
+    this.openMenu = '';
+    this.selectedMenuOption = '';
+    this.currentTab = {};
+  }
+
+  updated(props) {
+    if (props.has('currentTab')) {
+      const mediaButtons = Array.from(this.shadowRoot.querySelectorAll('media-button'));
+
+      mediaButtons.map((button, index) => {
+        const linkItem = button.shadowRoot.querySelector('a.menu-item');
+        if (linkItem) {
+          if (linkItem.classList.contains(`${this.selectedMenuOption}`)) {
+            linkItem.classList.remove('selected');
+            linkItem.blur();
+
+            const newFocusIndex = this.currentTab.moveTo === 'next' ? index + 1 : index - 1;
+            mediaButtons[newFocusIndex].shadowRoot.querySelector('a.menu-item').focus();
+          }
+        }
+      });
+    }
+  }
+
+  get mediaMenuOptionsTemplate() {
+    const buttons = menuSelection.map(({
+      icon,
+      menu,
+      label,
+      href,
+      followable,
+    }) => {
+      const selected = this.selectedMenuOption === menu;
+      return html`
+        <media-button
+          .config=${this.config}
+          .icon=${icon}
+          .href=${formatUrl(href, this.baseHost)}
+          .followable=${followable}
+          .label=${label}
+          .mediatype=${menu}
+          .openMenu=${this.openMenu}
+          .selected=${selected}
+          .selectedMenuOption=${this.selectedMenuOption}
+          data-mediatype="${menu}"
+        ></media-button>
+      `;
+    });
+    return buttons;
+  }
+
+  get menuOpened() {
+    return this.openMenu === 'media';
+  }
+
+  get menuClass() {
+    return this.menuOpened ? 'open' : 'closed';
+  }
+
+  render() {
+    return html`
+      <div class="media-menu-container ${this.menuClass}">
+        <div class="overflow-clip">
+          <nav
+            class="media-menu-inner"
+            aria-expanded="${this.menuOpened}"
+          >
+            <div class="menu-group">
+              ${this.mediaMenuOptionsTemplate}
+            </div>
+          </nav>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('media-menu', MediaMenu);

package/src/media-slider.js

@@ -1,104 +1,118 @@
-import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
-import './media-subnav.js';
-import mediaSliderCSS from './styles/media-slider.js';
-
-class MediaSlider extends LitElement {
-  static get styles() {
-    return mediaSliderCSS;
-  }
-
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      config: { type: Object },
-      mediaSliderOpen: { type: Boolean },
-      menus: { type: Object },
-      selectedMenuOption: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.config = {};
-    this.mediaSliderOpen = false;
-    this.menus = {};
-    this.selectedMenuOption = 'texts';
-  }
-
-  shouldUpdate() {
-    const scrollPane = this.shadowRoot ? this.shadowRoot.querySelector('.information-menu') : null;
-
-    if (scrollPane) {
-      scrollPane.scrollTop = 0;
-    }
-    return true;
-  }
-
-
-  render() {
-    const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';
-
-    return html`
-      <div class="media-slider-container">
-        <div class="overflow-clip ${sliderDetailsClass}">
-          <div class="information-menu ${sliderDetailsClass}">
-            <div class="info-box">
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'audio' ? '' : 'hidden'}"
-                menu="audio"
-                .menuItems=${this.menus.audio}
-              ></media-subnav>
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'images' ? '' : 'hidden'}"
-                menu="images"
-                .menuItems=${this.menus.images}
-              ></media-subnav>
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'software' ? '' : 'hidden'}"
-                menu="software"
-                .menuItems=${this.menus.software}
-              ></media-subnav>
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'texts' ? '' : 'hidden'}"
-                menu="texts"
-                .menuItems=${this.menus.texts}
-              ></media-subnav>
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'video' ? '' : 'hidden'}"
-                menu="video"
-                .menuItems=${this.menus.video}
-              ></media-subnav>
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'web' ? '' : 'hidden'}"
-                menu="web"
-                .menuItems=${this.menus.web}
-              ></media-subnav>
-              <media-subnav
-                .baseHost=${this.baseHost}
-                .config=${this.config}
-                class="${this.selectedMenuOption === 'more' ? '' : 'hidden'}"
-                menu="more"
-                .menuItems=${this.menus.more}
-              ></media-subnav>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define('media-slider', MediaSlider);
+import { LitElement, html } from 'https://offshoot.prod.archive.org/lit.js';
+import './media-subnav.js';
+import mediaSliderCSS from './styles/media-slider.js';
+import KeyboardNavigation from './lib/keyboard-navigation.js';
+
+class MediaSlider extends LitElement {
+  static get styles() {
+    return mediaSliderCSS;
+  }
+
+  static get properties() {
+    return {
+      baseHost: { type: String },
+      config: { type: Object },
+      mediaSliderOpen: { type: Boolean },
+      menus: { type: Object },
+      selectedMenuOption: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.config = {};
+    this.mediaSliderOpen = false;
+    this.menus = {};
+    this.selectedMenuOption = 'texts';
+  }
+
+  updated(props) {
+    if (props.has('selectedMenuOption') && this.selectedMenuOption) {
+      const container = this.shadowRoot?.querySelector('.has-focused')?.shadowRoot;
+  
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(container, this.selectedMenuOption);
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        this.removeEventListener('keydown', this.previousKeydownListener);
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  shouldUpdate() {
+    const scrollPane = this.shadowRoot ? this.shadowRoot.querySelector('.information-menu') : null;
+
+    if (scrollPane) {
+      scrollPane.scrollTop = 0;
+    }
+    return true;
+  }
+
+
+  render() {
+    const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';
+
+    return html`
+      <div class="media-slider-container">
+        <div class="overflow-clip ${sliderDetailsClass}">
+          <div class="information-menu ${sliderDetailsClass}">
+            <div class="info-box">
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'audio' ? 'has-focused' : 'hidden'}"
+                menu="audio"
+                .menuItems=${this.menus.audio}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'images' ? 'has-focused' : 'hidden'}"
+                menu="images"
+                .menuItems=${this.menus.images}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'software' ? 'has-focused' : 'hidden'}"
+                menu="software"
+                .menuItems=${this.menus.software}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'texts' ? 'has-focused' : 'hidden'}"
+                menu="texts"
+                .menuItems=${this.menus.texts}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'video' ? 'has-focused' : 'hidden'}"
+                menu="video"
+                .menuItems=${this.menus.video}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'web' ? 'has-focused' : 'hidden'}"
+                menu="web"
+                .menuItems=${this.menus.web}
+              ></media-subnav>
+              <media-subnav
+                .baseHost=${this.baseHost}
+                .config=${this.config}
+                class="${this.selectedMenuOption === 'more' ? 'has-focused' : 'hidden'}"
+                menu="more"
+                .menuItems=${this.menus.more}
+              ></media-subnav>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('media-slider', MediaSlider);