mdui-ext/src/components/mdui-btn.ts

a extension for mdui !(not completed)

import {ClassUtil} from "../utils/ClassUtil";

class MduiButtonElement extends HTMLElement {
    private _textColor: string | undefined
    private _color: string | undefined
    private _block: boolean | undefined
    private _raised: boolean | undefined
    private _icon: boolean | undefined
    private _dense: boolean | undefined
    private _active: boolean | undefined

    constructor() {
        super();
        this.classList.add("mdui-btn")
        this.classList.add("mdui-ripple")

        this.addEventListener("click", () => {
            const parent = this.parentElement
            if (parent == null) {
                return
            }
            if (parent.tagName != "MDUI-BTN-GROUP"
                || parent.classList == null
                || !parent.classList.contains("mdui-btn-group")) {
                return
            }
            const btns: HTMLCollectionOf<Element> = parent.getElementsByTagName("mdui-btn")
            if (btns == null) {
                return
            }
            for (let i = 0; i < btns.length; i++) {
                const btn = btns[i]
                btn.classList.remove("mdui-btn-active")
                btn.removeAttribute("active")
            }
            this.active = true
            this.classList.remove("mdui-color-white")
        })

        const timer = () => {
            if (this._textColor != this.textColor) {
                this._textColor = this.textColor
                if (this.textColor) {
                    ClassUtil.changeTextColor(this.textColor, this)
                }
            }

            if (this._color != this.color) {
                this._color = this.color
                if (this.color) {
                    ClassUtil.changeColor(this.color, this)
                    if (this.color == "white") {
                        this.classList.add("mdui-ripple-black")
                    }
                }
            }

            if (this._block != this.block) {
                this._block = this.block
                if (this.block) {
                    this.classList.add("mdui-btn-block")
                }
            }

            if (this._raised != this.raised) {
                this._raised = this.raised
                if (this.raised) {
                    this.classList.add("mdui-btn-raised")
                }
            }

            if (this._icon != this.icon) {
                this._icon = this.icon
                if (this.icon) {
                    this.classList.add("mdui-btn-icon")
                }
            }

            if (this._dense != this.dense) {
                this._dense = this.dense
                if (this.dense) {
                    this.classList.add("mdui-btn-dense")
                }
            }

            if (this._active != this.active) {
                this._active = this.active
                if (this.active) {
                    this.classList.add("mdui-btn-active")
                    this.classList.forEach((clazz) => {
                        if (clazz.startsWith("mdui-color-")) {
                            this.classList.remove(clazz)
                        }
                    })
                }
            }
        }

        setInterval(timer, 50)
    }

    /**
     * 设置text-color属性即可更改按钮的文字颜色
     * 示例：将按钮的文字颜色设置成蓝色
     * <mdui-btn text-color="blue">这是一个蓝色字体的按钮</mdui-btn>
     */
    get textColor() {
        const colorAttr: Attr | null = this.getAttributeNode("text-color")
        if (colorAttr == null) {
            const bodyClassList: DOMTokenList | null = document.body.classList
            if (bodyClassList == null) {
                return "black"
            }
            for (let clazz in bodyClassList) {
                if (clazz.startsWith("mdui-theme-accent-")) {
                    return "white"
                }
            }
            if (this.color != "white") {
                return "white"
            }
            return "black"
        }
        return colorAttr.value
    }

    set textColor(color: string) {
        this.setAttribute("text-color", color)
        ClassUtil.changeTextColor(color, this)
    }

    /**
     * 设置color属性即可更改按钮的颜色
     * 示例：将按钮的颜色设置成蓝色
     * <mdui-btn color="blue">这是一个蓝色的按钮</mdui-btn>
     */
    get color() {
        const colorAttr: Attr | null = this.getAttributeNode("color")
        if (colorAttr == null) {
            const bodyClassList: DOMTokenList | null = document.body.classList
            if (bodyClassList == null) {
                return "white"
            }
            for (let clazz in bodyClassList) {
                if (clazz.startsWith("mdui-theme-accent-")) {
                    return "theme-accent"
                }
            }
            return "white"
        }
        return colorAttr.value
    }

    set color(color: string) {
        this.setAttribute("color", color)
        ClassUtil.changeColor(color, this)
        if (color == "white") {
            this.classList.add("mdui-ripple-black")
        } else {
            this.classList.remove("mdui-ripple-black")
        }
    }

    /**
     * 设置block属性即可将按钮拉伸到父元素的100%宽度，并且变为块级元素
     * 示例：
     * <mdui-btn block>这是一个块级按钮</mdui-btn>
     */
    get block() {
        const blockAttr: Attr | null = this.getAttributeNode("block")
        if (blockAttr == null) {
            return false
        }
        return blockAttr.value != "false"
    }

    set block(isBlock: boolean) {
        this.setAttribute("block", String(isBlock))
        if (isBlock) {
            this.classList.add("mdui-btn-block")
        } else {
            this.classList.remove("mdui-btn-block")
        }
    }

    /**
     * 设置raised属性即可使按钮获得浮动效果
     * 示例：
     * <mdui-btn raised>这是一个浮动按钮</mdui-btn>
     */
    get raised() {
        const outlinedAttr: Attr | null = this.getAttributeNode("raised")
        if (outlinedAttr == null) {
            return false
        } else {
            return outlinedAttr.value != "false"
        }
    }

    set raised(isRaised: boolean) {
        this.setAttribute("raised", String(isRaised))
        if (isRaised) {
            this.classList.add("mdui-btn-raised")
        } else {
            this.classList.remove("mdui-btn-raised")
        }
    }

    /**
     * 给按钮添加icon属性可将其变为图标按钮
     * 示例：
     * <mdui-btn icon>
     *     <mdui-icon>add</mdui-icon>
     * </mdui-btn>
     */
    get icon() {
        const iconAttr: Attr | null = this.getAttributeNode("icon")
        if (iconAttr == null) {
            return false
        } else {
            return iconAttr.value != "false"
        }
    }

    set icon(isIcon: boolean) {
        this.setAttribute("icon", String(isIcon))
        if (isIcon) {
            this.classList.add("mdui-btn-icon")
        } else {
            this.classList.remove("mdui-btn-icon")
        }
    }

    /**
     * 在按钮上加入属性dense即可使按钮变为密集型按钮
     * 示例：
     * <mdui-btn dense>这是一个密集型按钮</mdui-btn>
     */
    get dense() {
        const denseAttr: Attr | null = this.getAttributeNode("dense")
        if (denseAttr == null) {
            return false
        } else {
            return denseAttr.value != "false"
        }
    }

    set dense(isDense: boolean) {
        this.setAttribute("dense", String(isDense))
        if (isDense) {
            this.classList.add("mdui-btn-dense")
        } else {
            this.classList.remove("mdui-btn-dense")
        }
    }

    /**
     * 在按钮上加入属性disabled即可禁用此按钮
     * 示例：
     * <mdui-btn disabled>这个按钮被禁用了</mdui-btn>
     */
    get disabled() {
        const disabledAttr: Attr | null = this.getAttributeNode("disabled")
        if (disabledAttr == null) {
            return false
        } else {
            return disabledAttr.value != "false"
        }
    }

    set disabled(isDisabled: boolean) {
        if (isDisabled) {
            this.setAttribute("disabled", "true")
        }
    }

    /**
     * 在按钮上加入属性active表示该按钮处于选中状态，该属性在按钮组中才会生效
     * 示例：按钮组中第二个按钮处于选中状态
     * <mdui-btn-group>
     *     <mdui-btn icon><mdui-icon>format_align_left</mdui-icon></mdui-btn>
     *     <mdui-btn icon active><mdui-icon>format_align_center</mdui-icon></mdui-btn>
     *     <mdui-btn icon><mdui-icon>format_align_right</mdui-icon></mdui-btn>
     *     <mdui-btn icon><mdui-icon>format_align_justify</mdui-icon></mdui-btn>
     * </mdui-btn-group>
     */
    get active() {
        const activeAttr: Attr | null = this.getAttributeNode("active")
        if (activeAttr == null) {
            return false
        } else {
            return activeAttr.value != "false"
        }
    }

    set active(isActive: boolean) {
        this.setAttribute("active", String(isActive))
        if (isActive) {
            this.classList.add("mdui-btn-active")
        } else {
            this.classList.remove("mdui-btn-active")
        }
    }
}

class MduiButtonGroupElement extends HTMLElement {
    constructor() {
        super();
        this.classList.add("mdui-btn-group")
    }
}

export {MduiButtonElement, MduiButtonGroupElement}