Hype LayoutKit

This extension is for situations that require a dynamic approach to the rules of your responsive design setup. It allows you to go way beyond the setup you can create in the regular Frontend. Hype LayoutKit creates a callback you can us to feed Hype a specific layout based on your own rules and settings (including MediaQueries written in JS).

• New: Every time Hype is about to refresh its screen Hype LayoutKit will consult the callback 'onLayoutRequest' to provide a layout name. The callback receives the layoutname and the scenename so you can make further distinctions or justnot return anything to fallback on Hype default behaviour. Further more you can use MatchMedia (JS-based MediaQueries and this extension includes the Polyfill for older browsers) or any rules you can come up with to switch layouts.
• Example: The following is the demonstration seen above based on a checkbox that triggers this code on it's click handler:

function lockLayout(hypeDocument, element, event){
	// get my checkbox cross by id
	var checkboxCross = hypeDocument.getElementById('checkbox-cross');
	// switch based on visibility of checkbox cross
	if (hypeDocument.getElementProperty(checkboxCross, 'opacity')==0){
		// remember layout, engage lock, show checkbox cross
		hypeDocument._currentLayout = hypeDocument.currentLayoutName();
		hypeDocument.onLayoutRequest = function(layoutName, sceneName){
			return hypeDocument._currentLayout;
		}
		hypeDocument.setElementProperty(checkboxCross, 'opacity', 1, 0.2, 'easeinout');		
	} else {
		// forget layout, delete lock, hide checkbox cross
		delete (hypeDocument._currentLayout);
		delete (hypeDocument.onLayoutRequest);
		hypeDocument.setElementProperty(checkboxCross, 'opacity', 0, 0.2, 'easeinout');
	}
}	

Just the tip of the iceberg. More examples will follow (inluding matchMedia).
• New: Here is another function you can now use when linking Hype LayoutKit called hypeDocument.fullScreen() and hypeDocument.fullScreenElement( element )