/
MyPicker.ux
80 lines (70 loc) · 2.31 KB
/
MyPicker.ux
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<Panel ux:Class="MyPicker" Width="100%" Alignment="TopCenter">
<object ux:Property="Data" />
<string ux:Property="Selected" />
<int ux:Property="StPos" />
<JavaScript>
var Observable = require('FuseJS/Observable');
var isScrolling = Observable(false);
var stopScrolling = Observable(false);
var endPosition = Observable();
var position = Observable(0);
var scrollPosition = Observable(50);
var selecting = Observable();
function scrollFunction(arg) {
position.value = arg.value[1];
isScrolling.value = true;
stopScrolling.value = false;
endPosition.value = Math.round((position.value-10)/50) * 50;
}
function stopScroll() {
isScrolling.value = false;
stopScrolling.value = true;
}
function scrolling(arg) {
// console.log(arg.data.index);
}
var srcData = this.Data.inner();
var i = 1;
var datas = srcData.map(function(data) {
return {
data: data,
index: i++
}
});
module.exports = {
position, scrollFunction, stopScroll, isScrolling, scrolling, endPosition, stopScrolling,
datas, scrollPosition,
};
</JavaScript>
<Rectangle Width="100%" Height="30" Alignment="Center">
<Stroke Width="1" Color="#aaa" />
<PointAttractor ux:Name="centerAttract" Radius="10" Strength="10" />
</Rectangle>
<ScrollView ux:Name="myScroll" ScrollPosition="{Property StPos}" ScrollPositionChanged="{scrollFunction}">
<WhileTrue Value="{isScrolling}">
<Callback Handler="{stopScroll}" Delay="0.05" />
</WhileTrue>
<WhileTrue Value="{stopScrolling}">
<ScrollTo Target="myScroll" Position="{endPosition}" Delay="0.05"/>
</WhileTrue>
<StackPanel Width="100%" ItemSpacing="20" Margin="0,60,0,0">
<Selection Value="{Property Selected}" MaxCount="1" MinCount="1" />
<Each Items="{datas}">
<Rectangle Width="100%" Height="30">
<Selectable Value="{data}" />
<Text ux:Name="sText" Value="{data}" Alignment="Center" Color="#ddd" HitTestMode="None">
<WhileVisibleInScrollView>
<Change sText.Color="#000" Duration="0.5" />
<Scale Factor="1.2" />
</WhileVisibleInScrollView>
<EnteredForceField ForceField="centerAttract">
<Callback Handler="{scrolling}" />
<ToggleSelection Delay="0.1" />
</EnteredForceField>
<Draggable />
</Text>
</Rectangle>
</Each>
</StackPanel>
</ScrollView>
</Panel>