1 |
2
|
Manuela
|
(function(){
|
2 |
|
|
function ce(tag, clas, txt) {
|
3 |
|
|
var ele = document.createElement(tag);
|
4 |
|
|
ele.setAttribute('class', clas);
|
5 |
|
|
if(typeof txt === 'undefined' || txt === null){
|
6 |
|
|
return ele;
|
7 |
|
|
}
|
8 |
|
|
var tn = document.createTextNode(txt);
|
9 |
|
|
ele.appendChild(tn);
|
10 |
|
|
return ele;
|
11 |
|
|
}
|
12 |
|
|
var KEY_ESC = 27;
|
13 |
|
|
|
14 |
|
|
var MscConfirm = function(title, sub, onOk, onCancel) {
|
15 |
|
|
var prev = document.getElementsByClassName('msc-confirm');
|
16 |
|
|
if(prev.length > 0){
|
17 |
|
|
document.body.removeChild(prev[0]);
|
18 |
|
|
}
|
19 |
|
|
|
20 |
|
|
var options = {
|
21 |
|
|
title: 'Confirm',
|
22 |
|
|
subtitle: '',
|
23 |
|
|
onOk: null,
|
24 |
|
|
onCancel: null,
|
25 |
|
|
okText: 'OK',
|
26 |
|
|
cancelText: 'Cancel'
|
27 |
|
|
};
|
28 |
|
|
|
29 |
|
|
if(typeof title === 'object') {
|
30 |
|
|
for(var key in title) {
|
31 |
|
|
options[key] = title[key];
|
32 |
|
|
}
|
33 |
|
|
} else {
|
34 |
|
|
options.title = (typeof title === 'string') ? title : options.title;
|
35 |
|
|
options.subtitle = (typeof sub === 'string') ? sub : options.subtitle;
|
36 |
|
|
options.onOk = (typeof onOk === 'function') ? onOk : options.onOk;
|
37 |
|
|
options.onCancel = (typeof onCancel === 'function') ? onCancel : options.onCancel;
|
38 |
|
|
|
39 |
|
|
if(typeof sub === 'function') {
|
40 |
|
|
options.onOk = sub;
|
41 |
|
|
}
|
42 |
|
|
}
|
43 |
|
|
|
44 |
|
|
var dialog = ce('div', 'msc-confirm'),
|
45 |
|
|
overlay = ce('div', 'msc-overlay'),
|
46 |
|
|
closeBtn = ce('button', 'msc-close');
|
47 |
|
|
closeBtn.innerHTML = '×';
|
48 |
|
|
overlay.appendChild(closeBtn);
|
49 |
|
|
|
50 |
|
|
closeBtn.addEventListener('click', destroy);
|
51 |
|
|
|
52 |
|
|
var content = ce('div', 'msc-content'),
|
53 |
|
|
cTitle = ce('h3', 'msc-title', options.title),
|
54 |
|
|
body = ce('div', 'msc-body', options.subtitle),
|
55 |
|
|
action = ce('div', 'msc-action'),
|
56 |
|
|
okBtn = ce('button', 'msc-ok', options.okText),
|
57 |
|
|
cancelbtn = ce('button', 'msc-cancel', options.cancelText);
|
58 |
|
|
|
59 |
|
|
action.appendChild(okBtn);
|
60 |
|
|
action.appendChild(cancelbtn);
|
61 |
|
|
|
62 |
|
|
okBtn.addEventListener('click', ok);
|
63 |
|
|
cancelbtn.addEventListener('click', cancel);
|
64 |
|
|
|
65 |
|
|
content.appendChild(cTitle);
|
66 |
|
|
content.appendChild(body);
|
67 |
|
|
content.appendChild(action);
|
68 |
|
|
|
69 |
|
|
dialog.appendChild(overlay);
|
70 |
|
|
dialog.appendChild(content);
|
71 |
|
|
document.body.appendChild(dialog);
|
72 |
|
|
dialog.style.display = 'block';
|
73 |
|
|
content.classList.add('msc-confirm--animate');
|
74 |
|
|
cancelbtn.focus();
|
75 |
|
|
|
76 |
|
|
document.addEventListener('keyup', _hide);
|
77 |
|
|
|
78 |
|
|
function destroy() {
|
79 |
|
|
closeBtn.removeEventListener('click', destroy);
|
80 |
|
|
okBtn.removeEventListener('click', ok);
|
81 |
|
|
cancelbtn.removeEventListener('click', cancel);
|
82 |
|
|
document.removeEventListener('keyup', _hide);
|
83 |
|
|
document.body.removeChild(dialog);
|
84 |
|
|
}
|
85 |
|
|
|
86 |
|
|
function ok() {
|
87 |
|
|
destroy();
|
88 |
|
|
if(options.onOk !== null) {
|
89 |
|
|
options.onOk();
|
90 |
|
|
}
|
91 |
|
|
}
|
92 |
|
|
|
93 |
|
|
function cancel() {
|
94 |
|
|
destroy();
|
95 |
|
|
if(options.onCancel !== null) {
|
96 |
|
|
options.onCancel();
|
97 |
|
|
}
|
98 |
|
|
}
|
99 |
|
|
|
100 |
|
|
function _hide(e) {
|
101 |
|
|
if(e.keyCode == 27) {
|
102 |
|
|
destroy();
|
103 |
|
|
}
|
104 |
|
|
}
|
105 |
|
|
};
|
106 |
|
|
|
107 |
|
|
//window.msc = MscConfirm;
|
108 |
|
|
window.mscConfirm = MscConfirm;
|
109 |
|
|
})();
|