From 80df0d24cbd79b8459a98675826d8ab66ac78199 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Fri, 17 Oct 2014 21:13:02 +0200 Subject: [PATCH 01/10] corrected typo and incremented version to next snapshot --- VERSION | 2 +- js/uhr.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/VERSION b/VERSION index 7849b73..1ebcdd7 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -6.3.3 +6.4-SNAPSHOT diff --git a/js/uhr.js b/js/uhr.js index c88e42b..3186acc 100644 --- a/js/uhr.js +++ b/js/uhr.js @@ -77,7 +77,7 @@ this.start(); } }; - var setLanguage = function setLanugage(languageKey) { + var setLanguage = function setLanguage(languageKey) { if (languageKey !== this.options.language) { this.options.language = languageKey; var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea')); From 35eef98722e46caaf16f13f7200827ad691dbad6 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 18 Oct 2014 16:44:36 +0200 Subject: [PATCH 02/10] added new toggle switch for choosing between normal time mode and seconds mode --- css/uhr.css | 22 ++++- js/uhr.js | 270 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 279 insertions(+), 13 deletions(-) diff --git a/css/uhr.css b/css/uhr.css index 1bcb0c5..ff10ded 100644 --- a/css/uhr.css +++ b/css/uhr.css @@ -126,7 +126,7 @@ body { border-radius: 50px; } -.onoffswitch-inner { +.onoffswitch-inner, .modeswitch-inner { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; @@ -135,7 +135,7 @@ body { transition: margin 0.3s ease-in 0s; } -.onoffswitch-inner:before, .onoffswitch-inner:after { +.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after { float: left; width: 50%; height: 24px; @@ -180,7 +180,8 @@ body { transition: all 0.3s ease-in 0s; } -.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { +.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner, +.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner { margin-left: 0; } @@ -188,6 +189,21 @@ body { right: 0; } +.modeswitch-inner:before { + content: "MIN"; + padding-left: 12px; + background-color: #fff; + color: #000; +} + +.modeswitch-inner:after { + content: "SEC"; + padding-right: 12px; + background-color: #fff; + color: #000; + text-align: right; +} + a.uhr-configlink { cursor: pointer; background: url("../resources/settings.png") no-repeat; diff --git a/js/uhr.js b/js/uhr.js index 3186acc..a503d60 100644 --- a/js/uhr.js +++ b/js/uhr.js @@ -109,6 +109,12 @@ } update.bind(this)(); }; + var setMode = function(mode) { + this.options.mode = mode; + this.currentMinute = -1; + update.bind(this)(); + setCookie.bind(this)('uhr-mode', mode); + }; var setWidth = function setWidth(width) { var e = this.element; e.css('width', width); @@ -168,6 +174,14 @@ '
' + '
' + ''); content.append(toggleSwitch); + // time mode switch + var modeSwitch = $('
'); + modeSwitch.append(''); + modeSwitch.append(''); + content.append(modeSwitch); // language chooser if (uhrGlobals.languages.length > 1) { var languageChooser = $(''); @@ -211,6 +225,27 @@ this.stop(); } + // time mode switch + var modeSwitch = $('#uhr-modeswitch-checkbox' + this.id); + modeSwitch.on('click', function() { + if (this.options.mode === 'seconds') { + setMode.bind(this)('normal'); + } else { + setMode.bind(this)('seconds'); + } + }.bind(this)); + + var mode = $.cookie('uhr-mode' + this.id); + if (mode === undefined || this.options.force) { + status = this.options.mode; + } + modeSwitch.prop('checked', mode !== 'seconds'); + if (mode === 'seconds') { + setMode.bind(this)('seconds'); + } else { + setMode.bind(this)('normal'); + } + // language chooser var languageChooser = $('#uhr-languagechooser' + this.id); languageChooser.on('change', function() { @@ -290,7 +325,7 @@ var update = function update() { if (isOn.bind(this)()) { var time = this.options.time; - if (!language.bind(this)().hasOwnProperty('seconds')) { + if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') { if (time.getMinutes() === this.currentMinute) { return; } @@ -308,13 +343,16 @@ var hour = getHour.bind(this)(time); var coarseMinute = getCoarseMinute.bind(this)(time); clear.bind(this)(); - highlight.bind(this)('on'); - for (var i = 1; i <= dotMinute; i++) { - highlight.bind(this)('dot' + i); + if (this.options.mode === 'seconds') { + highlight.bind(this)('second' + second); + } else { + highlight.bind(this)('on'); + for (var i = 1; i <= dotMinute; i++) { + highlight.bind(this)('dot' + i); + } + highlight.bind(this)('minute' + coarseMinute); + highlight.bind(this)('hour' + hour); } - highlight.bind(this)('second' + second); - highlight.bind(this)('minute' + coarseMinute); - highlight.bind(this)('hour' + hour); }; var highlight = function highlight(itemClass) { this.element.find('.item.' + itemClass).addClass('active'); @@ -351,7 +389,6 @@ } return hour; }; - var language = function language() { var matchingLanguages = uhrGlobals.languages.filter(function(element) { return (element.code === this.options.language); @@ -372,7 +409,8 @@ force: false, controls: true, cookiePath: undefined, - autoresize: true + autoresize: true, + mode: 'normal' }, "start": start, "stop": stop, @@ -380,6 +418,7 @@ "language": setLanguage, "theme": setTheme, "time": setTime, + "mode": setMode, "width": setWidth, // constructor method "_create": create @@ -424,6 +463,213 @@ } function UhrRendererV2Delegate(layout) { + var vorne0 = { + 3: [2, 3, 4], + 4: [1, 5], + 5: [1, 4, 5], + 6: [1, 3, 5], + 7: [1, 2, 5], + 8: [1, 5], + 9: [2, 3, 4] + }; + var hinten0 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [7, 10, 11], + 6: [7, 9, 11], + 7: [7, 8, 11], + 8: [7, 11], + 9: [8, 9, 10] + }; + var vorne1 = { + 3: [3], + 4: [2, 3], + 5: [3], + 6: [3], + 7: [3], + 8: [3], + 9: [2, 3, 4] + }; + var hinten1 = { + 3: [9], + 4: [8, 9], + 5: [9], + 6: [9], + 7: [9], + 8: [9], + 9: [8, 9, 10] + }; + var vorne2 = { + 3: [2, 3, 4], + 4: [1, 5], + 5: [5], + 6: [4], + 7: [3], + 8: [2], + 9: [1, 2, 3, 4, 5] + }; + var hinten2 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [11], + 6: [10], + 7: [9], + 8: [8], + 9: [7, 8, 9, 10, 11] + }; + var vorne3 = { + 3: [1, 2, 3, 4, 5], + 4: [4], + 5: [3], + 6: [4], + 7: [5], + 8: [1, 5], + 9: [2, 3, 4] + }; + var hinten3 = { + 3: [7, 8, 9, 10, 11], + 4: [10], + 5: [9], + 6: [10], + 7: [11], + 8: [7, 11], + 9: [8, 9, 10] + }; + var vorne4 = { + 3: [4], + 4: [3, 4], + 5: [2, 4], + 6: [1, 4], + 7: [1, 2, 3, 4, 5], + 8: [4], + 9: [4] + }; + var hinten4 = { + 3: [10], + 4: [9, 10], + 5: [8, 10], + 6: [7, 10], + 7: [7, 8, 9, 10, 11], + 8: [10], + 9: [10] + }; + var vorne5 = { + 3: [1, 2, 3, 4, 5], + 4: [1], + 5: [1, 2, 3, 4], + 6: [5], + 7: [5], + 8: [1, 5], + 9: [2, 3, 4] + }; + var hinten5 = { + 3: [7, 8, 9, 10, 11], + 4: [7], + 5: [7, 8, 9, 10], + 6: [11], + 7: [11], + 8: [7, 11], + 9: [8, 9, 10] + }; + var hinten6 = { + 3: [9, 10], + 4: [8], + 5: [7], + 6: [7, 8, 9, 10], + 7: [7, 11], + 8: [7, 11], + 9: [8, 9, 10] + }; + var hinten7 = { + 3: [7, 8, 9, 10, 11], + 4: [11], + 5: [10], + 6: [9], + 7: [8], + 8: [8], + 9: [8] + }; + var hinten8 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [7, 11], + 6: [8, 9, 10], + 7: [7, 11], + 8: [7, 11], + 9: [8, 9, 10] + }; + var hinten9 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [7, 11], + 6: [8, 9, 10, 11], + 7: [11], + 8: [10], + 9: [8, 9] + }; + var seconds= { + "0": [vorne0, hinten0], + "1": [vorne0, hinten1], + "2": [vorne0, hinten2], + "3": [vorne0, hinten3], + "4": [vorne0, hinten4], + "5": [vorne0, hinten5], + "6": [vorne0, hinten6], + "7": [vorne0, hinten7], + "8": [vorne0, hinten8], + "9": [vorne0, hinten9], + "10": [vorne1, hinten0], + "11": [vorne1, hinten1], + "12": [vorne1, hinten2], + "13": [vorne1, hinten3], + "14": [vorne1, hinten4], + "15": [vorne1, hinten5], + "16": [vorne1, hinten6], + "17": [vorne1, hinten7], + "18": [vorne1, hinten8], + "19": [vorne1, hinten9], + "20": [vorne2, hinten0], + "21": [vorne2, hinten1], + "22": [vorne2, hinten2], + "23": [vorne2, hinten3], + "24": [vorne2, hinten4], + "25": [vorne2, hinten5], + "26": [vorne2, hinten6], + "27": [vorne2, hinten7], + "28": [vorne2, hinten8], + "29": [vorne2, hinten9], + "30": [vorne3, hinten0], + "31": [vorne3, hinten1], + "32": [vorne3, hinten2], + "33": [vorne3, hinten3], + "34": [vorne3, hinten4], + "35": [vorne3, hinten5], + "36": [vorne3, hinten6], + "37": [vorne3, hinten7], + "38": [vorne3, hinten8], + "39": [vorne3, hinten9], + "40": [vorne4, hinten0], + "41": [vorne4, hinten1], + "42": [vorne4, hinten2], + "43": [vorne4, hinten3], + "44": [vorne4, hinten4], + "45": [vorne4, hinten5], + "46": [vorne4, hinten6], + "47": [vorne4, hinten7], + "48": [vorne4, hinten8], + "49": [vorne4, hinten9], + "50": [vorne5, hinten0], + "51": [vorne5, hinten1], + "52": [vorne5, hinten2], + "53": [vorne5, hinten3], + "54": [vorne5, hinten4], + "55": [vorne5, hinten5], + "56": [vorne5, hinten6], + "57": [vorne5, hinten7], + "58": [vorne5, hinten8], + "59": [vorne5, hinten9] + }; + function parseArrayOrObject(letters, styleClass, input) { if (typeof input !== 'undefined' && input !== null) { if (Array.isArray(input)) { @@ -470,7 +716,11 @@ letters.push(line); }); parseArrayOrObject(letters, 'on', layout.permanent); - parseTimeDefinition(letters, 'second', layout.seconds); + if (typeof layout.seconds !== 'undefined' && layout.seconds !== null) { + parseTimeDefinition(letters, 'second', layout.seconds); + } else { + parseTimeDefinition(letters, 'second', seconds) + } parseTimeDefinition(letters, 'minute', layout.minutes); parseTimeDefinition(letters, 'hour', layout.hours); return letters; From 9f37f1f971fbb82602ee434e152c132f30814edf Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 18 Oct 2014 16:45:33 +0200 Subject: [PATCH 03/10] removed de_CH-seconds layout --- index.html | 1 - js/uhr-de_CH-seconds.js | 247 ---------------------------------------- 2 files changed, 248 deletions(-) delete mode 100644 js/uhr-de_CH-seconds.js diff --git a/index.html b/index.html index ae72867..4f66278 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,6 @@ along with this program. If not, see . - diff --git a/js/uhr-de_CH-seconds.js b/js/uhr-de_CH-seconds.js deleted file mode 100644 index c1c2368..0000000 --- a/js/uhr-de_CH-seconds.js +++ /dev/null @@ -1,247 +0,0 @@ -/* - * Copyright (C) Schweizerische Bundesbahnen SBB, 2014. - */ - -/* - 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'; - var vorne0 = { - 3: [2, 3, 4], - 4: [1, 5], - 5: [1, 4, 5], - 6: [1, 3, 5], - 7: [1, 2, 5], - 8: [1, 5], - 9: [2, 3, 4] - }; - var hinten0 = { - 3: [8, 9, 10], - 4: [7, 11], - 5: [7, 10, 11], - 6: [7, 9, 11], - 7: [7, 8, 11], - 8: [7, 11], - 9: [8, 9, 10] - }; - var vorne1 = { - 3: [3], - 4: [2, 3], - 5: [3], - 6: [3], - 7: [3], - 8: [3], - 9: [2, 3, 4] - }; - var hinten1 = { - 3: [9], - 4: [8, 9], - 5: [9], - 6: [9], - 7: [9], - 8: [9], - 9: [8, 9, 10] - }; - var vorne2 = { - 3: [2, 3, 4], - 4: [1, 5], - 5: [5], - 6: [4], - 7: [3], - 8: [2], - 9: [1, 2, 3, 4, 5] - }; - var hinten2 = { - 3: [8, 9, 10], - 4: [7, 11], - 5: [11], - 6: [10], - 7: [9], - 8: [8], - 9: [7, 8, 9, 10, 11] - }; - var vorne3 = { - 3: [1, 2, 3, 4, 5], - 4: [4], - 5: [3], - 6: [4], - 7: [5], - 8: [1, 5], - 9: [2, 3, 4] - }; - var hinten3 = { - 3: [7, 8, 9, 10, 11], - 4: [10], - 5: [9], - 6: [10], - 7: [11], - 8: [7, 11], - 9: [8, 9, 10] - }; - var vorne4 = { - 3: [4], - 4: [3, 4], - 5: [2, 4], - 6: [1, 4], - 7: [1, 2, 3, 4, 5], - 8: [4], - 9: [4] - }; - var hinten4 = { - 3: [10], - 4: [9, 10], - 5: [8, 10], - 6: [7, 10], - 7: [7, 8, 9, 10, 11], - 8: [10], - 9: [10] - }; - var vorne5 = { - 3: [1, 2, 3, 4, 5], - 4: [1], - 5: [1, 2, 3, 4], - 6: [5], - 7: [5], - 8: [1, 5], - 9: [2, 3, 4] - }; - var hinten5 = { - 3: [7, 8, 9, 10, 11], - 4: [7], - 5: [7, 8, 9, 10], - 6: [11], - 7: [11], - 8: [7, 11], - 9: [8, 9, 10] - }; - var hinten6 = { - 3: [9, 10], - 4: [8], - 5: [7], - 6: [7, 8, 9, 10], - 7: [7, 11], - 8: [7, 11], - 9: [8, 9, 10] - }; - var hinten7 = { - 3: [7, 8, 9, 10, 11], - 4: [11], - 5: [10], - 6: [9], - 7: [8], - 8: [8], - 9: [8] - }; - var hinten8 = { - 3: [8, 9, 10], - 4: [7, 11], - 5: [7, 11], - 6: [8, 9, 10], - 7: [7, 11], - 8: [7, 11], - 9: [8, 9, 10] - }; - var hinten9 = { - 3: [8, 9, 10], - 4: [7, 11], - 5: [7, 11], - 6: [8, 9, 10, 11], - 7: [11], - 8: [10], - 9: [8, 9] - }; - var layout = { - "version": 2, - "language": 'Bärndütschi Sekunde', - "letters": [ - 'ESKISCHAFÜF', - 'VIERTUBFZÄÄ', - 'ZWÄNZGSIVOR', - 'ABOHAUBIEGE', - 'EISZWÖISDRÜ', - 'VIERIFÜFIQT', - 'SÄCHSISIBNI', - 'ACHTINÜNIEL', - 'ZÄNIERBEUFI', - 'ZWÖUFINAUHR' - ], - "seconds": { - "0": [vorne0, hinten0], - "1": [vorne0, hinten1], - "2": [vorne0, hinten2], - "3": [vorne0, hinten3], - "4": [vorne0, hinten4], - "5": [vorne0, hinten5], - "6": [vorne0, hinten6], - "7": [vorne0, hinten7], - "8": [vorne0, hinten8], - "9": [vorne0, hinten9], - "10": [vorne1, hinten0], - "11": [vorne1, hinten1], - "12": [vorne1, hinten2], - "13": [vorne1, hinten3], - "14": [vorne1, hinten4], - "15": [vorne1, hinten5], - "16": [vorne1, hinten6], - "17": [vorne1, hinten7], - "18": [vorne1, hinten8], - "19": [vorne1, hinten9], - "20": [vorne2, hinten0], - "21": [vorne2, hinten1], - "22": [vorne2, hinten2], - "23": [vorne2, hinten3], - "24": [vorne2, hinten4], - "25": [vorne2, hinten5], - "26": [vorne2, hinten6], - "27": [vorne2, hinten7], - "28": [vorne2, hinten8], - "29": [vorne2, hinten9], - "30": [vorne3, hinten0], - "31": [vorne3, hinten1], - "32": [vorne3, hinten2], - "33": [vorne3, hinten3], - "34": [vorne3, hinten4], - "35": [vorne3, hinten5], - "36": [vorne3, hinten6], - "37": [vorne3, hinten7], - "38": [vorne3, hinten8], - "39": [vorne3, hinten9], - "40": [vorne4, hinten0], - "41": [vorne4, hinten1], - "42": [vorne4, hinten2], - "43": [vorne4, hinten3], - "44": [vorne4, hinten4], - "45": [vorne4, hinten5], - "46": [vorne4, hinten6], - "47": [vorne4, hinten7], - "48": [vorne4, hinten8], - "49": [vorne4, hinten9], - "50": [vorne5, hinten0], - "51": [vorne5, hinten1], - "52": [vorne5, hinten2], - "53": [vorne5, hinten3], - "54": [vorne5, hinten4], - "55": [vorne5, hinten5], - "56": [vorne5, hinten6], - "57": [vorne5, hinten7], - "58": [vorne5, hinten8], - "59": [vorne5, hinten9] - }, - "getDotMinute": function() { - return 0; - } - }; - $.fritteli.uhr.register('de_CH_seconds', layout); -}(jQuery)); From 92abc8e15b957cad789fc9db026ac08188c49b51 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 18 Oct 2014 17:11:24 +0200 Subject: [PATCH 04/10] bugfix: initial display mode --- js/uhr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/uhr.js b/js/uhr.js index a503d60..6fb6e40 100644 --- a/js/uhr.js +++ b/js/uhr.js @@ -237,7 +237,7 @@ var mode = $.cookie('uhr-mode' + this.id); if (mode === undefined || this.options.force) { - status = this.options.mode; + mode = this.options.mode; } modeSwitch.prop('checked', mode !== 'seconds'); if (mode === 'seconds') { From ff4c90c67379d8cde83d80ad0b305bdd9de17e3d Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 18 Oct 2014 17:18:45 +0200 Subject: [PATCH 05/10] updated documentation --- README.md | 11 ++-- info/index.html | 132 +++++++++++++++++++++++++++++------------------- 2 files changed, 88 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 507df0e..46a22fc 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS- * uhr-fr.js * uhr-it.js -`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ"). +`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätzlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ"). 2. Uhr-Element im HTML-Dokument einfügen ---------------------------------------- @@ -56,10 +56,11 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: * Die Uhr ist eingeschaltet * Die Bedienelemente werden angezeigt * Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert +* Die Uhr zeigt die aktuelle Stunde und Minute -Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln. +Mit den Bedienelementen kannst du die Uhr ein- und ausschalten, zwischen Stunden/Minuten- oder Sekundenanzeige wechseln sowie Sprache und Farbe einstellen. -Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. +Wie du diese Optionen ändern kannst, verrät der nächste Abschnitt. Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit @@ -75,10 +76,12 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden: status: 'on', // 'on' (default) oder 'off' theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets) language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'en', 'fr' oder 'it' (je nach eingebundenen Sprachdateien) + mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an + // 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an width: '100%', // eine CSS-Grössenangabe (default: 100%) force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; // true: immer die angegebene Konfiguration verwenden - controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt + controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt // false: Die Bedienelemente werden nicht angezeigt autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an // false: Die Uhr behält ihre anfängliche Grösse diff --git a/info/index.html b/info/index.html index 3c2a4fe..1fefaaf 100644 --- a/info/index.html +++ b/info/index.html @@ -20,6 +20,7 @@ along with this program. If not, see . + @@ -44,7 +45,8 @@ along with this program. If not, see .
  • Benötigte Bibliotheken
  • Einbinden in HTML
      -
    1. Javascript- und CSS-Dateien im <head>
      2. +
    2. Javascript- und CSS-Dateien im <head> +
    3. Uhr-Element auf der Seite
    4. Uhr initialisieren
    @@ -60,16 +62,16 @@ along with this program. If not, see .

    Hallo, Besucher!

    -

    Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, - wie spät es ist. Hier erfährt du, wie du sie selber auf deiner - Website einbauen kannst. Denn das darfst du gerne tun, solange du - dich dabei an die Regeln der Lizenz hältst.

    +

    Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, wie spät es ist. Hier erfährt du, wie du sie selber + auf deiner Website einbauen kannst. Denn das darfst du gerne tun, solange du dich dabei an die Regeln der Lizenz hältst.

    Das interessiert mich nicht, ich will zurück zur grossen Uhr!

    Die UhrZum Inhalt

    -
    +
    +

    Benötigte BibliothekenZum Inhalt

    @@ -84,9 +86,11 @@ along with this program. If not, see .
  • jQuery-cookie (getestet mit Version 1.4.0)

    • Einbinden in HTMLZum Inhalt

    -

    Javascript- und CSS-Dateien im <head>Zum Inhalt

    +

    Javascript- und CSS-Dateien im <head>Zum + Inhalt

    -

    Füge folgende Zeilen im <head>-Tag deines HTML-Dokumentes ein. Beachte dabei, dass die CSS-Dateien vor den +

    Füge folgende Zeilen im <head>-Tag deines HTML-Dokumentes ein. Beachte dabei, dass die + CSS-Dateien vor den Javascript eingebunden werden.
    <link rel="stylesheet" type="text/css" href="uhr.css" /> <link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /> @@ -108,12 +112,14 @@ along with this program. If not, see . <script type="text/javascript" src="uhr-it.js"></script>

    -

    Von den Stylesheets zwingend ist uhr.css und mindestens eines der Farbschema-Stylesheets. Die Attribute data-class bzw. - data-name definieren dabei die im Stylesheet deklarierte Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei - gewählt werden, die Style-Klasse muss mit der im Stylesheet definierten übereinstimmen.

    +

    Von den Stylesheets zwingend ist uhr.css und mindestens eines der Farbschema-Stylesheets. Die + Attribute data-class bzw. data-name definieren dabei die im Stylesheet deklarierte + Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei gewählt werden, die Style-Klasse muss mit + der im Stylesheet definierten übereinstimmen.

    -

    uhr-de_CH_genau.js ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort genau - angezeigt wird (also z.B. um 15:00 Uhr ES ISCH GENAU DRÜ).

    +

    uhr-de_CH_genau.js ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort genau angezeigt wird (also z.B. um 15:00 Uhr ES ISCH GENAU + DRÜ).

    Uhr-Element auf der SeiteZum Inhalt

    Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <div>-Element:
    @@ -121,7 +127,8 @@ along with this program. If not, see .

    Uhr initialisierenZum Inhalt

    -

    Definiere im HTML-Dokument (<head> oder <body>) ein Javascript-Snippet, um die Uhr zu initialisieren:
    +

    Definiere im HTML-Dokument (<head> oder <body>) ein Javascript-Snippet, um die + Uhr zu initialisieren:
    <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#meine-uhr').uhr(); @@ -129,10 +136,10 @@ along with this program. If not, see . </script>

    -

    Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der ersten eingebundenen CSS-Datei (im - Beispiel also Schwarz), eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im - folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der .uhr()-Methode als JSON-Objekt übergeben, beispielsweise - so:
    +

    Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der ersten + eingebundenen CSS-Datei (im Beispiel also Schwarz), eingeschaltet, Breite 100% des Elternelementes. Wenn dies + nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. + Die Konfiguration wird der .uhr()-Methode als JSON-Objekt übergeben, beispielsweise so:
    jQuery('#uhr').uhr({ width: '200px', theme: 'red' @@ -143,40 +150,47 @@ along with this program. If not, see .

    Es existieren die folgenden Konfigurationsoptionen:

    -
    width
    -
    Die Breite der Uhr als CSS-String, z.B. '50%', '120px' oder '2.8em'. Die Höhe passt sich automatisch - der Breite an, so dass die Uhr immer quadratisch ist. +
    autoresize
    +
    Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob + sie immer die anfängliche Grösse behält. Mögliche Werte sind true oder false. +
    Typ: boolean +
    Default: true
    +
    controls
    +
    Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden + sollen. Mögliche Werte sind true oder false. +
    Typ: boolean +
    Default: true
    +
    force
    +
    Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte + Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind true (Konfiguration + überschreibt Cookie-Werte) oder false (Cookie-Werte haben Vorrang). +
    Typ: boolean +
    Default: false
    +
    language
    +
    Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab, welche + Sprachdateien eingebunden werden.
    Typ: String -
    Default: '100%'
    +
    Default: 'de_CH' +
    mode
    +
    Der Zeit-Anzeigemodus, entweder 'normal' (aktuelle Zeit in Worten anzeigen als "ES IST VIER + UHR") oder 'seconds' (aktuelle Sekunden als grosse Ziffern anzeigen). +
    Typ: String +
    Default: 'normal'
    status
    Der Anfangszustand der Uhr, entweder 'on' oder 'off'
    Typ: String
    Default: 'on'
    -
    language
    -
    Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab, welche Sprachdateien eingebunden werden. -
    Typ: String -
    Default: 'de_CH'
    theme
    -
    Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche CSS-Dateien eingebunden werden. +
    Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche + CSS-Dateien eingebunden werden.
    Typ: String
    Default: Farbe der ersten eingebundenen CSS-Datei
    -
    force
    -
    Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen - oder nicht. Mögliche Werte sind true (Konfiguration überschreibt Cookie-Werte) oder false (Cookie-Werte haben - Vorrang). -
    Typ: boolean -
    Default: false
    -
    controls
    -
    Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind true - oder false. -
    Typ: boolean -
    Default: true
    -
    autoresize
    -
    Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob sie immer die anfängliche Grösse - behält. Mögliche Werte sind true oder false. -
    Typ: boolean -
    Default: true
    +
    width
    +
    Die Breite der Uhr als CSS-String, z.B. '50%', '120px' oder '2.8em'. + Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer quadratisch ist. +
    Typ: String +
    Default: '100%'

    InformationenZum Inhalt

    -

    Programmiert von Manuel Friedli mit Inspiration von QLOCKTWO.
    - Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden - oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle - beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.

    +

    Programmiert von Manuel Friedli mit Inspiration von QLOCKTWO.
    + Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. + Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden + und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen + wünsche ich viel Freude mit der Zeit im Wort.

    Der Quellcode ist frei zugänglich unter https://gittr.ch/manuel/uhr.

    LizenzbestimmungenZum Inhalt

    -

    Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert, weitergegeben und verändert werden. - Die GNU GPL 3.0 findest Du unter folgendem Link: GNU GPL 3.0. Und direkt hier:

    +

    Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert, + weitergegeben und verändert werden. Die GNU GPL 3.0 findest Du unter folgendem Link: GNU GPL 3.0. Und direkt hier:

    GNU GENERAL PUBLIC LICENSE

    @@ -904,6 +933,7 @@ along with this program. If not, see . may consider it more useful to permit linking proprietary applications with the library. If this is what you want to do, use the GNU Lesser General Public License instead of this License. But first, please read - <http://www.gnu.org/philosophy/why-not-lgpl.html>.

    + <http://www.gnu.org/philosophy/why-not-lgpl.html>. +

    From 2a45b8fc0bffa01e752061e0a3793235e26c5936 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 18 Oct 2014 17:22:37 +0200 Subject: [PATCH 06/10] updated manifest --- manifest.appcache | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/manifest.appcache b/manifest.appcache index 8fac742..4acbd59 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 6.3.3 +# 6.4-SNAPSHOT 20141018-1 css/uhr.css css/uhr-black.css @@ -15,7 +15,6 @@ js/uhr.js js/uhr-de.js js/uhr-de_CH.js js/uhr-de_CH_genau.js -js/uhr-de_CH-seconds.js js/uhr-en.js js/uhr-fr.js js/uhr-it.js From f6904bfdd54d3199d14c6077db754e14198d12fe Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sun, 19 Oct 2014 18:25:36 +0200 Subject: [PATCH 07/10] first version of re-done config area. needs testing on mobile and other browsers than firefox. --- css/uhr.css | 38 ++++++++++---------------------------- js/uhr.js | 16 ++++++++-------- 2 files changed, 18 insertions(+), 36 deletions(-) diff --git a/css/uhr.css b/css/uhr.css index ff10ded..3d0e15c 100644 --- a/css/uhr.css +++ b/css/uhr.css @@ -211,46 +211,28 @@ a.uhr-configlink { height: 24px; display: inline-block; margin: 2px; + vertical-align: top; } .uhr-controlpanel { - background-color: rgba(0, 0, 0, 0.5); - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -@media (max-width: 400px) { - .uhr-controlpanel .content { - height: 100%; - } -} - -@media (min-width: 401px) { - .uhr-controlpanel .content { - margin-left: auto; - margin-right: auto; - width: 10em; - top: 1em; - border-radius: 0.5em; - box-shadow: 0 0 1em black; - } + border-radius: 0.5em; + box-shadow: 0 0 1em black; + background-color: #fff; + display: inline-block; + padding: 0.5em; + position: sticky; + bottom: 0; } .uhr-controlpanel .content { - background-color: #fff; - padding: 2em; position: relative; } - a.uhr-closecontrolpanel { cursor: pointer; display: inline-block; position: absolute; - right: 3px; - top: 3px; + right: 0; + top: -1em; width: 24px; height: 24px; background: url("../resources/close.png") no-repeat; diff --git a/js/uhr.js b/js/uhr.js index 6fb6e40..eb53a63 100644 --- a/js/uhr.js +++ b/js/uhr.js @@ -140,8 +140,8 @@ } }; // private helper methods (not exported) - var showConfigScreen = function showConfigScreen() { - $('#uhr-controlpanel' + this.id).fadeIn('fast'); + var toggleConfigScreen = function toggleConfigScreen() { + $('#uhr-controlpanel' + this.id).toggle('fast'); }; // set up var setupHTML = function setupHTML() { @@ -158,11 +158,6 @@ setWidth.bind(this)(this.options.width); if (this.options.controls) { - var configlink = $(''); - configlink.on('click', function() { - showConfigScreen.bind(this)(); - }.bind(this)); - e.after(configlink); var controlpanel = $('
    '); var content = $('
    '); controlpanel.append(content); @@ -201,11 +196,16 @@ } var closebutton = $(''); closebutton.on('click', function() { - $('#uhr-controlpanel' + this.id).fadeOut('fast'); + $('#uhr-controlpanel' + this.id).hide('fast'); }.bind(this)); content.append(closebutton); e.after(controlpanel); controlpanel.hide(); + var configlink = $(''); + configlink.on('click', function() { + toggleConfigScreen.bind(this)(); + }.bind(this)); + e.after(configlink); } }; var wireFunctionality = function wireFunctionality() { From c345209450822ae1966e45ff529debe0f28615d3 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sun, 19 Oct 2014 18:52:19 +0200 Subject: [PATCH 08/10] add some margin between control-button and control-panel --- css/uhr.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/uhr.css b/css/uhr.css index 3d0e15c..7ea3917 100644 --- a/css/uhr.css +++ b/css/uhr.css @@ -222,6 +222,7 @@ a.uhr-configlink { padding: 0.5em; position: sticky; bottom: 0; + margin-left: 1em; } .uhr-controlpanel .content { From 8a05f00f6e422e7a7a1957a537ffe6279b4bd821 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sun, 19 Oct 2014 18:53:20 +0200 Subject: [PATCH 09/10] updated manifest version --- manifest.appcache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.appcache b/manifest.appcache index 4acbd59..529c9c3 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 6.4-SNAPSHOT 20141018-1 +# 6.4-SNAPSHOT 20141019-1 css/uhr.css css/uhr-black.css From 4ab7b718487f6666d892fd713b8c9c4b06ddca42 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Wed, 22 Oct 2014 00:01:17 +0200 Subject: [PATCH 10/10] updated version --- VERSION | 2 +- manifest.appcache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/VERSION b/VERSION index 1ebcdd7..c596943 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -6.4-SNAPSHOT +6.4 diff --git a/manifest.appcache b/manifest.appcache index 529c9c3..9521b22 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 6.4-SNAPSHOT 20141019-1 +# 6.4 css/uhr.css css/uhr-black.css