zuerst erzeugen, dann verhalten definieren

This commit is contained in:
Manuel Friedli 2013-11-28 10:12:52 +01:00
parent 77c660fcff
commit 9a7d2a898f

95
uhr.js
View file

@ -141,16 +141,19 @@ Uhr.prototype.normalizeHour = function(hour) {
return hour; return hour;
} }
Uhr.prototype.initHTMLElements = function(clockarea) { Uhr.prototype.initHTMLElements = function(clockarea) {
this.createHTMLElements(); this.createHTMLElements(clockarea);
this.clockarea = this.initClockarea(clockarea); this.initToggleSwitch();
this.initLayoutSwitch();
this.initThemeSwitch();
}
Uhr.prototype.createHTMLElements = function(clockarea) {
this.createClockarea(clockarea)
this.letterarea = this.clockarea.find('.letterarea'); this.letterarea = this.clockarea.find('.letterarea');
this.themeSwitch = this.initThemeSwitch(); this.createToggleSwitch();
this.layoutSwitch = this.initLayoutSwitch(); this.createLayoutSwitch();
this.toggleSwitch = this.initToggleSwitch(); this.createThemeSwitch();
} }
Uhr.prototype.createHTMLElements = function() { Uhr.prototype.createClockarea = function(clockarea) {
}
Uhr.prototype.initClockarea = function(clockarea) {
clockarea.empty(); clockarea.empty();
clockarea.append('<span class="item dot dot1"></span>'); clockarea.append('<span class="item dot dot1"></span>');
clockarea.append('<span class="item dot dot2"></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('<span class="item dot dot4"></span>');
clockarea.append('<div class="letterarea"></div>'); clockarea.append('<div class="letterarea"></div>');
clockarea.append('<div class="reflection"></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() { Uhr.prototype.initToggleSwitch = function() {
var toggleSwitch = $('<div class="onoffswitch"></div>'); var input = $('#onoffswitch' + this.id);
var input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />');
var uhr = this; var uhr = this;
input.on('click', function() { input.on('click', function() {
uhr.toggle(); 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); var status = $.cookie('status' + this.id);
if (status == 'on') { if (status == 'on') {
this.start(); this.start();
@ -182,45 +207,29 @@ Uhr.prototype.initToggleSwitch = function() {
this.stop(); this.stop();
input.prop('checked', false); input.prop('checked', false);
} }
return toggleSwitch;
} }
Uhr.prototype.initLayoutSwitch = function() { 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; var uhr = this;
layoutSwitch.on('change', function() { this.layoutSwitch.on('change', function() {
uhr.setLayout(this.value); uhr.setLayout(this.value);
}); });
this.clockarea.after(layoutSwitch);
var selectedLayout = $.cookie('layout' + this.id); var selectedLayout = $.cookie('layout' + this.id);
if (selectedLayout != undefined && selectedLayout != 'undefinded') { if (selectedLayout != undefined && selectedLayout != 'undefinded') {
layoutSwitch.val(selectedLayout); this.layoutSwitch.val(selectedLayout);
this.setLayout(selectedLayout); this.setLayout(selectedLayout);
} }
return layoutSwitch;
} }
Uhr.prototype.initThemeSwitch = function() { 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; var uhr = this;
themeSwitch.on('change', function() { this.themeSwitch.on('change', function() {
uhr.setTheme(this.value); uhr.setTheme(this.value);
}); });
this.clockarea.after(themeSwitch); var selectedTheme = $.cookie('theme' + this.id);
return themeSwitch; if (selectedTheme == undefined || selectedTheme == 'undefined') {
selectedTheme = 'black';
}
this.themeSwitch.val(selectedTheme);
this.setTheme(selectedTheme);
} }
Uhr.register('undefined', { Uhr.register('undefined', {