lucos_search_component 0.0.8 → 0.0.10

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.
Files changed (3) hide show
  1. package/example/index.html +7 -7
  2. package/index.js +58 -14
  3. package/package.json +1 -1
package/example/index.html CHANGED
@@ -3,16 +3,16 @@
3
3
  <title>Hello World Search Component</title>
4
4
  </head>
5
5
  <body>
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>
6
+ <label for="search1">Everything:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="search1"></select></span>
7
+ <label for="search2">No Tracks:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search2"></select></span>
8
+ <label for="search3">Only Cites and Rivers:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="City,River"><select id="search3"></select></span>
9
+ <label for="search4">Load with existing items:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="search4" multiple>
10
10
  <option id="https://contacts.l42.eu/people/2" selected>https://contacts.l42.eu/people/2</option>
11
11
  <option id="https://eolas.l42.eu/metadata/place/2/" selected>https://eolas.l42.eu/metadata/place/2/</option>
12
12
  <option id="https://media-metadata.l42.eu/tracks/13713" selected>https://media-metadata.l42.eu/tracks/13713</option>
13
- </select>
13
+ </select></span>
14
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>
15
+ <span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search5" multiple>
16
16
  <option value="https://eolas.l42.eu/metadata/place/125/" selected>https://eolas.l42.eu/metadata/place/125/</option>
17
17
  <option value="https://eolas.l42.eu/metadata/place/126/" selected>https://eolas.l42.eu/metadata/place/126/</option>
18
18
  <option value="https://eolas.l42.eu/metadata/place/28/" selected>https://eolas.l42.eu/metadata/place/28/</option>
@@ -26,7 +26,7 @@
26
26
  <option value="https://eolas.l42.eu/metadata/place/315/" selected>https://eolas.l42.eu/metadata/place/315/</option>
27
27
  <option value="https://eolas.l42.eu/metadata/place/316/" selected>https://eolas.l42.eu/metadata/place/316/</option>
28
28
  <option value="https://eolas.l42.eu/metadata/place/317/" selected>https://eolas.l42.eu/metadata/place/317/</option>
29
- </select>
29
+ </select></span>
30
30
  <script src="./built.js"></script>
31
31
  </body>
32
32
  </html>
package/index.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import TomSelect from 'tom-select';
2
2
  import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
3
3
 
4
- class LucosSearchComponent extends HTMLSelectElement {
4
+ class LucosSearchComponent extends HTMLSpanElement {
5
5
  static get observedAttributes() {
6
6
  return ['data-api-key','data-types','data-exclude-types'];
7
7
  }
8
8
  constructor() {
9
9
  super();
10
10
  const component = this;
11
+ const shadow = component.attachShadow({mode: 'open'});
11
12
 
12
13
  const mainStyle = document.createElement('style');
13
14
  mainStyle.textContent = `
@@ -50,6 +51,34 @@ class LucosSearchComponent extends HTMLSelectElement {
50
51
  --lozenge-background: #044E00;
51
52
  --lozenge-border: #033100;
52
53
  }
54
+ /** Aquatic Places **/
55
+ .lozenge[data-type="Ocean"], .lozenge[data-type="Sea"], .lozenge[data-type="Sea Inlet"], .lozenge[data-type="River"], .lozenge[data-type="Lake"] {
56
+ --lozenge-background: #0085fe;
57
+ --lozenge-border: #0036b1;
58
+ }
59
+ /** Terrestrial Places **/
60
+ .lozenge[data-type="Archipelago"], .lozenge[data-type="Area Of Outstanding Natural Beauty"], .lozenge[data-type="Continent"], .lozenge[data-type="Historical Site"], .lozenge[data-type="Island"], .lozenge[data-type="Mountain"] {
61
+ --lozenge-background: #652c17;
62
+ --lozenge-border: #321200;
63
+ }
64
+ /** Cosmic Places **/
65
+ .lozenge[data-type="Galaxy"], .lozenge[data-type="Planetary System"], .lozenge[data-type="Star"], .lozenge[data-type="Planet"], .lozenge[data-type="Natural Satellite"] {
66
+ --lozenge-background: #15163a;
67
+ --lozenge-border: #000000;
68
+ --lozenge-text: #feffe8;
69
+ }
70
+ /** Human Places **/
71
+ .lozenge[data-type="Airport"], .lozenge[data-type="Autonomous Area"], .lozenge[data-type="City"], .lozenge[data-type="Country"], .lozenge[data-type="County"], .lozenge[data-type="Dependent Territory"], .lozenge[data-type="Historical Site"], .lozenge[data-type="Neighbourhood"], .lozenge[data-type="Province"], .lozenge[data-type="Region"], .lozenge[data-type="Road"], .lozenge[data-type="State"], .lozenge[data-type="Town"], .lozenge[data-type="Tribal Nation"], .lozenge[data-type="Village"] {
72
+ --lozenge-background: #aed0db;
73
+ --lozenge-border: #3f6674;
74
+ --lozenge-text: #0c1a1b;
75
+ }
76
+ /** Supernatural Places **/
77
+ .lozenge[data-type="Supernatural Realm"] {
78
+ --lozenge-background: #f1ff5f;
79
+ --lozenge-border: #674800;
80
+ --lozenge-text: #352005;
81
+ }
53
82
  .lozenge.active {
54
83
  --lozenge-border: #b00;
55
84
  }
@@ -58,18 +87,21 @@ class LucosSearchComponent extends HTMLSelectElement {
58
87
  padding: 2px 6px;
59
88
  }
60
89
  `;
61
- component.appendChild(mainStyle);
90
+ shadow.appendChild(mainStyle);
62
91
 
63
92
  // If webpack is configured with `css-loader` but not `style-loader`, include the tom-select stylesheet here
64
93
  // (If `style-loader` is being used, the tom-select stylesheet will be handled by that)
65
94
  if (tomSelectStylesheet) {
66
95
  const tomStyle = document.createElement('style');
67
96
  tomStyle.textContent = tomSelectStylesheet[0][1];
68
- component.appendChild(tomStyle);
97
+ shadow.appendChild(tomStyle);
69
98
  }
70
99
 
71
- component.setAttribute("multiple", "multiple");
72
- new TomSelect(component, {
100
+ const selector = component.querySelector("select");
101
+ if (!selector) throw new Error("Can't find select element in lucos-search");
102
+ shadow.append(selector);
103
+ selector.setAttribute("multiple", "multiple");
104
+ new TomSelect(selector, {
73
105
  valueField: 'id',
74
106
  labelField: 'pref_label',
75
107
  searchField: [],
@@ -77,9 +109,12 @@ class LucosSearchComponent extends HTMLSelectElement {
77
109
  const queryParams = new URLSearchParams({
78
110
  q: query,
79
111
  });
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);
112
+ if (component.getAttribute("data-types")) {
113
+ queryParams.set("filter_by",`type:[${component.getAttribute("data-types")}]`);
114
+ } else if (component.getAttribute("data-exclude_types")) {
115
+ queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
116
+ }
117
+ const results = await component.searchRequest(queryParams);
83
118
  this.clearOptions();
84
119
  callback(results);
85
120
  },
@@ -102,9 +137,10 @@ class LucosSearchComponent extends HTMLSelectElement {
102
137
  if (ids.length < 1) return;
103
138
  const searchParams = new URLSearchParams({
104
139
  q: '*',
105
- ids: ids.join(","),
140
+ filter_by: `id:[${ids.join(",")}]`,
141
+ per_page: ids.length,
106
142
  });
107
- const results = await component.basicSearch(searchParams);
143
+ const results = await component.searchRequest(searchParams);
108
144
  results.forEach(result => {
109
145
  this.updateOption(result.id, result);
110
146
  });
@@ -119,18 +155,26 @@ class LucosSearchComponent extends HTMLSelectElement {
119
155
  },
120
156
  });
121
157
  }
122
- async basicSearch(searchParams) {
158
+ async searchRequest(searchParams) {
123
159
  const key = this.getAttribute("data-api-key");
124
160
  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}` },
161
+ searchParams.set('query_by', "pref_label,labels,description,lyrics");
162
+ searchParams.set('query_by_weights', "10,8,3,1");
163
+ searchParams.set('sort_by', "_text_match:desc,pref_label:asc");
164
+ searchParams.set('prioritize_num_matching_fields', false);
165
+ searchParams.set('include_fields', "id,pref_label,type");
166
+ const response = await fetch("https://arachne.l42.eu/search?"+searchParams.toString(), {
167
+ headers: { 'X-TYPESENSE-API-KEY': key },
127
168
  signal: AbortSignal.timeout(900),
128
169
  });
129
170
  const data = await response.json();
171
+ if (!response.ok) {
172
+ throw new Error(`Recieved ${response.status} error from search endpoint: ${data["message"]}`);
173
+ }
130
174
  const results = data.hits.map(result => {
131
175
  return {...result, ...result.document}
132
176
  });
133
177
  return results;
134
178
  }
135
179
  }
136
- customElements.define('lucos-search', LucosSearchComponent, { extends: "select" });
180
+ customElements.define('lucos-search', LucosSearchComponent, { extends: "span" });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lucos_search_component",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "description": "Web Component for searching lucOS data",
5
5
  "type": "module",
6
6
  "main": "index.js",