diff options
Diffstat (limited to 'html/lib/onyx/source/Picker.js')
-rw-r--r-- | html/lib/onyx/source/Picker.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/html/lib/onyx/source/Picker.js b/html/lib/onyx/source/Picker.js new file mode 100644 index 0000000..7e758c0 --- /dev/null +++ b/html/lib/onyx/source/Picker.js @@ -0,0 +1,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); + } +}); |