added danish translation and updated documentation accordingly
This commit is contained in:
parent
78eea9ac1e
commit
6690ea4978
19
README.md
19
README.md
|
|
@ -27,14 +27,15 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
|
|||
* jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden)
|
||||
* uhr.js
|
||||
* Binde mindestens eine der folgenden Javascript-Dateien im HTML nach uhr.js ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
|
||||
* uhr-de_CH.js
|
||||
* uhr-de_CH_genau.js
|
||||
* uhr-de.js
|
||||
* uhr-en.js
|
||||
* uhr-es.js
|
||||
* uhr-fr.js
|
||||
* uhr-it.js
|
||||
* uhr-nl.js
|
||||
* uhr-de_CH.js (Berndeutsch)
|
||||
* uhr-de_CH_genau.js (Berndeutsch, siehe unten)
|
||||
* uhr-de.js (Deutsch)
|
||||
* uhr-dk.js (Dänisch)
|
||||
* uhr-en.js (Englisch)
|
||||
* uhr-es.js (Spanisch)
|
||||
* uhr-fr.js (Französisch)
|
||||
* uhr-it.js (Italienisch)
|
||||
* uhr-nl.js (Niederländisch)
|
||||
|
||||
`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätzlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ").
|
||||
|
||||
|
|
@ -77,7 +78,7 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
|||
jQuery('#uhrcontainer').uhr({
|
||||
status: 'on', // 'on' (default) oder 'off'
|
||||
theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets)
|
||||
language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'en', 'es', 'fr', 'it' oder 'nl' (je nach eingebundenen Sprachdateien)
|
||||
language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'dk', 'en', 'es', 'fr', 'it' oder 'nl' (je nach eingebundenen Sprachdateien)
|
||||
mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an
|
||||
// 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an
|
||||
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript" src="js/uhr-it.js"></script>
|
||||
<script type="text/javascript" src="js/uhr-es.js"></script>
|
||||
<script type="text/javascript" src="js/uhr-nl.js"></script>
|
||||
<script type="text/javascript" src="js/uhr-dk.js"></script>
|
||||
<script type="text/javascript">
|
||||
function go(url) {
|
||||
window.location = url;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<li><a href="#requirements">Benötigte Bibliotheken</a></li>
|
||||
<li><a href="#include-in-html">Einbinden in HTML</a>
|
||||
<ol>
|
||||
<li><a href="#js-and-css-in-head">Javascript- und CSS-Dateien im <code class="inline"><head></code></a>
|
||||
<li><a href="#js-and-css-in-head">Javascript- und CSS-Dateien im
|
||||
<code class="inline"><head></code></a>
|
||||
</li>
|
||||
<li><a href="#clock-element">Uhr-Element auf der Seite</a></li>
|
||||
<li><a href="#initialize">Uhr initialisieren</a></li>
|
||||
|
|
@ -62,9 +63,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
||||
<p>Hallo, Besucher!</p>
|
||||
|
||||
<p>Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, wie spät es ist. Hier erfährt du, wie du sie selber
|
||||
auf deiner Website einbauen kannst. Denn das darfst du gerne tun, solange du dich dabei an die Regeln der <a
|
||||
href="#license">Lizenz</a> hältst.</p>
|
||||
<p>Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, wie spät es ist. Hier erfährt du, wie du
|
||||
sie selber auf deiner Website einbauen kannst. Denn das darfst du gerne tun, solange du dich dabei an die
|
||||
Regeln der <a href="#license">Lizenz</a> hältst.</p>
|
||||
|
||||
<p><a onclick="go('../')" href="#">Das interessiert mich nicht, ich will zurück zur grossen Uhr!</a></p>
|
||||
|
||||
|
|
@ -77,21 +78,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
||||
<ul>
|
||||
<li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.1.0)</li>
|
||||
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden Komponenten:
|
||||
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden
|
||||
Komponenten:
|
||||
<ul>
|
||||
<li>core</li>
|
||||
<li>widget</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version 1.4.0)</li>
|
||||
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version
|
||||
1.4.0)
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="include-in-html">Einbinden in HTML<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code><a href="#toc" class="toclink">Zum
|
||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code><a href="#toc"
|
||||
class="toclink">Zum
|
||||
Inhalt</a></h4>
|
||||
|
||||
<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/>
|
||||
<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-white.css" data-class="white" data-name="Weiss" />
|
||||
|
|
@ -107,6 +111,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript" src="uhr-de_CH.js"></script>
|
||||
<script type="text/javascript" src="uhr-de_CH_genau.js"></script>
|
||||
<script type="text/javascript" src="uhr-de.js"></script>
|
||||
<script type="text/javascript" src="uhr-dk.js"></script>
|
||||
<script type="text/javascript" src="uhr-en.js"></script>
|
||||
<script type="text/javascript" src="uhr-es.js"></script>
|
||||
<script type="text/javascript" src="uhr-fr.js"></script>
|
||||
|
|
@ -115,22 +120,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</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>
|
||||
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>
|
||||
|
||||
<p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort <code
|
||||
class="inline">genau</code> angezeigt wird (also z.B. um 15:00 Uhr <code class="inline">ES ISCH GENAU
|
||||
DRÜ</code>).</p>
|
||||
<p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das
|
||||
Wort <code class="inline">genau</code> angezeigt wird (also z.B. um 15:00 Uhr
|
||||
<code class="inline">ES ISCH GENAU DRÜ</code>).</p>
|
||||
<h4 id="clock-element">Uhr-Element auf der Seite<a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
||||
|
||||
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code><div></code>-Element:<br/>
|
||||
<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>
|
||||
</p>
|
||||
<h4 id="initialize">Uhr initialisieren<a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
||||
|
||||
<p>Definiere im HTML-Dokument (<code><head></code> oder <code><body></code>) ein Javascript-Snippet, um die
|
||||
Uhr zu initialisieren:<br/>
|
||||
<p>Definiere im HTML-Dokument (<code><head></code> oder <code><body></code>) ein
|
||||
Javascript-Snippet, um die Uhr zu initialisieren:<br/>
|
||||
<code><script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#meine-uhr').uhr();
|
||||
|
|
@ -138,11 +144,12 @@ 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, 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({
|
||||
<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('#meine-uhr').uhr({
|
||||
width: '200px',
|
||||
theme: 'red'
|
||||
});</code>
|
||||
|
|
@ -153,29 +160,29 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<p>Es existieren die folgenden Konfigurationsoptionen:</p>
|
||||
<dl>
|
||||
<dt><code>autoresize</code></dt>
|
||||
<dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob
|
||||
sie immer die anfängliche Grösse behält. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||
<dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert,
|
||||
oder ob sie immer die anfängliche Grösse behält. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <code>true</code></dd>
|
||||
<dt><code>controls</code></dt>
|
||||
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden
|
||||
sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt
|
||||
werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <code>true</code></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).
|
||||
<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/>Default: <code>false</code></dd>
|
||||
<dt><code>language</code></dt>
|
||||
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab, welche
|
||||
Sprachdateien eingebunden werden.
|
||||
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab,
|
||||
welche Sprachdateien eingebunden werden.
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'de_CH'</code></dd>
|
||||
<dt><code>mode</code></dt>
|
||||
<dd>Der Zeit-Anzeigemodus, entweder <code>'normal'</code> (aktuelle Zeit in Worten anzeigen als "ES IST VIER
|
||||
UHR") oder <code>'seconds'</code> (aktuelle Sekunden als grosse Ziffern anzeigen).
|
||||
<dd>Der Zeit-Anzeigemodus, entweder <code>'normal'</code> (aktuelle Zeit in Worten anzeigen als "ES IST
|
||||
VIER UHR") oder <code>'seconds'</code> (aktuelle Sekunden als grosse Ziffern anzeigen).
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'normal'</code></dd>
|
||||
<dt><code>status</code></dt>
|
||||
|
|
@ -189,13 +196,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<br/>Default: Farbe der ersten eingebundenen CSS-Datei
|
||||
</dd>
|
||||
<dt><code>width</code></dt>
|
||||
<dd>Die Breite der Uhr als CSS-String, z.B. <code>'50%'</code>, <code>'120px'</code> oder <code>'2.8em'</code>.
|
||||
Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer quadratisch ist.
|
||||
<dd>Die Breite der Uhr als CSS-String, z.B. <code>'50%'</code>, <code>'120px'</code> oder
|
||||
<code>'2.8em'</code>. Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer quadratisch
|
||||
ist.
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'100%'</code></dd>
|
||||
</dl>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
(function ($) {
|
||||
$('#uhr1').uhr({
|
||||
width: '200px',
|
||||
language: 'de_CH',
|
||||
|
|
@ -222,17 +230,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
||||
<p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a
|
||||
href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
|
||||
Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden.
|
||||
Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden
|
||||
und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen
|
||||
wünsche ich viel Freude mit der Zeit im Wort.</p>
|
||||
Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr
|
||||
entstanden. Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese
|
||||
Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist.
|
||||
Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.</p>
|
||||
|
||||
<p>Der Quellcode ist frei zugänglich unter <a href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr</a>.</p>
|
||||
<p>Der Quellcode ist frei zugänglich unter <a
|
||||
href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr</a>.</p>
|
||||
|
||||
<h2 id="license">Lizenzbestimmungen<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
||||
|
||||
<p>Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert,
|
||||
weitergegeben und verändert werden. Die GNU GPL 3.0 findest Du unter folgendem Link: <a
|
||||
<p>Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet,
|
||||
kopiert, weitergegeben und verändert werden. Die GNU GPL 3.0 findest Du unter folgendem Link: <a
|
||||
href="https://www.gnu.org/licenses/gpl-3.0">GNU GPL 3.0</a>. Und direkt hier:</p>
|
||||
|
||||
<h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
/*
|
||||
* Copyright (C) Schweizerische Bundesbahnen SBB, 2014.
|
||||
*/
|
||||
|
||||
/*
|
||||
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/>.
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var klokken_er = {1: [1, 2, 3, 4, 5, 6, 7, 9, 10]};
|
||||
var minutter = {4: [4, 5, 6, 7, 8, 9, 10, 11]};
|
||||
var i = {5: [8]};
|
||||
var over = {5: [4, 5, 6, 7]};
|
||||
var fem = {2: [1, 2, 3]};
|
||||
var ti = {4: [1, 2]};
|
||||
var kvart = {3: [4, 5, 6, 7, 8]};
|
||||
var tyve = {2: [4, 5, 6, 7]};
|
||||
var halv = {6: [8, 9, 10, 11]};
|
||||
|
||||
var layout = {
|
||||
"version": 2,
|
||||
"language": 'Dansk',
|
||||
"letters": [
|
||||
'KLOKKENVERO',
|
||||
'FEMTYVESKLA',
|
||||
'OJEKVARTVAT',
|
||||
'TIAMINUTTER',
|
||||
'VEMOVERILMF',
|
||||
'MONALISHALV',
|
||||
'ETTOTREFIRE',
|
||||
'FEMSEKSRSYV',
|
||||
'OTTERNIMETI',
|
||||
'ELLEVEATOLV'
|
||||
],
|
||||
"permanent": klokken_er,
|
||||
"minutes": {
|
||||
"5,6,7,8,9": [fem, minutter, over],
|
||||
"10,11,12,13,14": [ti, minutter, over],
|
||||
"15,16,17,18,19": [kvart, over],
|
||||
"20,21,22,23,24": [tyve, minutter, over],
|
||||
"25,26,27,28,29": [fem, minutter, i, halv],
|
||||
"30,31,32,33,34": [halv],
|
||||
"35,36,37,38,39": [fem, minutter, over, halv],
|
||||
"40,41,42,43,44": [tyve, minutter, i],
|
||||
"45,46,47,48,49": [kvart, i],
|
||||
"50,51,52,53,54": [ti, minutter, i],
|
||||
"55,56,57,58,59": [fem, minutter, i]
|
||||
},
|
||||
"hours": {
|
||||
"0,12": {10: [8, 9, 10, 11]},
|
||||
"1,13": {7: [1, 2]},
|
||||
"2,14": {7: [3, 4]},
|
||||
"3,15": {7: [5, 6, 7]},
|
||||
"4,16": {7: [8, 9, 10, 11]},
|
||||
"5,17": {8: [1, 2, 3]},
|
||||
"6,18": {8: [4, 5, 6, 7]},
|
||||
"7,19": {8: [9, 10, 11]},
|
||||
"8,20": {9: [1, 2, 3, 4]},
|
||||
"9,21": {9: [6, 7]},
|
||||
"10,22": {9: [10, 11]},
|
||||
"11,23": {10: [1, 2, 3, 4, 5, 6]}
|
||||
},
|
||||
"getHour": function (date) {
|
||||
var hour = date.getHours();
|
||||
if (date.getMinutes() >= 25) {
|
||||
return (hour + 1) % 24;
|
||||
}
|
||||
return hour;
|
||||
}
|
||||
};
|
||||
$.fritteli.uhr.register('dk', layout);
|
||||
}(jQuery));
|
||||
|
|
@ -15,6 +15,7 @@ js/uhr.js
|
|||
js/uhr-de.js
|
||||
js/uhr-de_CH.js
|
||||
js/uhr-de_CH_genau.js
|
||||
js/uhr-dk.js
|
||||
js/uhr-en.js
|
||||
js/uhr-es.js
|
||||
js/uhr-fr.js
|
||||
|
|
|
|||
Loading…
Reference in New Issue