dialogx
Version:
no reliance on third-party apple iphonx like popups
912 lines (883 loc) • 41 kB
text/typescript
/**
* @package Declaration type
* @author charod, kong
* @date 2020-04-05 01:23
*/
const Alert:string = 'Alert';
const Confirm:string = 'Confirm';
const Prompt:string = 'Prompt';
const Action:string = 'Action';
const Pin:string = 'Pin';
const Img:string = 'Img';
const Load:string = 'Load';
enum TYPE { Alert, Confirm, Prompt, Action, Pin, Img, Load }
interface dp{
isTouchable: boolean,
EVENT_START: string,
EVENT_MOVE: string,
EVENT_END: string,
EVENT_CANCEL: string,
EVENT_CLICK: string
}
interface dpStatus {
option ?: object | string,
hash ?: string,
result ?:string
}
interface dpSbr {
text:string,
wait:Function
}
interface dpAction{
key?:string,
value?:string
}
interface dpOption{
title?:string,
msg?:string,
html?:string,
okText?:string,
noText?:string,
wait?:Function
noCb?:Function,
hand?:Array<dpAction>,
src?:string,
placeholder?:string,
// pin?:number,
pinLen?:number,
rules?:Array<any>
}
/**
* @package Application class
* @author charod, kong
* @date 2020-04-05 01:23
*/
const $_DP: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',
};
const _ = {
type: function (obj:any) {
return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '')
},
isArray: function (list:any) {
return this.type(list) === 'Array'
},
slice: function (arrayLike:any, index:any) {
return Array.prototype.slice.call(arrayLike, index)
},
//slice:[].slice,
truthy: function (value:boolean) {
return !!value
},
isString: function (list:any) {
return this.type(list) === 'string'
},
isEmpty:function(s:any) {
return s == null || typeof (s) == "undefined" || "null" == s || "undefined" == s || "" == ("" + s).replace(/^\s+|\s+$/g, "");
},
isEmptys:function(s:any){
return !(this.isEmpty(s));
},
each: function (array:Array<any>, fn:Function) {
for (let i = 0, len = array.length; i < len; i++) {
fn(array[i], i)
}
},
toArray: function (listLike: any[]) {
if (!listLike) {
return []
}
let list: any = []
for (let i = 0, len = listLike.length; i < len; i++) {
list.push(listLike[i])
}
return list
},
setAttr: function (node:any, key:any, value:any) {
switch (key) {
case 'style':
node.style.cssText = value
break
case 'value':
let 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:any, context:any) {
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:string){
let img:any = 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?: any, dey?: any, hasMark?: any){
let time: any, msg: string, mark: boolean;
if(option == undefined ||typeof <string>option === 'string'){
time = dey || "";
msg = option || '成功';
mark = hasMark || false;
}else{
time = option.time || "";
msg = option.msg || '成功';
mark = option.hasMark || false;
}
return {time, msg, mark}
}
}
const loadingEle = ():HTMLElement => {
let loadEle: mElement, parent: HTMLElement, svgString: string, beginArr: Array<any>;
loadEle = create('div', { style:'width:100%;height:100%' }, null)
parent = loadEle.render();
svgString = `<svg class="lds-spinner" width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
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(let i = 0, len = 12; i < len; i++){
svgString += `
<g transform="rotate(${i * 30} 50 50)">
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#c6c6c6">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
begin="${beginArr[i]}"
repeatCount="indefinite"></animate>
</rect>
</g>
`
}
svgString += '</svg>';
parent.innerHTML = svgString;
return parent;
}
const successEle = (option?: any, dey?: any, hasMark?: any):any => {
let loadEle: mElement, parent: HTMLElement,svgString: string = '';
loadEle = create('div', { class:'dp-tip-box' }, null),
parent = loadEle.render();
let {time, msg, mark} = _.chartOpt(option, dey, hasMark);
if(mark){ svgString += `<div class="svg-tip-mask"></div>` }
svgString +=`
<div class="svg-tip-box">
<div class="svg-tip-bg"></div>
<svg class="svgDone svgSuccess" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52" stroke="#ffffff">
<circle class="circle" cx="26" cy="26" r="25" fill="none" />
<path class="check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<div class="svg-tips">${ msg }</div>
</div>
`
parent.innerHTML = svgString;
document.body.append(parent);
setTimeout(()=>{
parent.remove()
}, time || 3000);
}
const errorEle = (option?: any, dey?: any, hasMark?: any):any => {
let loadEle: mElement, parent: HTMLElement,svgString: string = '';
loadEle = create('div', { class:'dp-tip-box' }, null),
parent = loadEle.render();
let {time, msg, mark} = _.chartOpt(option, dey, hasMark);
if(mark){ svgString += `<div class="svg-tip-mask"></div>` }
svgString +=`
<div class="svg-tip-box">
<div class="svg-tip-bg"></div>
<svg class="svgDone svgError" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52" stroke="#ffffff">
<circle class="circle" cx="26" cy="26" r="25" fill="none" />
<path class="line" fill="none" d="M17.36,34.736l17.368-17.472" />
<path class="line" fill="none" d="M34.78,34.684L17.309,17.316" />
</svg>
<div class="svg-tips">${ msg }</div>
</div>
`
parent.innerHTML = svgString;
document.body.append(parent);
setTimeout(()=>{
parent.remove()
}, time || 3000);
}
const warnEle = (option?: any, dey?: any, hasMark?: any):any => {
let loadEle: mElement, parent: HTMLElement,svgString: string = '';
loadEle = create('div', { class:'dp-tip-box' }, null),
parent = loadEle.render();
let {time, msg, mark} = _.chartOpt(option, dey, hasMark);
if(mark){ svgString += `<div class="svg-tip-mask"></div>` }
svgString +=`
<div class="svg-tip-box">
<div class="svg-tip-bg"></div>
<svg class="svgDone svgWarn" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 52 52" stroke="#ffffff">
<circle class="circle" cx="26" cy="26" r="25" fill="none" />
<rect width="6" height="28"
class="rect"
x="23" y="6"
rx="2" ry="2"
style="fill:#fff;
stroke-width:1;
stroke:#fff"/>
<circle cx="26" cy="42" r="3"
class="circles"
stroke="#fff"
stroke-width="1"
fill="#fff"/>
</svg>
<div class="svg-tips">${ msg }</div>
</div>
`
parent.innerHTML = svgString;
document.body.append(parent);
setTimeout(()=>{
parent.remove()
}, time || 3000);
}
const loadEle = (option?: any, dey?: any, hasMark?: any): any => {
if(option == false){
document.querySelector('#dp-loading')?.remove();
return;
}
let loadEle: mElement, parent: HTMLElement,svgString: string = '', beginArr: Array<any>;
loadEle = create('div', { class:'dp-tip-box', id:"dp-loading" }, null),
parent = loadEle.render();
let {time, msg, mark} = _.chartOpt(option, dey, hasMark);
if(mark){ svgString += `<div class="svg-tip-mask"></div>` }
svgString += `<div class="svg-tip-box">
<div class="svg-tip-bg"></div>
<svg class="lds-spinner svgDone" width="60%" height="60%"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
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(let i = 0, len = 12; i < len; i++){
svgString += `
<g transform="rotate(${i * 30} 50 50)">
<rect x="47" y="20" rx="9.4" ry="4.8" width="6" height="12" fill="#c6c6c6">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
begin="${beginArr[i]}"
repeatCount="indefinite"></animate>
</rect>
</g>
`
}
svgString += `<div class="svg-tips">${ msg }</div></div></svg>`;
parent.innerHTML = svgString;
document.body.append(parent);
if(time){
setTimeout(()=>{
parent.remove()
}, time);
}
}
/**
* @package Encapsulation class
* @author charod, kong
* @date 2020-04-05 01:23
*/
const dpStack:Array<any> = [];
const dpBase:dpOption = { title: '', okText: '', noText:' ', placeholder: '' }
class mElement {
tagName: any;
props: any;
children: any;
key: any;
count: any;
constructor(tagName: string, props: any, children: any[]) {
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
let count = 0
_.each(this.children, function(child:any, i:any){
child instanceof mElement ? count += child.count : children[i] = '' + child;
count++
})
this.count = count
}
public render(){
let el = document.createElement(this.tagName)
let props = this.props
for (let propName in props) {
let propValue = props[propName]
_.setAttr(el, propName, propValue)
}
_.each(this.children, function (child:any) {
let childEl = (child instanceof mElement) ? child.render() : document.createTextNode(child)
el.appendChild(childEl)
})
return el
}
}
const create = (tagName: string, props: any, children: any) => {
let ele: mElement;
ele = new mElement(tagName, props, children);
return ele;
}
const CLASS_POPUP_BACKDROP = 'dp-popup-backdrop';
const CLASS_ACTIVE = 'dp-active';
const MODELBACKDROP:HTMLElement = (function(){
let element = document.createElement('div');
element.classList.add(CLASS_POPUP_BACKDROP);
element.addEventListener('touchmove', (e: TouchEvent | MouseEvent) => { e.preventDefault()});
element.addEventListener('webkitTransitionEnd', () => {
if(!element.classList.contains(CLASS_ACTIVE)) {
element.parentNode && element.parentNode.removeChild(element);
}
});
return element;
}())
class createModel{
private type:TYPE;
private option:dpOption;
constructor(type:TYPE, option:any ){
this.type = type;
this.option = option;
}
private CLASS_POPUP:string = 'dp-popup';
private CLASS_POPUP_IN:string = 'dp-popup-in';
private CLASS_POPUP_OUT:string = 'dp-popup-out';
private CLASS_POPUP_INNER:string = 'dp-popup-inner';
private CLASS_POPUP_TITLE:string = 'dp-popup-title';
private CLASS_POPUP_CLOSE:string = 'dp-popup-close';
private CLASS_POPUP_TEXT:string = 'dp-popup-text';
private CLASS_POPUP_INPUT:string = 'dp-popup-input';
private CLASS_POPUP_PINS:string = 'dp-popup-pins';
private CLASS_POPUP_PIN:string = 'dp-popup-pin';
private CLASS_INPUT:string = 'hk-input';
private CLASS_DIV:string = 'hk-div';
private CLASS_SPAN:string = 'hk-span';
private CLASS_BLINE:string = 'hk-bline';
private CLASS_INPUT_RULE:string = 'hk-input-rule';
private CLASS_POPUP_BUTTONS:string = 'dp-popup-buttons';
private CLASS_POPUP_BUTTON:string = 'dp-popup-button';
private CLASS_POPUP_BUTTON_BOLD:string = 'dp-popup-button-bold';
private CLASS_POPUP_WAITING:string = 'dp-popup-waiting';
private CLASS_POPUP_KEYBOARD:string = 'dp-keyboard';
private CLASS_POPUP_KEYCONTAINER:string = 'dp-keyboard-container';
private CLASS_POPUP_KEYNUMBER:string = 'dp-keyboard-number';
private CLASS_POPUP_NUMBERLIST:string = 'dp-number-list';
private CLASS_POPUP_NUMBERITEM:string = 'dp-number-item';
private MODEL:HTMLElement = document.createElement('div');
private WAITING: boolean = false;
private CANGO: boolean = false;
private PININDEX: number = 0;
private PINGO: boolean = false;
private PROMPTMSG: string = '';
public render():Promise<dpStatus>{
return new Promise((resolve, reject) => {
let removePopupElement = () => { this.MODEL.parentNode && this.MODEL.parentNode.removeChild(this.MODEL) };
let M1:Array<HTMLElement> = 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', (e: TouchEvent | MouseEvent) => { e.preventDefault() });
this.MODEL.addEventListener('webkitTransitionEnd', (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: () => {
this.MODEL.style.display = 'block';
this.MODEL.offsetHeight;
this.MODEL.classList.add(this.CLASS_POPUP_IN);
},
hide: () => {
this.MODEL.style.display = 'none';
this.MODEL.classList.remove(this.CLASS_POPUP_IN);
}
});
if(this.type == TYPE.Pin){
let PIN_MODEL_INPUT_LIST:NodeList = <NodeList>this.MODEL.querySelectorAll(`.${this.CLASS_DIV}`);
let PIN_MODEL_INPUT:HTMLInputElement = <HTMLInputElement>PIN_MODEL_INPUT_LIST[0];
document.body.appendChild(this._keyboard());
let keyboardNode:HTMLElement = <HTMLElement>document.body.querySelector('.dp-keyboard');
keyboardNode.className = 'dp-keyboard keyUp';
PIN_MODEL_INPUT.append(this._MMBLINE());
let button:HTMLButtonElement = <HTMLButtonElement>document.querySelector('.dp-popup-button');
button.className = "dp-popup-button gray";
}
let inputNode: HTMLInputElement = <HTMLInputElement>document.querySelector(`.${this.CLASS_INPUT}`);
inputNode?.focus();
})
}
private _modelCls():void{
if(this.type == TYPE.Pin){
let keyboardNode:HTMLElement = <HTMLElement>document.body.querySelector('.dp-keyboard');
keyboardNode.className = 'dp-keyboard keyDown';
setTimeout(() => {
keyboardNode.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)
}
private _MTitle(opt:string | dpOption):mElement{
let title:HTMLElement;
if(typeof <string>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{
let { title } = <dpOption>opt;
return create('div', { class: this.CLASS_POPUP_TITLE },[
_.isEmptys(title) ? title : _.isEmptys(dpBase.title) ? dpBase.title : '提示',
this.type == TYPE.Pin ? create('span', { class: this.CLASS_POPUP_CLOSE }, [ '×' ]) : ''
])
}
}
private _MMsg(opt:string | dpOption):mElement{
if(typeof <string>opt === 'string'){
return create('div', { class: this.CLASS_POPUP_TEXT }, [ _.isEmptys(opt) ? opt : _.isEmptys(dpBase.msg) ? dpBase.msg : '' ])
}else{
let { msg } = <dpOption>opt;
return create('div', { class: this.CLASS_POPUP_TEXT }, [
_.isEmptys(msg) ? msg : ''
])
}
}
private _MMINPUT(opt:string | dpOption):mElement{
// console.log(opt)
if(typeof <string>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{
let { placeholder } = <dpOption>opt;
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)
])
}
}
private _MMPin(opt:string | dpOption):mElement{
let pinNode:Array<mElement> = [];
if(typeof <string>opt === 'string'){
if(!(opt && ( Number(opt) >= 4 && Number(opt) <= 8))) return create('div', { class:this.CLASS_POPUP_PINS }, null)
for(let 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{
let { pinLen } = <dpOption>opt;
if(!(pinLen && ( pinLen >= 4 && pinLen <= 8))) return create('div', { class:this.CLASS_POPUP_PINS }, null)
for(let 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)
}
}
private _MMIMG(opt:string | dpOption):mElement{
if(typeof <string>opt === 'string'){
return create('img', { src: opt }, null)
}else{
let { src } = <dpOption>opt;
return create('img', { src: src }, null)
}
}
private _MMACTION(opt: dpOption):mElement{
let { hand } = opt
let ACTARRAY:Array<mElement> = [];
let ACTBUTTON:mElement;
if(hand){
for(let 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
}
private _MBUTTON(opt:string | dpOption, resolve:Function):HTMLElement{
let materEle:Array<HTMLElement> = [];
if(typeof <string>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{
let { okText, noText } = <dpOption>opt;
// 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)
}
private _MADDEvent(opt:string | dpOption, materEle:Array<HTMLElement>, resolve:Function):HTMLElement{
let mateBr:HTMLElement;
let materEleLength = materEle.length;
mateBr = create('div', { class: this.CLASS_POPUP_BUTTONS }, null).render();
let materCls = this._modelCls.bind(this);
for(let i = 0; i < materEleLength; i++){
// if(typeof <string>opt === 'string'){
// materEle[i].addEventListener($_DP.EVENT_CLICK, materCls)
// }else{
let { wait, noCb } = <dpOption>opt
i == 0
? materEle[i].addEventListener($_DP.EVENT_CLICK, () => {
if(this.WAITING) return
if(this.type == TYPE.Pin){
if(this.PINGO){
let 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{
let value = this.MODEL.querySelector(`.${this.CLASS_POPUP_INPUT}`)?.getElementsByTagName('input')[0]?.value;
if(wait){
if(this.type === TYPE.Prompt){
if(this.PROMPTMSG){
let tip : HTMLInputElement = <HTMLInputElement>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){
let tip : HTMLInputElement = <HTMLInputElement>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, () => {
noCb ? noCb && noCb(materCls) : materCls()
})
// }
materEle[i].addEventListener('contextmenu', (e: TouchEvent | MouseEvent) => { e.preventDefault() })
mateBr.append(materEle[i])
}
return mateBr
}
private _M1(opt: string | dpOption, resolve:Function):Array<HTMLElement>{
let mateAr:HTMLElement, mateBr:HTMLElement, materEle:Array<HTMLElement> = [];
if(typeof <string>opt === 'string'){
mateAr = create('div', { class: this.CLASS_POPUP_INNER }, [
this._MTitle(<string>opt),
this.type == TYPE.Prompt ? this._MMINPUT(<string>opt) :
this.type == TYPE.Img ? this._MMIMG(<string>opt) :
this.type == TYPE.Pin ? this._MMPin(<string>opt) :
this._MMsg(<string>opt)
]).render()
}else{
let { html, rules } = <dpOption>opt;
mateAr = create('div', { class: this.CLASS_POPUP_INNER }, [
this._MTitle(<dpOption>opt),
this._MMsg(<dpOption>opt),
this.type == TYPE.Prompt ? this._MMINPUT(<dpOption>opt) : '',
this.type == TYPE.Img ? this._MMIMG(<dpOption>opt) : '',
this.type == TYPE.Pin ? this._MMPin(<string>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){
let CloseIcon:Node = <Node>mateAr.querySelector(`.${this.CLASS_POPUP_CLOSE}`);
CloseIcon.addEventListener($_DP.EVENT_CLICK, (e:any) => {
let materCls = this._modelCls.bind(this);
materCls();
})
}
if(this.type == TYPE.Prompt){
let rulesArr: any= this.option.rules;
if(rulesArr.length > 0){
this.addEvent(mateAr,rulesArr)
}else{
this.CANGO = true;
this.PROMPTMSG = '';
}
}
return [ mateAr, mateBr ]
}
private addEvent(mateAr:any, rulesArr: any): any{
for(let i = 0, len = rulesArr.length; i < len; i++){
let trigger = rulesArr[i].trigger;
if(typeof <string>trigger === 'string'){
trigger == 'change' ? trigger = 'input' : trigger = trigger;
mateAr.querySelector('.dp-popup-input .hk-input')?.addEventListener(trigger, ()=>{
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];
mateAr.querySelector('.dp-popup-input .hk-input')?.addEventListener(trigger[i2], ()=>{
this.chartVal(rulesArr, i)
})
}
}
if(rulesArr[i].required && rulesArr[i].required != 'undefined'){
this.PROMPTMSG = rulesArr[i].tip;
}
}
}
private chartVal(rulesArr: any, i: any){
let val : HTMLInputElement = <HTMLInputElement>this.MODEL.querySelector('.dp-popup-input .hk-input');
let tip : HTMLInputElement = <HTMLInputElement>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;
}
}
}
private _M2(opt:dpOption, resolve:Function):Array<HTMLElement>{
let mateAr:HTMLElement, mateArList:NodeList;
let materCls = this._modelCls.bind(this);
let { wait } = <dpOption>opt;
mateAr = create('div', { class: `${this.CLASS_POPUP_INNER} action` }, [
this._MTitle(<dpOption>opt),
this._MMsg(<dpOption>opt),
this._MMACTION(<dpOption>opt)
]).render()
mateArList = <NodeList>mateAr.querySelectorAll(`.${this.CLASS_POPUP_BUTTON}`)
for(let i = 0, len = mateArList.length; i < len; i++){
mateArList[i].addEventListener($_DP.EVENT_CLICK, (e:any) => {
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 ]
}
private _keyboard(){
let 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();
let keyboarList = <NodeList>keyboardNode.querySelectorAll(`.${this.CLASS_POPUP_NUMBERITEM}`);
let PIN_MODEL_INPUT_LIST:NodeList = <NodeList>this.MODEL.querySelectorAll(`.${this.CLASS_DIV}`);
for(let i = 0, len = keyboarList.length; i < len; i++){
keyboarList[i].addEventListener($_DP.EVENT_CLICK, (e:any) => {
if(i == 9)return
let HK_SPAN: HTMLSpanElement,
HK_BLINE: HTMLSpanElement,
PIN_MODEL_INPUT:HTMLInputElement;
if(i !== 11 && document.body.querySelector('.hk-bline')){
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
HK_SPAN = <HTMLSpanElement>PIN_MODEL_INPUT?.querySelector(`.${this.CLASS_SPAN}`);
HK_BLINE = <HTMLSpanElement>PIN_MODEL_INPUT?.querySelector(`.${this.CLASS_BLINE}`);
HK_SPAN ? HK_SPAN.innerHTML = e.target.textContent :'';
HK_BLINE ? HK_BLINE.remove() : '';
this.PININDEX++;
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
PIN_MODEL_INPUT?.append(this._MMBLINE());
}
if(!document.body.querySelector('.hk-bline')){
let button:HTMLButtonElement = <HTMLButtonElement>document.querySelector('.dp-popup-button');
button.className = "dp-popup-button";
this.PINGO = true;
}
if(i == 11){
let button:HTMLButtonElement = <HTMLButtonElement>document.querySelector('.dp-popup-button');
button.className = "dp-popup-button gray";
this.PINGO = false;
if(document.body.querySelector('.hk-bline')){
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
HK_SPAN = <HTMLSpanElement>PIN_MODEL_INPUT?.querySelector(`.${this.CLASS_SPAN}`);
if(HK_SPAN.innerHTML){
HK_SPAN.innerHTML = '';
}else{
if(this.PININDEX > 0){
HK_BLINE = <HTMLSpanElement>PIN_MODEL_INPUT?.querySelector(`.${this.CLASS_BLINE}`);
HK_BLINE.remove();
this.PININDEX--;
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
HK_SPAN = <HTMLSpanElement>PIN_MODEL_INPUT?.querySelector(`.${this.CLASS_SPAN}`);
HK_SPAN.innerHTML = '';
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
PIN_MODEL_INPUT?.append(this._MMBLINE());
}
}
}else{
this.PININDEX--;
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
HK_SPAN = <HTMLSpanElement>PIN_MODEL_INPUT?.querySelector(`.${this.CLASS_SPAN}`);
HK_SPAN.innerHTML = '';
PIN_MODEL_INPUT = <HTMLInputElement>PIN_MODEL_INPUT_LIST[this.PININDEX];
PIN_MODEL_INPUT?.append(this._MMBLINE());
}
}
})
}
return keyboardNode;
}
private _MMBLINE(){
return create('span', { class:this.CLASS_BLINE }, null).render();
}
private _MPINSPAN(){
let arr:any = [];
for(let 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;
}
private _GETPINVAL(){
let nodeArr: NodeList = <NodeList>this.MODEL.querySelectorAll(`.${this.CLASS_POPUP_PINS} .${this.CLASS_SPAN}`),
varString: string = '';
for(let i = 0, len = nodeArr.length; i < len; i++){
let node:HTMLElement = <HTMLElement>nodeArr[i];
varString += node.innerHTML;
}
return varString;
}
}
export default {
Schema:(option:any) => { },
Base:(option:any) => {
let { title, msg, html, okText, noText, placeholder } = option;
(dpBase.title = title, dpBase.msg = msg, dpBase.html = html, dpBase.okText = okText, dpBase.noText = noText, dpBase.placeholder = placeholder)
},
Alert: (option:any) => new createModel(TYPE.Alert, option).render(),
Confirm: (option:any) => new createModel(TYPE.Confirm, option).render(),
Prompt: (option?:any) => new createModel(TYPE.Prompt, option || '').render(),
Img: (option:any) => new createModel(TYPE.Img, option).render(),
Action: (option:any) => new createModel(TYPE.Action, option).render(),
Pin:(option:any) => new createModel(TYPE.Pin, option).render(),
success:(option:any, time:any, hasMark:any) => successEle(option, time, hasMark),
error:(option:any, time:any, hasMark:any) => errorEle(option, time, hasMark),
warn:(option:any, time:any, hasMark:any) => warnEle(option, time, hasMark),
loading:(option:any, time:any, hasMark:any) => loadEle(option, time, hasMark),
}