mdui-ext
Version:
a extension for mdui !(not completed)
3 lines (2 loc) • 8.03 kB
JavaScript
!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";class t{static changeTextColor(i,s){t.removeClassNameStartsWith("mdui-text-color",s),s.classList.add("mdui-text-color-"+i)}static changeColor(i,s){t.removeClassNameStartsWith("mdui-color-",s),s.classList.add("mdui-color-"+i)}static removeClassNameStartsWith(t,i){const s=i.classList;s.forEach(i=>{i.startsWith(t)&&s.remove(i)})}static containsClassNameStartWith(t,i){const s=i.classList;let e=!1;return s.forEach(i=>{i.startsWith(t)&&(e=!0)}),e}}class i extends HTMLElement{constructor(){super(),this.classList.add("mdui-btn"),this.classList.add("mdui-ripple"),this.addEventListener("click",()=>{const t=this.parentElement;if(null==t)return;if("MDUI-BTN-GROUP"!=t.tagName||null==t.classList||!t.classList.contains("mdui-btn-group"))return;const i=t.getElementsByTagName("mdui-btn");if(null!=i){for(let t=0;t<i.length;t++){const s=i[t];s.classList.remove("mdui-btn-active"),s.removeAttribute("active")}this.active=!0,this.classList.remove("mdui-color-white")}});setInterval(()=>{this._textColor!=this.textColor&&(this._textColor=this.textColor,this.textColor&&t.changeTextColor(this.textColor,this)),this._color!=this.color&&(this._color=this.color,this.color&&(t.changeColor(this.color,this),"white"==this.color&&this.classList.add("mdui-ripple-black"))),this._block!=this.block&&(this._block=this.block,this.block&&this.classList.add("mdui-btn-block")),this._raised!=this.raised&&(this._raised=this.raised,this.raised&&this.classList.add("mdui-btn-raised")),this._icon!=this.icon&&(this._icon=this.icon,this.icon&&this.classList.add("mdui-btn-icon")),this._dense!=this.dense&&(this._dense=this.dense,this.dense&&this.classList.add("mdui-btn-dense")),this._active!=this.active&&(this._active=this.active,this.active&&(this.classList.add("mdui-btn-active"),this.classList.forEach(t=>{t.startsWith("mdui-color-")&&this.classList.remove(t)})))},50)}get textColor(){const t=this.getAttributeNode("text-color");if(null==t){const t=document.body.classList;if(null==t)return"black";for(let i in t)if(i.startsWith("mdui-theme-accent-"))return"white";return"white"!=this.color?"white":"black"}return t.value}set textColor(i){this.setAttribute("text-color",i),t.changeTextColor(i,this)}get color(){const t=this.getAttributeNode("color");if(null==t){const t=document.body.classList;if(null==t)return"white";for(let i in t)if(i.startsWith("mdui-theme-accent-"))return"theme-accent";return"white"}return t.value}set color(i){this.setAttribute("color",i),t.changeColor(i,this),"white"==i?this.classList.add("mdui-ripple-black"):this.classList.remove("mdui-ripple-black")}get block(){const t=this.getAttributeNode("block");return null!=t&&"false"!=t.value}set block(t){this.setAttribute("block",String(t)),t?this.classList.add("mdui-btn-block"):this.classList.remove("mdui-btn-block")}get raised(){const t=this.getAttributeNode("raised");return null!=t&&"false"!=t.value}set raised(t){this.setAttribute("raised",String(t)),t?this.classList.add("mdui-btn-raised"):this.classList.remove("mdui-btn-raised")}get icon(){const t=this.getAttributeNode("icon");return null!=t&&"false"!=t.value}set icon(t){this.setAttribute("icon",String(t)),t?this.classList.add("mdui-btn-icon"):this.classList.remove("mdui-btn-icon")}get dense(){const t=this.getAttributeNode("dense");return null!=t&&"false"!=t.value}set dense(t){this.setAttribute("dense",String(t)),t?this.classList.add("mdui-btn-dense"):this.classList.remove("mdui-btn-dense")}get disabled(){const t=this.getAttributeNode("disabled");return null!=t&&"false"!=t.value}set disabled(t){t&&this.setAttribute("disabled","true")}get active(){const t=this.getAttributeNode("active");return null!=t&&"false"!=t.value}set active(t){this.setAttribute("active",String(t)),t?this.classList.add("mdui-btn-active"):this.classList.remove("mdui-btn-active")}}class s extends HTMLElement{constructor(){super(),this.classList.add("mdui-btn-group")}}class e extends HTMLElement{constructor(){super(),this.classList.add("mdui-icon");setInterval(()=>{this._noMaterial!=this.notMaterial&&(this._noMaterial=this.notMaterial,this.notMaterial||this.classList.add("material-icons")),this._color!=this.color&&(this._color=this.color,this.color&&""!=this.color&&t.changeTextColor(this.color,this)),this.isParentButton()&&(this.left&&this.right?console.warn("请勿同时设置left和right属性"):(this._left!=this.left&&(this._left=this.left,this.left&&this.classList.add("mdui-icon-left")),this._right!=this.right&&(this._right=this.right,this.right&&this.classList.add("mdui-icon-right"))))},50)}get color(){const t=this.getAttributeNode("color");return null==t?"":t.value}set color(i){this.setAttribute("color",i),t.changeTextColor(i,this)}get notMaterial(){const t=this.getAttributeNode("not-material");return null!=t&&"false"!=t.value}set notMaterial(t){this.setAttribute("not-material",String(t)),t&&this.classList.remove("material-icons")}get left(){const t=this.getAttributeNode("left");return null!=t&&"false"!=t.value}set left(t){this.isParentButton()&&t&&(this.setAttribute("left","true"),this.classList.add("mdui-icon-left"))}isParentButton(){const t=this.parentElement;return null!=t&&!("MDUI-BTN"!=t.tagName||!t.classList.contains("mdui-btn"))}get right(){const t=this.getAttributeNode("right");return null!=t&&"false"!=t.value}set right(t){this.isParentButton()&&t&&(this.setAttribute("right","true"),this.classList.add("mdui-icon-right"))}}class l extends HTMLElement{constructor(){super(),this.classList.add("mdui-fab"),this.classList.add("mdui-ripple");const i=this.innerText;if(""!=i){const t=document.createElement("i");t.innerText=String(i).toLowerCase(),this.innerText="",t.classList.add("mdui-icon"),t.classList.add("material-icons"),this.appendChild(t)}setInterval(()=>{this.hide!=this._hide&&(this._hide=this.hide,this.hide?this.classList.add("mdui-fab-hide"):this.classList.remove("mdui-fab-hide")),this.fixed!=this._fixed&&(this._fixed=this.fixed,this.fixed?this.classList.add("mdui-fab-fixed"):this.classList.remove("mdui-fab-fixed")),this.color!=this._color&&(this._color=this.color,this.color&&(t.changeColor(this.color,this),"white"==this.color?this.classList.add("mdui-ripple-black"):this.classList.remove("mdui-ripple-black"))),this.mini!=this._mini&&(this._mini=this.mini,this.mini?this.classList.add("mdui-fab-mini"):this.classList.remove("mdui-fab-mini"))},50)}get fixed(){const t=this.getAttributeNode("fixed");return null!=t&&"false"!=t.value}set fixed(t){this._fixed=t,this.setAttribute("fixed",String(t)),t?this.classList.add("mdui-fab-fixed"):this.classList.remove("mdui-fab-fixed")}get color(){const t=this.getAttributeNode("color");return null==t?"white":t.value}set color(i){this._color=i,this.setAttribute("color",i),t.changeColor(i,this),"white"==i?this.classList.add("mdui-ripple-black"):this.classList.remove("mdui-ripple-black")}get hide(){const t=this.getAttributeNode("hide");return null!=t&&"false"!=t.value}set hide(t){this._hide=t,this.setAttribute("hide",String(t)),t?this.classList.add("mdui-fab-hide"):this.classList.remove("mdui-fab-hide")}get mini(){const t=this.getAttributeNode("mini");return null!=t&&"false"!=t.value}set mini(t){this._mini=t,this.setAttribute("mini",String(t)),t?this.classList.add("mdui-fab-mini"):this.classList.remove("mdui-fab-mini")}}class r extends HTMLElement{constructor(){super(),this.classList.add("mdui-fab-wrapper"),this.setAttribute("mdui-fab","{trigger: 'hover'}")}}class o extends HTMLElement{constructor(){super(),this.classList.add("mdui-fab-dial")}}class a extends HTMLElement{constructor(){super(),this.classList.add("mdui-divider"),this.style.display="block"}}window.customElements.define("mdui-btn",i),window.customElements.define("mdui-btn-group",s),window.customElements.define("mdui-icon",e),window.customElements.define("mdui-fab",l),window.customElements.define("mdui-fab-wrapper",r),window.customElements.define("mdui-fab-dial",o),window.customElements.define("mdui-divider",a)}));
//# sourceMappingURL=mdui-ext.min.js.map