diff --git a/dist/uhr.min.css b/dist/uhr.min.css
deleted file mode 100644
index 04e1d74..0000000
--- a/dist/uhr.min.css
+++ /dev/null
@@ -1 +0,0 @@
-@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}
\ No newline at end of file
diff --git a/.bowerrc b/legacy/.bowerrc
similarity index 100%
rename from .bowerrc
rename to legacy/.bowerrc
diff --git a/.gitlab-ci.yml b/legacy/.gitlab-ci.yml
similarity index 100%
rename from .gitlab-ci.yml
rename to legacy/.gitlab-ci.yml
diff --git a/.htaccess b/legacy/.htaccess
similarity index 100%
rename from .htaccess
rename to legacy/.htaccess
diff --git a/.jshintrc b/legacy/.jshintrc
similarity index 100%
rename from .jshintrc
rename to legacy/.jshintrc
diff --git a/Gruntfile.js b/legacy/Gruntfile.js
similarity index 100%
rename from Gruntfile.js
rename to legacy/Gruntfile.js
diff --git a/README.md b/legacy/README.md
similarity index 99%
rename from README.md
rename to legacy/README.md
index a353c2f..a2227e7 100644
--- a/README.md
+++ b/legacy/README.md
@@ -19,7 +19,8 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel:
```html
-
+
+
```
* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
diff --git a/VERSION b/legacy/VERSION
similarity index 100%
rename from VERSION
rename to legacy/VERSION
diff --git a/bower.json b/legacy/bower.json
similarity index 100%
rename from bower.json
rename to legacy/bower.json
diff --git a/css/uhr-black.css b/legacy/css/uhr-black.css
similarity index 100%
rename from css/uhr-black.css
rename to legacy/css/uhr-black.css
diff --git a/css/uhr-blue.css b/legacy/css/uhr-blue.css
similarity index 100%
rename from css/uhr-blue.css
rename to legacy/css/uhr-blue.css
diff --git a/css/uhr-green.css b/legacy/css/uhr-green.css
similarity index 100%
rename from css/uhr-green.css
rename to legacy/css/uhr-green.css
diff --git a/css/uhr-pink.css b/legacy/css/uhr-pink.css
similarity index 100%
rename from css/uhr-pink.css
rename to legacy/css/uhr-pink.css
diff --git a/css/uhr-red.css b/legacy/css/uhr-red.css
similarity index 100%
rename from css/uhr-red.css
rename to legacy/css/uhr-red.css
diff --git a/css/uhr-white.css b/legacy/css/uhr-white.css
similarity index 100%
rename from css/uhr-white.css
rename to legacy/css/uhr-white.css
diff --git a/css/uhr-yellow.css b/legacy/css/uhr-yellow.css
similarity index 100%
rename from css/uhr-yellow.css
rename to legacy/css/uhr-yellow.css
diff --git a/css/uhr.css b/legacy/css/uhr.css
similarity index 96%
rename from css/uhr.css
rename to legacy/css/uhr.css
index 7ea3917..40c3de3 100644
--- a/css/uhr.css
+++ b/legacy/css/uhr.css
@@ -14,7 +14,7 @@ along with this program. If not, see .
*/
@font-face {
font-family: 'Uhrenfont';
- src: url('../resources/uhr.woff') format('woff');
+ src: url('legacy/resourcesrces/uhr.woff') format('woff');
}
body {
@@ -206,7 +206,7 @@ body {
a.uhr-configlink {
cursor: pointer;
- background: url("../resources/settings.png") no-repeat;
+ background: url("legacy/resourcesrces/settings.png") no-repeat;
width: 24px;
height: 24px;
display: inline-block;
@@ -236,7 +236,7 @@ a.uhr-closecontrolpanel {
top: -1em;
width: 24px;
height: 24px;
- background: url("../resources/close.png") no-repeat;
+ background: url("legacy/resourcesrces/close.png") no-repeat;
}
#disclaimer {
diff --git a/deploy.sh b/legacy/deploy.sh
similarity index 100%
rename from deploy.sh
rename to legacy/deploy.sh
diff --git a/dist/jquery.uhr.base.js b/legacy/dist/jquery.uhr.base.js
similarity index 100%
rename from dist/jquery.uhr.base.js
rename to legacy/dist/jquery.uhr.base.js
diff --git a/dist/jquery.uhr.base.min.js b/legacy/dist/jquery.uhr.base.min.js
similarity index 100%
rename from dist/jquery.uhr.base.min.js
rename to legacy/dist/jquery.uhr.base.min.js
diff --git a/dist/jquery.uhr.baselangs.js b/legacy/dist/jquery.uhr.baselangs.js
similarity index 100%
rename from dist/jquery.uhr.baselangs.js
rename to legacy/dist/jquery.uhr.baselangs.js
diff --git a/dist/jquery.uhr.baselangs.min.js b/legacy/dist/jquery.uhr.baselangs.min.js
similarity index 100%
rename from dist/jquery.uhr.baselangs.min.js
rename to legacy/dist/jquery.uhr.baselangs.min.js
diff --git a/dist/jquery.uhr.complete.js b/legacy/dist/jquery.uhr.complete.js
similarity index 100%
rename from dist/jquery.uhr.complete.js
rename to legacy/dist/jquery.uhr.complete.js
diff --git a/dist/jquery.uhr.complete.min.js b/legacy/dist/jquery.uhr.complete.min.js
similarity index 100%
rename from dist/jquery.uhr.complete.min.js
rename to legacy/dist/jquery.uhr.complete.min.js
diff --git a/dist/jquery.uhr.langs.js b/legacy/dist/jquery.uhr.langs.js
similarity index 100%
rename from dist/jquery.uhr.langs.js
rename to legacy/dist/jquery.uhr.langs.js
diff --git a/dist/jquery.uhr.langs.min.js b/legacy/dist/jquery.uhr.langs.min.js
similarity index 100%
rename from dist/jquery.uhr.langs.min.js
rename to legacy/dist/jquery.uhr.langs.min.js
diff --git a/dist/jquery.uhr.main.js b/legacy/dist/jquery.uhr.main.js
similarity index 100%
rename from dist/jquery.uhr.main.js
rename to legacy/dist/jquery.uhr.main.js
diff --git a/dist/jquery.uhr.main.min.js b/legacy/dist/jquery.uhr.main.min.js
similarity index 100%
rename from dist/jquery.uhr.main.min.js
rename to legacy/dist/jquery.uhr.main.min.js
diff --git a/dist/libs.js b/legacy/dist/libs.js
similarity index 100%
rename from dist/libs.js
rename to legacy/dist/libs.js
diff --git a/dist/libs.min.js b/legacy/dist/libs.min.js
similarity index 100%
rename from dist/libs.min.js
rename to legacy/dist/libs.min.js
diff --git a/dist/uhr-black.min.css b/legacy/dist/uhr-black.min.css
similarity index 100%
rename from dist/uhr-black.min.css
rename to legacy/dist/uhr-black.min.css
diff --git a/dist/uhr-blue.min.css b/legacy/dist/uhr-blue.min.css
similarity index 100%
rename from dist/uhr-blue.min.css
rename to legacy/dist/uhr-blue.min.css
diff --git a/dist/uhr-green.min.css b/legacy/dist/uhr-green.min.css
similarity index 100%
rename from dist/uhr-green.min.css
rename to legacy/dist/uhr-green.min.css
diff --git a/dist/uhr-pink.min.css b/legacy/dist/uhr-pink.min.css
similarity index 100%
rename from dist/uhr-pink.min.css
rename to legacy/dist/uhr-pink.min.css
diff --git a/dist/uhr-red.min.css b/legacy/dist/uhr-red.min.css
similarity index 100%
rename from dist/uhr-red.min.css
rename to legacy/dist/uhr-red.min.css
diff --git a/dist/uhr-white.min.css b/legacy/dist/uhr-white.min.css
similarity index 100%
rename from dist/uhr-white.min.css
rename to legacy/dist/uhr-white.min.css
diff --git a/dist/uhr-yellow.min.css b/legacy/dist/uhr-yellow.min.css
similarity index 100%
rename from dist/uhr-yellow.min.css
rename to legacy/dist/uhr-yellow.min.css
diff --git a/legacy/dist/uhr.min.css b/legacy/dist/uhr.min.css
new file mode 100644
index 0000000..ace6df7
--- /dev/null
+++ b/legacy/dist/uhr.min.css
@@ -0,0 +1 @@
+@font-face{font-family:Uhrenfont;src:url(legacy/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(legacy/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(legacy/resources/close.png) no-repeat}#disclaimer{font-size:.5em}#disclaimer a{color:#444;text-decoration:underline}
diff --git a/index.html b/legacy/index.html
similarity index 100%
rename from index.html
rename to legacy/index.html
diff --git a/info/index.html b/legacy/info/index.html
similarity index 100%
rename from info/index.html
rename to legacy/info/index.html
diff --git a/info/info.css b/legacy/info/info.css
similarity index 100%
rename from info/info.css
rename to legacy/info/info.css
diff --git a/manifest.appcache b/legacy/manifest.appcache
similarity index 100%
rename from manifest.appcache
rename to legacy/manifest.appcache
diff --git a/package.json b/legacy/package.json
similarity index 100%
rename from package.json
rename to legacy/package.json
diff --git a/resources/apple-touch-icon-precomposed.png b/legacy/resources/apple-touch-icon-precomposed.png
similarity index 100%
rename from resources/apple-touch-icon-precomposed.png
rename to legacy/resources/apple-touch-icon-precomposed.png
diff --git a/resources/close.png b/legacy/resources/close.png
similarity index 100%
rename from resources/close.png
rename to legacy/resources/close.png
diff --git a/resources/favicon.png b/legacy/resources/favicon.png
similarity index 100%
rename from resources/favicon.png
rename to legacy/resources/favicon.png
diff --git a/resources/settings.png b/legacy/resources/settings.png
similarity index 100%
rename from resources/settings.png
rename to legacy/resources/settings.png
diff --git a/resources/uhr.woff b/legacy/resources/uhr.woff
similarity index 100%
rename from resources/uhr.woff
rename to legacy/resources/uhr.woff
diff --git a/src/uhr-de.js b/legacy/src/uhr-de.js
similarity index 100%
rename from src/uhr-de.js
rename to legacy/src/uhr-de.js
diff --git a/src/uhr-de_CH.js b/legacy/src/uhr-de_CH.js
similarity index 100%
rename from src/uhr-de_CH.js
rename to legacy/src/uhr-de_CH.js
diff --git a/src/uhr-de_CH_genau.js b/legacy/src/uhr-de_CH_genau.js
similarity index 100%
rename from src/uhr-de_CH_genau.js
rename to legacy/src/uhr-de_CH_genau.js
diff --git a/src/uhr-dk.js b/legacy/src/uhr-dk.js
similarity index 100%
rename from src/uhr-dk.js
rename to legacy/src/uhr-dk.js
diff --git a/src/uhr-en.js b/legacy/src/uhr-en.js
similarity index 100%
rename from src/uhr-en.js
rename to legacy/src/uhr-en.js
diff --git a/src/uhr-es.js b/legacy/src/uhr-es.js
similarity index 100%
rename from src/uhr-es.js
rename to legacy/src/uhr-es.js
diff --git a/src/uhr-fr.js b/legacy/src/uhr-fr.js
similarity index 100%
rename from src/uhr-fr.js
rename to legacy/src/uhr-fr.js
diff --git a/src/uhr-it.js b/legacy/src/uhr-it.js
similarity index 100%
rename from src/uhr-it.js
rename to legacy/src/uhr-it.js
diff --git a/src/uhr-nl.js b/legacy/src/uhr-nl.js
similarity index 100%
rename from src/uhr-nl.js
rename to legacy/src/uhr-nl.js
diff --git a/src/uhr-pt.js b/legacy/src/uhr-pt.js
similarity index 100%
rename from src/uhr-pt.js
rename to legacy/src/uhr-pt.js
diff --git a/src/uhr.js b/legacy/src/uhr.js
similarity index 100%
rename from src/uhr.js
rename to legacy/src/uhr.js
diff --git a/test/.jshintrc b/legacy/test/.jshintrc
similarity index 100%
rename from test/.jshintrc
rename to legacy/test/.jshintrc
diff --git a/test/css/mocha.css b/legacy/test/css/mocha.css
similarity index 100%
rename from test/css/mocha.css
rename to legacy/test/css/mocha.css
diff --git a/test/fastforward.html b/legacy/test/fastforward.html
similarity index 100%
rename from test/fastforward.html
rename to legacy/test/fastforward.html
diff --git a/test/lib/chai.js b/legacy/test/lib/chai.js
similarity index 99%
rename from test/lib/chai.js
rename to legacy/test/lib/chai.js
index a75da85..ce4892d 100644
--- a/test/lib/chai.js
+++ b/legacy/test/lib/chai.js
@@ -4774,9 +4774,9 @@ require.alias("chaijs-type-detect/lib/type.js", "chaijs-deep-eql/deps/type-detec
require.alias("chaijs-type-detect/lib/type.js", "chaijs-type-detect/index.js");
require.alias("chaijs-deep-eql/lib/eql.js", "chaijs-deep-eql/index.js");
require.alias("chai/index.js", "chai/index.js");if (typeof exports == "object") {
- module.exports = require("chai");
+ module.exports = require("legacy/test/lib/chai");
} else if (typeof define == "function" && define.amd) {
- define([], function(){ return require("chai"); });
+ define([], function(){ return require("legacy/test/lib/chai"); });
} else {
- this["chai"] = require("chai");
-}})();
\ No newline at end of file
+ this["chai"] = require("legacy/test/lib/chai");
+}})();
diff --git a/test/lib/mocha.js b/legacy/test/lib/mocha.js
similarity index 99%
rename from test/lib/mocha.js
rename to legacy/test/lib/mocha.js
index 19edc87..ea3ac73 100644
--- a/test/lib/mocha.js
+++ b/legacy/test/lib/mocha.js
@@ -700,28 +700,28 @@ Progress.prototype.draw = function(ctx){
, y = half
, rad = half - 1
, fontSize = this._fontSize;
-
+
ctx.font = fontSize + 'px ' + this._font;
-
+
var angle = Math.PI * 2 * (percent / 100);
ctx.clearRect(0, 0, size, size);
-
+
// outer circle
ctx.strokeStyle = '#9f9f9f';
ctx.beginPath();
ctx.arc(x, y, rad, 0, angle, false);
ctx.stroke();
-
+
// inner circle
ctx.strokeStyle = '#eee';
ctx.beginPath();
ctx.arc(x, y, rad - 1, 0, angle, true);
ctx.stroke();
-
+
// text
var text = this._text || (percent | 0) + '%'
, w = ctx.measureText(text).width;
-
+
ctx.fillText(
text
, x - w / 2 + 1
@@ -5746,7 +5746,7 @@ process.on = function(e, fn){
* Expose mocha.
*/
-var Mocha = global.Mocha = require('mocha'),
+var Mocha = global.Mocha = require('legacy/test/lib/mocha'),
mocha = global.mocha = new Mocha({ reporter: 'html' });
// The BDD UI is registered by default, but no UI will be functional in the
@@ -5839,4 +5839,4 @@ mocha.run = function(fn){
*/
Mocha.process = process;
-})();
\ No newline at end of file
+})();
diff --git a/test/test.html b/legacy/test/test.html
similarity index 100%
rename from test/test.html
rename to legacy/test/test.html
diff --git a/test/test.js b/legacy/test/test.js
similarity index 100%
rename from test/test.js
rename to legacy/test/test.js
diff --git a/webcomponent/clock.js b/webcomponent/clock.js
new file mode 100644
index 0000000..6374e06
--- /dev/null
+++ b/webcomponent/clock.js
@@ -0,0 +1,89 @@
+import {Layout as LayoutDE_CH} from './language-de_ch.js';
+import {Parser} from "./parser.js";
+import {Highlighter} from "./highlighter.js";
+import {template} from "./template.js";
+
+class WordClock extends HTMLElement {
+ _shadowRoot = null;
+
+ constructor() {
+ super();
+ this._shadowRoot = this.attachShadow({mode: 'open'});
+ this._shadowRoot.appendChild(template.content.cloneNode(true));
+ }
+
+ static get observedAttributes() {
+ return ['language', 'mode', 'color', 'state', 'debug'];
+ }
+
+ get language() {
+ return this.getAttribute('language');
+ }
+
+ get mode() {
+ return this.getAttribute('mode');
+ }
+
+ get color() {
+ return this.getAttribute('color');
+ }
+
+ get state() {
+ return this.getAttribute('state');
+ }
+
+ get debug() {
+ return this.getAttribute('debug');
+ }
+
+ onclick(event) {
+ console.log(event);
+ }
+
+ connectedCallback() {
+ if (!this._isDebug()) {
+ this.shadowRoot.getElementById('log').style.display = 'none';
+ }
+
+ this._log("connected!")
+
+ const layout = new LayoutDE_CH();
+ const parser = new Parser(layout);
+ const letters = parser.parse();
+
+ const letterarea = this.shadowRoot.getElementById('letterarea');
+ letters.forEach((line, index, array) => {
+ line.forEach(letter => {
+ letterarea.append(letter.toHTMLElement());
+ });
+ if (index < array.length - 1) {
+ letterarea.append(document.createElement('br'));
+ }
+ });
+
+ this._highlighter = new Highlighter(layout, this.shadowRoot.getElementById('clock'), this.mode);
+ this._timer = window.setInterval(() => this._tick(), 1000);
+ }
+
+ disconnectedCallback() {
+ window.clearInterval(this._timer);
+ }
+
+ _tick() {
+ this._highlighter.display(new Date());
+ }
+
+ _log(...elements) {
+ if (this._isDebug()) {
+ for (let e of elements) {
+ this.shadowRoot.getElementById('log').append(`${e}\n`);
+ }
+ }
+ }
+
+ _isDebug() {
+ return this.debug === 'on' || this.debug === 'true' || this.debug === '1';
+ }
+}
+
+window.customElements.define("word-clock", WordClock);
diff --git a/webcomponent/highlighter.js b/webcomponent/highlighter.js
new file mode 100644
index 0000000..41d60f1
--- /dev/null
+++ b/webcomponent/highlighter.js
@@ -0,0 +1,86 @@
+export class Highlighter {
+ constructor(layout, clockElement, mode) {
+ this._layout = layout;
+ this._clockElement = clockElement;
+ this._mode = mode === 'seconds' ? 'seconds' : 'time';
+ this._time = null;
+ }
+
+ display(time) {
+ if (this._mode === 'seconds') {
+ const second = this._getSecond(time);
+ if (this._getCurrentSecond() !== second) {
+ this._clearAll();
+ this._highlight(`second${second}`);
+ }
+ } else {
+ const minute = this._getMinute(time);
+ if (this._getCurrentMinute() !== minute) {
+ const dotMinute = this._getDotMinute(time);
+ const hour = this._getHour(time);
+ this._clearAll();
+ this._highlight('on');
+ for (let i = 1; i <= dotMinute; i++) {
+ this._highlight(`dot${i}`);
+ }
+ this._highlight(`minute${minute}`);
+ this._highlight(`hour${hour}`);
+ }
+ }
+ this._time = time;
+ }
+
+ _getSecond(time) {
+ if (typeof this._layout.getSeconds === 'function') {
+ return this._layout.getSeconds(time);
+ }
+ return time.getSeconds();
+ }
+
+ _getDotMinute(time) {
+ if (typeof this._layout.getDotMinute === 'function') {
+ return this._layout.getDotMinute(time);
+ }
+ return time.getMinutes() % 5;
+ }
+
+ _getMinute(time) {
+ if (typeof this._layout.getMinutes === 'function') {
+ return this._layout.getMinutes(time);
+ }
+ return time.getMinutes();
+ }
+
+ _getHour(time) {
+ if (typeof this._layout.getHours === 'function') {
+ return this._layout.getHours(time);
+ }
+ const hour = time.getHours();
+ if (time.getMinutes() >= 25) {
+ return (hour + 1) % 24;
+ }
+ return hour;
+ }
+
+ _clearAll() {
+ const items = this._clockElement.getElementsByClassName('item');
+ for (let i = 0; i < items.length; i++) {
+ items.item(i).classList.remove('active');
+ }
+ }
+
+ _highlight(itemClass) {
+ const items = this._clockElement.getElementsByClassName(`item ${itemClass}`);
+ for (let i = 0; i < items.length; i++) {
+ items.item(i).classList.add('active');
+ }
+ }
+
+ _getCurrentSecond() {
+ return !!this._time && this._time.getSeconds() || -1;
+ }
+
+ _getCurrentMinute() {
+ return !!this._time && this._time.getMinutes() || -1;
+ }
+}
diff --git a/webcomponent/index.html b/webcomponent/index.html
new file mode 100644
index 0000000..df506d1
--- /dev/null
+++ b/webcomponent/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Test page
+
+
+
+
+
+
+
diff --git a/webcomponent/language-de_ch.js b/webcomponent/language-de_ch.js
new file mode 100644
index 0000000..fff46f6
--- /dev/null
+++ b/webcomponent/language-de_ch.js
@@ -0,0 +1,65 @@
+export class Layout {
+ _es_isch = {1: [1, 2, 4, 5, 6, 7]};
+ _ab = {4: [1, 2]};
+ _vor = {3: [9, 10, 11]};
+ _haubi = {4: [4, 5, 6, 7, 8]};
+ _fuef = {1: [9, 10, 11]};
+ _zae = {2: [9, 10, 11]};
+ _viertu = {2: [1, 2, 3, 4, 5, 6]};
+ _zwaenzg = {3: [1, 2, 3, 4, 5, 6]};
+
+ constructor() {
+ }
+
+ get letters() {
+ return [
+ 'ESKISCHAFÜF',
+ 'VIERTUBFZÄÄ',
+ 'ZWÄNZGSIVOR',
+ 'ABOHAUBIEGE',
+ 'EISZWÖISDRÜ',
+ 'VIERIFÜFIQT',
+ 'SÄCHSISIBNI',
+ 'ACHTINÜNIEL',
+ 'ZÄNIERBEUFI',
+ 'ZWÖUFINAUHR'
+ ];
+ }
+
+ get permanentlyOn() {
+ return this._es_isch;
+ }
+
+ get minutes() {
+ return {
+ "5,6,7,8,9": [this._fuef, this._ab],
+ "10,11,12,13,14": [this._zae, this._ab],
+ "15,16,17,18,19": [this._viertu, this._ab],
+ "20,21,22,23,24": [this._zwaenzg, this._ab],
+ "25,26,27,28,29": [this._fuef, this._vor, this._haubi],
+ "30,31,32,33,34": [this._haubi],
+ "35,36,37,38,39": [this._fuef, this._ab, this._haubi],
+ "40,41,42,43,44": [this._zwaenzg, this._vor],
+ "45,46,47,48,49": [this._viertu, this._vor],
+ "50,51,52,53,54": [this._zae, this._vor],
+ "55,56,57,58,59": [this._fuef, this._vor]
+ };
+ }
+
+ get hours() {
+ return {
+ "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]}
+ };
+ }
+}
diff --git a/webcomponent/letter.js b/webcomponent/letter.js
new file mode 100644
index 0000000..3b2f8c1
--- /dev/null
+++ b/webcomponent/letter.js
@@ -0,0 +1,24 @@
+export default class Letter {
+ constructor(value, style) {
+ this._value = value;
+ this._style = style;
+ }
+
+ addStyle(style) {
+ if (!this._style) {
+ this._style = style;
+ } else {
+ this._style += ' ' + style;
+ }
+ };
+
+ toHTMLElement() {
+ const element = document.createElement('span');
+ element.classList.add('item', 'letter');
+ if (!!this._style) {
+ element.classList.add(...this._style.split(' '));
+ }
+ element.innerHTML = this._value;
+ return element;
+ }
+}
diff --git a/webcomponent/parser.js b/webcomponent/parser.js
new file mode 100644
index 0000000..785acab
--- /dev/null
+++ b/webcomponent/parser.js
@@ -0,0 +1,268 @@
+import Letter from "./letter.js";
+
+export class Parser {
+ constructor(layout) {
+ this._layout = layout;
+ }
+
+ _vorne0 = {
+ 3: [2, 3, 4],
+ 4: [1, 5],
+ 5: [1, 4, 5],
+ 6: [1, 3, 5],
+ 7: [1, 2, 5],
+ 8: [1, 5],
+ 9: [2, 3, 4]
+ };
+ _hinten0 = {
+ 3: [8, 9, 10],
+ 4: [7, 11],
+ 5: [7, 10, 11],
+ 6: [7, 9, 11],
+ 7: [7, 8, 11],
+ 8: [7, 11],
+ 9: [8, 9, 10]
+ };
+ _vorne1 = {
+ 3: [3],
+ 4: [2, 3],
+ 5: [3],
+ 6: [3],
+ 7: [3],
+ 8: [3],
+ 9: [2, 3, 4]
+ };
+ _hinten1 = {
+ 3: [9],
+ 4: [8, 9],
+ 5: [9],
+ 6: [9],
+ 7: [9],
+ 8: [9],
+ 9: [8, 9, 10]
+ };
+ _vorne2 = {
+ 3: [2, 3, 4],
+ 4: [1, 5],
+ 5: [5],
+ 6: [4],
+ 7: [3],
+ 8: [2],
+ 9: [1, 2, 3, 4, 5]
+ };
+ _hinten2 = {
+ 3: [8, 9, 10],
+ 4: [7, 11],
+ 5: [11],
+ 6: [10],
+ 7: [9],
+ 8: [8],
+ 9: [7, 8, 9, 10, 11]
+ };
+ _vorne3 = {
+ 3: [1, 2, 3, 4, 5],
+ 4: [4],
+ 5: [3],
+ 6: [4],
+ 7: [5],
+ 8: [1, 5],
+ 9: [2, 3, 4]
+ };
+ _hinten3 = {
+ 3: [7, 8, 9, 10, 11],
+ 4: [10],
+ 5: [9],
+ 6: [10],
+ 7: [11],
+ 8: [7, 11],
+ 9: [8, 9, 10]
+ };
+ _vorne4 = {
+ 3: [4],
+ 4: [3, 4],
+ 5: [2, 4],
+ 6: [1, 4],
+ 7: [1, 2, 3, 4, 5],
+ 8: [4],
+ 9: [4]
+ };
+ _hinten4 = {
+ 3: [10],
+ 4: [9, 10],
+ 5: [8, 10],
+ 6: [7, 10],
+ 7: [7, 8, 9, 10, 11],
+ 8: [10],
+ 9: [10]
+ };
+ _vorne5 = {
+ 3: [1, 2, 3, 4, 5],
+ 4: [1],
+ 5: [1, 2, 3, 4],
+ 6: [5],
+ 7: [5],
+ 8: [1, 5],
+ 9: [2, 3, 4]
+ };
+ _hinten5 = {
+ 3: [7, 8, 9, 10, 11],
+ 4: [7],
+ 5: [7, 8, 9, 10],
+ 6: [11],
+ 7: [11],
+ 8: [7, 11],
+ 9: [8, 9, 10]
+ };
+ _hinten6 = {
+ 3: [9, 10],
+ 4: [8],
+ 5: [7],
+ 6: [7, 8, 9, 10],
+ 7: [7, 11],
+ 8: [7, 11],
+ 9: [8, 9, 10]
+ };
+ _hinten7 = {
+ 3: [7, 8, 9, 10, 11],
+ 4: [11],
+ 5: [10],
+ 6: [9],
+ 7: [8],
+ 8: [8],
+ 9: [8]
+ };
+ _hinten8 = {
+ 3: [8, 9, 10],
+ 4: [7, 11],
+ 5: [7, 11],
+ 6: [8, 9, 10],
+ 7: [7, 11],
+ 8: [7, 11],
+ 9: [8, 9, 10]
+ };
+ _hinten9 = {
+ 3: [8, 9, 10],
+ 4: [7, 11],
+ 5: [7, 11],
+ 6: [8, 9, 10, 11],
+ 7: [11],
+ 8: [10],
+ 9: [8, 9]
+ };
+ _seconds = {
+ "0": [this._vorne0, this._hinten0],
+ "1": [this._vorne0, this._hinten1],
+ "2": [this._vorne0, this._hinten2],
+ "3": [this._vorne0, this._hinten3],
+ "4": [this._vorne0, this._hinten4],
+ "5": [this._vorne0, this._hinten5],
+ "6": [this._vorne0, this._hinten6],
+ "7": [this._vorne0, this._hinten7],
+ "8": [this._vorne0, this._hinten8],
+ "9": [this._vorne0, this._hinten9],
+ "10": [this._vorne1, this._hinten0],
+ "11": [this._vorne1, this._hinten1],
+ "12": [this._vorne1, this._hinten2],
+ "13": [this._vorne1, this._hinten3],
+ "14": [this._vorne1, this._hinten4],
+ "15": [this._vorne1, this._hinten5],
+ "16": [this._vorne1, this._hinten6],
+ "17": [this._vorne1, this._hinten7],
+ "18": [this._vorne1, this._hinten8],
+ "19": [this._vorne1, this._hinten9],
+ "20": [this._vorne2, this._hinten0],
+ "21": [this._vorne2, this._hinten1],
+ "22": [this._vorne2, this._hinten2],
+ "23": [this._vorne2, this._hinten3],
+ "24": [this._vorne2, this._hinten4],
+ "25": [this._vorne2, this._hinten5],
+ "26": [this._vorne2, this._hinten6],
+ "27": [this._vorne2, this._hinten7],
+ "28": [this._vorne2, this._hinten8],
+ "29": [this._vorne2, this._hinten9],
+ "30": [this._vorne3, this._hinten0],
+ "31": [this._vorne3, this._hinten1],
+ "32": [this._vorne3, this._hinten2],
+ "33": [this._vorne3, this._hinten3],
+ "34": [this._vorne3, this._hinten4],
+ "35": [this._vorne3, this._hinten5],
+ "36": [this._vorne3, this._hinten6],
+ "37": [this._vorne3, this._hinten7],
+ "38": [this._vorne3, this._hinten8],
+ "39": [this._vorne3, this._hinten9],
+ "40": [this._vorne4, this._hinten0],
+ "41": [this._vorne4, this._hinten1],
+ "42": [this._vorne4, this._hinten2],
+ "43": [this._vorne4, this._hinten3],
+ "44": [this._vorne4, this._hinten4],
+ "45": [this._vorne4, this._hinten5],
+ "46": [this._vorne4, this._hinten6],
+ "47": [this._vorne4, this._hinten7],
+ "48": [this._vorne4, this._hinten8],
+ "49": [this._vorne4, this._hinten9],
+ "50": [this._vorne5, this._hinten0],
+ "51": [this._vorne5, this._hinten1],
+ "52": [this._vorne5, this._hinten2],
+ "53": [this._vorne5, this._hinten3],
+ "54": [this._vorne5, this._hinten4],
+ "55": [this._vorne5, this._hinten5],
+ "56": [this._vorne5, this._hinten6],
+ "57": [this._vorne5, this._hinten7],
+ "58": [this._vorne5, this._hinten8],
+ "59": [this._vorne5, this._hinten9]
+ };
+
+ _parseArrayOrObject(letters, styleClass, input) {
+ if (typeof input !== 'undefined' && input !== null) {
+ if (Array.isArray(input)) {
+ input.forEach(item => {
+ this._parseObject(letters, styleClass, item);
+ });
+ } else {
+ this._parseObject(letters, styleClass, input);
+ }
+ }
+ }
+
+ _parseObject(letters, styleClass, object) {
+ if (typeof object !== 'undefined' && object !== null) {
+ Object.keys(object).forEach(y => {
+ const highlightLetters = object[y];
+ highlightLetters.forEach(x => {
+ letters[y - 1][x - 1].addStyle(styleClass);
+ });
+ });
+ }
+ }
+
+ _parseTimeDefinition(letters, styleClass, definition) {
+ if (typeof definition !== 'undefined' && definition !== null) {
+ Object.keys(definition).forEach(listString => {
+ const array = listString.split(',');
+ const highlightLetters = definition[listString];
+ array.forEach(item => this._parseArrayOrObject(letters, styleClass + item, highlightLetters));
+ });
+ }
+ }
+
+ parse() {
+ const letters = [];
+ this._layout.letters.forEach(string => {
+ const line = [];
+ for (let c = 0; c < string.length; c++) {
+ const character = new Letter(string[c]);
+ line.push(character);
+ }
+ letters.push(line);
+ });
+ this._parseArrayOrObject(letters, 'on', this._layout.permanentlyOn);
+ if (typeof this._layout.seconds !== 'undefined' && this._layout.seconds !== null) {
+ this._parseTimeDefinition(letters, 'second', this._layout.seconds);
+ } else {
+ this._parseTimeDefinition(letters, 'second', this._seconds);
+ }
+ this._parseTimeDefinition(letters, 'minute', this._layout.minutes);
+ this._parseTimeDefinition(letters, 'hour', this._layout.hours);
+ return letters;
+ };
+}
diff --git a/webcomponent/template.js b/webcomponent/template.js
new file mode 100644
index 0000000..f3b9548
--- /dev/null
+++ b/webcomponent/template.js
@@ -0,0 +1,125 @@
+export const template = document.createElement('template');
+template.innerHTML = `
+
+
+
+`;