|
- /*!
- DMXzone Notifications
- Version: 1.0.0
- (c) 2018 DMXzone.com
- @build 2018-08-22 10:25:59
- */
- dmx.Component("notifications",{attributes:{position:{type:String,default:"top"},align:{type:String,default:"right"},"offset-x":{type:Number,default:15},"offset-y":{type:Number,default:15},spacing:{type:Number,default:10},opacity:{type:Number,default:.8},timeout:{type:Number,default:5e3},"extended-timeout":{type:Number,default:1e3},"newest-on-top":{type:Boolean,default:!1},"show-animation":{type:String,default:"fadeIn"},"show-duration":{type:Number,default:1e3},"hide-animation":{type:String,default:"fadeOut"},"hide-duration":{type:Number,default:1e3},"close-animation":{type:String,default:null},"close-duration":{type:Number,default:0},"close-icon":{type:String,default:"fa fa-times"},closable:{type:Boolean,default:!1},"info-background":{type:String,default:"#2f96b4"},"info-color":{type:String,default:"#fff"},"info-icon":{type:String,default:"fa fa-info"},"success-icon":{type:String,default:"fa fa-check"},"success-background":{type:String,default:"#51a351"},"success-color":{type:String,default:"#fff"},"warning-icon":{type:String,default:"fa fa-exclamation"},"warning-background":{type:String,default:"#f89406"},"warning-color":{type:String,default:"#fff"},"danger-icon":{type:String,default:"fa fa-warning"},"danger-background":{type:String,default:"#bd362f"},"danger-color":{type:String,default:"#fff"}},methods:{clear:function(){this.clear()},msg:function(t,e){this.show("msg",t,e)},info:function(t,e){this.show("info",t,Object.assign({icon:this.props["info-icon"],color:this.props["info-color"],background:this.props["info-background"]},e))},success:function(t,e){this.show("success",t,Object.assign({icon:this.props["success-icon"],color:this.props["success-color"],background:this.props["success-background"]},e))},warning:function(t,e){this.show("warning",t,Object.assign({icon:this.props["warning-icon"],color:this.props["warning-color"],background:this.props["warning-background"]},e))},danger:function(t,e){this.show("danger",t,Object.assign({icon:this.props["danger-icon"],color:this.props["danger-color"],background:this.props["danger-background"]},e))}},events:{click:CustomEvent},positionClasses:["top","bottom","left","right","full"],render:function(t){(this.$node=t).textContent="",t.classList.add("dmx-notifications"),this.update({})},update:function(t){this.props.position==t.position&&this.props["offset-x"]==t["offset-x"]&&this.props["offset-y"]==t["offset-y"]||(this.$node.style.removeProperty("top"),this.$node.style.removeProperty("bottom"),this.$node.style.setProperty(this.props.position,this.props["offset-y"]+"px"),this.$node.style.setProperty("left",this.props["offset-x"]+"px"),this.$node.style.setProperty("right",this.props["offset-x"]+"px"))},clear:function(){this.$node.textContent=""},create:function(o){var t='<div class="dmx-notify">';t+='<div style="background: {{background}}; color: {{color}}; opacity: {{opacity}}">',o.closable&&(t+='<button type="button" aria-hidden="true" class="dmx-close"><i class="{{close-icon}}"></i></button>'),o.icon&&(t+='<div class="dmx-icon"><i class="{{icon}}"></i></div>'),o.title&&(t+='<div class="dmx-title">{{title}}</div>'),o.message&&(t+='<div class="dmx-message">{{message}}</div>'),t=(t+="</div></div>").replace(/\{\{(.*?)\}\}/g,function(t,e){return o[e]});var e=document.createElement("div");return e.innerHTML=t,e.firstChild},show:function(t,e,o){o=Object.assign({type:t,message:e,background:"#f1f1f1",color:"#333"},this.props,o);var i=this.create(o);i.style.setProperty("top"==o.position?"margin-bottom":"margin-top",o.spacing+"px"),i.style.setProperty("float",o.align),i.style.setProperty("clear",o.align),i.style.setProperty("animation-name",o["show-animation"]),i.style.setProperty("animation-duration",o["show-duration"]+"ms"),i.addEventListener("mouseenter",this.pause.bind(this,i,o)),i.addEventListener("mouseleave",this.continue.bind(this,i,o)),i.addEventListener("click",this.dispatchEvent.bind(this,"click",{detail:o})),o.closable&&i.querySelector(".dmx-close").addEventListener("click",this.close.bind(this,i,o)),o.timeout&&(i.timeoutId=setTimeout(this.hide.bind(this,i,o),o["show-duration"]+o.timeout)),o["newest-on-top"]?this.$node.insertBefore(i,this.$node.firstChild):this.$node.appendChild(i)},hide:function(t,e){e["hide-animation"]&&e["hide-duration"]?(t.style.setProperty("animation-name",e["hide-animation"]),t.style.setProperty("animation-duration",e["hide-duration"]+"ms"),setTimeout(function(){t.remove()},e["hide-duration"])):t.remove()},close:function(t,e){e["close-animation"]&&e["close-duration"]?(t.style.setProperty("animation-name",e["close-animation"]),t.style.setProperty("animation-duration",e["close-duration"]+"ms"),setTimeout(function(){t.remove()},e["close-duration"])):t.remove()},pause:function(t,e){clearTimeout(t.timeoutId)},continue:function(t,e){(e.timeout||e["extended-timeout"])&&(t.timeoutId=setTimeout(this.hide.bind(this,t,e),e["extended-timeout"]))}});
- //# sourceMappingURL=../maps/dmxNotifications.js.map
|
