Hype Stage Resizer

Extension Project
,
1

HypeStageResizer_1
HypeStageResizer_11200×848 86.3 KB

This is just a little code dump of an older script I am using but never published and feedback is welcome. Might help somebody or if I get some feedback we can make it a 1.0 release and add some artwork and features. It basically sets the height on a 100% width and height file according to the ratio given by a dimensions’ element (or group). This way one can animate the height … and it fixes the height problem when embedding the file in WordPress (although then the code would have to be added to the WordPress header).


/*!
Hype StageResizer
copyright (c) 2019 Max Ziebell, (https://maxziebell.de). MIT-license
*/

/*
* Version-History
* 0.8 Alpha release used for a client project
* 0.9 Initial release under MIT-license as Beta
*/

if("HypeStageResizer" in window === false) window['HypeStageResizer'] = (function () {

	var _stageResizeCallback;
	var _stageMutationObserver;

	function sceneLoad(hypeDocument, sceneElm, event){
		var hypeDocElm = document.getElementById(hypeDocument.documentId());
		var groupElm = sceneElm.querySelector('.dimensions');
		if (groupElm){
			_stageResizeCallback = function(ml){
				var sceneWidth = parseFloat(window.getComputedStyle(sceneElm, null).getPropertyValue("width"));
				var ratio = hypeDocument.getElementProperty(groupElm, 'height') / hypeDocument.getElementProperty(groupElm, 'width');
				hypeDocElm.style.setProperty('height', Math.ceil(sceneWidth*ratio)+'px', 'important');
			}
			_stageMutationObserver = new MutationObserver(_stageResizeCallback);
			_stageMutationObserver.observe(groupElm, {attributes: true, attributeFilter: [ "style" ]});
			_stageResizeCallback();
		}
	}
	
	function sceneUnload(hypeDocument, sceneElm, event){
		_stageMutationObserver.disconnect();
		delete(_stageResizeCallback);
		delete(_stageMutationObserver);
	}
	
	/* setup callbacks */

	if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array();}
	window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback": sceneLoad});
	window.HYPE_eventListeners.push({"type":"HypeSceneUnload", "callback": sceneUnload});
	
	/* Reveal Public interface to window['HypeStageResizer'] */
	return {
		version: '0.9',
	};
})();

HypeStageResizer.hype.zip

2 Likes
2

Hi Max,

the layoutrequest will serve layoutdimensions which may come in handy instead of an element with class ‘dimension’ … at least it’ll a bit more of a generic approach :slight_smile:

3

Thanks for the feedback. I did one using layout requests (found in extensions). I am not sure why I went with the dimensions element. I think it was the reason that I wanted to be able to animate the height. I look into it and I am going todo a reevaluation…

4

Thanks for putting this together. A pretty cool technique to animate the scene’s boundary!

1 Like
5

So, I looked into using layoutRequests. But as I am not switching scenes or layouts it doesn’t work very well on the animation aspect. It also fires pretty (unnecessary) often on building the scene. Then it is fired on window resizes but not on animations. Apart from these finding anything in particular that would make it more generic?

Sidenote: Fetching the aspect ratio on a percent-based layout would be nice. It should be doable in Hype DataLoader … any other sources for the information? That is what I could think of for making it more generic but that approach still would be missing the animation part.

6

If it is about switching layouts (not resizing them) one could calculate the ration for each layout (hence projecting its ratio onto a number line) and switch to a layout based on the proximity of the container ratio to next layout ratio. Either using a ceil, floor or nearest neighbor approach. But I think I’d make this another extension to keep it modular.

7

blame on me :slight_smile: i didn't have a close enough look at your approach. just thought of a proportional layout/scene-resizer regarding the available width ... but building it around the mutation-obeserver give far more opportunities than load/resizing-events ...

8

You got any insight on that topic ?

9

you mean responsive layout?
well, the original dimensions are served with the layoutrequest ... did not have a lookup in your DataLoader yet ...

11

There is a great approach by Hans @h_classen that use layout requests to resize the stage proportional given you don't want to animate the stage resize as this approach does. I often use his approach on immediate resizes and posted my tweak version of it here.

1 Like