<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport"> <title>IntuiClock Config</title> <link rel="stylesheet" href="css/slate.min.css"> <script type="text/javascript" src="js/slate.min.js"></script> </head> <body> <form id="main-form"> <div class="item-container"> <div class="item-container-header">Features</div> <div class="item-container-content"> <label class="item"> Seconds Hand <input id="input-seconds-hand" type="checkbox" class="item-toggle" name="seconds-hand" checked> </label> <label class="item"> Battery Indicator <input id="input-battery-indicator" type="checkbox" class="item-toggle" name="battery-indicator" checked> </label> <label class="item"> Date Format <select id="input-date-format" name="date-format" class="item-select"> <option class="item-select-option" selected value="t">10 Aug 2015</option> <option class="item-select-option" value="d">10/08/2015</option> <option class="item-select-option" value="m">08/10/2015</option> </select> </label> </div> <div class="item-container-footer">Disable the seconds hand to reduce battery use.</div> </div> <div class="item-container"> <div class="button-container"> <input id="button-submit" type="button" class="item-button" value="SAVE"> </div> </div> </form> </body> <script> function getConfigData() { var input_seconds_hand = document.getElementById('input-seconds-hand'), input_battery_indicator = document.getElementById('input-battery-indicator'), input_date_format = document.getElementById('input-date-format'); var options = { 'seconds_hand': input_seconds_hand.checked, 'battery_indicator': input_battery_indicator.checked, 'date_format': input_date_format.value }; // Save for next launch localStorage['seconds_hand'] = options['seconds_hand']; localStorage['battery_indicator'] = options['battery_indicator']; localStorage['date_format'] = options['date_format']; console.log('Got options: ' + JSON.stringify(options)); return options; } function getQueryParam(variable, defaultValue) { var query = location.search.substring(1), vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (pair[0] === variable) { return decodeURIComponent(pair[1]); } } return defaultValue || false; } var button_submit = document.getElementById('button-submit'); button_submit.addEventListener('click', function() { console.log('Submit'); // Set the return URL depending on the runtime environment var return_to = getQueryParam('return_to', 'pebblejs://close#'); document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData())); }); (function() { var input_seconds_hand = document.getElementById('input-seconds-hand'), input_battery_indicator = document.getElementById('input-battery-indicator'), input_date_format = document.getElementById('input-date-format'); if (localStorage['seconds_hand']) { input_seconds_hand.checked = JSON.parse(localStorage['seconds_hand']); } if (localStorage['battery_indicator']) { input_battery_indicator.checked = JSON.parse(localStorage['battery_indicator']); } if (localStorage['date_format']) { input_date_format.value = localStorage['date_format']; } })(); </script> </html>