Hi,
i fiddled this for another thread in the frorum a few weeks ago and thought it might be worth a own topic.
just to be sure someone can find it when searching for a solution on this.
paste the following script to the head of the document and it will show a layout based on those rules:
on first place potrait or landscape is considered
on second place the breakpoints being set are considered
on third place the best matching layoutproportion of above …
if there’s no matching the hypedefaultlayout will be shown.
so for example you can create layouts with identical (or overlapping) breakpoints that are portrait or landscape and the script will show the best fitting for the given space in the document. This may be helpful with responsive ads …
<script>
function layoutRequest(hypeDocument, element, event) {
var pLayouts = [], hLayouts = [], destArray = [], debug = false;
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>
Hope this’ll work
Have a best day!