/*
* @brief Bootstrap a responsive iframe
* @author lorenzogangi@gmail.com
*/
function createIframe( id, src ){
var scriptTag = document.getElementById( id ),
_mobile = false,
wrapper = document.createElement( 'div' ),
iframe = document.createElement( 'iframe' );
_mobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( navigator.userAgent.toLowerCase() ) );
wrapper.className = "tst-iframe-wrapper";
iframe.className = "tst-iframe";
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "webkitallowfullscreen", "" );
iframe.setAttribute( "mozallowfullscreen", "" );
wrapper.appendChild( iframe );
//insert the iframe
scriptTag.parentNode.insertBefore( wrapper, scriptTag );
//check if we are working with a small iframe
if ( iframe.clientWidth < 640 ){
//add a start screen if its not specified
if( src.indexOf( "?" ) !== -1 ) {
src = src+"&startscreen=true";
}
else {
src = src+"?startscreen=true";
}
//remove the startscreen flag from the request buffer so app doesnt open with a start screen
//modalIframe.src = src.replace( /startscreen=true/gi, "" ).replace( "&modal", "");
var modalSrc = src.substring( 0, src.indexOf( '?' ) );
//add back in the no brand flag if it is in the url.
if( src.indexOf( "brand=false" ) !== -1 ) {
modalSrc+="?brand=false"
}
//create a click cover
var clickCover = document.createElement( 'div' );
clickCover.className = "tst-click-cover";
wrapper.appendChild( clickCover );
//desktop logic to pop the viewer in a modalish window
if( !_mobile ) {
//add a modal iframe to hold the viwer after the user clicks to start looking at it.
var modalIframe = document.createElement( 'iframe' ),
modalIframeClose = document.createElement( 'div' ),
close = document.createElement('div');
modalIframe.className = "tst-iframe tst-modal-iframe";
modalIframeClose.className = "tst-modal-iframe-close";
close.className = "close-x";
close.innerHTML = "x"
modalIframeClose.appendChild( close );
wrapper.appendChild( modalIframe );
wrapper.appendChild( modalIframeClose );
//bind the clickcover
clickCover.addEventListener( "click", function( modalIframe, modalIframeClose ) {
return function() {
modalIframe.classList.toggle( "tst-modal-iframe--show" );
modalIframeClose.classList.toggle( "tst-modal-iframe--show" );
//load the iframe with the viewer the first time a user clicks the start screen
if(modalIframe.src === "") {
modalIframe.src = modalSrc;
}
};
}( modalIframe, modalIframeClose ) );
modalIframeClose.addEventListener( "click", function( modalIframe, modalIframeClose ) {
return function() {
modalIframe.classList.add( "opacity-off");
modalIframeClose.classList.add( "opacity-off");
setTimeout( function(){
modalIframe.classList.toggle( "tst-modal-iframe--show" );
modalIframeClose.classList.toggle( "tst-modal-iframe--show" );
modalIframe.classList.remove( "opacity-off");
modalIframeClose.classList.remove( "opacity-off");
}, 311)
};
}( modalIframe, modalIframeClose ) );
}
//mobile logic. Here we just send the user to a new tab containing the viewer
else {
clickCover.addEventListener( "click", function() {
window.location = modalSrc;
return true;
} );
}
}
//load the viewer
iframe.src = src;
//add the iframe css if it hasn't been added by another iframe bootstrap
if( !document.getElementById( "tst-iframe-style" ) ) {
var iframeStyle = document.createElement( 'style' );
iframeStyle.id = "tst-iframe-style";
iframeStyle.innerHTML = ".tst-iframe-wrapper{ clear: both; position: relative; padding-bottom: 65%; height: 0; overflow: hidden; max-width: 100%; }"+
".tst-iframe { border:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }"+
".tst-modal-iframe { height: 0; width: 90%; position: fixed; top: 5%; right: 5%; bottom: 5%; left: 5%; opacity: 0; z-index: 2147483647; transition: opacity .3s ease-in-out; }"+
".tst-modal-iframe-close { position: fixed; top:0; left: 0; background-color: #000; width: 100%; height: 0; z-index: 2147483646; opacity: 0; transition: opacity .5s ease-in-out; }"+
".close-x { width: 30px; height: 30px; border: 2px solid white; color: white; font-size: 24px; border-radius: 50%; font-weight: bold; font-family: arial; text-align: center; line-height: 23px; position: absolute;top: 2%;right: 2%;cursor: pointer;}"+
//".close-x { z-index: 2147483647; width: 30px; height: 30px; margin: 5px; background-image:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDk2IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBkPSJNNDgsMEMyMS40OTIsMCwwLDIxLjQ5MiwwLDQ4czIxLjQ5Miw0OCw0OCw0OHM0OC0yMS40OTIsNDgtNDhTNzQuNTA4LDAsNDgsMHogTTY3LjQxNiw2NC41ODQgIGMwLjc3OSwwLjc3NSwwLjc3OSwyLjA0OCwwLDIuODI4Yy0wLjM5MywwLjM5My0wLjkwNCwwLjU4NC0xLjQxNiwwLjU4NHMtMS4wMjMtMC4xOTYtMS40MTYtMC41ODRMNDgsNTAuODI4TDMxLjQxNiw2Ny40MTIgIGMtMC4zOTIsMC4zOTMtMC45MDQsMC41ODQtMS40MTYsMC41ODRzLTEuMDI0LTAuMTk2LTEuNDE2LTAuNTg0Yy0wLjc4LTAuNzgtMC43OC0yLjA1MywwLTIuODI4TDQ1LjE2OCw0OEwyOC41ODQsMzEuNDE2ICBjLTAuNzgtMC43OC0wLjc4LTIuMDQ4LDAtMi44MjhjMC43OC0wLjc4LDIuMDQ4LTAuNzgsMi44MjgsMGwxNi41ODQsMTYuNTg0TDY0LjU4LDI4LjU4OGMwLjc3OS0wLjc4LDIuMDUyLTAuNzgsMi44MjgsMCAgYzAuNzc5LDAuNzgsMC43NzksMi4wNDgsMCwyLjgyOEw1MC44MjQsNDhMNjcuNDE2LDY0LjU4NHoiLz48L3N2Zz4=\");}"+
".tst-modal-iframe--show { height: 90%; opacity: 1; }"+
".tst-modal-iframe-close.tst-modal-iframe--show { opacity: .8; height: 100% }"+
".tst-click-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }"+
".opacity-off{ opacity:0; }"+
"@media (max-width: 767px) { .tst-iframe-wrapper{ padding-bottom: 165%;} }"+
"@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) { .tst-iframe-wrapper{ padding-bottom: 60%;} }"+
"@media (min-width: 768px) and (max-width: 1023px) { .tst-iframe-wrapper{ padding-bottom: 98%;} }"+
"@media (min-width: 1500px) { .tst-iframe-wrapper{ padding-bottom: 60%;} }";
scriptTag.parentNode.insertBefore( iframeStyle, wrapper );
}
//remove the scriptTag from the dom
scriptTag.parentNode.removeChild( scriptTag );
}
window.addEventListener( "load", function( ev ) {
createIframe( "tst-6m9gcg", "https://my.threesixty.tours/app/v/3323mu/8lk0i4/6m9gcg" );
})