@internetarchive/collection-browser 2.6.2-alpha.0 → 2.6.2-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/tiles/list/tile-list-compact-header.js +3 -1
- package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact.d.ts +4 -0
- package/dist/src/tiles/list/tile-list-compact.js +12 -4
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.d.ts +4 -0
- package/dist/src/tiles/list/tile-list.js +14 -6
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/package.json +1 -1
- package/src/tiles/list/tile-list-compact-header.ts +3 -1
- package/src/tiles/list/tile-list-compact.ts +13 -4
- package/src/tiles/list/tile-list.ts +15 -6
|
@@ -23,7 +23,9 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
|
|
|
23
23
|
<div id="thumb"></div>
|
|
24
24
|
<div id="title">${msg('Title')}</div>
|
|
25
25
|
<div id="creator">${msg('Creator')}</div>
|
|
26
|
-
<div id="date"
|
|
26
|
+
<div id="date">
|
|
27
|
+
${this.displayValueProvider.dateLabel || msg('Published')}
|
|
28
|
+
</div>
|
|
27
29
|
<div id="icon">${msg('Type')}</div>
|
|
28
30
|
<div id="views">${msg('Views')}</div>
|
|
29
31
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,iBAAiB;IAC1D;;;;;;;;;;;;OAYG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;0BAE9B,GAAG,CAAC,OAAO,CAAC;4BACV,GAAG,CAAC,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,iBAAiB;IAC1D;;;;;;;;;;;;OAYG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;0BAE9B,GAAG,CAAC,OAAO,CAAC;4BACV,GAAG,CAAC,SAAS,CAAC;;YAE9B,IAAI,CAAC,oBAAoB,CAAC,SAAS,IAAI,GAAG,CAAC,WAAW,CAAC;;yBAE1C,GAAG,CAAC,MAAM,CAAC;0BACV,GAAG,CAAC,OAAO,CAAC;;KAEjC,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AA9EY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA8EjC;SA9EY,qBAAqB","sourcesContent":["import { css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n */\n\n render() {\n return html`\n <div id=\"list-line-header\" class=\"${this.classSize}\">\n <div id=\"thumb\"></div>\n <div id=\"title\">${msg('Title')}</div>\n <div id=\"creator\">${msg('Creator')}</div>\n <div id=\"date\">\n ${this.displayValueProvider.dateLabel || msg('Published')}\n </div>\n <div id=\"icon\">${msg('Type')}</div>\n <div id=\"views\">${msg('Views')}</div>\n </div>\n `;\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n font-weight: bold;\n line-height: 20px;\n }\n\n .mobile #views {\n display: none;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n #list-line-header {\n display: grid;\n column-gap: 10px;\n align-items: flex-end;\n padding-bottom: 2px;\n }\n\n #list-line-header.mobile {\n grid-template-columns: 36px 3fr 2fr 68px 35px;\n }\n\n #list-line-header.desktop {\n grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n }\n `;\n }\n}\n"]}
|
|
@@ -7,6 +7,10 @@ export declare class TileListCompact extends BaseTileComponent {
|
|
|
7
7
|
private get creator();
|
|
8
8
|
private get date();
|
|
9
9
|
private get views();
|
|
10
|
+
/**
|
|
11
|
+
* Returns the active sort param if one is set, or the default sort param otherwise.
|
|
12
|
+
*/
|
|
13
|
+
private get effectiveSort();
|
|
10
14
|
private get classSize();
|
|
11
15
|
private get dateFormatSize();
|
|
12
16
|
private get formatSize();
|
|
@@ -18,6 +18,7 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
18
18
|
* - baseImageUrl?: string;
|
|
19
19
|
* - collectionPagePath?: string;
|
|
20
20
|
* - sortParam: SortParam | null = null;
|
|
21
|
+
* - defaultSortParam: SortParam | null = null;
|
|
21
22
|
* - creatorFilter?: string;
|
|
22
23
|
* - mobileBreakpoint?: number;
|
|
23
24
|
* - loggedIn = false;
|
|
@@ -83,7 +84,7 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
83
84
|
// In contrast, the search engine metadata uses 'date' to refer to the actual
|
|
84
85
|
// publication date of the underlying media ("Date Published" in the UI).
|
|
85
86
|
// Refer to the full metadata schema for more info.
|
|
86
|
-
switch ((_a = this.
|
|
87
|
+
switch ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) {
|
|
87
88
|
case 'publicdate':
|
|
88
89
|
return (_b = this.model) === null || _b === void 0 ? void 0 : _b.dateArchived;
|
|
89
90
|
case 'reviewdate':
|
|
@@ -96,10 +97,17 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
96
97
|
}
|
|
97
98
|
get views() {
|
|
98
99
|
var _a, _b, _c;
|
|
99
|
-
return ((_a = this.
|
|
100
|
+
return ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) === 'week'
|
|
100
101
|
? (_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount // weekly views
|
|
101
102
|
: (_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount; // all-time views
|
|
102
103
|
}
|
|
104
|
+
/**
|
|
105
|
+
* Returns the active sort param if one is set, or the default sort param otherwise.
|
|
106
|
+
*/
|
|
107
|
+
get effectiveSort() {
|
|
108
|
+
var _a;
|
|
109
|
+
return (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
|
|
110
|
+
}
|
|
103
111
|
get classSize() {
|
|
104
112
|
if (this.mobileBreakpoint &&
|
|
105
113
|
this.currentWidth &&
|
|
@@ -113,7 +121,7 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
113
121
|
// If we're showing a date published of Jan 1 at midnight, only show the year.
|
|
114
122
|
// This is because items with only a year for their publication date are normalized to
|
|
115
123
|
// Jan 1 at midnight timestamps in the search engine documents.
|
|
116
|
-
if ((!this.isSortedByDate || ((_a = this.
|
|
124
|
+
if ((!this.isSortedByDate || ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) === 'date') && // Any sort except dates that aren't published date
|
|
117
125
|
isFirstMillisecondOfUTCYear((_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished)) {
|
|
118
126
|
return 'year-only';
|
|
119
127
|
}
|
|
@@ -129,7 +137,7 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
129
137
|
}
|
|
130
138
|
get isSortedByDate() {
|
|
131
139
|
var _a;
|
|
132
|
-
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.
|
|
140
|
+
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field);
|
|
133
141
|
}
|
|
134
142
|
static get styles() {
|
|
135
143
|
return css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n */\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${true}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n <a href=${this.href} id=\"title\"\n >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n >\n <div id=\"creator\">\n ${this.model?.mediatype === 'account'\n ? this.displayValueProvider.accountLabel\n : this.creator}\n </div>\n <div id=\"date\">${formatDate(this.date, this.dateFormatSize)}</div>\n <div id=\"icon\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </div>\n <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n </div>\n `;\n }\n\n private get href(): string | typeof nothing {\n if (!this.model?.identifier || this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection'\n );\n }\n\n private get creator(): string | typeof nothing {\n return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n // Note on 'publicdate' vs. 'date':\n // The search engine metadata uses 'publicdate' as the key for the date the item\n // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n // In contrast, the search engine metadata uses 'date' to refer to the actual\n // publication date of the underlying media (\"Date Published\" in the UI).\n // Refer to the full metadata schema for more info.\n switch (this.sortParam?.field) {\n case 'publicdate':\n return this.model?.dateArchived;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.datePublished;\n }\n }\n\n private get views(): number | undefined {\n return this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get dateFormatSize(): DateFormat {\n // If we're showing a date published of Jan 1 at midnight, only show the year.\n // This is because items with only a year for their publication date are normalized to\n // Jan 1 at midnight timestamps in the search engine documents.\n if (\n (!this.isSortedByDate || this.sortParam?.field === 'date') && // Any sort except dates that aren't published date\n isFirstMillisecondOfUTCYear(this.model?.datePublished)\n ) {\n return 'year-only';\n }\n return this.formatSize;\n }\n\n private get formatSize(): NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n #list-line {\n display: grid;\n column-gap: 10px;\n border-top: 1px solid #ddd;\n align-items: center;\n line-height: 20px;\n padding-top: 5px;\n margin-bottom: -5px;\n }\n\n #list-line.mobile {\n grid-template-columns: 36px 3fr 2fr 68px 35px;\n }\n\n #list-line.desktop {\n grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n }\n\n #list-line:hover #title {\n text-decoration: underline;\n }\n\n #title {\n text-decoration: none;\n }\n\n #title:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n #title,\n #creator {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n #icon {\n margin-left: 2px;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n .mobile #views {\n display: none;\n }\n\n .mobile mediatype-icon {\n --iconHeight: 14px;\n --iconWidth: 14px;\n }\n\n .desktop #icon {\n --iconHeight: 20px;\n --iconWidth: 20px;\n }\n\n item-image {\n --imgHeight: 100%;\n --imgWidth: 100%;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n */\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${true}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n <a href=${this.href} id=\"title\"\n >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n >\n <div id=\"creator\">\n ${this.model?.mediatype === 'account'\n ? this.displayValueProvider.accountLabel\n : this.creator}\n </div>\n <div id=\"date\">${formatDate(this.date, this.dateFormatSize)}</div>\n <div id=\"icon\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </div>\n <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n </div>\n `;\n }\n\n private get href(): string | typeof nothing {\n if (!this.model?.identifier || this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection'\n );\n }\n\n private get creator(): string | typeof nothing {\n return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n // Note on 'publicdate' vs. 'date':\n // The search engine metadata uses 'publicdate' as the key for the date the item\n // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n // In contrast, the search engine metadata uses 'date' to refer to the actual\n // publication date of the underlying media (\"Date Published\" in the UI).\n // Refer to the full metadata schema for more info.\n switch (this.effectiveSort?.field) {\n case 'publicdate':\n return this.model?.dateArchived;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.datePublished;\n }\n }\n\n private get views(): number | undefined {\n return this.effectiveSort?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n }\n\n /**\n * Returns the active sort param if one is set, or the default sort param otherwise.\n */\n private get effectiveSort(): SortParam | null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get dateFormatSize(): DateFormat {\n // If we're showing a date published of Jan 1 at midnight, only show the year.\n // This is because items with only a year for their publication date are normalized to\n // Jan 1 at midnight timestamps in the search engine documents.\n if (\n (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date\n isFirstMillisecondOfUTCYear(this.model?.datePublished)\n ) {\n return 'year-only';\n }\n return this.formatSize;\n }\n\n private get formatSize(): NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.effectiveSort?.field as string\n );\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n #list-line {\n display: grid;\n column-gap: 10px;\n border-top: 1px solid #ddd;\n align-items: center;\n line-height: 20px;\n padding-top: 5px;\n margin-bottom: -5px;\n }\n\n #list-line.mobile {\n grid-template-columns: 36px 3fr 2fr 68px 35px;\n }\n\n #list-line.desktop {\n grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n }\n\n #list-line:hover #title {\n text-decoration: underline;\n }\n\n #title {\n text-decoration: none;\n }\n\n #title:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n #title,\n #creator {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n #icon {\n margin-left: 2px;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n .mobile #views {\n display: none;\n }\n\n .mobile mediatype-icon {\n --iconHeight: 14px;\n --iconWidth: 14px;\n }\n\n .desktop #icon {\n --iconHeight: 20px;\n --iconWidth: 20px;\n }\n\n item-image {\n --imgHeight: 100%;\n --imgWidth: 100%;\n }\n `;\n }\n}\n"]}
|
|
@@ -44,6 +44,10 @@ export declare class TileList extends BaseTileComponent {
|
|
|
44
44
|
protected updated(changed: PropertyValues): void;
|
|
45
45
|
private buildCollectionLinks;
|
|
46
46
|
private get date();
|
|
47
|
+
/**
|
|
48
|
+
* Returns the active sort param if one is set, or the default sort param otherwise.
|
|
49
|
+
*/
|
|
50
|
+
private get effectiveSort();
|
|
47
51
|
private get classSize();
|
|
48
52
|
private get formatSize();
|
|
49
53
|
static get styles(): import("lit").CSSResult;
|
|
@@ -27,6 +27,7 @@ let TileList = class TileList extends BaseTileComponent {
|
|
|
27
27
|
* - baseImageUrl?: string;
|
|
28
28
|
* - collectionPagePath?: string;
|
|
29
29
|
* - sortParam: SortParam | null = null;
|
|
30
|
+
* - defaultSortParam: SortParam | null = null;
|
|
30
31
|
* - creatorFilter?: string;
|
|
31
32
|
* - mobileBreakpoint?: number;
|
|
32
33
|
* - loggedIn = false;
|
|
@@ -197,17 +198,17 @@ let TileList = class TileList extends BaseTileComponent {
|
|
|
197
198
|
// Show date label/value when sorted by date type
|
|
198
199
|
// Except datePublished which is always shown
|
|
199
200
|
get dateSortByTemplate() {
|
|
200
|
-
if (this.
|
|
201
|
-
(this.
|
|
202
|
-
this.
|
|
203
|
-
this.
|
|
201
|
+
if (this.effectiveSort &&
|
|
202
|
+
(this.effectiveSort.field === 'addeddate' ||
|
|
203
|
+
this.effectiveSort.field === 'reviewdate' ||
|
|
204
|
+
this.effectiveSort.field === 'publicdate')) {
|
|
204
205
|
return this.metadataTemplate(formatDate(this.date, 'long'), this.displayValueProvider.dateLabel);
|
|
205
206
|
}
|
|
206
207
|
return nothing;
|
|
207
208
|
}
|
|
208
209
|
get viewsTemplate() {
|
|
209
210
|
var _a, _b, _c, _d;
|
|
210
|
-
const viewCount = ((_a = this.
|
|
211
|
+
const viewCount = ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) === 'week'
|
|
211
212
|
? (_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount // weekly views
|
|
212
213
|
: (_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount; // all-time views
|
|
213
214
|
if (viewCount == null)
|
|
@@ -380,7 +381,7 @@ let TileList = class TileList extends BaseTileComponent {
|
|
|
380
381
|
*/
|
|
381
382
|
get date() {
|
|
382
383
|
var _a, _b, _c, _d, _e;
|
|
383
|
-
switch ((_a = this.
|
|
384
|
+
switch ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) {
|
|
384
385
|
case 'date':
|
|
385
386
|
return (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
|
|
386
387
|
case 'reviewdate':
|
|
@@ -391,6 +392,13 @@ let TileList = class TileList extends BaseTileComponent {
|
|
|
391
392
|
return (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived; // publicdate
|
|
392
393
|
}
|
|
393
394
|
}
|
|
395
|
+
/**
|
|
396
|
+
* Returns the active sort param if one is set, or the default sort param otherwise.
|
|
397
|
+
*/
|
|
398
|
+
get effectiveSort() {
|
|
399
|
+
var _a;
|
|
400
|
+
return (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
|
|
401
|
+
}
|
|
394
402
|
get classSize() {
|
|
395
403
|
if (this.mobileBreakpoint &&
|
|
396
404
|
this.currentWidth &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport DOMPurify from 'dompurify';\n\nimport { suppressedCollections } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n */\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get imageBlockTemplate() {\n if (!this.model) return nothing;\n\n const isCollection = this.model.mediatype === 'collection';\n const href = this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n isCollection\n );\n\n return html`<a href=${href}>\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n </a> `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n ${this.webArchivesCaptureDatesTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n `;\n }\n\n // Data templates\n private get iconRightTemplate() {\n return html`\n <a id=\"icon-right\" href=${this.mediatypeURL}>\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </a>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n\n // If the model has a server-specified href, use it\n // Otherwise construct a details link using the identifier\n return this.model?.href\n ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n >${this.model.title ?? this.model.identifier}</a\n >`\n : this.detailsLink(\n this.model.identifier,\n this.model.title,\n this.model.mediatype === 'collection'\n );\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate(msg('Source'))}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, msg('Volume'));\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, msg('Issue'));\n }\n\n private get creatorTemplate() {\n // \"Archivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"\n >${this.displayValueProvider.accountLabel ?? nothing}</span\n >\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators || this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate(msg('By'))}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n ', '\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n // If we're showing a date published of Jan 1 at midnight, only show the year.\n // This is because items with only a year for their publication date are normalized to\n // Jan 1 at midnight timestamps in the search engine documents.\n const date: Date | undefined = this.model?.datePublished;\n let format: DateFormat = 'long';\n if (isFirstMillisecondOfUTCYear(date)) {\n format = 'year-only';\n }\n\n return this.metadataTemplate(formatDate(date, format), msg('Published'));\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' ||\n this.sortParam.field === 'reviewdate' ||\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n this.displayValueProvider.dateLabel\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n const viewCount =\n this.sortParam?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n if (viewCount == null) return nothing;\n\n // when its a search-tile, we don't have any stats to show\n if (this.model?.mediatype === 'search') {\n return this.metadataTemplate('(Favorited search query)', '');\n }\n\n return this.metadataTemplate(\n `${formatCount(viewCount, this.formatSize)}`,\n msg('Views')\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, msg('Avg Rating'));\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, msg('Reviews'));\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects || this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate(msg('Topics'))}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n ', '\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks || this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate(msg('Collections'))}\n ${join(this.collectionLinks, ', ')}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n // Sanitize away any HTML tags and convert line breaks to spaces.\n unsafeHTML(\n DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n ),\n '',\n 'description'\n );\n }\n\n private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { title, body, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"list\"\n .title=${title}\n .body=${body}\n .starRating=${stars}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`<text-snippet-block\n viewsize=\"list\"\n .snippets=${this.model?.snippets}\n ></text-snippet-block>`;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private get webArchivesCaptureDatesTemplate():\n | TemplateResult\n | typeof nothing {\n if (!this.model?.captureDates || !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date => html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date\n )}\n </li>`\n )}\n </ul>\n `;\n }\n\n // Utility functions\n // eslint-disable-next-line default-param-last\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field || !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n /* eslint-disable lit/no-invalid-html */\n return html`<a\n href=\"${this.baseNavigationUrl}/search?query=${query}\"\n rel=\"nofollow\"\n >\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n /* eslint-enable lit/no-invalid-html */\n }\n\n private detailsLink(\n identifier?: string,\n text?: string,\n isCollection = false\n ): TemplateResult | typeof nothing {\n if (!identifier) return nothing;\n\n const linkText = text ?? identifier;\n const linkHref = this.displayValueProvider.itemPageUrl(\n identifier,\n isCollection\n );\n\n return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;\n }\n\n /** The URL of this item's mediatype collection, if defined. */\n private get mediatypeURL(): string | typeof nothing {\n // NB: baseNavigationUrl can be an empty string\n if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\n return nothing;\n\n // Need special handling for certain mediatypes that don't have a top-level collection page\n switch (this.model.mediatype) {\n case 'collection':\n return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n case 'account':\n return nothing;\n default:\n return this.displayValueProvider.itemPageUrl(\n this.model.mediatype,\n true\n );\n }\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model') || changed.has('collectionTitles')) {\n this.buildCollectionLinks();\n }\n }\n\n private async buildCollectionLinks() {\n if (!this.model?.collections || this.model.collections.length === 0) {\n return;\n }\n\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];\n for (const collection of this.model.collections) {\n // Don't include favorites or collections that are meant to be suppressed\n if (\n !suppressedCollections[collection] &&\n !collection.startsWith('fav-')\n ) {\n newCollectionLinks.push(\n this.detailsLink(\n collection,\n this.collectionTitles?.get(collection) ?? collection,\n true\n )\n );\n }\n }\n this.collectionLinks = newCollectionLinks;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n div a:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n /* fields */\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n /* align top of text with image */\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; /* number of lines to show */\n line-clamp: 3;\n\n /*\n * Safari doesn't always respect the line-clamping rules above,\n * so we add this to ensure these fields still get truncated\n */\n max-height: 60px;\n }\n\n #collections {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n #collections > a {\n display: inline-block;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n /* Top level container */\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n /*\n * If the container becomes very tiny, don't let the thumbnail side take\n * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n */\n #list-line-left {\n max-width: 25%;\n\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n /* Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n\n /*\n * With the exception of the title line, allow these to wrap if\n * the space becomes too small to accommodate them together.\n * \n * The title line is excluded because it contains the mediatype icon\n * which we don't want to wrap.\n */\n #item-line,\n #dates-line,\n #views-line {\n flex-wrap: wrap;\n }\n\n .capture-dates {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .capture-dates a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n .capture-dates a:hover {\n text-decoration: underline;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport DOMPurify from 'dompurify';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport { suppressedCollections } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n */\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get imageBlockTemplate() {\n if (!this.model) return nothing;\n\n const isCollection = this.model.mediatype === 'collection';\n const href = this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n isCollection\n );\n\n return html`<a href=${href}>\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isCompactTile=${false}\n .isListTile=${true}\n .viewSize=${this.classSize}\n .loggedIn=${this.loggedIn}\n >\n </image-block>\n </a> `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n ${this.webArchivesCaptureDatesTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n ${this.reviewBlockTemplate}\n `;\n }\n\n // Data templates\n private get iconRightTemplate() {\n return html`\n <a id=\"icon-right\" href=${this.mediatypeURL}>\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </a>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n\n // If the model has a server-specified href, use it\n // Otherwise construct a details link using the identifier\n return this.model?.href\n ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n >${this.model.title ?? this.model.identifier}</a\n >`\n : this.detailsLink(\n this.model.identifier,\n this.model.title,\n this.model.mediatype === 'collection'\n );\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate(msg('Source'))}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, msg('Volume'));\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, msg('Issue'));\n }\n\n private get creatorTemplate() {\n // \"Archivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"\n >${this.displayValueProvider.accountLabel ?? nothing}</span\n >\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators || this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate(msg('By'))}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n ', '\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n // If we're showing a date published of Jan 1 at midnight, only show the year.\n // This is because items with only a year for their publication date are normalized to\n // Jan 1 at midnight timestamps in the search engine documents.\n const date: Date | undefined = this.model?.datePublished;\n let format: DateFormat = 'long';\n if (isFirstMillisecondOfUTCYear(date)) {\n format = 'year-only';\n }\n\n return this.metadataTemplate(formatDate(date, format), msg('Published'));\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.effectiveSort &&\n (this.effectiveSort.field === 'addeddate' ||\n this.effectiveSort.field === 'reviewdate' ||\n this.effectiveSort.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n this.displayValueProvider.dateLabel\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n const viewCount =\n this.effectiveSort?.field === 'week'\n ? this.model?.weeklyViewCount // weekly views\n : this.model?.viewCount; // all-time views\n if (viewCount == null) return nothing;\n\n // when its a search-tile, we don't have any stats to show\n if (this.model?.mediatype === 'search') {\n return this.metadataTemplate('(Favorited search query)', '');\n }\n\n return this.metadataTemplate(\n `${formatCount(viewCount, this.formatSize)}`,\n msg('Views')\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, msg('Avg Rating'));\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, msg('Reviews'));\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects || this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate(msg('Topics'))}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n ', '\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks || this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate(msg('Collections'))}\n ${join(this.collectionLinks, ', ')}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n // Sanitize away any HTML tags and convert line breaks to spaces.\n unsafeHTML(\n DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n ),\n '',\n 'description'\n );\n }\n\n private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.review) return nothing;\n\n const { title, body, stars } = this.model.review;\n return html`\n <review-block\n viewsize=\"list\"\n .title=${title}\n .body=${body}\n .starRating=${stars}\n >\n </review-block>\n `;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`<text-snippet-block\n viewsize=\"list\"\n .snippets=${this.model?.snippets}\n ></text-snippet-block>`;\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private get webArchivesCaptureDatesTemplate():\n | TemplateResult\n | typeof nothing {\n if (!this.model?.captureDates || !this.model.title) return nothing;\n\n return html`\n <ul class=\"capture-dates\">\n ${map(\n this.model.captureDates,\n date => html`<li>\n ${this.displayValueProvider.webArchivesCaptureLink(\n this.model!.title,\n date\n )}\n </li>`\n )}\n </ul>\n `;\n }\n\n // Utility functions\n // eslint-disable-next-line default-param-last\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field || !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n /* eslint-disable lit/no-invalid-html */\n return html`<a\n href=\"${this.baseNavigationUrl}/search?query=${query}\"\n rel=\"nofollow\"\n >\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n /* eslint-enable lit/no-invalid-html */\n }\n\n private detailsLink(\n identifier?: string,\n text?: string,\n isCollection = false\n ): TemplateResult | typeof nothing {\n if (!identifier) return nothing;\n\n const linkText = text ?? identifier;\n const linkHref = this.displayValueProvider.itemPageUrl(\n identifier,\n isCollection\n );\n\n return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;\n }\n\n /** The URL of this item's mediatype collection, if defined. */\n private get mediatypeURL(): string | typeof nothing {\n // NB: baseNavigationUrl can be an empty string\n if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\n return nothing;\n\n // Need special handling for certain mediatypes that don't have a top-level collection page\n switch (this.model.mediatype) {\n case 'collection':\n return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n case 'account':\n return nothing;\n default:\n return this.displayValueProvider.itemPageUrl(\n this.model.mediatype,\n true\n );\n }\n }\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model') || changed.has('collectionTitles')) {\n this.buildCollectionLinks();\n }\n }\n\n private async buildCollectionLinks() {\n if (!this.model?.collections || this.model.collections.length === 0) {\n return;\n }\n\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];\n for (const collection of this.model.collections) {\n // Don't include favorites or collections that are meant to be suppressed\n if (\n !suppressedCollections[collection] &&\n !collection.startsWith('fav-')\n ) {\n newCollectionLinks.push(\n this.detailsLink(\n collection,\n this.collectionTitles?.get(collection) ?? collection,\n true\n )\n );\n }\n }\n this.collectionLinks = newCollectionLinks;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n switch (this.effectiveSort?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n /**\n * Returns the active sort param if one is set, or the default sort param otherwise.\n */\n private get effectiveSort(): SortParam | null {\n return this.sortParam ?? this.defaultSortParam;\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n div a:link {\n color: var(--ia-theme-link-color, #4b64ff);\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n /* fields */\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n /* align top of text with image */\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; /* number of lines to show */\n line-clamp: 3;\n\n /*\n * Safari doesn't always respect the line-clamping rules above,\n * so we add this to ensure these fields still get truncated\n */\n max-height: 60px;\n }\n\n #collections {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n #collections > a {\n display: inline-block;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n /* Top level container */\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n /*\n * If the container becomes very tiny, don't let the thumbnail side take\n * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n */\n #list-line-left {\n max-width: 25%;\n\n display: flex;\n flex-direction: column;\n row-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n /* Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n column-gap: 10px;\n }\n\n /*\n * With the exception of the title line, allow these to wrap if\n * the space becomes too small to accommodate them together.\n * \n * The title line is excluded because it contains the mediatype icon\n * which we don't want to wrap.\n */\n #item-line,\n #dates-line,\n #views-line {\n flex-wrap: wrap;\n }\n\n .capture-dates {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .capture-dates a:link {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n .capture-dates a:hover {\n text-decoration: underline;\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -25,7 +25,9 @@ export class TileListCompactHeader extends BaseTileComponent {
|
|
|
25
25
|
<div id="thumb"></div>
|
|
26
26
|
<div id="title">${msg('Title')}</div>
|
|
27
27
|
<div id="creator">${msg('Creator')}</div>
|
|
28
|
-
<div id="date"
|
|
28
|
+
<div id="date">
|
|
29
|
+
${this.displayValueProvider.dateLabel || msg('Published')}
|
|
30
|
+
</div>
|
|
29
31
|
<div id="icon">${msg('Type')}</div>
|
|
30
32
|
<div id="views">${msg('Views')}</div>
|
|
31
33
|
</div>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, html, nothing } from 'lit';
|
|
2
2
|
import { customElement } from 'lit/decorators.js';
|
|
3
3
|
import DOMPurify from 'dompurify';
|
|
4
|
+
import type { SortParam } from '@internetarchive/search-service';
|
|
4
5
|
import { BaseTileComponent } from '../base-tile-component';
|
|
5
6
|
|
|
6
7
|
import { formatCount, NumberFormat } from '../../utils/format-count';
|
|
@@ -21,6 +22,7 @@ export class TileListCompact extends BaseTileComponent {
|
|
|
21
22
|
* - baseImageUrl?: string;
|
|
22
23
|
* - collectionPagePath?: string;
|
|
23
24
|
* - sortParam: SortParam | null = null;
|
|
25
|
+
* - defaultSortParam: SortParam | null = null;
|
|
24
26
|
* - creatorFilter?: string;
|
|
25
27
|
* - mobileBreakpoint?: number;
|
|
26
28
|
* - loggedIn = false;
|
|
@@ -91,7 +93,7 @@ export class TileListCompact extends BaseTileComponent {
|
|
|
91
93
|
// In contrast, the search engine metadata uses 'date' to refer to the actual
|
|
92
94
|
// publication date of the underlying media ("Date Published" in the UI).
|
|
93
95
|
// Refer to the full metadata schema for more info.
|
|
94
|
-
switch (this.
|
|
96
|
+
switch (this.effectiveSort?.field) {
|
|
95
97
|
case 'publicdate':
|
|
96
98
|
return this.model?.dateArchived;
|
|
97
99
|
case 'reviewdate':
|
|
@@ -104,11 +106,18 @@ export class TileListCompact extends BaseTileComponent {
|
|
|
104
106
|
}
|
|
105
107
|
|
|
106
108
|
private get views(): number | undefined {
|
|
107
|
-
return this.
|
|
109
|
+
return this.effectiveSort?.field === 'week'
|
|
108
110
|
? this.model?.weeklyViewCount // weekly views
|
|
109
111
|
: this.model?.viewCount; // all-time views
|
|
110
112
|
}
|
|
111
113
|
|
|
114
|
+
/**
|
|
115
|
+
* Returns the active sort param if one is set, or the default sort param otherwise.
|
|
116
|
+
*/
|
|
117
|
+
private get effectiveSort(): SortParam | null {
|
|
118
|
+
return this.sortParam ?? this.defaultSortParam;
|
|
119
|
+
}
|
|
120
|
+
|
|
112
121
|
private get classSize(): string {
|
|
113
122
|
if (
|
|
114
123
|
this.mobileBreakpoint &&
|
|
@@ -125,7 +134,7 @@ export class TileListCompact extends BaseTileComponent {
|
|
|
125
134
|
// This is because items with only a year for their publication date are normalized to
|
|
126
135
|
// Jan 1 at midnight timestamps in the search engine documents.
|
|
127
136
|
if (
|
|
128
|
-
(!this.isSortedByDate || this.
|
|
137
|
+
(!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date
|
|
129
138
|
isFirstMillisecondOfUTCYear(this.model?.datePublished)
|
|
130
139
|
) {
|
|
131
140
|
return 'year-only';
|
|
@@ -146,7 +155,7 @@ export class TileListCompact extends BaseTileComponent {
|
|
|
146
155
|
|
|
147
156
|
private get isSortedByDate(): boolean {
|
|
148
157
|
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
|
|
149
|
-
this.
|
|
158
|
+
this.effectiveSort?.field as string
|
|
150
159
|
);
|
|
151
160
|
}
|
|
152
161
|
|
|
@@ -7,6 +7,7 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
7
7
|
import { msg } from '@lit/localize';
|
|
8
8
|
import DOMPurify from 'dompurify';
|
|
9
9
|
|
|
10
|
+
import type { SortParam } from '@internetarchive/search-service';
|
|
10
11
|
import { suppressedCollections } from '../../models';
|
|
11
12
|
import type { CollectionTitles } from '../../data-source/models';
|
|
12
13
|
import { BaseTileComponent } from '../base-tile-component';
|
|
@@ -31,6 +32,7 @@ export class TileList extends BaseTileComponent {
|
|
|
31
32
|
* - baseImageUrl?: string;
|
|
32
33
|
* - collectionPagePath?: string;
|
|
33
34
|
* - sortParam: SortParam | null = null;
|
|
35
|
+
* - defaultSortParam: SortParam | null = null;
|
|
34
36
|
* - creatorFilter?: string;
|
|
35
37
|
* - mobileBreakpoint?: number;
|
|
36
38
|
* - loggedIn = false;
|
|
@@ -224,10 +226,10 @@ export class TileList extends BaseTileComponent {
|
|
|
224
226
|
// Except datePublished which is always shown
|
|
225
227
|
private get dateSortByTemplate() {
|
|
226
228
|
if (
|
|
227
|
-
this.
|
|
228
|
-
(this.
|
|
229
|
-
this.
|
|
230
|
-
this.
|
|
229
|
+
this.effectiveSort &&
|
|
230
|
+
(this.effectiveSort.field === 'addeddate' ||
|
|
231
|
+
this.effectiveSort.field === 'reviewdate' ||
|
|
232
|
+
this.effectiveSort.field === 'publicdate')
|
|
231
233
|
) {
|
|
232
234
|
return this.metadataTemplate(
|
|
233
235
|
formatDate(this.date, 'long'),
|
|
@@ -239,7 +241,7 @@ export class TileList extends BaseTileComponent {
|
|
|
239
241
|
|
|
240
242
|
private get viewsTemplate() {
|
|
241
243
|
const viewCount =
|
|
242
|
-
this.
|
|
244
|
+
this.effectiveSort?.field === 'week'
|
|
243
245
|
? this.model?.weeklyViewCount // weekly views
|
|
244
246
|
: this.model?.viewCount; // all-time views
|
|
245
247
|
if (viewCount == null) return nothing;
|
|
@@ -459,7 +461,7 @@ export class TileList extends BaseTileComponent {
|
|
|
459
461
|
* @see src/models.ts
|
|
460
462
|
*/
|
|
461
463
|
private get date(): Date | undefined {
|
|
462
|
-
switch (this.
|
|
464
|
+
switch (this.effectiveSort?.field) {
|
|
463
465
|
case 'date':
|
|
464
466
|
return this.model?.datePublished;
|
|
465
467
|
case 'reviewdate':
|
|
@@ -471,6 +473,13 @@ export class TileList extends BaseTileComponent {
|
|
|
471
473
|
}
|
|
472
474
|
}
|
|
473
475
|
|
|
476
|
+
/**
|
|
477
|
+
* Returns the active sort param if one is set, or the default sort param otherwise.
|
|
478
|
+
*/
|
|
479
|
+
private get effectiveSort(): SortParam | null {
|
|
480
|
+
return this.sortParam ?? this.defaultSortParam;
|
|
481
|
+
}
|
|
482
|
+
|
|
474
483
|
private get classSize(): string {
|
|
475
484
|
if (
|
|
476
485
|
this.mobileBreakpoint &&
|