Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd4d33e9

Browse files
author
minjk-bl
committed
Test DataSelector component
1 parentfd96ad1 commitd4d33e9

File tree

4 files changed

+114
-13
lines changed

4 files changed

+114
-13
lines changed

‎css/component/dataSelector.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
/* Code Preview */
22
.vp-dataselector {
3+
display: none;
34
position: absolute;
4-
top:calc(50%-200px);
5+
top:calc(50%-225px);
56
left:calc(50%-200px);
67
width:400px;
7-
height:400px;
8+
height:450px;
89
background: white;
910
border:1px solidvar(--border-gray-color);
1011
z-index:999;
@@ -40,7 +41,11 @@
4041
padding-left:5px;
4142
}
4243
.vp-ds-option-box {
43-
44+
height:calc(100%-140px);
45+
margin-top:10px;
46+
}
47+
.vp-ds-option-inner-box {
48+
height:calc(100%-30px);
4449
}
4550
.vp-ds-preview {
4651
width:100%;

‎html/component/dataSelector.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@
99
<labelclass="vp-bold">Data</label>
1010
<labelclass="vp-bold">Type</label>
1111
</div>
12-
<divclass="vp-ds-variable-box vp-grid-box vp-scrollbar">
12+
<divclass="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
1313

1414
</div>
15+
<hrstyle="margin: 0px;"/>
1516
<divclass="vp-ds-option-box">
16-
Option Page
17+
<labelclass="vp-bold">Option Page</label>
18+
<divclass="vp-ds-option-inner-box">
19+
20+
</div>
1721
</div>
1822
</div>
1923
<divclass="vp-inner-popup-footer">
20-
<inputtype="text"/><!-- CodeMirror needed -->
2124
<divclass="vp-inner-popup-button-box">
25+
<buttontype="button"class="vp-button"id="vp_dsCancel">Cancel</button>
2226
<buttontype="button"class="vp-button activated"id="vp_dsOk">OK</button>
2327
</div>
2428
</div>

‎js/com/component/DataSelector.js‎

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ define([
1616
'vp_base/js/com/component/Component',
1717
'vp_base/js/com/component/SuggestInput',
1818
'vp_base/js/com/component/MultiSelector'
19-
],function(dataHTML,dataCss,com_String,com_util,Component,MultiSelector){
19+
],function(dataHTML,dataCss,com_String,com_util,Component,SuggestInput,MultiSelector){
2020
//========================================================================
2121
// [CLASS] DataSelector
2222
//========================================================================
@@ -42,6 +42,8 @@ define([
4242
...this.state
4343
}
4444

45+
this.columnSelector=null;
46+
4547
}
4648

4749
_bindEvent(){
@@ -52,17 +54,21 @@ define([
5254
that.close();
5355
});
5456

57+
// Click cancel
58+
$(that.wrapSelector('#vp_dsCancel')).on('click',function(){
59+
that.close();
60+
});
61+
5562
// Click ok
5663
$(that.wrapSelector('#vp_dsOk')).on('click',function(){
5764
// TODO: set target value
58-
letnewValue=that.state.data;
65+
letnewValue=that.generateCode();
5966

6067
$(that.state.target).val(newValue);
6168
$(that.state.target).data('type',that.state.dataType);
6269
that.state.finish(newValue);
6370
that.close();
6471
});
65-
6672
}
6773

6874
/**
@@ -73,7 +79,9 @@ define([
7379

7480
// Click variable item
7581
$(that.wrapSelector('.vp-ds-var-item')).off('click');
76-
$(that.wrapSelector('.vp-ds-var-item')).on('click',function(){
82+
// $(that.wrapSelector('.vp-ds-var-item')).on('click', function() {
83+
$(that.wrapSelector('.vp-ds-var-item')).single_double_click(function(evt){
84+
// single click
7785
$(that.wrapSelector('.vp-ds-var-item')).removeClass('selected');
7886
$(this).addClass('selected');
7987

@@ -82,7 +90,21 @@ define([
8290
that.state.data=data;
8391
that.state.dataType=dataType;
8492

85-
// TODO: load preview
93+
// render option page
94+
that.renderOptionPage();
95+
},function(evt){
96+
// double click to select directly
97+
letdata=$(this).find('.vp-ds-var-data').text();
98+
letdataType=$(this).find('.vp-ds-var-type').text();
99+
that.state.data=data;
100+
that.state.dataType=dataType;
101+
102+
letnewValue=that.generateCode();
103+
104+
$(that.state.target).val(newValue);
105+
$(that.state.target).data('type',that.state.dataType);
106+
that.state.finish(newValue);
107+
that.close();
86108
});
87109
}
88110

@@ -117,19 +139,91 @@ define([
117139
returndataHTML;
118140
}
119141

142+
templateForSlicing(){
143+
return`
144+
<div>
145+
<label>Type start/end index for slicing.</label>
146+
</div>
147+
<div>
148+
<input type="number" class="vp-input" id="vp_dsStart" placeholder="Start value"/>
149+
<input type="number" class="vp-input" id="vp_dsEnd" placeholder="End value"/>
150+
</div>
151+
`;
152+
}
153+
120154
render(){
121155
super.render();
122156

123157
this.loadVariables();
124158
}
125159

160+
renderOptionPage(){
161+
// initialize page and variables
162+
$(this.wrapSelector('.vp-ds-option-inner-box')).html('');
163+
this.columnSelector=null;
164+
165+
switch(this.state.dataType){
166+
case'DataFrame':
167+
// column selecting
168+
this.columnSelector=newMultiSelector(this.wrapSelector('.vp-ds-option-inner-box'),
169+
{mode:'columns',parent:[this.state.data]}
170+
);
171+
break;
172+
case'Series':
173+
case'list':
174+
case'ndarray':
175+
// slicing
176+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForSlicing());
177+
break;
178+
default:
179+
break;
180+
}
181+
}
182+
183+
generateCode(){
184+
let{ data, dataType}=this.state;
185+
letcode=newcom_String();
186+
187+
switch(dataType){
188+
case'DataFrame':
189+
code.append(data);
190+
if(this.columnSelector!=null){
191+
letresult=this.columnSelector.getDataList();
192+
letcolumnList=[];
193+
result&&result.forEach(obj=>{
194+
columnList.push(obj.code);
195+
});
196+
if(columnList.length>0){
197+
code.appendFormat('[{0}]',columnList.join(', '));
198+
}
199+
}
200+
break;
201+
case'Series':
202+
case'list':
203+
case'ndarray':
204+
code.append(data);
205+
// start / end value
206+
letstart=$(this.wrapSelector('#vp_dsStart')).val();
207+
letend=$(this.wrapSelector('#vp_dsEnd')).val();
208+
if((start&&start!='')||(end&&end!='')){
209+
code.appendFormat('[{0}:{1}]',start,end);
210+
}
211+
break;
212+
default:
213+
code.append(data);
214+
break;
215+
}
216+
returncode.toString();
217+
}
218+
126219
open(){
127220
$(this.wrapSelector()).show();
128221
}
129222

130223
close(){
131224
$(this.wrapSelector()).remove();
132225
}
226+
133227
}
134228

135229
returnDataSelector;

‎js/m_apps/SampleApp.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ define([
5454

5555
render(){
5656
super.render();
57-
58-
5957
}
6058

6159
generateCode(){

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp