translation.js

import {html} from 'lit';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import DBPLitElement from '../dbp-lit-element';
import * as commonStyles from '../styles.js';
import {createInstanceGivenResources} from './i18n.js';

export class Translation extends DBPLitElement {
    constructor() {
        super();
        this.key = '';
        this.lang = '';
        this.interpolation = '';
        this.unsafe = false;
    }

    static get properties() {
        return {
            ...super.properties,
            key: {type: String},
            lang: {type: String},
            interpolation: {type: Object, attribute: 'var'},
            unsafe: {type: Boolean, attribute: 'unsafe'},
        };
    }

    static get styles() {
        // language=css
        return [
              commonStyles.getThemeCSS(),
              commonStyles.getGeneralCSS(),
              commonStyles.getLinkCss(),
          ];
    }

    connectedCallback() {

      // init objects with empty string as value for key
      const de = {};
      const en = {};
      de[this.key] = "";
      en[this.key] = "";

      // create i18n instance with empty translations as default
      this._i18n = createInstanceGivenResources(en, de);

      // supercall after default i18n init to override translations only
      // if a override with this tagname is given
      super.connectedCallback();
    }

    update(changedProperties) {
        let lang = this.lang;
        changedProperties.forEach((oldValue, propName) => {
            switch (propName) {
                case 'lang':
                    this._i18n.changeLanguage(lang);
                    break;
            }
        });

        super.update(changedProperties);
    }

    render() {
        // request to i18n translation
        const translation = (() => {
          if (this.interpolation && this.unsafe)
            return unsafeHTML(this._i18n.t(this.key, this.interpolation));
          else if (this.interpolation)
            return this._i18n.t(this.key, this.interpolation);
          else
            return this._i18n.t(this.key);
        })();

        // if translation == "" key was not found
        let key = "";
        if (translation != "") {
          key = unsafeHTML("<!-- key: " + this.key + "-->");
        } else {
          key = unsafeHTML("<!-- key \"" + this.key + "\" not found! -->");
        }

        // load translation text
        return html`
            ${key}
            ${translation}
        `;
    }
}