Created
January 13, 2016 17:43
-
-
Save idiotandrobot/f6b57e7c8023de4d1b18 to your computer and use it in GitHub Desktop.
InR-Time Configuration Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Slate Example Configuration</title> | |
<link rel='stylesheet' type='text/css' href='css/slate.min.css'> | |
<script src='js/slate.min.js'></script> | |
<style> | |
.title { | |
padding: 15px 10px; | |
text-transform: uppercase; | |
font-family: 'PT Sans', sans-serif; | |
font-size: 1.2em; | |
font-weight: 500; | |
color: #888888; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<h1 class='title'>Slate Example Configuration</h1> | |
<div class='item-container'> | |
<div class='item-container-content'> | |
<div class='item'> | |
Use this configuration page to choose the settings you would like applied to this app. | |
</div> | |
</div> | |
</div> | |
<div class='item-container'> | |
<div class='item-container-header'>Customizability</div> | |
<div class='item-container-content'> | |
<label class='item'> | |
Background Color | |
<input id='background_color_picker' type='text' class='item-color item-color-sunny' value='#000000'> | |
</label> | |
</div> | |
<div class='item-container-footer'> | |
Choose the app's background color. Used if High Contrast Mode is not selected. Note: Only available on Basalt watches that support many colors. | |
</div> | |
</div> | |
<div class='item-container'> | |
<div class='item-container-header'>Accessibility</div> | |
<div class='item-container-content'> | |
<label class='item'> | |
High Contrast Mode | |
<input id='high_contrast_checkbox' type='checkbox' class='item-toggle'> | |
</label> | |
</div> | |
<div class='item-container-footer'> | |
This switches the app colors to a higher contrast set that promotes readability in low light. | |
</div> | |
</div> | |
<div class='item-container'> | |
<div class='button-container'> | |
<input id='submit_button' type='button' class='item-button' value='SUBMIT'> | |
</div> | |
</div> | |
</body> | |
<script> | |
function getConfigData() { | |
var backgroundColorPicker = document.getElementById('background_color_picker'); | |
var highContrastCheckbox = document.getElementById('high_contrast_checkbox'); | |
var options = { | |
'background_color': backgroundColorPicker.value, | |
'high_contrast': highContrastCheckbox.checked | |
}; | |
// Save for next launch | |
localStorage['background_color'] = options['background_color']; | |
localStorage['high_contrast'] = options['high_contrast']; | |
console.log('Got options: ' + JSON.stringify(options)); | |
return options; | |
} | |
function getQueryParam(variable, defaultValue) { | |
var query = location.search.substring(1); | |
var 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 submitButton = document.getElementById('submit_button'); | |
submitButton.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 backgroundColorPicker = document.getElementById('background_color_picker'); | |
var highContrastCheckbox = document.getElementById('high_contrast_checkbox'); | |
// Load any previously saved configuration, if available | |
if(localStorage['high_contrast']) { | |
highContrastCheckbox.checked = JSON.parse(localStorage['high_contrast']); | |
backgroundColorPicker.value = localStorage['background_color']; | |
} | |
})(); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment