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 46bad81c70839e8d5ba97c6cba4d5dd13b8c6569..e820b45e2b2bcb464c8b0646d59650a8e00113ed 100644 (file)
--- a/web/app/mu-plugins/cube/src/Elementor/Setup.php
+++ b/web/app/mu-plugins/cube/src/Elementor/Setup.php
@@ -5,6 +5,7 @@ namespace Cube\Elementor;
 use Elementor\Element_Base;
 use Elementor\Controls_Manager;
 use Elementor\Plugin;
+use Elementor\Repeater;
 use Elementor\Utils;
 
 class Setup {
@@ -40,23 +41,85 @@ class Setup {
 
     public function customise_sections() {
 
+        // Section Layout and Padding Controls
+        add_action( 'elementor/element/section/section_layout/after_section_start', function( $element, $args ) {
+
+            /** @var \Elementor\Element_Base $element */
+            $element->add_control(
+                'layout_reversed',
+                [
+                    'label' => __('Colonnes inversées', 'cube'),
+                    'type' => Controls_Manager::SWITCHER,
+                    'default' => '',
+                    'return_value' => 'layout-reversed',
+                    'prefix_class' => '',
+                ]
+            );
+
+            $element->add_control(
+                'padding_top',
+                [
+                    'label' => __('Top Padding', 'cube'),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        '' => __('Aucun', 'cube'),
+                        'pt-1v' => '2.5%',
+                        'pt-2v' => '5% (défaut)',
+                        'pt-3v' => '7.5%',
+                        'pt-4v' => '10%',
+                    ],
+                    'default' => 'pt-2v',
+                    'prefix_class' => '', // Use the full value as the classname
+                ]
+            );
+
+            $element->add_control(
+                'padding_bottom',
+                [
+                    'label' => __('Bottom Padding', 'cube'),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        '' => __('Aucun', 'cube'),
+                        'pb-1v' => '2.5%',
+                        'pb-2v' => '5% (défaut)',
+                        'pb-3v' => '7.5%',
+                        'pb-4v' => '10%',
+                    ],
+                    'default' => 'pb-2v',
+                    'prefix_class' => '', // Use the full value as the classname
+                ]
+            );
+
+        }, 10, 2 );
+
+
         // Layered Backgrounds - PHP (Frontend)
         add_action('elementor/frontend/section/before_render', function (Element_Base $element) {
-            echo '<div class="layered-backgrounds-wrapper relative">';
 
             $settings = $element->get_settings();
 
+            // Since the normal Elementor section is wrapped by this code, we need to apply the element ID
+            // classes here so CSS overrides will work...
+            echo '<div class="layered-backgrounds-wrapper relative elementor-section elementor-element elementor-element-'. $element->get_id() .'">';
+
             echo '<div class="layered-backgrounds absolute top-0 left-0 w-full h-full">';
 
             foreach ($settings['layers'] as $index => $layer) {
 
                 $style = 'position: absolute;';
 
+                if ($layer['constrain_width'] == "yes") {
+                    $layer['max_width'] = $settings['content_width']['size'] . $settings['content_width']['unit'];
+                    $layer['transform'] = 'translateX(-50%)';
+                    $layer['left'] = '50%';
+                    $layer['right'] = '';
+                }
+
                 // Common styles
-                $keys = ['width', 'height', 'top', 'right', 'bottom', 'left']; // Which fields to use for styles
+                $keys = ['max_width', 'width', 'height', 'top', 'right', 'bottom', 'left', 'margin', 'transform']; // Which fields to use for styles
                 foreach ($keys as $key) {
-                    if (empty($layer[$key])) continue; // Skip
-                    $style .= "$key: {$layer[$key]};";
+                    if ($layer[$key] === '') continue; // Skip
+                    $style .= str_replace('_', '-', $key) . ": {$layer[$key]};";
                 }
 
                 $z_index = 0 - $index - 1; // make z-index so layers stack based on original order
@@ -67,11 +130,11 @@ class Setup {
                         $style .= "background-color: {$layer['color']};";
                     break;
                     case 'image':
-                        $style .= "background:url('{$layer['image']['url']}') no-repeat;";
+                        $style .= "background:url('{$layer['image']['url']}') {$layer['background_position']} no-repeat;";
                     break;
                 }
 
-                echo '<div style="'. $style .'"></div>';
+                echo '<div style="'. $style . $layer['css_styles'] .'" class="'. $layer['css_classes'] .'"></div>';
 
             }
 
@@ -105,9 +168,16 @@ class Setup {
                 // Prepare style attribute, skipping any empty fields
                 let style = "position: absolute;";
                 
-                _.each(["width", "height", "top", "right", "bottom", "left"], function(property) {
+                if (layer.constrain_width == "yes") {
+                    layer.max_width = settings.content_width.size + settings.content_width.unit;
+                    layer.transform = "translateX(-50%)";
+                    layer.left = "50%";
+                    layer.right = "";
+                }
+                
+                _.each(["max_width", "width", "height", "top", "right", "bottom", "left", "margin", "transform"], function(property) {
                     if (layer[property] == "") return;
-                    style += `${property}: ${layer[property]};`;
+                    style += `${property.replaceAll("_", "-")}: ${layer[property]};`;
                 });
                  
                 let zIndex = 0 - index - 1;
@@ -118,12 +188,12 @@ class Setup {
                         style += `background-color: ${layer.color};`;
                     break;
                     case "image":
-                        style += `background:url(${layer.image.url}) no-repeat;`;
+                        style += `background:url(${layer.image.url}) ${layer.background_position} no-repeat;`;
                     break;
                 }            
             #>';
 
-            $res .= '<div style="{{ style }}"></div>';
+            $res .= '<div style="{{ style }}{{ layer.css_styles }}" class="{{ layer.css_classes }}"></div>';
             $res .= '<# }); #>';
 
             $res .= '</div>'; // .layered-backgrounds
@@ -134,7 +204,7 @@ class Setup {
         // Add controls to Section element in Elementor editor
         add_action('elementor/element/section/section_background/before_section_start', function(Element_Base $element, $args) {
 
-            // Background Overlay
+            // Layered Backgrounds Section
             $element->start_controls_section(
                 'section_background_layers',
                 [
@@ -143,81 +213,185 @@ class Setup {
                 ]
             );
 
+            $layer_repeater = new Repeater();
+
+            $layer_repeater->add_control(
+                'type',
+                [
+                    'label' => __( 'Background Type', 'cube' ),
+                    'type' => Controls_Manager::SELECT,
+                    'options' => [
+                        'image' => __( 'Image', 'cube' ),
+                        'color' => __( 'Solid Colour', 'cube' ),
+                    ],
+                    'default' => 'image',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'image',
+                [
+                    'label' => __('Image', 'cube'),
+                    'label_block' => true,
+                    'type' => Controls_Manager::MEDIA,
+                    'default' => [
+                        'url' => Utils::get_placeholder_image_src(),
+                    ],
+                    'condition' => [
+                        'type' => 'image',
+                    ],
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'background_position',
+                [
+                    'label' => __('Background Position', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                    'condition' => [
+                        'type' => 'image',
+                    ],
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'color',
+                [
+                    'label' => __('Colour', 'cube'),
+                    'type' => Controls_Manager::COLOR,
+                    'default' => '',
+                    'condition' => [
+                        'type' => 'color',
+                    ],
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'constrain_width',
+                [
+                    'label' => __('Constrain to content area', 'cube'),
+                    'type' => Controls_Manager::SWITCHER,
+                    'default' => 'yes',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'max_width',
+                [
+                    'label' => __('Max Width', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                    'condition' => [
+                        'constrain_width!' => 'yes',
+                    ],
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'width',
+                [
+                    'label' => __('Width', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '100%',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'height',
+                [
+                    'label' => __('Height', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '100%',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'top',
+                [
+                    'label' => __('Top Offset', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '0',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'left',
+                [
+                    'label' => __('Left Offset', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '0',
+                    'condition' => [
+                        'constrain_width!' => 'yes',
+                    ],
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'right',
+                [
+                    'label' => __('Right Offset', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                    'condition' => [
+                        'constrain_width!' => 'yes',
+                    ],
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'bottom',
+                [
+                    'label' => __('Bottom Offset', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'margin',
+                [
+                    'label' => __('Margin', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'transform',
+                [
+                    'label' => __('CSS Transform', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'css_classes',
+                [
+                    'label' => __('CSS Classes', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                ]
+            );
+
+            $layer_repeater->add_control(
+                'css_styles',
+                [
+                    'label' => __('Advanced CSS', 'cube'),
+                    'type' => Controls_Manager::TEXT,
+                    'default' => '',
+                ]
+            );
+
             $element->add_control(
                 'layers',
                 [
                     'label' => __( 'Background Layers', 'cube' ),
                     'type' => Controls_Manager::REPEATER,
-                    'fields' => [
-                        [
-                            'name' => 'type',
-                            'label' => __( 'Background Type', 'cube' ),
-                            'type' => Controls_Manager::SELECT,
-                            'options' => [
-                                'image' => __( 'Image', 'cube' ),
-                                'color' => __( 'Solid Colour', 'cube' ),
-                            ],
-                            'default' => 'image',
-                        ],
-                        [
-                            'name' => 'image',
-                            'label' => __('Image', 'cube'),
-                            'label_block' => true,
-                            'type' => Controls_Manager::MEDIA,
-                            'default' => [
-                                'url' => Utils::get_placeholder_image_src(),
-                            ],
-                            'condition' => [
-                                'type' => 'image',
-                            ],
-                        ],
-                        [
-                            'name' => 'color',
-                            'label' => __('Colour', 'cube'),
-                            'type' => Controls_Manager::COLOR,
-                            'default' => '',
-                            'condition' => [
-                                'type' => 'color',
-                            ],
-                        ],
-                        [
-                            'name' => 'width',
-                            'label' => __('Width', 'cube'),
-                            'type' => Controls_Manager::TEXT,
-                            'default' => '100%',
-                        ],
-                        [
-                            'name' => 'height',
-                            'label' => __('height', 'cube'),
-                            'type' => Controls_Manager::TEXT,
-                            'default' => '100%',
-                        ],
-                        [
-                            'name' => 'top',
-                            'label' => __('Top Offset', 'cube'),
-                            'type' => Controls_Manager::TEXT,
-                            'default' => '0',
-                        ],
-                        [
-                            'name' => 'left',
-                            'label' => __('Left Offset', 'cube'),
-                            'type' => Controls_Manager::TEXT,
-                            'default' => '0',
-                        ],
-                        [
-                            'name' => 'right',
-                            'label' => __('Right Offset', 'cube'),
-                            'type' => Controls_Manager::TEXT,
-                            'default' => '',
-                        ],
-                        [
-                            'name' => 'bottom',
-                            'label' => __('Bottom Offset', 'cube'),
-                            'type' => Controls_Manager::TEXT,
-                            'default' => '',
-                        ],
-                    ],
-                    'title_field' => '<# var title = (type == "image") ? "IMAGE: " + image.url.split("/").pop().split(".").shift() : "COLOUR: " + color; #>{{{ title }}}',
+                    'prevent_empty' => false,
+                    'fields' => $layer_repeater->get_controls(),
+                    'title_field' => '<# var bg = (type == "image") ? "url(" + image.url +") center no-repeat" : color; #><div style="margin: 1em; padding-bottom: 56.25%; background: {{{ bg }}}; background-size:contain; border: 1px solid #d5dadf;"></div>',
                 ]
             );
 

diff --git a/web/app/themes/Usines/resources/assets/styles/app.styl b/web/app/themes/Usines/resources/assets/styles/app.styl
index cfd6695eae855994d36ccdd403cb36b51e782d2e..7d656dcbc369110f2cf60aa3c292ca3b027581d2 100644 (file)
--- a/web/app/themes/Usines/resources/assets/styles/app.styl
+++ b/web/app/themes/Usines/resources/assets/styles/app.styl
@@ -9,6 +9,7 @@
 
 // Extracted components or custom styles that can't be done with utilities
 @import 'common/global'
+@import 'common/admin'
 @import 'common/layout'
 @import 'components/*'
 @import 'widgets/*'

diff --git a/web/app/themes/Usines/resources/assets/styles/common/admin.styl b/web/app/themes/Usines/resources/assets/styles/common/admin.styl
new file mode 100644 (file)
index 0000000..ee38caa
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/common/admin.styl
@@ -0,0 +1,6 @@
+.elementor-editor-active
+
+  // Make background layer outlines visible when in Elementor editor mode
+  .layered-backgrounds
+    > *
+      outline: 2px dashed rgba(76, 175, 80, 0.5)

diff --git a/web/app/themes/Usines/resources/assets/styles/components/sections.styl b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
new file mode 100644 (file)
index 0000000..0c77269
--- /dev/null
+++ b/web/app/themes/Usines/resources/assets/styles/components/sections.styl
@@ -0,0 +1,21 @@
+.elementor-section
+
+  //--- Columns responsiveness - stack all standard columns below breakpoint
+  +below($breakpoint-columns)
+    .elementor-column
+      width: 100% !important
+  //&:not(:last-of-type)
+  //  margin-bottom: 7.5vw
+
+  // There's a toggle in the editor so we can disable
+  // this margin between columns when stacking vertically
+  //&.no-column-stacking-gap
+  //  .elementor-column
+  //    +below($breakpoint-columns)
+  //      margin-bottom: 0
+
+//--- Reversed layout
+// Handle column swapping when layout reversed toggle is set
+.layout-reversed
+  .elementor-row
+    flex-direction: row-reverse

diff --git a/web/app/themes/Usines/tailwind.config.js b/web/app/themes/Usines/tailwind.config.js
index 456bb72544656e9bd7504d9f2e99a43caf769c12..add8d375b35dc6afcbfa9e6927d8ba62ac6f7f5d 100644 (file)
--- a/web/app/themes/Usines/tailwind.config.js
+++ b/web/app/themes/Usines/tailwind.config.js
@@ -44,6 +44,13 @@ module.exports = {
     },
 
     extend: {
+      padding: {
+        '0!': '0 !important', // Special overrides
+        '100%': '100%', // Used for proportional padding to make a square
+      },
+      margin: {
+        '0!': '0 !important',
+      },
     },
   },