lucos_search_component 0.1.2 → 0.1.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.
- package/README.md +38 -4
- package/dist/index.js +29 -4
- package/example/index.html +25 -19
- package/package.json +1 -1
- package/web-components/lucos-lang.js +29 -4
package/README.md
CHANGED
|
@@ -6,22 +6,56 @@ Web Component for searching lucOS data
|
|
|
6
6
|
* Web Components
|
|
7
7
|
|
|
8
8
|
## Usage
|
|
9
|
+
|
|
9
10
|
Include the following in your javascript:
|
|
10
11
|
```
|
|
11
12
|
import 'lucos_search_component';
|
|
12
13
|
```
|
|
13
14
|
|
|
15
|
+
Then pick the relevant component
|
|
16
|
+
### Search
|
|
17
|
+
|
|
18
|
+
Searches all items available in [lucos_arachne](https://github.com/lucas42/lucos_arachne)
|
|
19
|
+
|
|
14
20
|
Include the following in your html:
|
|
15
21
|
```
|
|
16
22
|
<span is="lucos-search">
|
|
17
|
-
<select>
|
|
18
|
-
<option>
|
|
19
|
-
<option>
|
|
20
|
-
<option>
|
|
23
|
+
<select multiple>
|
|
24
|
+
<option selected>https://contacts.l42.eu/people/2</option>
|
|
25
|
+
<option selected>https://eolas.l42.eu/metadata/place/2/</option>
|
|
26
|
+
<option selected>https://media-metadata.l42.eu/tracks/13713</option>
|
|
21
27
|
</select>
|
|
22
28
|
</span>
|
|
23
29
|
```
|
|
30
|
+
Selected options use the item's URI as their value.
|
|
31
|
+
|
|
32
|
+
The following attributes can be added to the lucos-search span:
|
|
33
|
+
* **data-api-key** \[required\] — a valid API key for the production instance of [lucos_arachne](https://github.com/lucas42/lucos_arachne), as generated by [lucos_creds](https://github.com/lucas42/lucos_creds).
|
|
34
|
+
* **data-types** — A comma separated list of item types to search for (defaults to all types).
|
|
35
|
+
* **data-exclude-types** — A comma separated list of item types to exclude from the search (ignored if `data-types` is set).
|
|
36
|
+
|
|
37
|
+
### Languages
|
|
38
|
+
|
|
39
|
+
Language selector, grouped by language families.
|
|
40
|
+
|
|
41
|
+
Include the following in your html:
|
|
42
|
+
```
|
|
43
|
+
<span is="lucos-lang">
|
|
44
|
+
<select multiple>
|
|
45
|
+
<option selected>en</option>
|
|
46
|
+
<option selected>ga</option>
|
|
47
|
+
<option selected>ain</option>
|
|
48
|
+
</select>
|
|
49
|
+
</span>
|
|
50
|
+
```
|
|
51
|
+
Selected options use a language's ISO 639 code.
|
|
52
|
+
Note: [lucos_arachne](https://github.com/lucas42/lucos_arachne) has a mixture of ISO 639-1, ISO 639-2, ISO 639-3 and ISO 639-6 codes as well as some custom codes for artificial languages. The code used must match what's in lucos_arachne.
|
|
53
|
+
|
|
24
54
|
|
|
55
|
+
The following attributes can be added to the lucos-lang span:
|
|
56
|
+
* **data-api-key** \[required\] — a valid API key for the production instance of [lucos_arachne](https://github.com/lucas42/lucos_arachne), as generated by [lucos_creds](https://github.com/lucas42/lucos_creds).
|
|
57
|
+
* **data-no-lang** — The name to give for a "no language" option. Defaults to not having a no language option. If selected, the code returned will be `zxx` (The ISO 639 code which denotes absence of linguistic content)
|
|
58
|
+
* **data-common** — A comma separated list of language codes to put in a separate "Common Languages" group at the top of the selections. This removes the provided languages from their normal family; they'll only be listed under Common Languages. Unrecognised language codes in this list are ignored.
|
|
25
59
|
|
|
26
60
|
## Manual Testing
|
|
27
61
|
|
package/dist/index.js
CHANGED
|
@@ -5823,7 +5823,7 @@ customElements.define('lucos-search', LucosSearchComponent, { extends: "span" })
|
|
|
5823
5823
|
|
|
5824
5824
|
class LucosLangComponent extends HTMLSpanElement {
|
|
5825
5825
|
static get observedAttributes() {
|
|
5826
|
-
return ['data-api-key'];
|
|
5826
|
+
return ['data-api-key','data-no-lang', 'data-common'];
|
|
5827
5827
|
}
|
|
5828
5828
|
constructor() {
|
|
5829
5829
|
super();
|
|
@@ -5884,6 +5884,7 @@ class LucosLangComponent extends HTMLSpanElement {
|
|
|
5884
5884
|
labelField: 'label',
|
|
5885
5885
|
searchField: ['code','label'],
|
|
5886
5886
|
optgroupField: 'family',
|
|
5887
|
+
lockOptgroupOrder: true,
|
|
5887
5888
|
closeAfterSelect: true,
|
|
5888
5889
|
plugins: {
|
|
5889
5890
|
remove_button:{
|
|
@@ -5898,11 +5899,31 @@ class LucosLangComponent extends HTMLSpanElement {
|
|
|
5898
5899
|
// On startup, update any existing options with latest data from search
|
|
5899
5900
|
onInitialize: async function() {
|
|
5900
5901
|
const families = await component.getLanguageFamilies();
|
|
5901
|
-
|
|
5902
|
+
const languages = await component.getLanguages();
|
|
5903
|
+
|
|
5904
|
+
// If there's an attribute for a no language option, put that top of the list
|
|
5905
|
+
if (component.hasAttribute("data-no-lang")) {
|
|
5906
|
+
languages.unshift({
|
|
5907
|
+
code: 'zxx', // ISO 639 code to denote absence of linguistic content
|
|
5908
|
+
label: component.getAttribute("data-no-lang"),
|
|
5909
|
+
});
|
|
5910
|
+
}
|
|
5911
|
+
if (component.hasAttribute("data-common")) {
|
|
5912
|
+
const commonLangs = component.getAttribute("data-common").split(",");
|
|
5913
|
+
console.log(commonLangs);
|
|
5914
|
+
families.unshift({ // Put common languages as top option
|
|
5915
|
+
code: 'x-common',
|
|
5916
|
+
label: 'common languages',
|
|
5917
|
+
});
|
|
5918
|
+
languages.forEach(language => {
|
|
5919
|
+
if (commonLangs.includes(language.code)) {
|
|
5920
|
+
language.family = 'x-common';
|
|
5921
|
+
}
|
|
5922
|
+
});
|
|
5923
|
+
}
|
|
5902
5924
|
families.forEach(family => {
|
|
5903
5925
|
this.addOptionGroup(family.code, family);
|
|
5904
5926
|
});
|
|
5905
|
-
const languages = await component.getLanguages();
|
|
5906
5927
|
languages.forEach(language => {
|
|
5907
5928
|
this.updateOption(language.code, language); // Updates any existing options which are selected with the correct label
|
|
5908
5929
|
this.addOption(language); // Makes the option available for new selections
|
|
@@ -5914,7 +5935,11 @@ class LucosLangComponent extends HTMLSpanElement {
|
|
|
5914
5935
|
},
|
|
5915
5936
|
render:{
|
|
5916
5937
|
item: function(data, escape) {
|
|
5917
|
-
|
|
5938
|
+
if (data.url) {
|
|
5939
|
+
return `<div class="lozenge" data-url="${escape(data.url)}"><a href="${escape(data.url)}" target="_blank">${escape(data.label)}</a></div>`;
|
|
5940
|
+
} else {
|
|
5941
|
+
return `<div class="lozenge">${escape(data.label)}</div>`;
|
|
5942
|
+
}
|
|
5918
5943
|
},
|
|
5919
5944
|
},
|
|
5920
5945
|
});
|
package/example/index.html
CHANGED
|
@@ -8,33 +8,39 @@
|
|
|
8
8
|
<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>
|
|
9
9
|
<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>
|
|
10
10
|
<label for="search4">Load with existing items:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="search4" multiple>
|
|
11
|
-
<option
|
|
12
|
-
<option
|
|
13
|
-
<option
|
|
11
|
+
<option selected>https://contacts.l42.eu/people/2</option>
|
|
12
|
+
<option selected>https://eolas.l42.eu/metadata/place/2/</option>
|
|
13
|
+
<option selected>https://media-metadata.l42.eu/tracks/13713</option>
|
|
14
14
|
</select></span>
|
|
15
15
|
<label for="search5">More than 10:</label>
|
|
16
16
|
<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search5" multiple>
|
|
17
|
-
<option
|
|
18
|
-
<option
|
|
19
|
-
<option
|
|
20
|
-
<option
|
|
21
|
-
<option
|
|
22
|
-
<option
|
|
23
|
-
<option
|
|
24
|
-
<option
|
|
25
|
-
<option
|
|
26
|
-
<option
|
|
27
|
-
<option
|
|
28
|
-
<option
|
|
29
|
-
<option
|
|
17
|
+
<option selected>https://eolas.l42.eu/metadata/place/125/</option>
|
|
18
|
+
<option selected>https://eolas.l42.eu/metadata/place/126/</option>
|
|
19
|
+
<option selected>https://eolas.l42.eu/metadata/place/28/</option>
|
|
20
|
+
<option selected>https://eolas.l42.eu/metadata/place/307/</option>
|
|
21
|
+
<option selected>https://eolas.l42.eu/metadata/place/308/</option>
|
|
22
|
+
<option selected>https://eolas.l42.eu/metadata/place/310/</option>
|
|
23
|
+
<option selected>https://eolas.l42.eu/metadata/place/311/</option>
|
|
24
|
+
<option selected>https://eolas.l42.eu/metadata/place/312/</option>
|
|
25
|
+
<option selected>https://eolas.l42.eu/metadata/place/313/</option>
|
|
26
|
+
<option selected>https://eolas.l42.eu/metadata/place/314/</option>
|
|
27
|
+
<option selected>https://eolas.l42.eu/metadata/place/315/</option>
|
|
28
|
+
<option selected>https://eolas.l42.eu/metadata/place/316/</option>
|
|
29
|
+
<option selected>https://eolas.l42.eu/metadata/place/317/</option>
|
|
30
30
|
</select></span>
|
|
31
31
|
<h1>lucos-lang</h1>
|
|
32
32
|
<label for="lang1">Blank:</label><span is="lucos-lang" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="lang1"></select></span>
|
|
33
33
|
<label for="lang2">Load with existing:</label><span is="lucos-lang" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="lang2" multiple>
|
|
34
|
-
<option
|
|
35
|
-
<option
|
|
36
|
-
<option
|
|
34
|
+
<option selected>ga</option>
|
|
35
|
+
<option selected>emen</option>
|
|
36
|
+
<option selected>art-x-simlish</option>
|
|
37
37
|
</select></span>
|
|
38
|
+
<label for="lang3">No lang option</label><span is="lucos-lang" data-api-key="${KEY_LUCOS_ARACHNE}" data-no-lang="No Language">
|
|
39
|
+
<select id="lang3" multiple><option selected>zxx</option></select>
|
|
40
|
+
</span>
|
|
41
|
+
<label for="lang3">Common languages option</label><span is="lucos-lang" data-api-key="${KEY_LUCOS_ARACHNE}" data-no-lang="No Language" data-common="en,ga,zxx">
|
|
42
|
+
<select id="lang3"></select>
|
|
43
|
+
</span>
|
|
38
44
|
<script src="./built.js"></script>
|
|
39
45
|
</body>
|
|
40
46
|
</html>
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
|
|
|
3
3
|
|
|
4
4
|
class LucosLangComponent extends HTMLSpanElement {
|
|
5
5
|
static get observedAttributes() {
|
|
6
|
-
return ['data-api-key'];
|
|
6
|
+
return ['data-api-key','data-no-lang', 'data-common'];
|
|
7
7
|
}
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
@@ -64,6 +64,7 @@ class LucosLangComponent extends HTMLSpanElement {
|
|
|
64
64
|
labelField: 'label',
|
|
65
65
|
searchField: ['code','label'],
|
|
66
66
|
optgroupField: 'family',
|
|
67
|
+
lockOptgroupOrder: true,
|
|
67
68
|
closeAfterSelect: true,
|
|
68
69
|
plugins: {
|
|
69
70
|
remove_button:{
|
|
@@ -78,11 +79,31 @@ class LucosLangComponent extends HTMLSpanElement {
|
|
|
78
79
|
// On startup, update any existing options with latest data from search
|
|
79
80
|
onInitialize: async function() {
|
|
80
81
|
const families = await component.getLanguageFamilies();
|
|
81
|
-
|
|
82
|
+
const languages = await component.getLanguages();
|
|
83
|
+
|
|
84
|
+
// If there's an attribute for a no language option, put that top of the list
|
|
85
|
+
if (component.hasAttribute("data-no-lang")) {
|
|
86
|
+
languages.unshift({
|
|
87
|
+
code: 'zxx', // ISO 639 code to denote absence of linguistic content
|
|
88
|
+
label: component.getAttribute("data-no-lang"),
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
if (component.hasAttribute("data-common")) {
|
|
92
|
+
const commonLangs = component.getAttribute("data-common").split(",");
|
|
93
|
+
console.log(commonLangs);
|
|
94
|
+
families.unshift({ // Put common languages as top option
|
|
95
|
+
code: 'x-common',
|
|
96
|
+
label: 'common languages',
|
|
97
|
+
});
|
|
98
|
+
languages.forEach(language => {
|
|
99
|
+
if (commonLangs.includes(language.code)) {
|
|
100
|
+
language.family = 'x-common';
|
|
101
|
+
}
|
|
102
|
+
})
|
|
103
|
+
}
|
|
82
104
|
families.forEach(family => {
|
|
83
105
|
this.addOptionGroup(family.code, family);
|
|
84
106
|
});
|
|
85
|
-
const languages = await component.getLanguages();
|
|
86
107
|
languages.forEach(language => {
|
|
87
108
|
this.updateOption(language.code, language); // Updates any existing options which are selected with the correct label
|
|
88
109
|
this.addOption(language); // Makes the option available for new selections
|
|
@@ -94,7 +115,11 @@ class LucosLangComponent extends HTMLSpanElement {
|
|
|
94
115
|
},
|
|
95
116
|
render:{
|
|
96
117
|
item: function(data, escape) {
|
|
97
|
-
|
|
118
|
+
if (data.url) {
|
|
119
|
+
return `<div class="lozenge" data-url="${escape(data.url)}"><a href="${escape(data.url)}" target="_blank">${escape(data.label)}</a></div>`;
|
|
120
|
+
} else {
|
|
121
|
+
return `<div class="lozenge">${escape(data.label)}</div>`;
|
|
122
|
+
}
|
|
98
123
|
},
|
|
99
124
|
},
|
|
100
125
|
});
|