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
Views
Replies
Total Likes
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.
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
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies