From 20c8c7d68172ca6d26dcd298dc1f5386e1e9930a Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:19:08 +0100 Subject: [PATCH 01/19] moved README to README.md, with some markdown --- README => README.md | 1 + 1 file changed, 1 insertion(+) rename README => README.md (99%) diff --git a/README b/README.md similarity index 99% rename from README rename to README.md index 909b843..48f1c41 100644 --- a/README +++ b/README.md @@ -1,4 +1,5 @@ Bärneruhr +========= Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. From bb6a3cdc8eb45ac8fdacc05a680c9dcf23077579 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:22:43 +0100 Subject: [PATCH 02/19] markdown fixes --- README.md | 53 ++++++++++++++++++++++++----------------------------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 48f1c41..c8742b1 100644 --- a/README.md +++ b/README.md @@ -4,55 +4,50 @@ Bärneruhr Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. 1. Benötigte Dateien einbinden - -Binde folgende Javascript-Dateien im HTML-Dokument ein: -- jquery-2.0.3.min.js (Falls nicht bereits vorhanden) -- jquery.cookie.js (Falls nicht bereits vorhanden) -- uhr.js - -Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: -- uhr-de_CH.js -- uhr-de.js -- uhr-en.js - -Binde folgende CSS-Dateien im HTML-Dokument ein: -- uhr.css -- uhr-black.css -- uhr-blue.css -- uhr-green.css -- uhr-red.css -- uhr-white.css - -Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. - +* Binde folgende Javascript-Dateien im HTML-Dokument ein: + * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) + * jquery.cookie.js (Falls nicht bereits vorhanden) + * uhr.js +* Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: + * uhr-de_CH.js + * uhr-de.js + * uhr-en.js +* Binde folgende CSS-Dateien im HTML-Dokument ein: + * uhr.css + * uhr-black.css + * uhr-blue.css + * uhr-green.css + * uhr-red.css + * uhr-white.css +* Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. 2. Uhr-Element im HTML-Dokument einfügen Erstelle ein leeres
mit einer ID: -
+`
` 3. Uhr per Javascript konfigurieren Initialisiere die Uhr mit einer einzigen Zeile Javascript: -new Uhr(jQuery('#meineuhr')); +`new Uhr(jQuery('#meineuhr'));` Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: -- Breite ist 100% des Eltenelements -- Farbe ist Schwarz -- Sprache ist Bärndütsch -- Die Uhr ist eingeschaltet +* Breite ist 100% des Eltenelements +* Farbe ist Schwarz +* Sprache ist Bärndütsch +* Die Uhr ist eingeschaltet Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt 4. Weitere Optionen Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: -new Uhr(jQuery('#uhrcontainer'), { +`new Uhr(jQuery('#uhrcontainer'), { status: 'on', // 'on' oder 'off' theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien width: '20em' // eine CSS-Grössenangabe -}); +});` Viel Spass! From 77fd7aa805dff8a0e63cc0d100332eae73b4749c Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:25:35 +0100 Subject: [PATCH 03/19] more fixes --- README.md | 78 +++++++++++++++++++++++++------------------------------ 1 file changed, 35 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index c8742b1..ae7f731 100644 --- a/README.md +++ b/README.md @@ -4,52 +4,44 @@ Bärneruhr Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. 1. Benötigte Dateien einbinden -* Binde folgende Javascript-Dateien im HTML-Dokument ein: - * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) - * jquery.cookie.js (Falls nicht bereits vorhanden) - * uhr.js -* Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: - * uhr-de_CH.js - * uhr-de.js - * uhr-en.js -* Binde folgende CSS-Dateien im HTML-Dokument ein: - * uhr.css - * uhr-black.css - * uhr-blue.css - * uhr-green.css - * uhr-red.css - * uhr-white.css -* Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. + * Binde folgende Javascript-Dateien im HTML-Dokument ein: + * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) + * jquery.cookie.js (Falls nicht bereits vorhanden) + * uhr.js + * Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: + * uhr-de_CH.js + * uhr-de.js + * uhr-en.js + * Binde folgende CSS-Dateien im HTML-Dokument ein: + * uhr.css + * uhr-black.css + * uhr-blue.css + * uhr-green.css + * uhr-red.css + * uhr-white.css + * Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. 2. Uhr-Element im HTML-Dokument einfügen - -Erstelle ein leeres
mit einer ID: -`
` - + Erstelle ein leeres
mit einer ID: + `
` 3. Uhr per Javascript konfigurieren - -Initialisiere die Uhr mit einer einzigen Zeile Javascript: -`new Uhr(jQuery('#meineuhr'));` - -Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. - -Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: -* Breite ist 100% des Eltenelements -* Farbe ist Schwarz -* Sprache ist Bärndütsch -* Die Uhr ist eingeschaltet - -Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt - + Initialisiere die Uhr mit einer einzigen Zeile Javascript: + `new Uhr(jQuery('#meineuhr'));` + Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. + Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: + * Breite ist 100% des Eltenelements + * Farbe ist Schwarz + * Sprache ist Bärndütsch + * Die Uhr ist eingeschaltet + Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. 4. Weitere Optionen -Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: -`new Uhr(jQuery('#uhrcontainer'), { - status: 'on', // 'on' oder 'off' - theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' - layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien - width: '20em' // eine CSS-Grössenangabe -});` - -Viel Spass! + Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: + `new Uhr(jQuery('#uhrcontainer'), {` + ` status: 'on', // 'on' oder 'off'` + ` theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'` + ` layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien` + ` width: '20em' // eine CSS-Grössenangabe` + `});` + Viel Spass! A. Lizenzbestimmungen From 76cfd4de8d8d833a91eb83e923ba94b2fbd7adda Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:27:57 +0100 Subject: [PATCH 04/19] more fixes --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ae7f731..a390eb0 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,11 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. 4. Weitere Optionen Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: - `new Uhr(jQuery('#uhrcontainer'), {` - ` status: 'on', // 'on' oder 'off'` - ` theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'` - ` layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien` - ` width: '20em' // eine CSS-Grössenangabe` + `new Uhr(jQuery('#uhrcontainer'), {` + ` status: 'on', // 'on' oder 'off'` + ` theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'` + ` layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien` + ` width: '20em' // eine CSS-Grössenangabe` `});` Viel Spass! From 6bed150c89d943f0e502eb5d9eb018915098ddf8 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:28:19 +0100 Subject: [PATCH 05/19] more fixes --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a390eb0..ea173ae 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. * Die Uhr ist eingeschaltet Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. 4. Weitere Optionen - Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: + Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: `new Uhr(jQuery('#uhrcontainer'), {` ` status: 'on', // 'on' oder 'off'` ` theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'` From db8ca7e39424a01011dcec8948ee607897cfd24a Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:28:51 +0100 Subject: [PATCH 06/19] more fixes --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ea173ae..f274ead 100644 --- a/README.md +++ b/README.md @@ -21,11 +21,11 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. * uhr-white.css * Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. 2. Uhr-Element im HTML-Dokument einfügen - Erstelle ein leeres
mit einer ID: + Erstelle ein leeres
mit einer ID: `
` 3. Uhr per Javascript konfigurieren - Initialisiere die Uhr mit einer einzigen Zeile Javascript: - `new Uhr(jQuery('#meineuhr'));` + Initialisiere die Uhr mit einer einzigen Zeile Javascript: + `new Uhr(jQuery('#meineuhr'));` Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: * Breite ist 100% des Eltenelements @@ -40,7 +40,7 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. ` theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'` ` layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien` ` width: '20em' // eine CSS-Grössenangabe` - `});` + `});` Viel Spass! A. Lizenzbestimmungen From 34369f3f892d1e2fc9805be8ab252751113bf35a Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Thu, 9 Jan 2014 22:58:01 +0100 Subject: [PATCH 07/19] final markdown fixes (thanks to http://daringfireball.net/projects/markdown/dingus) --- README.md | 98 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 55 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index f274ead..dd9b573 100644 --- a/README.md +++ b/README.md @@ -4,56 +4,68 @@ Bärneruhr Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. 1. Benötigte Dateien einbinden - * Binde folgende Javascript-Dateien im HTML-Dokument ein: - * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) - * jquery.cookie.js (Falls nicht bereits vorhanden) - * uhr.js - * Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: - * uhr-de_CH.js - * uhr-de.js - * uhr-en.js - * Binde folgende CSS-Dateien im HTML-Dokument ein: - * uhr.css - * uhr-black.css - * uhr-blue.css - * uhr-green.css - * uhr-red.css - * uhr-white.css - * Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. +------------------------------ +* Binde folgende Javascript-Dateien im HTML-Dokument ein: + * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) + * jquery.cookie.js (Falls nicht bereits vorhanden) + * uhr.js +* Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: + * uhr-de_CH.js + * uhr-de.js + * uhr-en.js +* Binde folgende CSS-Dateien im HTML-Dokument ein: + * uhr.css + * uhr-black.css + * uhr-blue.css + * uhr-green.css + * uhr-red.css + * uhr-white.css +* Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. + 2. Uhr-Element im HTML-Dokument einfügen - Erstelle ein leeres
mit einer ID: - `
` +---------------------------------------- +Erstelle ein leeres `
` mit einer ID: + +
3. Uhr per Javascript konfigurieren - Initialisiere die Uhr mit einer einzigen Zeile Javascript: - `new Uhr(jQuery('#meineuhr'));` - Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. - Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: - * Breite ist 100% des Eltenelements - * Farbe ist Schwarz - * Sprache ist Bärndütsch - * Die Uhr ist eingeschaltet - Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. +----------------------------------- +Initialisiere die Uhr mit einer einzigen Zeile Javascript: + + new Uhr(jQuery('#meineuhr')); + +Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: + +* Breite ist 100% des Eltenelements +* Farbe ist Schwarz +* Sprache ist Bärndütsch +* Die Uhr ist eingeschaltet + +Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. + 4. Weitere Optionen - Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: - `new Uhr(jQuery('#uhrcontainer'), {` - ` status: 'on', // 'on' oder 'off'` - ` theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'` - ` layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien` - ` width: '20em' // eine CSS-Grössenangabe` - `});` - Viel Spass! +------------------- +Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: + + new Uhr(jQuery('#uhrcontainer'), { + status: 'on', // 'on' oder 'off' + theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' + layout: 'en', // 'de_DE', 'de' oder 'en' (je nach eingebundenen Sprachdateien) + width: '20em' // eine CSS-Grössenangabe + }); + +Viel Spass! A. Lizenzbestimmungen - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU General Public License as published by -the Free Software Foundation, either version 3 of the License, or +===================== +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or (at your option) any later version. -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. -You should have received a copy of the GNU General Public License +You should have received a copy of the GNU General Public License along with this program. If not, see . From 9db64730854597a0066b9eefa6f8778b705786d1 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 03:26:53 +0100 Subject: [PATCH 08/19] tried to convert it, now it's a mess --- index.html | 4 + uhr-de.js | 2 +- uhr-de_CH.js | 2 +- uhr-en.js | 2 +- uhr.js | 216 ++++++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 222 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 54ef49b..632a595 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ along with this program. If not, see .
+

Created by fritteli, inspired by QLOCKTWO. @@ -37,12 +38,15 @@ along with this program. If not, see . var height = jQuery(window).height(); var width = jQuery(window).width(); var size = height < width ? height : width; + /* new Uhr(jQuery('#uhr'), { layout: 'de_CH', theme: 'black', status: 'on', width: size + 'px' }); + */ + $('#test').uhr({width:'10em'}); diff --git a/uhr-de.js b/uhr-de.js index 4a009ed..be7c72e 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 f10605b..36e333b 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 59dfc15..5f9d026 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 7b2408e..67529c4 100644 --- a/uhr.js +++ b/uhr.js @@ -12,6 +12,219 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ +(function($) { + "use strict"; + + if (window.Uhr !== undefined) { + return; + } + + window.Uhr = { + id: 0, + start: function(e) { + if (!Uhr.isOn(e)) { + e.data('timer', window.setInterval(function() {Uhr.update(e);}, 1000)); + Uhr.update(e); + jQuery.cookie('status' + e.data('id'), 'on', {expires: 365, path: '/'}); + } + }, + stop: function(e) { + if (Uhr.isOn(e)) { + window.clearInterval(e.data('timer')); + e.data('timer', null); + Uhr.update(e); + jQuery.cookie('status' + e.data('id'), 'off', {expires: 365, path: '/'}); + } + }, + update: function(e) { + if (Uhr.isOn(e)) { + var now = new Date(); + if (now.getMinutes() == e.data('currentMinute')) { + return; + } + e.data('currentMinute', now.getMinutes()); + //FIXME + var dotMinute = Uhr.getDotMinute(e, now); + var hour = Uhr.getHour(e, now); + var coarseMinute = this.getCoarseMinute(e, now); + Uhr.clear(e); + Uhr.highlight(e, 'on'); + for (var i = 1; i <= dotMinute; i++) { + Uhr.highlight(e, 'dot' + i); + } + Uhr.highlight(e, 'minute' + coarseMinute); + hour = this.normalizeHour(hour); + Uhr.highlight(e, 'hour' + hour); + if (coarseMinute == 0) { + Uhr.highlight(e, 'sharphour'); + } + } else { + Uhr.clear(e); + e.data('currentMinute', -1); + } + }, + toggle: function(e) { + if (Uhr.isOn(e)) { + Uhr.stop(e); + } else { + Uhr.start(e); + } + }, + clear: function(e) { + e.find('.item').removeClass('active'); + }, + setLanguage: function(e, language) { + }, + setTheme: function(e, theme) { + var currentTheme = e.data('currentTheme'); + if (theme != currentTheme) { + e.removeClass(currentTheme).addClass(theme); + e.data('toggleSwitch').removeClass(currentTheme).addClass(theme); + e.data('currentTheme', theme); + jQuery.cookie('theme' + e.data('id'), theme, {expires: 365, path: '/'}); + } + }, + isOn: function(e) { + return e.data('timer') != null; + }, + highlight: function(e, itemClass) { + e.find('.item.' + itemClass).addClass('active'); + }, + getHour: function(e, date) { + if (typeof e.data('currentLayout').getHour === 'function') { + return e.data('currentLayout').getHour(date); + } + var hour = date.getHours(); + if (date.getMinutes() >= 25) { + return hour + 1; + } + return hour; + }, + getCoarseMinute: function(e, date) { + if (typeof e.data('currentLayout').getCoarseMinute === 'function') { + return e.data('currentLayout').getCoarseMinute(date); + } + var minutes = date.getMinutes(); + return minutes - Uhr.getDotMinute(e, date); + }, + getDotMinute: function(e, date) { + if (typeof e.data('currentLayout').getDotMinute === 'function') { + return e.data('currentLayout').getDotMinute(date); + } + var minutes = date.getMinutes(); + return minutes % 5; + }, + normalizeHour: function(hour) { + if (hour > 12) { + hour %= 12; + } + if (hour == 0) { + return 12; + } + return hour; + } + } + $.fn.uhr = function(options) { + var settings = $.extend({ + width: '100%', + force: false, + status: 'on', + language: 'de_CH', + theme: 'black' + }, options); + return this.each(function() { + var e = $(this); + var id = window.Uhr.id++; + e.data('id', id); + e.data('timer', null); + + e.addClass('uhr'); + e.empty(); + e.append(''); + e.append(''); + e.append(''); + e.append(''); + e.append('

'); + e.append('
'); + e.css('width', settings.width); + var realWidth = e.width() + e.width(realWidth); + e.height(realWidth); + e.css('font-size', (realWidth / 40) + 'px'); + + var toggleSwitch = jQuery('
'); + toggleSwitch.append(''); + toggleSwitch.append(''); + e.after(toggleSwitch); + e.data('toggleSwitch', toggleSwitch); + + var languageSwitch = jQuery('') + // FIXME handle layouts correctly + for (var code in Uhr.layouts) { + if (Uhr.layouts.hasOwnProperty(code)) { + var language = Uhr.layouts[code]; + var option = ''; + languageSwitch.append(option); + } + } + e.after(languageSwitch); + e.data('languageSwitch', languageSwitch); + + var themeSwitch = jQuery(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + e.after(themeSwitch); + e.data('themeSwitch', themeSwitch); + + + var input = jQuery('#onoffswitch' + id); + input.on('click', function() { + window.Uhr.toggle(e); + }); + + var status = jQuery.cookie('status' + id); + if (status == undefined || settings.force) { + status = settings.status; + } + if (status == 'on') { + window.Uhr.start(e); + input.prop('checked', true); + } else { + window.Uhr.stop(e); + input.prop('checked', false); + } + + e.data('languageSwitch').on('change', function() { + window.Uhr.setLanguage(e, this.value); + }); + var selectedLanguage = jQuery.cookie('language' + id); + if (selectedLanguage == undefined || settings.force) { + selectedLanguage = settings.language; + } + e.data('languageSwitch').val(selectedLanguage); + window.Uhr.setLanguage(e, selectedLanguage); + + e.data('themeSwitch').on('change', function() { + window.Uhr.setTheme(e, this.value); + }); + var selectedTheme = jQuery.cookie('theme' + id); + if (selectedTheme == undefined || settings.force) { + selectedTheme = settings.theme; + } + e.data('themeSwitch').val(selectedTheme); + window.Uhr.setTheme(e, selectedTheme); + + }); + }; +})(jQuery); +(function($){ +return this; /** * Die Uhr. * @param clockarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll. @@ -285,6 +498,8 @@ UhrRenderer.prototype.render = function(uhr) { }); } +//} +})(jQuery); /** * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays. * @param value Der Buchstabe, der Dargestellt werden soll. @@ -340,4 +555,3 @@ function m(letter) { } return l(letter, style); } -//} From fc2c8ac38a860713be006d0cb2e2bf15f35cd0a5 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 12:18:11 +0100 Subject: [PATCH 09/19] =?UTF-8?q?es=20funzt!=20nun=20muss=20ich=20aufr?= =?UTF-8?q?=C3=A4umen=20und=20das=20ganze=20noch=20RICHTIG=20machen.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 5 ++++- uhr-de.js | 2 +- uhr-de_CH.js | 2 +- uhr-en.js | 2 +- uhr.js | 33 ++++++++++++++++++++++++++------- 5 files changed, 33 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 632a595..e77801c 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,9 @@ along with this program. If not, see .
+
+
+

Created by fritteli, inspired by QLOCKTWO. @@ -46,7 +49,7 @@ along with this program. If not, see . width: size + 'px' }); */ - $('#test').uhr({width:'10em'}); + $('div.u').uhr({width:'10em'}); diff --git a/uhr-de.js b/uhr-de.js index be7c72e..297484d 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.registerLanguage('de', layout); diff --git a/uhr-de_CH.js b/uhr-de_CH.js index 36e333b..4b6f5cb 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.registerLanguage('de_CH', layout); diff --git a/uhr-en.js b/uhr-en.js index 5f9d026..2727d28 100644 --- a/uhr-en.js +++ b/uhr-en.js @@ -34,4 +34,4 @@ var layout = { return hour; } }; -//Uhr.register('en', layout); +Uhr.registerLanguage('en', layout); diff --git a/uhr.js b/uhr.js index 67529c4..8337a01 100644 --- a/uhr.js +++ b/uhr.js @@ -43,7 +43,6 @@ along with this program. If not, see . return; } e.data('currentMinute', now.getMinutes()); - //FIXME var dotMinute = Uhr.getDotMinute(e, now); var hour = Uhr.getHour(e, now); var coarseMinute = this.getCoarseMinute(e, now); @@ -74,6 +73,13 @@ along with this program. If not, see . e.find('.item').removeClass('active'); }, setLanguage: function(e, language) { + var newLanguage = Uhr.layouts[language]; + if (newLanguage !== undefined && newLanguage != e.data('currentLanguage')) { + e.data('currentLanguage', newLanguage); + var renderer = new UhrRenderer(newLanguage, e.find('.letterarea')); + renderer.render(e); + jQuery.cookie('language' + e.data('id'), language, {expires: 365, path: '/'}); + } }, setTheme: function(e, theme) { var currentTheme = e.data('currentTheme'); @@ -91,9 +97,12 @@ along with this program. If not, see . e.find('.item.' + itemClass).addClass('active'); }, getHour: function(e, date) { + //FIXME + /* if (typeof e.data('currentLayout').getHour === 'function') { return e.data('currentLayout').getHour(date); } + */ var hour = date.getHours(); if (date.getMinutes() >= 25) { return hour + 1; @@ -101,16 +110,22 @@ along with this program. If not, see . return hour; }, getCoarseMinute: function(e, date) { + //FIXME + /* if (typeof e.data('currentLayout').getCoarseMinute === 'function') { return e.data('currentLayout').getCoarseMinute(date); } + */ var minutes = date.getMinutes(); return minutes - Uhr.getDotMinute(e, date); }, getDotMinute: function(e, date) { + //FIXME + /* if (typeof e.data('currentLayout').getDotMinute === 'function') { return e.data('currentLayout').getDotMinute(date); } + */ var minutes = date.getMinutes(); return minutes % 5; }, @@ -122,7 +137,11 @@ along with this program. If not, see . return 12; } return hour; - } + }, + registerLanguage: function(languageKey, layout) { + this.layouts[languageKey] = layout; + }, + layouts: new Array() } $.fn.uhr = function(options) { var settings = $.extend({ @@ -470,6 +489,9 @@ Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { this.setTheme(selectedTheme); } + +//} +})(jQuery); /** * Hilfsklasse zum Rendern der Uhr. * @param layout Layout-Objekt, das gerendert werden soll. @@ -492,14 +514,11 @@ UhrRenderer.prototype.render = function(uhr) { renderer.renderarea.append('
'); } } - uhr.currentMinute = -1; - uhr.update(); + uhr.data('currentMinute', -1); + Uhr.update(uhr); renderer.renderarea.fadeIn('fast'); }); } - -//} -})(jQuery); /** * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays. * @param value Der Buchstabe, der Dargestellt werden soll. From e995a2f224e17584593127ce55b6b879a92c2006 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 20:56:21 +0100 Subject: [PATCH 10/19] =?UTF-8?q?jQuery-Plugin=20ist=20nun=20mit=20jQuery?= =?UTF-8?q?=20UI=20widget=20builder=20(oder=20wie=20das=20heisst)=20implem?= =?UTF-8?q?entiert.=20viel=20sch=C3=B6ner!!!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + jquery-ui-1.10.3.custom.min.js | 6 + uhr-de.js | 2 +- uhr-de_CH.js | 2 +- uhr-en.js | 2 +- uhr.js | 563 ++++++++++----------------------- 6 files changed, 170 insertions(+), 406 deletions(-) create mode 100644 jquery-ui-1.10.3.custom.min.js diff --git a/index.html b/index.html index e77801c..430e8ef 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@ along with this program. If not, see . Die Zeit als Wort - in HTML, CSS und JS + diff --git a/jquery-ui-1.10.3.custom.min.js b/jquery-ui-1.10.3.custom.min.js new file mode 100644 index 0000000..c7f8a65 --- /dev/null +++ b/jquery-ui-1.10.3.custom.min.js @@ -0,0 +1,6 @@ +/*! jQuery UI - v1.10.3 - 2014-01-11 +* http://jqueryui.com +* Includes: jquery.ui.core.js, jquery.ui.widget.js +* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ + +(function(t,e){function n(e,n){var r,s,o,a=e.nodeName.toLowerCase();return"area"===a?(r=e.parentNode,s=r.name,e.href&&s&&"map"===r.nodeName.toLowerCase()?(o=t("img[usemap=#"+s+"]")[0],!!o&&i(o)):!1):(/input|select|textarea|button|object/.test(a)?!e.disabled:"a"===a?e.href||n:n)&&i(e)}function i(e){return t.expr.filters.visible(e)&&!t(e).parents().addBack().filter(function(){return"hidden"===t.css(this,"visibility")}).length}var r=0,s=/^ui-id-\d+$/;t.ui=t.ui||{},t.extend(t.ui,{version:"1.10.3",keyCode:{BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38}}),t.fn.extend({focus:function(e){return function(n,i){return"number"==typeof n?this.each(function(){var e=this;setTimeout(function(){t(e).focus(),i&&i.call(e)},n)}):e.apply(this,arguments)}}(t.fn.focus),scrollParent:function(){var e;return e=t.ui.ie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?this.parents().filter(function(){return/(relative|absolute|fixed)/.test(t.css(this,"position"))&&/(auto|scroll)/.test(t.css(this,"overflow")+t.css(this,"overflow-y")+t.css(this,"overflow-x"))}).eq(0):this.parents().filter(function(){return/(auto|scroll)/.test(t.css(this,"overflow")+t.css(this,"overflow-y")+t.css(this,"overflow-x"))}).eq(0),/fixed/.test(this.css("position"))||!e.length?t(document):e},zIndex:function(n){if(n!==e)return this.css("zIndex",n);if(this.length)for(var i,r,s=t(this[0]);s.length&&s[0]!==document;){if(i=s.css("position"),("absolute"===i||"relative"===i||"fixed"===i)&&(r=parseInt(s.css("zIndex"),10),!isNaN(r)&&0!==r))return r;s=s.parent()}return 0},uniqueId:function(){return this.each(function(){this.id||(this.id="ui-id-"+ ++r)})},removeUniqueId:function(){return this.each(function(){s.test(this.id)&&t(this).removeAttr("id")})}}),t.extend(t.expr[":"],{data:t.expr.createPseudo?t.expr.createPseudo(function(e){return function(n){return!!t.data(n,e)}}):function(e,n,i){return!!t.data(e,i[3])},focusable:function(e){return n(e,!isNaN(t.attr(e,"tabindex")))},tabbable:function(e){var i=t.attr(e,"tabindex"),r=isNaN(i);return(r||i>=0)&&n(e,!r)}}),t("").outerWidth(1).jquery||t.each(["Width","Height"],function(n,i){function r(e,n,i,r){return t.each(s,function(){n-=parseFloat(t.css(e,"padding"+this))||0,i&&(n-=parseFloat(t.css(e,"border"+this+"Width"))||0),r&&(n-=parseFloat(t.css(e,"margin"+this))||0)}),n}var s="Width"===i?["Left","Right"]:["Top","Bottom"],o=i.toLowerCase(),a={innerWidth:t.fn.innerWidth,innerHeight:t.fn.innerHeight,outerWidth:t.fn.outerWidth,outerHeight:t.fn.outerHeight};t.fn["inner"+i]=function(n){return n===e?a["inner"+i].call(this):this.each(function(){t(this).css(o,r(this,n)+"px")})},t.fn["outer"+i]=function(e,n){return"number"!=typeof e?a["outer"+i].call(this,e):this.each(function(){t(this).css(o,r(this,e,!0,n)+"px")})}}),t.fn.addBack||(t.fn.addBack=function(t){return this.add(null==t?this.prevObject:this.prevObject.filter(t))}),t("").data("a-b","a").removeData("a-b").data("a-b")&&(t.fn.removeData=function(e){return function(n){return arguments.length?e.call(this,t.camelCase(n)):e.call(this)}}(t.fn.removeData)),t.ui.ie=!!/msie [\w.]+/.exec(navigator.userAgent.toLowerCase()),t.support.selectstart="onselectstart"in document.createElement("div"),t.fn.extend({disableSelection:function(){return this.bind((t.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(t){t.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),t.extend(t.ui,{plugin:{add:function(e,n,i){var r,s=t.ui[e].prototype;for(r in i)s.plugins[r]=s.plugins[r]||[],s.plugins[r].push([n,i[r]])},call:function(t,e,n){var i,r=t.plugins[e];if(r&&t.element[0].parentNode&&11!==t.element[0].parentNode.nodeType)for(i=0;r.length>i;i++)t.options[r[i][0]]&&r[i][1].apply(t.element,n)}},hasScroll:function(e,n){if("hidden"===t(e).css("overflow"))return!1;var i=n&&"left"===n?"scrollLeft":"scrollTop",r=!1;return e[i]>0?!0:(e[i]=1,r=e[i]>0,e[i]=0,r)}})})(jQuery);(function(t,e){var i=0,s=Array.prototype.slice,o=t.cleanData;t.cleanData=function(e){for(var i,s=0;null!=(i=e[s]);s++)try{t(i).triggerHandler("remove")}catch(n){}o(e)},t.widget=function(i,s,o){var n,r,a,l,h={},c=i.split(".")[0];i=i.split(".")[1],n=c+"-"+i,o||(o=s,s=t.Widget),t.expr[":"][n.toLowerCase()]=function(e){return!!t.data(e,n)},t[c]=t[c]||{},r=t[c][i],a=t[c][i]=function(t,i){return this._createWidget?(arguments.length&&this._createWidget(t,i),e):new a(t,i)},t.extend(a,r,{version:o.version,_proto:t.extend({},o),_childConstructors:[]}),l=new s,l.options=t.widget.extend({},l.options),t.each(o,function(i,o){return t.isFunction(o)?(h[i]=function(){var t=function(){return s.prototype[i].apply(this,arguments)},e=function(t){return s.prototype[i].apply(this,t)};return function(){var i,s=this._super,n=this._superApply;return this._super=t,this._superApply=e,i=o.apply(this,arguments),this._super=s,this._superApply=n,i}}(),e):(h[i]=o,e)}),a.prototype=t.widget.extend(l,{widgetEventPrefix:r?l.widgetEventPrefix:i},h,{constructor:a,namespace:c,widgetName:i,widgetFullName:n}),r?(t.each(r._childConstructors,function(e,i){var s=i.prototype;t.widget(s.namespace+"."+s.widgetName,a,i._proto)}),delete r._childConstructors):s._childConstructors.push(a),t.widget.bridge(i,a)},t.widget.extend=function(i){for(var o,n,r=s.call(arguments,1),a=0,l=r.length;l>a;a++)for(o in r[a])n=r[a][o],r[a].hasOwnProperty(o)&&n!==e&&(i[o]=t.isPlainObject(n)?t.isPlainObject(i[o])?t.widget.extend({},i[o],n):t.widget.extend({},n):n);return i},t.widget.bridge=function(i,o){var n=o.prototype.widgetFullName||i;t.fn[i]=function(r){var a="string"==typeof r,l=s.call(arguments,1),h=this;return r=!a&&l.length?t.widget.extend.apply(null,[r].concat(l)):r,a?this.each(function(){var s,o=t.data(this,n);return o?t.isFunction(o[r])&&"_"!==r.charAt(0)?(s=o[r].apply(o,l),s!==o&&s!==e?(h=s&&s.jquery?h.pushStack(s.get()):s,!1):e):t.error("no such method '"+r+"' for "+i+" widget instance"):t.error("cannot call methods on "+i+" prior to initialization; "+"attempted to call method '"+r+"'")}):this.each(function(){var e=t.data(this,n);e?e.option(r||{})._init():t.data(this,n,new o(r,this))}),h}},t.Widget=function(){},t.Widget._childConstructors=[],t.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"

",options:{disabled:!1,create:null},_createWidget:function(e,s){s=t(s||this.defaultElement||this)[0],this.element=t(s),this.uuid=i++,this.eventNamespace="."+this.widgetName+this.uuid,this.options=t.widget.extend({},this.options,this._getCreateOptions(),e),this.bindings=t(),this.hoverable=t(),this.focusable=t(),s!==this&&(t.data(s,this.widgetFullName,this),this._on(!0,this.element,{remove:function(t){t.target===s&&this.destroy()}}),this.document=t(s.style?s.ownerDocument:s.document||s),this.window=t(this.document[0].defaultView||this.document[0].parentWindow)),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:t.noop,_getCreateEventData:t.noop,_create:t.noop,_init:t.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetName).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled "+"ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:t.noop,widget:function(){return this.element},option:function(i,s){var o,n,r,a=i;if(0===arguments.length)return t.widget.extend({},this.options);if("string"==typeof i)if(a={},o=i.split("."),i=o.shift(),o.length){for(n=a[i]=t.widget.extend({},this.options[i]),r=0;o.length-1>r;r++)n[o[r]]=n[o[r]]||{},n=n[o[r]];if(i=o.pop(),s===e)return n[i]===e?null:n[i];n[i]=s}else{if(s===e)return this.options[i]===e?null:this.options[i];a[i]=s}return this._setOptions(a),this},_setOptions:function(t){var e;for(e in t)this._setOption(e,t[e]);return this},_setOption:function(t,e){return this.options[t]=e,"disabled"===t&&(this.widget().toggleClass(this.widgetFullName+"-disabled ui-state-disabled",!!e).attr("aria-disabled",e),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")),this},enable:function(){return this._setOption("disabled",!1)},disable:function(){return this._setOption("disabled",!0)},_on:function(i,s,o){var n,r=this;"boolean"!=typeof i&&(o=s,s=i,i=!1),o?(s=n=t(s),this.bindings=this.bindings.add(s)):(o=s,s=this.element,n=this.widget()),t.each(o,function(o,a){function l(){return i||r.options.disabled!==!0&&!t(this).hasClass("ui-state-disabled")?("string"==typeof a?r[a]:a).apply(r,arguments):e}"string"!=typeof a&&(l.guid=a.guid=a.guid||l.guid||t.guid++);var h=o.match(/^(\w+)\s*(.*)$/),c=h[1]+r.eventNamespace,p=h[2];p?n.delegate(p,c,l):s.bind(c,l)})},_off:function(t,e){e=(e||"").split(" ").join(this.eventNamespace+" ")+this.eventNamespace,t.unbind(e).undelegate(e)},_delay:function(t,e){function i(){return("string"==typeof t?s[t]:t).apply(s,arguments)}var s=this;return setTimeout(i,e||0)},_hoverable:function(e){this.hoverable=this.hoverable.add(e),this._on(e,{mouseenter:function(e){t(e.currentTarget).addClass("ui-state-hover")},mouseleave:function(e){t(e.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(e){this.focusable=this.focusable.add(e),this._on(e,{focusin:function(e){t(e.currentTarget).addClass("ui-state-focus")},focusout:function(e){t(e.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(e,i,s){var o,n,r=this.options[e];if(s=s||{},i=t.Event(i),i.type=(e===this.widgetEventPrefix?e:this.widgetEventPrefix+e).toLowerCase(),i.target=this.element[0],n=i.originalEvent)for(o in n)o in i||(i[o]=n[o]);return this.element.trigger(i,s),!(t.isFunction(r)&&r.apply(this.element[0],[i].concat(s))===!1||i.isDefaultPrevented())}},t.each({show:"fadeIn",hide:"fadeOut"},function(e,i){t.Widget.prototype["_"+e]=function(s,o,n){"string"==typeof o&&(o={effect:o});var r,a=o?o===!0||"number"==typeof o?i:o.effect||i:e;o=o||{},"number"==typeof o&&(o={duration:o}),r=!t.isEmptyObject(o),o.complete=n,o.delay&&s.delay(o.delay),r&&t.effects&&t.effects.effect[a]?s[e](o):a!==e&&s[a]?s[a](o.duration,o.easing,n):s.queue(function(i){t(this)[e](),n&&n.call(s[0]),i()})}})})(jQuery); \ No newline at end of file diff --git a/uhr-de.js b/uhr-de.js index 297484d..7c0d461 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.registerLanguage('de', layout); +window._uhr.languages['de'] = layout; diff --git a/uhr-de_CH.js b/uhr-de_CH.js index 4b6f5cb..874ae1c 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.registerLanguage('de_CH', layout); +window._uhr.languages['de_CH'] = layout; diff --git a/uhr-en.js b/uhr-en.js index 2727d28..bca4c8e 100644 --- a/uhr-en.js +++ b/uhr-en.js @@ -34,4 +34,4 @@ var layout = { return hour; } }; -Uhr.registerLanguage('en', layout); +window._uhr.languages['en'] = layout; diff --git a/uhr.js b/uhr.js index 8337a01..3fa85ae 100644 --- a/uhr.js +++ b/uhr.js @@ -15,121 +15,133 @@ along with this program. If not, see . (function($) { "use strict"; - if (window.Uhr !== undefined) { + if (window._uhr !== undefined) { return; } - window.Uhr = { + window._uhr = { id: 0, - start: function(e) { - if (!Uhr.isOn(e)) { - e.data('timer', window.setInterval(function() {Uhr.update(e);}, 1000)); - Uhr.update(e); - jQuery.cookie('status' + e.data('id'), 'on', {expires: 365, path: '/'}); + languages: new Array() + }; + $.widget("fritteli.uhr", { + options: { + width: '100%', + status: 'on', + language: 'de_CH', + theme: 'black', + force: false + }, + start: function() { + if (!this._isOn()) { + var uhr = this; + this._timer = window.setInterval(function() { + uhr._update(); + }, 1000); + this._update(); + $.cookie('uhr-status' + this._id, 'on', {expires: 365, path: '/'}); + } else { } }, - stop: function(e) { - if (Uhr.isOn(e)) { - window.clearInterval(e.data('timer')); - e.data('timer', null); - Uhr.update(e); - jQuery.cookie('status' + e.data('id'), 'off', {expires: 365, path: '/'}); + stop: function() { + if(this._isOn()) { + window.clearInterval(this._timer); + this._timer = null; + this._update(); + $.cookie('uhr-status' + this._id, 'off', {expires: 365, path: '/'}); } }, - update: function(e) { - if (Uhr.isOn(e)) { + toggle: function() { + if(this._isOn()) { + this.stop(); + } else { + this.start(); + } + }, + language: function(languageKey) { + if (languageKey !== this.options.language) { + this.options.language = languageKey; + var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); + renderer.render(this); + $.cookie('uhr-language' + this._id, languageKey, {expires: 365, path: '/'}); + this._update(); + } + }, + theme: function(theme) { + if (theme != this.options.theme) { + this.element.removeClass(this.options.theme).addClass(theme); + $('#uhr-onoffswitch' + this._id).removeClass(this.options.theme).addClass(theme); + this.options.theme = theme; + $.cookie('uhr-theme' + this._id, theme, {expires: 365, path: '/'}); + } + }, + // private variables + _id: -1, + _timer: null, + _currentMinute: -1, + // private methods + _isOn: function() { + return this._timer !== null; + }, + _update: function() { + if (this._isOn()) { var now = new Date(); - if (now.getMinutes() == e.data('currentMinute')) { + if (now.getMinutes() == this._currentMinute) { return; } - e.data('currentMinute', now.getMinutes()); - var dotMinute = Uhr.getDotMinute(e, now); - var hour = Uhr.getHour(e, now); - var coarseMinute = this.getCoarseMinute(e, now); - Uhr.clear(e); - Uhr.highlight(e, 'on'); + this._currentMinute = now.getMinutes(); + var dotMinute = this._getDotMinute(now); + var hour = this._getHour(now); + var coarseMinute = this._getCoarseMinute(now); + this._clear(); + this._highlight('on'); for (var i = 1; i <= dotMinute; i++) { - Uhr.highlight(e, 'dot' + i); + this._highlight('dot' + i); } - Uhr.highlight(e, 'minute' + coarseMinute); - hour = this.normalizeHour(hour); - Uhr.highlight(e, 'hour' + hour); + this._highlight('minute' + coarseMinute); + hour = this._normalizeHour(hour); + this._highlight('hour' + hour); if (coarseMinute == 0) { - Uhr.highlight(e, 'sharphour'); + this._highlight('sharphour'); } } else { - Uhr.clear(e); - e.data('currentMinute', -1); + this._clear(); + this._currentMinute = -1; } }, - toggle: function(e) { - if (Uhr.isOn(e)) { - Uhr.stop(e); - } else { - Uhr.start(e); + _language: function() { + return window._uhr.languages[this.options.language]; + }, + _highlight: function(itemClass) { + this.element.find('.item.' + itemClass).addClass('active'); + }, + _clear: function() { + this.element.find('.item').removeClass('active'); + }, + _getHour: function(date) { + if (typeof this._language().getHour === 'function') { + return this._language().getHour(date); } - }, - clear: function(e) { - e.find('.item').removeClass('active'); - }, - setLanguage: function(e, language) { - var newLanguage = Uhr.layouts[language]; - if (newLanguage !== undefined && newLanguage != e.data('currentLanguage')) { - e.data('currentLanguage', newLanguage); - var renderer = new UhrRenderer(newLanguage, e.find('.letterarea')); - renderer.render(e); - jQuery.cookie('language' + e.data('id'), language, {expires: 365, path: '/'}); - } - }, - setTheme: function(e, theme) { - var currentTheme = e.data('currentTheme'); - if (theme != currentTheme) { - e.removeClass(currentTheme).addClass(theme); - e.data('toggleSwitch').removeClass(currentTheme).addClass(theme); - e.data('currentTheme', theme); - jQuery.cookie('theme' + e.data('id'), theme, {expires: 365, path: '/'}); - } - }, - isOn: function(e) { - return e.data('timer') != null; - }, - highlight: function(e, itemClass) { - e.find('.item.' + itemClass).addClass('active'); - }, - getHour: function(e, date) { - //FIXME - /* - if (typeof e.data('currentLayout').getHour === 'function') { - return e.data('currentLayout').getHour(date); - } - */ var hour = date.getHours(); if (date.getMinutes() >= 25) { return hour + 1; } return hour; }, - getCoarseMinute: function(e, date) { - //FIXME - /* - if (typeof e.data('currentLayout').getCoarseMinute === 'function') { - return e.data('currentLayout').getCoarseMinute(date); + _getCoarseMinute: function(date) { + if (typeof this._language().getCoarseMinute === 'function') { + return this._language().getCoarseMinute(date); } - */ var minutes = date.getMinutes(); - return minutes - Uhr.getDotMinute(e, date); + return minutes - this._getDotMinute(date); }, - getDotMinute: function(e, date) { - //FIXME - /* - if (typeof e.data('currentLayout').getDotMinute === 'function') { - return e.data('currentLayout').getDotMinute(date); + _getDotMinute: function(date) { + if (typeof this._language().getDotMinute === 'function') { + return this._language().getDotMinute(date); } - */ var minutes = date.getMinutes(); return minutes % 5; }, - normalizeHour: function(hour) { + _normalizeHour: function(hour) { if (hour > 12) { hour %= 12; } @@ -138,25 +150,14 @@ along with this program. If not, see . } return hour; }, - registerLanguage: function(languageKey, layout) { - this.layouts[languageKey] = layout; + _create: function() { + this._id = window._uhr.id++; + this._setupHTML(); + this._wireFunctionality(); }, - layouts: new Array() - } - $.fn.uhr = function(options) { - var settings = $.extend({ - width: '100%', - force: false, - status: 'on', - language: 'de_CH', - theme: 'black' - }, options); - return this.each(function() { - var e = $(this); - var id = window.Uhr.id++; - e.data('id', id); - e.data('timer', null); - + _setupHTML: function() { + var e = this.element; + // Base clock area e.addClass('uhr'); e.empty(); e.append(''); @@ -165,333 +166,89 @@ along with this program. If not, see . e.append(''); e.append('
'); e.append('
'); - e.css('width', settings.width); + e.css('width', this.options.width); var realWidth = e.width() e.width(realWidth); e.height(realWidth); e.css('font-size', (realWidth / 40) + 'px'); - var toggleSwitch = jQuery('
'); - toggleSwitch.append(''); - toggleSwitch.append('

Created by fritteli, inspired by QLOCKTWO. @@ -42,15 +38,7 @@ along with this program. If not, see . var height = jQuery(window).height(); var width = jQuery(window).width(); var size = height < width ? height : width; - /* - new Uhr(jQuery('#uhr'), { - layout: 'de_CH', - theme: 'black', - status: 'on', - width: size + 'px' - }); - */ - $('div.u').uhr({width:'10em'}); + $('#uhr').uhr({width:size+'px'}); diff --git a/jquery.cookie.js b/jquery-cookie-1.4.0.js similarity index 100% rename from jquery.cookie.js rename to jquery-cookie-1.4.0.js diff --git a/manifest.appcache b/manifest.appcache index ff73367..d836a65 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -4,8 +4,8 @@ CACHE MANIFEST COPYING index.html jquery-2.0.3.min.js +jquery-cookie-1.4.0.js jquery-ui-1.10.3.custom.min.js -jquery.cookie.js uhr.js uhr-de_CH.js uhr-de.js From 9710663b1dc5385cec4eae1d31fb9a4707bc3432 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 22:09:52 +0100 Subject: [PATCH 13/19] added favicon --- favicon.png | Bin 0 -> 1251 bytes index.html | 1 + 2 files changed, 1 insertion(+) create mode 100644 favicon.png diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..2f2008fb5d4cc4d5e00e7620ebe1c3744e3ac402 GIT binary patch literal 1251 zcmV<91RVQ`P)uh#^d87wALEdS`g7d$duqx zcxhz0Hl=JzMpad)stP)#gb+ghKtx$6k8({20U|<5X`q1D#zsgfky1j8ae!_J0Yuap zkW$LZgb?60rBqhVZ&va)68Jcu>l6t9BF{?)c`e2WNkkwb#2Aqhuvjec_3K}#>l#0P z{D5-~N+}2-u)DhpDJ71Mjxd|eu(!8|Z-?K|G!2fAk3mG)kWN_~C?z6<5D;TTjIl$2 z4d~)Xy|takP1E#-r7XlbheU+g&JJGIYiO;(JYtv`@=op>3Tznv4k19CpPwhKb%u$d zmQo_d2y1QjisSnRvxE?U5M4-=Qdz-lHbdLC*x%pBcDv06uGecwDWR0YYPEu7Nce4x zfz}#CgsQ6Y8qdd!mr_9~mG`m}CnqPU>l&x0r=+aL<>duBgfM`Y3CEDOZJQ0yS|fyzm9bF+ zR!a%zT;@PkRR|$;XT3)V0qFOJ5TLi)EtFDOap^UC>70Z2J|`X%vol&EC4y2CF}|g& zF(#*F&N2WLV-8~o0lID5ELbUpFJBIzwSxB^i^T$WcXz1kI;Tzve;GC+nK>{nOy!#g z8z9GJbGck%xmcjCYg}Dj;pyoKDJ5(+8#w3Cwk^E(aL&OwhY$idjLtcPo?vB#WyL8a z_&yAoga-!)sVuu?Dr&9az0a@~n*bu9D7E9eL2Er(n#)=cV}!B`fnr4HtuMyYk!F%pOcsvY#nHK0sic4A=MXr9S9r98*8hmBLROwG4SDBm?I zn$*fSoJAtz{=+O7kE!^v5$t(R-4A5^Q3!Gms1%R@iZrMP zoYQYzPhWguL@4?~?u`D3giIKv6zbXnq9b3KQe|2)$@p!IfshiqCvq8rPo*LCHQqai z&1Qq0ogGl3e1DgaI_EM^_?vSM2|(zJ6%)9;2R<}F2!ZAI@7UYjg;WYZfBubMzy87X z^)+s8Zg6>diPdTaYb_og9^k#ld_Kqh{XLqd88k0SDLCiQG!2|{`HpGZc7Vh?1YS2A z#Quuyy!5!ey#)X~Jw4(1`598m++42L>p^)gyKLsvm_Gxj$Ja4ev919jSX*U}nC<1C zjk4L8ig8KEPjP^)?D~DYYq!M*7u1yS&wQ7qg8y^m%j}~<^Is1R<-f+ox!i%MPs{)S N002ovPDHLkV1n$6J{kZ3 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 3b47606..acaf21b 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@ along with this program. If not, see . + From 831f1facd752ca8235090b8e480c6c5764cad22a Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 22:54:46 +0100 Subject: [PATCH 14/19] time() funktion implementiert; damit kann eine fixe zeit gesetzt werden. noch nicht ganz ausgereift. --- index.html | 23 ++++++++++++---- manifest.appcache | 15 +++++----- uhr.js | 70 +++++++++++++++++++++++++++++++++-------------- 3 files changed, 75 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index acaf21b..0de4276 100644 --- a/index.html +++ b/index.html @@ -30,16 +30,29 @@ along with this program. If not, see . -

+
+

Uhr mit der aktuellen Zeit

+
+
+
+

Uhr mit statischer Zeit

+
+

Created by fritteli, inspired by QLOCKTWO. diff --git a/manifest.appcache b/manifest.appcache index d836a65..3d812a5 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,19 +1,20 @@ CACHE MANIFEST -# 4.0.0-alpha1 +# 4.0.0-alpha2 COPYING +favicon.png index.html jquery-2.0.3.min.js jquery-cookie-1.4.0.js jquery-ui-1.10.3.custom.min.js -uhr.js -uhr-de_CH.js -uhr-de.js -uhr-en.js -uhr.css uhr-black.css -uhr-red.css uhr-blue.css +uhr-de.js +uhr-de_CH.js +uhr-en.js uhr-green.css +uhr-red.css uhr-white.css +uhr.css +uhr.js uhr.woff diff --git a/uhr.js b/uhr.js index 3fa85ae..cb54adc 100644 --- a/uhr.js +++ b/uhr.js @@ -61,7 +61,11 @@ along with this program. If not, see . if (languageKey !== this.options.language) { this.options.language = languageKey; var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); - renderer.render(this); + var uhr = this; + renderer.render(this, function() { + uhr._currentMinute = -1; + uhr._update(); + }); $.cookie('uhr-language' + this._id, languageKey, {expires: 365, path: '/'}); this._update(); } @@ -74,6 +78,23 @@ along with this program. If not, see . $.cookie('uhr-theme' + this._id, theme, {expires: 365, path: '/'}); } }, + time: function(time) { + this.options.time = time; + if (time == null) { + this._currentMinute = -1; + this._update(); + } else { + if (this._timer != null) { + window.clearInterval(this._timer); + } + var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); + var uhr = this; + renderer.render(this, function() { + uhr._show(time); + }); + + } + }, // private variables _id: -1, _timer: null, @@ -84,30 +105,33 @@ along with this program. If not, see . }, _update: function() { if (this._isOn()) { - var now = new Date(); - if (now.getMinutes() == this._currentMinute) { + var time = new Date(); + if (time.getMinutes() == this._currentMinute) { return; } - this._currentMinute = now.getMinutes(); - var dotMinute = this._getDotMinute(now); - var hour = this._getHour(now); - var coarseMinute = this._getCoarseMinute(now); - this._clear(); - this._highlight('on'); - for (var i = 1; i <= dotMinute; i++) { - this._highlight('dot' + i); - } - this._highlight('minute' + coarseMinute); - hour = this._normalizeHour(hour); - this._highlight('hour' + hour); - if (coarseMinute == 0) { - this._highlight('sharphour'); - } + this._currentMinute = time.getMinutes(); + this._show(time); } else { this._clear(); this._currentMinute = -1; } }, + _show: function(time) { + var dotMinute = this._getDotMinute(time); + var hour = this._getHour(time); + var coarseMinute = this._getCoarseMinute(time); + this._clear(); + this._highlight('on'); + for (var i = 1; i <= dotMinute; i++) { + this._highlight('dot' + i); + } + this._highlight('minute' + coarseMinute); + hour = this._normalizeHour(hour); + this._highlight('hour' + hour); + if (coarseMinute == 0) { + this._highlight('sharphour'); + } + }, _language: function() { return window._uhr.languages[this.options.language]; }, @@ -154,6 +178,9 @@ along with this program. If not, see . this._id = window._uhr.id++; this._setupHTML(); this._wireFunctionality(); + if (this.options.time !== undefined) { + this.time(this.options.time); + } }, _setupHTML: function() { var e = this.element; @@ -258,7 +285,7 @@ function UhrRenderer(layout, renderarea) { this.layout = layout; this.renderarea = renderarea; } -UhrRenderer.prototype.render = function(uhr) { +UhrRenderer.prototype.render = function(uhr, beforeshow) { var renderer = this; this.renderarea.fadeOut('fast', function() { renderer.renderarea.empty(); @@ -271,8 +298,9 @@ UhrRenderer.prototype.render = function(uhr) { renderer.renderarea.append('
'); } } - uhr._currentMinute = -1; - uhr._update(); + if (typeof beforeshow === 'function') { + beforeshow(); + } renderer.renderarea.fadeIn('fast'); }); } From d51b00fece0a653056d82264f9b2dd2b8d4605e6 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 23:16:20 +0100 Subject: [PATCH 15/19] =?UTF-8?q?go=20back=20to=20standard=20behavior=20fo?= =?UTF-8?q?r=20index.html:=20one=20simple=20B=C3=A4rneruhr?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 0de4276..4a59561 100644 --- a/index.html +++ b/index.html @@ -30,29 +30,20 @@ along with this program. If not, see . -

-

Uhr mit der aktuellen Zeit

-
-
-
-

Uhr mit statischer Zeit

-
-
+

Created by fritteli, inspired by QLOCKTWO. From 1204800defe25026352a124d7f41655a993d1c17 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 23:16:59 +0100 Subject: [PATCH 16/19] updated readme --- README.md | 45 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index dd9b573..d4f0f86 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ Bärneruhr ========= -Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. +Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht das so einfach, dass es sogar deine Grossmutter tun könnte! 1. Benötigte Dateien einbinden ------------------------------ * Binde folgende Javascript-Dateien im HTML-Dokument ein: * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) - * jquery.cookie.js (Falls nicht bereits vorhanden) + * jquery-ui-1.10.3.custom.min.js (Falls nicht bereits vorhanden) + * Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt. + * jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden) * uhr.js * Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: * uhr-de_CH.js @@ -26,14 +28,14 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. ---------------------------------------- Erstelle ein leeres `

` mit einer ID: -
+
3. Uhr per Javascript konfigurieren ----------------------------------- Initialisiere die Uhr mit einer einzigen Zeile Javascript: - new Uhr(jQuery('#meineuhr')); + jQuery('#uhrcontainer').uhr(); -Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: +Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: * Breite ist 100% des Eltenelements * Farbe ist Schwarz @@ -42,17 +44,38 @@ Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt ein Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. +Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit + + jQuery('div').uhr(); + +würde also jedes `
`-Element der Seite in eine Uhr umgewandelt + 4. Weitere Optionen ------------------- -Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: +Der uhr()-Methode kann ein Options-Objekt mitgegeben werden: - new Uhr(jQuery('#uhrcontainer'), { - status: 'on', // 'on' oder 'off' - theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' - layout: 'en', // 'de_DE', 'de' oder 'en' (je nach eingebundenen Sprachdateien) - width: '20em' // eine CSS-Grössenangabe + jQuery('#uhrcontainer').uhr({ + status: 'on', // 'on' (default) oder 'off' + theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white' + language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien) + width: '100%', // eine CSS-Grössenangabe (default: 100%) + force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; + // true: immer die angegebene Konfiguration verwenden }); +5. Sonderfunktionen +------------------- +Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit + + { + time: new Date() + } +kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Mit dem On/Off-Schalter wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an. + +Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden: + + jQuery('#uhrcontainer').uhr("time", new Date()); + Viel Spass! A. Lizenzbestimmungen From 8ce8167225117bfe7ae7a879a80442725c8a60c6 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 23:17:18 +0100 Subject: [PATCH 17/19] manifest aktualisiert --- manifest.appcache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.appcache b/manifest.appcache index 3d812a5..84b7334 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 4.0.0-alpha2 +# 4.0.0 COPYING favicon.png From 2f5cddbfa296d0db2606b3361dc0b1854af9e3f7 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 23:20:29 +0100 Subject: [PATCH 18/19] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d4f0f86..26b944c 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit { time: new Date() } -kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Mit dem On/Off-Schalter wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an. +kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Beim Klick auf den On/Off-Schalter oder beim Wechsel der Sprache wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an. Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden: From 8a413b17a06b6f9669336872053e1c181d66dadb Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Jan 2014 23:33:17 +0100 Subject: [PATCH 19/19] corrected javascriptdoc --- uhr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/uhr.js b/uhr.js index cb54adc..0f527cf 100644 --- a/uhr.js +++ b/uhr.js @@ -336,7 +336,7 @@ function l(letter, style) { * * @param letter string: Der Buchstabe, der angezeigt werden soll * @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll - * @example h('Z', 2), 11 erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird + * @example h('Z', 2, 11) erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird */ function h(letter) { var style = '';