manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

zuerst erzeugen, dann verhalten definieren

Browse source
This commit is contained in:
Manuel Friedli 2013-11-28 10:12:52 +01:00
parent 77c660fcff
commit 9a7d2a898f
1 changed files with 52 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
uhr.js
View file

@ -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', {