wip #5812 @1:30

diff --git a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php
index 44183fd9bf4c6ccec139e33dcfbbf45a109bfdc3..6b8c801620d28c6ac8ea889b3f676856beb28275 100644 (file)
--- 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 '<div class="home-carousel">';
-            foreach (  $settings['slides'] as $key => $item ) {
-                $background_image = $item['background_image']['url'];
-                $active = "";
-                if($key === 0){
-                    $active = "active";
-                }
-
-              echo '<div class="carousel-slide container '.$active.'">
-                        <div class="leftside">
-                            <div class="overlay overlayside" style="background-image: url('.$background_image.')"></div>
-                        </div>
-                        <div class="rightside">
-                            <div class="overlay overlayside"></div>
-                            <div class="text">
-                                <h1 class="text-3xl">'.$item['title'].'</h1>
-                                <p>
-                                    '.$item['text'].'
-                                </p>
-                                <a class="btn white" href="'.$item['link']['url'].'">'.$item['link_text'].'</a>
-                            </div>
-                        </div>
-                    </div>
-                ';
-            }
-            echo '</div>';
+            $slides = $settings['slides'];
+            echo view('widgets/carousel-home', compact('slides'));
         }
     }
 
-    protected function content_template() {
-        ?>
-        <# if ( settings.slides.length ) { #>
-        <div class="home-carousel">
-            <# _.each( settings.slides, function( item ) { #>
-            <dt class="elementor-repeater-item-{{ item._id }}">{{{ item.list_title }}}</dt>
-            <dd>{{{ item.list_content }}}</dd>
-            <div class="carousel-slide container $active">
-                <div class="leftside">
-                    <div class="overlay overlayside" style='background-image: url("{{{ item.background_image.url }}}")'></div>
-                </div>
-                <div class="rightside">
-                    <div class="overlay overlayside"></div>
-                    <div class="text">
-                        <h1 class="text-3xl">{{{ item.title }}}</h1>
-                        <p>{{{ item.text }}}</p>
-                        <a href="{{{ item.link }}}">{{{ item.link_text }}}</a>
-                    </div>
-                </div>
-            </div>
-            <# }); #>
-        </div>
-        <# } #>
-        <?php
-    }
 }
\ No newline at end of file

diff --git a/wp-content/mu-plugins/cube/Widgets/CarouselSelection.php b/wp-content/mu-plugins/cube/Widgets/CarouselSelection.php
index cab467ffc151121b3367ad84c297b41bb8f0b9e7..9e39b1d73ea348834d10a94c259b85a622d9d972 100644 (file)
--- a/wp-content/mu-plugins/cube/Widgets/CarouselSelection.php
+++ b/wp-content/mu-plugins/cube/Widgets/CarouselSelection.php
@@ -72,7 +72,7 @@ class CarouselSelection extends _Base
             [
                 'label' => 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 6579791fa9609b10a5dc5f5e8b910dbca40fa918..9a6da856d446ec3231699d494f8d69cb0c9f1731 100644 (file)
--- 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 792cc767118424c15992318e4bbe2ca76d616c46..e4107d09c4e04327192c49eec2f6c520dc3a74e4 100644 (file)
--- 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 (file)
index 0000000..a81fa83
--- /dev/null
+++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
@@ -0,0 +1,27 @@
+<div class="home-carousel">
+  @foreach($slides as $key => $slide)
+    @php
+      $key += 1;
+    @endphp
+    <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 1 ? 'active' : '' }}">
+      <div class="leftside">
+        <div class="overlay overlayside" style="background-image: url({{$slide['background_image']['url']}})"></div>
+        @if(array_key_exists('image',$slide))
+          <div class="thumbnail">
+            <img src="{{ $slide['image']['url'] }}" />
+          </div>
+        @endif
+      </div>
+      <div class="rightside">
+        <div class="overlay overlayside"></div>
+        <div class="text">
+          <h1 class="text-3xl">{{ $slide['title'] }}</h1>
+          <p>{{ $slide['text'] }}</p>
+          @if(array_key_exists('link',$slide))
+            <a class="btn white" href="{{ $slide['link']['url'] }}">{{ $slide['link_text'] }}</a>
+          @endif
+        </div>
+      </div>
+    </div>
+  @endforeach
+</div>