StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think it would help you to think of this problem as a list that could be 'infinity' items long and have 'infinity' levels of nesting. Right now, there's a lot of hard coded numbers and text in here and your spacing is all set in a very rigid way. To think of this in terms of an infinite list, you would start with the rules that apply to each level of expanding and collapsing. </p> <ul> <li>Each item appears <code>Y</code> pixels below the previous group of items.</li> <li>Each subgroup appears <code>X</code> to the right of the parent group.</li> <li>When a group is collapsed, the children within it are hidden.</li> <li>A parent item contains all of its children.</li> </ul> <p>From here you could imagine that each item in the list is also a group of items (and the items inside that group are groups of items (and the items inside that group...)). This is known as the <a href="http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=composite%20pattern" rel="nofollow">Composite Design Pattern</a>. If you were to create a way for a line item to contain the children within it, perhaps by making each one a sprite that can have child display objects, you can easily get the height of the group (expanded or collapsed) and treat it as a single unit. When the group is expanded the child objects are added to the group (using <code>addChild</code>) and when it's collapsed, they're removed (<code>removeChild</code>). </p> <p>By creating a new class that represents the checklist line it will help you to keep these items encapsulated in smaller easier to work with packages so you're not moving around labels and checkboxes all over the place, but rather just a single line item / group. That group could contain a list of line item objects which in turn could contain more lists. The functionality stays more or less the same no matter how many levels deep it goes.</p> <p>I realize all of this is more of an introduction to object-oriented-programming than a direct answer, but learning this stuff will pay off in a big way. To sum it up, the code you posted is trying to force these objects into specific positions depending on specific cases, and I think the answer is to try to create objects that can adapt to the situation based on rules you set. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload