'', 'props' => array(), 'fields' => array(), 'backgrounds' => array(), 'module' => '', ); // Parse arguments. $args = wp_parse_args( $args, $defaults ); if ( isset( $args['backgrounds'], $args['module'] ) && ! empty( $args['backgrounds'] ) && ! empty( $args['module'] ) ) { if ( ET_BUILDER_PRODUCT_VERSION < '4.16.0' ) { self::process_old_background( $args ); } else { foreach( $args['backgrounds'] as $basename => $css_element ) { $bg_args = array( 'base_prop_name' => $basename, 'props' => $args['props'], 'important' => ' !important', 'fields_definition' => $args['fields'], 'selector' => $css_element['normal'], 'selector_hover' => $css_element['hover'], 'function_name' => $args['render_slug'], 'has_background_color_toggle' => false, 'use_background_color' => true, 'use_background_image' => true, 'use_background_color_reset' => true, 'use_background_video' => false, 'use_background_pattern' => false, 'use_background_mask' => false, 'use_background_image_parallax' => false, 'prop_name_aliases' => array( "use_{$basename}_color_gradient" => "{$basename}_use_color_gradient", "{$basename}" => "{$basename}_color", ), ); // Process background style. et_pb_background_options()->get_background_style( $bg_args ); } } } } public static function process_advanced_margin_padding_css( $module, $function_name, $margin_padding, $fields = array() ) { $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 = $fields; foreach ( $allowed_advanced_fields as $advanced_field ) { if ( ! empty( $advanced_fields[ $advanced_field ] ) ) { foreach ( $advanced_fields[ $advanced_field ] as $label => $form_field ) { $margin_key = "{$label}_custom_margin"; $padding_key = "{$label}_custom_padding"; if ( '' !== $utils->array_get( $all_values, $margin_key, '' ) || '' !== $utils->array_get( $all_values, $padding_key, '' ) ) { $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', '' ) ); } $margin_padding->update_styles( $module, $label, $settings, $function_name, $advanced_field ); } } } } } public static function process_multiple_checkboxes_value( $value, $values = array() ) { if ( empty( $values ) && ! is_array( $values ) ) { return ''; } $new_values = array(); $value = explode( '|', $value ); foreach( $value as $key => $val ) { if ( 'on' === strtolower( $val ) ) { array_push( $new_values, $values[$key] ); } } return implode( ',', $new_values ); } public static function process_old_background( $args ) { foreach ( $args['backgrounds'] as $basename => $css_element ) { // Place to store processed background. It will be compared with the smaller device // background processed value to avoid rendering the same styles. $processed_background_color = ''; $processed_background_image = ''; $processed_background_blend = ''; // Store background images status because the process is extensive. $background_image_status = array( 'desktop' => false, 'tablet' => false, 'phone' => false, ); // Background Options Styling. foreach ( et_pb_responsive_options()->get_modes() as $device ) { $background_base_name = $basename; $background_prefix = "{$basename}_"; $background_style = ''; $is_desktop = 'desktop' === $device; $suffix = ! $is_desktop ? "_{$device}" : ''; $background_color_style = ''; $background_image_style = ''; $background_images = array(); $has_background_color_gradient = false; $has_background_image = false; $has_background_gradient_and_image = false; $is_background_color_gradient_disabled = false; $is_background_image_disabled = false; $background_color_gradient_overlays_image = 'off'; // Ensure responsive is active. if ( ! $is_desktop && ! et_pb_responsive_options()->is_responsive_enabled( $args['props'], "{$basename}_color" ) ) { continue; } // A. Background Gradient. $use_background_color_gradient = et_pb_responsive_options()->get_inheritance_background_value( $args['props'], "{$background_prefix}use_color_gradient", $device, $background_base_name, $args['fields'] ); if ( 'on' === $use_background_color_gradient ) { $background_color_gradient_overlays_image = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_overlays_image{$suffix}", '', true ); $gradient_properties = array( 'type' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_type{$suffix}", '', true ), 'direction' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_direction{$suffix}", '', true ), 'radial_direction' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_direction_radial{$suffix}", '', true ), 'color_start' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_start{$suffix}", '', true ), 'color_end' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_end{$suffix}", '', true ), 'start_position' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_start_position{$suffix}", '', true ), 'end_position' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_end_position{$suffix}", '', true ), ); // Save background gradient into background images list. $background_images[] = $args['module']->get_gradient( $gradient_properties ); // Flag to inform BG Color if current module has Gradient. $has_background_color_gradient = true; } elseif ( 'off' === $use_background_color_gradient ) { $is_background_color_gradient_disabled = true; } // B. Background Image. $background_image = et_pb_responsive_options()->get_inheritance_background_value( $args['props'], "{$background_prefix}image", $device, $background_base_name, $args['fields'] ); $parallax = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}parallax{$suffix}", 'off' ); // BG image and parallax status. $is_background_image_active = '' !== $background_image && 'on' !== $parallax; $background_image_status[ $device ] = $is_background_image_active; if ( $is_background_image_active ) { // Flag to inform BG Color if current module has Image. $has_background_image = true; // Check previous BG image status. Needed to get the correct value. $is_prev_background_image_active = true; if ( ! $is_desktop ) { $is_prev_background_image_active = 'tablet' === $device ? $background_image_status['desktop'] : $background_image_status['tablet']; } // Size. $background_size_default = ET_Builder_Element::$_->array_get( $args['fields'], "{$background_prefix}size.default", '' ); $background_size = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}size{$suffix}", $background_size_default, ! $is_prev_background_image_active ); if ( '' !== $background_size ) { $background_style .= sprintf( 'background-size: %1$s; ', esc_html( $background_size ) ); } // Position. $background_position_default = ET_Builder_Element::$_->array_get( $args['fields'], "{$background_prefix}position.default", '' ); $background_position = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}position{$suffix}", $background_position_default, ! $is_prev_background_image_active ); if ( '' !== $background_position ) { $background_style .= sprintf( 'background-position: %1$s; ', esc_html( str_replace( '_', ' ', $background_position ) ) ); } // Repeat. $background_repeat_default = ET_Builder_Element::$_->array_get( $args['fields'], "{$background_prefix}repeat.default", '' ); $background_repeat = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}repeat{$suffix}", $background_repeat_default, ! $is_prev_background_image_active ); if ( '' !== $background_repeat ) { $background_style .= sprintf( 'background-repeat: %1$s; ', esc_html( $background_repeat ) ); } // Blend. $background_blend_default = ET_Builder_Element::$_->array_get( $args['fields'], "{$background_prefix}blend.default", '' ); $background_blend = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}blend{$suffix}", $background_blend_default, ! $is_prev_background_image_active ); $background_blend_inherit = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}blend{$suffix}", '', true ); if ( '' !== $background_blend_inherit ) { // Don't print the same image blend style. if ( '' !== $background_blend ) { $background_style .= sprintf( 'background-blend-mode: %1$s; ', esc_html( $background_blend ) ); } // Reset - If background has image and gradient, force background-color: initial. if ( $has_background_color_gradient && $has_background_image && $background_blend_inherit !== $background_blend_default ) { $has_background_gradient_and_image = true; $background_color_style = 'initial'; $background_style .= 'background-color: initial; '; } $processed_background_blend = $background_blend; } // Only append background image when the image is exist. $background_images[] = sprintf( 'url(%1$s)', esc_html( $background_image ) ); } elseif ( '' === $background_image ) { // Reset - If background image is disabled, ensure we reset prev background blend mode. if ( '' !== $processed_background_blend ) { $background_style .= 'background-blend-mode: normal; '; $processed_background_blend = ''; } $is_background_image_disabled = true; } if ( ! empty( $background_images ) ) { // The browsers stack the images in the opposite order to what you'd expect. if ( 'on' !== $background_color_gradient_overlays_image ) { $background_images = array_reverse( $background_images ); } // Set background image styles only it's different compared to the larger device. $background_image_style = join( ', ', $background_images ); if ( $processed_background_image !== $background_image_style ) { $background_style .= sprintf( 'background-image: %1$s !important;', esc_html( $background_image_style ) ); } } elseif ( ! $is_desktop && $is_background_color_gradient_disabled && $is_background_image_disabled ) { // Reset - If background image and gradient are disabled, reset current background image. $background_image_style = 'initial'; $background_style .= 'background-image: initial !important;'; } // Save processed background images. $processed_background_image = $background_image_style; // C. Background Color. if ( ! $has_background_gradient_and_image ) { // Background color `initial` was added by default to reset button background // color when user disable it on mobile preview mode. However, it should // be applied only when the background color is really disabled because user // may use theme customizer to setup global button background color. We also // need to ensure user still able to disable background color on mobile. $background_color_enable = ET_Builder_Element::$_->array_get( $args['props'], "{$background_prefix}enable_color{$suffix}", '' ); $background_color_initial = 'off' === $background_color_enable && ! $is_desktop ? 'initial' : ''; $background_color = et_pb_responsive_options()->get_inheritance_background_value( $args['props'], "{$background_prefix}color", $device, $background_base_name, $args['fields'] ); $background_color = '' !== $background_color ? $background_color : $background_color_initial; $background_color_style = $background_color; if ( '' !== $background_color && $processed_background_color !== $background_color ) { $background_style .= sprintf( 'background-color: %1$s !important; ', esc_html( $background_color ) ); } } // Save processed background color. $processed_background_color = $background_color_style; // Print background gradient and image styles. if ( '' !== $background_style ) { $background_style_attrs = array( 'selector' => $css_element['normal'], 'declaration' => rtrim( $background_style ), 'priority' => $args['module']->_style_priority, ); // Add media query attribute to background style attrs. if ( 'desktop' !== $device ) { $current_media_query = 'tablet' === $device ? 'max_width_980' : 'max_width_767'; $background_style_attrs['media_query'] = ET_Builder_Element::get_media_query( $current_media_query ); } ET_Builder_Element::set_style( $args['render_slug'], $background_style_attrs ); } } // Background Hover. if ( et_builder_is_hover_enabled( "{$basename}_color", $args['props'] ) ) { $background_base_name = $basename; $background_prefix = "{$basename}_"; $background_images_hover = array(); $background_hover_style = ''; $has_background_color_gradient_hover = false; $has_background_image_hover = false; $has_background_gradient_and_image_hover = false; $is_background_color_gradient_hover_disabled = false; $is_background_image_hover_disabled = false; $background_color_gradient_overlays_image_desktop = et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_overlays_image", 'off', true ); $gradient_properties_desktop = array( 'type' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_type", '', true ), 'direction' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_direction", '', true ), 'radial_direction' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_direction_radial", '', true ), 'color_start' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_start", '', true ), 'color_end' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_end", '', true ), 'start_position' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_start_position", '', true ), 'end_position' => et_pb_responsive_options()->get_any_value( $args['props'], "{$background_prefix}color_gradient_end_position", '', true ), ); $background_color_gradient_overlays_image_hover = 'off'; // Background Gradient Hover. // This part is little bit different compared to other hover implementation. In // this case, hover is enabled on the background field, not on the each of those // fields. So, built in function get_value() doesn't work in this case. // Temporarily, we need to fetch the the value from get_raw_value(). $use_background_color_gradient_hover = et_pb_responsive_options()->get_inheritance_background_value( $args['props'], "{$background_prefix}use_color_gradient", 'hover', $background_base_name, $args['fields'] ); if ( 'on' === $use_background_color_gradient_hover ) { // Desktop value as default. $background_color_gradient_type_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'type', '' ); $background_color_gradient_direction_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'direction', '' ); $background_color_gradient_radial_direction_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'radial_direction', '' ); $background_color_gradient_color_start_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'color_start', '' ); $background_color_gradient_color_end_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'color_end', '' ); $background_color_gradient_start_position_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'start_position', '' ); $background_color_gradient_end_position_desktop = ET_Builder_Element::$_->array_get( $gradient_properties_desktop, 'end_position', '' ); // Hover value. $background_color_gradient_type_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_type", $args['props'], $background_color_gradient_type_desktop ); $background_color_gradient_direction_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_direction", $args['props'], $background_color_gradient_direction_desktop ); $background_color_gradient_direction_radial_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_direction_radial", $args['props'], $background_color_gradient_radial_direction_desktop ); $background_color_gradient_start_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_start", $args['props'], $background_color_gradient_color_start_desktop ); $background_color_gradient_end_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_end", $args['props'], $background_color_gradient_color_end_desktop ); $background_color_gradient_start_position_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_start_position", $args['props'], $background_color_gradient_start_position_desktop ); $background_color_gradient_end_position_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_end_position", $args['props'], $background_color_gradient_end_position_desktop ); $background_color_gradient_overlays_image_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}color_gradient_overlays_image", $args['props'], $background_color_gradient_overlays_image_desktop ); $has_background_color_gradient_hover = true; $gradient_values_hover = array( 'type' => '' !== $background_color_gradient_type_hover ? $background_color_gradient_type_hover : $background_color_gradient_type_desktop, 'direction' => '' !== $background_color_gradient_direction_hover ? $background_color_gradient_direction_hover : $background_color_gradient_direction_desktop, 'radial_direction' => '' !== $background_color_gradient_direction_radial_hover ? $background_color_gradient_direction_radial_hover : $background_color_gradient_radial_direction_desktop, 'color_start' => '' !== $background_color_gradient_start_hover ? $background_color_gradient_start_hover : $background_color_gradient_color_start_desktop, 'color_end' => '' !== $background_color_gradient_end_hover ? $background_color_gradient_end_hover : $background_color_gradient_color_end_desktop, 'start_position' => '' !== $background_color_gradient_start_position_hover ? $background_color_gradient_start_position_hover : $background_color_gradient_start_position_desktop, 'end_position' => '' !== $background_color_gradient_end_position_hover ? $background_color_gradient_end_position_hover : $background_color_gradient_end_position_desktop, ); $background_images_hover[] = $args['module']->get_gradient( $gradient_values_hover ); } elseif ( 'off' === $use_background_color_gradient_hover ) { $is_background_color_gradient_hover_disabled = true; } // Background Image Hover. // This part is little bit different compared to other hover implementation. In // this case, hover is enabled on the background field, not on the each of those // fields. So, built in function get_value() doesn't work in this case. // Temporarily, we need to fetch the the value from get_raw_value(). $background_image_hover = et_pb_responsive_options()->get_inheritance_background_value( $args['props'], "{$background_prefix}image", 'hover', $background_base_name, $args['fields'] ); $parallax_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}parallax", $args['props'] ); if ( '' !== $background_image_hover && null !== $background_image_hover && 'on' !== $parallax_hover ) { // Flag to inform BG Color if current module has Image. $has_background_image_hover = true; // Size. $background_size_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}size", $args['props'] ); $background_size_desktop = ET_Builder_Element::$_->array_get( $args['props'], "{$background_prefix}size", '' ); $is_same_background_size = $background_size_hover === $background_size_desktop; if ( empty( $background_size_hover ) && ! empty( $background_size_desktop ) ) { $background_size_hover = $background_size_desktop; } if ( ! empty( $background_size_hover ) && ! $is_same_background_size ) { $background_hover_style .= sprintf( 'background-size: %1$s; ', esc_html( $background_size_hover ) ); } // Position. $background_position_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}position", $args['props'] ); $background_position_desktop = ET_Builder_Element::$_->array_get( $args['props'], "{$background_prefix}position", '' ); $is_same_background_position = $background_position_hover === $background_position_desktop; if ( empty( $background_position_hover ) && ! empty( $background_position_desktop ) ) { $background_position_hover = $background_position_desktop; } if ( ! empty( $background_position_hover ) && ! $is_same_background_position ) { $background_hover_style .= sprintf( 'background-position: %1$s; ', esc_html( str_replace( '_', ' ', $background_position_hover ) ) ); } // Repeat. $background_repeat_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}repeat", $args['props'] ); $background_repeat_desktop = ET_Builder_Element::$_->array_get( $args['props'], "{$background_prefix}repeat", '' ); $is_same_background_repeat = $background_repeat_hover === $background_repeat_desktop; if ( empty( $background_repeat_hover ) && ! empty( $background_repeat_desktop ) ) { $background_repeat_hover = $background_repeat_desktop; } if ( ! empty( $background_repeat_hover ) && ! $is_same_background_repeat ) { $background_hover_style .= sprintf( 'background-repeat: %1$s; ', esc_html( $background_repeat_hover ) ); } // Blend. $background_blend_hover = et_pb_hover_options()->get_raw_value( "{$background_prefix}blend", $args['props'] ); $background_blend_default = ET_Builder_Element::$_->array_get( $args['fields'], "{$background_prefix}blend.default", '' ); $background_blend_desktop = ET_Builder_Element::$_->array_get( $args['props'], "{$background_prefix}blend", '' ); $is_same_background_blend = $background_blend_hover === $background_blend_desktop; if ( empty( $background_blend_hover ) && ! empty( $background_blend_desktop ) ) { $background_blend_hover = $background_blend_desktop; } if ( ! empty( $background_blend_hover ) ) { if ( ! $is_same_background_blend ) { $background_hover_style .= sprintf( 'background-blend-mode: %1$s; ', esc_html( $background_blend_hover ) ); } // Force background-color: initial. if ( $has_background_color_gradient_hover && $has_background_image_hover && $background_blend_hover !== $background_blend_default ) { $has_background_gradient_and_image_hover = true; $background_hover_style .= 'background-color: initial !important;'; } } // Only append background image when the image exists. $background_images_hover[] = sprintf( 'url(%1$s)', esc_html( $background_image_hover ) ); } elseif ( '' === $background_image_hover ) { $is_background_image_hover_disabled = true; } if ( ! empty( $background_images_hover ) ) { // The browsers stack the images in the opposite order to what you'd expect. if ( 'on' !== $background_color_gradient_overlays_image_hover ) { $background_images_hover = array_reverse( $background_images_hover ); } $background_hover_style .= sprintf( 'background-image: %1$s !important;', esc_html( join( ', ', $background_images_hover ) ) ); } elseif ( $is_background_color_gradient_hover_disabled && $is_background_image_hover_disabled ) { $background_hover_style .= 'background-image: initial !important;'; } // Background Color Hover. if ( ! $has_background_gradient_and_image_hover ) { $background_color_hover = et_pb_responsive_options()->get_inheritance_background_value( $args['props'], "{$background_prefix}color", 'hover', $background_base_name, $args['fields'] ); $background_color_hover = '' !== $background_color_hover ? $background_color_hover : 'transparent'; if ( '' !== $background_color_hover ) { $background_hover_style .= sprintf( 'background-color: %1$s !important; ', esc_html( $background_color_hover ) ); } } // Print background hover gradient and image styles. if ( '' !== $background_hover_style ) { $background_hover_style_attrs = array( 'selector' => $css_element['hover'], 'declaration' => rtrim( $background_hover_style ), 'priority' => $args['module']->_style_priority, ); ET_Builder_Element::set_style( $args['render_slug'], $background_hover_style_attrs ); } } } } }