forked from visualpython/visualpython
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvpMultiButtonModal_new.js
More file actions
155 lines (134 loc) · 6.34 KB
/
Copy pathvpMultiButtonModal_new.js
File metadata and controls
155 lines (134 loc) · 6.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
define([
'require'
, 'jquery'
, 'nbextensions/visualpython/src/common/vpCommon'
, 'nbextensions/visualpython/src/common/constant'
, 'nbextensions/visualpython/src/common/StringBuilder'
, 'nbextensions/visualpython/src/common/component/vpComComponent'
], function (requirejs, $, vpCommon, vpConst, sb, vpComComponent) {
/**
* @class vpMultiButtonModal 다중버튼 모달(최소 1개 버튼 바인딩)
* @constructor
*/
var vpMultiButtonModal = function(message, submessage, buttons, defaultButtonIdx=1) {
this.setUUID();
this._buttons = buttons;
this._message = message;
this._submessage = submessage;
this._defaultButtonIdx = defaultButtonIdx;
};
vpMultiButtonModal.prototype = Object.create(vpComComponent.vpComComponent.prototype);
/**
* 버튼들 설정
* @param {Array} buttons 버튼들. 최소 1개 버튼 바인딩
*/
vpMultiButtonModal.prototype.setButtons = function(buttons = new Array()) {
if (buttons.length == 0) {
buttons.push("OK");
}
this._buttons = buttons;
}
/**
* 메시지 설정
* @param {String} message 모달 메시지 설정
*/
vpMultiButtonModal.prototype.setMessage = function(message = "") {
this._message = message;
}
/**
* 모달 태그 오픈
* @param {function} closeCallback 종료 콜백함수
*/
vpMultiButtonModal.prototype.openModal = function(callBackList) {
var sbTagString = new sb.StringBuilder();
var that = this;
sbTagString.appendFormatLine("<div id='vp_multiButtonModal' class='{0}'>", that._UUID);
sbTagString.appendLine("<div class='vp-multi-button-modal-box'>");
sbTagString.appendLine("<div class='vp-multi-button-modal-message'>");
sbTagString.appendLine("<div class='vp-multi-button-modal-message-inner'>");
sbTagString.appendFormatLine("<span>{0}</span>", that._message);
sbTagString.appendFormatLine("<p>{0}</p>", that._submessage);
sbTagString.appendLine("</div>");
sbTagString.appendLine("</div>");
sbTagString.appendLine("<div class='vp-multi-button-modal-buttons'>");
if (that._buttons[0]) {
sbTagString.appendFormatLine("<input class='vp-modal-button vp-modal-button-1 {0}' type='button' value='{1}' />"
, that._defaultButtonIdx == 1? 'vp-modal-selected-button': ''
, that._buttons[0]);
}
sbTagString.appendLine("<div class=''>");
if (that._buttons[1]) {
sbTagString.appendFormatLine("<input class='vp-modal-button vp-modal-button-2 {0}' type='button' value='{1}' />"
, that._defaultButtonIdx == 2? 'vp-modal-selected-button': ''
, that._buttons[1]);
}
if (that._buttons[2]) {
sbTagString.appendFormatLine("<input class='vp-modal-button vp-modal-button-3 {0}' type='button' value='{1}' />"
, that._defaultButtonIdx == 3? 'vp-modal-selected-button': ''
, that._buttons[2]);
}
sbTagString.appendLine("</div>");
sbTagString.appendLine("</div>");
sbTagString.appendLine("</div>");
sbTagString.appendLine("</div>");
/** 첫번째 버튼 클릭 이벤트 함수 */
$(document).on(vpCommon.formatString("click.{0}", that._UUID), vpCommon.formatString(".{0} .{1}", that._UUID, "vp-modal-button-1"), function() {
$(document).unbind(vpCommon.formatString(".{0}", that._UUID));
if (typeof callBackList[0] == "function") {
callBackList[0]($(this).index());
}
$(vpCommon.formatString(".{0}", that._UUID)).remove();
});
/** 두번째 버튼 클릭 이벤트 함수 */
$(document).on(vpCommon.formatString("click.{0}", that._UUID), vpCommon.formatString(".{0} .{1}", that._UUID, "vp-modal-button-2"), function() {
$(document).unbind(vpCommon.formatString(".{0}", that._UUID));
if (typeof callBackList[1] == "function") {
callBackList[1]($(this).index());
}
$(vpCommon.formatString(".{0}", that._UUID)).remove();
});
/** 세번째 버튼 클릭 이벤트 함수 */
$(document).on(vpCommon.formatString("click.{0}", that._UUID), vpCommon.formatString(".{0} .{1}", that._UUID, "vp-modal-button-3"), function() {
$(document).unbind(vpCommon.formatString(".{0}", that._UUID));
if (typeof callBackList[2] == "function") {
callBackList[2]($(this).index());
}
$(vpCommon.formatString(".{0}", that._UUID)).remove();
});
/** esc shortcut add */
$(document).bind(vpCommon.formatString('keydown.{0}', that._UUID), function(event) {
that.handleEscToExit(event);
that.handleEnterToClickButton(event);
});
$(sbTagString.toString()).appendTo("body");
/** focus on default button */
$(vpCommon.formatString(".{0} .{1}", that._UUID, "vp-modal-button-" + that._defaultButtonIdx)).focus();
}
/**
* ESC키로 창 닫기
* @param {Event} event
*/
vpMultiButtonModal.prototype.handleEscToExit = function(event) {
var keyCode = event.keyCode ? event.keyCode : event.which;
// esc
if (keyCode == 27) {
// console.log('esc from modal', this._UUID);
$(document).unbind(vpCommon.formatString(".{0}", this._UUID));
$(vpCommon.formatString(".{0}", this._UUID)).remove();
$(vpCommon.formatString("keydown.{0}", this._UUID), this.handleEscToExit);
}
}
vpMultiButtonModal.prototype.handleEnterToClickButton = function(event) {
var keyCode = event.keyCode ? event.keyCode : event.which;
var that = this;
// enter
if (keyCode == 13) {
// console.log('enter from modal', this._UUID);
$(vpCommon.formatString("keydown.{0}", this._UUID), this.handleEnterToClickButton);
$(vpCommon.formatString(".{0} .{1}", that._UUID, "vp-modal-button-" + that._defaultButtonIdx)).click();
}
}
return {
vpMultiButtonModal: vpMultiButtonModal
}
});