From b4f90015d7db77a7cfa862cc12080c77a226bc2d Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 1 Dec 2020 20:46:18 +0100 Subject: [PATCH] WIP #4064 @8 --- .../mu-plugins/cube/src/Elementor/Setup.php | 195 ++++++++++++++++++ .../cube/src/Elementor/Widgets/TextBlock.php | 2 +- .../assets/styles/common/layout.styl | 8 +- 3 files changed, 200 insertions(+), 5 deletions(-) diff --git a/web/app/mu-plugins/cube/src/Elementor/Setup.php b/web/app/mu-plugins/cube/src/Elementor/Setup.php index 2fc5697..46bad81 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\Utils; class Setup { @@ -15,6 +16,8 @@ class Setup { // Register widgets with Elementor add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']); + + $this->register_customisations(); } public function register_widgets() { @@ -31,4 +34,196 @@ class Setup { $manager->add_category('cube', ['title' => 'Cubedesigners']); } + public function register_customisations() { + $this->customise_sections(); + } + + public function customise_sections() { + + // Layered Backgrounds - PHP (Frontend) + add_action('elementor/frontend/section/before_render', function (Element_Base $element) { + echo '
'; + + $settings = $element->get_settings(); + + echo '
'; + + foreach ($settings['layers'] as $index => $layer) { + + $style = 'position: absolute;'; + + // Common styles + $keys = ['width', 'height', 'top', 'right', 'bottom', 'left']; // Which fields to use for styles + foreach ($keys as $key) { + if (empty($layer[$key])) continue; // Skip + $style .= "$key: {$layer[$key]};"; + } + + $z_index = 0 - $index - 1; // make z-index so layers stack based on original order + $style .= "z-index: $z_index;"; + + switch($layer['type']) { + case 'color': + $style .= "background-color: {$layer['color']};"; + break; + case 'image': + $style .= "background:url('{$layer['image']['url']}') no-repeat;"; + break; + } + + echo '
'; + + } + + echo '
'; // .layered-backgrounds + + }); + + // Layered Backgrounds - closing tag on frontend wrapper + add_action('elementor/frontend/section/after_render', function (Element_Base $element) { + echo '
'; // .layered-bg-wrapper + }); + + //----------- + + // Layered Backgrounds - JS (Elementor Editor Template) + // NOTE: This should match the PHP template above as closely as possible but because Elementor + // doesn't support this properly, the structures are slightly different. + // Ref: https://github.com/elementor/elementor/issues/4092 + add_action( 'elementor/section/print_template', function($template, $widget) { + + // Unlike in the PHP version, we have to make a separate DIV here that doesn't wrap + // the .elementor-container (doing so causes JS errors in the editor due to overly + // specific CSS selectors for getting the element in the editor) + // The visual result should be the same as long as the background layer divs are just + // inside the highest section wrapper... + + $res = '
'; + + $res .= '<# _.each( settings.layers, function(layer, index) { + + // Prepare style attribute, skipping any empty fields + let style = "position: absolute;"; + + _.each(["width", "height", "top", "right", "bottom", "left"], function(property) { + if (layer[property] == "") return; + style += `${property}: ${layer[property]};`; + }); + + let zIndex = 0 - index - 1; + style += `z-index: ${zIndex};`; + + switch(layer.type) { + case "color": + style += `background-color: ${layer.color};`; + break; + case "image": + style += `background:url(${layer.image.url}) no-repeat;`; + break; + } + #>'; + + $res .= '
'; + $res .= '<# }); #>'; + + $res .= '
'; // .layered-backgrounds + + return $res . $template; + }, 10, 2 ); + + // 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 + $element->start_controls_section( + 'section_background_layers', + [ + 'label' => __('Background Layers', 'cube'), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $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 }}}', + ] + ); + + $element->end_controls_section(); + + }, 10, 2); + } + } diff --git a/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php index 462f732..952aa63 100644 --- a/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php +++ b/web/app/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php @@ -291,7 +291,7 @@ class TextBlock extends _Base { * @since 1.0.0 * @access protected */ - protected function _content_template() { + protected function content_template() { ?> <# diff --git a/web/app/themes/Usines/resources/assets/styles/common/layout.styl b/web/app/themes/Usines/resources/assets/styles/common/layout.styl index 89191a4..eb21f4e 100644 --- a/web/app/themes/Usines/resources/assets/styles/common/layout.styl +++ b/web/app/themes/Usines/resources/assets/styles/common/layout.styl @@ -21,24 +21,24 @@ constrain(margin-bottom, $vertical-gutter) // Set margin bottom to standard gutter // Get rid of default 10px padding around elements -.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated +.elementor-column-gap-default > .elementor-column > .elementor-element-populated padding: 0 .elementor-section-boxed > .elementor-column-gap-extended horizontal-spacing(-1.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below - > .elementor-row > .elementor-column > .elementor-element-populated + > .elementor-column > .elementor-element-populated horizontal-spacing(1.5vw) padding-top: 0 padding-bottom: 0 .elementor-section-boxed > .elementor-column-gap-wide horizontal-spacing(-2.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below - > .elementor-row > .elementor-column > .elementor-element-populated + > .elementor-column > .elementor-element-populated horizontal-spacing(2.5vw) padding-top: 0 padding-bottom: 0 // Once columns have wrapped, remove padding for all +below($breakpoint-columns) - .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated + .elementor-container > .elementor-column > .elementor-element-populated padding: 0 !important -- 2.39.5