From ca3ad6305ec0655ad8475a12ac2228b61cdd9ba0 Mon Sep 17 00:00:00 2001 From: Lionel LASKE Date: Sat, 25 Aug 2012 20:23:36 +0000 Subject: Init commit --- (limited to 'html/lib/onyx/source/FlyweightPicker.js') diff --git a/html/lib/onyx/source/FlyweightPicker.js b/html/lib/onyx/source/FlyweightPicker.js new file mode 100644 index 0000000..4adfab4 --- /dev/null +++ b/html/lib/onyx/source/FlyweightPicker.js @@ -0,0 +1,110 @@ +/** + _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; + } + } +}); -- cgit v0.9.1