fontend-app/lib/js/app.alert.js

/**
 * 弹框工厂方法
 * 
 * @param {Document} btn 触发对象
 * @param {Function} fun 回调方法
 *  @param {Function} showFun 打开前的回调方法
 */
function getAlertFactory(btn, fun, showFun) {
	/**
	 * 弹框工具方法
	 * 
	 * @param {Document} btn 按钮
	 * @param {Function} fun 回调方法
	 *  @param {Function} showFun 打开前的回调方法
	 */
	function AlertUtil(btn, fun, showFun) {
		this.btn = btn; // 按钮对象
		var main = this.initPass(btn);
		this.show = main.show; // 显示方法
		this.hide = main.hide; // 隐藏方法
		this.affirm = fun; // 回调方法
		this.showCheck = showFun || true; // 显示前回调
	}
	/**
	 * 弹框语言
	 */
	AlertUtil.prototype.langues = {
		zh_CN: {
			title: "密码确认框",
			inputTitle: "密码：",
			btn: "确 认",
			inputalert: "请输入密码"
		},
		zh_HK: {
			title: "密碼確認框",
			inputTitle: "密碼：",
			btn: "確 認",
			inputalert: "請輸入密碼"
		},
		en_US: {
			title: "Password confirmation box",
			inputTitle: "Password: ",
			btn: "Confirm ",
			inputalert: "Please enter your password"
		}
	};

	/**
	 * 初始化密码弹框
	 * @param {Document} btn按钮
	 */
	AlertUtil.prototype.initPass = function(btn) {
		var alertUtil = this;
		var confirm = document.createElement('div');
	confirm.setAttribute("class", "mui-popover mui-popover-action confirm");
		confirm.setAttribute("style", "width: auto !important;height: 3.6rem;border-radius: 4px;position: fixed;top: 30%;left: 20px;right: 20px;background: #fff;border-radius: .2rem;z-index: 999999;border: 1px solid #F5F5F5;");
		confirm.innerHTML = "<form class=\"input-group\" style=\"position: relative;text-align: center;overflow: hidden;\">\n\t\t\t\t<div class=\"title-top js-title-top\" style=\"height: .8rem;border-bottom: 1px solid #F5F5F5;line-height: .8rem;color: #0F1826;\">\n\t\t\t\t</div>\n\t\t\t\t<div class=\"mui-input-row\" style=\"padding: 0 .3rem; margin-top: .4rem;\">\n\t\t\t\t\t<label class=\"confirm-password js-confirm-password\" style=\"font-size: 16px;font-weight: 400;color: #0F1826;text-align: left;padding: 0;margin-bottom: .17rem;\"></label>\n\t\t\t\t\t<input type=\"password\" class=\"mui-input-password js-pass\" style=\"height: 45px;width: 100%;font-size: 16px;height: .6rem;border: none;background-color: #f5f5f5;color: #000;padding-left: .2rem;\" >\n\t\t\t\t\t<span class=\"mui-icon mui-icon-eye\" style=\"top: .6rem;right: .29rem;\"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"mui-button-row\">\n\t\t\t\t\t<button type=\"button\" class=\"mui-btn mui-btn-primary js-btn\" style=\"font-size: 18px;width: 89%;height: .6rem;background: linear-gradient(90deg, #ff9d00 0%, #dd524d 100%);border-radius: 4px;border: 1px solid #dd524d;margin-top: .3rem;\"></button>\n\t\t\t\t</div>\n\t\t\t</form>";
		document.body.appendChild(confirm);
		var titleDom = confirm.getElementsByClassName('js-title-top')[0];
		var inputTitleDom = confirm.getElementsByClassName('js-confirm-password')[0];
		var passInput = confirm.getElementsByClassName('js-pass')[0];
		var saveBtn = confirm.getElementsByClassName('js-btn')[0];
		langueFun();
		var muiConfirm = mui(confirm);
		var isShowEvent = true;
		btn.addEventListener('tap', function() {
			if(isShowEvent) {
				isShowEvent = false;
				setTimeout(function() {
					isShowEvent = true;
				}, 1000)
				if(typeof alertUtil.showCheck == 'function') {
					var isShow = alertUtil.showCheck();
					if(isShow != null && isShow == false) {
						return false;
					}
				}
				langueFun();
				muiConfirm.popover('show');

			}
		});
		var isEvent = true;
		saveBtn.addEventListener('tap', function() {
			if(typeof alertUtil.affirm == 'function') {
				if(isEvent) {
					isEvent = false;
					var isHide = alertUtil.affirm(passInput.value);
					if(!(isHide === false)) {
						passInput.value = "";
						alertUtil.hide();
					}
					setTimeout(function() {
						isEvent = true;
					}, 1000)
				}
			} else {
				throw new Error("你没有定义提交方法");
			}
		});

		/**
		 * 国际化渲染
		 */
		function langueFun() {
			var key = app.getLanguageLocalStorage();
			titleDom.innerText = alertUtil.langues[key].title;
			inputTitleDom.innerText = alertUtil.langues[key].inputTitle;
			saveBtn.innerText = alertUtil.langues[key].btn;
			passInput.setAttribute("placeholder", alertUtil.langues[key].inputalert);
		}
		return {
			show: function() {
				muiConfirm.popover('show');
			},
			hide: function() {
				muiConfirm.popover('hide');
			}
		};
	}
	return new AlertUtil(btn, fun, showFun);
}