Add Missing Element Attributes – Especially the data-* Attribute

In an element, you can add attributes like “class”, “href”, “src” or “style”. First, I think there should be a manual way to add missing attributes in Hype. It’s kinda silly to have to put an element in an element, just because I can’t edit parts of the parent element. Once you can do that, this is the next logical step…

HTML Global Data Attributes

It looks like the browser support is phenomenal… https://caniuse.com/#feat=dataset

Theoretically, this could be part of making Hype easier for non-programmers to use. Data can be stored directly on the element, in a similar fashion to creating JavaScript variables.

That would be the groundwork to the next step… an if/then/else system in Hype …because if the data is stored on the element itself, actions and timeline events could be triggered based on that data – all without having to manually write the JavaScript programming.

That could be very powerful.

I mention this because I’ve been using Hype more as an IDE rather than animation software. Something like this would better merge the two. It would make Hype more accessible to non-coders.

I also mention this because of a new approach I’m using…

function clicky(e) {
 tid = e.target.id;
 scene = document.getElementById(tid).getAttribute("data-scene")
 hypeDocument.showSceneNamed(scene, hypeDocument.kSceneTransitionPushLeftToRight, d); 

The code was shortened to be less confusing. Basically, if an element is clicked, that element has a “data-scene” value. That value is then used to load a specific Hype scene. The Kludgy way to do this was to use the Element ID as the value. But with data-* values, multiple elements can load the same scene.

Pretty cool, no?

Yes, this is a good feature request(s). I’d also like there to be custom CSS.