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;