Merge pull request 'feature/3-migrate-from-grunt-to-webpack' (#13) from feature/3-migrate-from-grunt-to-webpack into develop

Reviewed-on: #13

.drone.yml

@@ -0,0 +1,13 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: prepare
+    image: node:15-alpine
+    commands:
+      - npm install
+  - name: build
+    image: node:15-alpine
+    commands:
+      - npm run build

.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

@@ -1,181 +0,0 @@
-module.exports = function (grunt) {
-    'use strict';
-    // Load all grunt tasks
-    require('load-grunt-tasks')(grunt);
-    // Show elapsed time at the end
-    require('time-grunt')(grunt);
-
-    // Project configuration.
-    grunt.initConfig({
-        // Metadata.
-        pkg: grunt.file.readJSON('package.json'),
-        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
-        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
-        '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
-        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
-        ' Licensed <%= pkg.licenses[0].type %> */\n',
-        // Task configuration.
-        clean: {
-            files: ['dist']
-        },
-        concat: {
-            options: {
-                banner: '<%= banner %>',
-                stripBanners: true
-            },
-            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'
-                ],
-                dest: 'dist/libs.js'
-            },
-            dist: {
-                src: ['src/uhr.js', 'src/uhr-*.js'],
-                dest: 'dist/jquery.<%= pkg.name %>.complete.js'
-            },
-            main: {
-                src: ['src/uhr.js'],
-                dest: 'dist/jquery.<%= pkg.name %>.main.js'
-            },
-            base: {
-                src: ['src/uhr.js', 'src/uhr-de_CH.js'],
-                dest: 'dist/jquery.<%= pkg.name %>.base.js'
-            },
-            baselangs: {
-                src: ['src/uhr-*.js'],
-                exclude: ['src/uhr-de_CH.js'],
-                dest: 'dist/jquery.<%= pkg.name %>.baselangs.js'
-            },
-            langs: {
-                src: ['src/uhr-*.js'],
-                dest: 'dist/jquery.<%= pkg.name %>.langs.js'
-            }
-        },
-        uglify: {
-            options: {
-                banner: '<%= banner %>'
-            },
-            libs: {
-                src: '<%= concat.libs.dest %>',
-                dest: 'dist/libs.min.js'
-            },
-            dist: {
-                src: '<%= concat.dist.dest %>',
-                dest: 'dist/jquery.<%= pkg.name %>.complete.min.js'
-            },
-            main: {
-                src: '<%= concat.main.dest %>',
-                dest: 'dist/jquery.<%= pkg.name %>.main.min.js'
-            },
-            base: {
-                src: '<%= concat.base.dest %>',
-                dest: 'dist/jquery.<%= pkg.name %>.base.min.js'
-            },
-            baselangs: {
-                src: '<%= concat.baselangs.dest %>',
-                dest: 'dist/jquery.<%= pkg.name %>.baselangs.min.js'
-            },
-            langs: {
-                src: '<%= concat.langs.dest %>',
-                dest: 'dist/jquery.<%= pkg.name %>.langs.min.js'
-            }
-        },
-        cssmin: {
-            allcss: {
-                files: [{
-                    expand: true,
-                    cwd: 'css',
-                    src: ['*.css'],
-                    dest: 'dist',
-                    ext: '.min.css'
-                }]
-            }
-        },
-        mocha_phantomjs: {
-            all: {
-                options: {
-                    urls: ['http://localhost:9000/test/test.html']
-                }
-            }
-        },
-        jshint: {
-            options: {
-                reporter: require('jshint-stylish')
-            },
-            gruntfile: {
-                options: {
-                    jshintrc: '.jshintrc'
-                },
-                src: 'Gruntfile.js'
-            },
-            src: {
-                options: {
-                    jshintrc: '.jshintrc'
-                },
-                src: ['src/**/*.js']
-            },
-            test: {
-                options: {
-                    jshintrc: 'test/.jshintrc'
-                },
-                src: ['test/*.js']
-            }
-        },
-        watch: {
-            gruntfile: {
-                files: '<%= jshint.gruntfile.src %>',
-                tasks: ['jshint:gruntfile']
-            },
-            src: {
-                files: '<%= jshint.src.src %>',
-                tasks: ['jshint:src', 'mocha_phantomjs']
-            },
-            test: {
-                files: ['test/test.html', '<%= jshint.test.src %>'],
-                tasks: ['jshint:test', 'mocha_phantomjs']
-            }
-        },
-        connect: {
-            server: {
-                options: {
-                    hostname: '*',
-                    port: 9000
-                }
-            }
-        },
-        version: {
-            VERSION: {
-                options: {
-                    prefix: ''
-                },
-                src: ['VERSION']
-            },
-            bower: {
-                src: ['bower.json']
-            },
-            manifest: {
-                options: {
-                    prefix: 'Version\\s+'
-                },
-                src: ['manifest.appcache']
-            }
-        }
-    });
-
-    grunt.loadNpmTasks('grunt-mocha-phantomjs');
-    grunt.loadNpmTasks('grunt-contrib-cssmin');
-    grunt.loadNpmTasks('grunt-version');
-
-    // Default task.
-    grunt.registerTask('default', ['jshint', 'clean', 'version', 'concat', 'connect', 'mocha_phantomjs', 'uglify', 'cssmin']);
-    grunt.registerTask('buildonly', ['clean', 'version', 'concat', 'uglify', 'cssmin']);
-    grunt.registerTask('server', function () {
-        grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
-        grunt.task.run(['serve']);
-    });
-    grunt.registerTask('serve', ['connect', 'watch']);
-    grunt.registerTask('test', ['jshint', 'connect', 'mocha_phantomjs']);
-};

README.md

@@ -1,10 +1,7 @@
-Bärneruhr
+# Bärneruhr
-=========
-
 Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht das so einfach, dass es sogar deine Grossmutter tun könnte!
 
-1. Benötigte Dateien einbinden
+## 1. Benötigte Dateien einbinden
-------------------------------
 * Binde folgende CSS-Datei im HTML-Dokument ein:
 	* dist/uhr.min.css
 * Binde zusätzlich mindestens eine der folgenden CSS-Dateien im HTML ein, je nach dem, welche Farben deine Uhr unterstützen soll:
@@ -25,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)
@@ -50,16 +47,14 @@ Je nach dem, in welchen Sprachen du die Uhr verwenden willst, noch eine der folg
 
 `src/uhr-de_CH_genau.js` ist eine Variante von Bärndütsch, bei der zur vollen Stunde zusätzlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ" anstelle von "ES ISCH DRÜ").
 
-2. Uhr-Element im HTML-Dokument einfügen
+## 2. Uhr-Element im HTML-Dokument einfügen
-----------------------------------------
 Erstelle ein leeres `<div>` mit einer ID:
 
 ```html
 <div id="uhrcontainer"></div>
 ```
 
-3. Uhr per Javascript konfigurieren
+## 3. Uhr per Javascript konfigurieren
------------------------------------
 Initialisiere die Uhr mit einer einzigen Zeile Javascript:
 
 ```javascript
@@ -88,8 +83,7 @@ jQuery('div').uhr();
 
 würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
 
-4. Weitere Optionen
+## 4. Weitere Optionen
--------------------
 Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
 
 ```javascript
@@ -99,7 +93,7 @@ jQuery('#uhrcontainer').uhr({
 	language: 'de_CH',    // 'de_CH' (default), 'de_CH_genau', 'de', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (je nach eingebundenen Sprachdateien)
 	mode: 'normal',       // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an
 	                      // 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an
-	width: '100%',        // eine CSS-Grössenangabe (default: 100%)
+	width: '100%',        // Eine CSS-Grössenangabe (default: 100%)
 	force: false,         // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
 	                      // true: immer die angegebene Konfiguration verwenden
 	controls: true,       // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt
@@ -110,8 +104,7 @@ jQuery('#uhrcontainer').uhr({
 });
 ```
 
-5. Sonderfunktionen
+## 5. Sonderfunktionen
--------------------
 Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels
 
 ```javascript
@@ -127,9 +120,8 @@ Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden:
 jQuery('#uhrcontainer').uhr("time", new Date());
 ```
 
-6. Konfiguration über die URL
+## 6. Konfiguration über die URL
------------------------------
+Es ist möglich, die Uhr durch den Aufruf mit URL-Parametern zu konfigurieren. Dies übersteuert auch allfällig bereits in einem Cookie gespeicherte Einstellungen. Die Einstellungen werden für alle Uhr-Elemente übernommen, welche sich auf der Seite befinden. Folgende Parameter werden unterstützt, wenn du sie mit einem Hash (`#`) an die URL anhängst:
-Es ist möglich, die Uhr durch den Aufruf mit URL-Parameters zu konfigurieren. Dies übersteuert auch allfällig bereits in einem Cookie gespeicherte Einstellungen. Die Einstellungen werden für alle Uhr-Elemente übernommen, welche sich auf der Seite befinden. Folgende Parameter werden unterstützt, wenn du sie mit einem Hash (`#`) an die URL anhängst:
 
 * `l` oder `language`: Bestimmt die Sprache. Der Wert ist der Sprach-Code (abhängig von den eingebundenen Sprachdateien):
 	* de_CH: Bärndütsch
@@ -157,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
 
@@ -165,8 +157,7 @@ Dies zeigt dann die Uhr auf Französisch in Rot, im Sekunden-Modus und eingescha
 
 Viel Spass!
 
-A. Lizenzbestimmungen
+# A. Lizenzbestimmungen
-=====================
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or

VERSION

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

build-config/entrypoints/css-app.js

@@ -0,0 +1 @@
+import '../../css/uhr.css';

build-config/entrypoints/css-black.js

@@ -0,0 +1 @@
+import '../../css/uhr-black.css';

build-config/entrypoints/css-blue.js

@@ -0,0 +1 @@
+import '../../css/uhr-blue.css';

build-config/entrypoints/css-green.js

@@ -0,0 +1 @@
+import '../../css/uhr-green.css';

build-config/entrypoints/css-pink.js

@@ -0,0 +1 @@
+import '../../css/uhr-pink.css';

build-config/entrypoints/css-red.js

@@ -0,0 +1 @@
+import '../../css/uhr-red.css';

build-config/entrypoints/css-white.js

@@ -0,0 +1 @@
+import '../../css/uhr-white.css';

build-config/entrypoints/css-yellow.js

@@ -0,0 +1 @@
+import '../../css/uhr-yellow.css';

build-config/entrypoints/js-app.js

@@ -0,0 +1 @@
+import '../../src/uhr';

build-config/entrypoints/js-base.js

@@ -0,0 +1,2 @@
+import '../../src/uhr';
+import '../../src/uhr-de_CH';

build-config/entrypoints/js-baselangs.js

@@ -0,0 +1,9 @@
+import '../../src/uhr-de';
+import '../../src/uhr-de_CH_genau';
+import '../../src/uhr-dk';
+import '../../src/uhr-en';
+import '../../src/uhr-es';
+import '../../src/uhr-fr';
+import '../../src/uhr-it';
+import '../../src/uhr-nl';
+import '../../src/uhr-pt';

build-config/entrypoints/js-complete.js

@@ -0,0 +1,11 @@
+import '../../src/uhr';
+import '../../src/uhr-de';
+import '../../src/uhr-de_CH';
+import '../../src/uhr-de_CH_genau';
+import '../../src/uhr-dk';
+import '../../src/uhr-en';
+import '../../src/uhr-es';
+import '../../src/uhr-fr';
+import '../../src/uhr-it';
+import '../../src/uhr-nl';
+import '../../src/uhr-pt';

build-config/entrypoints/js-langs.js

@@ -0,0 +1,10 @@
+import '../../src/uhr-de';
+import '../../src/uhr-de_CH';
+import '../../src/uhr-de_CH_genau';
+import '../../src/uhr-dk';
+import '../../src/uhr-en';
+import '../../src/uhr-es';
+import '../../src/uhr-fr';
+import '../../src/uhr-it';
+import '../../src/uhr-nl';
+import '../../src/uhr-pt';

build-config/entrypoints/js-libs.js

@@ -0,0 +1,3 @@
+import 'jquery';
+import 'jquery-ui';
+import 'jquery.cookie';

build-config/rollup.config.css-app.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from "postcss";
+import cssnano from "cssnano";
+
+export default {
+    input: 'build-config/entrypoints/css-app.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr.min.css'
+    })]
+}

build-config/rollup.config.css-black.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-black.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-black.min.css'
+    })]
+}

build-config/rollup.config.css-blue.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-blue.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-blue.min.css'
+    })]
+}

build-config/rollup.config.css-green.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-green.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-green.min.css'
+    })]
+}

build-config/rollup.config.css-pink.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-pink.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-pink.min.css'
+    })]
+}

build-config/rollup.config.css-red.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-red.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-red.min.css'
+    })]
+}

build-config/rollup.config.css-white.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-white.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-white.min.css'
+    })]
+}

build-config/rollup.config.css-yellow.js

@@ -0,0 +1,11 @@
+import cssbundle from 'rollup-plugin-css-bundle';
+import postcss from 'postcss';
+import cssnano from 'cssnano';
+
+export default {
+    input: 'build-config/entrypoints/css-yellow.js',
+    plugins: [cssbundle({
+        transform: code => postcss([cssnano]).process(code),
+        output: 'dist/uhr-yellow.min.css'
+    })]
+}

build-config/rollup.config.js-app.js

@@ -0,0 +1,23 @@
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+    external: [
+        'jquery',
+        'jquery-ui',
+        'jquery.cookie'
+    ],
+    input: 'build-config/entrypoints/js-app.js',
+    output: [
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.main.js',
+            format: 'cjs'
+        },
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.main.min.js',
+            format: 'cjs',
+            plugins: [terser()]
+        }
+    ]
+}

build-config/rollup.config.js-base.js

@@ -0,0 +1,23 @@
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+    external: [
+        'jquery',
+        'jquery-ui',
+        'jquery.cookie'
+    ],
+    input: 'build-config/entrypoints/js-base.js',
+    output: [
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.base.js',
+            format: 'cjs'
+        },
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.base.min.js',
+            format: 'cjs',
+            plugins: [terser()]
+        }
+    ]
+}

build-config/rollup.config.js-baselangs.js

@@ -0,0 +1,23 @@
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+    external: [
+        'jquery',
+        'jquery-ui',
+        'jquery.cookie'
+    ],
+    input: 'build-config/entrypoints/js-baselangs.js',
+    output: [
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.baselangs.js',
+            format: 'cjs'
+        },
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.baselangs.min.js',
+            format: 'cjs',
+            plugins: [terser()]
+        }
+    ]
+}

build-config/rollup.config.js-complete.js

@@ -0,0 +1,23 @@
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+    external: [
+        'jquery',
+        'jquery-ui',
+        'jquery.cookie'
+    ],
+    input: 'build-config/entrypoints/js-complete.js',
+    output: [
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.complete.js',
+            format: 'cjs'
+        },
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.complete.min.js',
+            format: 'cjs',
+            plugins: [terser()]
+        }
+    ]
+}

build-config/rollup.config.js-langs.js

@@ -0,0 +1,23 @@
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+    external: [
+        'jquery',
+        'jquery-ui',
+        'jquery.cookie'
+    ],
+    input: 'build-config/entrypoints/js-langs.js',
+    output: [
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.langs.js',
+            format: 'cjs'
+        },
+        {
+            dir: 'dist',
+            entryFileNames: 'jquery.uhr.langs.min.js',
+            format: 'cjs',
+            plugins: [terser()]
+        }
+    ]
+}

build-config/rollup.config.js-libs.js

@@ -0,0 +1,21 @@
+import {terser} from 'rollup-plugin-terser';
+import {nodeResolve} from '@rollup/plugin-node-resolve';
+
+export default {
+    input: 'build-config/entrypoints/js-libs.js',
+    output: [
+        {
+            dir: 'dist',
+            entryFileNames: 'libs.js',
+            format: 'cjs'
+        },
+        {
+            dir: 'dist',
+            entryFileNames: 'libs.min.js',
+            format: 'cjs',
+            plugins: [terser()]
+        }
+    ],
+    context: 'this',
+    plugins: [nodeResolve()]
+}

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,8 +1,20 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
-* http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
-(function($) {
 'use strict';
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function ($) {
     var uhrGlobals = {
         "id": 0,
         "languages": [],
@@ -41,6 +53,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 +81,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 +311,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 +334,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,28 +369,468 @@
     }
 
     /**
-     * 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);
 
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
 // hilfsvariablen
     var es_isch = {1: [1, 2, 4, 5, 6, 7]};
     var ab = {4: [1, 2]};

dist/jquery.uhr.baselangs.js

@@ -1,8 +1,20 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
-* http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
-(function($) {
 'use strict';
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function($) {
     var es_ist = {1: [1, 2, 4, 5, 6]};
     var uhr = {10: [9, 10, 11]};
     var nach = {4: [8, 9, 10, 11]};
@@ -61,91 +73,22 @@
     };
     $.fritteli.uhr.register('de', layout);
 }(jQuery));
-(function($) {
+
-    'use strict';
-// hilfsvariablen
-    var es_isch = {1: [1, 2, 4, 5, 6, 7]};
-    var ab = {4: [1, 2]};
-    var vor = {3: [9, 10, 11]};
-    var haubi = {4: [4, 5, 6, 7, 8]};
-    var fuef = {1: [9, 10, 11]};
-    var zae = {2: [9, 10, 11]};
-    var viertu = {2: [1, 2, 3, 4, 5, 6]};
-    var zwaenzg = {3: [1, 2, 3, 4, 5, 6]};
-    var layout = {
-        // version: zur Zeit immer 2 (Pflichtattribut)
-        "version": 2,
-        // Sprechender Name der Sprache
-        "language": 'Bärndütsch',
-        // Buchstabenfeld als Array von Strings.
-        "letters": [
-            'ESKISCHAFÜF',
-            'VIERTUBFZÄÄ',
-            'ZWÄNZGSIVOR',
-            'ABOHAUBIEGE',
-            'EISZWÖISDRÜ',
-            'VIERIFÜFIQT',
-            'SÄCHSISIBNI',
-            'ACHTINÜNIEL',
-            'ZÄNIERBEUFI',
-            'ZWÖUFINAUHR'
-        ],
-        // Permanent aktive Buchstaben. <array-or-object>, vgl. ausführliche Beschreibung bei "minutes".
-        "permanent": es_isch,
 /*
-         * Minuten: Objekt im folgenden Format:
+ This program is free software: you can redistribute it and/or modify
-         * {
+ it under the terms of the GNU General Public License as published by
-         *     <minuten>: <array-or-object>,
+ the Free Software Foundation, either version 3 of the License, or
-         *     ...
+ (at your option) any later version.
-         * }
+
-         * <minuten>: String von Komma-separierten Minutenwerten, zu welchem die in <array-or-object> angegebenen Buchstaben aktiv sein sollen
+ This program is distributed in the hope that it will be useful,
-         * <array-or-object> : [ <object>, ...] | <object>
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
-         * <object>: { <zeile> : [ <spalte>, ... ] }
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-         * <zeile>: Die Zeile, in welcher die Buchstaben liegen; von oben gezählt, oben ist 1.
+ GNU General Public License for more details.
-         * <spalte>: Die Spalte, in der ein einzelner Buchstabe liegt; von links gezählt, links ist 1.
+
-         * Beispiel:
+ You should have received a copy of the GNU General Public License
-         * "minutes": {
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
-         *     "0,1": {1: [6, 7, 9]},
-         *     "5": [ {3: [1, 2]}, {4: [10, 11]} ]
-         * }
-         * Erklärung:
-         * Bei Minuten 0 und 1 sind die Buchstaben 6, 7 und 9 der ersten Zeile aktiv.
-         * Bei Minute 5 sind die Buchstaben 1 und 2 der Zeile 3 sowie die Buchstaben 10 und 11 der Zeile 4 aktiv.
  */
-        "minutes": {
-            "5,6,7,8,9": [fuef, ab],
-            "10,11,12,13,14": [zae, ab],
-            "15,16,17,18,19": [viertu, ab],
-            "20,21,22,23,24": [zwaenzg, ab],
-            "25,26,27,28,29": [fuef, vor, haubi],
-            "30,31,32,33,34": haubi,
-            "35,36,37,38,39": [fuef, ab, haubi],
-            "40,41,42,43,44": [zwaenzg, vor],
-            "45,46,47,48,49": [viertu, vor],
-            "50,51,52,53,54": [zae, vor],
-            "55,56,57,58,59": [fuef, vor]
-        },
-        // Die Stunden; gleiches Format wie bei den Minuten
-        "hours": {
-            "0,12": {10: [1, 2, 3, 4, 5, 6]},
-            "1,13": {5: [1, 2, 3]},
-            "2,14": {5: [4, 5, 6, 7]},
-            "3,15": {5: [9, 10, 11]},
-            "4,16": {6: [1, 2, 3, 4, 5]},
-            "5,17": {6: [6, 7, 8, 9]},
-            "6,18": {7: [1, 2, 3, 4, 5, 6]},
-            "7,19": {7: [7, 8, 9, 10, 11]},
-            "8,20": {8: [1, 2, 3, 4, 5]},
-            "9,21": {8: [6, 7, 8, 9]},
-            "10,22": {9: [1, 2, 3, 4]},
-            "11,23": {9: [8, 9, 10, 11]}
-        }
-    };
-// Das Layout bei der Uhr unter dem Code "de_CH" registrieren.
-    $.fritteli.uhr.register('de_CH', layout);
-}(jQuery));
 (function($) {
-    'use strict';
     var es_isch = {1: [1, 2, 4, 5, 6, 7]};
     var genau = {3: [7, 8, 9, 10, 11]};
     var ab = {4: [4, 5]};
@@ -202,6 +145,7 @@
     };
     $.fritteli.uhr.register('de_CH_genau', layout);
 }(jQuery));
+
 /*
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
@@ -217,7 +161,6 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 (function($) {
-    'use strict';
 
     var klokken_er = {1: [1, 2, 3, 4, 5, 6, 7, 9, 10]};
     var minutter = {4: [4, 5, 6, 7, 8, 9, 10, 11]};
@@ -282,8 +225,22 @@
     };
     $.fritteli.uhr.register('dk', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var it_is = {1: [1, 2, 4, 5]};
     var half = {4: [1, 2, 3, 4]};
     var to = {4: [10, 11]};
@@ -349,8 +306,22 @@
     };
     $.fritteli.uhr.register('en', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var es_la = {1: [1, 2, 6, 7]};
     var son_las = {1: [2, 3, 4, 6, 7, 8]};
     var y = {7: [6]};
@@ -416,8 +387,21 @@
     $.fritteli.uhr.register('es', layout);
 }(jQuery));
 
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var il_est = {1: [1, 2, 4, 5, 6]};
     var et = {8: [1, 2]};
     var moins = {7: [1, 2, 3, 4, 5]};
@@ -517,8 +501,22 @@
     };
     $.fritteli.uhr.register('fr', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var sono_le = {1: [1, 2, 3, 4, 6, 7]};
     var e_l = {2: [1, 3, 4]};
     var e = {8: [1]};
@@ -583,8 +581,22 @@
     };
     $.fritteli.uhr.register('it', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var het_is = {1: [1, 2, 3, 5, 6]};
     var over1 = {3: [1, 2, 3, 4]};
     var voor1 = {2: [8, 9, 10, 11]};
@@ -650,8 +662,22 @@
     };
     $.fritteli.uhr.register('nl', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function ($) {
-    'use strict';
     var e_ = {1: [1]};
     var sao = {1: [2, 3, 4]};
     var e1 = {7: [8]};

dist/jquery.uhr.langs.js

@@ -1,8 +1,20 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
-* http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
-(function($) {
 'use strict';
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function($) {
     var es_ist = {1: [1, 2, 4, 5, 6]};
     var uhr = {10: [9, 10, 11]};
     var nach = {4: [8, 9, 10, 11]};
@@ -61,8 +73,22 @@
     };
     $.fritteli.uhr.register('de', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
 // hilfsvariablen
     var es_isch = {1: [1, 2, 4, 5, 6, 7]};
     var ab = {4: [1, 2]};
@@ -144,8 +170,22 @@
 // Das Layout bei der Uhr unter dem Code "de_CH" registrieren.
     $.fritteli.uhr.register('de_CH', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var es_isch = {1: [1, 2, 4, 5, 6, 7]};
     var genau = {3: [7, 8, 9, 10, 11]};
     var ab = {4: [4, 5]};
@@ -202,6 +242,7 @@
     };
     $.fritteli.uhr.register('de_CH_genau', layout);
 }(jQuery));
+
 /*
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
@@ -217,7 +258,6 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 (function($) {
-    'use strict';
 
     var klokken_er = {1: [1, 2, 3, 4, 5, 6, 7, 9, 10]};
     var minutter = {4: [4, 5, 6, 7, 8, 9, 10, 11]};
@@ -282,8 +322,22 @@
     };
     $.fritteli.uhr.register('dk', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var it_is = {1: [1, 2, 4, 5]};
     var half = {4: [1, 2, 3, 4]};
     var to = {4: [10, 11]};
@@ -349,8 +403,22 @@
     };
     $.fritteli.uhr.register('en', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var es_la = {1: [1, 2, 6, 7]};
     var son_las = {1: [2, 3, 4, 6, 7, 8]};
     var y = {7: [6]};
@@ -416,8 +484,21 @@
     $.fritteli.uhr.register('es', layout);
 }(jQuery));
 
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var il_est = {1: [1, 2, 4, 5, 6]};
     var et = {8: [1, 2]};
     var moins = {7: [1, 2, 3, 4, 5]};
@@ -517,8 +598,22 @@
     };
     $.fritteli.uhr.register('fr', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var sono_le = {1: [1, 2, 3, 4, 6, 7]};
     var e_l = {2: [1, 3, 4]};
     var e = {8: [1]};
@@ -583,8 +678,22 @@
     };
     $.fritteli.uhr.register('it', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function($) {
-    'use strict';
     var het_is = {1: [1, 2, 3, 5, 6]};
     var over1 = {3: [1, 2, 3, 4]};
     var voor1 = {2: [8, 9, 10, 11]};
@@ -650,8 +759,22 @@
     };
     $.fritteli.uhr.register('nl', layout);
 }(jQuery));
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 (function ($) {
-    'use strict';
     var e_ = {1: [1]};
     var sao = {1: [2, 3, 4]};
     var e1 = {7: [8]};

dist/jquery.uhr.main.js

@@ -1,8 +1,20 @@
-/*! uhr - v8.0.4-dev.0 - 2016-06-27
-* http://bärneruhr.ch/
-* Copyright (c) 2016 Manuel Friedli; Licensed GPL-3.0 */
-(function($) {
 'use strict';
+
+/*
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function ($) {
     var uhrGlobals = {
         "id": 0,
         "languages": [],
@@ -41,6 +53,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 +81,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 +311,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 +334,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 +369,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)}
+.black .onoffswitch-inner:before,.uhr.black{background-color:#111}.uhr.black .dot:not(.active){border-color:hsla(0,0%,100%,.1);box-shadow:0 0 .1em hsla(0,0%,100%,.1)}.uhr.black .letter:not(.active){color:hsla(0,0%,100%,.1);text-shadow:0 0 .1em hsla(0,0%,100%,.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)}
+.blue .onoffswitch-inner:before,.uhr.blue{background-color:#00a}.uhr.blue .dot:not(.active){border-color:hsla(0,0%,100%,.1);box-shadow:0 0 .1em hsla(0,0%,100%,.1)}.uhr.blue .letter:not(.active){color:hsla(0,0%,100%,.1);text-shadow:0 0 .1em hsla(0,0%,100%,.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:hsla(0,0%,100%,.1);box-shadow:0 0 .1em hsla(0,0%,100%,.1)}.uhr.pink .letter:not(.active){color:hsla(0,0%,100%,.1);text-shadow:0 0 .1em hsla(0,0%,100%,.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)}
+.red .onoffswitch-inner:before,.uhr.red{background-color:#700}.uhr.red .dot:not(.active){border-color:hsla(0,0%,100%,.1);box-shadow:0 0 .1em hsla(0,0%,100%,.1)}.uhr.red .letter:not(.active){color:hsla(0,0%,100%,.1);text-shadow:0 0 .1em hsla(0,0%,100%,.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,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.05) 40%,hsla(0,0%,100%,0) 0) 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{right:3.75%}.dot3,.dot4{bottom: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;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}

index.html

@@ -31,7 +31,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <link rel="stylesheet" type="text/css" href="dist/uhr-pink.min.css" data-class="pink" data-name="Pink"/>
     <link rel="shortcut icon" type="image/png" href="resources/favicon.png"/>
     <link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png"/>
-    <link rel="manifest" href="/manifest.webmanifest"/>
     <script type="text/javascript" src="dist/libs.min.js"></script>
     <script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script>
     <script type="text/javascript">

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

manifest.webmanifest

@@ -1,37 +0,0 @@
-{
-  "name": "Bärneruhr",
-  "short_name": "uhr",
-  "start_url": ".",
-  "display": "fullscreen",
-  "background_color" : "#000" ,
-  "description": "D Uhr.",
-  "Icons": [{
-    "src": "images/touch/homescreen48.png",
-    "sizes": "48x48",
-    "type": "image/png"
-  }, {
-    "src": "images/touch/homescreen72.png",
-    "sizes": "72x72",
-    "type": "image/png"
-  }, {
-    "src": "images/touch/homescreen96.png",
-    "sizes": "96x96",
-    "type": "image/png"
-  }, {
-    "src": "images/touch/homescreen144.png",
-    "sizes": "144x144",
-    "type": "image/png"
-  }, {
-    "src": "images/touch/homescreen168.png",
-    "sizes": "168x168",
-    "type": "image/png"
-  }, {
-    "src": "images/touch/homescreen192.png",
-    "sizes": "192x192",
-    "type": "image/png"
-  }],
-  "related_applications": [{
-    "platform": "Web"
-  }]
-}
-

package.json

@@ -1,11 +1,30 @@
 {
     "name": "uhr",
-  "version": "8.0.4-dev.0",
+    "version": "9.0.0-dev.0",
     "description": "jQuery QLOCKTWO plugin",
     "keywords": [
         "jquery-plugin",
         "qlocktwo"
     ],
+    "scripts": {
+        "prebuild": "npm run clean",
+        "build": "npm-run-all --parallel rollup:js:* rollup:css:*",
+        "clean": "rimraf dist",
+        "rollup:js:app": "rollup --config build-config/rollup.config.js-app.js",
+        "rollup:js:base": "rollup --config build-config/rollup.config.js-base.js",
+        "rollup:js:baselangs": "rollup --config build-config/rollup.config.js-baselangs.js",
+        "rollup:js:complete": "rollup --config build-config/rollup.config.js-complete.js",
+        "rollup:js:langs": "rollup --config build-config/rollup.config.js-langs.js",
+        "rollup:js:libs": "rollup --config build-config/rollup.config.js-libs.js",
+        "rollup:css:app": "rollup --config build-config/rollup.config.css-app.js",
+        "rollup:css:black": "rollup --config build-config/rollup.config.css-black.js",
+        "rollup:css:blue": "rollup --config build-config/rollup.config.css-blue.js",
+        "rollup:css:green": "rollup --config build-config/rollup.config.css-green.js",
+        "rollup:css:pink": "rollup --config build-config/rollup.config.css-pink.js",
+        "rollup:css:red": "rollup --config build-config/rollup.config.css-red.js",
+        "rollup:css:white": "rollup --config build-config/rollup.config.css-white.js",
+        "rollup:css:yellow": "rollup --config build-config/rollup.config.css-yellow.js"
+    },
     "homepage": "http://bärneruhr.ch/",
     "author": {
         "name": "Manuel Friedli",
@@ -23,28 +42,22 @@
     ],
     "license": "GPL-3.0",
     "dependencies": {
-    "jquery": "~2.1.3",
+        "jquery": "^3.5.0",
-    "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",
+        "@rollup/plugin-node-resolve": "^11.2.0",
-    "grunt-cli": "^0.1.13",
+        "chai": "4.2.0",
-    "grunt-contrib-clean": "~0.6.0",
+        "cssnano": "^4.1.10",
-    "grunt-contrib-concat": "~0.5.0",
+        "jshint-stylish": "2.2.1",
-    "grunt-contrib-connect": "~0.11.0",
+        "mocha": "^8.3.0",
-    "grunt-contrib-cssmin": "^0.14.0",
+        "npm-run-all": "^4.1.5",
-    "grunt-contrib-jshint": "~0.11.0",
+        "phantomjs-prebuilt": "2.1.16",
-    "grunt-contrib-qunit": "~0.7.0",
+        "postcss": "^8.2.6",
-    "grunt-contrib-uglify": "~0.9.2",
+        "rimraf": "^3.0.2",
-    "grunt-contrib-watch": "~0.6.1",
+        "rollup": "^2.39.1",
-    "grunt-mocha-phantomjs": "^2.0.0",
+        "rollup-plugin-css-bundle": "^1.0.4",
-    "grunt-version": "^1.0.0",
+        "rollup-plugin-terser": "^7.0.2"
-    "jshint-stylish": "~2.0.1",
-    "load-grunt-tasks": "~3.3.0",
-    "phantomjs": "^1.9.18",
-    "time-grunt": "~1.2.1",
-    "mocha": "~2.3.3",
-    "chai": "~3.3.0"
     }
 }

src/uhr-dk.js

@@ -1,7 +1,3 @@
-/*
- * Copyright (C) Schweizerische Bundesbahnen SBB, 2014.
- */
-
 /*
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by

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 () {