diff --git a/index.html b/index.html index 26d7bb3..22bd6aa 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ <script type="text/javascript" src="jquery-2.0.3.min.js"></script> <script type="text/javascript" src="uhr.js"></script> <script type="text/javascript" src="uhr-de_CH.js"></script> +<script type="text/javascript" src="uhr-de.js"></script> <link rel="stylesheet" type="text/css" href="uhr.css" /> <link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> @@ -19,13 +20,17 @@ <!-- glossy reflection --> <span id="reflection"></span> </div> - <div id="themeswitcher"> - <input type="radio" name="theme" id="theme-black" value="black" checked="checked" /><label for="theme-black">BLACK</label> - <input type="radio" name="theme" id="theme-red" value="red" /><label for="theme-red">RED</label> - <input type="radio" name="theme" id="theme-blue" value="blue" /><label for="theme-blue">BLUE</label> - <input type="radio" name="theme" id="theme-green" value="green" /><label for="theme-green">GREEN</label> - <input type="radio" name="theme" id="theme-white" value="white" /><label for="theme-white">WHITE</label> - </div> + <select id="themeswitcher"> + <option value="black">Schwarz</option> + <option value="red">Rot</option> + <option value="blue">Blau</option> + <option value="green">Grün</option> + <option value="white">Weiss</option> + </select> + <select id="layoutswitcher"> + <option value="de_CH">Bärndütsch</option> + <option value="de">Hochdeutsch</option> + </select> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="updateClockState()" /> <label class="onoffswitch-label" for="onoffswitch"> @@ -36,10 +41,14 @@ <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <script type="text/javascript"> $(document).ready(function() { - render(layout); - $('input[name=theme]').on('click', function() { - switchTheme(this); + $('#themeswitcher').on('change', function() { + switchTheme(this.value); }); + $('#layoutswitcher').on('change', function() { + switchLayout(this.value); + }); + currentLayout = layout['de_CH']; + renderLayout(); startClock(); }); </script> diff --git a/uhr-de.js b/uhr-de.js index d14ef1c..93af349 100644 --- a/uhr-de.js +++ b/uhr-de.js @@ -1,6 +1,5 @@ -layout = { +layout['de'] = { language: "Deutsch", - locale: "de", values: [ [l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('T', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('N', 5, 25, 35, 55),m('F', 5, 25, 35, 55)], [m('Z', 10, 50), m('E', 10, 50),m('H', 10, 50),m('N', 10, 50),m('Z', 20, 40),m('W', 20, 40),m('A', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('I', 20, 40),m('G', 20, 40)], diff --git a/uhr-de_CH.js b/uhr-de_CH.js index bd02254..5e8c3ba 100644 --- a/uhr-de_CH.js +++ b/uhr-de_CH.js @@ -1,6 +1,5 @@ -var layout = { +layout['de_CH'] = { language: "Bärndütsch", - locale: "de_CH", values: [ [l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('C', 'on'),l('H', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('F', 5, 25, 35, 55)], [m('V', 15, 45), m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('U', 15, 45),l('B'),l('F'),m('Z', 10, 50),m('Ä', 10, 50),m('Ä', 10, 50)], diff --git a/uhr.css b/uhr.css index 7e3e616..a631f76 100644 --- a/uhr.css +++ b/uhr.css @@ -6,7 +6,6 @@ body { font-family: 'Uhrenfont', sans-serif; } #uhr { - display: inline-block; padding: 3em; position: relative; margin: 0; diff --git a/uhr.js b/uhr.js index 7d84a9c..783aae3 100644 --- a/uhr.js +++ b/uhr.js @@ -1,6 +1,11 @@ var clock = null; var currentMinute = -1; -var layout = layout || {}; +var layout = new Array(); +layout['default'] = { + language: 'Undefined', + values: [] +}; +var currentLayout = layout['default']; function highlightCurrentTime() { var now = new Date(); @@ -20,8 +25,8 @@ function highlightCurrentTime() { highlight('hour' + hour); } function getHour(date) { - if (typeof layout.getHour === 'function') { - return layout.getHour(date); + if (typeof currentLayout.getHour === 'function') { + return currentLayout.getHour(date); } var hour = date.getHours(); if (date.getMinutes() >= 25) { @@ -30,15 +35,15 @@ function getHour(date) { return hour; } function getCoarseMinute(date) { - if (typeof layout.getCoarseMinute === 'function') { - return layout.getCoarseMinute(date); + if (typeof currentLayout.getCoarseMinute === 'function') { + return currentLayout.getCoarseMinute(date); } var minutes = date.getMinutes(); return minutes - getDotMinute(date); } function getDotMinute(date) { - if (typeof layout.getDotMinute === 'function') { - return layout.getDotMinute(date); + if (typeof currentLayout.getDotMinute === 'function') { + return currentLayout.getDotMinute(date); } var minutes = date.getMinutes(); return minutes % 5; @@ -77,24 +82,35 @@ function stopClock() { } } function updateClockState() { - if ($('#onoffswitch').is(':checked')) { + if (isOn()) { startClock(); } else { stopClock(); } } -function switchTheme(element) { - var theme = $(element).val() +function isOn() { + return $('#onoffswitch').is(':checked'); +} +function switchTheme(theme) { $('#theme').attr('href', 'uhr-' + theme + '.css'); } -function render(layout) { +function switchLayout(locale) { + stopClock(); + currentLayout = layout[locale]; + renderLayout(); + if (isOn()) { + startClock(); + } +} +function renderLayout() { var container = $('#renderarea'); - for (var y = 0; y < layout.values.length; y++) { - for (var x = 0; x < layout.values[y].length; x++) { - var letter = layout.values[y][x]; + container.empty(); + for (var y = 0; y < currentLayout.values.length; y++) { + for (var x = 0; x < currentLayout.values[y].length; x++) { + var letter = currentLayout.values[y][x]; container.append(letter.toString()); } - if (y < layout.values.length - 1) { + if (y < currentLayout.values.length - 1) { container.append('<br/>'); } }