Merge branch 'develop' into feature/splashscreen
This commit is contained in:
commit
bebb0f306d
8 changed files with 389 additions and 356 deletions
11
README.md
11
README.md
|
@ -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
|
||||||
|
|
2
VERSION
2
VERSION
|
@ -1 +1 @@
|
||||||
6.3.3
|
6.4
|
||||||
|
|
61
css/uhr.css
61
css/uhr.css
|
@ -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);
|
border-radius: 0.5em;
|
||||||
position: fixed;
|
box-shadow: 0 0 1em black;
|
||||||
width: 100%;
|
background-color: #fff;
|
||||||
height: 100%;
|
display: inline-block;
|
||||||
top: 0;
|
padding: 0.5em;
|
||||||
left: 0;
|
position: sticky;
|
||||||
}
|
bottom: 0;
|
||||||
|
margin-left: 1em;
|
||||||
@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;
|
|
||||||
box-shadow: 0 0 1em black;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
132
info/index.html
132
info/index.html
|
@ -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"><head></code></a></li>
|
<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="#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><head></code><a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
<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
|
<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/>
|
Javascript eingebunden werden</strong>.<br/>
|
||||||
<code><link rel="stylesheet" type="text/css" href="uhr.css" />
|
<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-black.css" data-class="black" data-name="Schwarz" />
|
||||||
|
@ -108,12 +112,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<script type="text/javascript" src="uhr-it.js"></script></code>
|
<script type="text/javascript" src="uhr-it.js"></script></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><div></code>-Element:<br/>
|
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code><div></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><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">
|
<code><script type="text/javascript">
|
||||||
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/>.
|
||||||
</script></code>
|
</script></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
|
||||||
<<a href="http://www.gnu.org/philosophy/why-not-lgpl.html">http://www.gnu.org/philosophy/why-not-lgpl.html</a>>.</p>
|
<<a href="http://www.gnu.org/philosophy/why-not-lgpl.html">http://www.gnu.org/philosophy/why-not-lgpl.html</a>>.
|
||||||
|
</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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));
|
|
288
js/uhr.js
288
js/uhr.js
|
@ -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)();
|
||||||
highlight.bind(this)('on');
|
if (this.options.mode === 'seconds') {
|
||||||
for (var i = 1; i <= dotMinute; i++) {
|
highlight.bind(this)('second' + second);
|
||||||
highlight.bind(this)('dot' + i);
|
} else {
|
||||||
|
highlight.bind(this)('on');
|
||||||
|
for (var i = 1; i <= dotMinute; i++) {
|
||||||
|
highlight.bind(this)('dot' + i);
|
||||||
|
}
|
||||||
|
highlight.bind(this)('minute' + coarseMinute);
|
||||||
|
highlight.bind(this)('hour' + hour);
|
||||||
}
|
}
|
||||||
highlight.bind(this)('second' + second);
|
|
||||||
highlight.bind(this)('minute' + coarseMinute);
|
|
||||||
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);
|
||||||
parseTimeDefinition(letters, 'second', layout.seconds);
|
if (typeof layout.seconds !== 'undefined' && layout.seconds !== null) {
|
||||||
|
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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue