Merge branch 'feature/css-auto-detect' into 'develop'
Feature/Css Auto Detect
This commit is contained in:
commit
66287994ca
5 changed files with 100 additions and 66 deletions
26
README.md
26
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:
|
||||
|
||||
<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-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
|
||||
|
|
|
|||
21
index.html
21
index.html
|
|
@ -16,24 +16,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<html manifest="manifest.appcache">
|
||||
<head>
|
||||
<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" />
|
||||
<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-status-bar-style" content="black" />
|
||||
<meta name="apple-mobile-web-app-title" content="Bärneruhr" />
|
||||
<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>
|
||||
<body style="padding:0;margin:0;">
|
||||
<div id="uhr"></div>
|
||||
|
|
|
|||
|
|
@ -16,23 +16,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<html manifest="../manifest.appcache">
|
||||
<head>
|
||||
<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-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" />
|
||||
<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>
|
||||
<body>
|
||||
<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>
|
||||
<h3 id="include-in-html">Einbinden in HTML</h3>
|
||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code></h4>
|
||||
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein:<br/>
|
||||
<code><script type="text/javascript" src="jquery-2.1.0.min.js"></script>
|
||||
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
|
||||
<code><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" /></code>
|
||||
<script type="text/javascript" src="uhr-en.js"></script></code>
|
||||
</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>
|
||||
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code><div></code>-Element:<br/>
|
||||
<code><div id="meine-uhr"></div></code>
|
||||
|
|
@ -108,7 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
});
|
||||
</script></code>
|
||||
</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({
|
||||
width: '200px',
|
||||
theme: 'red'
|
||||
|
|
@ -130,9 +126,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<br/>Typ: String
|
||||
<br/>Default: <code>'de_CH'</code></dd>
|
||||
<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/>Default: <code>'black'</code></dd>
|
||||
<br/>Default: Farbe der ersten eingebundenen CSS-Datei</dd>
|
||||
<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).
|
||||
<br/>Typ: boolean
|
||||
|
|
@ -144,12 +140,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</dl>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var width = $(window).width();
|
||||
var height = $(window).height();
|
||||
var size = (width < height ? width : height) + 'px';
|
||||
$('#uhr1').uhr({
|
||||
width: '150px',
|
||||
controls: false
|
||||
width: '200px',
|
||||
language: 'de_CH',
|
||||
theme: 'black',
|
||||
controls: false,
|
||||
force: true
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
CACHE MANIFEST
|
||||
# 5.0.1
|
||||
# 5.1
|
||||
|
||||
COPYING
|
||||
README.md
|
||||
|
|
|
|||
63
uhr.js
63
uhr.js
|
|
@ -21,14 +21,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
||||
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 <http://www.gnu.org/licenses/>.
|
|||
e.after(toggleSwitch);
|
||||
|
||||
// language chooser
|
||||
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
|
||||
var options = [];
|
||||
for (var code in window._uhr.languages) {
|
||||
if (window._uhr.languages.hasOwnProperty(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
|
||||
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
|
||||
themeChooser.append('<option value="black">Schwarz</option>');
|
||||
themeChooser.append('<option value="red">Rot</option>');
|
||||
themeChooser.append('<option value="blue">Blau</option>');
|
||||
themeChooser.append('<option value="green">Grün</option>');
|
||||
themeChooser.append('<option value="white">Weiss</option>');
|
||||
themeChooser.append('<option value="pink">Pink</option>');
|
||||
e.after(themeChooser);
|
||||
if (window._uhr.themes.length > 1) {
|
||||
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
|
||||
for (var i = 0; i < window._uhr.themes.length; i++) {
|
||||
var theme = window._uhr.themes[i];
|
||||
themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>');
|
||||
}
|
||||
e.after(themeChooser);
|
||||
}
|
||||
}
|
||||
},
|
||||
_wireFunctionality: function() {
|
||||
|
|
@ -272,6 +296,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue