uhr/webcomponent/clock.js

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);