| <html> |
| <head> |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
| <script> |
| |
| var launchPageConfig = { |
| "apps": [{ |
| "icon": "https://uswest.appetize.io/images/sample-icon.png", |
| "iOS": { |
| "publicKey": "demo_phq04c56jnvrkg0bn9w5ep4m9r", |
| "languages": [{ |
| "locale": "en_CA", |
| "language": "en", |
| "name": "English" |
| }, { |
| "locale": "fr_CA", |
| "language": "fr", |
| "iosKeyboard": "fr_CA@sw=QWERTY-Accents", |
| "name": "French" |
| }], |
| "devices": [{ |
| "name": "Phone", |
| "type": "iphone8" |
| }, { |
| "name": "Tablet", |
| "type": "ipadair2" |
| }] |
| }, |
| "Android": { |
| "publicKey": "demo_r0m5r98axtdhftx1hmmhq1c0m8", |
| "languages": [{ |
| "language": "en_CA", |
| "name": "English" |
| }, { |
| "language": "fr_CA", |
| "name": "French" |
| }], |
| "devices": [{ |
| "name": "Phone", |
| "type": "nexus5" |
| }, { |
| "name": "Tablet", |
| "type": "nexus9" |
| }] |
| } |
| }], |
| "options": { |
| "hidePasswords": true |
| } |
| }; |
| |
| $( document ).ready(function() { |
| |
| var appElements = []; |
| for (var i = 0; i < launchPageConfig.apps.length; i++) { |
| appElements.push("<a onclick='selectApp(" + i + ");'><img src='" + launchPageConfig.apps[i].icon + "' class='launch-icon'/></a>"); |
| } |
| $('#apps').empty(); |
| $('#apps').append(appElements); |
| selectApp(0); |
| }); |
| |
| var selectedApp = 0; |
| function selectApp(index) { |
| if (!sessionActive || confirm('This will restart your session. Do you want to continue?')) { |
| sessionActive = false; |
| selectedApp = index; |
| $('#apps .selected').removeClass('selected'); |
| $($('#apps img')[selectedApp]).addClass('selected'); |
| |
| var platformElements = []; |
| if (launchPageConfig.apps[index].iOS) |
| platformElements.push("<a onclick=\"selectPlatform('iOS');\"><button type=\"button\" class=\"btn btn-info\">iOS</button></a>"); |
| if (launchPageConfig.apps[index].Android) |
| platformElements.push("<a onclick=\"selectPlatform('Android');\"><button type=\"button\" class=\"btn btn-info\">Android</button></a>"); |
| $('#platforms').empty(); |
| $('#platforms').append(platformElements); |
| |
| if (launchPageConfig.apps[index].iOS) |
| selectPlatform('iOS'); |
| else if (launchPageConfig.apps[index].Android) |
| selectPlatform('Android'); |
| } |
| } |
| var selectedPlatform; |
| function selectPlatform(platform) { |
| if (!sessionActive || confirm('This will restart your session. Do you want to continue?')) { |
| sessionActive = false; |
| $('#savescreenshot').hide(); |
| $('#endsession').hide(); |
| selectedPlatform = platform; |
| $('#platforms .selected').removeClass('selected'); |
| $('#platforms .btn:contains("'+selectedPlatform+'")').addClass('selected'); |
| var deviceElements = []; |
| if (launchPageConfig.apps[selectedApp][platform].devices && launchPageConfig.apps[selectedApp][selectedPlatform].devices.length > 0) { |
| for (var i = 0; i < launchPageConfig.apps[selectedApp][platform].devices.length; i++) { |
| var element = $(document.createElement('a')); |
| element.attr("onclick", "selectDevice(launchPageConfig.apps[selectedApp][selectedPlatform].devices["+i+"])"); |
| element.append("<button type=\"button\" class=\"btn btn-info\">"+launchPageConfig.apps[selectedApp][selectedPlatform].devices[i].name+"</button>"); |
| deviceElements.push(element); |
| } |
| $('#devices').empty(); |
| $('#devices').append(deviceElements); |
| selectDevice(launchPageConfig.apps[selectedApp][selectedPlatform].devices[0]); |
| } |
| var languageElements = []; |
| if (launchPageConfig.apps[selectedApp][selectedPlatform].languages && launchPageConfig.apps[selectedApp][selectedPlatform].languages.length > 0) { |
| for (var i = 0; i < launchPageConfig.apps[selectedApp][selectedPlatform].languages.length; i++) { |
| var element = $(document.createElement('a')); |
| element.attr("onclick", "selectLanguage(launchPageConfig.apps[selectedApp][selectedPlatform].languages["+i+"])"); |
| element.append("<button type=\"button\" class=\"btn btn-info\">"+launchPageConfig.apps[selectedApp][selectedPlatform].languages[i].name+"</button>"); |
| |
| languageElements.push(element); |
| } |
| $('#languages').empty(); |
| $('#languages').append(languageElements); |
| selectLanguage(launchPageConfig.apps[selectedApp][selectedPlatform].languages[0]); |
| } |
| } |
| } |
| var selectedDevice; |
| function selectDevice(device) { |
| if (!sessionActive || confirm('This will restart your session. Do you want to continue?')) { |
| sessionActive = false; |
| $('#savescreenshot').hide(); |
| $('#endsession').hide(); |
| selectedDevice = device; |
| $('#devices .selected').removeClass('selected'); |
| $('#devices .btn:contains("'+selectedDevice.name+'")').addClass('selected'); |
| updateIframeSrcUrl(); |
| } |
| } |
| var selectedLanguage = {}; |
| function selectLanguage(language) { |
| if (!sessionActive || confirm('This will restart your session. Do you want to continue?')) { |
| sessionActive = false; |
| $('#savescreenshot').hide(); |
| $('#endsession').hide(); |
| selectedLanguage = language; |
| $('#languages .selected').removeClass('selected'); |
| $('#languages .btn:contains("'+selectedLanguage.name+'")').addClass('selected'); |
| updateIframeSrcUrl(); |
| } |
| } |
| function updateIframeSrcUrl() { |
| var url = 'https://appetize.io/embed/' + launchPageConfig.apps[selectedApp][selectedPlatform].publicKey + '?deviceColor=white¢ered=true&toast=top&xdocMsg=true&device=' + selectedDevice.type + '&language=' + selectedLanguage.language + '&locale=' + selectedLanguage.locale + '&iosKeyboard=' + selectedLanguage.iosKeyboard + '&hidePasswords=' + launchPageConfig.options.hidePasswords + '&orientation=auto'; |
| $('#app_iframe').attr('src', url); |
| iframe = document.querySelector('iframe'); |
| } |
| $(document).on('input', '#slider', function() { |
| setScale( $(this).val()*100 ); |
| }); |
| |
| var iframe = document.querySelector('iframe'); |
| function rotateLeft() { |
| iframe.contentWindow.postMessage('rotateLeft', '*'); |
| } |
| function rotateRight() { |
| iframe.contentWindow.postMessage('rotateRight', '*'); |
| } |
| function setScale(number) { |
| iframe.contentWindow.postMessage({ |
| type: 'setScale', |
| value: number |
| }, '*'); |
| } |
| function saveScreenshot() { |
| iframe.contentWindow.postMessage('saveScreenshot', '*'); |
| } |
| function endSession() { |
| if (!sessionActive || confirm('This will restart your session. Do you want to continue?')) { |
| iframe.contentWindow.postMessage('endSession', '*'); |
| } |
| } |
| |
| var sessionActive; |
| var messageEventHandler = function(event) { |
| if (event.data == 'appLaunch') { |
| sessionActive = true; |
| $('#savescreenshot').show(); |
| $('#endsession').show(); |
| } else if (event.data == 'sessionEnded') { |
| sessionActive = false; |
| $('#savescreenshot').hide(); |
| $('#endsession').hide(); |
| } |
| }; |
| window.addEventListener('message', messageEventHandler, false); |
| </script> |
| <style> |
| body { |
| padding: 20px; |
| } |
| a { |
| cursor: pointer; |
| } |
| .launch-icon { |
| width: 50px; |
| border-radius: 5px; |
| } |
| button{ |
| margin-bottom: 10px; |
| } |
| .toggles .btn:not(.selected), |
| .toggles img:not(.selected) { |
| opacity: .4; |
| } |
| </style> |
| </head> |
| <body> |
| <h5> |
| Platform |
| </h5> |
| <div id="platforms" class="toggles"><a onclick="selectPlatform('iOS');"><button type="button" class="btn btn-info selected">iOS</button></a><a onclick="selectPlatform('Android');"><button type="button" class="btn btn-info">Android</button></a></div> |
| <br> |
| <h5> |
| Device |
| </h5> |
| <div id="devices" class="toggles"><a onclick="selectDevice(launchPageConfig.apps[selectedApp][selectedPlatform].devices[0])"><button type="button" class="btn btn-info selected">Phone</button></a><a onclick="selectDevice(launchPageConfig.apps[selectedApp][selectedPlatform].devices[1])"><button type="button" class="btn btn-info">Tablet</button></a></div> |
| <h5> |
| Rotate |
| </h5> |
| <div id="rotate" class="toggles"><a onclick="rotateLeft();"><button type="button" class="btn btn-info selected">Rotate</button></a></div> |
|
|
| <div class="col-md-9"> |
| <iframe id="app_iframe" width="1500px" height="700px" frameborder="0" scrolling="no" style="max-width: 100%;"></iframe> |
| </div> |
| </body></html> |
