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/>');
}
}