@internetarchive/collection-browser 4.3.1-alpha-webdev8257.0 → 4.3.1
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/index.d.ts +0 -1
- package/dist/index.js.map +1 -1
- package/dist/src/app-root.d.ts +0 -8
- package/dist/src/app-root.js +672 -698
- package/dist/src/app-root.js.map +1 -1
- package/dist/src/collection-browser.d.ts +0 -8
- package/dist/src/collection-browser.js +762 -779
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/tiles/base-tile-component.d.ts +1 -17
- package/dist/src/tiles/base-tile-component.js +1 -48
- package/dist/src/tiles/base-tile-component.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.js +138 -139
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact-header.js +46 -66
- package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact.d.ts +1 -1
- package/dist/src/tiles/list/tile-list-compact.js +100 -132
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.d.ts +1 -1
- package/dist/src/tiles/list/tile-list.js +298 -316
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/models.d.ts +0 -14
- package/dist/src/tiles/models.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.d.ts +0 -14
- package/dist/src/tiles/tile-dispatcher.js +216 -319
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/index.ts +28 -29
- package/package.json +2 -2
- package/src/app-root.ts +1251 -1281
- package/src/collection-browser.ts +3049 -3063
- package/src/tiles/base-tile-component.ts +65 -121
- package/src/tiles/grid/item-tile.ts +346 -347
- package/src/tiles/list/tile-list-compact-header.ts +86 -106
- package/src/tiles/list/tile-list-compact.ts +239 -273
- package/src/tiles/list/tile-list.ts +700 -718
- package/src/tiles/models.ts +8 -24
- package/src/tiles/tile-dispatcher.ts +527 -637
- package/dist/src/styles/tile-action-styles.d.ts +0 -14
- package/dist/src/styles/tile-action-styles.js +0 -52
- package/dist/src/styles/tile-action-styles.js.map +0 -1
- package/src/styles/tile-action-styles.ts +0 -52
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
3
|
import { customElement } from 'lit/decorators.js';
|
|
4
4
|
import { msg } from '@lit/localize';
|
|
5
5
|
import { BaseTileComponent } from '../base-tile-component';
|
|
@@ -7,7 +7,6 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
|
|
|
7
7
|
/*
|
|
8
8
|
* Reactive properties inherited from BaseTileComponent:
|
|
9
9
|
* - model?: TileModel;
|
|
10
|
-
* - tileActions: TileAction[] = [];
|
|
11
10
|
* - currentWidth?: number;
|
|
12
11
|
* - currentHeight?: number;
|
|
13
12
|
* - baseNavigationUrl?: string;
|
|
@@ -20,20 +19,17 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
|
|
|
20
19
|
* - suppressBlurring = false;
|
|
21
20
|
*/
|
|
22
21
|
render() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div id="
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<div id="
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
<div id="icon">${msg('Type')}</div>
|
|
35
|
-
<div id="views">${this.displayValueProvider.viewsLabel}</div>
|
|
36
|
-
</div>
|
|
22
|
+
return html `
|
|
23
|
+
<div id="list-line-header" class="${this.classSize}">
|
|
24
|
+
<div id="thumb"></div>
|
|
25
|
+
<div id="title">${msg('Title')}</div>
|
|
26
|
+
<div id="creator">${msg('Creator')}</div>
|
|
27
|
+
<div id="date">
|
|
28
|
+
${this.displayValueProvider.dateLabel || msg('Published')}
|
|
29
|
+
</div>
|
|
30
|
+
<div id="icon">${msg('Type')}</div>
|
|
31
|
+
<div id="views">${this.displayValueProvider.viewsLabel}</div>
|
|
32
|
+
</div>
|
|
37
33
|
`;
|
|
38
34
|
}
|
|
39
35
|
get classSize() {
|
|
@@ -45,56 +41,40 @@ let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponen
|
|
|
45
41
|
return 'desktop';
|
|
46
42
|
}
|
|
47
43
|
static get styles() {
|
|
48
|
-
return css `
|
|
49
|
-
html {
|
|
50
|
-
font-size: unset;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
div {
|
|
54
|
-
font-size: 14px;
|
|
55
|
-
font-weight: bold;
|
|
56
|
-
line-height: 20px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.mobile #views {
|
|
60
|
-
display: none;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
#views {
|
|
64
|
-
text-align: right;
|
|
65
|
-
padding-right: 8px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
#list-line-header {
|
|
69
|
-
display: grid;
|
|
70
|
-
column-gap: 10px;
|
|
71
|
-
align-items: flex-end;
|
|
72
|
-
padding-bottom: 2px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
#list-line-header.mobile {
|
|
76
|
-
grid-template-columns: 36px 3fr 2fr 68px 35px;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
#list-line-header.desktop {
|
|
80
|
-
grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/*
|
|
84
|
-
* When tile actions are present in the rows below, reserve a matching
|
|
85
|
-
* column here so the columns stay aligned with each row.
|
|
86
|
-
*/
|
|
87
|
-
#list-line-header.mobile.has-actions {
|
|
88
|
-
grid-template-columns:
|
|
89
|
-
36px var(--tileActionColumnWidth, 90px) 3fr 2fr
|
|
90
|
-
68px 35px;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
#list-line-header.desktop.has-actions {
|
|
94
|
-
grid-template-columns:
|
|
95
|
-
51px var(--tileActionColumnWidth, 100px) 3fr 2fr
|
|
96
|
-
95px 30px 115px;
|
|
97
|
-
}
|
|
44
|
+
return css `
|
|
45
|
+
html {
|
|
46
|
+
font-size: unset;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
div {
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
font-weight: bold;
|
|
52
|
+
line-height: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.mobile #views {
|
|
56
|
+
display: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
#views {
|
|
60
|
+
text-align: right;
|
|
61
|
+
padding-right: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
#list-line-header {
|
|
65
|
+
display: grid;
|
|
66
|
+
column-gap: 10px;
|
|
67
|
+
align-items: flex-end;
|
|
68
|
+
padding-bottom: 2px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#list-line-header.mobile {
|
|
72
|
+
grid-template-columns: 36px 3fr 2fr 68px 35px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
#list-line-header.desktop {
|
|
76
|
+
grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
|
|
77
|
+
}
|
|
98
78
|
`;
|
|
99
79
|
}
|
|
100
80
|
};
|
|
@@ -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,
|
|
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;AAGpD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,iBAAiB;IAC1D;;;;;;;;;;;;;OAaG;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,IAAI,CAAC,oBAAoB,CAAC,UAAU;;KAEzD,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC,CAAC;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AA/EY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA+EjC","sourcesContent":["import { css, html } from 'lit';\r\nimport { customElement } from 'lit/decorators.js';\r\nimport { msg } from '@lit/localize';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\n\r\n@customElement('tile-list-compact-header')\r\nexport class TileListCompactHeader extends BaseTileComponent {\r\n /*\r\n * Reactive properties inherited from BaseTileComponent:\r\n * - model?: TileModel;\r\n * - currentWidth?: number;\r\n * - currentHeight?: number;\r\n * - baseNavigationUrl?: string;\r\n * - baseImageUrl?: string;\r\n * - collectionPagePath?: string;\r\n * - sortParam: SortParam | null = null;\r\n * - creatorFilter?: string;\r\n * - mobileBreakpoint?: number;\r\n * - loggedIn = false;\r\n * - suppressBlurring = false;\r\n */\r\n\r\n render() {\r\n return html`\r\n <div id=\"list-line-header\" class=\"${this.classSize}\">\r\n <div id=\"thumb\"></div>\r\n <div id=\"title\">${msg('Title')}</div>\r\n <div id=\"creator\">${msg('Creator')}</div>\r\n <div id=\"date\">\r\n ${this.displayValueProvider.dateLabel || msg('Published')}\r\n </div>\r\n <div id=\"icon\">${msg('Type')}</div>\r\n <div id=\"views\">${this.displayValueProvider.viewsLabel}</div>\r\n </div>\r\n `;\r\n }\r\n\r\n private get classSize(): string {\r\n if (\r\n this.mobileBreakpoint &&\r\n this.currentWidth &&\r\n this.currentWidth < this.mobileBreakpoint\r\n ) {\r\n return 'mobile';\r\n }\r\n return 'desktop';\r\n }\r\n\r\n static get styles() {\r\n return css`\r\n html {\r\n font-size: unset;\r\n }\r\n\r\n div {\r\n font-size: 14px;\r\n font-weight: bold;\r\n line-height: 20px;\r\n }\r\n\r\n .mobile #views {\r\n display: none;\r\n }\r\n\r\n #views {\r\n text-align: right;\r\n padding-right: 8px;\r\n }\r\n\r\n #list-line-header {\r\n display: grid;\r\n column-gap: 10px;\r\n align-items: flex-end;\r\n padding-bottom: 2px;\r\n }\r\n\r\n #list-line-header.mobile {\r\n grid-template-columns: 36px 3fr 2fr 68px 35px;\r\n }\r\n\r\n #list-line-header.desktop {\r\n grid-template-columns: 51px 3fr 2fr 95px 30px 115px;\r\n }\r\n `;\r\n }\r\n}\r\n"]}
|
|
@@ -5,14 +5,12 @@ import DOMPurify from 'dompurify';
|
|
|
5
5
|
import { BaseTileComponent } from '../base-tile-component';
|
|
6
6
|
import { formatCount } from '../../utils/format-count';
|
|
7
7
|
import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
|
|
8
|
-
import { tileActionStyles } from '../../styles/tile-action-styles';
|
|
9
8
|
import '../image-block';
|
|
10
9
|
import '../tile-mediatype-icon';
|
|
11
10
|
let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
12
11
|
/*
|
|
13
12
|
* Reactive properties inherited from BaseTileComponent:
|
|
14
13
|
* - model?: TileModel;
|
|
15
|
-
* - tileActions: TileAction[] = [];
|
|
16
14
|
* - currentWidth?: number;
|
|
17
15
|
* - currentHeight?: number;
|
|
18
16
|
* - baseNavigationUrl?: string;
|
|
@@ -27,40 +25,34 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
27
25
|
* - useLocalTime = false;
|
|
28
26
|
*/
|
|
29
27
|
render() {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
.
|
|
35
|
-
.
|
|
36
|
-
.
|
|
37
|
-
.
|
|
38
|
-
.
|
|
39
|
-
.
|
|
40
|
-
|
|
41
|
-
>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</div>`
|
|
47
|
-
: nothing}
|
|
48
|
-
<a href=${this.href} id="title"
|
|
49
|
-
>${DOMPurify.sanitize(this.model?.title ?? '')}</a
|
|
50
|
-
>
|
|
51
|
-
<div id="creator">
|
|
28
|
+
return html `
|
|
29
|
+
<div id="list-line" class="${this.classSize}">
|
|
30
|
+
<image-block
|
|
31
|
+
.model=${this.model}
|
|
32
|
+
.baseImageUrl=${this.baseImageUrl}
|
|
33
|
+
.isCompactTile=${true}
|
|
34
|
+
.isListTile=${true}
|
|
35
|
+
.viewSize=${this.classSize}
|
|
36
|
+
.loggedIn=${this.loggedIn}
|
|
37
|
+
.suppressBlurring=${this.suppressBlurring}
|
|
38
|
+
>
|
|
39
|
+
</image-block>
|
|
40
|
+
<a href=${this.href} id="title"
|
|
41
|
+
>${DOMPurify.sanitize(this.model?.title ?? '')}</a
|
|
42
|
+
>
|
|
43
|
+
<div id="creator">
|
|
52
44
|
${this.model?.mediatype === 'account'
|
|
53
45
|
? this.displayValueProvider.accountLabel
|
|
54
|
-
: this.creator}
|
|
55
|
-
</div>
|
|
56
|
-
<div id="date">
|
|
57
|
-
${this.getFormattedDate(this.date, this.dateFormatSize)}
|
|
58
|
-
</div>
|
|
59
|
-
<div id="icon">
|
|
60
|
-
<tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
|
|
61
|
-
</div>
|
|
62
|
-
<div id="views">${formatCount(this.views ?? 0, this.formatSize)}</div>
|
|
63
|
-
</div>
|
|
46
|
+
: this.creator}
|
|
47
|
+
</div>
|
|
48
|
+
<div id="date">
|
|
49
|
+
${this.getFormattedDate(this.date, this.dateFormatSize)}
|
|
50
|
+
</div>
|
|
51
|
+
<div id="icon">
|
|
52
|
+
<tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
|
|
53
|
+
</div>
|
|
54
|
+
<div id="views">${formatCount(this.views ?? 0, this.formatSize)}</div>
|
|
55
|
+
</div>
|
|
64
56
|
`;
|
|
65
57
|
}
|
|
66
58
|
get href() {
|
|
@@ -140,104 +132,80 @@ let TileListCompact = class TileListCompact extends BaseTileComponent {
|
|
|
140
132
|
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(this.effectiveSort?.field);
|
|
141
133
|
}
|
|
142
134
|
static get styles() {
|
|
143
|
-
return
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
text-align: right;
|
|
218
|
-
padding-right: 8px;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.mobile #views {
|
|
222
|
-
display: none;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.mobile tile-mediatype-icon {
|
|
226
|
-
--iconHeight: 14px;
|
|
227
|
-
--iconWidth: 14px;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.desktop #icon {
|
|
231
|
-
--iconHeight: 20px;
|
|
232
|
-
--iconWidth: 20px;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
item-image {
|
|
236
|
-
--imgHeight: 100%;
|
|
237
|
-
--imgWidth: 100%;
|
|
238
|
-
}
|
|
239
|
-
`,
|
|
240
|
-
];
|
|
135
|
+
return css `
|
|
136
|
+
html {
|
|
137
|
+
font-size: unset;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
div {
|
|
141
|
+
font-size: 14px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
#list-line {
|
|
145
|
+
display: grid;
|
|
146
|
+
column-gap: 10px;
|
|
147
|
+
border-top: 1px solid #ddd;
|
|
148
|
+
align-items: center;
|
|
149
|
+
line-height: 20px;
|
|
150
|
+
padding-top: 5px;
|
|
151
|
+
margin-bottom: -5px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
#list-line.mobile {
|
|
155
|
+
grid-template-columns: 36px 3fr 2fr 68px 35px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
#list-line.desktop {
|
|
159
|
+
grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
#list-line:hover #title {
|
|
163
|
+
text-decoration: underline;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
#title {
|
|
167
|
+
text-decoration: none;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
#title:link {
|
|
171
|
+
color: var(--ia-theme-link-color, #4b64ff);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
#title,
|
|
175
|
+
#creator {
|
|
176
|
+
text-overflow: ellipsis;
|
|
177
|
+
overflow: hidden;
|
|
178
|
+
white-space: nowrap;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
#icon {
|
|
182
|
+
margin-left: 2px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
#views {
|
|
186
|
+
text-align: right;
|
|
187
|
+
padding-right: 8px;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.mobile #views {
|
|
191
|
+
display: none;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.mobile tile-mediatype-icon {
|
|
195
|
+
--iconHeight: 14px;
|
|
196
|
+
--iconWidth: 14px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.desktop #icon {
|
|
200
|
+
--iconHeight: 20px;
|
|
201
|
+
--iconWidth: 20px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
item-image {
|
|
205
|
+
--imgHeight: 100%;
|
|
206
|
+
--imgWidth: 100%;
|
|
207
|
+
}
|
|
208
|
+
`;
|
|
241
209
|
}
|
|
242
210
|
};
|
|
243
211
|
TileListCompact = __decorate([
|
|
@@ -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 type { SortParam } from '@internetarchive/search-service';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { tileActionStyles } from '../../styles/tile-action-styles';\n\nimport '../image-block';\nimport '../tile-mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends BaseTileComponent {\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - tileActions: TileAction[] = [];\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 * - suppressBlurring = false;\n * - useLocalTime = false;\n */\n\n render() {\n const lineClasses = `${this.classSize}${\n this.tileActions.length > 0 ? ' has-actions' : ''\n }`;\n return html`\n <div id=\"list-line\" class=\"${lineClasses}\">\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 .suppressBlurring=${this.suppressBlurring}\n >\n </image-block>\n ${this.tileActions.length > 0\n ? html`<div id=\"actions\">\n ${this.renderTileActions('list-compact')}\n </div>`\n : nothing}\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\">\n ${this.getFormattedDate(this.date, this.dateFormatSize)}\n </div>\n <div id=\"icon\">\n <tile-mediatype-icon .model=${this.model}> </tile-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 [\n tileActionStyles,\n 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 115px;\n }\n\n /*\n * When tile actions are present, insert an extra column for them\n * between the thumbnail and the title.\n */\n #list-line.mobile.has-actions {\n grid-template-columns:\n 36px var(--tileActionColumnWidth, 90px)\n 3fr 2fr 68px 35px;\n }\n\n #list-line.desktop.has-actions {\n grid-template-columns:\n 51px var(--tileActionColumnWidth, 100px)\n 3fr 2fr 95px 30px 115px;\n }\n\n #actions {\n /* The flex container inside is what holds the action buttons */\n display: flex;\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 tile-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}\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';\r\nimport { customElement } from 'lit/decorators.js';\r\nimport DOMPurify from 'dompurify';\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\n\r\nimport { formatCount, NumberFormat } from '../../utils/format-count';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\n\r\nimport '../image-block';\r\nimport '../tile-mediatype-icon';\r\n\r\n@customElement('tile-list-compact')\r\nexport class TileListCompact extends BaseTileComponent {\r\n /*\r\n * Reactive properties inherited from BaseTileComponent:\r\n * - model?: TileModel;\r\n * - currentWidth?: number;\r\n * - currentHeight?: number;\r\n * - baseNavigationUrl?: string;\r\n * - baseImageUrl?: string;\r\n * - collectionPagePath?: string;\r\n * - sortParam: SortParam | null = null;\r\n * - defaultSortParam: SortParam | null = null;\r\n * - creatorFilter?: string;\r\n * - mobileBreakpoint?: number;\r\n * - loggedIn = false;\r\n * - suppressBlurring = false;\r\n * - useLocalTime = false;\r\n */\r\n\r\n render() {\r\n return html`\r\n <div id=\"list-line\" class=\"${this.classSize}\">\r\n <image-block\r\n .model=${this.model}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .isCompactTile=${true}\r\n .isListTile=${true}\r\n .viewSize=${this.classSize}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n >\r\n </image-block>\r\n <a href=${this.href} id=\"title\"\r\n >${DOMPurify.sanitize(this.model?.title ?? '')}</a\r\n >\r\n <div id=\"creator\">\r\n ${this.model?.mediatype === 'account'\r\n ? this.displayValueProvider.accountLabel\r\n : this.creator}\r\n </div>\r\n <div id=\"date\">\r\n ${this.getFormattedDate(this.date, this.dateFormatSize)}\r\n </div>\r\n <div id=\"icon\">\r\n <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>\r\n </div>\r\n <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\r\n </div>\r\n `;\r\n }\r\n\r\n private get href(): string | typeof nothing {\r\n if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n return nothing;\r\n\r\n // Use the server-specified href if available.\r\n // Otherwise, construct a details page URL from the item identifier.\r\n if (this.model.href) {\r\n return `${this.baseNavigationUrl}${this.model.href}`;\r\n }\r\n\r\n return this.displayValueProvider.itemPageUrl(\r\n this.model.identifier,\r\n this.model.mediatype === 'collection',\r\n );\r\n }\r\n\r\n private get creator(): string | typeof nothing {\r\n return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\r\n }\r\n\r\n /*\r\n * TODO: fix field names to match model in src/collection-browser.ts\r\n * private get dateSortSelector()\r\n * @see src/models.ts\r\n */\r\n private get date(): Date | undefined {\r\n // Note on 'publicdate' vs. 'date':\r\n // The search engine metadata uses 'publicdate' as the key for the date the item\r\n // was created on archive.org, which in the UI is referred to as \"Date Archived\".\r\n // In contrast, the search engine metadata uses 'date' to refer to the actual\r\n // publication date of the underlying media (\"Date Published\" in the UI).\r\n // Refer to the full metadata schema for more info.\r\n switch (this.effectiveSort?.field) {\r\n case 'publicdate':\r\n return this.model?.dateArchived;\r\n case 'reviewdate':\r\n return this.model?.dateReviewed;\r\n case 'addeddate':\r\n return this.model?.dateAdded;\r\n default:\r\n return this.model?.datePublished;\r\n }\r\n }\r\n\r\n private get views(): number | undefined {\r\n return this.effectiveSort?.field === 'week'\r\n ? this.model?.weeklyViewCount // weekly views\r\n : this.model?.viewCount; // all-time views\r\n }\r\n\r\n /**\r\n * Returns the active sort param if one is set, or the default sort param otherwise.\r\n */\r\n private get effectiveSort(): SortParam | null {\r\n return this.sortParam ?? this.defaultSortParam;\r\n }\r\n\r\n private get classSize(): string {\r\n if (\r\n this.mobileBreakpoint &&\r\n this.currentWidth &&\r\n this.currentWidth < this.mobileBreakpoint\r\n ) {\r\n return 'mobile';\r\n }\r\n return 'desktop';\r\n }\r\n\r\n private get dateFormatSize(): DateFormat {\r\n // If we're showing a date published of Jan 1 at midnight, only show the year.\r\n // This is because items with only a year for their publication date are normalized to\r\n // Jan 1 at midnight timestamps in the search engine documents.\r\n if (\r\n (!this.isSortedByDate || this.effectiveSort?.field === 'date') && // Any sort except dates that aren't published date\r\n isFirstMillisecondOfUTCYear(this.model?.datePublished)\r\n ) {\r\n return 'year-only';\r\n }\r\n return this.formatSize;\r\n }\r\n\r\n private get formatSize(): NumberFormat {\r\n if (\r\n this.mobileBreakpoint &&\r\n this.currentWidth &&\r\n this.currentWidth < this.mobileBreakpoint\r\n ) {\r\n return 'short';\r\n }\r\n return 'long';\r\n }\r\n\r\n private get isSortedByDate(): boolean {\r\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n this.effectiveSort?.field as string,\r\n );\r\n }\r\n\r\n static get styles() {\r\n return css`\r\n html {\r\n font-size: unset;\r\n }\r\n\r\n div {\r\n font-size: 14px;\r\n }\r\n\r\n #list-line {\r\n display: grid;\r\n column-gap: 10px;\r\n border-top: 1px solid #ddd;\r\n align-items: center;\r\n line-height: 20px;\r\n padding-top: 5px;\r\n margin-bottom: -5px;\r\n }\r\n\r\n #list-line.mobile {\r\n grid-template-columns: 36px 3fr 2fr 68px 35px;\r\n }\r\n\r\n #list-line.desktop {\r\n grid-template-columns: 51px 3fr 2fr 95px 30px 115px;\r\n }\r\n\r\n #list-line:hover #title {\r\n text-decoration: underline;\r\n }\r\n\r\n #title {\r\n text-decoration: none;\r\n }\r\n\r\n #title:link {\r\n color: var(--ia-theme-link-color, #4b64ff);\r\n }\r\n\r\n #title,\r\n #creator {\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n #icon {\r\n margin-left: 2px;\r\n }\r\n\r\n #views {\r\n text-align: right;\r\n padding-right: 8px;\r\n }\r\n\r\n .mobile #views {\r\n display: none;\r\n }\r\n\r\n .mobile tile-mediatype-icon {\r\n --iconHeight: 14px;\r\n --iconWidth: 14px;\r\n }\r\n\r\n .desktop #icon {\r\n --iconHeight: 20px;\r\n --iconWidth: 20px;\r\n }\r\n\r\n item-image {\r\n --imgHeight: 100%;\r\n --imgWidth: 100%;\r\n }\r\n `;\r\n }\r\n}\r\n"]}
|