Drawers within a List

SyntactixSyntactix
in Enyo 2
What is the proper way to reference the Drawer item within a list? The current way I am doing it seems to cause the open/close state machine to get confused (expected). Also it seems the drawer animations get broken when they are placed into a List control.

Example Code: 

{kind: "List", name: "faqList", fit: true, touch: true, multiSelect: false, fixedHeight: false, toggleSelected: true, onSetupItem: "faqSetupItem", components: [
	{name: "faqItem", classes: "faqItem enyo-border-box", ontap: "faqTap", components: [
		{name: "faqQuestion", classes: "faqQuestion"},
		{name: "faqDrawer", kind: "onyx.Drawer", orient: "v", animated: true, open: false, components: [
			{name: "faqAnswer", classes: "faqAnswer", allowHtml: true}
		]}
	]}
]}

faqTap: function(inSender, inEvent){
	this.$.faqDrawer.setOpen(!this.$.faqDrawer.open);
}
· Share on Twitter

Comments

  • walwal
    Not really an answer but my first thought is are you sure you can't use a repeater instead of a list?
    Most FAQs I come across are <100 Questions so a repeater would be OK and things just work with a repeater, drawers certainly do, and you avoid all the unpleasantness of lists & flyweight pattern.
    · Share on Twitter
  • theryanjduffytheryanjduffy
    The flyweight pattern is ultimately to blame for this. Because the enyo instances become disconnected from the underlying DOM nodes, their behavior is unpredictable. The expectation is that your list item can be wholly configured within the onSetupItem callback. With onyx.Drawer, it is setting CSS on the node on the fly which causes issues with flyweight. I'll skip the details for now and instead offer a somewhat kludgy workaround.

    In the fiddle below, I've overridden portions of onyx.Drawer as well as imposed a few requirements on the consumer of enyo.List to get everything working. It does work but I haven't tested it exhaustively. Hopefully this gets us closer to a reasonable solution.

    http://jsfiddle.net/ryanjduffy/Zn79h/3/
    · Share on Twitter
  • shaneroonishanerooni
    @theryanjduffy‌, i'm assuming the drawer should open when the list item is tapped. this thread is pretty old - is there something that changed in the code that no longer allows it to work? many thanks for your help!
    · Share on Twitter
  • theryanjduffytheryanjduffy
    @shanerooni There have been quite a few changes to the framework in that time. I hacked on it a bit so it doesn't error out but it also doesn't work yet. I'll look at it again tomorrow if I have time but hopefully this helps you in the mean time.

    http://jsfiddle.net/Zn79h/5/
    · Share on Twitter
  • shaneroonishanerooni
    ryan - thanks for your help. it seems like it might be a hassle with all the tweaks that are needed. i thought it would be a good idea to give the details of the list item (which is a sublist) using a drawer, but i'm okay with just using a popup that contains the sublist. if this was a quick and easy solution, and had better performance, it might be worthwhile. don't want you to spend too much time on something that might not have sufficient gains! :)
    · Share on Twitter
  • MAMISHO1MAMISHO1
    I'm working on the LubeTube APP for webOS and LuneOS. To display the comments that have answers, I need a control like this, but the list of ENYO have many complications, I reviewed codes JSfidle, but do not work in Enyo 2.5.1, someone could help me hand?
    · Share on Twitter
Sign In or Register to comment.