paella-core/src/js/core/dom.js

Multistream HTML video player

import PlayerResource from './PlayerResource';

export function createElement({tag='div',attributes={},children="",innerText="",parent=null}) {
    const result = document.createElement(tag);
    result.innerText = innerText;
    for (let key in attributes) {
        result.setAttribute(key,attributes[key]);
    }
    result.innerHTML = children;
    if (parent) {
        parent.appendChild(result);
    }
    return result;
}

export function createElementWithHtmlText(htmlText,parent = null) {
    const tmpElem = document.createElement('div');
    tmpElem.innerHTML = htmlText;
    const result = tmpElem.children[0];
    if (parent) {
        parent.appendChild(result);
    }
    return result;
}

export class DomClass extends PlayerResource {
    constructor(player, {tag='div',attributes=[],children="",parent=null}) {
        super(player);
        this._element = createElement({tag,attributes,children,parent});

        // Add a getter as a shortcut to the DOM element tag
        Object.defineProperty(this, tag, {
            get: () => this._element
        });
    }

    get element() {
        return this._element;
    }

    get parent() {
        return this._element.parentElement;
    }
    
    hide() {
        this.element.style.display = "none";
    }
    
    show(showMode = "block") {
        this.element.style.display = showMode;
    }
    
    get isVisible() {
        const style = window.getComputedStyle(this.element);
        return  style.display !== "none" &&
                style.display !== "";
    }

    setAttribute(name,value) {
        this._element.setAttribute(name,value);
    }

    removeFromParent() {
        this._element.parentElement?.removeChild(this._element);
    }
    
    setParent(parent) {
        this.removeFromParent();
        parent.appendChild(this._element);
    }
}