@internetarchive/collection-browser 1.14.2 → 1.14.4

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

@@ -1,62 +1,63 @@
-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 './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';
-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;
-         *  - creatorFilter?: string;
-         *  - mobileBreakpoint?: number;
-         *  - loggedIn = false;
-         */
-        super(...arguments);
-        this.isManageView = false;
-        /** 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');
-    }
-    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;
+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';
+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;
+         *  - creatorFilter?: string;
+         *  - mobileBreakpoint?: number;
+         *  - loggedIn = false;
+         */
+        super(...arguments);
+        this.isManageView = false;
+        /** 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');
+    }
+    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' : nothing}>
-        ${this.tileDisplayMode === 'list-header'
-            ? this.headerTemplate
+        ${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, mobileBreakpoint } = this;
+    `;
+    }
+    firstUpdated() {
+        if (this.shouldPrepareHoverPane) {
+            this.hoverPaneController = new HoverPaneController(this, {
+                mobileBreakpoint: this.mobileBreakpoint,
+                enableLongPress: false,
+            });
+        }
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam, mobileBreakpoint } = this;
         return html `
       <tile-list-compact-header
         class="header"
@@ -65,145 +66,148 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
         .mobileBreakpoint=${mobileBreakpoint}
       >
       </tile-list-compact-header>
-    `;
-    }
-    get tileTemplate() {
+    `;
+    }
+    get tileTemplate() {
         return html `
-      ${this.tileDisplayMode === 'list-detail'
-            ? this.tile
+      ${this.tileDisplayMode === 'list-detail'
+            ? this.tile
             : this.linkTileTemplate}
-    `;
-    }
-    get linkTileTemplate() {
-        var _a, _b, _c;
+    `;
+    }
+    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'}
-        title=${this.shouldPrepareHoverPane
-            ? nothing // Don't show title tooltips when we have the tile info popups
+        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}
       >
         ${this.tile}
       </a>
-    `;
-    }
-    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;
+    `;
+    }
+    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=${() => {
-            if (this.model)
-                this.model.checked = !this.model.checked;
+          @change=${() => {
+            if (this.model)
+                this.model.checked = !this.model.checked;
         }}
         />
       </div>
-    `;
-    }
-    /**
-     * 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]);
-    }
-    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, } = this;
-        if (!model)
-            return nothing;
-        switch (this.tileDisplayMode) {
-            case 'grid':
-                switch (model.mediatype) {
-                    case 'collection':
+    `;
+    }
+    /**
+     * Whether hover pane behavior should be prepared for this tile
+     * (e.g., whether mouse listeners should be attached, etc.)
+     */
+    get shouldPrepareHoverPane() {
+        var _a;
+        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
+        );
+    }
+    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, } = this;
+        if (!model)
+            return nothing;
+        switch (this.tileDisplayMode) {
+            case 'grid':
+                switch (model.mediatype) {
+                    case 'collection':
                         return html `<collection-tile
               .model=${model}
               .collectionPagePath=${collectionPagePath}
@@ -215,8 +219,8 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
-            </collection-tile>`;
-                    case 'account':
+            </collection-tile>`;
+                    case 'account':
                         return html `<account-tile
               .model=${model}
               .collectionPagePath=${collectionPagePath}
@@ -228,8 +232,21 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
-            </account-tile>`;
-                    default:
+            </account-tile>`;
+                    case 'search':
+                        return html `<search-tile
+              .model=${model}
+              .collectionPagePath=${collectionPagePath}
+              .baseImageUrl=${this.baseImageUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
+              .creatorFilter=${creatorFilter}
+              .isManageView=${this.isManageView}
+              ?showInfoButton=${false}
+              @infoButtonPressed=${this.tileInfoButtonPressed}
+            >
+            </search-tile>`;
+                    default:
                         return html `<item-tile
               .model=${model}
               .collectionPagePath=${collectionPagePath}
@@ -244,9 +261,9 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
-            </item-tile>`;
-                }
-            case 'list-compact':
+            </item-tile>`;
+                }
+            case 'list-compact':
                 return html `<tile-list-compact
           .model=${model}
           .collectionPagePath=${collectionPagePath}
@@ -259,8 +276,8 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
         >
-        </tile-list-compact>`;
-            case 'list-detail':
+        </tile-list-compact>`;
+            case 'list-detail':
                 return html `<tile-list
           .model=${model}
           .collectionPagePath=${collectionPagePath}
@@ -274,12 +291,12 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
         >
-        </tile-list>`;
-            default:
-                return nothing;
-        }
-    }
-    static get styles() {
+        </tile-list>`;
+            default:
+                return nothing;
+        }
+    }
+    static get styles() {
         return css `
       :host {
         display: block;
@@ -302,6 +319,13 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
         --imageBlockBackgroundColor: #f1f1f4;
       }
 
+      search-tile {
+        --tileBorderColor: #555555;
+        --tileBackgroundColor: #666666;
+        --imageBlockBackgroundColor: #666666;
+        --iconFillColor: #2c2c2c;
+      }
+
       #container {
         position: relative;
         height: 100%;
@@ -357,42 +381,42 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
         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, "collectionNameCache", 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);
-TileDispatcher = TileDispatcher_1 = __decorate([
-    customElement('tile-dispatcher')
-], TileDispatcher);
-export { TileDispatcher };
+    `;
+    }
+};
+/** 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, "collectionNameCache", 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);
+TileDispatcher = TileDispatcher_1 = __decorate([
+    customElement('tile-dispatcher')
+], TileDispatcher);
+export { TileDispatcher };
 //# sourceMappingURL=tile-dispatcher.js.map