fce.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<f:layout name="Content" />

<f:section name="Configuration">
    <flux:form id="Mehrspaltig" label="Mehrspaltig" icon="typo3conf/ext/nimelements/Resources/Public/icons/frame.png">
        {f:if(condition: settings.gridColumns, then: settings.gridColumns, else: 12) -> v:variable.set(name: 'numberOfColumns')}
      		<flux:field.checkbox name="settings.fluid" />
      		<flux:form.section name="columns">
      			<flux:form.object name="column">
      				<flux:field.select name="class" items="{f:render(section: 'Value', arguments: {iteration: iteration})
      				    -> v:iterator.loop(count: numberOfColumns, iteration: 'iteration', minimum: 1)}" label="Columns: numberOfColumns" />
      				<flux:field.checkbox name="addWell" />
      				<flux:field.input name="additionalClass" />
      			</flux:form.object>
      		</flux:form.section>
      		<flux:grid>
      			<flux:grid.row>
      				<f:for each="{columns}" as="sectionObject" iteration="iteration">
      					<v:variable.set name="width" value="{sectionObject.column.class -> v:format.substring(start: 7)}" />
      					<v:variable.set name="percent" value="{width  -> v:math.division(b: numberOfColumns) -> v:math.product(b: 100) -> v:math.round(decimals: 2)}" />
      					<flux:grid.column style="width: {percent}%">
      						<flux:form.content name="column{iteration.cycle}" label="{percent}%" />
      					</flux:grid.column>
      				</f:for>
      			</flux:grid.row>
      		</flux:grid>
        <flux:field.checkbox name="mobile"  label="Mobile anzeigen" default="1"/>
        <flux:field.checkbox name="tablet"  label="Tablet anzeigen" default="1"/>
        <flux:field.checkbox name="desktop" label="Desktop anzeigen" default="1"/>
    </flux:form>
</f:section>

<f:section name="Main">
	<div class="row{f:if(condition: settings.fluid, then: '-fluid')}">
		<f:for each="{columns}" as="sectionObject" iteration="iteration">
			<div class="{sectionObject.column.class} {sectionObject.column.additionalClass}">
				<flux:content.render area="column{iteration.cycle}" />
			</div>
		</f:for>
	</div>
</f:section>

<f:section name="Preview">
	<flux:widget.grid />
</f:section>

<f:section name="Value">col-md-{iteration.cycle}{f:if(condition: iteration.isLast, else: ',')}</f:section>