9 lines
4.9 KiB
JavaScript
9 lines
4.9 KiB
JavaScript
/*!
|
|
DMXzone Notifications
|
|
Version: 2.0.0
|
|
(c) 2024 Wappler.io
|
|
@build 2024-04-15 17:48:46
|
|
*/
|
|
dmx.Component("notifications",{attributes:{position:{type:String,default:"top",enum:["top","bottom"]},align:{type:String,default:"end",enum:["left","right","full","start","center","end","stretch"]},offsetX:{type:Number,default:15},offsetY:{type:Number,default:15},spacing:{type:Number,default:10},opacity:{type:Number,default:.8},timeout:{type:Number,default:5e3},extendedTimeout:{type:Number,default:1e3},showAnimation:{type:String,default:"fadeIn"},showDuration:{type:Number,default:400},hideAnimation:{type:String,default:"fadeOut"},hideDuration:{type:Number,default:400},closeAnimation:{type:String,default:"fadeOut"},closeDuration:{type:Number,default:400},closeIcon:{type:String,default:"fa fa-times"},closable:{type:Boolean,default:!1},infoBackground:{type:String,default:"#2f96b4"},infoColor:{type:String,default:"#fff"},infoIcon:{type:String,default:"fa fa-info"},successIcon:{type:String,default:"fa fa-check"},successBackground:{type:String,default:"#51a351"},successColor:{type:String,default:"#fff"},warningIcon:{type:String,default:"fa fa-exclamation"},warningBackground:{type:String,default:"#f89406"},warningColor:{type:String,default:"#fff"},dangerIcon:{type:String,default:"fa fa-warning"},dangerBackground:{type:String,default:"#bd362f"},dangerColor:{type:String,default:"#fff"}},methods:{clear(){this._clear()},msg(t,e){this._show("msg",t,e)},info(t,e){this._show("info",t,Object.assign({icon:this.props.infoIcon,color:this.props.infoColor,background:this.props.infoBackground},e))},success(t,e){this._show("success",t,Object.assign({icon:this.props.successIcon,color:this.props.successColor,background:this.props.successBackground},e))},warning(t,e){this._show("warning",t,Object.assign({icon:this.props.warningIcon,color:this.props.warningColor,background:this.props.warningBackground},e))},danger:function(t,e){this._show("danger",t,Object.assign({icon:this.props.dangerIcon,color:this.props.dangerColor,background:this.props.dangerBackground},e))}},events:{click:CustomEvent},init(){this._alignMap={left:"flex-start",right:"flex-end",full:"stretch",start:"flex-start",center:"center",end:"flex-end",stretch:"stretch"}},render(t){t.classList.add("dmx-notifications"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),this._clear(),this._update()},performUpdate(t){this._update()},_clear:function(){this.$node.textContent=""},_update(){this.$node.style.setProperty("--dmx-notify-offset-x",this.props.offsetX+"px"),this.$node.style.setProperty("--dmx-notify-offset-y",this.props.offsetY+"px"),this.$node.style.setProperty("--dmx-notify-align",this._alignMap[this.props.align]),this.$node.style.setProperty("--dmx-notify-gap",this.props.spacing+"px"),this.$node.style.setProperty("--dmx-notify-direction","top"==this.props.position?"column":"column-reverse")},_template(t){let e=`<div class="dmx-notify" role="alert" aria-live="assertive" aria-atomic="true" style="--dmx-notify-background: ${t.background}; --dmx-notify-color: ${t.color}; --dmx-notify-opacity: ${t.opacity}">`;return t.icon&&(e+=`<div class="dmx-notify-icon"><i class="${t.icon}"></i></div>`),e+='<div class="dmx-notify-body">',t.title&&(e+=`<div class="dmx-notify-title">${t.title}</div>`),t.message&&(e+=`<div class="dmx-notify-message">${t.message}</div>`),e+="</div>",t.closable&&(e+=`<button type="button" aria-label="Close" class="dmx-notify-close"><i class="${t.closeIcon}"></i></button>`),e+="</div>",e},_create:function(t){var e=this._template(t),i=document.createElement("div");return i.innerHTML=e,i.firstChild},_show:function(t,e,i){i=Object.assign({type:t,message:e,background:"#eee",color:"#333"},this.props,i);var o=this._create(i);o.style.setProperty("animation-name",i.showAnimation),o.style.setProperty("animation-duration",i.showDuration+"ms"),o.addEventListener("click",this.dispatchEvent.bind(this,"click",{detail:i})),i.closable?o.querySelector(".dmx-notify-close").addEventListener("click",this._close.bind(this,o,i)):i.timeout||(i.timeout=5e3),i.timeout&&(o.addEventListener("mouseenter",this._pause.bind(this,o,i)),o.addEventListener("mouseleave",this._continue.bind(this,o,i)),o.timeoutId=setTimeout(this._hide.bind(this,o,i),i.showDuration+i.timeout)),this.$node.insertBefore(o,this.$node.firstChild)},_hide:function(t,e){e.hideAnimation&&e.hideDuration?(t.style.setProperty("animation-name",e.hideAnimation),t.style.setProperty("animation-duration",e.hideDuration+"ms"),t.addEventListener("animationend",(()=>t.remove()),{once:!0})):t.remove()},_close:function(t,e){e.closeAnimation&&e.closeDuration?(t.style.setProperty("animation-name",e.closeAnimation),t.style.setProperty("animation-duration",e.closeDuration+"ms"),t.addEventListener("animationend",(()=>t.remove()),{once:!0})):t.remove()},_pause:function(t,e){clearTimeout(t.timeoutId)},_continue:function(t,e){(e.timeout||e.extendedTimeout)&&(t.timeoutId=setTimeout(this._hide.bind(this,t,e),e.extendedTimeout))}});
|
|
//# sourceMappingURL=dmxNotifications.js.map
|