mdui-ext
Version:
a extension for mdui !(not completed)
163 lines (162 loc) • 5.15 kB
JavaScript
import { ClassUtil } from "../utils/ClassUtil";
class MduiFloatActionButtonElement extends HTMLElement {
constructor() {
super();
this.classList.add("mdui-fab");
this.classList.add("mdui-ripple");
// 如果标签不是空标签，就会尝试将标签内文字转换成图标
const iconText = this.innerText;
if (iconText != "") {
const icon = document.createElement("i");
icon.innerText = String(iconText).toLowerCase();
this.innerText = "";
icon.classList.add("mdui-icon");
icon.classList.add("material-icons");
this.appendChild(icon);
}
const timerListener = () => {
if (this.hide != this._hide) {
this._hide = this.hide;
if (this.hide) {
this.classList.add("mdui-fab-hide");
}
else {
this.classList.remove("mdui-fab-hide");
}
}
if (this.fixed != this._fixed) {
this._fixed = this.fixed;
if (this.fixed) {
this.classList.add("mdui-fab-fixed");
}
else {
this.classList.remove("mdui-fab-fixed");
}
}
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");
}
else {
this.classList.remove("mdui-ripple-black");
}
}
}
if (this.mini != this._mini) {
this._mini = this.mini;
if (this.mini) {
this.classList.add("mdui-fab-mini");
}
else {
this.classList.remove("mdui-fab-mini");
}
}
};
setInterval(timerListener, 50);
}
/**
* 在浮动操作按钮上设置fixed属性可以使浮动操作按钮固定在容器右下方
* 示例：
* <mdui-fab fixed>add</mdui-fab>
*/
get fixed() {
const fixedAttr = this.getAttributeNode("fixed");
if (fixedAttr == null) {
return false;
}
return fixedAttr.value != "false";
}
set fixed(isFixed) {
this._fixed = isFixed;
this.setAttribute("fixed", String(isFixed));
if (isFixed) {
this.classList.add("mdui-fab-fixed");
}
else {
this.classList.remove("mdui-fab-fixed");
}
}
/**
* 在浮动操作按钮上设置color属性可更改按钮颜色，默认白色
* 示例：靛青色浮动操作按钮
* <mdui-fab color="indigo">add</mdui-fab>
*/
get color() {
const colorAttr = this.getAttributeNode("color");
if (colorAttr == null) {
return "white";
}
return colorAttr.value;
}
set color(color) {
this._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");
}
}
/**
* 在浮动操作按钮上设置hide属性可以使按钮以动画的形式隐藏
* 示例：哈？这个没法演示诶
*/
get hide() {
const hideAttr = this.getAttributeNode("hide");
if (hideAttr == null) {
return false;
}
return hideAttr.value != "false";
}
set hide(isHide) {
this._hide = isHide;
this.setAttribute("hide", String(isHide));
if (isHide) {
this.classList.add("mdui-fab-hide");
}
else {
this.classList.remove("mdui-fab-hide");
}
}
/**
* 在浮动操作按钮上设置mini属性可以让按钮变成迷你型浮动操作按钮
* 示例：
* <mdui-fab mini>add</mdui-fab>
*/
get mini() {
const miniAttr = this.getAttributeNode("mini");
if (miniAttr == null) {
return false;
}
return miniAttr.value != "false";
}
set mini(isMini) {
this._mini = isMini;
this.setAttribute("mini", String(isMini));
if (isMini) {
this.classList.add("mdui-fab-mini");
}
else {
this.classList.remove("mdui-fab-mini");
}
}
}
class MduiFabWrapperElement extends HTMLElement {
constructor() {
super();
this.classList.add("mdui-fab-wrapper");
this.setAttribute("mdui-fab", "{trigger: 'hover'}");
}
}
class MduiFabDialElement extends HTMLElement {
constructor() {
super();
this.classList.add("mdui-fab-dial");
}
}
export { MduiFloatActionButtonElement, MduiFabWrapperElement, MduiFabDialElement };