Hype Data Magic

Hello @MaxZieb !

I wish I know how to include an external URL for a button or for an iFrame. Could you please offer me support?

Thank you!

Option 1: You can just write a Hype function that uses getData and get the URL and opens it


Option 2: You can write a custom handler for buttons

customHandler.js

HypeDataMagic.addDataHandler('button', function (hypeDocument, element, event){
	if (event.data.label) element.innerHTML = event.data.label;
	if (event.data.url && !element.dataset.linked) {
		element.dataset.linked = true;
		var clickHandler = function(e){
			window.location = event.data.url;
		}
		element.addEventListener('mousedown', clickHandler, false);
		element.addEventListener('touchstart', clickHandler, false);
	}	
});

HypeDataMagic-CustomHandler.hype.zip (19,1 KB)

2 Likes

Thank you so much @MaxZieb !

I was playing around with the following:

customHandler.js

HypeDataMagic.addDataHandler('hypefunction', function (hypeDocument, element, event){
	var hypeFunctionName = element.getAttribute('data-hype-function');
	if (hypeFunctionName && hypeDocument.functions) {
		var hypeFunction = hypeDocument.functions()[hypeFunctionName];
		if(hypeFunction) hypeFunction(hypeDocument, element, event);
	}	
});

Allowing to forward any data to a Hype function… there might be use cases for this, but it lacks a live preview as Hype functions only can be called in preview. It might be useful for people not wanting to get into creating handlers or for complex use-cases that don't require a preview anyway.

The following example only shows how the data is received… nothing really useful apart from demonstrating the concept: HypeDataMagic-CustomHandler-hypeFunction.hype.zip (17,8 KB)

Crude visualization how this handler forwards a call:


Update: The workaround and approach in this reply isn't needed anymore since version 1.3.4 now supports native forwarding to Hype functions. Just add () to the end of a handler name… see below!

2 Likes

Thanks @MaxZieb this example is a useful visual overview.

1 Like

↑ look at project
1.3.4 Ending handler with () forwards them to hypeDocument.functions, exposed resolveObjectByKey and added and exposed resolveKeyToArray (keys can now be arrays), fixed append/prepend bug

Release notes:

Ending handler with () forwards them to hypeDocument.functions
Hence, now you can just specify a handler ending in () to redirect it to hypeDocument.functions. For example, setting the data-magic-handler to myFunction() allows you to use a Hype function to process. Obviously, these types of handlers don't give you any preview in the IDE as the Hype API and hypeDocument.functions isn't present in the web view. These functions are only applied when previewing. Although, one thing you can always is set multiple handlers like setting data-magic-handler to text, myFunction(). That way you will get the regular text output and additionally myFunction() will be triggered on previews/exports. In the following example, a Hype function is used to make the output uppercase. This would make more sense with a regular handler as it also provides a live preview, but either way, here is a simple example:

Custom handler upper() as Hype function with a second handler doing the default text output

Assigning the custom handler as Hype function. Also, demonstrating how handlers can be chained by returning the event object

Leads to the following output as the first handler applies upper() and text adds it to innerHTML (text is the default handler if not declared, so we need to apply it if we use data-magic-handler and also want the regular output)

exposed resolveObjectByKey and added and exposed resolveKeyToArray
These are low-level functions that have been rewritten and are now exposed to the API allowing you to use them to process the key notations used in Hype Data Magic. You can use them to resolve a key on an object and process a key to retrieve its parent, or any other kind of use case. Another thing that has been added is the ability to actually provide arrays instead of only strings as a key. They can even be nested or consist of an array of key notations. For example, given data like this …

var obj = {
	deeply: {
		nested: {
			node: "Hello World"
		}
	}
};

// using string 'deeply.nested.node'
console.log( HypeDataMagic.resolveObjectByKey(obj, 'deeply.nested.node') );

// using array ['deeply', 'nested', 'node']
console.log( HypeDataMagic.resolveObjectByKey(obj,  ['deeply', 'nested', 'node']) );

// using mixed notation in array ['deeply.nested', 'node']
console.log( HypeDataMagic.resolveObjectByKey(obj, ['deeply.nested', 'node']) );

// using nested arrays [['deeply', 'nested'], 'node']
console.log( HypeDataMagic.resolveObjectByKey(obj, [['deeply', 'nested'], 'node']) );

... the result is always resolved. It can actually nest recursively if ever needed. This is done, so one can easily combine any kind of key (string or array or a mixed form). This is certainly a special case scenario, but should add to the robustness as it originates from rewritten and much simpler functions.

To resolve a key directly, you can retrieve it in its flat array notation using HypeDataMagic.resolveKeyToArray. Meaning, all the above key notation can be used with HypeDataMagic.resolveKeyToArray leading to the following array ['deeply', 'nested', 'node'] (given the same example data as above). You can now process a key in any way you see fit (compare, replace and tweak). You could change a specific level or retrieve a parent data node, like in the following example:

// logs out ['deeply', 'nested', 'node']
console.log( HypeDataMagic.resolveKeyToArray('deeply.nested.node'));

// removes last element and logs out ['deeply', 'nested']
var keyArr = HypeDataMagic.resolveKeyToArray('deeply.nested.node');
keyArr.pop();
console.log(keyArr);

fixed append/prepend bug
There was an error when only one of the two special tags data-magic-prefix or data-magic-append have been used, adding a 'Null' string to the output. This was overlooked as I always used it in conjunction or with numbers. This error now has been rectified.

Additional note :memo:

HypeDataMagic.getData now also allow an optional second parameter, being a key. Hence, you can now fetch a specific key using that interface. Forgot to mention that in the short form of the release note.

HypeDataMagic.getData(null, "some.key.here");

The parameter null is the data source and if not passed in defaults to the “shared” one. If you use multiple sources (even as shortcuts) you know what this means, else just use null.

1 Like