Wordpress plugin: Open a animation on specific scene?

Scenes
1

Hey, I’m using the wordpress-plugin to display a Hype-animation graphs from example am-chart chart library.

To streamline the workflow I want to create one main hype-presentation, with different graphs in different scenes (for a number of reasons) and then call different scenes on different posts and pages in wordpress.

How do I open the open the animation on a specific scene with the wordpress-plugin? Is there a a way to put in I the shortcode?

Like this: [hypeanimations_anim id=“4”, scene=“7”]

2

@MaxZieb recently created this extension to enable communication between embeded hypedocuments and from external html. it's is described to work with iframe-embedding too ....

3

That looks great, but I’m not sure how it answers my question? Sure it’s a reply to the right question?

4

Currently there is no such functionality in this plugin. So my previous answer provides one way to go :smiley:

5

Here is your solution…

Upload your OAM-file and the use the class as a parameter

38
Bildschirmfoto 2018-03-25 um 23.00.38.JPG962×260 31 KB

In you Hype load in the first Scene (best you leave it empty or with a loader splash) the following function:

	/* fetch container by documentId & fetch parentNode class */
	var doc = hypeDocument.getElementById(hypeDocument.documentId());
	var divClass = doc.parentNode.className;
	
	/* check the result in console (remove in production) */
	console.log("ParentNode is: " + doc.parentNode);
	console.log("ParentNode className is: " + divClass);

	/* do something with the class ... like switching scene */
	hypeDocument.showSceneNamed(divClass);

Have fun!

6

Just realized the last solution isn’t flexible as the class is only set once. And used on each embed. But then maybe you can use window.location.pathname if each embed has it’s own page …

var scene = "";

/* do something with the class ... like switching scene */
switch (window.location.pathname) {
    case "/path1":
        scene="Scene_1"; break;

    case "/path2":
        scene="Scene_2"; break;

    case "/path2":
        scene="Scene_3"; break;

}

hypeDocument.showSceneNamed(scene);
7

If you name your scene like the path in your host you can even do the following

50

/* one liner  */
hypeDocument.showSceneNamed(window.location.pathname);
8

Okay I got the solution (put this in a init-function in your first scene):

	//fetch container by documentId & fetch grand parentNode dataset
	var doc = hypeDocument.getElementById(hypeDocument.documentId());
	var dataset = doc.parentNode.parentNode.dataset;
	
	//check the result in console (remove in production)
	console.log("GrandParentNode is:");
	console.log(doc.parentNode.parentNode);
	console.log("GrandParentNode dataSet is:");
	console.log(dataset);

	// do something with the dataset ... like switching scene 
	hypeDocument.showSceneNamed(dataset.scene);

In WordPress use the “TEXT” mode in the classic-editor and wrap the shortcode

<div data-scene="Scene_2">[hypeanimations_anim id="2"]</div>

Have Fun!

1 Like
9

Here is a shortcode you can use if you have access to your functions.php. This is something you should only use in a childtheme so you can still update your main theme.


add_shortcode('hypeanimations_anim_dataset', 'hypeanimations_anim_dataset');
function hypeanimations_anim_dataset($args,$content){
	$id = intval($args['id']);
	$ret = '<div';
	foreach ($args as $key => $value) {
		$key = sanitize_key($key);
		$value = sanitize_text_field($value);
    	if ($key!='id') $ret.= ' data-'.$key.'="'.$value.'"';
	}	
	$ret.= '>';
	$ret.= do_shortcode('[hypeanimations_anim id="'.$id.'"]');
	$ret.='</div>';
	return $ret;
}

This renders the <div data-scene="XYZ">... part for you resulting in a shortcode called hypeanimations_anim_dataset that looks like this:

[hypeanimations_anim_dataset id="2" scene="2"]

Update: You can now use any parameter and it will render as a data node!

[hypeanimations_anim_dataset id="2" scene="2" long="40.689249" lang="-74.044500"]
1 Like
10

The plugin version of the above shortcode can be found here (moved it to own thread):

2 Likes