lucos_search_component 0.0.2 → 0.0.4

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