mdui-ext/es/components/MduiIconElement.js

a extension for mdui !(not completed)

import { ClassUtil } from "../utils/ClassUtil";
class MduiIconElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-icon");
        const timer = () => {
            if (this._noMaterial != this.notMaterial) {
                this._noMaterial = this.notMaterial;
                if (!this.notMaterial) {
                    this.classList.add("material-icons");
                }
            }
            if (this._color != this.color) {
                this._color = this.color;
                if (this.color && this.color != "") {
                    ClassUtil.changeTextColor(this.color, this);
                }
            }
            if (this.isParentButton()) {
                if (this.left && this.right) {
                    console.warn("请勿同时设置left和right属性");
                }
                else {
                    if (this._left != this.left) {
                        this._left = this.left;
                        if (this.left) {
                            this.classList.add("mdui-icon-left");
                        }
                    }
                    if (this._right != this.right) {
                        this._right = this.right;
                        if (this.right) {
                            this.classList.add("mdui-icon-right");
                        }
                    }
                }
            }
        };
        setInterval(timer, 50);
    }
    /**
     * 设置color属性即可更改图标颜色
     * 示例：将图标颜色设置成蓝色
     * <mdui-icon color="blue">add</mdui-icon>
     */
    get color() {
        const colorAttr = this.getAttributeNode("color");
        if (colorAttr == null) {
            return "";
        }
        return colorAttr.value;
    }
    set color(color) {
        this.setAttribute("color", color);
        ClassUtil.changeTextColor(color, this);
    }
    /**
     * 设置not-material属性以表示此图标属于第三方图标库
     * 示例：使用ionicons图标
     * <link rel="stylesheet" href="ionicons.css"/>
     * <mdui-icon not-material class="ion-plus-circled"></mdui-icon>
     */
    get notMaterial() {
        const notMaterialAttr = this.getAttributeNode("not-material");
        if (notMaterialAttr == null) {
            return false;
        }
        return notMaterialAttr.value != "false";
    }
    set notMaterial(isNotMaterial) {
        this.setAttribute("not-material", String(isNotMaterial));
        if (isNotMaterial) {
            this.classList.remove("material-icons");
        }
    }
    /**
     * 如果图标在按钮内，设置left属性可以让图标位于按钮左侧
     * 示例：
     * <mdui-btn>
     *     <mdui-icon left>add</mdui-icon>
     * </mdui-btn>
     */
    get left() {
        const leftAttr = this.getAttributeNode("left");
        if (leftAttr == null) {
            return false;
        }
        return leftAttr.value != "false";
    }
    set left(isFloatToLeft) {
        if (!this.isParentButton()) {
            return;
        }
        if (isFloatToLeft) {
            this.setAttribute("left", "true");
            this.classList.add("mdui-icon-left");
        }
    }
    isParentButton() {
        const parent = this.parentElement;
        if (parent == null) {
            return false;
        }
        return !(parent.tagName != "MDUI-BTN" || !parent.classList.contains("mdui-btn"));
    }
    /**
     * 如果图标在按钮内，设置left属性可以让图标位于按钮右侧
     * 示例：
     * <mdui-btn>
     *     <mdui-icon right>add</mdui-icon>
     * </mdui-btn>
     */
    get right() {
        const rightAttr = this.getAttributeNode("right");
        if (rightAttr == null) {
            return false;
        }
        return rightAttr.value != "false";
    }
    set right(isFloatToRight) {
        if (!this.isParentButton()) {
            return;
        }
        if (isFloatToRight) {
            this.setAttribute("right", "true");
            this.classList.add("mdui-icon-right");
        }
    }
}
export { MduiIconElement };