This has probably been don before ( by me and others ) as it is just in reality a drop down menu.
But I had a minute and wanted to show after looking at
IMHO a simple way to create you own options in hype allowing you to leverage the hype APIs and functions without putting things in innerHTML and a form.
We can simply create a symbol with a button inside.
We give the symbol itself the class name of optionParent
We give the button the class name of option
The button will get two on mouse down Javascript actions to call
selection() function first,
selection()
//== Store the last selection for later if needed.
hypeDocument.customData.last_selection = element.
window.open(element.dataset.value, '_self');
The selection() function will carry out your actions.
It will also store the last selected option. ( which you can access at any time )
Then optionToggle() secondly.
optionToggle()
var optionsp = [...document.querySelectorAll('.optionParent')]
var optionsDisplay = hypeDocument.customData.optionsDisplayed
for (let i = 0; i < optionsp.length; i++) {
var theIndex = optionsp[i].dataset.index
var optionsCurrentTop = hypeDocument.getElementProperty(optionsp[i], 'top')
var optionsCurrentHeight = hypeDocument.getElementProperty(optionsp[i], 'height')
if (!optionsDisplay){
hypeDocument.setElementProperty(optionsp[i], 'top', optionsCurrentTop + (optionsCurrentHeight * theIndex),0.2, 'easeout');
hypeDocument.customData.optionsDisplayed = true
} else {
hypeDocument.setElementProperty(optionsp[i], 'top', optionsCurrentTop - (optionsCurrentHeight * theIndex),0.2, 'easeout');
hypeDocument.customData.optionsDisplayed = false
}
}
The optionToggle() will be explained below.
The Symbol itself, will get three additional attributes, using the additional HTML attributes in the identity inspector.
- data-index
data-index's vale will be a integer type number. i.e 1
This is used to calculate the symbol's position and order when the options drop down.
So an index of 2 will place a symbol in second position.
You can swap the index numbers around to achieve different positions.
- data-value
This is the options value
- data-display
This is used to display as the options selection.
(We give the symbol the attribute because it is easier to just select the symbols and add them than entering them and giving them to a button directly each time. )
Once you have a single symbol set up as above. You can then simply option + Drag
The symbol to make a copy as many times as you need options.
Edit each symbols *additional HTML attributes as above.
--
Then align them all to sit exactly on top of each other by selecting them all and using the Align options in the Arrange menu.
Now we can add on top of them a rectangle element, which will become the dropdown option button.
This rectangle ( Title Rectangle ) gets some innerHTML but just some css, and the Options Title.
YEAR
<style>
.option::after {
content: attr(data-display);
}
</style>
This will set the display name for each symbol option.
--
Title Rectangle will get a On mouse down javascript Action :, which also points to the
optionToggle() function
The optionToggle() function will toggle the options either down of up.
This code takes care of the positions based on the data.index value as mentioned above.
We added it to the buttons above also, so when a button is clicked the options will toggle out of view.
Now the final Javascrript that sets things up.
We have an On Scene load javascript Action.
option_init()
This basically takes the parent symbols additional attributes and populates the inner child button with them.
The css is then able to access the correct data to display. for each button
And the other attribute are used else where but from the button.
if (typeof hypeDocument.customData.optionsDisplayed == "undefined"){
hypeDocument.customData.optionsDisplayed = false
}
hypeDocument.getSymbolInstance = function(element){
var symbolInstance = null;
while (symbolInstance == null && element != null) {
symbolInstance = hypeDocument.getSymbolInstanceById(element.id);
element = element.parentNode;
}
return symbolInstance;
}
var options = [...document.querySelectorAll('.option')]
for (let i = 0; i < options.length; i++) {
sym = hypeDocument.getSymbolInstance(options[i]).element()
console.log(sym)
options[i].dataset.index = sym.dataset.index
options[i].dataset.value = sym.dataset.value
options[i].dataset.display = sym.dataset.display
}
That's it, the code is written and is very simple and you now have a quick and easy way to have an Hype type Options selection.
options mhv_1.hype.zip (19.7 KB)