diff --git a/index.html b/index.html index 49826c5..0172462 100644 --- a/index.html +++ b/index.html @@ -20,78 +20,21 @@ along with this program. If not, see . - + + + + + -
- - - - -
- - -
- - -
- - -
+

Created by fritteli, inspired by QLOCKTWO. - + - diff --git a/manifest.appcache b/manifest.appcache index e4b6978..c72e9f4 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 2.3.1 +# 3.0 COPYING index.html diff --git a/uhr-black.css b/uhr-black.css index 5fd1731..36753a4 100644 --- a/uhr-black.css +++ b/uhr-black.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-light.css"); -#uhr { +.uhr.black{ background-color: #111; } -.onoffswitch-inner:before { +.black .onoffswitch-inner:before { background-color: #111; } diff --git a/uhr-blue.css b/uhr-blue.css index dadc71a..b8a41c8 100644 --- a/uhr-blue.css +++ b/uhr-blue.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-light.css"); -#uhr { +.uhr.blue { background-color: #00a; } -.onoffswitch-inner:before { +.blue .onoffswitch-inner:before { background-color: #00a; } diff --git a/uhr-de.js b/uhr-de.js index aaa6a3e..4a009ed 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 c9eba2d..f10605b 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 fdea16f..59dfc15 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-green.css b/uhr-green.css index 3243bdb..4f65ae4 100644 --- a/uhr-green.css +++ b/uhr-green.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-dark.css"); -#uhr { +.uhr.green { background-color: #0c0; } -.onoffswitch-inner:before { +.green .onoffswitch-inner:before { background-color: #0c0; } diff --git a/uhr-red.css b/uhr-red.css index 63a01b7..d0e986d 100644 --- a/uhr-red.css +++ b/uhr-red.css @@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-light.css"); -#uhr { +.uhr.red { background-color: #700; } -.onoffswitch-inner:before { +.red .onoffswitch-inner:before { background-color: #700; } diff --git a/uhr-white.css b/uhr-white.css index 645d280..6b50313 100644 --- a/uhr-white.css +++ b/uhr-white.css @@ -13,17 +13,17 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ @import url("uhr-idle-dark.css"); -#uhr { +.uhr.white { background-color: #ccc; } -.dot.active{ +.uhr.white .dot.active{ border-color: #fff !important; box-shadow: 0 0 0.1em #fff !important; } -.letter.active{ +.uhr.white .letter.active{ color: #fff !important; text-shadow: 0 0 0.1em #fff !important; } -.onoffswitch-inner:before { +.white .onoffswitch-inner:before { background-color: #ccc; } diff --git a/uhr.css b/uhr.css index 827b804..67a8e27 100644 --- a/uhr.css +++ b/uhr.css @@ -19,7 +19,7 @@ along with this program. If not, see . body { font-family: 'Uhrenfont', sans-serif; } -#uhr { +.uhr { padding: 3em; position: relative; margin: 0; @@ -27,7 +27,7 @@ body { height: 40em; transition: background-color 0.5s; } -#reflection { +.uhr .reflection { position: absolute; top: 0; bottom: 0; @@ -39,7 +39,7 @@ body { } #themeswitcher { } -#renderarea { +.uhr .letterarea { display: block; position: absolute; top: 5em; @@ -63,19 +63,19 @@ body { border-color: #eee; box-shadow: 0 0 0.2em #eee; } -#dot1 { +.dot1 { top: 1.5em; left: 1.5em; } -#dot2 { +.dot2 { top: 1.5em; right: 1.5em; } -#dot3 { +.dot3 { bottom: 1.5em; right: 1.5em; } -#dot4 { +.dot4 { bottom: 1.5em; left: 1.5em; } diff --git a/uhr.js b/uhr.js index 2a2decc..2097aa8 100644 --- a/uhr.js +++ b/uhr.js @@ -14,23 +14,22 @@ along with this program. If not, see . */ /** * Die Uhr. - * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll. + * @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. */ -function Uhr(renderarea, themeElement) { - this.renderarea = renderarea; - this.themeElement = themeElement; +function Uhr(clockarea) { + this.id = Uhr.id++; this.timer = null; this.currentTheme = null; - this.currentLayout = null; - this.layouts = new Array(); + this.currentLayout = Uhr.layouts['undefined']; this.currentMinute = -1; - this.register('undefined', { - language: 'Undefined', - values: [] - }); + this.initHTMLElements(clockarea); +} +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(); @@ -43,7 +42,7 @@ Uhr.prototype.start = function() { var uhr = this; this.timer = window.setInterval(function() {uhr.update();}, 1000); this.update(); - $.cookie('status', 'on'); + $.cookie('status' + this.id, 'on', {expires: 365, path: '/'}); } } Uhr.prototype.stop = function() { @@ -51,29 +50,29 @@ Uhr.prototype.stop = function() { window.clearInterval(this.timer); this.timer = null; this.update(); - $.cookie('status', 'off'); + $.cookie('status' + this.id, 'off', {expires: 365, path: '/'}); } } Uhr.prototype.isOn = function() { return this.timer != null; } -Uhr.prototype.register = function(key, layout) { - this.layouts[key] = layout; -} Uhr.prototype.setLayout = function(locale) { - var newLayout = this.layouts[locale]; + var newLayout = Uhr.layouts[locale]; if (newLayout !== undefined && newLayout != this.currentLayout) { this.currentLayout = newLayout; - var renderer = new UhrRenderer(this.currentLayout, this.renderarea); + var renderer = new UhrRenderer(this.currentLayout, this.letterarea); renderer.render(this); - $.cookie('layout', locale); + $.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; - this.themeElement.attr('href', 'uhr-' + theme + '.css'); - $.cookie('theme', theme); + $.cookie('theme' + this.id, theme, {expires: 365, path: '/'}); } } Uhr.prototype.update = function() { @@ -103,10 +102,10 @@ Uhr.prototype.update = function() { } } Uhr.prototype.clear = function() { - this.renderarea.parent().find('.item').removeClass('active'); + this.clockarea.find('.item').removeClass('active'); } Uhr.prototype.highlight = function(itemClass) { - this.renderarea.parent().find('.item.' + itemClass).addClass('active'); + this.clockarea.find('.item.' + itemClass).addClass('active'); } Uhr.prototype.getHour = function(date) { if (typeof this.currentLayout.getHour === 'function') { @@ -141,6 +140,102 @@ Uhr.prototype.normalizeHour = function(hour) { } return hour; } +Uhr.prototype.initHTMLElements = function(clockarea) { + this.createHTMLElements(clockarea); + this.initToggleSwitch(); + this.initLayoutSwitch(); + this.initThemeSwitch(); +} +Uhr.prototype.createHTMLElements = function(clockarea) { + this.createClockarea(clockarea) + this.letterarea = this.clockarea.find('.letterarea'); + this.createToggleSwitch(); + this.createLayoutSwitch(); + this.createThemeSwitch(); +} +Uhr.prototype.createClockarea = function(clockarea) { + clockarea.empty(); + clockarea.append(''); + clockarea.append(''); + clockarea.append(''); + clockarea.append(''); + clockarea.append('

'); + clockarea.append('
'); + this.clockarea = clockarea +} +Uhr.prototype.createToggleSwitch = function() { + this.toggleSwitch = $('
'); + var input = $(''); + this.toggleSwitch.append(input); + this.toggleSwitch.append(''); + this.clockarea.after(this.toggleSwitch); +} +Uhr.prototype.createLayoutSwitch = function () { + this.layoutSwitch = $('') + for (var code in Uhr.layouts) { + if (Uhr.layouts.hasOwnProperty(code)) { + var layout = Uhr.layouts[code]; + var option = $('') + this.layoutSwitch.append(option); + } + } + this.clockarea.after(this.layoutSwitch); +} +Uhr.prototype.createThemeSwitch = function () { + this.themeSwitch = $(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.themeSwitch.append(''); + this.clockarea.after(this.themeSwitch); +} +Uhr.prototype.initToggleSwitch = function() { + var input = $('#onoffswitch' + this.id); + var uhr = this; + input.on('click', function() { + uhr.toggle(); + }); + var status = $.cookie('status' + this.id); + if (status == 'on') { + this.start(); + input.prop('checked', true); + } else { + this.stop(); + input.prop('checked', false); + } +} +Uhr.prototype.initLayoutSwitch = function() { + var uhr = this; + this.layoutSwitch.on('change', function() { + uhr.setLayout(this.value); + }); + var selectedLayout = $.cookie('layout' + this.id); + if (selectedLayout != undefined && selectedLayout != 'undefinded') { + this.layoutSwitch.val(selectedLayout); + this.setLayout(selectedLayout); + } +} +Uhr.prototype.initThemeSwitch = function() { + var uhr = this; + this.themeSwitch.on('change', function() { + uhr.setTheme(this.value); + }); + var selectedTheme = $.cookie('theme' + this.id); + if (selectedTheme == undefined || selectedTheme == 'undefined') { + selectedTheme = 'black'; + } + this.themeSwitch.val(selectedTheme); + this.setTheme(selectedTheme); +} + +Uhr.register('undefined', { + language: 'Please choose your language', + values: [] +}); /** * Hilfsklasse zum Rendern der Uhr.