diff --git a/index.html b/index.html index 54ef49b..632a595 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ along with this program. If not, see .
+

Created by fritteli, inspired by QLOCKTWO. @@ -37,12 +38,15 @@ along with this program. If not, see . var height = jQuery(window).height(); var width = jQuery(window).width(); var size = height < width ? height : width; + /* new Uhr(jQuery('#uhr'), { layout: 'de_CH', theme: 'black', status: 'on', width: size + 'px' }); + */ + $('#test').uhr({width:'10em'}); diff --git a/uhr-de.js b/uhr-de.js index 4a009ed..be7c72e 100644 --- a/uhr-de.js +++ b/uhr-de.js @@ -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')] ] }; -Uhr.register('de', layout); +//Uhr.register('de', layout); diff --git a/uhr-de_CH.js b/uhr-de_CH.js index f10605b..36e333b 100644 --- a/uhr-de_CH.js +++ b/uhr-de_CH.js @@ -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')] ] }; -Uhr.register('de_CH', layout); +//Uhr.register('de_CH', layout); diff --git a/uhr-en.js b/uhr-en.js index 59dfc15..5f9d026 100644 --- a/uhr-en.js +++ b/uhr-en.js @@ -34,4 +34,4 @@ var layout = { return hour; } }; -Uhr.register('en', layout); +//Uhr.register('en', layout); diff --git a/uhr.js b/uhr.js index 7b2408e..67529c4 100644 --- a/uhr.js +++ b/uhr.js @@ -12,6 +12,219 @@ 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()); + //FIXME + 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) { + }, + 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) { + 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) { + 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) { + 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; + } + } + $.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. @@ -285,6 +498,8 @@ UhrRenderer.prototype.render = function(uhr) { }); } +//} +})(jQuery); /** * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays. * @param value Der Buchstabe, der Dargestellt werden soll. @@ -340,4 +555,3 @@ function m(letter) { } return l(letter, style); } -//}