Hype Global Behavior (Custom Behavior Extension)

↑ look at project
Updated to version 1.6
* Added Custom Behavior Ticker feature, code cleanup

↑ look at project
No updates to main code but a thread containing an code example with a single Hype file (see below):

i had a first deeper look and have to say this extension is really great stuff!

as you’ve intitiated the whole extension thread -> this really takes hype functionality further

1 Like

Hi @MaxZieb,

It looks great extension.

I am using HYPE wordpress plugin:
Tumult Hype Animations Wordpress Plugin

and I already add your JS into my project, but it does not work me, and the issue is at this post:

And here are my two Hype files(I do not know why I can not upload hype files here):
https://www.dropbox.com/s/wlvit2e1rh9m70o/product1.hype.zip?dl=0
https://www.dropbox.com/s/cbeqypfwla0vdg0/product2.hype.zip?dl=0

It would be great appreciated if you could let me know how to make them work at same time in one page.

By the way, is it possible to add your JS libraries into Hype wordpress plugin and make them work automatically? it would be much helpful and effective if it works in this way.

Have a nice day.

Alex

You have to add the custom behavior script library to your WordPress header. Use a childtheme and functions.php with some actions (https://developer.wordpress.org/themes/basics/including-css-javascript/) or use a plugin that can add to the header (for example https://wordpress.org/plugins/header-and-footer-scripts/).

Another solution you can test is to use iFrames instead of divs in the Hype-WordPress-Plugin. There is a setting on each hype upload. That way your original HTML with the script in the header is used but it will load the library multiple times. But the browser will work it’s magic and fetch it from cache.

I’d personally rather use the first solution but the second option might be easier todo quickly.

If you want to use Pusher.com (you need an account there) to broadcast Custom Behavior across devices, tabs and maschines use the following in your head section. Make sure to replace the YOUR-SERVER-URL and YOUR-PUSHER-KEY

Installation

	<script src="https://js.pusher.com/4.3/pusher.min.js"></script>
	<script>
		/*
		* Quick Pusher Extension for HypeTriggerCustomBehavior v1.7
		* written by Max Ziebell
		*/
		
		var pusher = new Pusher('YOUR-PUSHER-KEY', {
			cluster: 'eu',
			forceTLS: true
		});

		var channel = pusher.subscribe('HypeGlobalBehaviorChannel');
		channel.bind('HypeGlobalBehaviorEvent', function(data) {
			HypeGlobalBehavior.triggerCustomBehaviorNamed(data.behavior);
		});
		
		var socketId = null;
		pusher.connection.bind('connected', function() {
			socketId = pusher.connection.socket_id;
		});
		
		var triggerPusherBehavior = function(hypeDocument, element, event) {
			if (event.customBehaviorName.substr(0,1)!='#') {
				var xhr = new XMLHttpRequest();
				xhr.open("POST", "http://dev.maxziebell.de/Hype/GlobalBehavior/PusherTrigger.php", true);
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
				xhr.onreadystatechange = function () {
        			if (xhr.readyState != 4 || xhr.status != 200) return;
					console.log("Success: " + xhr.responseText);
				};
				xhr.send("behavior="+event.customBehaviorName+"&socket_id="+socketId);
			}
		}
		
		if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array();}
		window.HYPE_eventListeners.push({"type":"HypeTriggerCustomBehavior", "callback": triggerPusherBehavior});
	
	</script>

on the server you need PHP and you would normally have to use PHP Composer to build the Pusher library. I attached a ready built vendor library but beware that it was last updated on September 29. in 2018. For production you should update the vendor build (see https://github.com/pusher/pusher-http-php)

Install the vendor folder on your server. Compile it fresh or use this version from September 29. in 2018 vendor.zip (334,6 KB)

There is a newer vendor bundle if you don’t want to generate it your self done by @pj-avt found on this post.

Create a file called PusherTrigger.php and replace the placeholder with your Pusher infos:

<?php
require __DIR__ . '/vendor/autoload.php';

$options = array(
	'cluster' => 'eu',
	'useTLS' => true
);

$pusher = new Pusher\Pusher(
	'YOUR-PUSHER-KEY',
	'YOUR-PUSHER-SECRET',
	'YOUR-PUSHER-APP-ID',
	$options
);

$data['behavior'] = $_POST['behavior']; /* Todo sanatize and use private channel */
$pusher->trigger('HypeGlobalBehaviorChannel', 'HypeGlobalBehaviorEvent', $data, $_POST['socket_id']);

You can download the file here PusherTrigger.php.zip (1,0 KB). Be aware that some servers need the file to begin with <?php rather then only <?.

This should give the desired results and it works with Hype GlobalBehavior. Have Fun!


Quick test without installation

If you want to quickly test it open this file twice (in two tabs or devices)
http://dev.maxziebell.de/Hype/GlobalBehavior/PusherTest.html

And then trigger RedAlert in one of them. Both should fire!

For now this is an addition to the Hype GlobalBehavior and also needs that JS but it can easily be tweak to only work with the regular Custom Behavior from Hype.


Further information

To learn more about Pusher visit the following pages: https://pusher.com/docs/

1 Like

@MaxZieb Does this extension only work for widgets and iFrames? Can it also work for various hype container divs on the same page?

Sure. That’s where it started! But that doesn’t require pusher (that was only an test…)
Look at the first post in this thread.

Hi @MaxZieb -

This looks great, but I’m having trouble getting it to work. Does it still work with Hype 4?

I’m trying to just have a div on the page trigger custom behavior on mouseover and mouseout.

Also, I’ve tried just typing in console:
HypeGlobalBehavior.triggerCustomBehaviorNamed('playRotate')
and that doesn’t work either, though it does on your example page with RedAlert

Thanks for your insight!

Example hype file attached as well as html page setup as test.hoverTest.zip (123.6 KB)

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! :wink:

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.

No… only the listners need hash tags no where else

image

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

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.

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)
2 Likes

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.

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.

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.

Mostly like twitter:grinning::grinning::grinning::+1:

Really cool!:grinning: