lucos_search_component 0.0.3 → 0.0.5

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 (6) hide show
  1. package/README.md +13 -0
  2. package/example/example.js +0 -2
  3. package/example/index.html +1 -1
  4. package/example/webpack.config.js +8 -0
  5. package/index.js +103 -20
  6. package/package.json +5 -1
package/README.md CHANGED
@@ -16,6 +16,19 @@ Include the following in your html:
16
16
  <lucos-search></lucos-search>
17
17
  ```
18
18
 
19
+ Include the following in the project's webpack.config.js:
20
+ ```
21
+
22
+ module: {
23
+ rules: [
24
+ {
25
+ test: /\.css$/i,
26
+ use: ["css-loader"],
27
+ },
28
+ ],
29
+ },
30
+ ```
31
+
19
32
  ## Manual Testing
20
33
 
21
34
  Expects a `.env` file in the root directory with the following environment variables:
package/example/example.js CHANGED
@@ -1,3 +1 @@
1
1
  import '../index.js';
2
-
3
- document.querySelector('lucos-search').searchAPI('luke')
package/example/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <title>Hello World Search Component</title>
4
4
  </head>
5
5
  <body>
6
- <lucos-search api-key="${KEY_LUCOS_ARACHNE}"></lucos-search>
6
+ <label for="search-field">Search For:</label><select is="lucos-search" api-key="${KEY_LUCOS_ARACHNE}" id="search-field"></select>
7
7
  <script src="./built.js"></script>
8
8
  </body>
9
9
  </html>
package/example/webpack.config.js CHANGED
@@ -7,5 +7,13 @@ export default {
7
7
  filename: 'built.js',
8
8
  path: new URL('.', import.meta.url).pathname,
9
9
  },
10
+ module: {
11
+ rules: [
12
+ {
13
+ test: /\.css$/i,
14
+ use: ["css-loader"],
15
+ },
16
+ ],
17
+ },
10
18
  mode: 'development',
11
19
  };
package/index.js CHANGED
@@ -1,30 +1,113 @@
1
- class LucosSearchComponent extends HTMLElement {
1
+ import TomSelect from 'tom-select';
2
+ import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
3
+
4
+ class LucosSearchComponent extends HTMLSelectElement {
2
5
  static get observedAttributes() {
3
6
  return ['api-key'];
4
7
  }
5
8
  constructor() {
6
9
  super();
7
- const shadow = this.attachShadow({mode: 'closed'});
10
+ const component = this;
8
11
 
9
- const results = document.createElement("span");
10
- this.updateResults = resultData => {
11
- results.innerText = JSON.stringify(resultData);
12
- }
13
- shadow.appendChild(results);
14
- }
15
- async searchAPI(query) {
16
- const key = this.getAttribute("api-key");
17
- if (!key) throw new Error("No `api-key` attribute set on `lucos-search` component");
12
+ const mainStyle = document.createElement('style');
13
+ mainStyle.textContent = `
14
+ .lozenge {
15
+ align-items: center;
16
+ vertical-align: baseline;
17
+ border-radius: 3px;
18
+ background-repeat: repeat-x;
19
+ border-style: solid;
20
+ border-width: 1px;
21
+ text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
22
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
18
23
 
19
- const queryParams = new URLSearchParams({
20
- q: query,
21
- });
22
- const response = await fetch("https://arachne.l42.eu/basic-search?"+queryParams.toString(), {
23
- headers: { Authorization: `key ${key}` },
24
- signal: AbortSignal.timeout(900),
24
+ /** Make the colour settings !important so they override the tom-select default style **/
25
+ background-image: linear-gradient(to bottom, #ffffff63, #24232347) !important;
26
+ background-color: var(--lozenge-background) !important;
27
+ border-color: var(--lozenge-border) !important;
28
+ color: var(--lozenge-text) !important;
29
+ }
30
+ .lozenge .remove {
31
+ border-left-color: var(--lozenge-border) !important;
32
+ }
33
+
34
+ /* Default colour to greys, but override based on type */
35
+ .lozenge {
36
+ --lozenge-background: #555;
37
+ --lozenge-border: #6d6d6d;
38
+ --lozenge-text: #fff;
39
+ }
40
+ /* Items from lucos_eolas have many types. For now, count any type which isn't specified later as part of eolas. */
41
+ .lozenge[data-type] {
42
+ --lozenge-background: #6a00c2;
43
+ --lozenge-border: #44265d;
44
+ }
45
+ .lozenge[data-type="Track"] {
46
+ --lozenge-background: #000060;
47
+ --lozenge-border: #000020;
48
+ }
49
+ .lozenge[data-type="Person"] {
50
+ --lozenge-background: #044E00;
51
+ --lozenge-border: #033100;
52
+ }
53
+ .lozenge.active {
54
+ --lozenge-border: #b00;
55
+ }
56
+ .type {
57
+ margin: 0 3px;
58
+ padding: 2px 6px;
59
+ }
60
+ `;
61
+ component.appendChild(mainStyle);
62
+
63
+ const tomStyle = document.createElement('style');
64
+ tomStyle.textContent = tomSelectStylesheet[0][1];
65
+ component.appendChild(tomStyle);
66
+
67
+ component.setAttribute("multiple", "multiple");
68
+ new TomSelect(component, {
69
+ valueField: 'id',
70
+ labelField: 'pref_label',
71
+ searchField: [],
72
+ 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
+ const queryParams = new URLSearchParams({
76
+ q: query,
77
+ });
78
+ const response = await fetch("https://arachne.l42.eu/basic-search?"+queryParams.toString(), {
79
+ headers: { Authorization: `key ${key}` },
80
+ signal: AbortSignal.timeout(900),
81
+ });
82
+ const data = await response.json();
83
+ const results = data.hits.map(result => {
84
+ return {...result, ...result.document}
85
+ });
86
+ this.clearOptions();
87
+ callback(results);
88
+ },
89
+ plugins: {
90
+ remove_button:{
91
+ title:'Remove this item',
92
+ }
93
+ },
94
+ onItemAdd: function() { // Workaround until https://github.com/orchidjs/tom-select/issues/854 is merged/released
95
+ this.setTextboxValue('');
96
+ this.clearOptions();
97
+ this.refreshOptions();
98
+ },
99
+ onFocus: function() {
100
+ this.clearOptions();
101
+ },
102
+ render:{
103
+ option: function(data, escape) {
104
+ return `<div>${escape(data.pref_label)}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
105
+ },
106
+ item: function(data, escape) {
107
+ return `<div class="lozenge" data-type="${escape(data.type)}">${escape(data.pref_label)}</div>`;
108
+ },
109
+ },
25
110
  });
26
- const data = await response.json();
27
- this.updateResults(data);
28
111
  }
29
112
  }
30
- customElements.define('lucos-search', LucosSearchComponent);
113
+ customElements.define('lucos-search', LucosSearchComponent, { extends: "select" });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lucos_search_component",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "Web Component for searching lucOS data",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -23,5 +23,9 @@
23
23
  "homepage": "https://github.com/lucas42/lucos_search_component#readme",
24
24
  "devDependencies": {
25
25
  "webpack-cli": "^6.0.1"
26
+ },
27
+ "dependencies": {
28
+ "tom-select": "^2.4.3",
29
+ "css-loader": "^7.1.2"
26
30
  }
27
31
  }