@internetarchive/collection-browser 4.3.2-alpha-webdev7939.0 → 4.3.2-alpha-webdev7939.2
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/app-root.js +676 -672
- package/dist/src/app-root.js.map +1 -1
- package/dist/src/collection-browser.d.ts +23 -0
- package/dist/src/collection-browser.js +74 -6
- package/dist/src/collection-browser.js.map +1 -1
- package/package.json +2 -2
- package/src/app-root.ts +1254 -1251
- package/src/collection-browser.ts +97 -5
package/dist/src/app-root.js
CHANGED
|
@@ -57,6 +57,10 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
57
57
|
if (page > 1) {
|
|
58
58
|
this.collectionBrowser.goToPage(page);
|
|
59
59
|
}
|
|
60
|
+
else {
|
|
61
|
+
// Ensure we reset the initial page
|
|
62
|
+
this.collectionBrowser.initialPageNumber = 1;
|
|
63
|
+
}
|
|
60
64
|
}
|
|
61
65
|
changePagePressed(e) {
|
|
62
66
|
e.preventDefault();
|
|
@@ -79,362 +83,362 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
79
83
|
return searchParams.get('hide-dev-tools') ? 'hidden' : '';
|
|
80
84
|
}
|
|
81
85
|
render() {
|
|
82
|
-
return html `
|
|
83
|
-
<div class="dev-tool-container">
|
|
84
|
-
<div id="dev-tools" class=${this.getClass}>
|
|
85
|
-
<div id="search-and-page-inputs">
|
|
86
|
-
<form @submit=${this.searchPressed}>
|
|
87
|
-
<label for="base-query-field"> Query: </label>
|
|
88
|
-
<input
|
|
89
|
-
type="text"
|
|
90
|
-
id="base-query-field"
|
|
91
|
-
.value=${this.searchQuery ?? ''}
|
|
92
|
-
/>
|
|
93
|
-
<input type="submit" value="Search" />
|
|
94
|
-
</form>
|
|
95
|
-
<form @submit=${this.changePagePressed}>
|
|
96
|
-
<label for="page-number-input"> Page: </label>
|
|
97
|
-
<input type="number" value="1" id="page-number-input" />
|
|
98
|
-
<input type="submit" value="Go" />
|
|
99
|
-
</form>
|
|
100
|
-
</div>
|
|
101
|
-
<div>
|
|
102
|
-
<form @submit=${this.collectionChanged}>
|
|
103
|
-
<label for="base-collection-field"> Within collection: </label>
|
|
104
|
-
<input
|
|
105
|
-
type="text"
|
|
106
|
-
id="base-collection-field"
|
|
107
|
-
.value=${this.withinCollection ?? ''}
|
|
108
|
-
/>
|
|
109
|
-
<input type="submit" value="Search" />
|
|
110
|
-
</form>
|
|
111
|
-
</div>
|
|
112
|
-
|
|
113
|
-
<div id="search-types">
|
|
114
|
-
Search type:
|
|
115
|
-
<span class="search-type">
|
|
116
|
-
<input
|
|
117
|
-
type="radio"
|
|
118
|
-
id="default-search"
|
|
119
|
-
name="search-type"
|
|
120
|
-
value="default"
|
|
121
|
-
.checked=${this.searchType === SearchType.DEFAULT}
|
|
122
|
-
@click=${this.searchTypeSelected}
|
|
123
|
-
/>
|
|
124
|
-
<label for="default-search">Default</label>
|
|
125
|
-
</span>
|
|
126
|
-
<span class="search-type">
|
|
127
|
-
<input
|
|
128
|
-
type="radio"
|
|
129
|
-
id="metadata-search"
|
|
130
|
-
name="search-type"
|
|
131
|
-
value="metadata"
|
|
132
|
-
.checked=${this.searchType === SearchType.METADATA}
|
|
133
|
-
@click=${this.searchTypeSelected}
|
|
134
|
-
/>
|
|
135
|
-
<label for="metadata-search">Metadata</label>
|
|
136
|
-
</span>
|
|
137
|
-
<span class="search-type">
|
|
138
|
-
<input
|
|
139
|
-
type="radio"
|
|
140
|
-
id="fulltext-search"
|
|
141
|
-
name="search-type"
|
|
142
|
-
value="fulltext"
|
|
143
|
-
.checked=${this.searchType === SearchType.FULLTEXT}
|
|
144
|
-
@click=${this.searchTypeSelected}
|
|
145
|
-
/>
|
|
146
|
-
<label for="fulltext-search">Full text</label>
|
|
147
|
-
</span>
|
|
148
|
-
<span class="search-type">
|
|
149
|
-
<input
|
|
150
|
-
type="radio"
|
|
151
|
-
id="tv-search"
|
|
152
|
-
name="search-type"
|
|
153
|
-
value="tv"
|
|
154
|
-
.checked=${this.searchType === SearchType.TV}
|
|
155
|
-
@click=${this.searchTypeSelected}
|
|
156
|
-
/>
|
|
157
|
-
<label for="tv-search">TV</label>
|
|
158
|
-
</span>
|
|
159
|
-
<span class="search-type">
|
|
160
|
-
<input
|
|
161
|
-
type="radio"
|
|
162
|
-
id="radio-search"
|
|
163
|
-
name="search-type"
|
|
164
|
-
value="radio"
|
|
165
|
-
.checked=${this.searchType === SearchType.RADIO}
|
|
166
|
-
@click=${this.searchTypeSelected}
|
|
167
|
-
/>
|
|
168
|
-
<label for="radio-search">Radio</label>
|
|
169
|
-
</span>
|
|
170
|
-
</div>
|
|
171
|
-
|
|
172
|
-
<div id="toggle-controls">
|
|
173
|
-
<button
|
|
86
|
+
return html `
|
|
87
|
+
<div class="dev-tool-container">
|
|
88
|
+
<div id="dev-tools" class=${this.getClass}>
|
|
89
|
+
<div id="search-and-page-inputs">
|
|
90
|
+
<form @submit=${this.searchPressed}>
|
|
91
|
+
<label for="base-query-field"> Query: </label>
|
|
92
|
+
<input
|
|
93
|
+
type="text"
|
|
94
|
+
id="base-query-field"
|
|
95
|
+
.value=${this.searchQuery ?? ''}
|
|
96
|
+
/>
|
|
97
|
+
<input type="submit" value="Search" />
|
|
98
|
+
</form>
|
|
99
|
+
<form @submit=${this.changePagePressed}>
|
|
100
|
+
<label for="page-number-input"> Page: </label>
|
|
101
|
+
<input type="number" value="1" id="page-number-input" />
|
|
102
|
+
<input type="submit" value="Go" />
|
|
103
|
+
</form>
|
|
104
|
+
</div>
|
|
105
|
+
<div>
|
|
106
|
+
<form @submit=${this.collectionChanged}>
|
|
107
|
+
<label for="base-collection-field"> Within collection: </label>
|
|
108
|
+
<input
|
|
109
|
+
type="text"
|
|
110
|
+
id="base-collection-field"
|
|
111
|
+
.value=${this.withinCollection ?? ''}
|
|
112
|
+
/>
|
|
113
|
+
<input type="submit" value="Search" />
|
|
114
|
+
</form>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div id="search-types">
|
|
118
|
+
Search type:
|
|
119
|
+
<span class="search-type">
|
|
120
|
+
<input
|
|
121
|
+
type="radio"
|
|
122
|
+
id="default-search"
|
|
123
|
+
name="search-type"
|
|
124
|
+
value="default"
|
|
125
|
+
.checked=${this.searchType === SearchType.DEFAULT}
|
|
126
|
+
@click=${this.searchTypeSelected}
|
|
127
|
+
/>
|
|
128
|
+
<label for="default-search">Default</label>
|
|
129
|
+
</span>
|
|
130
|
+
<span class="search-type">
|
|
131
|
+
<input
|
|
132
|
+
type="radio"
|
|
133
|
+
id="metadata-search"
|
|
134
|
+
name="search-type"
|
|
135
|
+
value="metadata"
|
|
136
|
+
.checked=${this.searchType === SearchType.METADATA}
|
|
137
|
+
@click=${this.searchTypeSelected}
|
|
138
|
+
/>
|
|
139
|
+
<label for="metadata-search">Metadata</label>
|
|
140
|
+
</span>
|
|
141
|
+
<span class="search-type">
|
|
142
|
+
<input
|
|
143
|
+
type="radio"
|
|
144
|
+
id="fulltext-search"
|
|
145
|
+
name="search-type"
|
|
146
|
+
value="fulltext"
|
|
147
|
+
.checked=${this.searchType === SearchType.FULLTEXT}
|
|
148
|
+
@click=${this.searchTypeSelected}
|
|
149
|
+
/>
|
|
150
|
+
<label for="fulltext-search">Full text</label>
|
|
151
|
+
</span>
|
|
152
|
+
<span class="search-type">
|
|
153
|
+
<input
|
|
154
|
+
type="radio"
|
|
155
|
+
id="tv-search"
|
|
156
|
+
name="search-type"
|
|
157
|
+
value="tv"
|
|
158
|
+
.checked=${this.searchType === SearchType.TV}
|
|
159
|
+
@click=${this.searchTypeSelected}
|
|
160
|
+
/>
|
|
161
|
+
<label for="tv-search">TV</label>
|
|
162
|
+
</span>
|
|
163
|
+
<span class="search-type">
|
|
164
|
+
<input
|
|
165
|
+
type="radio"
|
|
166
|
+
id="radio-search"
|
|
167
|
+
name="search-type"
|
|
168
|
+
value="radio"
|
|
169
|
+
.checked=${this.searchType === SearchType.RADIO}
|
|
170
|
+
@click=${this.searchTypeSelected}
|
|
171
|
+
/>
|
|
172
|
+
<label for="radio-search">Radio</label>
|
|
173
|
+
</span>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<div id="toggle-controls">
|
|
177
|
+
<button
|
|
174
178
|
@click=${() => {
|
|
175
179
|
const details = this.shadowRoot?.getElementById('cell-size-control');
|
|
176
180
|
details?.classList.toggle('hidden');
|
|
177
181
|
const rowGapControls = this.shadowRoot?.getElementById('cell-gap-control');
|
|
178
182
|
rowGapControls?.classList.toggle('hidden');
|
|
179
|
-
}}
|
|
180
|
-
>
|
|
181
|
-
Toggle Cell Controls
|
|
182
|
-
</button>
|
|
183
|
-
<button
|
|
183
|
+
}}
|
|
184
|
+
>
|
|
185
|
+
Toggle Cell Controls
|
|
186
|
+
</button>
|
|
187
|
+
<button
|
|
184
188
|
@click=${() => {
|
|
185
189
|
const details = this.shadowRoot?.getElementById('latest-event-details');
|
|
186
190
|
details?.classList.toggle('hidden');
|
|
187
|
-
}}
|
|
188
|
-
>
|
|
189
|
-
Last Event Captured
|
|
190
|
-
</button>
|
|
191
|
-
</div>
|
|
192
|
-
|
|
193
|
-
<div id="last-event">
|
|
194
|
-
<pre id="latest-event-details" class="hidden">
|
|
195
|
-
${JSON.stringify(this.latestAction, null, 2)}
|
|
196
|
-
</pre
|
|
197
|
-
>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<fieldset class="cell-controls">
|
|
201
|
-
<legend>Cell Controls</legend>
|
|
202
|
-
<div>
|
|
203
|
-
<label for="cell-width-slider">Cell width:</label>
|
|
204
|
-
<input
|
|
205
|
-
type="range"
|
|
206
|
-
min="10"
|
|
207
|
-
max="100"
|
|
208
|
-
value="18"
|
|
209
|
-
step="0.1"
|
|
210
|
-
id="cell-width-slider"
|
|
211
|
-
@input=${this.widthChanged}
|
|
212
|
-
/>
|
|
213
|
-
<span>${this.cellWidth}rem</span>
|
|
214
|
-
</div>
|
|
215
|
-
<div>
|
|
216
|
-
<label for="cell-height-slider">Cell height:</label>
|
|
217
|
-
<input
|
|
218
|
-
type="range"
|
|
219
|
-
min="10"
|
|
220
|
-
max="100"
|
|
221
|
-
value="29"
|
|
222
|
-
step="0.1"
|
|
223
|
-
id="cell-height-slider"
|
|
224
|
-
@input=${this.heightChanged}
|
|
225
|
-
/>
|
|
226
|
-
<span>${this.cellHeight}rem</span>
|
|
227
|
-
</div>
|
|
228
|
-
<div>
|
|
229
|
-
<label for="cell-row-gap-slider">Row gap:</label>
|
|
230
|
-
<input
|
|
231
|
-
type="range"
|
|
232
|
-
min="0"
|
|
233
|
-
max="5"
|
|
234
|
-
value="1.7"
|
|
235
|
-
step="0.1"
|
|
236
|
-
id="cell-row-gap-slider"
|
|
237
|
-
@input=${this.rowGapChanged}
|
|
238
|
-
/>
|
|
239
|
-
<span>${this.rowGap}rem</span>
|
|
240
|
-
</div>
|
|
241
|
-
<div>
|
|
242
|
-
<label for="cell-col-gap-slider">Col gap:</label>
|
|
243
|
-
<input
|
|
244
|
-
type="range"
|
|
245
|
-
min="0"
|
|
246
|
-
max="5"
|
|
247
|
-
value="1.7"
|
|
248
|
-
step="0.1"
|
|
249
|
-
id="cell-col-gap-slider"
|
|
250
|
-
@input=${this.colGapChanged}
|
|
251
|
-
/>
|
|
252
|
-
<span>${this.colGap}rem</span>
|
|
253
|
-
</div>
|
|
254
|
-
</fieldset>
|
|
255
|
-
|
|
256
|
-
<fieldset class="other-controls">
|
|
257
|
-
<legend>Other Controls</legend>
|
|
258
|
-
<div class="checkbox-control">
|
|
259
|
-
<input
|
|
260
|
-
type="checkbox"
|
|
261
|
-
id="simulate-login"
|
|
262
|
-
@click=${this.loginChanged}
|
|
263
|
-
/>
|
|
264
|
-
<label for="simulate-login">Simulate login</label>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="checkbox-control">
|
|
267
|
-
<input
|
|
268
|
-
type="checkbox"
|
|
269
|
-
id="enable-date-picker"
|
|
270
|
-
checked
|
|
271
|
-
@click=${this.datePickerChanged}
|
|
272
|
-
/>
|
|
273
|
-
<label for="enable-date-picker">Enable date picker</label>
|
|
274
|
-
</div>
|
|
275
|
-
<div class="checkbox-control">
|
|
276
|
-
<input
|
|
277
|
-
type="checkbox"
|
|
278
|
-
id="enable-facets"
|
|
279
|
-
checked
|
|
280
|
-
@click=${this.facetsChanged}
|
|
281
|
-
/>
|
|
282
|
-
<label for="enable-facets">Enable facets</label>
|
|
283
|
-
</div>
|
|
284
|
-
<div class="checkbox-control indent">
|
|
285
|
-
<input
|
|
286
|
-
type="checkbox"
|
|
287
|
-
id="lazy-load-facets"
|
|
288
|
-
?disabled=${this.suppressFacets}
|
|
289
|
-
@click=${this.lazyLoadFacetsChanged}
|
|
290
|
-
/>
|
|
291
|
-
<label for="lazy-load-facets">Lazy load facets</label>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="checkbox-control">
|
|
294
|
-
<input
|
|
295
|
-
type="checkbox"
|
|
296
|
-
id="enable-management"
|
|
297
|
-
@click=${this.manageModeCheckboxChanged}
|
|
298
|
-
/>
|
|
299
|
-
<label for="enable-management">Enable manage mode</label>
|
|
300
|
-
</div>
|
|
301
|
-
<div class="checkbox-control indent">
|
|
302
|
-
<input
|
|
303
|
-
type="checkbox"
|
|
304
|
-
id="enable-search-management"
|
|
305
|
-
@click=${this.SearchManageModeCheckboxChanged}
|
|
306
|
-
/>
|
|
307
|
-
<label for="enable-search-management">Search</label>
|
|
308
|
-
</div>
|
|
309
|
-
<div class="checkbox-control">
|
|
310
|
-
<input
|
|
311
|
-
type="checkbox"
|
|
312
|
-
id="enable-smart-facet-bar"
|
|
313
|
-
@click=${this.smartFacetBarCheckboxChanged}
|
|
314
|
-
/>
|
|
315
|
-
<label for="enable-smart-facet-bar">Enable smart facet bar</label>
|
|
316
|
-
</div>
|
|
317
|
-
</fieldset>
|
|
318
|
-
|
|
319
|
-
<fieldset class="cb-visual-appearance">
|
|
320
|
-
<legend>CB Visual Appearance</legend>
|
|
321
|
-
<div class="checkbox-control">
|
|
322
|
-
<input
|
|
323
|
-
type="checkbox"
|
|
324
|
-
id="show-facet-group-outline-check"
|
|
325
|
-
@click=${this.toggleFacetGroupOutline}
|
|
326
|
-
/>
|
|
327
|
-
<label for="show-facet-group-outline-check">
|
|
328
|
-
Show facet group outlines
|
|
329
|
-
</label>
|
|
330
|
-
</div>
|
|
331
|
-
<div class="checkbox-control">
|
|
332
|
-
<input
|
|
333
|
-
type="checkbox"
|
|
334
|
-
id="show-outline-check"
|
|
335
|
-
@click=${this.outlineChanged}
|
|
336
|
-
/>
|
|
337
|
-
<label for="show-outline-check">Show cell outlines</label>
|
|
338
|
-
</div>
|
|
339
|
-
<div class="checkbox-control">
|
|
340
|
-
<input
|
|
341
|
-
type="checkbox"
|
|
342
|
-
id="minimal-tiles-check"
|
|
343
|
-
@click=${this.minimalTilesChanged}
|
|
344
|
-
/>
|
|
345
|
-
<label for="minimal-tiles-check">Minimal tile layouts</label>
|
|
346
|
-
</div>
|
|
347
|
-
</fieldset>
|
|
348
|
-
|
|
349
|
-
<fieldset class="user-profile-controls">
|
|
350
|
-
<legend>User Profile Controls</legend>
|
|
351
|
-
<div class="checkbox-control">
|
|
352
|
-
<input
|
|
353
|
-
type="checkbox"
|
|
354
|
-
id="enable-facet-top-slot"
|
|
355
|
-
@click=${this.facetTopSlotCheckboxChanged}
|
|
356
|
-
/>
|
|
357
|
-
<label for="enable-facet-top-slot">Show facet top slot</label>
|
|
358
|
-
</div>
|
|
359
|
-
<div class="checkbox-control">
|
|
360
|
-
<input
|
|
361
|
-
type="checkbox"
|
|
362
|
-
id="enable-cb-top-slot"
|
|
363
|
-
@click=${this.cbTopSlotCheckboxChanged}
|
|
364
|
-
/>
|
|
365
|
-
<label for="enable-cb-top-slot">Show CB top slot</label>
|
|
366
|
-
</div>
|
|
367
|
-
<div class="checkbox-control">
|
|
368
|
-
<input
|
|
369
|
-
type="checkbox"
|
|
370
|
-
id="enable-sortbar-left-slot"
|
|
371
|
-
@click=${this.sortBarLeftSlotCheckboxChanged}
|
|
372
|
-
/>
|
|
373
|
-
<label for="enable-sortbar-left-slot"
|
|
374
|
-
>Show sortbar left slot</label
|
|
375
|
-
>
|
|
376
|
-
</div>
|
|
377
|
-
<div class="checkbox-control">
|
|
378
|
-
<input
|
|
379
|
-
type="checkbox"
|
|
380
|
-
id="enable-sortbar-right-slot"
|
|
381
|
-
@click=${this.sortBarRightSlotCheckboxChanged}
|
|
382
|
-
/>
|
|
383
|
-
<label for="enable-sortbar-right-slot"
|
|
384
|
-
>Show sortbar right slot</label
|
|
385
|
-
>
|
|
386
|
-
</div>
|
|
387
|
-
<div class="checkbox-control">
|
|
388
|
-
<input
|
|
389
|
-
type="checkbox"
|
|
390
|
-
id="enable-result-last-tile-slot"
|
|
391
|
-
@click=${this.resultLastTileSlotCheckboxChanged}
|
|
392
|
-
/>
|
|
393
|
-
<label for="enable-result-last-tile-slot">
|
|
394
|
-
Show result last tile slot
|
|
395
|
-
</label>
|
|
396
|
-
</div>
|
|
397
|
-
<div class="checkbox-control">
|
|
398
|
-
<input
|
|
399
|
-
type="checkbox"
|
|
400
|
-
id="enable-replaced-sort-options"
|
|
401
|
-
@click=${this.replaceSortOptionsChanged}
|
|
402
|
-
/>
|
|
403
|
-
<label for="enable-replaced-sort-options">
|
|
404
|
-
Show replaced sort options
|
|
405
|
-
</label>
|
|
406
|
-
</div>
|
|
407
|
-
<div class="text-input-control">
|
|
408
|
-
<label for="within-profile-input">withinProfile</label>
|
|
409
|
-
<input
|
|
410
|
-
type="text"
|
|
411
|
-
id="within-profile-input"
|
|
412
|
-
placeholder="e.g. @foobar"
|
|
191
|
+
}}
|
|
192
|
+
>
|
|
193
|
+
Last Event Captured
|
|
194
|
+
</button>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div id="last-event">
|
|
198
|
+
<pre id="latest-event-details" class="hidden">
|
|
199
|
+
${JSON.stringify(this.latestAction, null, 2)}
|
|
200
|
+
</pre
|
|
201
|
+
>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<fieldset class="cell-controls">
|
|
205
|
+
<legend>Cell Controls</legend>
|
|
206
|
+
<div>
|
|
207
|
+
<label for="cell-width-slider">Cell width:</label>
|
|
208
|
+
<input
|
|
209
|
+
type="range"
|
|
210
|
+
min="10"
|
|
211
|
+
max="100"
|
|
212
|
+
value="18"
|
|
213
|
+
step="0.1"
|
|
214
|
+
id="cell-width-slider"
|
|
215
|
+
@input=${this.widthChanged}
|
|
216
|
+
/>
|
|
217
|
+
<span>${this.cellWidth}rem</span>
|
|
218
|
+
</div>
|
|
219
|
+
<div>
|
|
220
|
+
<label for="cell-height-slider">Cell height:</label>
|
|
221
|
+
<input
|
|
222
|
+
type="range"
|
|
223
|
+
min="10"
|
|
224
|
+
max="100"
|
|
225
|
+
value="29"
|
|
226
|
+
step="0.1"
|
|
227
|
+
id="cell-height-slider"
|
|
228
|
+
@input=${this.heightChanged}
|
|
229
|
+
/>
|
|
230
|
+
<span>${this.cellHeight}rem</span>
|
|
231
|
+
</div>
|
|
232
|
+
<div>
|
|
233
|
+
<label for="cell-row-gap-slider">Row gap:</label>
|
|
234
|
+
<input
|
|
235
|
+
type="range"
|
|
236
|
+
min="0"
|
|
237
|
+
max="5"
|
|
238
|
+
value="1.7"
|
|
239
|
+
step="0.1"
|
|
240
|
+
id="cell-row-gap-slider"
|
|
241
|
+
@input=${this.rowGapChanged}
|
|
242
|
+
/>
|
|
243
|
+
<span>${this.rowGap}rem</span>
|
|
244
|
+
</div>
|
|
245
|
+
<div>
|
|
246
|
+
<label for="cell-col-gap-slider">Col gap:</label>
|
|
247
|
+
<input
|
|
248
|
+
type="range"
|
|
249
|
+
min="0"
|
|
250
|
+
max="5"
|
|
251
|
+
value="1.7"
|
|
252
|
+
step="0.1"
|
|
253
|
+
id="cell-col-gap-slider"
|
|
254
|
+
@input=${this.colGapChanged}
|
|
255
|
+
/>
|
|
256
|
+
<span>${this.colGap}rem</span>
|
|
257
|
+
</div>
|
|
258
|
+
</fieldset>
|
|
259
|
+
|
|
260
|
+
<fieldset class="other-controls">
|
|
261
|
+
<legend>Other Controls</legend>
|
|
262
|
+
<div class="checkbox-control">
|
|
263
|
+
<input
|
|
264
|
+
type="checkbox"
|
|
265
|
+
id="simulate-login"
|
|
266
|
+
@click=${this.loginChanged}
|
|
267
|
+
/>
|
|
268
|
+
<label for="simulate-login">Simulate login</label>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="checkbox-control">
|
|
271
|
+
<input
|
|
272
|
+
type="checkbox"
|
|
273
|
+
id="enable-date-picker"
|
|
274
|
+
checked
|
|
275
|
+
@click=${this.datePickerChanged}
|
|
276
|
+
/>
|
|
277
|
+
<label for="enable-date-picker">Enable date picker</label>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="checkbox-control">
|
|
280
|
+
<input
|
|
281
|
+
type="checkbox"
|
|
282
|
+
id="enable-facets"
|
|
283
|
+
checked
|
|
284
|
+
@click=${this.facetsChanged}
|
|
285
|
+
/>
|
|
286
|
+
<label for="enable-facets">Enable facets</label>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="checkbox-control indent">
|
|
289
|
+
<input
|
|
290
|
+
type="checkbox"
|
|
291
|
+
id="lazy-load-facets"
|
|
292
|
+
?disabled=${this.suppressFacets}
|
|
293
|
+
@click=${this.lazyLoadFacetsChanged}
|
|
294
|
+
/>
|
|
295
|
+
<label for="lazy-load-facets">Lazy load facets</label>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="checkbox-control">
|
|
298
|
+
<input
|
|
299
|
+
type="checkbox"
|
|
300
|
+
id="enable-management"
|
|
301
|
+
@click=${this.manageModeCheckboxChanged}
|
|
302
|
+
/>
|
|
303
|
+
<label for="enable-management">Enable manage mode</label>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="checkbox-control indent">
|
|
306
|
+
<input
|
|
307
|
+
type="checkbox"
|
|
308
|
+
id="enable-search-management"
|
|
309
|
+
@click=${this.SearchManageModeCheckboxChanged}
|
|
310
|
+
/>
|
|
311
|
+
<label for="enable-search-management">Search</label>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="checkbox-control">
|
|
314
|
+
<input
|
|
315
|
+
type="checkbox"
|
|
316
|
+
id="enable-smart-facet-bar"
|
|
317
|
+
@click=${this.smartFacetBarCheckboxChanged}
|
|
318
|
+
/>
|
|
319
|
+
<label for="enable-smart-facet-bar">Enable smart facet bar</label>
|
|
320
|
+
</div>
|
|
321
|
+
</fieldset>
|
|
322
|
+
|
|
323
|
+
<fieldset class="cb-visual-appearance">
|
|
324
|
+
<legend>CB Visual Appearance</legend>
|
|
325
|
+
<div class="checkbox-control">
|
|
326
|
+
<input
|
|
327
|
+
type="checkbox"
|
|
328
|
+
id="show-facet-group-outline-check"
|
|
329
|
+
@click=${this.toggleFacetGroupOutline}
|
|
330
|
+
/>
|
|
331
|
+
<label for="show-facet-group-outline-check">
|
|
332
|
+
Show facet group outlines
|
|
333
|
+
</label>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="checkbox-control">
|
|
336
|
+
<input
|
|
337
|
+
type="checkbox"
|
|
338
|
+
id="show-outline-check"
|
|
339
|
+
@click=${this.outlineChanged}
|
|
340
|
+
/>
|
|
341
|
+
<label for="show-outline-check">Show cell outlines</label>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="checkbox-control">
|
|
344
|
+
<input
|
|
345
|
+
type="checkbox"
|
|
346
|
+
id="minimal-tiles-check"
|
|
347
|
+
@click=${this.minimalTilesChanged}
|
|
348
|
+
/>
|
|
349
|
+
<label for="minimal-tiles-check">Minimal tile layouts</label>
|
|
350
|
+
</div>
|
|
351
|
+
</fieldset>
|
|
352
|
+
|
|
353
|
+
<fieldset class="user-profile-controls">
|
|
354
|
+
<legend>User Profile Controls</legend>
|
|
355
|
+
<div class="checkbox-control">
|
|
356
|
+
<input
|
|
357
|
+
type="checkbox"
|
|
358
|
+
id="enable-facet-top-slot"
|
|
359
|
+
@click=${this.facetTopSlotCheckboxChanged}
|
|
360
|
+
/>
|
|
361
|
+
<label for="enable-facet-top-slot">Show facet top slot</label>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="checkbox-control">
|
|
364
|
+
<input
|
|
365
|
+
type="checkbox"
|
|
366
|
+
id="enable-cb-top-slot"
|
|
367
|
+
@click=${this.cbTopSlotCheckboxChanged}
|
|
368
|
+
/>
|
|
369
|
+
<label for="enable-cb-top-slot">Show CB top slot</label>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="checkbox-control">
|
|
372
|
+
<input
|
|
373
|
+
type="checkbox"
|
|
374
|
+
id="enable-sortbar-left-slot"
|
|
375
|
+
@click=${this.sortBarLeftSlotCheckboxChanged}
|
|
376
|
+
/>
|
|
377
|
+
<label for="enable-sortbar-left-slot"
|
|
378
|
+
>Show sortbar left slot</label
|
|
379
|
+
>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="checkbox-control">
|
|
382
|
+
<input
|
|
383
|
+
type="checkbox"
|
|
384
|
+
id="enable-sortbar-right-slot"
|
|
385
|
+
@click=${this.sortBarRightSlotCheckboxChanged}
|
|
386
|
+
/>
|
|
387
|
+
<label for="enable-sortbar-right-slot"
|
|
388
|
+
>Show sortbar right slot</label
|
|
389
|
+
>
|
|
390
|
+
</div>
|
|
391
|
+
<div class="checkbox-control">
|
|
392
|
+
<input
|
|
393
|
+
type="checkbox"
|
|
394
|
+
id="enable-result-last-tile-slot"
|
|
395
|
+
@click=${this.resultLastTileSlotCheckboxChanged}
|
|
396
|
+
/>
|
|
397
|
+
<label for="enable-result-last-tile-slot">
|
|
398
|
+
Show result last tile slot
|
|
399
|
+
</label>
|
|
400
|
+
</div>
|
|
401
|
+
<div class="checkbox-control">
|
|
402
|
+
<input
|
|
403
|
+
type="checkbox"
|
|
404
|
+
id="enable-replaced-sort-options"
|
|
405
|
+
@click=${this.replaceSortOptionsChanged}
|
|
406
|
+
/>
|
|
407
|
+
<label for="enable-replaced-sort-options">
|
|
408
|
+
Show replaced sort options
|
|
409
|
+
</label>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="text-input-control">
|
|
412
|
+
<label for="within-profile-input">withinProfile</label>
|
|
413
|
+
<input
|
|
414
|
+
type="text"
|
|
415
|
+
id="within-profile-input"
|
|
416
|
+
placeholder="e.g. @foobar"
|
|
413
417
|
@change=${(e) => {
|
|
414
418
|
const val = e.target.value.trim();
|
|
415
419
|
this.withinProfile = val || undefined;
|
|
416
|
-
}}
|
|
417
|
-
/>
|
|
418
|
-
</div>
|
|
419
|
-
<details class="profile-element-controls">
|
|
420
|
-
<summary>
|
|
421
|
-
Profile tab
|
|
420
|
+
}}
|
|
421
|
+
/>
|
|
422
|
+
</div>
|
|
423
|
+
<details class="profile-element-controls">
|
|
424
|
+
<summary>
|
|
425
|
+
Profile tab
|
|
422
426
|
(profileElement)${this.profileElement
|
|
423
427
|
? html `: <strong>${this.profileElement}</strong>`
|
|
424
|
-
: ''}
|
|
425
|
-
</summary>
|
|
426
|
-
<div class="profile-element-options">
|
|
427
|
-
<div class="checkbox-control">
|
|
428
|
-
<input
|
|
429
|
-
type="radio"
|
|
430
|
-
id="profile-none"
|
|
431
|
-
name="profile-element"
|
|
432
|
-
value=""
|
|
433
|
-
checked
|
|
434
|
-
@click=${this.profileElementChanged}
|
|
435
|
-
/>
|
|
436
|
-
<label for="profile-none">None</label>
|
|
437
|
-
</div>
|
|
428
|
+
: ''}
|
|
429
|
+
</summary>
|
|
430
|
+
<div class="profile-element-options">
|
|
431
|
+
<div class="checkbox-control">
|
|
432
|
+
<input
|
|
433
|
+
type="radio"
|
|
434
|
+
id="profile-none"
|
|
435
|
+
name="profile-element"
|
|
436
|
+
value=""
|
|
437
|
+
checked
|
|
438
|
+
@click=${this.profileElementChanged}
|
|
439
|
+
/>
|
|
440
|
+
<label for="profile-none">None</label>
|
|
441
|
+
</div>
|
|
438
442
|
${[
|
|
439
443
|
'uploads',
|
|
440
444
|
'favorites',
|
|
@@ -443,83 +447,83 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
443
447
|
'lending',
|
|
444
448
|
'web_archives',
|
|
445
449
|
'forum_posts',
|
|
446
|
-
].map(tab => html `
|
|
447
|
-
<div class="checkbox-control">
|
|
448
|
-
<input
|
|
449
|
-
type="radio"
|
|
450
|
-
id="profile-${tab}"
|
|
451
|
-
name="profile-element"
|
|
452
|
-
value="${tab}"
|
|
453
|
-
@click=${this.profileElementChanged}
|
|
454
|
-
/>
|
|
455
|
-
<label for="profile-${tab}">${tab}</label>
|
|
456
|
-
</div>
|
|
457
|
-
`)}
|
|
458
|
-
</div>
|
|
459
|
-
</details>
|
|
460
|
-
</fieldset>
|
|
461
|
-
|
|
462
|
-
<fieldset class="user-profile-controls">
|
|
463
|
-
<legend>Set Placeholder Types</legend>
|
|
464
|
-
<div class="checkbox-control">
|
|
465
|
-
<input
|
|
466
|
-
id="enable-loading-placeholder"
|
|
467
|
-
type="radio"
|
|
468
|
-
@click=${() => this.setPlaceholderType('loading-placeholder')}
|
|
469
|
-
name="placeholder-radio"
|
|
470
|
-
/>
|
|
471
|
-
<label for="enable-loading-placeholder"
|
|
472
|
-
>Loading Placeholder</label
|
|
473
|
-
>
|
|
474
|
-
</div>
|
|
475
|
-
<div class="checkbox-control">
|
|
476
|
-
<input
|
|
477
|
-
id="enable-empty-placeholder"
|
|
478
|
-
type="radio"
|
|
479
|
-
@click=${() => this.setPlaceholderType('error-placeholder')}
|
|
480
|
-
value="empty-placeholder"
|
|
481
|
-
name="placeholder-radio"
|
|
482
|
-
/>
|
|
483
|
-
<label for="enable-empty-placeholder">Empty Placeholder</label>
|
|
484
|
-
</div>
|
|
485
|
-
</fieldset>
|
|
486
|
-
</div>
|
|
487
|
-
<button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
|
|
488
|
-
Toggle Search Controls
|
|
489
|
-
</button>
|
|
490
|
-
</div>
|
|
491
|
-
<div id="collection-browser-container">
|
|
492
|
-
<collection-browser
|
|
493
|
-
facetPaneVisible
|
|
494
|
-
.baseNavigationUrl=${'https://archive.org'}
|
|
495
|
-
.baseImageUrl=${'https://archive.org'}
|
|
496
|
-
.searchService=${this.searchService}
|
|
497
|
-
.resizeObserver=${this.resizeObserver}
|
|
498
|
-
.showHistogramDatePicker=${true}
|
|
499
|
-
.suppressFacets=${this.suppressFacets}
|
|
500
|
-
.lazyLoadFacets=${this.lazyLoadFacets}
|
|
501
|
-
.loggedIn=${this.loggedIn}
|
|
502
|
-
.modalManager=${this.modalManager}
|
|
503
|
-
.analyticsHandler=${this.analyticsHandler}
|
|
504
|
-
.withinProfile=${this.withinProfile}
|
|
505
|
-
.profileElement=${this.profileElement}
|
|
506
|
-
.pageContext=${'search'}
|
|
507
|
-
@visiblePageChanged=${this.visiblePageChanged}
|
|
508
|
-
@baseQueryChanged=${this.baseQueryChanged}
|
|
509
|
-
@searchTypeChanged=${this.searchTypeChanged}
|
|
510
|
-
@manageModeChanged=${this.manageModeChanged}
|
|
511
|
-
@itemRemovalRequested=${this.handleItemRemovalRequest}
|
|
512
|
-
@itemManagerRequested=${this.handleItemManagerRequest}
|
|
513
|
-
>
|
|
450
|
+
].map(tab => html `
|
|
451
|
+
<div class="checkbox-control">
|
|
452
|
+
<input
|
|
453
|
+
type="radio"
|
|
454
|
+
id="profile-${tab}"
|
|
455
|
+
name="profile-element"
|
|
456
|
+
value="${tab}"
|
|
457
|
+
@click=${this.profileElementChanged}
|
|
458
|
+
/>
|
|
459
|
+
<label for="profile-${tab}">${tab}</label>
|
|
460
|
+
</div>
|
|
461
|
+
`)}
|
|
462
|
+
</div>
|
|
463
|
+
</details>
|
|
464
|
+
</fieldset>
|
|
465
|
+
|
|
466
|
+
<fieldset class="user-profile-controls">
|
|
467
|
+
<legend>Set Placeholder Types</legend>
|
|
468
|
+
<div class="checkbox-control">
|
|
469
|
+
<input
|
|
470
|
+
id="enable-loading-placeholder"
|
|
471
|
+
type="radio"
|
|
472
|
+
@click=${() => this.setPlaceholderType('loading-placeholder')}
|
|
473
|
+
name="placeholder-radio"
|
|
474
|
+
/>
|
|
475
|
+
<label for="enable-loading-placeholder"
|
|
476
|
+
>Loading Placeholder</label
|
|
477
|
+
>
|
|
478
|
+
</div>
|
|
479
|
+
<div class="checkbox-control">
|
|
480
|
+
<input
|
|
481
|
+
id="enable-empty-placeholder"
|
|
482
|
+
type="radio"
|
|
483
|
+
@click=${() => this.setPlaceholderType('error-placeholder')}
|
|
484
|
+
value="empty-placeholder"
|
|
485
|
+
name="placeholder-radio"
|
|
486
|
+
/>
|
|
487
|
+
<label for="enable-empty-placeholder">Empty Placeholder</label>
|
|
488
|
+
</div>
|
|
489
|
+
</fieldset>
|
|
490
|
+
</div>
|
|
491
|
+
<button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
|
|
492
|
+
Toggle Search Controls
|
|
493
|
+
</button>
|
|
494
|
+
</div>
|
|
495
|
+
<div id="collection-browser-container">
|
|
496
|
+
<collection-browser
|
|
497
|
+
facetPaneVisible
|
|
498
|
+
.baseNavigationUrl=${'https://archive.org'}
|
|
499
|
+
.baseImageUrl=${'https://archive.org'}
|
|
500
|
+
.searchService=${this.searchService}
|
|
501
|
+
.resizeObserver=${this.resizeObserver}
|
|
502
|
+
.showHistogramDatePicker=${true}
|
|
503
|
+
.suppressFacets=${this.suppressFacets}
|
|
504
|
+
.lazyLoadFacets=${this.lazyLoadFacets}
|
|
505
|
+
.loggedIn=${this.loggedIn}
|
|
506
|
+
.modalManager=${this.modalManager}
|
|
507
|
+
.analyticsHandler=${this.analyticsHandler}
|
|
508
|
+
.withinProfile=${this.withinProfile}
|
|
509
|
+
.profileElement=${this.profileElement}
|
|
510
|
+
.pageContext=${'search'}
|
|
511
|
+
@visiblePageChanged=${this.visiblePageChanged}
|
|
512
|
+
@baseQueryChanged=${this.baseQueryChanged}
|
|
513
|
+
@searchTypeChanged=${this.searchTypeChanged}
|
|
514
|
+
@manageModeChanged=${this.manageModeChanged}
|
|
515
|
+
@itemRemovalRequested=${this.handleItemRemovalRequest}
|
|
516
|
+
@itemManagerRequested=${this.handleItemManagerRequest}
|
|
517
|
+
>
|
|
514
518
|
${this.toggleSlots
|
|
515
519
|
? html `<div slot="sortbar-left-slot">Sort Slot</div>`
|
|
516
|
-
: nothing}
|
|
520
|
+
: nothing}
|
|
517
521
|
${this.toggleSlots
|
|
518
522
|
? html `<div slot="facet-top-slot">Facet Slot</div>`
|
|
519
|
-
: nothing}
|
|
520
|
-
</collection-browser>
|
|
521
|
-
</div>
|
|
522
|
-
<modal-manager></modal-manager>
|
|
523
|
+
: nothing}
|
|
524
|
+
</collection-browser>
|
|
525
|
+
</div>
|
|
526
|
+
<modal-manager></modal-manager>
|
|
523
527
|
`;
|
|
524
528
|
}
|
|
525
529
|
async setPlaceholderType(type) {
|
|
@@ -844,262 +848,262 @@ let AppRoot = class AppRoot extends LitElement {
|
|
|
844
848
|
const input = e.target;
|
|
845
849
|
this.profileElement = input.value || undefined;
|
|
846
850
|
}
|
|
847
|
-
static { this.styles = css `
|
|
848
|
-
:host {
|
|
849
|
-
display: block;
|
|
850
|
-
--primaryButtonBGColor: #194880;
|
|
851
|
-
--ia-theme-link-color: #4b64ff;
|
|
852
|
-
}
|
|
853
|
-
|
|
854
|
-
/* add the following styles to ensure proper modal visibility */
|
|
855
|
-
body.modal-manager-open {
|
|
856
|
-
overflow: hidden;
|
|
857
|
-
}
|
|
858
|
-
modal-manager {
|
|
859
|
-
display: none;
|
|
860
|
-
}
|
|
861
|
-
modal-manager[mode='open'] {
|
|
862
|
-
display: block;
|
|
863
|
-
}
|
|
864
|
-
modal-manager.remove-items {
|
|
865
|
-
--modalWidth: 58rem;
|
|
866
|
-
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
867
|
-
--modalTitleLineHeight: 4rem;
|
|
868
|
-
--modalTitleFontSize: 1.8rem;
|
|
869
|
-
}
|
|
870
|
-
modal-manager.more-search-facets {
|
|
871
|
-
--modalWidth: 85rem;
|
|
872
|
-
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
873
|
-
--modalTitleLineHeight: 4rem;
|
|
874
|
-
--modalTitleFontSize: 1.8rem;
|
|
875
|
-
--modalCornerRadius: 0;
|
|
876
|
-
--modalBottomPadding: 0;
|
|
877
|
-
--modalBottomMargin: 0;
|
|
878
|
-
--modalScrollOffset: 0;
|
|
879
|
-
--modalCornerRadius: 0.5rem;
|
|
880
|
-
}
|
|
881
|
-
modal-manager.expanded-date-picker {
|
|
882
|
-
--modalWidth: 58rem;
|
|
883
|
-
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
884
|
-
--modalTitleLineHeight: 4rem;
|
|
885
|
-
--modalTitleFontSize: 1.8rem;
|
|
886
|
-
--modalCornerRadius: 0;
|
|
887
|
-
--modalBottomPadding: 0;
|
|
888
|
-
--modalBottomMargin: 0;
|
|
889
|
-
--modalScrollOffset: 0;
|
|
890
|
-
--modalCornerRadius: 0.5rem;
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
input,
|
|
894
|
-
button {
|
|
895
|
-
font-size: 1.6rem;
|
|
896
|
-
}
|
|
897
|
-
|
|
898
|
-
modal-manager.showFacetGroupOutlines,
|
|
899
|
-
collection-browser.showFacetGroupOutlines {
|
|
900
|
-
--facet-row-border-top: 1px solid red;
|
|
901
|
-
--facet-row-border-bottom: 1px solid blue;
|
|
902
|
-
}
|
|
903
|
-
|
|
904
|
-
collection-browser {
|
|
905
|
-
/* Same as production */
|
|
906
|
-
max-width: 135rem;
|
|
907
|
-
margin: auto;
|
|
908
|
-
}
|
|
909
|
-
|
|
910
|
-
#collection-browser-container {
|
|
911
|
-
/* Same as production */
|
|
912
|
-
padding-left: 0.5rem;
|
|
913
|
-
margin-bottom: 2rem;
|
|
914
|
-
}
|
|
915
|
-
|
|
916
|
-
#base-query-field {
|
|
917
|
-
width: 300px;
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
.dev-tool-container {
|
|
921
|
-
position: relative;
|
|
922
|
-
}
|
|
923
|
-
#dev-tools {
|
|
924
|
-
position: relative;
|
|
925
|
-
top: 0;
|
|
926
|
-
left: 0;
|
|
927
|
-
z-index: 1;
|
|
928
|
-
-webkit-backdrop-filter: blur(10px);
|
|
929
|
-
backdrop-filter: blur(10px);
|
|
930
|
-
padding: 0.5rem 1rem;
|
|
931
|
-
border: 1px solid black;
|
|
932
|
-
font-size: 1.4rem;
|
|
933
|
-
background: #ffffffb3;
|
|
934
|
-
}
|
|
935
|
-
|
|
936
|
-
#dev-tools > * {
|
|
937
|
-
display: flex;
|
|
938
|
-
}
|
|
939
|
-
|
|
940
|
-
#toggle-dev-tools-btn {
|
|
941
|
-
position: fixed;
|
|
942
|
-
left: 77.4%;
|
|
943
|
-
top: 0;
|
|
944
|
-
background: red;
|
|
945
|
-
padding: 5px;
|
|
946
|
-
color: white;
|
|
947
|
-
font-size: 1.4rem;
|
|
948
|
-
margin: 0;
|
|
949
|
-
z-index: 1;
|
|
950
|
-
cursor: pointer;
|
|
951
|
-
}
|
|
952
|
-
|
|
953
|
-
#search-and-page-inputs {
|
|
954
|
-
flex-wrap: wrap;
|
|
955
|
-
row-gap: 2px;
|
|
956
|
-
}
|
|
957
|
-
|
|
958
|
-
#search-and-page-inputs > form {
|
|
959
|
-
margin-right: 1rem;
|
|
960
|
-
}
|
|
961
|
-
|
|
962
|
-
#search-and-page-inputs label {
|
|
963
|
-
display: inline-block;
|
|
964
|
-
min-width: 50px;
|
|
965
|
-
}
|
|
966
|
-
|
|
967
|
-
#page-number-input {
|
|
968
|
-
width: 75px;
|
|
969
|
-
}
|
|
970
|
-
|
|
971
|
-
.search-type {
|
|
972
|
-
margin-right: 1rem;
|
|
973
|
-
}
|
|
974
|
-
|
|
975
|
-
.cell-controls {
|
|
976
|
-
display: flex;
|
|
977
|
-
flex-wrap: wrap;
|
|
978
|
-
}
|
|
979
|
-
.cell-controls div {
|
|
980
|
-
display: flex;
|
|
981
|
-
align-items: center;
|
|
982
|
-
}
|
|
983
|
-
.cell-controls input[type='range'] {
|
|
984
|
-
width: 120px;
|
|
985
|
-
}
|
|
986
|
-
#cell-controls label {
|
|
987
|
-
display: inline-block;
|
|
988
|
-
width: 10rem;
|
|
989
|
-
}
|
|
990
|
-
|
|
991
|
-
#cell-size-control,
|
|
992
|
-
#cell-gap-control {
|
|
993
|
-
flex-basis: calc(50% - 1rem);
|
|
994
|
-
flex-grow: 1;
|
|
995
|
-
}
|
|
996
|
-
|
|
997
|
-
#cell-gap-control {
|
|
998
|
-
margin-left: 1rem;
|
|
999
|
-
}
|
|
1000
|
-
|
|
1001
|
-
#checkbox-controls {
|
|
1002
|
-
padding-top: 0.5rem;
|
|
1003
|
-
flex-wrap: wrap;
|
|
1004
|
-
}
|
|
1005
|
-
|
|
1006
|
-
.checkbox-control {
|
|
1007
|
-
flex-basis: 50%;
|
|
1008
|
-
}
|
|
1009
|
-
.checkbox-control.indent {
|
|
1010
|
-
margin-left: 10px;
|
|
1011
|
-
}
|
|
1012
|
-
.checkbox-control label {
|
|
1013
|
-
user-select: none;
|
|
1014
|
-
}
|
|
1015
|
-
|
|
1016
|
-
#last-event {
|
|
1017
|
-
background-color: aliceblue;
|
|
1018
|
-
padding: 5px;
|
|
1019
|
-
margin: 5px auto;
|
|
1020
|
-
}
|
|
1021
|
-
|
|
1022
|
-
.hidden {
|
|
1023
|
-
display: none;
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
#toggle-controls {
|
|
1027
|
-
background-color: lightskyblue;
|
|
1028
|
-
padding: 5px;
|
|
1029
|
-
margin: 5px auto;
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1032
|
-
#search-types {
|
|
1033
|
-
margin: 5px auto;
|
|
1034
|
-
background-color: aliceblue;
|
|
1035
|
-
font-size: 1.6rem;
|
|
1036
|
-
}
|
|
1037
|
-
|
|
1038
|
-
// slots
|
|
1039
|
-
div[slot='cb-top-slot'] {
|
|
1040
|
-
height: 50px;
|
|
1041
|
-
border: 1px solid red;
|
|
1042
|
-
background: bisque;
|
|
1043
|
-
}
|
|
1044
|
-
div[slot='facet-top-slot'] {
|
|
1045
|
-
border: 1px solid red;
|
|
1046
|
-
width: 100%;
|
|
1047
|
-
height: 150px;
|
|
1048
|
-
background-color: darkseagreen;
|
|
1049
|
-
}
|
|
1050
|
-
div[slot='sort-slot-left'] {
|
|
1051
|
-
height: 50px;
|
|
1052
|
-
border: 1px solid red;
|
|
1053
|
-
background: bisque;
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
/* user profile controls */
|
|
1057
|
-
.user-profile-controls {
|
|
1058
|
-
width: fit-content;
|
|
1059
|
-
}
|
|
1060
|
-
|
|
1061
|
-
.profile-element-controls {
|
|
1062
|
-
margin-top: 4px;
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
.profile-element-controls summary {
|
|
1066
|
-
cursor: pointer;
|
|
1067
|
-
user-select: none;
|
|
1068
|
-
}
|
|
1069
|
-
|
|
1070
|
-
.profile-element-options {
|
|
1071
|
-
display: grid;
|
|
1072
|
-
grid-template-columns: 1fr 1fr;
|
|
1073
|
-
column-gap: 8px;
|
|
1074
|
-
margin-top: 4px;
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
fieldset {
|
|
1078
|
-
display: inline-block !important;
|
|
1079
|
-
}
|
|
1080
|
-
|
|
1081
|
-
.result-last-tile {
|
|
1082
|
-
border-radius: 4px;
|
|
1083
|
-
background-color: white;
|
|
1084
|
-
border: 3px dashed #555;
|
|
1085
|
-
box-shadow: none;
|
|
1086
|
-
display: grid;
|
|
1087
|
-
align-content: center;
|
|
1088
|
-
}
|
|
1089
|
-
.result-last-tile:hover {
|
|
1090
|
-
box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
|
|
1091
|
-
transition: box-shadow 0.1s ease 0s;
|
|
1092
|
-
cursor: pointer;
|
|
1093
|
-
border: 3px dashed #4b64ff;
|
|
1094
|
-
}
|
|
1095
|
-
.result-last-tile h3 {
|
|
1096
|
-
margin-bottom: 4rem;
|
|
1097
|
-
margin: 0px auto;
|
|
1098
|
-
font-size: 2.8rem;
|
|
1099
|
-
color: rgb(44, 44, 44);
|
|
1100
|
-
font-weight: 200;
|
|
1101
|
-
text-align: center;
|
|
1102
|
-
}
|
|
851
|
+
static { this.styles = css `
|
|
852
|
+
:host {
|
|
853
|
+
display: block;
|
|
854
|
+
--primaryButtonBGColor: #194880;
|
|
855
|
+
--ia-theme-link-color: #4b64ff;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
/* add the following styles to ensure proper modal visibility */
|
|
859
|
+
body.modal-manager-open {
|
|
860
|
+
overflow: hidden;
|
|
861
|
+
}
|
|
862
|
+
modal-manager {
|
|
863
|
+
display: none;
|
|
864
|
+
}
|
|
865
|
+
modal-manager[mode='open'] {
|
|
866
|
+
display: block;
|
|
867
|
+
}
|
|
868
|
+
modal-manager.remove-items {
|
|
869
|
+
--modalWidth: 58rem;
|
|
870
|
+
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
871
|
+
--modalTitleLineHeight: 4rem;
|
|
872
|
+
--modalTitleFontSize: 1.8rem;
|
|
873
|
+
}
|
|
874
|
+
modal-manager.more-search-facets {
|
|
875
|
+
--modalWidth: 85rem;
|
|
876
|
+
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
877
|
+
--modalTitleLineHeight: 4rem;
|
|
878
|
+
--modalTitleFontSize: 1.8rem;
|
|
879
|
+
--modalCornerRadius: 0;
|
|
880
|
+
--modalBottomPadding: 0;
|
|
881
|
+
--modalBottomMargin: 0;
|
|
882
|
+
--modalScrollOffset: 0;
|
|
883
|
+
--modalCornerRadius: 0.5rem;
|
|
884
|
+
}
|
|
885
|
+
modal-manager.expanded-date-picker {
|
|
886
|
+
--modalWidth: 58rem;
|
|
887
|
+
--modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
|
|
888
|
+
--modalTitleLineHeight: 4rem;
|
|
889
|
+
--modalTitleFontSize: 1.8rem;
|
|
890
|
+
--modalCornerRadius: 0;
|
|
891
|
+
--modalBottomPadding: 0;
|
|
892
|
+
--modalBottomMargin: 0;
|
|
893
|
+
--modalScrollOffset: 0;
|
|
894
|
+
--modalCornerRadius: 0.5rem;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
input,
|
|
898
|
+
button {
|
|
899
|
+
font-size: 1.6rem;
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
modal-manager.showFacetGroupOutlines,
|
|
903
|
+
collection-browser.showFacetGroupOutlines {
|
|
904
|
+
--facet-row-border-top: 1px solid red;
|
|
905
|
+
--facet-row-border-bottom: 1px solid blue;
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
collection-browser {
|
|
909
|
+
/* Same as production */
|
|
910
|
+
max-width: 135rem;
|
|
911
|
+
margin: auto;
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
#collection-browser-container {
|
|
915
|
+
/* Same as production */
|
|
916
|
+
padding-left: 0.5rem;
|
|
917
|
+
margin-bottom: 2rem;
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
#base-query-field {
|
|
921
|
+
width: 300px;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
.dev-tool-container {
|
|
925
|
+
position: relative;
|
|
926
|
+
}
|
|
927
|
+
#dev-tools {
|
|
928
|
+
position: relative;
|
|
929
|
+
top: 0;
|
|
930
|
+
left: 0;
|
|
931
|
+
z-index: 1;
|
|
932
|
+
-webkit-backdrop-filter: blur(10px);
|
|
933
|
+
backdrop-filter: blur(10px);
|
|
934
|
+
padding: 0.5rem 1rem;
|
|
935
|
+
border: 1px solid black;
|
|
936
|
+
font-size: 1.4rem;
|
|
937
|
+
background: #ffffffb3;
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
#dev-tools > * {
|
|
941
|
+
display: flex;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
#toggle-dev-tools-btn {
|
|
945
|
+
position: fixed;
|
|
946
|
+
left: 77.4%;
|
|
947
|
+
top: 0;
|
|
948
|
+
background: red;
|
|
949
|
+
padding: 5px;
|
|
950
|
+
color: white;
|
|
951
|
+
font-size: 1.4rem;
|
|
952
|
+
margin: 0;
|
|
953
|
+
z-index: 1;
|
|
954
|
+
cursor: pointer;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
#search-and-page-inputs {
|
|
958
|
+
flex-wrap: wrap;
|
|
959
|
+
row-gap: 2px;
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
#search-and-page-inputs > form {
|
|
963
|
+
margin-right: 1rem;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
#search-and-page-inputs label {
|
|
967
|
+
display: inline-block;
|
|
968
|
+
min-width: 50px;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
#page-number-input {
|
|
972
|
+
width: 75px;
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.search-type {
|
|
976
|
+
margin-right: 1rem;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
.cell-controls {
|
|
980
|
+
display: flex;
|
|
981
|
+
flex-wrap: wrap;
|
|
982
|
+
}
|
|
983
|
+
.cell-controls div {
|
|
984
|
+
display: flex;
|
|
985
|
+
align-items: center;
|
|
986
|
+
}
|
|
987
|
+
.cell-controls input[type='range'] {
|
|
988
|
+
width: 120px;
|
|
989
|
+
}
|
|
990
|
+
#cell-controls label {
|
|
991
|
+
display: inline-block;
|
|
992
|
+
width: 10rem;
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
#cell-size-control,
|
|
996
|
+
#cell-gap-control {
|
|
997
|
+
flex-basis: calc(50% - 1rem);
|
|
998
|
+
flex-grow: 1;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
#cell-gap-control {
|
|
1002
|
+
margin-left: 1rem;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
#checkbox-controls {
|
|
1006
|
+
padding-top: 0.5rem;
|
|
1007
|
+
flex-wrap: wrap;
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
.checkbox-control {
|
|
1011
|
+
flex-basis: 50%;
|
|
1012
|
+
}
|
|
1013
|
+
.checkbox-control.indent {
|
|
1014
|
+
margin-left: 10px;
|
|
1015
|
+
}
|
|
1016
|
+
.checkbox-control label {
|
|
1017
|
+
user-select: none;
|
|
1018
|
+
}
|
|
1019
|
+
|
|
1020
|
+
#last-event {
|
|
1021
|
+
background-color: aliceblue;
|
|
1022
|
+
padding: 5px;
|
|
1023
|
+
margin: 5px auto;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.hidden {
|
|
1027
|
+
display: none;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
#toggle-controls {
|
|
1031
|
+
background-color: lightskyblue;
|
|
1032
|
+
padding: 5px;
|
|
1033
|
+
margin: 5px auto;
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
#search-types {
|
|
1037
|
+
margin: 5px auto;
|
|
1038
|
+
background-color: aliceblue;
|
|
1039
|
+
font-size: 1.6rem;
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
// slots
|
|
1043
|
+
div[slot='cb-top-slot'] {
|
|
1044
|
+
height: 50px;
|
|
1045
|
+
border: 1px solid red;
|
|
1046
|
+
background: bisque;
|
|
1047
|
+
}
|
|
1048
|
+
div[slot='facet-top-slot'] {
|
|
1049
|
+
border: 1px solid red;
|
|
1050
|
+
width: 100%;
|
|
1051
|
+
height: 150px;
|
|
1052
|
+
background-color: darkseagreen;
|
|
1053
|
+
}
|
|
1054
|
+
div[slot='sort-slot-left'] {
|
|
1055
|
+
height: 50px;
|
|
1056
|
+
border: 1px solid red;
|
|
1057
|
+
background: bisque;
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
/* user profile controls */
|
|
1061
|
+
.user-profile-controls {
|
|
1062
|
+
width: fit-content;
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.profile-element-controls {
|
|
1066
|
+
margin-top: 4px;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.profile-element-controls summary {
|
|
1070
|
+
cursor: pointer;
|
|
1071
|
+
user-select: none;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
.profile-element-options {
|
|
1075
|
+
display: grid;
|
|
1076
|
+
grid-template-columns: 1fr 1fr;
|
|
1077
|
+
column-gap: 8px;
|
|
1078
|
+
margin-top: 4px;
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
fieldset {
|
|
1082
|
+
display: inline-block !important;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.result-last-tile {
|
|
1086
|
+
border-radius: 4px;
|
|
1087
|
+
background-color: white;
|
|
1088
|
+
border: 3px dashed #555;
|
|
1089
|
+
box-shadow: none;
|
|
1090
|
+
display: grid;
|
|
1091
|
+
align-content: center;
|
|
1092
|
+
}
|
|
1093
|
+
.result-last-tile:hover {
|
|
1094
|
+
box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
|
|
1095
|
+
transition: box-shadow 0.1s ease 0s;
|
|
1096
|
+
cursor: pointer;
|
|
1097
|
+
border: 3px dashed #4b64ff;
|
|
1098
|
+
}
|
|
1099
|
+
.result-last-tile h3 {
|
|
1100
|
+
margin-bottom: 4rem;
|
|
1101
|
+
margin: 0px auto;
|
|
1102
|
+
font-size: 2.8rem;
|
|
1103
|
+
color: rgb(44, 44, 44);
|
|
1104
|
+
font-weight: 200;
|
|
1105
|
+
text-align: center;
|
|
1106
|
+
}
|
|
1103
1107
|
`; }
|
|
1104
1108
|
};
|
|
1105
1109
|
__decorate([
|