/** * aui-dialog.js * @author 流浪男 * @todo more things to abstract, e.g. Loading css etc. * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ (function( window, undefined ) { "use strict"; var auiDialog = function() { }; var isShow = false; auiDialog.prototype = { params: { title:'', msg:'', buttons: ['取消','确定'], input:false }, create: function(params,callback) { var self = this; var dialogHtml = ''; var buttonsHtml = ''; var headerHtml = params.title ? '
' + params.title + '
' : '
' + self.params.title + '
'; if(params.input){ params.text = params.text ? params.text: ''; var msgHtml = '
'; }else{ var msgHtml = params.msg ? '
' + params.msg + '
' : '
' + self.params.msg + '
'; } var buttons = params.buttons ? params.buttons : self.params.buttons; if (buttons && buttons.length > 0) { for (var i = 0; i < buttons.length; i++) { buttonsHtml += '
'+buttons[i]+'
'; } } var footerHtml = ''; dialogHtml = '
'+headerHtml+msgHtml+footerHtml+'
'; document.body.insertAdjacentHTML('beforeend', dialogHtml); // listen buttons click var dialogButtons = document.querySelectorAll(".aui-dialog-btn"); if(dialogButtons && dialogButtons.length > 0){ for(var ii = 0; ii < dialogButtons.length; ii++){ dialogButtons[ii].onclick = function(){ if(callback){ if(params.input){ callback({ buttonIndex: parseInt(this.getAttribute("button-index"))+1, text: document.querySelector("input").value }); }else{ callback({ buttonIndex: parseInt(this.getAttribute("button-index"))+1 }); } }; self.close(); return; } } } self.open(); }, open: function(){ if(!document.querySelector(".aui-dialog"))return; var self = this; document.querySelector(".aui-dialog").style.marginTop = "-"+Math.round(document.querySelector(".aui-dialog").offsetHeight/2)+"px"; if(!document.querySelector(".aui-mask")){ var maskHtml = '
'; document.body.insertAdjacentHTML('beforeend', maskHtml); } // document.querySelector(".aui-dialog").style.display = "block"; setTimeout(function(){ document.querySelector(".aui-dialog").classList.add("aui-dialog-in"); document.querySelector(".aui-mask").classList.add("aui-mask-in"); document.querySelector(".aui-dialog").classList.add("aui-dialog-in"); }, 10) document.querySelector(".aui-mask").addEventListener("touchmove", function(e){ e.preventDefault(); }) document.querySelector(".aui-dialog").addEventListener("touchmove", function(e){ e.preventDefault(); }) return; }, close: function(){ var self = this; document.querySelector(".aui-mask").classList.remove("aui-mask-in"); document.querySelector(".aui-dialog").classList.remove("aui-dialog-in"); document.querySelector(".aui-dialog").classList.add("aui-dialog-out"); if (document.querySelector(".aui-dialog:not(.aui-dialog-out)")) { setTimeout(function(){ if(document.querySelector(".aui-dialog"))document.querySelector(".aui-dialog").parentNode.removeChild(document.querySelector(".aui-dialog")); self.open(); return true; },200) }else{ document.querySelector(".aui-mask").classList.add("aui-mask-out"); document.querySelector(".aui-dialog").addEventListener("webkitTransitionEnd", function(){ self.remove(); }) document.querySelector(".aui-dialog").addEventListener("transitionend", function(){ self.remove(); }) } }, remove: function(){ if(document.querySelector(".aui-dialog"))document.querySelector(".aui-dialog").parentNode.removeChild(document.querySelector(".aui-dialog")); if(document.querySelector(".aui-mask")){ document.querySelector(".aui-mask").classList.remove("aui-mask-out"); } return true; }, alert: function(params,callback){ var self = this; return self.create(params,callback); }, prompt:function(params,callback){ var self = this; params.input = true; return self.create(params,callback); } }; window.auiDialog = auiDialog; })(window);