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
81
82
83
84
85
86
87
|
/**
_onyx.Picker_, a subkind of <a href="#onyx.Menu">onyx.Menu</a>, is used to
display a list of items that can be selected. It is meant to be used in
conjunction with an <a href="#onyx.PickerDecorator">onyx.PickerDecorator</a>.
The decorator loosely couples the Picker with an
<a href="#onyx.PickerButton">onyx.PickerButton</a>--a button that, when
tapped, shows the picker. Once an item is selected, the list of items closes,
but the item stays selected and the PickerButton displays the choice that
was made.
To initialize the Picker to a particular value, set the _active_ property to
true for the item that should be selected.
{kind: "onyx.PickerDecorator", components: [
{}, //this uses the defaultKind property of PickerDecorator to inherit from PickerButton
{kind: "onyx.Picker", components: [
{content: "Gmail", active: true},
{content: "Yahoo"},
{content: "Outlook"},
{content: "Hotmail"}
]}
]}
Each item in the list is an <a href="#onyx.MenuItem">onyx.MenuItem</a>, so
an _onSelect_ event with the item can be listened to by a client application
to determine which picker item was selected.
*/
enyo.kind({
name: "onyx.Picker",
kind: "onyx.Menu",
classes: "onyx-picker enyo-unselectable",
published: {
selected: null,
maxHeight: "200px"
},
events: {
onChange: ""
},
components: [
{name: "client", kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy"}
],
floating: true,
showOnTop: true,
scrollerName: "client",
create: function() {
this.inherited(arguments);
this.maxHeightChanged();
},
getScroller: function() {
return this.$[this.scrollerName];
},
maxHeightChanged: function() {
this.getScroller().setMaxHeight(this.maxHeight);
},
showingChanged: function() {
this.getScroller().setShowing(this.showing);
this.inherited(arguments);
if (this.showing && this.selected) {
this.scrollToSelected();
}
},
scrollToSelected: function() {
this.getScroller().scrollToControl(this.selected, !this.menuUp);
},
itemActivated: function(inSender, inEvent) {
this.processActivatedItem(inEvent.originator)
return this.inherited(arguments);
},
processActivatedItem: function(inItem) {
if (inItem.active) {
this.setSelected(inItem);
}
},
selectedChanged: function(inOld) {
if (inOld) {
inOld.removeClass("selected");
}
if (this.selected) {
this.selected.addClass("selected");
this.doChange({selected: this.selected, content: this.selected.content});
};
},
resizeHandler: function() {
this.inherited(arguments);
this.adjustPosition(false);
}
});
|
