Merge pull request #13 from PackageFactory/feature/addClassNamesHelper

FEATURE: add `AtomicFusion.classNames` eel-helper

Classes/PackageFactory/AtomicFusion/Eel/AtomicFusionHelper.php

@@ -0,0 +1,69 @@
+<?php
+namespace PackageFactory\AtomicFusion\Eel;
+
+/**
+ * This file is part of the PackageFactory.AtomicFusion package
+ *
+ * (c) 2016
+ * Wilhelm Behncke <[email protected]>
+ * Martin Ficzel <[email protected]>
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+
+use Neos\Flow\Annotations as Flow;
+use Neos\Eel\ProtectedContextAwareInterface;
+
+/**
+ * AtomicFusion EEl-Helper
+ *
+ * @api
+ */
+class AtomicFusionHelper implements ProtectedContextAwareInterface
+{
+    /**
+     * Render the arguments as class-names after applying some rules
+     *
+     * @param mixed $arguments [optional] class-name rules
+     * argument rules:
+     * - falsy: (null, '', [], {}) -> not rendered
+     * - array: all items that are scalar and truthy are rendered as class-name
+     * - object: keys that have a truthy values are rendered as class-name
+     * - scalar: is cast to string and rendered as class-name
+     */
+    public function classNames(...$arguments)
+    {
+        $classNames = [];
+        foreach ($arguments as $argument) {
+            if ((bool)$argument === true) {
+                if (is_array($argument)) {
+                    $keys = array_keys($argument);
+                    $isAssoc = array_keys($keys) !== $keys;
+                    if ($isAssoc) {
+                        foreach ($argument as $className => $condition) {
+                            if ((bool)$condition === true) {
+                                $classNames[] = (string)$className;
+                            }
+                        }
+                    } else {
+                        foreach ($argument as $className) {
+                            if (is_scalar($className) && !!is_bool($condition) && (bool)$className === true) {
+                                $classNames[] = (string)$className;
+                            }
+                        }
+                    }
+                } elseif (is_scalar($argument) && !is_bool($argument)) {
+                    $classNames[] = (string)$argument;
+                }
+            }
+        }
+        return implode(' ', $classNames);
+    }
+
+    public function allowsCallOfMethod($methodName)
+    {
+        return true;
+    }
+}

Configuration/Settings.yaml

@@ -4,3 +4,6 @@ Neos:
     fusion:
       autoInclude:
         PackageFactory.AtomicFusion: true
+  Fusion:
+    defaultContext:
+      'AtomicFusion': 'PackageFactory\AtomicFusion\Eel\AtomicFusionHelper'

README.md

@@ -1,14 +1,20 @@
 # PackageFactory.AtomicFusion
 
-> Prototypes that help implementing atomic-design and a component-architecture in Neos.Fusion
+> Prototypes and Helpers for implementing a component-architecture with Neos.Fusion
+
+### Fusion-Prototypes
 
 - `PackageFactory.AtomicFusion:Component`: create component that adds all properties to the `props` context 
-and afterwards evaluetes the `renderer`
+  and afterwards evaluates 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 
 - `PackageFactory.AtomicFusion:Augmenter`: add html-attributes to the rendered children 
 
+### EEL-Helpers
+
+- `AtomicFusion.classNames`: render all arguments as classNames and apply conditions if needed
+
 ## Usage 
 
 ### 1. Component definition
@@ -32,15 +38,15 @@ prototype(Vendor.Site:Component) < prototype(PackageFactory.AtomicFusion:Compone
     renderer = Neos.Fusion:Tag {
     
         #
-        # the properties of the AtomicFusion:ClassNames object are evaluated 
-        # and the keys of all non-false properties are returned
+        # all arguments of the AtomicFusion:classNames eelHelper are evaluated 
+        # and the following rules are applied
         # 
-        # this allows effective definition of conditional css-classes
-        #
-        attributes.class = PackageFactory.AtomicFusion:ClassNames {
-            component = true
-            component--bold = ${props.bold} 
-        }
+        # - falsy: (null, '', [], {}) -> not rendered
+        # - array: all items that are scalar and truthy are rendered as class-name
+        # - object: keys that have a truthy values are rendered as class-name
+        # - scalar: is cast to string and rendered as class-name
+        # 
+        attributes.class =  ${AtomicFusion:classNames('component' , {'component--bold': props.bold})} 
         
         content = Neos.Fusion:Array {
             headline = Neos.Fusion:Tag {
@@ -140,6 +146,36 @@ augmentedContent = Neos.Fusion:Tag {
 }
 ```
 
+### ClassName-Mapping
+
+Atomic Fusion brings an fusion-prototype and an eel-helper to optimize 
+the common need of creating classNames based on certain conditions. 
+
+```
+#
+# the properties of the fusion protoype PackageFactory.AtomicFusion:ClassNames 
+# are evaluated nd the keys of all non-false properties are returned
+# 
+attributes.class = PackageFactory.AtomicFusion:ClassNames {
+    component = true
+    component--bold = ${props.bold} 
+}
+
+#
+# all arguments of the AtomicFusion:classNames eelHelper are evaluated 
+# and the following rules are applied
+# 
+# - falsy: (null, '', [], {}) -> not rendered
+# - array: all items that are scalar and truthy are rendered as class-name
+# - object: keys that have a truthy values are rendered as class-name
+# - scalar: is cast to string and rendered as class-name
+# 
+attributes.class = ${AtomicFusion:classNames(
+    "component",
+    {"component--bold": props.bold, "component--highlight": props.highlight}         
+)}
+```
+
 ## Installation
 
 PackageFactory.AtomicFusion is available via packagist. Just run `composer require packagefactory/atomicfusion`.