auf objekt umgestellt und aufgeräumt

index.html

@@ -4,11 +4,7 @@
 	<title>Die Zeit als Wort - in HTML, CSS und JS</title>
 	<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
 	<script type="text/javascript" src="jquery.cookie.js"></script>
-	<script type="text/javascript" src="uhr-object.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>
-	<script type="text/javascript" src="uhr-en.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" />
@@ -45,9 +41,6 @@
 	<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
 	<script type="text/javascript">
 		var uhr = new Uhr($('#renderarea'), $('#theme'));
-		uhr.register('de_CH', layout['de_CH']);
-		uhr.register('de', layout['de']);
-		uhr.register('en', layout['en']);
 		$(document).ready(function() {
 			$('#layoutswitcher').on('change', function() {
 				uhr.setLayout(this.value);
@@ -82,6 +75,9 @@
 			}
 		});
 	</script>
+	<script type="text/javascript" src="uhr-de_CH.js"></script>
+	<script type="text/javascript" src="uhr-de.js"></script>
+	<script type="text/javascript" src="uhr-en.js"></script>
 </body>
 </html>
 

uhr-de.js

@@ -1,4 +1,4 @@
-layout['de'] = {
+var layout = {
 	language: 'Deutsch',
 	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)],
@@ -13,4 +13,5 @@ layout['de'] = {
 		[h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U', 'sharphour'),l('H', 'sharphour'),l('R', 'sharphour')]
 	]
 };
+uhr.register('de', layout);
 

uhr-de_CH.js

@@ -1,4 +1,4 @@
-layout['de_CH'] = {
+var layout = {
 	language: 'Bärndütsch',
 	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)],
@@ -13,4 +13,5 @@ layout['de_CH'] = {
 		[h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')]
 	]
 };
+uhr.register('de_CH', layout);
 

uhr-en.js

@@ -1,4 +1,4 @@
-layout['en'] = {
+var layout = {
 	language: 'English',
 	values: [
 		[l('I', 'on'), l('T', 'on'),l('L'),l('I', 'on'),l('S', 'on'),l('B'),l('F'),l('A'),l('M'),l('P'),l('M')],
@@ -13,4 +13,5 @@ layout['en'] = {
 		[h('T', 10), h('E', 10),h('N', 10),l('S'),l('E'),l('O', 'sharphour'),l('C', 'sharphour'),l('L', 'sharphour'),l('O', 'sharphour'),l('C', 'sharphour'),l('K', 'sharphour')]
 	]
 };
+uhr.register('en', layout);
 

uhr-object.js

@@ -1,144 +0,0 @@
-function Uhr(renderarea, themeElement) {
-	this.renderarea = renderarea;
-	this.themeElement = themeElement;
-	this.timer = null;
-	this.currentTheme = null;
-	this.currentLayout = null;
-	this.layouts = new Array();
-	this.currentMinute = -1;
-}
-
-Uhr.prototype.toggle = function() {
-	if (this.isOn()) {
-		this.stop();
-	} else {
-		this.start();
-	}
-}
-Uhr.prototype.start = function() {
-	if (!this.isOn()) {
-		var uhr = this;
-		this.timer = window.setInterval(function() {uhr.update();}, 1000);
-		this.update();
-		$.cookie('status', 'on');
-	}
-}
-Uhr.prototype.stop = function() {
-	if (this.isOn()) {
-		window.clearInterval(this.timer);
-		this.timer = null;
-		this.update();
-		$.cookie('status', 'off');
-	}
-}
-Uhr.prototype.isOn = function() {
-	return this.timer != null;
-}
-Uhr.prototype.register = function(key, layout) {
-	this.layouts[key] = layout;
-}
-Uhr.prototype.setLayout = function(locale) {
-	var newLayout = this.layouts[locale];
-	if (newLayout !== undefined && newLayout != this.currentLayout) {
-		this.currentLayout = newLayout;
-		var renderer = new UhrRenderer(this.currentLayout, this.renderarea);
-		renderer.render(this);
-		$.cookie('layout', locale);
-	}
-}
-Uhr.prototype.setTheme = function(theme) {
-	if (theme != this.currentTheme) {
-		this.currentTheme = theme;
-		this.themeElement.attr('href', 'uhr-' + theme + '.css');
-		$.cookie('theme', theme);
-	}
-}
-Uhr.prototype.update = function() {
-	if (this.isOn()) {
-		var now = new Date();
-		var dotMinute = this.getDotMinute(now);
-		if (dotMinute == this.currentMinute) {
-			return;
-		}
-		this.currentMinute = dotMinute;
-		var hour = this.getHour(now);
-		var coarseMinute = this.getCoarseMinute(now);
-		this.clear();
-		this.highlight('on');
-		for (var i = 1; i <= dotMinute; i++) {
-			this.highlight('dot' + i);
-		}
-		this.highlight('minute' + coarseMinute);
-		hour = this.normalizeHour(hour);
-		this.highlight('hour' + hour);
-		if (coarseMinute == 0) {
-			this.highlight('sharphour');
-		}
-	} else {
-		this.clear();
-		this.currentMinute = -1;
-	}
-}
-Uhr.prototype.clear = function() {
-	this.renderarea.find('.item').removeClass('active');
-}
-Uhr.prototype.highlight = function(itemClass) {
-	this.renderarea.find('.item.' + itemClass).addClass('active');
-}
-Uhr.prototype.getHour = function(date) {
-	if (typeof this.currentLayout.getHour === 'function') {
-		return this.currentLayout.getHour(date);
-	}
-	var hour = date.getHours();
-	if (date.getMinutes() >= 25) {
-		return hour + 1;
-	}
-	return hour;
-}
-Uhr.prototype.getCoarseMinute = function(date) {
-	if (typeof this.currentLayout.getCoarseMinute === 'function') {
-		return this.currentLayout.getCoarseMinute(date);
-	}
-	var minutes = date.getMinutes();
-	return minutes - this.getDotMinute(date);
-}
-Uhr.prototype.getDotMinute = function(date) {
-	if (typeof this.currentLayout.getDotMinute === 'function') {
-		return this.currentLayout.getDotMinute(date);
-	}
-	var minutes = date.getMinutes();
-	return minutes % 5;
-}
-Uhr.prototype.normalizeHour = function(hour) {
-	if (hour > 12) {
-		hour %= 12;
-	}
-	if (hour == 0) {
-		return 12;
-	}
-	return hour;
-}
-
-function UhrRenderer(layout, renderarea) {
-	this.layout = layout;
-	this.renderarea = renderarea;
-}
-UhrRenderer.prototype.render = function(uhr) {
-	var renderer = this;
-	this.renderarea.fadeOut('fast', function() {
-		renderer.renderarea.empty();
-		for (var y = 0; y < renderer.layout.values.length; y++) {
-			for (var x = 0; x < renderer.layout.values[y].length; x++) {
-				var letter = renderer.layout.values[y][x];
-				renderer.renderarea.append(letter.toString());
-			}
-			if (y < renderer.layout.values.length - 1) {
-				renderer.renderarea.append('<br/>');
-			}
-		}
-		uhr.currentMinute = -1;
-		uhr.update();
-		renderer.renderarea.fadeIn('fast');
-	});
-}
-

uhr.js

@@ -1,30 +1,178 @@
-var layout = new Array();
+/**
-layout['default'] = {
+ * Die Uhr.
-	language: 'Undefined',
+ * @param renderarea   Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll.
-	values: []
+ * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert.
-};
+ */
-function updateClockState() {
+function Uhr(renderarea, themeElement) {
-	if (isOn()) {
+	this.renderarea = renderarea;
-		startClock();
+	this.themeElement = themeElement;
+	this.timer = null;
+	this.currentTheme = null;
+	this.currentLayout = null;
+	this.layouts = new Array();
+	this.currentMinute = -1;
+	this.register('undefined', {
+		language: 'Undefined',
+		values: []
+	});
+}
+
+Uhr.prototype.toggle = function() {
+	if (this.isOn()) {
+		this.stop();
 	} else {
-		stopClock();
+		this.start();
 	}
 }
-function isOn() {
+Uhr.prototype.start = function() {
-	return $('#onoffswitch').is(':checked');
+	if (!this.isOn()) {
+		var uhr = this;
+		this.timer = window.setInterval(function() {uhr.update();}, 1000);
+		this.update();
+		$.cookie('status', 'on');
+	}
 }
+Uhr.prototype.stop = function() {
+	if (this.isOn()) {
+		window.clearInterval(this.timer);
+		this.timer = null;
+		this.update();
+		$.cookie('status', 'off');
+	}
+}
+Uhr.prototype.isOn = function() {
+	return this.timer != null;
+}
+Uhr.prototype.register = function(key, layout) {
+	this.layouts[key] = layout;
+}
+Uhr.prototype.setLayout = function(locale) {
+	var newLayout = this.layouts[locale];
+	if (newLayout !== undefined && newLayout != this.currentLayout) {
+		this.currentLayout = newLayout;
+		var renderer = new UhrRenderer(this.currentLayout, this.renderarea);
+		renderer.render(this);
+		$.cookie('layout', locale);
+	}
+}
+Uhr.prototype.setTheme = function(theme) {
+	if (theme != this.currentTheme) {
+		this.currentTheme = theme;
+		this.themeElement.attr('href', 'uhr-' + theme + '.css');
+		$.cookie('theme', theme);
+	}
+}
+Uhr.prototype.update = function() {
+	if (this.isOn()) {
+		var now = new Date();
+		var dotMinute = this.getDotMinute(now);
+		if (dotMinute == this.currentMinute) {
+			return;
+		}
+		this.currentMinute = dotMinute;
+		var hour = this.getHour(now);
+		var coarseMinute = this.getCoarseMinute(now);
+		this.clear();
+		this.highlight('on');
+		for (var i = 1; i <= dotMinute; i++) {
+			this.highlight('dot' + i);
+		}
+		this.highlight('minute' + coarseMinute);
+		hour = this.normalizeHour(hour);
+		this.highlight('hour' + hour);
+		if (coarseMinute == 0) {
+			this.highlight('sharphour');
+		}
+	} else {
+		this.clear();
+		this.currentMinute = -1;
+	}
+}
+Uhr.prototype.clear = function() {
+	this.renderarea.find('.item').removeClass('active');
+}
+Uhr.prototype.highlight = function(itemClass) {
+	this.renderarea.find('.item.' + itemClass).addClass('active');
+}
+Uhr.prototype.getHour = function(date) {
+	if (typeof this.currentLayout.getHour === 'function') {
+		return this.currentLayout.getHour(date);
+	}
+	var hour = date.getHours();
+	if (date.getMinutes() >= 25) {
+		return hour + 1;
+	}
+	return hour;
+}
+Uhr.prototype.getCoarseMinute = function(date) {
+	if (typeof this.currentLayout.getCoarseMinute === 'function') {
+		return this.currentLayout.getCoarseMinute(date);
+	}
+	var minutes = date.getMinutes();
+	return minutes - this.getDotMinute(date);
+}
+Uhr.prototype.getDotMinute = function(date) {
+	if (typeof this.currentLayout.getDotMinute === 'function') {
+		return this.currentLayout.getDotMinute(date);
+	}
+	var minutes = date.getMinutes();
+	return minutes % 5;
+}
+Uhr.prototype.normalizeHour = function(hour) {
+	if (hour > 12) {
+		hour %= 12;
+	}
+	if (hour == 0) {
+		return 12;
+	}
+	return hour;
+}
+
+/**
+ * Hilfsklasse zum Rendern der Uhr.
+ * @param layout     Layout-Objekt, das gerendert werden soll.
+ * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
+ */
+function UhrRenderer(layout, renderarea) {
+	this.layout = layout;
+	this.renderarea = renderarea;
+}
+UhrRenderer.prototype.render = function(uhr) {
+	var renderer = this;
+	this.renderarea.fadeOut('fast', function() {
+		renderer.renderarea.empty();
+		for (var y = 0; y < renderer.layout.values.length; y++) {
+			for (var x = 0; x < renderer.layout.values[y].length; x++) {
+				var letter = renderer.layout.values[y][x];
+				renderer.renderarea.append(letter.toString());
+			}
+			if (y < renderer.layout.values.length - 1) {
+				renderer.renderarea.append('<br/>');
+			}
+		}
+		uhr.currentMinute = -1;
+		uhr.update();
+		renderer.renderarea.fadeIn('fast');
+	});
+}
+
+/**
+ * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
+ * @param value Der Buchstabe, der Dargestellt werden soll.
+ * @param style Die CSS-Styleklassen des Buchstabens.
+ */
 function Letter(value, style) {
 	this.value = value;
 	this.style = style || '';
 	this.getStyle = function() {
-		return "item letter " + style;
+		return 'item letter ' + style;
 	}
 	this.getValue = function() {
 		return value;
 	}
 }
 Letter.prototype.toString = function letterToString() {
-	return "<span class=\"" + this.getStyle() + "\">" + this.getValue() + "</span>";
+	return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>';
 }
 /**
  * Hilfsfunktion, um einen Buchstaben zu erzeugen.