jQuery-Plugin ist nun mit jQuery UI widget builder (oder wie das heisst) implementiert. viel schöner!!!
This commit is contained in:
		
							parent
							
								
									fc2c8ac38a
								
							
						
					
					
						commit
						e995a2f224
					
				
					 6 changed files with 170 additions and 406 deletions
				
			
		|  | @ -17,6 +17,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| <head> | <head> | ||||||
| 	<title>Die Zeit als Wort - in HTML, CSS und JS</title> | 	<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-2.0.3.min.js"></script> | ||||||
|  | 	<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script> | ||||||
| 	<script type="text/javascript" src="jquery.cookie.js"></script> | 	<script type="text/javascript" src="jquery.cookie.js"></script> | ||||||
| 	<script type="text/javascript" src="uhr.js"></script> | 	<script type="text/javascript" src="uhr.js"></script> | ||||||
| 	<link rel="stylesheet" type="text/css" href="uhr.css" /> | 	<link rel="stylesheet" type="text/css" href="uhr.css" /> | ||||||
|  |  | ||||||
							
								
								
									
										6
									
								
								jquery-ui-1.10.3.custom.min.js
									
										
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								jquery-ui-1.10.3.custom.min.js
									
										
									
									
										vendored
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							|  | @ -27,4 +27,4 @@ var layout = { | ||||||
| 		[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'),l('H'),l('R')] | 		[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'),l('H'),l('R')] | ||||||
| 	] | 	] | ||||||
| }; | }; | ||||||
| Uhr.registerLanguage('de', layout); | window._uhr.languages['de'] = layout; | ||||||
|  |  | ||||||
|  | @ -27,4 +27,4 @@ var layout = { | ||||||
| 		[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')] | 		[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.registerLanguage('de_CH', layout); | window._uhr.languages['de_CH'] = layout; | ||||||
|  |  | ||||||
|  | @ -34,4 +34,4 @@ var layout = { | ||||||
| 		return hour; | 		return hour; | ||||||
| 	} | 	} | ||||||
| }; | }; | ||||||
| Uhr.registerLanguage('en', layout); | window._uhr.languages['en'] = layout; | ||||||
|  |  | ||||||
							
								
								
									
										563
									
								
								uhr.js
									
										
									
									
									
								
							
							
						
						
									
										563
									
								
								uhr.js
									
										
									
									
									
								
							|  | @ -15,121 +15,133 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| (function($) { | (function($) { | ||||||
| 	"use strict"; | 	"use strict"; | ||||||
| 
 | 
 | ||||||
| 	if (window.Uhr !== undefined) { | 	if (window._uhr !== undefined) { | ||||||
| 		return; | 		return; | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	window.Uhr = { | 	window._uhr = { | ||||||
| 		id: 0, | 		id: 0, | ||||||
| 		start: function(e) { | 		languages: new Array() | ||||||
| 			if (!Uhr.isOn(e)) { | 	}; | ||||||
| 				e.data('timer', window.setInterval(function() {Uhr.update(e);}, 1000)); | 	$.widget("fritteli.uhr", { | ||||||
| 				Uhr.update(e); | 		options: { | ||||||
| 				jQuery.cookie('status' + e.data('id'), 'on', {expires: 365, path: '/'}); | 			width: '100%', | ||||||
|  | 			status: 'on', | ||||||
|  | 			language: 'de_CH', | ||||||
|  | 			theme: 'black', | ||||||
|  | 			force: false | ||||||
|  | 		}, | ||||||
|  | 		start: function() { | ||||||
|  | 			if (!this._isOn()) { | ||||||
|  | 				var uhr = this; | ||||||
|  | 				this._timer = window.setInterval(function() { | ||||||
|  | 					uhr._update(); | ||||||
|  | 				}, 1000); | ||||||
|  | 				this._update(); | ||||||
|  | 				$.cookie('uhr-status' + this._id, 'on', {expires: 365, path: '/'}); | ||||||
|  | 			} else { | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
| 		stop: function(e) { | 		stop: function() { | ||||||
| 			if (Uhr.isOn(e)) { | 			if(this._isOn()) { | ||||||
| 				window.clearInterval(e.data('timer')); | 				window.clearInterval(this._timer); | ||||||
| 				e.data('timer', null); | 				this._timer = null; | ||||||
| 				Uhr.update(e); | 				this._update(); | ||||||
| 				jQuery.cookie('status' + e.data('id'), 'off', {expires: 365, path: '/'}); | 				$.cookie('uhr-status' + this._id, 'off', {expires: 365, path: '/'}); | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
| 		update: function(e) { | 		toggle: function() { | ||||||
| 			if (Uhr.isOn(e)) { | 			if(this._isOn()) { | ||||||
|  | 				this.stop(); | ||||||
|  | 			} else { | ||||||
|  | 				this.start(); | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		language: function(languageKey) { | ||||||
|  | 			if (languageKey !== this.options.language) { | ||||||
|  | 				this.options.language = languageKey; | ||||||
|  | 				var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); | ||||||
|  | 				renderer.render(this); | ||||||
|  | 				$.cookie('uhr-language' + this._id, languageKey, {expires: 365, path: '/'}); | ||||||
|  | 				this._update(); | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		theme: function(theme) { | ||||||
|  | 			if (theme != this.options.theme) { | ||||||
|  | 				this.element.removeClass(this.options.theme).addClass(theme); | ||||||
|  | 				$('#uhr-onoffswitch' + this._id).removeClass(this.options.theme).addClass(theme); | ||||||
|  | 				this.options.theme = theme; | ||||||
|  | 				$.cookie('uhr-theme' + this._id, theme, {expires: 365, path: '/'}); | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 		// private variables
 | ||||||
|  | 		_id: -1, | ||||||
|  | 		_timer: null, | ||||||
|  | 		_currentMinute: -1, | ||||||
|  | 		// private methods
 | ||||||
|  | 		_isOn: function() { | ||||||
|  | 			return this._timer !== null; | ||||||
|  | 		}, | ||||||
|  | 		_update: function() { | ||||||
|  | 			if (this._isOn()) { | ||||||
| 				var now = new Date(); | 				var now = new Date(); | ||||||
| 				if (now.getMinutes() == e.data('currentMinute')) { | 				if (now.getMinutes() == this._currentMinute) { | ||||||
| 					return; | 					return; | ||||||
| 				} | 				} | ||||||
| 				e.data('currentMinute', now.getMinutes()); | 				this._currentMinute = now.getMinutes(); | ||||||
| 				var dotMinute = Uhr.getDotMinute(e, now); | 				var dotMinute = this._getDotMinute(now); | ||||||
| 				var hour = Uhr.getHour(e, now); | 				var hour = this._getHour(now); | ||||||
| 				var coarseMinute = this.getCoarseMinute(e, now); | 				var coarseMinute = this._getCoarseMinute(now); | ||||||
| 				Uhr.clear(e); | 				this._clear(); | ||||||
| 				Uhr.highlight(e, 'on'); | 				this._highlight('on'); | ||||||
| 				for (var i = 1; i <= dotMinute; i++) { | 				for (var i = 1; i <= dotMinute; i++) { | ||||||
| 					Uhr.highlight(e, 'dot' + i); | 					this._highlight('dot' + i); | ||||||
| 				} | 				} | ||||||
| 				Uhr.highlight(e, 'minute' + coarseMinute); | 				this._highlight('minute' + coarseMinute); | ||||||
| 				hour = this.normalizeHour(hour); | 				hour = this._normalizeHour(hour); | ||||||
| 				Uhr.highlight(e, 'hour' + hour); | 				this._highlight('hour' + hour); | ||||||
| 				if (coarseMinute == 0) { | 				if (coarseMinute == 0) { | ||||||
| 					Uhr.highlight(e, 'sharphour'); | 					this._highlight('sharphour'); | ||||||
| 				} | 				} | ||||||
| 			} else { | 			} else { | ||||||
| 				Uhr.clear(e); | 				this._clear(); | ||||||
| 				e.data('currentMinute', -1); | 				this._currentMinute = -1; | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
| 		toggle: function(e) { | 		_language: function() { | ||||||
| 			if (Uhr.isOn(e)) { | 			return window._uhr.languages[this.options.language]; | ||||||
| 				Uhr.stop(e); | 		}, | ||||||
| 			} else { | 		_highlight: function(itemClass) { | ||||||
| 				Uhr.start(e); | 			this.element.find('.item.' + itemClass).addClass('active'); | ||||||
|  | 		}, | ||||||
|  | 		_clear: function() { | ||||||
|  | 			this.element.find('.item').removeClass('active'); | ||||||
|  | 		}, | ||||||
|  | 		_getHour: function(date) { | ||||||
|  | 			if (typeof this._language().getHour === 'function') { | ||||||
|  | 				return this._language().getHour(date); | ||||||
| 			} | 			} | ||||||
| 		}, |  | ||||||
| 		clear: function(e) { |  | ||||||
| 			e.find('.item').removeClass('active'); |  | ||||||
| 		}, |  | ||||||
| 		setLanguage: function(e, language) { |  | ||||||
| 			var newLanguage = Uhr.layouts[language]; |  | ||||||
| 			if (newLanguage !== undefined && newLanguage != e.data('currentLanguage')) { |  | ||||||
| 				e.data('currentLanguage', newLanguage); |  | ||||||
| 				var renderer = new UhrRenderer(newLanguage, e.find('.letterarea')); |  | ||||||
| 				renderer.render(e); |  | ||||||
| 				jQuery.cookie('language' + e.data('id'), language, {expires: 365, path: '/'}); |  | ||||||
| 			} |  | ||||||
| 		}, |  | ||||||
| 		setTheme: function(e, theme) { |  | ||||||
| 			var currentTheme = e.data('currentTheme'); |  | ||||||
| 			if (theme != currentTheme) { |  | ||||||
| 				e.removeClass(currentTheme).addClass(theme); |  | ||||||
| 				e.data('toggleSwitch').removeClass(currentTheme).addClass(theme); |  | ||||||
| 				e.data('currentTheme', theme); |  | ||||||
| 				jQuery.cookie('theme' + e.data('id'), theme, {expires: 365, path: '/'}); |  | ||||||
| 			} |  | ||||||
| 		}, |  | ||||||
| 		isOn: function(e) { |  | ||||||
| 			return e.data('timer') != null; |  | ||||||
| 		}, |  | ||||||
| 		highlight: function(e, itemClass) { |  | ||||||
| 			e.find('.item.' + itemClass).addClass('active'); |  | ||||||
| 		}, |  | ||||||
| 		getHour: function(e, date) { |  | ||||||
| 			//FIXME
 |  | ||||||
| 			/* |  | ||||||
| 			if (typeof e.data('currentLayout').getHour === 'function') { |  | ||||||
| 				return e.data('currentLayout').getHour(date); |  | ||||||
| 			} |  | ||||||
| 			*/ |  | ||||||
| 			var hour = date.getHours(); | 			var hour = date.getHours(); | ||||||
| 			if (date.getMinutes() >= 25) { | 			if (date.getMinutes() >= 25) { | ||||||
| 				return hour + 1; | 				return hour + 1; | ||||||
| 			} | 			} | ||||||
| 			return hour; | 			return hour; | ||||||
| 		}, | 		}, | ||||||
| 		getCoarseMinute: function(e, date) { | 		_getCoarseMinute: function(date) { | ||||||
| 			//FIXME
 | 			if (typeof this._language().getCoarseMinute === 'function') { | ||||||
| 			/* | 				return this._language().getCoarseMinute(date); | ||||||
| 			if (typeof e.data('currentLayout').getCoarseMinute === 'function') { |  | ||||||
| 				return e.data('currentLayout').getCoarseMinute(date); |  | ||||||
| 			} | 			} | ||||||
| 			*/ |  | ||||||
| 			var minutes = date.getMinutes(); | 			var minutes = date.getMinutes(); | ||||||
| 			return minutes - Uhr.getDotMinute(e, date); | 			return minutes - this._getDotMinute(date); | ||||||
| 		}, | 		}, | ||||||
| 		getDotMinute: function(e, date) { | 		_getDotMinute: function(date) { | ||||||
| 			//FIXME
 | 			if (typeof this._language().getDotMinute === 'function') { | ||||||
| 			/* | 				return this._language().getDotMinute(date); | ||||||
| 			if (typeof e.data('currentLayout').getDotMinute === 'function') { |  | ||||||
| 				return e.data('currentLayout').getDotMinute(date); |  | ||||||
| 			} | 			} | ||||||
| 			*/ |  | ||||||
| 			var minutes = date.getMinutes(); | 			var minutes = date.getMinutes(); | ||||||
| 			return minutes % 5; | 			return minutes % 5; | ||||||
| 		}, | 		}, | ||||||
| 		normalizeHour: function(hour) { | 		_normalizeHour: function(hour) { | ||||||
| 			if (hour > 12) { | 			if (hour > 12) { | ||||||
| 				hour %= 12; | 				hour %= 12; | ||||||
| 			} | 			} | ||||||
|  | @ -138,25 +150,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 			} | 			} | ||||||
| 			return hour; | 			return hour; | ||||||
| 		}, | 		}, | ||||||
| 		registerLanguage: function(languageKey, layout) { | 		_create: function() { | ||||||
| 			this.layouts[languageKey] = layout; | 			this._id = window._uhr.id++; | ||||||
|  | 			this._setupHTML(); | ||||||
|  | 			this._wireFunctionality(); | ||||||
| 		}, | 		}, | ||||||
| 		layouts: new Array() | 		_setupHTML: function() { | ||||||
| 	} | 			var e = this.element; | ||||||
| 	$.fn.uhr = function(options) { | 			// Base clock area
 | ||||||
| 		var settings = $.extend({ |  | ||||||
| 			width: '100%', |  | ||||||
| 			force: false, |  | ||||||
| 			status: 'on', |  | ||||||
| 			language: 'de_CH', |  | ||||||
| 			theme: 'black' |  | ||||||
| 		}, options); |  | ||||||
| 		return this.each(function() { |  | ||||||
| 			var e = $(this); |  | ||||||
| 			var id = window.Uhr.id++; |  | ||||||
| 			e.data('id', id); |  | ||||||
| 			e.data('timer', null); |  | ||||||
| 
 |  | ||||||
| 			e.addClass('uhr'); | 			e.addClass('uhr'); | ||||||
| 			e.empty(); | 			e.empty(); | ||||||
| 			e.append('<span class="item dot dot1"></span>'); | 			e.append('<span class="item dot dot1"></span>'); | ||||||
|  | @ -165,333 +166,89 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 			e.append('<span class="item dot dot4"></span>'); | 			e.append('<span class="item dot dot4"></span>'); | ||||||
| 			e.append('<div class="letterarea"></div>'); | 			e.append('<div class="letterarea"></div>'); | ||||||
| 			e.append('<div class="reflection"></div>'); | 			e.append('<div class="reflection"></div>'); | ||||||
| 			e.css('width', settings.width); | 			e.css('width', this.options.width); | ||||||
| 			var realWidth = e.width() | 			var realWidth = e.width() | ||||||
| 			e.width(realWidth); | 			e.width(realWidth); | ||||||
| 			e.height(realWidth); | 			e.height(realWidth); | ||||||
| 			e.css('font-size', (realWidth / 40) + 'px'); | 			e.css('font-size', (realWidth / 40) + 'px'); | ||||||
| 
 | 
 | ||||||
| 			var toggleSwitch = jQuery('<div class="onoffswitch"></div>'); | 			// on/off switch
 | ||||||
| 			toggleSwitch.append('<input type="checkbox" name="onoffswitch' + id + '" class="onoffswitch-checkbox" id="onoffswitch' + id + '" checked="checked" />'); | 			var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this._id + '"></div>'); | ||||||
| 			toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + id + '">' | 			toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this._id + '" checked="checked" />'); | ||||||
|  | 			toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this._id + '">' | ||||||
| 				+ '<div class="onoffswitch-inner"></div>' | 				+ '<div class="onoffswitch-inner"></div>' | ||||||
| 				+ '<div class="onoffswitch-switch"></div>' | 				+ '<div class="onoffswitch-switch"></div>' | ||||||
| 				+ '</label>'); | 				+ '</label>'); | ||||||
| 			e.after(toggleSwitch); | 			e.after(toggleSwitch); | ||||||
| 			e.data('toggleSwitch', toggleSwitch); |  | ||||||
| 
 | 
 | ||||||
| 			var languageSwitch = jQuery('<select></select>') | 			// language chooser
 | ||||||
| 			// FIXME handle layouts correctly
 | 			var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>') | ||||||
| 			for (var code in Uhr.layouts) { | 			for (var code in window._uhr.languages) { | ||||||
| 				if (Uhr.layouts.hasOwnProperty(code)) { | 				if (window._uhr.languages.hasOwnProperty(code)) { | ||||||
| 					var language = Uhr.layouts[code]; | 					var language = window._uhr.languages[code]; | ||||||
| 					var option = '<option value="' + code + '">' + language.language + '</option>'; | 					languageChooser.append('<option value="' + code + '">' + language.language + '</option>'); | ||||||
| 					languageSwitch.append(option); |  | ||||||
| 				} | 				} | ||||||
| 			} | 			} | ||||||
| 			e.after(languageSwitch); | 			e.after(languageChooser); | ||||||
| 			e.data('languageSwitch', languageSwitch); |  | ||||||
| 
 | 
 | ||||||
| 			var themeSwitch = jQuery('<select></select>'); | 			// theme chooser
 | ||||||
| 			themeSwitch.append('<option value="black">Schwarz</option>'); | 			var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); | ||||||
| 			themeSwitch.append('<option value="red">Rot</option>'); | 			themeChooser.append('<option value="black">Schwarz</option>'); | ||||||
| 			themeSwitch.append('<option value="blue">Blau</option>'); | 			themeChooser.append('<option value="red">Rot</option>'); | ||||||
| 			themeSwitch.append('<option value="green">Grün</option>'); | 			themeChooser.append('<option value="blue">Blau</option>'); | ||||||
| 			themeSwitch.append('<option value="white">Weiss</option>'); | 			themeChooser.append('<option value="green">Grün</option>'); | ||||||
| 			e.after(themeSwitch); | 			themeChooser.append('<option value="white">Weiss</option>'); | ||||||
| 			e.data('themeSwitch', themeSwitch); | 			e.after(themeChooser); | ||||||
|  | 		}, | ||||||
|  | 		_wireFunctionality: function() { | ||||||
|  | 			var e = this.element; | ||||||
|  | 			var uhr = this; | ||||||
| 
 | 
 | ||||||
| 
 | 			// on/off switch
 | ||||||
| 			var input = jQuery('#onoffswitch' + id); | 			var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this._id); | ||||||
| 			input.on('click', function() { | 			toggleSwitch.on('click', function() { | ||||||
| 				window.Uhr.toggle(e); | 				uhr.toggle(); | ||||||
| 			}); | 			}); | ||||||
| 
 | 			var status = $.cookie('uhr-status' + this._id); | ||||||
| 			var status = jQuery.cookie('status' + id); | 			if (status == undefined || this.options.force) { | ||||||
| 			if (status == undefined || settings.force) { | 				status = this.options.status; | ||||||
| 				status = settings.status; |  | ||||||
| 			} | 			} | ||||||
|  | 			toggleSwitch.prop('checked', status == 'on'); | ||||||
| 			if (status == 'on') { | 			if (status == 'on') { | ||||||
| 				window.Uhr.start(e); | 				this.start(); | ||||||
| 				input.prop('checked', true); |  | ||||||
| 			} else { | 			} else { | ||||||
| 				window.Uhr.stop(e); | 				this.stop(); | ||||||
| 				input.prop('checked', false); |  | ||||||
| 			} | 			} | ||||||
| 
 | 
 | ||||||
| 			e.data('languageSwitch').on('change', function() { | 			// language chooser
 | ||||||
| 				window.Uhr.setLanguage(e, this.value); | 			var languageChooser = $('#uhr-languagechooser' + this._id); | ||||||
|  | 			languageChooser.on('change', function() { | ||||||
|  | 				uhr.language(this.value); | ||||||
| 			}); | 			}); | ||||||
| 			var selectedLanguage = jQuery.cookie('language' + id); | 			var selectedLanguage = $.cookie('uhr-language' + this._id); | ||||||
| 			if (selectedLanguage == undefined || settings.force) { | 			if (selectedLanguage == undefined || this.options.force) { | ||||||
| 				selectedLanguage = settings.language; | 				selectedLanguage = this.options.language; | ||||||
| 			} | 			} | ||||||
| 			e.data('languageSwitch').val(selectedLanguage); | 			languageChooser.val(selectedLanguage); | ||||||
| 			window.Uhr.setLanguage(e, selectedLanguage); | 			this.options.language = ""; | ||||||
|  | 			this.language(selectedLanguage); | ||||||
| 
 | 
 | ||||||
| 			e.data('themeSwitch').on('change', function() { | 			// theme chooser
 | ||||||
| 				window.Uhr.setTheme(e, this.value); | 			var themeChooser = $('#uhr-themechooser' + this._id); | ||||||
|  | 			themeChooser.on('change', function() { | ||||||
|  | 				uhr.theme(this.value); | ||||||
| 			}); | 			}); | ||||||
| 			var selectedTheme = jQuery.cookie('theme' + id); | 			var selectedTheme = $.cookie('uhr-theme' + this._id); | ||||||
| 			if (selectedTheme == undefined || settings.force) { | 			if (selectedTheme == undefined || this.options.force) { | ||||||
| 				selectedTheme = settings.theme; | 				selectedTheme = this.options.theme; | ||||||
| 			} | 			} | ||||||
| 			e.data('themeSwitch').val(selectedTheme); | 			themeChooser.val(selectedTheme); | ||||||
| 			window.Uhr.setTheme(e, selectedTheme); | 			this.options.theme = ""; | ||||||
| 
 | 			this.theme(selectedTheme); | ||||||
| 		}); | 		} | ||||||
| 	}; | 	}); | ||||||
| })(jQuery); | })(jQuery); | ||||||
| (function($){ |  | ||||||
| return this; |  | ||||||
| /** |  | ||||||
|  * Die Uhr. |  | ||||||
|  * @param clockarea   Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll. |  | ||||||
|  * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. |  | ||||||
|  */ |  | ||||||
| //if (typeof Uhr === 'undefined') {
 |  | ||||||
| function Uhr(clockarea, settings) { |  | ||||||
| 	this.id = Uhr.id++; |  | ||||||
| 	this.timer = null; |  | ||||||
| 	this.currentTheme = null; |  | ||||||
| 	this.currentLayout = {}; |  | ||||||
| 	this.currentMinute = -1; |  | ||||||
| 	this.initHTMLElements(clockarea, settings || {}); |  | ||||||
| } |  | ||||||
| Uhr.id = 0; |  | ||||||
| Uhr.layouts = new Array(); |  | ||||||
| Uhr.register = function (locale, layout) { |  | ||||||
| 	Uhr.layouts[locale] = layout; |  | ||||||
| } |  | ||||||
| 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(); |  | ||||||
| 		jQuery.cookie('status' + this.id, 'on', {expires: 365, path: '/'}); |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Uhr.prototype.stop = function() { |  | ||||||
| 	if (this.isOn()) { |  | ||||||
| 		window.clearInterval(this.timer); |  | ||||||
| 		this.timer = null; |  | ||||||
| 		this.update(); |  | ||||||
| 		jQuery.cookie('status' + this.id, 'off', {expires: 365, path: '/'}); |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Uhr.prototype.isOn = function() { |  | ||||||
| 	return this.timer != null; |  | ||||||
| } |  | ||||||
| Uhr.prototype.setLayout = function(locale) { |  | ||||||
| 	var newLayout = Uhr.layouts[locale]; |  | ||||||
| 	if (newLayout !== undefined && newLayout != this.currentLayout) { |  | ||||||
| 		this.currentLayout = newLayout; |  | ||||||
| 		var renderer = new UhrRenderer(this.currentLayout, this.letterarea); |  | ||||||
| 		renderer.render(this); |  | ||||||
| 		jQuery.cookie('layout' + this.id, locale, {expires: 365, path: '/'}); |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Uhr.prototype.setTheme = function(theme) { |  | ||||||
| 	if (theme != this.currentTheme) { |  | ||||||
| 		this.clockarea.removeClass(this.currentTheme); |  | ||||||
| 		this.toggleSwitch.removeClass(this.currentTheme); |  | ||||||
| 		this.clockarea.addClass(theme); |  | ||||||
| 		this.toggleSwitch.addClass(theme); |  | ||||||
| 		this.currentTheme = theme; |  | ||||||
| 		jQuery.cookie('theme' + this.id, theme, {expires: 365, path: '/'}); |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Uhr.prototype.update = function() { |  | ||||||
| 	if (this.isOn()) { |  | ||||||
| 		var now = new Date(); |  | ||||||
| 		if (now.getMinutes() == this.currentMinute) { |  | ||||||
| 			return; |  | ||||||
| 		} |  | ||||||
| 		this.currentMinute = now.getMinutes(); |  | ||||||
| 		var dotMinute = this.getDotMinute(now); |  | ||||||
| 		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.clockarea.find('.item').removeClass('active'); |  | ||||||
| } |  | ||||||
| Uhr.prototype.highlight = function(itemClass) { |  | ||||||
| 	this.clockarea.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; |  | ||||||
| } |  | ||||||
| Uhr.prototype.initHTMLElements = function(clockarea, presets) { |  | ||||||
| 	this.createHTMLElements(clockarea, presets.width); |  | ||||||
| 	var force = presets.force || false; |  | ||||||
| 	this.initToggleSwitch(presets.status, force); |  | ||||||
| 	this.initLayoutSwitch(presets.layout, force); |  | ||||||
| 	this.initThemeSwitch(presets.theme, force); |  | ||||||
| } |  | ||||||
| Uhr.prototype.createHTMLElements = function(clockarea, width) { |  | ||||||
| 	this.createClockarea(clockarea, width) |  | ||||||
| 	this.letterarea = this.clockarea.find('.letterarea'); |  | ||||||
| 	this.createToggleSwitch(); |  | ||||||
| 	this.createLayoutSwitch(); |  | ||||||
| 	this.createThemeSwitch(); |  | ||||||
| } |  | ||||||
| Uhr.prototype.createClockarea = function(clockarea, width) { |  | ||||||
| 	clockarea.addClass('uhr'); |  | ||||||
| 	clockarea.empty(); |  | ||||||
| 	clockarea.append('<span class="item dot dot1"></span>'); |  | ||||||
| 	clockarea.append('<span class="item dot dot2"></span>'); |  | ||||||
| 	clockarea.append('<span class="item dot dot3"></span>'); |  | ||||||
| 	clockarea.append('<span class="item dot dot4"></span>'); |  | ||||||
| 	clockarea.append('<div class="letterarea"></div>'); |  | ||||||
| 	clockarea.append('<div class="reflection"></div>'); |  | ||||||
| 	if(width == undefined) { |  | ||||||
| 		width = '100%'; |  | ||||||
| 	} |  | ||||||
| 	clockarea.css('width', width); |  | ||||||
| 	var realWidth = clockarea.width() |  | ||||||
| 	clockarea.width(realWidth); |  | ||||||
| 	clockarea.height(realWidth); |  | ||||||
| 	clockarea.css('font-size', (realWidth / 40) + 'px'); |  | ||||||
| 	this.clockarea = clockarea |  | ||||||
| } |  | ||||||
| Uhr.prototype.createToggleSwitch = function() { |  | ||||||
| 	this.toggleSwitch = jQuery('<div class="onoffswitch"></div>'); |  | ||||||
| 	var input = jQuery('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />'); |  | ||||||
| 	this.toggleSwitch.append(input); |  | ||||||
| 	this.toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">' |  | ||||||
| 		+ '<div class="onoffswitch-inner"></div>' |  | ||||||
| 		+ '<div class="onoffswitch-switch"></div>' |  | ||||||
| 		+ '</label>'); |  | ||||||
| 	this.clockarea.after(this.toggleSwitch); |  | ||||||
| } |  | ||||||
| Uhr.prototype.createLayoutSwitch = function () { |  | ||||||
| 	this.layoutSwitch = jQuery('<select></select>') |  | ||||||
| 	for (var code in Uhr.layouts) { |  | ||||||
| 		if (Uhr.layouts.hasOwnProperty(code)) { |  | ||||||
| 			var layout = Uhr.layouts[code]; |  | ||||||
| 			var option = jQuery('<option value="' + code + '">' + layout.language + '</option>') |  | ||||||
| 			this.layoutSwitch.append(option); |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| 	this.clockarea.after(this.layoutSwitch); |  | ||||||
| } |  | ||||||
| Uhr.prototype.createThemeSwitch = function () { |  | ||||||
| 	this.themeSwitch = jQuery('<select></select>'); |  | ||||||
| 	this.themeSwitch.append('<option value="black">Schwarz</option>'); |  | ||||||
| 	this.themeSwitch.append('<option value="red">Rot</option>'); |  | ||||||
| 	this.themeSwitch.append('<option value="blue">Blau</option>'); |  | ||||||
| 	this.themeSwitch.append('<option value="green">Grün</option>'); |  | ||||||
| 	this.themeSwitch.append('<option value="white">Weiss</option>'); |  | ||||||
| 	this.clockarea.after(this.themeSwitch); |  | ||||||
| } |  | ||||||
| Uhr.prototype.initToggleSwitch = function(defaultValue, overrideCookie) { |  | ||||||
| 	var input = jQuery('#onoffswitch' + this.id); |  | ||||||
| 	var uhr = this; |  | ||||||
| 	input.on('click', function() { |  | ||||||
| 		uhr.toggle(); |  | ||||||
| 	}); |  | ||||||
| 	var status = jQuery.cookie('status' + this.id); |  | ||||||
| 	if (status == undefined || (overrideCookie && (defaultValue != undefined))) { |  | ||||||
| 		status = defaultValue; |  | ||||||
| 	} |  | ||||||
| 	if (status == undefined || status == 'undefined') { |  | ||||||
| 		status = 'on'; |  | ||||||
| 	} |  | ||||||
| 	if (status == 'on') { |  | ||||||
| 		this.start(); |  | ||||||
| 		input.prop('checked', true); |  | ||||||
| 	} else { |  | ||||||
| 		this.stop(); |  | ||||||
| 		input.prop('checked', false); |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) { |  | ||||||
| 	var uhr = this; |  | ||||||
| 	this.layoutSwitch.on('change', function() { |  | ||||||
| 		uhr.setLayout(this.value); |  | ||||||
| 	}); |  | ||||||
| 	var selectedLayout = jQuery.cookie('layout' + this.id); |  | ||||||
| 	if (selectedLayout == undefined || (overrideCookie && (defaultValue != undefined))) { |  | ||||||
| 		selectedLayout = defaultValue; |  | ||||||
| 	} |  | ||||||
| 	if (selectedLayout == undefined) { |  | ||||||
| 		// FIXME not nice, hardcoded default-value
 |  | ||||||
| 		selectedLayout = 'de_CH'; |  | ||||||
| 	} |  | ||||||
| 	this.layoutSwitch.val(selectedLayout); |  | ||||||
| 	this.setLayout(selectedLayout); |  | ||||||
| } |  | ||||||
| Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { |  | ||||||
| 	var uhr = this; |  | ||||||
| 	this.themeSwitch.on('change', function() { |  | ||||||
| 		uhr.setTheme(this.value); |  | ||||||
| 	}); |  | ||||||
| 	var selectedTheme = jQuery.cookie('theme' + this.id); |  | ||||||
| 	if (selectedTheme == undefined || (overrideCookie && (defaultValue != undefined))) { |  | ||||||
| 		selectedTheme = defaultValue; |  | ||||||
| 	} |  | ||||||
| 	if (selectedTheme == undefined || selectedTheme == 'undefined') { |  | ||||||
| 		selectedTheme = 'black'; |  | ||||||
| 	} |  | ||||||
| 	this.themeSwitch.val(selectedTheme); |  | ||||||
| 	this.setTheme(selectedTheme); |  | ||||||
| } |  | ||||||
| 
 | 
 | ||||||
| 
 |  | ||||||
| //}
 |  | ||||||
| })(jQuery); |  | ||||||
| /** | /** | ||||||
|  * Hilfsklasse zum Rendern der Uhr. |  * Hilfsklasse zum Rendern der Uhr. | ||||||
|  * @param layout     Layout-Objekt, das gerendert werden soll. |  * @param layout     Layout-Objekt, das gerendert werden soll. | ||||||
|  | @ -514,8 +271,8 @@ UhrRenderer.prototype.render = function(uhr) { | ||||||
| 				renderer.renderarea.append('<br/>'); | 				renderer.renderarea.append('<br/>'); | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| 		uhr.data('currentMinute', -1); | 		uhr._currentMinute = -1; | ||||||
| 		Uhr.update(uhr); | 		uhr._update(); | ||||||
| 		renderer.renderarea.fadeIn('fast'); | 		renderer.renderarea.fadeIn('fast'); | ||||||
| 	}); | 	}); | ||||||
| } | } | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue