===================================
Wrapping a List of Content Elements
===================================

Create a simple Wrapper that can contain multiple content Elements.

Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml) ::

  'Vendor:Box':
    superTypes:
      'Neos.Neos:Content': TRUE
    ui:
      group: structure
      label: Box
      icon: icon-columns
      inlineEditable: true
    childNodes:
      column0:
        type: 'Neos.Neos:ContentCollection'

Fusion (Sites/Vendor.Site/Resources/Private/Fusion/NodeTypes.fusion) ::

	prototype(Vendor:Box) < prototype(Neos.Neos:Content) {
		templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/Box.html'
		columnContent = Neos.Neos:ContentCollection
		columnContent {
			nodePath = 'column0'
		}
	}

Html (Sites/Vendor.Site/Private/Templates/FusionObjects/Box.html) ::

	{namespace fusion=Neos\Fusion\ViewHelpers}

	<div class="container box">
		<div class="column">
			<fusion:render path="columnContent" />
		</div>
	</div>


Extending it to use an option
=============================

You can even simply extend the box to provide a checkbox for different properties.

Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml) ::

  'Vendor:Box':
    superTypes:
      'Neos.Neos:Content': TRUE
    ui:
      group: structure
      label: Box
      icon: icon-columns
      inlineEditable: TRUE
      inspector:
        groups:
          display:
            label: Display
            position: 5
    properties:
      collapsed:
        type: boolean
        ui:
          label: Collapsed
          reloadIfChanged: TRUE
          inspector:
            group: display
    childNodes:
      column0:
        type: 'Neos.Neos:ContentCollection'

Fusion (Sites/Vendor.Site/Resources/Private/Fusion/NodeTypes.fusion) ::

	prototype(Vendor:Box) < prototype(Neos.Neos:Content) {
		templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/Box.html'
		columnContent = Neos.Neos:ContentCollection
		columnContent {
			nodePath = 'column0'
		}
		collapsed = ${q(node).property('collapsed')}
	}

Html (Sites/Vendor.Site/Private/Templates/FusionObjects/Box.html) ::

	{namespace fusion=Neos\Fusion\ViewHelpers}

	<f:if condition="{collapsed}">
		<button>open the collapsed box via js</button>
	</f:if>
	<div class="container box {f:if(condition: collapsed, then: 'collapsed', else: '')}">
		<div class="column">
			<fusion:render path="columnContent" />
		</div>
	</div>