Hype Global Behavior (Custom Behavior Extension)

[MaxZieb (Loves Hype)]

It totally does… your only missing link is that your still listening to the regular custom behavior instead you need to listen to the global one (“hashtag” notation)… meaning add a “#” infront of the listeners in your symbol so… #playRotate and #stopRotate. Thats all.

This is done so we still allow local behavior and don’t disturb that. Local as in, inside the Hype widget. Meaning if a listener doesn’t have the # infront it can’t be adressed from outside.

Look at the example. I really should do some more documentation and examples. My goal for 2019!

[paulk (Paul)]

Hmmm… I tried it that way first, and it didn’t work either.

you mean like this:
HypeGlobalBehavior.triggerCustomBehaviorNamed('#stopRotate');

It should also work that way from the console, correct?

Ultimately, I need to target it, like:
HypeGlobalBehavior.triggerCustomBehaviorNamed('#playRotate@hoverTest');

But I couldn’t get that either, so I took out the target trying to troubleshoot.

[MaxZieb (Loves Hype)]

No… only the listners need hash tags no where else

in your symbol so… #playRotate and #stopRotate

[paulk (Paul)]

Awesome - that’s exactly what I was missing. Works great now - thanks for your help and this extension!!

[MaxZieb (Loves Hype)]

Nice to hear… Yes, could use a version bump outputting some nice error message if you misstype a Hype document name while targeting. Currently it just fires at whatever you throw at it… even if that doesn’t exist.

[MaxZieb (Loves Hype)]

It’s rather “simple” how it works…

Flow when triggering a behavior

• Any custom behavior is sent to the local context as is!
  • It is also sent to Global Behavior on the page level
• Global Behavior forwards the behavior adding a # infront to all Hype Widgets, even the one sending it in the first place.

Flow when triggering a targeted behavior

• Using the @ symbol directs the custom behavior to only the specified Hype widgets
• Hint: As in this flow the ping@C is sent to Hype GlobalBehavior and processed there. A internally actually only receives the string as is “ping@C” (little grey arrow)

[paulk (Paul)]

Thanks, Max! That’s helpful. I didn’t realize that it also picks up and echos from within one Hype widget to others sharing the same custom behavior.

[MaxZieb (Loves Hype)]

picks up and echos

The “echos” are the concept behind Hype GlobalBehavior. They form the unified layer of behavior. As said this is done to avoid disturbing local functionality and specially infinite loops.

“Echos” is therefor the wrong term in the sense that global behavior changes the custom behavior by adding a # in front. I could also have added an other string. I might even add an option to set the added string to something individual. Maybe something like global_ could help understand it better.

[paulk (Paul)]

“Echos” is therefor the wrong term in the sense that global behavior changes the custom behavior by adding a # in front.

Thanks for that clarification, Max! I see now what is happening. I had noticed that when I had two instances on the page and hovered over the internal(round) Hype hover button, both instances played. But I hadn’t realized that that only worked if other instances were also listening for the #CustomBehavior.

Personally, I don’t think you need to change the naming… my confusion was in not understanding that I needed a listener starting with #. I was trying to put it in the script instead. Your screenshot above was what closed the loop for me. Perhaps a similar screen shot on your example page would help others.

[Rory_McIlroy]

infront to all Hype Widgets

“ping@C” (little grey arrow)

Mostly like twitter:grinning:

[Tiger]

Really cool!

[MaxZieb (Loves Hype)]

↑ look at project
Updated to version 1.7
Removed a bug when triggering a Hype widget in a iFrame that was not present on the same page level

[Rory_McIlroy]

Outdated Tutorials

Custom Behaviors are based on an Broadcaster <–> Listener concept. It is very easy once you imagine it the right way! So lay back and open your mind Custom Behaviors are a like a Twitter stream Yes, but what does that mean? That means any button or timeline action can trigger a Custom Behaviors much like sending a Tweet … But who receives the Tweet… I mean Custom Behaviour? That’s the magic… everybody who is listening. And how can I listen? Well currently you … I mean Hype… c…

Great Storyteller

[Tiger]

Hello,

This extension seems to set unique elements Ids of multiple widgets working in page wisely, is it possible to develop another extension to make class name of elements in multiple widgets working globally too?

[MaxZieb (Loves Hype)]

About your question:
This extension doesn’t set or use any element id’s!

Off topic side note:
I also advise against element id’s in a multi widget page. ID’s must be by definition unique… rather use CSS classes to select stuff. See…

Using querySelector and querySelectorAll to fetch elements

querySelector In most cases a querySelector is better than using getElementById. By nature Hype has multiple scene and specially symbols and this mostly doesn’t work for keeping ID’s unique. Hype offers some workarounds that resulted in the function hypeDocument.getElementbyId abstracting the regugular document.getElementById (using a lookup and scene scope) but I generally would advise using querySelector. Read the following introduction: https://www.w3schools.com/jsref/met_document_querysele…

[emcee]

Wow, great explanation! Love the tutorial, very cool. I’m trying to embed multiple Hype scenes into a web page at various positions. When one element appears within the view, I want to trigger an action for a fixed position div with another scene embedded into it. Would this framework be suitable for my scenario? Just want to make sure I understand it correctly, and that the project being referenced isn’t all contained within a Hype Document, with scenes embedded into one another.

[MaxZieb (Loves Hype)]

Sure does.

[emcee]

Sweet, thanks for the confirmation. Have been playing around with it, very straightforward with what you created. Thanks!

[MaxZieb (Loves Hype)]

It is also now on GitHub and JsDelivr …

worldoptimizer/HypeGlobalBehavior

[emcee]

Awesome!