henry-search 1.0.27 → 1.0.29
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/HenrySearch.css +1 -1
- package/dist/HenrySearch.js +5705 -5695
- package/dist/HenrySearch.umd.cjs +106 -106
- package/package.json +1 -1
- package/src/components/AudioLinks.vue +6 -1
- package/src/components/Search.vue +15 -5
- package/src/components/SearchTab.vue +15 -14
- package/src/styles/atoms/audioLinks/index.scss +9 -2
- package/src/styles/atoms/checkBoxes/index.scss +1 -2
- package/src/styles/atoms/menuSelect/index.scss +1 -0
- package/src/styles/atoms/toolTip/index.scss +5 -3
- package/src/styles/molecules/dateRange/index.scss +3 -0
- package/src/styles/molecules/resultActions/index.scss +3 -1
- package/src/styles/molecules/searchBox/index.scss +3 -3
- package/src/styles/organisms/filters/index.scss +11 -9
- package/src/styles/organisms/performanceGrid/index.scss +2 -2
- package/src/styles/organisms/resultsGrid/index.scss +6 -6
- package/src/styles/templates/eventsSearch/index.scss +1 -1
- package/src/styles/templates/performance/index.scss +1 -1
package/package.json
CHANGED
|
@@ -4,13 +4,18 @@ const props = defineProps({
|
|
|
4
4
|
audioId: {
|
|
5
5
|
type: Number,
|
|
6
6
|
require: true
|
|
7
|
+
},
|
|
8
|
+
extraClasses: {
|
|
9
|
+
type: String,
|
|
10
|
+
require: false,
|
|
11
|
+
default: ''
|
|
7
12
|
}
|
|
8
13
|
})
|
|
9
14
|
|
|
10
15
|
</script>
|
|
11
16
|
|
|
12
17
|
<template>
|
|
13
|
-
<div class="audioLinks__box">
|
|
18
|
+
<div :class="`audioLinks__box ${props.extraClasses}`">
|
|
14
19
|
<div class="audioLinks__links">
|
|
15
20
|
<span class="audioLinks__label -first">Public</span>
|
|
16
21
|
<a href="https://forms.office.com/pages/responsepage.aspx?id=OdIW0TyQrUiHfXYXUGXf-OBndBFJDdZNtXXrOlwA-shUNVBBNjZNQkozSEw2SUs3SFU1Q1I2R1VQTCQlQCN0PWcu&fswReload=1&fswNavStart=1674745526953" target="_blank" class="audioLinks__link -first">Request Form<svg class="audioLinks__arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import PTabs from './PTabs.vue'
|
|
6
6
|
import SearchTab from "./SearchTab.vue"
|
|
7
7
|
import EventLinks from "./EventLinks.vue"
|
|
8
|
+
import AudioLinks from "./AudioLinks.vue"
|
|
8
9
|
|
|
9
10
|
import formatDate from '../composables/formatDate'
|
|
10
11
|
|
|
@@ -33,7 +34,8 @@
|
|
|
33
34
|
|
|
34
35
|
onMounted(() => {
|
|
35
36
|
document.addEventListener("click", function(){
|
|
36
|
-
|
|
37
|
+
console.log('click')
|
|
38
|
+
document.querySelectorAll(".audioLinks__box").forEach((el) => {
|
|
37
39
|
el.classList.remove("-open")
|
|
38
40
|
})
|
|
39
41
|
})
|
|
@@ -146,6 +148,12 @@
|
|
|
146
148
|
return attributeArray.join("; ")
|
|
147
149
|
}
|
|
148
150
|
|
|
151
|
+
const showAudioLinks = (event) => {
|
|
152
|
+
event.stopPropagation()
|
|
153
|
+
const audioLinkBox = event.currentTarget.parentElement.querySelector(".audioLinks__box")
|
|
154
|
+
audioLinkBox.classList.toggle("-open")
|
|
155
|
+
}
|
|
156
|
+
|
|
149
157
|
|
|
150
158
|
</script>
|
|
151
159
|
|
|
@@ -205,13 +213,14 @@
|
|
|
205
213
|
<span class="resultsGrid__mobileHeader">Composer/Work</span>
|
|
206
214
|
{{ w?.composers?.join("; ") }} / {{ w?.title }}
|
|
207
215
|
<div v-if="w.has_recording" class="toolTip">
|
|
208
|
-
<a
|
|
216
|
+
<a @click="showAudioLinks">
|
|
209
217
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultsGrid__icon">
|
|
210
218
|
<circle cx="9" cy="9" r="9" fill="#14284E"/>
|
|
211
219
|
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
212
220
|
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
213
221
|
</svg>
|
|
214
222
|
</a>
|
|
223
|
+
<audio-links :audio-id="item.bso_audio_id" extraClasses="-inGrid" />
|
|
215
224
|
<span class="toolTip__text">Access Audio</span>
|
|
216
225
|
</div>
|
|
217
226
|
</div>
|
|
@@ -247,7 +256,7 @@
|
|
|
247
256
|
${(index + 1 == items.length && (i + 1 == item.works.length || i == 5)) ? '-last' : ''}`">
|
|
248
257
|
{{ w?.composers?.join("; ") }} / {{ w?.title }}
|
|
249
258
|
<div v-if="w.has_recording" class="toolTip">
|
|
250
|
-
<a
|
|
259
|
+
<a @click="showAudioLinks">
|
|
251
260
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultsGrid__icon">
|
|
252
261
|
<circle cx="9" cy="9" r="9" fill="#14284E"/>
|
|
253
262
|
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -255,6 +264,7 @@
|
|
|
255
264
|
</svg>
|
|
256
265
|
|
|
257
266
|
</a>
|
|
267
|
+
<audio-links :audio-id="item.bso_audio_id" extraClasses="-inGrid" />
|
|
258
268
|
<span class="toolTip__text">Access Audio</span>
|
|
259
269
|
</div>
|
|
260
270
|
</div>
|
|
@@ -377,7 +387,7 @@
|
|
|
377
387
|
{ facet: 'works.artists.role', value: item.artist_role },
|
|
378
388
|
{ facet: 'works.title', value: item.work_title }
|
|
379
389
|
])">
|
|
380
|
-
|
|
390
|
+
{{ item.num_performances }} Performances
|
|
381
391
|
|
|
382
392
|
</a>
|
|
383
393
|
</div>
|
|
@@ -436,7 +446,7 @@
|
|
|
436
446
|
<a :href="createURL([{ facet: 'works.composers', value: item.composers},
|
|
437
447
|
{ facet: 'works.title', value: item.title}
|
|
438
448
|
])">
|
|
439
|
-
|
|
449
|
+
{{ item.num_performances }} Performances
|
|
440
450
|
</a>
|
|
441
451
|
</div>
|
|
442
452
|
</template>
|
|
@@ -485,6 +485,8 @@
|
|
|
485
485
|
<ais-search-box class="searchBox" >
|
|
486
486
|
<template v-slot="{ currentRefinement, isSearchStalled, refine }">
|
|
487
487
|
<label for="searchbox" class="label__hidden">{{ props.searchPlaceholder }}</label>
|
|
488
|
+
<button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
|
|
489
|
+
</button>
|
|
488
490
|
<input
|
|
489
491
|
class="ais-SearchBox-input input"
|
|
490
492
|
id="searchbox"
|
|
@@ -493,8 +495,7 @@
|
|
|
493
495
|
@input="refine($event.currentTarget.value)"
|
|
494
496
|
:placeholder="props.searchPlaceholder"
|
|
495
497
|
>
|
|
496
|
-
|
|
497
|
-
</button>
|
|
498
|
+
|
|
498
499
|
<span :hidden="!isSearchStalled">Loading...</span>
|
|
499
500
|
</template>
|
|
500
501
|
</ais-search-box>
|
|
@@ -597,10 +598,10 @@
|
|
|
597
598
|
<template v-slot="{items, refine, searchForItems, isFromSearch}">
|
|
598
599
|
|
|
599
600
|
<div class="accordion__content" v-if="items.length || isFromSearch">
|
|
600
|
-
|
|
601
|
+
<div class="ais-SearchBox searchBox -filter">
|
|
601
602
|
<label class="label__hidden" :for="refinement.attribute">{{ refinement.placeholder }}</label>
|
|
602
603
|
<form class="searchBox__form" @submit="$event.preventDefault()" @reset="searchForItems('')">
|
|
603
|
-
<input type="text" :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter
|
|
604
|
+
<input type="text" :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter" v-if="!refinement.hideSearch">
|
|
604
605
|
<button v-if="isFromSearch"
|
|
605
606
|
class="ais-SearchBox-reset"
|
|
606
607
|
type="reset"
|
|
@@ -613,7 +614,7 @@
|
|
|
613
614
|
</svg>
|
|
614
615
|
</button>
|
|
615
616
|
</form>
|
|
616
|
-
|
|
617
|
+
</div>
|
|
617
618
|
<div class="checkBoxes">
|
|
618
619
|
<span class="checkBoxes__alert" v-if="!items.length"><span class="checkBoxes__alertIcon">!</span>No matches found</span>
|
|
619
620
|
<label v-for="item in items" class="checkBoxes__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
|
|
@@ -644,9 +645,9 @@
|
|
|
644
645
|
<summary class="accordion__summary">
|
|
645
646
|
<h6 :class="`accordion__heading ${ !(items.length || isFromSearch) ? '-gray' : ''}`">{{ refinement.title }}</h6>
|
|
646
647
|
<div class="accordion__iconWrapper" v-if="items.length">
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
648
|
+
<svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation" viewBox="0 0 18 18" fill="none">
|
|
649
|
+
<path d="M7 17L15 9L7 1" stroke="var(--icon-color, currentColor)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
650
|
+
</svg>
|
|
650
651
|
</div>
|
|
651
652
|
</summary>
|
|
652
653
|
<div class="accordion__content" v-if="items.length || isFromSearch">
|
|
@@ -688,26 +689,26 @@
|
|
|
688
689
|
</div>
|
|
689
690
|
</summary>
|
|
690
691
|
<div class="accordion__content">
|
|
691
|
-
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and" limit="100" >
|
|
692
|
+
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and" :limit="100" >
|
|
692
693
|
<template v-slot="{ items, refine }">
|
|
693
694
|
<select @change="refine($event.currentTarget.value)">
|
|
694
|
-
<option>Select Country</option>
|
|
695
|
+
<option value="">Select Country</option>
|
|
695
696
|
<option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
|
|
696
697
|
</select>
|
|
697
698
|
</template>
|
|
698
699
|
</ais-menu-select>
|
|
699
|
-
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" limit="100"
|
|
700
|
+
<ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" :limit="100">
|
|
700
701
|
<template v-slot="{ items, refine }">
|
|
701
702
|
<select @change="refine($event.currentTarget.value)">
|
|
702
|
-
<option>Select State</option>
|
|
703
|
+
<option value="">Select State</option>
|
|
703
704
|
<option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
|
|
704
705
|
</select>
|
|
705
706
|
</template>
|
|
706
707
|
</ais-menu-select>
|
|
707
|
-
<ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and" limit="100">
|
|
708
|
+
<ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and" :limit="100">
|
|
708
709
|
<template v-slot="{ items, refine }">
|
|
709
710
|
<select @change="refine($event.currentTarget.value)">
|
|
710
|
-
<option>Select City</option>
|
|
711
|
+
<option value="">Select City</option>
|
|
711
712
|
<option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
|
|
712
713
|
</select>
|
|
713
714
|
</template>
|
|
@@ -7,10 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
&__box {
|
|
9
9
|
display:none;
|
|
10
|
+
right: 5rem;
|
|
11
|
+
margin-top: 2rem;
|
|
12
|
+
&.-inGrid {
|
|
13
|
+
right: 0rem;
|
|
14
|
+
left: -7rem;
|
|
15
|
+
width: 15rem;
|
|
16
|
+
margin-top: 0;
|
|
17
|
+
}
|
|
10
18
|
&.-open {
|
|
11
19
|
position:absolute;
|
|
12
|
-
|
|
13
|
-
margin-top: 2rem;
|
|
20
|
+
|
|
14
21
|
z-index: 100;
|
|
15
22
|
display:block;
|
|
16
23
|
}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
min-height: 1.8rem;
|
|
5
5
|
overflow-y: auto;
|
|
6
6
|
padding-bottom: 0.5rem;
|
|
7
|
-
padding-left: 0.5rem;
|
|
8
7
|
input[type=checkbox] {
|
|
9
8
|
border: thin solid var(--color-gray-100);
|
|
10
9
|
background-color: var(--color-white);
|
|
@@ -48,7 +47,7 @@
|
|
|
48
47
|
background-color: var(--color-turquoise);
|
|
49
48
|
border: thin solid var(--color-turquoise);
|
|
50
49
|
&::before {
|
|
51
|
-
display: block;
|
|
50
|
+
//display: block;
|
|
52
51
|
background: var(--color-gray-200);
|
|
53
52
|
}
|
|
54
53
|
}
|
|
@@ -10,16 +10,18 @@
|
|
|
10
10
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
11
11
|
font-size: 0.75rem;
|
|
12
12
|
font-weight: 100;
|
|
13
|
-
|
|
14
|
-
left:
|
|
13
|
+
height: 1.8rem;
|
|
14
|
+
left: -1.2rem;
|
|
15
15
|
margin-left: -100%;
|
|
16
16
|
opacity: 0;
|
|
17
17
|
padding: 5px 0;
|
|
18
18
|
position: absolute;
|
|
19
19
|
text-align: center;
|
|
20
|
+
text-wrap: nowrap;
|
|
21
|
+
top: 2rem;
|
|
20
22
|
transition: opacity 0.3s;
|
|
21
23
|
visibility: hidden;
|
|
22
|
-
width:
|
|
24
|
+
width: 6rem;
|
|
23
25
|
z-index: 1;
|
|
24
26
|
}
|
|
25
27
|
&__text::after {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
background-color: #FDF9F7;
|
|
8
8
|
@include at (md) {
|
|
9
9
|
padding: .5rem;
|
|
10
|
-
margin: .5rem
|
|
10
|
+
margin: .5rem 0;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
height: 40px;
|
|
@@ -88,6 +88,6 @@
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
.searchBox:
|
|
92
|
-
border:
|
|
91
|
+
.searchBox:has(input:focus) {
|
|
92
|
+
border: 1px solid var(--color-turquoise);
|
|
93
93
|
}
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
position: sticky;
|
|
117
117
|
//bottom: 0;
|
|
118
118
|
z-index: 3;
|
|
119
|
-
height:
|
|
119
|
+
height: 80px;
|
|
120
120
|
width: 100vw;
|
|
121
121
|
box-shadow: 0 -30px 30px var(--color-gray-100);
|
|
122
122
|
background-color: white;
|
|
@@ -125,7 +125,6 @@
|
|
|
125
125
|
}
|
|
126
126
|
.ais-ClearRefinements {
|
|
127
127
|
width: 100%;
|
|
128
|
-
height: 100%;
|
|
129
128
|
display: grid;
|
|
130
129
|
grid-template-columns: 1fr 1fr;
|
|
131
130
|
align-items: center;
|
|
@@ -140,27 +139,28 @@
|
|
|
140
139
|
}
|
|
141
140
|
button.filterApply,
|
|
142
141
|
button.filterClear {
|
|
142
|
+
border-radius: 5px;
|
|
143
|
+
border: 0;
|
|
143
144
|
gap: 1rem;
|
|
144
145
|
justify-content: space-between;
|
|
145
|
-
width: 90%;
|
|
146
|
-
height: 80%;
|
|
147
146
|
justify-self: center;
|
|
148
|
-
border: 0;
|
|
149
|
-
border-radius: 5px;
|
|
150
147
|
padding: 1rem;
|
|
151
|
-
|
|
148
|
+
width: 90%;
|
|
152
149
|
}
|
|
153
150
|
button.filterClear {
|
|
154
151
|
background-color: var(--color-gray-100);
|
|
155
152
|
border: none;
|
|
156
|
-
height:
|
|
153
|
+
height: 110%;
|
|
157
154
|
|
|
158
155
|
}
|
|
159
156
|
button.filterApply {
|
|
160
157
|
background-color: var(--color-turquoise);
|
|
161
158
|
color: var(--color-dark-blue);
|
|
162
159
|
font-weight: 600;
|
|
160
|
+
height: 94%;
|
|
163
161
|
margin-right: 1rem;
|
|
162
|
+
position: relative;
|
|
163
|
+
top: .3rem;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
}
|
|
@@ -272,11 +272,13 @@
|
|
|
272
272
|
&__wrapper {
|
|
273
273
|
overflow-y: scroll;
|
|
274
274
|
width: 100%;
|
|
275
|
-
height:
|
|
275
|
+
height: 97%;
|
|
276
|
+
padding-top: 0.5rem;
|
|
276
277
|
@include at(lg) {
|
|
277
278
|
overflow: hidden;
|
|
278
279
|
display: grid;
|
|
279
280
|
height: auto;
|
|
281
|
+
padding-top: 0;
|
|
280
282
|
}
|
|
281
283
|
}
|
|
282
284
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
padding: 0 1.5rem;
|
|
7
7
|
@include at(lg) {
|
|
8
8
|
padding: 0;
|
|
9
|
-
grid-template-columns: repeat(7, 1fr);
|
|
9
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&__cell {
|
|
@@ -28,6 +28,10 @@
|
|
|
28
28
|
a {
|
|
29
29
|
color: var(--color-dark-blue);
|
|
30
30
|
}
|
|
31
|
+
a:hover {
|
|
32
|
+
color: var(--color-dark-blue);
|
|
33
|
+
text-decoration: underline;
|
|
34
|
+
}
|
|
31
35
|
|
|
32
36
|
&.-artist {
|
|
33
37
|
border-left: none;
|
|
@@ -150,9 +154,6 @@
|
|
|
150
154
|
position: relative;
|
|
151
155
|
left: 0.1rem;
|
|
152
156
|
}
|
|
153
|
-
&__lightLink {
|
|
154
|
-
color: var(--color-turquoise);
|
|
155
|
-
}
|
|
156
157
|
|
|
157
158
|
&__mobileHeader {
|
|
158
159
|
display: block;
|
|
@@ -168,7 +169,6 @@
|
|
|
168
169
|
}
|
|
169
170
|
.toolTip__text {
|
|
170
171
|
width: 6rem;
|
|
171
|
-
left: -
|
|
172
|
-
margin-top:1rem;
|
|
172
|
+
left: -1.2rem;
|
|
173
173
|
}
|
|
174
174
|
}
|