Hype StateKit (LocalStorage Extension)

Extension Project
1

HypeDocumentLoader
HypeStateKit.jpg1280×905

This extension is a Hype specific interface to LocalStorage and allows for local persistent user data (browser specific). It also extends on the capability of the regular LocalStorage to store complex and nested data. This is a quick first release and more examples will follow on demand.

Demonstration:
https://playground.maxziebell.de/Hype/StateKit/

Hype-file for demonstration
https://playground.maxziebell.de/Hype/StateKit/quickTestStateKit.hype.zip

Code repository on GitHub

Version history:
1.0 Initial release with simple example

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeStateKit/HypeStateKit.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeStateKit

Learn how to use the latest extension version and how to combine extensions into one file at

6 Likes
2

Thanks for the reply! I’m having a look at your demo files, thanks for sharing them.

I get the principle, but I think it is a shade beyond me in terms of code (I’m more UI/UX visual design - with a relatively good understanding of code, but I don’t do much myself).

Looking at your files and I’ll give it a shot.

I was hoping there would be an easy (or less code biased!) way to ‘save state’. I just need to reopen the app in the same spot of the timeline. No other info is required because it is essentially just a presentation.

Good luck with your project too!

3

This is a cool project. I wonder if there’d be value in transparently listening to the Hype load event and calling loadState then. And/or using getter/setter to do this transparently on a customData object so it can be treated like normal JS.

4

Thought about this too but discharged it for now as I didn’t want to have a fixed mapping. But it certainly is easier for newbies. I’ll look into it (at the least as an option).

Thanks for the suggestion°

5

Well, there is at least one downside to using getters and setters … they only fire if you directly set them. So if one would assign an object to hypeDocument.customData = {}; and later set a key on the customData like hypeDocument.customData.name="tom"; it won't fire the setter on customData only hypeDocument.customData = {name:'tom'} will do that. This can lead to the false sense that something has been saved and would demand some recursive Object.observe/watch logic to ensure that everything works as expected. If there are no suggestions about something I overlooked I will rather not go down this path. At least with function calls one knows that an intended action was triggered.

6

I just realized even though I am not putting the code for a getter/setter version in there (just yet) you can use it if your aware of the limitations. Here is what I was playing around with:

This would be a setter/getter you can play around with

Object.defineProperty(hypeDocument, 'customData', { 
	get: function() { 
		return loadState('customData');
	},
	set: function(stateData) { 
		saveState('customData', stateData);
	}
});

or the following for a pageState

Object.defineProperty(hypeDocument, 'customPageData', { 
	get: function() { 
		return loadPageState('customData');
	},
	set: function(stateData) { 
		savePageState('customData', stateData);
	}
});

Usage is the mentioned ‘regular’ JS variable interface instead of calling JS functions:

/* if the object as never been set before init some data */
if (hypeDocument.customData==null) { 
	hypeDocument.customData = {
		name : 'tom',
		nested : {hello : 'world'}
	}
}
/* DO YOUR STUFF with the data*/

/* LATER the limitation of setter require to triggering the setter */
hypeDocument.customData = hypeDocument.customData;
/* OR define it as a whole object again hypeDocument.customData = {…} */

Although I prefer using saveState(), loadState() functions directly!

As that isn’t that much more work. Actually it’s ruffly the same amount of code without having to think about the limitations of getter/setter and defining them in the first place.

Update:
see below for an example just using Hype StateKit

Further investigation into a “simple” interface:
I am actually thinking of maybe going another route for the “simple” interface based on something like a string based setter/getter allowing for nested objects and default values.

1 Like
7

Here is the same without using setter/getter:

Update 12 days later
REMOVED CODE HERE SEE EXAMPLE BELOW!

8

Here is a quick function example to make customData a persistent value across page reloads

/* RETRIEVE the data  */
hypeDocument.customData = hypeDocument.loadState('customData');

/* INIT (optional) set to object for pre 612 build */
if (hypeDocument.customData==null) {
	hypeDocument.customData = {}
} 

/* DEFAULTS (optional) set to inital app/animation data*/
if (Object.keys(hypeDocument.customData).length==0) { 
	hypeDocument.customData = {
		name : 'tom',
		nested : {hello : 'world'}
	}
}

/* DO YOUR STUFF with the data in hypeDocument.customData (interaction) */

/* SAVE it when appropriate */
hypeDocument.saveState('customData', hypeDocument.customData);
4 Likes