mdui-ext
Version:
a extension for mdui !(not completed)
635 lines (627 loc) • 22.6 kB
JavaScript
/* mdui-ext 1.0.0-snapshot.7 based on mdui ^1.0.0
* Copyright 2020 LemonNeko
* Licensed under MIT
*/
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
}((function () { 'use strict';
class ClassUtil {
static changeTextColor(textColor, element) {
ClassUtil.removeClassNameStartsWith("mdui-text-color", element);
element.classList.add("mdui-text-color-" + textColor);
}
static changeColor(color, element) {
ClassUtil.removeClassNameStartsWith("mdui-color-", element);
element.classList.add("mdui-color-" + color);
}
static removeClassNameStartsWith(startsWith, element) {
const classList = element.classList;
classList.forEach((clazz) => {
if (clazz.startsWith(startsWith)) {
classList.remove(clazz);
}
});
}
static containsClassNameStartWith(startWith, element) {
const classList = element.classList;
let ret = false;
classList.forEach((clazz) => {
if (clazz.startsWith(startWith)) {
ret = true;
return;
}
});
return ret;
}
}
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");
}
}
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");
}
}
}
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");
}
}
class MduiDividerElement extends HTMLElement {
constructor() {
super();
this.classList.add("mdui-divider");
this.style.display = "block";
}
}
window.customElements.define("mdui-btn", MduiButtonElement);
window.customElements.define("mdui-btn-group", MduiButtonGroupElement);
window.customElements.define("mdui-icon", MduiIconElement);
window.customElements.define("mdui-fab", MduiFloatActionButtonElement);
window.customElements.define("mdui-fab-wrapper", MduiFabWrapperElement);
window.customElements.define("mdui-fab-dial", MduiFabDialElement);
window.customElements.define("mdui-divider", MduiDividerElement);
})));
//# sourceMappingURL=mdui-ext.js.map