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

Merge branch 'feature/splashscreen' of git.friedli.info:manuel/uhr into feature/splashscreen

Browse source 
Conflicts:
	index.html
This commit is contained in:
Manuel Friedli 2014-06-28 16:57:38 +02:00
commit 8ba7f1ba0f
9 changed files with 141 additions and 68 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
------------------------------
* 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

BIN
apple-touch-icon-precomposed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.9 KiB

24
index.html
View file

@ -16,23 +16,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<html>
<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="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>
@ -44,12 +41,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
var height = $(window).height();
var size = (width < height ? width : height) + 'px';
$('#uhr').uhr({
width: '320px',
width: size,
color: 'black',
language: 'de_CH',
force: true,
controls: false,
time: new Date()
controls: false
});
})(jQuery);
</script>

53
info/index.html
View file

@ -16,22 +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" />
</head>
<body>
<h1 id="main-title">Die Zeit im Wort</h1>
@ -80,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>&lt;head&gt;</code></h4>
<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein:<br/>
<code>&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
<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;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-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-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-en.js"&gt;&lt;/script&gt;
&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>
&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;</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>&lt;div&gt;</code>-Element:<br/>
<code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code>
@ -107,7 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
});
&lt;/script&gt;</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'
@ -129,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
@ -143,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>

6
manifest.appcache
View file

@ -1,21 +1,21 @@
CACHE MANIFEST
# 5.0-beta
# 5.1
COPYING
README.md
apple-touch-icon-precomposed.png
favicon.png
icon.png
index.html
jquery-2.1.0.min.js
jquery-cookie-1.4.0.js
jquery-ui-1.10.4.custom.min.js
splash.png
uhr-black.css
uhr-blue.css
uhr-de.js
uhr-de_CH.js
uhr-en.js
uhr-green.css
uhr-pink.css
uhr-red.css
uhr-white.css
uhr.css

BIN
splash.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

36
uhr-pink.css Normal file
View file

@ -0,0 +1,36 @@
/*
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.uhr.pink {
background-color: #f0a;
}
.uhr.pink .dot.active{
border-color: #fff;
box-shadow: 0 0 0.1em #fff;
}
.uhr.pink .letter.active{
color: #fff;
text-shadow: 0 0 0.1em #fff;
}
.pink .onoffswitch-inner:before {
background-color: #f0a;
}
.uhr.pink .dot:not(.active) {
border-color: rgba(255,255,255,0.1);
box-shadow: 0 0 0.1em rgba(255,255,255,0.1);
}
.uhr.pink .letter:not(.active) {
color: rgba(255,255,255,0.1);
text-shadow: 0 0 0.1em rgba(255,255,255,0.1);
}

56
uhr.js
View file

@ -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
},
@ -212,24 +230,31 @@ 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>');
}
}
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
if (window._uhr.themes.length > 1) {
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>');
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() {
var uhr = this;
@ -272,6 +297,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);