Responsive layouts, distinguish portrait and landscape

Using JavaScript with Hype Function Library
13

well, instead of looking for the best matching ratio within layouts matching portrait or landscape and breakpoints you could simply take the biggest breakpoint from matching portrait or landscape …

<script>

	function layoutRequest(hypeDocument, element, event) {


var pLayouts = [], hLayouts = [], destArray = [], debug = true;

var allLayouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());

allLayouts.forEach(function(currentValue){
if(currentValue.width >= currentValue.height){hLayouts.push(currentValue)}else{pLayouts.push(currentValue)}
})



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

var adHeight = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);



if(adWidth >= adHeight){
var layoutPool = hLayouts.sort(function(a,b){return a.breakpoint - b.breakpoint})
}else{
var layoutPool = pLayouts.sort(function(a,b){return a.breakpoint - b.breakpoint})
};



layoutPool.forEach(function(currentValue){
if(currentValue.breakpoint <= adWidth){
destArray.push(currentValue);
}

})

destArray = destArray.sort(function(a,b){return a.breakpoint - b.breakpoint})

if(destArray.length === 1){
if(debug){console.log(destArray[0].name)};
return destArray[0].name;
}else if(destArray.length > 1){
if(debug){console.log(destArray[destArray.length-1].name)};
return destArray[destArray.length-1].name
}else{
return false
}


//////////
  }

  if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>
4 Likes