Hype WordPress Dataset (Shortcode Extension)

Extension Project
1

00001
00001.png2000×1200 162 KB

Add dataset parameters to your Tumult Hype animations (learn more about them here). To understand how this plugin came about, visit the forum thread that started this all. The following download installs a shortcode called [hypeanimations_anim_dataset] which adds new capabilities to your official Tumult Hype Animations shortcode like enriching them with dataset parameters.

Usage:
[hypeanimations_anim_dataset id="X" key1="value1" key2="value2"]

Result:
<div data-key1="value1" data-key2="value2">…Usual Hype-Shortcode…</div>

Example:
[hypeanimations_anim_dataset id="X" scene="MyScene"]

Data retrieval in Hype:

	//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(hypeDocument.documentId()+" datasetValues are:");
	console.log(dataset);

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

Optional: Putting content into the content area

As of version 1.2 the content node of the shortcode can also be used to transport nodes or any other data (blob). To use a blob put your content in a comment and that way it doesn’t get rendered as HTML.

[hypeanimations_anim_dataset id="X"]
    <div>Hello World</div>
[/hypeanimations_anim_dataset]

[hypeanimations_anim_dataset id="X"]
  <!--  I am a blob and could  be JSON -->
[/hypeanimations_anim_dataset]

Manually fetching the content from the shortcode in Hype

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

You can also use the Hype extension below that does the job and also supports iFrame-embeds:
If using the extension below in an embed that uses the iFrame-Wrapper make sure to include the extension below into your Head-HTML in Hype. If you want to rather use then DIV-Wrapper include the script into your theme directly. You can edit your functions.php (make sure to use a childtheme) and use the wp_enqueue_scripts hook todo so or for convenience use a plugin that allows you to add script to the WordPress head section. Once you have the extension installed you can run hypeDocument.fetchDataset(); from within your document and the function populates the following …

hypeDocument.datasetValues,
Contains all keys and values set on the shortcode. So using the example from above the scene key would be accessed like this: hypeDocument.datasetValues.scene

hypeDocument.datasetContent
Contains an HTML-Div holding your content. Perfect to have a bunch of nodes using a class with Content for your Hype-widget <div class="name">Holger</div>... the infromation is set to display:none but still accessible by search engines (and for now also to screenreaders)

hypeDocument.datasetBlob
Contains the content from the first comment in your shortcode (for JSON etc.)<!-- {"name":"holger"} -->... this information is not parsed by the browser as it is only a comment to the browser but the return value inside Hype is the string contained in the comment.

http://playground.maxziebell.de/Hype/ContentKit/HypeContentKit.js

Installation:
Just upload the zip-file in the next section (Download) of this post as a plugin to your WordPress installation. This plugin requires the official Tumult Hype Animation plugin to work and be installed first (dependency).

Download:
https://playground.maxziebell.de/Hype/AnimationDatasetShortcode/tumult-hype-animations-dataset.zip

Version
1.0 First release
1.1 Added dependancy check with official plugin
1.2 Added content and blob support, added iFrame support (with extension)

5 Likes