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
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 1. Benötigte Dateien einbinden
------------------------------ ------------------------------
* Binde folgende Javascript-Dateien im HTML-Dokument ein: * Binde folgende Javascript-Dateien im HTML-Dokument ein:
* jquery-2.0.3.min.js (Falls nicht bereits vorhanden) * jquery-2.1.0.min.js (Falls nicht bereits vorhanden)
* jquery-ui-1.10.3.custom.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. * Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt.
* jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden) * jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden)
* uhr.js * 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: Erstelle ein leeres `<div>` mit einer ID:
<div id="uhrcontainer"></div> <div id="uhrcontainer"></div>
3. Uhr per Javascript konfigurieren 3. Uhr per Javascript konfigurieren
----------------------------------- -----------------------------------
Initialisiere die Uhr mit einer einzigen Zeile Javascript: 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(); 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 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

11
index.html
View file

@ -15,7 +15,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<html manifest="manifest.appcache"> <html manifest="manifest.appcache">
<head> <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-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-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="jquery-cookie-1.4.0.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="stylesheet" type="text/css" href="uhr-white.css" />
<link rel="shortcut icon" type="image/png" href="favicon.png" /> <link rel="shortcut icon" type="image/png" href="favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <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> </head>
<body style="padding:0;margin:0;"> <body style="padding:0;margin:0;">
<a href="info/">
<div id="uhr"></div> <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>. <a href="info/">Read more!</a></p>
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
<script type="text/javascript" src="uhr-de_CH.js"></script> <script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (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 You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<html manifest="manifest.appcache"> <html manifest="../manifest.appcache">
<head> <head>
<title>Die Zeit im Wort - Informationen</title> <title>Die Zeit im Wort - Informationen</title>
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script> <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="stylesheet" type="text/css" href="info.css" />
<link rel="shortcut icon" type="image/png" href="../favicon.png" /> <link rel="shortcut icon" type="image/png" href="../favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <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> </head>
<body> <body>
<h1 id="main-title">Die Zeit im Wort</h1> <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> &lt;/script&gt;</code>
</p> </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({ <code>jQuery('#uhr').uhr({
width: '200px', width: '200px',
theme: 'red' 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> <p>Es existieren die folgenden Konfigurationsoptionen:</p>
<dl> <dl>
<dt><code>width</code></dt> <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/>Typ: String
<br/>Default: <code>'100%'</code></dd> <br/>Default: <code>'100%'</code></dd>
<dt><code>status</code></dt> <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> <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/> <p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.</p> Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.</p>
<p>Der Quellcode ist frei zugänglich unter <a href="https://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> <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> <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> <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 { code {
white-space: pre; white-space: pre;
} }

3
manifest.appcache
View file

@ -1,8 +1,9 @@
CACHE MANIFEST CACHE MANIFEST
# 4.2.2 # 5.0
COPYING COPYING
README.md README.md
apple-touch-icon-precomposed.png
favicon.png favicon.png
index.html index.html
jquery-2.1.0.min.js jquery-2.1.0.min.js

14
uhr.js
View file

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