sitegeist / fluid-tagbuilder
ViewHelpers for html5 tags that improve readability in complex fluid templates
Installs: 3 997
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 5
Forks: 0
Open Issues: 2
Requires
- php: ^8.2
- typo3fluid/fluid: ^4.0 || <=2.14.1
Requires (Dev)
This package is auto-updated.
Last update: 2024-10-11 12:30:41 UTC
README
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>
Getting started
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">
Features
- supports all tags currently defined by the HTML specification (see below)
- supports all currently defined
boolean
HTML5 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"
Supported HTML tags
The extension includes short-hands for the following HTML5 elements:
a
abbr
address
area
article
aside
audio
(withautplay
,controls
,loop
,muted
as additional boolean attributes)b
base
bdi
bdo
blockquote
body
br
button
(withdisabled
,formnovalidate
as additional boolean attributes)canvas
caption
cite
code
col
colgroup
data
datalist
dd
del
details
(withopen
as additional boolean attribute)dfn
dialog
(withopen
as additional boolean attribute)div
dl
dt
em
embed
fieldset
(withdisabled
as additional boolean attribute)figcaption
figure
footer
form
(withnovalidate
as additional boolean attribute)h1
h2
h3
h4
h5
h6
head
header
hgroup
hr
html
i
iframe
(withallowfullscreen
as additional boolean attribute)img
(withismap
as additional boolean attribute)input
(withchecked
,disabled
,formnovalidate
,multiple
,readonly
,required
as additional boolean attributes)ins
kbd
label
legend
li
link
(withdisabled
as additional boolean attribute)main
map
mark
math
menu
meta
meter
nav
noscript
object
ol
(withreversed
as additional boolean attribute)optgroup
(withdisabled
as additional boolean attribute)option
(withdisabled
,selected
as additional boolean attributes)output
p
param
picture
pre
progress
q
rp
rt
ruby
s
samp
script
(withasync
,defer
,nomodule
as additional boolean attributes)section
select
(withdisabled
,multiple
,required
as additional boolean attributes)slot
small
source
span
strong
style
sub
summary
sup
svg
table
tbody
td
template
textarea
(withdisabled
,readonly
,required
as additional boolean attributes)tfoot
th
thead
time
title
tr
track
(withdefault
as additional boolean attribute)u
ul
var
video
(withautoplay
,controls
,loop
,muted
,playsinline
as additional boolean attributes)wbr
All listed elements support the following boolean attributes:
autofocus
hidden
itemscope