lucos_search_component

Web Component for searching lucOS data

Technologies used

• ES Modules
• Web Components

Usage

Include the following in your javascript:

import 'lucos_search_component';

Search

Searches all items available in lucos_arachne

Include the following in your html:

<span is="lucos-search">
	<select multiple>
		<option selected>https://contacts.l42.eu/people/2</option>
		<option selected>https://eolas.l42.eu/metadata/place/2/</option>
		<option selected>https://media-metadata.l42.eu/tracks/13713</option>
	</select>
</span>

Selected options use the item's URI as their value.

The following attributes can be added to the lucos-search span:

• data-api-key [required] — a valid API key for the production instance of lucos_arachne, as generated by lucos_creds.
• data-types — A comma separated list of item types to search for (defaults to all types).
• data-exclude-types — A comma separated list of item types to exclude from the search (ignored if data-types is set).
• data-no-lang — The name to give for a "no language" option. If set, a special entry with the URI https://eolas.l42.eu/metadata/language/zxx/ is added to the top of the list. Only meaningful when data-types="Language".
• data-common — A comma separated list of item URIs to pin in a "Common" group at the top of the list, above the normal results. Only meaningful when data-types="Language".
• data-preload — If present, all options are loaded upfront rather than fetched on search. Suitable for small, finite datasets such as languages.

Language selector

To use lucos-search as a language selector (the replacement for the removed lucos-lang component):

<span is="lucos-search"
    data-api-key="..."
    data-types="Language"
    data-no-lang="Instrumental / No Language"
    data-common="https://eolas.l42.eu/metadata/language/en/,https://eolas.l42.eu/metadata/language/ga/,https://eolas.l42.eu/metadata/language/zxx/"
    data-preload>
    <select multiple>
        <option selected value="https://eolas.l42.eu/metadata/language/en/">English</option>
    </select>
</span>

Selected options use the language's full URI as their value (e.g. https://eolas.l42.eu/metadata/language/en/).

Migrating from lucos-lang

lucos-lang has been removed in v2.0.0. Use lucos-search with data-types="Language" instead.

Key differences:

• Values are URIs, not ISO codes. lucos-lang stored ISO 639 codes (e.g. en, ga). lucos-search stores full URIs (e.g. https://eolas.l42.eu/metadata/language/en/). Update any stored values and form handling accordingly.
• data-common takes URIs, not codes. Pass full language URIs instead of ISO codes.
• data-no-lang works the same way. The "no language" entry is added with URI https://eolas.l42.eu/metadata/language/zxx/.

Manual Testing

Expects a .env file in the root directory with the following environment variables:

• KEY_LUCOS_ARACHNE - an API for lucos_arachne, as set by lucos_creds

(The .env file can be automatically generated using the command scp -P 2202 "creds.l42.eu:${PWD##*/}/development/.env" ., assuming the correct credentials are in place)

Run:

npm run example

This uses webpack to build the javascript and then opens a html page which includes the web component