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

Merge branch 'feature/jqueryplugin' of /var/lib/git/repositories/manuel/uhr into develop

Browse source
This commit is contained in:
Manuel Friedli 2014-01-11 23:45:49 +01:00
commit 22deff86f7
10 changed files with 329 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
README.md
View file

@ -1,13 +1,15 @@
Bärneruhr Bärneruhr
========= =========
Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht das so einfach, dass es sogar deine Grossmutter tun könnte!
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.0.3.min.js (Falls nicht bereits vorhanden)
* jquery.cookie.js (Falls nicht bereits vorhanden) * jquery-ui-1.10.3.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 * uhr.js
* Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: * Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
* uhr-de_CH.js * uhr-de_CH.js
@ -26,14 +28,14 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach.
---------------------------------------- ----------------------------------------
Erstelle ein leeres `<div>` mit einer ID: Erstelle ein leeres `<div>` mit einer ID:
<div id="meineuhr"></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:
new Uhr(jQuery('#meineuhr')); jQuery('#uhrcontainer').uhr();
Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
* Breite ist 100% des Eltenelements * Breite ist 100% des Eltenelements
* Farbe ist Schwarz * Farbe ist Schwarz
@ -42,17 +44,38 @@ Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt ein
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
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
4. Weitere Optionen 4. Weitere Optionen
------------------- -------------------
Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
new Uhr(jQuery('#uhrcontainer'), { jQuery('#uhrcontainer').uhr({
status: 'on', // 'on' oder 'off' status: 'on', // 'on' (default) oder 'off'
theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white'
layout: 'en', // 'de_DE', 'de' oder 'en' (je nach eingebundenen Sprachdateien) language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien)
width: '20em' // eine CSS-Grössenangabe width: '100%', // eine CSS-Grössenangabe (default: 100%)
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
// true: immer die angegebene Konfiguration verwenden
}); });
5. Sonderfunktionen
-------------------
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit
{
time: new Date()
}
kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Beim Klick auf den On/Off-Schalter oder beim Wechsel der Sprache wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an.
Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden:
jQuery('#uhrcontainer').uhr("time", new Date());
Viel Spass! Viel Spass!
A. Lizenzbestimmungen A. Lizenzbestimmungen

BIN
favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
index.html
View file

@ -17,7 +17,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<head> <head>
<title>Die Zeit als Wort - in HTML, CSS und JS</title> <title>Die Zeit als Wort - in HTML, CSS und JS</title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
<script type="text/javascript" src="uhr.js"></script> <script type="text/javascript" src="uhr.js"></script>
<link rel="stylesheet" type="text/css" href="uhr.css" /> <link rel="stylesheet" type="text/css" href="uhr.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" /> <link rel="stylesheet" type="text/css" href="uhr-black.css" />
@ -25,6 +26,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<link rel="stylesheet" type="text/css" href="uhr-green.css" /> <link rel="stylesheet" type="text/css" href="uhr-green.css" />
<link rel="stylesheet" type="text/css" href="uhr-red.css" /> <link rel="stylesheet" type="text/css" href="uhr-red.css" />
<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" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head> </head>
<body style="padding:0;margin:0;"> <body style="padding:0;margin:0;">
@ -34,15 +36,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<script type="text/javascript" src="uhr-de.js"></script> <script type="text/javascript" src="uhr-de.js"></script>
<script type="text/javascript" src="uhr-en.js"></script> <script type="text/javascript" src="uhr-en.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var height = jQuery(window).height(); (function($) {
var width = jQuery(window).width(); var width = $(window).width();
var size = height < width ? height : width; var height = $(window).height();
new Uhr(jQuery('#uhr'), { var size = (width < height ? width : height) + 'px';
layout: 'de_CH', $('#uhr').uhr({
theme: 'black', width: size
status: 'on',
width: size + 'px'
}); });
})(jQuery);
</script> </script>
</body> </body>
</html> </html>

0
jquery.cookie.js → jquery-cookie-1.4.0.js
View file

6
jquery-ui-1.10.3.custom.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

18
manifest.appcache
View file

@ -1,18 +1,20 @@
CACHE MANIFEST CACHE MANIFEST
# 3.0.8 # 4.0.0
COPYING COPYING
favicon.png
index.html index.html
jquery-2.0.3.min.js jquery-2.0.3.min.js
jquery.cookie.js jquery-cookie-1.4.0.js
uhr.js jquery-ui-1.10.3.custom.min.js
uhr-de_CH.js
uhr-de.js
uhr-en.js
uhr.css
uhr-black.css uhr-black.css
uhr-red.css
uhr-blue.css uhr-blue.css
uhr-de.js
uhr-de_CH.js
uhr-en.js
uhr-green.css uhr-green.css
uhr-red.css
uhr-white.css uhr-white.css
uhr.css
uhr.js
uhr.woff uhr.woff

2
uhr-de.js
View file

@ -27,4 +27,4 @@ var layout = {
[h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')] [h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')]
] ]
}; };
Uhr.register('de', layout); window._uhr.languages['de'] = layout;

2
uhr-de_CH.js
View file

@ -27,4 +27,4 @@ var layout = {
[h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')] [h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')]
] ]
}; };
Uhr.register('de_CH', layout); window._uhr.languages['de_CH'] = layout;

2
uhr-en.js
View file

@ -34,4 +34,4 @@ var layout = {
return hour; return hour;
} }
}; };
Uhr.register('en', layout); window._uhr.languages['en'] = layout;

416
uhr.js
View file

@ -12,127 +12,160 @@ 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/>.
*/ */
/** (function($) {
* Die Uhr. "use strict";
* @param clockarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll.
* @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. if (window._uhr !== undefined) {
*/ return;
//if (typeof Uhr === 'undefined') { }
function Uhr(clockarea, settings) {
this.id = Uhr.id++; window._uhr = {
this.timer = null; id: 0,
this.currentTheme = null; languages: new Array()
this.currentLayout = {}; };
this.currentMinute = -1; $.widget("fritteli.uhr", {
this.initHTMLElements(clockarea, settings || {}); options: {
} width: '100%',
Uhr.id = 0; status: 'on',
Uhr.layouts = new Array(); language: 'de_CH',
Uhr.register = function (locale, layout) { theme: 'black',
Uhr.layouts[locale] = layout; force: false
} },
Uhr.prototype.toggle = function() { start: function() {
if (this.isOn()) { if (!this._isOn()) {
var uhr = this;
this._timer = window.setInterval(function() {
uhr._update();
}, 1000);
this._update();
$.cookie('uhr-status' + this._id, 'on', {expires: 365, path: '/'});
} else {
}
},
stop: function() {
if(this._isOn()) {
window.clearInterval(this._timer);
this._timer = null;
this._update();
$.cookie('uhr-status' + this._id, 'off', {expires: 365, path: '/'});
}
},
toggle: function() {
if(this._isOn()) {
this.stop(); this.stop();
} else { } else {
this.start(); this.start();
} }
} },
Uhr.prototype.start = function() { language: function(languageKey) {
if (!this.isOn()) { if (languageKey !== this.options.language) {
this.options.language = languageKey;
var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea'));
var uhr = this; var uhr = this;
this.timer = window.setInterval(function() {uhr.update();}, 1000); renderer.render(this, function() {
this.update(); uhr._currentMinute = -1;
jQuery.cookie('status' + this.id, 'on', {expires: 365, path: '/'}); uhr._update();
});
$.cookie('uhr-language' + this._id, languageKey, {expires: 365, path: '/'});
this._update();
} }
} },
Uhr.prototype.stop = function() { theme: function(theme) {
if (this.isOn()) { if (theme != this.options.theme) {
window.clearInterval(this.timer); this.element.removeClass(this.options.theme).addClass(theme);
this.timer = null; $('#uhr-onoffswitch' + this._id).removeClass(this.options.theme).addClass(theme);
this.update(); this.options.theme = theme;
jQuery.cookie('status' + this.id, 'off', {expires: 365, path: '/'}); $.cookie('uhr-theme' + this._id, theme, {expires: 365, path: '/'});
} }
} },
Uhr.prototype.isOn = function() { time: function(time) {
return this.timer != null; this.options.time = time;
} if (time == null) {
Uhr.prototype.setLayout = function(locale) { this._currentMinute = -1;
var newLayout = Uhr.layouts[locale]; this._update();
if (newLayout !== undefined && newLayout != this.currentLayout) { } else {
this.currentLayout = newLayout; if (this._timer != null) {
var renderer = new UhrRenderer(this.currentLayout, this.letterarea); window.clearInterval(this._timer);
renderer.render(this);
jQuery.cookie('layout' + this.id, locale, {expires: 365, path: '/'});
} }
} var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea'));
Uhr.prototype.setTheme = function(theme) { var uhr = this;
if (theme != this.currentTheme) { renderer.render(this, function() {
this.clockarea.removeClass(this.currentTheme); uhr._show(time);
this.toggleSwitch.removeClass(this.currentTheme); });
this.clockarea.addClass(theme);
this.toggleSwitch.addClass(theme);
this.currentTheme = theme;
jQuery.cookie('theme' + this.id, theme, {expires: 365, path: '/'});
} }
} },
Uhr.prototype.update = function() { // private variables
if (this.isOn()) { _id: -1,
var now = new Date(); _timer: null,
if (now.getMinutes() == this.currentMinute) { _currentMinute: -1,
// private methods
_isOn: function() {
return this._timer !== null;
},
_update: function() {
if (this._isOn()) {
var time = new Date();
if (time.getMinutes() == this._currentMinute) {
return; return;
} }
this.currentMinute = now.getMinutes(); this._currentMinute = time.getMinutes();
var dotMinute = this.getDotMinute(now); this._show(time);
var hour = this.getHour(now);
var coarseMinute = this.getCoarseMinute(now);
this.clear();
this.highlight('on');
for (var i = 1; i <= dotMinute; i++) {
this.highlight('dot' + i);
}
this.highlight('minute' + coarseMinute);
hour = this.normalizeHour(hour);
this.highlight('hour' + hour);
if (coarseMinute == 0) {
this.highlight('sharphour');
}
} else { } else {
this.clear(); this._clear();
this.currentMinute = -1; this._currentMinute = -1;
} }
} },
Uhr.prototype.clear = function() { _show: function(time) {
this.clockarea.find('.item').removeClass('active'); var dotMinute = this._getDotMinute(time);
} var hour = this._getHour(time);
Uhr.prototype.highlight = function(itemClass) { var coarseMinute = this._getCoarseMinute(time);
this.clockarea.find('.item.' + itemClass).addClass('active'); this._clear();
} this._highlight('on');
Uhr.prototype.getHour = function(date) { for (var i = 1; i <= dotMinute; i++) {
if (typeof this.currentLayout.getHour === 'function') { this._highlight('dot' + i);
return this.currentLayout.getHour(date); }
this._highlight('minute' + coarseMinute);
hour = this._normalizeHour(hour);
this._highlight('hour' + hour);
if (coarseMinute == 0) {
this._highlight('sharphour');
}
},
_language: function() {
return window._uhr.languages[this.options.language];
},
_highlight: function(itemClass) {
this.element.find('.item.' + itemClass).addClass('active');
},
_clear: function() {
this.element.find('.item').removeClass('active');
},
_getHour: function(date) {
if (typeof this._language().getHour === 'function') {
return this._language().getHour(date);
} }
var hour = date.getHours(); var hour = date.getHours();
if (date.getMinutes() >= 25) { if (date.getMinutes() >= 25) {
return hour + 1; return hour + 1;
} }
return hour; return hour;
} },
Uhr.prototype.getCoarseMinute = function(date) { _getCoarseMinute: function(date) {
if (typeof this.currentLayout.getCoarseMinute === 'function') { if (typeof this._language().getCoarseMinute === 'function') {
return this.currentLayout.getCoarseMinute(date); return this._language().getCoarseMinute(date);
} }
var minutes = date.getMinutes(); var minutes = date.getMinutes();
return minutes - this.getDotMinute(date); return minutes - this._getDotMinute(date);
} },
Uhr.prototype.getDotMinute = function(date) { _getDotMinute: function(date) {
if (typeof this.currentLayout.getDotMinute === 'function') { if (typeof this._language().getDotMinute === 'function') {
return this.currentLayout.getDotMinute(date); return this._language().getDotMinute(date);
} }
var minutes = date.getMinutes(); var minutes = date.getMinutes();
return minutes % 5; return minutes % 5;
} },
Uhr.prototype.normalizeHour = function(hour) { _normalizeHour: function(hour) {
if (hour > 12) { if (hour > 12) {
hour %= 12; hour %= 12;
} }
@ -140,122 +173,108 @@ Uhr.prototype.normalizeHour = function(hour) {
return 12; return 12;
} }
return hour; return hour;
} },
Uhr.prototype.initHTMLElements = function(clockarea, presets) { _create: function() {
this.createHTMLElements(clockarea, presets.width); this._id = window._uhr.id++;
var force = presets.force || false; this._setupHTML();
this.initToggleSwitch(presets.status, force); this._wireFunctionality();
this.initLayoutSwitch(presets.layout, force); if (this.options.time !== undefined) {
this.initThemeSwitch(presets.theme, force); this.time(this.options.time);
}
Uhr.prototype.createHTMLElements = function(clockarea, width) {
this.createClockarea(clockarea, width)
this.letterarea = this.clockarea.find('.letterarea');
this.createToggleSwitch();
this.createLayoutSwitch();
this.createThemeSwitch();
}
Uhr.prototype.createClockarea = function(clockarea, width) {
clockarea.addClass('uhr');
clockarea.empty();
clockarea.append('<span class="item dot dot1"></span>');
clockarea.append('<span class="item dot dot2"></span>');
clockarea.append('<span class="item dot dot3"></span>');
clockarea.append('<span class="item dot dot4"></span>');
clockarea.append('<div class="letterarea"></div>');
clockarea.append('<div class="reflection"></div>');
if(width == undefined) {
width = '100%';
} }
clockarea.css('width', width); },
var realWidth = clockarea.width() _setupHTML: function() {
clockarea.width(realWidth); var e = this.element;
clockarea.height(realWidth); // Base clock area
clockarea.css('font-size', (realWidth / 40) + 'px'); e.addClass('uhr');
this.clockarea = clockarea e.empty();
} e.append('<span class="item dot dot1"></span>');
Uhr.prototype.createToggleSwitch = function() { e.append('<span class="item dot dot2"></span>');
this.toggleSwitch = jQuery('<div class="onoffswitch"></div>'); e.append('<span class="item dot dot3"></span>');
var input = jQuery('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />'); e.append('<span class="item dot dot4"></span>');
this.toggleSwitch.append(input); e.append('<div class="letterarea"></div>');
this.toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">' e.append('<div class="reflection"></div>');
e.css('width', this.options.width);
var realWidth = e.width()
e.width(realWidth);
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
// on/off switch
var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this._id + '"></div>');
toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this._id + '" checked="checked" />');
toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this._id + '">'
+ '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>' + '<div class="onoffswitch-switch"></div>'
+ '</label>'); + '</label>');
this.clockarea.after(this.toggleSwitch); e.after(toggleSwitch);
}
Uhr.prototype.createLayoutSwitch = function () { // language chooser
this.layoutSwitch = jQuery('<select></select>') var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>')
for (var code in Uhr.layouts) { for (var code in window._uhr.languages) {
if (Uhr.layouts.hasOwnProperty(code)) { if (window._uhr.languages.hasOwnProperty(code)) {
var layout = Uhr.layouts[code]; var language = window._uhr.languages[code];
var option = jQuery('<option value="' + code + '">' + layout.language + '</option>') languageChooser.append('<option value="' + code + '">' + language.language + '</option>');
this.layoutSwitch.append(option);
} }
} }
this.clockarea.after(this.layoutSwitch); e.after(languageChooser);
}
Uhr.prototype.createThemeSwitch = function () { // theme chooser
this.themeSwitch = jQuery('<select></select>'); var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
this.themeSwitch.append('<option value="black">Schwarz</option>'); themeChooser.append('<option value="black">Schwarz</option>');
this.themeSwitch.append('<option value="red">Rot</option>'); themeChooser.append('<option value="red">Rot</option>');
this.themeSwitch.append('<option value="blue">Blau</option>'); themeChooser.append('<option value="blue">Blau</option>');
this.themeSwitch.append('<option value="green">Grün</option>'); themeChooser.append('<option value="green">Grün</option>');
this.themeSwitch.append('<option value="white">Weiss</option>'); themeChooser.append('<option value="white">Weiss</option>');
this.clockarea.after(this.themeSwitch); e.after(themeChooser);
} },
Uhr.prototype.initToggleSwitch = function(defaultValue, overrideCookie) { _wireFunctionality: function() {
var input = jQuery('#onoffswitch' + this.id); var e = this.element;
var uhr = this; var uhr = this;
input.on('click', function() {
// on/off switch
var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this._id);
toggleSwitch.on('click', function() {
uhr.toggle(); uhr.toggle();
}); });
var status = jQuery.cookie('status' + this.id); var status = $.cookie('uhr-status' + this._id);
if (status == undefined || (overrideCookie && (defaultValue != undefined))) { if (status == undefined || this.options.force) {
status = defaultValue; status = this.options.status;
}
if (status == undefined || status == 'undefined') {
status = 'on';
} }
toggleSwitch.prop('checked', status == 'on');
if (status == 'on') { if (status == 'on') {
this.start(); this.start();
input.prop('checked', true);
} else { } else {
this.stop(); this.stop();
input.prop('checked', false);
} }
}
Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) { // language chooser
var uhr = this; var languageChooser = $('#uhr-languagechooser' + this._id);
this.layoutSwitch.on('change', function() { languageChooser.on('change', function() {
uhr.setLayout(this.value); uhr.language(this.value);
}); });
var selectedLayout = jQuery.cookie('layout' + this.id); var selectedLanguage = $.cookie('uhr-language' + this._id);
if (selectedLayout == undefined || (overrideCookie && (defaultValue != undefined))) { if (selectedLanguage == undefined || this.options.force) {
selectedLayout = defaultValue; selectedLanguage = this.options.language;
} }
if (selectedLayout == undefined) { languageChooser.val(selectedLanguage);
// FIXME not nice, hardcoded default-value this.options.language = "";
selectedLayout = 'de_CH'; this.language(selectedLanguage);
}
this.layoutSwitch.val(selectedLayout); // theme chooser
this.setLayout(selectedLayout); var themeChooser = $('#uhr-themechooser' + this._id);
} themeChooser.on('change', function() {
Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { uhr.theme(this.value);
var uhr = this;
this.themeSwitch.on('change', function() {
uhr.setTheme(this.value);
}); });
var selectedTheme = jQuery.cookie('theme' + this.id); var selectedTheme = $.cookie('uhr-theme' + this._id);
if (selectedTheme == undefined || (overrideCookie && (defaultValue != undefined))) { if (selectedTheme == undefined || this.options.force) {
selectedTheme = defaultValue; selectedTheme = this.options.theme;
} }
if (selectedTheme == undefined || selectedTheme == 'undefined') { themeChooser.val(selectedTheme);
selectedTheme = 'black'; this.options.theme = "";
this.theme(selectedTheme);
} }
this.themeSwitch.val(selectedTheme); });
this.setTheme(selectedTheme); })(jQuery);
}
/** /**
* Hilfsklasse zum Rendern der Uhr. * Hilfsklasse zum Rendern der Uhr.
@ -266,7 +285,7 @@ function UhrRenderer(layout, renderarea) {
this.layout = layout; this.layout = layout;
this.renderarea = renderarea; this.renderarea = renderarea;
} }
UhrRenderer.prototype.render = function(uhr) { UhrRenderer.prototype.render = function(uhr, beforeshow) {
var renderer = this; var renderer = this;
this.renderarea.fadeOut('fast', function() { this.renderarea.fadeOut('fast', function() {
renderer.renderarea.empty(); renderer.renderarea.empty();
@ -279,12 +298,12 @@ UhrRenderer.prototype.render = function(uhr) {
renderer.renderarea.append('<br/>'); renderer.renderarea.append('<br/>');
} }
} }
uhr.currentMinute = -1; if (typeof beforeshow === 'function') {
uhr.update(); 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,7 +336,7 @@ function l(letter, style) {
* *
* @param letter string: Der Buchstabe, der angezeigt werden soll * @param letter string: Der Buchstabe, der angezeigt werden soll
* @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll * @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll
* @example h('Z', 2), 11 erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird * @example h('Z', 2, 11) erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird
*/ */
function h(letter) { function h(letter) {
var style = ''; var style = '';
@ -340,4 +359,3 @@ function m(letter) {
} }
return l(letter, style); return l(letter, style);
} }
//}