manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Merge branch 'develop' into 'master'

Browse source 
Develop
This commit is contained in:
Manuel Friedli 2014-06-20 02:19:49 +02:00
parent e640fe4362 dc098233fe
commit 78dcd7c66f
7 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -6,8 +6,8 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
1. Benötigte Dateien einbinden
------------------------------
* Binde folgende Javascript-Dateien im HTML-Dokument ein:
* jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
* jquery-ui-1.10.3.custom.min.js (Falls nicht bereits vorhanden)
* jquery-2.1.0.min.js (Falls nicht bereits vorhanden)
* jquery-ui-1.10.4.custom.min.js (Falls nicht bereits vorhanden)
* Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt.
* jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden)
* uhr.js
@ -29,6 +29,7 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
Erstelle ein leeres `<div>` mit einer ID:
<div id="uhrcontainer"></div>
3. Uhr per Javascript konfigurieren
-----------------------------------
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
@ -49,7 +50,7 @@ Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
jQuery('div').uhr();
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
4. Weitere Optionen
-------------------

BIN
apple-touch-icon-precomposed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

13
index.html
View file

@ -15,7 +15,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html manifest="manifest.appcache">
<head>
<title>Die Zeit im Wort</title>
<title>Bärneruhr - Die Zeit im Wort</title>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
@ -28,12 +28,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<link rel="stylesheet" type="text/css" href="uhr-white.css" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Bärneruhr" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
</head>
<body style="padding:0;margin:0;">
<a href="info/">
<div id="uhr"></div>
</a>
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
<div id="uhr"></div>
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a></p>
<script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript">
(function($) {

9
info/index.html
View file

@ -13,7 +13,7 @@ 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/>.
-->
<html manifest="manifest.appcache">
<html manifest="../manifest.appcache">
<head>
<title>Die Zeit im Wort - Informationen</title>
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
@ -32,6 +32,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<link rel="stylesheet" type="text/css" href="info.css" />
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
</head>
<body>
<h1 id="main-title">Die Zeit im Wort</h1>
@ -107,7 +108,7 @@ 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, schwarzer Hintergrund, 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/>
<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, schwarzer Hintergrund, 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({
width: '200px',
theme: 'red'
@ -117,7 +118,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>Es existieren die folgenden Konfigurationsoptionen:</p>
<dl>
<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>
<dt><code>status</code></dt>
@ -155,7 +156,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<h2 id="information">Informationen</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/>
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://git.friedli.info/manuel/uhr">https://git.friedli.info/manuel/uhr</a></p>
<p>Der Quellcode ist frei zugänglich unter <a href="https://git.friedli.info/manuel/uhr">https://git.friedli.info/manuel/uhr</a>.</p>
<h2 id="license">Lizenzbestimmungen</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 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>

3
info/info.css
View file

@ -1,3 +1,6 @@
body {
font-size: 120%;
}
code {
white-space: pre;
}

5
manifest.appcache
View file

@ -1,8 +1,9 @@
CACHE MANIFEST
# 4.2.2
# 5.0
COPYING
README.md
apple-touch-icon-precomposed.png
favicon.png
index.html
jquery-2.1.0.min.js
@ -20,4 +21,4 @@ uhr.css
uhr.js
uhr.woff
info/index.html
info/info.css
info/info.css

14
uhr.js
View file

@ -21,7 +21,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
window._uhr = {
id: 0,
languages: new Array()
languages: []
};
$.widget("fritteli.uhr", {
options: {
@ -195,7 +195,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.append('<div class="letterarea"></div>');
e.append('<div class="reflection"></div>');
e.css('width', this.options.width);
var realWidth = e.width()
var realWidth = e.width();
e.width(realWidth);
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
@ -211,7 +211,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.after(toggleSwitch);
// language chooser
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>')
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
for (var code in window._uhr.languages) {
if (window._uhr.languages.hasOwnProperty(code)) {
var language = window._uhr.languages[code];
@ -231,7 +231,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
},
_wireFunctionality: function() {
var e = this.element;
var uhr = this;
// on/off switch
@ -306,7 +305,7 @@ UhrRenderer.prototype.render = function(uhr, beforeshow) {
}
renderer.renderarea.fadeIn('fast');
});
}
};
/**
* Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
* @param value Der Buchstabe, der Dargestellt werden soll.
@ -317,18 +316,19 @@ function Letter(value, style) {
this.style = style || '';
this.getStyle = function() {
return 'item letter ' + style;
}
};
this.getValue = function() {
return value;
}
}
Letter.prototype.toString = function letterToString() {
return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>';
}
};
/**
* Hilfsfunktion, um einen Buchstaben zu erzeugen.
*
* @param letter string: Der Buchstabe, der angezeigt werden soll
* @param style string: CSS-Klasse(n) als String
* @example l('I', 'is') erzeugt den Buchstaben 'I' mit der CSS-Styleklasse 'is'
*/
function l(letter, style) {