added danish translation and updated documentation accordingly

This commit is contained in:
Manuel Friedli 2014-12-05 22:15:09 +01:00
parent 78eea9ac1e
commit 6690ea4978
5 changed files with 150 additions and 54 deletions

View file

@ -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%)

View file

@ -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;

View file

@ -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">&lt;head&gt;</code></a>
<li><a href="#js-and-css-in-head">Javascript- und CSS-Dateien im
<code class="inline">&lt;head&gt;</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>&lt;head&gt;</code><a href="#toc" class="toclink">Zum
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code>&lt;head&gt;</code><a href="#toc"
class="toclink">Zum
Inhalt</a></h4>
<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/>
<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-white.css" data-class="white" data-name="Weiss" /&gt;
@ -107,6 +111,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
&lt;script type="text/javascript" src="uhr-de_CH.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-de_CH_genau.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-dk.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-es.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-fr.js"&gt;&lt;/script&gt;
@ -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>&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>
</p>
<h4 id="initialize">Uhr initialisieren<a href="#toc" class="toclink">Zum Inhalt</a></h4>
<p>Definiere im HTML-Dokument (<code>&lt;head&gt;</code> oder <code>&lt;body&gt;</code>) ein Javascript-Snippet, um die
Uhr zu initialisieren:<br/>
<p>Definiere im HTML-Dokument (<code>&lt;head&gt;</code> oder <code>&lt;body&gt;</code>) ein
Javascript-Snippet, um die Uhr zu initialisieren:<br/>
<code>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() {
jQuery('#meine-uhr').uhr();
@ -138,11 +144,12 @@ 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, 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>

84
js/uhr-dk.js Normal file
View file

@ -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));

View file

@ -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