Variable selectors in loops and nested iterations for a multi level menu

[SolidSnakeGr]

Hello there, I'm trying to achieve a multi level menu using the following structure:

$data = array('menu_items' => array(
1 => array('id' => 1, 'title' => 'Home', 'parent_id' => 0),
2 => array('id' => 2, 'title' => 'Pages', 'parent_id' => 0, 'children' => array(

1 => array('id' => 3, 'title' => 'First', 'parent_id' => 2),
2 => array('id' => 4, 'title' => 'Second', 'parent_id' => 2)
))));

My layout has an element like this where our menu items should be populated in:
<ul class="menu-items"></ul>

We use the following template (menu_item.xml):

<?xml version="1.0"?>
<template>
<li><span>test title</span><ul class="submenu-items"><li></li></ul></li>
</template>

And our .tss goes like this:

.menu-items {content: template("menu_item.xml")}
.menu-items > li {repeat: data(menu_items)}
.menu-items > li:attr(class) {content: "item-",iteration(id)}
.menu-items > li > span {content: iteration(title)}
.menu-items > li > .submenu-items:iteration[children!=true] {display:none}

.menu-items > li > .submenu-items > li:iteration[children=true] {repeat: iteration(children)}
.menu-items > li > .submenu-items > li:iteration[parent_id!=0] {content: template("menu_item.xml"); content-mode: replace}
.menu-items > li > .submenu-items > li > span {content: iteration(title)}

Now the resulting html is the following:

<ul class="menu-items">
<li class="item-1"><span>Home</span></li>
<li class="item-2"><span>Pages</span><ul class="submenu-items">
<li><span>Pages</span><ul class="submenu-items"><li></li></ul></li>
<li><span>Pages</span><ul class="submenu-items"><li></li></ul></li>
</ul></li>
</ul>

So, my first question is, how can we now select the "item-2" class in order to make sure its children will only populate its own "ul.submenu-items"?

Being able to use an iteration value as a variable to the selector would be great IMHO.

And my second question is do nested iterations work?

In the example above I'm trying to run a loop within a loop, but the top level iteration's values override the lower level iterations, when the key names are the same, which is common when working with similar objects/arrays in a tree form.

So, what I would love to be able to do is use something like the following tss command:

.menu-items > li.item-:iteration[parent_id] > .submenu-items > li > span {content: iteration(title)}

..or something similar, maybe have a value[] command that can be called to use the value in the selector.
Either way, thanks for this amazing tool, transphporm is my favorite way of populating data in a view.

Edit: Tried to prevent my post from being so messy.. sorry if I failed miserably.. :)

[TRPB]

What you have should work, and there's a bug in transphporm. I'm not sure why but it's due to the way it's converting those rules to xpath selectors. The rules translate to:

string(72) "//*[contains(concat(' ', normalize-space(@class), ' '), ' menu-items ')]"
string(4) "//li"
string(4) "//li"
string(6) "//span"
string(4) "//li"
string(4) "//li"
string(6) "//span"

Only the first class selector is being identified correctly.

[SolidSnakeGr]

So, I got one step further now.. I realised there was some misconfiguration and the project was using an older version, so I made sure I'm on the latest one now (commit:6f5ff94).

Btw, since our project is on PHP 5.6.36, and the null coalescing operator (??) is not supported, I had to make a few modifications to make it run:

File: src/SheetLoader/SheetLoader.php - Line 19:
$this->time = !is_null($this->time) ? $this->time : time();
//$this->time = $time ?? time();

File: src/SheetLoader/TSSFile.php - Line 19:
$this->time = !is_null($this->time) ? $this->time : time();
//$this->time = $time ?? time();

File: src/SheetLoader/TSSFile.php - Line 27:
$this->cacheKey = !is_null($this->cacheKey) ? $this->cacheKey : (!is_null($rules['cacheKey']) ? $rules['cacheKey'] : null);
//$this->cacheKey = $this->cacheKey ?? $rules['cacheKey'] ?? null;

The composer.json file mentions "php": ">=5.6.0", maybe that should be updated.
So, back to the topic.. I'm using the following .tss to test how things work now:

.menu-items {content: template("menu_item.xml")}
.menu-items > li {repeat: data(menu_items); bind: iteration()}
.menu-items > li:attr(class) {content: "item-",iteration(id)}
.menu-items > li.item-:iteration[id] > span {content: iteration(title)}
.menu-items > li.item-:iteration[id] > .submenu-items:iteration[children!=true] {display:none}

.menu-items > li.item-:iteration[id] > .submenu-items:iteration[children=true] > li {repeat: iteration(children); bind: iteration()}
.menu-items > li.item-:iteration[parent_id] > .submenu-items > li:attr(data) {content: "son-of-a-",iteration(parent_id)}

Now this produces the following structure:

So, from my understanding the direct child selector ">" is not working as intended.. the reason I believe this is because this selector .menu-items > li:attr(class) actually updates the class in the children .submenu-items > li too..

Also the second loop I'm trying to execute still selects parent <li></li>s as well and the parent_id value always has a zero value.

Is there something I'm doing wrong?

[garrettw]

Not that it's necessarily affecting your output, but... your modifications to get rid of ?? aren't spot on. Use these instead.

Files: src/SheetLoader/SheetLoader.php, src/SheetLoader/TSSFile.php - Line 19:

$this->time = isset($time) ? $time : time();

File: src/SheetLoader/TSSFile.php - Line 27:

$this->cacheKey = isset($this->cacheKey) ? $this->cacheKey : (isset($rules['cacheKey']) ? $rules['cacheKey'] : null);

is_null() and isset() aren't exact opposites, and your $time replacement used the wrong variables.

[TRPB]

I've fixed the > operator, however there is still an issue with the output.

[garrettw]

@TomBZombie I forgot that I opened PR #198 to fix those remaining ??, among other things. Feel free to accept it whenever 😉

[TRPB]

@garrettw thanks, I'll take a look at that shortly!

There are a couple of different issues working together here:

1: XML and HTML. Because you're trying to load an XML document into a HTML document, it doesn't work. Changing menu_item.xml to:

	<li>
		<span>test title</span>
		<ul class="submenu-items">
			<li>
			</li>
		</ul>
	</li>

at least lets it be included.

2. repeat and content-mode: replace. These two lines:

.menu-items > li > .submenu-items > li:iteration[children] {repeat: iteration(children)}

.menu-items > li > .submenu-items > li:iteration[parent_id!=0] {content: template("menu_item.xml"); content-mode: replace}

Affect the same element. When repeat is executed, it creates a set of li elements and binds the relevant iteration value. however, when the li is replaced that association is lost. It should be as simple as copying any data and iteration bindings across when an element is replaced.

3. I've not worked out if this is related to (2) yet but there may be a problem when replacing multiple elements. Each time this rule runs:

.menu-items > li > .submenu-items > li:iteration[parent_id!=0] {content: template("menu_item.xml"); content-mode: replace}

We basically have foreach ($matchedListItems as $li) { // do the replacement } however, if DomDocument works the same way it does in Javascript, when one of the elements stored in $matchedListItems is removed from the document, it's also removed from the list. At the beginning of this loop, count($matchedListItems) is 2, after the first iteration, it's 1 and the loop ends.

[SolidSnakeGr]

So, we finally got to get the code to work as we wished (even with a 3 level menu), so I'll share my results here. It seems we didn't have to add the id to the selector at all.. we are in the same scope so replacing content does not affect other elements. It must have been the direct child selector that was messing us up. So, thank you both for your help!

If you feel there are further optimizations to our code, I'd be glad to hear your thoughts.
Don't want to make the post huge though, so I'll just attach the files:

data.php.txt
menu_item.xml.txt
menu_item.tss.txt

And the resulting structure looks like this:

We intend to use transphporm in production, so we'll track your updates closely.
Keep up the awesome work!