From 30a91e8f8a71e9a3cc2d3366465595763ba66d85 Mon Sep 17 00:00:00 2001
From: Martin Ficzel <ficzel@sitegeist.de>
Date: Wed, 27 Apr 2022 16:41:45 +0200
Subject: [PATCH] FEATURE: Add generic attributes support

The `attributes` property of Sitegeist.Kaleidoscope:Image and Sitegeist.Kaleidoscope:Picture allows to add additional attributes or to override existing ones.
To control the attributes of the img tag inside of picture `imgAttributes`
---
 README.md                                     |  7 +++++--
 .../Private/Fusion/Prototypes/Image.fusion    | 11 ++++++++++
 .../Private/Fusion/Prototypes/Picture.fusion  | 21 ++++++++++++++++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 23525b7..ba91855 100644
--- a/README.md
+++ b/README.md
@@ -90,7 +90,8 @@ Props:
 - `height`: (optional) the base height, will be applied to the `imageSource`    
 - `alt`: alt-attribute for the img tag (default "")
 - `title`: title attribute for the img tag
-- `class`: class attribute for the img tag
+- `class`: class attribute for the img tag (deprecated in favor of attributes.class)
+- `attributes`: tag-attributes, will override any automatically rendered ones
 - `renderDimensionAttributes`: render dimension attributes (width/height) when the data is available from the imageSource. Enabled by default
 
 #### Image with srcset in multiple resolutions:
@@ -143,7 +144,9 @@ Props:
 - `loading`: (optional, default "lazy") loading attribute for the img tag 
 - `alt`: alt-attribute for the img tag
 - `title`: title attribute for the img tag
-- `class`: class attribute for the picture tag
+- `attributes`: picture-tag-attributes, will override any automatically rendered ones
+- `imgAttributes`: img-tag-attributes, will override any automatically rendered ones
+- `class`: class attribute for the picture tag (deprecated in favor of attributes.class)
 - `renderDimensionAttributes`: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource
   if not specified renderDimensionAttributes will be enabled automatically for pictures that only use the `formats` options.
 
diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion
index 6b3554d..ddd76f7 100644
--- a/Resources/Private/Fusion/Prototypes/Image.fusion
+++ b/Resources/Private/Fusion/Prototypes/Image.fusion
@@ -64,6 +64,13 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
                 }
             }
 
+            withAttributes {
+              attributes = Neos.Fusion:DataStructure {
+                data-foo="bar"
+                style="border: 5px solid pink;"
+              }
+            }
+
             multires_array {
                 srcset = ${['1x', '1.5x', '2x']}
             }
@@ -101,11 +108,13 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
     sizes = null
     alt = null
     title = null
+    // class is deprecated in favor of attributes.class
     class = null
     loading = 'lazy'
     width = null
     height = null
     format = null
+    attributes = Neos.Fusion:DataStructure
     renderDimensionAttributes = true
 
     renderer = Neos.Fusion:Component {
@@ -123,6 +132,7 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
         alt =  ${props.alt}
         title = ${props.title}
         class = ${props.class}
+        attributes = ${props.attributes}
         renderDimensionAttributes = ${props.renderDimensionAttributes}
 
         renderer = afx`
@@ -138,6 +148,7 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
                 title={props.title || props.imageSource.title()}
                 width={props.renderDimensionAttributes ? props.imageSource.width() : null}
                 height={props.renderDimensionAttributes ? props.imageSource.height() : null}
+                {...props.attributes}
             />
         `
     }
diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion
index 573bae6..f98b3bb 100644
--- a/Resources/Private/Fusion/Prototypes/Picture.fusion
+++ b/Resources/Private/Fusion/Prototypes/Picture.fusion
@@ -33,6 +33,19 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
             }
             alt = 'Elva dressed as a fairy'
         }
+
+        propSets {
+          withAttributes {
+            attributes = Neos.Fusion:DataStructure {
+              data-foo="bar"
+              style="border: 5px solid green;"
+            }
+            imgAttributes = Neos.Fusion:DataStructure {
+              data-foo="baz"
+              style="border: 5px solid pink;"
+            }
+          }
+        }
     }
 
     imageSource = null
@@ -45,7 +58,10 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
     height = null
     alt = ''
     title = null
+    // class is deprecated in favor of attributes.class
     class = null
+    attributes = Neos.Fusion:DataStructure
+    imgAttributes = Neos.Fusion:DataStructure
     content = ''
     renderDimensionAttributes = true
 
@@ -79,11 +95,13 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
         alt = ${props.alt}
         title = ${props.title}
         class = ${props.class}
+        attributes = ${props.attributes}
+        imgAttributes = ${props.imgAttributes}
         content = ${props.content}
         renderDimensionAttributes = ${props.renderDimensionAttributes}
 
         renderer = afx`
-            <picture class={props.class}>
+            <picture class={props.class} {...props.attributes}>
                 {props.content}
                 <Neos.Fusion:Collection collection={props.sources} itemName="source" @if.has={props.sources}>
                     <Sitegeist.Kaleidoscope:Source
@@ -112,6 +130,7 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
                     loading={props.loading}
                     alt={props.alt}
                     title={props.title}
+                    attributes={props.imgAttributes}
                     renderDimensionAttributes={props.renderDimensionAttributes}
                 />
             </picture>