Back to Top

Hype DataDecorator master

Project for getting reactivity and feedback directly in Tumult Hype 4 using the additional HTML-attributes panel for options.

setContent(element, value)

This function allows to set innerHTML in a save way. Meaning it helps in preventing undesired destruction of Hype managed nodes this is also set as the default decorator and registers as a callback

Parameters

Name Type Description
element HTMLDivElement

This is the element to set the content on
value String

The value determins what is inserted to innerHTML

Returns

Void

mapDataAttribute(key, callback, options)

This function is a proxy to HypeDataDecorator.mapAttributeToSelector and and sets the attribute data-YOURKEY and maps it to the class .YOURKEY serving as a shortcut. The callback is optional and has setContent as fallback. The value of the data-YOURKEY will be forwarded to the callback(s) as event.value

Parameters

Name Type Description
key String

This is the data attribute we want to map
callback String

This is an decorator callback and is optional
options Object

These options are a mixin and still not used here

Returns

Void

mapAttributeToSelector(key, selector, callback, options)

This function maps a attribute to selector and fires the given callback on all its decendants. This function allows for more flexebility in mapping. and the callback is optional and has setContent as fallback. The value of the attribute will be forwarded to the callback(s) as event.value

Parameters

Name Type Description
key String

This is the attribute we want to map
selector String

This is the selector we want to forward the value to
callback String

This is an decorator callback and is optional
options Object

These options are a mixin and still not used here

Returns

Void

registerElementDecorator(name, callback)

This function allow to register a element decorator callback by name. Having named callbacks allows to chain them and reuse them if wanted.

Parameters

Name Type Description
name String

This is the attribute we want to map
callback Function

This is the function to be registered as an decorator

Returns

Void

observeBySelector(selector, callback, options)

This function maps sets up an HTML element observer that match a selector and a attribute. By default the style attribute on the HTML element is observered for change. To determine other attributes use the options as {attributesFilter: ['a','b']}. If one needs to listen to all attributes set options as {attributesFilter: []}

Parameters

Name Type Description
selector String

This is the selector that determin
callback String

This is an decorator callback and is optional
options Object

These options are a mixin and allow setting the attributeFilter

Returns

Void

getRunningObserver()

This function returns a list of all running observer. For testing might get removed.

Returns

Return array with active observer across all Hype documents