Sightly close tags issue within condition

[kevingtan]

Hi All,

I have some jsp code to be converted to Sightly. Here is what I try to achieve, display a multi-col drawer:

col1-item1     col2-item1

col1-item2     col2-item2

<!--s1-->         <!-- s1-->

col1-item3     col2-item3

col1-item4     col2-item4

Where s1 is a separator. JSP code:

// iterate the menu as column

// - set blockOpen=false 

 <ul><li class="main-nav__sub-col"><ul>

            <c:forEach items="${column}" var="item">

            <c:if test="${item.breakGroup and blockOpen}"></ul></li></ul><ul><li class="main-nav__sub-col"><ul></c:if>

            <li><a href="${item.url}">${item.title}</a></li>

           <c:set var="blockOpen" value="${true}" />

            </c:forEach>

</ul></li></ul>

Converting to Sightly:

// iterate menu as column, just ignore blockOpen to make it simple

<ul><li class="main-nav__sub-col"><ul>

    <sly data-sly-list.item="${column}">

        <sly data-sly-set.itemTitle="${item.title}" /><!-- datapoint: ${item.breakGroup} -->

        <sly data-sly-test="${item.breakGroup}"><!-- pivot-tag --></ul></li></ul><ul><li class="main-nav__sub-col"><ul><!-- /end pivot-tag --></sly>

        <li><a href="#" target="${item.target}">${itemTitle @ content='html'}</a></li>

    </sly>

</ul></li></ul>

The </ul> tag near <!--pivot-tag--> will close the condition and never reach ${itemTitle @ content='html'}

I tried this by breaking the close tags and open tags:

<sly data-sly-test....>${'</ul></li></ul>' @ context='html'}</sly> // followed by <ul><li...><ul>

It just ignores the code, printing out nothing.

Much appreciated!

-kt

[ManviSharma]

Here's a Sightly code snippet that should achieve the desired multi-col drawer layout:

<ul class="main-nav__sub-col">
<sly data-sly-list.column="${column}">
<sly data-sly-if="${column.indexOf(item) % 2 == 0}">
<ul class="main-nav__sub-col--left">
<li><a href="${item.url}" target="${item.target}">${item.title}</a></li>
</ul>
<sly data-sly-test="${column.indexOf(item) == column.size - 1}"></ul></li></ul><ul class="main-nav__sub-col"><li class="main-nav__sub-col--right"><ul><!-- /sly-test --></sly>
</sly>
<sly data-sly-else>
<ul class="main-nav__sub-col--right">
<li><a href="${item.url}" target="${item.target}">${item.title}</a></li>
</ul>
</sly>
</sly>
</ul>
This code iterates over the column list and uses the column.indexOf(item) function to determine if the current item is in an even or odd position. Based on the position, the item is placed in either the left or right column. The sly-test condition checks if the item is the last in the list and closes the </ul></li></ul> tags before opening a new set of ul tags for the next column.

[kevingtan]

Hi @ManviSharma 

Thanks for your code, unfortunately, the unmatched </ul> inside of <sly> won't work unless there is a precedent related <ul> code for it. I have been testing this for hours. 

<ul><li><ul>

<sly list-something>

<sly data-sly-test="${cond}"></ul></li></ul></sly>

<!--/* this won't work if trying to close the tag under some conditions. the </ul> tag may be considered as part of the sly. It will jump to the next item by skipping the rest of the content */-->

<div>test content</div>

</sly>

I was trying this ${'</ul>' @ context = 'elementName'}, but Sightly doesn't support <ul> with elementName context, as stated in https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#121-display-context

It has to be the following:

<sly data-sly-test="${cond}"><ul><li>something here</li></ul></sly>

<!--/* this will work. Sightly may consider the tags are matched */-->

-kt