Pass parameters to function / Reduce need for multiple functions


(raph) #1

Hello

This would help me simplify my hype files a great deal (click image for clearer version):

example.zip (21.1 KB)

Obviously this is a simplified example, but this would allow me to have one function that adapts to other factors (such as which item is being dragged) without having to write additional handling code.


(Hans-Gerd Claßen) #2

use classes!
assign class ‘hi’ to the hi-button and accrodingly ‘bye’ to the bye-buttton

then use this within a function:

alert(element.classList.item(1));

instead of adding those key-value inputs it would be straight forward to add attributes to the elementinspector … :slight_smile:


(raph) #3

Thanks for your response! CSS classes would work for the above example, but I do wonder whether that would be possible in all instances. What if the classname was used for other functionality, for instance. I will definitely keep your suggestion in mind though, thanks!

To me it seems that passing parameters to a function is such a core feature of Javascript, I am surprised it is not implemented in Hype’s UI.


(Hans-Gerd Claßen) #4

a element can have multiple classes …

in most cases such info is stored in attributes.

<someelement data-speak='hi'> </someelement>
alert(element.getAttribute(‘data-speak’))

so i assume this should be your request: setting attributes via ui :slight_smile:


(raph) #5

Thanks again h_classen, here is a similar example you may be able to help me with:
What if I have a function, playVid() that does something like:

  • Sets SRC attribute of HTML5 video
  • Checks if video has cached enough to play
  • Sets playhead to 0:0:10
  • Plays video

Then I want to call it on multiple scene loads, or from button clicks, like so:

playVid(big_buck_bunny); //plays bunny movie
playVid(elephants_dream); //plays elephant movie

In the case of button clicks, it seems you are saying I give the button a class of “big_buck_bunny” or “elephants_dream” and fetch the class as part of my function, is that correct?

But what if I want to attach the function to a scene load?


(Hans-Gerd Claßen) #6

your scenename could hold the info in this case.

to keep the function generic:

your function:
check for event type
if click or touch-event get the class as argument
if sceneload get the scenename as argument

do your stufff …


(Hans-Gerd Claßen) #7

hint: have a look at the hypextensions-thread which shows a technique to attach your customscripts to the hypeDocument-Object


(raph) #8

appreciated, will have a look thanks :slight_smile:


(raph) #9

Hello again, just wanted to mention that the solution to use classes proposed by hans does indeed work.

I still do, however, want to put my original feature request forward as I think passing values to a function is such a basic operation it would be good to be able to achieve this without using workarounds.

Thanks!


(Mark Hunte) #10

I agree. It would be good to be able to add values in the JS sections in the UI and Actions/Timelines

AndI think what we should have is also in the Element’s identity inspector an area to add various data attributes to the element. ( as @h_classen suggests )


#11

Thanks for these suggestions!


(PJ) #12

The best way that I have used to keep my document clean has been assigning ids to elements and using switch cases. For example,

  1. function speak( hypeDocument, element, event){ switch (element.id){ case "hiButton": alert( "hi" ); break; case "byeButton": alert( "bye" ); break; } }

This would work perfectly fine. I also created and external js file, which has functions that are extremely long and complicated, and I just call them in the Hype document when needed. This has kept my documents extremely clean!


#13

This is related to my post here.

Hoping to suggest that hype lets us pass parameters in functions than just calling them as if they’re static functions.

Please let this happen. Give us reusable functions.