ax5ui-toast
Version:
A toast plugin that works with Bootstrap & jQuery
3 lines (2 loc) • 4.54 kB
JavaScript
"use strict";!function(){var t,n=ax5.ui,i=ax5.util;n.addClass({className:"toast"},function(){var a=function(){var a,e=this,s=0,o=null;this.instanceId=ax5.getGuid(),this.config={clickEventName:"click",theme:"default",width:300,icon:"",closeIcon:"",msg:"",lang:{ok:"ok",cancel:"cancel"},displayTime:3e3,animateTime:250,containerPosition:"bottom-left"},this.toastContainer=null,this.queue=[],a=this.config;var l=function(t,n){return t&&t.onStateChanged?t.onStateChanged.call(n,n):this.onStateChanged&&this.onStateChanged.call(n,n),t=null,n=null,!0},c=function(n,i){var a={toastId:n,theme:i.theme,icon:i.icon,msg:(i.msg||"").replace(/\n/g,"<br/>"),btns:i.btns,closeIcon:i.closeIcon};try{return t.tmpl.get.call(this,"toastDisplay",a)}finally{n=null,a=null}},u=function(t,n){o&&clearTimeout(o);var u,h={width:t.width};return t.id="ax5-toast-"+e.containerId+"-"+ ++s,jQuery("#"+t.id).get(0)?this:("bottom"==i.left(a.containerPosition,"-")?this.toastContainer.append(c(t.id,t)):this.toastContainer.prepend(c(t.id,t)),u=jQuery("#"+t.id),u.css({width:h.width}),t.toastBox=u,this.queue.push(t),l.call(this,t,{self:this,state:"open",toastId:t.id}),"push"===t.toastType?(setTimeout(function(){this.close(t,n)}.bind(this),a.displayTime),u.find("[data-ax-toast-btn]").on(a.clickEventName,function(i){d.call(this,i||window.event,t,u,n)}.bind(this))):"confirm"===t.toastType&&u.find("[data-ax-toast-btn]").on(a.clickEventName,function(i){d.call(this,i||window.event,t,u,n)}.bind(this)),void(h=null))},d=function(t,n,a,e,s,o){if(s=i.findParentNode(t.target,function(t){if(t.getAttribute("data-ax-toast-btn"))return!0})){o=s.getAttribute("data-ax-toast-btn");var l={key:o,value:n.btns?n.btns[o]:o,toastId:n.id,btn_target:s};n.btns&&n.btns[o].onClick?n.btns[o].onClick.call(l,o):"push"===n.toastType?(e&&e.call(l,o),this.close(n,e)):"confirm"===n.toastType&&(e&&e.call(l,o),this.close(n,e))}t=null,n=null,a=null,e=null,s=null,o=null};this.init=function(){this.onStateChanged=a.onStateChanged,e.containerId=ax5.getGuid();var t=[];a.zIndex&&t.push("z-index:"+a.zIndex),jQuery(document.body).append('<div class="ax5-ui-toast-container '+a.containerPosition+'" data-toast-container="'+e.containerId+'" style="'+t.join(";")+'"></div>'),this.toastContainer=jQuery('[data-toast-container="'+e.containerId+'"]')},this.push=function(t,n){return e.containerId||this.init(),i.isString(t)&&(t={title:a.title,msg:t}),t.toastType="push",e.dialogConfig={},jQuery.extend(!0,e.dialogConfig,a,t),t=e.dialogConfig,u.call(this,t,n),t=null,n=null,this},this.confirm=function(t,n){return e.containerId||this.init(),i.isString(t)&&(t={title:a.title,msg:t}),t.toastType="confirm",e.dialogConfig={},jQuery.extend(!0,e.dialogConfig,a,t),t=e.dialogConfig,"undefined"==typeof t.btns&&(t.btns={ok:{label:a.lang.ok,theme:t.theme}}),u.call(this,t,n),t=null,n=null,this},this.close=function(t,n){"undefined"==typeof t&&(t=i.last(this.queue));var e=t.toastBox;return e.addClass("push"==t.toastType?"removed":"destroy"),this.queue=i.filter(this.queue,function(){return t.id!=this.id}),setTimeout(function(){var i={toastId:t.id};e.remove(),n&&n.call(i),i={self:this,state:"close",toastId:t.id},l.call(this,t,i),0===this.queue.length&&(o&&clearTimeout(o),o=setTimeout(function(){0===this.queue.length&&(s=0)}.bind(this),3e3)),i=null,t=null,n=null,e=null}.bind(this),a.animateTime),this},this.main=function(){n.toast_instance=n.toast_instance||[],n.toast_instance.push(this),arguments&&i.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};return a}()),t=ax5.ui.toast}(),function(){var t=ax5.ui.toast,n=function(t){return'\n <div id="{{toastId}}" data-ax5-ui="toast" class="ax5-ui-toast {{theme}}">\n {{#icon}}\n <div class="ax-toast-icon">{{{.}}}</div>\n {{/icon}}\n <div class="ax-toast-body">{{{msg}}}</div>\n {{#btns}}\n <div class="ax-toast-buttons">\n <div class="ax-button-wrap">\n {{#@each}}\n <button type="button" data-ax-toast-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{{@value.label}}}</button>\n {{/@each}}\n </div>\n </div>\n {{/btns}}\n {{^btns}}\n <a class="ax-toast-close" data-ax-toast-btn="ok">{{{closeIcon}}}</a>\n {{/btns}}\n <div style="clear:both;"></div>\n </div>'};t.tmpl={toastDisplay:n,get:function(n,i,a){return ax5.mustache.render(t.tmpl[n].call(this,a),i)}}}();
//# sourceMappingURL=ax5toast.min.js.map