Fluid Typo3 Content Element: Alphabetic Index
<div xmlns="http://www.w3.org/1999/xhtml" lang="en" | |
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" | |
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers" | |
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"> | |
<f:layout name="Content" /> | |
<f:section name="Configuration"> | |
<flux:form id="azIndex" options="{group: 'FCE'}"> | |
<flux:field.multiRelation | |
name="settings.entryPages" | |
label="Entry Pages" | |
table="pages" | |
minItems="1" maxItems="1000" size="6" | |
multiple="true" | |
> | |
<flux:wizard.suggest/> | |
</flux:field.multiRelation> | |
</flux:form> | |
</f:section> | |
<f:section name="Preview"> | |
<!-- If you wish, place custom backend preview content here --> | |
<strong>Entry Pages:</strong> {settings.entryPages} | |
</f:section> | |
<f:section name="Main"> | |
<!-- set global var to access it in subsections --> | |
<v:variable.register.set name="azPageList" value=""/> | |
<!-- split settings.entryPages string into array --> | |
<f:variable name="entryUIDs"><v:iterator.explode content="{settings.entryPages}" glue=","/></f:variable> | |
<!-- recursive walk through every entry --> | |
<f:for each="{entryUIDs}" as="entryPage"> | |
<f:render section="MenuRecursionStart" arguments="{entryPage: '{entryPage}'}"/> | |
</f:for> | |
<!-- hyperlinks to headers --> | |
<f:render section="TableOfLetters"/> | |
<!-- sort collected pages by alphabet and render --> | |
<f:render section="SortAndRender"/> | |
<f:section name="SortAndRender"> | |
<f:for each="{v:variable.register.get(name: 'azPageList') -> v:iterator.sort(sortBy: 'title')}" as="item"> | |
<f:variable name="currentLetter" value="{v:format.substring(content: item.title, start: 0, length: 1)}"/> | |
<f:if condition="{currentLetter} !== {previousLetter}"> | |
<!-- if not the first headline, close ul tag --> | |
<f:if condition="{previousLetter} !== ''"> | |
</ul> | |
</f:if> | |
<!-- render headline & update previousLetter--> | |
<h2 id="{currentLetter}"><v:format.case string="{currentLetter}" case="upper"/></h2><ul class="lst-none lst-angel"> | |
<f:variable name="previousLetter" value="{currentLetter}"/> | |
</f:if> | |
<li class="li {item.class}"> | |
<v:page.link pageUid="{item.uid}" /> | |
</li> | |
</f:for> | |
<!-- close last ul --> | |
</ul> | |
</f:section> | |
<f:section name="TableOfLetters"> | |
<f:variable name="previousLetter" value=""/> | |
<f:for each="{v:variable.register.get(name: 'azPageList') -> v:iterator.sort(sortBy: 'title')}" as="item"> | |
<f:variable name="currentLetter" value="{v:format.substring(content: item.title, start: 0, length: 1)}"/> | |
<f:if condition="{currentLetter} !== {previousLetter}"> | |
<!-- if not the first letter, add divider --> | |
<f:if condition="{previousLetter} !== ''"> | |
| | |
</f:if> | |
<!-- render letter & update previousLetter--> | |
<a href="#{currentLetter}"><v:format.case string="{currentLetter}" case="upper"/></a> | |
<f:variable name="previousLetter" value="{currentLetter}"/> | |
</f:if> | |
</f:for> | |
<hr> | |
</f:section> | |
<f:section name="MenuRecursionStep"> | |
<!-- read from global var --> | |
<f:variable name="pageList" value="{v:variable.register.get(name: 'azPageList')}"/> | |
<f:if condition="{currentPage.hasSubPages}"> | |
<v:menu pageUid="{currentPage.uid}"> | |
<f:if condition="{menu}"> | |
<!-- merge menu array to page collection --> | |
<f:variable name="pageList" value="{menu -> v:iterator.merge(b: pageList, useKeys: 1)}"/> | |
<!-- write back to global var --> | |
<v:variable.register.set name="azPageList" value="{pageList}"/> | |
<f:for each="{menu}" as="currentSubPage"> | |
<f:render section="MenuRecursionStep" arguments="{currentPage: '{currentSubPage}'}" /> | |
</f:for> | |
</f:if> | |
</v:menu> | |
</f:if> | |
</f:section> | |
<f:section name="MenuRecursionStart"> | |
<!-- read from global var --> | |
<f:variable name="pageList" value="{v:variable.register.get(name: 'azPageList')}"/> | |
<v:menu pageUid="{entryPage}"> | |
<f:if condition="{menu}"> | |
<!-- merge menu array to page collection --> | |
<f:variable name="pageList" value="{menu -> v:iterator.merge(b: pageList, useKeys: 1)}"/> | |
<!-- write back to global var --> | |
<v:variable.register.set name="azPageList" value="{pageList}"/> | |
<f:for each="{menu}" as="startLevelPage"> | |
<f:render section="MenuRecursionStep" arguments="{currentPage: '{startLevelPage}'}"/> | |
</f:for> | |
</f:if> | |
</v:menu> | |
</f:section> | |
</f:section> | |
</div> |
[...] | |
<trans-unit id="flux.azIndex"> | |
<source>Alphabetic Index</source> | |
</trans-unit> | |
<trans-unit id="flux.azIndex.description"> | |
<source>Alphabetic sitemap of selected pages</source> | |
</trans-unit> | |
[...] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment