Responsive layouts, distinguish portrait and landscape

Using JavaScript with Hype Function Library
3

this’ll add square sizes to horizontal layouts pool. so if the breakpoint allows showing … it’ll show the matching horizontal layout instead of the portraitlayout:

<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})
};

var tmpArray = [];
layoutPool.forEach(function(currentValue){

if(currentValue.breakpoint <= adWidth){
destArray.push(currentValue.name);
tmpArray.push(currentValue.width/currentValue.height)
}

})



if(destArray.length === 1){
if(debug){console.log(destArray[0])};
return destArray[0];
}else if(destArray.length > 1){
if(debug){console.log(destArray)};
if(debug){console.log(tmpArray)};
if(debug){console.log(adWidth/adHeight)};
var index = closestIndex(tmpArray, adWidth/adHeight);
if(debug){console.log(destArray[index])};
return destArray[index]
}else{
return false
}


//////////

function closestIndex(array, nbr){

 smallestDiff = Math.abs(nbr - array[0]);
closest = 0;

for (i = 1; i < array.length; i++) {
  currentDiff = Math.abs(nbr - array[i]);
  if (currentDiff < smallestDiff) {
smallestDiff = currentDiff;
closest = i;
  }
}
return closest;
}
//////////
  }

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

thx for testing :slight_smile:

7 Likes