From 4458a55c86dd8860376302131c425378f272f53b Mon Sep 17 00:00:00 2001 From: Sebastian Thulin Date: Mon, 30 Sep 2024 13:14:17 +0200 Subject: [PATCH] Feat/image in slider (#454) * feat: update api. cleans up the interfaces. * fix: general cleanup. * fix: docs. * fix: remove manually entered focus point * fix: image end link not escaped. * fix: alt texts * fix: add class to image component. * fix: typo missing , --------- Co-authored-by: Sebastian Thulin --- .../Component/Slider__item/Slider__item.php | 36 ++----------- .../Slider__item/slider__item.blade.php | 23 ++++---- .../Component/Slider__item/slider__item.json | 54 ++++++++++++------- .../Slider__item/sub/image.blade.php | 8 +++ .../Slider__item/sub/video.blade.php | 14 ++--- 5 files changed, 65 insertions(+), 70 deletions(-) create mode 100644 source/php/Component/Slider__item/sub/image.blade.php diff --git a/source/php/Component/Slider__item/Slider__item.php b/source/php/Component/Slider__item/Slider__item.php index 88123045..24ef14e7 100644 --- a/source/php/Component/Slider__item/Slider__item.php +++ b/source/php/Component/Slider__item/Slider__item.php @@ -29,12 +29,8 @@ public function init() { $this->data['classList'][] = $this->getBaseClass() . "--layout-" . $layout; } - if (!empty($desktop_image)) { - $this->data['attributeList']['style'] = "background-image: url('".$desktop_image."');"; - } - $this->data['showContainer'] = false; - if (!empty($title) || !empty($sub_title) ||!empty($text) || !empty($bottom)) { + if (!empty($title) || !empty($subTitle) ||!empty($text) || !empty($bottom)) { $this->data['showContainer'] = true; } @@ -42,38 +38,12 @@ public function init() { $this->data['classList'][] = $this->getBaseClass() . '--overlay-' . $overlay; } - if (!empty($alt) && empty($altMobile)) { - $this->data['altMobile'] = $alt; + if (!empty($alt)) { + $this->data['alt'] = $alt; } if ($heroStyle) { $this->data['classList'][] = $this->getBaseClass() . "--hero"; } - - - //Recognize as an image - if(!$background_video) { - $this->data['attributeList']['aria-label'] = $alt ? $alt : ''; - $this->data['attributeList']['aria-labeledby'] = $this->getUid() . '__heading'; - } - - if(!empty($focusPoint)) { - - //Create image style tag - $this->data['imageStyle'] = []; - - //Add image to image styles - if($desktop_image) { - $this->data['imageStyle']['background-image'] = "url('" . $desktop_image . "')"; - } - - //Add background position to image styles - if(is_array($focusPoint) && array_filter($focusPoint)) { - $this->data['imageStyle']['background-position'] = $focusPoint['left'] . "% " . $focusPoint['top'] . "%"; - } - - //Stringify image styles - $this->data['attributeList']['style'] = self::buildInlineStyle($this->data['imageStyle']); - } } } diff --git a/source/php/Component/Slider__item/slider__item.blade.php b/source/php/Component/Slider__item/slider__item.blade.php index a178015d..85f59dfa 100644 --- a/source/php/Component/Slider__item/slider__item.blade.php +++ b/source/php/Component/Slider__item/slider__item.blade.php @@ -1,19 +1,17 @@
- @if ($link) - - @endif + + {{-- Link (open) --}} + {!! $link ? '' : '' !!} - @if ($background_video) - @include('Slider__item.sub.video') - @endif - - @if ($desktop_image) - {{$alt}} - @endif + {{-- Assets --}} + @includeWhen($video, 'Slider__item.sub.video') + @includeWhen($image, 'Slider__item.sub.image') + {{-- Content --}} @if ($slotHasData || $showContainer)
+ {{$slot}} @if($title) @@ -62,8 +60,7 @@
@endif + {{-- Link (close) --}} + {!! $link ? '' : '' !!} - @if ($link) - - @endif
\ No newline at end of file diff --git a/source/php/Component/Slider__item/slider__item.json b/source/php/Component/Slider__item/slider__item.json index 5c2ea2c8..7ff88f73 100644 --- a/source/php/Component/Slider__item/slider__item.json +++ b/source/php/Component/Slider__item/slider__item.json @@ -2,39 +2,57 @@ "slug": "slider__item", "default": { "title": "", - "sub_title": "", "text": "", + "cta": [], + "image": false, + "video": false, + "alt": "", + "link": false, + "linkDescription": "", "layout": "bottom", "theme": "base", - "background_image": "", - "background_video": false, - "desktop_image": "", - "link": false, - "linkDescription": false, "containerColor": "", - "alt": "", - "cta": [], "heroStyle": false, - "focusPoint": {"top": 30, "left": 50}, "textAlignment": "", "overlay": "none", - "showPauseButton": true + "slot": false, + "bottom": false }, "description": { "title": "A title for predefined layout", - "sub_title": "A sub-title for predefined layout", "text": "A text for predefined layout", - "layout": "Which layouts to use", - "theme": "The color palette to be used", + "cta": "Adds button with a link, should conform with the button component specification (title, href)", "image": "An url or path to an image to use as background for the segment", - "background_video": "A video background for the segment", + "video": "A video background for the segment", + "alt": "Alternative text", "link": "Where the slide should link to", + "linkDescription": "A description of the link", + "layout": "Which layouts to use", + "theme": "The color palette to be used", "containerColor": "Determines what color the container and text should be", - "alt": "Alternative text", - "cta": "Adds button with a link", "heroStyle": "Gives the slide a hero like appearance with larger text", - "focusPoint": "Where the focus point should be of an image when container dosen't match image ratio.", - "showPauseButton": "To show or not to show a pause button on the slide when it is a video." + "textAlignment": "Aligns the text in the container", + "overlay": "Adds an overlay to the image", + "slot": "A slot for custom content, placed above the predefined layout", + "bottom": "A slot for custom content, placed below the predefined layout" + }, + "types": { + "title": "string|boolean", + "text": "string|boolean", + "cta": "array|boolean", + "image": "boolean|string|ImageInterface", + "video": "boolean|string", + "alt": "string", + "link": "string|boolean", + "linkDescription": "string", + "layout": "string", + "theme": "string", + "containerColor": "string", + "heroStyle": "string", + "textAlignment": "string", + "overlay": "string", + "slot": "boolean|string", + "bottom": "boolean|string" }, "view": "slider__item.blade.php", "dependency": { diff --git a/source/php/Component/Slider__item/sub/image.blade.php b/source/php/Component/Slider__item/sub/image.blade.php new file mode 100644 index 00000000..ce37b8b1 --- /dev/null +++ b/source/php/Component/Slider__item/sub/image.blade.php @@ -0,0 +1,8 @@ +@image([ + 'classList' => [$baseClass . '__image'], + 'src' => $image, + 'alt' => $alt ?? null, + 'cover' => true, + 'context' => ['component.slider', 'component.slider.image'] +]) +@endimage \ No newline at end of file diff --git a/source/php/Component/Slider__item/sub/video.blade.php b/source/php/Component/Slider__item/sub/video.blade.php index 12ec197e..3c5a127c 100644 --- a/source/php/Component/Slider__item/sub/video.blade.php +++ b/source/php/Component/Slider__item/sub/video.blade.php @@ -9,11 +9,13 @@ $baseClass."__background--video" ], 'formats' => [ - ['src' => $background_video, 'type' => "mp4"], - ] + ['src' => $video, 'type' => "mp4"], + ], + 'context' => ['component.slider', 'component.slider.video'] ]) @endvideo -@if($showPauseButton) + + @button([ 'style' => 'filled', 'icon' => 'play_arrow', @@ -24,7 +26,7 @@ ], 'attributeList' => [ 'js-video-control' => '' - ] + ], + 'context' => ['component.slider', 'component.slider.video', 'component.slider.video.button'] ]) -@endbutton -@endif \ No newline at end of file +@endbutton \ No newline at end of file