@internetarchive/collection-browser 0.4.4-alpha.1 → 0.4.4

package/dist/src/tiles/text-snippet-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IA8G3D,CAAC;IA5GC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,QAAQ;YACpC,IAAI,CAAC,sBAAsB;;;KAGlC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC5C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCT,CAAC;IACJ,CAAC;CACF,CAAA;AAhH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAiH5B;SAjHY,gBAAgB","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n  @property({ type: Array }) snippets?: string[] = [];\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.snippets?.length) return html`${nothing}`;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"snippet-view ${this.viewSize}\">\n          ${this.ellipsisJoinedSnippets}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * An array of HTML templates derived from the snippets, with ellipses inserted\n   * at the beginning, end, and between each pair of snippets.\n   */\n  private get ellipsisJoinedSnippets(): TemplateResult {\n    return html`\n      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n    `;\n  }\n\n  /**\n   * Returns an array of HTML span templates containing this item's snippets with all of\n   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n   *\n   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n   *\n   * Note on `<em>` vs. `<mark>`:\n   * The old search page snippets had search keywords demarcated with `<em>` tags.\n   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n   * but screen-reader behavior may be different. `<em>` will likely be read in a\n   * different tone, while `<mark>` is often read no differently than ordinary text\n   * in many screen-readers (though there are ways to work around this if needed).\n   */\n  private get snippetTemplates(): TemplateResult[] | undefined {\n    return this.snippets?.map(s => {\n      const matches = s.matchAll(/{{{(.+?)}}}/gs);\n      const templates: TemplateResult[] = [];\n\n      // Convert each match into an HTML template that includes:\n      //  - Everything from the end of the previous match (or the beginning of the\n      //      string) up to the current match, as raw text.\n      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n      let index = 0;\n      for (const match of matches) {\n        if (match.index != null) {\n          templates.push(html`\n            ${s.slice(index, match.index)}\n            <mark>${match[1]}</mark>\n          `);\n          index = match.index + match[0].length;\n        }\n      }\n\n      // Include any text from the last match to the end\n      templates.push(html`${s.slice(index)}`);\n\n      // Squash everything into a single span template\n      return html`<span>${templates}</span>`;\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        width: 100%;\n        border-left: 5px solid #194880;\n        margin-top: var(--containerTopMargin, 10px);\n        margin-left: var(--containerLeftMargin, 0px);\n        border-radius: 3px;\n      }\n\n      .snippet-view {\n        display: -webkit-box;\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        font-size: 14px;\n        overflow: hidden;\n        overflow-wrap: break-word;\n        -webkit-line-clamp: var(--maxLines, 3);\n        -webkit-box-orient: vertical;\n        margin-left: 5px;\n        margin-right: 10px;\n      }\n\n      .grid {\n        margin: 0px 15px 0px 5px;\n        font-size: 1.2rem;\n        line-height: 1.5rem;\n      }\n\n      .list {\n        padding-left: 20px;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n\n      mark {\n        /* blue, 20% transparency */\n        background-color: #0000ff33;\n        color: inherit;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IA8G3D,CAAC;IA5GC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,QAAQ;YACpC,IAAI,CAAC,sBAAsB;;;KAGlC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC5C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCT,CAAC;IACJ,CAAC;CACF,CAAA;AAhH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAiH5B;SAjHY,gBAAgB","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n  @property({ type: Array }) snippets?: string[] = [];\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.snippets?.length) return html`${nothing}`;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"snippet-view ${this.viewSize}\">\n          ${this.ellipsisJoinedSnippets}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * An array of HTML templates derived from the snippets, with ellipses inserted\n   * at the beginning, end, and between each pair of snippets.\n   */\n  private get ellipsisJoinedSnippets(): TemplateResult {\n    return html`\n      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n    `;\n  }\n\n  /**\n   * Returns an array of HTML span templates containing this item's snippets with all of\n   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n   *\n   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n   *\n   * Note on `<em>` vs. `<mark>`:\n   * The old search page snippets had search keywords demarcated with `<em>` tags.\n   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n   * but screen-reader behavior may be different. `<em>` will likely be read in a\n   * different tone, while `<mark>` is often read no differently than ordinary text\n   * in many screen-readers (though there are ways to work around this if needed).\n   */\n  private get snippetTemplates(): TemplateResult[] | undefined {\n    return this.snippets?.map(s => {\n      const matches = s.matchAll(/{{{(.+?)}}}/gs);\n      const templates: TemplateResult[] = [];\n\n      // Convert each match into an HTML template that includes:\n      //  - Everything from the end of the previous match (or the beginning of the\n      //      string) up to the current match, as raw text.\n      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n      let index = 0;\n      for (const match of matches) {\n        if (match.index != null) {\n          templates.push(html`\n            ${s.slice(index, match.index)}\n            <mark>${match[1]}</mark>\n          `);\n          index = match.index + match[0].length;\n        }\n      }\n\n      // Include any text from the last match to the end\n      templates.push(html`${s.slice(index)}`);\n\n      // Squash everything into a single span template\n      return html`<span>${templates}</span>`;\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        width: calc(100% - 10px);\n        border-left: 5px solid #194880;\n        margin-top: var(--containerTopMargin, 10px);\n        margin-left: var(--containerLeftMargin, 0px);\n        border-radius: 3px;\n        box-sizing: border-box;\n      }\n\n      .snippet-view {\n        display: -webkit-box;\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        font-size: 14px;\n        overflow: hidden;\n        overflow-wrap: break-word;\n        -webkit-line-clamp: var(--maxLines, 3);\n        -webkit-box-orient: vertical;\n        margin-left: 5px;\n      }\n\n      .grid {\n        font-size: 1.2rem;\n        line-height: 1.5rem;\n      }\n\n      .list {\n        margin: 0;\n        padding-left: 15px;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n\n      mark {\n        /* blue, 20% transparency */\n        background-color: #0000ff33;\n        color: inherit;\n      }\n    `;\n  }\n}\n"]}

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

@@ -6,10 +6,13 @@ import type { TileDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
+import './hover/tile-hover-pane';
 import './list/tile-list';
 import './list/tile-list-compact';
 import './list/tile-list-compact-header';
-export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface {
+import type { TileHoverPane } from './hover/tile-hover-pane';
+import { HoverPaneProperties, HoverPaneProviderInterface } from './hover/hover-pane-controller';
+export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface, HoverPaneProviderInterface {
     tileDisplayMode?: TileDisplayMode;
     model?: TileModel;
     baseNavigationUrl?: string;
@@ -18,14 +21,30 @@ export declare class TileDispatcher extends LitElement implements SharedResizeOb
     resizeObserver?: SharedResizeObserverInterface;
     collectionNameCache?: CollectionNameCacheInterface;
     sortParam: SortParam | null;
-    private container;
     mobileBreakpoint?: number;
     baseImageUrl?: string;
     loggedIn: boolean;
+    /** Whether this tile should include a hover pane at all (for applicable tile modes) */
+    enableHoverPane: boolean;
+    private hoverPaneController?;
+    private container;
+    private hoverPane?;
+    /** Maps each display mode to whether hover panes should appear in that mode */
+    private static readonly HOVER_PANE_DISPLAY_MODES;
     render(): import("lit-html").TemplateResult<1>;
+    protected firstUpdated(): void;
     private get headerTemplate();
     private get tileTemplate();
     private get linkTileTemplate();
+    /**
+     * Whether hover pane behavior should be prepared for this tile
+     * (e.g., whether mouse listeners should be attached, etc.)
+     */
+    private get shouldPrepareHoverPane();
+    /** @inheritdoc */
+    getHoverPane(): TileHoverPane | undefined;
+    /** @inheritdoc */
+    getHoverPaneProps(): HoverPaneProperties;
     handleResize(entry: ResizeObserverEntry): void;
     disconnectedCallback(): void;
     private stopResizeObservation;

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

@@ -1,3 +1,4 @@
+var TileDispatcher_1;
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
@@ -5,24 +6,40 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
+import './hover/tile-hover-pane';
 import './list/tile-list';
 import './list/tile-list-compact';
 import './list/tile-list-compact-header';
-let TileDispatcher = class TileDispatcher extends LitElement {
+import { HoverPaneController, } from './hover/hover-pane-controller';
+let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends LitElement {
     constructor() {
         super(...arguments);
         this.sortParam = null;
         this.loggedIn = false;
+        /** Whether this tile should include a hover pane at all (for applicable tile modes) */
+        this.enableHoverPane = false;
     }
     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">
+      <div id="container" class=${isGridMode ? 'hoverable' : nothing}>
         ${this.tileDisplayMode === 'list-header'
             ? this.headerTemplate
             : this.tileTemplate}
+        ${hoverPaneTemplate}
       </div>
     `;
     }
+    firstUpdated() {
+        if (this.shouldPrepareHoverPane) {
+            this.hoverPaneController = new HoverPaneController(this, {
+                mobileBreakpoint: this.mobileBreakpoint,
+                enableLongPress: false,
+            });
+        }
+    }
     get headerTemplate() {
         const { currentWidth, sortParam, mobileBreakpoint } = this;
         return html `
@@ -47,13 +64,32 @@ let TileDispatcher = class TileDispatcher extends LitElement {
         return html `
       <a
         href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
-        title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
+        title=${this.shouldPrepareHoverPane
+            ? nothing // Don't show title tooltips when we have the tile info popups
+            : ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
         @click=${() => this.dispatchEvent(new CustomEvent('resultSelected', { detail: this.model }))}
       >
         ${this.tile}
       </a>
     `;
     }
+    /**
+     * Whether hover pane behavior should be prepared for this tile
+     * (e.g., whether mouse listeners should be attached, etc.)
+     */
+    get shouldPrepareHoverPane() {
+        return (this.enableHoverPane &&
+            !!this.tileDisplayMode &&
+            TileDispatcher_1.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]);
+    }
+    /** @inheritdoc */
+    getHoverPane() {
+        return this.hoverPane;
+    }
+    /** @inheritdoc */
+    getHoverPaneProps() {
+        return this;
+    }
     handleResize(entry) {
         this.currentWidth = entry.contentRect.width;
         this.currentHeight = entry.contentRect.height;
@@ -170,11 +206,14 @@ let TileDispatcher = class TileDispatcher extends LitElement {
       }
 
       #container {
+        position: relative;
         height: 100%;
+        border-radius: 4px;
       }
 
-      #delete-button {
-        float: right;
+      #container.hoverable:hover {
+        box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);
+        transition: box-shadow 0.1s ease;
       }
 
       a {
@@ -182,15 +221,40 @@ let TileDispatcher = class TileDispatcher extends LitElement {
         height: 100%;
         color: unset;
         text-decoration: none;
+        transition: transform 0.05s ease;
       }
 
       a :first-child {
         display: block;
         height: 100%;
       }
+
+      #touch-backdrop {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        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);
@@ -215,9 +279,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], TileDispatcher.prototype, "sortParam", void 0);
-__decorate([
-    query('#container')
-], TileDispatcher.prototype, "container", void 0);
 __decorate([
     property({ type: Number })
 ], TileDispatcher.prototype, "mobileBreakpoint", void 0);
@@ -227,7 +288,16 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TileDispatcher.prototype, "loggedIn", void 0);
-TileDispatcher = __decorate([
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "enableHoverPane", void 0);
+__decorate([
+    query('#container')
+], TileDispatcher.prototype, "container", void 0);
+__decorate([
+    query('tile-hover-pane')
+], TileDispatcher.prototype, "hoverPane", void 0);
+TileDispatcher = TileDispatcher_1 = __decorate([
     customElement('tile-dispatcher')
 ], TileDispatcher);
 export { TileDispatcher };

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

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, mobileBreakpoint } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n        @click=${() =>\n          this.dispatchEvent(\n            new CustomEvent('resultSelected', { detail: this.model })\n          )}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const {\n      model,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      mobileBreakpoint,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam}\n              .loggedIn=${this.loggedIn}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionNameCache=${this.collectionNameCache}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      collection-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n      }\n\n      account-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #fcf5e6;\n      }\n\n      item-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #f1f1f4;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport {\n  HoverPaneController,\n  HoverPaneControllerInterface,\n  HoverPaneProperties,\n  HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements\n    SharedResizeObserverResizeHandlerInterface,\n    HoverPaneProviderInterface\n{\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n  @property({ type: Boolean }) enableHoverPane = false;\n\n  private hoverPaneController?: HoverPaneControllerInterface;\n\n  @query('#container')\n  private container!: HTMLDivElement;\n\n  @query('tile-hover-pane')\n  private hoverPane?: TileHoverPane;\n\n  /** Maps each display mode to whether hover panes should appear in that mode */\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n    TileDisplayMode,\n    boolean\n  > = {\n    grid: true,\n    'list-compact': true,\n    'list-detail': false,\n    'list-header': false,\n  };\n\n  render() {\n    const isGridMode = this.tileDisplayMode === 'grid';\n    const hoverPaneTemplate =\n      this.hoverPaneController?.getTemplate() ?? nothing;\n    return html`\n      <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n        ${hoverPaneTemplate}\n      </div>\n    `;\n  }\n\n  protected firstUpdated(): void {\n    if (this.shouldPrepareHoverPane) {\n      this.hoverPaneController = new HoverPaneController(this, {\n        mobileBreakpoint: this.mobileBreakpoint,\n        enableLongPress: false,\n      });\n    }\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, mobileBreakpoint } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${this.shouldPrepareHoverPane\n          ? nothing // Don't show title tooltips when we have the tile info popups\n          : ifDefined(this.model?.title)}\n        @click=${() =>\n          this.dispatchEvent(\n            new CustomEvent('resultSelected', { detail: this.model })\n          )}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  /**\n   * Whether hover pane behavior should be prepared for this tile\n   * (e.g., whether mouse listeners should be attached, etc.)\n   */\n  private get shouldPrepareHoverPane(): boolean {\n    return (\n      this.enableHoverPane &&\n      !!this.tileDisplayMode &&\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode]\n    );\n  }\n\n  /** @inheritdoc */\n  getHoverPane(): TileHoverPane | undefined {\n    return this.hoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPaneProps(): HoverPaneProperties {\n    return this;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const {\n      model,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      mobileBreakpoint,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam}\n              .loggedIn=${this.loggedIn}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionNameCache=${this.collectionNameCache}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      collection-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n      }\n\n      account-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #fcf5e6;\n      }\n\n      item-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #f1f1f4;\n      }\n\n      #container {\n        position: relative;\n        height: 100%;\n        border-radius: 4px;\n      }\n\n      #container.hoverable:hover {\n        box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n        transition: box-shadow 0.1s ease;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n        transition: transform 0.05s ease;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n\n      #touch-backdrop {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 1;\n        background: transparent;\n      }\n\n      tile-hover-pane {\n        position: absolute;\n        top: 0;\n        left: -9999px;\n        z-index: 2;\n      }\n    `;\n  }\n}\n"]}

package/dist/test/collection-browser.test.js

@@ -240,72 +240,6 @@ describe('Collection Browser', () => {
             },
         });
     });
-    it('fires a separate date histogram query when year facets are applied', async () => {
-        var _a, _b, _c;
-        const searchService = new MockSearchService();
-        const selectedFacets = {
-            subject: {},
-            lending: {},
-            mediatype: {},
-            language: {},
-            creator: {},
-            collection: {},
-            year: {
-                '2000': {
-                    key: '2000',
-                    state: 'selected',
-                    count: 123,
-                },
-            },
-        };
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
-      </collection-browser>`);
-        el.baseQuery = 'collection:foo';
-        el.showHistogramDatePicker = true;
-        el.selectedFacets = selectedFacets;
-        await el.updateComplete;
-        expect((_b = (_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.aggregations) === null || _b === void 0 ? void 0 : _b.simpleParams).to.deep.equal(['year']); // Explicitly requests year aggregations
-        expect((_c = searchService.searchParams) === null || _c === void 0 ? void 0 : _c.query).to.equal('collection:foo' // No date clause on query
-        );
-    });
-    it('fires a separate date histogram query when a date range is applied', async () => {
-        var _a, _b, _c;
-        const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
-      </collection-browser>`);
-        el.baseQuery = 'collection:foo';
-        el.showHistogramDatePicker = true;
-        el.minSelectedDate = '1995';
-        el.maxSelectedDate = '2005';
-        await el.updateComplete;
-        expect((_b = (_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.aggregations) === null || _b === void 0 ? void 0 : _b.simpleParams).to.deep.equal(['year']); // Explicitly requests year aggregations
-        expect((_c = searchService.searchParams) === null || _c === void 0 ? void 0 : _c.query).to.equal('collection:foo' // No date clause on query
-        );
-    });
-    it('does not fire a separate date histogram query when no date filters are applied', async () => {
-        var _a, _b;
-        const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
-      </collection-browser>`);
-        el.baseQuery = 'collection:foo';
-        el.showHistogramDatePicker = true;
-        await el.updateComplete;
-        expect((_b = (_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.aggregations) === null || _b === void 0 ? void 0 : _b.simpleParams).to.satisfy((aggTypes) => !aggTypes || !aggTypes.includes('year') // Not requesting year aggregations explicitly
-        );
-    });
-    it('does not fire a separate date histogram query when date picker is disabled', async () => {
-        var _a, _b;
-        const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
-      </collection-browser>`);
-        el.baseQuery = 'collection:foo';
-        el.showHistogramDatePicker = false;
-        el.minSelectedDate = '1995';
-        el.maxSelectedDate = '2005';
-        await el.updateComplete;
-        expect((_b = (_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.aggregations) === null || _b === void 0 ? void 0 : _b.simpleParams).to.satisfy((aggTypes) => !aggTypes || !aggTypes.includes('year') // Not requesting year aggregations explicitly
-        );
-    });
     it('fails gracefully if no search service provided', async () => {
         var _a;
         const el = await fixture(html `<collection-browser></collection-browser>`);
@@ -605,7 +539,11 @@ describe('Collection Browser', () => {
         const searchService = new MockSearchService();
         const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
-        // Infinite scroller won't exist unless there's a base query
+        // Infinite scroller won't exist unless there's a base query.
+        // First ensure that we don't throw errors when it doesn't exist.
+        await el.goToPage(1);
+        // And make sure it correctly calls scrollToCell when the
+        // infinite scroller does exist.
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
         const infiniteScroller = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('infinite-scroller');
@@ -613,11 +551,7 @@ describe('Collection Browser', () => {
         const oldScrollToCell = infiniteScroller.scrollToCell;
         const spy = sinon.spy();
         infiniteScroller.scrollToCell = spy;
-        el.goToPage(1);
-        // Give it a second to scroll
-        await new Promise(res => {
-            setTimeout(res, 1000);
-        });
+        await el.goToPage(1);
         expect(spy.callCount).to.equal(1);
         infiniteScroller.scrollToCell = oldScrollToCell;
     });