This is an example of a component using the attributes panel to set the initial value.
In the long run it would be nice to include easy skinning and multiple components. It’s just a beginning. Your welcome to chip in…
Versions: 1.0 initial release 1.1 simplified code and added more skinning examples 1.2 added multiple examples how to read out the dataset 1.3 added a Mutation Observer version 1.4 Fixes,simplified and allowed 'checked' attribute (applied initially)
var thisSelection = element.title //-- get the Title/alt Text of the checkbox group.
var selectionTick = element.querySelector('.tick')//-- find the tick image for this symbol
var selectionTickState = element.dataset.ischecked//
selectionTickState === '0' ? (
hypeDocument.setElementProperty(selectionTick, 'opacity', 1),
element.dataset.ischecked = 1
) : (
hypeDocument.setElementProperty(selectionTick, 'opacity', 0),
element.dataset.ischecked = 0
);
Then for example add a [submit] button to the scene that runs this code.
var checkboxItems = document.querySelectorAll('[data-ischecked="1"]'); //-- Get all elements with ischecked equal to 1, i.e checked.
var selections = [] // empty array
checkboxItems.forEach(function(checkboxItemElement) {
var thisSelection = checkboxItemElement.closest('[data-title]').dataset.title // find ancestor of this element that has a dataset = title.
selections.push(thisSelection);
});
console.log(selections)
@MaxZieb hope this is what you meant by chip in, I can move all this else where if it was not
Sure go right ahead. I though more along the lines of using the same codebase and developing it further but what ever works. It's true you can put as much info into these components as you need or want. It depends on the use case what has to be dynamic and what not. In case of switches I keep them simple for now.
↑ look at project Version 1.1 Simplified code and added more skinning examples
↑ look at project Update Added online preview for people without Hype 4 (although Hype for offers the free viewer mode now! update: I fixed a mixup in the files. I accidentally uploaded an old version
to start using the html attributes in things like this now we can simply add them in the Hype editor.
