@internetarchive/collection-browser 0.2.5 → 0.2.6-alpha1
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/grid → assets/img}/icons/favorite-filled.d.ts +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.js +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.js.map +1 -1
- package/dist/src/{tiles/grid → assets/img}/icons/reviews.d.ts +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/reviews.js +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/reviews.js.map +1 -1
- package/dist/src/{tiles/grid → assets/img}/icons/upload.d.ts +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/upload.js +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/upload.js.map +1 -1
- package/dist/src/assets/img/icons/views.d.ts +1 -0
- package/dist/src/{tiles/grid → assets/img}/icons/views.js +1 -1
- package/dist/src/assets/img/icons/views.js.map +1 -0
- package/dist/src/tiles/grid/account-tile.d.ts +1 -0
- package/dist/src/tiles/grid/account-tile.js +45 -78
- package/dist/src/tiles/grid/account-tile.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.d.ts +6 -0
- package/dist/src/tiles/grid/item-tile.js +96 -124
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/grid/tile-stats.d.ts +10 -0
- package/dist/src/tiles/grid/tile-stats.js +134 -0
- package/dist/src/tiles/grid/tile-stats.js.map +1 -0
- package/dist/src/tiles/mediatype-icon.js +4 -0
- package/dist/src/tiles/mediatype-icon.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +1 -0
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/test/tile-stats.test.d.ts +1 -0
- package/dist/test/tile-stats.test.js +42 -0
- package/dist/test/tile-stats.test.js.map +1 -0
- package/dist/test/tiles/grid/item-tile.test.d.ts +1 -0
- package/dist/test/tiles/grid/item-tile.test.js +96 -0
- package/dist/test/tiles/grid/item-tile.test.js.map +1 -0
- package/package.json +1 -1
- package/src/{tiles/grid → assets/img}/icons/favorite-filled.ts +0 -0
- package/src/{tiles/grid → assets/img}/icons/reviews.ts +0 -0
- package/src/{tiles/grid → assets/img}/icons/upload.ts +0 -0
- package/src/{tiles/grid → assets/img}/icons/views.ts +1 -1
- package/src/tiles/grid/account-tile.ts +44 -77
- package/src/tiles/grid/item-tile.ts +103 -125
- package/src/tiles/grid/tile-stats.ts +132 -0
- package/src/tiles/mediatype-icon.ts +4 -0
- package/src/tiles/tile-dispatcher.ts +1 -0
- package/test/tile-stats.test.ts +57 -0
- package/test/tiles/grid/item-tile.test.ts +116 -0
- package/dist/src/tiles/grid/icons/account.d.ts +0 -1
- package/dist/src/tiles/grid/icons/account.js +0 -12
- package/dist/src/tiles/grid/icons/account.js.map +0 -1
- package/dist/src/tiles/grid/icons/views.d.ts +0 -2
- package/dist/src/tiles/grid/icons/views.js.map +0 -1
- package/src/tiles/grid/icons/account.ts +0 -12
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement } from 'lit';
|
|
2
|
+
export declare class TileStats extends LitElement {
|
|
3
|
+
mediatype?: string;
|
|
4
|
+
itemCount?: number;
|
|
5
|
+
viewCount?: number;
|
|
6
|
+
favCount?: number;
|
|
7
|
+
commentCount?: number;
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
static get styles(): CSSResultGroup;
|
|
10
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
|
|
5
|
+
import { reviewsIcon } from '../../assets/img/icons/reviews';
|
|
6
|
+
import { uploadIcon } from '../../assets/img/icons/upload';
|
|
7
|
+
import { viewsIcon } from '../../assets/img/icons/views';
|
|
8
|
+
import { formatCount } from '../../utils/format-count';
|
|
9
|
+
let TileStats = class TileStats extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `
|
|
12
|
+
<div class="item-stats">
|
|
13
|
+
<p class="sr-only">
|
|
14
|
+
${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}
|
|
15
|
+
</p>
|
|
16
|
+
<ul id="stats-row">
|
|
17
|
+
<li class="col">
|
|
18
|
+
<p class="sr-only">Mediatype:</p>
|
|
19
|
+
<mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
|
|
20
|
+
</li>
|
|
21
|
+
<li class="col">
|
|
22
|
+
${this.mediatype === 'account' ? uploadIcon : viewsIcon}
|
|
23
|
+
<p class="status-text">
|
|
24
|
+
<span class="sr-only">
|
|
25
|
+
${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}
|
|
26
|
+
</span>
|
|
27
|
+
${formatCount(this.mediatype === 'account' ? this.itemCount : this.viewCount, 'short', 'short')}
|
|
28
|
+
</p>
|
|
29
|
+
</li>
|
|
30
|
+
<li class="col">
|
|
31
|
+
${favoriteFilledIcon}
|
|
32
|
+
<p class="status-text">
|
|
33
|
+
<span class="sr-only">Favorites:</span>
|
|
34
|
+
${formatCount(this.favCount, 'short', 'short')}
|
|
35
|
+
</p>
|
|
36
|
+
</li>
|
|
37
|
+
<li class="col">
|
|
38
|
+
${reviewsIcon}
|
|
39
|
+
<p class="status-text">
|
|
40
|
+
<span class="sr-only">Reviews:</span>
|
|
41
|
+
${formatCount(this.commentCount, 'short', 'short')}
|
|
42
|
+
</p>
|
|
43
|
+
</li>
|
|
44
|
+
</ul>
|
|
45
|
+
</div>
|
|
46
|
+
`;
|
|
47
|
+
}
|
|
48
|
+
static get styles() {
|
|
49
|
+
return css `
|
|
50
|
+
mediatype-icon {
|
|
51
|
+
--iconHeight: 25px;
|
|
52
|
+
--iconWidth: 25px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
ul {
|
|
56
|
+
all: unset; // unset all property values
|
|
57
|
+
list-style-type: none; // remove default list-style
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
li {
|
|
61
|
+
list-style-type: none; // remove default list-style
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.item-stats {
|
|
65
|
+
height: 35px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
#stats-row {
|
|
69
|
+
border-top: 1px solid #bbb;
|
|
70
|
+
align-items: center;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex: 1;
|
|
73
|
+
justify-content: space-evenly;
|
|
74
|
+
text-align: center;
|
|
75
|
+
width: 100%;
|
|
76
|
+
padding-top: 5px;
|
|
77
|
+
padding-bottom: 5px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.sr-only {
|
|
81
|
+
position: absolute;
|
|
82
|
+
width: 1px;
|
|
83
|
+
height: 1px;
|
|
84
|
+
padding: 0;
|
|
85
|
+
margin: -1px;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
clip: rect(0, 0, 0, 0);
|
|
88
|
+
border: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.col {
|
|
92
|
+
width: 25%;
|
|
93
|
+
height: 25px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
svg {
|
|
97
|
+
height: 10px;
|
|
98
|
+
width: 10px;
|
|
99
|
+
display: block;
|
|
100
|
+
margin: auto;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.status-text {
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
height: 15px;
|
|
106
|
+
color: #2c2c2c;
|
|
107
|
+
line-height: 20px;
|
|
108
|
+
margin: auto;
|
|
109
|
+
display: block;
|
|
110
|
+
text-align: center;
|
|
111
|
+
}
|
|
112
|
+
`;
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
__decorate([
|
|
116
|
+
property({ type: String })
|
|
117
|
+
], TileStats.prototype, "mediatype", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property({ type: Number })
|
|
120
|
+
], TileStats.prototype, "itemCount", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
property({ type: Number })
|
|
123
|
+
], TileStats.prototype, "viewCount", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: Number })
|
|
126
|
+
], TileStats.prototype, "favCount", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: Number })
|
|
129
|
+
], TileStats.prototype, "commentCount", void 0);
|
|
130
|
+
TileStats = __decorate([
|
|
131
|
+
customElement('tile-stats')
|
|
132
|
+
], TileStats);
|
|
133
|
+
export { TileStats };
|
|
134
|
+
//# sourceMappingURL=tile-stats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;;;yCAKhC,IAAI,CAAC,SAAS;;;cAGzC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;gBAEtD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;;cAID,kBAAkB;;;gBAGhB,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;cAI9C,WAAW;;;gBAGT,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;KAK3D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;IACJ,CAAC;CACF,CAAA;AAvH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAwHrB;SAxHY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n @property({ type: String }) mediatype?: string;\n\n @property({ type: Number }) itemCount?: number;\n\n @property({ type: Number }) viewCount?: number;\n\n @property({ type: Number }) favCount?: number;\n\n @property({ type: Number }) commentCount?: number;\n\n render() {\n return html`\n <div class=\"item-stats\">\n <p class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n </p>\n <ul id=\"stats-row\">\n <li class=\"col\">\n <p class=\"sr-only\">Mediatype:</p>\n <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n </li>\n <li class=\"col\">\n ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}\n </span>\n ${formatCount(\n this.mediatype === 'account' ? this.itemCount : this.viewCount,\n 'short',\n 'short'\n )}\n </p>\n </li>\n <li class=\"col\">\n ${favoriteFilledIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">Favorites:</span>\n ${formatCount(this.favCount, 'short', 'short')}\n </p>\n </li>\n <li class=\"col\">\n ${reviewsIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">Reviews:</span>\n ${formatCount(this.commentCount, 'short', 'short')}\n </p>\n </li>\n </ul>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n mediatype-icon {\n --iconHeight: 25px;\n --iconWidth: 25px;\n }\n\n ul {\n all: unset; // unset all property values\n list-style-type: none; // remove default list-style\n }\n\n li {\n list-style-type: none; // remove default list-style\n }\n\n .item-stats {\n height: 35px;\n }\n\n #stats-row {\n border-top: 1px solid #bbb;\n align-items: center;\n display: flex;\n flex: 1;\n justify-content: space-evenly;\n text-align: center;\n width: 100%;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n .col {\n width: 25%;\n height: 25px;\n }\n\n svg {\n height: 10px;\n width: 10px;\n display: block;\n margin: auto;\n }\n\n .status-text {\n font-size: 14px;\n height: 15px;\n color: #2c2c2c;\n line-height: 20px;\n margin: auto;\n display: block;\n text-align: center;\n }\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IAmEhD,CAAC;IAjEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAwEzB;SAxEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string | undefined;\n\n @property({ type: Array }) collections: string[] | undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private get displayMediatype(): string {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype || '';\n }\n\n render() {\n const config = mediatypeConfig[this.displayMediatype];\n if (!config) {\n return html``;\n }\n\n return html`\n <div\n id=\"icon\"\n class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n style=\"--iconFillColor: ${config.color}\"\n >\n ${config.icon}\n <p class=\"status-text\">${config.text}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n #icon {\n height: var(--iconHeight, 25px);\n }\n\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}
|
|
@@ -107,6 +107,7 @@ let TileDispatcher = class TileDispatcher extends LitElement {
|
|
|
107
107
|
.currentHeight=${this.currentHeight}
|
|
108
108
|
.collectionNameCache=${this.collectionNameCache}
|
|
109
109
|
.baseImageUrl=${this.baseImageUrl}
|
|
110
|
+
.sortParam=${sortParam}
|
|
110
111
|
></item-tile>`;
|
|
111
112
|
}
|
|
112
113
|
case 'list-compact':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAQzD,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AAGzC,IAAa,cAAc,GAA3B,MAAa,cACX,SAAQ,UAAU;IADpB;;QAmB8B,cAAS,GAAqB,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { TileDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @query('#container') private container!: HTMLDivElement;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n render() {\n return html`\n <div id=\"container\">\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n </div>\n `;\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, mobileBreakpoint } = this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n title=${ifDefined(this.model?.title)}\n >\n ${this.tile}\n </a>\n `;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n private get tile() {\n const {\n model,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n mobileBreakpoint,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n ></account-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .collectionNameCache=${this.collectionNameCache}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n ></item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n ></tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionNameCache=${this.collectionNameCache}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n ></tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n height: 100%;\n }\n\n #container {\n height: 100%;\n }\n\n #delete-button {\n float: right;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n `;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../src/tiles/grid/tile-stats';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/* eslint-disable import/no-duplicates */
|
|
2
|
+
import { expect, fixture } from '@open-wc/testing';
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
import '../src/tiles/grid/tile-stats';
|
|
5
|
+
describe('Tile Stats', () => {
|
|
6
|
+
it('should render initial component', async () => {
|
|
7
|
+
var _a, _b;
|
|
8
|
+
const el = await fixture(html `<tile-stats></tile-stats>`);
|
|
9
|
+
const itemStats = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-stats');
|
|
10
|
+
const statsRow = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#stats-row');
|
|
11
|
+
const statsRowCount = statsRow === null || statsRow === void 0 ? void 0 : statsRow.childElementCount;
|
|
12
|
+
expect(itemStats).to.exist;
|
|
13
|
+
expect(statsRow).to.exist;
|
|
14
|
+
expect(statsRowCount).to.equal(4);
|
|
15
|
+
});
|
|
16
|
+
it('should render component with value', async () => {
|
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
18
|
+
const el = await fixture(html `
|
|
19
|
+
<tile-stats
|
|
20
|
+
.mediatype=${'account'}
|
|
21
|
+
.itemCount=${1}
|
|
22
|
+
.favCount=${2}
|
|
23
|
+
.commentCount=${3}
|
|
24
|
+
>
|
|
25
|
+
</tile-stats>
|
|
26
|
+
`);
|
|
27
|
+
const statsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#stats-row');
|
|
28
|
+
const mediatypeStat = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(0);
|
|
29
|
+
// get second column item in stats row
|
|
30
|
+
const itemStatCount = (_c = (_b = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(1)) === null || _b === void 0 ? void 0 : _b.querySelector('.status-text')) === null || _c === void 0 ? void 0 : _c.textContent;
|
|
31
|
+
// get third column item in stats row
|
|
32
|
+
const favoritesStatCount = (_e = (_d = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(2)) === null || _d === void 0 ? void 0 : _d.querySelector('.status-text')) === null || _e === void 0 ? void 0 : _e.textContent;
|
|
33
|
+
// get fourth column item in stats row
|
|
34
|
+
const reviewsStatCount = (_g = (_f = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _f === void 0 ? void 0 : _f.querySelector('.status-text')) === null || _g === void 0 ? void 0 : _g.textContent;
|
|
35
|
+
expect(mediatypeStat).to.exist;
|
|
36
|
+
// Snapshot testing - reference: https://open-wc.org/docs/testing/semantic-dom-diff/#snapshot-testing
|
|
37
|
+
expect(itemStatCount).to.equalSnapshot(1);
|
|
38
|
+
expect(favoritesStatCount).to.equalSnapshot(2);
|
|
39
|
+
expect(reviewsStatCount).to.equalSnapshot(3);
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
//# sourceMappingURL=tile-stats.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tile-stats.test.js","sourceRoot":"","sources":["../../test/tile-stats.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,8BAA8B,CAAC;AAEtC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,2BAA2B,CAAC,CAAC;QAErE,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,aAAa,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,iBAAiB,CAAC;QAElD,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;;uBAEa,SAAS;uBACT,CAAC;sBACF,CAAC;0BACG,CAAC;;;OAGpB,CACF,CAAC;QAEF,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAE5D,MAAM,aAAa,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACjD,sCAAsC;QACtC,MAAM,aAAa,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CACrC,IAAI,CAAC,CAAC,CAAC,0CACN,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAC;QAC/C,qCAAqC;QACrC,MAAM,kBAAkB,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAC1C,IAAI,CAAC,CAAC,CAAC,0CACN,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAC;QAC/C,sCAAsC;QACtC,MAAM,gBAAgB,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CACxC,IAAI,CAAC,CAAC,CAAC,0CACN,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAC;QAE/C,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAE/B,qGAAqG;QACrG,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/C,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { TileStats } from '../src/tiles/grid/tile-stats';\n\nimport '../src/tiles/grid/tile-stats';\n\ndescribe('Tile Stats', () => {\n it('should render initial component', async () => {\n const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);\n\n const itemStats = el.shadowRoot?.querySelector('.item-stats');\n const statsRow = el.shadowRoot?.querySelector('#stats-row');\n const statsRowCount = statsRow?.childElementCount;\n\n expect(itemStats).to.exist;\n expect(statsRow).to.exist;\n expect(statsRowCount).to.equal(4);\n });\n\n it('should render component with value', async () => {\n const el = await fixture<TileStats>(\n html`\n <tile-stats\n .mediatype=${'account'}\n .itemCount=${1}\n .favCount=${2}\n .commentCount=${3}\n >\n </tile-stats>\n `\n );\n\n const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n const mediatypeStat = statsRow?.children.item(0);\n // get second column item in stats row\n const itemStatCount = statsRow?.children\n .item(1)\n ?.querySelector('.status-text')?.textContent;\n // get third column item in stats row\n const favoritesStatCount = statsRow?.children\n .item(2)\n ?.querySelector('.status-text')?.textContent;\n // get fourth column item in stats row\n const reviewsStatCount = statsRow?.children\n .item(3)\n ?.querySelector('.status-text')?.textContent;\n\n expect(mediatypeStat).to.exist;\n\n // Snapshot testing - reference: https://open-wc.org/docs/testing/semantic-dom-diff/#snapshot-testing\n expect(itemStatCount).to.equalSnapshot(1);\n expect(favoritesStatCount).to.equalSnapshot(2);\n expect(reviewsStatCount).to.equalSnapshot(3);\n });\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../../src/tiles/grid/item-tile';
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/* eslint-disable import/no-duplicates */
|
|
2
|
+
import { expect, fixture } from '@open-wc/testing';
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
import '../../../src/tiles/grid/item-tile';
|
|
5
|
+
describe('Item Tile', () => {
|
|
6
|
+
it('should render initial component', async () => {
|
|
7
|
+
var _a, _b, _c;
|
|
8
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
9
|
+
const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
|
|
10
|
+
const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
|
|
11
|
+
const itemTitle = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#title');
|
|
12
|
+
expect(itemInfo).to.exist;
|
|
13
|
+
expect(itemImage).to.exist;
|
|
14
|
+
expect(itemTitle).to.exist;
|
|
15
|
+
});
|
|
16
|
+
it('should render with created-by element', async () => {
|
|
17
|
+
var _a, _b, _c;
|
|
18
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
19
|
+
const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
|
|
20
|
+
const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
|
|
21
|
+
const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
|
|
22
|
+
expect(itemInfo).to.exist;
|
|
23
|
+
expect(createdBy).to.exist;
|
|
24
|
+
expect(dateSortedBy).to.not.exist;
|
|
25
|
+
});
|
|
26
|
+
it('should not render with created-by but date element', async () => {
|
|
27
|
+
var _a, _b;
|
|
28
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
29
|
+
el.sortParam = {
|
|
30
|
+
field: 'date',
|
|
31
|
+
direction: 'desc',
|
|
32
|
+
};
|
|
33
|
+
await el.updateComplete;
|
|
34
|
+
const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
|
|
35
|
+
const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
|
|
36
|
+
expect(createdBy).to.not.exist;
|
|
37
|
+
expect(dateSortedBy).to.exist;
|
|
38
|
+
});
|
|
39
|
+
it('should not render with created-by but reviewdate element', async () => {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
42
|
+
el.sortParam = {
|
|
43
|
+
field: 'reviewdate',
|
|
44
|
+
direction: 'desc',
|
|
45
|
+
};
|
|
46
|
+
await el.updateComplete;
|
|
47
|
+
const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
|
|
48
|
+
const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
|
|
49
|
+
expect(createdBy).to.not.exist;
|
|
50
|
+
expect(dateSortedBy).to.exist;
|
|
51
|
+
});
|
|
52
|
+
it('should not render with created-by but publicdate element', async () => {
|
|
53
|
+
var _a, _b;
|
|
54
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
55
|
+
el.sortParam = {
|
|
56
|
+
field: 'publicdate',
|
|
57
|
+
direction: 'desc',
|
|
58
|
+
};
|
|
59
|
+
await el.updateComplete;
|
|
60
|
+
const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
|
|
61
|
+
const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
|
|
62
|
+
expect(createdBy).to.not.exist;
|
|
63
|
+
expect(dateSortedBy).to.exist;
|
|
64
|
+
});
|
|
65
|
+
it('should render with created-by when sorting not related to date', async () => {
|
|
66
|
+
var _a, _b, _c;
|
|
67
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
68
|
+
el.sortParam = {
|
|
69
|
+
field: 'addeddate',
|
|
70
|
+
direction: 'asc',
|
|
71
|
+
};
|
|
72
|
+
await el.updateComplete;
|
|
73
|
+
const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
|
|
74
|
+
const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
|
|
75
|
+
const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
|
|
76
|
+
expect(itemInfo).to.exist;
|
|
77
|
+
expect(createdBy).to.not.exist;
|
|
78
|
+
expect(dateSortedBy).to.exist;
|
|
79
|
+
});
|
|
80
|
+
it('should render with created-by when sort field id not like date', async () => {
|
|
81
|
+
var _a, _b, _c;
|
|
82
|
+
const el = await fixture(html `<item-tile></item-tile>`);
|
|
83
|
+
el.sortParam = {
|
|
84
|
+
field: 'week',
|
|
85
|
+
direction: 'asc',
|
|
86
|
+
};
|
|
87
|
+
await el.updateComplete;
|
|
88
|
+
const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
|
|
89
|
+
const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
|
|
90
|
+
const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
|
|
91
|
+
expect(itemInfo).to.exist;
|
|
92
|
+
expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort
|
|
93
|
+
expect(createdBy).to.exist;
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
//# sourceMappingURL=item-tile.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item-tile.test.js","sourceRoot":"","sources":["../../../../test/tiles/grid/item-tile.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { ItemTile } from '../../../src/tiles/grid/item-tile';\n\nimport '../../../src/tiles/grid/item-tile';\n\ndescribe('Item Tile', () => {\n it('should render initial component', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n const itemInfo = el.shadowRoot?.querySelector('.item-info');\n const itemImage = el.shadowRoot?.querySelector('item-image');\n const itemTitle = el.shadowRoot?.querySelector('#title');\n\n expect(itemInfo).to.exist;\n expect(itemImage).to.exist;\n expect(itemTitle).to.exist;\n });\n\n it('should render with created-by element', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n const itemInfo = el.shadowRoot?.querySelector('.item-info');\n const createdBy = el.shadowRoot?.querySelector('.created-by');\n const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n expect(itemInfo).to.exist;\n expect(createdBy).to.exist;\n expect(dateSortedBy).to.not.exist;\n });\n\n it('should not render with created-by but date element', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n el.sortParam = {\n field: 'date',\n direction: 'desc',\n };\n await el.updateComplete;\n\n const createdBy = el.shadowRoot?.querySelector('.created-by');\n const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n expect(createdBy).to.not.exist;\n expect(dateSortedBy).to.exist;\n });\n\n it('should not render with created-by but reviewdate element', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n el.sortParam = {\n field: 'reviewdate',\n direction: 'desc',\n };\n await el.updateComplete;\n\n const createdBy = el.shadowRoot?.querySelector('.created-by');\n const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n expect(createdBy).to.not.exist;\n expect(dateSortedBy).to.exist;\n });\n\n it('should not render with created-by but publicdate element', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n el.sortParam = {\n field: 'publicdate',\n direction: 'desc',\n };\n await el.updateComplete;\n\n const createdBy = el.shadowRoot?.querySelector('.created-by');\n const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n expect(createdBy).to.not.exist;\n expect(dateSortedBy).to.exist;\n });\n\n it('should render with created-by when sorting not related to date', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n el.sortParam = {\n field: 'addeddate',\n direction: 'asc',\n };\n await el.updateComplete;\n\n const itemInfo = el.shadowRoot?.querySelector('.item-info');\n const createdBy = el.shadowRoot?.querySelector('.created-by');\n const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n expect(itemInfo).to.exist;\n expect(createdBy).to.not.exist;\n expect(dateSortedBy).to.exist;\n });\n\n it('should render with created-by when sort field id not like date', async () => {\n const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n el.sortParam = {\n field: 'week',\n direction: 'asc',\n };\n await el.updateComplete;\n\n const itemInfo = el.shadowRoot?.querySelector('.item-info');\n const createdBy = el.shadowRoot?.querySelector('.created-by');\n const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n expect(itemInfo).to.exist;\n expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort\n expect(createdBy).to.exist;\n });\n});\n"]}
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { svg } from 'lit';
|
|
2
2
|
|
|
3
|
-
export
|
|
3
|
+
export const viewsIcon = svg`
|
|
4
4
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
5
5
|
<path
|
|
6
6
|
d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"
|
|
@@ -2,10 +2,7 @@ import { css, html, LitElement } from 'lit';
|
|
|
2
2
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
3
|
import { TileModel } from '../../models';
|
|
4
4
|
|
|
5
|
-
import
|
|
6
|
-
import { favoriteFilledIcon } from './icons/favorite-filled';
|
|
7
|
-
import { reviewsIcon } from './icons/reviews';
|
|
8
|
-
import { uploadIcon } from './icons/upload';
|
|
5
|
+
import './tile-stats';
|
|
9
6
|
|
|
10
7
|
@customElement('account-tile')
|
|
11
8
|
export class AccountTile extends LitElement {
|
|
@@ -13,44 +10,32 @@ export class AccountTile extends LitElement {
|
|
|
13
10
|
|
|
14
11
|
render() {
|
|
15
12
|
return html`
|
|
16
|
-
<div class="
|
|
17
|
-
<div
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
<div id="year-holder">
|
|
31
|
-
<div id="archivist-since">
|
|
32
|
-
<h3>Archivist Since</h3>
|
|
33
|
-
</div>
|
|
34
|
-
<div id="year-holder">
|
|
35
|
-
<h3>${this.model?.dateAdded?.getFullYear()}</h3>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
38
|
-
<div id="status-holder">
|
|
39
|
-
<div id="patron-icon">${accountIcon}</div>
|
|
40
|
-
<div class="stat-icon">
|
|
41
|
-
${uploadIcon}
|
|
42
|
-
<h3>${this.model?.itemCount}</h3>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="stat-icon">
|
|
45
|
-
${favoriteFilledIcon}
|
|
46
|
-
<h3>${this.model?.favCount}</h3>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="stat-icon">
|
|
49
|
-
${reviewsIcon}
|
|
50
|
-
<h3>${this.model?.commentCount}</h3>
|
|
51
|
-
</div>
|
|
13
|
+
<div class="account-tile-main">
|
|
14
|
+
<div id="title">
|
|
15
|
+
<h1 class="truncated">${this.model?.identifier}</h1>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<div class="account-info">
|
|
19
|
+
<div id="avatar-info">
|
|
20
|
+
<img
|
|
21
|
+
id="avatar"
|
|
22
|
+
alt="patron-avatar"
|
|
23
|
+
src="https://archive.org/services/img/${this.model?.identifier}"
|
|
24
|
+
/>
|
|
52
25
|
</div>
|
|
26
|
+
|
|
27
|
+
<span id="archivist-since">
|
|
28
|
+
Archivist since ${this.model?.dateAdded?.getFullYear()}
|
|
29
|
+
</span>
|
|
53
30
|
</div>
|
|
31
|
+
|
|
32
|
+
<tile-stats
|
|
33
|
+
.mediatype=${this.model?.mediatype}
|
|
34
|
+
.itemCount=${this.model?.itemCount}
|
|
35
|
+
.favCount=${this.model?.favCount}
|
|
36
|
+
.commentCount=${this.model?.commentCount}
|
|
37
|
+
>
|
|
38
|
+
</tile-stats>
|
|
54
39
|
</div>
|
|
55
40
|
`;
|
|
56
41
|
}
|
|
@@ -63,41 +48,45 @@ export class AccountTile extends LitElement {
|
|
|
63
48
|
margin: 0;
|
|
64
49
|
}
|
|
65
50
|
|
|
66
|
-
|
|
51
|
+
span {
|
|
67
52
|
font-size: 14px;
|
|
68
|
-
font-weight: bold;
|
|
69
53
|
color: #2c2c2c;
|
|
70
54
|
margin: 0px;
|
|
71
55
|
}
|
|
72
56
|
|
|
73
|
-
.
|
|
57
|
+
.account-tile-main {
|
|
74
58
|
background-color: #fcf5e6;
|
|
75
59
|
border: 1px #2c2c2c;
|
|
76
60
|
border-radius: 4px;
|
|
77
61
|
box-shadow: 1px 1px 2px 0px;
|
|
78
62
|
height: 100%;
|
|
79
63
|
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
80
65
|
text-align: center;
|
|
81
66
|
width: 100%;
|
|
82
67
|
}
|
|
83
68
|
|
|
84
|
-
.
|
|
85
|
-
|
|
86
|
-
width: 100%;
|
|
87
|
-
display: flex;
|
|
88
|
-
flex-direction: column;
|
|
69
|
+
.account-info {
|
|
70
|
+
flex-grow: 1;
|
|
89
71
|
}
|
|
90
72
|
|
|
91
|
-
#
|
|
92
|
-
|
|
73
|
+
#title {
|
|
74
|
+
padding: 5px 5px 0px 5px;
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
height: 40px;
|
|
93
77
|
}
|
|
94
78
|
|
|
95
|
-
#title
|
|
96
|
-
|
|
97
|
-
|
|
79
|
+
.account-tile-main:hover > #title > .truncated {
|
|
80
|
+
text-decoration: underline;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
84
|
+
#title:hover > .truncated {
|
|
85
|
+
text-decoration: underline;
|
|
98
86
|
}
|
|
99
87
|
|
|
100
|
-
#avatar-
|
|
88
|
+
#avatar-info {
|
|
89
|
+
margin-top: 5px;
|
|
101
90
|
margin-bottom: 5px;
|
|
102
91
|
display: flex;
|
|
103
92
|
align-items: center;
|
|
@@ -112,27 +101,11 @@ export class AccountTile extends LitElement {
|
|
|
112
101
|
box-shadow: 1px 1px 2px #888888;
|
|
113
102
|
}
|
|
114
103
|
|
|
115
|
-
#
|
|
104
|
+
#archivist-since {
|
|
116
105
|
margin-bottom: 5px;
|
|
117
106
|
height: 40px;
|
|
118
107
|
}
|
|
119
108
|
|
|
120
|
-
#year-holder {
|
|
121
|
-
margin: 0px;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
#status-holder {
|
|
125
|
-
height: 25px;
|
|
126
|
-
display: flex;
|
|
127
|
-
justify-content: space-evenly;
|
|
128
|
-
line-height: initial;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
#patron-icon {
|
|
132
|
-
height: 25px;
|
|
133
|
-
width: 25px;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
109
|
.truncated {
|
|
137
110
|
flex: 1;
|
|
138
111
|
min-width: 0; /* Important for long words! */
|
|
@@ -142,15 +115,9 @@ export class AccountTile extends LitElement {
|
|
|
142
115
|
display: -webkit-box;
|
|
143
116
|
-webkit-box-orient: vertical;
|
|
144
117
|
word-wrap: break-word;
|
|
145
|
-
word-break: break-all;
|
|
146
118
|
line-height: 2rem;
|
|
147
119
|
text-align: center;
|
|
148
120
|
}
|
|
149
|
-
|
|
150
|
-
.stat-icon {
|
|
151
|
-
height: 10px;
|
|
152
|
-
width: 10px;
|
|
153
|
-
}
|
|
154
121
|
`;
|
|
155
122
|
}
|
|
156
123
|
}
|