94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
/**
|
|
* aui-popup.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 auiPopup = function() {
|
|
this._init();
|
|
};
|
|
var CLASS_MASK = "aui-mask",
|
|
CLASS_MASK_IN = 'aui-mask-in',
|
|
CLASS_MASK_OUT = 'aui-mask-out',
|
|
CLASS_POPUP = 'aui-popup',
|
|
CLASS_POPUP_IN = 'aui-popup-in',
|
|
CLASS_POPUP_OUT = 'aui-popup-out',
|
|
CLASS_POPUP_FOR = 'aui-popup-for';
|
|
var __MASK = '.'+CLASS_MASK,
|
|
__MASK_IN = '.'+CLASS_MASK_IN,
|
|
__MASK_OUT = '.'+CLASS_MASK_OUT,
|
|
__POPUP = '.'+CLASS_POPUP,
|
|
__POPUP_IN = '.'+CLASS_POPUP_IN,
|
|
__POPUP_OUT = '.'+CLASS_POPUP_OUT;
|
|
var popupStatus = false;
|
|
auiPopup.prototype = {
|
|
_init: function() {
|
|
var self = this;
|
|
var _btn = document.querySelectorAll("["+CLASS_POPUP_FOR+"]");
|
|
if(_btn){
|
|
for(var i=0;i<_btn.length;i++){
|
|
_btn[i].setAttribute("tapmode", "");
|
|
_btn[i].onclick = function(e){
|
|
var popupId = this.getAttribute(CLASS_POPUP_FOR);
|
|
var popupDom = document.getElementById(popupId);
|
|
if(popupDom){
|
|
if(popupDom.className.indexOf(CLASS_POPUP_IN) > -1 || document.querySelector(__POPUP_IN)){
|
|
self.hide(popupDom);
|
|
}else{
|
|
self.show(popupDom);
|
|
}
|
|
}else{
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
show: function(el){
|
|
var self = this;
|
|
if(el.className.indexOf(CLASS_POPUP_IN) > -1 || document.querySelector(__POPUP_IN)){
|
|
self.hide(el);
|
|
return;
|
|
}
|
|
if(popupStatus) return;
|
|
if(!document.querySelector(__MASK)){
|
|
var maskHtml = '<div class="aui-mask"></div>';
|
|
document.body.insertAdjacentHTML('beforeend', maskHtml);
|
|
}
|
|
el.style.display = "block";
|
|
setTimeout(function(){
|
|
document.querySelector(__MASK).classList.add(CLASS_MASK_IN);
|
|
el.classList.add(CLASS_POPUP_IN);
|
|
popupStatus = true;
|
|
}, 10)
|
|
document.querySelector(__MASK).addEventListener("touchstart", function(event){
|
|
event.preventDefault();
|
|
self.hide(el);
|
|
})
|
|
el.addEventListener("touchmove", function(event){
|
|
event.preventDefault();
|
|
},false)
|
|
},
|
|
hide: function(el){
|
|
if(!popupStatus) return;
|
|
document.querySelector(__MASK).classList.remove(CLASS_MASK_IN);
|
|
document.querySelector(__MASK).classList.add(CLASS_MASK_OUT);
|
|
if(!document.querySelector(__POPUP_IN))return;
|
|
document.querySelector(__POPUP_IN).classList.add(CLASS_POPUP_OUT);
|
|
document.querySelector(__POPUP_IN).classList.remove(CLASS_POPUP_IN);
|
|
setTimeout(function(){
|
|
if(!document.querySelector(__POPUP_OUT))return;
|
|
document.querySelector(__POPUP_OUT).style.display = "none";
|
|
document.querySelector(__POPUP_OUT).classList.remove(CLASS_POPUP_OUT);
|
|
if(document.querySelector(__MASK)){
|
|
document.querySelector(__MASK).parentNode.removeChild(document.querySelector(__MASK));
|
|
}
|
|
popupStatus = false;
|
|
}, 300)
|
|
}
|
|
};
|
|
window.auiPopup = auiPopup;
|
|
})(window); |