diff --git a/README.md b/README.md
index 1c7aa74..495114e 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,21 @@ 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 +29,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 +45,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/index.html b/index.html
index 31c1a65..380bb4e 100644
--- a/index.html
+++ b/index.html
@@ -16,18 +16,6 @@ along with this program. If not, see .
Bärneruhr - Die Zeit im Wort
-
-
-
-
-
-
-
-
-
-
-
-
@@ -37,6 +25,14 @@ along with this program. If not, see .
+
+
+
+
+
+
+
+
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 .
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 .
diff --git a/manifest.appcache b/manifest.appcache
index 86e8a64..9dad385 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,5 +1,5 @@
CACHE MANIFEST
-# 5.0.1
+# 5.1
COPYING
README.md
@@ -25,4 +25,4 @@ uhr.css
uhr.js
uhr.woff
info/index.html
-info/info.css
\ No newline at end of file
+info/info.css
diff --git a/uhr.js b/uhr.js
index 6982d62..a2e4e46 100644
--- a/uhr.js
+++ b/uhr.js
@@ -21,14 +21,32 @@ along with this program. If not, see .
window._uhr = {
id: 0,
- languages: []
+ languages: [],
+ themes: []
};
+ // auto-detect themes
+ 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});
+ }
+ }
+ // fall-back if no theme was included
+ if (window._uhr.themes.length == 0) {
+ window._uhr.themes.push({});
+ }
$.widget("fritteli.uhr", {
options: {
width: '100%',
status: 'on',
language: 'de_CH',
- theme: 'black',
+ theme: window._uhr.themes[0].class,
force: false,
controls: true
},
@@ -211,24 +229,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 = $('');
- themeChooser.append('');
- themeChooser.append('');
- themeChooser.append('');
- themeChooser.append('');
- themeChooser.append('');
- themeChooser.append('');
- e.after(themeChooser);
+ 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);
+ }
}
},
_wireFunctionality: function() {
@@ -272,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);