WIP #3053

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index 0f7c8160614c8651bc8808e7d15b7236b96eb52b..eb880d6206c2f5aa0306a79e94f8e004b173cf6e 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
@@ -37,6 +37,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\LinkCarousel() );
         $elementor->widgets_manager->register_widget_type( new Widgets\PictoGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\PeopleGrid() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\Timeline() );
     }
 
     protected function _customise_sections() {
@@ -52,55 +53,72 @@ class Setup {
 
         // Add controls to section element in editor
         add_action( 'elementor/element/section/section_layout/after_section_start', function( $element, $args ) {
+
             /** @var \Elementor\Element_Base $element */
             $element->add_control(
-                'block_layout',
+                'layout_reversed',
                 [
-                    'label' => __('Custom Layout', 'cube'),
-                    'type' => Controls_Manager::SELECT,
-                    'options' => [
-                        'layout-default' => __( 'Default', 'cube' ),
-                        'layout-overlap-above' => __( 'Overlap Above', 'cube' ),
-                        'layout-overlap-below' => __( 'Overlap Below', 'cube' ),
-                    ],
-                    'default' => 'layout-default',
-                    'prefix_class' => '', // Use the full value as the classname (too late to change values after many pages have been built)
+                    'label' => __('Colonnes inversées', 'cube'),
+                    'type' => Controls_Manager::SWITCHER,
+                    'default' => '',
+                    'return_value' => 'layout-reversed',
+                    'prefix_class' => '',
                 ]
             );
 
             $element->add_control(
-                'layout_reversed',
+                'bg_color',
                 [
-                    'label' => __('Reverse layout?', 'cube'),
-                    'type' => Controls_Manager::SWITCHER,
+                    'label' => __('Couleur de fond', 'cube'),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        '' => __( 'Défaut (blanc)', 'cube' ),
+                        'bg-light' => __( 'Gris clair', 'cube' ),
+                        'bg-purple-dark text-white' => __( 'Violet foncé', 'cube' ),
+                    ],
                     'default' => '',
-                    'return_value' => 'layout-reversed',
-                    'prefix_class' => '',
+                    'prefix_class' => '', // Use the full value as the classname
                 ]
             );
 
             $element->add_control(
                 'padding_top',
                 [
-                    'label' => __('Disable padding top', 'cube'),
-                    'type' => Controls_Manager::SWITCHER,
+                    'label' => __('Top Padding', 'cube'),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        '' => __( 'Défaut', 'cube' ),
+                        'pt-0' => '0',
+                        'pt-1v' => '2.5%',
+                        'pt-2v' => '5%',
+                        'pt-3v' => '7.5%',
+                        'pt-4v' => '10%',
+                    ],
                     'default' => '',
-                    'return_value' => 'pt0',
-                    'prefix_class' => '',
+                    'prefix_class' => '', // Use the full value as the classname
                 ]
             );
 
             $element->add_control(
                 'padding_bottom',
                 [
-                    'label' => __('Disable padding bottom', 'cube'),
-                    'type' => Controls_Manager::SWITCHER,
+                    'label' => __('Bottom Padding', 'cube'),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        '' => __( 'Défaut', 'cube' ),
+                        'pb-0' => '0',
+                        'pb-1v' => '2.5%',
+                        'pb-2v' => '5%',
+                        'pb-3v' => '7.5%',
+                        'pb-4v' => '10%',
+                    ],
                     'default' => '',
-                    'return_value' => 'pb0',
-                    'prefix_class' => '',
+                    'prefix_class' => '', // Use the full value as the classname
                 ]
             );
 
+
+            /*
             $element->add_control(
                 'stacking_margins',
                 [
@@ -111,6 +129,7 @@ class Setup {
                     'prefix_class' => '',
                 ]
             );
+            */
 
         }, 10, 2 );
 

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
new file mode 100644 (file)
index 0000000..67ffd57
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+
+use function Roots\view;
+
+
+class Timeline extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-timeline';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __('Timeline', 'cube');
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-date';
+    }
+
+    /**
+     * 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() {
+        return [];
+    }
+
+    /**
+     * 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' => __('Content', 'cube'),
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __('Items', 'cube'),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'highlight',
+                        'label' => __('Highlight', 'cube'),
+                        'type' => Controls_Manager::SWITCHER,
+                        'return_value' => 'yes',
+                        'default' => 'no',
+                    ],
+                    [
+                        'name' => 'year',
+                        'label' => __('Year', 'cube'),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                        'default' => '',
+                    ],
+                    [
+                        'name' => 'details',
+                        'label' => __('Description', 'cube'),
+                        'type' => Controls_Manager::WYSIWYG,
+                        'default' => '',
+                    ],
+
+                ],
+                'title_field' => '{{{ year }}}',
+            ]
+        );
+
+        $this->end_controls_section();
+
+    }
+
+    /**
+     * 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() {
+        $items = $this->get_settings('items');
+        echo view('widgets/timeline', compact('items'));
+    }
+
+
+}

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php
index d603d827558547d3fff5f2df17506db62518204d..8f89208795f742c161345a325fd16b41ca14cf08 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php
@@ -52,6 +52,43 @@ abstract class _Base extends Widget_Base {
             ]
         );
 
+        $this->add_control(
+            'padding_top',
+            [
+                'label' => __('Top Padding', 'cube'),
+                'type' => Controls_Manager::SELECT,
+                'options' => [
+                    '' => __( 'Défaut', 'cube' ),
+                    'pt-0' => '0',
+                    'pt-1v' => '2.5%',
+                    'pt-2v' => '5%',
+                    'pt-3v' => '7.5%',
+                    'pt-4v' => '10%',
+                ],
+                'default' => '',
+                'prefix_class' => '', // Use the full value as the classname
+                'separator' => 'before',
+            ]
+        );
+
+        $this->add_control(
+            'padding_bottom',
+            [
+                'label' => __('Bottom Padding', 'cube'),
+                'type' => Controls_Manager::SELECT,
+                'options' => [
+                    '' => __( 'Défaut', 'cube' ),
+                    'pb-0' => '0',
+                    'pb-1v' => '2.5%',
+                    'pb-2v' => '5%',
+                    'pb-3v' => '7.5%',
+                    'pb-4v' => '10%',
+                ],
+                'default' => '',
+                'prefix_class' => '', // Use the full value as the classname
+            ]
+        );
+
         $this->end_controls_section();
 
     }

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/image-box.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/image-box.styl
new file mode 100644 (file)
index 0000000..436f850
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/image-box.styl
@@ -0,0 +1,12 @@
+// Elementor Image Box Widget overrides
+.elementor-widget-image-box .elementor-image-box
+
+  &-wrapper
+    @apply text-left
+
+  &-img img
+    +below(768px)
+      @apply mx-auto
+
+  &-title
+    @apply font-body text-lg mb-6

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
new file mode 100644 (file)
index 0000000..0c9e78b
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
@@ -0,0 +1,20 @@
+.timeline
+  &-item
+    @apply flex items-center
+
+    &:not(:last-child)
+      @apply mb-6
+
+    &-date
+      @apply bg-teal text-white text-lg rounded-full
+      @apply flex flex-shrink-0 items-center justify-center mb-4 mr-16
+      width: 5em
+      height: @width
+      overflow: hidden
+      box-shadow: inset 0 0 0 0.45em rgba(#fff, 0.6)
+
+      &.is-highlight
+        @apply bg-pink
+
+
+  // Todo: implement dotted lines like we did for cubedesigners.com/news

diff --git a/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php b/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
new file mode 100644 (file)
index 0000000..0fd34e0
--- /dev/null
+++ b/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
@@ -0,0 +1,9 @@
+{{-- TIMELINE --}}
+<div class="timeline">
+  @foreach ($items as $item)
+    <div class="timeline-item">
+      <div class="timeline-item-date @if($item['highlight'] == 'yes')is-highlight @endif">{{ $item['year'] }}</div>
+      <div class="timeline-item-content">{!! $item['details'] !!}</div>
+    </div>
+  @endforeach
+</div>