Mobile First setup for Storyline360 with Javascript

As im working on a 'Mobile First' setup for Storyline360 i wanted to ensure users on a desktop or bigger screen get some image in the background of the Storyline player so it 'shows' better. For Storyline 2 and the 'classic player' there are several solutions around the forum to get that done.

But i didnot want to edit in published HTML..so got it to work like this...

I use this function to get information of all elements i have in a Storyline page.

getXLinkHref();

Basically getXLinkHref( ) runs over your existing Storyline...gets data from the images and elements on your page... checks if they are texts or images and passes that to arrays.

As a parameter you give the image you want to use for your background...and it returns that into the background of the page...

playerFrame = document.querySelector("#frame")
playerFrame.style.backgroundImage = "url('"+getXLinkHref('bg-bar.jpg')+"')";
playerFrame.style.backgroundSize = "contain";
playerFrame.style.backgroundRepeat = "x-repeat";

function getXLinkHref(_image){
images = "#slide-window > div > div > div.slide-transition-container > div > div.slide-layer.base-layer.shown >";
svgDivsStr = "#slide-window > div > div > div.slide-transition-container > div > div.slide-layer.base-layer.shown >";
svgDivsNthChildStr ="#slide-window > div > div > div > div > div.slide-layer.base-layer.shown > div:nth-child"
slideCollection = document.getElementsByClassName('slide');
slideWindowCollection = document.getElementsByClassName('slide-window');
textsArray = [];
imagesArray = [];
divs = document.getElementsByTagName("div");
shapesCollection = document.getElementsByTagName("path"); 
 for (var i = 1; i < shapesCollection.length+1; i++) {
 var el = document.querySelector(svgDivsNthChildStr+"("+i+")");
 var elId =el.getAttribute('data-model-id');
 var elText = el.getAttribute('data-acc-text');
 // a text element
 if (document.querySelector(svgDivsNthChildStr+"("+i+")").getElementsByTagName('tspan').length) {
 textsArray.push(i);
 }else{// not a text element
if(elText.indexOf(".png")!=-1 || elText.indexOf(".jpg")!=-1 )// if the source is png or jpg...
{
 imagesArray.push(i);
if(elText==_image){
 console.log("imagesArray: "+i+" / "+elText+" / url: "+el.getElementsByTagName('image')[0].getAttribute('xlink:href'));
 return el.getElementsByTagName('image')[0].getAttribute('xlink:href')
}
 
}
 }
 //if we have a 'END' element, gets the last shape element to process
 if(document.querySelector(svgDivsNthChildStr+"("+i+")").getAttribute('data-acc-text')== "END"){
 break;
 }else{
 }
 }
}