mdui-ext/es/components/mdui-select.js

a extension for mdui !(not completed)

import { AttributeUtil } from "../utils/AttributeUtil";
import { ClassUtil } from "../utils/ClassUtil";
class MduiSelectElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-select");
        const menu = document.createElement("div");
        const selected = document.createElement("span");
        const items = this.querySelectorAll("mdui-select-item");
        let temp;
        let domParser;
        selected.classList.add("mdui-select-selected");
        menu.classList.add("mdui-select-menu");
        items.forEach((item) => {
            if (temp == undefined) {
                temp = item;
                selected.innerText = item.innerHTML;
            }
            if (domParser == undefined) {
                domParser = new DOMParser();
            }
            const child = domParser
                .parseFromString(item.outerHTML, "text/html")
                .querySelector("mdui-select-item");
            if (child != null) {
                menu.append(child);
            }
        });
        items.forEach((item) => {
            this.removeChild(item);
        });
        this.appendChild(selected);
        this.appendChild(menu);
        const timer = () => {
            if (this.top && this.bottom) {
                console.warn("请勿同时设置top与bottom属性");
                return;
            }
            if (this._top != this.top) {
                this._top = this.top;
                if (this.top) {
                    ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
                    this.classList.add("mdui-select-position-top");
                }
                else {
                    ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
                    this.classList.add("mdui-select-position-auto");
                }
            }
            if (this._bottom != this.bottom) {
                this._bottom = this.bottom;
                if (this.bottom) {
                    ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
                    this.classList.add("mdui-select-position-bottom");
                }
                else {
                    ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
                    this.classList.add("mdui-select-position-auto");
                }
            }
        };
        setInterval(timer, 50);
    }
    get top() {
        return AttributeUtil.isAttributeNotFalse(this, "top");
    }
    set top(isTop) {
        this.setAttribute("top", String(isTop));
        if (isTop) {
            ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
            this.classList.add("mdui-select-position-top");
        }
        else {
            ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
            this.classList.add("mdui-select-position-auto");
        }
    }
    get bottom() {
        return AttributeUtil.isAttributeNotFalse(this, "bottom");
    }
    set bottom(isBottom) {
        this.setAttribute("bottom", String(isBottom));
        if (isBottom) {
            ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
            this.classList.add("mdui-select-position-bottom");
        }
        else {
            ClassUtil.removeClassNameStartsWith("mdui-select-position-", this);
            this.classList.add("mdui-select-position-auto");
        }
    }
}
class MduiSelectMenuElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-select-menu");
    }
}
class MduiSelectItemElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-select-menu-item", "mdui-ripple");
    }
}
export { MduiSelectElement, MduiSelectMenuElement, MduiSelectItemElement };