lucos_search_component 0.0.6 → 0.0.8
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 +24 -1
- package/index.js +33 -14
- package/package.json +1 -1
package/example/index.html
CHANGED
|
@@ -3,7 +3,30 @@
|
|
|
3
3
|
<title>Hello World Search Component</title>
|
|
4
4
|
</head>
|
|
5
5
|
<body>
|
|
6
|
-
<label for="
|
|
6
|
+
<label for="search1">Everything:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search1"></select>
|
|
7
|
+
<label for="search2">No Tracks:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search2" data-exclude_types="Track"></select>
|
|
8
|
+
<label for="search3">Only Cites and Rivers:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search3" data-types="City,River"></select>
|
|
9
|
+
<label for="search4">Load with existing items:</label><select is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" id="search4" 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>
|
|
14
|
+
<label for="search5">More than 10:</label>
|
|
15
|
+
<select is="lucos-search" id="search5" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track" multiple>
|
|
16
|
+
<option value="https://eolas.l42.eu/metadata/place/125/" selected>https://eolas.l42.eu/metadata/place/125/</option>
|
|
17
|
+
<option value="https://eolas.l42.eu/metadata/place/126/" selected>https://eolas.l42.eu/metadata/place/126/</option>
|
|
18
|
+
<option value="https://eolas.l42.eu/metadata/place/28/" selected>https://eolas.l42.eu/metadata/place/28/</option>
|
|
19
|
+
<option value="https://eolas.l42.eu/metadata/place/307/" selected>https://eolas.l42.eu/metadata/place/307/</option>
|
|
20
|
+
<option value="https://eolas.l42.eu/metadata/place/308/" selected>https://eolas.l42.eu/metadata/place/308/</option>
|
|
21
|
+
<option value="https://eolas.l42.eu/metadata/place/310/" selected>https://eolas.l42.eu/metadata/place/310/</option>
|
|
22
|
+
<option value="https://eolas.l42.eu/metadata/place/311/" selected>https://eolas.l42.eu/metadata/place/311/</option>
|
|
23
|
+
<option value="https://eolas.l42.eu/metadata/place/312/" selected>https://eolas.l42.eu/metadata/place/312/</option>
|
|
24
|
+
<option value="https://eolas.l42.eu/metadata/place/313/" selected>https://eolas.l42.eu/metadata/place/313/</option>
|
|
25
|
+
<option value="https://eolas.l42.eu/metadata/place/314/" selected>https://eolas.l42.eu/metadata/place/314/</option>
|
|
26
|
+
<option value="https://eolas.l42.eu/metadata/place/315/" selected>https://eolas.l42.eu/metadata/place/315/</option>
|
|
27
|
+
<option value="https://eolas.l42.eu/metadata/place/316/" selected>https://eolas.l42.eu/metadata/place/316/</option>
|
|
28
|
+
<option value="https://eolas.l42.eu/metadata/place/317/" selected>https://eolas.l42.eu/metadata/place/317/</option>
|
|
29
|
+
</select>
|
|
7
30
|
<script src="./built.js"></script>
|
|
8
31
|
</body>
|
|
9
32
|
</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();
|
|
@@ -74,35 +74,41 @@ class LucosSearchComponent extends HTMLSelectElement {
|
|
|
74
74
|
labelField: 'pref_label',
|
|
75
75
|
searchField: [],
|
|
76
76
|
load: async function(query, callback) {
|
|
77
|
-
const key = component.getAttribute("api-key");
|
|
78
|
-
if (!key) throw new Error("No `api-key` attribute set on `lucos-search` component");
|
|
79
77
|
const queryParams = new URLSearchParams({
|
|
80
78
|
q: query,
|
|
81
79
|
});
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
});
|
|
86
|
-
const data = await response.json();
|
|
87
|
-
const results = data.hits.map(result => {
|
|
88
|
-
return {...result, ...result.document}
|
|
89
|
-
});
|
|
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);
|
|
90
83
|
this.clearOptions();
|
|
91
84
|
callback(results);
|
|
92
85
|
},
|
|
93
86
|
plugins: {
|
|
94
87
|
remove_button:{
|
|
95
88
|
title:'Remove this item',
|
|
96
|
-
}
|
|
89
|
+
},
|
|
90
|
+
drag_drop: {},
|
|
97
91
|
},
|
|
98
|
-
onItemAdd: function() { // Workaround until https://github.com/orchidjs/tom-select/
|
|
92
|
+
onItemAdd: function() { // Workaround until https://github.com/orchidjs/tom-select/pull/945 is merged/released
|
|
99
93
|
this.setTextboxValue('');
|
|
100
|
-
this.clearOptions();
|
|
101
94
|
this.refreshOptions();
|
|
102
95
|
},
|
|
103
96
|
onFocus: function() {
|
|
104
97
|
this.clearOptions();
|
|
105
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
|
+
},
|
|
106
112
|
render:{
|
|
107
113
|
option: function(data, escape) {
|
|
108
114
|
return `<div>${escape(data.pref_label)}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
|
|
@@ -113,5 +119,18 @@ class LucosSearchComponent extends HTMLSelectElement {
|
|
|
113
119
|
},
|
|
114
120
|
});
|
|
115
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
|
+
}
|
|
116
135
|
}
|
|
117
136
|
customElements.define('lucos-search', LucosSearchComponent, { extends: "select" });
|