Fluid Typo3 Content Element: Alphabetic Index

AlphabeticIndex.html

<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>

locallang.xlf

[...]
<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>
[...]