From a72aacb50494fb0ae7e2bf0ff7ebbe01d156ae52 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 00:52:05 +0200 Subject: [PATCH 01/14] first playground parsing the CSS names --- detector.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 detector.js diff --git a/detector.js b/detector.js new file mode 100644 index 0000000..794668c --- /dev/null +++ b/detector.js @@ -0,0 +1,13 @@ +(function($) { + 'use strict'; + $(document).ready(function() { + console.log('detector'); + var uhrCSSs = $('link[rel=stylesheet][href^=uhr-]'); + for (var i = 0; i < uhrCSSs.length; i++) { + var name = $(uhrCSSs[i]).attr('href'); + var matcher = /^(.*)uhr-(.+).css$/; + var code = name.match(matcher)[2]; + console.log(name+": "+code); + } + }); +})(jQuery); From 455068d06959933556db4c294080dc8acd66221b Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 00:52:55 +0200 Subject: [PATCH 02/14] temporarily include detector.js --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 9b62107..8874c3b 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ along with this program. If not, see . + From 09a53b0883749177672302d182563f1a24a17bb7 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 01:04:53 +0200 Subject: [PATCH 03/14] the order in which JS and CSS files are included MATTERS! autodetection of themes works, as a first draft. --- detector.js | 7 ++----- index.html | 10 +++++----- uhr.js | 13 ++++++------- 3 files changed, 13 insertions(+), 17 deletions(-) diff --git a/detector.js b/detector.js index 794668c..2e53929 100644 --- a/detector.js +++ b/detector.js @@ -1,13 +1,10 @@ (function($) { 'use strict'; - $(document).ready(function() { - console.log('detector'); var uhrCSSs = $('link[rel=stylesheet][href^=uhr-]'); + var matcher = /^(.*)uhr-(.+).css$/; for (var i = 0; i < uhrCSSs.length; i++) { var name = $(uhrCSSs[i]).attr('href'); - var matcher = /^(.*)uhr-(.+).css$/; var code = name.match(matcher)[2]; - console.log(name+": "+code); + window._uhr.themes.push(code); } - }); })(jQuery); diff --git a/index.html b/index.html index 8874c3b..6f42614 100644 --- a/index.html +++ b/index.html @@ -16,11 +16,6 @@ along with this program. If not, see . Bärneruhr - Die Zeit im Wort - - - - - @@ -28,6 +23,11 @@ along with this program. If not, see . + + + + + diff --git a/uhr.js b/uhr.js index 6982d62..325cbc8 100644 --- a/uhr.js +++ b/uhr.js @@ -21,7 +21,8 @@ along with this program. If not, see . window._uhr = { id: 0, - languages: [] + languages: [], + themes: [] }; $.widget("fritteli.uhr", { options: { @@ -222,12 +223,10 @@ along with this program. If not, see . // theme chooser var themeChooser = $(''); - themeChooser.append(''); - themeChooser.append(''); - themeChooser.append(''); - themeChooser.append(''); - themeChooser.append(''); - themeChooser.append(''); + for (var i = 0; i < window._uhr.themes.length; i++) { + var theme = window._uhr.themes[i]; + themeChooser.append(''); + } e.after(themeChooser); } }, From 38df0a87c9b52b5348ad7fed2026e4a833d8d2c3 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 02:00:34 +0200 Subject: [PATCH 04/14] integrate detection in main file --- index.html | 1 - uhr.js | 8 ++++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6f42614..3a09367 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,6 @@ along with this program. If not, see . - diff --git a/uhr.js b/uhr.js index 325cbc8..a2f3110 100644 --- a/uhr.js +++ b/uhr.js @@ -24,6 +24,14 @@ along with this program. If not, see . languages: [], themes: [] }; + // auto-detect themes + var uhrCSSs = $('head link[rel=stylesheet][href^=uhr-]'); + var matcher = /^(.*)uhr-(.+).css$/; + for (var i = 0; i < uhrCSSs.length; i++) { + var name = $(uhrCSSs[i]).attr('href'); + var code = name.match(matcher)[2]; + window._uhr.themes.push(code); + } $.widget("fritteli.uhr", { options: { width: '100%', From 1a8e268a6a5831be95d97124a2d4efe6ac6139b1 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 02:09:48 +0200 Subject: [PATCH 05/14] re-ordered head contents --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 3a09367..92f2665 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,11 @@ along with this program. If not, see . Bärneruhr - Die Zeit im Wort + + + + + @@ -23,17 +28,12 @@ along with this program. If not, see . + + - - - - - - -
From a4a440c8f0e8826ff696a5c48a2aeaeb9b055d46 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 02:21:54 +0200 Subject: [PATCH 06/14] deleted detector.js, it is integrated in uhr.js --- detector.js | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 detector.js diff --git a/detector.js b/detector.js deleted file mode 100644 index 2e53929..0000000 --- a/detector.js +++ /dev/null @@ -1,10 +0,0 @@ -(function($) { - 'use strict'; - var uhrCSSs = $('link[rel=stylesheet][href^=uhr-]'); - var matcher = /^(.*)uhr-(.+).css$/; - for (var i = 0; i < uhrCSSs.length; i++) { - var name = $(uhrCSSs[i]).attr('href'); - var code = name.match(matcher)[2]; - window._uhr.themes.push(code); - } -})(jQuery); From 1bc60d7a1b250be86705d062b08d40a0fb61a98f Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 10:54:28 +0200 Subject: [PATCH 07/14] use data-class and data-name attributes on stylesheets to define styleclass and pretty-name of themes --- index.html | 12 ++++++------ uhr.js | 19 ++++++++++++------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 92f2665..8e8c9b7 100644 --- a/index.html +++ b/index.html @@ -22,12 +22,12 @@ along with this program. If not, see . - - - - - - + + + + + + diff --git a/uhr.js b/uhr.js index a2f3110..1d00bbb 100644 --- a/uhr.js +++ b/uhr.js @@ -25,12 +25,17 @@ along with this program. If not, see . themes: [] }; // auto-detect themes - var uhrCSSs = $('head link[rel=stylesheet][href^=uhr-]'); - var matcher = /^(.*)uhr-(.+).css$/; - for (var i = 0; i < uhrCSSs.length; i++) { - var name = $(uhrCSSs[i]).attr('href'); - var code = name.match(matcher)[2]; - window._uhr.themes.push(code); + var styleSheets = $('head link[rel=stylesheet]'); + for (var i = 0; i < styleSheets.length; i++) { + var styleSheet = $(styleSheets[i]); + var styleClass = styleSheet.attr('data-class'); + if (styleClass !== undefined) { + var name = styleSheet.attr('data-name'); + if (name === undefined) { + name = styleClass; + } + window._uhr.themes.push({'class': styleClass, 'name': name}); + } } $.widget("fritteli.uhr", { options: { @@ -233,7 +238,7 @@ along with this program. If not, see . var themeChooser = $(''); for (var i = 0; i < window._uhr.themes.length; i++) { var theme = window._uhr.themes[i]; - themeChooser.append(''); + themeChooser.append(''); } e.after(themeChooser); } From ae3da935bee2e63c7c71e61b4e60e7ca015d33c9 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 12:10:24 +0200 Subject: [PATCH 08/14] only render selectors for language and theme if there is more than one language / theme definition. use the first defined theme as default if not explicitly specified. --- uhr.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/uhr.js b/uhr.js index 1d00bbb..d842352 100644 --- a/uhr.js +++ b/uhr.js @@ -42,7 +42,7 @@ along with this program. If not, see . width: '100%', status: 'on', language: 'de_CH', - theme: 'black', + theme: window._uhr.themes[0].class, force: false, controls: true }, @@ -225,22 +225,30 @@ along with this program. If not, see . e.after(toggleSwitch); // language chooser - var languageChooser = $(''); + var options = []; for (var code in window._uhr.languages) { if (window._uhr.languages.hasOwnProperty(code)) { var language = window._uhr.languages[code]; - languageChooser.append(''); + options.push(''); } } - e.after(languageChooser); + if (options.length > 1) { + var languageChooser = $(''); + for (var i = 0; i < options.length; i++) { + languageChooser.append(options[i]); + } + e.after(languageChooser); + } // theme chooser - var themeChooser = $(''); - for (var i = 0; i < window._uhr.themes.length; i++) { - var theme = window._uhr.themes[i]; - themeChooser.append(''); + if (window._uhr.themes.length > 1) { + var themeChooser = $(''); + for (var i = 0; i < window._uhr.themes.length; i++) { + var theme = window._uhr.themes[i]; + themeChooser.append(''); + } + e.after(themeChooser); } - e.after(themeChooser); } }, _wireFunctionality: function() { From 448747626cefcf2a151b1356e97dc59070207fdb Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 13:56:20 +0200 Subject: [PATCH 09/14] make auto-detection more robust and include a fallback if cookie or config doesn't match available themes --- uhr.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/uhr.js b/uhr.js index d842352..a2e4e46 100644 --- a/uhr.js +++ b/uhr.js @@ -37,6 +37,10 @@ along with this program. If not, see . window._uhr.themes.push({'class': styleClass, 'name': name}); } } + // fall-back if no theme was included + if (window._uhr.themes.length == 0) { + window._uhr.themes.push({}); + } $.widget("fritteli.uhr", { options: { width: '100%', @@ -292,6 +296,19 @@ along with this program. If not, see . if (selectedTheme == undefined || this.options.force) { selectedTheme = this.options.theme; } + var found = false; + for (var i = 0; i < window._uhr.themes.length; i++) { + var styleClass = window._uhr.themes[i].class; + if (selectedTheme == styleClass) { + found = true; + break; + } + } + if (!found) { + var fallback = window._uhr.themes[0].class; + console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback); + selectedTheme = fallback; + } themeChooser.val(selectedTheme); this.options.theme = ""; this.theme(selectedTheme); From ee60105130cdb3ebbc5db37bca629e211e7afafc Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 13:56:55 +0200 Subject: [PATCH 10/14] only include required files --- index.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/index.html b/index.html index 8e8c9b7..1019562 100644 --- a/index.html +++ b/index.html @@ -23,11 +23,6 @@ along with this program. If not, see . - - - - - From 4c1ea9e1cd7a26518d5611b45cf885b619087f24 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 13:57:10 +0200 Subject: [PATCH 11/14] update documentation --- info/index.html | 54 +++++++++++++++++++++++-------------------------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/info/index.html b/info/index.html index 0348a73..e52adcf 100644 --- a/info/index.html +++ b/info/index.html @@ -16,23 +16,17 @@ along with this program. If not, see . Die Zeit im Wort - Informationen + + + + + + - - - - - - - - - - - -

Die Zeit im Wort

@@ -81,21 +75,23 @@ along with this program. If not, see .

Einbinden in HTML

Javascript- und CSS-Dateien im <head>

-

Füge folgende Zeilen im <head>-Tag deines HTML-Dokumentes ein:
- <script type="text/javascript" src="jquery-2.1.0.min.js"></script> +

Füge folgende Zeilen im <head>-Tag deines HTML-Dokumentes ein. Beachte dabei, dass die CSS-Dateien vor den Javascript eingebunden werden.
+ <link rel="stylesheet" type="text/css" href="uhr.css" /> +<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /> +<link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /> +<link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /> +<link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /> +<link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /> +<link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /> +<script type="text/javascript" src="jquery-2.1.0.min.js"></script> <script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript" src="jquery-cookie-1.4.0.js"></script> <script type="text/javascript" src="uhr.js"></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> -<link rel="stylesheet" type="text/css" href="uhr.css" /> -<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" /> +<script type="text/javascript" src="uhr-en.js"></script>

+

Von den Stylesheets zwingend ist uhr.css und mindestens eines der Farbschema-Stylesheets. Die Attribute data-class bzw. data-name definieren dabei die im Stylesheet deklarierte Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei gewählt werden, die Style-Klasse muss mit der im Stylesheet definierten übereinstimmen.

Uhr-Element auf der Seite

Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <div>-Element:
<div id="meine-uhr"></div> @@ -108,7 +104,7 @@ along with this program. If not, see . }); </script>

-

Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, schwarzer Hintergrund, eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der .uhr()-Methode als JSON-Objekt übergeben, beispielsweise so:
+

Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der ersten eingebundenen CSS-Datei (im Beispiel also Schwarz), eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der .uhr()-Methode als JSON-Objekt übergeben, beispielsweise so:
jQuery('#uhr').uhr({ width: '200px', theme: 'red' @@ -130,9 +126,9 @@ along with this program. If not, see .
Typ: String
Default: 'de_CH'

theme
-
Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit 'black' (schwarz), 'red' (rot), 'blue' (blau), 'green' (grün) und 'white' (weiss). +
Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche CSS-Dateien eingebunden werden. Bis anhin unterstützte Farben sind zur Zeit 'black' (schwarz), 'red' (rot), 'blue' (blau), 'green' (grün), 'white' (weiss) und 'pink' (pink).
Typ: String -
Default: 'black'
+
Default: Farbe der ersten eingebundenen CSS-Datei
force
Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind true (Konfiguration überschreibt Cookie-Werte) oder false (Cookie-Werte haben Vorrang).
Typ: boolean @@ -144,12 +140,12 @@ along with this program. If not, see . From fbf021771995fb01fbc112e52bdff33780b0c0b9 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 13:58:00 +0200 Subject: [PATCH 12/14] updated manifest.appcache version --- manifest.appcache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.appcache b/manifest.appcache index 8e8e30c..1bd8c09 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 5.0.1 +# 5.0.2 COPYING README.md From 7be99ce264c907003b34febb21b6dbea0e1c8aff Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 14:11:44 +0200 Subject: [PATCH 13/14] update documentation in README.md and incremented version in manifest.appcache --- README.md | 25 +++++++++++++++---------- manifest.appcache | 2 +- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 1c7aa74..d86cfd2 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,20 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht 1. Benötigte Dateien einbinden ------------------------------ -* Binde folgende Javascript-Dateien im HTML-Dokument ein: +* Binde folgende CSS-Datei im HTML-Dokument ein: + * uhr.css +* Binde zusätzlich mindestens eine der folgenden CSS-Dateien im HTML ein, je nach dem, welche Farben deine Uhr unterstützen soll: + * uhr-black.css + * uhr-blue.css + * uhr-green.css + * uhr-red.css + * uhr-white.css + * uhr-pink.css +Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel: + + + +* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein: * jquery-2.1.0.min.js (Falls nicht bereits vorhanden) * jquery-ui-1.10.4.custom.min.js (Falls nicht bereits vorhanden) * Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt. @@ -15,14 +28,6 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht * 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 ---------------------------------------- @@ -39,7 +44,7 @@ Initialisiere die Uhr mit einer einzigen Zeile Javascript: Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: * Breite ist 100% des Eltenelements -* Farbe ist Schwarz +* Farbe ist diejenige des ersten eingebundenen Theme-Stylesheets. * Sprache ist Bärndütsch * Die Uhr ist eingeschaltet * Die Bedienelemente werden angezeigt diff --git a/manifest.appcache b/manifest.appcache index 1bd8c09..90703e1 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 5.0.2 +# 5.1 COPYING README.md From fd940192f47d6ba9c327bce63c8d72e93e25c250 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Jun 2014 14:13:47 +0200 Subject: [PATCH 14/14] fixed (?) markdown --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d86cfd2..495114e 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht * uhr-red.css * uhr-white.css * uhr-pink.css + Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel: