Skip to content

Commit

Permalink
TASK: Use @Private instead of nested components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mficzel
mficzel committed Nov 2, 2023
1 parent c9512ff commit 25e1ee2
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 85 deletions.
22 changes: 22 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Composer uses 4 spaces itself
[composer.json]
indent_size = 4

# PHP should follow the PSR-2 standard
[*.php]
indent_size = 4

# fusion uses 4 spaces itself
[*.fusion]
indent_size = 4
51 changes: 22 additions & 29 deletions Resources/Private/Fusion/Prototypes/Image.fusion
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,41 +127,34 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) {
attributes = Neos.Fusion:DataStructure
renderDimensionAttributes = true

renderer = Neos.Fusion:Component {
@if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
@private {
# detect scalable sources
isScalableSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ScalableImageSourceInterface')}

# apply format, width and height to the imageSource
imageSource = ${props.imageSource}
[email protected] = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}
[email protected] = ${props.width ? value.withWidth(props.width) : value}
[email protected] = ${props.height ? value.withHeight(props.height) : value}
[email protected] = ${props.format ? value.withFormat(props.format) : value}

srcset = ${props.srcset}
sizes = ${props.sizes}
loading = ${props.loading}
alt = ${props.alt}
title = ${props.title}
class = ${props.class}
attributes = ${props.attributes}
renderDimensionAttributes = ${props.renderDimensionAttributes}

renderer = afx`
<img
src={props.imageSource.src()}
srcset={props.imageSource.srcset(props.srcset)}
[email protected]={props.isScalableSource && props.srcset}
sizes={props.sizes}
[email protected]={props.isScalableSource && props.sizes}
[email protected]={Type.isArray(value) ? Array.join(value, ', ') : value}
loading={props.loading}
class={props.class}
alt={props.alt || props.imageSource.alt() || ''}
title={props.title || props.imageSource.title()}
width={props.renderDimensionAttributes ? props.imageSource.width() : null}
height={props.renderDimensionAttributes ? props.imageSource.height() : null}
{...props.attributes}
/>
`
}

renderer = afx`
<img
@if={private.imageSource}
src={private.imageSource.src()}
srcset={private.imageSource.srcset(props.srcset)}
[email protected]={private.isScalableSource && props.srcset}
sizes={props.sizes}
[email protected]={private.isScalableSource && props.sizes}
[email protected]={Type.isArray(value) ? Array.join(value, ', ') : value}
loading={props.loading}
class={props.class}
alt={props.alt || private.imageSource.alt() || ''}
title={props.title || private.imageSource.title()}
width={props.renderDimensionAttributes ? private.imageSource.width() : null}
height={props.renderDimensionAttributes ? private.imageSource.height() : null}
{...props.attributes}
/>
`
}
93 changes: 39 additions & 54 deletions Resources/Private/Fusion/Prototypes/Picture.fusion
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,65 +78,50 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) {
__format = ${this.format}
}

renderer = Neos.Fusion:Component {
@if.hasImageSource = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')}

@private {
# apply format, width and height to the imageSource
imageSource = ${props.imageSource}
[email protected] = ${props.width ? value.setWidth(props.width) : value}
imageSource.@if.has = ${props.imageSource && Type.instance(props.imageSource, '\\Sitegeist\\Kaleidoscope\\Domain\\ImageSourceInterface')} imageSource.@process.applyWidth = ${props.width ? value.setWidth(props.width) : value}
[email protected] = ${props.height ? value.setHeight(props.height) : value}
[email protected] = ${props.format ? value.setFormat(props.format) : value}
}

srcset = ${props.srcset}
sizes = ${props.sizes}
loading = ${props.loading}
sources = ${props.sources}
formats = ${props.formats}
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} {...props.attributes}>
{props.content}
<Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
<Sitegeist.Kaleidoscope:Source
imageSource={source.imageSource ? source.imageSource : props.imageSource}
type={source.type}
media={source.media}
format={source.format}
width={source.width}
height={source.height}
srcset={source.srcset ? source.srcset : props.srcset}
sizes={source.sizes ? source.sizes : props.sizes}
renderDimensionAttributes={props.renderDimensionAttributes}
/>
</Neos.Fusion:Loop>
<Neos.Fusion:Loop
@if.has={props.imageSource && props.formats}
items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
itemName="format"
>
<Sitegeist.Kaleidoscope:Source
imageSource={props.imageSource}
format={String.trim(format)}
/>
</Neos.Fusion:Loop>
<Sitegeist.Kaleidoscope:Image
imageSource={props.imageSource}
sizes={props.sizes}
srcset={props.srcset}
loading={props.loading}
alt={props.alt}
title={props.title}
attributes={props.imgAttributes}
renderer = afx`
<picture class={props.class} {...props.attributes} @if.has={private.imageSource}>
{props.content}
<Neos.Fusion:Loop items={props.sources} itemName="source" @if.has={props.sources}>
<Sitegeist.Kaleidoscope:Source
imageSource={source.imageSource ? source.imageSource : private.imageSource}
type={source.type}
media={source.media}
format={source.format}
width={source.width}
height={source.height}
srcset={source.srcset ? source.srcset : props.srcset}
sizes={source.sizes ? source.sizes : props.sizes}
renderDimensionAttributes={props.renderDimensionAttributes}
/>
</picture>
`
}
</Neos.Fusion:Loop>
<Neos.Fusion:Loop
@if.has={private.imageSource && props.formats}
items={Type.isArray(props.formats) ? props.formats : String.split(props.formats, ',')}
itemName="format"
>
<Sitegeist.Kaleidoscope:Source
imageSource={private.imageSource}
format={String.trim(format)}
/>
</Neos.Fusion:Loop>
<Sitegeist.Kaleidoscope:Image
imageSource={private.imageSource}
sizes={props.sizes}
srcset={props.srcset}
loading={props.loading}
alt={props.alt}
title={props.title}
attributes={props.imgAttributes}
renderDimensionAttributes={props.renderDimensionAttributes}
/>
</picture>
`
}
4 changes: 2 additions & 2 deletions composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"name": "sitegeist/kaleidoscope",
"license": "GPL-3.0-or-later",
"require": {
"neos/neos": "^7.0 || ^8.0 || ^9.0 || dev-master",
"neos/fusion-afx": "^7.0 || ^8.0 || ^9.0 || dev-master",
"neos/neos": "^8.3 || ^9.0 || dev-master",
"neos/fusion-afx": "^8.3 || ^9.0 || dev-master",
"neos/media": "*",
"neos/imagine": "*"
},
Expand Down

0 comments on commit 25e1ee2

Please sign in to comment.