ONVOC-Widget is a custom html element that displays the ONVOC controlled vocabulary as a tree with its leaf nodes as selectable elements.
The repository contains a copy of the ONVOC SKOS file. This gets transformed into a typescript file via deno run parse.
The html element is defined in /build/onvoc-widget.js. An example of using this file imported via <src.../> and the widget html being instantiated can be found in ./dev/index.html. The example can be viewed in action with the command deno run dev.
Once the html element is defined, <onvoc-widget></onvoc-widget>, it exposes a couple of interfaces for getting selected elements and one for setting them. To handle results from when the submit button is pressed an event listener can be setup:
document.querySelector("onvoc-widget").addEventListener("onvoc-submit", (e) => {...});
The onvoc-submit event returns selected terms in the detail property as an array of { label: string; id: string }, with id and label matching their corresponding values from the ONVOC SKOS file.
The element has an attribute selected that contains an array of ids as strings. This property can directly be read and written to:
document.getElementsByTagName('onvoc-widget')[0].selected
> Array [ "https://w3id.org/onvoc/ONVOC_0000767" ]
document.getElementsByTagName('onvoc-widget')[0].selected = ["https://w3id.org/onvoc/ONVOC_0000528"]
> Array [ "https://w3id.org/onvoc/ONVOC_0000528" ]
The display of the widget will automatically be updated when written to. Any invalid id strings will be quietly ignored.
Should event and selected should have the same type signature?
The element has two optional attributes to control the submit button.
<onvoc-widget submit-text="foo"...will change the text of the submit button to foo.<onvoc-widget submit-hidden...will set the button to have the hidden attribute.
- mention that the ts converted ontology object is exported.
- Actually push to jsr.