[whatwg] Interleaved repetition blocks

[Mark Schenk]

I've been reading my way through the chapter on repetition and there are a  
couple of things I think can be imporved upon, namely the ability to have  
templates interleave. I will try to explain it with an example. Let us  
consider the next markup:

### start example ###
<div id="container">
<h1>This is an example of repetition</h1>

<div repeat="template" id="type1">This is a template</div>
<div repeat="template" id="type2">This is a different template</div>
<div repeat="template" id="type3">This is yet another different  
template</div>
</div>

<div id="addbuttoncontainer">
<button type="add" template="type1">Add type1</button>
<button type="add" template="type2">Add type2</button>
<button type="add" template="type3">Add type3</button>
</div>
### end example ###

Currently when you click on the add buttons you would get stacks of  
repetition blocks, each starting above the respective repetition template.  
However I would like to see the repetition blocks being interleaved,  
depending on the order in which you click the buttons (and I think it  
would be trivial to allow both stacked/interleaved with the changes I will  
suggest). So you would get the following, regardless of the order in which  
you press the add-buttons.

### start example ###
<div id="container">
<h1>This is an example of repetition</h1>

<div repeat="0">This is a template</div>
<div repeat="1">This is a template</div>
<div repeat="2">This is a template</div>
<div repeat="template" id="type1">This is a template</div>

<div repeat="0">This is a different template</div>
<div repeat="1">This is a different template</div>
<div repeat="2">This is a different template</div>
<div repeat="template" id="type2">This is a different template</div>

<div repeat="0">This is yet another different template</div>
<div repeat="1">This is yet another different template</div>
<div repeat="2">This is yet another different template</div>
<div repeat="template" id="type3">This is yet another different  
template</div>
</div>

<div id="addbuttoncontainer">
<button type="add" template="type1">Add type1</button>
<button type="add" template="type2">Add type2</button>
<button type="add" template="type3">Add type3</button>
</div>
### end example ###


I see a need for the ability to interleave different repetition blocks,  
which would mean that when a repetition template is cloned, it moves up  
(within its containing element) untill it finds an existing repetition  
block (or any other element such as H1 in the example).

It would now be necessary to introduce a new attribute to repetition  
blocks which indicates the parent-repetition-template, which I will  
henceforth call the parent attribute (for lack of better idea). This new  
attribute is necessary for finding the correct index value of the  
repetitionblock. Currently this is simply done by going upwards from the  
template, but that would be impossible when repetition blocks are  
interleaved.

So if you press the buttons in the order 3,1,2,3,1,1,2 you would then get:

### start example ###
<div id="container">
<h1>This is an example of repetition</h1>

<div repeat="0" parent="type3">This is yet another different template</div>
<div repeat="0" parent="type1">This is a template</div>
<div repeat="0" parent="type2">This is a different template</div>
<div repeat="1" parent="type3">This is yet another different template</div>
<div repeat="1" parent="type1">This is a template</div>
<div repeat="2" parent="type1">This is a template</div>
<div repeat="1" parent="type2">This is a different template</div>

<div repeat="template" id="type1">This is a template</div>
<div repeat="template" id="type2">This is a different template</div>
<div repeat="template" id="type3">This is yet another different  
template</div>
</div>

<div id="addbuttoncontainer">
<button type="add" template="type1">Add type1</button>
<button type="add" template="type2">Add type2</button>
<button type="add" template="type3">Add type3</button>
</div>
### end example ###

You might even be able to create extra attributes to the add-button,  
namely add_stack (add after last occurence of the specific block) and  
add_interleave (add after last occurence of any repetion block) which  
would allow you to combine both methods. This might be too much of a good  
thing, but would give tremendous flexbility with little extra effort. For  
instance if you have the same sequence as the previous example  
(3,1,2,3,1,1,2) but the button types are interleave, stack and stack  
respectively, you would get:

### start example ###
<div id="container">
<h1>This is an example of repetition</h1>

<div repeat="0" parent="type3">This is yet another different template</div>
<div repeat="1" parent="type3">This is yet another different template</div>
<div repeat="0" parent="type1">This is a template</div>
<div repeat="0" parent="type2">This is a different template</div>
<div repeat="1" parent="type2">This is a different template</div>
<div repeat="1" parent="type1">This is a template</div>
<div repeat="2" parent="type1">This is a template</div>

<div repeat="template" id="type1">This is a template</div>
<div repeat="template" id="type2">This is a different template</div>
<div repeat="template" id="type3">This is yet another different  
template</div>
</div>

<div id="addbuttoncontainer">
<button type="addinterleave" template="type1">Add type1</button>
<button type="addstack" template="type2">Add type2</button>
<button type="addstack" template="type3">Add type3</button>
</div>
### end example ###

So with the addition of the parent attribute on a repetition block (and  
additionally the add_stack and add_interleave attributes)you obtain much  
more flexibility. Note that move_up and move_down should only move a  
repetition block up/down, so regardless of the way the repetition blocks  
are ordered, you always get a logical action.


There is another tremendous advantage to introducing the parent attribute,  
which has to do with add buttons without a template attribute specified,  
but with an ancestor that is a repetition block. Currently this only works  
with repetition blocks that are not ancestor repetition blocks (because  
the template has to be found), which would result in Add buttons being  
cloned, which will subsequently not be effective. When using the parent  
attribute, a UA will always know which template is linked to the  
repitition block, so you can insert new repetition blocks anywhere.


What do you guys think?


/M