@internetarchive/collection-browser 0.4.10-alpha.3 → 0.4.11
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/.editorconfig +29 -29
- package/.github/workflows/ci.yml +26 -26
- package/.github/workflows/gh-pages-main.yml +39 -39
- package/.github/workflows/npm-publish.yml +39 -39
- package/.github/workflows/pr-preview.yml +38 -38
- package/.husky/pre-commit +4 -4
- package/LICENSE +661 -661
- package/README.md +83 -83
- package/dist/index.d.ts +9 -9
- package/dist/index.js +9 -9
- package/dist/src/app-root.d.ts +50 -50
- package/dist/src/app-root.js +278 -278
- package/dist/src/assets/img/icons/arrow-left.d.ts +2 -2
- package/dist/src/assets/img/icons/arrow-left.js +2 -2
- package/dist/src/assets/img/icons/arrow-right.d.ts +2 -2
- package/dist/src/assets/img/icons/arrow-right.js +2 -2
- package/dist/src/assets/img/icons/chevron.d.ts +2 -2
- package/dist/src/assets/img/icons/chevron.js +2 -2
- package/dist/src/assets/img/icons/empty-query.d.ts +2 -2
- package/dist/src/assets/img/icons/empty-query.js +2 -2
- package/dist/src/assets/img/icons/eye-closed.d.ts +2 -2
- package/dist/src/assets/img/icons/eye-closed.js +2 -2
- package/dist/src/assets/img/icons/eye.d.ts +2 -2
- package/dist/src/assets/img/icons/eye.js +2 -2
- package/dist/src/assets/img/icons/favorite-filled.d.ts +1 -1
- package/dist/src/assets/img/icons/favorite-filled.js +2 -2
- package/dist/src/assets/img/icons/login-required.d.ts +1 -1
- package/dist/src/assets/img/icons/login-required.js +2 -2
- package/dist/src/assets/img/icons/mediatype/account.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/account.js +2 -2
- package/dist/src/assets/img/icons/mediatype/audio.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/audio.js +2 -2
- package/dist/src/assets/img/icons/mediatype/collection.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/collection.js +2 -2
- package/dist/src/assets/img/icons/mediatype/data.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/data.js +2 -2
- package/dist/src/assets/img/icons/mediatype/etree.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/etree.js +2 -2
- package/dist/src/assets/img/icons/mediatype/film.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/film.js +2 -2
- package/dist/src/assets/img/icons/mediatype/images.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/images.js +2 -2
- package/dist/src/assets/img/icons/mediatype/radio.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/radio.js +2 -2
- package/dist/src/assets/img/icons/mediatype/software.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/software.js +2 -2
- package/dist/src/assets/img/icons/mediatype/texts.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/texts.js +2 -2
- package/dist/src/assets/img/icons/mediatype/tv.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/tv.js +2 -2
- package/dist/src/assets/img/icons/mediatype/video.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/video.js +2 -2
- package/dist/src/assets/img/icons/mediatype/web.d.ts +1 -1
- package/dist/src/assets/img/icons/mediatype/web.js +2 -2
- package/dist/src/assets/img/icons/null-result.d.ts +2 -2
- package/dist/src/assets/img/icons/null-result.js +2 -2
- package/dist/src/assets/img/icons/restricted.d.ts +1 -1
- package/dist/src/assets/img/icons/restricted.js +2 -2
- package/dist/src/assets/img/icons/reviews.d.ts +1 -1
- package/dist/src/assets/img/icons/reviews.js +2 -2
- package/dist/src/assets/img/icons/upload.d.ts +1 -1
- package/dist/src/assets/img/icons/upload.js +2 -2
- package/dist/src/assets/img/icons/views.d.ts +1 -1
- package/dist/src/assets/img/icons/views.js +2 -2
- package/dist/src/circular-activity-indicator.d.ts +5 -5
- package/dist/src/circular-activity-indicator.js +17 -17
- package/dist/src/collection-browser.d.ts +279 -279
- package/dist/src/collection-browser.js +1156 -1156
- package/dist/src/collection-facets/facet-tombstone-row.d.ts +5 -5
- package/dist/src/collection-facets/facet-tombstone-row.js +15 -15
- package/dist/src/collection-facets/facets-template.d.ts +16 -16
- package/dist/src/collection-facets/facets-template.js +125 -125
- package/dist/src/collection-facets/more-facets-content.d.ts +75 -75
- package/dist/src/collection-facets/more-facets-content.js +340 -340
- package/dist/src/collection-facets/more-facets-pagination.d.ts +36 -36
- package/dist/src/collection-facets/more-facets-pagination.js +192 -192
- package/dist/src/collection-facets.d.ts +81 -81
- package/dist/src/collection-facets.js +375 -375
- package/dist/src/empty-placeholder.d.ts +11 -11
- package/dist/src/empty-placeholder.js +42 -42
- package/dist/src/language-code-handler/language-code-handler.d.ts +37 -37
- package/dist/src/language-code-handler/language-code-handler.js +26 -26
- package/dist/src/language-code-handler/language-code-mapping.d.ts +1 -1
- package/dist/src/language-code-handler/language-code-mapping.js +562 -562
- package/dist/src/mediatype/mediatype-config.d.ts +3 -3
- package/dist/src/mediatype/mediatype-config.js +85 -85
- package/dist/src/models.d.ts +115 -115
- package/dist/src/models.js +125 -125
- package/dist/src/models.js.map +1 -1
- package/dist/src/restoration-state-handler.d.ts +45 -45
- package/dist/src/restoration-state-handler.js +230 -230
- package/dist/src/sort-filter-bar/alpha-bar-tooltip.d.ts +6 -6
- package/dist/src/sort-filter-bar/alpha-bar-tooltip.js +24 -24
- package/dist/src/sort-filter-bar/alpha-bar.d.ts +20 -20
- package/dist/src/sort-filter-bar/alpha-bar.js +136 -128
- package/dist/src/sort-filter-bar/alpha-bar.js.map +1 -1
- package/dist/src/sort-filter-bar/img/compact.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/compact.js +2 -2
- package/dist/src/sort-filter-bar/img/list.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/list.js +2 -2
- package/dist/src/sort-filter-bar/img/sort-triangle.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/sort-triangle.js +2 -2
- package/dist/src/sort-filter-bar/img/tile.d.ts +1 -1
- package/dist/src/sort-filter-bar/img/tile.js +2 -2
- package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +108 -113
- package/dist/src/sort-filter-bar/sort-filter-bar.js +548 -614
- package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
- package/dist/src/styles/item-image-styles.d.ts +8 -8
- package/dist/src/styles/item-image-styles.js +9 -9
- package/dist/src/tiles/collection-browser-loading-tile.d.ts +5 -5
- package/dist/src/tiles/collection-browser-loading-tile.js +15 -15
- package/dist/src/tiles/grid/account-tile.d.ts +20 -20
- package/dist/src/tiles/grid/account-tile.js +64 -64
- package/dist/src/tiles/grid/collection-tile.d.ts +17 -17
- package/dist/src/tiles/grid/collection-tile.js +71 -71
- package/dist/src/tiles/grid/item-tile.d.ts +32 -32
- package/dist/src/tiles/grid/item-tile.js +126 -129
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.d.ts +1 -1
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +7 -7
- package/dist/src/tiles/grid/tile-stats.d.ts +10 -10
- package/dist/src/tiles/grid/tile-stats.js +40 -40
- package/dist/src/tiles/hover/hover-pane-controller.d.ts +219 -219
- package/dist/src/tiles/hover/hover-pane-controller.js +352 -352
- package/dist/src/tiles/hover/tile-hover-pane.d.ts +15 -15
- package/dist/src/tiles/hover/tile-hover-pane.js +38 -38
- package/dist/src/tiles/image-block.d.ts +17 -17
- package/dist/src/tiles/image-block.js +72 -72
- package/dist/src/tiles/item-image.d.ts +35 -35
- package/dist/src/tiles/item-image.js +117 -117
- package/dist/src/tiles/list/account-label.d.ts +1 -1
- package/dist/src/tiles/list/account-label.js +6 -6
- package/dist/src/tiles/list/date-label.d.ts +1 -1
- package/dist/src/tiles/list/date-label.js +12 -12
- package/dist/src/tiles/list/tile-list-compact-header.d.ts +12 -12
- package/dist/src/tiles/list/tile-list-compact-header.js +41 -41
- package/dist/src/tiles/list/tile-list-compact.d.ts +21 -21
- package/dist/src/tiles/list/tile-list-compact.js +99 -99
- package/dist/src/tiles/list/tile-list.d.ts +55 -55
- package/dist/src/tiles/list/tile-list.js +301 -301
- package/dist/src/tiles/mediatype-icon.d.ts +9 -9
- package/dist/src/tiles/mediatype-icon.js +47 -47
- package/dist/src/tiles/overlay/icon-overlay.d.ts +10 -10
- package/dist/src/tiles/overlay/icon-overlay.js +40 -40
- package/dist/src/tiles/overlay/icon-text-overlay.d.ts +9 -9
- package/dist/src/tiles/overlay/icon-text-overlay.js +38 -38
- package/dist/src/tiles/overlay/text-overlay.d.ts +10 -10
- package/dist/src/tiles/overlay/text-overlay.js +42 -42
- package/dist/src/tiles/text-snippet-block.d.ts +27 -27
- package/dist/src/tiles/text-snippet-block.js +73 -73
- package/dist/src/tiles/tile-dispatcher.d.ts +58 -58
- package/dist/src/tiles/tile-dispatcher.js +194 -194
- package/dist/src/utils/analytics-events.d.ts +22 -22
- package/dist/src/utils/analytics-events.js +24 -24
- package/dist/src/utils/format-count.d.ts +7 -7
- package/dist/src/utils/format-count.js +76 -76
- package/dist/src/utils/format-date.d.ts +2 -2
- package/dist/src/utils/format-date.js +23 -23
- package/dist/src/utils/format-unit-size.d.ts +2 -2
- package/dist/src/utils/format-unit-size.js +33 -33
- package/dist/test/collection-browser.test.d.ts +1 -1
- package/dist/test/collection-browser.test.js +584 -584
- package/dist/test/collection-facets/facets-template.test.d.ts +1 -1
- package/dist/test/collection-facets/facets-template.test.js +62 -62
- package/dist/test/collection-facets/more-facets-content.test.d.ts +1 -1
- package/dist/test/collection-facets/more-facets-content.test.js +114 -114
- package/dist/test/collection-facets/more-facets-pagination.test.d.ts +1 -1
- package/dist/test/collection-facets/more-facets-pagination.test.js +117 -117
- package/dist/test/collection-facets.test.d.ts +2 -2
- package/dist/test/collection-facets.test.js +460 -460
- package/dist/test/empty-placeholder.test.d.ts +1 -1
- package/dist/test/empty-placeholder.test.js +33 -33
- package/dist/test/icon-overlay.test.d.ts +1 -1
- package/dist/test/icon-overlay.test.js +24 -24
- package/dist/test/image-block.test.d.ts +1 -1
- package/dist/test/image-block.test.js +48 -48
- package/dist/test/item-image.test.d.ts +1 -1
- package/dist/test/item-image.test.js +84 -84
- package/dist/test/mediatype-config.test.d.ts +1 -1
- package/dist/test/mediatype-config.test.js +16 -16
- package/dist/test/mocks/mock-analytics-handler.d.ts +10 -10
- package/dist/test/mocks/mock-analytics-handler.js +15 -15
- package/dist/test/mocks/mock-collection-name-cache.d.ts +7 -7
- package/dist/test/mocks/mock-collection-name-cache.js +13 -13
- package/dist/test/mocks/mock-search-responses.d.ts +12 -12
- package/dist/test/mocks/mock-search-responses.js +341 -341
- package/dist/test/mocks/mock-search-service.d.ts +13 -13
- package/dist/test/mocks/mock-search-service.js +40 -40
- package/dist/test/restoration-state-handler.test.d.ts +1 -1
- package/dist/test/restoration-state-handler.test.js +125 -125
- package/dist/test/sort-filter-bar/alpha-bar-tooltip.test.d.ts +1 -1
- package/dist/test/sort-filter-bar/alpha-bar-tooltip.test.js +12 -12
- package/dist/test/sort-filter-bar/alpha-bar.test.d.ts +1 -1
- package/dist/test/sort-filter-bar/alpha-bar.test.js +73 -73
- package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts +1 -1
- package/dist/test/sort-filter-bar/sort-filter-bar.test.js +197 -208
- package/dist/test/sort-filter-bar/sort-filter-bar.test.js.map +1 -1
- package/dist/test/text-overlay.test.d.ts +1 -1
- package/dist/test/text-overlay.test.js +48 -48
- package/dist/test/text-snippet-block.test.d.ts +1 -1
- package/dist/test/text-snippet-block.test.js +57 -57
- package/dist/test/tile-stats.test.d.ts +1 -1
- package/dist/test/tile-stats.test.js +33 -33
- package/dist/test/tiles/grid/account-tile.test.d.ts +1 -1
- package/dist/test/tiles/grid/account-tile.test.js +76 -76
- package/dist/test/tiles/grid/collection-tile.test.d.ts +1 -1
- package/dist/test/tiles/grid/collection-tile.test.js +73 -73
- package/dist/test/tiles/grid/item-tile.test.d.ts +1 -1
- package/dist/test/tiles/grid/item-tile.test.js +158 -158
- package/dist/test/tiles/hover/hover-pane-controller.test.d.ts +1 -1
- package/dist/test/tiles/hover/hover-pane-controller.test.js +257 -257
- package/dist/test/tiles/hover/tile-hover-pane.test.d.ts +1 -1
- package/dist/test/tiles/hover/tile-hover-pane.test.js +13 -13
- package/dist/test/tiles/list/tile-list-compact.test.d.ts +1 -1
- package/dist/test/tiles/list/tile-list-compact.test.js +92 -92
- package/dist/test/tiles/list/tile-list.test.d.ts +1 -1
- package/dist/test/tiles/list/tile-list.test.js +163 -163
- package/dist/test/tiles/tile-dispatcher.test.d.ts +1 -1
- package/dist/test/tiles/tile-dispatcher.test.js +67 -67
- package/dist/test/utils/format-count.test.d.ts +1 -1
- package/dist/test/utils/format-count.test.js +23 -23
- package/dist/test/utils/format-date.test.d.ts +1 -1
- package/dist/test/utils/format-date.test.js +17 -17
- package/dist/test/utils/format-unit-size.test.d.ts +1 -1
- package/dist/test/utils/format-unit-size.test.js +17 -17
- package/local.archive.org.cert +86 -86
- package/local.archive.org.key +27 -27
- package/package.json +3 -4
- package/renovate.json +6 -6
- package/src/models.ts +6 -6
- package/src/sort-filter-bar/alpha-bar.ts +8 -0
- package/src/sort-filter-bar/sort-filter-bar.ts +197 -283
- package/src/tiles/grid/item-tile.ts +1 -5
- package/test/sort-filter-bar/sort-filter-bar.test.ts +39 -56
- package/tsconfig.json +21 -21
- package/web-dev-server.config.mjs +30 -30
- package/web-test-runner.config.mjs +41 -41
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html, LitElement, nothing, } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
|
|
5
|
-
import { formatUnitSize } from '../../utils/format-unit-size';
|
|
6
|
-
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
7
|
-
import '../image-block';
|
|
8
|
-
let CollectionTile = class CollectionTile extends LitElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this.showInfoButton = false;
|
|
12
|
-
}
|
|
13
|
-
render() {
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
|
|
5
|
+
import { formatUnitSize } from '../../utils/format-unit-size';
|
|
6
|
+
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
7
|
+
import '../image-block';
|
|
8
|
+
let CollectionTile = class CollectionTile extends LitElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this.showInfoButton = false;
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
14
|
return html `
|
|
15
15
|
<div class="container">
|
|
16
16
|
${this.infoButtonTemplate}
|
|
@@ -22,9 +22,9 @@ let CollectionTile = class CollectionTile extends LitElement {
|
|
|
22
22
|
|
|
23
23
|
${this.getTileStatsTemplate}
|
|
24
24
|
</div>
|
|
25
|
-
`;
|
|
26
|
-
}
|
|
27
|
-
get getImageBlockTemplate() {
|
|
25
|
+
`;
|
|
26
|
+
}
|
|
27
|
+
get getImageBlockTemplate() {
|
|
28
28
|
return html `
|
|
29
29
|
<image-block
|
|
30
30
|
.model=${this.model}
|
|
@@ -32,15 +32,15 @@ let CollectionTile = class CollectionTile extends LitElement {
|
|
|
32
32
|
.viewSize=${'grid'}
|
|
33
33
|
>
|
|
34
34
|
</image-block>
|
|
35
|
-
`;
|
|
36
|
-
}
|
|
37
|
-
get getTitleTemplate() {
|
|
38
|
-
var _a;
|
|
35
|
+
`;
|
|
36
|
+
}
|
|
37
|
+
get getTitleTemplate() {
|
|
38
|
+
var _a;
|
|
39
39
|
return html `<div id="title">
|
|
40
40
|
<h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
|
|
41
|
-
</div>`;
|
|
42
|
-
}
|
|
43
|
-
get getTileStatsTemplate() {
|
|
41
|
+
</div>`;
|
|
42
|
+
}
|
|
43
|
+
get getTileStatsTemplate() {
|
|
44
44
|
return html `
|
|
45
45
|
<div id="item-stats">
|
|
46
46
|
<div id="item-mediatype">${collectionIcon}</div>
|
|
@@ -49,42 +49,42 @@ let CollectionTile = class CollectionTile extends LitElement {
|
|
|
49
49
|
${this.getItemsTemplate} ${this.getSizeTemplate}
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
|
-
`;
|
|
53
|
-
}
|
|
54
|
-
get getItemsTemplate() {
|
|
55
|
-
var _a, _b;
|
|
56
|
-
const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
get getItemsTemplate() {
|
|
55
|
+
var _a, _b;
|
|
56
|
+
const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
|
|
57
57
|
return html `<span id="item-count"
|
|
58
58
|
>${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
|
|
59
|
-
>`;
|
|
60
|
-
}
|
|
61
|
-
get getSizeTemplate() {
|
|
62
|
-
var _a, _b;
|
|
63
|
-
const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
|
|
64
|
-
return collectionSize
|
|
65
|
-
? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
|
|
66
|
-
: ``;
|
|
67
|
-
}
|
|
68
|
-
get infoButtonTemplate() {
|
|
69
|
-
// ⓘ is an information icon
|
|
70
|
-
return this.showInfoButton
|
|
59
|
+
>`;
|
|
60
|
+
}
|
|
61
|
+
get getSizeTemplate() {
|
|
62
|
+
var _a, _b;
|
|
63
|
+
const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
|
|
64
|
+
return collectionSize
|
|
65
|
+
? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
|
|
66
|
+
: ``;
|
|
67
|
+
}
|
|
68
|
+
get infoButtonTemplate() {
|
|
69
|
+
// ⓘ is an information icon
|
|
70
|
+
return this.showInfoButton
|
|
71
71
|
? html `<button class="info-button" @click=${this.infoButtonPressed}>
|
|
72
72
|
ⓘ
|
|
73
73
|
<span class="sr-only">More info</span>
|
|
74
|
-
</button>`
|
|
75
|
-
: nothing;
|
|
76
|
-
}
|
|
77
|
-
infoButtonPressed(e) {
|
|
78
|
-
e.preventDefault();
|
|
79
|
-
const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
|
|
80
|
-
this.dispatchEvent(event);
|
|
81
|
-
}
|
|
82
|
-
static get styles() {
|
|
83
|
-
const tileBorderColor = css `var(--tileBorderColor, #555555)`;
|
|
84
|
-
const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
|
|
85
|
-
const whiteColor = css `#fff`;
|
|
86
|
-
return [
|
|
87
|
-
baseTileStyles,
|
|
74
|
+
</button>`
|
|
75
|
+
: nothing;
|
|
76
|
+
}
|
|
77
|
+
infoButtonPressed(e) {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
|
|
80
|
+
this.dispatchEvent(event);
|
|
81
|
+
}
|
|
82
|
+
static get styles() {
|
|
83
|
+
const tileBorderColor = css `var(--tileBorderColor, #555555)`;
|
|
84
|
+
const tileBackgroundColor = css `var(--tileBackgroundColor, #666666)`;
|
|
85
|
+
const whiteColor = css `#fff`;
|
|
86
|
+
return [
|
|
87
|
+
baseTileStyles,
|
|
88
88
|
css `
|
|
89
89
|
.container {
|
|
90
90
|
background-color: ${tileBackgroundColor};
|
|
@@ -127,21 +127,21 @@ let CollectionTile = class CollectionTile extends LitElement {
|
|
|
127
127
|
flex-direction: column;
|
|
128
128
|
margin-left: 10px;
|
|
129
129
|
}
|
|
130
|
-
`,
|
|
131
|
-
];
|
|
132
|
-
}
|
|
133
|
-
};
|
|
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
|
-
__decorate([
|
|
141
|
-
property({ type: Boolean })
|
|
142
|
-
], CollectionTile.prototype, "showInfoButton", void 0);
|
|
143
|
-
CollectionTile = __decorate([
|
|
144
|
-
customElement('collection-tile')
|
|
145
|
-
], CollectionTile);
|
|
146
|
-
export { CollectionTile };
|
|
130
|
+
`,
|
|
131
|
+
];
|
|
132
|
+
}
|
|
133
|
+
};
|
|
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
|
+
__decorate([
|
|
141
|
+
property({ type: Boolean })
|
|
142
|
+
], CollectionTile.prototype, "showInfoButton", void 0);
|
|
143
|
+
CollectionTile = __decorate([
|
|
144
|
+
customElement('collection-tile')
|
|
145
|
+
], CollectionTile);
|
|
146
|
+
export { CollectionTile };
|
|
147
147
|
//# sourceMappingURL=collection-tile.js.map
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
-
import type { SortParam } from '@internetarchive/search-service';
|
|
3
|
-
import type { TileModel } from '../../models';
|
|
4
|
-
import '../image-block';
|
|
5
|
-
import '../text-snippet-block';
|
|
6
|
-
import '../item-image';
|
|
7
|
-
import '../mediatype-icon';
|
|
8
|
-
import './tile-stats';
|
|
9
|
-
export declare class ItemTile extends LitElement {
|
|
10
|
-
baseImageUrl?: string;
|
|
11
|
-
loggedIn: boolean;
|
|
12
|
-
model?: TileModel;
|
|
13
|
-
sortParam?: SortParam;
|
|
14
|
-
showInfoButton: boolean;
|
|
15
|
-
render(): TemplateResult<1>;
|
|
16
|
-
/**
|
|
17
|
-
* Templates
|
|
18
|
-
*/
|
|
19
|
-
private get creatorTemplate();
|
|
20
|
-
private get imageBlockTemplate();
|
|
21
|
-
private get sortedDateInfoTemplate();
|
|
22
|
-
private get infoButtonTemplate();
|
|
23
|
-
private get textSnippetsTemplate();
|
|
24
|
-
private get volumeIssueTemplate();
|
|
25
|
-
private get doesSortedByDate();
|
|
26
|
-
private get hasSnippets();
|
|
27
|
-
private infoButtonPressed;
|
|
28
|
-
/**
|
|
29
|
-
* CSS
|
|
30
|
-
*/
|
|
31
|
-
static get styles(): CSSResultGroup;
|
|
32
|
-
}
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
+
import type { SortParam } from '@internetarchive/search-service';
|
|
3
|
+
import type { TileModel } from '../../models';
|
|
4
|
+
import '../image-block';
|
|
5
|
+
import '../text-snippet-block';
|
|
6
|
+
import '../item-image';
|
|
7
|
+
import '../mediatype-icon';
|
|
8
|
+
import './tile-stats';
|
|
9
|
+
export declare class ItemTile extends LitElement {
|
|
10
|
+
baseImageUrl?: string;
|
|
11
|
+
loggedIn: boolean;
|
|
12
|
+
model?: TileModel;
|
|
13
|
+
sortParam?: SortParam;
|
|
14
|
+
showInfoButton: boolean;
|
|
15
|
+
render(): TemplateResult<1>;
|
|
16
|
+
/**
|
|
17
|
+
* Templates
|
|
18
|
+
*/
|
|
19
|
+
private get creatorTemplate();
|
|
20
|
+
private get imageBlockTemplate();
|
|
21
|
+
private get sortedDateInfoTemplate();
|
|
22
|
+
private get infoButtonTemplate();
|
|
23
|
+
private get textSnippetsTemplate();
|
|
24
|
+
private get volumeIssueTemplate();
|
|
25
|
+
private get doesSortedByDate();
|
|
26
|
+
private get hasSnippets();
|
|
27
|
+
private infoButtonPressed;
|
|
28
|
+
/**
|
|
29
|
+
* CSS
|
|
30
|
+
*/
|
|
31
|
+
static get styles(): CSSResultGroup;
|
|
32
|
+
}
|
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
/* eslint-disable import/no-duplicates */
|
|
3
|
-
import { css, html, LitElement, nothing, } from 'lit';
|
|
4
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
|
-
import { formatDate } from '../../utils/format-date';
|
|
7
|
-
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
8
|
-
import '../image-block';
|
|
9
|
-
import '../text-snippet-block';
|
|
10
|
-
import '../item-image';
|
|
11
|
-
import '../mediatype-icon';
|
|
12
|
-
import './tile-stats';
|
|
13
|
-
let ItemTile = class ItemTile extends LitElement {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.loggedIn = false;
|
|
17
|
-
this.showInfoButton = false;
|
|
18
|
-
}
|
|
19
|
-
render() {
|
|
20
|
-
var _a, _b, _c, _d, _e
|
|
21
|
-
const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
|
|
22
|
-
const viewCount = ((_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.field) === 'week'
|
|
23
|
-
? (_c = this.model) === null || _c === void 0 ? void 0 : _c.weeklyViewCount // weekly views
|
|
24
|
-
: (_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount; // all-time views
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
/* eslint-disable import/no-duplicates */
|
|
3
|
+
import { css, html, LitElement, nothing, } from 'lit';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
|
+
import { formatDate } from '../../utils/format-date';
|
|
7
|
+
import { baseTileStyles } from './styles/tile-grid-shared-styles';
|
|
8
|
+
import '../image-block';
|
|
9
|
+
import '../text-snippet-block';
|
|
10
|
+
import '../item-image';
|
|
11
|
+
import '../mediatype-icon';
|
|
12
|
+
import './tile-stats';
|
|
13
|
+
let ItemTile = class ItemTile extends LitElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.loggedIn = false;
|
|
17
|
+
this.showInfoButton = false;
|
|
18
|
+
}
|
|
19
|
+
render() {
|
|
20
|
+
var _a, _b, _c, _d, _e;
|
|
21
|
+
const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
|
|
25
22
|
return html `
|
|
26
23
|
<div class="container">
|
|
27
24
|
${this.infoButtonTemplate}
|
|
@@ -36,39 +33,39 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
36
33
|
</div>
|
|
37
34
|
|
|
38
35
|
${this.volumeIssueTemplate}
|
|
39
|
-
${this.doesSortedByDate
|
|
40
|
-
? this.sortedDateInfoTemplate
|
|
36
|
+
${this.doesSortedByDate
|
|
37
|
+
? this.sortedDateInfoTemplate
|
|
41
38
|
: this.creatorTemplate}
|
|
42
39
|
${this.textSnippetsTemplate}
|
|
43
40
|
</div>
|
|
44
41
|
|
|
45
42
|
<tile-stats
|
|
46
|
-
.mediatype=${(
|
|
47
|
-
.viewCount=${viewCount}
|
|
48
|
-
.favCount=${(
|
|
49
|
-
.commentCount=${(
|
|
43
|
+
.mediatype=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}
|
|
44
|
+
.viewCount=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount}
|
|
45
|
+
.favCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.favCount}
|
|
46
|
+
.commentCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.commentCount}
|
|
50
47
|
>
|
|
51
48
|
</tile-stats>
|
|
52
49
|
</div>
|
|
53
50
|
</div>
|
|
54
|
-
`;
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Templates
|
|
58
|
-
*/
|
|
59
|
-
get creatorTemplate() {
|
|
60
|
-
var _a, _b, _c;
|
|
61
|
-
if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator))
|
|
62
|
-
return nothing;
|
|
51
|
+
`;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Templates
|
|
55
|
+
*/
|
|
56
|
+
get creatorTemplate() {
|
|
57
|
+
var _a, _b, _c;
|
|
58
|
+
if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator))
|
|
59
|
+
return nothing;
|
|
63
60
|
return html `
|
|
64
61
|
<div class="created-by">
|
|
65
62
|
<span class="truncated" title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator)}>
|
|
66
63
|
by ${(_c = this.model) === null || _c === void 0 ? void 0 : _c.creator}
|
|
67
64
|
</span>
|
|
68
65
|
</div>
|
|
69
|
-
`;
|
|
70
|
-
}
|
|
71
|
-
get imageBlockTemplate() {
|
|
66
|
+
`;
|
|
67
|
+
}
|
|
68
|
+
get imageBlockTemplate() {
|
|
72
69
|
return html `
|
|
73
70
|
<image-block
|
|
74
71
|
.model=${this.model}
|
|
@@ -79,88 +76,88 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
79
76
|
.viewSize=${'grid'}
|
|
80
77
|
>
|
|
81
78
|
</image-block>
|
|
82
|
-
`;
|
|
83
|
-
}
|
|
84
|
-
get sortedDateInfoTemplate() {
|
|
85
|
-
var _a, _b, _c, _d, _e;
|
|
86
|
-
let sortedValue;
|
|
87
|
-
switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
|
|
88
|
-
case 'date':
|
|
89
|
-
sortedValue = { field: 'published', value: (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished };
|
|
90
|
-
break;
|
|
91
|
-
case 'reviewdate':
|
|
92
|
-
sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
|
|
93
|
-
break;
|
|
94
|
-
case 'addeddate':
|
|
95
|
-
sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
|
|
96
|
-
break;
|
|
97
|
-
case 'publicdate':
|
|
98
|
-
sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
|
|
99
|
-
break;
|
|
100
|
-
default:
|
|
101
|
-
break;
|
|
102
|
-
}
|
|
103
|
-
if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
|
|
104
|
-
return nothing;
|
|
105
|
-
}
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
get sortedDateInfoTemplate() {
|
|
82
|
+
var _a, _b, _c, _d, _e;
|
|
83
|
+
let sortedValue;
|
|
84
|
+
switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
|
|
85
|
+
case 'date':
|
|
86
|
+
sortedValue = { field: 'published', value: (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished };
|
|
87
|
+
break;
|
|
88
|
+
case 'reviewdate':
|
|
89
|
+
sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
|
|
90
|
+
break;
|
|
91
|
+
case 'addeddate':
|
|
92
|
+
sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
|
|
93
|
+
break;
|
|
94
|
+
case 'publicdate':
|
|
95
|
+
sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
|
|
96
|
+
break;
|
|
97
|
+
default:
|
|
98
|
+
break;
|
|
99
|
+
}
|
|
100
|
+
if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
|
|
101
|
+
return nothing;
|
|
102
|
+
}
|
|
106
103
|
return html `
|
|
107
104
|
<div class="date-sorted-by truncated">
|
|
108
105
|
<span>
|
|
109
106
|
${sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.field} ${formatDate(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value, 'long')}
|
|
110
107
|
</span>
|
|
111
108
|
</div>
|
|
112
|
-
`;
|
|
113
|
-
}
|
|
114
|
-
get infoButtonTemplate() {
|
|
115
|
-
// ⓘ is an information icon
|
|
116
|
-
return this.showInfoButton
|
|
109
|
+
`;
|
|
110
|
+
}
|
|
111
|
+
get infoButtonTemplate() {
|
|
112
|
+
// ⓘ is an information icon
|
|
113
|
+
return this.showInfoButton
|
|
117
114
|
? html `<button class="info-button" @click=${this.infoButtonPressed}>
|
|
118
115
|
ⓘ
|
|
119
116
|
<span class="sr-only">More info</span>
|
|
120
|
-
</button>`
|
|
121
|
-
: nothing;
|
|
122
|
-
}
|
|
123
|
-
get textSnippetsTemplate() {
|
|
124
|
-
var _a;
|
|
125
|
-
if (!this.hasSnippets)
|
|
126
|
-
return nothing;
|
|
117
|
+
</button>`
|
|
118
|
+
: nothing;
|
|
119
|
+
}
|
|
120
|
+
get textSnippetsTemplate() {
|
|
121
|
+
var _a;
|
|
122
|
+
if (!this.hasSnippets)
|
|
123
|
+
return nothing;
|
|
127
124
|
return html `
|
|
128
125
|
<text-snippet-block viewsize="grid" .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}>
|
|
129
126
|
</text-snippet-block>
|
|
130
|
-
`;
|
|
131
|
-
}
|
|
132
|
-
get volumeIssueTemplate() {
|
|
133
|
-
var _a, _b, _c, _d;
|
|
134
|
-
if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
|
|
135
|
-
return nothing;
|
|
127
|
+
`;
|
|
128
|
+
}
|
|
129
|
+
get volumeIssueTemplate() {
|
|
130
|
+
var _a, _b, _c, _d;
|
|
131
|
+
if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
|
|
132
|
+
return nothing;
|
|
136
133
|
return html `
|
|
137
134
|
<div class="volume-issue">
|
|
138
135
|
<span class="truncated" title="volume|issue">
|
|
139
136
|
Volume ${(_c = this.model) === null || _c === void 0 ? void 0 : _c.volume}, Issue ${(_d = this.model) === null || _d === void 0 ? void 0 : _d.issue}
|
|
140
137
|
</span>
|
|
141
138
|
</div>
|
|
142
|
-
`;
|
|
143
|
-
}
|
|
144
|
-
get doesSortedByDate() {
|
|
145
|
-
var _a;
|
|
146
|
-
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
|
|
147
|
-
}
|
|
148
|
-
get hasSnippets() {
|
|
149
|
-
var _a, _b;
|
|
150
|
-
return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
|
|
151
|
-
}
|
|
152
|
-
infoButtonPressed(e) {
|
|
153
|
-
e.preventDefault();
|
|
154
|
-
const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
|
|
155
|
-
this.dispatchEvent(event);
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* CSS
|
|
159
|
-
*/
|
|
160
|
-
static get styles() {
|
|
161
|
-
const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
|
|
162
|
-
return [
|
|
163
|
-
baseTileStyles,
|
|
139
|
+
`;
|
|
140
|
+
}
|
|
141
|
+
get doesSortedByDate() {
|
|
142
|
+
var _a;
|
|
143
|
+
return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
|
|
144
|
+
}
|
|
145
|
+
get hasSnippets() {
|
|
146
|
+
var _a, _b;
|
|
147
|
+
return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
|
|
148
|
+
}
|
|
149
|
+
infoButtonPressed(e) {
|
|
150
|
+
e.preventDefault();
|
|
151
|
+
const event = new CustomEvent('infoButtonPressed', { detail: { x: e.clientX, y: e.clientY } });
|
|
152
|
+
this.dispatchEvent(event);
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* CSS
|
|
156
|
+
*/
|
|
157
|
+
static get styles() {
|
|
158
|
+
const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
|
|
159
|
+
return [
|
|
160
|
+
baseTileStyles,
|
|
164
161
|
css `
|
|
165
162
|
.container {
|
|
166
163
|
border: 1px solid ${tileBorderColor};
|
|
@@ -184,27 +181,27 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
184
181
|
-webkit-touch-callout: default;
|
|
185
182
|
}
|
|
186
183
|
}
|
|
187
|
-
`,
|
|
188
|
-
];
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
|
-
__decorate([
|
|
192
|
-
property({ type: String })
|
|
193
|
-
], ItemTile.prototype, "baseImageUrl", void 0);
|
|
194
|
-
__decorate([
|
|
195
|
-
property({ type: Boolean })
|
|
196
|
-
], ItemTile.prototype, "loggedIn", void 0);
|
|
197
|
-
__decorate([
|
|
198
|
-
property({ type: Object })
|
|
199
|
-
], ItemTile.prototype, "model", void 0);
|
|
200
|
-
__decorate([
|
|
201
|
-
property({ type: Object })
|
|
202
|
-
], ItemTile.prototype, "sortParam", void 0);
|
|
203
|
-
__decorate([
|
|
204
|
-
property({ type: Boolean })
|
|
205
|
-
], ItemTile.prototype, "showInfoButton", void 0);
|
|
206
|
-
ItemTile = __decorate([
|
|
207
|
-
customElement('item-tile')
|
|
208
|
-
], ItemTile);
|
|
209
|
-
export { ItemTile };
|
|
184
|
+
`,
|
|
185
|
+
];
|
|
186
|
+
}
|
|
187
|
+
};
|
|
188
|
+
__decorate([
|
|
189
|
+
property({ type: String })
|
|
190
|
+
], ItemTile.prototype, "baseImageUrl", void 0);
|
|
191
|
+
__decorate([
|
|
192
|
+
property({ type: Boolean })
|
|
193
|
+
], ItemTile.prototype, "loggedIn", void 0);
|
|
194
|
+
__decorate([
|
|
195
|
+
property({ type: Object })
|
|
196
|
+
], ItemTile.prototype, "model", void 0);
|
|
197
|
+
__decorate([
|
|
198
|
+
property({ type: Object })
|
|
199
|
+
], ItemTile.prototype, "sortParam", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: Boolean })
|
|
202
|
+
], ItemTile.prototype, "showInfoButton", void 0);
|
|
203
|
+
ItemTile = __decorate([
|
|
204
|
+
customElement('item-tile')
|
|
205
|
+
], ItemTile);
|
|
206
|
+
export { ItemTile };
|
|
210
207
|
//# sourceMappingURL=item-tile.js.map
|
|
@@ -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 { formatDate } from '../../utils/format-date';\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 =\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 <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h1>\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 .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 switch (this.sortParam?.field) {\n case 'date':\n sortedValue = { field: 'published', value: this.model?.datePublished };\n break;\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, 'long')}\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 {\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 { formatDate } from '../../utils/format-date';\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\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 <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n ${itemTitle}\n </h1>\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=${this.model?.viewCount}\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 switch (this.sortParam?.field) {\n case 'date':\n sortedValue = { field: 'published', value: this.model?.datePublished };\n break;\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, 'long')}\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 +1 @@
|
|
|
1
|
-
export declare const baseTileStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const baseTileStyles: import("lit").CSSResult;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
/**
|
|
3
|
-
* Base tile styles
|
|
4
|
-
*/
|
|
5
|
-
const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
|
|
6
|
-
const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Base tile styles
|
|
4
|
+
*/
|
|
5
|
+
const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
|
|
6
|
+
const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
|
|
7
7
|
export const baseTileStyles = css `
|
|
8
8
|
.container {
|
|
9
9
|
background-color: ${tileBackgroundColor};
|
|
@@ -133,5 +133,5 @@ export const baseTileStyles = css `
|
|
|
133
133
|
-webkit-clip-path: inset(50%) !important;
|
|
134
134
|
clip-path: inset(50%) !important;
|
|
135
135
|
}
|
|
136
|
-
`;
|
|
136
|
+
`;
|
|
137
137
|
//# sourceMappingURL=tile-grid-shared-styles.js.map
|
|
@@ -1,10 +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
|
-
}
|
|
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
|
+
}
|