Merge branch 'develop' into feature/splashscreen

This commit is contained in:
Manuel Friedli 2014-10-22 00:36:05 +02:00
commit bebb0f306d
8 changed files with 389 additions and 356 deletions

View file

@ -34,7 +34,7 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
* uhr-fr.js * uhr-fr.js
* uhr-it.js * uhr-it.js
`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ"). `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Ü").
2. Uhr-Element im HTML-Dokument einfügen 2. Uhr-Element im HTML-Dokument einfügen
---------------------------------------- ----------------------------------------
@ -56,10 +56,11 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
* Die Uhr ist eingeschaltet * Die Uhr ist eingeschaltet
* Die Bedienelemente werden angezeigt * Die Bedienelemente werden angezeigt
* Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert * Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert
* Die Uhr zeigt die aktuelle Stunde und Minute
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln. Mit den Bedienelementen kannst du die Uhr ein- und ausschalten, zwischen Stunden/Minuten- oder Sekundenanzeige wechseln sowie Sprache und Farbe einstellen.
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. Wie du diese Optionen ändern kannst, verrät der nächste Abschnitt.
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
@ -75,10 +76,12 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
status: 'on', // 'on' (default) oder 'off' status: 'on', // 'on' (default) oder 'off'
theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets) 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', 'fr' oder 'it' (je nach eingebundenen Sprachdateien) language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'en', 'fr' oder 'it' (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%) width: '100%', // eine CSS-Grössenangabe (default: 100%)
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
// true: immer die angegebene Konfiguration verwenden // true: immer die angegebene Konfiguration verwenden
controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt
// false: Die Bedienelemente werden nicht angezeigt // false: Die Bedienelemente werden nicht angezeigt
autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an
// false: Die Uhr behält ihre anfängliche Grösse // false: Die Uhr behält ihre anfängliche Grösse

View file

@ -1 +1 @@
6.3.3 6.4

View file

@ -126,7 +126,7 @@ body {
border-radius: 50px; border-radius: 50px;
} }
.onoffswitch-inner { .onoffswitch-inner, .modeswitch-inner {
width: 200%; width: 200%;
margin-left: -100%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -moz-transition: margin 0.3s ease-in 0s;
@ -135,7 +135,7 @@ body {
transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
} }
.onoffswitch-inner:before, .onoffswitch-inner:after { .onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
float: left; float: left;
width: 50%; width: 50%;
height: 24px; height: 24px;
@ -180,7 +180,8 @@ body {
transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
margin-left: 0; margin-left: 0;
} }
@ -188,6 +189,21 @@ body {
right: 0; right: 0;
} }
.modeswitch-inner:before {
content: "MIN";
padding-left: 12px;
background-color: #fff;
color: #000;
}
.modeswitch-inner:after {
content: "SEC";
padding-right: 12px;
background-color: #fff;
color: #000;
text-align: right;
}
a.uhr-configlink { a.uhr-configlink {
cursor: pointer; cursor: pointer;
background: url("../resources/settings.png") no-repeat; background: url("../resources/settings.png") no-repeat;
@ -195,46 +211,29 @@ a.uhr-configlink {
height: 24px; height: 24px;
display: inline-block; display: inline-block;
margin: 2px; margin: 2px;
vertical-align: top;
} }
.uhr-controlpanel { .uhr-controlpanel {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media (max-width: 400px) {
.uhr-controlpanel .content {
height: 100%;
}
}
@media (min-width: 401px) {
.uhr-controlpanel .content {
margin-left: auto;
margin-right: auto;
width: 10em;
top: 1em;
border-radius: 0.5em; border-radius: 0.5em;
box-shadow: 0 0 1em black; box-shadow: 0 0 1em black;
} background-color: #fff;
display: inline-block;
padding: 0.5em;
position: sticky;
bottom: 0;
margin-left: 1em;
} }
.uhr-controlpanel .content { .uhr-controlpanel .content {
background-color: #fff;
padding: 2em;
position: relative; position: relative;
} }
a.uhr-closecontrolpanel { a.uhr-closecontrolpanel {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 3px; right: 0;
top: 3px; top: -1em;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url("../resources/close.png") no-repeat; background: url("../resources/close.png") no-repeat;

View file

@ -37,7 +37,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<script type="text/javascript" src="js/uhr.js"></script> <script type="text/javascript" src="js/uhr.js"></script>
<script type="text/javascript" src="js/uhr-de_CH.js"></script> <script type="text/javascript" src="js/uhr-de_CH.js"></script>
<script type="text/javascript" src="js/uhr-de_CH_genau.js"></script> <script type="text/javascript" src="js/uhr-de_CH_genau.js"></script>
<script type="text/javascript" src="js/uhr-de_CH-seconds.js"></script>
<script type="text/javascript" src="js/uhr-de.js"></script> <script type="text/javascript" src="js/uhr-de.js"></script>
<script type="text/javascript" src="js/uhr-en.js"></script> <script type="text/javascript" src="js/uhr-en.js"></script>
<script type="text/javascript" src="js/uhr-fr.js"></script> <script type="text/javascript" src="js/uhr-fr.js"></script>

View file

@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1"/> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="../css/uhr.css"/> <link rel="stylesheet" type="text/css" href="../css/uhr.css"/>
<link rel="stylesheet" type="text/css" href="../css/uhr-black.css" data-class="black"/> <link rel="stylesheet" type="text/css" href="../css/uhr-black.css" data-class="black"/>
<link rel="stylesheet" type="text/css" href="../css/uhr-red.css" data-class="red"/>
<link rel="stylesheet" type="text/css" href="info.css"/> <link rel="stylesheet" type="text/css" href="info.css"/>
<link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/> <link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/>
<script type="text/javascript" src="../lib/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="../lib/jquery-2.1.0.min.js"></script>
@ -44,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="#requirements">Benötigte Bibliotheken</a></li>
<li><a href="#include-in-html">Einbinden in HTML</a> <li><a href="#include-in-html">Einbinden in HTML</a>
<ol> <ol>
<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="#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="#clock-element">Uhr-Element auf der Seite</a></li>
<li><a href="#initialize">Uhr initialisieren</a></li> <li><a href="#initialize">Uhr initialisieren</a></li>
</ol> </ol>
@ -60,16 +62,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>Hallo, Besucher!</p> <p>Hallo, Besucher!</p>
<p>Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, <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
wie spät es ist. Hier erfährt du, wie du sie selber auf deiner auf deiner Website einbauen kannst. Denn das darfst du gerne tun, solange du dich dabei an die Regeln der <a
Website einbauen kannst. Denn das darfst du gerne tun, solange du href="#license">Lizenz</a> hältst.</p>
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> <p><a onclick="go('../')" href="#">Das interessiert mich nicht, ich will zurück zur grossen Uhr!</a></p>
<h2 id="the-clock">Die Uhr<a href="#toc" class="toclink">Zum Inhalt</a></h2> <h2 id="the-clock">Die Uhr<a href="#toc" class="toclink">Zum Inhalt</a></h2>
<a onclick="go('../')" href="#"> <a onclick="go('../')" href="#">
<div id="uhr1"></div> <div id="uhr1" style="display:inline-block"></div>
<div id="uhr2" style="display:inline-block"></div>
</a> </a>
<h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3> <h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
@ -84,9 +86,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<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> </ul>
<h3 id="include-in-html">Einbinden in HTML<a href="#toc" class="toclink">Zum Inhalt</a></h3> <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 Inhalt</a></h4> <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 <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/> Javascript eingebunden werden</strong>.<br/>
<code>&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt; <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-black.css" data-class="black" data-name="Schwarz" /&gt;
@ -108,12 +112,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
&lt;script type="text/javascript" src="uhr-it.js"&gt;&lt;/script&gt;</code> &lt;script type="text/javascript" src="uhr-it.js"&gt;&lt;/script&gt;</code>
</p> </p>
<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die Attribute <code>data-class</code> bzw. <p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die
<code>data-name</code> definieren dabei die im Stylesheet deklarierte Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei Attribute <code>data-class</code> bzw. <code>data-name</code> definieren dabei die im Stylesheet deklarierte
gewählt werden, die Style-Klasse muss mit der im Stylesheet definierten übereinstimmen.</p> 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> <p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort <code
angezeigt wird (also z.B. um 15:00 Uhr <code class="inline">ES ISCH GENAU DRÜ</code>).</p> 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> <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/>
@ -121,7 +127,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</p> </p>
<h4 id="initialize">Uhr initialisieren<a href="#toc" class="toclink">Zum Inhalt</a></h4> <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; <code>&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() { jQuery(document).ready(function() {
jQuery('#meine-uhr').uhr(); jQuery('#meine-uhr').uhr();
@ -129,10 +136,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
&lt;/script&gt;</code> &lt;/script&gt;</code>
</p> </p>
<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der ersten eingebundenen CSS-Datei (im <p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der ersten
Beispiel also Schwarz), eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im eingebundenen CSS-Datei (im Beispiel also Schwarz), eingeschaltet, Breite 100% des Elternelementes. Wenn dies
folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren.
so:<br/> Die Konfiguration wird der <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/>
<code>jQuery('#uhr').uhr({ <code>jQuery('#uhr').uhr({
width: '200px', width: '200px',
theme: 'red' theme: 'red'
@ -143,40 +150,47 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>Es existieren die folgenden Konfigurationsoptionen:</p> <p>Es existieren die folgenden Konfigurationsoptionen:</p>
<dl> <dl>
<dt><code>width</code></dt> <dt><code>autoresize</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 <dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob
der Breite an, so dass die Uhr immer quadratisch ist. 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>.
<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).
<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.
<br/>Typ: String <br/>Typ: String
<br/>Default: <code>'100%'</code></dd> <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).
<br/>Typ: String
<br/>Default: <code>'normal'</code></dd>
<dt><code>status</code></dt> <dt><code>status</code></dt>
<dd>Der Anfangszustand der Uhr, entweder <code>'on'</code> oder <code>'off'</code> <dd>Der Anfangszustand der Uhr, entweder <code>'on'</code> oder <code>'off'</code>
<br/>Typ: String <br/>Typ: String
<br/> Default: <code>'on'</code></dd> <br/> Default: <code>'on'</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.
<br/>Typ: String
<br/>Default: <code>'de_CH'</code></dd>
<dt><code>theme</code></dt> <dt><code>theme</code></dt>
<dd>Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche CSS-Dateien eingebunden werden. <dd>Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche
CSS-Dateien eingebunden werden.
<br/>Typ: String <br/>Typ: String
<br/>Default: Farbe der ersten eingebundenen CSS-Datei <br/>Default: Farbe der ersten eingebundenen CSS-Datei
</dd> </dd>
<dt><code>force</code></dt> <dt><code>width</code></dt>
<dd>Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen <dd>Die Breite der Uhr als CSS-String, z.B. <code>'50%'</code>, <code>'120px'</code> oder <code>'2.8em'</code>.
oder nicht. Mögliche Werte sind <code>true</code> (Konfiguration überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer quadratisch ist.
Vorrang). <br/>Typ: String
<br/>Typ: boolean <br/>Default: <code>'100%'</code></dd>
<br/>Default: <code>false</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>.
<br/>Typ: boolean
<br/>Default: <code>true</code></dd>
<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>.
<br/>Typ: boolean
<br/>Default: <code>true</code></dd>
</dl> </dl>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (function($) {
@ -186,23 +200,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
theme: 'black', theme: 'black',
controls: false, controls: false,
force: true, force: true,
autoresize: false autoresize: false,
mode: 'normal'
});
$('#uhr2').uhr({
width: '200px',
language: 'de_CH',
theme: 'red',
controls: false,
force: true,
autoresize: false,
mode: 'seconds'
}); });
})(jQuery); })(jQuery);
</script> </script>
<h2 id="information">Informationen<a href="#toc" class="toclink">Zum Inhalt</a></h2> <h2 id="information">Informationen<a href="#toc" class="toclink">Zum Inhalt</a></h2>
<p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/> <p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a
Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
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 Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden.
beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.</p> 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> <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. <p>Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert,
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> 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> <h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
@ -904,6 +933,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
may consider it more useful to permit linking proprietary applications with may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read Public License instead of this License. But first, please read
&lt;<a href="http://www.gnu.org/philosophy/why-not-lgpl.html">http://www.gnu.org/philosophy/why-not-lgpl.html</a>&gt;.</p> &lt;<a href="http://www.gnu.org/philosophy/why-not-lgpl.html">http://www.gnu.org/philosophy/why-not-lgpl.html</a>&gt;.
</p>
</body> </body>
</html> </html>

View file

@ -1,247 +0,0 @@
/*
* 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 vorne0 = {
3: [2, 3, 4],
4: [1, 5],
5: [1, 4, 5],
6: [1, 3, 5],
7: [1, 2, 5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten0 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 10, 11],
6: [7, 9, 11],
7: [7, 8, 11],
8: [7, 11],
9: [8, 9, 10]
};
var vorne1 = {
3: [3],
4: [2, 3],
5: [3],
6: [3],
7: [3],
8: [3],
9: [2, 3, 4]
};
var hinten1 = {
3: [9],
4: [8, 9],
5: [9],
6: [9],
7: [9],
8: [9],
9: [8, 9, 10]
};
var vorne2 = {
3: [2, 3, 4],
4: [1, 5],
5: [5],
6: [4],
7: [3],
8: [2],
9: [1, 2, 3, 4, 5]
};
var hinten2 = {
3: [8, 9, 10],
4: [7, 11],
5: [11],
6: [10],
7: [9],
8: [8],
9: [7, 8, 9, 10, 11]
};
var vorne3 = {
3: [1, 2, 3, 4, 5],
4: [4],
5: [3],
6: [4],
7: [5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten3 = {
3: [7, 8, 9, 10, 11],
4: [10],
5: [9],
6: [10],
7: [11],
8: [7, 11],
9: [8, 9, 10]
};
var vorne4 = {
3: [4],
4: [3, 4],
5: [2, 4],
6: [1, 4],
7: [1, 2, 3, 4, 5],
8: [4],
9: [4]
};
var hinten4 = {
3: [10],
4: [9, 10],
5: [8, 10],
6: [7, 10],
7: [7, 8, 9, 10, 11],
8: [10],
9: [10]
};
var vorne5 = {
3: [1, 2, 3, 4, 5],
4: [1],
5: [1, 2, 3, 4],
6: [5],
7: [5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten5 = {
3: [7, 8, 9, 10, 11],
4: [7],
5: [7, 8, 9, 10],
6: [11],
7: [11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten6 = {
3: [9, 10],
4: [8],
5: [7],
6: [7, 8, 9, 10],
7: [7, 11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten7 = {
3: [7, 8, 9, 10, 11],
4: [11],
5: [10],
6: [9],
7: [8],
8: [8],
9: [8]
};
var hinten8 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 11],
6: [8, 9, 10],
7: [7, 11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten9 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 11],
6: [8, 9, 10, 11],
7: [11],
8: [10],
9: [8, 9]
};
var layout = {
"version": 2,
"language": 'Bärndütschi Sekunde',
"letters": [
'ESKISCHAFÜF',
'VIERTUBFZÄÄ',
'ZWÄNZGSIVOR',
'ABOHAUBIEGE',
'EISZWÖISDRÜ',
'VIERIFÜFIQT',
'SÄCHSISIBNI',
'ACHTINÜNIEL',
'ZÄNIERBEUFI',
'ZWÖUFINAUHR'
],
"seconds": {
"0": [vorne0, hinten0],
"1": [vorne0, hinten1],
"2": [vorne0, hinten2],
"3": [vorne0, hinten3],
"4": [vorne0, hinten4],
"5": [vorne0, hinten5],
"6": [vorne0, hinten6],
"7": [vorne0, hinten7],
"8": [vorne0, hinten8],
"9": [vorne0, hinten9],
"10": [vorne1, hinten0],
"11": [vorne1, hinten1],
"12": [vorne1, hinten2],
"13": [vorne1, hinten3],
"14": [vorne1, hinten4],
"15": [vorne1, hinten5],
"16": [vorne1, hinten6],
"17": [vorne1, hinten7],
"18": [vorne1, hinten8],
"19": [vorne1, hinten9],
"20": [vorne2, hinten0],
"21": [vorne2, hinten1],
"22": [vorne2, hinten2],
"23": [vorne2, hinten3],
"24": [vorne2, hinten4],
"25": [vorne2, hinten5],
"26": [vorne2, hinten6],
"27": [vorne2, hinten7],
"28": [vorne2, hinten8],
"29": [vorne2, hinten9],
"30": [vorne3, hinten0],
"31": [vorne3, hinten1],
"32": [vorne3, hinten2],
"33": [vorne3, hinten3],
"34": [vorne3, hinten4],
"35": [vorne3, hinten5],
"36": [vorne3, hinten6],
"37": [vorne3, hinten7],
"38": [vorne3, hinten8],
"39": [vorne3, hinten9],
"40": [vorne4, hinten0],
"41": [vorne4, hinten1],
"42": [vorne4, hinten2],
"43": [vorne4, hinten3],
"44": [vorne4, hinten4],
"45": [vorne4, hinten5],
"46": [vorne4, hinten6],
"47": [vorne4, hinten7],
"48": [vorne4, hinten8],
"49": [vorne4, hinten9],
"50": [vorne5, hinten0],
"51": [vorne5, hinten1],
"52": [vorne5, hinten2],
"53": [vorne5, hinten3],
"54": [vorne5, hinten4],
"55": [vorne5, hinten5],
"56": [vorne5, hinten6],
"57": [vorne5, hinten7],
"58": [vorne5, hinten8],
"59": [vorne5, hinten9]
},
"getDotMinute": function() {
return 0;
}
};
$.fritteli.uhr.register('de_CH_seconds', layout);
}(jQuery));

276
js/uhr.js
View file

@ -77,7 +77,7 @@
this.start(); this.start();
} }
}; };
var setLanguage = function setLanugage(languageKey) { var setLanguage = function setLanguage(languageKey) {
if (languageKey !== this.options.language) { if (languageKey !== this.options.language) {
this.options.language = languageKey; this.options.language = languageKey;
var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea')); var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
@ -109,6 +109,12 @@
} }
update.bind(this)(); update.bind(this)();
}; };
var setMode = function(mode) {
this.options.mode = mode;
this.currentMinute = -1;
update.bind(this)();
setCookie.bind(this)('uhr-mode', mode);
};
var setWidth = function setWidth(width) { var setWidth = function setWidth(width) {
var e = this.element; var e = this.element;
e.css('width', width); e.css('width', width);
@ -134,8 +140,8 @@
} }
}; };
// private helper methods (not exported) // private helper methods (not exported)
var showConfigScreen = function showConfigScreen() { var toggleConfigScreen = function toggleConfigScreen() {
$('#uhr-controlpanel' + this.id).fadeIn('fast'); $('#uhr-controlpanel' + this.id).toggle('fast');
}; };
// set up // set up
var setupHTML = function setupHTML() { var setupHTML = function setupHTML() {
@ -152,11 +158,6 @@
setWidth.bind(this)(this.options.width); setWidth.bind(this)(this.options.width);
if (this.options.controls) { if (this.options.controls) {
var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
configlink.on('click', function() {
showConfigScreen.bind(this)();
}.bind(this));
e.after(configlink);
var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>'); var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
var content = $('<div class="content"></div>'); var content = $('<div class="content"></div>');
controlpanel.append(content); controlpanel.append(content);
@ -168,6 +169,14 @@
'<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' + '</label>'); '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' + '</label>');
content.append(toggleSwitch); content.append(toggleSwitch);
// time mode switch
var modeSwitch = $('<div class="onoffswitch" id="uhr-modeswitch' + this.id + '"></div>');
modeSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-modeswitch-checkbox' + this.id +
'" checked="checked" />');
modeSwitch.append('<label class="onoffswitch-label" for="uhr-modeswitch-checkbox' + this.id + '">' +
'<div class="modeswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' +
'</label>');
content.append(modeSwitch);
// language chooser // language chooser
if (uhrGlobals.languages.length > 1) { if (uhrGlobals.languages.length > 1) {
var languageChooser = $('<select id="uhr-languagechooser' + this.id + '"></select>'); var languageChooser = $('<select id="uhr-languagechooser' + this.id + '"></select>');
@ -187,11 +196,16 @@
} }
var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>'); var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
closebutton.on('click', function() { closebutton.on('click', function() {
$('#uhr-controlpanel' + this.id).fadeOut('fast'); $('#uhr-controlpanel' + this.id).hide('fast');
}.bind(this)); }.bind(this));
content.append(closebutton); content.append(closebutton);
e.after(controlpanel); e.after(controlpanel);
controlpanel.hide(); controlpanel.hide();
var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
configlink.on('click', function() {
toggleConfigScreen.bind(this)();
}.bind(this));
e.after(configlink);
} }
}; };
var wireFunctionality = function wireFunctionality() { var wireFunctionality = function wireFunctionality() {
@ -211,6 +225,27 @@
this.stop(); this.stop();
} }
// time mode switch
var modeSwitch = $('#uhr-modeswitch-checkbox' + this.id);
modeSwitch.on('click', function() {
if (this.options.mode === 'seconds') {
setMode.bind(this)('normal');
} else {
setMode.bind(this)('seconds');
}
}.bind(this));
var mode = $.cookie('uhr-mode' + this.id);
if (mode === undefined || this.options.force) {
mode = this.options.mode;
}
modeSwitch.prop('checked', mode !== 'seconds');
if (mode === 'seconds') {
setMode.bind(this)('seconds');
} else {
setMode.bind(this)('normal');
}
// language chooser // language chooser
var languageChooser = $('#uhr-languagechooser' + this.id); var languageChooser = $('#uhr-languagechooser' + this.id);
languageChooser.on('change', function() { languageChooser.on('change', function() {
@ -290,7 +325,7 @@
var update = function update() { var update = function update() {
if (isOn.bind(this)()) { if (isOn.bind(this)()) {
var time = this.options.time; var time = this.options.time;
if (!language.bind(this)().hasOwnProperty('seconds')) { if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
if (time.getMinutes() === this.currentMinute) { if (time.getMinutes() === this.currentMinute) {
return; return;
} }
@ -308,13 +343,16 @@
var hour = getHour.bind(this)(time); var hour = getHour.bind(this)(time);
var coarseMinute = getCoarseMinute.bind(this)(time); var coarseMinute = getCoarseMinute.bind(this)(time);
clear.bind(this)(); clear.bind(this)();
if (this.options.mode === 'seconds') {
highlight.bind(this)('second' + second);
} else {
highlight.bind(this)('on'); highlight.bind(this)('on');
for (var i = 1; i <= dotMinute; i++) { for (var i = 1; i <= dotMinute; i++) {
highlight.bind(this)('dot' + i); highlight.bind(this)('dot' + i);
} }
highlight.bind(this)('second' + second);
highlight.bind(this)('minute' + coarseMinute); highlight.bind(this)('minute' + coarseMinute);
highlight.bind(this)('hour' + hour); highlight.bind(this)('hour' + hour);
}
}; };
var highlight = function highlight(itemClass) { var highlight = function highlight(itemClass) {
this.element.find('.item.' + itemClass).addClass('active'); this.element.find('.item.' + itemClass).addClass('active');
@ -351,7 +389,6 @@
} }
return hour; return hour;
}; };
var language = function language() { var language = function language() {
var matchingLanguages = uhrGlobals.languages.filter(function(element) { var matchingLanguages = uhrGlobals.languages.filter(function(element) {
return (element.code === this.options.language); return (element.code === this.options.language);
@ -372,7 +409,8 @@
force: false, force: false,
controls: true, controls: true,
cookiePath: undefined, cookiePath: undefined,
autoresize: true autoresize: true,
mode: 'normal'
}, },
"start": start, "start": start,
"stop": stop, "stop": stop,
@ -380,6 +418,7 @@
"language": setLanguage, "language": setLanguage,
"theme": setTheme, "theme": setTheme,
"time": setTime, "time": setTime,
"mode": setMode,
"width": setWidth, "width": setWidth,
// constructor method // constructor method
"_create": create "_create": create
@ -424,6 +463,213 @@
} }
function UhrRendererV2Delegate(layout) { function UhrRendererV2Delegate(layout) {
var vorne0 = {
3: [2, 3, 4],
4: [1, 5],
5: [1, 4, 5],
6: [1, 3, 5],
7: [1, 2, 5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten0 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 10, 11],
6: [7, 9, 11],
7: [7, 8, 11],
8: [7, 11],
9: [8, 9, 10]
};
var vorne1 = {
3: [3],
4: [2, 3],
5: [3],
6: [3],
7: [3],
8: [3],
9: [2, 3, 4]
};
var hinten1 = {
3: [9],
4: [8, 9],
5: [9],
6: [9],
7: [9],
8: [9],
9: [8, 9, 10]
};
var vorne2 = {
3: [2, 3, 4],
4: [1, 5],
5: [5],
6: [4],
7: [3],
8: [2],
9: [1, 2, 3, 4, 5]
};
var hinten2 = {
3: [8, 9, 10],
4: [7, 11],
5: [11],
6: [10],
7: [9],
8: [8],
9: [7, 8, 9, 10, 11]
};
var vorne3 = {
3: [1, 2, 3, 4, 5],
4: [4],
5: [3],
6: [4],
7: [5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten3 = {
3: [7, 8, 9, 10, 11],
4: [10],
5: [9],
6: [10],
7: [11],
8: [7, 11],
9: [8, 9, 10]
};
var vorne4 = {
3: [4],
4: [3, 4],
5: [2, 4],
6: [1, 4],
7: [1, 2, 3, 4, 5],
8: [4],
9: [4]
};
var hinten4 = {
3: [10],
4: [9, 10],
5: [8, 10],
6: [7, 10],
7: [7, 8, 9, 10, 11],
8: [10],
9: [10]
};
var vorne5 = {
3: [1, 2, 3, 4, 5],
4: [1],
5: [1, 2, 3, 4],
6: [5],
7: [5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten5 = {
3: [7, 8, 9, 10, 11],
4: [7],
5: [7, 8, 9, 10],
6: [11],
7: [11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten6 = {
3: [9, 10],
4: [8],
5: [7],
6: [7, 8, 9, 10],
7: [7, 11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten7 = {
3: [7, 8, 9, 10, 11],
4: [11],
5: [10],
6: [9],
7: [8],
8: [8],
9: [8]
};
var hinten8 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 11],
6: [8, 9, 10],
7: [7, 11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten9 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 11],
6: [8, 9, 10, 11],
7: [11],
8: [10],
9: [8, 9]
};
var seconds= {
"0": [vorne0, hinten0],
"1": [vorne0, hinten1],
"2": [vorne0, hinten2],
"3": [vorne0, hinten3],
"4": [vorne0, hinten4],
"5": [vorne0, hinten5],
"6": [vorne0, hinten6],
"7": [vorne0, hinten7],
"8": [vorne0, hinten8],
"9": [vorne0, hinten9],
"10": [vorne1, hinten0],
"11": [vorne1, hinten1],
"12": [vorne1, hinten2],
"13": [vorne1, hinten3],
"14": [vorne1, hinten4],
"15": [vorne1, hinten5],
"16": [vorne1, hinten6],
"17": [vorne1, hinten7],
"18": [vorne1, hinten8],
"19": [vorne1, hinten9],
"20": [vorne2, hinten0],
"21": [vorne2, hinten1],
"22": [vorne2, hinten2],
"23": [vorne2, hinten3],
"24": [vorne2, hinten4],
"25": [vorne2, hinten5],
"26": [vorne2, hinten6],
"27": [vorne2, hinten7],
"28": [vorne2, hinten8],
"29": [vorne2, hinten9],
"30": [vorne3, hinten0],
"31": [vorne3, hinten1],
"32": [vorne3, hinten2],
"33": [vorne3, hinten3],
"34": [vorne3, hinten4],
"35": [vorne3, hinten5],
"36": [vorne3, hinten6],
"37": [vorne3, hinten7],
"38": [vorne3, hinten8],
"39": [vorne3, hinten9],
"40": [vorne4, hinten0],
"41": [vorne4, hinten1],
"42": [vorne4, hinten2],
"43": [vorne4, hinten3],
"44": [vorne4, hinten4],
"45": [vorne4, hinten5],
"46": [vorne4, hinten6],
"47": [vorne4, hinten7],
"48": [vorne4, hinten8],
"49": [vorne4, hinten9],
"50": [vorne5, hinten0],
"51": [vorne5, hinten1],
"52": [vorne5, hinten2],
"53": [vorne5, hinten3],
"54": [vorne5, hinten4],
"55": [vorne5, hinten5],
"56": [vorne5, hinten6],
"57": [vorne5, hinten7],
"58": [vorne5, hinten8],
"59": [vorne5, hinten9]
};
function parseArrayOrObject(letters, styleClass, input) { function parseArrayOrObject(letters, styleClass, input) {
if (typeof input !== 'undefined' && input !== null) { if (typeof input !== 'undefined' && input !== null) {
if (Array.isArray(input)) { if (Array.isArray(input)) {
@ -470,7 +716,11 @@
letters.push(line); letters.push(line);
}); });
parseArrayOrObject(letters, 'on', layout.permanent); parseArrayOrObject(letters, 'on', layout.permanent);
if (typeof layout.seconds !== 'undefined' && layout.seconds !== null) {
parseTimeDefinition(letters, 'second', layout.seconds); parseTimeDefinition(letters, 'second', layout.seconds);
} else {
parseTimeDefinition(letters, 'second', seconds)
}
parseTimeDefinition(letters, 'minute', layout.minutes); parseTimeDefinition(letters, 'minute', layout.minutes);
parseTimeDefinition(letters, 'hour', layout.hours); parseTimeDefinition(letters, 'hour', layout.hours);
return letters; return letters;

View file

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 6.3.3 # 6.4
css/uhr.css css/uhr.css
css/uhr-black.css css/uhr-black.css
@ -15,7 +15,6 @@ js/uhr.js
js/uhr-de.js js/uhr-de.js
js/uhr-de_CH.js js/uhr-de_CH.js
js/uhr-de_CH_genau.js js/uhr-de_CH_genau.js
js/uhr-de_CH-seconds.js
js/uhr-en.js js/uhr-en.js
js/uhr-fr.js js/uhr-fr.js
js/uhr-it.js js/uhr-it.js