mdui-ext
Version:
a extension for mdui !(not completed)
289 lines (288 loc) • 9.21 kB
JavaScript
import { ClassUtil } from "../utils/ClassUtil";
class MduiButtonElement extends HTMLElement {
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 = 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 = this.getAttributeNode("text-color");
if (colorAttr == null) {
const bodyClassList = 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) {
this.setAttribute("text-color", color);
ClassUtil.changeTextColor(color, this);
}
/**
* 设置color属性即可更改按钮的颜色
* 示例：将按钮的颜色设置成蓝色
* <mdui-btn color="blue">这是一个蓝色的按钮</mdui-btn>
*/
get color() {
const colorAttr = this.getAttributeNode("color");
if (colorAttr == null) {
const bodyClassList = 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) {
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 = this.getAttributeNode("block");
if (blockAttr == null) {
return false;
}
return blockAttr.value != "false";
}
set block(isBlock) {
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 = this.getAttributeNode("raised");
if (outlinedAttr == null) {
return false;
}
else {
return outlinedAttr.value != "false";
}
}
set raised(isRaised) {
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 = this.getAttributeNode("icon");
if (iconAttr == null) {
return false;
}
else {
return iconAttr.value != "false";
}
}
set icon(isIcon) {
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 = this.getAttributeNode("dense");
if (denseAttr == null) {
return false;
}
else {
return denseAttr.value != "false";
}
}
set dense(isDense) {
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 = this.getAttributeNode("disabled");
if (disabledAttr == null) {
return false;
}
else {
return disabledAttr.value != "false";
}
}
set disabled(isDisabled) {
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 = this.getAttributeNode("active");
if (activeAttr == null) {
return false;
}
else {
return activeAttr.value != "false";
}
}
set active(isActive) {
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 };