This is an attempt to make complex Fluid templates with a lot of dynamically pieced together HTML tags more readable.
Disclaimer: This is no one fits all solution and should only be used when appropriate, certainly not for all tags in your template!
before:
<button
class="{class} {f:if(condition: isBold, then: 'bold')} {f:if(condition: isActive, then: 'active')}"
data-items="{data.items}"
data-count="{data.count}"
{f:if(condition: title, then: 'title="{title}"')}
><f:spaceless>
More content
</f:spaceless></button>after:
<ft:button
class="{class}"
:classList="{
'bold': isBold,
'active': isActive
}"
:dataList="{data}"
:spaceless="1"
title="{title}"
>
More content
</ft:button>Install the library via composer:
composer require sitegeist/fluid-tagbuilder
... and start using it in your templates:
<html xmlns:ft="http://typo3.org/ns/Sitegeist/FluidTagbuilder/ViewHelpers" data-namespace-typo3-fluid="true">- supports all tags currently defined by the HTML specification (see below)
- supports all currently defined
booleanHTML5 attributes- if
true:required="required" - if
false: no attribute
- if
- removes empty tag attributes
- generates optimized class attribute from
:classList="{...}" - generates data attributes from
:dataList="{...}" - generates additional tag attributes from
:attributeList="{...}" - short hand to remove whitespace with
:spaceless="1"
The extension includes short-hands for the following HTML5 elements:
aabbraddressareaarticleasideaudio(withautplay,controls,loop,mutedas additional boolean attributes)bbasebdibdoblockquotebodybrbutton(withdisabled,formnovalidateas additional boolean attributes)canvascaptioncitecodecolcolgroupdatadatalistdddeldetails(withopenas additional boolean attribute)dfndialog(withopenas additional boolean attribute)divdldtemembedfieldset(withdisabledas additional boolean attribute)figcaptionfigurefooterform(withnovalidateas additional boolean attribute)h1h2h3h4h5h6headheaderhgrouphrhtmliiframe(withallowfullscreenas additional boolean attribute)img(withismapas additional boolean attribute)input(withchecked,disabled,formnovalidate,multiple,readonly,requiredas additional boolean attributes)inskbdlabellegendlilink(withdisabledas additional boolean attribute)mainmapmarkmathmenumetameternavnoscriptobjectol(withreversedas additional boolean attribute)optgroup(withdisabledas additional boolean attribute)option(withdisabled,selectedas additional boolean attributes)outputpparampicturepreprogressqrprtrubyssampscript(withasync,defer,nomoduleas additional boolean attributes)sectionselect(withdisabled,multiple,requiredas additional boolean attributes)slotsmallsourcespanstrongstylesubsummarysupsvgtabletbodytdtemplatetextarea(withdisabled,readonly,requiredas additional boolean attributes)tfootththeadtimetitletrtrack(withdefaultas additional boolean attribute)uulvarvideo(withautoplay,controls,loop,muted,playsinlineas additional boolean attributes)wbr
All listed elements support the following boolean attributes:
autofocushiddenitemscope