lucos_search_component 0.0.5 → 0.0.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.
- package/example/index.html +8 -1
- package/index.js +37 -14
- package/package.json +1 -1
package/example/index.html
CHANGED
|
@@ -3,7 +3,14 @@
|
|
|
3
3
|
<title>Hello World Search Component</title>
|
|
4
4
|
</head>
|
|
5
5
|
<body>
|
|
6
|
-
<label for="search-field">
|
|
6
|
+
<label for="search-field">Everything:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search-field"></select>
|
|
7
|
+
<label for="search-field">No Tracks:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search-field" data-exclude_types="Track"></select>
|
|
8
|
+
<label for="search-field">Only Cites and Rivers:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search-field" data-types="City,River"></select>
|
|
9
|
+
<label for="search-field">Load with existing items</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search-field" multiple>
|
|
10
|
+
<option id="https://contacts.l42.eu/people/2" selected>https://contacts.l42.eu/people/2</option>
|
|
11
|
+
<option id="https://eolas.l42.eu/metadata/place/2/" selected>https://eolas.l42.eu/metadata/place/2/</option>
|
|
12
|
+
<option id="https://media-metadata.l42.eu/tracks/13713" selected>https://media-metadata.l42.eu/tracks/13713</option>
|
|
13
|
+
</select>
|
|
7
14
|
<script src="./built.js"></script>
|
|
8
15
|
</body>
|
|
9
16
|
</html>
|
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
|
|
|
3
3
|
|
|
4
4
|
class LucosSearchComponent extends HTMLSelectElement {
|
|
5
5
|
static get observedAttributes() {
|
|
6
|
-
return ['api-key'];
|
|
6
|
+
return ['data-api-key','data-types','data-exclude-types'];
|
|
7
7
|
}
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
@@ -60,9 +60,13 @@ class LucosSearchComponent extends HTMLSelectElement {
|
|
|
60
60
|
`;
|
|
61
61
|
component.appendChild(mainStyle);
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
// If webpack is configured with `css-loader` but not `style-loader`, include the tom-select stylesheet here
|
|
64
|
+
// (If `style-loader` is being used, the tom-select stylesheet will be handled by that)
|
|
65
|
+
if (tomSelectStylesheet) {
|
|
66
|
+
const tomStyle = document.createElement('style');
|
|
67
|
+
tomStyle.textContent = tomSelectStylesheet[0][1];
|
|
68
|
+
component.appendChild(tomStyle);
|
|
69
|
+
}
|
|
66
70
|
|
|
67
71
|
component.setAttribute("multiple", "multiple");
|
|
68
72
|
new TomSelect(component, {
|
|
@@ -70,19 +74,12 @@ class LucosSearchComponent extends HTMLSelectElement {
|
|
|
70
74
|
labelField: 'pref_label',
|
|
71
75
|
searchField: [],
|
|
72
76
|
load: async function(query, callback) {
|
|
73
|
-
const key = component.getAttribute("api-key");
|
|
74
|
-
if (!key) throw new Error("No `api-key` attribute set on `lucos-search` component");
|
|
75
77
|
const queryParams = new URLSearchParams({
|
|
76
78
|
q: query,
|
|
77
79
|
});
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
});
|
|
82
|
-
const data = await response.json();
|
|
83
|
-
const results = data.hits.map(result => {
|
|
84
|
-
return {...result, ...result.document}
|
|
85
|
-
});
|
|
80
|
+
if (component.getAttribute("data-types")) queryParams.set("types",component.getAttribute("data-types"));
|
|
81
|
+
if (component.getAttribute("data-exclude_types")) queryParams.set("exclude_types",component.getAttribute("data-exclude_types"));
|
|
82
|
+
const results = await component.basicSearch(queryParams);
|
|
86
83
|
this.clearOptions();
|
|
87
84
|
callback(results);
|
|
88
85
|
},
|
|
@@ -99,6 +96,19 @@ class LucosSearchComponent extends HTMLSelectElement {
|
|
|
99
96
|
onFocus: function() {
|
|
100
97
|
this.clearOptions();
|
|
101
98
|
},
|
|
99
|
+
// On startup, update any existing options with latest data from search
|
|
100
|
+
onInitialize: async function() {
|
|
101
|
+
const ids = Object.keys(this.options);
|
|
102
|
+
if (ids.length < 1) return;
|
|
103
|
+
const searchParams = new URLSearchParams({
|
|
104
|
+
q: '*',
|
|
105
|
+
ids: ids.join(","),
|
|
106
|
+
});
|
|
107
|
+
const results = await component.basicSearch(searchParams);
|
|
108
|
+
results.forEach(result => {
|
|
109
|
+
this.updateOption(result.id, result);
|
|
110
|
+
});
|
|
111
|
+
},
|
|
102
112
|
render:{
|
|
103
113
|
option: function(data, escape) {
|
|
104
114
|
return `<div>${escape(data.pref_label)}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
|
|
@@ -109,5 +119,18 @@ class LucosSearchComponent extends HTMLSelectElement {
|
|
|
109
119
|
},
|
|
110
120
|
});
|
|
111
121
|
}
|
|
122
|
+
async basicSearch(searchParams) {
|
|
123
|
+
const key = this.getAttribute("data-api-key");
|
|
124
|
+
if (!key) throw new Error("No `data-api-key` attribute set on `lucos-search` component");
|
|
125
|
+
const response = await fetch("https://arachne.l42.eu/basic-search?"+searchParams.toString(), {
|
|
126
|
+
headers: { Authorization: `key ${key}` },
|
|
127
|
+
signal: AbortSignal.timeout(900),
|
|
128
|
+
});
|
|
129
|
+
const data = await response.json();
|
|
130
|
+
const results = data.hits.map(result => {
|
|
131
|
+
return {...result, ...result.document}
|
|
132
|
+
});
|
|
133
|
+
return results;
|
|
134
|
+
}
|
|
112
135
|
}
|
|
113
136
|
customElements.define('lucos-search', LucosSearchComponent, { extends: "select" });
|