added new toggle switch for choosing between normal time mode and seconds mode

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;

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 @@
                                 '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' + '</label>');
             content.append(toggleSwitch);
 
+            // time mode switch
+            var modeSwitch = $('<div class="onoffswitch" id="uhr-modeswitch' + this.id + '"></div>');
+            modeSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-modeswitch-checkbox' + this.id +
+                                '" checked="checked" />');
+            modeSwitch.append('<label class="onoffswitch-label" for="uhr-modeswitch-checkbox' + this.id + '">' +
+                                '<div class="modeswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' +
+                                '</label>');
+            content.append(modeSwitch);
             // language chooser
             if (uhrGlobals.languages.length > 1) {
                 var languageChooser = $('<select id="uhr-languagechooser' + this.id + '"></select>');
@@ -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');
+        if (this.options.mode === 'seconds') {
-        for (var i = 1; i <= dotMinute; i++) {
+            highlight.bind(this)('second' + second);
-            highlight.bind(this)('dot' + i);
+        } 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;