Merge branch 'feature/build-on-drone-ci' of manuel/uhr into develop

.drone.yml

@@ -0,0 +1,14 @@
+kind: pipeline
+name: default
+
+steps:
+  - name: prepare
+    image: node:12
+    commands:
+      - npm install
+  - name: build
+    image: node:12
+    environment:
+      NPMPATH: "node_modules/.bin"
+    commands:
+      - $NPMPATH/grunt

.editorconfig

@@ -9,5 +9,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.yml]
+indent_size = 2
 [*.md]
 trim_trailing_whitespace = false

.gitlab-ci.yml

@@ -1,75 +0,0 @@
-variables:
-  NPMPATH: "node_modules/.bin"
-
-stages:
-  - build
-  - cleanup_build
-  - deploy
-  - cleanup
-
-.run_deploy: &run_deploy
-  script:
-    - chmod +x ./deploy.sh
-    - ./deploy.sh
-
-build_job:
-  stage: build
-  script:
-    - npm install
-    - $NPMPATH/grunt
-  tags:
-    - javascript
-  except:
-    - tags
-  artifacts:
-    paths:
-      - dist/*.min.*
-      - info/
-      - resources/
-      - index.html
-      - manifest.appcache
-
-cleanup_build_job:
-  stage: cleanup_build
-  script:
-    - rm -rf node_modules
-    - rm -rf dist
-  when: on_failure
-
-develop:
-  stage: deploy
-  <<: *run_deploy
-  environment: develop
-  except:
-    - tags
-    - master
-    - develop
-  variables:
-    ENVIRON: develop
-    TARGET: $WWW_DEPLOY_ROOT_DEVELOP
-
-staging:
-  stage: deploy
-  <<: *run_deploy
-  environment: staging
-  only:
-    - develop
-  variables:
-    ENVIRON: staging
-    TARGET: $WWW_DEPLOY_ROOT_STAGING
-
-production:
-  stage: deploy
-  <<: *run_deploy
-  environment: production
-  only:
-    - master
-  variables:
-    ENVIRON: production
-    TARGET: $WWW_DEPLOY_ROOT_PRODUCTION
-
-cleanup_job:
-  stage: cleanup
-  script:
-    - rm -rf node_modules
-  when: always

Gruntfile.js

@@ -26,7 +26,6 @@ module.exports = function (grunt) {
             libs: {
                 src: [
                     'node_modules/jquery/dist/jquery.js',
-                    'node_modules/jquery-ui/ui/core.js',
                     'node_modules/jquery-ui/ui/widget.js',
                     'node_modules/jquery.cookie/jquery.cookie.js'
                 ],

README.md

@@ -22,10 +22,10 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
 * Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
 	* dist/libs.min.js: Dies enthält die minifizierten Versionen von jQuery, jQuery-UI (mit den Komponenten `code` und `widget`) und jQuery-Cookie.
 Alternativ kannst Du auch direkt die benötigten Bibliotheken einbinden:
-	* jquery (getestet mit Version 2.1.0)
+	* jquery (getestet mit Version 3.4.1)
-	* jquery-ui (getestet mit Version 1.10.4)
+	* jquery-ui (getestet mit Version 1.12.1)
-		* Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt.
+		* Von jquery-ui wird die Komponente 'widget' benötigt.
-	* jquery-cookie (getestet mit Version 1.4.0)
+	* jquery-cookie (getestet mit Version 1.4.1)
 Je nach dem, in welchen Sprachen du die Uhr verwenden willst, noch eine der folgenden Dateien:
 	* dist/jquery.uhr.complete.min.js: Enthält die Hauptdatei sowie alle unterstützten Sprachdateien
 	* dist/jquery.uhr.base.min.js: Enthält die Hauptdatei sowie Bärndütsch (de_CH)
@@ -149,7 +149,7 @@ Es ist möglich, die Uhr durch den Aufruf mit URL-Parameters zu konfigurieren. D
 	* on: Die Uhr ist eingeschaltet
 	* off: Die Uhr ist ausgeschaltet
 
-Eine URL kann also beispielweise so aussehen:
+Eine URL kann also beispielsweise so aussehen:
 
 	http://example.com/uhr.html#l=fr&t=red&m=seconds&s=on
 

VERSION

@@ -1 +1 @@
-8.0.4-dev.0
+9.0.0-dev.0

deploy.sh

@@ -1,23 +0,0 @@
-#!/bin/sh
-
-declare destination
-case "${TARGET}" in
-	"${WWW_DEPLOY_ROOT_DEVELOP}")
-		destination="${TARGET}/${CI_BUILD_REF_NAME}"
-		;;
-	"${WWW_DEPLOY_ROOT_STAGING}"|"${WWW_DEPLOY_ROOT_PRODUCTION}")
-		destination="${TARGET}"
-		;;
-	*)
-		echo "Invalid TARGET specified. Aborting deployment."
-		exit 1
-		;;
-esac
-
-rm -rf "${destination}/*"
-rm -rf "${destination}/.??*"
-mkdir -p "${destination}/dist"
-cp -a index.html manifest.appcache info resources "${destination}"
-cp -a dist/*.min.* "${destination}/dist"
-
-echo "Deployment successful."

dist/jquery.uhr.base.js

@@ -1,6 +1,6 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
+/*! uhr - v9.0.0-dev.0 - 2019-05-03
 * http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
+* Copyright (c) 2019 Manuel Friedli; Licensed GPL-3.0 */
 (function ($) {
     'use strict';
     var uhrGlobals = {
@@ -41,6 +41,9 @@
     }
 
     // public interface methods (exported later)
+    var setCookie;
+    var isOn;
+    var update;
     var start = function start() {
         if (!isOn.bind(this)()) {
             this.timer = window.setInterval(function () {
@@ -66,436 +69,25 @@
             this.start();
         }
     };
-    var setLanguage = function setLanguage(languageKey) {
+    var language;
-        if (languageKey !== this.options.language) {
-            this.options.language = languageKey;
-            var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
-            renderer.render.bind(this)(function() {
-                this.currentMinute = -1;
-                update.bind(this)();
-            }.bind(this));
-            setCookie.bind(this)('uhr-language', languageKey);
-            update.bind(this)();
-        }
-    };
-    var setTheme = function setTheme(theme) {
-        if (theme !== this.options.theme) {
-            this.element.removeClass(this.options.theme).addClass(theme);
-            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
-            this.options.theme = theme;
-            setCookie.bind(this)('uhr-theme', theme);
-        }
-    };
-    var setTime = function setTime(time) {
-        this.currentMinute = -1;
-        if (time === null) {
-            this.options.time = new Date();
-        } else {
-            if (this.timer !== null) {
-                window.clearInterval(this.timer);
-            }
-            this.options.time = time;
-        }
-        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);
-        var realWidth = e.width();
-        e.width(realWidth);
-        e.height(realWidth);
-        e.css('font-size', (realWidth / 40) + 'px');
-    };
 
-    // private interface methods
-    var create = function create() {
-        this.id = uhrGlobals.id++;
-        this.timer = null;
-        this.currentMinute = -1;
-        var userTime = this.options.time;
-        var hash, params;
-        if (this.options.time === undefined) {
-            this.options.time = new Date();
-        }
-        // parse the URL params
-        hash = window.location.hash;
-        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
-            hash = hash.substring(1);
-            hash = decodeURIComponent(hash);
-            params = hash.split('&');
-            params.forEach(function (element) {
-                var pair = element.split('=');
-                var key = pair[0];
-                var value = pair[1];
-                switch (key) {
-                    case 'l':
-                    case 'language':
-                        this.options.language = value;
-                        this.options.force = true;
-                        break;
-                    case 't':
-                    case 'theme':
-                        this.options.theme = value;
-                        this.options.force = true;
-                        break;
-                    case 'm':
-                    case 'mode':
-                        this.options.mode = value;
-                        this.options.force = true;
-                        break;
-                    case 's':
-                    case 'status':
-                        this.options.status = value;
-                        this.options.force = true;
-                        break;
-                }
-            }.bind(this));
-        }
-        // end parse the URL params
-        setupHTML.bind(this)();
-        wireFunctionality.bind(this)();
-        if (userTime !== undefined) {
-            this.time(userTime);
-        }
-    };
-    // private helper methods (not exported)
-    var toggleConfigScreen = function toggleConfigScreen() {
-        $('#uhr-controlpanel' + this.id).toggle('fast');
-    };
-    // set up
-    var setupHTML = function setupHTML() {
-        var e = this.element;
-        // Base clock area
-        e.addClass('uhr');
-        e.empty();
-        e.append('<span class="item dot dot1"></span>');
-        e.append('<span class="item dot dot2"></span>');
-        e.append('<span class="item dot dot3"></span>');
-        e.append('<span class="item dot dot4"></span>');
-        e.append('<div class="letterarea"></div>');
-        e.append('<div class="reflection"></div>');
-        setWidth.bind(this)(this.options.width);
-
-        if (this.options.controls) {
-            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
-            var content = $('<div class="content"></div>');
-            controlpanel.append(content);
-            // on/off switch
-            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
-            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
-                                '" checked="checked" />');
-            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
-                                '<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>');
-                uhrGlobals.languages.forEach(function(item) {
-                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
-                });
-                content.append(languageChooser);
-            }
-
-            // theme chooser
-            if (uhrGlobals.themes.length > 1) {
-                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
-                uhrGlobals.themes.forEach(function(item) {
-                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
-                });
-                content.append(themeChooser);
-            }
-            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
-            closebutton.on('click', function() {
-                $('#uhr-controlpanel' + this.id).hide('fast');
-            }.bind(this));
-            content.append(closebutton);
-            e.after(controlpanel);
-            controlpanel.hide();
-            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
-            configlink.on('click', function() {
-                toggleConfigScreen.bind(this)();
-            }.bind(this));
-            e.after(configlink);
-        }
-    };
-    var wireFunctionality = function wireFunctionality() {
-        // on/off switch
-        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
-        toggleSwitch.on('click', function() {
-            this.toggle();
-        }.bind(this));
-        var status = $.cookie('uhr-status' + this.id);
-        if (status === undefined || this.options.force) {
-            status = this.options.status;
-        }
-        toggleSwitch.prop('checked', status === 'on');
-        if (status === 'on') {
-            this.start();
-        } else {
-            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) {
-            mode = 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() {
-            var languageKey = $('#uhr-languagechooser' + this.id).val();
-            this.language(languageKey);
-        }.bind(this));
-        var selectedLanguage = $.cookie('uhr-language' + this.id);
-        if (selectedLanguage === undefined || this.options.force) {
-            selectedLanguage = this.options.language;
-        }
-        var found = uhrGlobals.languages.some(function(item) {
-            return selectedLanguage === item.code;
-        });
-        if (!found) {
-            var fallbackLanguage;
-            if (uhrGlobals.languages.length > 0) {
-                fallbackLanguage = uhrGlobals.languages[0].code;
-            } else {
-                fallbackLanguage = '';
-            }
-            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
-            selectedLanguage = fallbackLanguage;
-        }
-        languageChooser.val(selectedLanguage);
-        this.options.language = "";
-        this.language(selectedLanguage);
-
-        // theme chooser
-        var themeChooser = $('#uhr-themechooser' + this.id);
-        themeChooser.on('change', function() {
-            var themeKey = $('#uhr-themechooser' + this.id).val();
-            this.theme(themeKey);
-        }.bind(this));
-        var selectedTheme = $.cookie('uhr-theme' + this.id);
-        if (selectedTheme === undefined || this.options.force) {
-            selectedTheme = this.options.theme;
-        }
-        found = uhrGlobals.themes.some(function(item) {
-            return selectedTheme === item.styleClass;
-        });
-        if (!found) {
-            var fallbackTheme = uhrGlobals.themes[0].styleClass;
-            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
-            selectedTheme = fallbackTheme;
-        }
-        themeChooser.val(selectedTheme);
-        this.options.theme = "";
-        this.theme(selectedTheme);
-        if (this.options.autoresize) {
-            $(window).on('resize', function() {
-                var $e = this.element;
-                var $parent = $e.parent();
-                var $window = $(window);
-                var parentWidth = $parent.width();
-                var parentHeight = $parent.height();
-                var windowWidth = $window.width();
-                var windowHeight = $window.height();
-                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
-                setWidth.bind(this)(size);
-            }.bind(this));
-        }
-    };
-    var destroy = function destroy() {
-        this.timer = null;
-        $(this.element)
-            .removeAttr('style')
-            .removeAttr('class')
-            .empty();
-        $('#uhr-configlink' + this.id).remove();
-        $('#uhr-controlpanel' + this.id).remove();
-
-    };
-    var setCookie = function setCookie(cookieName, cookieValue) {
-        var options = {};
-        if (this.options.cookiePath !== undefined) {
-            options = {expires: 365, path: this.options.cookiePath};
-        } else {
-            options = {expires: 365};
-        }
-        $.cookie(cookieName + this.id, cookieValue, options);
-    };
-
-    // business logic
-    var isOn = function isOn() {
-        return this.timer !== null;
-    };
-    var update = function update() {
-        if (isOn.bind(this)()) {
-            var time = this.options.time;
-            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
-                if (time.getMinutes() === this.currentMinute) {
-                    return;
-                }
-                this.currentMinute = time.getMinutes();
-            }
-            show.bind(this)(time);
-        } else {
-            clear.bind(this)();
-            this.currentMinute = -1;
-        }
-    };
-    var show = function show(time) {
-        var second = getSecond.bind(this)(time);
-        var dotMinute = getDotMinute.bind(this)(time);
-        var hour = getHour.bind(this)(time);
-        var coarseMinute = getCoarseMinute.bind(this)(time);
-        clear.bind(this)();
-        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);
-        }
-    };
-    var highlight = function highlight(itemClass) {
-        this.element.find('.item.' + itemClass).addClass('active');
-    };
-    var clear = function clear() {
-        this.element.find('.item').removeClass('active');
-    };
-    var getSecond = function getSecond(date) {
-        if (typeof language.bind(this)().getSeconds === 'function') {
-            return language.bind(this)().getSeconds(date);
-        }
-        return date.getSeconds();
-    };
-    var getDotMinute = function getDotMinute(date) {
-        if (typeof language.bind(this)().getDotMinute === 'function') {
-            return language.bind(this)().getDotMinute(date);
-        }
-        var minutes = date.getMinutes();
-        return minutes % 5;
-    };
-    var getCoarseMinute = function getCoarseMinute(date) {
-        if (typeof language.bind(this)().getCoarseMinute === 'function') {
-            return language.bind(this)().getCoarseMinute(date);
-        }
-        return date.getMinutes();
-    };
-    var getHour = function getHour(date) {
-        if (typeof language.bind(this)().getHour === 'function') {
-            return language.bind(this)().getHour(date);
-        }
-        var hour = date.getHours();
-        if (date.getMinutes() >= 25) {
-            return (hour + 1) % 24;
-        }
-        return hour;
-    };
-    var language = function language() {
-        var matchingLanguages = uhrGlobals.languages.filter(function(element) {
-            return (element.code === this.options.language);
-        }, this);
-        if (matchingLanguages.length > 0) {
-            return matchingLanguages[0];
-        }
-        // fallback: return empty object
-        return {};
-    };
-
-    $.widget("fritteli.uhr", {
-        "options": {
-            width: '100%',
-            status: 'on',
-            language: 'de_CH',
-            theme: uhrGlobals.themes[0].styleClass,
-            force: false,
-            controls: true,
-            cookiePath: undefined,
-            autoresize: true,
-            mode: 'normal'
-        },
-        "start": start,
-        "stop": stop,
-        "toggle": toggle,
-        "language": setLanguage,
-        "theme": setTheme,
-        "time": setTime,
-        "mode": setMode,
-        "width": setWidth,
-        // constructor method
-        "_create": create,
-        // destructor method
-        "_destroy": destroy
-    });
-    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
     /**
-     * Hilfsklasse zum Rendern der Uhr.
+     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
-     * @param layout     Layout-Objekt, das gerendert werden soll.
+     * @param value Der Buchstabe, der Dargestellt werden soll.
-     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
+     * @param style Die CSS-Styleklassen des Buchstabens.
      */
-    function UhrRenderer(layout, renderarea) {
+    function Letter(value, style) {
-        this.render = function render(beforeshow) {
+        var myValue = value;
-            if (layout.parsed === undefined) {
+        var myStyle = style || '';
-                switch (layout.version) {
+        this.addStyle = function (style) {
-                case 2:
+            if (myStyle === '') {
-                    var delegate = new UhrRendererV2Delegate(layout);
+                myStyle = style;
-                    var parsedLayout = delegate.parse();
+            } else {
-                    Object.defineProperty(layout, "parsed", {"value": parsedLayout, "writable": false, "configurable": false});
+                myStyle += ' ' + style;
-                    break;
-                default:
-                    console.warn("Unknown layout version: '" + layout.version + "'");
-                    return;
             }
-            }
+        };
-            var letters = layout.parsed;
+        this.toString = function () {
-            renderarea.fadeOut('fast', function() {
+            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
-                renderarea.empty();
-                letters.forEach(function(line, index, array) {
-                    line.forEach(function(letter) {
-                        renderarea.append(letter.toString());
-                    });
-                    if (index < array.length - 1) {
-                        renderarea.append('<br/>');
-                    }
-                });
-                if (typeof beforeshow === 'function') {
-                    beforeshow();
-                }
-                renderarea.fadeIn('fast');
-            });
         };
     }
 
@@ -707,6 +299,17 @@
             "59": [vorne5, hinten9]
         };
 
+        function parseObject(letters, styleClass, object) {
+            if (typeof object !== 'undefined' && object !== null) {
+                Object.keys(object).forEach(function (y) {
+                    var highlightLetters = object[y];
+                    highlightLetters.forEach(function (x) {
+                        letters[y - 1][x - 1].addStyle(styleClass);
+                    });
+                });
+            }
+        }
+
         function parseArrayOrObject(letters, styleClass, input) {
             if (typeof input !== 'undefined' && input !== null) {
                 if (Array.isArray(input)) {
@@ -719,17 +322,6 @@
             }
         }
 
-        function parseObject(letters, styleClass, object) {
-            if (typeof object !== 'undefined' && object !== null) {
-                Object.keys(object).forEach(function(y) {
-                    var highlightLetters = object[y];
-                    highlightLetters.forEach(function(x) {
-                        letters[y - 1][x - 1].addStyle(styleClass);
-                    });
-                });
-            }
-        }
-
         function parseTimeDefinition(letters, styleClass, definition) {
             if (typeof definition !== 'undefined' && definition !== null) {
                 Object.keys(definition).forEach(function (listString) {
@@ -765,24 +357,451 @@
     }
 
     /**
-     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
+     * Hilfsklasse zum Rendern der Uhr.
-     * @param value Der Buchstabe, der Dargestellt werden soll.
+     * @param layout     Layout-Objekt, das gerendert werden soll.
-     * @param style Die CSS-Styleklassen des Buchstabens.
+     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
      */
-    function Letter(value, style) {
+    function UhrRenderer(layout, renderarea) {
-        var myValue = value;
+        this.render = function render(beforeshow) {
-        var myStyle = style || '';
+            if (layout.parsed === undefined) {
-        this.addStyle = function(style) {
+                switch (layout.version) {
-            if (myStyle === '') {
+                    case 2:
-                myStyle = style;
+                        var delegate = new UhrRendererV2Delegate(layout);
+                        var parsedLayout = delegate.parse();
+                        Object.defineProperty(layout, "parsed", {
+                            "value": parsedLayout,
+                            "writable": false,
+                            "configurable": false
+                        });
+                        break;
+                    default:
+                        console.warn("Unknown layout version: '" + layout.version + "'");
+                        return;
+                }
+            }
+            var letters = layout.parsed;
+            renderarea.fadeOut('fast', function () {
+                renderarea.empty();
+                letters.forEach(function (line, index, array) {
+                    line.forEach(function (letter) {
+                        renderarea.append(letter.toString());
+                    });
+                    if (index < array.length - 1) {
+                        renderarea.append('<br/>');
+                    }
+                });
+                if (typeof beforeshow === 'function') {
+                    beforeshow();
+                }
+                renderarea.fadeIn('fast');
+            });
+        };
+    }
+
+    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'));
+            renderer.render.bind(this)(function () {
+                this.currentMinute = -1;
+                update.bind(this)();
+            }.bind(this));
+            setCookie.bind(this)('uhr-language', languageKey);
+            update.bind(this)();
+        }
+    };
+    var setTheme = function setTheme(theme) {
+        if (theme !== this.options.theme) {
+            this.element.removeClass(this.options.theme).addClass(theme);
+            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
+            this.options.theme = theme;
+            setCookie.bind(this)('uhr-theme', theme);
+        }
+    };
+    var setTime = function setTime(time) {
+        this.currentMinute = -1;
+        if (time === null) {
+            this.options.time = new Date();
         } else {
-                myStyle += ' ' + style;
+            if (this.timer !== null) {
+                window.clearInterval(this.timer);
+            }
+            this.options.time = time;
+        }
+        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);
+        var realWidth = e.width();
+        e.width(realWidth);
+        e.height(realWidth);
+        e.css('font-size', (realWidth / 40) + 'px');
+    };
+
+    // private interface methods
+    var setupHTML;
+    var wireFunctionality;
+    var create = function create() {
+        this.id = uhrGlobals.id++;
+        this.timer = null;
+        this.currentMinute = -1;
+        var userTime = this.options.time;
+        var hash, params;
+        if (this.options.time === undefined) {
+            this.options.time = new Date();
+        }
+        // parse the URL params
+        hash = window.location.hash;
+        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
+            hash = hash.substring(1);
+            hash = decodeURIComponent(hash);
+            params = hash.split('&');
+            params.forEach(function (element) {
+                var pair = element.split('=');
+                var key = pair[0];
+                var value = pair[1];
+                switch (key) {
+                    case 'l':
+                    case 'language':
+                        this.options.language = value;
+                        this.options.force = true;
+                        break;
+                    case 't':
+                    case 'theme':
+                        this.options.theme = value;
+                        this.options.force = true;
+                        break;
+                    case 'm':
+                    case 'mode':
+                        this.options.mode = value;
+                        this.options.force = true;
+                        break;
+                    case 's':
+                    case 'status':
+                        this.options.status = value;
+                        this.options.force = true;
+                        break;
+                }
+            }.bind(this));
+        }
+        // end parse the URL params
+        setupHTML.bind(this)();
+        wireFunctionality.bind(this)();
+        if (userTime !== undefined) {
+            this.time(userTime);
         }
     };
-        this.toString = function() {
+    // private helper methods (not exported)
-            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
+    var toggleConfigScreen = function toggleConfigScreen() {
+        $('#uhr-controlpanel' + this.id).toggle('fast');
     };
+    // set up
+    setupHTML = function setupHTML() {
+        var e = this.element;
+        // Base clock area
+        e.addClass('uhr');
+        e.empty();
+        e.append('<span class="item dot dot1"></span>');
+        e.append('<span class="item dot dot2"></span>');
+        e.append('<span class="item dot dot3"></span>');
+        e.append('<span class="item dot dot4"></span>');
+        e.append('<div class="letterarea"></div>');
+        e.append('<div class="reflection"></div>');
+        setWidth.bind(this)(this.options.width);
+
+        if (this.options.controls) {
+            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+            var content = $('<div class="content"></div>');
+            controlpanel.append(content);
+            // on/off switch
+            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
+            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
+                '" checked="checked" />');
+            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
+                '<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>');
+                uhrGlobals.languages.forEach(function (item) {
+                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
+                });
+                content.append(languageChooser);
             }
+
+            // theme chooser
+            if (uhrGlobals.themes.length > 1) {
+                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
+                uhrGlobals.themes.forEach(function (item) {
+                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
+                });
+                content.append(themeChooser);
+            }
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
+            closebutton.on('click', function () {
+                $('#uhr-controlpanel' + this.id).hide('fast');
+            }.bind(this));
+            content.append(closebutton);
+            e.after(controlpanel);
+            controlpanel.hide();
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
+            configlink.on('click', function () {
+                toggleConfigScreen.bind(this)();
+            }.bind(this));
+            e.after(configlink);
+        }
+    };
+    wireFunctionality = function wireFunctionality() {
+        // on/off switch
+        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
+        toggleSwitch.on('click', function () {
+            this.toggle();
+        }.bind(this));
+        var status = $.cookie('uhr-status' + this.id);
+        if (status === undefined || this.options.force) {
+            status = this.options.status;
+        }
+        toggleSwitch.prop('checked', status === 'on');
+        if (status === 'on') {
+            this.start();
+        } else {
+            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) {
+            mode = 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 () {
+            var languageKey = $('#uhr-languagechooser' + this.id).val();
+            this.language(languageKey);
+        }.bind(this));
+        var selectedLanguage = $.cookie('uhr-language' + this.id);
+        if (selectedLanguage === undefined || this.options.force) {
+            selectedLanguage = this.options.language;
+        }
+        var found = uhrGlobals.languages.some(function (item) {
+            return selectedLanguage === item.code;
+        });
+        if (!found) {
+            var fallbackLanguage;
+            if (uhrGlobals.languages.length > 0) {
+                fallbackLanguage = uhrGlobals.languages[0].code;
+            } else {
+                fallbackLanguage = '';
+            }
+            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
+            selectedLanguage = fallbackLanguage;
+        }
+        languageChooser.val(selectedLanguage);
+        this.options.language = "";
+        this.language(selectedLanguage);
+
+        // theme chooser
+        var themeChooser = $('#uhr-themechooser' + this.id);
+        themeChooser.on('change', function () {
+            var themeKey = $('#uhr-themechooser' + this.id).val();
+            this.theme(themeKey);
+        }.bind(this));
+        var selectedTheme = $.cookie('uhr-theme' + this.id);
+        if (selectedTheme === undefined || this.options.force) {
+            selectedTheme = this.options.theme;
+        }
+        found = uhrGlobals.themes.some(function (item) {
+            return selectedTheme === item.styleClass;
+        });
+        if (!found) {
+            var fallbackTheme = uhrGlobals.themes[0].styleClass;
+            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
+            selectedTheme = fallbackTheme;
+        }
+        themeChooser.val(selectedTheme);
+        this.options.theme = "";
+        this.theme(selectedTheme);
+        if (this.options.autoresize) {
+            $(window).on('resize', function () {
+                var $e = this.element;
+                var $parent = $e.parent();
+                var $window = $(window);
+                var parentWidth = $parent.width();
+                var parentHeight = $parent.height();
+                var windowWidth = $window.width();
+                var windowHeight = $window.height();
+                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
+                setWidth.bind(this)(size);
+            }.bind(this));
+        }
+    };
+    var destroy = function destroy() {
+        this.timer = null;
+        $(this.element)
+            .removeAttr('style')
+            .removeAttr('class')
+            .empty();
+        $('#uhr-configlink' + this.id).remove();
+        $('#uhr-controlpanel' + this.id).remove();
+
+    };
+    setCookie = function setCookie(cookieName, cookieValue) {
+        var options = {};
+        if (this.options.cookiePath !== undefined) {
+            options = {expires: 365, path: this.options.cookiePath};
+        } else {
+            options = {expires: 365};
+        }
+        $.cookie(cookieName + this.id, cookieValue, options);
+    };
+
+    // business logic
+    isOn = function isOn() {
+        return this.timer !== null;
+    };
+    var show;
+    var clear;
+    update = function update() {
+        if (isOn.bind(this)()) {
+            var time = this.options.time;
+            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
+                if (time.getMinutes() === this.currentMinute) {
+                    return;
+                }
+                this.currentMinute = time.getMinutes();
+            }
+            show.bind(this)(time);
+        } else {
+            clear.bind(this)();
+            this.currentMinute = -1;
+        }
+    };
+    var highlight;
+    var getSecond;
+    var getDotMinute;
+    var getCoarseMinute;
+    var getHour;
+    show = function show(time) {
+        var second = getSecond.bind(this)(time);
+        var dotMinute = getDotMinute.bind(this)(time);
+        var hour = getHour.bind(this)(time);
+        var coarseMinute = getCoarseMinute.bind(this)(time);
+        clear.bind(this)();
+        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 = function highlight(itemClass) {
+        this.element.find('.item.' + itemClass).addClass('active');
+    };
+    clear = function clear() {
+        this.element.find('.item').removeClass('active');
+    };
+    getSecond = function getSecond(date) {
+        if (typeof language.bind(this)().getSeconds === 'function') {
+            return language.bind(this)().getSeconds(date);
+        }
+        return date.getSeconds();
+    };
+    getDotMinute = function getDotMinute(date) {
+        if (typeof language.bind(this)().getDotMinute === 'function') {
+            return language.bind(this)().getDotMinute(date);
+        }
+        var minutes = date.getMinutes();
+        return minutes % 5;
+    };
+    getCoarseMinute = function getCoarseMinute(date) {
+        if (typeof language.bind(this)().getCoarseMinute === 'function') {
+            return language.bind(this)().getCoarseMinute(date);
+        }
+        return date.getMinutes();
+    };
+    getHour = function getHour(date) {
+        if (typeof language.bind(this)().getHour === 'function') {
+            return language.bind(this)().getHour(date);
+        }
+        var hour = date.getHours();
+        if (date.getMinutes() >= 25) {
+            return (hour + 1) % 24;
+        }
+        return hour;
+    };
+    language = function language() {
+        var matchingLanguages = uhrGlobals.languages.filter(function (element) {
+            return (element.code === this.options.language);
+        }, this);
+        if (matchingLanguages.length > 0) {
+            return matchingLanguages[0];
+        }
+        // fallback: return empty object
+        return {};
+    };
+
+    $.widget("fritteli.uhr", {
+        "options": {
+            width: '100%',
+            status: 'on',
+            language: 'de_CH',
+            theme: uhrGlobals.themes[0].styleClass,
+            force: false,
+            controls: true,
+            cookiePath: undefined,
+            autoresize: true,
+            mode: 'normal'
+        },
+        "start": start,
+        "stop": stop,
+        "toggle": toggle,
+        "language": setLanguage,
+        "theme": setTheme,
+        "time": setTime,
+        "mode": setMode,
+        "width": setWidth,
+        // constructor method
+        "_create": create,
+        // destructor method
+        "_destroy": destroy
+    });
+    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
 })(jQuery);
 
 (function($) {

dist/jquery.uhr.baselangs.js

@@ -1,6 +1,6 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
+/*! uhr - v9.0.0-dev.0 - 2019-05-03
 * http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
+* Copyright (c) 2019 Manuel Friedli; Licensed GPL-3.0 */
 (function($) {
     'use strict';
     var es_ist = {1: [1, 2, 4, 5, 6]};

dist/jquery.uhr.complete.js

@@ -1,6 +1,6 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
+/*! uhr - v9.0.0-dev.0 - 2019-05-03
 * http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
+* Copyright (c) 2019 Manuel Friedli; Licensed GPL-3.0 */
 (function ($) {
     'use strict';
     var uhrGlobals = {
@@ -41,6 +41,9 @@
     }
 
     // public interface methods (exported later)
+    var setCookie;
+    var isOn;
+    var update;
     var start = function start() {
         if (!isOn.bind(this)()) {
             this.timer = window.setInterval(function () {
@@ -66,436 +69,25 @@
             this.start();
         }
     };
-    var setLanguage = function setLanguage(languageKey) {
+    var language;
-        if (languageKey !== this.options.language) {
-            this.options.language = languageKey;
-            var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
-            renderer.render.bind(this)(function() {
-                this.currentMinute = -1;
-                update.bind(this)();
-            }.bind(this));
-            setCookie.bind(this)('uhr-language', languageKey);
-            update.bind(this)();
-        }
-    };
-    var setTheme = function setTheme(theme) {
-        if (theme !== this.options.theme) {
-            this.element.removeClass(this.options.theme).addClass(theme);
-            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
-            this.options.theme = theme;
-            setCookie.bind(this)('uhr-theme', theme);
-        }
-    };
-    var setTime = function setTime(time) {
-        this.currentMinute = -1;
-        if (time === null) {
-            this.options.time = new Date();
-        } else {
-            if (this.timer !== null) {
-                window.clearInterval(this.timer);
-            }
-            this.options.time = time;
-        }
-        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);
-        var realWidth = e.width();
-        e.width(realWidth);
-        e.height(realWidth);
-        e.css('font-size', (realWidth / 40) + 'px');
-    };
 
-    // private interface methods
-    var create = function create() {
-        this.id = uhrGlobals.id++;
-        this.timer = null;
-        this.currentMinute = -1;
-        var userTime = this.options.time;
-        var hash, params;
-        if (this.options.time === undefined) {
-            this.options.time = new Date();
-        }
-        // parse the URL params
-        hash = window.location.hash;
-        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
-            hash = hash.substring(1);
-            hash = decodeURIComponent(hash);
-            params = hash.split('&');
-            params.forEach(function (element) {
-                var pair = element.split('=');
-                var key = pair[0];
-                var value = pair[1];
-                switch (key) {
-                    case 'l':
-                    case 'language':
-                        this.options.language = value;
-                        this.options.force = true;
-                        break;
-                    case 't':
-                    case 'theme':
-                        this.options.theme = value;
-                        this.options.force = true;
-                        break;
-                    case 'm':
-                    case 'mode':
-                        this.options.mode = value;
-                        this.options.force = true;
-                        break;
-                    case 's':
-                    case 'status':
-                        this.options.status = value;
-                        this.options.force = true;
-                        break;
-                }
-            }.bind(this));
-        }
-        // end parse the URL params
-        setupHTML.bind(this)();
-        wireFunctionality.bind(this)();
-        if (userTime !== undefined) {
-            this.time(userTime);
-        }
-    };
-    // private helper methods (not exported)
-    var toggleConfigScreen = function toggleConfigScreen() {
-        $('#uhr-controlpanel' + this.id).toggle('fast');
-    };
-    // set up
-    var setupHTML = function setupHTML() {
-        var e = this.element;
-        // Base clock area
-        e.addClass('uhr');
-        e.empty();
-        e.append('<span class="item dot dot1"></span>');
-        e.append('<span class="item dot dot2"></span>');
-        e.append('<span class="item dot dot3"></span>');
-        e.append('<span class="item dot dot4"></span>');
-        e.append('<div class="letterarea"></div>');
-        e.append('<div class="reflection"></div>');
-        setWidth.bind(this)(this.options.width);
-
-        if (this.options.controls) {
-            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
-            var content = $('<div class="content"></div>');
-            controlpanel.append(content);
-            // on/off switch
-            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
-            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
-                                '" checked="checked" />');
-            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
-                                '<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>');
-                uhrGlobals.languages.forEach(function(item) {
-                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
-                });
-                content.append(languageChooser);
-            }
-
-            // theme chooser
-            if (uhrGlobals.themes.length > 1) {
-                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
-                uhrGlobals.themes.forEach(function(item) {
-                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
-                });
-                content.append(themeChooser);
-            }
-            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
-            closebutton.on('click', function() {
-                $('#uhr-controlpanel' + this.id).hide('fast');
-            }.bind(this));
-            content.append(closebutton);
-            e.after(controlpanel);
-            controlpanel.hide();
-            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
-            configlink.on('click', function() {
-                toggleConfigScreen.bind(this)();
-            }.bind(this));
-            e.after(configlink);
-        }
-    };
-    var wireFunctionality = function wireFunctionality() {
-        // on/off switch
-        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
-        toggleSwitch.on('click', function() {
-            this.toggle();
-        }.bind(this));
-        var status = $.cookie('uhr-status' + this.id);
-        if (status === undefined || this.options.force) {
-            status = this.options.status;
-        }
-        toggleSwitch.prop('checked', status === 'on');
-        if (status === 'on') {
-            this.start();
-        } else {
-            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) {
-            mode = 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() {
-            var languageKey = $('#uhr-languagechooser' + this.id).val();
-            this.language(languageKey);
-        }.bind(this));
-        var selectedLanguage = $.cookie('uhr-language' + this.id);
-        if (selectedLanguage === undefined || this.options.force) {
-            selectedLanguage = this.options.language;
-        }
-        var found = uhrGlobals.languages.some(function(item) {
-            return selectedLanguage === item.code;
-        });
-        if (!found) {
-            var fallbackLanguage;
-            if (uhrGlobals.languages.length > 0) {
-                fallbackLanguage = uhrGlobals.languages[0].code;
-            } else {
-                fallbackLanguage = '';
-            }
-            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
-            selectedLanguage = fallbackLanguage;
-        }
-        languageChooser.val(selectedLanguage);
-        this.options.language = "";
-        this.language(selectedLanguage);
-
-        // theme chooser
-        var themeChooser = $('#uhr-themechooser' + this.id);
-        themeChooser.on('change', function() {
-            var themeKey = $('#uhr-themechooser' + this.id).val();
-            this.theme(themeKey);
-        }.bind(this));
-        var selectedTheme = $.cookie('uhr-theme' + this.id);
-        if (selectedTheme === undefined || this.options.force) {
-            selectedTheme = this.options.theme;
-        }
-        found = uhrGlobals.themes.some(function(item) {
-            return selectedTheme === item.styleClass;
-        });
-        if (!found) {
-            var fallbackTheme = uhrGlobals.themes[0].styleClass;
-            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
-            selectedTheme = fallbackTheme;
-        }
-        themeChooser.val(selectedTheme);
-        this.options.theme = "";
-        this.theme(selectedTheme);
-        if (this.options.autoresize) {
-            $(window).on('resize', function() {
-                var $e = this.element;
-                var $parent = $e.parent();
-                var $window = $(window);
-                var parentWidth = $parent.width();
-                var parentHeight = $parent.height();
-                var windowWidth = $window.width();
-                var windowHeight = $window.height();
-                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
-                setWidth.bind(this)(size);
-            }.bind(this));
-        }
-    };
-    var destroy = function destroy() {
-        this.timer = null;
-        $(this.element)
-            .removeAttr('style')
-            .removeAttr('class')
-            .empty();
-        $('#uhr-configlink' + this.id).remove();
-        $('#uhr-controlpanel' + this.id).remove();
-
-    };
-    var setCookie = function setCookie(cookieName, cookieValue) {
-        var options = {};
-        if (this.options.cookiePath !== undefined) {
-            options = {expires: 365, path: this.options.cookiePath};
-        } else {
-            options = {expires: 365};
-        }
-        $.cookie(cookieName + this.id, cookieValue, options);
-    };
-
-    // business logic
-    var isOn = function isOn() {
-        return this.timer !== null;
-    };
-    var update = function update() {
-        if (isOn.bind(this)()) {
-            var time = this.options.time;
-            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
-                if (time.getMinutes() === this.currentMinute) {
-                    return;
-                }
-                this.currentMinute = time.getMinutes();
-            }
-            show.bind(this)(time);
-        } else {
-            clear.bind(this)();
-            this.currentMinute = -1;
-        }
-    };
-    var show = function show(time) {
-        var second = getSecond.bind(this)(time);
-        var dotMinute = getDotMinute.bind(this)(time);
-        var hour = getHour.bind(this)(time);
-        var coarseMinute = getCoarseMinute.bind(this)(time);
-        clear.bind(this)();
-        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);
-        }
-    };
-    var highlight = function highlight(itemClass) {
-        this.element.find('.item.' + itemClass).addClass('active');
-    };
-    var clear = function clear() {
-        this.element.find('.item').removeClass('active');
-    };
-    var getSecond = function getSecond(date) {
-        if (typeof language.bind(this)().getSeconds === 'function') {
-            return language.bind(this)().getSeconds(date);
-        }
-        return date.getSeconds();
-    };
-    var getDotMinute = function getDotMinute(date) {
-        if (typeof language.bind(this)().getDotMinute === 'function') {
-            return language.bind(this)().getDotMinute(date);
-        }
-        var minutes = date.getMinutes();
-        return minutes % 5;
-    };
-    var getCoarseMinute = function getCoarseMinute(date) {
-        if (typeof language.bind(this)().getCoarseMinute === 'function') {
-            return language.bind(this)().getCoarseMinute(date);
-        }
-        return date.getMinutes();
-    };
-    var getHour = function getHour(date) {
-        if (typeof language.bind(this)().getHour === 'function') {
-            return language.bind(this)().getHour(date);
-        }
-        var hour = date.getHours();
-        if (date.getMinutes() >= 25) {
-            return (hour + 1) % 24;
-        }
-        return hour;
-    };
-    var language = function language() {
-        var matchingLanguages = uhrGlobals.languages.filter(function(element) {
-            return (element.code === this.options.language);
-        }, this);
-        if (matchingLanguages.length > 0) {
-            return matchingLanguages[0];
-        }
-        // fallback: return empty object
-        return {};
-    };
-
-    $.widget("fritteli.uhr", {
-        "options": {
-            width: '100%',
-            status: 'on',
-            language: 'de_CH',
-            theme: uhrGlobals.themes[0].styleClass,
-            force: false,
-            controls: true,
-            cookiePath: undefined,
-            autoresize: true,
-            mode: 'normal'
-        },
-        "start": start,
-        "stop": stop,
-        "toggle": toggle,
-        "language": setLanguage,
-        "theme": setTheme,
-        "time": setTime,
-        "mode": setMode,
-        "width": setWidth,
-        // constructor method
-        "_create": create,
-        // destructor method
-        "_destroy": destroy
-    });
-    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
     /**
-     * Hilfsklasse zum Rendern der Uhr.
+     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
-     * @param layout     Layout-Objekt, das gerendert werden soll.
+     * @param value Der Buchstabe, der Dargestellt werden soll.
-     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
+     * @param style Die CSS-Styleklassen des Buchstabens.
      */
-    function UhrRenderer(layout, renderarea) {
+    function Letter(value, style) {
-        this.render = function render(beforeshow) {
+        var myValue = value;
-            if (layout.parsed === undefined) {
+        var myStyle = style || '';
-                switch (layout.version) {
+        this.addStyle = function (style) {
-                case 2:
+            if (myStyle === '') {
-                    var delegate = new UhrRendererV2Delegate(layout);
+                myStyle = style;
-                    var parsedLayout = delegate.parse();
+            } else {
-                    Object.defineProperty(layout, "parsed", {"value": parsedLayout, "writable": false, "configurable": false});
+                myStyle += ' ' + style;
-                    break;
-                default:
-                    console.warn("Unknown layout version: '" + layout.version + "'");
-                    return;
             }
-            }
+        };
-            var letters = layout.parsed;
+        this.toString = function () {
-            renderarea.fadeOut('fast', function() {
+            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
-                renderarea.empty();
-                letters.forEach(function(line, index, array) {
-                    line.forEach(function(letter) {
-                        renderarea.append(letter.toString());
-                    });
-                    if (index < array.length - 1) {
-                        renderarea.append('<br/>');
-                    }
-                });
-                if (typeof beforeshow === 'function') {
-                    beforeshow();
-                }
-                renderarea.fadeIn('fast');
-            });
         };
     }
 
@@ -707,6 +299,17 @@
             "59": [vorne5, hinten9]
         };
 
+        function parseObject(letters, styleClass, object) {
+            if (typeof object !== 'undefined' && object !== null) {
+                Object.keys(object).forEach(function (y) {
+                    var highlightLetters = object[y];
+                    highlightLetters.forEach(function (x) {
+                        letters[y - 1][x - 1].addStyle(styleClass);
+                    });
+                });
+            }
+        }
+
         function parseArrayOrObject(letters, styleClass, input) {
             if (typeof input !== 'undefined' && input !== null) {
                 if (Array.isArray(input)) {
@@ -719,17 +322,6 @@
             }
         }
 
-        function parseObject(letters, styleClass, object) {
-            if (typeof object !== 'undefined' && object !== null) {
-                Object.keys(object).forEach(function(y) {
-                    var highlightLetters = object[y];
-                    highlightLetters.forEach(function(x) {
-                        letters[y - 1][x - 1].addStyle(styleClass);
-                    });
-                });
-            }
-        }
-
         function parseTimeDefinition(letters, styleClass, definition) {
             if (typeof definition !== 'undefined' && definition !== null) {
                 Object.keys(definition).forEach(function (listString) {
@@ -765,24 +357,451 @@
     }
 
     /**
-     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
+     * Hilfsklasse zum Rendern der Uhr.
-     * @param value Der Buchstabe, der Dargestellt werden soll.
+     * @param layout     Layout-Objekt, das gerendert werden soll.
-     * @param style Die CSS-Styleklassen des Buchstabens.
+     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
      */
-    function Letter(value, style) {
+    function UhrRenderer(layout, renderarea) {
-        var myValue = value;
+        this.render = function render(beforeshow) {
-        var myStyle = style || '';
+            if (layout.parsed === undefined) {
-        this.addStyle = function(style) {
+                switch (layout.version) {
-            if (myStyle === '') {
+                    case 2:
-                myStyle = style;
+                        var delegate = new UhrRendererV2Delegate(layout);
+                        var parsedLayout = delegate.parse();
+                        Object.defineProperty(layout, "parsed", {
+                            "value": parsedLayout,
+                            "writable": false,
+                            "configurable": false
+                        });
+                        break;
+                    default:
+                        console.warn("Unknown layout version: '" + layout.version + "'");
+                        return;
+                }
+            }
+            var letters = layout.parsed;
+            renderarea.fadeOut('fast', function () {
+                renderarea.empty();
+                letters.forEach(function (line, index, array) {
+                    line.forEach(function (letter) {
+                        renderarea.append(letter.toString());
+                    });
+                    if (index < array.length - 1) {
+                        renderarea.append('<br/>');
+                    }
+                });
+                if (typeof beforeshow === 'function') {
+                    beforeshow();
+                }
+                renderarea.fadeIn('fast');
+            });
+        };
+    }
+
+    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'));
+            renderer.render.bind(this)(function () {
+                this.currentMinute = -1;
+                update.bind(this)();
+            }.bind(this));
+            setCookie.bind(this)('uhr-language', languageKey);
+            update.bind(this)();
+        }
+    };
+    var setTheme = function setTheme(theme) {
+        if (theme !== this.options.theme) {
+            this.element.removeClass(this.options.theme).addClass(theme);
+            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
+            this.options.theme = theme;
+            setCookie.bind(this)('uhr-theme', theme);
+        }
+    };
+    var setTime = function setTime(time) {
+        this.currentMinute = -1;
+        if (time === null) {
+            this.options.time = new Date();
         } else {
-                myStyle += ' ' + style;
+            if (this.timer !== null) {
+                window.clearInterval(this.timer);
+            }
+            this.options.time = time;
+        }
+        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);
+        var realWidth = e.width();
+        e.width(realWidth);
+        e.height(realWidth);
+        e.css('font-size', (realWidth / 40) + 'px');
+    };
+
+    // private interface methods
+    var setupHTML;
+    var wireFunctionality;
+    var create = function create() {
+        this.id = uhrGlobals.id++;
+        this.timer = null;
+        this.currentMinute = -1;
+        var userTime = this.options.time;
+        var hash, params;
+        if (this.options.time === undefined) {
+            this.options.time = new Date();
+        }
+        // parse the URL params
+        hash = window.location.hash;
+        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
+            hash = hash.substring(1);
+            hash = decodeURIComponent(hash);
+            params = hash.split('&');
+            params.forEach(function (element) {
+                var pair = element.split('=');
+                var key = pair[0];
+                var value = pair[1];
+                switch (key) {
+                    case 'l':
+                    case 'language':
+                        this.options.language = value;
+                        this.options.force = true;
+                        break;
+                    case 't':
+                    case 'theme':
+                        this.options.theme = value;
+                        this.options.force = true;
+                        break;
+                    case 'm':
+                    case 'mode':
+                        this.options.mode = value;
+                        this.options.force = true;
+                        break;
+                    case 's':
+                    case 'status':
+                        this.options.status = value;
+                        this.options.force = true;
+                        break;
+                }
+            }.bind(this));
+        }
+        // end parse the URL params
+        setupHTML.bind(this)();
+        wireFunctionality.bind(this)();
+        if (userTime !== undefined) {
+            this.time(userTime);
         }
     };
-        this.toString = function() {
+    // private helper methods (not exported)
-            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
+    var toggleConfigScreen = function toggleConfigScreen() {
+        $('#uhr-controlpanel' + this.id).toggle('fast');
     };
+    // set up
+    setupHTML = function setupHTML() {
+        var e = this.element;
+        // Base clock area
+        e.addClass('uhr');
+        e.empty();
+        e.append('<span class="item dot dot1"></span>');
+        e.append('<span class="item dot dot2"></span>');
+        e.append('<span class="item dot dot3"></span>');
+        e.append('<span class="item dot dot4"></span>');
+        e.append('<div class="letterarea"></div>');
+        e.append('<div class="reflection"></div>');
+        setWidth.bind(this)(this.options.width);
+
+        if (this.options.controls) {
+            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+            var content = $('<div class="content"></div>');
+            controlpanel.append(content);
+            // on/off switch
+            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
+            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
+                '" checked="checked" />');
+            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
+                '<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>');
+                uhrGlobals.languages.forEach(function (item) {
+                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
+                });
+                content.append(languageChooser);
             }
+
+            // theme chooser
+            if (uhrGlobals.themes.length > 1) {
+                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
+                uhrGlobals.themes.forEach(function (item) {
+                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
+                });
+                content.append(themeChooser);
+            }
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
+            closebutton.on('click', function () {
+                $('#uhr-controlpanel' + this.id).hide('fast');
+            }.bind(this));
+            content.append(closebutton);
+            e.after(controlpanel);
+            controlpanel.hide();
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
+            configlink.on('click', function () {
+                toggleConfigScreen.bind(this)();
+            }.bind(this));
+            e.after(configlink);
+        }
+    };
+    wireFunctionality = function wireFunctionality() {
+        // on/off switch
+        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
+        toggleSwitch.on('click', function () {
+            this.toggle();
+        }.bind(this));
+        var status = $.cookie('uhr-status' + this.id);
+        if (status === undefined || this.options.force) {
+            status = this.options.status;
+        }
+        toggleSwitch.prop('checked', status === 'on');
+        if (status === 'on') {
+            this.start();
+        } else {
+            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) {
+            mode = 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 () {
+            var languageKey = $('#uhr-languagechooser' + this.id).val();
+            this.language(languageKey);
+        }.bind(this));
+        var selectedLanguage = $.cookie('uhr-language' + this.id);
+        if (selectedLanguage === undefined || this.options.force) {
+            selectedLanguage = this.options.language;
+        }
+        var found = uhrGlobals.languages.some(function (item) {
+            return selectedLanguage === item.code;
+        });
+        if (!found) {
+            var fallbackLanguage;
+            if (uhrGlobals.languages.length > 0) {
+                fallbackLanguage = uhrGlobals.languages[0].code;
+            } else {
+                fallbackLanguage = '';
+            }
+            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
+            selectedLanguage = fallbackLanguage;
+        }
+        languageChooser.val(selectedLanguage);
+        this.options.language = "";
+        this.language(selectedLanguage);
+
+        // theme chooser
+        var themeChooser = $('#uhr-themechooser' + this.id);
+        themeChooser.on('change', function () {
+            var themeKey = $('#uhr-themechooser' + this.id).val();
+            this.theme(themeKey);
+        }.bind(this));
+        var selectedTheme = $.cookie('uhr-theme' + this.id);
+        if (selectedTheme === undefined || this.options.force) {
+            selectedTheme = this.options.theme;
+        }
+        found = uhrGlobals.themes.some(function (item) {
+            return selectedTheme === item.styleClass;
+        });
+        if (!found) {
+            var fallbackTheme = uhrGlobals.themes[0].styleClass;
+            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
+            selectedTheme = fallbackTheme;
+        }
+        themeChooser.val(selectedTheme);
+        this.options.theme = "";
+        this.theme(selectedTheme);
+        if (this.options.autoresize) {
+            $(window).on('resize', function () {
+                var $e = this.element;
+                var $parent = $e.parent();
+                var $window = $(window);
+                var parentWidth = $parent.width();
+                var parentHeight = $parent.height();
+                var windowWidth = $window.width();
+                var windowHeight = $window.height();
+                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
+                setWidth.bind(this)(size);
+            }.bind(this));
+        }
+    };
+    var destroy = function destroy() {
+        this.timer = null;
+        $(this.element)
+            .removeAttr('style')
+            .removeAttr('class')
+            .empty();
+        $('#uhr-configlink' + this.id).remove();
+        $('#uhr-controlpanel' + this.id).remove();
+
+    };
+    setCookie = function setCookie(cookieName, cookieValue) {
+        var options = {};
+        if (this.options.cookiePath !== undefined) {
+            options = {expires: 365, path: this.options.cookiePath};
+        } else {
+            options = {expires: 365};
+        }
+        $.cookie(cookieName + this.id, cookieValue, options);
+    };
+
+    // business logic
+    isOn = function isOn() {
+        return this.timer !== null;
+    };
+    var show;
+    var clear;
+    update = function update() {
+        if (isOn.bind(this)()) {
+            var time = this.options.time;
+            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
+                if (time.getMinutes() === this.currentMinute) {
+                    return;
+                }
+                this.currentMinute = time.getMinutes();
+            }
+            show.bind(this)(time);
+        } else {
+            clear.bind(this)();
+            this.currentMinute = -1;
+        }
+    };
+    var highlight;
+    var getSecond;
+    var getDotMinute;
+    var getCoarseMinute;
+    var getHour;
+    show = function show(time) {
+        var second = getSecond.bind(this)(time);
+        var dotMinute = getDotMinute.bind(this)(time);
+        var hour = getHour.bind(this)(time);
+        var coarseMinute = getCoarseMinute.bind(this)(time);
+        clear.bind(this)();
+        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 = function highlight(itemClass) {
+        this.element.find('.item.' + itemClass).addClass('active');
+    };
+    clear = function clear() {
+        this.element.find('.item').removeClass('active');
+    };
+    getSecond = function getSecond(date) {
+        if (typeof language.bind(this)().getSeconds === 'function') {
+            return language.bind(this)().getSeconds(date);
+        }
+        return date.getSeconds();
+    };
+    getDotMinute = function getDotMinute(date) {
+        if (typeof language.bind(this)().getDotMinute === 'function') {
+            return language.bind(this)().getDotMinute(date);
+        }
+        var minutes = date.getMinutes();
+        return minutes % 5;
+    };
+    getCoarseMinute = function getCoarseMinute(date) {
+        if (typeof language.bind(this)().getCoarseMinute === 'function') {
+            return language.bind(this)().getCoarseMinute(date);
+        }
+        return date.getMinutes();
+    };
+    getHour = function getHour(date) {
+        if (typeof language.bind(this)().getHour === 'function') {
+            return language.bind(this)().getHour(date);
+        }
+        var hour = date.getHours();
+        if (date.getMinutes() >= 25) {
+            return (hour + 1) % 24;
+        }
+        return hour;
+    };
+    language = function language() {
+        var matchingLanguages = uhrGlobals.languages.filter(function (element) {
+            return (element.code === this.options.language);
+        }, this);
+        if (matchingLanguages.length > 0) {
+            return matchingLanguages[0];
+        }
+        // fallback: return empty object
+        return {};
+    };
+
+    $.widget("fritteli.uhr", {
+        "options": {
+            width: '100%',
+            status: 'on',
+            language: 'de_CH',
+            theme: uhrGlobals.themes[0].styleClass,
+            force: false,
+            controls: true,
+            cookiePath: undefined,
+            autoresize: true,
+            mode: 'normal'
+        },
+        "start": start,
+        "stop": stop,
+        "toggle": toggle,
+        "language": setLanguage,
+        "theme": setTheme,
+        "time": setTime,
+        "mode": setMode,
+        "width": setWidth,
+        // constructor method
+        "_create": create,
+        // destructor method
+        "_destroy": destroy
+    });
+    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
 })(jQuery);
 
 (function($) {

dist/jquery.uhr.langs.js

@@ -1,6 +1,6 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
+/*! uhr - v9.0.0-dev.0 - 2019-05-03
 * http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
+* Copyright (c) 2019 Manuel Friedli; Licensed GPL-3.0 */
 (function($) {
     'use strict';
     var es_ist = {1: [1, 2, 4, 5, 6]};

dist/jquery.uhr.main.js

@@ -1,6 +1,6 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
+/*! uhr - v9.0.0-dev.0 - 2019-05-03
 * http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
+* Copyright (c) 2019 Manuel Friedli; Licensed GPL-3.0 */
 (function ($) {
     'use strict';
     var uhrGlobals = {
@@ -41,6 +41,9 @@
     }
 
     // public interface methods (exported later)
+    var setCookie;
+    var isOn;
+    var update;
     var start = function start() {
         if (!isOn.bind(this)()) {
             this.timer = window.setInterval(function () {
@@ -66,436 +69,25 @@
             this.start();
         }
     };
-    var setLanguage = function setLanguage(languageKey) {
+    var language;
-        if (languageKey !== this.options.language) {
-            this.options.language = languageKey;
-            var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
-            renderer.render.bind(this)(function() {
-                this.currentMinute = -1;
-                update.bind(this)();
-            }.bind(this));
-            setCookie.bind(this)('uhr-language', languageKey);
-            update.bind(this)();
-        }
-    };
-    var setTheme = function setTheme(theme) {
-        if (theme !== this.options.theme) {
-            this.element.removeClass(this.options.theme).addClass(theme);
-            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
-            this.options.theme = theme;
-            setCookie.bind(this)('uhr-theme', theme);
-        }
-    };
-    var setTime = function setTime(time) {
-        this.currentMinute = -1;
-        if (time === null) {
-            this.options.time = new Date();
-        } else {
-            if (this.timer !== null) {
-                window.clearInterval(this.timer);
-            }
-            this.options.time = time;
-        }
-        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);
-        var realWidth = e.width();
-        e.width(realWidth);
-        e.height(realWidth);
-        e.css('font-size', (realWidth / 40) + 'px');
-    };
 
-    // private interface methods
-    var create = function create() {
-        this.id = uhrGlobals.id++;
-        this.timer = null;
-        this.currentMinute = -1;
-        var userTime = this.options.time;
-        var hash, params;
-        if (this.options.time === undefined) {
-            this.options.time = new Date();
-        }
-        // parse the URL params
-        hash = window.location.hash;
-        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
-            hash = hash.substring(1);
-            hash = decodeURIComponent(hash);
-            params = hash.split('&');
-            params.forEach(function (element) {
-                var pair = element.split('=');
-                var key = pair[0];
-                var value = pair[1];
-                switch (key) {
-                    case 'l':
-                    case 'language':
-                        this.options.language = value;
-                        this.options.force = true;
-                        break;
-                    case 't':
-                    case 'theme':
-                        this.options.theme = value;
-                        this.options.force = true;
-                        break;
-                    case 'm':
-                    case 'mode':
-                        this.options.mode = value;
-                        this.options.force = true;
-                        break;
-                    case 's':
-                    case 'status':
-                        this.options.status = value;
-                        this.options.force = true;
-                        break;
-                }
-            }.bind(this));
-        }
-        // end parse the URL params
-        setupHTML.bind(this)();
-        wireFunctionality.bind(this)();
-        if (userTime !== undefined) {
-            this.time(userTime);
-        }
-    };
-    // private helper methods (not exported)
-    var toggleConfigScreen = function toggleConfigScreen() {
-        $('#uhr-controlpanel' + this.id).toggle('fast');
-    };
-    // set up
-    var setupHTML = function setupHTML() {
-        var e = this.element;
-        // Base clock area
-        e.addClass('uhr');
-        e.empty();
-        e.append('<span class="item dot dot1"></span>');
-        e.append('<span class="item dot dot2"></span>');
-        e.append('<span class="item dot dot3"></span>');
-        e.append('<span class="item dot dot4"></span>');
-        e.append('<div class="letterarea"></div>');
-        e.append('<div class="reflection"></div>');
-        setWidth.bind(this)(this.options.width);
-
-        if (this.options.controls) {
-            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
-            var content = $('<div class="content"></div>');
-            controlpanel.append(content);
-            // on/off switch
-            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
-            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
-                                '" checked="checked" />');
-            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
-                                '<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>');
-                uhrGlobals.languages.forEach(function(item) {
-                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
-                });
-                content.append(languageChooser);
-            }
-
-            // theme chooser
-            if (uhrGlobals.themes.length > 1) {
-                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
-                uhrGlobals.themes.forEach(function(item) {
-                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
-                });
-                content.append(themeChooser);
-            }
-            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
-            closebutton.on('click', function() {
-                $('#uhr-controlpanel' + this.id).hide('fast');
-            }.bind(this));
-            content.append(closebutton);
-            e.after(controlpanel);
-            controlpanel.hide();
-            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
-            configlink.on('click', function() {
-                toggleConfigScreen.bind(this)();
-            }.bind(this));
-            e.after(configlink);
-        }
-    };
-    var wireFunctionality = function wireFunctionality() {
-        // on/off switch
-        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
-        toggleSwitch.on('click', function() {
-            this.toggle();
-        }.bind(this));
-        var status = $.cookie('uhr-status' + this.id);
-        if (status === undefined || this.options.force) {
-            status = this.options.status;
-        }
-        toggleSwitch.prop('checked', status === 'on');
-        if (status === 'on') {
-            this.start();
-        } else {
-            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) {
-            mode = 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() {
-            var languageKey = $('#uhr-languagechooser' + this.id).val();
-            this.language(languageKey);
-        }.bind(this));
-        var selectedLanguage = $.cookie('uhr-language' + this.id);
-        if (selectedLanguage === undefined || this.options.force) {
-            selectedLanguage = this.options.language;
-        }
-        var found = uhrGlobals.languages.some(function(item) {
-            return selectedLanguage === item.code;
-        });
-        if (!found) {
-            var fallbackLanguage;
-            if (uhrGlobals.languages.length > 0) {
-                fallbackLanguage = uhrGlobals.languages[0].code;
-            } else {
-                fallbackLanguage = '';
-            }
-            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
-            selectedLanguage = fallbackLanguage;
-        }
-        languageChooser.val(selectedLanguage);
-        this.options.language = "";
-        this.language(selectedLanguage);
-
-        // theme chooser
-        var themeChooser = $('#uhr-themechooser' + this.id);
-        themeChooser.on('change', function() {
-            var themeKey = $('#uhr-themechooser' + this.id).val();
-            this.theme(themeKey);
-        }.bind(this));
-        var selectedTheme = $.cookie('uhr-theme' + this.id);
-        if (selectedTheme === undefined || this.options.force) {
-            selectedTheme = this.options.theme;
-        }
-        found = uhrGlobals.themes.some(function(item) {
-            return selectedTheme === item.styleClass;
-        });
-        if (!found) {
-            var fallbackTheme = uhrGlobals.themes[0].styleClass;
-            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
-            selectedTheme = fallbackTheme;
-        }
-        themeChooser.val(selectedTheme);
-        this.options.theme = "";
-        this.theme(selectedTheme);
-        if (this.options.autoresize) {
-            $(window).on('resize', function() {
-                var $e = this.element;
-                var $parent = $e.parent();
-                var $window = $(window);
-                var parentWidth = $parent.width();
-                var parentHeight = $parent.height();
-                var windowWidth = $window.width();
-                var windowHeight = $window.height();
-                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
-                setWidth.bind(this)(size);
-            }.bind(this));
-        }
-    };
-    var destroy = function destroy() {
-        this.timer = null;
-        $(this.element)
-            .removeAttr('style')
-            .removeAttr('class')
-            .empty();
-        $('#uhr-configlink' + this.id).remove();
-        $('#uhr-controlpanel' + this.id).remove();
-
-    };
-    var setCookie = function setCookie(cookieName, cookieValue) {
-        var options = {};
-        if (this.options.cookiePath !== undefined) {
-            options = {expires: 365, path: this.options.cookiePath};
-        } else {
-            options = {expires: 365};
-        }
-        $.cookie(cookieName + this.id, cookieValue, options);
-    };
-
-    // business logic
-    var isOn = function isOn() {
-        return this.timer !== null;
-    };
-    var update = function update() {
-        if (isOn.bind(this)()) {
-            var time = this.options.time;
-            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
-                if (time.getMinutes() === this.currentMinute) {
-                    return;
-                }
-                this.currentMinute = time.getMinutes();
-            }
-            show.bind(this)(time);
-        } else {
-            clear.bind(this)();
-            this.currentMinute = -1;
-        }
-    };
-    var show = function show(time) {
-        var second = getSecond.bind(this)(time);
-        var dotMinute = getDotMinute.bind(this)(time);
-        var hour = getHour.bind(this)(time);
-        var coarseMinute = getCoarseMinute.bind(this)(time);
-        clear.bind(this)();
-        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);
-        }
-    };
-    var highlight = function highlight(itemClass) {
-        this.element.find('.item.' + itemClass).addClass('active');
-    };
-    var clear = function clear() {
-        this.element.find('.item').removeClass('active');
-    };
-    var getSecond = function getSecond(date) {
-        if (typeof language.bind(this)().getSeconds === 'function') {
-            return language.bind(this)().getSeconds(date);
-        }
-        return date.getSeconds();
-    };
-    var getDotMinute = function getDotMinute(date) {
-        if (typeof language.bind(this)().getDotMinute === 'function') {
-            return language.bind(this)().getDotMinute(date);
-        }
-        var minutes = date.getMinutes();
-        return minutes % 5;
-    };
-    var getCoarseMinute = function getCoarseMinute(date) {
-        if (typeof language.bind(this)().getCoarseMinute === 'function') {
-            return language.bind(this)().getCoarseMinute(date);
-        }
-        return date.getMinutes();
-    };
-    var getHour = function getHour(date) {
-        if (typeof language.bind(this)().getHour === 'function') {
-            return language.bind(this)().getHour(date);
-        }
-        var hour = date.getHours();
-        if (date.getMinutes() >= 25) {
-            return (hour + 1) % 24;
-        }
-        return hour;
-    };
-    var language = function language() {
-        var matchingLanguages = uhrGlobals.languages.filter(function(element) {
-            return (element.code === this.options.language);
-        }, this);
-        if (matchingLanguages.length > 0) {
-            return matchingLanguages[0];
-        }
-        // fallback: return empty object
-        return {};
-    };
-
-    $.widget("fritteli.uhr", {
-        "options": {
-            width: '100%',
-            status: 'on',
-            language: 'de_CH',
-            theme: uhrGlobals.themes[0].styleClass,
-            force: false,
-            controls: true,
-            cookiePath: undefined,
-            autoresize: true,
-            mode: 'normal'
-        },
-        "start": start,
-        "stop": stop,
-        "toggle": toggle,
-        "language": setLanguage,
-        "theme": setTheme,
-        "time": setTime,
-        "mode": setMode,
-        "width": setWidth,
-        // constructor method
-        "_create": create,
-        // destructor method
-        "_destroy": destroy
-    });
-    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
     /**
-     * Hilfsklasse zum Rendern der Uhr.
+     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
-     * @param layout     Layout-Objekt, das gerendert werden soll.
+     * @param value Der Buchstabe, der Dargestellt werden soll.
-     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
+     * @param style Die CSS-Styleklassen des Buchstabens.
      */
-    function UhrRenderer(layout, renderarea) {
+    function Letter(value, style) {
-        this.render = function render(beforeshow) {
+        var myValue = value;
-            if (layout.parsed === undefined) {
+        var myStyle = style || '';
-                switch (layout.version) {
+        this.addStyle = function (style) {
-                case 2:
+            if (myStyle === '') {
-                    var delegate = new UhrRendererV2Delegate(layout);
+                myStyle = style;
-                    var parsedLayout = delegate.parse();
+            } else {
-                    Object.defineProperty(layout, "parsed", {"value": parsedLayout, "writable": false, "configurable": false});
+                myStyle += ' ' + style;
-                    break;
-                default:
-                    console.warn("Unknown layout version: '" + layout.version + "'");
-                    return;
             }
-            }
+        };
-            var letters = layout.parsed;
+        this.toString = function () {
-            renderarea.fadeOut('fast', function() {
+            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
-                renderarea.empty();
-                letters.forEach(function(line, index, array) {
-                    line.forEach(function(letter) {
-                        renderarea.append(letter.toString());
-                    });
-                    if (index < array.length - 1) {
-                        renderarea.append('<br/>');
-                    }
-                });
-                if (typeof beforeshow === 'function') {
-                    beforeshow();
-                }
-                renderarea.fadeIn('fast');
-            });
         };
     }
 
@@ -707,6 +299,17 @@
             "59": [vorne5, hinten9]
         };
 
+        function parseObject(letters, styleClass, object) {
+            if (typeof object !== 'undefined' && object !== null) {
+                Object.keys(object).forEach(function (y) {
+                    var highlightLetters = object[y];
+                    highlightLetters.forEach(function (x) {
+                        letters[y - 1][x - 1].addStyle(styleClass);
+                    });
+                });
+            }
+        }
+
         function parseArrayOrObject(letters, styleClass, input) {
             if (typeof input !== 'undefined' && input !== null) {
                 if (Array.isArray(input)) {
@@ -719,17 +322,6 @@
             }
         }
 
-        function parseObject(letters, styleClass, object) {
-            if (typeof object !== 'undefined' && object !== null) {
-                Object.keys(object).forEach(function(y) {
-                    var highlightLetters = object[y];
-                    highlightLetters.forEach(function(x) {
-                        letters[y - 1][x - 1].addStyle(styleClass);
-                    });
-                });
-            }
-        }
-
         function parseTimeDefinition(letters, styleClass, definition) {
             if (typeof definition !== 'undefined' && definition !== null) {
                 Object.keys(definition).forEach(function (listString) {
@@ -765,22 +357,449 @@
     }
 
     /**
-     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
+     * Hilfsklasse zum Rendern der Uhr.
-     * @param value Der Buchstabe, der Dargestellt werden soll.
+     * @param layout     Layout-Objekt, das gerendert werden soll.
-     * @param style Die CSS-Styleklassen des Buchstabens.
+     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
      */
-    function Letter(value, style) {
+    function UhrRenderer(layout, renderarea) {
-        var myValue = value;
+        this.render = function render(beforeshow) {
-        var myStyle = style || '';
+            if (layout.parsed === undefined) {
-        this.addStyle = function(style) {
+                switch (layout.version) {
-            if (myStyle === '') {
+                    case 2:
-                myStyle = style;
+                        var delegate = new UhrRendererV2Delegate(layout);
+                        var parsedLayout = delegate.parse();
+                        Object.defineProperty(layout, "parsed", {
+                            "value": parsedLayout,
+                            "writable": false,
+                            "configurable": false
+                        });
+                        break;
+                    default:
+                        console.warn("Unknown layout version: '" + layout.version + "'");
+                        return;
+                }
+            }
+            var letters = layout.parsed;
+            renderarea.fadeOut('fast', function () {
+                renderarea.empty();
+                letters.forEach(function (line, index, array) {
+                    line.forEach(function (letter) {
+                        renderarea.append(letter.toString());
+                    });
+                    if (index < array.length - 1) {
+                        renderarea.append('<br/>');
+                    }
+                });
+                if (typeof beforeshow === 'function') {
+                    beforeshow();
+                }
+                renderarea.fadeIn('fast');
+            });
+        };
+    }
+
+    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'));
+            renderer.render.bind(this)(function () {
+                this.currentMinute = -1;
+                update.bind(this)();
+            }.bind(this));
+            setCookie.bind(this)('uhr-language', languageKey);
+            update.bind(this)();
+        }
+    };
+    var setTheme = function setTheme(theme) {
+        if (theme !== this.options.theme) {
+            this.element.removeClass(this.options.theme).addClass(theme);
+            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
+            this.options.theme = theme;
+            setCookie.bind(this)('uhr-theme', theme);
+        }
+    };
+    var setTime = function setTime(time) {
+        this.currentMinute = -1;
+        if (time === null) {
+            this.options.time = new Date();
         } else {
-                myStyle += ' ' + style;
+            if (this.timer !== null) {
+                window.clearInterval(this.timer);
+            }
+            this.options.time = time;
+        }
+        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);
+        var realWidth = e.width();
+        e.width(realWidth);
+        e.height(realWidth);
+        e.css('font-size', (realWidth / 40) + 'px');
+    };
+
+    // private interface methods
+    var setupHTML;
+    var wireFunctionality;
+    var create = function create() {
+        this.id = uhrGlobals.id++;
+        this.timer = null;
+        this.currentMinute = -1;
+        var userTime = this.options.time;
+        var hash, params;
+        if (this.options.time === undefined) {
+            this.options.time = new Date();
+        }
+        // parse the URL params
+        hash = window.location.hash;
+        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
+            hash = hash.substring(1);
+            hash = decodeURIComponent(hash);
+            params = hash.split('&');
+            params.forEach(function (element) {
+                var pair = element.split('=');
+                var key = pair[0];
+                var value = pair[1];
+                switch (key) {
+                    case 'l':
+                    case 'language':
+                        this.options.language = value;
+                        this.options.force = true;
+                        break;
+                    case 't':
+                    case 'theme':
+                        this.options.theme = value;
+                        this.options.force = true;
+                        break;
+                    case 'm':
+                    case 'mode':
+                        this.options.mode = value;
+                        this.options.force = true;
+                        break;
+                    case 's':
+                    case 'status':
+                        this.options.status = value;
+                        this.options.force = true;
+                        break;
+                }
+            }.bind(this));
+        }
+        // end parse the URL params
+        setupHTML.bind(this)();
+        wireFunctionality.bind(this)();
+        if (userTime !== undefined) {
+            this.time(userTime);
         }
     };
-        this.toString = function() {
+    // private helper methods (not exported)
-            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
+    var toggleConfigScreen = function toggleConfigScreen() {
+        $('#uhr-controlpanel' + this.id).toggle('fast');
     };
+    // set up
+    setupHTML = function setupHTML() {
+        var e = this.element;
+        // Base clock area
+        e.addClass('uhr');
+        e.empty();
+        e.append('<span class="item dot dot1"></span>');
+        e.append('<span class="item dot dot2"></span>');
+        e.append('<span class="item dot dot3"></span>');
+        e.append('<span class="item dot dot4"></span>');
+        e.append('<div class="letterarea"></div>');
+        e.append('<div class="reflection"></div>');
+        setWidth.bind(this)(this.options.width);
+
+        if (this.options.controls) {
+            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+            var content = $('<div class="content"></div>');
+            controlpanel.append(content);
+            // on/off switch
+            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
+            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
+                '" checked="checked" />');
+            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
+                '<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>');
+                uhrGlobals.languages.forEach(function (item) {
+                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
+                });
+                content.append(languageChooser);
             }
+
+            // theme chooser
+            if (uhrGlobals.themes.length > 1) {
+                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
+                uhrGlobals.themes.forEach(function (item) {
+                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
+                });
+                content.append(themeChooser);
+            }
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
+            closebutton.on('click', function () {
+                $('#uhr-controlpanel' + this.id).hide('fast');
+            }.bind(this));
+            content.append(closebutton);
+            e.after(controlpanel);
+            controlpanel.hide();
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
+            configlink.on('click', function () {
+                toggleConfigScreen.bind(this)();
+            }.bind(this));
+            e.after(configlink);
+        }
+    };
+    wireFunctionality = function wireFunctionality() {
+        // on/off switch
+        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
+        toggleSwitch.on('click', function () {
+            this.toggle();
+        }.bind(this));
+        var status = $.cookie('uhr-status' + this.id);
+        if (status === undefined || this.options.force) {
+            status = this.options.status;
+        }
+        toggleSwitch.prop('checked', status === 'on');
+        if (status === 'on') {
+            this.start();
+        } else {
+            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) {
+            mode = 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 () {
+            var languageKey = $('#uhr-languagechooser' + this.id).val();
+            this.language(languageKey);
+        }.bind(this));
+        var selectedLanguage = $.cookie('uhr-language' + this.id);
+        if (selectedLanguage === undefined || this.options.force) {
+            selectedLanguage = this.options.language;
+        }
+        var found = uhrGlobals.languages.some(function (item) {
+            return selectedLanguage === item.code;
+        });
+        if (!found) {
+            var fallbackLanguage;
+            if (uhrGlobals.languages.length > 0) {
+                fallbackLanguage = uhrGlobals.languages[0].code;
+            } else {
+                fallbackLanguage = '';
+            }
+            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
+            selectedLanguage = fallbackLanguage;
+        }
+        languageChooser.val(selectedLanguage);
+        this.options.language = "";
+        this.language(selectedLanguage);
+
+        // theme chooser
+        var themeChooser = $('#uhr-themechooser' + this.id);
+        themeChooser.on('change', function () {
+            var themeKey = $('#uhr-themechooser' + this.id).val();
+            this.theme(themeKey);
+        }.bind(this));
+        var selectedTheme = $.cookie('uhr-theme' + this.id);
+        if (selectedTheme === undefined || this.options.force) {
+            selectedTheme = this.options.theme;
+        }
+        found = uhrGlobals.themes.some(function (item) {
+            return selectedTheme === item.styleClass;
+        });
+        if (!found) {
+            var fallbackTheme = uhrGlobals.themes[0].styleClass;
+            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
+            selectedTheme = fallbackTheme;
+        }
+        themeChooser.val(selectedTheme);
+        this.options.theme = "";
+        this.theme(selectedTheme);
+        if (this.options.autoresize) {
+            $(window).on('resize', function () {
+                var $e = this.element;
+                var $parent = $e.parent();
+                var $window = $(window);
+                var parentWidth = $parent.width();
+                var parentHeight = $parent.height();
+                var windowWidth = $window.width();
+                var windowHeight = $window.height();
+                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
+                setWidth.bind(this)(size);
+            }.bind(this));
+        }
+    };
+    var destroy = function destroy() {
+        this.timer = null;
+        $(this.element)
+            .removeAttr('style')
+            .removeAttr('class')
+            .empty();
+        $('#uhr-configlink' + this.id).remove();
+        $('#uhr-controlpanel' + this.id).remove();
+
+    };
+    setCookie = function setCookie(cookieName, cookieValue) {
+        var options = {};
+        if (this.options.cookiePath !== undefined) {
+            options = {expires: 365, path: this.options.cookiePath};
+        } else {
+            options = {expires: 365};
+        }
+        $.cookie(cookieName + this.id, cookieValue, options);
+    };
+
+    // business logic
+    isOn = function isOn() {
+        return this.timer !== null;
+    };
+    var show;
+    var clear;
+    update = function update() {
+        if (isOn.bind(this)()) {
+            var time = this.options.time;
+            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
+                if (time.getMinutes() === this.currentMinute) {
+                    return;
+                }
+                this.currentMinute = time.getMinutes();
+            }
+            show.bind(this)(time);
+        } else {
+            clear.bind(this)();
+            this.currentMinute = -1;
+        }
+    };
+    var highlight;
+    var getSecond;
+    var getDotMinute;
+    var getCoarseMinute;
+    var getHour;
+    show = function show(time) {
+        var second = getSecond.bind(this)(time);
+        var dotMinute = getDotMinute.bind(this)(time);
+        var hour = getHour.bind(this)(time);
+        var coarseMinute = getCoarseMinute.bind(this)(time);
+        clear.bind(this)();
+        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 = function highlight(itemClass) {
+        this.element.find('.item.' + itemClass).addClass('active');
+    };
+    clear = function clear() {
+        this.element.find('.item').removeClass('active');
+    };
+    getSecond = function getSecond(date) {
+        if (typeof language.bind(this)().getSeconds === 'function') {
+            return language.bind(this)().getSeconds(date);
+        }
+        return date.getSeconds();
+    };
+    getDotMinute = function getDotMinute(date) {
+        if (typeof language.bind(this)().getDotMinute === 'function') {
+            return language.bind(this)().getDotMinute(date);
+        }
+        var minutes = date.getMinutes();
+        return minutes % 5;
+    };
+    getCoarseMinute = function getCoarseMinute(date) {
+        if (typeof language.bind(this)().getCoarseMinute === 'function') {
+            return language.bind(this)().getCoarseMinute(date);
+        }
+        return date.getMinutes();
+    };
+    getHour = function getHour(date) {
+        if (typeof language.bind(this)().getHour === 'function') {
+            return language.bind(this)().getHour(date);
+        }
+        var hour = date.getHours();
+        if (date.getMinutes() >= 25) {
+            return (hour + 1) % 24;
+        }
+        return hour;
+    };
+    language = function language() {
+        var matchingLanguages = uhrGlobals.languages.filter(function (element) {
+            return (element.code === this.options.language);
+        }, this);
+        if (matchingLanguages.length > 0) {
+            return matchingLanguages[0];
+        }
+        // fallback: return empty object
+        return {};
+    };
+
+    $.widget("fritteli.uhr", {
+        "options": {
+            width: '100%',
+            status: 'on',
+            language: 'de_CH',
+            theme: uhrGlobals.themes[0].styleClass,
+            force: false,
+            controls: true,
+            cookiePath: undefined,
+            autoresize: true,
+            mode: 'normal'
+        },
+        "start": start,
+        "stop": stop,
+        "toggle": toggle,
+        "language": setLanguage,
+        "theme": setTheme,
+        "time": setTime,
+        "mode": setMode,
+        "width": setWidth,
+        // constructor method
+        "_create": create,
+        // destructor method
+        "_destroy": destroy
+    });
+    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
 })(jQuery);

dist/uhr-black.min.css

@@ -1 +1 @@
-.black .onoffswitch-inner:before,.uhr.black{background-color:#111}.uhr.black .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.black .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}
+.uhr.black{background-color:#111}.black .onoffswitch-inner:before{background-color:#111}.uhr.black .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.black .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}

dist/uhr-blue.min.css

@@ -1 +1 @@
-.blue .onoffswitch-inner:before,.uhr.blue{background-color:#00a}.uhr.blue .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.blue .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}
+.uhr.blue{background-color:#00a}.blue .onoffswitch-inner:before{background-color:#00a}.uhr.blue .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.blue .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}

dist/uhr-green.min.css

@@ -1 +1 @@
-.green .onoffswitch-inner:before,.uhr.green{background-color:#0c0}.uhr.green .dot:not(.active){border-color:rgba(0,0,0,.1);box-shadow:0 0 .1em rgba(0,0,0,.1)}.uhr.green .letter:not(.active){color:rgba(0,0,0,.1);text-shadow:0 0 .1em rgba(0,0,0,.1)}
+.uhr.green{background-color:#0c0}.green .onoffswitch-inner:before{background-color:#0c0}.uhr.green .dot:not(.active){border-color:rgba(0,0,0,.1);box-shadow:0 0 .1em rgba(0,0,0,.1)}.uhr.green .letter:not(.active){color:rgba(0,0,0,.1);text-shadow:0 0 .1em rgba(0,0,0,.1)}

dist/uhr-pink.min.css

@@ -1 +1 @@
-.pink .onoffswitch-inner:before,.uhr.pink{background-color:#f0a}.uhr.pink .dot.active{border-color:#fff;box-shadow:0 0 .1em #fff}.uhr.pink .letter.active{color:#fff;text-shadow:0 0 .1em #fff}.uhr.pink .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.pink .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}
+.uhr.pink{background-color:#f0a}.uhr.pink .dot.active{border-color:#fff;box-shadow:0 0 .1em #fff}.uhr.pink .letter.active{color:#fff;text-shadow:0 0 .1em #fff}.pink .onoffswitch-inner:before{background-color:#f0a}.uhr.pink .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.pink .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}

dist/uhr-red.min.css

@@ -1 +1 @@
-.red .onoffswitch-inner:before,.uhr.red{background-color:#700}.uhr.red .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.red .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}
+.uhr.red{background-color:#700}.red .onoffswitch-inner:before{background-color:#700}.uhr.red .dot:not(.active){border-color:rgba(255,255,255,.1);box-shadow:0 0 .1em rgba(255,255,255,.1)}.uhr.red .letter:not(.active){color:rgba(255,255,255,.1);text-shadow:0 0 .1em rgba(255,255,255,.1)}

dist/uhr-white.min.css

@@ -1 +1 @@
-.uhr.white,.white .onoffswitch-inner:before{background-color:#ccc}.uhr.white .dot.active{border-color:#fff;box-shadow:0 0 .1em #fff}.uhr.white .letter.active{color:#fff;text-shadow:0 0 .1em #fff}.uhr.white .dot:not(.active){border-color:rgba(0,0,0,.1);box-shadow:0 0 .1em rgba(0,0,0,.1)}.uhr.white .letter:not(.active){color:rgba(0,0,0,.1);text-shadow:0 0 .1em rgba(0,0,0,.1)}
+.uhr.white{background-color:#ccc}.uhr.white .dot.active{border-color:#fff;box-shadow:0 0 .1em #fff}.uhr.white .letter.active{color:#fff;text-shadow:0 0 .1em #fff}.white .onoffswitch-inner:before{background-color:#ccc}.uhr.white .dot:not(.active){border-color:rgba(0,0,0,.1);box-shadow:0 0 .1em rgba(0,0,0,.1)}.uhr.white .letter:not(.active){color:rgba(0,0,0,.1);text-shadow:0 0 .1em rgba(0,0,0,.1)}

dist/uhr-yellow.min.css

@@ -1 +1 @@
-.uhr.yellow,.yellow .onoffswitch-inner:before{background-color:#fd0}.uhr.yellow .dot.active{border-color:#fff;box-shadow:0 0 .1em #fff}.uhr.yellow .letter.active{color:#fff;text-shadow:0 0 .1em #fff}.uhr.yellow .dot:not(.active){border-color:rgba(0,0,0,.05);box-shadow:0 0 .1em rgba(0,0,0,.05)}.uhr.yellow .letter:not(.active){color:rgba(0,0,0,.05);text-shadow:0 0 .1em rgba(0,0,0,.05)}
+.uhr.yellow{background-color:#fd0}.uhr.yellow .dot.active{border-color:#fff;box-shadow:0 0 .1em #fff}.uhr.yellow .letter.active{color:#fff;text-shadow:0 0 .1em #fff}.yellow .onoffswitch-inner:before{background-color:#fd0}.uhr.yellow .dot:not(.active){border-color:rgba(0,0,0,.05);box-shadow:0 0 .1em rgba(0,0,0,.05)}.uhr.yellow .letter:not(.active){color:rgba(0,0,0,.05);text-shadow:0 0 .1em rgba(0,0,0,.05)}

dist/uhr.min.css

@@ -1 +1 @@
-@font-face{font-family:Uhrenfont;src:url(../resources/uhr.woff) format('woff')}body{font-family:Uhrenfont,sans-serif}.uhr{position:relative;margin:0;transition:background-color .5s}.dot,.uhr .letterarea,.uhr .reflection{position:absolute;display:block}.uhr .reflection{top:0;bottom:0;left:0;right:0;background:radial-gradient(225em 45em at 160% 0,rgba(255,255,255,.4) 0,rgba(255,255,255,.05) 40%,rgba(255,255,255,0) 40%) no-repeat;margin:.15em}.uhr .letterarea{top:12%;bottom:12%;left:12%;right:12%;overflow:hidden;font-size:200%}.dot1,.dot2{top:3.75%}.dot3,.dot4{bottom:3.75%}.dot2,.dot3{right:3.75%}.item{transition:box-shadow .5s,text-shadow .5s,border-color .5s,color .5s}.dot{height:0;width:0;border:.2em solid;border-radius:1em}.dot.active{border-color:#eee;box-shadow:0 0 .2em #eee}.dot1{left:3.75%}.dot4{left:3.75%}.letter{height:10%;width:9.0909%;padding:0;margin:0;display:inline-block;text-align:center;line-height:160%}.letter.active{color:#eee;text-shadow:0 0 .2em #eee}.onoffswitch{position:relative;width:86px;margin:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.onoffswitch-checkbox{display:none}.onoffswitch-label{display:block;overflow:hidden;cursor:pointer;border:2px solid #999;border-radius:50px}.modeswitch-inner,.onoffswitch-inner{width:200%;margin-left:-100%;-moz-transition:margin .3s ease-in 0s;-webkit-transition:margin .3s ease-in 0s;-o-transition:margin .3s ease-in 0s;transition:margin .3s ease-in 0s}.modeswitch-inner:after,.modeswitch-inner:before,.onoffswitch-inner:after,.onoffswitch-inner:before{float:left;width:50%;height:24px;padding:0;line-height:24px;font-size:18px;font-weight:700;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.onoffswitch-inner:before{content:"EIN";padding-left:12px;color:#eee;transition:background-color .5s}.onoffswitch-inner:after{content:"AUS";padding-right:12px;background-color:#eee;color:#999;text-align:right}.onoffswitch-switch{width:30px;margin:-3px;background:#fff;border:2px solid #999;border-radius:50px;position:absolute;top:0;bottom:0;right:58px;-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s ease-in 0s;-o-transition:all .3s ease-in 0s;transition:all .3s ease-in 0s}a.uhr-closecontrolpanel,a.uhr-configlink{cursor:pointer;display:inline-block;width:24px;height:24px}.onoffswitch-checkbox:checked+.onoffswitch-label .modeswitch-inner,.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner{margin-left:0}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{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{background:url(../resources/settings.png) no-repeat;margin:2px;vertical-align:top}.uhr-controlpanel{border-radius:.5em;box-shadow:0 0 1em #000;background-color:#fff;display:inline-block;padding:.5em;position:sticky;bottom:0;margin-left:1em}.uhr-controlpanel .content{position:relative}a.uhr-closecontrolpanel{position:absolute;right:0;top:-1em;background:url(../resources/close.png) no-repeat}#disclaimer{font-size:.5em}#disclaimer a{color:#444;text-decoration:underline}
+@font-face{font-family:Uhrenfont;src:url(../resources/uhr.woff) format('woff')}body{font-family:Uhrenfont,sans-serif}.uhr{position:relative;margin:0;transition:background-color .5s}.uhr .reflection{position:absolute;top:0;bottom:0;left:0;right:0;background:radial-gradient(225em 45em at 160% 0,rgba(255,255,255,.4) 0,rgba(255,255,255,.05) 40%,rgba(255,255,255,0) 40%) no-repeat scroll;display:block;margin:.15em}.uhr .letterarea{display:block;position:absolute;top:12%;bottom:12%;left:12%;right:12%;overflow:hidden;font-size:200%}.item{transition:box-shadow .5s,text-shadow .5s,border-color .5s,color .5s}.dot{position:absolute;display:block;height:0;width:0;border:.2em solid;border-radius:1em}.dot.active{border-color:#eee;box-shadow:0 0 .2em #eee}.dot1{top:3.75%;left:3.75%}.dot2{top:3.75%;right:3.75%}.dot3{bottom:3.75%;right:3.75%}.dot4{bottom:3.75%;left:3.75%}.letter{height:10%;width:9.0909%;padding:0;margin:0;display:inline-block;text-align:center;line-height:160%}.letter.active{color:#eee;text-shadow:0 0 .2em #eee}.onoffswitch{position:relative;width:86px;margin:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.onoffswitch-checkbox{display:none}.onoffswitch-label{display:block;overflow:hidden;cursor:pointer;border:2px solid #999;border-radius:50px}.modeswitch-inner,.onoffswitch-inner{width:200%;margin-left:-100%;-moz-transition:margin .3s ease-in 0s;-webkit-transition:margin .3s ease-in 0s;-o-transition:margin .3s ease-in 0s;transition:margin .3s ease-in 0s}.modeswitch-inner:after,.modeswitch-inner:before,.onoffswitch-inner:after,.onoffswitch-inner:before{float:left;width:50%;height:24px;padding:0;line-height:24px;font-size:18px;color:#fff;font-weight:700;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.onoffswitch-inner:before{content:"EIN";padding-left:12px;color:#eee;transition:background-color .5s}.onoffswitch-inner:after{content:"AUS";padding-right:12px;background-color:#eee;color:#999;text-align:right}.onoffswitch-switch{width:30px;margin:-3px;background:#fff;border:2px solid #999;border-radius:50px;position:absolute;top:0;bottom:0;right:58px;-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s ease-in 0s;-o-transition:all .3s ease-in 0s;transition:all .3s ease-in 0s}.onoffswitch-checkbox:checked+.onoffswitch-label .modeswitch-inner,.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner{margin-left:0}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{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;width:24px;height:24px;display:inline-block;margin:2px;vertical-align:top}.uhr-controlpanel{border-radius:.5em;box-shadow:0 0 1em #000;background-color:#fff;display:inline-block;padding:.5em;position:sticky;bottom:0;margin-left:1em}.uhr-controlpanel .content{position:relative}a.uhr-closecontrolpanel{cursor:pointer;display:inline-block;position:absolute;right:0;top:-1em;width:24px;height:24px;background:url(../resources/close.png) no-repeat}#disclaimer{font-size:.5em}#disclaimer a{color:#444;text-decoration:underline}

manifest.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Version 8.0.4-dev.0
+# Version 9.0.0-dev.0
 
 /
 dist/jquery.uhr.base.min.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhr",
-  "version": "8.0.4-dev.0",
+  "version": "9.0.0-dev.0",
   "description": "jQuery QLOCKTWO plugin",
   "keywords": [
     "jquery-plugin",
@@ -23,28 +23,28 @@
   ],
   "license": "GPL-3.0",
   "dependencies": {
-    "jquery": "~2.1.3",
+    "jquery": "3.4.1",
-    "jquery-ui": "github:jquery/jquery-ui#1.11.4",
+    "jquery-ui": "1.12.1",
-    "jquery.cookie": "~1.4.1"
+    "jquery.cookie": "1.4.1"
   },
   "devDependencies": {
-    "grunt": "~0.4.5",
+    "grunt": "1.0.4",
-    "grunt-cli": "^0.1.13",
+    "grunt-cli": "1.3.2",
-    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-clean": "2.0.0",
-    "grunt-contrib-concat": "~0.5.0",
+    "grunt-contrib-concat": "1.0.1",
-    "grunt-contrib-connect": "~0.11.0",
+    "grunt-contrib-connect": "2.0.0",
-    "grunt-contrib-cssmin": "^0.14.0",
+    "grunt-contrib-cssmin": "3.0.0",
-    "grunt-contrib-jshint": "~0.11.0",
+    "grunt-contrib-jshint": "2.1.0",
-    "grunt-contrib-qunit": "~0.7.0",
+    "grunt-contrib-qunit": "3.1.0",
-    "grunt-contrib-uglify": "~0.9.2",
+    "grunt-contrib-uglify": "4.0.1",
-    "grunt-contrib-watch": "~0.6.1",
+    "grunt-contrib-watch": "1.1.0",
-    "grunt-mocha-phantomjs": "^2.0.0",
+    "grunt-mocha-phantomjs": "4.0.0",
-    "grunt-version": "^1.0.0",
+    "grunt-version": "1.3.0",
-    "jshint-stylish": "~2.0.1",
+    "jshint-stylish": "2.2.1",
-    "load-grunt-tasks": "~3.3.0",
+    "load-grunt-tasks": "4.0.0",
-    "phantomjs": "^1.9.18",
+    "phantomjs-prebuilt": "2.1.16",
-    "time-grunt": "~1.2.1",
+    "time-grunt": "2.0.0",
-    "mocha": "~2.3.3",
+    "mocha": "6.1.4",
-    "chai": "~3.3.0"
+    "chai": "4.2.0"
   }
 }

src/uhr.js

@@ -52,6 +52,9 @@
     }
 
     // public interface methods (exported later)
+    var setCookie;
+    var isOn;
+    var update;
     var start = function start() {
         if (!isOn.bind(this)()) {
             this.timer = window.setInterval(function () {
@@ -77,436 +80,25 @@
             this.start();
         }
     };
-    var setLanguage = function setLanguage(languageKey) {
+    var language;
-        if (languageKey !== this.options.language) {
-            this.options.language = languageKey;
-            var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
-            renderer.render.bind(this)(function() {
-                this.currentMinute = -1;
-                update.bind(this)();
-            }.bind(this));
-            setCookie.bind(this)('uhr-language', languageKey);
-            update.bind(this)();
-        }
-    };
-    var setTheme = function setTheme(theme) {
-        if (theme !== this.options.theme) {
-            this.element.removeClass(this.options.theme).addClass(theme);
-            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
-            this.options.theme = theme;
-            setCookie.bind(this)('uhr-theme', theme);
-        }
-    };
-    var setTime = function setTime(time) {
-        this.currentMinute = -1;
-        if (time === null) {
-            this.options.time = new Date();
-        } else {
-            if (this.timer !== null) {
-                window.clearInterval(this.timer);
-            }
-            this.options.time = time;
-        }
-        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);
-        var realWidth = e.width();
-        e.width(realWidth);
-        e.height(realWidth);
-        e.css('font-size', (realWidth / 40) + 'px');
-    };
 
-    // private interface methods
-    var create = function create() {
-        this.id = uhrGlobals.id++;
-        this.timer = null;
-        this.currentMinute = -1;
-        var userTime = this.options.time;
-        var hash, params;
-        if (this.options.time === undefined) {
-            this.options.time = new Date();
-        }
-        // parse the URL params
-        hash = window.location.hash;
-        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
-            hash = hash.substring(1);
-            hash = decodeURIComponent(hash);
-            params = hash.split('&');
-            params.forEach(function (element) {
-                var pair = element.split('=');
-                var key = pair[0];
-                var value = pair[1];
-                switch (key) {
-                    case 'l':
-                    case 'language':
-                        this.options.language = value;
-                        this.options.force = true;
-                        break;
-                    case 't':
-                    case 'theme':
-                        this.options.theme = value;
-                        this.options.force = true;
-                        break;
-                    case 'm':
-                    case 'mode':
-                        this.options.mode = value;
-                        this.options.force = true;
-                        break;
-                    case 's':
-                    case 'status':
-                        this.options.status = value;
-                        this.options.force = true;
-                        break;
-                }
-            }.bind(this));
-        }
-        // end parse the URL params
-        setupHTML.bind(this)();
-        wireFunctionality.bind(this)();
-        if (userTime !== undefined) {
-            this.time(userTime);
-        }
-    };
-    // private helper methods (not exported)
-    var toggleConfigScreen = function toggleConfigScreen() {
-        $('#uhr-controlpanel' + this.id).toggle('fast');
-    };
-    // set up
-    var setupHTML = function setupHTML() {
-        var e = this.element;
-        // Base clock area
-        e.addClass('uhr');
-        e.empty();
-        e.append('<span class="item dot dot1"></span>');
-        e.append('<span class="item dot dot2"></span>');
-        e.append('<span class="item dot dot3"></span>');
-        e.append('<span class="item dot dot4"></span>');
-        e.append('<div class="letterarea"></div>');
-        e.append('<div class="reflection"></div>');
-        setWidth.bind(this)(this.options.width);
-
-        if (this.options.controls) {
-            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
-            var content = $('<div class="content"></div>');
-            controlpanel.append(content);
-            // on/off switch
-            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
-            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
-                                '" checked="checked" />');
-            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
-                                '<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>');
-                uhrGlobals.languages.forEach(function(item) {
-                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
-                });
-                content.append(languageChooser);
-            }
-
-            // theme chooser
-            if (uhrGlobals.themes.length > 1) {
-                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
-                uhrGlobals.themes.forEach(function(item) {
-                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
-                });
-                content.append(themeChooser);
-            }
-            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
-            closebutton.on('click', function() {
-                $('#uhr-controlpanel' + this.id).hide('fast');
-            }.bind(this));
-            content.append(closebutton);
-            e.after(controlpanel);
-            controlpanel.hide();
-            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
-            configlink.on('click', function() {
-                toggleConfigScreen.bind(this)();
-            }.bind(this));
-            e.after(configlink);
-        }
-    };
-    var wireFunctionality = function wireFunctionality() {
-        // on/off switch
-        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
-        toggleSwitch.on('click', function() {
-            this.toggle();
-        }.bind(this));
-        var status = $.cookie('uhr-status' + this.id);
-        if (status === undefined || this.options.force) {
-            status = this.options.status;
-        }
-        toggleSwitch.prop('checked', status === 'on');
-        if (status === 'on') {
-            this.start();
-        } else {
-            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) {
-            mode = 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() {
-            var languageKey = $('#uhr-languagechooser' + this.id).val();
-            this.language(languageKey);
-        }.bind(this));
-        var selectedLanguage = $.cookie('uhr-language' + this.id);
-        if (selectedLanguage === undefined || this.options.force) {
-            selectedLanguage = this.options.language;
-        }
-        var found = uhrGlobals.languages.some(function(item) {
-            return selectedLanguage === item.code;
-        });
-        if (!found) {
-            var fallbackLanguage;
-            if (uhrGlobals.languages.length > 0) {
-                fallbackLanguage = uhrGlobals.languages[0].code;
-            } else {
-                fallbackLanguage = '';
-            }
-            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
-            selectedLanguage = fallbackLanguage;
-        }
-        languageChooser.val(selectedLanguage);
-        this.options.language = "";
-        this.language(selectedLanguage);
-
-        // theme chooser
-        var themeChooser = $('#uhr-themechooser' + this.id);
-        themeChooser.on('change', function() {
-            var themeKey = $('#uhr-themechooser' + this.id).val();
-            this.theme(themeKey);
-        }.bind(this));
-        var selectedTheme = $.cookie('uhr-theme' + this.id);
-        if (selectedTheme === undefined || this.options.force) {
-            selectedTheme = this.options.theme;
-        }
-        found = uhrGlobals.themes.some(function(item) {
-            return selectedTheme === item.styleClass;
-        });
-        if (!found) {
-            var fallbackTheme = uhrGlobals.themes[0].styleClass;
-            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
-            selectedTheme = fallbackTheme;
-        }
-        themeChooser.val(selectedTheme);
-        this.options.theme = "";
-        this.theme(selectedTheme);
-        if (this.options.autoresize) {
-            $(window).on('resize', function() {
-                var $e = this.element;
-                var $parent = $e.parent();
-                var $window = $(window);
-                var parentWidth = $parent.width();
-                var parentHeight = $parent.height();
-                var windowWidth = $window.width();
-                var windowHeight = $window.height();
-                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
-                setWidth.bind(this)(size);
-            }.bind(this));
-        }
-    };
-    var destroy = function destroy() {
-        this.timer = null;
-        $(this.element)
-            .removeAttr('style')
-            .removeAttr('class')
-            .empty();
-        $('#uhr-configlink' + this.id).remove();
-        $('#uhr-controlpanel' + this.id).remove();
-
-    };
-    var setCookie = function setCookie(cookieName, cookieValue) {
-        var options = {};
-        if (this.options.cookiePath !== undefined) {
-            options = {expires: 365, path: this.options.cookiePath};
-        } else {
-            options = {expires: 365};
-        }
-        $.cookie(cookieName + this.id, cookieValue, options);
-    };
-
-    // business logic
-    var isOn = function isOn() {
-        return this.timer !== null;
-    };
-    var update = function update() {
-        if (isOn.bind(this)()) {
-            var time = this.options.time;
-            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
-                if (time.getMinutes() === this.currentMinute) {
-                    return;
-                }
-                this.currentMinute = time.getMinutes();
-            }
-            show.bind(this)(time);
-        } else {
-            clear.bind(this)();
-            this.currentMinute = -1;
-        }
-    };
-    var show = function show(time) {
-        var second = getSecond.bind(this)(time);
-        var dotMinute = getDotMinute.bind(this)(time);
-        var hour = getHour.bind(this)(time);
-        var coarseMinute = getCoarseMinute.bind(this)(time);
-        clear.bind(this)();
-        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);
-        }
-    };
-    var highlight = function highlight(itemClass) {
-        this.element.find('.item.' + itemClass).addClass('active');
-    };
-    var clear = function clear() {
-        this.element.find('.item').removeClass('active');
-    };
-    var getSecond = function getSecond(date) {
-        if (typeof language.bind(this)().getSeconds === 'function') {
-            return language.bind(this)().getSeconds(date);
-        }
-        return date.getSeconds();
-    };
-    var getDotMinute = function getDotMinute(date) {
-        if (typeof language.bind(this)().getDotMinute === 'function') {
-            return language.bind(this)().getDotMinute(date);
-        }
-        var minutes = date.getMinutes();
-        return minutes % 5;
-    };
-    var getCoarseMinute = function getCoarseMinute(date) {
-        if (typeof language.bind(this)().getCoarseMinute === 'function') {
-            return language.bind(this)().getCoarseMinute(date);
-        }
-        return date.getMinutes();
-    };
-    var getHour = function getHour(date) {
-        if (typeof language.bind(this)().getHour === 'function') {
-            return language.bind(this)().getHour(date);
-        }
-        var hour = date.getHours();
-        if (date.getMinutes() >= 25) {
-            return (hour + 1) % 24;
-        }
-        return hour;
-    };
-    var language = function language() {
-        var matchingLanguages = uhrGlobals.languages.filter(function(element) {
-            return (element.code === this.options.language);
-        }, this);
-        if (matchingLanguages.length > 0) {
-            return matchingLanguages[0];
-        }
-        // fallback: return empty object
-        return {};
-    };
-
-    $.widget("fritteli.uhr", {
-        "options": {
-            width: '100%',
-            status: 'on',
-            language: 'de_CH',
-            theme: uhrGlobals.themes[0].styleClass,
-            force: false,
-            controls: true,
-            cookiePath: undefined,
-            autoresize: true,
-            mode: 'normal'
-        },
-        "start": start,
-        "stop": stop,
-        "toggle": toggle,
-        "language": setLanguage,
-        "theme": setTheme,
-        "time": setTime,
-        "mode": setMode,
-        "width": setWidth,
-        // constructor method
-        "_create": create,
-        // destructor method
-        "_destroy": destroy
-    });
-    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
     /**
-     * Hilfsklasse zum Rendern der Uhr.
+     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
-     * @param layout     Layout-Objekt, das gerendert werden soll.
+     * @param value Der Buchstabe, der Dargestellt werden soll.
-     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
+     * @param style Die CSS-Styleklassen des Buchstabens.
      */
-    function UhrRenderer(layout, renderarea) {
+    function Letter(value, style) {
-        this.render = function render(beforeshow) {
+        var myValue = value;
-            if (layout.parsed === undefined) {
+        var myStyle = style || '';
-                switch (layout.version) {
+        this.addStyle = function (style) {
-                case 2:
+            if (myStyle === '') {
-                    var delegate = new UhrRendererV2Delegate(layout);
+                myStyle = style;
-                    var parsedLayout = delegate.parse();
+            } else {
-                    Object.defineProperty(layout, "parsed", {"value": parsedLayout, "writable": false, "configurable": false});
+                myStyle += ' ' + style;
-                    break;
-                default:
-                    console.warn("Unknown layout version: '" + layout.version + "'");
-                    return;
             }
-            }
+        };
-            var letters = layout.parsed;
+        this.toString = function () {
-            renderarea.fadeOut('fast', function() {
+            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
-                renderarea.empty();
-                letters.forEach(function(line, index, array) {
-                    line.forEach(function(letter) {
-                        renderarea.append(letter.toString());
-                    });
-                    if (index < array.length - 1) {
-                        renderarea.append('<br/>');
-                    }
-                });
-                if (typeof beforeshow === 'function') {
-                    beforeshow();
-                }
-                renderarea.fadeIn('fast');
-            });
         };
     }
 
@@ -718,6 +310,17 @@
             "59": [vorne5, hinten9]
         };
 
+        function parseObject(letters, styleClass, object) {
+            if (typeof object !== 'undefined' && object !== null) {
+                Object.keys(object).forEach(function (y) {
+                    var highlightLetters = object[y];
+                    highlightLetters.forEach(function (x) {
+                        letters[y - 1][x - 1].addStyle(styleClass);
+                    });
+                });
+            }
+        }
+
         function parseArrayOrObject(letters, styleClass, input) {
             if (typeof input !== 'undefined' && input !== null) {
                 if (Array.isArray(input)) {
@@ -730,17 +333,6 @@
             }
         }
 
-        function parseObject(letters, styleClass, object) {
-            if (typeof object !== 'undefined' && object !== null) {
-                Object.keys(object).forEach(function(y) {
-                    var highlightLetters = object[y];
-                    highlightLetters.forEach(function(x) {
-                        letters[y - 1][x - 1].addStyle(styleClass);
-                    });
-                });
-            }
-        }
-
         function parseTimeDefinition(letters, styleClass, definition) {
             if (typeof definition !== 'undefined' && definition !== null) {
                 Object.keys(definition).forEach(function (listString) {
@@ -776,22 +368,449 @@
     }
 
     /**
-     * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
+     * Hilfsklasse zum Rendern der Uhr.
-     * @param value Der Buchstabe, der Dargestellt werden soll.
+     * @param layout     Layout-Objekt, das gerendert werden soll.
-     * @param style Die CSS-Styleklassen des Buchstabens.
+     * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
      */
-    function Letter(value, style) {
+    function UhrRenderer(layout, renderarea) {
-        var myValue = value;
+        this.render = function render(beforeshow) {
-        var myStyle = style || '';
+            if (layout.parsed === undefined) {
-        this.addStyle = function(style) {
+                switch (layout.version) {
-            if (myStyle === '') {
+                    case 2:
-                myStyle = style;
+                        var delegate = new UhrRendererV2Delegate(layout);
+                        var parsedLayout = delegate.parse();
+                        Object.defineProperty(layout, "parsed", {
+                            "value": parsedLayout,
+                            "writable": false,
+                            "configurable": false
+                        });
+                        break;
+                    default:
+                        console.warn("Unknown layout version: '" + layout.version + "'");
+                        return;
+                }
+            }
+            var letters = layout.parsed;
+            renderarea.fadeOut('fast', function () {
+                renderarea.empty();
+                letters.forEach(function (line, index, array) {
+                    line.forEach(function (letter) {
+                        renderarea.append(letter.toString());
+                    });
+                    if (index < array.length - 1) {
+                        renderarea.append('<br/>');
+                    }
+                });
+                if (typeof beforeshow === 'function') {
+                    beforeshow();
+                }
+                renderarea.fadeIn('fast');
+            });
+        };
+    }
+
+    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'));
+            renderer.render.bind(this)(function () {
+                this.currentMinute = -1;
+                update.bind(this)();
+            }.bind(this));
+            setCookie.bind(this)('uhr-language', languageKey);
+            update.bind(this)();
+        }
+    };
+    var setTheme = function setTheme(theme) {
+        if (theme !== this.options.theme) {
+            this.element.removeClass(this.options.theme).addClass(theme);
+            $('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
+            this.options.theme = theme;
+            setCookie.bind(this)('uhr-theme', theme);
+        }
+    };
+    var setTime = function setTime(time) {
+        this.currentMinute = -1;
+        if (time === null) {
+            this.options.time = new Date();
         } else {
-                myStyle += ' ' + style;
+            if (this.timer !== null) {
+                window.clearInterval(this.timer);
+            }
+            this.options.time = time;
+        }
+        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);
+        var realWidth = e.width();
+        e.width(realWidth);
+        e.height(realWidth);
+        e.css('font-size', (realWidth / 40) + 'px');
+    };
+
+    // private interface methods
+    var setupHTML;
+    var wireFunctionality;
+    var create = function create() {
+        this.id = uhrGlobals.id++;
+        this.timer = null;
+        this.currentMinute = -1;
+        var userTime = this.options.time;
+        var hash, params;
+        if (this.options.time === undefined) {
+            this.options.time = new Date();
+        }
+        // parse the URL params
+        hash = window.location.hash;
+        if (hash !== undefined && typeof hash === 'string' && hash.charAt(0) === '#') {
+            hash = hash.substring(1);
+            hash = decodeURIComponent(hash);
+            params = hash.split('&');
+            params.forEach(function (element) {
+                var pair = element.split('=');
+                var key = pair[0];
+                var value = pair[1];
+                switch (key) {
+                    case 'l':
+                    case 'language':
+                        this.options.language = value;
+                        this.options.force = true;
+                        break;
+                    case 't':
+                    case 'theme':
+                        this.options.theme = value;
+                        this.options.force = true;
+                        break;
+                    case 'm':
+                    case 'mode':
+                        this.options.mode = value;
+                        this.options.force = true;
+                        break;
+                    case 's':
+                    case 'status':
+                        this.options.status = value;
+                        this.options.force = true;
+                        break;
+                }
+            }.bind(this));
+        }
+        // end parse the URL params
+        setupHTML.bind(this)();
+        wireFunctionality.bind(this)();
+        if (userTime !== undefined) {
+            this.time(userTime);
         }
     };
-        this.toString = function() {
+    // private helper methods (not exported)
-            return '<span class="item letter ' + myStyle + '">' + myValue + '</span>';
+    var toggleConfigScreen = function toggleConfigScreen() {
+        $('#uhr-controlpanel' + this.id).toggle('fast');
     };
+    // set up
+    setupHTML = function setupHTML() {
+        var e = this.element;
+        // Base clock area
+        e.addClass('uhr');
+        e.empty();
+        e.append('<span class="item dot dot1"></span>');
+        e.append('<span class="item dot dot2"></span>');
+        e.append('<span class="item dot dot3"></span>');
+        e.append('<span class="item dot dot4"></span>');
+        e.append('<div class="letterarea"></div>');
+        e.append('<div class="reflection"></div>');
+        setWidth.bind(this)(this.options.width);
+
+        if (this.options.controls) {
+            var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+            var content = $('<div class="content"></div>');
+            controlpanel.append(content);
+            // on/off switch
+            var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
+            toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id +
+                '" checked="checked" />');
+            toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">' +
+                '<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>');
+                uhrGlobals.languages.forEach(function (item) {
+                    languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
+                });
+                content.append(languageChooser);
             }
+
+            // theme chooser
+            if (uhrGlobals.themes.length > 1) {
+                var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
+                uhrGlobals.themes.forEach(function (item) {
+                    themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
+                });
+                content.append(themeChooser);
+            }
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
+            closebutton.on('click', function () {
+                $('#uhr-controlpanel' + this.id).hide('fast');
+            }.bind(this));
+            content.append(closebutton);
+            e.after(controlpanel);
+            controlpanel.hide();
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
+            configlink.on('click', function () {
+                toggleConfigScreen.bind(this)();
+            }.bind(this));
+            e.after(configlink);
+        }
+    };
+    wireFunctionality = function wireFunctionality() {
+        // on/off switch
+        var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
+        toggleSwitch.on('click', function () {
+            this.toggle();
+        }.bind(this));
+        var status = $.cookie('uhr-status' + this.id);
+        if (status === undefined || this.options.force) {
+            status = this.options.status;
+        }
+        toggleSwitch.prop('checked', status === 'on');
+        if (status === 'on') {
+            this.start();
+        } else {
+            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) {
+            mode = 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 () {
+            var languageKey = $('#uhr-languagechooser' + this.id).val();
+            this.language(languageKey);
+        }.bind(this));
+        var selectedLanguage = $.cookie('uhr-language' + this.id);
+        if (selectedLanguage === undefined || this.options.force) {
+            selectedLanguage = this.options.language;
+        }
+        var found = uhrGlobals.languages.some(function (item) {
+            return selectedLanguage === item.code;
+        });
+        if (!found) {
+            var fallbackLanguage;
+            if (uhrGlobals.languages.length > 0) {
+                fallbackLanguage = uhrGlobals.languages[0].code;
+            } else {
+                fallbackLanguage = '';
+            }
+            console.warn("Language '" + selectedLanguage + "' not found! Using fallback '" + fallbackLanguage + "'");
+            selectedLanguage = fallbackLanguage;
+        }
+        languageChooser.val(selectedLanguage);
+        this.options.language = "";
+        this.language(selectedLanguage);
+
+        // theme chooser
+        var themeChooser = $('#uhr-themechooser' + this.id);
+        themeChooser.on('change', function () {
+            var themeKey = $('#uhr-themechooser' + this.id).val();
+            this.theme(themeKey);
+        }.bind(this));
+        var selectedTheme = $.cookie('uhr-theme' + this.id);
+        if (selectedTheme === undefined || this.options.force) {
+            selectedTheme = this.options.theme;
+        }
+        found = uhrGlobals.themes.some(function (item) {
+            return selectedTheme === item.styleClass;
+        });
+        if (!found) {
+            var fallbackTheme = uhrGlobals.themes[0].styleClass;
+            console.warn("Theme '" + selectedTheme + "' not found! Using fallback '" + fallbackTheme + "'");
+            selectedTheme = fallbackTheme;
+        }
+        themeChooser.val(selectedTheme);
+        this.options.theme = "";
+        this.theme(selectedTheme);
+        if (this.options.autoresize) {
+            $(window).on('resize', function () {
+                var $e = this.element;
+                var $parent = $e.parent();
+                var $window = $(window);
+                var parentWidth = $parent.width();
+                var parentHeight = $parent.height();
+                var windowWidth = $window.width();
+                var windowHeight = $window.height();
+                var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
+                setWidth.bind(this)(size);
+            }.bind(this));
+        }
+    };
+    var destroy = function destroy() {
+        this.timer = null;
+        $(this.element)
+            .removeAttr('style')
+            .removeAttr('class')
+            .empty();
+        $('#uhr-configlink' + this.id).remove();
+        $('#uhr-controlpanel' + this.id).remove();
+
+    };
+    setCookie = function setCookie(cookieName, cookieValue) {
+        var options = {};
+        if (this.options.cookiePath !== undefined) {
+            options = {expires: 365, path: this.options.cookiePath};
+        } else {
+            options = {expires: 365};
+        }
+        $.cookie(cookieName + this.id, cookieValue, options);
+    };
+
+    // business logic
+    isOn = function isOn() {
+        return this.timer !== null;
+    };
+    var show;
+    var clear;
+    update = function update() {
+        if (isOn.bind(this)()) {
+            var time = this.options.time;
+            if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
+                if (time.getMinutes() === this.currentMinute) {
+                    return;
+                }
+                this.currentMinute = time.getMinutes();
+            }
+            show.bind(this)(time);
+        } else {
+            clear.bind(this)();
+            this.currentMinute = -1;
+        }
+    };
+    var highlight;
+    var getSecond;
+    var getDotMinute;
+    var getCoarseMinute;
+    var getHour;
+    show = function show(time) {
+        var second = getSecond.bind(this)(time);
+        var dotMinute = getDotMinute.bind(this)(time);
+        var hour = getHour.bind(this)(time);
+        var coarseMinute = getCoarseMinute.bind(this)(time);
+        clear.bind(this)();
+        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 = function highlight(itemClass) {
+        this.element.find('.item.' + itemClass).addClass('active');
+    };
+    clear = function clear() {
+        this.element.find('.item').removeClass('active');
+    };
+    getSecond = function getSecond(date) {
+        if (typeof language.bind(this)().getSeconds === 'function') {
+            return language.bind(this)().getSeconds(date);
+        }
+        return date.getSeconds();
+    };
+    getDotMinute = function getDotMinute(date) {
+        if (typeof language.bind(this)().getDotMinute === 'function') {
+            return language.bind(this)().getDotMinute(date);
+        }
+        var minutes = date.getMinutes();
+        return minutes % 5;
+    };
+    getCoarseMinute = function getCoarseMinute(date) {
+        if (typeof language.bind(this)().getCoarseMinute === 'function') {
+            return language.bind(this)().getCoarseMinute(date);
+        }
+        return date.getMinutes();
+    };
+    getHour = function getHour(date) {
+        if (typeof language.bind(this)().getHour === 'function') {
+            return language.bind(this)().getHour(date);
+        }
+        var hour = date.getHours();
+        if (date.getMinutes() >= 25) {
+            return (hour + 1) % 24;
+        }
+        return hour;
+    };
+    language = function language() {
+        var matchingLanguages = uhrGlobals.languages.filter(function (element) {
+            return (element.code === this.options.language);
+        }, this);
+        if (matchingLanguages.length > 0) {
+            return matchingLanguages[0];
+        }
+        // fallback: return empty object
+        return {};
+    };
+
+    $.widget("fritteli.uhr", {
+        "options": {
+            width: '100%',
+            status: 'on',
+            language: 'de_CH',
+            theme: uhrGlobals.themes[0].styleClass,
+            force: false,
+            controls: true,
+            cookiePath: undefined,
+            autoresize: true,
+            mode: 'normal'
+        },
+        "start": start,
+        "stop": stop,
+        "toggle": toggle,
+        "language": setLanguage,
+        "theme": setTheme,
+        "time": setTime,
+        "mode": setMode,
+        "width": setWidth,
+        // constructor method
+        "_create": create,
+        // destructor method
+        "_destroy": destroy
+    });
+    $.fritteli.uhr.register = uhrGlobals.registerLanguage;
 })(jQuery);

test/test.js

@@ -8,6 +8,13 @@ suite('Bärneruhr', function () {
         elem = $('#u');
     });
 
+    function cleanupCookies(id) {
+        $.removeCookie('uhr-language' + id);
+        $.removeCookie('uhr-mode' + id);
+        $.removeCookie('uhr-status' + id);
+        $.removeCookie('uhr-theme' + id);
+    }
+
     teardown(function () {
         var uhr = elem.uhr('instance');
         if (uhr !== undefined) {
@@ -21,13 +28,6 @@ suite('Bärneruhr', function () {
         window.location.hash = '';
     });
 
-    function cleanupCookies(id) {
-        $.removeCookie('uhr-language' + id);
-        $.removeCookie('uhr-mode' + id);
-        $.removeCookie('uhr-status' + id);
-        $.removeCookie('uhr-theme' + id);
-    }
-
     test('create and destroy widget', function () {
         var uhr = elem.uhr('instance');
         var id;
@@ -95,8 +95,10 @@ suite('Bärneruhr', function () {
             language: 'klingon'
         });
         uhr = elem.uhr('instance');
-        // NB: 'de' is just the first language that is included in the page. that may change!
+        // The 'uhr' element must be created, and a fall-back language must have been selected
-        assert.equal(uhr.options.language, 'de');
+        assert.isTrue(!!uhr);
+        assert.isTrue(!!uhr.options.language);
+        assert.notEqual(uhr.options.language, 'klingon');
     });
 
     test('unknown theme', function () {