Hype DataMagic (master) doxdox documentation

Allows you to easily add and handle data in your Hype documents (with live preview)

# _default()

defaults can be overriden with setDefault

# addDataHandler(name, handler)

This function allows to add custom data handler. These following keys can be defined if supplied as an array * DataMagicPreviewUpdate: Gets fired only in the IDE * DataMagicPrepareForDisplay: Gets fired along HypeScenePrepareForDisplay * DataMagicLoad: Gets fired along HypeSceneLoad * DataMagicUnload: Gets fired along HypeSceneUnload If the handler is only set as an functions it defaults to setting DataMagicPrepareForDisplay

Parameters

Name Types Description
name String The name your handler is identified by in data-magic-handler
handler Function Object

# assignNew(target, source)

This function only assigns values from source if they are not present in target

Parameters

Name Types Description
target Object - The target object
source Object - The source object

# callHandler(hypeDocument, element, event)

Calls the handler function for the given event. This function is called by the event handler. It calls the handler function for the given event.

Parameters

Name Types Description
hypeDocument HYPE.documents.HYPEDocument The document object.
element HTMLElement The element that triggered the event.
event Object The event object.

# cloneObject(obj)

Parameters

Name Types Description
obj object

# constructVariablesContext(hypeDocument, element)

Constructs the variables context for resolving variables in strings or objects.

Parameters

Name Types Description
hypeDocument HYPE.documents.HYPEDocument - The Hype document object.
element HTMLElement - The HTML element associated with the current handler.

# createChangeObserver(hypeDocument, baseContainer)

The change observer is a MutationObserver that observes the DOM for changes to the data-magic-* attributes. When a change is detected, the change observer will call the appropriate functions to update the magic key. This function creates a change observer for the specified Hype document.

Parameters

Name Types Description
hypeDocument HYPE_Document - The Hype document.
baseContainer HTMLElement - The base container.

# debounceByRequestFrame(fn, delay)

Create a debounced function that delays invoking fn until after delay milliseconds have elapsed since the last time the debounced function was invoked.

Parameters

Name Types Description
fn function - the function to be debounced
delay number - the delay in milliseconds

# disableChangeObserver(hypeDocument)

Disable the change observer for the specified Hype document.

Parameters

Name Types Description
hypeDocument HYPE_Document - The Hype document.

# enableChangeObserver(hypeDocument)

Enable the change observer for the specified Hype document.

Parameters

Name Types Description
hypeDocument HYPE_Document - The Hype document.

# findAttribute(element, attr, allowAdditions, baseElement)

This function finds the value of an attribute on an element or its parents. If the attribute value starts with a '+' then it is added to the value of the attribute on the parent.

Parameters

Name Types Description
element HTMLElement - The element to start searching from.
attr string - The name of the attribute to search for.
allowAdditions boolean - If true, the value of the attribute will be added to the value of the attribute in the parent.
baseElement HTMLElement - The element to stop searching at.

# forceRedraw(element)

Force redraw of an element

Parameters

Name Types Description
element HTMLElement

# getData(source, key)

This function allows to get data

Parameters

Name Types Description
source String This the name of the data you want to access. It defaults to the string "shared".
key String This (optional) key resolves the data given a key

Returns

Returns the object Hype Data Magic currently has stored under the given source name.

# getDefault(key)

This function returns the value of set default

Parameters

Name Types Description
key String This the key of the default.

Returns

Returns the current value for a default with a certain key.

# hasNoHypeElementsAsChild(element)

This function checks if the element has no Hype elements as child.

Parameters

Name Types Description
element HTMLElement - The element to check.

# HypeDataMagic()

# hypeDocument.disableChangeObserver()

This function allows to disable observer based refresh calls when updating a data-magic-* attribute

# hypeDocument.enableChangeObserver()

This function allows to (re)enable observer based refresh calls when updating a data-magic-* attribute

# hypeDocument.refresh(element)

This function allows to refresh the data in the current scene. This function is useful when you want to refresh the data of the current scene. It will refresh the data of the scene element and all its descendants. If you want to refresh the data of a specific element, use the function hypeDocument.refreshElement. If you want to refresh the data of all descendant of a given element, use the function hypeDocument.refreshDescendants.

Parameters

Name Types Description
element HTMLDivElement The element (including descendants) to refresh. This defaults to the scene element.

# hypeDocument.refreshDebounced(element)

This function allows to refresh the data in the current scene. This function is debounced by requestAnimationFrame.

Parameters

Name Types Description
element HTMLDivElement The element (including descendants) to refresh. This defaults to the scene element.

# hypeDocument.refreshDescendants(element)

This function allows to refresh the data of all descendant of a given element

Parameters

Name Types Description
element HTMLDivElement The element to start the descendants refresh. This defaults to the scene element.

# hypeDocument.refreshDescendantsDebounced(element)

This function allows to refresh the data of all descendant of a given element. This function is debounced by requestAnimationFrame.

Parameters

Name Types Description
element HTMLDivElement The element to start the descendants refresh. This defaults to the scene element.

# hypeDocument.refreshElement(element)

This function allows to refresh a specific element

Parameters

Name Types Description
element HTMLDivElement The element to refresh.

# hypeDocument.refreshElementDebounced(element)

This function allows to refresh a specific element. This function is debounced by requestAnimationFrame.

Parameters

Name Types Description
element HTMLDivElement The element to refresh.

# hypeDocument.setContentIfNecessary(element, content)

This function is a simple helper function that checks if the content provided differs from the content found in element.innHTML and only refreshes if needed.

Parameters

Name Types Description
element HTMLDivElement The element to check
content string The content to set in innerHTML if it differs

# HypeDocumentLoad(hypeDocument, element, event)

HypeDocumentLoad is called when the document is loaded.

Parameters

Name Types Description
hypeDocument HYPE_Document
element Element
event Event

# HypeSceneLoad(hypeDocument, element, event)

HypeSceneLoad is called when the scene is loaded.

Parameters

Name Types Description
hypeDocument HYPE_Document
element Element
event Event

# HypeScenePrepareForDisplay(hypeDocument, element, event)

HypeScenePrepareForDisplay is called when the scene is about to be displayed.

Parameters

Name Types Description
hypeDocument HYPE_Document
element Element
event Event

# HypeSceneUnload(hypeDocument, element, event)

HypeSceneUnload is called when the scene is unloaded.

Parameters

Name Types Description
hypeDocument HYPE_Document
element Element
event Event

# refresh(hypeDocument, element, event)

Refresh the specified element and its descendants.

Parameters

Name Types Description
hypeDocument HYPE_Document - The Hype document.
element HTMLElement - The element.
event Event - The event.

# refreshDebounced()

Debounced version of above (internal usage)

# refreshDescendants(hypeDocument, element, event)

Refresh the descendants of the specified element.

Parameters

Name Types Description
hypeDocument HYPE_Document - The Hype document.
element HTMLElement - The element.
event Event - The event.

# refreshElement(hypeDocument, element, event)

Refresh the specified element.

Parameters

Name Types Description
hypeDocument HYPE_Document - The Hype document.
element HTMLElement - The element.
event Event - The event.

# refreshFromWindowLevel(hypeDocument)

This function allows to refesh the view from the window level using HypeDataMagic.refresh

Parameters

Name Types Description
hypeDocument Object This parameter is optional and should be a hypeDocument object to refresh. If no paramter is provided it will refresh all documents found under window.HYPE.documents

# refreshFromWindowLevelDebounced()

Debounced version of above (internal usage)

# resolveDatasetVariables(element)

Resolves the magicSets attribute of an element.

Parameters

Name Types Description
element HTMLElement The element to resolve the magicSets attribute for.

# resolveKeyToArray(obj, key)

This low level function returns a array resolved based on a string key notation similar to actual code

Parameters

Name Types Description
obj String This the object the key should act on.
key String This the key to resolve the object by in string form.

Returns

Returns the current value for a default with a certain key.

# resolveObjectByKey(obj, key)

This low level function returns resolves an object based on a string key notation similar to actual code and returns the value or branch if successful

Parameters

Name Types Description
obj String This is the object the key should act on.
key String This is key based on notation similar to actual code to resolve the object with. The key can also be provided as a pre-processed array of strings.

Returns

Returns the current value for a default with a certain key.

# resolveVariables(input, variables)

Resolves variables in a string or an object by delegating to the specific resolve functions.

Parameters

Name Types Description
input string object
variables object - The variables to use for resolving.

# resolveVariablesInObject(obj, variables, noClone)

Resolve variables in object using resolveVariablesInString recursively and a variables lookup

Parameters

Name Types Description
obj Object - The object to resolve variables in
variables Object - The variables to use for resolving
noClone Boolean - If true, the object will not be cloned before resolving

# resolveVariablesInString(str, variables)

Resolve variables in string using a variable lookup

Parameters

Name Types Description
str string The string to resolve variables in.
variables object The variables to resolve.

# setData(data, source, key)

This function allows to set data

Parameters

Name Types Description
data Object This parameter needs to be an object but it can hold nested values of any type. To use JSON data parse the data before you set it. If you want to store a single value, use the key parameter.
source String The source is a optional name to store the data. It defaults to the string "shared". If you want to store a single value, use the key parameter.
key String The key is a optional name to store the data. It defaults to the string "shared". If you want to store a single value, use the key parameter.

# setDefault(key, value)

This function allows to override a default * source: String that defines the default source name. Defaults to 'shared'. * fallbackImage: Function that return a fallback image url or base64 version. Defaults to transparent image. * handlerMixin: Object that contains mixins added when calling addHandler. Defaults to {}. * sourceRedirect: Object that contains map key:value of source redirects. Defaults to {}. * customDataForPreview: Object that contains preview value for custom data (only displayed in IDE). Defaults to {}.

Parameters

Name Types Description
key String This is the key to override
value String Function

# trim(str)

This function removes all the white spaces from the beginning and the end of the string

Parameters

Name Types Description
str string - The string to be trimmed

# unloadMagicKey(hypeDocument, element, event)

This is a description of the unloadMagicKey function.

Parameters

Name Types Description
hypeDocument HypeDocument - The HypeDocument object.
element HTMLElement - The element that triggered the event.
event Event - The event object.

# updateMagicKey(hypeDocument, element, event)

This function is used to update the magic key of an element.

Parameters

Name Types Description
hypeDocument object - The hypeDocument object.
element object - The element object.
event object - The event object.