refactor: move every helper function inside the scope-limiting block in order not to pollute world
This commit is contained in:
		
							parent
							
								
									ffcf8fa2f2
								
							
						
					
					
						commit
						480736e877
					
				
					 1 changed files with 120 additions and 120 deletions
				
			
		
							
								
								
									
										240
									
								
								uhr.js
									
										
									
									
									
								
							
							
						
						
									
										240
									
								
								uhr.js
									
										
									
									
									
								
							|  | @ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 			if (name === undefined) { | 			if (name === undefined) { | ||||||
| 				name = styleClass; | 				name = styleClass; | ||||||
| 			} | 			} | ||||||
| 			window._uhr.themes.push({'class': styleClass, 'name': name}); | 			window._uhr.themes.push({'styleClass': styleClass, 'name': name}); | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| 	// fall-back if no theme was included
 | 	// fall-back if no theme was included
 | ||||||
|  | @ -46,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 			width: '100%', | 			width: '100%', | ||||||
| 			status: 'on', | 			status: 'on', | ||||||
| 			language: 'de_CH', | 			language: 'de_CH', | ||||||
| 			theme: window._uhr.themes[0].class, | 			theme: window._uhr.themes[0].styleClass, | ||||||
| 			force: false, | 			force: false, | ||||||
| 			controls: true | 			controls: true | ||||||
| 		}, | 		}, | ||||||
|  | @ -248,7 +248,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 					var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); | 					var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); | ||||||
| 					for (var i = 0; i < window._uhr.themes.length; i++) { | 					for (var i = 0; i < window._uhr.themes.length; i++) { | ||||||
| 						var theme = window._uhr.themes[i]; | 						var theme = window._uhr.themes[i]; | ||||||
| 						themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>'); | 						themeChooser.append('<option value="' + theme.styleClass + '">' + theme.name + '</option>'); | ||||||
| 					} | 					} | ||||||
| 					e.after(themeChooser); | 					e.after(themeChooser); | ||||||
| 				} | 				} | ||||||
|  | @ -297,14 +297,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 			} | 			} | ||||||
| 			var found = false; | 			var found = false; | ||||||
| 			for (var i = 0; i < window._uhr.themes.length; i++) { | 			for (var i = 0; i < window._uhr.themes.length; i++) { | ||||||
| 				var styleClass = window._uhr.themes[i].class; | 				var styleClass = window._uhr.themes[i].styleClass; | ||||||
| 				if (selectedTheme == styleClass) { | 				if (selectedTheme == styleClass) { | ||||||
| 					found = true; | 					found = true; | ||||||
| 					break; | 					break; | ||||||
| 				} | 				} | ||||||
| 			} | 			} | ||||||
| 			if (!found) { | 			if (!found) { | ||||||
| 				var fallback = window._uhr.themes[0].class; | 				var fallback = window._uhr.themes[0].styleClass; | ||||||
| 				console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback); | 				console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback); | ||||||
| 				selectedTheme = fallback; | 				selectedTheme = fallback; | ||||||
| 			} | 			} | ||||||
|  | @ -313,120 +313,120 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>. | ||||||
| 			this.theme(selectedTheme); | 			this.theme(selectedTheme); | ||||||
| 		} | 		} | ||||||
| 	}); | 	}); | ||||||
|  | 	/** | ||||||
|  | 	 * 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, beforeshow) { | ||||||
|  | 		var renderer = this; | ||||||
|  | 		if (this.layout._parsed === undefined) { | ||||||
|  | 			switch (this.layout.version) { | ||||||
|  | 				case 2: | ||||||
|  | 					var delegate = new _UhrRendererV2Delegate(this.layout); | ||||||
|  | 					this.layout._parsed = delegate.parse(); | ||||||
|  | 					break; | ||||||
|  | 				default: | ||||||
|  | 					console.warn("Unknown layout version: '" + this.layout.version + "'"); | ||||||
|  | 					return; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 		var letters = this.layout._parsed; | ||||||
|  | 		this.renderarea.fadeOut('fast', function() { | ||||||
|  | 			renderer.renderarea.empty(); | ||||||
|  | 			for (var y = 0; y < letters.length; y++) { | ||||||
|  | 				for (var x = 0; x < letters[y].length; x++) { | ||||||
|  | 					var letter = letters[y][x]; | ||||||
|  | 					renderer.renderarea.append(letter.toString()); | ||||||
|  | 				} | ||||||
|  | 				if (y < letters.length - 1) { | ||||||
|  | 					renderer.renderarea.append('<br/>'); | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 			if (typeof beforeshow === 'function') { | ||||||
|  | 				beforeshow(); | ||||||
|  | 			} | ||||||
|  | 			renderer.renderarea.fadeIn('fast'); | ||||||
|  | 		}); | ||||||
|  | 	}; | ||||||
|  | 	function _UhrRendererV2Delegate(layout) { | ||||||
|  | 		this.layout = layout; | ||||||
|  | 		this._parseArrayOrObject = function(letters, styleClass, input) { | ||||||
|  | 			if (Array.isArray(input)) { | ||||||
|  | 				for (var i = 0; i < input.length; i++) { | ||||||
|  | 					this._parseObject(letters, styleClass, input[i]); | ||||||
|  | 				} | ||||||
|  | 			} else { | ||||||
|  | 				this._parseObject(letters, styleClass, input); | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 		this._parseObject = function(letters, styleClass, object) { | ||||||
|  | 			for (var line in object) { | ||||||
|  | 				if (object.hasOwnProperty(line)) { | ||||||
|  | 					var highlightLetters = object[line]; | ||||||
|  | 					for (var i = 0; i < highlightLetters.length; i++) { | ||||||
|  | 						var x = highlightLetters[i] - 1; | ||||||
|  | 						letters[line - 1][x].addStyle(styleClass); | ||||||
|  | 					} | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 		this._parseTimeDefinition = function(letters, styleClass, definition) { | ||||||
|  | 			for (var listString in definition) { | ||||||
|  | 				if (definition.hasOwnProperty(listString)) { | ||||||
|  | 					var array = listString.split(','); | ||||||
|  | 					var highlightLetters = definition[listString]; | ||||||
|  | 					for (var index = 0; index < array.length; index++) { | ||||||
|  | 						this._parseArrayOrObject(letters, styleClass + array[index], highlightLetters); | ||||||
|  | 					} | ||||||
|  | 				} | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	_UhrRendererV2Delegate.prototype.parse = function() { | ||||||
|  | 		var letters = []; | ||||||
|  | 		for (var i = 0; i < this.layout.letters.length; i++) { | ||||||
|  | 			var line = []; | ||||||
|  | 			var string = this.layout.letters[i]; | ||||||
|  | 			for (var c = 0; c < string.length; c++) { | ||||||
|  | 				var character = new Letter(string[c]); | ||||||
|  | 				line.push(character); | ||||||
|  | 			} | ||||||
|  | 			letters.push(line); | ||||||
|  | 		} | ||||||
|  | 		this._parseArrayOrObject(letters, 'on', this.layout.permanent); | ||||||
|  | 		this._parseTimeDefinition(letters, 'minute', this.layout.minutes); | ||||||
|  | 		this._parseTimeDefinition(letters, 'hour', this.layout.hours); | ||||||
|  | 		return letters; | ||||||
|  | 	}; | ||||||
|  | 	/** | ||||||
|  | 	 * 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 ' + this.style; | ||||||
|  | 		}; | ||||||
|  | 		this.getValue = function() { | ||||||
|  | 			return value; | ||||||
|  | 		} | ||||||
|  | 		this.addStyle = function(style) { | ||||||
|  | 			if (this.style == '') { | ||||||
|  | 				this.style = style; | ||||||
|  | 			} else { | ||||||
|  | 				this.style += ' ' + style; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | 	Letter.prototype.toString = function letterToString() { | ||||||
|  | 		return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>'; | ||||||
|  | 	}; | ||||||
| })(jQuery); | })(jQuery); | ||||||
| 
 | 
 | ||||||
| /** |  | ||||||
|  * 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, beforeshow) { |  | ||||||
| 	var renderer = this; |  | ||||||
| 	if (this.layout._parsed === undefined) { |  | ||||||
| 		switch (this.layout.version) { |  | ||||||
| 			case 2: |  | ||||||
| 				var delegate = new _UhrRendererV2Delegate(this.layout); |  | ||||||
| 				this.layout._parsed = delegate.parse(); |  | ||||||
| 				break; |  | ||||||
| 			default: |  | ||||||
| 				console.warn("Unknown layout version: '" + this.layout.version + "'"); |  | ||||||
| 				return; |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| 	var letters = this.layout._parsed; |  | ||||||
| 	this.renderarea.fadeOut('fast', function() { |  | ||||||
| 		renderer.renderarea.empty(); |  | ||||||
| 		for (var y = 0; y < letters.length; y++) { |  | ||||||
| 			for (var x = 0; x < letters[y].length; x++) { |  | ||||||
| 				var letter = letters[y][x]; |  | ||||||
| 				renderer.renderarea.append(letter.toString()); |  | ||||||
| 			} |  | ||||||
| 			if (y < letters.length - 1) { |  | ||||||
| 				renderer.renderarea.append('<br/>'); |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 		if (typeof beforeshow === 'function') { |  | ||||||
| 			beforeshow(); |  | ||||||
| 		} |  | ||||||
| 		renderer.renderarea.fadeIn('fast'); |  | ||||||
| 	}); |  | ||||||
| }; |  | ||||||
| function _UhrRendererV2Delegate(layout) { |  | ||||||
| 	this.layout = layout; |  | ||||||
| 	this._parseArrayOrObject = function(letters, styleClass, input) { |  | ||||||
| 		if (Array.isArray(input)) { |  | ||||||
| 			for (var i = 0; i < input.length; i++) { |  | ||||||
| 				this._parseObject(letters, styleClass, input[i]); |  | ||||||
| 			} |  | ||||||
| 		} else { |  | ||||||
| 			this._parseObject(letters, styleClass, input); |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| 	this._parseObject = function(letters, styleClass, object) { |  | ||||||
| 		for (line in object) { |  | ||||||
| 			if (object.hasOwnProperty(line)) { |  | ||||||
| 				var highlightLetters = object[line]; |  | ||||||
| 				for (var i = 0; i < highlightLetters.length; i++) { |  | ||||||
| 					var x = highlightLetters[i] - 1; |  | ||||||
| 					letters[line - 1][x].addStyle(styleClass); |  | ||||||
| 				} |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| 	this._parseTimeDefinition = function(letters, styleClass, definition) { |  | ||||||
| 		for (listString in definition) { |  | ||||||
| 			if (definition.hasOwnProperty(listString)) { |  | ||||||
| 				var array = listString.split(','); |  | ||||||
| 				var highlightLetters = definition[listString]; |  | ||||||
| 				for (var index = 0; index < array.length; index++) { |  | ||||||
| 					this._parseArrayOrObject(letters, styleClass + array[index], highlightLetters); |  | ||||||
| 				} |  | ||||||
| 			} |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| _UhrRendererV2Delegate.prototype.parse = function() { |  | ||||||
| 	var letters = []; |  | ||||||
| 	for (var i = 0; i < this.layout.letters.length; i++) { |  | ||||||
| 		var line = []; |  | ||||||
| 		var string = this.layout.letters[i]; |  | ||||||
| 		for (var c = 0; c < string.length; c++) { |  | ||||||
| 			var character = new Letter(string[c]); |  | ||||||
| 			line.push(character); |  | ||||||
| 		} |  | ||||||
| 		letters.push(line); |  | ||||||
| 	} |  | ||||||
| 	this._parseArrayOrObject(letters, 'on', this.layout.permanent); |  | ||||||
| 	this._parseTimeDefinition(letters, 'minute', this.layout.minutes); |  | ||||||
| 	this._parseTimeDefinition(letters, 'hour', this.layout.hours); |  | ||||||
| 	return letters; |  | ||||||
| }; |  | ||||||
| /** |  | ||||||
|  * 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 ' + this.style; |  | ||||||
| 	}; |  | ||||||
| 	this.getValue = function() { |  | ||||||
| 		return value; |  | ||||||
| 	} |  | ||||||
| 	this.addStyle = function(style) { |  | ||||||
| 		if (this.style == '') { |  | ||||||
| 			this.style = style; |  | ||||||
| 		} else { |  | ||||||
| 			this.style += ' ' + style; |  | ||||||
| 		} |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| Letter.prototype.toString = function letterToString() { |  | ||||||
| 	return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>'; |  | ||||||
| }; |  | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue