From 5899a3a255fa3537713990b9e7d3c878e0b6d3f8 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Wed, 27 Nov 2013 15:25:34 +0100 Subject: [PATCH 01/16] klassen statt IDs --- index.html | 14 +++++++------- uhr.css | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 49826c5..c288927 100644 --- a/index.html +++ b/index.html @@ -24,14 +24,14 @@ along with this program. If not, see . -
- - - - -
+
+ + + + +
- +
-
- - -

Created by fritteli, inspired by QLOCKTWO. + + - - - diff --git a/uhr.js b/uhr.js index 23203a8..d82871e 100644 --- a/uhr.js +++ b/uhr.js @@ -21,6 +21,7 @@ function Uhr(clockarea, themeElement) { this.id = Uhr.id++; this.clockarea = this.initClockarea(clockarea); this.toggleSwitch = this.initToggleSwitch(); + this.layoutSwitch = this.initLayoutSwitch(); this.letterarea = clockarea.find('.letterarea'); this.themeElement = themeElement; this.timer = null; @@ -165,6 +166,19 @@ Uhr.prototype.initToggleSwitch = function() { this.clockarea.after(toggleSwitch); return toggleSwitch; } +Uhr.prototype.initLayoutSwitch = function() { + var layoutSwitch = $('') + for (var code in Uhr.layouts) { + if (Uhr.layouts.hasOwnProperty(code)) { + console.log(code); + var layout = Uhr.layouts[code]; + console.log(layout); + console.log(layout.language); + // TODO fill select with options + } + } + return layoutSwitch; +} Uhr.register('undefined', { language: 'Undefined', From 5223ceb1f6a4a47e847042721ae0fdeda5fa86f0 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 28 Nov 2013 08:51:37 +0100 Subject: [PATCH 12/16] commit, weil ich wissen muss, obs an den cookies liegt, dass es nicht geht --- index.html | 27 --------------------------- uhr.js | 48 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 35 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index b4cb091..a23c2a4 100644 --- a/index.html +++ b/index.html @@ -32,11 +32,6 @@ along with this program. If not, see . -

Created by fritteli, inspired by QLOCKTWO. @@ -47,34 +42,12 @@ along with this program. If not, see . $('#themeswitcher').on('change', function() { uhr.setTheme(this.value); }); - $('#layoutswitcher').on('change', function() { - uhr.setLayout(this.value); - }); - $.cookie.defaults.expires = 365; - $.cookie.defaults.path = '/'; var theme = $.cookie('theme'); - var layout = $.cookie('layout'); - var status = $.cookie('status'); if (theme === undefined || theme == 'undefined') { theme = 'black'; } - if(layout === undefined || layout == 'undefined') { - layout = 'de_CH'; - } - if (status === undefined || status == 'undefined') { - status = 'on'; - } $('#themeswitcher').val(theme); uhr.setTheme(theme); - $('#layoutswitcher').val(layout); - uhr.setLayout(layout); - if (status == 'on') { - uhr.start(); - $('#onoffswitch').prop('checked', true); - } else { - uhr.stop(); - $('#onoffswitch').prop('checked', false); - } }); diff --git a/uhr.js b/uhr.js index d82871e..14d8cac 100644 --- a/uhr.js +++ b/uhr.js @@ -19,15 +19,12 @@ along with this program. If not, see . */ function Uhr(clockarea, themeElement) { this.id = Uhr.id++; - this.clockarea = this.initClockarea(clockarea); - this.toggleSwitch = this.initToggleSwitch(); - this.layoutSwitch = this.initLayoutSwitch(); - this.letterarea = clockarea.find('.letterarea'); this.themeElement = themeElement; this.timer = null; this.currentTheme = null; this.currentLayout = Uhr.layouts['undefined']; this.currentMinute = -1; + this.initHTMLElements(clockarea, themeElement); } Uhr.id = 0; Uhr.layouts = new Array(); @@ -46,7 +43,7 @@ Uhr.prototype.start = function() { var uhr = this; this.timer = window.setInterval(function() {uhr.update();}, 1000); this.update(); - $.cookie('status', 'on', {expires: 365, path: '/'}); + $.cookie('status' + this.id, 'on', {expires: 365, path: '/'}); } } Uhr.prototype.stop = function() { @@ -54,7 +51,7 @@ Uhr.prototype.stop = function() { window.clearInterval(this.timer); this.timer = null; this.update(); - $.cookie('status', 'off', {expires: 365, path: '/'}); + $.cookie('status' + this.id, 'off', {expires: 365, path: '/'}); } } Uhr.prototype.isOn = function() { @@ -66,14 +63,14 @@ Uhr.prototype.setLayout = function(locale) { this.currentLayout = newLayout; var renderer = new UhrRenderer(this.currentLayout, this.letterarea); renderer.render(this); - $.cookie('layout', locale, {expires: 365, path: '/'}); + $.cookie('layout' + this.id, locale, {expires: 365, path: '/'}); } } Uhr.prototype.setTheme = function(theme) { if (theme != this.currentTheme) { this.currentTheme = theme; this.themeElement.attr('href', 'uhr-' + theme + '.css'); - $.cookie('theme', theme, {expires: 365, path: '/'}); + $.cookie('theme' + this.id, theme, {expires: 365, path: '/'}); } } Uhr.prototype.update = function() { @@ -141,6 +138,12 @@ Uhr.prototype.normalizeHour = function(hour) { } return hour; } +Uhr.prototype.initHTMLElements = function(clockarea, themeElement) { + this.clockarea = this.initClockarea(clockarea); + this.letterarea = this.clockarea.find('.letterarea'); + this.layoutSwitch = this.initLayoutSwitch(); + this.toggleSwitch = this.initToggleSwitch(); +} Uhr.prototype.initClockarea = function(clockarea) { clockarea.empty(); clockarea.append(''); @@ -164,24 +167,43 @@ Uhr.prototype.initToggleSwitch = function() { + '

' + ''); this.clockarea.after(toggleSwitch); + + var status = $.cookie('status' + this.id); + if (status == 'on') { + this.start(); + toggleSwitch.prop('checked', true); + } else { + this.stop(); + toggleSwitch.prop('checked', false); + } return toggleSwitch; } Uhr.prototype.initLayoutSwitch = function() { var layoutSwitch = $('') + for (var code in Uhr.layouts) { if (Uhr.layouts.hasOwnProperty(code)) { - console.log(code); var layout = Uhr.layouts[code]; - console.log(layout); - console.log(layout.language); - // TODO fill select with options + var option = $('') + layoutSwitch.append(option); } } + var uhr = 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.setLayout(selectedLayout); + } return layoutSwitch; } Uhr.register('undefined', { - language: 'Undefined', + language: 'Please choose your language', values: [] }); From 4f796107bc09af8ad09fbe5e4c70fd09560bdf30 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 28 Nov 2013 09:40:04 +0100 Subject: [PATCH 13/16] =?UTF-8?q?falsches=20element=20zum=20toggeln=20gew?= =?UTF-8?q?=C3=A4hlt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uhr.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/uhr.js b/uhr.js index 14d8cac..e954fe9 100644 --- a/uhr.js +++ b/uhr.js @@ -171,11 +171,12 @@ Uhr.prototype.initToggleSwitch = function() { var status = $.cookie('status' + this.id); if (status == 'on') { this.start(); - toggleSwitch.prop('checked', true); + input.prop('checked', true); } else { this.stop(); - toggleSwitch.prop('checked', false); + input.prop('checked', false); } + return toggleSwitch; } Uhr.prototype.initLayoutSwitch = function() { From 77c660fcff8342a7042927bb52ed5c89082d0086 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 28 Nov 2013 09:57:50 +0100 Subject: [PATCH 14/16] toggle-switch auch farbig, und vorallem pro uhr --- index.html | 26 ++++++-------------------- uhr-black.css | 4 ++-- uhr-blue.css | 4 ++-- uhr-green.css | 4 ++-- uhr-red.css | 4 ++-- uhr-white.css | 8 ++++---- uhr.js | 30 +++++++++++++++++++++++++----- 7 files changed, 43 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index a23c2a4..0172462 100644 --- a/index.html +++ b/index.html @@ -20,35 +20,21 @@ along with this program. If not, see . - + + + + +
-

Created by fritteli, inspired by QLOCKTWO. diff --git a/uhr-black.css b/uhr-black.css index be167b5..36753a4 100644 --- a/uhr-black.css +++ b/uhr-black.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-light.css"); -.uhr { +.uhr.black{ background-color: #111; } -.onoffswitch-inner:before { +.black .onoffswitch-inner:before { background-color: #111; } diff --git a/uhr-blue.css b/uhr-blue.css index 429bcf4..b8a41c8 100644 --- a/uhr-blue.css +++ b/uhr-blue.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-light.css"); -.uhr { +.uhr.blue { background-color: #00a; } -.onoffswitch-inner:before { +.blue .onoffswitch-inner:before { background-color: #00a; } diff --git a/uhr-green.css b/uhr-green.css index a5a82a5..4f65ae4 100644 --- a/uhr-green.css +++ b/uhr-green.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-dark.css"); -.uhr { +.uhr.green { background-color: #0c0; } -.onoffswitch-inner:before { +.green .onoffswitch-inner:before { background-color: #0c0; } diff --git a/uhr-red.css b/uhr-red.css index b3474f2..d0e986d 100644 --- a/uhr-red.css +++ b/uhr-red.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-light.css"); -.uhr { +.uhr.red { background-color: #700; } -.onoffswitch-inner:before { +.red .onoffswitch-inner:before { background-color: #700; } diff --git a/uhr-white.css b/uhr-white.css index 23a62b8..6b50313 100644 --- a/uhr-white.css +++ b/uhr-white.css @@ -13,17 +13,17 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-dark.css"); -.uhr { +.uhr.white { background-color: #ccc; } -.dot.active{ +.uhr.white .dot.active{ border-color: #fff !important; box-shadow: 0 0 0.1em #fff !important; } -.letter.active{ +.uhr.white .letter.active{ color: #fff !important; text-shadow: 0 0 0.1em #fff !important; } -.onoffswitch-inner:before { +.white .onoffswitch-inner:before { background-color: #ccc; } diff --git a/uhr.js b/uhr.js index e954fe9..bf6dc09 100644 --- a/uhr.js +++ b/uhr.js @@ -17,14 +17,13 @@ along with this program. If not, see . * @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. */ -function Uhr(clockarea, themeElement) { +function Uhr(clockarea) { this.id = Uhr.id++; - this.themeElement = themeElement; this.timer = null; this.currentTheme = null; this.currentLayout = Uhr.layouts['undefined']; this.currentMinute = -1; - this.initHTMLElements(clockarea, themeElement); + this.initHTMLElements(clockarea); } Uhr.id = 0; Uhr.layouts = new Array(); @@ -68,8 +67,11 @@ Uhr.prototype.setLayout = function(locale) { } 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; - this.themeElement.attr('href', 'uhr-' + theme + '.css'); $.cookie('theme' + this.id, theme, {expires: 365, path: '/'}); } } @@ -138,12 +140,16 @@ Uhr.prototype.normalizeHour = function(hour) { } return hour; } -Uhr.prototype.initHTMLElements = function(clockarea, themeElement) { +Uhr.prototype.initHTMLElements = function(clockarea) { + this.createHTMLElements(); this.clockarea = this.initClockarea(clockarea); this.letterarea = this.clockarea.find('.letterarea'); + this.themeSwitch = this.initThemeSwitch(); this.layoutSwitch = this.initLayoutSwitch(); this.toggleSwitch = this.initToggleSwitch(); } +Uhr.prototype.createHTMLElements = function() { +} Uhr.prototype.initClockarea = function(clockarea) { clockarea.empty(); clockarea.append(''); @@ -202,6 +208,20 @@ Uhr.prototype.initLayoutSwitch = function() { } return layoutSwitch; } +Uhr.prototype.initThemeSwitch = function() { + var themeSwitch = $(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + var uhr = this; + themeSwitch.on('change', function() { + uhr.setTheme(this.value); + }); + this.clockarea.after(themeSwitch); + return themeSwitch; +} Uhr.register('undefined', { language: 'Please choose your language', From 9a7d2a898f2d3670389fa9cfa7abcac4c6dde706 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 28 Nov 2013 10:12:52 +0100 Subject: [PATCH 15/16] 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(''); clockarea.append(''); @@ -158,22 +161,44 @@ Uhr.prototype.initClockarea = function(clockarea) { clockarea.append(''); clockarea.append('

'); clockarea.append('
'); - return clockarea; + this.clockarea = clockarea +} +Uhr.prototype.createToggleSwitch = function() { + this.toggleSwitch = $('
'); + var input = $(''); + this.toggleSwitch.append(input); + this.toggleSwitch.append(''); + this.clockarea.after(this.toggleSwitch); +} +Uhr.prototype.createLayoutSwitch = function () { + this.layoutSwitch = $('') + for (var code in Uhr.layouts) { + if (Uhr.layouts.hasOwnProperty(code)) { + var layout = Uhr.layouts[code]; + var option = $('') + this.layoutSwitch.append(option); + } + } + this.clockarea.after(this.layoutSwitch); +} +Uhr.prototype.createThemeSwitch = function () { + this.themeSwitch = $(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.clockarea.after(this.themeSwitch); } Uhr.prototype.initToggleSwitch = function() { - var toggleSwitch = $('
'); - var input = $(''); + var input = $('#onoffswitch' + this.id); var uhr = this; input.on('click', function() { uhr.toggle(); }); - toggleSwitch.append(input); - toggleSwitch.append(''); - 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 = $('') - - for (var code in Uhr.layouts) { - if (Uhr.layouts.hasOwnProperty(code)) { - var layout = Uhr.layouts[code]; - var 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 = $(''); - themeSwitch.append(''); - themeSwitch.append(''); - themeSwitch.append(''); - themeSwitch.append(''); - themeSwitch.append(''); 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', { From 32305d43a145da325b180c0a13ed16f920ec4fd7 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 28 Nov 2013 10:18:48 +0100 Subject: [PATCH 16/16] v3.0: die uhr ist nun voll modular, einfach ein
erstellen und im JS eine neue Uhr(), fertig! --- manifest.appcache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.appcache b/manifest.appcache index e4b6978..c72e9f4 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 2.3.1 +# 3.0 COPYING index.html