@internetarchive/elements 0.2.14-webdev-8969.0 → 0.3.0

package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/interfaces/event-interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,MAAM,EACP,MAAM,mBAAmB,CAAC;AAE3B,sCAAsC;AACtC,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,EAAE,CAAC;QAChC,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;KAChC,CAAC;CACH;AAED,sBAAsB;AACtB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC;KACjB,CAAC;CACH;AAED,wCAAwC;AACxC,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,qBAAqB,EAAE,CAAC;CACjC;AAED,4CAA4C;AAC5C,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,qBAAqB,EAAE,CAAC;CACjC;AAED,8BAA8B;AAC9B,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,IAAI,EAAE,sBAAsB,CAAC;IAC7B,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;CACH;AAED,2BAA2B;AAC3B,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,IAAI,EAAE,qBAAqB,CAAC;IAC5B,MAAM,EAAE;QACN,MAAM,EAAE,OAAO,CAAC;KACjB,CAAC;CACH"}

package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=event-interfaces.js.map

package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-interfaces.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/interfaces/event-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './menu-interfaces';\n\n/** Toggles Menu && Sets open panel */\nexport interface ToggleSideMenuOpenEvent extends CustomEvent {\n  type: 'updateSideMenu';\n  detail: {\n    menuId: MenuId | undefined | '';\n    action: 'open' | 'toggle' | '';\n  };\n}\n\n/** Sets open panel */\nexport interface ToggleSidePanelOpenEvent extends CustomEvent {\n  type: 'menuTypeSelected';\n  detail: {\n    id: MenuId | '';\n  };\n}\n\n/** Sets menu order that is displayed */\nexport interface SetSideMenuContentsEvent extends CustomEvent {\n  type: 'menuUpdated';\n  detail: MenuProviderInterface[];\n}\n\n/** Sets menu shortcuts that is displayed */\nexport interface SetSideMenuShortcutsEvent extends CustomEvent {\n  type: 'menuUpdated';\n  detail: MenuShortcutInterface[];\n}\n\n/** Toggles fullscreen mode */\nexport interface ManageFullscreenEvent extends CustomEvent {\n  type: 'ViewportInFullScreen';\n  detail: {\n    isFullScreen: boolean;\n  };\n}\n\n/** Toggles loading view */\nexport interface LoadingStateUpdatedEvent extends CustomEvent {\n  type: 'loadingStateUpdated';\n  detail: {\n    loaded: boolean;\n  };\n}\n"]}

package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts

@@ -0,0 +1,23 @@
+import { TemplateResult } from 'lit';
+export type MenuId = string;
+export interface MenuShortcutInterface {
+    icon: TemplateResult;
+    id: MenuId;
+    label: string;
+}
+export interface MenuDetailsInterface extends MenuShortcutInterface {
+    menuDetails?: TemplateResult;
+    selected?: boolean;
+    followable?: boolean;
+    href?: string;
+    component?: TemplateResult;
+}
+export interface MenuProviderInterface extends MenuDetailsInterface {
+    /** archive.org item identifier. */
+    identifier: string;
+    baseHost: string;
+    subPrefix: string;
+    updated?: unknown;
+    actionButton?: TemplateResult;
+}
+//# sourceMappingURL=menu-interfaces.d.ts.map

package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/interfaces/menu-interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAC5B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE,mCAAmC;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B"}

package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=menu-interfaces.js.map

package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-interfaces.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/interfaces/menu-interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\n\nexport type MenuId = string;\nexport interface MenuShortcutInterface {\n  icon: TemplateResult;\n  id: MenuId;\n  label: string;\n}\n\nexport interface MenuDetailsInterface extends MenuShortcutInterface {\n  menuDetails?: TemplateResult;\n  selected?: boolean;\n  followable?: boolean;\n  href?: string;\n  component?: TemplateResult;\n}\n\nexport interface MenuProviderInterface extends MenuDetailsInterface {\n  /** archive.org item identifier. */\n  identifier: string;\n  baseHost: string;\n  subPrefix: string;\n  updated?: unknown;\n  actionButton?: TemplateResult;\n}\n"]}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, nothing, PropertyValues, TemplateResult, type CSSResultGroup } from 'lit';
+import { shareIcon } from './share-icons.js';
+type ShareOption = {
+    name: string;
+    icon: TemplateResult | string;
+    url: string;
+};
+/** Icon for the share menu shortcut / menu entry. */
+export { shareIcon };
+/**
+ * The "share this item" side panel: social sharing links (Twitter, Facebook,
+ * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.
+ * Sharing options are derived from the item identifier/metadata and rebuilt
+ * whenever `sharingOptions` is reset to empty.
+ */
+export declare class IAItemNavSharePanel extends LitElement {
+    baseHost: string;
+    creator: string;
+    description: string;
+    embedOptionsVisible: boolean;
+    identifier: string;
+    sharingOptions: ShareOption[];
+    type: string;
+    renderHeader: boolean;
+    fileSubPrefix: string;
+    private copyNoteTimeouts;
+    updated(changed: PropertyValues): void;
+    loadProviders(): void;
+    /**
+     * Copies the embed snippet in the clicked `.code` block, preferring the async
+     * Clipboard API and falling back to the legacy `execCommand` path for
+     * browsers that lack it, then briefly flashes the "Copied" note.
+     */
+    private copyToClipboard;
+    get iframeEmbed(): string;
+    get bbcodeEmbed(): string;
+    get helpURL(): string;
+    get header(): TemplateResult | typeof nothing;
+    render(): TemplateResult;
+    static get styles(): CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-itemnav-share-panel': IAItemNavSharePanel;
+    }
+}
+//# sourceMappingURL=ia-itemnav-share-panel.d.ts.map

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-itemnav-share-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EACL,SAAS,EAOV,MAAM,eAAe,CAAC;AAEvB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACrB,QAAQ,SAAiB;IAEzB,OAAO,SAAM;IAEb,WAAW,SAAM;IAEhB,mBAAmB,UAAS;IAE7B,UAAU,SAAM;IAEjB,cAAc,EAAE,WAAW,EAAE,CAAM;IAElC,IAAI,SAAM;IAET,YAAY,UAAS;IAEtB,aAAa,SAAM;IAE/C,OAAO,CAAC,gBAAgB,CAGpB;IAEJ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IA+DrB;;;;OAIG;YACW,eAAe;IAuB7B,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO,CAG5C;IAED,MAAM,IAAI,cAAc;IAwCxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAwJlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js

@@ -0,0 +1,352 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import themeStyles from '../../../themes/theme-styles.js';
+import { shareIcon, twitterIcon, facebookIcon, tumblrIcon, pinterestIcon, emailIcon, linkIcon, } from './share-icons.js';
+/** Icon for the share menu shortcut / menu entry. */
+export { shareIcon };
+/**
+ * The "share this item" side panel: social sharing links (Twitter, Facebook,
+ * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.
+ * Sharing options are derived from the item identifier/metadata and rebuilt
+ * whenever `sharingOptions` is reset to empty.
+ */
+let IAItemNavSharePanel = class IAItemNavSharePanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseHost = 'archive.org';
+        this.creator = '';
+        this.description = '';
+        this.embedOptionsVisible = false;
+        this.identifier = '';
+        this.sharingOptions = [];
+        this.type = '';
+        this.renderHeader = false;
+        this.fileSubPrefix = '';
+        this.copyNoteTimeouts = new WeakMap();
+    }
+    updated(changed) {
+        if (changed.has('sharingOptions') && !this.sharingOptions.length) {
+            this.loadProviders();
+        }
+    }
+    loadProviders() {
+        let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;
+        if (this.fileSubPrefix) {
+            shareUrl += `/${this.fileSubPrefix}`;
+        }
+        const shareBlurb = [
+            this.description,
+            this.creator,
+            'Free Download, Borrow, and Streaming',
+            'Internet Archive',
+        ]
+            .filter(Boolean)
+            .join(' : ');
+        this.sharingOptions = [
+            {
+                name: 'Twitter',
+                icon: twitterIcon,
+                url: `https://twitter.com/intent/tweet?${new URLSearchParams({
+                    url: shareUrl,
+                    text: shareBlurb,
+                    via: 'internetarchive',
+                })}`,
+            },
+            {
+                name: 'Facebook',
+                icon: facebookIcon,
+                url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({
+                    u: shareUrl,
+                })}`,
+            },
+            {
+                name: 'Tumblr',
+                icon: tumblrIcon,
+                url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams({
+                    posttype: 'link',
+                    canonicalUrl: shareUrl,
+                    title: shareBlurb,
+                })}`,
+            },
+            {
+                name: 'Pinterest',
+                icon: pinterestIcon,
+                url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams({
+                    url: shareUrl,
+                    description: shareBlurb,
+                })}`,
+            },
+            {
+                name: 'Email',
+                icon: emailIcon,
+                url: `mailto:?${new URLSearchParams({
+                    subject: shareBlurb,
+                    body: shareUrl,
+                })}`,
+            },
+        ];
+    }
+    /**
+     * Copies the embed snippet in the clicked `.code` block, preferring the async
+     * Clipboard API and falling back to the legacy `execCommand` path for
+     * browsers that lack it, then briefly flashes the "Copied" note.
+     */
+    async copyToClipboard(event) {
+        const currentTarget = event.currentTarget;
+        const textarea = currentTarget.querySelector('textarea');
+        const note = currentTarget.querySelector('small');
+        if (!textarea || !note)
+            return;
+        try {
+            await navigator.clipboard.writeText(textarea.value);
+        }
+        catch {
+            // Fallback for browsers without the async Clipboard API.
+            textarea.select();
+            document.execCommand('copy');
+            textarea.blur();
+        }
+        note.classList.add('visible');
+        clearTimeout(this.copyNoteTimeouts.get(note));
+        this.copyNoteTimeouts.set(note, setTimeout(() => note.classList.remove('visible'), 4000));
+    }
+    get iframeEmbed() {
+        return `<iframe
+      src="https://${this.baseHost}/embed/${this.identifier}"
+      width="560" height="384" frameborder="0"
+      webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen
+    ></iframe>`;
+    }
+    get bbcodeEmbed() {
+        return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;
+    }
+    get helpURL() {
+        return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;
+    }
+    get header() {
+        const header = html `<header><h3>Share this ${this.type}</h3></header>`;
+        return this.renderHeader ? header : nothing;
+    }
+    render() {
+        return html `
+      ${this.header}
+      <div>
+        ${this.sharingOptions.map((option) => html `<a class="share-option" href=${option.url} target="_blank">
+              ${option.icon} ${option.name}
+            </a>`)}
+        <details>
+          <summary class="share-option">
+            ${linkIcon} Get an embeddable link
+          </summary>
+          <div class="embed">
+            <h4>Embed</h4>
+            <div class="code" @click=${this.copyToClipboard}>
+              <textarea readonly>${this.iframeEmbed}</textarea>
+              <small>Copied to clipboard</small>
+            </div>
+            <h4>
+              Embed for wordpress.com hosted blogs and archive.org item
+              &lt;description&gt; tags
+            </h4>
+            <div class="code" @click=${this.copyToClipboard}>
+              <textarea readonly>${this.bbcodeEmbed}</textarea>
+              <small>Copied to clipboard</small>
+            </div>
+            <p>
+              Want more?
+              <a href=${this.helpURL}
+                >Advanced embedding details, examples, and help</a
+              >!
+            </p>
+          </div>
+        </details>
+      </div>
+    `;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --item-navigator-text-color--: var(
+            --item-navigator-text-color,
+            var(--true-white)
+          );
+          --item-navigator-border-color--: var(
+            --item-navigator-border-color,
+            #4b4b4b
+          );
+          /* Icons follow the adjustable text color by default. */
+          --item-navigator-icon-color--: var(
+            --item-navigator-icon-color,
+            var(--item-navigator-text-color--)
+          );
+          --item-navigator-share-embed-bg--: var(
+            --item-navigator-share-embed-bg,
+            #151515
+          );
+
+          display: block;
+          height: 100%;
+          overflow-y: auto;
+          /* 10px base (petabox scale); internal sizing is em against it. */
+          --item-navigator-base-font-size--: var(
+            --item-navigator-base-font-size,
+            10px
+          );
+          font-size: var(--item-navigator-base-font-size--);
+          color: var(--item-navigator-text-color--);
+          box-sizing: border-box;
+        }
+
+        header {
+          display: flex;
+          align-items: baseline;
+        }
+
+        h3 {
+          padding: 0;
+          margin: 0 1em 0 0;
+          font-size: 1.6em;
+        }
+
+        h4 {
+          font-size: 1.4em;
+        }
+
+        :host > div {
+          padding: 1em 0;
+        }
+
+        .share-option {
+          display: block;
+          padding: 0.5em 0;
+          font-size: 1.6em;
+          text-decoration: none;
+          color: var(--item-navigator-text-color--);
+          cursor: pointer;
+          transition: background-color 0.2s;
+          border-radius: 6px;
+        }
+
+        .share-option:hover {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+
+        .share-option > * {
+          display: inline-block;
+          padding: 0.2em;
+          margin-right: 1em;
+          vertical-align: middle;
+          border: 1px solid var(--item-navigator-border-color--);
+          border-radius: 7px;
+        }
+
+        .share-option .ia-icon {
+          /* Reset to the base so the icon (em) doesn't compound against the
+             share-option's enlarged font-size. */
+          font-size: var(--item-navigator-base-font-size--);
+          width: 2em;
+          height: 2em;
+        }
+
+        /* Our glyphs are masked spans: the mask supplies the shape, this
+           supplies the paint. */
+        span.ia-icon {
+          background-color: var(--item-navigator-icon-color--);
+        }
+
+        /* Host-supplied icons may still be inline svg, so keep theming those
+           the original way. */
+        .ia-icon .fill-color {
+          fill: var(--item-navigator-icon-color--);
+        }
+
+        /* Hide the triangle that appears on details tags */
+        summary::marker {
+          content: '';
+        }
+
+        summary::-webkit-details-marker {
+          display: none;
+        }
+
+        .embed {
+          padding-right: 5px;
+        }
+
+        .embed a {
+          color: var(--item-navigator-text-color--);
+        }
+
+        .code {
+          position: relative;
+        }
+
+        textarea {
+          display: block;
+          width: 100%;
+          height: 120px;
+          padding: 0.8em 1em;
+          box-sizing: border-box;
+          resize: none;
+          cursor: pointer;
+          font: normal 1.4em var(--base-font-family);
+          color: var(--item-navigator-text-color--);
+          background: var(--item-navigator-share-embed-bg--);
+        }
+
+        small {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 3em;
+          padding: 0.5em 1em;
+          box-sizing: border-box;
+          font: normal 1.2em/2em var(--base-font-family);
+          color: var(--item-navigator-share-embed-bg--);
+          background: var(--item-navigator-text-color--);
+          opacity: 0;
+          transition: opacity 300ms linear;
+        }
+
+        small.visible {
+          opacity: 1;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAItemNavSharePanel.prototype, "baseHost", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavSharePanel.prototype, "creator", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavSharePanel.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAItemNavSharePanel.prototype, "embedOptionsVisible", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavSharePanel.prototype, "identifier", void 0);
+__decorate([
+    property({ type: Array })
+], IAItemNavSharePanel.prototype, "sharingOptions", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavSharePanel.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAItemNavSharePanel.prototype, "renderHeader", void 0);
+__decorate([
+    property({ type: String })
+], IAItemNavSharePanel.prototype, "fileSubPrefix", void 0);
+IAItemNavSharePanel = __decorate([
+    customElement('ia-itemnav-share-panel')
+], IAItemNavSharePanel);
+export { IAItemNavSharePanel };
+//# sourceMappingURL=ia-itemnav-share-panel.js.map

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-itemnav-share-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n  type CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport {\n  shareIcon,\n  twitterIcon,\n  facebookIcon,\n  tumblrIcon,\n  pinterestIcon,\n  emailIcon,\n  linkIcon,\n} from './share-icons';\n\ntype ShareOption = {\n  name: string;\n  icon: TemplateResult | string;\n  url: string;\n};\n\n/** Icon for the share menu shortcut / menu entry. */\nexport { shareIcon };\n\n/**\n * The \"share this item\" side panel: social sharing links (Twitter, Facebook,\n * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.\n * Sharing options are derived from the item identifier/metadata and rebuilt\n * whenever `sharingOptions` is reset to empty.\n */\n@customElement('ia-itemnav-share-panel')\nexport class IAItemNavSharePanel extends LitElement {\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({ type: String }) creator = '';\n\n  @property({ type: String }) description = '';\n\n  @property({ type: Boolean }) embedOptionsVisible = false;\n\n  @property({ type: String }) identifier = '';\n\n  @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n  @property({ type: String }) type = '';\n\n  @property({ type: Boolean }) renderHeader = false;\n\n  @property({ type: String }) fileSubPrefix = '';\n\n  private copyNoteTimeouts = new WeakMap<\n    Element,\n    ReturnType<typeof setTimeout>\n  >();\n\n  updated(changed: PropertyValues): void {\n    if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n      this.loadProviders();\n    }\n  }\n\n  loadProviders(): void {\n    let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n    if (this.fileSubPrefix) {\n      shareUrl += `/${this.fileSubPrefix}`;\n    }\n    const shareBlurb = [\n      this.description,\n      this.creator,\n      'Free Download, Borrow, and Streaming',\n      'Internet Archive',\n    ]\n      .filter(Boolean)\n      .join(' : ');\n\n    this.sharingOptions = [\n      {\n        name: 'Twitter',\n        icon: twitterIcon,\n        url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n          url: shareUrl,\n          text: shareBlurb,\n          via: 'internetarchive',\n        })}`,\n      },\n      {\n        name: 'Facebook',\n        icon: facebookIcon,\n        url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n          u: shareUrl,\n        })}`,\n      },\n      {\n        name: 'Tumblr',\n        icon: tumblrIcon,\n        url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n          {\n            posttype: 'link',\n            canonicalUrl: shareUrl,\n            title: shareBlurb,\n          },\n        )}`,\n      },\n      {\n        name: 'Pinterest',\n        icon: pinterestIcon,\n        url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n          {\n            url: shareUrl,\n            description: shareBlurb,\n          },\n        )}`,\n      },\n      {\n        name: 'Email',\n        icon: emailIcon,\n        url: `mailto:?${new URLSearchParams({\n          subject: shareBlurb,\n          body: shareUrl,\n        })}`,\n      },\n    ];\n  }\n\n  /**\n   * Copies the embed snippet in the clicked `.code` block, preferring the async\n   * Clipboard API and falling back to the legacy `execCommand` path for\n   * browsers that lack it, then briefly flashes the \"Copied\" note.\n   */\n  private async copyToClipboard(event: MouseEvent): Promise<void> {\n    const currentTarget = event.currentTarget as HTMLElement;\n    const textarea = currentTarget.querySelector('textarea');\n    const note = currentTarget.querySelector('small');\n    if (!textarea || !note) return;\n\n    try {\n      await navigator.clipboard.writeText(textarea.value);\n    } catch {\n      // Fallback for browsers without the async Clipboard API.\n      textarea.select();\n      document.execCommand('copy');\n      textarea.blur();\n    }\n\n    note.classList.add('visible');\n    clearTimeout(this.copyNoteTimeouts.get(note));\n    this.copyNoteTimeouts.set(\n      note,\n      setTimeout(() => note.classList.remove('visible'), 4000),\n    );\n  }\n\n  get iframeEmbed(): string {\n    return `<iframe\n      src=\"https://${this.baseHost}/embed/${this.identifier}\"\n      width=\"560\" height=\"384\" frameborder=\"0\"\n      webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n    ></iframe>`;\n  }\n\n  get bbcodeEmbed(): string {\n    return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n  }\n\n  get helpURL(): string {\n    return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n  }\n\n  get header(): TemplateResult | typeof nothing {\n    const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n    return this.renderHeader ? header : nothing;\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.header}\n      <div>\n        ${this.sharingOptions.map(\n          (option) =>\n            html`<a class=\"share-option\" href=${option.url} target=\"_blank\">\n              ${option.icon} ${option.name}\n            </a>`,\n        )}\n        <details>\n          <summary class=\"share-option\">\n            ${linkIcon} Get an embeddable link\n          </summary>\n          <div class=\"embed\">\n            <h4>Embed</h4>\n            <div class=\"code\" @click=${this.copyToClipboard}>\n              <textarea readonly>${this.iframeEmbed}</textarea>\n              <small>Copied to clipboard</small>\n            </div>\n            <h4>\n              Embed for wordpress.com hosted blogs and archive.org item\n              &lt;description&gt; tags\n            </h4>\n            <div class=\"code\" @click=${this.copyToClipboard}>\n              <textarea readonly>${this.bbcodeEmbed}</textarea>\n              <small>Copied to clipboard</small>\n            </div>\n            <p>\n              Want more?\n              <a href=${this.helpURL}\n                >Advanced embedding details, examples, and help</a\n              >!\n            </p>\n          </div>\n        </details>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --item-navigator-text-color--: var(\n            --item-navigator-text-color,\n            var(--true-white)\n          );\n          --item-navigator-border-color--: var(\n            --item-navigator-border-color,\n            #4b4b4b\n          );\n          /* Icons follow the adjustable text color by default. */\n          --item-navigator-icon-color--: var(\n            --item-navigator-icon-color,\n            var(--item-navigator-text-color--)\n          );\n          --item-navigator-share-embed-bg--: var(\n            --item-navigator-share-embed-bg,\n            #151515\n          );\n\n          display: block;\n          height: 100%;\n          overflow-y: auto;\n          /* 10px base (petabox scale); internal sizing is em against it. */\n          --item-navigator-base-font-size--: var(\n            --item-navigator-base-font-size,\n            10px\n          );\n          font-size: var(--item-navigator-base-font-size--);\n          color: var(--item-navigator-text-color--);\n          box-sizing: border-box;\n        }\n\n        header {\n          display: flex;\n          align-items: baseline;\n        }\n\n        h3 {\n          padding: 0;\n          margin: 0 1em 0 0;\n          font-size: 1.6em;\n        }\n\n        h4 {\n          font-size: 1.4em;\n        }\n\n        :host > div {\n          padding: 1em 0;\n        }\n\n        .share-option {\n          display: block;\n          padding: 0.5em 0;\n          font-size: 1.6em;\n          text-decoration: none;\n          color: var(--item-navigator-text-color--);\n          cursor: pointer;\n          transition: background-color 0.2s;\n          border-radius: 6px;\n        }\n\n        .share-option:hover {\n          background-color: rgba(255, 255, 255, 0.05);\n        }\n\n        .share-option > * {\n          display: inline-block;\n          padding: 0.2em;\n          margin-right: 1em;\n          vertical-align: middle;\n          border: 1px solid var(--item-navigator-border-color--);\n          border-radius: 7px;\n        }\n\n        .share-option .ia-icon {\n          /* Reset to the base so the icon (em) doesn't compound against the\n             share-option's enlarged font-size. */\n          font-size: var(--item-navigator-base-font-size--);\n          width: 2em;\n          height: 2em;\n        }\n\n        /* Our glyphs are masked spans: the mask supplies the shape, this\n           supplies the paint. */\n        span.ia-icon {\n          background-color: var(--item-navigator-icon-color--);\n        }\n\n        /* Host-supplied icons may still be inline svg, so keep theming those\n           the original way. */\n        .ia-icon .fill-color {\n          fill: var(--item-navigator-icon-color--);\n        }\n\n        /* Hide the triangle that appears on details tags */\n        summary::marker {\n          content: '';\n        }\n\n        summary::-webkit-details-marker {\n          display: none;\n        }\n\n        .embed {\n          padding-right: 5px;\n        }\n\n        .embed a {\n          color: var(--item-navigator-text-color--);\n        }\n\n        .code {\n          position: relative;\n        }\n\n        textarea {\n          display: block;\n          width: 100%;\n          height: 120px;\n          padding: 0.8em 1em;\n          box-sizing: border-box;\n          resize: none;\n          cursor: pointer;\n          font: normal 1.4em var(--base-font-family);\n          color: var(--item-navigator-text-color--);\n          background: var(--item-navigator-share-embed-bg--);\n        }\n\n        small {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          height: 3em;\n          padding: 0.5em 1em;\n          box-sizing: border-box;\n          font: normal 1.2em/2em var(--base-font-family);\n          color: var(--item-navigator-share-embed-bg--);\n          background: var(--item-navigator-text-color--);\n          opacity: 0;\n          transition: opacity 300ms linear;\n        }\n\n        small.visible {\n          opacity: 1;\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-itemnav-share-panel': IAItemNavSharePanel;\n  }\n}\n"]}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, type CSSResultGroup, TemplateResult } from 'lit';
+import type { FileSortOption, ViewableFileInfo } from './models.js';
+/**
+ * A tri-state sort toggle for the viewable-files panel header. Cycles
+ * default → title ascending → title descending → default, sorting the supplied
+ * file list and emitting `fileListSorted` on each change.
+ */
+export declare class IAItemNavSortFilesButton extends LitElement {
+    fileListRaw: ViewableFileInfo[];
+    fileListSorted: ViewableFileInfo[];
+    sortOrderBy: FileSortOption;
+    render(): TemplateResult;
+    get sortButton(): TemplateResult;
+    sortVolumes(sortType: FileSortOption): void;
+    static get styles(): CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-itemnav-sort-files-button': IAItemNavSortFilesButton;
+    }
+}
+//# sourceMappingURL=ia-itemnav-sort-files-button.d.ts.map

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-itemnav-sort-files-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,cAAc,EACf,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjE;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAErC,cAAc,EAAE,gBAAgB,EAAE,CAAM;IAExB,WAAW,EAAE,cAAc,CAC1D;IAEZ,MAAM,IAAI,cAAc;IAIxB,IAAI,UAAU,IAAI,cAAc,CAgC/B;IAED,WAAW,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAsB3C,MAAM,KAAK,MAAM,IAAI,cAAc,CA4ClC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}

package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js

@@ -0,0 +1,137 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import themeStyles from '../../../themes/theme-styles.js';
+import { maskedIcon } from '../../../util/masked-icon.js';
+import sortAscUrl from './icons/sort-asc.svg';
+import sortDescUrl from './icons/sort-desc.svg';
+import sortNeutralUrl from './icons/sort-neutral.svg';
+const sortAscIcon = maskedIcon(sortAscUrl);
+const sortDescIcon = maskedIcon(sortDescUrl);
+const sortNeutralIcon = maskedIcon(sortNeutralUrl);
+/**
+ * A tri-state sort toggle for the viewable-files panel header. Cycles
+ * default → title ascending → title descending → default, sorting the supplied
+ * file list and emitting `fileListSorted` on each change.
+ */
+let IAItemNavSortFilesButton = class IAItemNavSortFilesButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fileListRaw = [];
+        this.fileListSorted = [];
+        this.sortOrderBy = 'default';
+    }
+    render() {
+        return html `<div class="sort-multi-file-list">${this.sortButton}</div>`;
+    }
+    get sortButton() {
+        const sortIcons = {
+            default: html `
+        <button
+          class="sort-by neutral-icon"
+          aria-label="Sort volumes in initial order"
+          @click=${() => this.sortVolumes('title_asc')}
+        >
+          ${sortNeutralIcon}
+        </button>
+      `,
+            title_asc: html `
+        <button
+          class="sort-by asc-icon"
+          aria-label="Sort volumes in ascending order"
+          @click=${() => this.sortVolumes('title_desc')}
+        >
+          ${sortAscIcon}
+        </button>
+      `,
+            title_desc: html `
+        <button
+          class="sort-by desc-icon"
+          aria-label="Sort volumes in descending order"
+          @click=${() => this.sortVolumes('default')}
+        >
+          ${sortDescIcon}
+        </button>
+      `,
+        };
+        return sortIcons[this.sortOrderBy];
+    }
+    sortVolumes(sortType) {
+        this.sortOrderBy = sortType;
+        const sortedFiles = [...this.fileListRaw].sort((a, b) => {
+            if (sortType === 'title_asc')
+                return a.title.localeCompare(b.title);
+            if (sortType === 'title_desc')
+                return b.title.localeCompare(a.title);
+            return (a.orig_sort ?? 0) - (b.orig_sort ?? 0);
+        });
+        this.dispatchEvent(new CustomEvent('fileListSorted', {
+            detail: {
+                sortType,
+                sortedFiles,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        this.fileListSorted = sortedFiles;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          /* Every glyph is square, so one knob sizes both axes. Matches the
+             panel header's close button, which sits beside this one. */
+          --item-navigator-header-icon-size--: var(
+            --item-navigator-header-icon-size,
+            2em
+          );
+          --item-navigator-icon-color--: var(
+            --item-navigator-icon-color,
+            var(--item-navigator-text-color, var(--true-white))
+          );
+
+          /* 10px base (petabox scale); internal sizing is em against it. */
+          --item-navigator-base-font-size--: var(
+            --item-navigator-base-font-size,
+            10px
+          );
+          font-size: var(--item-navigator-base-font-size--);
+        }
+
+        button.sort-by {
+          padding: 0;
+          background-color: transparent;
+          border: 0;
+          cursor: pointer;
+          display: inline-flex;
+          /* Buttons don't inherit font-size, and the UA default would make the
+             em-sized glyph larger than the close button beside it. */
+          font: inherit;
+        }
+
+        /* The glyph is a masked span: the mask supplies the shape, this
+           supplies the paint. */
+        button.sort-by .ia-icon {
+          width: var(--item-navigator-header-icon-size--);
+          height: var(--item-navigator-header-icon-size--);
+          background-color: var(--item-navigator-icon-color--);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Array })
+], IAItemNavSortFilesButton.prototype, "fileListRaw", void 0);
+__decorate([
+    property({ type: Array })
+], IAItemNavSortFilesButton.prototype, "fileListSorted", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], IAItemNavSortFilesButton.prototype, "sortOrderBy", void 0);
+IAItemNavSortFilesButton = __decorate([
+    customElement('ia-itemnav-sort-files-button')
+], IAItemNavSortFilesButton);
+export { IAItemNavSortFilesButton };
+//# sourceMappingURL=ia-itemnav-sort-files-button.js.map