Javascript multiple layout manipulation


#1

@h_classen created a nice bit of code to keep your document the same size as your device width. Here is the code:

hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

const yourHeight = 400, yourWidth = 600;
positioning();
window.addEventListener('resize', positioning)
function positioning(){
var width =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = Math.floor((width*yourHeight)/yourWidth);


var scene = hypeDocument.currentSceneElement();

scene.style.height  = height + 'px';
document.getElementById(hypeDocument.documentId()).style.height = height + 'px';

hypeDocument.relayoutIfNecessary();
}

My problem is that I need to use this for a smaller layout, but not with larger layouts. When you go from a larger to a smaller one, the page manipulation remains. I’ve tried removing the event listener and creating a new JS to change the bigger layout to its normal size but no success.

Heres the hype document:
DOUBLE LAYOUT.hype.zip (15.6 KB)


(Hans-Gerd Claßen) #2

hi,

say you’ve got a responsive layout and change its containers to fixed height and on the next scene or layout you want to switch back to responsiveness … you’ve got to assign a height of 100% instead. you can destinguish between scenes using scenenames. Please have a search for hype extension in this forum to find some functions to make this task easy.

btw it may be better praxis to attach the eventlistener onDocumentLoad once. worst case would be to attach it several times :slight_smile:


#3

Hey Hans!

I’m having some trouble figuring out what you mean. I’ve spent a while reading through the forums, specifically THIS topic, but i’m still confused about how I can fit what you’re saying into the code you made.

Is there a way you can simplify it for me, or point me in the right direction? I’m very keen to learn :slight_smile:


(Hans-Gerd Claßen) #4

well, the easiest way¿

switch

to global vars
window.yourHeight …

onlayoutload set new values … 100% …


#5

Thanks Hans! I managed to get it to work, but I’m not sure if it’s the same way you described. Can you check to see if it’s the most efficient way, as it still makes a new eventListener.

This is the code for the 100% scaled layout.

hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

var yourHeight = 100, yourWidth = 100;
positioning();
window.addEventListener('resize', positioning)
function positioning(){
var width =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = Math.floor((width*yourHeight)/yourWidth);


var scene = hypeDocument.currentSceneElement();

scene.style.height  = yourHeight + '%';
document.getElementById(hypeDocument.documentId()).style.height = yourHeight + '%';

hypeDocument.relayoutIfNecessary();
}

(Hans-Gerd Claßen) #6

Hi,
at the moment hype does not offer global event “HypeLayoutLoad” and we’ve got no access to the breakpoints.

you may try this which is preferred to be placed in the head. please add your data in the marked section. only tested with a simple document. if your document will have different breakpoints for different scenes this script will not work … this would have to be added …

<script>

function setSceneHeight(hypeDocument, element, event) {
var registerEvent  = true;

setHeight();

if(registerEvent){
window.addEventListener('resize', setHeight);
registerEvent = false;
}

function setHeight(){

///set your breakpoints and constrains here
var breakPoints = 
[
{"breakpoint" : 320, "constrains": ["relative", 100]}, //this example will have a height of 100%
{"breakpoint" : 600, "constrains": ["absolute", 600, 400]}//here the constrains will be calculated to an absolute height
];
///////


hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}


var width =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);

for(var i = 0; i < breakPoints.length; i++)
{
var _obj = breakPoints[i];
if(i === breakPoints.length-1){setConstrains(_obj.constrains); break;};
if(i === 0 && width < _obj.breakpoint){setConstrains(_obj.constrains); break;}
var _next = breakPoints[i+1];
if(width >= _obj.breakpoint && width < _next.breakpoint){setConstrains(_obj.constrains); break;}
}


function setConstrains(_arr)
{
if(_arr[0] === "relative"){
var newHeight = _arr[1] + "%"
}else{
var newHeight = Math.floor((width*_arr[2])/_arr[1]) + "px";
}


var scene = hypeDocument.currentSceneElement();

scene.style.height  = newHeight;
document.getElementById(hypeDocument.documentId()).style.height = newHeight;
console.log(scene.style.height)
hypeDocument.relayoutIfNecessary();
}

}
 

   return false;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":setSceneHeight});

 </script>

(Jonathan Deutsch) #7

I just wanted to chime in as an acknowledgement of the importance of this feature (manually changing layouts/overriding Hype’s layout picking behavior). It is definitely noted.