diff --git a/index.html b/index.html index 380bb4e..0496334 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ along with this program. If not, see .
-

Created by fritteli, inspired by QLOCKTWO. Read more!

+

Created by fritteli, inspired by QLOCKTWO. Read more! - View full showcase!

+ + + + + +
+

Go back to the main page

+ + + + + + + diff --git a/uhr-de.js b/uhr-de.js index 7c0d461..9ff1298 100644 --- a/uhr-de.js +++ b/uhr-de.js @@ -12,19 +12,59 @@ 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 . */ -var layout = { - language: 'Deutsch', - values: [ - [l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('T', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('N', 5, 25, 35, 55),m('F', 5, 25, 35, 55)], - [m('Z', 10, 50), m('E', 10, 50),m('H', 10, 50),m('N', 10, 50),m('Z', 20, 40),m('W', 20, 40),m('A', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('I', 20, 40),m('G', 20, 40)], - [m('D', 45), m('R', 45),m('E', 45),m('I', 45),m('V', 15, 45),m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('L', 15, 45)], - [m('V', 25, 40, 50, 55), m('O', 25, 40, 50, 55),m('R', 25, 40, 50, 55),l('F'),l('U'),l('N'),l('K'),m('N', 5, 10, 15, 20, 35),m('A', 5, 10, 15, 20, 35),m('C', 5, 10, 15, 20, 35),m('H', 5, 10, 15, 20, 35)], - [m('H', 25, 30, 35),m('A', 25, 30, 35),m('L', 25, 30, 35),m('B', 25, 30, 35),l('A'),h('E', 11),h('L', 11),h('F', 5, 11),h('Ü', 5),h('N', 5),h('F', 5)], - [h('E', 1), h('I', 1),h('N', 1),h('S', 1),l('X'),l('A'),l('M'),h('Z', 2),h('W', 2),h('E', 2),h('I', 2)], - [h('D', 3), h('R', 3),h('E', 3),h('I', 3),l('P'),l('M'),l('J'),h('V', 4),h('I', 4),h('E', 4),h('R', 4)], - [h('S', 6), h('E', 6),h('C', 6),h('H', 6),h('S', 6),l('N'),l('L'),h('A', 8),h('C', 8),h('H', 8),h('T', 8)], - [h('S', 7), h('I', 7),h('E', 7),h('B', 7),h('E', 7),h('N', 7),h('Z', 12),h('W', 12),h('Ö', 12),h('L', 12),h('F', 12)], - [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')] - ] +var h = { + "_es_ist": {1:[1,2,4,5,6]}, + "_nach": {4:[8,9,10,11]}, + "_vor": {4:[1,2,3]}, + "_halb": {5:[1,2,3,4]}, + "_5": {1:[8,9,10,11]}, + "_10": {2:[1,2,3,4]}, + "_15": {3:[5,6,7,8,9,10,11]}, + "_20": {2:[5,6,7,8,9,10,11]}, + "_45": {3:[1,2,3,4,5,6,7,8,9,10,11]} }; -window._uhr.languages['de'] = layout; +var layout = { + "version": 2, + "language": 'Deutsch', + "letters": [ + 'ESKISTAFÜNF', + 'ZEHNZWANZIG', + 'DREIVIERTEL', + 'VORFUNKNACH', + 'HALBAELFÜNF', + 'EINSXAMZWEI', + 'DREIPMJVIER', + 'SECHSNLACHT', + 'SIEBENZWÖLF', + 'ZEHNEUNKUHR' + ], + "permanent": h._es_ist, + "minutes": { + "5,6,7,8,9": [h._5, h._nach], + "10,11,12,13,14": [h._10, h._nach], + "15,16,17,18,19": [h._15, h._nach], + "20,21,22,23,24": [h._20, h._nach], + "25,26,27,28,29": [h._5, h._vor, h._halb], + "30,31,32,33,34": h._halb, + "35,36,37,38,39": [h._5, h._nach, h._halb], + "40,41,42,43,44": [h._20, h._vor], + "45,46,47,48,49": h._45, + "50,51,52,53,54": [h._10, h._vor], + "55,56,57,58,59": [h._5, h._vor] + }, + "hours": { + "1": {6:[1,2,3,4]}, + "2": {6:[8,9,10,11]}, + "3": {7:[1,2,3,4]}, + "4": {7:[8,9,10,11]}, + "5": {5:[8,9,10,11]}, + "6": {8:[1,2,3,4,5]}, + "7": {9:[1,2,3,4,5,6]}, + "8": {8:[8,9,10,11]}, + "9": {10:[4,5,6,7]}, + "10": {10:[1,2,3,4]}, + "11": {5:[6,7,8]}, + "12": {9:[7,8,9,10,11]} + } +}; +window,_uhr.register('de', layout); diff --git a/uhr-de_CH.js b/uhr-de_CH.js index 874ae1c..d5d2bd3 100644 --- a/uhr-de_CH.js +++ b/uhr-de_CH.js @@ -12,19 +12,85 @@ 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 . */ -var layout = { - language: 'Bärndütsch', - values: [ - [l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('C', 'on'),l('H', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('F', 5, 25, 35, 55)], - [m('V', 15, 45), m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('U', 15, 45),l('B'),l('F'),m('Z', 10, 50),m('Ä', 10, 50),m('Ä', 10, 50)], - [m('Z', 20, 40), m('W', 20, 40),m('Ä', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('G', 20, 40),l('S'),l('I'),m('V', 25, 40, 45, 50, 55),m('O', 25, 40, 45, 50, 55),m('R', 25, 40, 45, 50, 55)], - [m('A', 5, 10, 15, 20, 35), m('B', 5, 10, 15, 20, 35),l('O'),m('H', 25, 30, 35),m('A', 25, 30, 35),m('U', 25, 30, 35),m('B', 25, 30, 35),m('I', 25, 30, 35),l('E'),l('G'),l('E')], - [h('E', 1), h('I', 1),h('S', 1),h('Z', 2),h('W', 2),h('Ö', 2),h('I', 2),l('S'),h('D', 3),h('R', 3),h('Ü', 3)], - [h('V', 4), h('I', 4),h('E', 4),h('R', 4),h('I', 4),h('F', 5),h('Ü', 5),h('F', 5),h('I', 5),l('Q'),l('T')], - [h('S', 6), h('Ä', 6),h('C', 6),h('H', 6),h('S', 6),h('I', 6),h('S', 7),h('I', 7),h('B', 7),h('N', 7),h('I', 7)], - [h('A', 8), h('C', 8),h('H', 8),h('T', 8),h('I', 8),h('N', 9),h('Ü', 9),h('N', 9),h('I', 9),l('E'),l('L')], - [h('Z', 10), h('Ä', 10),h('N', 10),h('I', 10),l('E'),l('R'),l('B'),h('E', 11),h('U', 11),h('F', 11),h('I', 11)], - [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')] - ] +// hilfsvariablen +var h = { + "_es_isch": {1:[1,2,4,5,6,7]}, + "_ab": {4:[1,2]}, + "_vor": {3:[9,10,11]}, + "_haubi": {4:[4,5,6,7,8]}, + "_5": {1:[9,10,11]}, + "_10": {2:[9,10,11]}, + "_15": {2:[1,2,3,4,5,6]}, + "_20": {3:[1,2,3,4,5,6]} }; -window._uhr.languages['de_CH'] = layout; +var layout = { + // version: zur Zeit immer 2 (Pflichtattribut) + "version": 2, + // Sprechender Name der Sprache + "language": 'Bärndütsch', + // Buchstabenfeld als Array von Strings. + "letters": [ + 'ESKISCHAFÜF', + 'VIERTUBFZÄÄ', + 'ZWÄNZGSIVOR', + 'ABOHAUBIEGE', + 'EISZWÖISDRÜ', + 'VIERIFÜFIQT', + 'SÄCHSISIBNI', + 'ACHTINÜNIEL', + 'ZÄNIERBEUFI', + 'ZWÖUFINAUHR' + ], + // Permanent aktive Buchstaben. , vgl. ausführliche Beschreibung bei "minutes". + "permanent": h._es_isch, + /* + * Minuten: Objekt im folgenden Format: + * { + * : , + * ... + * } + * : String von Komma-separierten Minutenwerten, zu welchem die in angegebenen Buchstaben aktiv sein sollen + * : [ , ...] | + * : { : [ , ... ] } + * : Die Zeile, in welcher die Buchstaben liegen; von oben gezählt, oben ist 1. + * : Die Spalte, in der ein einzelner Buchstabe liegt; von links gezählt, links ist 1. + * Beispiel: + * "minutes": { + * "0,1": {1: [6, 7, 9]}, + * "5": [ {3: [1, 2]}, {4: [10, 11]} ] + * } + * Erklärung: + * Bei Minuten 0 und 1 sind die Buchstaben 6, 7 und 9 der ersten Zeile aktiv. + * Bei Minute 5 sind die Buchstaben 1 und 2 der Zeile 3 sowie die Buchstaben 10 und 11 der Zeile 4 aktiv. + */ + "minutes": { + "5,6,7,8,9": [h._5, h._ab], + "10,11,12,13,14": [h._10, h._ab], + "15,16,17,18,19": [h._15, h._ab], + "20,21,22,23,24": [h._20, h._ab], + "25,26,27,28,29": [h._5, h._vor, h._haubi], + "30,31,32,33,34": h._haubi, + "35,36,37,38,39": [h._5, h._ab, h._haubi], + "40,41,42,43,44": [h._20, h._vor], + "45,46,47,48,49": [h._15, h._vor], + "50,51,52,53,54": [h._10, h._vor], + "55,56,57,58,59": [h._5, h._vor] + }, + // Die Stunden; gleiches Format wie bei den Minuten + "hours": { + "1": {5:[1,2,3]}, + "2": {5:[4,5,6,7]}, + "3": {5:[9,10,11]}, + "4": {6:[1,2,3,4,5]}, + "5": {6:[6,7,8,9]}, + "6": {7:[1,2,3,4,5,6]}, + "7": {7:[7,8,9,10,11]}, + "8": {8:[1,2,3,4,5]}, + "9": {8:[6,7,8,9]}, + "10": {9:[1,2,3,4]}, + "11": {9:[8,9,10,11]}, + "12": {10:[1,2,3,4,5,6]} + } +}; +// Das Layout bei der Uhr unter dem Code "de_CH" registrieren. +window,_uhr.register('de_CH', layout); diff --git a/uhr-de_CH_genau.js b/uhr-de_CH_genau.js new file mode 100644 index 0000000..32f98cd --- /dev/null +++ b/uhr-de_CH_genau.js @@ -0,0 +1,71 @@ +/* +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 . +*/ +var h = { + "_es_isch": {1:[1,2,4,5,6,7]}, + "_genau": {3:[7,8,9,10,11]}, + "_ab": {4:[4,5]}, + "_vor": {4:[1,2,3]}, + "_haubi": {4:[7,8,9,10,11]}, + "_5": {1:[9,10,11]}, + "_10": {2:[9,10,11]}, + "_15": {2:[1,2,3,4,5,6]}, + "_20": {3:[1,2,3,4,5,6]} +}; +var layout = { + "version": 2, + "language": 'Bärndütsch (genau)', + "letters": [ + 'ESKISCHAFÜF', + 'VIERTUBFZÄÄ', + 'ZWÄNZGGENAU', + 'VORABOHAUBI', + 'EISZWÖISDRÜ', + 'VIERIFÜFIQT', + 'SÄCHSISIBNI', + 'ACHTINÜNIEL', + 'ZÄNIERBEUFI', + 'ZWÖUFINAUHR' + ], + "permanent": h._es_isch, + "minutes": { + "0": h._genau, + "5,6,7,8,9": [h._5, h._ab], + "10,11,12,13,14": [h._10, h._ab], + "15,16,17,18,19": [h._15, h._ab], + "20,21,22,23,24": [h._20, h._ab], + "25,26,27,28,29": [h._5, h._vor, h._haubi], + "30,31,32,33,34": h._haubi, + "35,36,37,38,39": [h._5, h._ab, h._haubi], + "40,41,42,43,44": [h._20, h._vor], + "45,46,47,48,49": [h._15, h._vor], + "50,51,52,53,54": [h._10, h._vor], + "55,56,57,58,59": [h._5, h._vor] + }, + "hours": { + "1": {5:[1,2,3]}, + "2": {5:[4,5,6,7]}, + "3": {5:[9,10,11]}, + "4": {6:[1,2,3,4,5]}, + "5": {6:[6,7,8,9]}, + "6": {7:[1,2,3,4,5,6]}, + "7": {7:[7,8,9,10,11]}, + "8": {8:[1,2,3,4,5]}, + "9": {8:[6,7,8,9]}, + "10": {9:[1,2,3,4]}, + "11": {9:[8,9,10,11]}, + "12": {10:[1,2,3,4,5,6]} + } +}; +window,_uhr.register('de_CH_genau', layout); diff --git a/uhr-en.js b/uhr-en.js index bca4c8e..51ea61f 100644 --- a/uhr-en.js +++ b/uhr-en.js @@ -12,9 +12,22 @@ 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 . */ +var h = { + "_it_is": {1:[1,2,4,5]}, + "_half": {4:[1,2,3,4]}, + "_to": {4:[10,11]}, + "_past": {5:[1,2,3,4]}, + "_o_clock": {10:[6,7,8,9,10,11]}, + "_5": {3:[7,8,9,10]}, + "_10": {4:[6,7,8]}, + "_15": {2:[1,3,4,5,6,7,8,9]}, + "_20": {3:[1,2,3,4,5,6]}, + "_25": {3:[1,2,3,4,5,6,7,8,9,10]} +}; var layout = { - language: 'English', - values: [ + "version": 2, + "language": 'English', + /* [l('I', 'on'), l('T', 'on'),l('L'),l('I', 'on'),l('S', 'on'),l('B'),l('F'),l('A'),l('M'),l('P'),l('M')], [m('A', 15, 45), l('C'),m('Q', 15, 45),m('U', 15, 45),m('A', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('R', 15, 45),l('D'),l('C')], [m('T', 20, 25, 35, 40), m('W', 20, 25, 35, 40),m('E', 20, 25, 35, 40),m('N', 20, 25, 35, 40),m('T', 20, 25, 35, 40),m('Y', 20, 25, 35, 40),m('F', 5, 25, 35, 55),m('I', 5, 25, 35, 55),m('V', 5, 25, 35, 55),m('E', 5, 25, 35, 55),l('X')], @@ -25,8 +38,49 @@ var layout = { [h('E', 8), h('I', 8),h('G', 8),h('H', 8),h('T', 8),h('E', 11),h('L', 11),h('E', 11),h('V', 11),h('E', 11),h('N', 11)], [h('S', 7), h('E', 7),h('V', 7),h('E', 7),h('N', 7),h('T', 12),h('W', 12),h('E', 12),h('L', 12),h('V', 12),h('E', 12)], [h('T', 10), h('E', 10),h('N', 10),l('S'),l('E'),l('O', 'sharphour'),l('C', 'sharphour'),l('L', 'sharphour'),l('O', 'sharphour'),l('C', 'sharphour'),l('K', 'sharphour')] - ], - getHour: function(date) { + */ + "letters": [ + 'ITLISBFAMPM', + 'ACQUARTERDC', + 'TWENTYFIVEX', + 'HALFBTENFTO', + 'PASTERUNINE', + 'ONESIXTHREE', + 'FOURFIVETWO', + 'EIGHTELEVEN', + 'SEVENTWELVE', + 'TENSEOCLOCK' + ], + "permanent": h._it_is, + "minutes": { + "0,1,2,3,4": h._o_clock, + "5,6,7,8,9": [h._5, h._past], + "10,11,12,13,14": [h._10, h._past], + "15,16,17,18,19": [h._15, h._past], + "20,21,22,23,24": [h._20, h._past], + "25,26,27,28,29": [h._25, h._past], + "30,31,32,33,34": [h._half, h._past], + "35,36,37,38,39": [h._25, h._to], + "40,41,42,43,44": [h._20, h._to], + "45,46,47,48,49": [h._15, h._to], + "50,51,52,53,54": [h._10, h._to], + "55,56,57,58,59": [h._5, h._to] + }, + "hours": { + "1": {6:[1,2,3]}, + "2": {7:[9,10,11]}, + "3": {6:[7,8,9,10,11]}, + "4": {7:[1,2,3,4]}, + "5": {7:[5,6,7,8]}, + "6": {6:[4,5,6]}, + "7": {9:[1,2,3,4,5]}, + "8": {8:[1,2,3,4,5]}, + "9": {5:[8,9,10,11]}, + "10": {10:[1,2,3]}, + "11": {8:[6,7,8,9,10,11]}, + "12": {9:[6,7,8,9,10,11]} + }, + "getHour": function(date) { var hour = date.getHours(); if (date.getMinutes() >= 35) { return hour + 1; @@ -34,4 +88,4 @@ var layout = { return hour; } }; -window._uhr.languages['en'] = layout; +window,_uhr.register('en', layout); diff --git a/uhr-yellow.css b/uhr-yellow.css new file mode 100644 index 0000000..1e0faef --- /dev/null +++ b/uhr-yellow.css @@ -0,0 +1,36 @@ +/* +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 . +*/ +.uhr.yellow { + background-color: #fd0; +} +.uhr.yellow .dot.active{ + border-color: #fff; + box-shadow: 0 0 0.1em #fff; +} +.uhr.yellow .letter.active{ + color: #fff; + text-shadow: 0 0 0.1em #fff; +} +.yellow .onoffswitch-inner:before { + background-color: #fd0; +} +.uhr.yellow .dot:not(.active) { + border-color: rgba(0,0,0,0.05); + box-shadow: 0 0 0.1em rgba(0,0,0,0.05); +} +.uhr.yellow .letter:not(.active) { + color: rgba(0,0,0,0.05); + text-shadow: 0 0 0.1em rgba(0,0,0,0.05); +} diff --git a/uhr.js b/uhr.js index a2e4e46..76ae549 100644 --- a/uhr.js +++ b/uhr.js @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ (function($) { - "use strict"; + 'use strict'; if (window._uhr !== undefined) { return; @@ -22,7 +22,17 @@ along with this program. If not, see . window._uhr = { id: 0, languages: [], - themes: [] + themes: [], + register: function(code, language) { + for (var i = 0; i < this.languages.length; i++) { + if (code == this.languages[i].code) { + console.error('Error: Language code ' + code + ' cannot be registered for language "' + language.language + '" because it is already registered for language "' + this.languages[i].language + '"!'); + return false; + } + } + language.code = code; + this.languages.push(language); + } }; // auto-detect themes var styleSheets = $('head link[rel=stylesheet]'); @@ -34,7 +44,7 @@ along with this program. If not, see . if (name === undefined) { name = styleClass; } - window._uhr.themes.push({'class': styleClass, 'name': name}); + window._uhr.themes.push({'styleClass': styleClass, 'name': name}); } } // fall-back if no theme was included @@ -46,7 +56,7 @@ along with this program. If not, see . width: '100%', status: 'on', language: 'de_CH', - theme: window._uhr.themes[0].class, + theme: window._uhr.themes[0].styleClass, force: false, controls: true }, @@ -54,6 +64,7 @@ along with this program. If not, see . if (!this._isOn()) { var uhr = this; this._timer = window.setInterval(function() { + uhr.options.time = new Date(); uhr._update(); }, 1000); this._update(); @@ -98,21 +109,16 @@ along with this program. If not, see . } }, time: function(time) { - this.options.time = time; + this._currentMinute = -1; if (time == null) { - this._currentMinute = -1; - this._update(); + this.options.time = new Date(); } else { if (this._timer != null) { window.clearInterval(this._timer); } - var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); - var uhr = this; - renderer.render(this, function() { - uhr._show(time); - }); - + this.options.time = time; } + this._update(); }, // private variables _id: -1, @@ -124,7 +130,7 @@ along with this program. If not, see . }, _update: function() { if (this._isOn()) { - var time = new Date(); + var time = this.options.time; if (time.getMinutes() == this._currentMinute) { return; } @@ -152,7 +158,14 @@ along with this program. If not, see . } }, _language: function() { - return window._uhr.languages[this.options.language]; + for (var i = 0; i < window._uhr.languages.length; i++) { + var language = window._uhr.languages[i]; + if (language.code == this.options.language) { + return language; + } + } + // fallback: return empty object + return {}; }, _highlight: function(itemClass) { this.element.find('.item.' + itemClass).addClass('active'); @@ -174,8 +187,7 @@ along with this program. If not, see . if (typeof this._language().getCoarseMinute === 'function') { return this._language().getCoarseMinute(date); } - var minutes = date.getMinutes(); - return minutes - this._getDotMinute(date); + return date.getMinutes(); }, _getDotMinute: function(date) { if (typeof this._language().getDotMinute === 'function') { @@ -195,10 +207,14 @@ along with this program. If not, see . }, _create: function() { this._id = window._uhr.id++; + var userTime = this.options.time; + if (this.options.time === undefined) { + this.options.time = new Date(); + } this._setupHTML(); this._wireFunctionality(); - if (this.options.time !== undefined) { - this.time(this.options.time); + if (userTime !== undefined) { + this.time(userTime); } }, _setupHTML: function() { @@ -229,17 +245,11 @@ along with this program. If not, see . e.after(toggleSwitch); // language chooser - var options = []; - for (var code in window._uhr.languages) { - if (window._uhr.languages.hasOwnProperty(code)) { - var language = window._uhr.languages[code]; - options.push(''); - } - } - if (options.length > 1) { + if (window._uhr.languages.length > 1) { var languageChooser = $(''); - for (var i = 0; i < options.length; i++) { - languageChooser.append(options[i]); + for (var i = 0; i < window._uhr.languages.length; i++) { + var language = window._uhr.languages[i]; + languageChooser.append(''); } e.after(languageChooser); } @@ -249,7 +259,7 @@ along with this program. If not, see . var themeChooser = $(''); for (var i = 0; i < window._uhr.themes.length; i++) { var theme = window._uhr.themes[i]; - themeChooser.append(''); + themeChooser.append(''); } e.after(themeChooser); } @@ -283,6 +293,24 @@ along with this program. If not, see . if (selectedLanguage == undefined || this.options.force) { selectedLanguage = this.options.language; } + var found = false; + for (var i = 0; i < window._uhr.languages.length; i++) { + var code = window._uhr.languages[i].code; + if (selectedLanguage == code) { + found = true; + break; + } + } + if (!found) { + var fallback; + if (window._uhr.languages.length > 0) { + fallback = window._uhr.languages[0].code; + } else { + fallback = ''; + } + console.warn("Language " + selectedLanguage + " not found! Using fallback: " + fallback); + selectedLanguage = fallback; + } languageChooser.val(selectedLanguage); this.options.language = ""; this.language(selectedLanguage); @@ -296,16 +324,16 @@ along with this program. If not, see . if (selectedTheme == undefined || this.options.force) { selectedTheme = this.options.theme; } - var found = false; + found = false; for (var i = 0; i < window._uhr.themes.length; i++) { - var styleClass = window._uhr.themes[i].class; + var styleClass = window._uhr.themes[i].styleClass; if (selectedTheme == styleClass) { found = true; break; } } if (!found) { - var fallback = window._uhr.themes[0].class; + var fallback = window._uhr.themes[0].styleClass; console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback); selectedTheme = fallback; } @@ -314,89 +342,119 @@ along with this program. If not, see . this.theme(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, beforeshow) { - 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('
'); + /** + * 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, beforeshow) { + var renderer = this; + if (this.layout._parsed === undefined) { + switch (this.layout.version) { + case 2: + var delegate = new _UhrRendererV2Delegate(this.layout); + this.layout._parsed = delegate.parse(); + break; + default: + console.warn("Unknown layout version: '" + this.layout.version + "'"); + return; } } - if (typeof beforeshow === 'function') { - beforeshow(); - } - 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; + var letters = this.layout._parsed; + this.renderarea.fadeOut('fast', function() { + renderer.renderarea.empty(); + for (var y = 0; y < letters.length; y++) { + for (var x = 0; x < letters[y].length; x++) { + var letter = letters[y][x]; + renderer.renderarea.append(letter.toString()); + } + if (y < letters.length - 1) { + renderer.renderarea.append('
'); + } + } + if (typeof beforeshow === 'function') { + beforeshow(); + } + renderer.renderarea.fadeIn('fast'); + }); }; - this.getValue = function() { - return value; + function _UhrRendererV2Delegate(layout) { + this.layout = layout; + this._parseArrayOrObject = function(letters, styleClass, input) { + if (Array.isArray(input)) { + for (var i = 0; i < input.length; i++) { + this._parseObject(letters, styleClass, input[i]); + } + } else { + this._parseObject(letters, styleClass, input); + } + } + this._parseObject = function(letters, styleClass, object) { + for (var line in object) { + if (object.hasOwnProperty(line)) { + var highlightLetters = object[line]; + for (var i = 0; i < highlightLetters.length; i++) { + var x = highlightLetters[i] - 1; + letters[line - 1][x].addStyle(styleClass); + } + } + } + } + this._parseTimeDefinition = function(letters, styleClass, definition) { + for (var listString in definition) { + if (definition.hasOwnProperty(listString)) { + var array = listString.split(','); + var highlightLetters = definition[listString]; + for (var index = 0; index < array.length; index++) { + this._parseArrayOrObject(letters, styleClass + array[index], highlightLetters); + } + } + } + } } -} -Letter.prototype.toString = function letterToString() { - return '' + this.getValue() + ''; -}; -/** - * Hilfsfunktion, um einen Buchstaben zu erzeugen. - * - * @param letter string: Der Buchstabe, der angezeigt werden soll - * @param style string: CSS-Klasse(n) als String - * @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]; + _UhrRendererV2Delegate.prototype.parse = function() { + var letters = []; + for (var i = 0; i < this.layout.letters.length; i++) { + var line = []; + var string = this.layout.letters[i]; + for (var c = 0; c < string.length; c++) { + var character = new Letter(string[c]); + line.push(character); + } + letters.push(line); + } + this._parseArrayOrObject(letters, 'on', this.layout.permanent); + this._parseTimeDefinition(letters, 'minute', this.layout.minutes); + this._parseTimeDefinition(letters, 'hour', this.layout.hours); + return letters; + }; + /** + * 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 ' + this.style; + }; + this.getValue = function() { + return value; + } + this.addStyle = function(style) { + if (this.style == '') { + this.style = style; + } else { + this.style += ' ' + style; + } + } } - 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); -} + Letter.prototype.toString = function letterToString() { + return '' + this.getValue() + ''; + }; +})(jQuery);