WIP #4064 @8

diff --git a/web/app/mu-plugins/cube/src/Elementor/Setup.php b/web/app/mu-plugins/cube/src/Elementor/Setup.php
index e820b45e2b2bcb464c8b0646d59650a8e00113ed..13f6c0a515f7f4c674c963f8e397008ed292c493 100644 (file)
--- a/web/app/mu-plugins/cube/src/Elementor/Setup.php
+++ b/web/app/mu-plugins/cube/src/Elementor/Setup.php
@@ -26,6 +26,7 @@ class Setup {
         $elementor = Plugin::$instance;
 
         $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\IntroCarousel() );
     }
 
 
@@ -96,6 +97,19 @@ class Setup {
         // Layered Backgrounds - PHP (Frontend)
         add_action('elementor/frontend/section/before_render', function (Element_Base $element) {
 
+            $children = $element->get_children();
+            $cols = count($children);
+
+            $element->add_render_attribute('_wrapper', 'data-cols', $cols);
+
+//            echo "<h2>COLS: $cols</h2>";
+//            echo "<pre>";
+//            /* @var \Elementor\Element_Column $el */
+//            foreach ($children as $child) {
+//                print_r($child->get_data()['settings']);
+//            }
+//            echo "</pre>";
+
             $settings = $element->get_settings();
 
             // Since the normal Elementor section is wrapped by this code, we need to apply the element ID

diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/IntroCarousel.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/IntroCarousel.php
new file mode 100644 (file)
index 0000000..dd378c1
--- /dev/null
+++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/IntroCarousel.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use Elementor\Utils;
+
+use function Roots\asset;
+use function Roots\view;
+
+
+class IntroCarousel extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-intro-carousel';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Intro Carousel', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-slideshow';
+    }
+
+    /**
+     * List of scripts the widget depends on.
+     * Used to set scripts dependencies required to run the widget.
+     *
+     * @since 1.0.0
+     * @access public
+     * @return array Widget scripts dependencies.
+     */
+    public function get_script_depends() {
+
+        wp_register_script(
+            'cube-intro-carousel',
+            asset('scripts/intro-carousel.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        return ['cube-intro-carousel'];
+    }
+    /**
+     * Register the widget controls.
+     * Adds different input fields to allow the user to change and customize the widget settings.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _register_controls() {
+
+        $this->start_controls_section(
+            'section_content',
+            [
+                'label' => __( 'Intro Carousel', 'cube' ),
+            ]
+        );
+
+        $this->add_control(
+            'title',
+            [
+                'label' => __( 'Title', 'elementor' ),
+                'type' => Controls_Manager::TEXTAREA,
+                'placeholder' => __( 'Enter your title', 'elementor' ),
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'body',
+            [
+                'label' => __('Body', 'cube'),
+                'type' => Controls_Manager::TEXTAREA,
+                'default' => '',
+            ]
+        );
+
+        $this->add_control(
+            'cta_text',
+            [
+                'label' => __('Button text', 'cube'),
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $this->add_control(
+            'cta_link',
+            [
+                'label' => __('Button link', 'cube'),
+                'type' => Controls_Manager::URL,
+                'default' => [
+                    'url' => '',
+                    'is_external' => false,
+                ],
+                'show_external' => true
+            ]
+        );
+
+        $repeater = new Repeater();
+
+        $repeater->add_control(
+            'image',
+            [
+                'label' => __('Photo', 'cube'),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $repeater->add_control(
+            'background_image',
+            [
+                'label' => __('Background', 'cube'),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $repeater->add_control(
+            'caption',
+            [
+                'label' => __('Caption', 'cube'),
+                'title_block' => true,
+                'type' => Controls_Manager::TEXT,
+                'default' => ''
+            ]
+        );
+
+        $this->add_control(
+                'slides',
+                [
+                    'label' => __('Slides', 'cube'),
+                    'type' => Controls_Manager::REPEATER,
+                    'prevent_empty' => false,
+                    'fields' => $repeater->get_controls(),
+                    'title_field' => '<img src="{{{ image.url }}}"><br>{{{ caption }}}',
+                ]
+        );
+
+
+
+        $this->end_controls_section();
+
+        $this->common_controls();
+    }
+    /**
+     * Render the widget output on the frontend.
+     * Written in PHP and used to generate the final HTML.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function render() {
+
+        $id = 'intro_carousel_' . $this->get_id();
+        $title = $this->get_settings('title');
+        $body = $this->get_settings('body');
+        $cta_text = $this->get_settings('cta_text');
+        $cta_link = $this->get_settings('cta_link');
+        $slides = $this->get_settings('slides');
+
+        echo view('widgets/intro-carousel', compact('id', 'title', 'body', 'cta_text', 'cta_link', 'slides'));
+    }
+}

diff --git a/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php b/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php
new file mode 100644 (file)
index 0000000..657355e
--- /dev/null
+++ b/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php
@@ -0,0 +1,27 @@
+{{-- INTRO CAROUSEL --}}
+<div class="intro-carousel flex flex-row-reverse items-center" id="{{ $id }}">
+
+  <div style="flex-basis: 40%">
+    <div class="mx-1v" style="max-width: 624px">
+      <h1 class="relative text-2xl md:text-xl font-semibold leading-tight mb-6">
+        {{ $title }}
+        <span class="absolute block bg-beige" style="top: -0.1em; bottom: -0.15em; left: -0.325em; width: 36%; z-index: -1"></span>
+      </h1>
+      <div class="leading-loose">{{ $body }}</div>
+      <a href="{{ $cta_link }}" class="btn inline-block bg-red text-white py-2 px-4 mt-6 rounded-full hover:bg-blue hover:text-white">{{ $cta_text }}</a>
+    </div>
+  </div>
+
+  <div class="intro-carousel-slides" style="flex-basis: 60%">
+    <div class="intro-carousel-slides-sizer relative ml-1v" style="padding-bottom: 71.287%">
+      @foreach ($slides as $slide)
+        <div class="intro-carousel-slide absolute top-0 left-0 w-full h-full @if($loop->first)hidden @endif">
+          <img src="{{ $slide['background_image']['url'] }}" class="absolute top-0 right-0">
+          <img src="{{ $slide['image']['url'] }}" class="absolute" style="border-radius: 999px; max-width: 69.475%; top: 2.35%; right: 4.575%">
+          <div class="intro-carousel-slide-caption">{{ $caption }}</div>
+        </div>
+      @endforeach
+    </div>
+  </div>
+
+</div>