You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

559 lines
19 KiB
PHTML

<?php
/**
* Module Margin and Padding class.
*
* This is not how main module margin and padding is generated. Mostly used by other custom options
* group such as Button and Field Input. Doesn't support selective padding yet.
*
* Copy of ET_Builder_Element::process_advanced_custom_margin_options().
*
* @since 3.23
* @since 4.6.0 Add sticky style support
*/
class ET_Builder_Module_Field_MarginPadding extends ET_Builder_Module_Field_Base {
/**
* True when Divi plugin is active.
*
* @since 3.23
*
* @var bool
*/
public $is_plugin_active = false;
/**
* Margin padding properties.
*
* @since 3.23
*
* @var array
*/
public $properties;
/**
* Margin padding config.
*
* @since 3.23
*
* @var array
*/
public $config;
/**
* Constructor.
*/
public function __construct() {
$this->is_plugin_active = et_is_builder_plugin_active();
$this->properties = array(
'custom_padding',
'custom_padding_tablet',
'custom_padding_phone',
'custom_padding_last_edited',
'custom_margin',
'custom_margin_tablet',
'custom_margin_phone',
'custom_margin_last_edited',
'padding_1_last_edited',
'padding_2_last_edited',
'padding_3_last_edited',
'padding_4_last_edited',
);
$this->config = array(
'label' => '',
'prefix' => '',
'tab_slug' => 'advanced',
'toggle_slug' => 'margin_padding',
'sub_toggle' => null,
'option_category' => 'layout',
'depends_show_if' => '',
'depends_show_if_not' => '',
'use_padding' => true,
'use_margin' => true,
'mobile_options' => true,
'sticky' => true,
'hover' => 'tabs',
'custom_padding' => '',
'custom_margin' => '',
'depends_show_if' => 'on',
'priority' => 90,
);
}
/**
* Returns prefixed field names.
*
* @since 3.23
*
* @param string $prefix Prefix.
*
* @return array
*/
public function get_prefixed_field_names( $prefix ) {
$prefix = $prefix ? "{$prefix}_" : '';
return array(
"{$prefix}custom_padding",
"{$prefix}custom_padding_tablet",
"{$prefix}custom_padding_phone",
"{$prefix}custom_padding_last_edited",
"{$prefix}custom_margin",
"{$prefix}custom_margin_tablet",
"{$prefix}custom_margin_phone",
"{$prefix}custom_margin_last_edited",
"{$prefix}padding_1_last_edited",
"{$prefix}padding_2_last_edited",
"{$prefix}padding_3_last_edited",
"{$prefix}padding_4_last_edited",
);
}
/**
* Add selector prefix if needed.
*
* @since 3.23
*
* Custom margin & padding selector for button element. This is custom selector exist on
* ET_Builder_Element. We should do the samething to override hardcoded padding generated
* by button element.
*
* @see ET_Builder_Element::process_advanced_button_options
*/
public function get_prefixed_selector( $css_element, $type = '', $is_divi_builder_plugin = false ) {
// See ET_Builder_Element->process_advanced_button_options() on generating $css_element_processed
// for non Divi Builder Plugin. Explicitly add '.et_pb_section' to the selector so selector
// splitting during prefixing does not incorrectly add third party classes before #et-boc.
if ( 'button' === $type && ! $is_divi_builder_plugin ) {
$css_element = "body #page-container .et_pb_section {$css_element}";
}
return $css_element;
}
/**
* Returns fields definition.
*
* @since 3.23
*
* @param array $args Field configuration.
*
* @return array
*/
public function get_fields( array $args = array() ) {
$fields = array();
$config = wp_parse_args( $args, $this->config );
// Config details.
$tab_slug = $config['tab_slug'];
$toggle_slug = $config['toggle_slug'];
$sub_toggle = $config['sub_toggle'];
list(
$custom_padding,
$custom_padding_tablet,
$custom_padding_phone,
$custom_padding_last_edited,
$custom_margin,
$custom_margin_tablet,
$custom_margin_phone,
$custom_margin_last_edited,
$padding_1_last_edited,
$padding_2_last_edited,
$padding_3_last_edited,
$padding_4_last_edited,
) = $this->get_prefixed_field_names( $config['prefix'] );
// Custom margin.
if ( $config['use_margin'] ) {
$fields[ $custom_margin ] = array(
'label' => sprintf( esc_html__( '%1$s Margin', 'et_builder' ), $config['label'] ),
'description' => esc_html__( 'Margin adds extra space to the outside of the element, increasing the distance between the element and other items on the page.', 'et_builder' ),
'type' => 'custom_margin',
'option_category' => $config['option_category'],
'mobile_options' => $config['mobile_options'],
'hover' => $config['hover'],
'sticky' => $config['sticky'],
'depends_show_if' => $config['depends_show_if'],
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
'sub_toggle' => $sub_toggle,
'priority' => $config['priority'],
);
$fields[ $custom_margin_tablet ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
);
$fields[ $custom_margin_phone ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
// Make it possible to override/add options.
if ( ! empty( $config['custom_margin'] ) ) {
$fields[ $custom_margin ] = array_merge( $fields[ $custom_margin ], $config['custom_margin'] );
}
$fields[ $custom_margin_last_edited ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
$fields[ $padding_1_last_edited ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
$fields[ $padding_2_last_edited ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
$fields[ $padding_3_last_edited ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
$fields[ $padding_4_last_edited ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
}
// Custom padding.
if ( $config['use_padding'] ) {
$fields[ $custom_padding ] = array(
'label' => sprintf( esc_html__( '%1$s Padding', 'et_builder' ), $config['label'] ),
'description' => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'et_builder' ),
'type' => 'custom_padding',
'option_category' => $config['option_category'],
'mobile_options' => $config['mobile_options'],
'hover' => $config['hover'],
'sticky' => $config['sticky'],
'depends_show_if' => $config['depends_show_if'],
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
'sub_toggle' => $sub_toggle,
'priority' => $config['priority'],
);
if ( isset( $config['depends_on'] ) && '' !== $config['depends_on'] ) {
$fields[ $custom_padding ]['depends_on'] = $config['depends_on'];
}
$fields[ $custom_padding_tablet ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
$fields[ $custom_padding_phone ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
// Make it possible to override/add options.
if ( ! empty( $config['custom_padding'] ) ) {
$fields[ $custom_padding ] = array_merge( $fields[ $custom_padding ], $config['custom_padding'] );
}
$fields[ $custom_padding_last_edited ] = array(
'type' => 'skip',
'tab_slug' => $tab_slug,
'toggle_slug' => $toggle_slug,
);
}
return $fields;
}
/**
* Adds CSS rule.
*
* @since 3.23
* @since 4.6.0 Add sticky style support
*
* @see ET_Builder_Element->process_advanced_custom_margin_options()
*
* @param ET_Builder_Element $module Module object.
* @param string $prefix Label.
* @param array $options Field settings.
* @param string $function_name Shortcode function.
* @param string $type Margin padding type.
*/
public function update_styles( $module, $prefix, $options, $function_name, $type ) {
$utils = ET_Core_Data_Utils::instance();
$all_values = $module->props;
$hover = et_pb_hover_options();
$sticky = et_pb_sticky_options();
$responsive = ET_Builder_Module_Helper_ResponsiveOptions::instance();
$advanced_fields = $module->advanced_fields;
$css = isset( $this->advanced_fields['margin_padding']['css'] ) ? $this->advanced_fields['margin_padding']['css'] : array();
// Conditional status.
$is_divi_builder_plugin = et_is_builder_plugin_active();
$is_important_set = isset( $options['css']['important'] );
$is_global_important = $is_important_set && 'all' === $options['css']['important'];
$is_use_padding = $utils->array_get( $options, 'use_padding', true );
$is_use_margin = $utils->array_get( $options, 'use_margin', true );
$is_sticky_module = $sticky->is_sticky_module( $all_values );
// Selectors.
$main_selector = ! empty( $options['css']['main'] ) ? $options['css']['main'] : $module->main_css_element;
$limited_selector = ! empty( $options['css']['limited_main'] ) ? $options['css']['limited_main'] : '';
$default_selector = $is_divi_builder_plugin && ! empty( $limited_selector ) ? $limited_selector : $main_selector;
// Get important CSS list.
$important_options = array();
if ( $is_important_set && is_array( $options['css']['important'] ) ) {
$important_options = $options['css']['important'];
}
// A. Padding.
if ( $is_use_padding ) {
// Padding Selectors.
$padding_selector = ! empty( $options['css']['padding'] ) ? $options['css']['padding'] : $default_selector;
$padding_selector_processed = $this->get_prefixed_selector( $padding_selector, $type, $is_divi_builder_plugin );
if ( $is_divi_builder_plugin && ! empty( $limited_selector ) ) {
$padding_selector_processed = $padding_selector;
}
// A.1. Responsive Padding.
$is_padding_responsive = $responsive->is_responsive_enabled( $all_values, "{$prefix}_custom_padding" );
$padding_desktop = $responsive->get_any_value( $all_values, "{$prefix}_custom_padding" );
$padding_tablet = $is_padding_responsive ? $responsive->get_any_value( $all_values, "{$prefix}_custom_padding_tablet" ) : '';
$padding_phone = $is_padding_responsive ? $responsive->get_any_value( $all_values, "{$prefix}_custom_padding_phone" ) : '';
$important = in_array( 'custom_padding', $important_options ) || $is_global_important ? true : false;
$padding_styles = array(
'desktop' => '' !== $padding_desktop ? rtrim( et_builder_get_element_style_css( $padding_desktop, 'padding', $important ) ) : '',
'tablet' => '' !== $padding_tablet ? rtrim( et_builder_get_element_style_css( $padding_tablet, 'padding', $important ) ) : '',
'phone' => '' !== $padding_phone ? rtrim( et_builder_get_element_style_css( $padding_phone, 'padding', $important ) ) : '',
);
$responsive->declare_responsive_css( $padding_styles, $padding_selector_processed, $function_name, $module->get_style_priority() );
// A.2. Hover Padding.
$custom_padding_hover = $hover->get_value( "{$prefix}_custom_padding", $all_values, '' );
if ( '' !== $custom_padding_hover && et_builder_is_hover_enabled( "{$prefix}_custom_padding", $all_values ) ) {
$padding_hover_selector = $utils->array_get( $options, 'css.hover', $hover->add_hover_to_selectors( $padding_selector ) );
$padding_hover_selector_processed = $this->get_prefixed_selector( $padding_hover_selector, $type, $is_divi_builder_plugin );
if ( $is_divi_builder_plugin && ! empty( $limited_selector ) ) {
$padding_hover_selector_processed = $padding_hover_selector;
}
$el_style = array(
'selector' => $padding_hover_selector_processed,
'declaration' => rtrim( et_builder_get_element_style_css( $custom_padding_hover, 'padding', true ) ),
'priority' => 20,
);
ET_Builder_Element::set_style( $function_name, $el_style );
}
// A.3. Sticky Padding.
$custom_padding_sticky = $sticky->get_value( "{$prefix}_custom_padding", $all_values, '' );
if ( '' !== $custom_padding_sticky && $sticky->is_enabled( "{$prefix}_custom_padding", $all_values ) ) {
$padding_sticky_selector = $sticky->add_sticky_to_order_class(
$padding_selector,
$is_sticky_module
);
$padding_sticky_selector_processed = $this->get_prefixed_selector(
$padding_sticky_selector,
$type,
$is_divi_builder_plugin
);
if ( $is_divi_builder_plugin && ! empty( $limited_selector ) ) {
$padding_sticky_selector_processed = $padding_sticky_selector;
}
ET_Builder_Element::set_style(
$function_name,
array(
'selector' => $padding_sticky_selector_processed,
'declaration' => rtrim(
et_builder_get_element_style_css(
$custom_padding_sticky,
'padding',
true
)
),
'priority' => 20,
)
);
}
}
// B. Margin.
if ( $is_use_margin ) {
// Margin Selectors.
$margin_selector = ! empty( $options['css']['margin'] ) ? $options['css']['margin'] : $default_selector;
$margin_selector_processed = $this->get_prefixed_selector( $margin_selector, $type, $is_divi_builder_plugin );
if ( $is_divi_builder_plugin && ! empty( $limited_selector ) ) {
$margin_selector_processed = $margin_selector;
}
// A.1. Responsive margin.
$is_margin_responsive = $responsive->is_responsive_enabled( $all_values, "{$prefix}_custom_margin" );
$margin_desktop = $responsive->get_any_value( $all_values, "{$prefix}_custom_margin" );
$margin_tablet = $is_margin_responsive ? $responsive->get_any_value( $all_values, "{$prefix}_custom_margin_tablet" ) : '';
$margin_phone = $is_margin_responsive ? $responsive->get_any_value( $all_values, "{$prefix}_custom_margin_phone" ) : '';
$important = in_array( 'custom_margin', $important_options ) || $is_global_important ? true : false;
$margin_styles = array(
'desktop' => '' !== $margin_desktop ? rtrim( et_builder_get_element_style_css( $margin_desktop, 'margin', $important ) ) : '',
'tablet' => '' !== $margin_tablet ? rtrim( et_builder_get_element_style_css( $margin_tablet, 'margin', $important ) ) : '',
'phone' => '' !== $margin_phone ? rtrim( et_builder_get_element_style_css( $margin_phone, 'margin', $important ) ) : '',
);
$responsive->declare_responsive_css( $margin_styles, $margin_selector_processed, $function_name, $module->get_style_priority() );
// A.2. Hover margin.
$custom_margin_hover = $hover->get_value( "{$prefix}_custom_margin", $all_values, '' );
if ( '' !== $custom_margin_hover && et_builder_is_hover_enabled( "{$prefix}_custom_margin", $all_values ) ) {
$margin_hover_selector = $utils->array_get( $options, 'css.hover', $hover->add_hover_to_selectors( $margin_selector ) );
$margin_hover_selector_processed = $this->get_prefixed_selector( $margin_hover_selector, $type, $is_divi_builder_plugin );
if ( $is_divi_builder_plugin && ! empty( $limited_selector ) ) {
$margin_hover_selector_processed = $margin_hover_selector;
}
$el_style = array(
'selector' => $margin_hover_selector_processed,
'declaration' => rtrim( et_builder_get_element_style_css( $custom_margin_hover, 'margin', true ) ),
'priority' => 20,
);
ET_Builder_Element::set_style( $function_name, $el_style );
}
// A.3. Hover margin.
$custom_margin_sticky = $sticky->get_value( "{$prefix}_custom_margin", $all_values, '' );
if ( '' !== $custom_margin_sticky && $sticky->is_enabled( "{$prefix}_custom_margin", $all_values ) ) {
$margin_sticky_selector = $sticky->add_sticky_to_order_class(
$margin_selector,
$is_sticky_module
);
$margin_sticky_selector_processed = $this->get_prefixed_selector(
$margin_sticky_selector,
$type,
$is_divi_builder_plugin
);
if ( $is_divi_builder_plugin && ! empty( $limited_selector ) ) {
$margin_sticky_selector_processed = $margin_sticky_selector;
}
ET_Builder_Element::set_style(
$function_name,
array(
'selector' => $margin_sticky_selector_processed,
'declaration' => rtrim(
et_builder_get_element_style_css(
$custom_margin_sticky,
'margin',
true
)
),
'priority' => 20,
)
);
}
}
}
/**
* Process Margin & Padding options and adds CSS rules.
*
* @since 3.23
*
* @param ET_Builder_Element $module Module object.
* @param string $function_name Shortcode function.
*/
public function process_advanced_css( $module, $function_name ) {
$utils = ET_Core_Data_Utils::instance();
$all_values = $module->props;
$advanced_fields = $module->advanced_fields;
// Disable if module doesn't set advanced_fields property and has no VB support.
if ( ! $module->has_vb_support() && ! $module->has_advanced_fields ) {
return;
}
$allowed_advanced_fields = array( 'form_field', 'button', 'image_icon' );
foreach ( $allowed_advanced_fields as $advanced_field ) {
if ( empty( $advanced_fields[ $advanced_field ] ) ) {
continue;
}
foreach ( $advanced_fields[ $advanced_field ] as $label => $form_field ) {
$margin_key = "{$label}_custom_margin";
$padding_key = "{$label}_custom_padding";
$multi_view = et_pb_multi_view_options( $module );
$has_margin = '' !== $utils->array_get( $all_values, $margin_key, '' );
$has_padding = '' !== $utils->array_get( $all_values, $padding_key, '' );
$has_margin_hover = $multi_view->hover_is_enabled( $margin_key );
$has_padding_hover = $multi_view->hover_is_enabled( $padding_key );
$has_padding_sticky = ! empty( et_pb_sticky_options()->get_value( "{$label}_custom_padding", $all_values, '' ) ) && et_pb_sticky_options()->is_enabled( "{$label}_custom_padding", $all_values );
$has_margin_sticky = ! empty( et_pb_sticky_options()->get_value( "{$label}_custom_margin", $all_values, '' ) ) && et_pb_sticky_options()->is_enabled( "{$label}_custom_margin", $all_values );
if ( $has_margin || $has_padding || $has_margin_hover || $has_padding_hover || $has_padding_sticky || $has_margin_sticky ) {
$settings = $utils->array_get( $form_field, 'margin_padding', array() );
// Ensure main selector exists.
$form_field_margin_padding_css = $utils->array_get( $settings, 'css.main', '' );
if ( empty( $form_field_margin_padding_css ) ) {
$utils->array_set( $settings, 'css.main', $utils->array_get( $form_field, 'css.main', '' ) );
}
$this->update_styles( $module, $label, $settings, $function_name, $advanced_field );
}
}
}
}
/**
* Process Margin & Padding options and adds CSS rules.
*
* @since 4.10.0
* @param array $attrs Module attributes.
*/
public function is_used( $attrs ) {
foreach ( $attrs as $attr => $value ) {
if ( ! $value ) {
continue;
}
$is_attr = false !== strpos( $attr, 'custom_margin' )
|| false !== strpos( $attr, 'custom_padding' );
if ( $is_attr ) {
return true;
}
}
return false;
}
}
return new ET_Builder_Module_Field_MarginPadding();