@internetarchive/elements 1.1.3-webdev-9241.0 → 1.1.3

package/dist/src/elements/ia-topnav/ia-topnav-primary-nav.js

@@ -1,653 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, nothing } from 'lit';
-import TrackedElement from './tracked-element.js';
-import icons from './assets/img/icons.js';
-import './ia-topnav-icon-hamburger.js';
-import './ia-topnav-login-button.js';
-import './ia-topnav-media-menu.js';
-import '../../elements/ia-sr-only-text/ia-sr-only-text.js';
-import logoWordmarkStacked from './assets/img/wordmark-stacked.js';
-import { formatUrl } from './lib/helpers.js';
-import { property, query } from 'lit/decorators.js';
-import { customElement } from '../../util/custom-element.js';
-import { TOPNAV_MOBILE_BREAKPOINT, } from './models.js';
-import { defaultTopNavConfig } from './data/menus.js';
-import themeStyles from '../../themes/theme-styles.js';
-import { localized, msg, str } from '@lit/localize';
-let PrimaryNav = class PrimaryNav extends TrackedElement {
-    constructor() {
-        super(...arguments);
-        this.mediaBaseHost = 'https://archive.org';
-        this.baseHost = '';
-        this.hideSearch = false;
-        this.config = defaultTopNavConfig;
-        this.openMenu = '';
-        this.screenName = '';
-        this.secondIdentitySlotMode = '';
-        this.selectedMenuOption = '';
-        this.signedOutMenuOpen = false;
-        this.userMenuOpen = false;
-        this.mediaMenuAnimate = false;
-        this.username = '';
-        this.userProfileImagePath = '';
-    }
-    updated(props) {
-        if (props.has('currentTab')) {
-            // early return
-            if (!this.currentTab || Object.keys(this.currentTab).length === 0)
-                return nothing;
-            const isUserMenuTab = this.currentTab && this.currentTab.mediatype === 'usermenu';
-            if (isUserMenuTab) {
-                const mediaButtons = Array.from(this.shadowRoot
-                    ?.querySelector('ia-topnav-media-menu')
-                    ?.shadowRoot?.querySelectorAll('ia-topnav-media-button') ?? []);
-                const lastMediaButton = mediaButtons.filter((element) => {
-                    return element.shadowRoot
-                        ?.querySelector('a')
-                        ?.classList.contains('images');
-                });
-                let nextElement;
-                if (this.username) {
-                    nextElement = this.shadowRoot?.querySelector('a.upload');
-                }
-                else {
-                    nextElement = this.shadowRoot
-                        ?.querySelector('ia-topnav-login-button')
-                        ?.shadowRoot?.querySelector('span a');
-                }
-                const menuItemElement = lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');
-                const focusElement = this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;
-                if (focusElement) {
-                    focusElement.focus();
-                }
-            }
-            else if (this.currentTab.moveTo === 'next') {
-                if (this.shadowRoot?.querySelector('.user-menu')) {
-                    (this.shadowRoot?.querySelector('.user-menu')).focus();
-                }
-                else {
-                    this.shadowRoot
-                        ?.querySelector('ia-topnav-login-button')
-                        ?.shadowRoot?.querySelectorAll('span a')[0]?.focus();
-                }
-            }
-        }
-    }
-    render() {
-        // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
-        return html `
-      <nav class=${this.hideSearch ? 'hide-search' : ''}>
-        <button
-          class="hamburger"
-          @click="${this.toggleMediaMenu}"
-          data-event-click-tracking="${this.config?.eventCategory}|NavHamburger"
-          title=${msg('Open main menu')}
-        >
-          <ia-topnav-icon-hamburger
-            ?active=${this.openMenu === 'media'}
-          ></ia-topnav-icon-hamburger>
-        </button>
-
-        <div class=${`branding ${this.secondLogoClass}`}>
-          <a
-            .href=${formatUrl('/', this.baseHost)}
-            @click=${this.trackClick}
-            data-event-click-tracking="${this.config?.eventCategory}|NavHome"
-            title=${msg('Go home')}
-            class="link-home"
-            >${icons.iaLogo}${logoWordmarkStacked}</a
-          >
-          ${this.secondLogoSlot}
-        </div>
-        <ia-topnav-media-menu
-          .baseHost=${this.baseHost}
-          .config=${this.config}
-          ?mediaMenuAnimate=${this.mediaMenuAnimate}
-          .selectedMenuOption=${this.selectedMenuOption}
-          .openMenu=${this.openMenu}
-          .currentTab=${this.currentTab}
-        ></ia-topnav-media-menu>
-        ${this.searchSlotContainer}
-        <div class="right-side-section">
-          ${this.mobileDonateHeart} ${this.userStateTemplate}
-          ${this.uploadButtonTemplate} ${this.searchMenu}
-        </div>
-      </nav>
-    `;
-    }
-    /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */
-    getAccountDropdownOffset() {
-        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.getDropdownToggleOffset();
-            return hostRect.right - loginRect.right + innerOffset;
-        }
-        return 0;
-    }
-    toggleMediaMenu(e) {
-        this.trackClick(e);
-        this.dispatchEvent(new CustomEvent('menuToggled', {
-            detail: {
-                menuName: 'media',
-            },
-        }));
-    }
-    toggleSearchMenu(e) {
-        this.trackClick(e);
-        this.dispatchEvent(new CustomEvent('menuToggled', {
-            detail: {
-                menuName: 'search',
-            },
-        }));
-    }
-    toggleUserMenu(e) {
-        this.trackClick(e);
-        this.dispatchEvent(new CustomEvent('menuToggled', {
-            detail: {
-                menuName: 'user',
-            },
-        }));
-    }
-    get userIcon() {
-        const userMenuClass = this.openMenu === 'user' ? 'active' : '';
-        const userMenuToolTip = this.openMenu === 'user'
-            ? msg('Close user menu')
-            : msg('Expand user menu');
-        return html `
-      <button
-        class="user-menu ${userMenuClass}"
-        title="${userMenuToolTip}"
-        @click="${this.toggleUserMenu}"
-        data-event-click-tracking="${this.config?.eventCategory}|NavUserMenu"
-      >
-        <img
-          src="${this.mediaBaseHost}${this.userProfileImagePath}"
-          alt=${msg(str `Profile picture for ${this.screenName}`)}
-        />
-        <span class="screen-name" dir="auto">${this.screenName}</span>
-      </button>
-    `;
-    }
-    get loginIcon() {
-        return html `
-      <ia-topnav-login-button
-        .baseHost=${this.baseHost}
-        .config=${this.config}
-        .dropdownOpen=${this.signedOutMenuOpen}
-        .openMenu=${this.openMenu}
-        @signedOutMenuToggled=${this.signedOutMenuToggled}
-      ></ia-topnav-login-button>
-    `;
-    }
-    get searchMenuOpen() {
-        return this.openMenu === 'search';
-    }
-    get allowSecondaryIcon() {
-        return this.secondIdentitySlotMode === 'allow';
-    }
-    /**
-     * The search slot container, rendered between ia-topnav-media-menu and
-     * right-side-section so it sits left of the Upload button on desktop.
-     */
-    get searchSlotContainer() {
-        if (this.hideSearch)
-            return nothing;
-        return html `
-      <div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
-        <slot name="search"></slot>
-      </div>
-    `;
-    }
-    get searchMenu() {
-        if (this.hideSearch)
-            return nothing;
-        return html `
-      <button
-        class="search-trigger"
-        @click="${this.toggleSearchMenu}"
-        data-event-click-tracking="${this.config?.eventCategory}|NavSearchOpen"
-      >
-        ${icons.search}
-      </button>
-    `;
-    }
-    get mobileDonateHeart() {
-        return html `
-      <a
-        class="mobile-donate-link"
-        .href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
-      >
-        ${icons.donateUnpadded}
-        <ia-sr-only-text>${msg('Donate to the archive')}</ia-sr-only-text>
-      </a>
-    `;
-    }
-    get uploadButtonTemplate() {
-        return html ` <a
-      .href="${formatUrl('/upload', this.baseHost)}"
-      class="upload"
-      @focus=${this.toggleMediaMenu}
-    >
-      ${icons.upload}
-      <span>${msg('Upload')}</span>
-    </a>`;
-    }
-    get userStateTemplate() {
-        return html `<div class="user-info">
-      ${this.username ? this.userIcon : this.loginIcon}
-    </div>`;
-    }
-    get secondLogoSlot() {
-        return this.allowSecondaryIcon
-            ? html `
-          <slot name="opt-sec-logo"></slot>
-          <slot name="opt-sec-logo-mobile"></slot>
-        `
-            : nothing;
-    }
-    get secondLogoClass() {
-        return this.allowSecondaryIcon ? 'second-logo' : '';
-    }
-    static get styles() {
-        return [
-            themeStyles,
-            css `
-        button:focus,
-        input:focus {
-          outline: none;
-        }
-
-        nav {
-          position: relative;
-          display: flex;
-          height: 4rem;
-          grid-template-areas: 'hamburger empty heart search user';
-          -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
-          grid-template-columns: 4rem auto 4rem 4rem 4rem;
-          -ms-grid-rows: 100%;
-          grid-template-rows: 100%;
-          background: var(--primaryNavBg);
-          border-bottom: 1px solid var(--primaryNavBottomBorder);
-        }
-
-        nav.hide-search {
-          grid-template-areas: 'hamburger empty heart user';
-          -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;
-          grid-template-columns: 4rem auto 4rem 4rem;
-        }
-
-        .right-side-section {
-          display: flex;
-          margin-left: auto;
-          user-select: none;
-        }
-        button {
-          background: none;
-          color: inherit;
-          border: none;
-          font: inherit;
-          cursor: pointer;
-        }
-
-        .branding {
-          position: static;
-          float: left;
-          margin: 0 !important;
-          padding: 0 5px 0 10px;
-          -webkit-transform: translate(0, 0);
-          -ms-transform: translate(0, 0);
-          transform: translate(0, 0);
-        }
-
-        slot,
-        .branding {
-          display: flex;
-          justify-content: left;
-          align-items: center;
-        }
-
-        ia-topnav-media-menu {
-          flex: 1;
-          justify-self: stretch;
-        }
-
-        .ia-logo {
-          height: 3rem;
-          width: 2.7rem;
-          display: inline-block;
-        }
-        .ia-wordmark {
-          height: 3rem;
-          width: 9.5rem;
-        }
-        .ia-logo,
-        .ia-wordmark {
-          margin-right: 5px;
-        }
-
-        .hamburger {
-          -ms-grid-row: 1;
-          -ms-grid-column: 1;
-          grid-area: hamburger;
-          padding: 0;
-        }
-        .hamburger svg {
-          height: 4rem;
-          width: 4rem;
-          fill: var(--activeColor);
-        }
-
-        .mobile-donate-link {
-          display: inline-block;
-        }
-        .mobile-donate-link svg {
-          height: 4rem;
-          width: 4rem;
-        }
-        .mobile-donate-link .fill-color {
-          fill: rgb(255, 0, 0);
-        }
-
-        .search-trigger {
-          padding: 0;
-        }
-        .search-trigger svg {
-          height: 4rem;
-          width: 4rem;
-        }
-        .search-trigger .fill-color {
-          fill: var(--iconFill);
-        }
-
-        .search-container {
-          display: none;
-        }
-
-        .search-container.open {
-          display: flex;
-          position: absolute;
-          top: 0;
-          right: 4rem;
-          bottom: 0;
-          left: 4rem;
-          z-index: 3;
-          padding: 0.5rem;
-          border-radius: 1rem 1rem 0 0;
-          background: var(--primaryNavBg);
-          align-items: center;
-          animation: fade-in 0.2s forwards;
-        }
-
-        .search-container ::slotted(*) {
-          display: block;
-        }
-
-        .search-container slot {
-          width: 100%;
-        }
-
-        @keyframes fade-in {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 1;
-          }
-        }
-
-        .upload {
-          display: none;
-        }
-
-        .upload span {
-          display: none;
-        }
-
-        .upload svg {
-          height: 3rem;
-          width: 3rem;
-        }
-
-        .screen-name {
-          display: none;
-          font-size: 1.3rem;
-          vertical-align: middle;
-          text-transform: uppercase;
-        }
-
-        .user-menu {
-          color: var(--lightTextColor);
-          padding: 0.5rem;
-          height: 100%;
-        }
-
-        button.user-menu:hover,
-        button.user-menu:focus {
-          color: var(--linkHoverColor);
-          outline: none;
-        }
-
-        .user-menu.active {
-          border-radius: 1rem 1rem 0 0;
-          background: var(--activeButtonBg);
-        }
-
-        .user-menu img {
-          display: block;
-          width: 3rem;
-          height: 3rem;
-        }
-
-        .link-home {
-          text-decoration: none;
-          display: inline-flex;
-        }
-        a.link-home:focus,
-        a.link-home:focus-visible {
-          outline-offset: 1px;
-        }
-
-        @media only screen and (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) and (max-device-width: 905px) {
-          .branding.second-logo {
-            padding-right: 0;
-          }
-        }
-
-        @media (min-width: 906px) {
-          .branding.second-logo {
-            padding-right: 20px;
-          }
-        }
-
-        @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
-          slot[name='opt-sec-logo'] {
-            display: none;
-          }
-
-          .right-side-section {
-            display: initial;
-          }
-          .right-side-section .user-info {
-            float: right;
-          }
-        }
-
-        @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-          :host {
-            --userIconWidth: 3.2rem;
-            --userIconHeight: 3.2rem;
-          }
-
-          nav {
-            display: flex;
-            z-index: 4;
-            height: 5rem;
-            padding-right: 1.5rem;
-          }
-
-          slot[name='opt-sec-logo-mobile'] {
-            display: none;
-          }
-
-          .ia-logo,
-          .ia-wordmark {
-            margin-right: 10px;
-          }
-
-          .hamburger,
-          .search-trigger,
-          .mobile-donate-link {
-            display: none;
-          }
-
-          .user-info {
-            display: block;
-            float: right;
-            vertical-align: middle;
-            height: 100%;
-          }
-
-          .user-info .user-menu img {
-            height: 3rem;
-            width: 3rem;
-            margin-right: 0.5rem;
-          }
-
-          .user-menu {
-            padding: 1rem 0.5rem;
-          }
-          .user-menu.active {
-            background: transparent;
-          }
-
-          .user-menu img {
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 0.5rem;
-          }
-
-          .upload {
-            display: block;
-            padding: 1rem 0.5rem;
-            float: right;
-            font-size: 1.4rem;
-            text-transform: uppercase;
-            text-decoration: none;
-            color: var(--lightTextColor);
-          }
-          .upload:active,
-          .upload:focus,
-          .upload:hover {
-            color: var(--linkHoverColor);
-          }
-          .upload:focus-visible {
-            outline: none;
-          }
-
-          .upload svg {
-            vertical-align: middle;
-            fill: var(--iconFill);
-          }
-
-          .upload:hover svg,
-          .upload:focus svg,
-          .upload:active svg {
-            fill: var(--linkHoverColor);
-          }
-
-          .search-container,
-          .search-container.open {
-            display: flex;
-            position: static;
-            top: auto;
-            right: auto;
-            bottom: auto;
-            left: auto;
-            align-items: center;
-            padding: 0 0 0 1rem;
-            background: transparent;
-            border-radius: 0;
-            z-index: auto;
-          }
-
-          .search-container slot {
-            width: auto;
-          }
-        }
-
-        @media (min-width: 990px) {
-          .screen-name {
-            display: inline-block;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            max-width: 165px;
-          }
-
-          .upload span {
-            display: inline-block;
-            vertical-align: middle;
-          }
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "mediaBaseHost", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "baseHost", void 0);
-__decorate([
-    property({ type: Boolean })
-], PrimaryNav.prototype, "hideSearch", void 0);
-__decorate([
-    property({ type: Object })
-], PrimaryNav.prototype, "config", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "openMenu", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "screenName", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "secondIdentitySlotMode", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "selectedMenuOption", void 0);
-__decorate([
-    property({ type: Boolean })
-], PrimaryNav.prototype, "signedOutMenuOpen", void 0);
-__decorate([
-    property({ type: Boolean })
-], PrimaryNav.prototype, "userMenuOpen", void 0);
-__decorate([
-    property({ type: Boolean })
-], PrimaryNav.prototype, "mediaMenuAnimate", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "username", void 0);
-__decorate([
-    property({ type: String })
-], PrimaryNav.prototype, "userProfileImagePath", void 0);
-__decorate([
-    property({ type: Object })
-], PrimaryNav.prototype, "currentTab", void 0);
-__decorate([
-    query('button.user-menu')
-], PrimaryNav.prototype, "userMenuButton", void 0);
-__decorate([
-    query('ia-topnav-login-button')
-], PrimaryNav.prototype, "loginButton", void 0);
-PrimaryNav = __decorate([
-    customElement('ia-topnav-primary-nav'),
-    localized()
-], PrimaryNav);
-export { PrimaryNav };
-//# sourceMappingURL=ia-topnav-primary-nav.js.map