Match and track the position of two elements

Using JavaScript with Hype
21

Looks interesting and really cool! @MaxZieb. Lot’s of flexibility it seems with Hype.

1 Like
22

For the global pollution… I think this is not a big issue as it is similar to what we do in the head with the call backs there.

So saying that a simple thing to do for more than one hype doc on the webpage would be the hype function as:

 window[hypeDocument.documentName() ]  = function(targetTofollow,follower,prop){
  
   var EllipsePin_  = hypeDocument.getElementById(targetTofollow)
  	 
  	 var Prop_ = hypeDocument.getElementProperty(EllipsePin_, prop) 
  
  	   var EllipseBlue_ = hypeDocument.getElementById(follower)  
    hypeDocument.setElementProperty(EllipseBlue_, prop, Prop_, 0, 0)
  }

And you then just add what you would call the exported file to the Math Equation code as the function name called. Including an OR operator using ‘index’ so we can also run in previews.

function (t, start, dur) {
   try{
   let plc =  window['pa1'] ||  window['index' ] 
   
plc('egg','lem','left')
  }catch(err){
console.log(err)
}
   return t / dur;
}

Math function runner.zip (224.6 KB)

For those of you wondering why we are using globals. It is because the Math Equations do not have access to the Hype document scope ( hypeDocument ) at run time

3 Likes
23

btw: postMessage from the function to a listener within hype (within a hypefunction) should also work … to connect and exchange

1 Like
24

Off topic (@h_classen): I think you mean dispatchEvent, right? Something along the lines of https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Concerning the original question… using a Mutation Observer is still the simplest solution with everything in one spot, in my opinion :wink:

1 Like
25

did not test, but i guess postMessage will work too :slight_smile: