From 8bb16cc773a20cbd9937f882ad04a41c7929f5b7 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 15 May 2023 11:32:14 +0200 Subject: [PATCH] wip #5812 @1:30 --- .../mu-plugins/cube/Widgets/CarouselHome.php | 121 +++++++++--------- .../cube/Widgets/CarouselSelection.php | 2 +- .../styles/partials/home-carousel.sass | 11 ++ .../resources/styles/widgets/stickyNav.sass | 4 + .../views/widgets/carousel-home.blade.php | 27 ++++ 5 files changed, 100 insertions(+), 65 deletions(-) create mode 100644 wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php diff --git a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php index 44183fd..6b8c801 100644 --- a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php +++ b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php @@ -92,13 +92,65 @@ class CarouselHome extends _Base { ] ); + $repeater->add_control( + 'image', + [ + 'label' => esc_html__( 'Image', 'cube' ), + 'type' => Controls_Manager::MEDIA + ] + ); + $repeater->add_control( 'background_color', [ 'label' => esc_html__( 'Background color', 'cube' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ - '{{WRAPPER}} .rightside .overlay' => 'background-color: {{VALUE}}', + '{{WRAPPER}} {{CURRENT_ITEM}} .rightside .overlay' => 'background-color: {{VALUE}}', + ], + ] + ); + + $repeater->add_control( + 'left', + [ + 'label' => esc_html__('Image left position (px)', 'cube'), + 'type' => Controls_Manager::SLIDER, + 'range' => [ + 'px' => [ + 'min' => 1, + 'max' => 200, + 'step' => 1, + ], + ], + 'default' => [ + 'size' => 0, + ], + 'separator' => 'after', + 'selectors' => [ + '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail img' => 'left: {{SIZE}}px' + ], + ] + ); + + $repeater->add_control( + 'top', + [ + 'label' => esc_html__('Image top position (px)', 'cube'), + 'type' => Controls_Manager::SLIDER, + 'range' => [ + 'px' => [ // Not really a px measure but the slider doesn't work properly if we set a custom type here + 'min' => 1, + 'max' => 200, + 'step' => 1, + ], + ], + 'default' => [ + 'size' => 0, + ], + 'separator' => 'after', + 'selectors' => [ + '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail img' => 'bottom: -{{SIZE}}px' ], ] ); @@ -109,18 +161,8 @@ class CarouselHome extends _Base { [ 'label' => esc_html__( 'Slides', 'cube' ), 'type' => Controls_Manager::REPEATER, - 'fields' => $repeater->get_controls(), /* Use our repeater */ - 'default' => [ - [ - 'title' => 'Slide #1', - 'text' => esc_html__( 'Lorem ipsum dolor', 'cube' ), - 'link' => '', - ], - [ - 'text' => esc_html__( 'List Item #2', 'cube' ), - 'link' => '', - ] - ], + 'fields' => $repeater->get_controls(), + 'default' => [], 'title_field' => '{{{ text }}}', ] ); @@ -132,58 +174,9 @@ class CarouselHome extends _Base { $settings = $this->get_settings_for_display(); if ( $settings['slides'] ) { - echo '
'; - foreach ( $settings['slides'] as $key => $item ) { - $background_image = $item['background_image']['url']; - $active = ""; - if($key === 0){ - $active = "active"; - } - - echo '
-
-
-
-
-
-
-

'.$item['title'].'

-

- '.$item['text'].' -

- '.$item['link_text'].' -
-
-
- '; - } - echo '
'; + $slides = $settings['slides']; + echo view('widgets/carousel-home', compact('slides')); } } - protected function content_template() { - ?> - <# if ( settings.slides.length ) { #> -
- <# _.each( settings.slides, function( item ) { #> -
{{{ item.list_title }}}
-
{{{ item.list_content }}}
-
-
-
-
-
-
-
-

{{{ item.title }}}

-

{{{ item.text }}}

- {{{ item.link_text }}} -
-
-
- <# }); #> -
- <# } #> - esc_html__( 'Slides', 'cube' ), 'type' => Controls_Manager::REPEATER, - 'fields' => $repeater->get_controls(), /* Use our repeater */ + 'fields' => $repeater->get_controls(), 'default' => [], 'title_field' => '{{{ text }}}', ] diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass index 6579791..9a6da85 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass @@ -51,6 +51,17 @@ +screen-size('desktop', 'min') left: calc((-100vw + 1344px) / 2) + .thumbnail + position: relative + height: 100% + + img + width: 100% + height: auto + position: absolute + object-fit: contain + bottom: 0 + .rightside display: flex align-items: flex-end diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass index 792cc76..e4107d0 100644 --- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass +++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass @@ -6,6 +6,8 @@ margin: 0 auto .text margin-bottom: var(--space-56-128) + * + transition: all .3s &:not(.active) * color: #DDDDDD @@ -25,6 +27,8 @@ width: 100% height: 100% object-fit: cover + &.active + z-index: 2 .special-container .elementor-container diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php new file mode 100644 index 0000000..a81fa83 --- /dev/null +++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php @@ -0,0 +1,27 @@ +
+ @foreach($slides as $key => $slide) + @php + $key += 1; + @endphp +
+
+
+ @if(array_key_exists('image',$slide)) +
+ +
+ @endif +
+
+
+
+

{{ $slide['title'] }}

+

{{ $slide['text'] }}

+ @if(array_key_exists('link',$slide)) + {{ $slide['link_text'] }} + @endif +
+
+
+ @endforeach +
-- 2.39.5