@internetarchive/ia-topnav 1.1.18-a1 → 1.1.18

package/src/desktop-subnav.js

@@ -1,8 +1,8 @@
-import { html, nothing } from 'lit';
-import TrackedElement from './tracked-element';
-import desktopSubnavCSS from './styles/desktop-subnav';
-import icons from './assets/img/icons';
-import formatUrl from './lib/formatUrl';
+import { html, nothing } from 'https://offshoot.ux.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import desktopSubnavCSS from './styles/desktop-subnav.js';
+import icons from './assets/img/icons.js';
+import formatUrl from './lib/formatUrl.js';
 
 class DesktopSubnav extends TrackedElement {
   static get styles() {

package/src/dropdown-menu.js

@@ -1,7 +1,7 @@
-import { html, nothing } from 'lit';
-import TrackedElement from './tracked-element';
-import dropdownMenuCSS from './styles/dropdown-menu';
-import formatUrl from './lib/formatUrl';
+import { html, nothing } from 'https://offshoot.ux.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import dropdownMenuCSS from './styles/dropdown-menu.js';
+import formatUrl from './lib/formatUrl.js';
 
 class DropdownMenu extends TrackedElement {
   static get styles() {

package/src/ia-topnav.js

@@ -1,13 +1,14 @@
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html, nothing } from 'https://offshoot.ux.archive.org/lit.js';
 
-import './primary-nav';
-import './user-menu';
-import './search-menu';
-import './media-slider';
-import './desktop-subnav';
-import './dropdown-menu';
-import './signed-out-dropdown';
-import iaTopNavCSS from './styles/ia-topnav';
+import './primary-nav.js';
+import './user-menu.js';
+import './search-menu.js';
+import './media-slider.js';
+import './desktop-subnav.js';
+import './dropdown-menu.js';
+import './signed-out-dropdown.js';
+import iaTopNavCSS from './styles/ia-topnav.js';
+import { buildTopNavMenus, defaultTopNavConfig } from './data/menus.js';
 
 export default class IATopNav extends LitElement {
   static get styles() {
@@ -19,6 +20,10 @@ export default class IATopNav extends LitElement {
   // so Typescript can find them
   static get properties() {
     return {
+      // we default to fully-qualified `https://archive.org` urls in nav, set to false for relatives
+      localLinks: Boolean,
+      // @see `data/menus.js` for a description:
+      waybackPagesArchived: String,
       // the base host is for navigation, so may be empty for relative links
       baseHost: { type: String },
       // the media base host is the base host for images, such as the profile picture
@@ -57,20 +62,38 @@ export default class IATopNav extends LitElement {
 
   constructor() {
     super();
-    this.baseHost = 'https://archive.org';
+    this.menuSetup();
     this.mediaBaseHost = 'https://archive.org';
     this.userProfileImagePath = '/services/img/user/profile';
     this.userProfileLastModified = '';
-    this.config = {};
+    this.config = defaultTopNavConfig;
     this.hideSearch = false;
     this.mediaSliderOpen = false;
-    this.menus = {};
     this.openMenu = '';
     this.searchIn = '';
     this.selectedMenuOption = '';
     this.secondIdentitySlotMode = '';
   }
 
+  updated(props) {
+    if (props.has('username') || props.has('localLinks') || props.has('baseHost') ||
+        props.has('waybackPagesArchived')) {
+      this.menuSetup();
+    }
+  }
+
+  menuSetup() {
+    this.localLinks = this.getAttribute('localLinks') !== 'false' && this.getAttribute('localLinks') !== false;
+    this.username = this.getAttribute('username')
+    this.waybackPagesArchived = this.getAttribute('waybackPagesArchived') ?? ''
+
+    // ensure we update other components that use `baseHost`
+    this.baseHost = this.localLinks ? '' : 'https://archive.org';
+
+    // re/build the nav
+    this.menus = buildTopNavMenus(this.username, this.localLinks, this.waybackPagesArchived);
+  }
+
   menuToggled({ detail }) {
     const currentMenu = this.openMenu;
     this.openMenu = currentMenu === detail.menuName ? '' : detail.menuName;

package/src/login-button.js

@@ -1,8 +1,8 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import icons from './assets/img/icons';
-import loginButtonCSS from './styles/login-button';
-import formatUrl from './lib/formatUrl';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import loginButtonCSS from './styles/login-button.js';
+import formatUrl from './lib/formatUrl.js';
 
 class LoginButton extends TrackedElement {
   static get styles() {

package/src/media-button.js

@@ -1,8 +1,8 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import icons from './assets/img/icons';
-import toSentenceCase from './lib/toSentenceCase';
-import mediaButtonCSS from './styles/media-button';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import toSentenceCase from './lib/toSentenceCase.js';
+import mediaButtonCSS from './styles/media-button.js';
 
 class MediaButton extends TrackedElement {
   static get styles() {

package/src/media-menu.js

@@ -1,8 +1,8 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html } from 'https://offshoot.ux.archive.org/lit.js';
 
-import './media-button';
-import mediaMenuCSS from './styles/media-menu';
-import formatUrl from './lib/formatUrl';
+import './media-button.js';
+import mediaMenuCSS from './styles/media-menu.js';
+import formatUrl from './lib/formatUrl.js';
 
 const menuSelection = [
   {
@@ -116,7 +116,7 @@ class MediaMenu extends LitElement {
       <div class="media-menu-container ${this.menuClass}">
         <div class="overflow-clip">
           <nav
-            class="media-menu"
+            class="media-menu-inner"
             aria-hidden="${!this.menuOpened}"
             aria-expanded="${this.menuOpened}"
           >

package/src/media-slider.js

@@ -1,6 +1,6 @@
-import { LitElement, html } from 'lit';
-import './media-subnav';
-import mediaSliderCSS from './styles/media-slider';
+import { LitElement, html } from 'https://offshoot.ux.archive.org/lit.js';
+import './media-subnav.js';
+import mediaSliderCSS from './styles/media-slider.js';
 
 class MediaSlider extends LitElement {
   static get styles() {
@@ -35,9 +35,6 @@ class MediaSlider extends LitElement {
     return true;
   }
 
-  get selectedMenuItems() {
-    return this.menus[this.selectedMenuOption];
-  }
 
   render() {
     const sliderDetailsClass = this.mediaSliderOpen ? 'open' : 'closed';
@@ -50,8 +47,51 @@ class MediaSlider extends LitElement {
               <media-subnav
                 .baseHost=${this.baseHost}
                 .config=${this.config}
-                .menu=${this.selectedMenuOption}
-                .menuItems=${this.selectedMenuItems}
+                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>

package/src/media-subnav.js

@@ -1,10 +1,10 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import './wayback-slider';
-import './more-slider';
-import mediaSubnavCSS from './styles/media-subnav';
-import toSentenceCase from './lib/toSentenceCase';
-import formatUrl from './lib/formatUrl';
+import { html } from 'https://offshoot.ux.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() {
@@ -16,7 +16,7 @@ class MediaSubnav extends TrackedElement {
       baseHost: { type: String },
       config: { type: Object },
       menu: { type: String },
-      menuItems: { type: Array },
+      menuItems: { type: Object },
     };
   }
 
@@ -25,20 +25,10 @@ class MediaSubnav extends TrackedElement {
 
     this.config = {};
     this.menu = '';
-    this.menuItems = [];
+    this.menuItems = {};
 
     // Begin properties not monitored by LitElement
     this.links = MediaSubnav.defaultLinks;
-    this.templates = {
-      web: () => html`<wayback-slider
-        .baseHost=${this.baseHost}
-        .config=${this.config}
-        .archiveItLinks=${this.menuItems.archiveItLinks}
-        .browserExtensionsLinks=${this.menuItems.browserExtensionsLinks}
-        .mobileAppsLinks=${this.menuItems.mobileAppsLinks}
-      ></wayback-slider>`,
-      more: () => html`<more-slider .baseHost=${this.baseHost} .config=${this.config} .menuItems=${this.menuItems}></more-slider>`,
-    };
   }
 
   shouldUpdate() {
@@ -73,14 +63,29 @@ class MediaSubnav extends TrackedElement {
   }
 
   render() {
-    const template = this.templates[this.menu];
-
     if (!this.menu) {
       return html``;
     }
 
-    if (template) {
-      return template();
+    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`

package/src/more-slider.js

@@ -1,8 +1,8 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import toSentenceCase from './lib/toSentenceCase';
-import moreSliderCSS from './styles/more-slider';
-import formatUrl from './lib/formatUrl';
+import { html } from 'https://offshoot.ux.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() {

package/src/nav-search.js

@@ -1,9 +1,9 @@
-import { nothing, html } from 'lit';
+import { nothing, html } from 'https://offshoot.ux.archive.org/lit.js';
 
-import TrackedElement from './tracked-element';
-import navSearchCSS from './styles/nav-search';
-import icons from './assets/img/icons';
-import formatUrl from './lib/formatUrl';
+import TrackedElement from './tracked-element.js';
+import navSearchCSS from './styles/nav-search.js';
+import icons from './assets/img/icons.js';
+import formatUrl from './lib/formatUrl.js';
 
 class NavSearch extends TrackedElement {
   static get styles() {

package/src/primary-nav.js

@@ -1,14 +1,14 @@
-import { html, nothing } from 'lit';
-import TrackedElement from './tracked-element';
-import icons from './assets/img/icons';
-import './assets/img/hamburger';
-import './login-button';
-import './nav-search';
-import './media-menu';
-import logoWordmarkStacked from './assets/img/wordmark-stacked';
-import primaryNavCSS from './styles/primary-nav';
-import locationHandler from './lib/location-handler';
-import formatUrl from './lib/formatUrl';
+import { html, nothing } from 'https://offshoot.ux.archive.org/lit.js';
+import TrackedElement from './tracked-element.js';
+import icons from './assets/img/icons.js';
+import './assets/img/hamburger.js';
+import './login-button.js';
+import './nav-search.js';
+import './media-menu.js';
+import logoWordmarkStacked from './assets/img/wordmark-stacked.js';
+import primaryNavCSS from './styles/primary-nav.js';
+import locationHandler from './lib/location-handler.js';
+import formatUrl from './lib/formatUrl.js';
 
 class PrimaryNav extends TrackedElement {
   static get styles() {
@@ -179,7 +179,7 @@ class PrimaryNav extends TrackedElement {
           ${this.secondLogoSlot}
         </div>
         ${this.searchMenu}
-        <a href="${formatUrl(this.config.uploadURL, this.baseHost)}" class="upload">
+        <a href="${formatUrl('/create', this.baseHost)}" class="upload">
           ${icons.upload}
           <span>Upload</span>
         </a>

package/src/save-page-form.js

@@ -1,6 +1,6 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import savePageFormCSS from './styles/save-page-form';
+import { html } from 'https://offshoot.ux.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() {

package/src/search-menu.js

@@ -1,7 +1,7 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import searchMenuCSS from './styles/search-menu';
-import formatUrl from './lib/formatUrl';
+import { html } from 'https://offshoot.ux.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() {
@@ -94,7 +94,7 @@ class SearchMenu extends TrackedElement {
     return html`
       <div class="menu-wrapper">
         <div
-          class="search-menu tx-slide ${this.menuClass}"
+          class="search-menu-inner tx-slide ${this.menuClass}"
           aria-hidden="${searchMenuHidden}"
           aria-expanded="${searchMenuExpanded}"
         >

package/src/signed-out-dropdown.js

@@ -1,5 +1,5 @@
-import DropdownMenu from './dropdown-menu';
-import signedOutDropdownStyles from './styles/signed-out-dropdown';
+import DropdownMenu from './dropdown-menu.js';
+import signedOutDropdownStyles from './styles/signed-out-dropdown.js';
 
 class SignedOutDropdown extends DropdownMenu {
   static get styles() {

package/src/styles/base.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export const subnavListCSS = css`
   h4 {

package/src/styles/desktop-subnav.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   ul {

package/src/styles/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   :host {

package/src/styles/ia-topnav.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   :host {
@@ -58,6 +58,10 @@ export default css`
     font-family: var(--themeFontFamily);
   }
 
+  primary-nav:focus {
+    outline: none !important;
+  }
+
   #close-layer {
     display: none;
     position: fixed;

package/src/styles/login-button.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   .dropdown-toggle {

package/src/styles/media-button.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   a {

package/src/styles/media-menu.js

@@ -1,11 +1,11 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   :host {
     outline: none;
   }
 
-  .media-menu {
+  .media-menu-inner {
     z-index: -1;
     top: -40rem;
     background-color: var(--mediaMenuBg);
@@ -27,12 +27,12 @@ export default css`
       position: relative;
     }
 
-    .media-menu {
+    .media-menu-inner {
       position: absolute;
       width: 100%;
     }
 
-    .open .media-menu {
+    .open .media-menu-inner {
       top: 0;
     }
 
@@ -55,7 +55,7 @@ export default css`
 
   /* Desktop view styles */
   @media (min-width: 890px) {
-    .media-menu {
+    .media-menu-inner {
       display: inline-block;
       position: static;
       width: auto;

package/src/styles/media-slider.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   .media-slider-container {
@@ -32,6 +32,10 @@ export default css`
     display: block;
   }
 
+  .hidden {
+    display: none;
+  }
+
   .info-box {
     padding: 1rem;
   }

package/src/styles/media-subnav.js

@@ -1,5 +1,5 @@
-import { css } from 'lit';
-import { subnavListCSS } from './base';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+import { subnavListCSS } from './base.js';
 
 export default [subnavListCSS, css`
   img {

package/src/styles/more-slider.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   ul {

package/src/styles/nav-search.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   input:focus {

package/src/styles/primary-nav.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   button:focus,

package/src/styles/save-page-form.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   div {

package/src/styles/search-menu.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   :host {
@@ -15,7 +15,7 @@ export default css`
     outline-width: 0.16rem;
     outline-style: auto;
   }
-  .search-menu {
+  .search-menu-inner {
     position: absolute;
     right: 0;
     left: 0;
@@ -50,7 +50,7 @@ export default css`
   }
 
   @media (min-width: 890px) {
-    .search-menu {
+    .search-menu-inner {
       overflow: visible;
       right: 2rem;
       left: auto;
@@ -64,7 +64,7 @@ export default css`
       box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
     }
 
-    .search-menu:after {
+    .search-menu-inner:after {
       position: absolute;
       right: 7px;
       top: -7px;

package/src/styles/signed-out-dropdown.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   @media (min-width: 890px) {

package/src/styles/user-menu.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   @media (min-width: 890px) {

package/src/styles/wayback-search.js

@@ -1,4 +1,4 @@
-import { css } from 'lit';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default css`
   form {

package/src/styles/wayback-slider.js

@@ -1,5 +1,5 @@
-import { css } from 'lit';
-import { subnavListCSS } from './base';
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+import { subnavListCSS } from './base.js';
 
 export default [subnavListCSS, css`
   @media (min-width: 890px) {

package/src/tracked-element.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from 'https://offshoot.ux.archive.org/lit.js';
 
 class TrackedElement extends LitElement {
   trackClick(e) {

package/src/user-menu.js

@@ -1,6 +1,6 @@
-import { html } from 'lit';
-import DropdownMenu from './dropdown-menu';
-import userMenuCSS from './styles/user-menu';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
+import DropdownMenu from './dropdown-menu.js';
+import userMenuCSS from './styles/user-menu.js';
 
 class UserMenu extends DropdownMenu {
   static get styles() {