@internetarchive/collection-browser 3.3.2 → 3.3.4-alpha-webdev7761.0

package/dist/src/tiles/tile-dispatcher.d.ts

@@ -0,0 +1,71 @@
+import { PropertyValues } from 'lit';
+import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
+import type { TileDisplayMode } from '../models';
+import type { CollectionTitles } from '../data-source/models';
+import './grid/collection-tile';
+import './grid/item-tile';
+import './grid/account-tile';
+import './grid/search-tile';
+import './hover/tile-hover-pane';
+import './list/tile-list';
+import './list/tile-list-compact';
+import './list/tile-list-compact-header';
+import type { TileHoverPane } from './hover/tile-hover-pane';
+import { BaseTileComponent } from './base-tile-component';
+import { SimpleLayoutType } from './models';
+import { HoverPaneProperties, HoverPaneProviderInterface } from './hover/hover-pane-controller';
+export declare class TileDispatcher extends BaseTileComponent implements SharedResizeObserverResizeHandlerInterface, HoverPaneProviderInterface {
+    tileDisplayMode?: TileDisplayMode;
+    isManageView: boolean;
+    resizeObserver?: SharedResizeObserverInterface;
+    collectionTitles?: CollectionTitles;
+    showTvClips: boolean;
+    /** What type of simple layout to use in grid mode, if any */
+    simpleLayoutType: SimpleLayoutType;
+    /** Whether this tile should include a hover pane at all (for applicable tile modes) */
+    enableHoverPane: boolean;
+    manageCheckTitle: string;
+    private hoverPaneController?;
+    private container;
+    private hoverPane?;
+    private tileLinkElement?;
+    acquireFocus(): void;
+    releaseFocus(): void;
+    /** Maps each display mode to whether hover panes should appear in that mode */
+    private static readonly HOVER_PANE_DISPLAY_MODES;
+    render(): import("lit").TemplateResult<1>;
+    protected firstUpdated(): void;
+    private get headerTemplate();
+    private get tileTemplate();
+    private get linkTileTemplate();
+    private get linkTileHref();
+    private get manageCheckTemplate();
+    /**
+     * Whether hover pane behavior should be prepared for this tile
+     * (e.g., whether mouse listeners should be attached, etc.)
+     */
+    private get shouldPrepareHoverPane();
+    private get isHoverEnabled();
+    /** @inheritdoc */
+    getHoverPane(): TileHoverPane | undefined;
+    /** @inheritdoc */
+    getHoverPaneProps(): HoverPaneProperties;
+    handleResize(entry: ResizeObserverEntry): void;
+    disconnectedCallback(): void;
+    private stopResizeObservation;
+    private startResizeObservation;
+    updated(props: PropertyValues): void;
+    /**
+     * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.
+     * In manage view, it also checks/unchecks the tile.
+     */
+    private handleLinkClicked;
+    /**
+     * Handler for when the tile link is right-clicked.
+     * In manage view, it opens the item in a new tab. Otherwise, does nothing.
+     */
+    private handleLinkContextMenu;
+    private tileInfoButtonPressed;
+    private get tile();
+    static get styles(): import("lit").CSSResult[];
+}

package/dist/src/tiles/tile-dispatcher.js

@@ -0,0 +1,472 @@
+var TileDispatcher_1;
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg } from '@lit/localize';
+import './grid/collection-tile';
+import './grid/item-tile';
+import './grid/account-tile';
+import './grid/search-tile';
+import './hover/tile-hover-pane';
+import './list/tile-list';
+import './list/tile-list-compact';
+import './list/tile-list-compact-header';
+import { BaseTileComponent } from './base-tile-component';
+import { HoverPaneController, } from './hover/hover-pane-controller';
+import { srOnlyStyle } from '../styles/sr-only';
+let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileComponent {
+    constructor() {
+        /*
+         * Reactive properties inherited from BaseTileComponent:
+         *  - model?: TileModel;
+         *  - currentWidth?: number;
+         *  - currentHeight?: number;
+         *  - baseNavigationUrl?: string;
+         *  - baseImageUrl?: string;
+         *  - collectionPagePath?: string;
+         *  - sortParam: SortParam | null = null;
+         *  - defaultSortParam: SortParam | null = null;
+         *  - creatorFilter?: string;
+         *  - mobileBreakpoint?: number;
+         *  - loggedIn = false;
+         *  - suppressTileBlurring = false;
+         *  - useLocalTime = false;
+         */
+        super(...arguments);
+        this.isManageView = false;
+        this.showTvClips = false;
+        /** What type of simple layout to use in grid mode, if any */
+        this.simpleLayoutType = 'none';
+        /** Whether this tile should include a hover pane at all (for applicable tile modes) */
+        this.enableHoverPane = false;
+        this.manageCheckTitle = msg('Remove this item from the list');
+    }
+    acquireFocus() {
+        var _a;
+        (_a = this.tileLinkElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    releaseFocus() {
+        var _a;
+        (_a = this.tileLinkElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        var _a, _b;
+        const isGridMode = this.tileDisplayMode === 'grid';
+        const hoverPaneTemplate = (_b = (_a = this.hoverPaneController) === null || _a === void 0 ? void 0 : _a.getTemplate()) !== null && _b !== void 0 ? _b : nothing;
+        return html `
+      <div id="container" class=${isGridMode ? 'hoverable' : ''}>
+        ${this.tileDisplayMode === 'list-header'
+            ? this.headerTemplate
+            : this.tileTemplate}
+        ${this.manageCheckTemplate} ${hoverPaneTemplate}
+      </div>
+    `;
+    }
+    firstUpdated() {
+        if (this.shouldPrepareHoverPane) {
+            this.hoverPaneController = new HoverPaneController(this, {
+                mobileBreakpoint: this.mobileBreakpoint,
+                enableLongPress: false,
+            });
+        }
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } = this;
+        return html `
+      <tile-list-compact-header
+        class="header"
+        .currentWidth=${currentWidth}
+        .sortParam=${sortParam !== null && sortParam !== void 0 ? sortParam : defaultSortParam}
+        .mobileBreakpoint=${mobileBreakpoint}
+      >
+      </tile-list-compact-header>
+    `;
+    }
+    get tileTemplate() {
+        return html `
+      ${this.tileDisplayMode === 'list-detail'
+            ? this.tile
+            : this.linkTileTemplate}
+    `;
+    }
+    get linkTileTemplate() {
+        var _a, _b, _c;
+        return html `
+      <a
+        href=${this.linkTileHref}
+        aria-label=${(_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : 'Untitled item'}
+        aria-describedby="link-aria-description"
+        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}
+        title=${this.shouldPrepareHoverPane
+            ? nothing // Don't show title tooltips when we have the tile info popups
+            : ifDefined((_c = this.model) === null || _c === void 0 ? void 0 : _c.title)}
+        @click=${this.handleLinkClicked}
+        @contextmenu=${this.handleLinkContextMenu}
+        class="tile-link"
+      >
+        ${this.tile}
+      </a>
+      <div id="link-aria-description" class="sr-only">
+        ${msg('Press Down Arrow to preview item details')}
+      </div>
+    `;
+    }
+    get linkTileHref() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) || this.baseNavigationUrl == null)
+            return nothing;
+        // Use the server-specified href if available.
+        // Otherwise, construct a details page URL from the item identifier.
+        if (this.model.href) {
+            return `${this.baseNavigationUrl}${this.model.href}`;
+        }
+        return this.displayValueProvider.itemPageUrl(this.model.identifier, this.model.mediatype === 'collection');
+    }
+    get manageCheckTemplate() {
+        var _a;
+        if (!this.isManageView || this.tileDisplayMode !== 'grid')
+            return nothing;
+        return html `
+      <div class="manage-check">
+        <input
+          type="checkbox"
+          title=${this.manageCheckTitle}
+          ?checked=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.checked}
+          @change=${this.handleLinkClicked}
+        />
+      </div>
+    `;
+    }
+    /**
+     * Whether hover pane behavior should be prepared for this tile
+     * (e.g., whether mouse listeners should be attached, etc.)
+     */
+    get shouldPrepareHoverPane() {
+        var _a, _b;
+        return (this.enableHoverPane &&
+            !!this.tileDisplayMode &&
+            TileDispatcher_1.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&
+            ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'search' && // don't show hover panes on search tiles
+            !((_b = this.model) === null || _b === void 0 ? void 0 : _b.captureDates) // don't show hover panes on web archive tiles
+        );
+    }
+    get isHoverEnabled() {
+        return window.matchMedia('(hover: hover)').matches;
+    }
+    /** @inheritdoc */
+    getHoverPane() {
+        return this.hoverPane;
+    }
+    /** @inheritdoc */
+    getHoverPaneProps() {
+        return this;
+    }
+    handleResize(entry) {
+        this.currentWidth = entry.contentRect.width;
+        this.currentHeight = entry.contentRect.height;
+    }
+    disconnectedCallback() {
+        this.stopResizeObservation(this.resizeObserver);
+    }
+    stopResizeObservation(observer) {
+        observer === null || observer === void 0 ? void 0 : observer.removeObserver({
+            handler: this,
+            target: this.container,
+        });
+    }
+    startResizeObservation() {
+        var _a;
+        this.stopResizeObservation(this.resizeObserver);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.addObserver({
+            handler: this,
+            target: this.container,
+        });
+    }
+    updated(props) {
+        if (props.has('resizeObserver')) {
+            const previousObserver = props.get('resizeObserver');
+            this.stopResizeObservation(previousObserver);
+            this.startResizeObservation();
+        }
+    }
+    /**
+     * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.
+     * In manage view, it also checks/unchecks the tile.
+     */
+    handleLinkClicked(e) {
+        if (this.isManageView) {
+            e.preventDefault();
+            if (this.model)
+                this.model.checked = !this.model.checked;
+        }
+        this.dispatchEvent(new CustomEvent('resultSelected', { detail: this.model }));
+    }
+    /**
+     * Handler for when the tile link is right-clicked.
+     * In manage view, it opens the item in a new tab. Otherwise, does nothing.
+     */
+    handleLinkContextMenu(e) {
+        if (this.isManageView && this.linkTileHref !== nothing) {
+            e.preventDefault();
+            window.open(this.linkTileHref, '_blank');
+        }
+    }
+    tileInfoButtonPressed(e) {
+        var _a;
+        (_a = this.hoverPaneController) === null || _a === void 0 ? void 0 : _a.toggleHoverPane({
+            coords: e.detail,
+            enableTouchBackdrop: true,
+        });
+    }
+    get tile() {
+        const { model, collectionPagePath, baseNavigationUrl, currentWidth, currentHeight, sortParam, creatorFilter, mobileBreakpoint, defaultSortParam, } = this;
+        if (!model)
+            return nothing;
+        switch (this.tileDisplayMode) {
+            case 'grid':
+                switch (model.mediatype) {
+                    case 'collection':
+                        return html `<collection-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              ?showInfoButton=${!this.isHoverEnabled}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
+            </collection-tile>`;
+                    case 'account':
+                        return html `<account-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              ?showInfoButton=${!this.isHoverEnabled}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
+            </account-tile>`;
+                    case 'search':
+                        return html `<search-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              ?showInfoButton=${false}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
+            </search-tile>`;
+                    default:
+                        return html `<item-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .currentWidth=${this.currentWidth}
+              .currentHeight=${this.currentHeight}
+              .baseImageUrl=${this.baseImageUrl}
+              .sortParam=${sortParam}
+              .defaultSortParam=${defaultSortParam}
+              .creatorFilter=${creatorFilter}
+              .loggedIn=${this.loggedIn}
+              .suppressBlurring=${this.suppressBlurring}
+              .isManageView=${this.isManageView}
+              .simpleLayoutType=${this.simpleLayoutType}
+              ?showTvClips=${this.showTvClips}
+              ?showInfoButton=${!this.isHoverEnabled}
+              ?useLocalTime=${this.useLocalTime}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
+            </item-tile>`;
+                }
+            case 'list-compact':
+                return html `<tile-list-compact
+          .model=${model}
+          .collectionPagePath=${collectionPagePath}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .defaultSortParam=${defaultSortParam}
+          .creatorFilter=${creatorFilter}
+          .mobileBreakpoint=${mobileBreakpoint}
+          .baseImageUrl=${this.baseImageUrl}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
+          ?useLocalTime=${this.useLocalTime}
+        >
+        </tile-list-compact>`;
+            case 'list-detail':
+                return html `<tile-list
+          .model=${model}
+          .collectionPagePath=${collectionPagePath}
+          .collectionTitles=${this.collectionTitles}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+          .defaultSortParam=${defaultSortParam}
+          .creatorFilter=${creatorFilter}
+          .mobileBreakpoint=${mobileBreakpoint}
+          .baseImageUrl=${this.baseImageUrl}
+          .loggedIn=${this.loggedIn}
+          .suppressBlurring=${this.suppressBlurring}
+          ?useLocalTime=${this.useLocalTime}
+        >
+        </tile-list>`;
+            default:
+                return nothing;
+        }
+    }
+    static get styles() {
+        return [
+            srOnlyStyle,
+            css `
+        :host {
+          display: block;
+          height: 100%;
+        }
+
+        collection-tile {
+          --tileBorderColor: #555555;
+          --tileBackgroundColor: #666666;
+          --imageBlockBackgroundColor: #666666;
+        }
+
+        account-tile {
+          --tileBorderColor: #dddddd;
+          --imageBlockBackgroundColor: #fcf5e6;
+        }
+
+        item-tile {
+          --tileBorderColor: #dddddd;
+          --imageBlockBackgroundColor: #f1f1f4;
+        }
+
+        search-tile {
+          --tileBorderColor: #555555;
+          --tileBackgroundColor: #666666;
+          --imageBlockBackgroundColor: #666666;
+          --iconFillColor: #2c2c2c;
+        }
+
+        #container {
+          position: relative;
+          height: 100%;
+          border-radius: 4px;
+        }
+
+        #container.hoverable a:focus,
+        #container.hoverable a:hover {
+          box-shadow: var(
+            --tileHoverBoxShadow,
+            0 0 6px 2px rgba(8, 8, 32, 0.8)
+          );
+          transition: box-shadow 0.1s ease;
+        }
+
+        a {
+          display: block;
+          height: 100%;
+          color: unset;
+          text-decoration: none;
+          transition: transform 0.05s ease;
+          border-radius: 4px;
+          outline: none;
+        }
+
+        a :first-child {
+          display: block;
+          height: 100%;
+        }
+
+        .manage-check {
+          position: absolute;
+          right: 0;
+          top: 0;
+          border: 5px solid #2c2c2c;
+          border-radius: 3px;
+          background-color: #2c2c2c;
+          z-index: 1;
+        }
+
+        .manage-check > input[type='checkbox'] {
+          display: block;
+          margin: 0;
+        }
+
+        #touch-backdrop {
+          position: fixed;
+          width: 100vw;
+          height: 100vh;
+          top: 0;
+          left: 0;
+          z-index: 2;
+          background: transparent;
+        }
+
+        tile-hover-pane {
+          position: absolute;
+          top: 0;
+          left: -9999px;
+          z-index: 2;
+        }
+      `,
+        ];
+    }
+};
+/** Maps each display mode to whether hover panes should appear in that mode */
+TileDispatcher.HOVER_PANE_DISPLAY_MODES = {
+    grid: true,
+    'list-compact': true,
+    'list-detail': false,
+    'list-header': false,
+};
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "tileDisplayMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "isManageView", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "resizeObserver", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "collectionTitles", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "showTvClips", void 0);
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "simpleLayoutType", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "enableHoverPane", void 0);
+__decorate([
+    property({ type: String })
+], TileDispatcher.prototype, "manageCheckTitle", void 0);
+__decorate([
+    query('#container')
+], TileDispatcher.prototype, "container", void 0);
+__decorate([
+    query('tile-hover-pane')
+], TileDispatcher.prototype, "hoverPane", void 0);
+__decorate([
+    query('.tile-link')
+], TileDispatcher.prototype, "tileLinkElement", void 0);
+TileDispatcher = TileDispatcher_1 = __decorate([
+    customElement('tile-dispatcher')
+], TileDispatcher);
+export { TileDispatcher };
+//# sourceMappingURL=tile-dispatcher.js.map

package/dist/src/tiles/tile-dispatcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { msg } from '@lit/localize';\r\nimport type {\r\n  SharedResizeObserverInterface,\r\n  SharedResizeObserverResizeHandlerInterface,\r\n} from '@internetarchive/shared-resize-observer';\r\nimport type { TileDisplayMode } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './grid/collection-tile';\r\nimport './grid/item-tile';\r\nimport './grid/account-tile';\r\nimport './grid/search-tile';\r\nimport './hover/tile-hover-pane';\r\nimport './list/tile-list';\r\nimport './list/tile-list-compact';\r\nimport './list/tile-list-compact-header';\r\nimport type { TileHoverPane } from './hover/tile-hover-pane';\r\nimport { BaseTileComponent } from './base-tile-component';\r\nimport { SimpleLayoutType } from './models';\r\nimport {\r\n  HoverPaneController,\r\n  HoverPaneControllerInterface,\r\n  HoverPaneProperties,\r\n  HoverPaneProviderInterface,\r\n} from './hover/hover-pane-controller';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\n\r\n@customElement('tile-dispatcher')\r\nexport class TileDispatcher\r\n  extends BaseTileComponent\r\n  implements\r\n    SharedResizeObserverResizeHandlerInterface,\r\n    HoverPaneProviderInterface\r\n{\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressTileBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\r\n\r\n  @property({ type: Boolean }) isManageView = false;\r\n\r\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  /** What type of simple layout to use in grid mode, if any */\r\n  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\r\n  @property({ type: Boolean }) enableHoverPane = false;\r\n\r\n  @property({ type: String }) manageCheckTitle = msg(\r\n    'Remove this item from the list',\r\n  );\r\n\r\n  private hoverPaneController?: HoverPaneControllerInterface;\r\n\r\n  @query('#container')\r\n  private container!: HTMLDivElement;\r\n\r\n  @query('tile-hover-pane')\r\n  private hoverPane?: TileHoverPane;\r\n\r\n  @query('.tile-link')\r\n  private tileLinkElement?: HTMLAnchorElement;\r\n\r\n  acquireFocus(): void {\r\n    this.tileLinkElement?.focus();\r\n  }\r\n\r\n  releaseFocus(): void {\r\n    this.tileLinkElement?.blur();\r\n  }\r\n\r\n  /** Maps each display mode to whether hover panes should appear in that mode */\r\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\r\n    TileDisplayMode,\r\n    boolean\r\n  > = {\r\n    grid: true,\r\n    'list-compact': true,\r\n    'list-detail': false,\r\n    'list-header': false,\r\n  };\r\n\r\n  render() {\r\n    const isGridMode = this.tileDisplayMode === 'grid';\r\n    const hoverPaneTemplate =\r\n      this.hoverPaneController?.getTemplate() ?? nothing;\r\n    return html`\r\n      <div id=\"container\" class=${isGridMode ? 'hoverable' : ''}>\r\n        ${this.tileDisplayMode === 'list-header'\r\n          ? this.headerTemplate\r\n          : this.tileTemplate}\r\n        ${this.manageCheckTemplate} ${hoverPaneTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  protected firstUpdated(): void {\r\n    if (this.shouldPrepareHoverPane) {\r\n      this.hoverPaneController = new HoverPaneController(this, {\r\n        mobileBreakpoint: this.mobileBreakpoint,\r\n        enableLongPress: false,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get headerTemplate() {\r\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\r\n      this;\r\n    return html`\r\n      <tile-list-compact-header\r\n        class=\"header\"\r\n        .currentWidth=${currentWidth}\r\n        .sortParam=${sortParam ?? defaultSortParam}\r\n        .mobileBreakpoint=${mobileBreakpoint}\r\n      >\r\n      </tile-list-compact-header>\r\n    `;\r\n  }\r\n\r\n  private get tileTemplate() {\r\n    return html`\r\n      ${this.tileDisplayMode === 'list-detail'\r\n        ? this.tile\r\n        : this.linkTileTemplate}\r\n    `;\r\n  }\r\n\r\n  private get linkTileTemplate() {\r\n    return html`\r\n      <a\r\n        href=${this.linkTileHref}\r\n        aria-label=${this.model?.title ?? 'Untitled item'}\r\n        aria-describedby=\"link-aria-description\"\r\n        aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\r\n        title=${this.shouldPrepareHoverPane\r\n          ? nothing // Don't show title tooltips when we have the tile info popups\r\n          : ifDefined(this.model?.title)}\r\n        @click=${this.handleLinkClicked}\r\n        @contextmenu=${this.handleLinkContextMenu}\r\n        class=\"tile-link\"\r\n      >\r\n        ${this.tile}\r\n      </a>\r\n      <div id=\"link-aria-description\" class=\"sr-only\">\r\n        ${msg('Press Down Arrow to preview item details')}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get linkTileHref(): string | typeof nothing {\r\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n      return nothing;\r\n\r\n    // Use the server-specified href if available.\r\n    // Otherwise, construct a details page URL from the item identifier.\r\n    if (this.model.href) {\r\n      return `${this.baseNavigationUrl}${this.model.href}`;\r\n    }\r\n\r\n    return this.displayValueProvider.itemPageUrl(\r\n      this.model.identifier,\r\n      this.model.mediatype === 'collection',\r\n    );\r\n  }\r\n\r\n  private get manageCheckTemplate() {\r\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\r\n\r\n    return html`\r\n      <div class=\"manage-check\">\r\n        <input\r\n          type=\"checkbox\"\r\n          title=${this.manageCheckTitle}\r\n          ?checked=${this.model?.checked}\r\n          @change=${this.handleLinkClicked}\r\n        />\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Whether hover pane behavior should be prepared for this tile\r\n   * (e.g., whether mouse listeners should be attached, etc.)\r\n   */\r\n  private get shouldPrepareHoverPane(): boolean {\r\n    return (\r\n      this.enableHoverPane &&\r\n      !!this.tileDisplayMode &&\r\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\r\n      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\r\n      !this.model?.captureDates // don't show hover panes on web archive tiles\r\n    );\r\n  }\r\n\r\n  private get isHoverEnabled(): boolean {\r\n    return window.matchMedia('(hover: hover)').matches;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getHoverPane(): TileHoverPane | undefined {\r\n    return this.hoverPane;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  getHoverPaneProps(): HoverPaneProperties {\r\n    return this;\r\n  }\r\n\r\n  handleResize(entry: ResizeObserverEntry): void {\r\n    this.currentWidth = entry.contentRect.width;\r\n    this.currentHeight = entry.contentRect.height;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.stopResizeObservation(this.resizeObserver);\r\n  }\r\n\r\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\r\n    observer?.removeObserver({\r\n      handler: this,\r\n      target: this.container,\r\n    });\r\n  }\r\n\r\n  private startResizeObservation() {\r\n    this.stopResizeObservation(this.resizeObserver);\r\n    this.resizeObserver?.addObserver({\r\n      handler: this,\r\n      target: this.container,\r\n    });\r\n  }\r\n\r\n  updated(props: PropertyValues) {\r\n    if (props.has('resizeObserver')) {\r\n      const previousObserver = props.get(\r\n        'resizeObserver',\r\n      ) as SharedResizeObserverInterface;\r\n      this.stopResizeObservation(previousObserver);\r\n      this.startResizeObservation();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\r\n   * In manage view, it also checks/unchecks the tile.\r\n   */\r\n  private handleLinkClicked(e: Event): void {\r\n    if (this.isManageView) {\r\n      e.preventDefault();\r\n      if (this.model) this.model.checked = !this.model.checked;\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('resultSelected', { detail: this.model }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Handler for when the tile link is right-clicked.\r\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\r\n   */\r\n  private handleLinkContextMenu(e: Event): void {\r\n    if (this.isManageView && this.linkTileHref !== nothing) {\r\n      e.preventDefault();\r\n      window.open(this.linkTileHref, '_blank');\r\n    }\r\n  }\r\n\r\n  private tileInfoButtonPressed(\r\n    e: CustomEvent<{ x: number; y: number }>,\r\n  ): void {\r\n    this.hoverPaneController?.toggleHoverPane({\r\n      coords: e.detail,\r\n      enableTouchBackdrop: true,\r\n    });\r\n  }\r\n\r\n  private get tile() {\r\n    const {\r\n      model,\r\n      collectionPagePath,\r\n      baseNavigationUrl,\r\n      currentWidth,\r\n      currentHeight,\r\n      sortParam,\r\n      creatorFilter,\r\n      mobileBreakpoint,\r\n      defaultSortParam,\r\n    } = this;\r\n\r\n    if (!model) return nothing;\r\n\r\n    switch (this.tileDisplayMode) {\r\n      case 'grid':\r\n        switch (model.mediatype) {\r\n          case 'collection':\r\n            return html`<collection-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </collection-tile>`;\r\n          case 'account':\r\n            return html`<account-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </account-tile>`;\r\n          case 'search':\r\n            return html`<search-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .currentWidth=${currentWidth}\r\n              .currentHeight=${currentHeight}\r\n              .creatorFilter=${creatorFilter}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              ?showInfoButton=${false}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </search-tile>`;\r\n          default:\r\n            return html`<item-tile\r\n              .model=${model}\r\n              .collectionPagePath=${collectionPagePath}\r\n              .currentWidth=${this.currentWidth}\r\n              .currentHeight=${this.currentHeight}\r\n              .baseImageUrl=${this.baseImageUrl}\r\n              .sortParam=${sortParam}\r\n              .defaultSortParam=${defaultSortParam}\r\n              .creatorFilter=${creatorFilter}\r\n              .loggedIn=${this.loggedIn}\r\n              .suppressBlurring=${this.suppressBlurring}\r\n              .isManageView=${this.isManageView}\r\n              .simpleLayoutType=${this.simpleLayoutType}\r\n              ?showTvClips=${this.showTvClips}\r\n              ?showInfoButton=${!this.isHoverEnabled}\r\n              ?useLocalTime=${this.useLocalTime}\r\n              @infoButtonPressed=${this.tileInfoButtonPressed}\r\n            >\r\n            </item-tile>`;\r\n        }\r\n      case 'list-compact':\r\n        return html`<tile-list-compact\r\n          .model=${model}\r\n          .collectionPagePath=${collectionPagePath}\r\n          .currentWidth=${currentWidth}\r\n          .currentHeight=${currentHeight}\r\n          .baseNavigationUrl=${baseNavigationUrl}\r\n          .sortParam=${sortParam}\r\n          .defaultSortParam=${defaultSortParam}\r\n          .creatorFilter=${creatorFilter}\r\n          .mobileBreakpoint=${mobileBreakpoint}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n          ?useLocalTime=${this.useLocalTime}\r\n        >\r\n        </tile-list-compact>`;\r\n      case 'list-detail':\r\n        return html`<tile-list\r\n          .model=${model}\r\n          .collectionPagePath=${collectionPagePath}\r\n          .collectionTitles=${this.collectionTitles}\r\n          .currentWidth=${currentWidth}\r\n          .currentHeight=${currentHeight}\r\n          .baseNavigationUrl=${baseNavigationUrl}\r\n          .sortParam=${sortParam}\r\n          .defaultSortParam=${defaultSortParam}\r\n          .creatorFilter=${creatorFilter}\r\n          .mobileBreakpoint=${mobileBreakpoint}\r\n          .baseImageUrl=${this.baseImageUrl}\r\n          .loggedIn=${this.loggedIn}\r\n          .suppressBlurring=${this.suppressBlurring}\r\n          ?useLocalTime=${this.useLocalTime}\r\n        >\r\n        </tile-list>`;\r\n      default:\r\n        return nothing;\r\n    }\r\n  }\r\n\r\n  static get styles() {\r\n    return [\r\n      srOnlyStyle,\r\n      css`\r\n        :host {\r\n          display: block;\r\n          height: 100%;\r\n        }\r\n\r\n        collection-tile {\r\n          --tileBorderColor: #555555;\r\n          --tileBackgroundColor: #666666;\r\n          --imageBlockBackgroundColor: #666666;\r\n        }\r\n\r\n        account-tile {\r\n          --tileBorderColor: #dddddd;\r\n          --imageBlockBackgroundColor: #fcf5e6;\r\n        }\r\n\r\n        item-tile {\r\n          --tileBorderColor: #dddddd;\r\n          --imageBlockBackgroundColor: #f1f1f4;\r\n        }\r\n\r\n        search-tile {\r\n          --tileBorderColor: #555555;\r\n          --tileBackgroundColor: #666666;\r\n          --imageBlockBackgroundColor: #666666;\r\n          --iconFillColor: #2c2c2c;\r\n        }\r\n\r\n        #container {\r\n          position: relative;\r\n          height: 100%;\r\n          border-radius: 4px;\r\n        }\r\n\r\n        #container.hoverable a:focus,\r\n        #container.hoverable a:hover {\r\n          box-shadow: var(\r\n            --tileHoverBoxShadow,\r\n            0 0 6px 2px rgba(8, 8, 32, 0.8)\r\n          );\r\n          transition: box-shadow 0.1s ease;\r\n        }\r\n\r\n        a {\r\n          display: block;\r\n          height: 100%;\r\n          color: unset;\r\n          text-decoration: none;\r\n          transition: transform 0.05s ease;\r\n          border-radius: 4px;\r\n          outline: none;\r\n        }\r\n\r\n        a :first-child {\r\n          display: block;\r\n          height: 100%;\r\n        }\r\n\r\n        .manage-check {\r\n          position: absolute;\r\n          right: 0;\r\n          top: 0;\r\n          border: 5px solid #2c2c2c;\r\n          border-radius: 3px;\r\n          background-color: #2c2c2c;\r\n          z-index: 1;\r\n        }\r\n\r\n        .manage-check > input[type='checkbox'] {\r\n          display: block;\r\n          margin: 0;\r\n        }\r\n\r\n        #touch-backdrop {\r\n          position: fixed;\r\n          width: 100vw;\r\n          height: 100vh;\r\n          top: 0;\r\n          left: 0;\r\n          z-index: 2;\r\n          background: transparent;\r\n        }\r\n\r\n        tile-hover-pane {\r\n          position: absolute;\r\n          top: 0;\r\n          left: -9999px;\r\n          z-index: 2;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/dist/src/tiles/tile-display-value-provider.d.ts

@@ -0,0 +1,47 @@
+import { TemplateResult, nothing } from 'lit';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../models';
+/**
+ * A class encapsulating shared logic for converting model values into display values
+ * across different types of tiles.
+ */
+export declare class TileDisplayValueProvider {
+    private model?;
+    private baseNavigationUrl?;
+    private collectionPagePath?;
+    private sortParam?;
+    private creatorFilter?;
+    constructor(options?: {
+        model?: TileModel;
+        baseNavigationUrl?: string;
+        collectionPagePath?: string;
+        sortParam?: SortParam;
+        creatorFilter?: string;
+    });
+    /**
+     * Examines the creator(s) for the given tile model, returning
+     * the first creator whose name matches the provided filter
+     * (or simply the first creator overall if no filter is provided).
+     */
+    get firstCreatorMatchingFilter(): string | undefined;
+    /**
+     * The label indicating what year an account item was created.
+     * E.g., "Archivist since 2015"
+     */
+    get accountLabel(): string;
+    /**
+     * The readable label for the current sort if it is a type of date sort,
+     * or the empty string otherwise.
+     */
+    get dateLabel(): string;
+    /**
+     * Produces a URL pointing at the item page for the given identifier,
+     * using the current base URL and the correct path based on whether the
+     * item is specified to be a collection (default false).
+     */
+    itemPageUrl(identifier?: string, isCollection?: boolean): string | typeof nothing;
+    /**
+     * Produces a template for a link to a single web capture of the given URL and date
+     */
+    webArchivesCaptureLink(url: string, date: Date): TemplateResult;
+}