You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.5 KiB
87 lines
2.5 KiB
/**
|
|
_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);
|
|
}
|
|
});
|