demo.js

import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {FileSource} from './file-source.js';
import {FileSink} from './file-sink.js';
import * as commonUtils from '@dbp-toolkit/common/utils';

export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
    constructor() {
        super();
        this.lang = 'de';
        this.url = '';
        this.selectedFiles = [];
        this.selectedFilesCount = 0;
    }

    static get scopedElements() {
        return {
          'dbp-file-source': FileSource,
          'dbp-file-sink': FileSink,
        };
    }

    static get properties() {
        return {
            lang: { type: String },
            url: { type: String },
            selectedFiles: { type: Array, attribute: false },
            selectedFilesCount: { type: Number, attribute: false },
        };
    }

    connectedCallback() {
        super.connectedCallback();

        this.updateComplete.then(() => {
            this.shadowRoot.querySelectorAll('.file-source')
                .forEach(element => {
                    // TODO: remove orphaned event listeners
                    element.addEventListener('dbp-file-source-file-selected', this.addLogEntry.bind(this));
                });
        });
    }

    update(changedProperties) {
        changedProperties.forEach((oldValue, propName) => {
            if (propName === "lang") {
                i18n.changeLanguage(this.lang);
            }
        });

        super.update(changedProperties);
    }

    getSelectedFilesHtml() {
        if (this.selectedFilesCount === 0) {
            return `No files were selected`;
        }

        let results = [];

        this.selectedFiles.forEach((file) => {
            results.push(html`
                <div class="file-block">
                    <strong>${file.name}</strong> (${file.type})</span>
                </div>
            `);
        });