@internetarchive/collection-browser 0.1.6 → 0.1.7
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.
|
@@ -19,7 +19,7 @@ export declare class ItemImage extends LitElement {
|
|
|
19
19
|
private get imageBoxClass();
|
|
20
20
|
private get boxWaveformClass();
|
|
21
21
|
private get itemImageWaveformClass();
|
|
22
|
-
private get
|
|
23
|
-
private
|
|
22
|
+
private get hashBasedGradient();
|
|
23
|
+
private hashStrToInt;
|
|
24
24
|
static get styles(): CSSResultGroup;
|
|
25
25
|
}
|
|
@@ -79,20 +79,20 @@ let ItemImage = class ItemImage extends LitElement {
|
|
|
79
79
|
return this.isDeemphasize ? 'item-image-box' : undefined;
|
|
80
80
|
}
|
|
81
81
|
get boxWaveformClass() {
|
|
82
|
-
return `item-audio${this.isWaveform ? ` ${this.
|
|
82
|
+
return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;
|
|
83
83
|
}
|
|
84
84
|
get itemImageWaveformClass() {
|
|
85
85
|
return `item-image${this.isWaveform ? ' waveform' : ''}`;
|
|
86
86
|
}
|
|
87
|
-
get
|
|
87
|
+
get hashBasedGradient() {
|
|
88
88
|
var _a;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
gradientInt = this.generateHashCode(this.model.identifier) % 6;
|
|
89
|
+
if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
|
|
90
|
+
return 'grad1';
|
|
92
91
|
}
|
|
93
|
-
|
|
92
|
+
const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
|
|
93
|
+
return `grad${gradient}`;
|
|
94
94
|
}
|
|
95
|
-
|
|
95
|
+
hashStrToInt(str) {
|
|
96
96
|
return str
|
|
97
97
|
.split('')
|
|
98
98
|
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
@@ -154,6 +154,15 @@ let ItemImage = class ItemImage extends LitElement {
|
|
|
154
154
|
text-align: center;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
+
.grad0 {
|
|
158
|
+
background: linear-gradient(
|
|
159
|
+
hsl(340, 80%, 55%),
|
|
160
|
+
hsl(0, 80%, 33%) 35%,
|
|
161
|
+
hsl(0, 80%, 22%) 70%,
|
|
162
|
+
hsl(0, 0%, 0%)
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
|
|
157
166
|
.grad1 {
|
|
158
167
|
background: linear-gradient(
|
|
159
168
|
hsl(300, 80%, 55%),
|
|
@@ -198,15 +207,6 @@ let ItemImage = class ItemImage extends LitElement {
|
|
|
198
207
|
hsl(0, 0%, 0%)
|
|
199
208
|
);
|
|
200
209
|
}
|
|
201
|
-
|
|
202
|
-
.grad6 {
|
|
203
|
-
background: linear-gradient(
|
|
204
|
-
hsl(340, 80%, 55%),
|
|
205
|
-
hsl(0, 80%, 33%) 35%,
|
|
206
|
-
hsl(0, 80%, 22%) 70%,
|
|
207
|
-
hsl(0, 0%, 0%)
|
|
208
|
-
);
|
|
209
|
-
}
|
|
210
210
|
`;
|
|
211
211
|
}
|
|
212
212
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,OAAO,EAEP,UAAU,GACX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAK+B,eAAU,GAAG,KAAK,CAAC;QAE/B,kBAAa,GAAY,KAAK,CAAC;QAE/B,eAAU,GAAY,KAAK,CAAC;IAsN/C,CAAC;IAlNW,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAEO,aAAa;;QACnB,IAAI,CAAC,aAAa;YAChB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,mCAAI,KAAK,CAAC;IAC7D,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;mBACI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;UACtC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,uBAAuB;UAC9B,IAAI,CAAC,kBAAkB;;KAE5B,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;;QAClB,OAAO,GAAG,IAAI,CAAC,YAAY,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;IACvE,CAAC;IAED,YAAY;IACZ,IAAY,uBAAuB;QACjC,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;sCACO,IAAI,CAAC,QAAQ;;KAE9C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,gBAAgB;;kBAEtB,IAAI,CAAC,sBAAsB;iBAC5B,IAAI,CAAC,QAAQ;iBACb,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC;kBAChC,IAAI,CAAC,oBAAoB;;;KAGtC,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,MAAM,WAAW,GACf,IAAI,CAAC,iBAAiB,CAAC,YAAY;YACnC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC;QACvC,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED,UAAU;IACV,IAAY,UAAU;QACpB,OAAO,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACxE,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n CSSResultGroup,\n html,\n nothing,\n PropertyValues,\n LitElement,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../models';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseImageUrl?: string;\n\n @property({ type: Boolean }) isListTile = false;\n\n @state() private isDeemphasize: boolean = false;\n\n @state() private isWaveform: boolean = false;\n\n @query('.item-image') private itemImageWaveform!: HTMLImageElement;\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.setDeemphsize();\n }\n }\n\n private setDeemphsize() {\n this.isDeemphasize =\n this.model?.collections.includes('deemphasize') ?? false;\n }\n\n render() {\n return html`\n <div class=${ifDefined(this.imageBoxClass)}>\n ${this.model?.mediatype === 'audio'\n ? this.waveformTemplate\n : this.backgroundImageTemplate}\n ${this.tileActionTemplate}\n </div>\n `;\n }\n\n private get imageSrc() {\n return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;\n }\n\n // Templates\n private get backgroundImageTemplate() {\n return html`\n <div\n class=${this.imageClass}\n style=\"background-image:url(${this.imageSrc})\"\n ></div>\n `;\n }\n\n private get waveformTemplate() {\n return html`\n <div class=${this.boxWaveformClass}>\n <img\n class=${this.itemImageWaveformClass}\n src=\"${this.imageSrc}\"\n alt=\"${ifDefined(this.model?.identifier)}\"\n @load=${this.onLoadItemImageCheck}\n />\n </div>\n `;\n }\n\n private get tileActionTemplate() {\n if (!this.isDeemphasize) {\n return nothing;\n }\n return html`\n <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n `;\n }\n\n private onLoadItemImageCheck() {\n const aspectRatio =\n this.itemImageWaveform.naturalWidth /\n this.itemImageWaveform.naturalHeight;\n if (aspectRatio === 4) {\n this.isWaveform = true;\n }\n }\n\n // Classes\n private get imageClass() {\n return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;\n }\n\n private get imageBoxClass() {\n return this.isDeemphasize ? 'item-image-box' : undefined;\n }\n\n private get boxWaveformClass() {\n return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;\n }\n\n private get itemImageWaveformClass() {\n return `item-image${this.isWaveform ? ' waveform' : ''}`;\n }\n\n private get hashBasedGradient() {\n if (!this.model?.identifier) {\n return 'grad1';\n }\n const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n return `grad${gradient}`;\n }\n\n private hashStrToInt(str: string): number {\n return str\n .split('')\n .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .item-image-box {\n width: 16rem;\n height: 16rem;\n overflow: hidden;\n position: relative;\n box-shadow: 1px 1px 2px 0px;\n display: flex;\n }\n\n .item-image {\n width: 16rem;\n height: 16rem;\n object-fit: contain;\n background-repeat: no-repeat;\n background-position: center center;\n position: relative;\n -webkit-appearance: none;\n overflow: visible;\n }\n\n .waveform {\n mix-blend-mode: screen;\n }\n\n .default {\n background-size: contain;\n filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n }\n\n .deemphasize {\n background-size: cover;\n filter: blur(15px);\n z-index: 1;\n }\n\n .tile-action {\n border: 1px solid currentColor;\n border-radius: 1px;\n padding: 5px;\n font-weight: 500;\n width: auto;\n position: absolute;\n z-index: 2;\n display: flex;\n top: 5.5rem;\n }\n\n .no-preview {\n background-color: #fffecb;\n color: #2c2c2c;\n font-size: 1.4rem;\n line-height: 2rem;\n text-align: center;\n }\n\n .grad0 {\n background: linear-gradient(\n hsl(340, 80%, 55%),\n hsl(0, 80%, 33%) 35%,\n hsl(0, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad1 {\n background: linear-gradient(\n hsl(300, 80%, 55%),\n hsl(330, 80%, 33%) 35%,\n hsl(330, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad2 {\n background: linear-gradient(\n hsl(200, 80%, 55%),\n hsl(230, 80%, 33%) 35%,\n hsl(230, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad3 {\n background: linear-gradient(\n hsl(160, 80%, 55%),\n hsl(190, 80%, 33%) 35%,\n hsl(190, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad4 {\n background: linear-gradient(\n hsl(250, 80%, 55%),\n hsl(280, 80%, 33%) 35%,\n hsl(280, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n\n .grad5 {\n background: linear-gradient(\n hsl(280, 80%, 55%),\n hsl(310, 80%, 33%) 35%,\n hsl(310, 80%, 22%) 70%,\n hsl(0, 0%, 0%)\n );\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
package/src/tiles/item-image.ts
CHANGED
|
@@ -102,22 +102,22 @@ export class ItemImage extends LitElement {
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
private get boxWaveformClass() {
|
|
105
|
-
return `item-audio${this.isWaveform ? ` ${this.
|
|
105
|
+
return `item-audio${this.isWaveform ? ` ${this.hashBasedGradient}` : ''}`;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
private get itemImageWaveformClass() {
|
|
109
109
|
return `item-image${this.isWaveform ? ' waveform' : ''}`;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
private get
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
gradientInt = this.generateHashCode(this.model.identifier) % 6;
|
|
112
|
+
private get hashBasedGradient() {
|
|
113
|
+
if (!this.model?.identifier) {
|
|
114
|
+
return 'grad1';
|
|
116
115
|
}
|
|
117
|
-
|
|
116
|
+
const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
|
|
117
|
+
return `grad${gradient}`;
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
-
private
|
|
120
|
+
private hashStrToInt(str: string): number {
|
|
121
121
|
return str
|
|
122
122
|
.split('')
|
|
123
123
|
.reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);
|
|
@@ -180,6 +180,15 @@ export class ItemImage extends LitElement {
|
|
|
180
180
|
text-align: center;
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
+
.grad0 {
|
|
184
|
+
background: linear-gradient(
|
|
185
|
+
hsl(340, 80%, 55%),
|
|
186
|
+
hsl(0, 80%, 33%) 35%,
|
|
187
|
+
hsl(0, 80%, 22%) 70%,
|
|
188
|
+
hsl(0, 0%, 0%)
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
|
|
183
192
|
.grad1 {
|
|
184
193
|
background: linear-gradient(
|
|
185
194
|
hsl(300, 80%, 55%),
|
|
@@ -224,15 +233,6 @@ export class ItemImage extends LitElement {
|
|
|
224
233
|
hsl(0, 0%, 0%)
|
|
225
234
|
);
|
|
226
235
|
}
|
|
227
|
-
|
|
228
|
-
.grad6 {
|
|
229
|
-
background: linear-gradient(
|
|
230
|
-
hsl(340, 80%, 55%),
|
|
231
|
-
hsl(0, 80%, 33%) 35%,
|
|
232
|
-
hsl(0, 80%, 22%) 70%,
|
|
233
|
-
hsl(0, 0%, 0%)
|
|
234
|
-
);
|
|
235
|
-
}
|
|
236
236
|
`;
|
|
237
237
|
}
|
|
238
238
|
}
|