From 9a7d2a898f2d3670389fa9cfa7abcac4c6dde706 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Thu, 28 Nov 2013 10:12:52 +0100 Subject: [PATCH] zuerst erzeugen, dann verhalten definieren --- uhr.js | 95 ++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 52 insertions(+), 43 deletions(-) diff --git a/uhr.js b/uhr.js index bf6dc09..2097aa8 100644 --- a/uhr.js +++ b/uhr.js @@ -141,16 +141,19 @@ Uhr.prototype.normalizeHour = function(hour) { return hour; } Uhr.prototype.initHTMLElements = function(clockarea) { - this.createHTMLElements(); - this.clockarea = this.initClockarea(clockarea); + this.createHTMLElements(clockarea); + this.initToggleSwitch(); + this.initLayoutSwitch(); + this.initThemeSwitch(); +} +Uhr.prototype.createHTMLElements = function(clockarea) { + this.createClockarea(clockarea) this.letterarea = this.clockarea.find('.letterarea'); - this.themeSwitch = this.initThemeSwitch(); - this.layoutSwitch = this.initLayoutSwitch(); - this.toggleSwitch = this.initToggleSwitch(); + this.createToggleSwitch(); + this.createLayoutSwitch(); + this.createThemeSwitch(); } -Uhr.prototype.createHTMLElements = function() { -} -Uhr.prototype.initClockarea = function(clockarea) { +Uhr.prototype.createClockarea = function(clockarea) { clockarea.empty(); clockarea.append('<span class="item dot dot1"></span>'); clockarea.append('<span class="item dot dot2"></span>'); @@ -158,22 +161,44 @@ Uhr.prototype.initClockarea = function(clockarea) { clockarea.append('<span class="item dot dot4"></span>'); clockarea.append('<div class="letterarea"></div>'); clockarea.append('<div class="reflection"></div>'); - return clockarea; + this.clockarea = clockarea +} +Uhr.prototype.createToggleSwitch = function() { + this.toggleSwitch = $('<div class="onoffswitch"></div>'); + var input = $('<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 = $('<select></select>') + for (var code in Uhr.layouts) { + if (Uhr.layouts.hasOwnProperty(code)) { + var layout = Uhr.layouts[code]; + var option = $('<option value="' + code + '">' + layout.language + '</option>') + this.layoutSwitch.append(option); + } + } + this.clockarea.after(this.layoutSwitch); +} +Uhr.prototype.createThemeSwitch = function () { + this.themeSwitch = $('<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() { - var toggleSwitch = $('<div class="onoffswitch"></div>'); - var input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />'); + var input = $('#onoffswitch' + this.id); var uhr = this; input.on('click', function() { uhr.toggle(); }); - toggleSwitch.append(input); - toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">' - + '<div class="onoffswitch-inner"></div>' - + '<div class="onoffswitch-switch"></div>' - + '</label>'); - this.clockarea.after(toggleSwitch); - var status = $.cookie('status' + this.id); if (status == 'on') { this.start(); @@ -182,45 +207,29 @@ Uhr.prototype.initToggleSwitch = function() { this.stop(); input.prop('checked', false); } - - return toggleSwitch; } Uhr.prototype.initLayoutSwitch = function() { - var layoutSwitch = $('<select id="layoutswitcher' + this.id + '"></select>') - - for (var code in Uhr.layouts) { - if (Uhr.layouts.hasOwnProperty(code)) { - var layout = Uhr.layouts[code]; - var option = $('<option value="' + code + '">' + layout.language + '</option>') - layoutSwitch.append(option); - } - } var uhr = this; - layoutSwitch.on('change', function() { + this.layoutSwitch.on('change', function() { uhr.setLayout(this.value); }); - this.clockarea.after(layoutSwitch); - var selectedLayout = $.cookie('layout' + this.id); if (selectedLayout != undefined && selectedLayout != 'undefinded') { - layoutSwitch.val(selectedLayout); + this.layoutSwitch.val(selectedLayout); this.setLayout(selectedLayout); } - return layoutSwitch; } Uhr.prototype.initThemeSwitch = function() { - var themeSwitch = $('<select></select>'); - themeSwitch.append('<option value="black">Schwarz</option>'); - themeSwitch.append('<option value="red">Rot</option>'); - themeSwitch.append('<option value="blue">Blau</option>'); - themeSwitch.append('<option value="green">Grün</option>'); - themeSwitch.append('<option value="white">Weiss</option>'); var uhr = this; - themeSwitch.on('change', function() { + this.themeSwitch.on('change', function() { uhr.setTheme(this.value); }); - this.clockarea.after(themeSwitch); - return themeSwitch; + var selectedTheme = $.cookie('theme' + this.id); + if (selectedTheme == undefined || selectedTheme == 'undefined') { + selectedTheme = 'black'; + } + this.themeSwitch.val(selectedTheme); + this.setTheme(selectedTheme); } Uhr.register('undefined', {