_base.ts

export class BaseElement extends HTMLElement {
    private _hasConnectedCallback: boolean = false;
    connectedCallback() {

        if (!this._hasConnectedCallback) {
            this.onInit();
        }
        else {
            this.onUpdate();
        }

        this._hasConnectedCallback = true;

    }

    onInit() { }
    onUpdate() { }

    find(tagName: string): HTMLElement | null {
        
        var found = document.getElementsByTagName(tagName);
        if (found[0]) {
            return <HTMLElement>found[0];
        }
        else {
            return null;
        }
    }

    findAncestor(tagName: string, startsWidth: boolean = false): Element | null {
        var element = <any>this;

        while (element.parentElement !== null) {
            var parentEle = element.parentElement;

            if (tagName.toUpperCase() === parentEle.tagName.toUpperCase()) {
                return parentEle;
            }
            else if (startsWidth && parentEle.tagName.toUpperCase().indexOf(tagName.toUpperCase()) === 0) {
                return parentEle;
            }

            element = parentEle;
        }

        return null;
    }

    findSibling(tagName: string, startsWidth: boolean = false): Element | null {
        var parentEle = this.parentElement;

        if (parentEle != null) {

            for (let i = 0; i < parentEle.children.length; i++) {
                const child = parentEle.children[i];

                if (child != this) {
                    if (tagName.toUpperCase() === child.tagName.toUpperCase()) {
                        return child;
                    }
                    else if (startsWidth && child.tagName.toUpperCase().indexOf(tagName.toUpperCase()) === 0) {
                        return child;
                    }
                }
            }
        }

        return null;
    }
    
    findVisible(tagName: string) {
        var result = [];
        
        var elements = document.getElementsByTagName(tagName);

        for (let i = 0; i < elements.length; i++) {
            const element = <HTMLElement>elements[i];
            
            if (element.style.display !== "none") {
                result.push(element);
            }
        }

        return result;
    }

    visibleChildren(inElement: HTMLElement = this) {
        var result = [];

        for (let i = 0; i < inElement.children.length; i++) {
            const child = <HTMLElement>inElement.children[i];
            if (child.style.display !== "none") {
                result.push(child);
            }
        }

        return result;
    }

    hasChild(element: Element, startsWidth: boolean = false): boolean {
        var ele = this;

        if (ele != null) {
            for (let i = 0; i < ele.children.length; i++) {
                const child = ele.children[i];

                if (child == element) {
                    return true;
                }
            }
        }

        return false;
    }

    map(tagName: string): any {
        return this.getElementsByTagName(tagName)[0];
    }

    mapGlobal(tagName: string): any {
        return document.getElementsByTagName(tagName)[0];
    }

    waitFor(value: any, fn: Function) {
        var interv = setInterval(() => {
            if (value) {
                clearInterval(interv);
                fn();
            }
        }, 100);
    }
}