@internetarchive/collection-browser 2.6.1 → 2.6.2-alpha.0

package/dist/src/tiles/grid/collection-tile.js

@@ -1,31 +1,31 @@
-import { __decorate } from "tslib";
-import { css, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import { formatUnitSize } from '../../utils/format-unit-size';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-let CollectionTile = class CollectionTile 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.showInfoButton = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
+import { formatUnitSize } from '../../utils/format-unit-size';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+let CollectionTile = class CollectionTile 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.showInfoButton = false;
+    }
+    render() {
         return html `
       <div class="container">
         ${this.infoButtonTemplate}
@@ -37,9 +37,9 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
 
         ${this.getTileStatsTemplate}
       </div>
-    `;
-    }
-    get getImageBlockTemplate() {
+    `;
+    }
+    get getImageBlockTemplate() {
         return html `
       <image-block
         .model=${this.model}
@@ -47,15 +47,15 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
         .viewSize=${'grid'}
       >
       </image-block>
-    `;
-    }
-    get getTitleTemplate() {
-        var _a;
+    `;
+    }
+    get getTitleTemplate() {
+        var _a;
         return html `<div id="title">
       <h4 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h4>
-    </div>`;
-    }
-    get getTileStatsTemplate() {
+    </div>`;
+    }
+    get getTileStatsTemplate() {
         return html `
       <div id="item-stats">
         <div id="item-mediatype">${collectionIcon}</div>
@@ -64,42 +64,42 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
           ${this.getItemsTemplate} ${this.getSizeTemplate}
         </div>
       </div>
-    `;
-    }
-    get getItemsTemplate() {
-        var _a, _b;
-        const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
+    `;
+    }
+    get getItemsTemplate() {
+        var _a, _b;
+        const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
         return html `<span id="item-count"
       >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
-    >`;
-    }
-    get getSizeTemplate() {
-        var _a, _b;
-        const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
-        return collectionSize
-            ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
-            : ``;
-    }
-    get infoButtonTemplate() {
-        // &#9432; is an information icon
-        return this.showInfoButton
+    >`;
+    }
+    get getSizeTemplate() {
+        var _a, _b;
+        const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
+        return collectionSize
+            ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
+            : ``;
+    }
+    get infoButtonTemplate() {
+        // &#9432; is an information icon
+        return this.showInfoButton
             ? html `<button class="info-button" @click=${this.infoButtonPressed}>
           &#9432;
           <span class="sr-only">${msg('More info')}</span>
-        </button>`
-            : nothing;
-    }
-    infoButtonPressed(e) {
-        e.preventDefault();
-        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
-        this.dispatchEvent(event);
-    }
-    static get styles() {
-        const tileBorderColor = css `var(--tileBorderColor, #555555)`;
-        const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
-        const whiteColor = css `#fff`;
-        return [
-            baseTileStyles,
+        </button>`
+            : nothing;
+    }
+    infoButtonPressed(e) {
+        e.preventDefault();
+        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
+        this.dispatchEvent(event);
+    }
+    static get styles() {
+        const tileBorderColor = css `var(--tileBorderColor, #555555)`;
+        const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
+        const whiteColor = css `#fff`;
+        return [
+            baseTileStyles,
             css `
         .container {
           background-color: ${tileBackgroundColor};
@@ -142,15 +142,15 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
           flex-direction: column;
           margin-left: 10px;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], CollectionTile.prototype, "showInfoButton", void 0);
-CollectionTile = __decorate([
-    customElement('collection-tile')
-], CollectionTile);
-export { CollectionTile };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], CollectionTile.prototype, "showInfoButton", void 0);
+CollectionTile = __decorate([
+    customElement('collection-tile')
+], CollectionTile);
+export { CollectionTile };
 //# sourceMappingURL=collection-tile.js.map

package/dist/src/tiles/grid/item-tile.d.ts

@@ -1,30 +1,34 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-import '../review-block';
-import '../text-snippet-block';
-import '../item-image';
-import '../mediatype-icon';
-import './tile-stats';
-export declare class ItemTile extends BaseTileComponent {
-    showInfoButton: boolean;
-    render(): TemplateResult<1>;
-    /**
-     * Templates
-     */
-    private get creatorTemplate();
-    private get imageBlockTemplate();
-    private get sortedDateInfoTemplate();
-    private get infoButtonTemplate();
-    private get reviewBlockTemplate();
-    private get textSnippetsTemplate();
-    private get volumeIssueTemplate();
-    private get webArchivesCaptureDatesTemplate();
-    private get isSortedByDate();
-    private get hasSnippets();
-    private infoButtonPressed;
-    /**
-     * CSS
-     */
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+import '../review-block';
+import '../text-snippet-block';
+import '../item-image';
+import '../mediatype-icon';
+import './tile-stats';
+export declare class ItemTile extends BaseTileComponent {
+    showInfoButton: boolean;
+    render(): TemplateResult<1>;
+    /**
+     * Templates
+     */
+    private get creatorTemplate();
+    private get imageBlockTemplate();
+    private get sortedDateInfoTemplate();
+    private get infoButtonTemplate();
+    private get reviewBlockTemplate();
+    private get textSnippetsTemplate();
+    private get volumeIssueTemplate();
+    private get webArchivesCaptureDatesTemplate();
+    private get isSortedByDate();
+    /**
+     * Returns the active sort param if one is set, or the default sort param otherwise.
+     */
+    private get effectiveSort();
+    private get hasSnippets();
+    private infoButtonPressed;
+    /**
+     * CSS
+     */
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/grid/item-tile.js

@@ -1,44 +1,46 @@
-import { __decorate } from "tslib";
-/* eslint-disable import/no-duplicates */
-import { css, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { msg } from '@lit/localize';
-import { map } from 'lit/directives/map.js';
-import { formatDate } from '../../utils/format-date';
-import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
-import { BaseTileComponent } from '../base-tile-component';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import '../review-block';
-import '../text-snippet-block';
-import '../item-image';
-import '../mediatype-icon';
-import './tile-stats';
-let ItemTile = class ItemTile 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.showInfoButton = false;
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
-        const [viewCount, viewLabel] = ((_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.field) === 'week'
-            ? [(_c = this.model) === null || _c === void 0 ? void 0 : _c.weeklyViewCount, 'weekly views']
-            : [(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount, 'all-time views'];
+import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg } from '@lit/localize';
+import { map } from 'lit/directives/map.js';
+import { formatDate } from '../../utils/format-date';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
+import { BaseTileComponent } from '../base-tile-component';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import '../image-block';
+import '../review-block';
+import '../text-snippet-block';
+import '../item-image';
+import '../mediatype-icon';
+import './tile-stats';
+let ItemTile = class ItemTile 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;
+         */
+        super(...arguments);
+        this.showInfoButton = false;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
+        const effectiveSort = (_b = this.sortParam) !== null && _b !== void 0 ? _b : this.defaultSortParam;
+        const [viewCount, viewLabel] = (effectiveSort === null || effectiveSort === void 0 ? void 0 : effectiveSort.field) === 'week'
+            ? [(_c = this.model) === null || _c === void 0 ? void 0 : _c.weeklyViewCount, 'weekly views']
+            : [(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount, 'all-time views'];
         return html `
       <div class="container">
         ${this.infoButtonTemplate}
@@ -53,8 +55,8 @@ let ItemTile = class ItemTile extends BaseTileComponent {
             </div>
 
             ${this.volumeIssueTemplate}
-            ${this.isSortedByDate
-            ? this.sortedDateInfoTemplate
+            ${this.isSortedByDate
+            ? this.sortedDateInfoTemplate
             : this.creatorTemplate}
             ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
             ${this.reviewBlockTemplate}
@@ -70,24 +72,24 @@ let ItemTile = class ItemTile extends BaseTileComponent {
           </tile-stats>
         </div>
       </div>
-    `;
-    }
-    /**
-     * Templates
-     */
-    get creatorTemplate() {
-        const displayedCreator = this.displayValueProvider.firstCreatorMatchingFilter;
-        if (!displayedCreator)
-            return nothing;
+    `;
+    }
+    /**
+     * Templates
+     */
+    get creatorTemplate() {
+        const displayedCreator = this.displayValueProvider.firstCreatorMatchingFilter;
+        if (!displayedCreator)
+            return nothing;
         return html `
       <div class="created-by">
         <span class="truncated" title=${displayedCreator}>
           by&nbsp;${displayedCreator}
         </span>
       </div>
-    `;
-    }
-    get imageBlockTemplate() {
+    `;
+    }
+    get imageBlockTemplate() {
         return html `
       <image-block
         .model=${this.model}
@@ -98,58 +100,58 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         .viewSize=${'grid'}
       >
       </image-block>
-    `;
-    }
-    get sortedDateInfoTemplate() {
-        var _a, _b, _c, _d, _e;
-        let sortedValue;
-        let format = 'long';
-        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
-            case 'date': {
-                const datePublished = (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
-                sortedValue = { field: 'published', value: datePublished };
-                if (isFirstMillisecondOfUTCYear(datePublished)) {
-                    format = 'year-only';
-                }
-                break;
-            }
-            case 'reviewdate':
-                sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
-                break;
-            case 'addeddate':
-                sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
-                break;
-            case 'publicdate':
-                sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
-                break;
-            default:
-                break;
-        }
-        if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
-            return nothing;
-        }
+    `;
+    }
+    get sortedDateInfoTemplate() {
+        var _a, _b, _c, _d, _e;
+        let sortedValue;
+        let format = 'long';
+        switch ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) {
+            case 'date': {
+                const datePublished = (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
+                sortedValue = { field: 'published', value: datePublished };
+                if (isFirstMillisecondOfUTCYear(datePublished)) {
+                    format = 'year-only';
+                }
+                break;
+            }
+            case 'reviewdate':
+                sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
+                break;
+            case 'addeddate':
+                sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
+                break;
+            case 'publicdate':
+                sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
+                break;
+            default:
+                break;
+        }
+        if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
+            return nothing;
+        }
         return html `
       <div class="date-sorted-by truncated">
         <span>
           ${sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.field} ${formatDate(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value, format)}
         </span>
       </div>
-    `;
-    }
-    get infoButtonTemplate() {
-        // &#9432; is an information icon
-        return this.showInfoButton
+    `;
+    }
+    get infoButtonTemplate() {
+        // &#9432; is an information icon
+        return this.showInfoButton
             ? html `<button class="info-button" @click=${this.infoButtonPressed}>
           &#9432;
           <span class="sr-only">${msg('More info')}</span>
-        </button>`
-            : nothing;
-    }
-    get reviewBlockTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.review))
-            return nothing;
-        const { title, body, stars } = this.model.review;
+        </button>`
+            : nothing;
+    }
+    get reviewBlockTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.review))
+            return nothing;
+        const { title, body, stars } = this.model.review;
         return html `
       <review-block
         viewsize="grid"
@@ -158,61 +160,68 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         .starRating=${stars}
       >
       </review-block>
-    `;
-    }
-    get textSnippetsTemplate() {
-        var _a;
-        if (!this.hasSnippets)
-            return nothing;
+    `;
+    }
+    get textSnippetsTemplate() {
+        var _a;
+        if (!this.hasSnippets)
+            return nothing;
         return html `
       <text-snippet-block viewsize="grid" .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}>
       </text-snippet-block>
-    `;
-    }
-    get volumeIssueTemplate() {
-        var _a, _b, _c, _d;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
-            return nothing;
+    `;
+    }
+    get volumeIssueTemplate() {
+        var _a, _b, _c, _d;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
+            return nothing;
         return html `
       <div class="volume-issue">
         <span class="truncated" title="volume|issue">
           Volume&nbsp;${(_c = this.model) === null || _c === void 0 ? void 0 : _c.volume}, Issue&nbsp;${(_d = this.model) === null || _d === void 0 ? void 0 : _d.issue}
         </span>
       </div>
-    `;
-    }
-    get webArchivesCaptureDatesTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) || !this.model.title)
-            return nothing;
+    `;
+    }
+    get webArchivesCaptureDatesTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) || !this.model.title)
+            return nothing;
         return html `
       <ul class="capture-dates">
         ${map(this.model.captureDates, date => html `<li>
             ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
           </li>`)}
       </ul>
-    `;
-    }
-    get isSortedByDate() {
-        var _a;
-        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
-    }
-    get hasSnippets() {
-        var _a, _b;
-        return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
-    }
-    infoButtonPressed(e) {
-        e.preventDefault();
-        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
-        this.dispatchEvent(event);
-    }
-    /**
-     * CSS
-     */
-    static get styles() {
-        const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
-        return [
-            baseTileStyles,
+    `;
+    }
+    get isSortedByDate() {
+        var _a;
+        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field);
+    }
+    /**
+     * Returns the active sort param if one is set, or the default sort param otherwise.
+     */
+    get effectiveSort() {
+        var _a;
+        return (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
+    }
+    get hasSnippets() {
+        var _a, _b;
+        return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
+    }
+    infoButtonPressed(e) {
+        e.preventDefault();
+        const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
+        this.dispatchEvent(event);
+    }
+    /**
+     * CSS
+     */
+    static get styles() {
+        const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
+        return [
+            baseTileStyles,
             css `
         a:link {
           text-decoration: none;
@@ -251,15 +260,15 @@ let ItemTile = class ItemTile extends BaseTileComponent {
             -webkit-touch-callout: default;
           }
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], ItemTile.prototype, "showInfoButton", void 0);
-ItemTile = __decorate([
-    customElement('item-tile')
-], ItemTile);
-export { ItemTile };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ItemTile.prototype, "showInfoButton", void 0);
+ItemTile = __decorate([
+    customElement('item-tile')
+], ItemTile);
+export { ItemTile };
 //# sourceMappingURL=item-tile.js.map