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

Created by fritteli, inspired by QLOCKTWO. diff --git a/uhr-black.css b/uhr-black.css index be167b5..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 429bcf4..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-green.css b/uhr-green.css index a5a82a5..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 b3474f2..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 23a62b8..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.js b/uhr.js index e954fe9..bf6dc09 100644 --- a/uhr.js +++ b/uhr.js @@ -17,14 +17,13 @@ along with this program. If not, see . * @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(clockarea, themeElement) { +function Uhr(clockarea) { this.id = Uhr.id++; - this.themeElement = themeElement; this.timer = null; this.currentTheme = null; this.currentLayout = Uhr.layouts['undefined']; this.currentMinute = -1; - this.initHTMLElements(clockarea, themeElement); + this.initHTMLElements(clockarea); } Uhr.id = 0; Uhr.layouts = new Array(); @@ -68,8 +67,11 @@ Uhr.prototype.setLayout = function(locale) { } 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' + this.id, theme, {expires: 365, path: '/'}); } } @@ -138,12 +140,16 @@ Uhr.prototype.normalizeHour = function(hour) { } return hour; } -Uhr.prototype.initHTMLElements = function(clockarea, themeElement) { +Uhr.prototype.initHTMLElements = function(clockarea) { + this.createHTMLElements(); this.clockarea = this.initClockarea(clockarea); this.letterarea = this.clockarea.find('.letterarea'); + this.themeSwitch = this.initThemeSwitch(); this.layoutSwitch = this.initLayoutSwitch(); this.toggleSwitch = this.initToggleSwitch(); } +Uhr.prototype.createHTMLElements = function() { +} Uhr.prototype.initClockarea = function(clockarea) { clockarea.empty(); clockarea.append(''); @@ -202,6 +208,20 @@ Uhr.prototype.initLayoutSwitch = function() { } return layoutSwitch; } +Uhr.prototype.initThemeSwitch = function() { + var themeSwitch = $(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + themeSwitch.append(''); + var uhr = this; + themeSwitch.on('change', function() { + uhr.setTheme(this.value); + }); + this.clockarea.after(themeSwitch); + return themeSwitch; +} Uhr.register('undefined', { language: 'Please choose your language',