Merge branch 'develop' of /var/lib/git/repositories/manuel/uhr

This commit is contained in:
Manuel Friedli 2013-11-30 19:37:15 +01:00
commit 51ef836805
5 changed files with 112 additions and 38 deletions

72
README Normal file
View file

@ -0,0 +1,72 @@
Bärneruhr
Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach.
1. Benötigte Dateien einbinden
Binde folgende Javascript-Dateien im HTML-Dokument ein:
- jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
- jquery.cookie.js (Falls nicht bereits vorhanden)
- uhr.js
Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
- 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
Erstelle ein leeres <div> mit einer ID:
<div id="meineuhr"></div>
3. Uhr per Javascript konfigurieren
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
new Uhr($('#meineuhr'));
Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet.
Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst:
- Breite ist 100% des Eltenelements
- Farbe ist Schwarz
- Sprache ist Bärndütsch
- Die Uhr ist eingeschaltet
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt
4. Weitere Optionen
Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden:
new Uhr($('#uhrcontainer'), {
status: 'on', // 'on' oder 'off'
theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'
layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien
width: '20em' // eine CSS-Grössenangabe
});
Viel Spass!
A. Lizenzbestimmungen
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/>.

View file

@ -37,7 +37,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
new Uhr($('#uhr'), {
layout: 'de_CH',
theme: 'black',
status: 'on'
status: 'on',
width: '20em'
});
</script>
</body>

View file

@ -1,18 +1,18 @@
CACHE MANIFEST
# 3.0.3
# 3.0.4
COPYING
index.html
jquery-2.0.3.min.js
jquery.cookie.js
uhr-black.css
uhr-blue.css
uhr-de.js
uhr-de_CH.js
uhr-en.js
uhr-green.css
uhr-red.css
uhr-white.css
uhr.css
uhr.js
uhr-de_CH.js
uhr-de.js
uhr-en.js
uhr.css
uhr-black.css
uhr-red.css
uhr-blue.css
uhr-green.css
uhr-white.css
uhr.woff

29
uhr.css
View file

@ -20,11 +20,8 @@ body {
font-family: 'Uhrenfont', sans-serif;
}
.uhr {
padding: 3em;
position: relative;
margin: 0;
width: 40em;
height: 40em;
transition: background-color 0.5s;
}
.uhr .reflection {
@ -42,11 +39,12 @@ body {
.uhr .letterarea {
display: block;
position: absolute;
top: 5em;
bottom: 5em;
left: 5em;
right: 5em;
top: 12%;
bottom: 12%;
left: 12%;
right: 12%;
overflow: hidden;
font-size: 200%;
}
.item {
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
@ -64,20 +62,20 @@ body {
box-shadow: 0 0 0.2em #eee;
}
.dot1 {
top: 1.5em;
left: 1.5em;
top: 3.75%;
left: 3.75%;
}
.dot2 {
top: 1.5em;
right: 1.5em;
top: 3.75%;
right: 3.75%;
}
.dot3 {
bottom: 1.5em;
right: 1.5em;
bottom: 3.75%;
right: 3.75%;
}
.dot4 {
bottom: 1.5em;
left: 1.5em;
bottom: 3.75%;
left: 3.75%;
}
.letter {
height: 10%;
@ -86,7 +84,6 @@ body {
margin: 0;
display: inline-block;
text-align: center;
font-size: 2.2em;
line-height: 160%;
}
.letter.active {

26
uhr.js
View file

@ -21,7 +21,7 @@ function Uhr(clockarea, settings) {
this.id = Uhr.id++;
this.timer = null;
this.currentTheme = null;
this.currentLayout = Uhr.layouts['undefined'];
this.currentLayout = {};
this.currentMinute = -1;
this.initHTMLElements(clockarea, settings || {});
}
@ -141,20 +141,20 @@ Uhr.prototype.normalizeHour = function(hour) {
return hour;
}
Uhr.prototype.initHTMLElements = function(clockarea, presets) {
this.createHTMLElements(clockarea);
this.createHTMLElements(clockarea, presets.width);
var force = presets.force || false;
this.initToggleSwitch(presets.status, force);
this.initLayoutSwitch(presets.layout, force);
this.initThemeSwitch(presets.theme, force);
}
Uhr.prototype.createHTMLElements = function(clockarea) {
this.createClockarea(clockarea)
Uhr.prototype.createHTMLElements = function(clockarea, width) {
this.createClockarea(clockarea, width)
this.letterarea = this.clockarea.find('.letterarea');
this.createToggleSwitch();
this.createLayoutSwitch();
this.createThemeSwitch();
}
Uhr.prototype.createClockarea = function(clockarea) {
Uhr.prototype.createClockarea = function(clockarea, width) {
clockarea.addClass('uhr');
clockarea.empty();
clockarea.append('<span class="item dot dot1"></span>');
@ -163,6 +163,14 @@ Uhr.prototype.createClockarea = function(clockarea) {
clockarea.append('<span class="item dot dot4"></span>');
clockarea.append('<div class="letterarea"></div>');
clockarea.append('<div class="reflection"></div>');
if(width == undefined) {
width = '100%';
}
clockarea.css('width', width);
var realWidth = clockarea.width()
clockarea.width(realWidth);
clockarea.height(realWidth);
clockarea.css('font-size', (realWidth / 40) + 'px');
this.clockarea = clockarea
}
Uhr.prototype.createToggleSwitch = function() {
@ -225,7 +233,8 @@ Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) {
if (selectedLayout == undefined || (overrideCookie && (defaultValue != undefined))) {
selectedLayout = defaultValue;
}
if (selectedLayout == undefined || selectedLayout == 'undefined') {
if (selectedLayout == undefined) {
// FIXME not nice, hardcoded default-value
selectedLayout = 'de_CH';
}
this.layoutSwitch.val(selectedLayout);
@ -247,11 +256,6 @@ Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) {
this.setTheme(selectedTheme);
}
Uhr.register('undefined', {
language: 'Please choose your language',
values: []
});
/**
* Hilfsklasse zum Rendern der Uhr.
* @param layout Layout-Objekt, das gerendert werden soll.