@internetarchive/ia-topnav 2.0.0 → 2.0.1-alpha-webdev8396.0

package/src/login-button.ts

@@ -1,78 +1,89 @@
-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/format-url';
-import { makeBooleanString } from './lib/make-boolean-string';
-import { customElement, property, state } from 'lit/decorators.js';
-import { IATopNavConfig } from './models';
-import { defaultTopNavConfig } from './data/menus';
-
-@customElement('login-button')
-export class LoginButton extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: String }) openMenu = '';
-
-  @state() private dropdownTabIndex = '';
-
-  static get styles() {
-    return loginButtonCSS;
-  }
-
-  get signupPath() {
-    return formatUrl('/signup', this.baseHost);
-  }
-
-  get loginPath() {
-    return formatUrl('/login', this.baseHost);
-  }
-
-  get analyticsEvent() {
-    return `${this.config?.eventCategory}|NavLoginIcon`;
-  }
-
-  get menuOpened(): boolean {
-    return this.openMenu === 'login';
-  }
-
-  get avatarClass() {
-    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
-  }
-
-  toggleDropdown(e: Event) {
-    e.preventDefault();
-    this.trackClick(e);
-    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
-    this.dispatchEvent(
-      new CustomEvent('menuToggled', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          menuName: 'login',
-        },
-      }),
-    );
-  }
-
-  render() {
-    return html`
-      <div class="logged-out-toolbar">
-        <button
-          class="logged-out-menu ${this.avatarClass}"
-          @click=${this.toggleDropdown}
-          data-event-click-tracking="${this.analyticsEvent}"
-          aria-label="Toggle login menu"
-          aria-expanded="${makeBooleanString(this.menuOpened)}"
-        >
-          ${icons.user}
-        </button>
-        <span>
-          <a href="${this.signupPath}">Sign up</a>
-          |
-          <a href="${this.loginPath}">Log in</a>
-        </span>
-      </div>
-    `;
-  }
-}
+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/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('login-button')
+export class LoginButton extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @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);
+  }
+
+  get loginPath() {
+    return formatUrl('/login', this.baseHost);
+  }
+
+  get analyticsEvent() {
+    return `${this.config?.eventCategory}|NavLoginIcon`;
+  }
+
+  get menuOpened(): boolean {
+    return this.openMenu === 'login';
+  }
+
+  get avatarClass() {
+    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+  }
+
+  toggleDropdown(e: Event) {
+    e.preventDefault();
+    this.trackClick(e);
+    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          menuName: 'login',
+        },
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="logged-out-toolbar">
+        <button
+          class="logged-out-menu ${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+          aria-label="Toggle login menu"
+          aria-expanded="${makeBooleanString(this.menuOpened)}"
+        >
+          ${icons.user}
+        </button>
+        <span>
+          <a href="${this.signupPath}">Sign up</a>
+          |
+          <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+  }
+}

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