// widget_dropdownindexed.ysl2

widget_desc("DropDownIndexed") {

longdesc

||

DropDownIndexed widget can have one, two or three path variables.

It needs "text" (svg:text or svg:use referring to svg:text),

"box" (svg:rect), "button" (svg:*), and "highlight" (svg:rect)

labeled elements.

When user clicks on "button", "text" is duplicated to display entries in the

limit of available space in page, and "box" is extended to contain all

texts.

"highlight" is moved over pre-selected entry.

The first variable path is index of selection, and the second is value of selection.

In case there are one or two path variables, a list of texts is defined via

arguments.

If there are no arguments, it is expected that "text" labeled element is of

type svg:use and refers to a svg:text element part of a TextList widget.

In that case list of texts is set to TextList content.

When only one argument is given and its value is "#langs" then list of

texts is automatically set to the human-readable list of supported

languages by this HMI.

Otherwise, arguments are used as dropdown options.

In case there are three path variables, the third path variable is a filter

in a form of a string containing ':' separated list of indices of the options

from the arguments that will be shown in the dropdown.

Examples:

HMI:DropDownIndexed:Red:Green:Blue:Other@/SELECTED_INDEX@/SELECTED_VALUE

HMI:DropDownIndexed:Red:Green:Blue:Other@/SELECTED_INDEX@/SELECTED_VALUE@/FILTER

||

shortdesc > Let user select text entry in a drop-down menu

arg name="entries" count="many" accepts="string" > drop-down menu entries

path name="selected_index" accepts="HMI_INT" > selection index

path name="selected_value" accepts="HMI_STRING" > selection value

path name="filter" accepts="HMI_STRING" > indices of shown drop-down menu entries

}

// TODO: support i18n of menu entries using svg:text elements with labels starting with "_"

widget_class("DropDownIndexed") {

||

dispatch(value, old_val, index) {

if (index == 0) {

if (!this.opened) this.set_selection(value);

} else if (index == 2) {

try {

const desiredIndices = value.split(":").map((str) => +str);

// Cache the original content to prevent data destruction on subsequent filters

if (!this.original_content) {

this.original_content = [...this.content];

}

this.content = this.original_content.filter((item, idx) => desiredIndices.includes(idx));

} catch {}

}

}

||

}

// Inherit all other methods natively from DropDownWidget to avoid duplication

emit "declarations:DropDownIndexed"

||

Object.getOwnPropertyNames(DropDownWidget.prototype).forEach(name => {

if (name !== "constructor" && name !== "dispatch") {

DropDownIndexedWidget.prototype[name] = DropDownWidget.prototype[name];

}

});

||

widget_defs("DropDownIndexed") {

labels("box button highlight");

// It is assumed that list content conforms to Array interface.

const "text_elt","$hmi_element//*[@inkscape:label='text'][1]";

| init_specific: function() {

choose{

// special case when used for language selection

when "count(arg) = 1 and arg[1]/@value = '#langs'" {

| this.text_elt = id("«$text_elt/@id»");

| this.content = langs.map(([lname,lcode]) => lname);

}

when "count(arg) = 0"{

if "not($text_elt[self::svg:use])"

error > No argument for HMI:DropDownIndexed widget id="«$hmi_element/@id»" and "text" labeled element is not a svg:use element

const "real_text_elt","$result_widgets[@id = $hmi_element/@id]//*[@original=$text_elt/@id]/svg:text";

| this.text_elt = id("«$real_text_elt/@id»");

const "from_list_id", "substring-after($text_elt/@xlink:href,'#')";

const "from_list", "$hmi_textlists[(@id | */@id) = $from_list_id]";

if "count($from_list) = 0"

error > HMI:DropDownIndexed widget id="«$hmi_element/@id»" "text" labeled element does not point to a svg:text owned by a HMI:List widget

| this.content = hmi_widgets["«$from_list/@id»"].texts;

}

otherwise {

| this.text_elt = id("«$text_elt/@id»");

| this.content = [

foreach "arg" | "«@value»",

| ];

}

}

| }

}