/**
_onyx.FlyweightPicker_, a subkind of onyx.Picker,
is a picker that employs the flyweight pattern. It is used to display a
large list of selectable items. As with
enyo.FlyweightRepeater,
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;
}
}
});