dialogx
Version:
no reliance on third-party apple iphonx like popups
852 lines (851 loc) • 45 kB
JavaScript
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* @package Declaration type
* @author charod, kong
* @date 2020-04-05 01:23
*/
var Alert = 'Alert';
var Confirm = 'Confirm';
var Prompt = 'Prompt';
var Action = 'Action';
var Pin = 'Pin';
var Img = 'Img';
var Load = 'Load';
var TYPE;
(function (TYPE) {
TYPE[TYPE["Alert"] = 0] = "Alert";
TYPE[TYPE["Confirm"] = 1] = "Confirm";
TYPE[TYPE["Prompt"] = 2] = "Prompt";
TYPE[TYPE["Action"] = 3] = "Action";
TYPE[TYPE["Pin"] = 4] = "Pin";
TYPE[TYPE["Img"] = 5] = "Img";
TYPE[TYPE["Load"] = 6] = "Load";
})(TYPE || (TYPE = {}));
/**
* @package Application class
* @author charod, kong
* @date 2020-04-05 01:23
*/
var $_DP = {
isTouchable: 'ontouchstart' in window ? true : false,
EVENT_START: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
EVENT_MOVE: 'ontouchstart' in window ? 'touchmove' : 'mousemove',
EVENT_END: 'ontouchstart' in window ? 'touchend' : 'mouseup',
EVENT_CANCEL: 'touchcancel',
EVENT_CLICK: 'ontouchstart' in window ? 'touchend' : 'click',
};
var _ = {
type: function (obj) {
return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '');
},
isArray: function (list) {
return this.type(list) === 'Array';
},
slice: function (arrayLike, index) {
return Array.prototype.slice.call(arrayLike, index);
},
//slice:[].slice,
truthy: function (value) {
return !!value;
},
isString: function (list) {
return this.type(list) === 'string';
},
isEmpty: function (s) {
return s == null || typeof (s) == "undefined" || "null" == s || "undefined" == s || "" == ("" + s).replace(/^\s+|\s+$/g, "");
},
isEmptys: function (s) {
return !(this.isEmpty(s));
},
each: function (array, fn) {
for (var i = 0, len = array.length; i < len; i++) {
fn(array[i], i);
}
},
toArray: function (listLike) {
if (!listLike) {
return [];
}
var list = [];
for (var i = 0, len = listLike.length; i < len; i++) {
list.push(listLike[i]);
}
return list;
},
setAttr: function (node, key, value) {
switch (key) {
case 'style':
node.style.cssText = value;
break;
case 'value':
var tagName = node.tagName || '';
tagName = tagName.toLowerCase();
if (tagName === 'input' || tagName === 'textarea') {
node.value = value;
}
else {
// if it is not a input or textarea, use `setAttribute` to set
node.setAttribute(key, value);
}
break;
default:
node.setAttribute(key, value);
break;
}
},
qsa: function (selector, context) {
context = context || document;
return [].slice.call(/^\.([\w-]+)$/.test(selector) ? context.getElementsByClassName(RegExp.$1) : /^[\w-]+$/.test(selector) ? context.getElementsByTagName(selector) : context.querySelectorAll(selector));
},
vimg: function (src) {
var img = new Image();
img.src = src;
console.log(img.fileSize);
console.log(img.fileSize > 0 || (img.width > 0 && img.height > 0) ? true : false);
return img.fileSize > 0 || (img.width > 0 && img.height > 0) ? true : false;
},
chartOpt: function (option, dey, hasMark) {
var time, msg, mark;
if (option == undefined || typeof option === 'string') {
time = dey || "";
msg = option || '成功';
mark = hasMark || false;
}
else {
time = option.time || "";
msg = option.msg || '成功';
mark = option.hasMark || false;
}
return { time: time, msg: msg, mark: mark };
}
};
var loadingEle = function () {
var loadEle, parent, svgString, beginArr;
loadEle = create('div', { style: 'width:100%;height:100%' }, null);
parent = loadEle.render();
svgString = "<svg class=\"lds-spinner\" width=\"100%\" height=\"100%\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">";
beginArr = [
'-0.9166666666666666s', '-0.8333333333333334s',
'-0.75s', '-0.6666666666666666s',
'-0.5833333333333334s', '-0.5s',
'-0.4166666666666667s', '-0.3333333333333333s',
'-0.25s', '-0.16666666666666666s',
'-0.08333333333333333s', '0s'
];
for (var i = 0, len = 12; i < len; i++) {
svgString += "\n <g transform=\"rotate(" + i * 30 + " 50 50)\">\n <rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#c6c6c6\">\n <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" \n begin=\"" + beginArr[i] + "\" \n repeatCount=\"indefinite\"></animate>\n </rect>\n </g>\n ";
}
svgString += '</svg>';
parent.innerHTML = svgString;
return parent;
};
var successEle = function (option, dey, hasMark) {
var loadEle, parent, svgString = '';
loadEle = create('div', { class: 'dp-tip-box' }, null),
parent = loadEle.render();
var _a = _.chartOpt(option, dey, hasMark), time = _a.time, msg = _a.msg, mark = _a.mark;
if (mark) {
svgString += "<div class=\"svg-tip-mask\"></div>";
}
svgString += "\n <div class=\"svg-tip-box\">\n <div class=\"svg-tip-bg\"></div>\n <svg class=\"svgDone svgSuccess\" xmlns=\"https://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" stroke=\"#ffffff\">\n <circle class=\"circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n </svg>\n <div class=\"svg-tips\">" + msg + "</div>\n </div>\n ";
parent.innerHTML = svgString;
document.body.append(parent);
setTimeout(function () {
parent.remove();
}, time || 3000);
};
var errorEle = function (option, dey, hasMark) {
var loadEle, parent, svgString = '';
loadEle = create('div', { class: 'dp-tip-box' }, null),
parent = loadEle.render();
var _a = _.chartOpt(option, dey, hasMark), time = _a.time, msg = _a.msg, mark = _a.mark;
if (mark) {
svgString += "<div class=\"svg-tip-mask\"></div>";
}
svgString += "\n <div class=\"svg-tip-box\">\n <div class=\"svg-tip-bg\"></div>\n <svg class=\"svgDone svgError\" xmlns=\"https://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" stroke=\"#ffffff\">\n <circle class=\"circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <path class=\"line\" fill=\"none\" d=\"M17.36,34.736l17.368-17.472\" />\n <path class=\"line\" fill=\"none\" d=\"M34.78,34.684L17.309,17.316\" />\n </svg>\n <div class=\"svg-tips\">" + msg + "</div>\n </div>\n ";
parent.innerHTML = svgString;
document.body.append(parent);
setTimeout(function () {
parent.remove();
}, time || 3000);
};
var warnEle = function (option, dey, hasMark) {
var loadEle, parent, svgString = '';
loadEle = create('div', { class: 'dp-tip-box' }, null),
parent = loadEle.render();
var _a = _.chartOpt(option, dey, hasMark), time = _a.time, msg = _a.msg, mark = _a.mark;
if (mark) {
svgString += "<div class=\"svg-tip-mask\"></div>";
}
svgString += "\n <div class=\"svg-tip-box\">\n <div class=\"svg-tip-bg\"></div>\n <svg class=\"svgDone svgWarn\" xmlns=\"https://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" stroke=\"#ffffff\">\n <circle class=\"circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n <rect width=\"6\" height=\"28\" \n class=\"rect\"\n x=\"23\" y=\"6\"\n rx=\"2\" ry=\"2\"\n style=\"fill:#fff;\n stroke-width:1;\n stroke:#fff\"/>\n <circle cx=\"26\" cy=\"42\" r=\"3\" \n class=\"circles\"\n stroke=\"#fff\"\n stroke-width=\"1\" \n fill=\"#fff\"/>\n </svg>\n <div class=\"svg-tips\">" + msg + "</div>\n </div>\n ";
parent.innerHTML = svgString;
document.body.append(parent);
setTimeout(function () {
parent.remove();
}, time || 3000);
};
var loadEle = function (option, dey, hasMark) {
var _a;
if (option == false) {
(_a = document.querySelector('#dp-loading')) === null || _a === void 0 ? void 0 : _a.remove();
return;
}
var loadEle, parent, svgString = '', beginArr;
loadEle = create('div', { class: 'dp-tip-box', id: "dp-loading" }, null),
parent = loadEle.render();
var _b = _.chartOpt(option, dey, hasMark), time = _b.time, msg = _b.msg, mark = _b.mark;
if (mark) {
svgString += "<div class=\"svg-tip-mask\"></div>";
}
svgString += "<div class=\"svg-tip-box\">\n <div class=\"svg-tip-bg\"></div>\n <svg class=\"lds-spinner svgDone\" width=\"60%\" height=\"60%\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">";
beginArr = [
'-0.9166666666666666s', '-0.8333333333333334s',
'-0.75s', '-0.6666666666666666s',
'-0.5833333333333334s', '-0.5s',
'-0.4166666666666667s', '-0.3333333333333333s',
'-0.25s', '-0.16666666666666666s',
'-0.08333333333333333s', '0s'
];
for (var i = 0, len = 12; i < len; i++) {
svgString += "\n <g transform=\"rotate(" + i * 30 + " 50 50)\">\n <rect x=\"47\" y=\"20\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#c6c6c6\">\n <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" \n begin=\"" + beginArr[i] + "\" \n repeatCount=\"indefinite\"></animate>\n </rect>\n </g>\n ";
}
svgString += "<div class=\"svg-tips\">" + msg + "</div></div></svg>";
parent.innerHTML = svgString;
document.body.append(parent);
if (time) {
setTimeout(function () {
parent.remove();
}, time);
}
};
/**
* @package Encapsulation class
* @author charod, kong
* @date 2020-04-05 01:23
*/
var dpStack = [];
var dpBase = { title: '', okText: '', noText: ' ', placeholder: '' };
var mElement = /** @class */ (function () {
function mElement(tagName, props, children) {
if (!(this instanceof mElement)) {
if (!_.isArray(children) && children != null) {
children = _.slice(arguments, 2).filter(_.truthy);
}
return new mElement(tagName, props, children);
}
if (_.isArray(props)) {
children = props;
props = {};
}
this.tagName = tagName;
this.props = props || {};
this.children = children || [];
this.key = props ? props.key : void 666;
var count = 0;
_.each(this.children, function (child, i) {
child instanceof mElement ? count += child.count : children[i] = '' + child;
count++;
});
this.count = count;
}
mElement.prototype.render = function () {
var el = document.createElement(this.tagName);
var props = this.props;
for (var propName in props) {
var propValue = props[propName];
_.setAttr(el, propName, propValue);
}
_.each(this.children, function (child) {
var childEl = (child instanceof mElement) ? child.render() : document.createTextNode(child);
el.appendChild(childEl);
});
return el;
};
return mElement;
}());
var create = function (tagName, props, children) {
var ele;
ele = new mElement(tagName, props, children);
return ele;
};
var CLASS_POPUP_BACKDROP = 'dp-popup-backdrop';
var CLASS_ACTIVE = 'dp-active';
var MODELBACKDROP = (function () {
var element = document.createElement('div');
element.classList.add(CLASS_POPUP_BACKDROP);
element.addEventListener('touchmove', function (e) { e.preventDefault(); });
element.addEventListener('webkitTransitionEnd', function () {
if (!element.classList.contains(CLASS_ACTIVE)) {
element.parentNode && element.parentNode.removeChild(element);
}
});
return element;
}());
var createModel = /** @class */ (function () {
function createModel(type, option) {
this.CLASS_POPUP = 'dp-popup';
this.CLASS_POPUP_IN = 'dp-popup-in';
this.CLASS_POPUP_OUT = 'dp-popup-out';
this.CLASS_POPUP_INNER = 'dp-popup-inner';
this.CLASS_POPUP_TITLE = 'dp-popup-title';
this.CLASS_POPUP_CLOSE = 'dp-popup-close';
this.CLASS_POPUP_TEXT = 'dp-popup-text';
this.CLASS_POPUP_INPUT = 'dp-popup-input';
this.CLASS_POPUP_PINS = 'dp-popup-pins';
this.CLASS_POPUP_PIN = 'dp-popup-pin';
this.CLASS_INPUT = 'hk-input';
this.CLASS_DIV = 'hk-div';
this.CLASS_SPAN = 'hk-span';
this.CLASS_BLINE = 'hk-bline';
this.CLASS_INPUT_RULE = 'hk-input-rule';
this.CLASS_POPUP_BUTTONS = 'dp-popup-buttons';
this.CLASS_POPUP_BUTTON = 'dp-popup-button';
this.CLASS_POPUP_BUTTON_BOLD = 'dp-popup-button-bold';
this.CLASS_POPUP_WAITING = 'dp-popup-waiting';
this.CLASS_POPUP_KEYBOARD = 'dp-keyboard';
this.CLASS_POPUP_KEYCONTAINER = 'dp-keyboard-container';
this.CLASS_POPUP_KEYNUMBER = 'dp-keyboard-number';
this.CLASS_POPUP_NUMBERLIST = 'dp-number-list';
this.CLASS_POPUP_NUMBERITEM = 'dp-number-item';
this.MODEL = document.createElement('div');
this.WAITING = false;
this.CANGO = false;
this.PININDEX = 0;
this.PINGO = false;
this.PROMPTMSG = '';
this.type = type;
this.option = option;
}
createModel.prototype.render = function () {
var _this = this;
return new Promise(function (resolve, reject) {
var _a;
var removePopupElement = function () { _this.MODEL.parentNode && _this.MODEL.parentNode.removeChild(_this.MODEL); };
var M1 = _this._M1(_this.option, resolve); /**Alert,Confirm,Prompt Img*/
//let M2:Array<HTMLElement> = this._M2(this.option);/**Action */
switch (_this.type) {
case TYPE.Action:
_this.MODEL.append(_this._M2(_this.option, resolve)[0]);
break;
case TYPE.Load:
break;
default:
if (M1[1])
_this.MODEL.append(M1[0], M1[1]);
else
_this.MODEL.append(M1[0]);
}
_this.MODEL.className = _this.CLASS_POPUP;
_this.MODEL.addEventListener('touchmove', function (e) { e.preventDefault(); });
_this.MODEL.addEventListener('webkitTransitionEnd', function (e) {
if (_this.MODEL && e.target === _this.MODEL && _this.MODEL.classList.contains(_this.CLASS_POPUP_OUT)) {
removePopupElement();
}
});
_this.MODEL.style.display = 'block';
document.body.appendChild(_this.MODEL);
_this.MODEL.offsetHeight;
_this.MODEL.classList.add(_this.CLASS_POPUP_IN);
if (!MODELBACKDROP.classList.contains(CLASS_ACTIVE)) {
MODELBACKDROP.style.display = 'block';
document.body.appendChild(MODELBACKDROP);
MODELBACKDROP.offsetHeight;
MODELBACKDROP.classList.add(CLASS_ACTIVE);
}
if (dpStack.length)
dpStack[dpStack.length - 1]['hide']();
dpStack.push({
close: _this._modelCls.bind(_this),
show: function () {
_this.MODEL.style.display = 'block';
_this.MODEL.offsetHeight;
_this.MODEL.classList.add(_this.CLASS_POPUP_IN);
},
hide: function () {
_this.MODEL.style.display = 'none';
_this.MODEL.classList.remove(_this.CLASS_POPUP_IN);
}
});
if (_this.type == TYPE.Pin) {
var PIN_MODEL_INPUT_LIST = _this.MODEL.querySelectorAll("." + _this.CLASS_DIV);
var PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[0];
document.body.appendChild(_this._keyboard());
var keyboardNode = document.body.querySelector('.dp-keyboard');
keyboardNode.className = 'dp-keyboard keyUp';
PIN_MODEL_INPUT.append(_this._MMBLINE());
var button = document.querySelector('.dp-popup-button');
button.className = "dp-popup-button gray";
}
var inputNode = document.querySelector("." + _this.CLASS_INPUT);
(_a = inputNode) === null || _a === void 0 ? void 0 : _a.focus();
});
};
createModel.prototype._modelCls = function () {
if (this.type == TYPE.Pin) {
var keyboardNode_1 = document.body.querySelector('.dp-keyboard');
keyboardNode_1.className = 'dp-keyboard keyDown';
setTimeout(function () {
keyboardNode_1.remove();
}, 300);
}
this.MODEL.classList.remove(this.CLASS_POPUP_IN);
this.MODEL.classList.add(this.CLASS_POPUP_OUT);
dpStack.pop();
dpStack.length ? dpStack[dpStack.length - 1]['show']() : MODELBACKDROP.classList.remove(CLASS_ACTIVE);
};
createModel.prototype._MTitle = function (opt) {
var title;
if (typeof opt === 'string') {
return create('div', { class: this.CLASS_POPUP_TITLE }, [
_.isEmptys(dpBase.title) ? dpBase.title : '提示',
this.type == TYPE.Pin ? create('span', { class: this.CLASS_POPUP_CLOSE }, ['×']) : ''
]);
}
else {
var title_1 = opt.title;
return create('div', { class: this.CLASS_POPUP_TITLE }, [
_.isEmptys(title_1) ? title_1 : _.isEmptys(dpBase.title) ? dpBase.title : '提示',
this.type == TYPE.Pin ? create('span', { class: this.CLASS_POPUP_CLOSE }, ['×']) : ''
]);
}
};
createModel.prototype._MMsg = function (opt) {
if (typeof opt === 'string') {
return create('div', { class: this.CLASS_POPUP_TEXT }, [_.isEmptys(opt) ? opt : _.isEmptys(dpBase.msg) ? dpBase.msg : '']);
}
else {
var msg = opt.msg;
return create('div', { class: this.CLASS_POPUP_TEXT }, [
_.isEmptys(msg) ? msg : ''
]);
}
};
createModel.prototype._MMINPUT = function (opt) {
// console.log(opt)
if (typeof opt === 'string') {
return create('div', { class: this.CLASS_POPUP_INPUT }, [
create('input', { class: this.CLASS_INPUT, placeholder: _.isEmptys(dpBase.placeholder) ? dpBase.placeholder : '请填写', type: 'text', autofocus: true }, null),
create('div', { class: this.CLASS_INPUT_RULE }, null)
]);
}
else {
var placeholder = opt.placeholder;
return create('div', { class: this.CLASS_POPUP_INPUT }, [
create('input', { class: this.CLASS_INPUT, placeholder: _.isEmptys(placeholder) ? placeholder : '请填写', type: 'text', autofocus: true }, null),
create('div', { class: this.CLASS_INPUT_RULE }, null)
]);
}
};
createModel.prototype._MMPin = function (opt) {
var pinNode = [];
if (typeof opt === 'string') {
if (!(opt && (Number(opt) >= 4 && Number(opt) <= 8)))
return create('div', { class: this.CLASS_POPUP_PINS }, null);
for (var i = 0; i < Number(opt); i++) {
pinNode.push(create('div', { class: this.CLASS_POPUP_PIN + " i" + opt }, [
create('div', { class: this.CLASS_DIV }, [
create('span', { class: this.CLASS_SPAN }, null),
])
]));
}
return create('div', { class: this.CLASS_POPUP_PINS }, pinNode);
}
else {
var pinLen = opt.pinLen;
if (!(pinLen && (pinLen >= 4 && pinLen <= 8)))
return create('div', { class: this.CLASS_POPUP_PINS }, null);
for (var i = 0; i < pinLen; i++) {
pinNode.push(create('div', { class: this.CLASS_POPUP_PIN + " i" + pinLen }, [
create('div', { class: this.CLASS_DIV }, [
create('span', { class: this.CLASS_SPAN }, null),
])
]));
}
return create('div', { class: this.CLASS_POPUP_PINS }, pinNode);
}
};
createModel.prototype._MMIMG = function (opt) {
if (typeof opt === 'string') {
return create('img', { src: opt }, null);
}
else {
var src = opt.src;
return create('img', { src: src }, null);
}
};
createModel.prototype._MMACTION = function (opt) {
var hand = opt.hand;
var ACTARRAY = [];
var ACTBUTTON;
if (hand) {
for (var i = 0, len = hand.length; i < len; i++) {
ACTARRAY.push(create('span', { class: this.CLASS_POPUP_BUTTON + " action", 'data-id': hand[i].key }, [
hand[i].value
]));
}
}
ACTBUTTON = create('div', { class: this.CLASS_POPUP_BUTTONS + " action" }, ACTARRAY);
return ACTBUTTON;
};
createModel.prototype._MBUTTON = function (opt, resolve) {
var materEle = [];
if (typeof opt === 'string') {
(this.type === TYPE.Confirm || this.type == TYPE.Prompt)
? materEle = [create('span', { class: this.CLASS_POPUP_BUTTON }, [_.isEmpty(dpBase.okText) ? '确定' : dpBase.okText]).render(), create('span', { class: this.CLASS_POPUP_BUTTON }, [_.isEmpty(dpBase.noText) ? '取消' : dpBase.noText]).render()]
: materEle = [create('span', { class: this.CLASS_POPUP_BUTTON }, [_.isEmpty(dpBase.okText) ? '确定' : dpBase.okText]).render()];
}
else {
var _a = opt, okText = _a.okText, noText = _a.noText;
// this.type === TYPE.Confirm || this.type === TYPE.Prompt || this.type === TYPE.Pin
this.type === TYPE.Confirm || this.type === TYPE.Prompt
? (_.isEmpty(okText)
? materEle.push(create('span', { class: this.CLASS_POPUP_BUTTON }, [_.isEmptys(dpBase.okText) ? dpBase.okText : '确定']).render())
: materEle.push(create('span', { class: this.CLASS_POPUP_BUTTON }, [okText]).render()),
_.isEmpty(noText)
? materEle.push(create('span', { class: this.CLASS_POPUP_BUTTON }, [_.isEmptys(dpBase.noText) ? dpBase.noText : '取消']).render())
: materEle.push(create('span', { class: this.CLASS_POPUP_BUTTON }, [noText]).render()))
: _.isEmpty(okText)
? materEle = [create('span', { class: this.CLASS_POPUP_BUTTON }, [_.isEmptys(dpBase.okText) ? dpBase.okText : '确定']).render()]
: materEle = [create('span', { class: this.CLASS_POPUP_BUTTON }, [okText]).render()];
}
return this._MADDEvent(opt, materEle, resolve);
};
createModel.prototype._MADDEvent = function (opt, materEle, resolve) {
var _this = this;
var mateBr;
var materEleLength = materEle.length;
mateBr = create('div', { class: this.CLASS_POPUP_BUTTONS }, null).render();
var materCls = this._modelCls.bind(this);
var _loop_1 = function (i) {
// if(typeof <string>opt === 'string'){
// materEle[i].addEventListener($_DP.EVENT_CLICK, materCls)
// }else{
var _a = opt, wait = _a.wait, noCb = _a.noCb;
i == 0
? materEle[i].addEventListener($_DP.EVENT_CLICK, function () {
var _a, _b;
if (_this.WAITING)
return;
if (_this.type == TYPE.Pin) {
if (_this.PINGO) {
var value = _this._GETPINVAL();
if (wait) {
materEle[i].innerHTML = '';
materEle[i].append(loadingEle());
_this.WAITING = true;
wait && wait(materCls, value);
}
else {
materCls();
}
resolve({ value: value });
}
}
else {
var value = (_b = (_a = _this.MODEL.querySelector("." + _this.CLASS_POPUP_INPUT)) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')[0]) === null || _b === void 0 ? void 0 : _b.value;
if (wait) {
if (_this.type === TYPE.Prompt) {
if (_this.PROMPTMSG) {
var tip = _this.MODEL.querySelector('.dp-popup-input .hk-input-rule');
tip.innerHTML = _this.PROMPTMSG;
return;
}
else {
mateBr.innerHTML = '';
mateBr.append(loadingEle());
// materEle[i].innerHTML = '';
// materEle[i].append(loadingEle());
wait && wait(materCls, value);
resolve({ value: value });
}
}
else {
mateBr.innerHTML = '';
mateBr.append(loadingEle());
_this.WAITING = true;
wait && wait(materCls);
}
}
else {
if (_this.type === TYPE.Prompt) {
if (_this.PROMPTMSG) {
var tip = _this.MODEL.querySelector('.dp-popup-input .hk-input-rule');
tip.innerHTML = _this.PROMPTMSG;
}
else {
resolve({ value: value });
materCls();
}
}
else {
resolve({ option: opt });
materCls();
}
}
}
})
: materEle[i].addEventListener($_DP.EVENT_CLICK, function () {
noCb ? noCb && noCb(materCls) : materCls();
});
// }
materEle[i].addEventListener('contextmenu', function (e) { e.preventDefault(); });
mateBr.append(materEle[i]);
};
for (var i = 0; i < materEleLength; i++) {
_loop_1(i);
}
return mateBr;
};
createModel.prototype._M1 = function (opt, resolve) {
var _this = this;
var mateAr, mateBr, materEle = [];
if (typeof opt === 'string') {
mateAr = create('div', { class: this.CLASS_POPUP_INNER }, [
this._MTitle(opt),
this.type == TYPE.Prompt ? this._MMINPUT(opt) :
this.type == TYPE.Img ? this._MMIMG(opt) :
this.type == TYPE.Pin ? this._MMPin(opt) :
this._MMsg(opt)
]).render();
}
else {
var _a = opt, html = _a.html, rules = _a.rules;
mateAr = create('div', { class: this.CLASS_POPUP_INNER }, [
this._MTitle(opt),
this._MMsg(opt),
this.type == TYPE.Prompt ? this._MMINPUT(opt) : '',
this.type == TYPE.Img ? this._MMIMG(opt) : '',
this.type == TYPE.Pin ? this._MMPin(opt) : ''
]).render();
if (this.type == TYPE.Prompt && rules) {
//chaord
}
_.isEmptys(html) ? mateAr.getElementsByClassName(this.CLASS_POPUP_TEXT)[0].innerHTML = "" + html : '';
}
mateBr = this._MBUTTON(opt, resolve);
if (this.type == TYPE.Pin) {
var CloseIcon = mateAr.querySelector("." + this.CLASS_POPUP_CLOSE);
CloseIcon.addEventListener($_DP.EVENT_CLICK, function (e) {
var materCls = _this._modelCls.bind(_this);
materCls();
});
}
if (this.type == TYPE.Prompt) {
var rulesArr = this.option.rules;
if (rulesArr.length > 0) {
this.addEvent(mateAr, rulesArr);
}
else {
this.CANGO = true;
this.PROMPTMSG = '';
}
}
return [mateAr, mateBr];
};
createModel.prototype.addEvent = function (mateAr, rulesArr) {
var _this = this;
var _a, _b;
var _loop_2 = function (i, len) {
var trigger = rulesArr[i].trigger;
if (typeof trigger === 'string') {
trigger == 'change' ? trigger = 'input' : trigger = trigger;
(_a = mateAr.querySelector('.dp-popup-input .hk-input')) === null || _a === void 0 ? void 0 : _a.addEventListener(trigger, function () {
_this.chartVal(rulesArr, i);
});
}
else {
for (var i2 = 0, len2 = trigger.length; i2 < len2; i2++) {
trigger[i2] == 'change' ? trigger[i2] = 'input' : trigger[i2] = trigger[i2];
(_b = mateAr.querySelector('.dp-popup-input .hk-input')) === null || _b === void 0 ? void 0 : _b.addEventListener(trigger[i2], function () {
_this.chartVal(rulesArr, i);
});
}
}
if (rulesArr[i].required && rulesArr[i].required != 'undefined') {
this_1.PROMPTMSG = rulesArr[i].tip;
}
};
var this_1 = this;
for (var i = 0, len = rulesArr.length; i < len; i++) {
_loop_2(i, len);
}
};
createModel.prototype.chartVal = function (rulesArr, i) {
var val = this.MODEL.querySelector('.dp-popup-input .hk-input');
var tip = this.MODEL.querySelector('.dp-popup-input .hk-input-rule');
if (rulesArr[i].required && rulesArr[i].required != 'undefined') {
if (val.value == "") {
tip.innerHTML = rulesArr[i].tip;
this.CANGO = false;
}
else {
tip.innerHTML = "";
this.CANGO = true;
}
this.PROMPTMSG = tip.innerHTML;
}
if (this.CANGO) {
if (rulesArr[i].validator) {
rulesArr[i].validator(val.value, function callback(val) {
if (val) {
tip.innerHTML = val.error;
}
else {
tip.innerHTML = '';
}
});
this.PROMPTMSG = tip.innerHTML;
}
}
};
createModel.prototype._M2 = function (opt, resolve) {
var _this = this;
var mateAr, mateArList;
var materCls = this._modelCls.bind(this);
var wait = opt.wait;
mateAr = create('div', { class: this.CLASS_POPUP_INNER + " action" }, [
this._MTitle(opt),
this._MMsg(opt),
this._MMACTION(opt)
]).render();
mateArList = mateAr.querySelectorAll("." + this.CLASS_POPUP_BUTTON);
for (var i = 0, len = mateArList.length; i < len; i++) {
mateArList[i].addEventListener($_DP.EVENT_CLICK, function (e) {
if (_this.WAITING)
return;
if (wait) {
e.target.innerHTML = '';
e.target.parentNode.classList.add(_this.CLASS_POPUP_WAITING);
e.target.append(loadingEle());
_this.WAITING = true;
wait && wait(materCls, e.target.dataset.id);
}
else {
resolve({ option: opt, value: e.target.dataset.id, });
materCls();
}
});
}
return [mateAr];
};
createModel.prototype._keyboard = function () {
var _this = this;
var keyboardNode = create('div', { class: this.CLASS_POPUP_KEYBOARD }, [
create('div', { class: this.CLASS_POPUP_KEYCONTAINER }, null),
create('div', { class: this.CLASS_POPUP_KEYNUMBER }, null),
create('ul', { class: this.CLASS_POPUP_NUMBERLIST }, this._MPINSPAN()),
]).render();
var keyboarList = keyboardNode.querySelectorAll("." + this.CLASS_POPUP_NUMBERITEM);
var PIN_MODEL_INPUT_LIST = this.MODEL.querySelectorAll("." + this.CLASS_DIV);
var _loop_3 = function (i, len) {
keyboarList[i].addEventListener($_DP.EVENT_CLICK, function (e) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (i == 9)
return;
var HK_SPAN, HK_BLINE, PIN_MODEL_INPUT;
if (i !== 11 && document.body.querySelector('.hk-bline')) {
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
HK_SPAN = (_a = PIN_MODEL_INPUT) === null || _a === void 0 ? void 0 : _a.querySelector("." + _this.CLASS_SPAN);
HK_BLINE = (_b = PIN_MODEL_INPUT) === null || _b === void 0 ? void 0 : _b.querySelector("." + _this.CLASS_BLINE);
HK_SPAN ? HK_SPAN.innerHTML = e.target.textContent : '';
HK_BLINE ? HK_BLINE.remove() : '';
_this.PININDEX++;
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
(_c = PIN_MODEL_INPUT) === null || _c === void 0 ? void 0 : _c.append(_this._MMBLINE());
}
if (!document.body.querySelector('.hk-bline')) {
var button = document.querySelector('.dp-popup-button');
button.className = "dp-popup-button";
_this.PINGO = true;
}
if (i == 11) {
var button = document.querySelector('.dp-popup-button');
button.className = "dp-popup-button gray";
_this.PINGO = false;
if (document.body.querySelector('.hk-bline')) {
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
HK_SPAN = (_d = PIN_MODEL_INPUT) === null || _d === void 0 ? void 0 : _d.querySelector("." + _this.CLASS_SPAN);
if (HK_SPAN.innerHTML) {
HK_SPAN.innerHTML = '';
}
else {
if (_this.PININDEX > 0) {
HK_BLINE = (_e = PIN_MODEL_INPUT) === null || _e === void 0 ? void 0 : _e.querySelector("." + _this.CLASS_BLINE);
HK_BLINE.remove();
_this.PININDEX--;
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
HK_SPAN = (_f = PIN_MODEL_INPUT) === null || _f === void 0 ? void 0 : _f.querySelector("." + _this.CLASS_SPAN);
HK_SPAN.innerHTML = '';
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
(_g = PIN_MODEL_INPUT) === null || _g === void 0 ? void 0 : _g.append(_this._MMBLINE());
}
}
}
else {
_this.PININDEX--;
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
HK_SPAN = (_h = PIN_MODEL_INPUT) === null || _h === void 0 ? void 0 : _h.querySelector("." + _this.CLASS_SPAN);
HK_SPAN.innerHTML = '';
PIN_MODEL_INPUT = PIN_MODEL_INPUT_LIST[_this.PININDEX];
(_j = PIN_MODEL_INPUT) === null || _j === void 0 ? void 0 : _j.append(_this._MMBLINE());
}
}
});
};
for (var i = 0, len = keyboarList.length; i < len; i++) {
_loop_3(i, len);
}
return keyboardNode;
};
createModel.prototype._MMBLINE = function () {
return create('span', { class: this.CLASS_BLINE }, null).render();
};
createModel.prototype._MPINSPAN = function () {
var arr = [];
for (var i = 1, len = 14; i < len; i++) {
if (i < 10) {
arr.push(create('li', { class: this.CLASS_POPUP_NUMBERITEM }, [create('span', null, [i])]));
}
if (i == 11) {
arr.push(create('li', { class: this.CLASS_POPUP_NUMBERITEM }, [create('span', null, null)]));
}
if (i == 12) {
arr.push(create('li', { class: this.CLASS_POPUP_NUMBERITEM }, [create('span', null, [0])]));
}
if (i == 13) {
arr.push(create('li', { class: this.CLASS_POPUP_NUMBERITEM }, [create('span', null, ['×'])]));
}
}
return arr;
};
createModel.prototype._GETPINVAL = function () {
var nodeArr = this.MODEL.querySelectorAll("." + this.CLASS_POPUP_PINS + " ." + this.CLASS_SPAN), varString = '';
for (var i = 0, len = nodeArr.length; i < len; i++) {
var node = nodeArr[i];
varString += node.innerHTML;
}
return varString;
};
return createModel;
}());
exports.default = {
Schema: function (option) { },
Base: function (option) {
var title = option.title, msg = option.msg, html = option.html, okText = option.okText, noText = option.noText, placeholder = option.placeholder;
(dpBase.title = title, dpBase.msg = msg, dpBase.html = html, dpBase.okText = okText, dpBase.noText = noText, dpBase.placeholder = placeholder);
},
Alert: function (option) { return new createModel(TYPE.Alert, option).render(); },
Confirm: function (option) { return new createModel(TYPE.Confirm, option).render(); },
Prompt: function (option) { return new createModel(TYPE.Prompt, option || '').render(); },
Img: function (option) { return new createModel(TYPE.Img, option).render(); },
Action: function (option) { return new createModel(TYPE.Action, option).render(); },
Pin: function (option) { return new createModel(TYPE.Pin, option).render(); },
success: function (option, time, hasMark) { return successEle(option, time, hasMark); },
error: function (option, time, hasMark) { return errorEle(option, time, hasMark); },
warn: function (option, time, hasMark) { return warnEle(option, time, hasMark); },
loading: function (option, time, hasMark) { return loadEle(option, time, hasMark); },
};
});