@internetarchive/ia-topnav 1.3.5-alpha7 → 1.3.6-alpha.0

package/src/media-slider.js

@@ -1,104 +1,104 @@
-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';
+
+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);

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);