Skip to content

Commit 6cec08f

Browse files
author
minjk-bl
committed
DataSelector proto
1 parent bec37d8 commit 6cec08f

File tree

7 files changed

+181
-1
lines changed

7 files changed

+181
-1
lines changed

‎css/component/dataSelector.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Code Preview */
2+
.vp-ds-preview {
3+
width: 100%;
4+
height: 35px;
5+
background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px );
6+
background-color: white;
7+
border: 0.25px solid #E4E4E4;
8+
}
9+
.vp-ds-preview textarea {
10+
display: none;
11+
}
12+
.vp-ds-preview .CodeMirror-code .cm-variable {
13+
background-color: rgba(47, 133, 90, 0.2);
14+
}
15+
.vp-ds-preview .CodeMirror-code .cm-string {
16+
background-color: rgba(246, 173, 85, 0.2);
17+
}

‎css/popupComponent.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,54 @@
402402
text-align: center;
403403
cursor: pointer;
404404
}
405+
/* variable popup */
406+
.vp-variable-popup-box {
407+
position: absolute;
408+
left: calc(50% - 135px);
409+
top: calc(50% - 135px);
410+
min-width: 370px;
411+
min-height: 370px;
412+
width: 370px;
413+
height: 370px;
414+
background-color: white;
415+
z-index: 200;
416+
border: 0.25px solid var(--border-gray-color);
417+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
418+
}
419+
.vp-variable-popup-header {
420+
position: relative;
421+
height: 30px;
422+
background: var(--light-gray-color);
423+
border-bottom: 1px solid var(--border-gray-color);
424+
}
425+
.vp-variable-popup-title {
426+
line-height: 33px;
427+
width: calc(100% - 30px);
428+
height: 30px;
429+
padding-left: 10px;
430+
font-size: 15px;
431+
color: var(--font-primary);
432+
cursor: pointer;
433+
}
434+
.vp-variable-popup-body {
435+
height: calc(100% - 70px);
436+
padding: 10px;
437+
}
438+
.vp-variable-popup-button-box {
439+
float: right;
440+
margin: 0 10px 10px 0;
441+
}
442+
.vp-variable-popup-close {
443+
position: absolute;
444+
width: 20px;
445+
height: 20px;
446+
top: 4px;
447+
right: 5px;
448+
z-index: 3;
449+
line-height: 20px;
450+
text-align: center;
451+
cursor: pointer;
452+
}
405453
/* body top-bar */
406454
.vp-popup-body-top-bar {
407455
text-align: right;

‎html/component/dataSelector.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<body>
2+
<div>
3+
<div class="vp-grid-col-p50">
4+
<label>Variable</label>
5+
<label>Data Type</label>
6+
</div>
7+
<div class="vp-variable-box">
8+
<div class="vp-grid-box">
9+
10+
</div>
11+
</div>
12+
<div class="vp-option-box">
13+
14+
</div>
15+
</div>
16+
</body>

‎html/popupComponent.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,21 @@
2626
</div>
2727
</div>
2828
</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>
2944
<div class="vp-popup-header">
3045
<label class="vp-popup-title">
3146
<!-- Title -->

‎js/com/component/DataSelector.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*
2+
* Project Name : Visual Python
3+
* Description : GUI-based Python code generator
4+
* File Name : DataSelector.js
5+
* Author : Black Logic
6+
* Note : Data Selector
7+
* License : GNU GPLv3 with Visual Python special exception
8+
* Date : 2022. 03. 23
9+
* Change Date :
10+
*/
11+
define([
12+
'text!vp_base/html/component/dataSelector.html!strip',
13+
'css!vp_base/css/component/dataSelector.css',
14+
'vp_base/js/com/com_String',
15+
'vp_base/js/com/com_util',
16+
'vp_base/js/com/component/Component',
17+
'vp_base/js/com/component/SuggestInput',
18+
'vp_base/js/com/component/MultiSelector'
19+
], function(dataHTML, dataCss, com_String, com_util, Component, MultiSelector) {
20+
//========================================================================
21+
// [CLASS] DataSelector
22+
//========================================================================
23+
class DataSelector extends Component {
24+
25+
/**
26+
*
27+
* @param {string} frameSelector query for parent component
28+
* @param {Object} config parent:[], selectedList=[], includeList=[]
29+
*/
30+
constructor(frameSelector, config) {
31+
super(frameSelector, config, {});
32+
}
33+
34+
_init() {
35+
this.frameSelector = this.$target;
36+
37+
// configuration
38+
this.config = this.state;
39+
40+
var { mode, type, parent, selectedList=[], includeList=[], excludeList=[] } = this.config;
41+
this.mode = mode;
42+
this.parent = parent;
43+
this.selectedList = selectedList;
44+
this.includeList = includeList;
45+
this.excludeList = excludeList;
46+
47+
48+
}
49+
50+
load() {
51+
$(this.frameSelector).html(this.render());
52+
this.bindEvent();
53+
}
54+
55+
template() {
56+
return dataHTML;
57+
}
58+
59+
render() {
60+
61+
}
62+
63+
bindEvent() {
64+
let that = this;
65+
66+
67+
}
68+
}
69+
70+
return DataSelector;
71+
72+
});

‎js/com/component/MultiSelector.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ define([
191191
var that = this;
192192

193193
var tag = new com_String();
194+
tag.appendLine('<label class="vp-bold">Drag-and-drop columns to right to select.</label>');
194195
tag.appendFormatLine('<div class="{0} {1}">', APP_SELECT_CONTAINER, this.uuid);
195196
// select - left
196197
tag.appendFormatLine('<div class="{0}">', APP_SELECT_LEFT);

‎js/com/component/PopupComponent.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ define([
2020
'../com_String',
2121
'../com_interface',
2222
'./Component',
23+
'./DataSelector',
2324

2425
/** codemirror */
2526
'codemirror/lib/codemirror',
@@ -28,7 +29,7 @@ define([
2829
'codemirror/addon/display/placeholder',
2930
'codemirror/addon/display/autorefresh'
3031
], function(popupComponentHtml, popupComponentCss
31-
, com_util, com_Const, com_String, com_interface, Component, codemirror
32+
, com_util, com_Const, com_String, com_interface, Component, DataSelector, codemirror
3233
) {
3334
'use strict';
3435

@@ -405,6 +406,16 @@ define([
405406
break;
406407
}
407408
});
409+
410+
// focus on data selector input
411+
$(this.wrapSelector('.vp-data-selector')).on('focus', function(evt) {
412+
413+
});
414+
415+
// click on data selector input filter
416+
$(this.wrapSelector('.vp-data-selector ')).on('click', function(evt) {
417+
418+
});
408419
}
409420

410421
_unbindEvent() {

0 commit comments

Comments
 (0)