/* 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 . */ (function($) { "use strict"; if (window.Uhr !== undefined) { return; } window.Uhr = { id: 0, start: function(e) { if (!Uhr.isOn(e)) { e.data('timer', window.setInterval(function() {Uhr.update(e);}, 1000)); Uhr.update(e); jQuery.cookie('status' + e.data('id'), 'on', {expires: 365, path: '/'}); } }, stop: function(e) { if (Uhr.isOn(e)) { window.clearInterval(e.data('timer')); e.data('timer', null); Uhr.update(e); jQuery.cookie('status' + e.data('id'), 'off', {expires: 365, path: '/'}); } }, update: function(e) { if (Uhr.isOn(e)) { var now = new Date(); if (now.getMinutes() == e.data('currentMinute')) { return; } e.data('currentMinute', now.getMinutes()); var dotMinute = Uhr.getDotMinute(e, now); var hour = Uhr.getHour(e, now); var coarseMinute = this.getCoarseMinute(e, now); Uhr.clear(e); Uhr.highlight(e, 'on'); for (var i = 1; i <= dotMinute; i++) { Uhr.highlight(e, 'dot' + i); } Uhr.highlight(e, 'minute' + coarseMinute); hour = this.normalizeHour(hour); Uhr.highlight(e, 'hour' + hour); if (coarseMinute == 0) { Uhr.highlight(e, 'sharphour'); } } else { Uhr.clear(e); e.data('currentMinute', -1); } }, toggle: function(e) { if (Uhr.isOn(e)) { Uhr.stop(e); } else { Uhr.start(e); } }, clear: function(e) { e.find('.item').removeClass('active'); }, setLanguage: function(e, language) { var newLanguage = Uhr.layouts[language]; if (newLanguage !== undefined && newLanguage != e.data('currentLanguage')) { e.data('currentLanguage', newLanguage); var renderer = new UhrRenderer(newLanguage, e.find('.letterarea')); renderer.render(e); jQuery.cookie('language' + e.data('id'), language, {expires: 365, path: '/'}); } }, setTheme: function(e, theme) { var currentTheme = e.data('currentTheme'); if (theme != currentTheme) { e.removeClass(currentTheme).addClass(theme); e.data('toggleSwitch').removeClass(currentTheme).addClass(theme); e.data('currentTheme', theme); jQuery.cookie('theme' + e.data('id'), theme, {expires: 365, path: '/'}); } }, isOn: function(e) { return e.data('timer') != null; }, highlight: function(e, itemClass) { e.find('.item.' + itemClass).addClass('active'); }, getHour: function(e, date) { //FIXME /* if (typeof e.data('currentLayout').getHour === 'function') { return e.data('currentLayout').getHour(date); } */ var hour = date.getHours(); if (date.getMinutes() >= 25) { return hour + 1; } return hour; }, getCoarseMinute: function(e, date) { //FIXME /* if (typeof e.data('currentLayout').getCoarseMinute === 'function') { return e.data('currentLayout').getCoarseMinute(date); } */ var minutes = date.getMinutes(); return minutes - Uhr.getDotMinute(e, date); }, getDotMinute: function(e, date) { //FIXME /* if (typeof e.data('currentLayout').getDotMinute === 'function') { return e.data('currentLayout').getDotMinute(date); } */ var minutes = date.getMinutes(); return minutes % 5; }, normalizeHour: function(hour) { if (hour > 12) { hour %= 12; } if (hour == 0) { return 12; } return hour; }, registerLanguage: function(languageKey, layout) { this.layouts[languageKey] = layout; }, layouts: new Array() } $.fn.uhr = function(options) { var settings = $.extend({ width: '100%', force: false, status: 'on', language: 'de_CH', theme: 'black' }, options); return this.each(function() { var e = $(this); var id = window.Uhr.id++; e.data('id', id); e.data('timer', null); e.addClass('uhr'); e.empty(); e.append(''); e.append(''); e.append(''); e.append(''); e.append('
'); e.append('
'); e.css('width', settings.width); var realWidth = e.width() e.width(realWidth); e.height(realWidth); e.css('font-size', (realWidth / 40) + 'px'); var toggleSwitch = jQuery('
'); toggleSwitch.append(''); toggleSwitch.append(''); e.after(toggleSwitch); e.data('toggleSwitch', toggleSwitch); var languageSwitch = jQuery('') // FIXME handle layouts correctly for (var code in Uhr.layouts) { if (Uhr.layouts.hasOwnProperty(code)) { var language = Uhr.layouts[code]; var option = ''; languageSwitch.append(option); } } e.after(languageSwitch); e.data('languageSwitch', languageSwitch); var themeSwitch = jQuery(''); themeSwitch.append(''); themeSwitch.append(''); themeSwitch.append(''); themeSwitch.append(''); themeSwitch.append(''); e.after(themeSwitch); e.data('themeSwitch', themeSwitch); var input = jQuery('#onoffswitch' + id); input.on('click', function() { window.Uhr.toggle(e); }); var status = jQuery.cookie('status' + id); if (status == undefined || settings.force) { status = settings.status; } if (status == 'on') { window.Uhr.start(e); input.prop('checked', true); } else { window.Uhr.stop(e); input.prop('checked', false); } e.data('languageSwitch').on('change', function() { window.Uhr.setLanguage(e, this.value); }); var selectedLanguage = jQuery.cookie('language' + id); if (selectedLanguage == undefined || settings.force) { selectedLanguage = settings.language; } e.data('languageSwitch').val(selectedLanguage); window.Uhr.setLanguage(e, selectedLanguage); e.data('themeSwitch').on('change', function() { window.Uhr.setTheme(e, this.value); }); var selectedTheme = jQuery.cookie('theme' + id); if (selectedTheme == undefined || settings.force) { selectedTheme = settings.theme; } e.data('themeSwitch').val(selectedTheme); window.Uhr.setTheme(e, selectedTheme); }); }; })(jQuery); (function($){ return this; /** * Die Uhr. * @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 (typeof Uhr === 'undefined') { function Uhr(clockarea, settings) { this.id = Uhr.id++; this.timer = null; this.currentTheme = null; this.currentLayout = {}; this.currentMinute = -1; this.initHTMLElements(clockarea, settings || {}); } Uhr.id = 0; Uhr.layouts = new Array(); Uhr.register = function (locale, layout) { Uhr.layouts[locale] = layout; } Uhr.prototype.toggle = function() { if (this.isOn()) { this.stop(); } else { this.start(); } } Uhr.prototype.start = function() { if (!this.isOn()) { var uhr = this; this.timer = window.setInterval(function() {uhr.update();}, 1000); this.update(); jQuery.cookie('status' + this.id, 'on', {expires: 365, path: '/'}); } } Uhr.prototype.stop = function() { if (this.isOn()) { window.clearInterval(this.timer); this.timer = null; this.update(); jQuery.cookie('status' + this.id, 'off', {expires: 365, path: '/'}); } } Uhr.prototype.isOn = function() { return this.timer != null; } Uhr.prototype.setLayout = function(locale) { var newLayout = Uhr.layouts[locale]; if (newLayout !== undefined && newLayout != this.currentLayout) { this.currentLayout = newLayout; var renderer = new UhrRenderer(this.currentLayout, this.letterarea); renderer.render(this); jQuery.cookie('layout' + this.id, locale, {expires: 365, path: '/'}); } } Uhr.prototype.setTheme = function(theme) { if (theme != this.currentTheme) { this.clockarea.removeClass(this.currentTheme); 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() { if (this.isOn()) { var now = new Date(); if (now.getMinutes() == this.currentMinute) { return; } this.currentMinute = now.getMinutes(); var dotMinute = this.getDotMinute(now); 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 { this.clear(); this.currentMinute = -1; } } Uhr.prototype.clear = function() { this.clockarea.find('.item').removeClass('active'); } Uhr.prototype.highlight = function(itemClass) { this.clockarea.find('.item.' + itemClass).addClass('active'); } Uhr.prototype.getHour = function(date) { if (typeof this.currentLayout.getHour === 'function') { return this.currentLayout.getHour(date); } var hour = date.getHours(); if (date.getMinutes() >= 25) { return hour + 1; } return hour; } Uhr.prototype.getCoarseMinute = function(date) { if (typeof this.currentLayout.getCoarseMinute === 'function') { return this.currentLayout.getCoarseMinute(date); } var minutes = date.getMinutes(); return minutes - this.getDotMinute(date); } Uhr.prototype.getDotMinute = function(date) { if (typeof this.currentLayout.getDotMinute === 'function') { return this.currentLayout.getDotMinute(date); } var minutes = date.getMinutes(); return minutes % 5; } Uhr.prototype.normalizeHour = function(hour) { if (hour > 12) { hour %= 12; } if (hour == 0) { return 12; } return hour; } Uhr.prototype.initHTMLElements = function(clockarea, presets) { this.createHTMLElements(clockarea, presets.width); var force = presets.force || false; this.initToggleSwitch(presets.status, force); this.initLayoutSwitch(presets.layout, force); this.initThemeSwitch(presets.theme, force); } 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(''); clockarea.append(''); clockarea.append(''); clockarea.append(''); clockarea.append('
'); clockarea.append('
'); if(width == undefined) { width = '100%'; } clockarea.css('width', width); var realWidth = clockarea.width() clockarea.width(realWidth); clockarea.height(realWidth); clockarea.css('font-size', (realWidth / 40) + 'px'); this.clockarea = clockarea } Uhr.prototype.createToggleSwitch = function() { this.toggleSwitch = jQuery('
'); var input = jQuery(''); this.toggleSwitch.append(input); this.toggleSwitch.append(''); this.clockarea.after(this.toggleSwitch); } Uhr.prototype.createLayoutSwitch = function () { this.layoutSwitch = jQuery('') for (var code in Uhr.layouts) { if (Uhr.layouts.hasOwnProperty(code)) { var layout = Uhr.layouts[code]; var option = jQuery('') this.layoutSwitch.append(option); } } this.clockarea.after(this.layoutSwitch); } Uhr.prototype.createThemeSwitch = function () { this.themeSwitch = jQuery(''); this.themeSwitch.append(''); this.themeSwitch.append(''); this.themeSwitch.append(''); this.themeSwitch.append(''); this.themeSwitch.append(''); this.clockarea.after(this.themeSwitch); } Uhr.prototype.initToggleSwitch = function(defaultValue, overrideCookie) { var input = jQuery('#onoffswitch' + this.id); var uhr = this; input.on('click', function() { uhr.toggle(); }); var status = jQuery.cookie('status' + this.id); if (status == undefined || (overrideCookie && (defaultValue != undefined))) { status = defaultValue; } if (status == undefined || status == 'undefined') { status = 'on'; } if (status == 'on') { this.start(); input.prop('checked', true); } else { this.stop(); input.prop('checked', false); } } Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) { var uhr = this; this.layoutSwitch.on('change', function() { uhr.setLayout(this.value); }); var selectedLayout = jQuery.cookie('layout' + this.id); if (selectedLayout == undefined || (overrideCookie && (defaultValue != undefined))) { selectedLayout = defaultValue; } if (selectedLayout == undefined) { // FIXME not nice, hardcoded default-value selectedLayout = 'de_CH'; } this.layoutSwitch.val(selectedLayout); this.setLayout(selectedLayout); } Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { var uhr = this; this.themeSwitch.on('change', function() { uhr.setTheme(this.value); }); var selectedTheme = jQuery.cookie('theme' + this.id); if (selectedTheme == undefined || (overrideCookie && (defaultValue != undefined))) { selectedTheme = defaultValue; } if (selectedTheme == undefined || selectedTheme == 'undefined') { selectedTheme = 'black'; } this.themeSwitch.val(selectedTheme); this.setTheme(selectedTheme); } //} })(jQuery); /** * Hilfsklasse zum Rendern der Uhr. * @param layout Layout-Objekt, das gerendert werden soll. * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll. */ function UhrRenderer(layout, renderarea) { this.layout = layout; this.renderarea = renderarea; } UhrRenderer.prototype.render = function(uhr) { var renderer = this; this.renderarea.fadeOut('fast', function() { renderer.renderarea.empty(); for (var y = 0; y < renderer.layout.values.length; y++) { for (var x = 0; x < renderer.layout.values[y].length; x++) { var letter = renderer.layout.values[y][x]; renderer.renderarea.append(letter.toString()); } if (y < renderer.layout.values.length - 1) { renderer.renderarea.append('
'); } } uhr.data('currentMinute', -1); Uhr.update(uhr); renderer.renderarea.fadeIn('fast'); }); } /** * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays. * @param value Der Buchstabe, der Dargestellt werden soll. * @param style Die CSS-Styleklassen des Buchstabens. */ function Letter(value, style) { this.value = value; this.style = style || ''; this.getStyle = function() { return 'item letter ' + style; } this.getValue = function() { return value; } } Letter.prototype.toString = function letterToString() { return '' + this.getValue() + ''; } /** * Hilfsfunktion, um einen Buchstaben zu erzeugen. * * @param letter string: Der Buchstabe, der angezeigt werden soll * @example l('I', 'is') erzeugt den Buchstaben 'I' mit der CSS-Styleklasse 'is' */ function l(letter, style) { return new Letter(letter, style); } /** * Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Stunden-Wort gehört. * * @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 * @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) { var style = ''; for (var i = 1; i < arguments.length; i++) { style += ' hour' + arguments[i]; } return l(letter, style); } /** * Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Minuten-Wort gehört. * * @param letter string: Der Buchstabe, der angezeigt werden soll * @param minutes... integer: Eine Aufzählung von Minutenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll * @example m('A', 5, 10, 15, 20, 35) erzeugt den Buchstaben 'A' der um :05, :10, :15, :20 und :35 aktiv angezeigt wird */ function m(letter) { var style = ''; for (var i = 1; i < arguments.length; i++) { style += ' minute' + arguments[i]; } return l(letter, style); }