diff options
| -rw-r--r-- | options.css | 20 | ||||
| -rw-r--r-- | options.html | 17 | ||||
| -rw-r--r-- | options.js | 33 | ||||
| -rw-r--r-- | tempo.js | 2 |
4 files changed, 39 insertions, 33 deletions
diff --git a/options.css b/options.css index 4660e31..7daef46 100644 --- a/options.css +++ b/options.css @@ -11,7 +11,7 @@ body { div#container { width: 20em; - height: 11em; + height: 11.2em; padding: 1em; margin: auto; position: absolute; @@ -31,14 +31,26 @@ h1 { margin: 0em; } -p#status { - color: #390; +div.section { + margin: 1em; +} + +div.section p { + margin: 0.2em 0em; +} + +div.section p.option { + margin-left: 1em; } -p#button { +div#button { text-align: center; } +p#status { + color: #390; +} + button { color: #ddd; background-color: #222; diff --git a/options.html b/options.html index 148d247..93b1cd6 100644 --- a/options.html +++ b/options.html @@ -11,16 +11,15 @@ <body> <div id="container"> <h1>Options</h1> - <p>Time format: - <select id="timeformat"> - <option value="12">12-hour</option> - <option value="24">24-hour</option> - </select> - </p> - <p id="status"> </p> - <p id="button"> + <div class="section"> + <p>Time format:</p> + <p class="option"><input type="radio" name="timeformat" id="t12" /><label for="t12"> 12-hour</label></p> + <p class="option"><input type="radio" name="timeformat" id="t24" /><label for="t24"> 24-hour</label></p> + </div> + <div id="button"> <button id="save">Save</button> - </p> + </div> + <p id="status"> </p> </div> </body> </html> @@ -2,9 +2,12 @@ // Distributed under the terms of the GNU General Public License v2. // See http://www.gnu.org/licenses/gpl-2.0.txt for the full license text. -function save_options() { - var select = document.getElementById('timeformat'); - var timeformat = select.children[select.selectedIndex].value; +function saveOptions() { + var timeformat = 24; + if(document.getElementById('t12').checked) { + var timeformat = 12; + } + localStorage['timeformat'] = timeformat; var status = document.getElementById('status'); @@ -13,30 +16,22 @@ function save_options() { setTimeout(function() {status.innerHTML = ' '}, 1000); } -function restore_options() { +function restoreOptions() { var timeformat = localStorage['timeformat']; if(!timeformat) { - timeformat = '24'; + timeformat = 24; } - var select = document.getElementById('timeformat'); - - for(var i = 0; i < select.children.length; i++) { - var child = select.children[i]; + var option = document.getElementById('t' + timeformat); - if(child.value == timeformat) { - child.selected = 'true'; - - break; - } - } + option.checked = true; } -function start_options() { - restore_options(); +function startOptions() { + restoreOptions(); - document.querySelector('#save').addEventListener('click', save_options); + document.querySelector('#save').addEventListener('click', saveOptions); } -window.onload = start_options; +window.onload = startOptions; @@ -26,7 +26,7 @@ function updateTime() { var dm = date.getMonth(); var dy = date.getFullYear(); - if(timeformat == '12') { + if(timeformat == 12) { h = (h + 11) % 12 + 1; } |