@internetarchive/collection-browser 1.5.0 → 1.5.2-alpha.0
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/collection-browser.d.ts +2 -1
- package/dist/src/collection-browser.js +7 -1
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/styles/item-image-styles.js +13 -13
- package/dist/src/styles/item-image-styles.js.map +1 -1
- package/dist/src/tiles/base-tile-component.d.ts +18 -0
- package/dist/src/tiles/base-tile-component.js +60 -0
- package/dist/src/tiles/base-tile-component.js.map +1 -0
- package/dist/src/tiles/grid/account-tile.d.ts +3 -5
- package/dist/src/tiles/grid/account-tile.js +19 -11
- package/dist/src/tiles/grid/account-tile.js.map +1 -1
- package/dist/src/tiles/grid/collection-tile.d.ts +3 -5
- package/dist/src/tiles/grid/collection-tile.js +18 -9
- package/dist/src/tiles/grid/collection-tile.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.d.ts +4 -9
- package/dist/src/tiles/grid/item-tile.js +24 -22
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact-header.d.ts +2 -8
- package/dist/src/tiles/list/tile-list-compact-header.js +23 -26
- package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact.d.ts +4 -13
- package/dist/src/tiles/list/tile-list-compact.js +34 -48
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.d.ts +3 -13
- package/dist/src/tiles/list/tile-list.js +36 -60
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.d.ts +4 -13
- package/dist/src/tiles/tile-dispatcher.js +28 -38
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/src/tiles/tile-display-value-provider.d.ts +43 -0
- package/dist/src/tiles/tile-display-value-provider.js +81 -0
- package/dist/src/tiles/tile-display-value-provider.js.map +1 -0
- package/dist/test/collection-browser.test.js +1 -1
- package/dist/test/collection-browser.test.js.map +1 -1
- package/dist/test/tiles/grid/item-tile.test.js +13 -0
- package/dist/test/tiles/grid/item-tile.test.js.map +1 -1
- package/dist/test/tiles/list/tile-list-compact.test.js +14 -0
- package/dist/test/tiles/list/tile-list-compact.test.js.map +1 -1
- package/dist/test/tiles/list/tile-list.test.js +4 -2
- package/dist/test/tiles/list/tile-list.test.js.map +1 -1
- package/dist/test/tiles/tile-display-value-provider.test.d.ts +1 -0
- package/dist/test/tiles/tile-display-value-provider.test.js +142 -0
- package/dist/test/tiles/tile-display-value-provider.test.js.map +1 -0
- package/package.json +3 -3
- package/src/collection-browser.ts +7 -1
- package/src/styles/item-image-styles.ts +13 -13
- package/src/tiles/base-tile-component.ts +48 -0
- package/src/tiles/grid/account-tile.ts +19 -8
- package/src/tiles/grid/collection-tile.ts +18 -14
- package/src/tiles/grid/item-tile.ts +25 -24
- package/src/tiles/list/tile-list-compact-header.ts +23 -18
- package/src/tiles/list/tile-list-compact.ts +34 -29
- package/src/tiles/list/tile-list.ts +47 -61
- package/src/tiles/tile-dispatcher.ts +34 -27
- package/src/tiles/tile-display-value-provider.ts +106 -0
- package/test/collection-browser.test.ts +1 -1
- package/test/tiles/grid/item-tile.test.ts +15 -0
- package/test/tiles/list/tile-list-compact.test.ts +16 -0
- package/test/tiles/list/tile-list.test.ts +4 -2
- package/test/tiles/tile-display-value-provider.test.ts +172 -0
- package/dist/src/tiles/list/account-label.d.ts +0 -1
- package/dist/src/tiles/list/account-label.js +0 -7
- package/dist/src/tiles/list/account-label.js.map +0 -1
- package/dist/src/tiles/list/date-label.d.ts +0 -1
- package/dist/src/tiles/list/date-label.js +0 -13
- package/dist/src/tiles/list/date-label.js.map +0 -1
- package/src/tiles/list/account-label.ts +0 -6
- package/src/tiles/list/date-label.ts +0 -12
|
@@ -63,15 +63,6 @@ export const waveformGradientStyles = css `
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.waveform-grad0 {
|
|
66
|
-
background: linear-gradient(
|
|
67
|
-
hsl(340, 80%, 55%),
|
|
68
|
-
hsl(0, 80%, 33%) 35%,
|
|
69
|
-
hsl(0, 80%, 22%) 70%,
|
|
70
|
-
hsl(0, 0%, 0%)
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.waveform-grad1 {
|
|
75
66
|
background: linear-gradient(
|
|
76
67
|
hsl(300, 80%, 55%),
|
|
77
68
|
hsl(330, 80%, 33%) 35%,
|
|
@@ -80,7 +71,7 @@ export const waveformGradientStyles = css `
|
|
|
80
71
|
);
|
|
81
72
|
}
|
|
82
73
|
|
|
83
|
-
.waveform-
|
|
74
|
+
.waveform-grad1 {
|
|
84
75
|
background: linear-gradient(
|
|
85
76
|
hsl(200, 80%, 55%),
|
|
86
77
|
hsl(230, 80%, 33%) 35%,
|
|
@@ -89,7 +80,7 @@ export const waveformGradientStyles = css `
|
|
|
89
80
|
);
|
|
90
81
|
}
|
|
91
82
|
|
|
92
|
-
.waveform-
|
|
83
|
+
.waveform-grad2 {
|
|
93
84
|
background: linear-gradient(
|
|
94
85
|
hsl(160, 80%, 55%),
|
|
95
86
|
hsl(190, 80%, 33%) 35%,
|
|
@@ -98,7 +89,7 @@ export const waveformGradientStyles = css `
|
|
|
98
89
|
);
|
|
99
90
|
}
|
|
100
91
|
|
|
101
|
-
.waveform-
|
|
92
|
+
.waveform-grad3 {
|
|
102
93
|
background: linear-gradient(
|
|
103
94
|
hsl(250, 80%, 55%),
|
|
104
95
|
hsl(280, 80%, 33%) 35%,
|
|
@@ -107,7 +98,7 @@ export const waveformGradientStyles = css `
|
|
|
107
98
|
);
|
|
108
99
|
}
|
|
109
100
|
|
|
110
|
-
.waveform-
|
|
101
|
+
.waveform-grad4 {
|
|
111
102
|
background: linear-gradient(
|
|
112
103
|
hsl(280, 80%, 55%),
|
|
113
104
|
hsl(310, 80%, 33%) 35%,
|
|
@@ -115,5 +106,14 @@ export const waveformGradientStyles = css `
|
|
|
115
106
|
hsl(0, 0%, 0%)
|
|
116
107
|
);
|
|
117
108
|
}
|
|
109
|
+
|
|
110
|
+
.waveform-grad5 {
|
|
111
|
+
background: linear-gradient(
|
|
112
|
+
hsl(340, 80%, 55%),
|
|
113
|
+
hsl(0, 80%, 33%) 35%,
|
|
114
|
+
hsl(0, 80%, 22%) 70%,
|
|
115
|
+
hsl(0, 0%, 0%)
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
118
|
`;
|
|
119
119
|
//# sourceMappingURL=item-image-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-image-styles.js","sourceRoot":"","sources":["../../../src/styles/item-image-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n .drop-shadow {\n overflow: hidden;\n height: 100%;\n }\n\n .list-box {\n overflow: hidden;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n }\n\n .list-box img {\n border-radius: 0;\n }\n\n .contain {\n object-fit: contain;\n object-position: center;\n height: 100%;\n width: 100%;\n }\n\n .cover {\n object-fit: cover;\n }\n\n .blur {\n filter: blur(15px);\n box-shadow: 1px 1px 2px 0;\n }\n\n .account-image {\n object-fit: cover;\n background-position: 50% 50%;\n border-radius: 50%;\n width: 160px;\n height: 160px;\n }\n\n :not(.list-box) > .collection-image {\n object-fit: cover;\n border-radius: 8px;\n width: 100%;\n height: 160px;\n }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n .waveform {\n mix-blend-mode: screen;\n position: relative;\n height: 62.5%;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .waveform-grad0 {\n background: linear-gradient(\n hsl(
|
|
1
|
+
{"version":3,"file":"item-image-styles.js","sourceRoot":"","sources":["../../../src/styles/item-image-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DxC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base item-image styles\n */\nexport const baseItemImageStyles = css`\n .drop-shadow {\n overflow: hidden;\n height: 100%;\n }\n\n .list-box {\n overflow: hidden;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n }\n\n .list-box img {\n border-radius: 0;\n }\n\n .contain {\n object-fit: contain;\n object-position: center;\n height: 100%;\n width: 100%;\n }\n\n .cover {\n object-fit: cover;\n }\n\n .blur {\n filter: blur(15px);\n box-shadow: 1px 1px 2px 0;\n }\n\n .account-image {\n object-fit: cover;\n background-position: 50% 50%;\n border-radius: 50%;\n width: 160px;\n height: 160px;\n }\n\n :not(.list-box) > .collection-image {\n object-fit: cover;\n border-radius: 8px;\n width: 100%;\n height: 160px;\n }\n`;\n\n/**\n * Waveform styles\n */\nexport const waveformGradientStyles = css`\n .waveform {\n mix-blend-mode: screen;\n position: relative;\n height: 62.5%;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .waveform-grad0 {\n background: linear-gradient(\n hsl(300, 80%, 55%),\n hsl(330, 80%, 33%) 35%,\n hsl(330, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .waveform-grad1 {\n background: linear-gradient(\n hsl(200, 80%, 55%),\n hsl(230, 80%, 33%) 35%,\n hsl(230, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .waveform-grad2 {\n background: linear-gradient(\n hsl(160, 80%, 55%),\n hsl(190, 80%, 33%) 35%,\n hsl(190, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .waveform-grad3 {\n background: linear-gradient(\n hsl(250, 80%, 55%),\n hsl(280, 80%, 33%) 35%,\n hsl(280, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .waveform-grad4 {\n background: linear-gradient(\n hsl(280, 80%, 55%),\n hsl(310, 80%, 33%) 35%,\n hsl(310, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .waveform-grad5 {\n background: linear-gradient(\n hsl(340, 80%, 55%),\n hsl(0, 80%, 33%) 35%,\n hsl(0, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n`;\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import type { SortParam } from '@internetarchive/search-service';
|
|
3
|
+
import { TileDisplayValueProvider } from './tile-display-value-provider';
|
|
4
|
+
import type { TileModel } from '../models';
|
|
5
|
+
export declare abstract class BaseTileComponent extends LitElement {
|
|
6
|
+
model?: TileModel;
|
|
7
|
+
currentWidth?: number;
|
|
8
|
+
currentHeight?: number;
|
|
9
|
+
baseNavigationUrl?: string;
|
|
10
|
+
baseImageUrl?: string;
|
|
11
|
+
collectionPagePath?: string;
|
|
12
|
+
sortParam: SortParam | null;
|
|
13
|
+
creatorFilter?: string;
|
|
14
|
+
mobileBreakpoint?: number;
|
|
15
|
+
loggedIn: boolean;
|
|
16
|
+
protected displayValueProvider: TileDisplayValueProvider;
|
|
17
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
18
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { TileDisplayValueProvider } from './tile-display-value-provider';
|
|
5
|
+
export class BaseTileComponent extends LitElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.sortParam = null;
|
|
9
|
+
this.loggedIn = false;
|
|
10
|
+
this.displayValueProvider = new TileDisplayValueProvider();
|
|
11
|
+
}
|
|
12
|
+
willUpdate(changed) {
|
|
13
|
+
var _a;
|
|
14
|
+
// Ensure the TileDisplayValueProvider stays up-to-date as properties change
|
|
15
|
+
if (changed.has('model') ||
|
|
16
|
+
changed.has('baseNavigationUrl') ||
|
|
17
|
+
changed.has('collectionPagePath') ||
|
|
18
|
+
changed.has('sortParam') ||
|
|
19
|
+
changed.has('creatorFilter')) {
|
|
20
|
+
this.displayValueProvider = new TileDisplayValueProvider({
|
|
21
|
+
model: this.model,
|
|
22
|
+
baseNavigationUrl: this.baseNavigationUrl,
|
|
23
|
+
collectionPagePath: this.collectionPagePath,
|
|
24
|
+
sortParam: (_a = this.sortParam) !== null && _a !== void 0 ? _a : undefined,
|
|
25
|
+
creatorFilter: this.creatorFilter,
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
__decorate([
|
|
31
|
+
property({ type: Object })
|
|
32
|
+
], BaseTileComponent.prototype, "model", void 0);
|
|
33
|
+
__decorate([
|
|
34
|
+
property({ type: Number })
|
|
35
|
+
], BaseTileComponent.prototype, "currentWidth", void 0);
|
|
36
|
+
__decorate([
|
|
37
|
+
property({ type: Number })
|
|
38
|
+
], BaseTileComponent.prototype, "currentHeight", void 0);
|
|
39
|
+
__decorate([
|
|
40
|
+
property({ type: String })
|
|
41
|
+
], BaseTileComponent.prototype, "baseNavigationUrl", void 0);
|
|
42
|
+
__decorate([
|
|
43
|
+
property({ type: String })
|
|
44
|
+
], BaseTileComponent.prototype, "baseImageUrl", void 0);
|
|
45
|
+
__decorate([
|
|
46
|
+
property({ type: String })
|
|
47
|
+
], BaseTileComponent.prototype, "collectionPagePath", void 0);
|
|
48
|
+
__decorate([
|
|
49
|
+
property({ type: Object })
|
|
50
|
+
], BaseTileComponent.prototype, "sortParam", void 0);
|
|
51
|
+
__decorate([
|
|
52
|
+
property({ type: String })
|
|
53
|
+
], BaseTileComponent.prototype, "creatorFilter", void 0);
|
|
54
|
+
__decorate([
|
|
55
|
+
property({ type: Number })
|
|
56
|
+
], BaseTileComponent.prototype, "mobileBreakpoint", void 0);
|
|
57
|
+
__decorate([
|
|
58
|
+
property({ type: Boolean })
|
|
59
|
+
], BaseTileComponent.prototype, "loggedIn", void 0);
|
|
60
|
+
//# sourceMappingURL=base-tile-component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-tile-component.js","sourceRoot":"","sources":["../../../src/tiles/base-tile-component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,MAAM,OAAgB,iBAAkB,SAAQ,UAAU;IAA1D;;QAa8B,cAAS,GAAqB,IAAI,CAAC;QAMlC,aAAQ,GAAG,KAAK,CAAC;QAEpC,yBAAoB,GAAG,IAAI,wBAAwB,EAAE,CAAC;IAoBlE,CAAC;IAlBW,UAAU,CAAC,OAA6B;;QAChD,4EAA4E;QAC5E,IACE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YACpB,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC;YAChC,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;YACjC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAC5B;YACA,IAAI,CAAC,oBAAoB,GAAG,IAAI,wBAAwB,CAAC;gBACvD,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;gBACzC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;gBAC3C,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,SAAS;gBACtC,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,CAAC,CAAC;SACJ;IACH,CAAC;CACF;AAxC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAA6B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAA2B;AAEzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAkB","sourcesContent":["import { LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { TileDisplayValueProvider } from './tile-display-value-provider';\nimport type { TileModel } from '../models';\n\nexport abstract class BaseTileComponent extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: String }) collectionPagePath?: string;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: String }) creatorFilter?: string;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: Boolean }) loggedIn = false;\n\n protected displayValueProvider = new TileDisplayValueProvider();\n\n protected willUpdate(changed: PropertyValues<this>) {\n // Ensure the TileDisplayValueProvider stays up-to-date as properties change\n if (\n changed.has('model') ||\n changed.has('baseNavigationUrl') ||\n changed.has('collectionPagePath') ||\n changed.has('sortParam') ||\n changed.has('creatorFilter')\n ) {\n this.displayValueProvider = new TileDisplayValueProvider({\n model: this.model,\n baseNavigationUrl: this.baseNavigationUrl,\n collectionPagePath: this.collectionPagePath,\n sortParam: this.sortParam ?? undefined,\n creatorFilter: this.creatorFilter,\n });\n }\n }\n}\n"]}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
3
3
|
import '../image-block';
|
|
4
4
|
import './tile-stats';
|
|
5
|
-
export declare class AccountTile extends
|
|
6
|
-
model?: TileModel;
|
|
7
|
-
baseImageUrl?: string;
|
|
5
|
+
export declare class AccountTile extends BaseTileComponent {
|
|
8
6
|
showInfoButton: boolean;
|
|
9
7
|
render(): TemplateResult<1>;
|
|
10
8
|
private get getAvatarTemplate();
|
|
@@ -1,11 +1,26 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html,
|
|
2
|
+
import { css, html, nothing } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { msg } from '@lit/localize';
|
|
5
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
4
6
|
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
5
7
|
import '../image-block';
|
|
6
8
|
import './tile-stats';
|
|
7
|
-
let AccountTile = class AccountTile extends
|
|
9
|
+
let AccountTile = class AccountTile extends BaseTileComponent {
|
|
8
10
|
constructor() {
|
|
11
|
+
/*
|
|
12
|
+
* Reactive properties inherited from BaseTileComponent:
|
|
13
|
+
* - model?: TileModel;
|
|
14
|
+
* - currentWidth?: number;
|
|
15
|
+
* - currentHeight?: number;
|
|
16
|
+
* - baseNavigationUrl?: string;
|
|
17
|
+
* - baseImageUrl?: string;
|
|
18
|
+
* - collectionPagePath?: string;
|
|
19
|
+
* - sortParam: SortParam | null = null;
|
|
20
|
+
* - creatorFilter?: string;
|
|
21
|
+
* - mobileBreakpoint?: number;
|
|
22
|
+
* - loggedIn = false;
|
|
23
|
+
*/
|
|
9
24
|
super(...arguments);
|
|
10
25
|
this.showInfoButton = false;
|
|
11
26
|
}
|
|
@@ -40,9 +55,8 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
40
55
|
</div>`;
|
|
41
56
|
}
|
|
42
57
|
get getArchivistTemplate() {
|
|
43
|
-
var _a, _b;
|
|
44
58
|
return html `<div class="archivist-since">
|
|
45
|
-
<span
|
|
59
|
+
<span>${this.displayValueProvider.accountLabel}</span>
|
|
46
60
|
</div>`;
|
|
47
61
|
}
|
|
48
62
|
get getTileStatsTemplate() {
|
|
@@ -60,7 +74,7 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
60
74
|
return this.showInfoButton
|
|
61
75
|
? html `<button class="info-button" @click=${this.infoButtonPressed}>
|
|
62
76
|
ⓘ
|
|
63
|
-
<span class="sr-only"
|
|
77
|
+
<span class="sr-only">${msg('More info')}</span>
|
|
64
78
|
</button>`
|
|
65
79
|
: nothing;
|
|
66
80
|
}
|
|
@@ -84,12 +98,6 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
84
98
|
];
|
|
85
99
|
}
|
|
86
100
|
};
|
|
87
|
-
__decorate([
|
|
88
|
-
property({ type: Object })
|
|
89
|
-
], AccountTile.prototype, "model", void 0);
|
|
90
|
-
__decorate([
|
|
91
|
-
property({ type: String })
|
|
92
|
-
], AccountTile.prototype, "baseImageUrl", void 0);
|
|
93
101
|
__decorate([
|
|
94
102
|
property({ type: Boolean })
|
|
95
103
|
], AccountTile.prototype, "showInfoButton", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,iBAAiB;IAAlD;QACE;;;;;;;;;;;;WAYG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;IAoFtD,CAAC;IAlFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,oBAAoB,CAAC,YAAY;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;mBACI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;mBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;kBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;sBAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApF8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AAfzC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmGvB;SAnGY,WAAW","sourcesContent":["import { css, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile 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: Boolean }) showInfoButton = false;\n\n render() {\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.getAvatarTemplate} ${this.getTitleTemplate}\n ${this.getArchivistTemplate}\n </div>\n ${this.getTileStatsTemplate}\n </div>\n </div>\n `;\n }\n\n private get getAvatarTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get getTitleTemplate() {\n return html`<div id=\"title\">\n <h4 class=\"truncated\">${this.model?.identifier}</h4>\n </div>`;\n }\n\n private get getArchivistTemplate() {\n return html`<div class=\"archivist-since\">\n <span>${this.displayValueProvider.accountLabel}</span>\n </div>`;\n }\n\n private get getTileStatsTemplate() {\n return html`<tile-stats\n .mediatype=${this.model?.mediatype}\n .itemCount=${this.model?.itemCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>`;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private infoButtonPressed(e: PointerEvent) {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } }\n );\n this.dispatchEvent(event);\n }\n\n /**\n * CSS\n */\n static get styles() {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n .container {\n border: 1px solid ${tileBorderColor};\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { CSSResultGroup,
|
|
2
|
-
import
|
|
1
|
+
import { CSSResultGroup, TemplateResult } from 'lit';
|
|
2
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
3
3
|
import '../image-block';
|
|
4
|
-
export declare class CollectionTile extends
|
|
5
|
-
model?: TileModel;
|
|
6
|
-
baseImageUrl?: string;
|
|
4
|
+
export declare class CollectionTile extends BaseTileComponent {
|
|
7
5
|
showInfoButton: boolean;
|
|
8
6
|
render(): TemplateResult<1>;
|
|
9
7
|
private get getImageBlockTemplate();
|
|
@@ -1,12 +1,27 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html,
|
|
2
|
+
import { css, html, nothing } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { msg } from '@lit/localize';
|
|
4
5
|
import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
|
|
5
6
|
import { formatUnitSize } from '../../utils/format-unit-size';
|
|
6
7
|
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
8
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
7
9
|
import '../image-block';
|
|
8
|
-
let CollectionTile = class CollectionTile extends
|
|
10
|
+
let CollectionTile = class CollectionTile extends BaseTileComponent {
|
|
9
11
|
constructor() {
|
|
12
|
+
/*
|
|
13
|
+
* Reactive properties inherited from BaseTileComponent:
|
|
14
|
+
* - model?: TileModel;
|
|
15
|
+
* - currentWidth?: number;
|
|
16
|
+
* - currentHeight?: number;
|
|
17
|
+
* - baseNavigationUrl?: string;
|
|
18
|
+
* - baseImageUrl?: string;
|
|
19
|
+
* - collectionPagePath?: string;
|
|
20
|
+
* - sortParam: SortParam | null = null;
|
|
21
|
+
* - creatorFilter?: string;
|
|
22
|
+
* - mobileBreakpoint?: number;
|
|
23
|
+
* - loggedIn = false;
|
|
24
|
+
*/
|
|
10
25
|
super(...arguments);
|
|
11
26
|
this.showInfoButton = false;
|
|
12
27
|
}
|
|
@@ -70,7 +85,7 @@ let CollectionTile = class CollectionTile extends LitElement {
|
|
|
70
85
|
return this.showInfoButton
|
|
71
86
|
? html `<button class="info-button" @click=${this.infoButtonPressed}>
|
|
72
87
|
ⓘ
|
|
73
|
-
<span class="sr-only"
|
|
88
|
+
<span class="sr-only">${msg('More info')}</span>
|
|
74
89
|
</button>`
|
|
75
90
|
: nothing;
|
|
76
91
|
}
|
|
@@ -131,12 +146,6 @@ let CollectionTile = class CollectionTile extends LitElement {
|
|
|
131
146
|
];
|
|
132
147
|
}
|
|
133
148
|
};
|
|
134
|
-
__decorate([
|
|
135
|
-
property({ type: Object })
|
|
136
|
-
], CollectionTile.prototype, "model", void 0);
|
|
137
|
-
__decorate([
|
|
138
|
-
property({ type: String })
|
|
139
|
-
], CollectionTile.prototype, "baseImageUrl", void 0);
|
|
140
149
|
__decorate([
|
|
141
150
|
property({ type: Boolean })
|
|
142
151
|
], CollectionTile.prototype, "showInfoButton", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('collection-tile')\nexport class CollectionTile 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: Boolean }) showInfoButton = false;\n\n render() {\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n </div>\n </div>\n\n ${this.getTileStatsTemplate}\n </div>\n `;\n }\n\n private get getImageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get getTitleTemplate() {\n return html`<div id=\"title\">\n <h4 class=\"truncated\">${this.model?.title}</h4>\n </div>`;\n }\n\n private get getTileStatsTemplate() {\n return html`\n <div id=\"item-stats\">\n <div id=\"item-mediatype\">${collectionIcon}</div>\n\n <div id=\"stats-row\">\n ${this.getItemsTemplate} ${this.getSizeTemplate}\n </div>\n </div>\n `;\n }\n\n private get getItemsTemplate() {\n const collectionItems = this.model?.itemCount?.toLocaleString();\n\n return html`<span id=\"item-count\"\n >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span\n >`;\n }\n\n private get getSizeTemplate() {\n const collectionSize = this.model?.collectionSize ?? 0;\n\n return collectionSize\n ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\n : ``;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private infoButtonPressed(e: PointerEvent) {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } }\n );\n this.dispatchEvent(event);\n }\n\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n const whiteColor = css`#fff`;\n\n return [\n baseTileStyles,\n css`\n .container {\n background-color: ${tileBackgroundColor};\n border: 1px solid ${tileBorderColor};\n }\n\n .item-info {\n flex-grow: initial;\n }\n\n h4.truncated {\n color: ${whiteColor};\n }\n\n #item-mediatype svg {\n filter: invert(100%);\n height: 2.5rem;\n align-items: baseline;\n }\n\n .container:hover > #title {\n text-decoration: underline;\n }\n\n /* this is a workaround for Safari 15 where the hover effects are not working */\n image-block:hover > #title {\n text-decoration: underline;\n }\n\n #item-stats {\n display: flex;\n padding: 0 5px 5px;\n align-items: center;\n }\n\n #stats-row {\n display: flex;\n align-items: baseline;\n color: ${whiteColor};\n flex-direction: column;\n margin-left: 10px;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
import { CSSResultGroup,
|
|
2
|
-
import
|
|
3
|
-
import type { TileModel } from '../../models';
|
|
1
|
+
import { CSSResultGroup, TemplateResult } from 'lit';
|
|
2
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
4
3
|
import '../image-block';
|
|
5
4
|
import '../text-snippet-block';
|
|
6
5
|
import '../item-image';
|
|
7
6
|
import '../mediatype-icon';
|
|
8
7
|
import './tile-stats';
|
|
9
|
-
export declare class ItemTile extends
|
|
10
|
-
baseImageUrl?: string;
|
|
11
|
-
loggedIn: boolean;
|
|
12
|
-
model?: TileModel;
|
|
13
|
-
sortParam?: SortParam;
|
|
8
|
+
export declare class ItemTile extends BaseTileComponent {
|
|
14
9
|
showInfoButton: boolean;
|
|
15
10
|
render(): TemplateResult<1>;
|
|
16
11
|
/**
|
|
@@ -22,7 +17,7 @@ export declare class ItemTile extends LitElement {
|
|
|
22
17
|
private get infoButtonTemplate();
|
|
23
18
|
private get textSnippetsTemplate();
|
|
24
19
|
private get volumeIssueTemplate();
|
|
25
|
-
private get
|
|
20
|
+
private get isSortedByDate();
|
|
26
21
|
private get hasSnippets();
|
|
27
22
|
private infoButtonPressed;
|
|
28
23
|
/**
|
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
/* eslint-disable import/no-duplicates */
|
|
3
|
-
import { css, html,
|
|
3
|
+
import { css, html, nothing } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
|
+
import { msg } from '@lit/localize';
|
|
6
7
|
import { formatDate } from '../../utils/format-date';
|
|
7
8
|
import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
|
|
9
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
8
10
|
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
9
11
|
import '../image-block';
|
|
10
12
|
import '../text-snippet-block';
|
|
11
13
|
import '../item-image';
|
|
12
14
|
import '../mediatype-icon';
|
|
13
15
|
import './tile-stats';
|
|
14
|
-
let ItemTile = class ItemTile extends
|
|
16
|
+
let ItemTile = class ItemTile extends BaseTileComponent {
|
|
15
17
|
constructor() {
|
|
18
|
+
/*
|
|
19
|
+
* Reactive properties inherited from BaseTileComponent:
|
|
20
|
+
* - model?: TileModel;
|
|
21
|
+
* - currentWidth?: number;
|
|
22
|
+
* - currentHeight?: number;
|
|
23
|
+
* - baseNavigationUrl?: string;
|
|
24
|
+
* - baseImageUrl?: string;
|
|
25
|
+
* - collectionPagePath?: string;
|
|
26
|
+
* - sortParam: SortParam | null = null;
|
|
27
|
+
* - creatorFilter?: string;
|
|
28
|
+
* - mobileBreakpoint?: number;
|
|
29
|
+
* - loggedIn = false;
|
|
30
|
+
*/
|
|
16
31
|
super(...arguments);
|
|
17
|
-
this.loggedIn = false;
|
|
18
32
|
this.showInfoButton = false;
|
|
19
33
|
}
|
|
20
34
|
render() {
|
|
@@ -37,7 +51,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
37
51
|
</div>
|
|
38
52
|
|
|
39
53
|
${this.volumeIssueTemplate}
|
|
40
|
-
${this.
|
|
54
|
+
${this.isSortedByDate
|
|
41
55
|
? this.sortedDateInfoTemplate
|
|
42
56
|
: this.creatorTemplate}
|
|
43
57
|
${this.textSnippetsTemplate}
|
|
@@ -59,13 +73,13 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
59
73
|
* Templates
|
|
60
74
|
*/
|
|
61
75
|
get creatorTemplate() {
|
|
62
|
-
|
|
63
|
-
if (!
|
|
76
|
+
const displayedCreator = this.displayValueProvider.firstCreatorMatchingFilter;
|
|
77
|
+
if (!displayedCreator)
|
|
64
78
|
return nothing;
|
|
65
79
|
return html `
|
|
66
80
|
<div class="created-by">
|
|
67
|
-
<span class="truncated" title=${
|
|
68
|
-
by ${
|
|
81
|
+
<span class="truncated" title=${displayedCreator}>
|
|
82
|
+
by ${displayedCreator}
|
|
69
83
|
</span>
|
|
70
84
|
</div>
|
|
71
85
|
`;
|
|
@@ -124,7 +138,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
124
138
|
return this.showInfoButton
|
|
125
139
|
? html `<button class="info-button" @click=${this.infoButtonPressed}>
|
|
126
140
|
ⓘ
|
|
127
|
-
<span class="sr-only"
|
|
141
|
+
<span class="sr-only">${msg('More info')}</span>
|
|
128
142
|
</button>`
|
|
129
143
|
: nothing;
|
|
130
144
|
}
|
|
@@ -149,7 +163,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
149
163
|
</div>
|
|
150
164
|
`;
|
|
151
165
|
}
|
|
152
|
-
get
|
|
166
|
+
get isSortedByDate() {
|
|
153
167
|
var _a;
|
|
154
168
|
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
|
|
155
169
|
}
|
|
@@ -196,18 +210,6 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
196
210
|
];
|
|
197
211
|
}
|
|
198
212
|
};
|
|
199
|
-
__decorate([
|
|
200
|
-
property({ type: String })
|
|
201
|
-
], ItemTile.prototype, "baseImageUrl", void 0);
|
|
202
|
-
__decorate([
|
|
203
|
-
property({ type: Boolean })
|
|
204
|
-
], ItemTile.prototype, "loggedIn", void 0);
|
|
205
|
-
__decorate([
|
|
206
|
-
property({ type: Object })
|
|
207
|
-
], ItemTile.prototype, "model", void 0);
|
|
208
|
-
__decorate([
|
|
209
|
-
property({ type: Object })
|
|
210
|
-
], ItemTile.prototype, "sortParam", void 0);
|
|
211
213
|
__decorate([
|
|
212
214
|
property({ type: Boolean })
|
|
213
215
|
], ItemTile.prototype, "showInfoButton", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n css,\n CSSResultGroup,\n html,\n LitElement,\n nothing,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) loggedIn = false;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: Object }) sortParam?: SortParam;\n\n @property({ type: Boolean }) showInfoButton = false;\n\n render() {\n const itemTitle = this.model?.title;\n const [viewCount, viewLabel] =\n this.sortParam?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h4 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h4>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.doesSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.textSnippetsTemplate}\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.creator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n by ${this.model?.creator}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.sortParam?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n </span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">More info</span>\n </button>`\n : nothing;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.volume || !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=\"volume|issue\">\n Volume ${this.model?.volume}, Issue ${this.model?.issue}\n </span>\n </div>\n `;\n }\n\n private get doesSortedByDate() {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } }\n );\n this.dispatchEvent(event);\n }\n\n /**\n * CSS\n */\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /**\n * iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\n\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile 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: Boolean }) showInfoButton = false;\n\n render() {\n const itemTitle = this.model?.title;\n const [viewCount, viewLabel] =\n this.sortParam?.field === 'week'\n ? [this.model?.weeklyViewCount, 'weekly views']\n : [this.model?.viewCount, 'all-time views'];\n\n return html`\n <div class=\"container\">\n ${this.infoButtonTemplate}\n <div class=\"tile-details\">\n <div class=\"item-info\">\n ${this.imageBlockTemplate}\n\n <div id=\"title\">\n <h4 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h4>\n </div>\n\n ${this.volumeIssueTemplate}\n ${this.isSortedByDate\n ? this.sortedDateInfoTemplate\n : this.creatorTemplate}\n ${this.textSnippetsTemplate}\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .viewCount=${viewCount}\n .viewLabel=${viewLabel}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n /**\n * Templates\n */\n private get creatorTemplate(): TemplateResult | typeof nothing {\n const displayedCreator =\n this.displayValueProvider.firstCreatorMatchingFilter;\n if (!displayedCreator) return nothing;\n\n return html`\n <div class=\"created-by\">\n <span class=\"truncated\" title=${displayedCreator}>\n by ${displayedCreator}\n </span>\n </div>\n `;\n }\n\n private get imageBlockTemplate(): TemplateResult {\n return html`\n <image-block\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .isCompactTile=${false}\n .isListTile=${false}\n .viewSize=${'grid'}\n >\n </image-block>\n `;\n }\n\n private get sortedDateInfoTemplate() {\n let sortedValue;\n let format: DateFormat = 'long';\n switch (this.sortParam?.field) {\n case 'date': {\n const datePublished = this.model?.datePublished;\n sortedValue = { field: 'published', value: datePublished };\n if (isFirstMillisecondOfUTCYear(datePublished)) {\n format = 'year-only';\n }\n break;\n }\n case 'reviewdate':\n sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n break;\n case 'addeddate':\n sortedValue = { field: 'added', value: this.model?.dateAdded };\n break;\n case 'publicdate':\n sortedValue = { field: 'archived', value: this.model?.dateArchived };\n break;\n default:\n break;\n }\n\n if (!sortedValue?.value) {\n return nothing;\n }\n return html`\n <div class=\"date-sorted-by truncated\">\n <span>\n ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n </span>\n </div>\n `;\n }\n\n private get infoButtonTemplate(): TemplateResult | typeof nothing {\n // ⓘ is an information icon\n return this.showInfoButton\n ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n ⓘ\n <span class=\"sr-only\">${msg('More info')}</span>\n </button>`\n : nothing;\n }\n\n private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n if (!this.hasSnippets) return nothing;\n\n return html`\n <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n </text-snippet-block>\n `;\n }\n\n private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n if (!this.model?.volume || !this.model?.issue) return nothing;\n\n return html`\n <div class=\"volume-issue\">\n <span class=\"truncated\" title=\"volume|issue\">\n Volume ${this.model?.volume}, Issue ${this.model?.issue}\n </span>\n </div>\n `;\n }\n\n private get isSortedByDate(): boolean {\n return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n this.sortParam?.field as string\n );\n }\n\n private get hasSnippets(): boolean {\n return !!this.model?.snippets?.length;\n }\n\n private infoButtonPressed(e: PointerEvent): void {\n e.preventDefault();\n const event = new CustomEvent<{ x: number; y: number }>(\n 'infoButtonPressed',\n { detail: { x: e.clientX, y: e.clientY } }\n );\n this.dispatchEvent(event);\n }\n\n /**\n * CSS\n */\n static get styles(): CSSResultGroup {\n const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n return [\n baseTileStyles,\n css`\n .container {\n border: 1px solid ${tileBorderColor};\n }\n\n text-snippet-block {\n --containerLeftMargin: 5px;\n --containerTopMargin: 5px;\n }\n\n /**\n * iOS Safari long-press on tiles (to bring up hover pane)\n * gets messy without this\n */\n @media screen and (pointer: coarse) and (hover: none) {\n .container {\n -webkit-touch-callout: none;\n }\n\n .truncated {\n -webkit-touch-callout: default;\n }\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import type { TileModel } from '../../models';
|
|
4
|
-
export declare class TileListCompactHeader extends LitElement {
|
|
5
|
-
model?: TileModel;
|
|
6
|
-
currentWidth?: number;
|
|
7
|
-
sortParam: SortParam | null;
|
|
8
|
-
mobileBreakpoint?: number;
|
|
1
|
+
import { BaseTileComponent } from '../base-tile-component';
|
|
2
|
+
export declare class TileListCompactHeader extends BaseTileComponent {
|
|
9
3
|
render(): import("lit-html").TemplateResult<1>;
|
|
10
4
|
private get classSize();
|
|
11
5
|
static get styles(): import("lit").CSSResult;
|