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 9b62107..1019562 100644 --- a/index.html +++ b/index.html @@ -16,24 +16,19 @@ along with this program. If not, see . Bärneruhr - Die Zeit im Wort - - - - - - - - - - - - - + + + + + + + +
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 . diff --git a/manifest.appcache b/manifest.appcache index 8e8e30c..90703e1 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 5.0.1 +# 5.1 COPYING README.md 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);