Skip to content

Commit aabca57

Browse files
minjk-blminjk-bl
committed
#42 - change modules for popup page
1 parent 576b802 commit aabca57

4 files changed

Lines changed: 175 additions & 71 deletions

File tree

‎css/common/frameEditor.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
line-height: 20px;
5252
top: 5px;
5353
text-align: center;
54+
cursor: pointer;
5455
}
5556

5657
.vp-fe-body {

‎css/common/subsetEditor.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
line-height: 20px;
5353
top: 5px;
5454
text-align: center;
55+
cursor: pointer;
5556
}
5657

5758
.vp-ds-body {

‎src/common/vpFrameEditor.js‎

Lines changed: 76 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -90,30 +90,23 @@ define([
9090
this.targetId = targetId;
9191
this.uuid = vpCommon.getUUID();
9292

93-
// state
94-
this.state = {
95-
originObj: '',
96-
tempObj: '_vp',
97-
selected: [],
98-
axis: 0,
99-
lines: TABLE_LINES,
100-
steps: [],
101-
popup: FRAME_EDIT_TYPE.NONE
102-
}
103-
104-
this.codepreview = undefined;
93+
this.renderButton();
10594

106-
this.bindEvent();
107-
this.init();
95+
var that = this;
96+
// open popup
97+
$(vpCommon.formatString('.{0}.{1}', VP_FE_BTN, this.uuid)).on('click', function(event) {
98+
if (!$(this).hasClass('disabled')) {
99+
that.open();
100+
}
101+
});
108102
}
109103

110104
FrameEditor.prototype.wrapSelector = function(query = '') {
111105
return vpCommon.formatString('.{0}.{1} {2}', VP_FE, this.uuid, query);
112106
}
113107

114108
FrameEditor.prototype.open = function() {
115-
this.loadVariableList();
116-
109+
this.init();
117110
$(this.wrapSelector()).show();
118111

119112
if (!this.codepreview) {
@@ -152,17 +145,33 @@ define([
152145
}
153146

154147
FrameEditor.prototype.close = function() {
155-
$(this.wrapSelector()).hide();
148+
this.unbindEvent();
149+
$(this.wrapSelector()).remove();
156150
}
157151

158152
FrameEditor.prototype.init = function() {
159-
this.pageThis.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/frameEditor.css");
153+
// state
154+
this.state = {
155+
originObj: '',
156+
tempObj: '_vp',
157+
selected: [],
158+
axis: 0,
159+
lines: TABLE_LINES,
160+
steps: [],
161+
popup: FRAME_EDIT_TYPE.NONE
162+
}
160163

161-
this.renderButton();
162-
this.renderThis();
164+
this.codepreview = undefined;
165+
166+
vpCommon.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/frameEditor.css");
163167

168+
this.render();
169+
this.bindEvent();
170+
164171
// this.setDraggableBox();
165172
this.setDraggableColumns();
173+
174+
this.loadVariableList();
166175
}
167176

168177
FrameEditor.prototype.initState = function() {
@@ -177,7 +186,9 @@ define([
177186
var buttonTag = new sb.StringBuilder();
178187
buttonTag.appendFormat('<button type="button" class="{0} {1} {2}">{3}</button>'
179188
, VP_FE_BTN, this.uuid, 'vp-button', 'Edit');
180-
$(this.pageThis.wrapSelector('#' + this.targetId)).parent().append(buttonTag.toString());
189+
if (this.pageThis) {
190+
$(this.pageThis.wrapSelector('#' + this.targetId)).parent().append(buttonTag.toString());
191+
}
181192
}
182193

183194
FrameEditor.prototype.setPreview = function(previewCodeStr) {
@@ -191,7 +202,7 @@ define([
191202
}
192203
}
193204

194-
FrameEditor.prototype.renderThis = function() {
205+
FrameEditor.prototype.render = function() {
195206
var page = new sb.StringBuilder();
196207
page.appendFormatLine('<div class="{0} {1}">', VP_FE, this.uuid);
197208
page.appendFormatLine('<div class="{0}">', VP_FE_CONTAINER);
@@ -338,6 +349,7 @@ define([
338349
});
339350
$(that.wrapSelector('#vp_feVariable')).trigger('change');
340351
} catch (ex) {
352+
console.log('FrameEditor:', result);
341353
// console.log(ex);
342354
}
343355
});
@@ -515,7 +527,7 @@ define([
515527
});
516528
}
517529

518-
FrameEditor.prototype.getCode = function(type, content={}) {
530+
FrameEditor.prototype.getTypeCode = function(type, content={}) {
519531
var tempObj = this.state.tempObj;
520532
var orgObj = this.state.originObj;
521533

@@ -668,15 +680,30 @@ define([
668680
});
669681
}
670682

683+
FrameEditor.prototype.unbindEvent = function() {
684+
$(document).off(this.wrapSelector('*'));
685+
686+
$(document).off('click', this.wrapSelector('.' + VP_FE_CLOSE));
687+
$(document).off('change', this.wrapSelector('#vp_feVariable'));
688+
$(document).off('click', this.wrapSelector('.vp-fe-df-refresh'));
689+
$(document).off('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));
690+
$(document).off('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW));
691+
$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));
692+
$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW));
693+
$(document).off('click', this.wrapSelector('.' + VP_FE_ADD_COLUMN));
694+
$(document).off('click', this.wrapSelector('.' + VP_FE_ADD_ROW));
695+
$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE_MORE));
696+
$(document).off('click', this.wrapSelector('.' + VP_FE_MENU_ITEM));
697+
$(document).off('click', this.wrapSelector('.' + VP_FE_POPUP_OK));
698+
$(document).off('click', this.wrapSelector('.' + VP_FE_POPUP_CANCEL));
699+
$(document).off('click', this.wrapSelector('.' + VP_FE_POPUP_CLOSE));
700+
$(document).off('click', this.wrapSelector('.' + VP_FE_BUTTON_CANCEL));
701+
$(document).off('click', this.wrapSelector('.' + VP_FE_BUTTON_APPLY));
702+
703+
}
671704

672705
FrameEditor.prototype.bindEvent = function() {
673706
var that = this;
674-
// open popup
675-
$(document).on('click', vpCommon.formatString('.{0}.{1}', VP_FE_BTN, this.uuid), function(event) {
676-
if (!$(this).hasClass('disabled')) {
677-
that.open();
678-
}
679-
});
680707

681708
// close popup
682709
$(document).on('click', this.wrapSelector('.' + VP_FE_CLOSE), function(event) {
@@ -697,7 +724,7 @@ define([
697724
that.initState();
698725

699726
// load code with temporary df
700-
that.loadCode(that.getCode(FRAME_EDIT_TYPE.INIT));
727+
that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.INIT));
701728
that.loadInfo();
702729
});
703730

@@ -756,7 +783,8 @@ define([
756783
});
757784

758785
// select column
759-
$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function() {
786+
$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(evt) {
787+
evt.stopPropagation();
760788
var hasSelected = $(this).hasClass('selected');
761789
$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');
762790
if (!hasSelected) {
@@ -800,7 +828,7 @@ define([
800828
// more rows
801829
$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE_MORE), function() {
802830
that.state.lines += TABLE_LINES;
803-
that.loadCode(that.getCode(FRAME_EDIT_TYPE.SHOW));
831+
that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.SHOW));
804832
});
805833

806834
// click menu item
@@ -814,13 +842,13 @@ define([
814842
that.openInputPopup(editType);
815843
return;
816844
}
817-
that.loadCode(that.getCode(editType));
845+
that.loadCode(that.getTypeCode(editType));
818846
});
819847

820848
// ok input popup
821849
$(document).on('click', this.wrapSelector('.' + VP_FE_POPUP_OK), function() {
822850
// TODO: ok input popup
823-
that.loadCode(that.getCode(that.state.popup, that.getPopupContent()));
851+
that.loadCode(that.getTypeCode(that.state.popup, that.getPopupContent()));
824852
that.closeInputPopup();
825853
});
826854

@@ -841,8 +869,20 @@ define([
841869

842870
// click apply
843871
$(document).on('click', this.wrapSelector('.' + VP_FE_BUTTON_APPLY), function() {
844-
$(that.pageThis.wrapSelector('#' + that.targetId)).val(that.state.steps.join('\n'));
845-
$(that.pageThis.wrapSelector('#' + that.targetId)).trigger('frame_apply');
872+
var code = that.state.steps.join('\n');
873+
if (that.pageThis) {
874+
$(that.pageThis.wrapSelector('#' + that.targetId)).val(code);
875+
$(that.pageThis.wrapSelector('#' + that.targetId)).trigger({
876+
type: 'frame_apply',
877+
code: code
878+
});
879+
} else {
880+
$(vpCommon.wrapSelector('#' + that.targetId)).val(code);
881+
$(vpCommon.wrapSelector('#' + that.targetId)).trigger({
882+
type: 'frame_apply',
883+
code: code
884+
});
885+
}
846886
that.close();
847887
});
848888
}

0 commit comments

Comments
 (0)