From 5899a3a255fa3537713990b9e7d3c878e0b6d3f8 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> 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 <http://www.gnu.org/licenses/>. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> - <div id="uhr"> - <span class="item dot dot1" id="dot1"></span> - <span class="item dot dot2" id="dot2"></span> - <span class="item dot dot3" id="dot3"></span> - <span class="item dot dot4" id="dot4"></span> - <div id="renderarea"></div> + <div id="uhr" class="uhr"> + <span class="item dot dot1"></span> + <span class="item dot dot2"></span> + <span class="item dot dot3"></span> + <span class="item dot dot4"></span> + <div id="renderarea" class="renderarea"></div> <!-- glossy reflection --> - <span id="reflection"></span> + <span class="reflection"></span> </div> <select id="themeswitcher"> <option value="black">Schwarz</option> diff --git a/uhr.css b/uhr.css index 827b804..c62fe68 100644 --- a/uhr.css +++ b/uhr.css @@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. body { font-family: 'Uhrenfont', sans-serif; } -#uhr { +.uhr { padding: 3em; position: relative; margin: 0; @@ -27,7 +27,7 @@ body { height: 40em; transition: background-color 0.5s; } -#reflection { +.uhr .reflection { position: absolute; top: 0; bottom: 0; @@ -39,7 +39,7 @@ body { } #themeswitcher { } -#renderarea { +.uhr .renderarea { display: block; position: absolute; top: 5em; @@ -63,19 +63,19 @@ body { border-color: #eee; box-shadow: 0 0 0.2em #eee; } -#dot1 { +.dot1 { top: 1.5em; left: 1.5em; } -#dot2 { +.dot2 { top: 1.5em; right: 1.5em; } -#dot3 { +.dot3 { bottom: 1.5em; right: 1.5em; } -#dot4 { +.dot4 { bottom: 1.5em; left: 1.5em; } From fe243507ec7a65f5be7b3658c3f371c2cd557e70 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 15:40:56 +0100 Subject: [PATCH 02/16] mehr classes statt ids --- index.html | 4 ++-- uhr.css | 2 +- uhr.js | 13 +++++++------ 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index c288927..a804417 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. <span class="item dot dot2"></span> <span class="item dot dot3"></span> <span class="item dot dot4"></span> - <div id="renderarea" class="renderarea"></div> + <div class="letterarea"></div> <!-- glossy reflection --> <span class="reflection"></span> </div> @@ -54,7 +54,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. </div> <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <script type="text/javascript"> - var uhr = new Uhr($('#renderarea'), $('#theme')); + var uhr = new Uhr($('#uhr'), $('#theme')); $(document).ready(function() { $('#themeswitcher').on('change', function() { uhr.setTheme(this.value); diff --git a/uhr.css b/uhr.css index c62fe68..67a8e27 100644 --- a/uhr.css +++ b/uhr.css @@ -39,7 +39,7 @@ body { } #themeswitcher { } -.uhr .renderarea { +.uhr .letterarea { display: block; position: absolute; top: 5em; diff --git a/uhr.js b/uhr.js index 2a2decc..dcb9feb 100644 --- a/uhr.js +++ b/uhr.js @@ -14,11 +14,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ /** * Die Uhr. - * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll. + * @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(renderarea, themeElement) { - this.renderarea = renderarea; +function Uhr(clockarea, themeElement) { + this.clockarea = clockarea; + this.letterarea = clockarea.find('.letterarea'); this.themeElement = themeElement; this.timer = null; this.currentTheme = null; @@ -64,7 +65,7 @@ Uhr.prototype.setLayout = function(locale) { var newLayout = this.layouts[locale]; if (newLayout !== undefined && newLayout != this.currentLayout) { this.currentLayout = newLayout; - var renderer = new UhrRenderer(this.currentLayout, this.renderarea); + var renderer = new UhrRenderer(this.currentLayout, this.letterarea); renderer.render(this); $.cookie('layout', locale); } @@ -103,10 +104,10 @@ Uhr.prototype.update = function() { } } Uhr.prototype.clear = function() { - this.renderarea.parent().find('.item').removeClass('active'); + this.clockarea.find('.item').removeClass('active'); } Uhr.prototype.highlight = function(itemClass) { - this.renderarea.parent().find('.item.' + itemClass).addClass('active'); + this.clockarea.find('.item.' + itemClass).addClass('active'); } Uhr.prototype.getHour = function(date) { if (typeof this.currentLayout.getHour === 'function') { From 300477cc3f437c1acdc466a305c1f2dfd8d93f01 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 16:20:47 +0100 Subject: [PATCH 03/16] uhr erzeugt html-elemente selber --- index.html | 10 +--------- uhr.js | 7 +++++++ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a804417..3f67831 100644 --- a/index.html +++ b/index.html @@ -24,15 +24,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> - <div id="uhr" class="uhr"> - <span class="item dot dot1"></span> - <span class="item dot dot2"></span> - <span class="item dot dot3"></span> - <span class="item dot dot4"></span> - <div class="letterarea"></div> - <!-- glossy reflection --> - <span class="reflection"></span> - </div> + <div id="uhr" class="uhr"></div> <select id="themeswitcher"> <option value="black">Schwarz</option> <option value="red">Rot</option> diff --git a/uhr.js b/uhr.js index dcb9feb..ea8da43 100644 --- a/uhr.js +++ b/uhr.js @@ -19,6 +19,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ function Uhr(clockarea, themeElement) { this.clockarea = clockarea; + this.clockarea.empty(); + this.clockarea.append('<span class="item dot dot1"></span>'); + this.clockarea.append('<span class="item dot dot2"></span>'); + this.clockarea.append('<span class="item dot dot3"></span>'); + this.clockarea.append('<span class="item dot dot4"></span>'); + this.clockarea.append('<div class="letterarea"></div>'); + this.clockarea.append('<div class="reflection"></div>'); this.letterarea = clockarea.find('.letterarea'); this.themeElement = themeElement; this.timer = null; From 8bce99c33a84bd36447d2f081d76c876863f904b Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 16:34:51 +0100 Subject: [PATCH 04/16] css korrigiert, class statt id --- uhr-black.css | 2 +- uhr-blue.css | 2 +- uhr-green.css | 2 +- uhr-red.css | 2 +- uhr-white.css | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/uhr-black.css b/uhr-black.css index 5fd1731..be167b5 100644 --- a/uhr-black.css +++ b/uhr-black.css @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */ @import url("uhr-idle-light.css"); -#uhr { +.uhr { background-color: #111; } .onoffswitch-inner:before { diff --git a/uhr-blue.css b/uhr-blue.css index dadc71a..429bcf4 100644 --- a/uhr-blue.css +++ b/uhr-blue.css @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */ @import url("uhr-idle-light.css"); -#uhr { +.uhr { background-color: #00a; } .onoffswitch-inner:before { diff --git a/uhr-green.css b/uhr-green.css index 3243bdb..a5a82a5 100644 --- a/uhr-green.css +++ b/uhr-green.css @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */ @import url("uhr-idle-dark.css"); -#uhr { +.uhr { background-color: #0c0; } .onoffswitch-inner:before { diff --git a/uhr-red.css b/uhr-red.css index 63a01b7..b3474f2 100644 --- a/uhr-red.css +++ b/uhr-red.css @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */ @import url("uhr-idle-light.css"); -#uhr { +.uhr { background-color: #700; } .onoffswitch-inner:before { diff --git a/uhr-white.css b/uhr-white.css index 645d280..23a62b8 100644 --- a/uhr-white.css +++ b/uhr-white.css @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */ @import url("uhr-idle-dark.css"); -#uhr { +.uhr { background-color: #ccc; } .dot.active{ From 1c06b7248a242557579b48e2cf6fcb545cd4bb44 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 17:08:22 +0100 Subject: [PATCH 05/16] leerzeile entfernt --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 3f67831..528826f 100644 --- a/index.html +++ b/index.html @@ -86,4 +86,3 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. <script type="text/javascript" src="uhr-en.js"></script> </body> </html> - From 2fa23c2f07359f9c8e18f27402c6230f951b85bc Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 17:36:05 +0100 Subject: [PATCH 06/16] layouts global registrieren, nicht pro uhr --- index.html | 6 +++--- uhr-de.js | 2 +- uhr-de_CH.js | 2 +- uhr-en.js | 2 +- uhr.js | 21 +++++++++++---------- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 528826f..a8145cf 100644 --- a/index.html +++ b/index.html @@ -59,13 +59,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. var theme = $.cookie('theme'); var layout = $.cookie('layout'); var status = $.cookie('status'); - if (theme == undefined) { + if (theme === undefined || theme == 'undefined') { theme = 'black'; } - if(layout == undefined) { + if(layout === undefined || layout == 'undefined') { layout = 'de_CH'; } - if (status == undefined) { + if (status === undefined || status == 'undefined') { status = 'on'; } $('#themeswitcher').val(theme); diff --git a/uhr-de.js b/uhr-de.js index aaa6a3e..4a009ed 100644 --- a/uhr-de.js +++ b/uhr-de.js @@ -27,4 +27,4 @@ var layout = { [h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')] ] }; -uhr.register('de', layout); +Uhr.register('de', layout); diff --git a/uhr-de_CH.js b/uhr-de_CH.js index c9eba2d..f10605b 100644 --- a/uhr-de_CH.js +++ b/uhr-de_CH.js @@ -27,4 +27,4 @@ var layout = { [h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')] ] }; -uhr.register('de_CH', layout); +Uhr.register('de_CH', layout); diff --git a/uhr-en.js b/uhr-en.js index fdea16f..59dfc15 100644 --- a/uhr-en.js +++ b/uhr-en.js @@ -34,4 +34,4 @@ var layout = { return hour; } }; -uhr.register('en', layout); +Uhr.register('en', layout); diff --git a/uhr.js b/uhr.js index ea8da43..c9dec18 100644 --- a/uhr.js +++ b/uhr.js @@ -31,14 +31,13 @@ function Uhr(clockarea, themeElement) { this.timer = null; this.currentTheme = null; this.currentLayout = null; - this.layouts = new Array(); this.currentMinute = -1; - this.register('undefined', { - language: 'Undefined', - values: [] - }); + this.setLayout('undefined'); +} +Uhr.layouts = new Array(); +Uhr.register = function (locale, layout) { + Uhr.layouts[locale] = layout; } - Uhr.prototype.toggle = function() { if (this.isOn()) { this.stop(); @@ -65,11 +64,8 @@ Uhr.prototype.stop = function() { Uhr.prototype.isOn = function() { return this.timer != null; } -Uhr.prototype.register = function(key, layout) { - this.layouts[key] = layout; -} Uhr.prototype.setLayout = function(locale) { - var newLayout = this.layouts[locale]; + var newLayout = Uhr.layouts[locale]; if (newLayout !== undefined && newLayout != this.currentLayout) { this.currentLayout = newLayout; var renderer = new UhrRenderer(this.currentLayout, this.letterarea); @@ -150,6 +146,11 @@ Uhr.prototype.normalizeHour = function(hour) { return hour; } +Uhr.register('undefined', { + language: 'Undefined', + values: [] +}); + /** * Hilfsklasse zum Rendern der Uhr. * @param layout Layout-Objekt, das gerendert werden soll. From 714e86a53c978d4320be6483485ad9cba435f245 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 17:45:28 +0100 Subject: [PATCH 07/16] set cookie path and date --- uhr.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/uhr.js b/uhr.js index c9dec18..6a9bf8d 100644 --- a/uhr.js +++ b/uhr.js @@ -50,7 +50,7 @@ Uhr.prototype.start = function() { var uhr = this; this.timer = window.setInterval(function() {uhr.update();}, 1000); this.update(); - $.cookie('status', 'on'); + $.cookie('status', 'on', {expires: 365, path: '/'}); } } Uhr.prototype.stop = function() { @@ -58,7 +58,7 @@ Uhr.prototype.stop = function() { window.clearInterval(this.timer); this.timer = null; this.update(); - $.cookie('status', 'off'); + $.cookie('status', 'off', {expires: 365, path: '/'}); } } Uhr.prototype.isOn = function() { @@ -70,14 +70,14 @@ Uhr.prototype.setLayout = function(locale) { this.currentLayout = newLayout; var renderer = new UhrRenderer(this.currentLayout, this.letterarea); renderer.render(this); - $.cookie('layout', locale); + $.cookie('layout', 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); + $.cookie('theme', theme, {expires: 365, path: '/'}); } } Uhr.prototype.update = function() { From 562855e8f1e304fb8a7b3ab5390de2bd0fb59cbd Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 17:48:41 +0100 Subject: [PATCH 08/16] set layout korrekt --- uhr.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/uhr.js b/uhr.js index 6a9bf8d..cf93d15 100644 --- a/uhr.js +++ b/uhr.js @@ -30,9 +30,8 @@ function Uhr(clockarea, themeElement) { this.themeElement = themeElement; this.timer = null; this.currentTheme = null; - this.currentLayout = null; + this.currentLayout = Uhr.layouts['undefined']; this.currentMinute = -1; - this.setLayout('undefined'); } Uhr.layouts = new Array(); Uhr.register = function (locale, layout) { From a28dcdf8361bf4f57902029a422f192555a8711f Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 18:13:37 +0100 Subject: [PATCH 09/16] toggler erzeugen statt hardcoded --- index.html | 7 ------- uhr.js | 35 +++++++++++++++++++++++++++-------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index a8145cf..9769de9 100644 --- a/index.html +++ b/index.html @@ -37,13 +37,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. <option value="de">Hochdeutsch</option> <option value="en">English</option> </select> - <div class="onoffswitch"> - <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="uhr.toggle()" /> - <label class="onoffswitch-label" for="onoffswitch"> - <div class="onoffswitch-inner"></div> - <div class="onoffswitch-switch"></div> - </label> - </div> <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <script type="text/javascript"> var uhr = new Uhr($('#uhr'), $('#theme')); diff --git a/uhr.js b/uhr.js index cf93d15..58deffe 100644 --- a/uhr.js +++ b/uhr.js @@ -18,14 +18,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. */ function Uhr(clockarea, themeElement) { - this.clockarea = clockarea; - this.clockarea.empty(); - this.clockarea.append('<span class="item dot dot1"></span>'); - this.clockarea.append('<span class="item dot dot2"></span>'); - this.clockarea.append('<span class="item dot dot3"></span>'); - this.clockarea.append('<span class="item dot dot4"></span>'); - this.clockarea.append('<div class="letterarea"></div>'); - this.clockarea.append('<div class="reflection"></div>'); + this.clockarea = this.initClockarea(clockarea); + this.toggleSwitch = this.initToggleSwitch(); this.letterarea = clockarea.find('.letterarea'); this.themeElement = themeElement; this.timer = null; @@ -144,6 +138,31 @@ Uhr.prototype.normalizeHour = function(hour) { } return hour; } +Uhr.prototype.initClockarea = function(clockarea) { + clockarea.empty(); + clockarea.append('<span class="item dot dot1"></span>'); + clockarea.append('<span class="item dot dot2"></span>'); + clockarea.append('<span class="item dot dot3"></span>'); + clockarea.append('<span class="item dot dot4"></span>'); + clockarea.append('<div class="letterarea"></div>'); + clockarea.append('<div class="reflection"></div>'); + return clockarea; +} +Uhr.prototype.initToggleSwitch = function() { + var toggleSwitch = $('<div class="onoffswitch"></div>'); + var input = $('<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" />'); + var uhr = this; + input.on('click', function() { + uhr.toggle(); + }); + toggleSwitch.append(input); + toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch">' + + '<div class="onoffswitch-inner"></div>' + + '<div class="onoffswitch-switch"></div>' + + '</label>'); + this.clockarea.after(toggleSwitch); + return toggleSwitch; +} Uhr.register('undefined', { language: 'Undefined', From 66283e342456b169aa004522cb5b0c7c1139f951 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 18:16:42 +0100 Subject: [PATCH 10/16] jede uhr hat eine eigene id --- uhr.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/uhr.js b/uhr.js index 58deffe..23203a8 100644 --- a/uhr.js +++ b/uhr.js @@ -18,6 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. */ function Uhr(clockarea, themeElement) { + this.id = Uhr.id++; this.clockarea = this.initClockarea(clockarea); this.toggleSwitch = this.initToggleSwitch(); this.letterarea = clockarea.find('.letterarea'); @@ -27,6 +28,7 @@ function Uhr(clockarea, themeElement) { this.currentLayout = Uhr.layouts['undefined']; this.currentMinute = -1; } +Uhr.id = 0; Uhr.layouts = new Array(); Uhr.register = function (locale, layout) { Uhr.layouts[locale] = layout; @@ -150,13 +152,13 @@ Uhr.prototype.initClockarea = function(clockarea) { } Uhr.prototype.initToggleSwitch = function() { var toggleSwitch = $('<div class="onoffswitch"></div>'); - var input = $('<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" />'); + var input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />'); var uhr = this; input.on('click', function() { uhr.toggle(); }); toggleSwitch.append(input); - toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch">' + toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">' + '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' + '</label>'); From bb60117dcf0096d88398e3b7500b6e796342b6ec Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Wed, 27 Nov 2013 18:37:38 +0100 Subject: [PATCH 11/16] erster schritt, layout-dropdown dynamisch zu laden --- index.html | 6 +++--- uhr.js | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9769de9..b4cb091 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. <option value="en">English</option> </select> <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. + <script type="text/javascript" src="uhr-de_CH.js"></script> + <script type="text/javascript" src="uhr-de.js"></script> + <script type="text/javascript" src="uhr-en.js"></script> <script type="text/javascript"> var uhr = new Uhr($('#uhr'), $('#theme')); $(document).ready(function() { @@ -74,8 +77,5 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. } }); </script> - <script type="text/javascript" src="uhr-de_CH.js"></script> - <script type="text/javascript" src="uhr-de.js"></script> - <script type="text/javascript" src="uhr-en.js"></script> </body> </html> 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 = $('<select id="layoutswitcher' + this.id + '"></select>') + 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 <manuel@fritteli.ch> 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 <http://www.gnu.org/licenses/>. <option value="green">Grün</option> <option value="white">Weiss</option> </select> - <select id="layoutswitcher"> - <option value="de_CH">Bärndütsch</option> - <option value="de">Hochdeutsch</option> - <option value="en">English</option> - </select> <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <script type="text/javascript" src="uhr-de_CH.js"></script> <script type="text/javascript" src="uhr-de.js"></script> @@ -47,34 +42,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. $('#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); - } }); </script> </body> 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 <http://www.gnu.org/licenses/>. */ 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('<span class="item dot dot1"></span>'); @@ -164,24 +167,43 @@ Uhr.prototype.initToggleSwitch = function() { + '<div class="onoffswitch-switch"></div>' + '</label>'); 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 = $('<select id="layoutswitcher' + this.id + '"></select>') + 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 = $('<option value="' + code + '">' + layout.language + '</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 <manuel@fritteli.ch> 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 <manuel@fritteli.ch> 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 <http://www.gnu.org/licenses/>. <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="uhr.js"></script> <link rel="stylesheet" type="text/css" href="uhr.css" /> - <link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" /> + <link rel="stylesheet" type="text/css" href="uhr-black.css" /> + <link rel="stylesheet" type="text/css" href="uhr-blue.css" /> + <link rel="stylesheet" type="text/css" href="uhr-green.css" /> + <link rel="stylesheet" type="text/css" href="uhr-red.css" /> + <link rel="stylesheet" type="text/css" href="uhr-white.css" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="uhr" class="uhr"></div> - <select id="themeswitcher"> - <option value="black">Schwarz</option> - <option value="red">Rot</option> - <option value="blue">Blau</option> - <option value="green">Grün</option> - <option value="white">Weiss</option> - </select> <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <script type="text/javascript" src="uhr-de_CH.js"></script> <script type="text/javascript" src="uhr-de.js"></script> <script type="text/javascript" src="uhr-en.js"></script> <script type="text/javascript"> - var uhr = new Uhr($('#uhr'), $('#theme')); - $(document).ready(function() { - $('#themeswitcher').on('change', function() { - uhr.setTheme(this.value); - }); - var theme = $.cookie('theme'); - if (theme === undefined || theme == 'undefined') { - theme = 'black'; - } - $('#themeswitcher').val(theme); - uhr.setTheme(theme); - }); + var uhr = new Uhr($('#uhr')); </script> </body> </html> 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 <http://www.gnu.org/licenses/>. */ @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 <http://www.gnu.org/licenses/>. */ @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 <http://www.gnu.org/licenses/>. */ @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 <http://www.gnu.org/licenses/>. */ @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 <http://www.gnu.org/licenses/>. */ @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 <http://www.gnu.org/licenses/>. * @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('<span class="item dot dot1"></span>'); @@ -202,6 +208,20 @@ Uhr.prototype.initLayoutSwitch = function() { } 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() { + 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 <manuel@fritteli.ch> 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('<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', { From 32305d43a145da325b180c0a13ed16f920ec4fd7 Mon Sep 17 00:00:00 2001 From: Manuel Friedli <manuel@fritteli.ch> Date: Thu, 28 Nov 2013 10:18:48 +0100 Subject: [PATCH 16/16] v3.0: die uhr ist nun voll modular, einfach ein <div> 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