Skip to content

Commit c23a56d

Browse files
gani0325gani0325
committed
➕[Feat] Help button complete !!!
1 parent 207c863 commit c23a56d

3 files changed

Lines changed: 171 additions & 18 deletions

File tree

‎html/component/popupComponent.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
Note : popup component
77
License : GNU GPLv3 with Visual Python special exception
88
Date : 2021. 12. 01
9-
Change Date :
9+
Change Date : 2021. 09. 25
1010
-->
1111
<!-- use body tag to strip comments out on requirejs/text plugin -->
1212
<body>
@@ -84,7 +84,7 @@
8484

8585
<!-- Help view box -->
8686
<div class="vp-popup-helpview-box vp-close-on-blur vp-scrollbar">
87-
87+
<textarea name="help"></textarea>
8888
</div>
8989

9090

‎js/com/component/PopupComponent.js‎

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Note : Popup Components for rendering objects
77
* License : GNU GPLv3 with Visual Python special exception
88
* Date : 2021. 11. 18
9-
* Change Date :
9+
* Change Date : 2022. 09. 24
1010
*/
1111

1212
//============================================================================
@@ -21,7 +21,9 @@ define([
2121
'../com_interface',
2222
'./Component',
2323
'./DataSelector',
24-
24+
25+
// helpview boolean 판단
26+
'json!vp_base/data/help_data.json',
2527

2628

2729
/** codemirror */
@@ -31,7 +33,7 @@ define([
3133
'codemirror/addon/display/placeholder',
3234
'codemirror/addon/display/autorefresh'
3335
], function(popupComponentHtml, popupComponentCss
34-
, com_util, com_Const, com_String, com_interface, Component, DataSelector, codemirror
36+
, com_util, com_Const, com_String, com_interface, Component, DataSelector, helpData, codemirror
3537
) {
3638
'use strict';
3739

@@ -52,7 +54,7 @@ define([
5254
this.name = this.state.config.name;
5355
this.path = this.state.config.path;
5456

55-
57+
5658
this.config = {
5759
sizeLevel: 0, // 0: 400x400 / 1: 500x500 / 2: 600x500 / 3: 750x500
5860
executeMode: 'code', // cell execute mode
@@ -65,7 +67,7 @@ define([
6567
dataview: true,
6668

6769
// 220919
68-
helpview: true,
70+
helpview: helpData[this.name],
6971

7072
// show footer
7173
runButton: true,
@@ -95,14 +97,40 @@ define([
9597
theme: "ipython",
9698
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
9799
}
100+
101+
// makrdown codemirror 위한 config 추가
102+
this.cmMarkdownConfig = {
103+
mode: {
104+
name: 'markdown',
105+
version: 3,
106+
singleLineStringErrors: false
107+
},
108+
height: '100%',
109+
width: '100%',
110+
indentUnit: 4,
111+
lineNumbers: true,
112+
matchBrackets: true,
113+
autoRefresh: true,
114+
theme: "markdown",
115+
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
116+
}
117+
98118
this.cmReadonlyConfig = {
99119
...this.cmPythonConfig,
100120
readOnly: true,
101121
lineNumbers: false,
102122
scrollbarStyle: "null"
103123
}
104124

125+
this.cmReadonlyHelpConfig = {
126+
...this.cmMarkdownConfig,
127+
readOnly: true,
128+
lineNumbers: false,
129+
scrollbarStyle: "null"
130+
}
131+
105132
this.cmCodeview = null;
133+
this.helpViewText = null;
106134

107135
this.cmCodeList = [];
108136
}
@@ -185,18 +213,20 @@ define([
185213
} else {
186214
this.cmCodeview.refresh();
187215
}
188-
} else {
189-
if (!this.cmCodeview) {
216+
}
217+
218+
if(this.config.helpview) {
219+
if (!this.helpViewText) {
190220
// codemirror setting
191221
let selector = this.wrapSelector('.vp-popup-helpview-box textarea');
192222
let textarea = $(selector);
193223
if (textarea && textarea.length > 0) {
194-
this.cmCodeview = codemirror.fromTextArea(textarea[0], this.cmReadonlyConfig);
224+
this.helpViewText = codemirror.fromTextArea(textarea[0], this.cmReadonlyHelpConfig);
195225
} else {
196226
vpLog.display(VP_LOG_TYPE.ERROR, 'No text area to create codemirror. (selector: '+selector+')');
197227
}
198228
} else {
199-
this.cmCodeview.refresh();
229+
this.helpViewText.refresh();
200230
}
201231

202232

@@ -695,9 +725,12 @@ define([
695725
}
696726

697727
generateHelp() {
698-
/** Implementation needed */
699-
return '';
700-
}
728+
var helpTextObj = new com_String();
729+
var helpComment = helpData[this.name];
730+
helpTextObj.append(helpComment);
731+
732+
return helpTextObj.toString();
733+
}
701734

702735
load() {
703736

@@ -971,6 +1004,8 @@ define([
9711004
that.cmCodeview.refresh();
9721005
}, 1);
9731006
$(this.wrapSelector('.vp-popup-dataview-box')).hide();
1007+
$(this.wrapSelector('.vp-popup-helpview-box')).hide();
1008+
9741009
} else if (viewType == 'help') { // 220919
9751010
this.saveState();
9761011
var code = this.generateHelp();
@@ -980,17 +1015,23 @@ define([
9801015
} else {
9811016
codeText = code;
9821017
}
983-
this.cmCodeview.setValue(codeText);
984-
this.cmCodeview.save();
1018+
1019+
this.helpViewText.setValue(codeText);
1020+
this.helpViewText.save();
9851021

9861022
var that = this;
9871023
setTimeout(function() {
988-
that.cmCodeview.refresh();
1024+
that.helpViewText.refresh();
9891025
}, 1);
990-
$(this.wrapSelector('.vp-popup-helpview-box')).hide();
1026+
1027+
// button 클릭 시, 하나의 팝업만 나타나도록
1028+
$(this.wrapSelector('.vp-popup-dataview-box')).hide();
1029+
$(this.wrapSelector('.vp-popup-codeview-box')).hide();
1030+
9911031
} else {
9921032
this.renderDataView();
9931033
$(this.wrapSelector('.vp-popup-codeview-box')).hide();
1034+
$(this.wrapSelector('.vp-popup-helpview-box')).hide();
9941035
}
9951036

9961037
$(this.wrapSelector('.vp-popup-'+viewType+'view-box')).show();

‎popupComponent.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!--
2+
Project Name : Visual Python
3+
Description : GUI-based Python code generator
4+
File Name : popupComponent.html
5+
Author : Black Logic
6+
Note : popup component
7+
License : GNU GPLv3 with Visual Python special exception
8+
Date : 2021. 12. 01
9+
Change Date : 2021. 09. 25
10+
-->
11+
<!-- use body tag to strip comments out on requirejs/text plugin -->
12+
<body>
13+
<div class="vp-popup-frame">
14+
<div class="vp-inner-popup-box" style="display: none; width: 400px; height: 300px;">
15+
<div class="vp-inner-popup-header">
16+
<label class="vp-inner-popup-title">Title</label>
17+
<img class="vp-inner-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close inner popup"/>
18+
</div>
19+
<div class="vp-inner-popup-body vp-scrollbar">
20+
<!-- Inner popup body -->
21+
</div>
22+
<div class="vp-inner-popup-footer">
23+
<div class="vp-inner-popup-button-box">
24+
<button type="button" class="vp-button vp-inner-popup-button" data-type="cancel">Cancel</button>
25+
<button type="button" class="vp-button activated vp-inner-popup-button" data-type="ok">OK</button>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="vp-variable-popup-box" style="display: none; width: 400px; height: 300px;">
30+
<div class="vp-variable-popup-header">
31+
<label class="vp-variable-popup-title">Title</label>
32+
<img class="vp-variable-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close inner popup"/>
33+
</div>
34+
<div class="vp-variable-popup-body vp-scrollbar">
35+
<!-- Variable popup body -->
36+
</div>
37+
<div class="vp-variable-popup-footer">
38+
<div class="vp-variable-preview">
39+
<textarea id="vp_previewCode" name="code"></textarea>
40+
</div>
41+
<button type="button" class="vp-button activated vp-variable-popup-button" data-type="ok">OK</button>
42+
</div>
43+
</div>
44+
<div class="vp-popup-header">
45+
<label class="vp-popup-title">
46+
<!-- Title -->
47+
</label>
48+
<img class="vp-popup-toggle" src="/nbextensions/visualpython/img/minimize.svg" title="Minimize this popup">
49+
<img class="vp-popup-maximize" src="/nbextensions/visualpython/img/max_window.svg" title="Maximize this popup">
50+
<img class="vp-popup-return" src="/nbextensions/visualpython/img/min_window.svg" title="Return size of this popup">
51+
<img class="vp-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close popup"/>
52+
</div>
53+
<div class="vp-popup-body vp-scrollbar">
54+
<div class="vp-popup-body-top-bar vp-italic vp-gray-text vp-no-selection vp-cursor">
55+
<span id="popupInstall" class="vp-popup-body-top-bar-item" data-type="install">
56+
Install Package
57+
<img src="/nbextensions/visualpython/img/import.svg"/>
58+
</span>
59+
<span id="popupImport" class="vp-popup-body-top-bar-item" data-type="import">
60+
Import Library
61+
<img src="/nbextensions/visualpython/img/import.svg"/>
62+
</span>
63+
<span id="popupPackage" class="vp-popup-body-top-bar-item" data-type="package">
64+
Package Manager
65+
<img src="/nbextensions/visualpython/img/setting.svg"/>
66+
</span>
67+
</div>
68+
<!-- Body -->
69+
<div class="vp-popup-content">
70+
71+
</div>
72+
</div>
73+
<div class="vp-popup-footer">
74+
<!-- Footer -->
75+
<!-- Data view box -->
76+
<div class="vp-popup-dataview-box vp-close-on-blur vp-scrollbar">
77+
78+
</div>
79+
<!-- Code view box -->
80+
<div class="vp-popup-codeview-box vp-close-on-blur vp-scrollbar">
81+
<textarea name="code"></textarea>
82+
</div>
83+
84+
85+
<!-- Help view box -->
86+
<div class="vp-popup-helpview-box vp-close-on-blur vp-scrollbar">
87+
<textarea name="help"></textarea>
88+
</div>
89+
90+
91+
<!-- Button box -->
92+
<div class="vp-popup-button-box">
93+
<button type="button" class="vp-button vp-popup-button" data-type="code">Code view</button>
94+
<button type="button" class="vp-button vp-popup-button" data-type="data">Data view</button>
95+
<!-- 220919 -->
96+
<button type="button" class="vp-button vp-popup-button vp-popup-help" data-type="help" title="test">Help</button>
97+
98+
99+
<div class="vp-popup-runadd-box">
100+
<button type="button" class="vp-button activated vp-popup-button" data-type="run" title="Save to block & Run cell">Run</button>
101+
<button type="button" class="vp-button activated vp-popup-button" data-type="show-detail"><img src="/nbextensions/visualpython/img/arrow_short_up.svg"/></button>
102+
<div class="vp-popup-run-detailbox vp-cursor vp-close-on-blur">
103+
<div class="vp-popup-detail-button" data-type="apply" title="Save to block">Save to block</div>
104+
<div class="vp-popup-detail-button" data-type="add" title="Save to block & Add cell">Code to cell</div>
105+
</div>
106+
</div>
107+
<button type="button" class="vp-button activated vp-popup-button vp-popup-save-button" data-type="save" title="Save to target" style="display:none;">OK</button>
108+
<button type="button" class="vp-button vp-popup-button" data-type="cancel">Cancel</button>
109+
</div>
110+
</div>
111+
</div>
112+
</body>

0 commit comments

Comments
 (0)