Skip to content

Commit 576b802

Browse files
minjk-blminjk-bl
committed
#42 - add interface for popup page
1 parent 0bb6eb4 commit 576b802

2 files changed

Lines changed: 231 additions & 0 deletions

File tree

‎css/common/popupPage.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.vp-pp {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
8+
z-index: 1200;
9+
10+
background-color: rgba(0,0,0,.4);
11+
}
12+
13+
.vp-pp-container {
14+
position: relative;
15+
left: 50%;
16+
top: 50%;
17+
transform:translate(-50%, -50%);
18+
19+
min-width: 400px;
20+
min-height: 400px;
21+
width: 95%;
22+
height: 95%;
23+
24+
background-color: white;
25+
}
26+
27+
.vp-pp-title {
28+
height: 30px;
29+
padding: 5px 0px 5px 10px;
30+
31+
background-color: #EEE;
32+
border: 1px solid #ddd;;
33+
display: flex;
34+
flex-direction: row;
35+
position: relative;
36+
37+
font-weight: 700;
38+
}
39+
40+
.vp-pp-close {
41+
position: fixed;
42+
z-index: 3;
43+
right: 5px;
44+
width: 20px;
45+
height: 20px;
46+
line-height: 20px;
47+
top: 5px;
48+
text-align: center;
49+
cursor: pointer;
50+
}
51+
52+
.vp-pp-body {
53+
width: 100%;
54+
height: calc(100% - 30px);
55+
padding: 10px;
56+
display: grid;
57+
grid-row-gap: 5px;
58+
grid-template-rows: 35px 30px 60% calc(40% - 80px);
59+
overflow: auto;
60+
}
61+
62+
63+
/** buttons */
64+
.vp-pp-btn-box {
65+
position: absolute;
66+
bottom: 25px;
67+
right: 25px;
68+
}
69+
.vp-pp-btn-apply {
70+
width: 80px;
71+
height: 30px;
72+
background: #F37704;
73+
border: 0.25px solid #C4C4C4;
74+
box-sizing: border-box;
75+
border-radius: 2px;
76+
text-align: center;
77+
color: #FFFFFF;
78+
}
79+
.vp-pp-btn-apply:hover {
80+
background: var(--hightlight-color);
81+
}
82+
.vp-pp-btn-cancel {
83+
width: 80px;
84+
height: 30px;
85+
background: #E5E5E5;
86+
border: 0.25px solid #C4C4C4;
87+
box-sizing: border-box;
88+
border-radius: 2px;
89+
text-align: center;
90+
color: #696969;
91+
}
92+
.vp-pp-btn-cancel:hover {
93+
background: #ccc;
94+
}

‎src/common/vpPopupPage.js‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
define([
2+
'require'
3+
, 'jquery'
4+
, 'nbextensions/visualpython/src/common/constant'
5+
, 'nbextensions/visualpython/src/common/StringBuilder'
6+
, 'nbextensions/visualpython/src/common/vpCommon'
7+
], function(requirejs, $, vpConst, sb, vpCommon) {
8+
9+
// TEST: testing popuppage as an interface of every popup modules
10+
11+
const VP_PP = 'vp-pp';
12+
const VP_PP_CONTAINER = 'vp-pp-container';
13+
const VP_PP_TITLE = 'vp-pp-title';
14+
const VP_PP_CLOSE = 'vp-pp-close';
15+
const VP_PP_BODY = 'vp-pp-body';
16+
const VP_PP_BUTTON_BOX = 'vp-pp-btn-box';
17+
const VP_PP_BUTTON_CANCEL = 'vp-pp-btn-cancel';
18+
const VP_PP_BUTTON_APPLY = 'vp-pp-btn-apply';
19+
20+
/**
21+
* @class PopupPage
22+
* @param {object} pageThis
23+
* @param {string} targetId
24+
* @constructor
25+
*/
26+
var PopupPage = function(pageThis, targetId) {
27+
this.pageThis = pageThis;
28+
this.targetId = targetId;
29+
this.uuid = vpCommon.getUUID();
30+
31+
this.config = {
32+
title: '',
33+
width: '95%',
34+
height: '95%',
35+
pageDom: $('<div>Empty</div>')
36+
};
37+
}
38+
39+
PopupPage.prototype.wrapSelector = function(selector='') {
40+
return vpCommon.formatString('.{0} {1}', this.uuid, selector);
41+
}
42+
43+
PopupPage.prototype.init = function() {
44+
vpCommon.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/popupPage.css");
45+
this.renderPopup();
46+
this.bindEvent();
47+
}
48+
49+
PopupPage.prototype.renderPopup = function() {
50+
var { title, width, height, pageDom } = this.config;
51+
52+
var page = new sb.StringBuilder();
53+
page.appendFormatLine('<div class="{0} {1}">', VP_PP, this.uuid);
54+
page.appendFormatLine('<div class="{0}" style="width: {1}; height: {2};">', VP_PP_CONTAINER, width, height);
55+
56+
// title
57+
page.appendFormat('<div class="{0}">{1}</div>'
58+
, VP_PP_TITLE
59+
, title);
60+
61+
// close button
62+
page.appendFormatLine('<div class="{0}"><i class="{1}"></i></div>'
63+
, VP_PP_CLOSE, 'fa fa-close');
64+
65+
// body start
66+
page.appendFormatLine('<div class="{0}">', VP_PP_BODY);
67+
page.appendLine('</div>'); // body end
68+
69+
// button box
70+
page.appendFormatLine('<div class="{0}">', VP_PP_BUTTON_BOX);
71+
page.appendFormatLine('<button type="button" class="{0}">{1}</button>'
72+
, VP_PP_BUTTON_CANCEL, 'Cancel');
73+
page.appendFormatLine('<button type="button" class="{0}">{1}</button>'
74+
, VP_PP_BUTTON_APPLY, 'Apply');
75+
page.appendLine('</div>');
76+
77+
page.appendLine('</div>'); // container end
78+
page.appendLine('</div>'); // VP_PP end
79+
80+
$('#vp-wrapper').append(page.toString());
81+
82+
$(pageDom).appendTo($(this.wrapSelector('.' + VP_PP_BODY)));
83+
$(this.wrapSelector()).hide();
84+
85+
return page.toString();
86+
}
87+
88+
PopupPage.prototype.open = function(config) {
89+
this.config = {
90+
...this.config,
91+
...config
92+
};
93+
94+
this.init();
95+
$(this.wrapSelector()).show();
96+
}
97+
98+
PopupPage.prototype.close = function() {
99+
this.unbindEvent();
100+
$(this.wrapSelector()).remove();
101+
}
102+
103+
PopupPage.prototype.bindEvent = function() {
104+
var that = this;
105+
106+
// close popup
107+
$(document).on('click', this.wrapSelector('.' + VP_PP_CLOSE), function(event) {
108+
that.close();
109+
});
110+
111+
// click cancel
112+
$(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_CANCEL), function() {
113+
that.close();
114+
});
115+
116+
// click apply
117+
$(document).on('click', this.wrapSelector('.' + VP_PP_BUTTON_APPLY), function() {
118+
if (that.pageThis) {
119+
var code = that.pageThis.generateCode(false, false);
120+
$(vpCommon.wrapSelector('#' + that.targetId)).val(code);
121+
$(vpCommon.wrapSelector('#' + that.targetId)).trigger({
122+
type: 'popup_apply',
123+
title: that.config.title,
124+
code: code
125+
});
126+
}
127+
that.close();
128+
});
129+
}
130+
131+
PopupPage.prototype.unbindEvent = function() {
132+
$(document).unbind(vpCommon.formatString(".{0} .{1}", this.uuid, VP_PP_BODY));
133+
}
134+
135+
136+
return PopupPage;
137+
});

0 commit comments

Comments
 (0)