manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Merge branch 'feature/css-auto-detect' into 'develop'

Browse source 
Feature/Css Auto Detect
This commit is contained in:
Manuel Friedli 2014-06-28 14:16:39 +02:00
commit 66287994ca
5 changed files with 100 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
README.md
View file

@ -5,7 +5,21 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
1. Benötigte Dateien einbinden 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:
<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" />
* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
* jquery-2.1.0.min.js (Falls nicht bereits vorhanden) * jquery-2.1.0.min.js (Falls nicht bereits vorhanden)
* jquery-ui-1.10.4.custom.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. * 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_CH.js
* uhr-de.js * uhr-de.js
* uhr-en.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 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: Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
* Breite ist 100% des Eltenelements * Breite ist 100% des Eltenelements
* Farbe ist Schwarz * Farbe ist diejenige des ersten eingebundenen Theme-Stylesheets.
* Sprache ist Bärndütsch * Sprache ist Bärndütsch
* Die Uhr ist eingeschaltet * Die Uhr ist eingeschaltet
* Die Bedienelemente werden angezeigt * Die Bedienelemente werden angezeigt

21
index.html
View file

@ -16,24 +16,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<html manifest="manifest.appcache"> <html manifest="manifest.appcache">
<head> <head>
<title>Bärneruhr - Die Zeit im Wort</title> <title>Bärneruhr - Die Zeit im Wort</title>
<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>
<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" />
<link rel="stylesheet" type="text/css" href="uhr-pink.css" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Bärneruhr" /> <meta name="apple-mobile-web-app-title" content="Bärneruhr" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" /> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
<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="shortcut icon" type="image/png" href="favicon.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<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>
</head> </head>
<body style="padding:0;margin:0;"> <body style="padding:0;margin:0;">
<div id="uhr"></div> <div id="uhr"></div>

54
info/index.html
View file

@ -16,23 +16,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<html manifest="../manifest.appcache"> <html manifest="../manifest.appcache">
<head> <head>
<title>Die Zeit im Wort - Informationen</title> <title>Die Zeit im Wort - Informationen</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../uhr.css" />
<link rel="stylesheet" type="text/css" href="../uhr-black.css" data-class="black" />
<link rel="stylesheet" type="text/css" href="info.css" />
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script> <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-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="../jquery-cookie-1.4.0.js"></script>
<script type="text/javascript" src="../uhr.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_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" />
<link rel="stylesheet" type="text/css" href="info.css" />
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
</head> </head>
<body> <body>
<h1 id="main-title">Die Zeit im Wort</h1> <h1 id="main-title">Die Zeit im Wort</h1>
@ -81,21 +75,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</ul> </ul>
<h3 id="include-in-html">Einbinden in HTML</h3> <h3 id="include-in-html">Einbinden in HTML</h3>
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code>&lt;head&gt;</code></h4> <h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code>&lt;head&gt;</code></h4>
<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein:<br/> <p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
<code>&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt; <code>&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /&gt;
&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-cookie-1.4.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-cookie-1.4.0.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="uhr.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-de_CH.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="uhr-de_CH.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-de.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="uhr-de.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;</code>
&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" /&gt;</code>
</p> </p>
<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die Attribute <code>data-class</code> bzw. <code>data-name</code> 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.</p>
<h4 id="clock-element">Uhr-Element auf der Seite</h4> <h4 id="clock-element">Uhr-Element auf der Seite</h4>
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code>&lt;div&gt;</code>-Element:<br/> <p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code>&lt;div&gt;</code>-Element:<br/>
<code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code> <code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code>
@ -108,7 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}); });
&lt;/script&gt;</code> &lt;/script&gt;</code>
</p> </p>
<p>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 <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/> <p>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 <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/>
<code>jQuery('#uhr').uhr({ <code>jQuery('#uhr').uhr({
width: '200px', width: '200px',
theme: 'red' theme: 'red'
@ -130,9 +126,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<br/>Typ: String <br/>Typ: String
<br/>Default: <code>'de_CH'</code></dd> <br/>Default: <code>'de_CH'</code></dd>
<dt><code>theme</code></dt> <dt><code>theme</code></dt>
<dd>Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün) und <code>'white'</code> (weiss). <dd>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 <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün), <code>'white'</code> (weiss) und <code>'pink'</code> (pink).
<br/>Typ: String <br/>Typ: String
<br/>Default: <code>'black'</code></dd> <br/>Default: Farbe der ersten eingebundenen CSS-Datei</dd>
<dt><code>force</code></dt> <dt><code>force</code></dt>
<dd>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 <code>true</code> (Konfiguration überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Vorrang). <dd>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 <code>true</code> (Konfiguration überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Vorrang).
<br/>Typ: boolean <br/>Typ: boolean
@ -144,12 +140,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</dl> </dl>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (function($) {
var width = $(window).width();
var height = $(window).height();
var size = (width < height ? width : height) + 'px';
$('#uhr1').uhr({ $('#uhr1').uhr({
width: '150px', width: '200px',
controls: false language: 'de_CH',
theme: 'black',
controls: false,
force: true
}); });
})(jQuery); })(jQuery);
</script> </script>

2
manifest.appcache
View file

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 5.0.1 # 5.1
COPYING COPYING
README.md README.md

63
uhr.js
View file

@ -21,14 +21,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
window._uhr = { window._uhr = {
id: 0, 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", { $.widget("fritteli.uhr", {
options: { options: {
width: '100%', width: '100%',
status: 'on', status: 'on',
language: 'de_CH', language: 'de_CH',
theme: 'black', theme: window._uhr.themes[0].class,
force: false, force: false,
controls: true controls: true
}, },
@ -211,24 +229,30 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.after(toggleSwitch); e.after(toggleSwitch);
// language chooser // language chooser
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>'); var options = [];
for (var code in window._uhr.languages) { for (var code in window._uhr.languages) {
if (window._uhr.languages.hasOwnProperty(code)) { if (window._uhr.languages.hasOwnProperty(code)) {
var language = window._uhr.languages[code]; var language = window._uhr.languages[code];
languageChooser.append('<option value="' + code + '">' + language.language + '</option>'); options.push('<option value="' + code + '">' + language.language + '</option>');
} }
} }
e.after(languageChooser); if (options.length > 1) {
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
for (var i = 0; i < options.length; i++) {
languageChooser.append(options[i]);
}
e.after(languageChooser);
}
// theme chooser // theme chooser
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); if (window._uhr.themes.length > 1) {
themeChooser.append('<option value="black">Schwarz</option>'); var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
themeChooser.append('<option value="red">Rot</option>'); for (var i = 0; i < window._uhr.themes.length; i++) {
themeChooser.append('<option value="blue">Blau</option>'); var theme = window._uhr.themes[i];
themeChooser.append('<option value="green">Grün</option>'); themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>');
themeChooser.append('<option value="white">Weiss</option>'); }
themeChooser.append('<option value="pink">Pink</option>'); e.after(themeChooser);
e.after(themeChooser); }
} }
}, },
_wireFunctionality: function() { _wireFunctionality: function() {
@ -272,6 +296,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (selectedTheme == undefined || this.options.force) { if (selectedTheme == undefined || this.options.force) {
selectedTheme = this.options.theme; 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); themeChooser.val(selectedTheme);
this.options.theme = ""; this.options.theme = "";
this.theme(selectedTheme); this.theme(selectedTheme);