switch-value

Purpose

"switch-value" is a simple web component to select a value from a previously defined list. You can choose whether the selection should be made via radio buttons or a combo box.

The element can be configured so that selecting a value causes that value to be set in a predefined property of another HTML element.

When an element is selected, a custom event is also triggered, so that you can also react to value changes in this way. You can also use both ways in parallel.

Parameter

Provide values for selection

There were two ways of providing values for selection. Either the "inputArray" attribute is passed and if this attribute is not found , then the "inputObject" parameter is evaluated. In both cases, an array of the following form is expected:

[ {value: 'value'}, {value: 'value'}, ... ]

Or if value and label should not be identical, you can also define it in the following form:

[ {lable: 'label', value: 'value'}, {lable: 'label', value: 'value'}, ... ]

inputArray

In this case, the array is passed as an attribute in JSON format

<switch-value inputArray='[{"value": "12px"}, {"value": "1em"}, {"value": "x-large"}]' ... </switch-value>
// or with explicit label
<switch-value inputArray='[{"label": "font-size 12px", "value": "12px"}, {"label": "font-size 1em", "value": "1em"}, {"label": "font-size x-large", "value": "x-large"}]' 

inputObject

In this case, you first have to add the object "mk777" to the "window" object. Then you define the desired array. The name of the array is then passed in the "inputObject" attribute.

window.mk777 = {};
window.mk777.switchValue = {
    fontSize1: [
        { value: '12px' },
        { value: '1em' },
        { value: 'x-large' }
    ]
}

// or with explicit label
window.mk777 = {};
window.mk777.switchValue = {
    fontSize1: [
        { label: 'fontSize: 12em;', value: '12px' },
        { label: 'fontSize: 1em;', value: '1em' },
        { label: 'fontSize: x-large;', value: 'x-large' }
    ]
}

type (optional; default="radio")

You can choose whether the selection should be made via radio buttons or a combo box. Set the type to "radio" to use radio buttons or to "combo" to use a combo box.

destId/destPropName (optional)

You can bind another HTML element to the custom element so that the value change affects a property of the bound object. In "destId" you have to pass the ID of the HTML element and in "destPropName" the name of the property that is to be changed. The whole thing only works if both "destId" and "destPropName" are passed. <switch-value destId="testElementId" destPropName="style.fontSize" ...>

destPropChildSelector (string, optional)

If the custom element is bound (s. destId), then a property (or sub-property) of that element is usually set. But if you also pass "destPropChildSelector" then you can set properties of elements which are children (need not be direct children) of this element. The selector for the "querySelectorAll" method is expected as the value. For example, if you want to customize all children that have the CSS class "flex-item" then you have to use ".flex-item" as the value. <switch-value destId="testElementId" destPropName="style.fontSize" destPropChildSelector=".flex-items" ...>### destPropChildSelector (string, optional) ###

orientation (optional)

The "orientation" attribute controls whether the radio buttons are displayed horizontally ("horizontal") or vertically ("vertical"). The default is "horizontal".

startIndex (optional)

The "startIndex" attribute can be used to specify whether which value should be selected automatically. The start index should correspond to an index of the passed array. This resulting value is set when an HTML element is bound (see sourceId or inputObject). The custom event is also fired with this value.

caption (optional)

You can also specify an additional label. Depending on the "orientation" attribute, this is displayed either on the left side (orientation="horizontal") or above the radio buttons (orientation="vertical").

Event

Each time a value is selected, the valChange event is fired. The selected value is returned in "event.details.value".

window.onload = () => {
    document.addEventListener('valChange', (event) => {
        console.log(event.detail.value);
    })
}

In addition to detail.value, the following values are also passed in the event:

• groupName: this value is only relevant if type="radio". It is the "name" given to all radio buttons.
• type: is the selection made from a radio button group or a combo box ("radio" or "combo").

CSS

The "part" attribute has been assigned to elements as follows:

• "frame" - the outermost frame
• "caption" - the caption
• "radio" - the input element of type "radio"
• "radio-label" - the text of the radio button
• "combo" - the select element (combo box)
• "combo-label" - the option element of the combo box

HTML

Here’s how to embed the HTML custom element on the website:

<script type="module" src="./node_modules/switch-value/index.js"></script>