Improving HYPE 4 :: Custom functions with arguments

21

the simplest setup i'd think of bypassing an HypeEventSetup may be

external:

	 function doThings(hypeDocument, element, event, str){
	 console.log(hypeDocument);
	 	 console.log(element);
	 	 	 console.log(event);
	 	 	  console.log(str);
	 	 	  	console.log(hypeDocument.durationForTimelineNamed(str))
	 	 	  		console.log(hypeDocument.currentTimeInTimelineNamed(str))	 		
		hypeDocument.startTimelineNamed(str, hypeDocument.kDirectionForward)
	 }

call from hypefunction:

function someHypeFunction(hypeDocument, element, event,){
	doThings(hypeDocument, element, event, 'xxx');
}
1 Like
22

That still requires on Hype Function for every parameter variation, and it still pollutes the signature of the function you want to call. Meaning your just forwarding the "problem". Hence, you could just do the calls directly in the Hype function to begin with.

But the idea is good, and I often use the approach by getting my parameter from a dataset value in the context of click actions. This makes the Hype Function reusable.

function yourFunctionNameHere(hypeDocument, element, event){
	
	var myParam = element.getAttribute('data-my-param') || 'Fallback';
	alert(myParam);
	// call any function like window.XYZ(myParam);
	
	// if you want/need context add it to the call like Hans
	// window.XYZ(myParam, hypeDocument)
	// or if that is not possible (re)create a wrapper function 
	// on the fly before calling it
	// window.XYZ = function(p){alert(p, hyDocument);}

}

CleanShot 2021-05-18 at 12.23.02@2x
CleanShot 2021-05-18 at 12.23.02@2x1196×796 108 KB

Download:
ClickButtonParameter.hype.zip (137,7 KB)

1 Like
23

To chime in here - I understand that being able to use an arbitrary function with arbitrary parameters from Hype's UI would be beneficial.

But I think this thread has folks with a lot of different cases and may be over-complicating/obfuscating the common and simple solution - if you want to do this, just define a new function and make the call.

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function doMyAction(hypeDocument, element, event) {

	someExternalFunction("arg1", "arg2");

}

Fundamentally it is good to boil down to the fact that from a labor standpoint, this is not going to be any harder than fiddling with UI popups and gives extra benefit to being in a code block so you can easily add extra flexibility should the need arise.

Of course, there are three general issues:

  1. Hard to tell at a glance in Hype's UI what the call does. The workaround is to give your function a meaningful name since this shows up in the UI.

  2. It is hard to reuse Hype-defined functions since they don't take extra arguments. All JavaScript functions can take extra arguments, so the workaround would be to make a new function that calls into the shared function like hypeDocument.functions().myOtherFunction(hypeDocument, element, event, otherArg1, otherArg2) or use a function defined elsewhere.

  3. It isn't as efficient/requires an extra function. The workaround is to.... not care :slight_smile:. I don't mean to be glib but it is rare that this should be a major concern. If you're a large document, then you're already large. If you're a small document then there's not many sites where you'd be doing this technique and it would be small.

HypePowerPack and the Custom Behavior workarounds are often great solutions for more complex documents that try to help solve some of this, and definitely should be considered if you have more complex flows. And kudos to @Henry_Tap for the mockup.

2 Likes