@internetarchive/ia-topnav 2.0.0 → 2.0.1

package/src/dropdown-menu.ts

@@ -1,132 +1,132 @@
-import { CSSResult, html, nothing, PropertyValues, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-
-import icons from './assets/img/icons';
-import { defaultTopNavConfig } from './data/menus';
-import formatUrl from './lib/format-url';
-import { makeBooleanString } from './lib/make-boolean-string';
-import { IATopNavConfig, IATopNavLink } from './models';
-import dropdownMenuCSS from './styles/dropdown-menu';
-import TrackedElement from './tracked-element';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import KeyboardNavigation from './lib/keyboard-navigation';
-
-export default class DropdownMenu extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: Boolean }) hideSearch = false;
-  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
-  @property({ type: Boolean }) animated = false;
-  @property({ type: Boolean }) open = false;
-
-  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (this: HTMLElement, ev: KeyboardEvent) => any;
-
-  static get styles(): CSSResult[] {
-    return [dropdownMenuCSS];
-  }
-
-  updated(props: PropertyValues) {
-    if (props.has('open') && this.open) {
-      const container = this.shadowRoot?.querySelector(
-        '.nav-container',
-      ) as HTMLElement;
-
-      if (container) {
-        const keyboardNavigation = new KeyboardNavigation(
-          container,
-          'usermenu',
-        );
-        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
-        if (this.previousKeydownListener) {
-          this.removeEventListener('keydown', this.previousKeydownListener);
-        }
-        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
-      }
-    }
-  }
-
-  get dropdownItems() {
-    if (!this.menuItems) return nothing;
-
-    if (!Array.isArray(this.menuItems[0])) {
-      const submenu = this.menuItems as IATopNavLink[];
-      return this.dropdownSection(submenu);
-    }
-    return this.menuItems.map((submenu, i) => {
-      const joiner = i ? DropdownMenu.dropdownDivider : html``;
-      if (!Array.isArray(submenu)) {
-        return;
-      }
-      return [joiner, ...this.dropdownSection(submenu)];
-    });
-  }
-
-  static get dropdownDivider() {
-    return html`<li class="divider"></li>`;
-  }
-
-  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
-    return submenu.map(
-      (item) => html`
-        <li>
-          ${item.url
-            ? this.dropdownLink(item)
-            : DropdownMenu.dropdownText(item)}
-        </li>
-      `,
-    );
-  }
-
-  dropdownLink(link: IATopNavLink): TemplateResult {
-    const calloutText = this.config?.callouts?.[link.title];
-    const isMobileUpload = link.class === 'mobile-upload';
-    const isTabbable = this.open && !isMobileUpload;
-
-    return html`<a
-      href="${formatUrl(link.url, this.baseHost)}"
-      class=${ifDefined(link.class)}
-      tabindex="${isTabbable ? '' : '-1'}"
-      @click=${this.trackClick}
-      data-event-click-tracking="${this.config
-        ?.eventCategory}|Nav${link.analyticsEvent}"
-      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
-    >
-      ${isMobileUpload ? icons.uploadUnpadded : nothing} ${link.title}
-      ${calloutText
-        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
-        : nothing}
-    </a>`;
-  }
-
-  static dropdownText(item: IATopNavLink) {
-    return html`<span class="info-item">${item.title}</span>`;
-  }
-
-  get menuClass() {
-    const hiddenClass = this.hideSearch ? ' search-hidden' : '';
-    if (this.open) {
-      return `open${hiddenClass}`;
-    }
-    if (this.animated) {
-      return `closed${hiddenClass}`;
-    }
-    return `initial${hiddenClass}`;
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden="${makeBooleanString(!this.open)}"
-          aria-expanded="${makeBooleanString(this.open)}"
-        >
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
+import {
+  CSSResultGroup,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+
+import icons from './assets/img/icons';
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { IATopNavConfig, IATopNavLink } from './models';
+import dropdownMenuCSS from './styles/dropdown-menu';
+import TrackedElement from './tracked-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import KeyboardNavigation from './lib/keyboard-navigation';
+
+export default class DropdownMenu extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
+  @property({ type: Boolean }) animated = false;
+  @property({ type: Boolean }) open = false;
+
+  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (this: HTMLElement, ev: KeyboardEvent) => any;
+
+  static get styles(): CSSResultGroup {
+    return dropdownMenuCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('open') && this.open) {
+      const container = this.shadowRoot?.querySelector(
+        '.nav-container',
+      ) as HTMLElement;
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(
+          container,
+          'usermenu',
+        );
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  get dropdownItems() {
+    if (!this.menuItems) return nothing;
+
+    if (!Array.isArray(this.menuItems[0])) {
+      const submenu = this.menuItems as IATopNavLink[];
+      return this.dropdownSection(submenu);
+    }
+    return this.menuItems.map((submenu, i) => {
+      const joiner = i ? DropdownMenu.dropdownDivider : html``;
+      if (!Array.isArray(submenu)) {
+        return;
+      }
+      return [joiner, ...this.dropdownSection(submenu)];
+    });
+  }
+
+  static get dropdownDivider() {
+    return html`<li class="divider"></li>`;
+  }
+
+  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
+    return submenu.map(
+      (item) => html`
+        <li>
+          ${item.url
+            ? this.dropdownLink(item)
+            : DropdownMenu.dropdownText(item)}
+        </li>
+      `,
+    );
+  }
+
+  dropdownLink(link: IATopNavLink): TemplateResult {
+    const calloutText = this.config?.callouts?.[link.title];
+    const isMobileUpload = link.class === 'mobile-upload';
+    const isTabbable = this.open && !isMobileUpload;
+
+    return html`<a
+      href="${formatUrl(link.url, this.baseHost)}"
+      class=${ifDefined(link.class)}
+      tabindex="${isTabbable ? '' : '-1'}"
+      @click=${this.trackClick}
+      data-event-click-tracking="${this.config
+        ?.eventCategory}|Nav${link.analyticsEvent}"
+      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
+    >
+      ${isMobileUpload ? icons.uploadUnpadded : nothing} ${link.title}
+      ${calloutText
+        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
+        : nothing}
+    </a>`;
+  }
+
+  static dropdownText(item: IATopNavLink) {
+    return html`<span class="info-item">${item.title}</span>`;
+  }
+
+  get menuClass() {
+    if (this.open) return 'open';
+    if (this.animated) return 'closed';
+    return 'initial';
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${makeBooleanString(!this.open)}"
+          aria-expanded="${makeBooleanString(this.open)}"
+        >
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}

package/src/ia-topnav.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 
 import { buildTopNavMenus, defaultTopNavConfig } from './data/menus';
 import './desktop-subnav';
@@ -11,6 +11,7 @@ import {
   IATopNavSecondIdentitySlotMode,
 } from './models';
 import './primary-nav';
+import type { PrimaryNav } from './primary-nav';
 import './signed-out-dropdown';
 import iaTopNavCSS from './styles/ia-topnav';
 import './user-menu';
@@ -56,6 +57,11 @@ export class IATopNav extends LitElement {
     moveTo: string;
   };
 
+  @query('primary-nav') private primaryNav?: PrimaryNav;
+  /** Only one of user-menu or signed-out-dropdown is rendered at a time. */
+  @query('user-menu, signed-out-dropdown')
+  private accountDropdown?: HTMLElement;
+
   @state() private menus: IATopNavMenuConfig = buildTopNavMenus();
 
   private boundHandleKeydown = this.handleDocumentKeydown.bind(this);
@@ -127,6 +133,16 @@ export class IATopNav extends LitElement {
       return;
     }
     this.closeMediaSlider();
+
+    if (this.openMenu === 'user' || this.openMenu === 'login') {
+      if (this.primaryNav && this.accountDropdown) {
+        const right = this.primaryNav.getAccountDropdownOffset();
+        this.accountDropdown.style.setProperty(
+          '--dropdownMenuRight',
+          `${right}px`,
+        );
+      }
+    }
   }
 
   openMediaSlider() {
@@ -200,7 +216,6 @@ export class IATopNav extends LitElement {
         .menuItems=${this.userMenuItems}
         ?open=${this.openMenu === 'user'}
         .username=${this.username}
-        ?hideSearch=${this.hideSearch}
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
@@ -216,7 +231,6 @@ export class IATopNav extends LitElement {
         .baseHost=${this.normalizedBaseHost}
         .config=${this.config}
         .open=${this.signedOutOpened}
-        ?hideSearch=${this.hideSearch}
         tabindex="${this.signedOutTabIndex}"
         .menuItems=${this.signedOutMenuItems}
         @focusToOtherMenuItem=${(e: CustomEvent) => {

package/src/login-button.ts

@@ -4,7 +4,7 @@ import icons from './assets/img/icons';
 import loginButtonCSS from './styles/login-button';
 import formatUrl from './lib/format-url';
 import { makeBooleanString } from './lib/make-boolean-string';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { IATopNavConfig } from './models';
 import { defaultTopNavConfig } from './data/menus';
 
@@ -14,12 +14,23 @@ export class LoginButton extends TrackedElement {
   @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
   @property({ type: String }) openMenu = '';
 
+  @query('button.logged-out-menu') private toggleButton?: HTMLButtonElement;
+
   @state() private dropdownTabIndex = '';
 
   static get styles() {
     return loginButtonCSS;
   }
 
+  /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */
+  getDropdownToggleOffset(): number {
+    if (!this.toggleButton) return 0;
+    return (
+      this.getBoundingClientRect().right -
+      this.toggleButton.getBoundingClientRect().right
+    );
+  }
+
   get signupPath() {
     return formatUrl('/signup', this.baseHost);
   }

package/src/models.ts

@@ -1,58 +1,58 @@
-export interface IATopNavConfig {
-  /**
-   * Google Analytics event category
-   */
-  eventCategory?: string;
-
-  /**
-   * Copy to display for number of pages archived at the top of the Wayback search form
-   *
-   * ie. "425 billion"
-   */
-  waybackPagesArchived?: string;
-
-  /**
-   * Map from dropdown item ids to any callout text that should be applied beside them
-   */
-  callouts?: Record<string, string>;
-}
-
-export interface IATopNavLink {
-  title: string;
-
-  url?: string;
-
-  class?: string;
-
-  icon?: string;
-
-  analyticsEvent?: string;
-
-  external?: boolean;
-}
-
-export interface IATopNavMediaMenu {
-  heading: string;
-  iconLinks: IATopNavLink[];
-  featuredLinks: IATopNavLink[];
-  links: IATopNavLink[];
-  mobileAppsLinks: IATopNavLink[];
-  browserExtensionsLinks: IATopNavLink[];
-  archiveItLinks: IATopNavLink[];
-}
-
-export interface IATopNavMenuConfig {
-  audio: IATopNavMediaMenu;
-  images: IATopNavMediaMenu;
-  more: IATopNavMediaMenu;
-  signedOut: IATopNavLink[];
-  software: IATopNavMediaMenu;
-  texts: IATopNavMediaMenu;
-  user: IATopNavLink[];
-  userAdmin: IATopNavLink[];
-  userAdminFlags: IATopNavLink[];
-  video: IATopNavMediaMenu;
-  web: IATopNavMediaMenu;
-}
-
-export type IATopNavSecondIdentitySlotMode = 'allow' | '';
+export interface IATopNavConfig {
+  /**
+   * Google Analytics event category
+   */
+  eventCategory?: string;
+
+  /**
+   * Copy to display for number of pages archived at the top of the Wayback search form
+   *
+   * ie. "425 billion"
+   */
+  waybackPagesArchived?: string;
+
+  /**
+   * Map from dropdown item ids to any callout text that should be applied beside them
+   */
+  callouts?: Record<string, string>;
+}
+
+export interface IATopNavLink {
+  title: string;
+
+  url?: string;
+
+  class?: string;
+
+  icon?: string;
+
+  analyticsEvent?: string;
+
+  external?: boolean;
+}
+
+export interface IATopNavMediaMenu {
+  heading: string;
+  iconLinks: IATopNavLink[];
+  featuredLinks: IATopNavLink[];
+  links: IATopNavLink[];
+  mobileAppsLinks: IATopNavLink[];
+  browserExtensionsLinks: IATopNavLink[];
+  archiveItLinks: IATopNavLink[];
+}
+
+export interface IATopNavMenuConfig {
+  audio: IATopNavMediaMenu;
+  images: IATopNavMediaMenu;
+  more: IATopNavMediaMenu;
+  signedOut: IATopNavLink[];
+  software: IATopNavMediaMenu;
+  texts: IATopNavMediaMenu;
+  user: IATopNavLink[];
+  userAdmin: IATopNavLink[];
+  userAdminFlags: IATopNavLink[];
+  video: IATopNavMediaMenu;
+  web: IATopNavMediaMenu;
+}
+
+export type IATopNavSecondIdentitySlotMode = 'allow' | '';

package/src/primary-nav.ts

@@ -3,11 +3,12 @@ import TrackedElement from './tracked-element';
 import icons from './assets/img/icons';
 import './assets/img/hamburger';
 import './login-button';
+import type { LoginButton } from './login-button';
 import './media-menu';
 import logoWordmarkStacked from './assets/img/wordmark-stacked';
 import primaryNavCSS from './styles/primary-nav';
 import formatUrl from './lib/format-url';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
 import { defaultTopNavConfig } from './data/menus';
 
@@ -32,10 +33,32 @@ export class PrimaryNav extends TrackedElement {
     | undefined;
   signedOutMenuToggled: unknown;
 
+  @query('button.user-menu') private userMenuButton?: HTMLButtonElement;
+  @query('login-button') private loginButton?: HTMLElement;
+
   static get styles() {
     return primaryNavCSS;
   }
 
+  /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */
+  getAccountDropdownOffset(): number {
+    const hostRect = this.getBoundingClientRect();
+
+    if (this.userMenuButton) {
+      return hostRect.right - this.userMenuButton.getBoundingClientRect().right;
+    }
+
+    if (this.loginButton) {
+      const loginRect = this.loginButton.getBoundingClientRect();
+      const innerOffset = (
+        this.loginButton as LoginButton
+      ).getDropdownToggleOffset();
+      return hostRect.right - loginRect.right + innerOffset;
+    }
+
+    return 0;
+  }
+
   toggleMediaMenu(e: Event) {
     this.trackClick(e);
     this.dispatchEvent(

package/src/signed-out-dropdown.ts

@@ -1,11 +1,11 @@
-import { customElement } from 'lit/decorators.js';
-import DropdownMenu from './dropdown-menu';
-import dropdownMenuCSS from './styles/dropdown-menu';
-import signedOutDropdownStyles from './styles/signed-out-dropdown';
-
-@customElement('signed-out-dropdown')
-export class SignedOutDropdown extends DropdownMenu {
-  static get styles() {
-    return [dropdownMenuCSS, signedOutDropdownStyles];
-  }
-}
+import { CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import DropdownMenu from './dropdown-menu';
+import dropdownMenuCSS from './styles/dropdown-menu';
+
+@customElement('signed-out-dropdown')
+export class SignedOutDropdown extends DropdownMenu {
+  static get styles(): CSSResultGroup {
+    return dropdownMenuCSS;
+  }
+}