Merge pull request #7 from mficzel/feature/addEditableAndContentProto…

…types

FEATURE: Add prototypes `Editable` and `Content`

README.md

@@ -5,9 +5,13 @@
 - `PackageFactory.AtomicFusion:Component`: create component that adds all properties to the `props` context 
 and afterwards evaluetes the `renderer`
 - `PackageFactory.AtomicFusion:ClassNames`: create conditional class-names from fusion-keys
+- `PackageFactory.AtomicFusion:Editable`: create and editable tag for a property
+- `PackageFactory.AtomicFusion:Content`: component base-prototype for inline editable content nodes 
 
 ## Usage 
 
+### 1. Component definition
+
 ```
 prototype(Vendor.Site:Component) < prototype(PackageFactory.AtomicFusion:Component) {
     
@@ -44,18 +48,54 @@ prototype(Vendor.Site:Component) < prototype(PackageFactory.AtomicFusion:Compone
             }
 
             description = Neos.Fusion:Tag {
-                tagName = 'p'
                 content = ${props.description}
             }
         }
     }
 }
 ```
 
+### 2. Content Mapping
+
+```
+#
+# Map node content zo a presentational component 
+# 
+# instead of Neos.Neos:Content PackageFactory.AtomicFusion:Content 
+# is used base prototype 
+#
+prototype(Vendor.Site:ExampleContent) < prototype(PackageFactory.AtomicFusion:Content) {
+	renderer = Vendor.Site:Component {
+	
+		# 
+		# pass boolean property 'bold' from the
+		# node to the component
+		#
+		bold = ${q(node).property('bold')}	
+	
+		#
+		# use the editable component to pass an editable 
+		# but use a span instead a div tag in the backend
+		#
+		title = PackageFactory.AtomicFusion:Editable {
+			property = 'title'
+			block = false
+		}
+		
+		#
+		# use the editable component to pass an editable 
+		# tag for the property 'description'
+		#
+		description = PackageFactory.AtomicFusion:Editable {
+			property = 'description'
+		}
+	}
+}
+```
+
 ## Installation
 
-PackageFactory.AtomicFusion is available via packagist. Just add `"packagefactory/atomicfusion" : "~1.0"` to the 
-require section of the composer.json or run `composer require packagefactory/atomicfusion`. 
+PackageFactory.AtomicFusion is available via packagist. Just run `composer require packagefactory/atomicfusion`. 
 
 We use semantic-versioning so every breaking change will increase the major-version number.
 

Resources/Private/Fusion/Prototypes/Content.fusion

@@ -0,0 +1,11 @@
+prototype(PackageFactory.AtomicFusion:Content) < prototype(PackageFactory.AtomicFusion:Component) {
+	renderer = ''
+
+	# The following line must not be removed as it adds required meta data to all content elements in backend
+	@process.contentElementWrapping {
+		expression = Neos.Neos:ContentElementWrapping
+		@position = 'end 999999999'
+	}
+
+	@exceptionHandler = 'Neos\\Neos\\Fusion\\ExceptionHandlers\\NodeWrappingHandler'
+}

Resources/Private/Fusion/Prototypes/Editable.fusion

@@ -0,0 +1,23 @@
+prototype(PackageFactory.AtomicFusion:Editable) < prototype(PackageFactory.AtomicFusion:Component) {
+	property = null
+	block = true
+
+	renderer = Neos.Fusion:Case {
+		editable {
+			condition = ${node.context.inBackend && node.context.currentRenderingMode.edit}
+			renderer = Neos.Fusion:Tag {
+				tagName = ${props.block ? 'div' : 'span'}
+				content = ${q(node).property(props.property)}
+				@process.contentElementEditableWrapping = Neos.Neos:ContentElementEditable {
+					property = ${props.property}
+				}
+				@if.hasProperty = ${props.property ? true : false}
+			}
+		}
+
+		notEditable {
+			condition = true
+			renderer = ${q(node).property(props.property)}
+		}
+	}
+}