From 834491c6651d04fb965b7a71f7f97f0631f6e43e Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 2 Dec 2020 18:11:19 +0100 Subject: [PATCH] WIP #4064 @8 --- .../mu-plugins/cube/src/Elementor/Setup.php | 336 +++++++++++++----- .../Usines/resources/assets/styles/app.styl | 1 + .../resources/assets/styles/common/admin.styl | 6 + .../assets/styles/components/sections.styl | 21 ++ web/app/themes/Usines/tailwind.config.js | 7 + 5 files changed, 290 insertions(+), 81 deletions(-) create mode 100644 web/app/themes/Usines/resources/assets/styles/common/admin.styl create mode 100644 web/app/themes/Usines/resources/assets/styles/components/sections.styl diff --git a/web/app/mu-plugins/cube/src/Elementor/Setup.php b/web/app/mu-plugins/cube/src/Elementor/Setup.php index 46bad81..e820b45 100644 --- 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 '
'; $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 '
'; + echo '
'; 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 '
'; + echo '
'; } @@ -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 .= '
'; + $res .= '
'; $res .= '<# }); #>'; $res .= '
'; // .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; #>
', ] ); diff --git a/web/app/themes/Usines/resources/assets/styles/app.styl b/web/app/themes/Usines/resources/assets/styles/app.styl index cfd6695..7d656dc 100644 --- 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 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 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 456bb72..add8d37 100644 --- 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', + }, }, }, -- 2.39.5