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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
/**
_onyx.FlyweightPicker_, a subkind of <a href="#onyx.Picker">onyx.Picker</a>,
is a picker that employs the flyweight pattern. It is used to display a
large list of selectable items. As with
<a href="#enyo.FlyweightRepeater">enyo.FlyweightRepeater</a>,
the _onSetupItem_ event allows for customization of item rendering.
To initialize the FlyweightPicker to a particular value, call _setSelected_
with the index of the item you wish to select, and call _setContent_ with
the item that should be shown in the activator button.
FlyweightPicker will send an _onSelect_ event with a selected item's
information. This can be received by a client application to determine which
item was selected.
enyo.kind({
handlers: {
onSelect: "itemSelected"
},
components: [
{kind: "onyx.PickerDecorator", components: [
{},
{name: "yearPicker", kind: "onyx.FlyweightPicker", count: 200,
onSetupItem: "setupYear", components: [
{name: "year"}
]
}
]}
],
create: function() {
var d = new Date();
var y = d.getYear();
this.$.yearPicker.setSelected(y);
this.$.year.setContent(1900+y);
},
setupYear: function(inSender, inEvent) {
this.$.year.setContent(1900+inEvent.index);
},
itemSelected: function(inSender, inEvent) {
enyo.log("Picker Item Selected: " + inEvent.selected.content);
}
})
*/
enyo.kind({
name: "onyx.FlyweightPicker",
kind: "onyx.Picker",
classes: "onyx-flyweight-picker",
published: {
//* How many rows to render
count: 0
},
events: {
//* Sends the row index, and the row control, for decoration.
onSetupItem: "",
onSelect: ""
},
handlers: {
onSelect: "itemSelect"
},
components: [
{name: "scroller", kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy", components: [
{name: "client", kind: "FlyweightRepeater", ontap: "itemTap"}
]}
],
scrollerName: "scroller",
create: function() {
this.inherited(arguments);
this.countChanged();
},
rendered: function() {
this.inherited(arguments);
this.selectedChanged();
},
scrollToSelected: function() {
var n = this.$.client.fetchRowNode(this.selected);
this.getScroller().scrollToNode(n, !this.menuUp);
},
countChanged: function() {
this.$.client.count = this.count;
},
processActivatedItem: function(inItem) {
this.item = inItem;
},
selectedChanged: function(inOld) {
if (!this.item) {
return;
}
if (inOld !== undefined) {
this.item.removeClass("selected");
this.$.client.renderRow(inOld);
}
this.item.addClass("selected");
this.$.client.renderRow(this.selected);
// need to remove the class from control to make sure it won't apply to other rows
this.item.removeClass("selected");
var n = this.$.client.fetchRowNode(this.selected);
this.doChange({selected: this.selected, content: n && n.textContent || this.item.content});
},
itemTap: function(inSender, inEvent) {
this.setSelected(inEvent.rowIndex);
//Send the select event that we want the client to receive.
this.doSelect({selected: this.item, content: this.item.content})
},
itemSelect: function(inSender, inEvent) {
//Block all select events that aren't coming from this control. This is to prevent select events from MenuItems since they won't have the correct value in a Flyweight context.
if (inEvent.originator != this) {
return true;
}
}
});
|
