3500 lines
124 KiB
PHP
3500 lines
124 KiB
PHP
<?php
|
|
/**
|
|
* Add an element to fusion-builder.
|
|
*
|
|
* @package fusion-builder
|
|
* @since 1.0
|
|
*/
|
|
|
|
if ( ! class_exists( 'Fusion_Column_Element' ) ) {
|
|
/**
|
|
* Shortcode class.
|
|
*
|
|
* @since 1.0
|
|
*/
|
|
class Fusion_Column_Element extends Fusion_Element {
|
|
|
|
/**
|
|
* The one, true instance array of this object.
|
|
*
|
|
* @static
|
|
* @access private
|
|
* @since 1.0
|
|
* @var array
|
|
*/
|
|
public static $instances = [];
|
|
|
|
/**
|
|
* Column counter.
|
|
*
|
|
* @access private
|
|
* @since 1.9
|
|
* @var int
|
|
*/
|
|
private $column_counter = 0;
|
|
|
|
/**
|
|
* An array of the shortcode attributes, before merging with defaults.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @var array
|
|
*/
|
|
public $atts;
|
|
|
|
/**
|
|
* Styles for style block.
|
|
*
|
|
* @access protected
|
|
* @since 3.0
|
|
* @var string
|
|
*/
|
|
protected $styles = '';
|
|
|
|
/**
|
|
* Previous spacing if set.
|
|
*
|
|
* @access protected
|
|
* @since 3.0
|
|
* @var mixed
|
|
*/
|
|
protected $previous_spacing = '';
|
|
|
|
/**
|
|
* Active parent or not.
|
|
*
|
|
* @access protected
|
|
* @since 3.0
|
|
* @var bool
|
|
*/
|
|
public $active_parent = false;
|
|
|
|
/**
|
|
* Column args for parent if nested.
|
|
*
|
|
* @access private
|
|
* @since 3.0
|
|
* @var mixed
|
|
*/
|
|
private $parent_args = false;
|
|
|
|
/**
|
|
* If current column is nested.
|
|
*
|
|
* @access private
|
|
* @since 3.0
|
|
* @var mixed
|
|
*/
|
|
private $nested = false;
|
|
|
|
/**
|
|
* If column is in the process of rendering.
|
|
*
|
|
* @access private
|
|
* @since 3.0
|
|
* @var mixed
|
|
*/
|
|
private $rendering = false;
|
|
|
|
/**
|
|
* Shortcode attribute ID.
|
|
*
|
|
* @var string
|
|
*/
|
|
public $shortcode_attr_id = '';
|
|
|
|
/**
|
|
* Shortcode CSS class name.
|
|
*
|
|
* @var string
|
|
*/
|
|
public $shortcode_classname = '';
|
|
|
|
/**
|
|
* Shortcode name.
|
|
*
|
|
* @var string
|
|
*/
|
|
public $shortcode_name = '';
|
|
|
|
/**
|
|
* The filter-name we want to apply using apply_filters.
|
|
*
|
|
* @var string
|
|
*/
|
|
public $content_filter = '';
|
|
|
|
/**
|
|
* Whether or not column is nested.
|
|
*
|
|
* @var bool
|
|
*/
|
|
public $is_nested = false;
|
|
|
|
/**
|
|
* Constructor.
|
|
*
|
|
* @access public
|
|
* @param string $shortcode The shortcode we want to add.
|
|
* @param string $shortcode_attr_id The shortcode attribute-ID.
|
|
* @param string $classname The shortcode's CSS classname.
|
|
* @param string $content_filter The filter-name we want to apply using apply_filters.
|
|
* @since 1.0
|
|
*/
|
|
public function __construct( $shortcode, $shortcode_attr_id, $classname, $content_filter ) {
|
|
parent::__construct();
|
|
|
|
add_shortcode( $shortcode, [ $this, 'render' ] );
|
|
|
|
$this->shortcode_attr_id = $shortcode_attr_id;
|
|
$this->shortcode_classname = $classname;
|
|
$this->shortcode_name = $shortcode;
|
|
$this->content_filter = $content_filter;
|
|
|
|
add_filter( "fusion_attr_{$this->shortcode_attr_id}", [ $this, 'attr' ] );
|
|
add_filter( "fusion_attr_{$this->shortcode_attr_id}-wrapper", [ $this, 'wrapper_attr' ] );
|
|
add_filter( "fusion_attr_{$this->shortcode_attr_id}-anchor", [ $this, 'anchor_attr' ] );
|
|
add_filter( "fusion_attr_{$this->shortcode_attr_id}-hover-wrapper", [ $this, 'hover_wrapper_attr' ] );
|
|
add_filter( "fusion_attr_{$this->shortcode_attr_id}-hover-inner-wrapper", [ $this, 'hover_inner_wrapper_attr' ] );
|
|
add_filter( "fusion_attr_{$this->shortcode_attr_id}-empty-col-bg-img", [ $this, 'empty_col_bg_img_attr' ] );
|
|
}
|
|
|
|
/**
|
|
* Resets previous spacing.
|
|
*
|
|
* @static
|
|
* @access public
|
|
* @since 3.0
|
|
*/
|
|
public function reset_previous_spacing() {
|
|
$this->previous_spacing = '';
|
|
}
|
|
|
|
/**
|
|
* Gets the default values.
|
|
*
|
|
* @static
|
|
* @access public
|
|
* @since 2.0.0
|
|
* @return array
|
|
*/
|
|
public static function get_element_defaults() {
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
return [
|
|
'hide_on_mobile' => fusion_builder_default_visibility( 'string' ),
|
|
'sticky_display' => '',
|
|
'class' => '',
|
|
'id' => '',
|
|
'background_color' => '',
|
|
'background_color_medium' => '',
|
|
'background_color_small' => '',
|
|
'background_color_hover' => '',
|
|
'background_color_medium_hover' => '',
|
|
'background_color_small_hover' => '',
|
|
'gradient_start_color' => '',
|
|
'gradient_end_color' => '',
|
|
'gradient_start_position' => '0',
|
|
'gradient_end_position' => '100',
|
|
'gradient_type' => 'linear',
|
|
'radial_direction' => 'center',
|
|
'linear_angle' => '180',
|
|
'background_image' => '',
|
|
'background_image_id' => '',
|
|
'background_image_medium' => '',
|
|
'background_image_id_medium' => '',
|
|
'background_image_small' => '',
|
|
'background_image_id_small' => '',
|
|
'background_position' => 'left top',
|
|
'background_position_medium' => '',
|
|
'background_position_small' => '',
|
|
'background_repeat' => 'no-repeat',
|
|
'background_repeat_medium' => '',
|
|
'background_repeat_small' => '',
|
|
'background_size' => '',
|
|
'background_size_medium' => '',
|
|
'background_size_small' => '',
|
|
'background_custom_size' => '',
|
|
'background_custom_size_medium' => '',
|
|
'background_custom_size_small' => '',
|
|
'background_blend_mode' => 'none',
|
|
'background_blend_mode_medium' => '',
|
|
'background_blend_mode_small' => '',
|
|
'border_color' => '',
|
|
'border_color_hover' => '',
|
|
'border_position' => 'all',
|
|
'border_radius_bottom_left' => '',
|
|
'border_radius_bottom_right' => '',
|
|
'border_radius_top_left' => '',
|
|
'border_radius_top_right' => '',
|
|
'border_size' => '', // Backwards-compatibility.
|
|
'border_sizes_top' => '',
|
|
'border_sizes_bottom' => '',
|
|
'border_sizes_left' => '',
|
|
'border_sizes_right' => '',
|
|
'border_style' => '',
|
|
'box_shadow' => '',
|
|
'box_shadow_blur' => '',
|
|
'box_shadow_color' => '',
|
|
'box_shadow_horizontal' => '',
|
|
'box_shadow_spread' => '',
|
|
'box_shadow_style' => '',
|
|
'box_shadow_vertical' => '',
|
|
'overflow' => '',
|
|
'column_tag' => 'div',
|
|
'z_index' => '',
|
|
'z_index_hover' => '',
|
|
|
|
'link_attributes' => '',
|
|
|
|
// Width.
|
|
'type' => '1_3',
|
|
'type_medium' => '',
|
|
'type_small' => '',
|
|
|
|
// Margins.
|
|
'margin_top' => $fusion_settings->get( 'col_margin', 'top' ),
|
|
'margin_bottom' => $fusion_settings->get( 'col_margin', 'bottom' ),
|
|
'margin_top_medium' => '',
|
|
'margin_bottom_medium' => '',
|
|
'margin_top_small' => '',
|
|
'margin_bottom_small' => '',
|
|
|
|
// Spacing.
|
|
'spacing' => '4%',
|
|
'spacing_left' => '',
|
|
'spacing_right' => '',
|
|
'spacing_left_medium' => '',
|
|
'spacing_right_medium' => '',
|
|
'spacing_left_small' => '',
|
|
'spacing_right_small' => '',
|
|
|
|
// Padding.
|
|
'padding_top' => '0px',
|
|
'padding_right' => '0px',
|
|
'padding_bottom' => '0px',
|
|
'padding_left' => '0px',
|
|
'padding_top_medium' => '',
|
|
'padding_right_medium' => '',
|
|
'padding_bottom_medium' => '',
|
|
'padding_left_medium' => '',
|
|
'padding_top_small' => '',
|
|
'padding_right_small' => '',
|
|
'padding_bottom_small' => '',
|
|
'padding_left_small' => '',
|
|
|
|
'animation_type' => '',
|
|
'animation_direction' => 'left',
|
|
'animation_speed' => '0.3',
|
|
'animation_delay' => '',
|
|
'animation_offset' => $fusion_settings->get( 'animation_offset' ),
|
|
'animation_color' => '',
|
|
'link' => '',
|
|
'link_description' => '',
|
|
'target' => '_self',
|
|
'hover_type' => 'none',
|
|
|
|
// Render logics.
|
|
'render_logics' => '',
|
|
|
|
// Lazy Loading.
|
|
'skip_lazy_load' => '',
|
|
|
|
// Legacy only.
|
|
'min_height' => '',
|
|
'center_content' => 'no',
|
|
|
|
// Filters.
|
|
'filter_hue' => '0',
|
|
'filter_saturation' => '100',
|
|
'filter_brightness' => '100',
|
|
'filter_contrast' => '100',
|
|
'filter_invert' => '0',
|
|
'filter_sepia' => '0',
|
|
'filter_opacity' => '100',
|
|
'filter_blur' => '0',
|
|
'filter_hover_element' => 'self',
|
|
'filter_hue_hover' => '0',
|
|
'filter_saturation_hover' => '100',
|
|
'filter_brightness_hover' => '100',
|
|
'filter_contrast_hover' => '100',
|
|
'filter_invert_hover' => '0',
|
|
'filter_sepia_hover' => '0',
|
|
'filter_opacity_hover' => '100',
|
|
'filter_blur_hover' => '0',
|
|
|
|
// Transform.
|
|
'transform_scale_x' => '1',
|
|
'transform_scale_y' => '1',
|
|
'transform_translate_x' => '0',
|
|
'transform_translate_y' => '0',
|
|
'transform_rotate' => '0',
|
|
'transform_skew_x' => '0',
|
|
'transform_skew_y' => '0',
|
|
'transform_hover_element' => 'self',
|
|
'transform_scale_x_hover' => '1',
|
|
'transform_scale_y_hover' => '1',
|
|
'transform_translate_x_hover' => '0',
|
|
'transform_translate_y_hover' => '0',
|
|
'transform_rotate_hover' => '0',
|
|
'transform_skew_x_hover' => '0',
|
|
'transform_skew_y_hover' => '0',
|
|
'transform_origin' => '',
|
|
|
|
// Transition.
|
|
'transition_duration' => '300',
|
|
'transition_easing' => 'ease',
|
|
'transition_custom_easing' => '',
|
|
|
|
// Flex.
|
|
'align_self' => 'auto',
|
|
'flex_grow' => '0',
|
|
'flex_grow_medium' => '0',
|
|
'flex_grow_small' => '0',
|
|
'flex_shrink' => '0',
|
|
'flex_shrink_medium' => '0',
|
|
'flex_shrink_small' => '0',
|
|
'order' => '',
|
|
'order_medium' => '',
|
|
'order_small' => '',
|
|
'align_content' => 'flex-start',
|
|
'valign_content' => 'flex-start',
|
|
'content_wrap' => 'wrap',
|
|
'content_layout' => 'column',
|
|
|
|
// Sticky.
|
|
'sticky' => 'off',
|
|
'sticky_devices' => fusion_builder_default_visibility( 'string' ),
|
|
'sticky_offset' => 0,
|
|
|
|
// Absolute Position.
|
|
'absolute' => 'off',
|
|
'absolute_top' => '',
|
|
'absolute_right' => '',
|
|
'absolute_bottom' => '',
|
|
'absolute_left' => '',
|
|
|
|
// Hidden ones.
|
|
'padding' => '',
|
|
'row_column_index' => '',
|
|
'last' => '',
|
|
|
|
// Motion Effects.
|
|
'motion_effects' => '',
|
|
'scroll_motion_devices' => fusion_builder_default_visibility( 'string' ),
|
|
|
|
// Background Slider.
|
|
'background_slider_images' => '',
|
|
'background_slider_skip_lazy_loading' => 'no',
|
|
'background_slider_loop' => 'yes',
|
|
'background_slider_pause_on_hover' => 'no',
|
|
'background_slider_slideshow_speed' => '5000',
|
|
'background_slider_animation' => 'fade',
|
|
'background_slider_animation_speed' => '800',
|
|
'background_slider_direction' => 'up',
|
|
'background_slider_position' => '50% 50%',
|
|
'background_slider_blend_mode' => '',
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Maps settings to param variables.
|
|
*
|
|
* @static
|
|
* @access public
|
|
* @since 2.0.0
|
|
* @return array
|
|
*/
|
|
public static function settings_to_params() {
|
|
return [
|
|
'animation_offset' => 'animation_offset',
|
|
'flex_align_items' => 'align_self',
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Used to set any other variables for use on front-end editor template.
|
|
*
|
|
* @static
|
|
* @access public
|
|
* @since 2.0.0
|
|
* @return array
|
|
*/
|
|
public static function get_element_extras() {
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
return [
|
|
'col_margin' => $fusion_settings->get( 'col_margin' ),
|
|
'visibility_large' => $fusion_settings->get( 'visibility_large' ),
|
|
'visibility_medium' => $fusion_settings->get( 'visibility_medium' ),
|
|
'visibility_small' => $fusion_settings->get( 'visibility_small' ),
|
|
'col_width_medium' => $fusion_settings->get( 'col_width_medium' ),
|
|
'col_width_small' => $fusion_settings->get( 'col_width_small' ),
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Maps settings to extra variables.
|
|
*
|
|
* @static
|
|
* @access public
|
|
* @since 2.0.0
|
|
* @return array
|
|
*/
|
|
public static function settings_to_extras() {
|
|
|
|
return [
|
|
'col_margin' => 'col_margin',
|
|
'visibility_large' => 'visibility_large',
|
|
'visibility_medium' => 'visibility_medium',
|
|
'visibility_small' => 'visibility_small',
|
|
'col_width_medium' => 'col_width_medium',
|
|
'col_width_small' => 'col_width_small',
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Render the shortcode
|
|
*
|
|
* @access public
|
|
* @since 1.0
|
|
* @param array $atts Shortcode parameters.
|
|
* @param string $content Content between shortcode.
|
|
* @return string HTML output.
|
|
*/
|
|
public function render( $atts, $content = '' ) {
|
|
global $fusion_col_type;
|
|
|
|
if ( ! Fusion_Builder_Conditional_Render_Helper::should_render( $atts ) ) {
|
|
return;
|
|
}
|
|
|
|
$this->set_active_status();
|
|
|
|
$this->styles = '';
|
|
|
|
$this->set_args( $atts );
|
|
|
|
$this->validate_args();
|
|
|
|
$this->set_extra_args();
|
|
|
|
if ( FusionBuilder()->post_card_data['is_rendering'] && 'fusion_builder_column' === $this->shortcode_name ) {
|
|
$this->post_card_args();
|
|
} else {
|
|
$this->legacy_inherit( $atts );
|
|
|
|
// Works out aspects of the column in relation to others.
|
|
$this->set_column_map_data();
|
|
}
|
|
|
|
// Sets attributes necessary for lazy load.
|
|
$this->set_lazy_load_data();
|
|
|
|
// Check empty dims bg image.
|
|
$this->args['empty_dims_bg_img'] = isset( $this->args['background_data'] ) && is_array( $this->args['background_data'] ) && '' === $this->args['background_data']['width'] && '' === $this->args['background_data']['height'] ? true : false;
|
|
|
|
// Sets styles for responsive options.
|
|
if ( ! $this->args['flex'] ) {
|
|
// Enqueue legacy scripts.
|
|
$this->add_legacy_scripts();
|
|
}
|
|
|
|
$column_tag = apply_filters( 'fusion_column_tag', $this->args['column_tag'], $this->args );
|
|
|
|
// Retrieve column content.
|
|
$column_content = fusion_builder_fix_shortcodes( $content );
|
|
$placeholder_img = '';
|
|
$this->args['empty_column_bg_img'] = false;
|
|
|
|
if ( isset( $this->args['background_data'] ) && is_array( $this->args['background_data'] ) ) {
|
|
$placeholder_img = '<img ' . FusionBuilder::attributes( $this->shortcode_attr_id . '-empty-col-bg-img' ) . '>';
|
|
$this->args['empty_column_bg_img'] = empty( $column_content ) ? true : $this->args['empty_column_bg_img'];
|
|
}
|
|
|
|
if ( isset( $this->args['background_data_medium'] ) && is_array( $this->args['background_data_medium'] ) ) {
|
|
$placeholder_img .= $this->generate_placeholder_img( $this->args['background_data_medium'], '-medium' );
|
|
}
|
|
|
|
if ( isset( $this->args['background_data_small'] ) && is_array( $this->args['background_data_small'] ) ) {
|
|
$placeholder_img .= $this->generate_placeholder_img( $this->args['background_data_small'], '-small' );
|
|
}
|
|
|
|
$output = '<' . $column_tag . ' ' . FusionBuilder::attributes( $this->shortcode_attr_id ) . '>';
|
|
|
|
// If we have a hover or link, we need extra markup.
|
|
if ( $this->args['hover_or_link'] ) {
|
|
$output .= '<span ' . FusionBuilder::attributes( $this->shortcode_attr_id . '-hover-wrapper' ) . '>';
|
|
|
|
$tag = ! empty( $this->args['link'] ) ? 'a' : 'span';
|
|
|
|
$output .= '<' . $tag . ' ' . FusionBuilder::attributes( $this->shortcode_attr_id . '-anchor' ) . '>';
|
|
|
|
if ( ! $this->args['background_slider_images'] ) {
|
|
$output .= '<span ' . FusionBuilder::attributes( $this->shortcode_attr_id . '-hover-inner-wrapper' ) . '></span>';
|
|
}
|
|
|
|
if ( $this->args['background_slider_images'] ) {
|
|
$output .= Fusion_Builder_Background_Slider_Helper::get_element( $this->args, 'column' );
|
|
}
|
|
|
|
$output .= '</' . $tag . '></span>';
|
|
}
|
|
|
|
// Slider background.
|
|
if ( $this->args['background_slider_images'] && ! $this->args['hover_or_link'] ) {
|
|
$output .= Fusion_Builder_Background_Slider_Helper::get_element( $this->args, 'column' );
|
|
}
|
|
|
|
$output .= '<div ' . FusionBuilder::attributes( $this->shortcode_attr_id . '-wrapper' ) . '>';
|
|
|
|
if ( $this->args['background_slider_images'] && ! $this->args['hover_or_link'] ) {
|
|
$output .= '<div class="awb-column__content">';
|
|
}
|
|
|
|
// Add opening tag for extra centering wrapper.
|
|
if ( 'yes' === $this->args['center_content'] && ! $this->args['flex'] ) {
|
|
$output .= '<div class="fusion-column-content-centered"><div class="fusion-column-content">';
|
|
}
|
|
|
|
// The actual column content.
|
|
$output .= ! empty( $column_content ) ? $column_content : $placeholder_img;
|
|
|
|
// Closing tags for centering wrapper.
|
|
if ( 'yes' === $this->args['center_content'] && ! $this->args['flex'] ) {
|
|
$output .= '</div></div>';
|
|
}
|
|
|
|
if ( $this->args['background_slider_images'] && ! $this->args['hover_or_link'] ) {
|
|
$output .= '</div>';
|
|
}
|
|
|
|
// Clearing tag.
|
|
if ( ! $this->args['flex'] ) {
|
|
$output .= '<div class="fusion-clearfix"></div>';
|
|
}
|
|
|
|
// Closing tag for fusion-column-wrapper.
|
|
$output .= '</div>';
|
|
|
|
$selector = 'fusion_builder_column' === $this->shortcode_name ? '.fusion-builder-column-' : '.fusion-builder-nested-column-';
|
|
$selector = $selector . $this->args['column_counter'];
|
|
|
|
if ( '' !== $this->styles ) {
|
|
$output .= '<style type="text/css">' . $this->styles . '</style>';
|
|
}
|
|
|
|
$output = apply_filters( 'fusion_column_before_close', $output, $this->shortcode_name );
|
|
$output .= '</' . $column_tag . '>';
|
|
|
|
$content = apply_filters( $this->content_filter, do_shortcode( $output ), $atts );
|
|
|
|
$fusion_col_type['type'] = null;
|
|
|
|
// If we are rendering a top level column, then set render to false.
|
|
if ( ! $this->is_nested ) {
|
|
$this->rendering = false;
|
|
}
|
|
|
|
// End of nested, restore parent args in case it is not finished rendering.
|
|
if ( $this->is_nested ) {
|
|
if ( $this->parent_args ) {
|
|
$this->args = $this->parent_args;
|
|
}
|
|
}
|
|
|
|
// If this is an inner column, set its parent state to inactive, so that the real parent column can take over again.
|
|
if ( 'fusion_builder_column_inner' === $this->shortcode_name ) {
|
|
fusion_builder_column_inner()->set_inactive();
|
|
}
|
|
|
|
$this->on_render();
|
|
|
|
return $content;
|
|
}
|
|
|
|
/**
|
|
* Sets active status and turns off on the other.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_active_status() {
|
|
// If this is a parent column, set the nested column active state to false because at this point main column is element parent.
|
|
if ( 'fusion_builder_column' === $this->shortcode_name ) {
|
|
fusion_builder_column_inner()->set_inactive();
|
|
} elseif ( 'fusion_builder_column_inner' === $this->shortcode_name ) {
|
|
fusion_builder_column()->set_inactive();
|
|
}
|
|
$this->active_parent = true;
|
|
|
|
// If we are inside another container render, then we count nested.
|
|
$rendering = $this->rendering;
|
|
if ( ! $this->rendering ) {
|
|
$this->rendering = true;
|
|
$this->parent_args = false;
|
|
} else {
|
|
|
|
// If not set yet, set args as parent args.
|
|
if ( ! $this->parent_args ) {
|
|
$this->parent_args = $this->args;
|
|
}
|
|
}
|
|
|
|
$this->is_nested = $rendering ? true : false;
|
|
}
|
|
|
|
/**
|
|
* Sets attributes for the outer-most element.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
public function attr() {
|
|
$attr = [
|
|
'class' => "fusion-layout-column {$this->shortcode_name} {$this->shortcode_classname}-" . $this->args['column_counter'],
|
|
'style' => $this->get_style_vars(),
|
|
];
|
|
|
|
// Sticky column.
|
|
if ( 'on' === $this->args['sticky'] ) {
|
|
$attr['class'] .= ' awb-sticky';
|
|
|
|
if ( '' !== $this->args['sticky_offset'] && 0 !== $this->args['sticky_offset'] ) {
|
|
|
|
// If its not a selector then get value and set to css variable.
|
|
if ( false === strpos( $this->args['sticky_offset'], '.' ) && false === strpos( $this->args['sticky_offset'], '#' ) ) {
|
|
$attr['style'] .= '--awb-sticky-offset:' . fusion_library()->sanitize->get_value_with_unit( $this->args['sticky_offset'] ) . ';';
|
|
} else {
|
|
$attr['data-sticky-offset'] = (string) $this->args['sticky_offset'];
|
|
}
|
|
}
|
|
|
|
if ( '' !== $this->args['sticky_devices'] ) {
|
|
$this->args['sticky_devices'] = str_replace( '-visibility', '', $this->args['sticky_devices'] );
|
|
$sticky_devices = explode( ',', (string) $this->args['sticky_devices'] );
|
|
foreach ( $sticky_devices as $sticky_device ) {
|
|
$attr['class'] .= ' awb-sticky-' . str_replace( ' ', '', $sticky_device );
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $this->args['type'] ) && ( ! FusionBuilder()->post_card_data['is_rendering'] || 'fusion_builder_column' !== $this->shortcode_name ) ) {
|
|
$type = esc_attr( $this->args['type'] );
|
|
if ( false !== strpos( $type, '_' ) ) {
|
|
$attr['class'] .= ' ' . $this->shortcode_name . '_' . $type;
|
|
$attr['class'] .= ' ' . $type;
|
|
}
|
|
}
|
|
|
|
// Flexbox column.
|
|
if ( $this->args['flex'] ) {
|
|
$attr['class'] .= ' fusion-flex-column';
|
|
|
|
// Alignment of column vertically.
|
|
if ( 'auto' !== $this->args['align_self'] ) {
|
|
$attr['class'] .= ' fusion-flex-align-self-' . esc_attr( $this->args['align_self'] );
|
|
}
|
|
} elseif ( ! FusionBuilder()->post_card_data['is_rendering'] || 'fusion_builder_column' !== $this->shortcode_name ) {
|
|
// Class for the specific size of column.
|
|
if ( '' !== $this->args['size_class'] ) {
|
|
$attr['class'] .= ' ' . $this->args['size_class'];
|
|
}
|
|
|
|
// First column.
|
|
if ( $this->args['first'] ) {
|
|
$attr['class'] .= ' fusion-column-first';
|
|
}
|
|
|
|
// Last column.
|
|
if ( $this->args['last'] ) {
|
|
$attr['class'] .= ' fusion-column-last';
|
|
}
|
|
|
|
// Special calcs for spacing.
|
|
if ( '' !== $this->args['spacing_classes'] ) {
|
|
$attr['class'] .= $this->args['spacing_classes'];
|
|
}
|
|
|
|
// Column spacing style, margin and width.
|
|
if ( '' !== $this->args['column_spacing_style'] ) {
|
|
$attr['style'] .= $this->args['column_spacing_style'];
|
|
}
|
|
}
|
|
|
|
// Custom CSS class.
|
|
if ( ! empty( $this->args['class'] ) ) {
|
|
$attr['class'] .= ' ' . $this->args['class'];
|
|
}
|
|
|
|
// Min height for newly created columns by the converter.
|
|
if ( 'none' === $this->args['min_height'] ) {
|
|
$attr['class'] .= ' fusion-column-no-min-height';
|
|
}
|
|
|
|
// Visibility classes.
|
|
$attr = fusion_builder_visibility_atts( $this->args['hide_on_mobile'], $attr );
|
|
|
|
$attr['class'] .= Fusion_Builder_Sticky_Visibility_Helper::get_sticky_class( $this->args['sticky_display'] );
|
|
|
|
// Hover type or link.
|
|
if ( $this->args['hover_or_link'] ) {
|
|
$attr['class'] .= ' fusion-column-inner-bg-wrapper';
|
|
}
|
|
|
|
// TODO: check why it is looking at animation type/class.
|
|
if ( $this->args['hover_or_link'] && ! empty( $this->args['animation_type'] ) && 'liftup' === $this->args['hover_type'] ) {
|
|
$attr['class'] .= ' fusion-column-hover-type-liftup';
|
|
}
|
|
|
|
// Lift up and border.
|
|
if ( 'liftup' === $this->args['hover_type'] && '' !== $this->args['border_style'] ) {
|
|
$attr['class'] .= ' fusion-column-liftup-border';
|
|
}
|
|
|
|
if ( $this->args['animation_type'] ) {
|
|
$attr = Fusion_Builder_Animation_Helper::add_animation_attributes( $this->args, $attr );
|
|
}
|
|
|
|
if ( ! empty( $this->args['id'] ) ) {
|
|
$attr['id'] = esc_attr( $this->args['id'] );
|
|
}
|
|
|
|
if ( ! empty( $this->args['motion_effects'] ) ) {
|
|
$attr = Fusion_Builder_Motion_Effects_Helper::get_data_attr( $this->args, $attr );
|
|
}
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Sets attributes for content wrapper element.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
public function wrapper_attr() {
|
|
$attr = [
|
|
'class' => 'fusion-column-wrapper',
|
|
];
|
|
|
|
// Image URL for empty dimension calculations.
|
|
$attr['data-bg-url'] = $this->args['background_image'];
|
|
|
|
// Adds lazy loading attributes if necessary.
|
|
$attr = $this->add_lazy_attributes( $attr, 'wrapper' );
|
|
|
|
// Box shadow.
|
|
if ( 'liftup' !== $this->args['hover_type'] && '' !== $this->args['box_shadow'] ) {
|
|
$attr['class'] .= ' fusion-column-has-shadow'; // Move this to appropriate.
|
|
}
|
|
|
|
// Flex.
|
|
if ( ! empty( $this->args['flex'] ) ) {
|
|
$attr['class'] .= ' fusion-flex-justify-content-' . $this->args['align_content'];
|
|
$attr['class'] .= ' fusion-content-layout-' . $this->args['content_layout'];
|
|
|
|
if ( 'row' === $this->args['content_layout'] && 'flex-start' !== $this->args['valign_content'] ) {
|
|
$attr['class'] .= ' fusion-flex-align-items-' . $this->args['valign_content'];
|
|
}
|
|
if ( 'wrap' !== $this->args['content_wrap'] ) {
|
|
$attr['class'] .= ' fusion-content-' . $this->args['content_wrap'];
|
|
}
|
|
} else {
|
|
$attr['class'] .= ' fusion-flex-column-wrapper-legacy';
|
|
}
|
|
|
|
// Empty column with BG Image.
|
|
if ( $this->args['empty_column_bg_img'] ) {
|
|
$attr['class'] .= ' fusion-empty-column-bg-image';
|
|
}
|
|
// Added class if column has bg image responsive.
|
|
foreach ( [ '', 'medium', 'small' ] as $size ) {
|
|
$size = '' === $size ? '' : '_' . $size;
|
|
if ( isset( $this->args[ 'background_data' . $size ] ) && is_array( $this->args[ 'background_data' . $size ] ) ) {
|
|
$attr['class'] .= ' fusion-column-has-bg-image' . str_replace( '_', '-', $size );
|
|
}
|
|
}
|
|
|
|
// Escape attributes before return.
|
|
$attr['class'] = esc_attr( $attr['class'] );
|
|
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Attributes for the hover wrapper element.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
public function hover_wrapper_attr() {
|
|
$attr = [
|
|
'class' => 'fusion-column-inner-bg hover-type-' . $this->args['hover_type'],
|
|
];
|
|
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Get style variables.
|
|
*
|
|
* @since 3.9
|
|
* @return string
|
|
*/
|
|
public function get_style_vars() {
|
|
$sanitize = fusion_library()->sanitize;
|
|
$css_vars = [
|
|
'z_index',
|
|
'z_index_hover',
|
|
|
|
'padding_top' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_right' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_bottom' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_left' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_top_medium' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_right_medium' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_bottom_medium' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_left_medium' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_top_small' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_right_small' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_bottom_small' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
'padding_left_small' => [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ],
|
|
];
|
|
$custom_css_vars = [];
|
|
$this->defaults = self::get_element_defaults();
|
|
|
|
// Overflow.
|
|
if ( '' !== $this->args['overflow'] ) {
|
|
$custom_css_vars['overflow'] = $this->args['overflow'];
|
|
} elseif ( '' !== $this->args['border_radius'] ) {
|
|
$custom_css_vars['overflow'] = 'hidden';
|
|
}
|
|
|
|
// Some variables needs to be placed directly on column, some on an inner div helper.
|
|
// This is a quick way to not check for "hover_or_link" every time.
|
|
$inner_var_prefix = ( $this->args['hover_or_link'] ? 'inner-' : '' );
|
|
|
|
if ( 'on' === $this->args['absolute'] && 'on' !== $this->args['sticky'] ) {
|
|
$custom_css_vars['container-position'] = 'absolute';
|
|
|
|
$css_vars['absolute_top'] = [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ];
|
|
$css_vars['absolute_right'] = [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ];
|
|
$css_vars['absolute_bottom'] = [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ];
|
|
$css_vars['absolute_left'] = [ 'callback' => [ $sanitize, 'get_value_with_unit' ] ];
|
|
}
|
|
|
|
// Background Images & other properties.
|
|
if ( ! empty( $this->args['background_color'] ) && ( empty( $this->args['background_image'] ) || 0 !== $this->args['alpha_background_color'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-color' ] = $this->args['background_color'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_color_hover'] ) && ( empty( $this->args['background_image'] ) || 0 !== $this->args['alpha_background_color'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-color-hover' ] = $this->args['background_color_hover'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_color_medium'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-color-medium' ] = $this->args['background_color_medium'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_color_medium_hover'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-color-medium-hover' ] = $this->args['background_color_medium_hover'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_color_small'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-color-small' ] = $this->args['background_color_small'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_color_small_hover'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-color-small-hover' ] = $this->args['background_color_small_hover'];
|
|
}
|
|
|
|
if ( ! $this->args['lazy_load'] ) {
|
|
if ( ! empty( $this->args['background_image'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-image' ] = "url('" . esc_url( $this->args['background_image'] ) . "')";
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_image_medium'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-image-medium' ] = "url('" . esc_url( $this->args['background_image_medium'] ) . "')";
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_image_small'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-image-small' ] = "url('" . esc_url( $this->args['background_image_small'] ) . "')";
|
|
}
|
|
}
|
|
|
|
if ( $this->is_gradient_color() ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-image' ] = Fusion_Builder_Gradient_Helper::get_gradient_string( $this->args, 'column' );
|
|
|
|
if ( ! empty( $this->args['background_image_medium'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-image-medium' ] = Fusion_Builder_Gradient_Helper::get_gradient_string( $this->args, 'column', 'medium' );
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_image_small'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-image-small' ] = Fusion_Builder_Gradient_Helper::get_gradient_string( $this->args, 'column', 'small' );
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_position'] ) && ! $this->is_default( 'background_position' ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-position' ] = $this->args['background_position'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_position_medium'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-position-medium' ] = $this->args['background_position_medium'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_position_small'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-position-small' ] = $this->args['background_position_small'];
|
|
}
|
|
|
|
if ( ! $this->is_default( 'background_blend_mode' ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-blend' ] = $this->args['background_blend_mode'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_blend_mode_medium'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-blend-medium' ] = $this->args['background_blend_mode_medium'];
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_blend_mode_small'] ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-blend-small' ] = $this->args['background_blend_mode_small'];
|
|
}
|
|
|
|
if ( ! $this->is_default( 'background_repeat' ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-repeat' ] = $this->args['background_repeat'];
|
|
}
|
|
|
|
if ( ! $this->is_default( 'background_repeat_medium' ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-repeat-medium' ] = $this->args['background_repeat_medium'];
|
|
}
|
|
|
|
if ( ! $this->is_default( 'background_repeat_small' ) ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-repeat-small' ] = $this->args['background_repeat_small'];
|
|
}
|
|
|
|
if ( 'no-repeat' === $this->args['background_repeat'] ) {
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-size' ] = 'cover';
|
|
}
|
|
|
|
if ( '' !== $this->args['background_size'] ) {
|
|
$background_size = 'custom' === $this->args['background_size'] ? $this->args['background_custom_size'] : $this->args['background_size'];
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-size' ] = $background_size;
|
|
}
|
|
|
|
if ( '' !== $this->args['background_size_medium'] ) {
|
|
$background_size_medium = 'custom' === $this->args['background_size_medium'] ? $this->args['background_custom_size_medium'] : $this->args['background_size_medium'];
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-size-medium' ] = $background_size_medium;
|
|
}
|
|
|
|
if ( '' !== $this->args['background_size_small'] ) {
|
|
$background_size_small = 'custom' === $this->args['background_size_small'] ? $this->args['background_custom_size_small'] : $this->args['background_size_small'];
|
|
$custom_css_vars[ $inner_var_prefix . 'bg-size-small' ] = $background_size_small;
|
|
}
|
|
|
|
$border_vars = $this->get_border_vars();
|
|
|
|
if ( 'yes' === $this->args['box_shadow'] ) {
|
|
if ( 'liftup' === $this->args['hover_type'] ) {
|
|
$custom_css_vars['inner_bg_box_shadow'] = Fusion_Builder_Box_Shadow_Helper::get_box_shadow_styles( $this->args );
|
|
} else {
|
|
$custom_css_vars['box_shadow'] = Fusion_Builder_Box_Shadow_Helper::get_box_shadow_styles( $this->args );
|
|
}
|
|
}
|
|
|
|
$transform_vars = Fusion_Builder_Transform_Helper::get_transform_style_vars( $this->args, '--awb-transform', '--awb-transform-hover', '--awb-transform-parent-hover' );
|
|
|
|
if ( $this->args['transform_origin'] && '50% 50%' !== $this->args['transform_origin'] ) {
|
|
$custom_css_vars['transform_origin'] = $this->args['transform_origin'];
|
|
}
|
|
|
|
$filter_vars = Fusion_Builder_Filter_Helper::get_filter_vars( $this->args, true );
|
|
|
|
if ( ! $this->is_default( 'transition_duration' ) || ! $this->is_default( 'transition_easing' ) ) {
|
|
$custom_css_vars['transition'] = Fusion_Builder_Transition_Helper::get_transition_styles( $this->args );
|
|
}
|
|
|
|
return $this->get_css_vars_for_options( $css_vars ) . $this->get_custom_css_vars( $custom_css_vars ) . $border_vars . $transform_vars . $filter_vars . $this->get_responsive_column_vars();
|
|
}
|
|
|
|
/**
|
|
* Get the border variables.
|
|
*
|
|
* @return string
|
|
*/
|
|
private function get_border_vars() {
|
|
$custom_css_vars = [];
|
|
$border_on_inner = ( 'liftup' === $this->args['hover_type'] ? true : false );
|
|
|
|
if ( ! empty( $this->args['border_color'] ) ) {
|
|
$custom_css_vars['border-color'] = $this->args['border_color'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-color'] = $this->args['border_color'];
|
|
}
|
|
|
|
if ( '' !== $this->args['border_color_hover'] ) {
|
|
$custom_css_vars['border-color-hover'] = $this->args['border_color_hover'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-color-hover'] = $this->args['border_color_hover'];
|
|
}
|
|
}
|
|
|
|
if ( '' !== $this->args['border_sizes_top'] ) {
|
|
$custom_css_vars['border-top'] = $this->args['border_sizes_top'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-top'] = $this->args['border_sizes_top'];
|
|
}
|
|
}
|
|
|
|
if ( '' !== $this->args['border_sizes_right'] ) {
|
|
$custom_css_vars['border-right'] = $this->args['border_sizes_right'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-right'] = $this->args['border_sizes_right'];
|
|
}
|
|
}
|
|
|
|
if ( '' !== $this->args['border_sizes_bottom'] ) {
|
|
$custom_css_vars['border-bottom'] = $this->args['border_sizes_bottom'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-bottom'] = $this->args['border_sizes_bottom'];
|
|
}
|
|
}
|
|
|
|
if ( '' !== $this->args['border_sizes_left'] ) {
|
|
$custom_css_vars['border-left'] = $this->args['border_sizes_left'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-left'] = $this->args['border_sizes_left'];
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $this->args['border_style'] ) ) {
|
|
$custom_css_vars['border-style'] = $this->args['border_style'];
|
|
|
|
if ( $border_on_inner ) {
|
|
$custom_css_vars['inner-border-style'] = $this->args['border_style'];
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( $this->args['border_radius'] ) {
|
|
$custom_css_vars['border_radius'] = $this->args['border_radius'];
|
|
|
|
if ( 'liftup' !== $this->args['hover_type'] && ( 'zoomin' === $this->args['hover_type'] || 'zoomout' === $this->args['hover_type'] || ! empty( $this->args['link'] ) ) ) {
|
|
$custom_css_vars['inner-bg-border-radius'] = $this->args['border_radius'];
|
|
}
|
|
|
|
// Lift up and border radius we need to apply radius to lift up markup.
|
|
if ( $this->args['hover_or_link'] && 'liftup' === $this->args['hover_type'] ) {
|
|
$custom_css_vars['liftup-border-radius'] = $this->args['border_radius'];
|
|
}
|
|
}
|
|
|
|
if ( 'liftup' !== $this->args['hover_type'] && ( 'zoomin' === $this->args['hover_type'] || 'zoomout' === $this->args['hover_type'] || ! empty( $this->args['link'] ) ) && '' !== $this->args['border_radius'] ) {
|
|
$custom_css_vars['inner-bg-overflow'] = 'hidden';
|
|
}
|
|
|
|
return $this->get_custom_css_vars( $custom_css_vars );
|
|
}
|
|
|
|
/**
|
|
* Attributes for the hover inner wrapper element.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
public function hover_inner_wrapper_attr() {
|
|
$attr = [
|
|
'class' => 'fusion-column-inner-bg-image',
|
|
];
|
|
|
|
// Adds lazy loading attributes if necessary.
|
|
$attr = $this->add_lazy_attributes( $attr );
|
|
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Sets atrributes for the anchor element.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
public function anchor_attr() {
|
|
$attr = [
|
|
'class' => 'fusion-column-anchor',
|
|
];
|
|
|
|
if ( ! empty( $this->args['link'] ) ) {
|
|
$attr['href'] = esc_url( $this->args['link'] );
|
|
}
|
|
|
|
if ( '_blank' === $this->args['target'] ) {
|
|
$attr['rel'] = 'noopener noreferrer';
|
|
$attr['target'] = '_blank';
|
|
} elseif ( 'lightbox' === $this->args['target'] ) {
|
|
$attr['data-rel'] = 'iLightbox';
|
|
}
|
|
|
|
if ( ! empty( $this->args['link_description'] ) ) {
|
|
$attr['aria-label'] = esc_attr( $this->args['link_description'] );
|
|
}
|
|
|
|
$attr = fusion_get_link_attributes( $this->args, $attr );
|
|
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Sets attributes for pseudo image placeholder.
|
|
*
|
|
* @access public
|
|
* @since 3.4
|
|
* @return array
|
|
*/
|
|
public function empty_col_bg_img_attr() {
|
|
|
|
$attr = [
|
|
'class' => 'fusion-empty-dims-img-placeholder',
|
|
'alt' => $this->args['background_data']['alt'],
|
|
'aria-label' => $this->args['background_data']['title_attribute'],
|
|
'src' => call_user_func_array( [ fusion_library()->images, 'get_lazy_placeholder' ], [ $this->args['background_data']['width'], $this->args['background_data']['height'] ] ),
|
|
];
|
|
|
|
// Empty BG Image Dims.
|
|
if ( $this->args['empty_dims_bg_img'] ) {
|
|
$attr['class'] .= ' fusion-no-large-visibility';
|
|
}
|
|
|
|
if ( 'stretch' === $this->args['flex_align_items'] && in_array( $this->args['align_self'], [ 'auto', 'stretch' ], true ) ) {
|
|
if ( ! $this->args['empty_dims_bg_img'] ) {
|
|
$attr['class'] .= ' fusion-no-large-visibility';
|
|
}
|
|
$width_key = 'type_medium';
|
|
|
|
if ( '' !== $this->args[ $width_key ] && 'auto' !== $this->args[ $width_key ] && 0 < (float) $this->args[ $width_key ] ) {
|
|
if ( 100 > ( (float) $this->args[ $width_key ] * 100 ) ) {
|
|
$attr['class'] .= ' fusion-no-medium-visibility';
|
|
}
|
|
}
|
|
}
|
|
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Sets attributes for pseudo image placeholder.
|
|
*
|
|
* @access public
|
|
* @since 3.11
|
|
* @param array $background_data background data.
|
|
* @param string $classname element css classname.
|
|
* @return string
|
|
*/
|
|
public function generate_placeholder_img( $background_data, $classname ) {
|
|
$attr = [
|
|
'class' => 'fusion-empty-dims-img-placeholder' . $classname,
|
|
'alt' => $background_data['alt'],
|
|
'aria-label' => $background_data['title_attribute'],
|
|
'src' => call_user_func_array( [ fusion_library()->images, 'get_lazy_placeholder' ], [ $background_data['width'], $background_data['height'] ] ),
|
|
];
|
|
|
|
// Empty BG Image Dims.
|
|
if ( $this->args['empty_dims_bg_img'] ) {
|
|
$attr['class'] .= ' fusion-no-large-visibility';
|
|
}
|
|
|
|
if ( 'stretch' === $this->args['flex_align_items'] && in_array( $this->args['align_self'], [ 'auto', 'stretch' ], true ) ) {
|
|
if ( ! $this->args['empty_dims_bg_img'] ) {
|
|
$attr['class'] .= ' fusion-no-large-visibility';
|
|
}
|
|
$width_key = 'type_medium';
|
|
|
|
if ( '' !== $this->args[ $width_key ] && 'auto' !== $this->args[ $width_key ] && 0 < (float) $this->args[ $width_key ] ) {
|
|
if ( 100 > ( (float) $this->args[ $width_key ] * 100 ) ) {
|
|
$attr['class'] .= ' fusion-no-medium-visibility';
|
|
}
|
|
}
|
|
}
|
|
|
|
return '<img ' . FusionBuilder::attributes( 'empty_dims_bg_img', $attr ) . '>';
|
|
}
|
|
|
|
/**
|
|
* Sets styles necessary for column responsiveness.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return string
|
|
*/
|
|
public function get_responsive_column_vars() {
|
|
$post_card_column = FusionBuilder()->post_card_data['is_rendering'] && 'fusion_builder_column' === $this->shortcode_name;
|
|
|
|
if ( ! $this->args['flex'] ) {
|
|
$css_vars = [
|
|
'margin_top',
|
|
'margin_bottom',
|
|
];
|
|
return $this->get_css_vars_for_options( $css_vars );
|
|
}
|
|
|
|
$css_vars = [];
|
|
foreach ( [ 'large', 'medium', 'small' ] as $size ) {
|
|
// Width and order come from post cards element.
|
|
if ( ! $post_card_column ) {
|
|
// Width.
|
|
$width_key = 'large' === $size ? 'column_size' : 'type_' . $size;
|
|
if ( strpos( $this->args[ $width_key ], 'px' ) || strpos( $this->args[ $width_key ], 'calc' ) ) {
|
|
$css_vars[ 'width-' . $size ] = esc_attr( $this->args[ $width_key ] );
|
|
} elseif ( '' !== $this->args[ $width_key ] && 'auto' !== $this->args[ $width_key ] && 0 < (float) $this->args[ $width_key ] ) {
|
|
$css_vars[ 'width-' . $size ] = esc_attr( fusion_i18_float_to_string( (float) $this->args[ $width_key ] * 100 ) ) . '%';
|
|
} elseif ( 'auto' === $this->args[ $width_key ] ) {
|
|
$css_vars[ 'width-' . $size ] = 'auto';
|
|
}
|
|
|
|
// Order.
|
|
$order_key = 'large' === $size ? 'order' : 'order_' . $size;
|
|
if ( '' !== $this->args[ $order_key ] ) {
|
|
$css_vars[ 'order-' . $size ] = (int) $this->args[ $order_key ];
|
|
}
|
|
}
|
|
$flex_grow_key = 'large' === $size ? 'flex_grow' : 'flex_grow_' . $size;
|
|
$flex_shrink_key = 'large' === $size ? 'flex_shrink' : 'flex_shrink_' . $size;
|
|
if ( 0 < $this->args[ $flex_grow_key ] ) {
|
|
$css_vars[ $flex_grow_key ] = $this->args[ $flex_grow_key ];
|
|
}
|
|
if ( 0 < $this->args[ $flex_shrink_key ] ) {
|
|
$css_vars[ $flex_shrink_key ] = $this->args[ $flex_shrink_key ];
|
|
}
|
|
|
|
foreach ( [ 'top', 'right', 'bottom', 'left' ] as $direction ) {
|
|
|
|
// Margin comes from post cards column and row spacing.
|
|
if ( ! $post_card_column ) {
|
|
// Margin.
|
|
$key_base = 'left' === $direction || 'right' === $direction ? 'spacing' : 'margin';
|
|
$spacing_key = 'large' === $size ? $key_base . '_' . $direction : $key_base . '_' . $direction . '_' . $size;
|
|
|
|
if ( '' !== $this->args[ $spacing_key ] ) {
|
|
|
|
// If its top and bottom margin, add to outer column element.
|
|
if ( 'margin' === $key_base ) {
|
|
$css_vars[ 'margin-' . $direction . '-' . $size ] = $this->args[ $spacing_key ];
|
|
} else {
|
|
$css_vars[ 'spacing-' . $direction . '-' . $size ] = fusion_library()->sanitize->get_value_with_unit( $this->args[ $spacing_key ] );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return $this->get_custom_css_vars( $css_vars );
|
|
}
|
|
|
|
/**
|
|
* Checks if the column is rendering elements in flex or block.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return bool
|
|
*/
|
|
public function is_flex_rendering() {
|
|
return ! empty( $this->args['flex'] ) && 'block' !== $this->args['content_layout'];
|
|
}
|
|
|
|
/**
|
|
* Sets lazy load attributes if set.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_lazy_load_data() {
|
|
$this->args['lazy_class'] = '';
|
|
$this->args['lazy_bg'] = [];
|
|
$this->args['lazy_dims'] = [];
|
|
|
|
if ( $this->args['lazy_load'] ) {
|
|
$this->args['lazy_bg'] = [
|
|
'data-bg' => $this->args['background_image'],
|
|
];
|
|
|
|
if ( '' !== $this->args['background_image_medium'] || '' !== $this->args['background_image_small'] ) {
|
|
$this->args['lazy_bg']['data-fusion-responsive-bg'] = 1;
|
|
}
|
|
|
|
if ( '' !== $this->args['background_image_medium'] ) {
|
|
$this->args['lazy_bg']['data-bg-medium'] = $this->args['background_image_medium'];
|
|
}
|
|
|
|
if ( '' !== $this->args['background_image_small'] ) {
|
|
$this->args['lazy_bg']['data-bg-small'] = $this->args['background_image_small'];
|
|
}
|
|
|
|
$this->args['lazy_class'] = ' lazyload';
|
|
|
|
if ( isset( $this->args['background_data'] ) && is_array( $this->args['background_data'] ) ) {
|
|
$this->args['lazy_dims'] = [
|
|
'data-bg-height' => $this->args['background_data']['height'],
|
|
'data-bg-width' => $this->args['background_data']['width'],
|
|
];
|
|
}
|
|
|
|
if ( $this->is_gradient_color() ) {
|
|
$this->args['lazy_bg']['data-bg-gradient'] = Fusion_Builder_Gradient_Helper::get_gradient_string( $this->args );
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets the args from the attributes.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param array $atts Element attributes.
|
|
* @return void
|
|
*/
|
|
public function set_args( $atts ) {
|
|
$this->atts = $atts;
|
|
|
|
$defaults = self::get_element_defaults();
|
|
|
|
// We have old value but not new, split into new and use as defaults.
|
|
if ( ! empty( $atts['padding'] ) ) {
|
|
$padding_values = explode( ' ', $atts['padding'] );
|
|
if ( is_array( $padding_values ) ) {
|
|
$padding_count = count( $padding_values );
|
|
|
|
if ( 1 === $padding_count ) {
|
|
$defaults['padding_top'] = $padding_values[0];
|
|
$defaults['padding_right'] = $padding_values[0];
|
|
$defaults['padding_bottom'] = $padding_values[0];
|
|
$defaults['padding_left'] = $padding_values[0];
|
|
} elseif ( 2 === $padding_count ) {
|
|
$defaults['padding_top'] = $padding_values[0];
|
|
$defaults['padding_bottom'] = $padding_values[0];
|
|
$defaults['padding_right'] = $padding_values[1];
|
|
$defaults['padding_left'] = $padding_values[1];
|
|
} elseif ( 3 === $padding_count ) {
|
|
$defaults['padding_top'] = $padding_values[0];
|
|
$defaults['padding_right'] = $padding_values[1];
|
|
$defaults['padding_left'] = $padding_values[1];
|
|
$defaults['padding_bottom'] = $padding_values[2];
|
|
} elseif ( 4 === $padding_count ) {
|
|
$defaults['padding_top'] = $padding_values[0];
|
|
$defaults['padding_right'] = $padding_values[1];
|
|
$defaults['padding_bottom'] = $padding_values[2];
|
|
$defaults['padding_left'] = $padding_values[3];
|
|
}
|
|
}
|
|
}
|
|
|
|
$padding_values = [];
|
|
$padding_values['top'] = ( isset( $atts['padding_top'] ) && '' !== $atts['padding_top'] ) ? $atts['padding_top'] : $defaults['padding_top'];
|
|
$padding_values['right'] = ( isset( $atts['padding_right'] ) && '' !== $atts['padding_right'] ) ? $atts['padding_right'] : $defaults['padding_right'];
|
|
$padding_values['bottom'] = ( isset( $atts['padding_bottom'] ) && '' !== $atts['padding_bottom'] ) ? $atts['padding_bottom'] : $defaults['padding_bottom'];
|
|
$padding_values['left'] = ( isset( $atts['padding_left'] ) && '' !== $atts['padding_left'] ) ? $atts['padding_left'] : $defaults['padding_left'];
|
|
|
|
$defaults['padding'] = implode( ' ', $padding_values );
|
|
|
|
$args = FusionBuilder::set_shortcode_defaults( $defaults, $atts, $this->shortcode_name );
|
|
|
|
$this->args = $args;
|
|
}
|
|
|
|
/**
|
|
* Legacy inherit mode. When old containers are now using flex.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param array $atts The attributes set on element.
|
|
* @return void
|
|
*/
|
|
public function legacy_inherit( $atts ) {
|
|
// No align self set but ignore equal heights is on.
|
|
if ( ! isset( $atts['align_self'] ) && isset( $atts['min_height'] ) && 'none' === $atts['min_height'] ) {
|
|
$this->args['align_self'] = 'flex-start';
|
|
}
|
|
// No align content set, but legacy center_content is on.
|
|
if ( ! isset( $atts['align_content'] ) && isset( $atts['center_content'] ) && 'yes' === $atts['center_content'] ) {
|
|
$this->args['align_content'] = 'center';
|
|
}
|
|
// Flex type, old spacing set, new spacing not and column map available.
|
|
if ( $this->args['flex'] && ! isset( $atts['spacing_left'] ) && ! isset( $atts['spacing_right'] ) && isset( $this->args['column_map'][ $this->shortcode_name ] ) && ! empty( $this->args['column_map'][ $this->shortcode_name ] ) ) {
|
|
|
|
$non_global_column_array = $this->args['column_map'][ $this->shortcode_name ];
|
|
$current_row = false;
|
|
$current_column_type = false;
|
|
$current_row_number_of_columns = false;
|
|
|
|
// Set the row and column index as well as the column type for the current column.
|
|
if ( '' !== $this->args['row_column_index'] ) {
|
|
$this->args['row_column_index'] = explode( '_', $this->args['row_column_index'] );
|
|
$current_row_index = $this->args['row_column_index'][0];
|
|
$current_column_index = $this->args['row_column_index'][1];
|
|
if ( isset( $non_global_column_array ) && isset( $non_global_column_array[ $current_row_index ] ) ) {
|
|
$current_row = $non_global_column_array[ $current_row_index ];
|
|
}
|
|
|
|
if ( isset( $current_row ) && is_array( $current_row ) ) {
|
|
$current_row_number_of_columns = count( $current_row );
|
|
$current_column_type = $current_row[ $current_column_index ][1];
|
|
}
|
|
}
|
|
|
|
// Fallback values to values.
|
|
if ( 'yes' === $this->args['spacing'] ) {
|
|
$this->args['spacing'] = '4%';
|
|
} elseif ( 'no' === $this->args['spacing'] ) {
|
|
$this->args['spacing'] = '0px';
|
|
}
|
|
|
|
$first = false;
|
|
$last = false;
|
|
if ( $current_column_type ) {
|
|
if ( false !== strpos( $current_column_type, 'first' ) ) {
|
|
$first = true;
|
|
}
|
|
if ( false !== strpos( $current_column_type, 'last' ) ) {
|
|
$last = true;
|
|
}
|
|
}
|
|
|
|
// Half spacing for this column.
|
|
$weighted_spacing = $this->get_weighted_spacing( $this->args['spacing'], $current_row_number_of_columns );
|
|
|
|
// Use what is set as right spacing.
|
|
if ( ! $last ) {
|
|
$this->args['spacing_right'] = $weighted_spacing;
|
|
}
|
|
|
|
// Check right spacing of previous column.
|
|
if ( '' !== $this->previous_spacing && ! $first ) {
|
|
$this->args['spacing_left'] = $this->get_weighted_spacing( $this->previous_spacing, $current_row_number_of_columns );
|
|
}
|
|
|
|
// Set previous to current half spacing.
|
|
$this->previous_spacing = $this->args['spacing'];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Validate the arguments into correct format.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function validate_args() {
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
|
|
// Alpha related checks.
|
|
$this->args['alpha_background_color'] = 1;
|
|
$this->args['alpha_gradient_start_color'] = 1;
|
|
$this->args['alpha_gradient_end_color'] = 1;
|
|
if ( class_exists( 'Fusion_Color' ) ) {
|
|
$this->args['alpha_background_color'] = Fusion_Color::new_color( $this->args['background_color'] )->alpha;
|
|
$this->args['alpha_gradient_start_color'] = Fusion_Color::new_color( $this->args['gradient_start_color'] )->alpha;
|
|
$this->args['alpha_gradient_end_color'] = Fusion_Color::new_color( $this->args['gradient_end_color'] )->alpha;
|
|
}
|
|
|
|
// If no blend mode is defined, check if we should set to overlay.
|
|
if ( ! isset( $this->atts['background_blend_mode'] ) && 1 > $this->args['alpha_background_color'] && 0 !== $this->args['alpha_background_color'] && ! $this->is_gradient_color() && ! empty( $this->args['background_image'] ) ) {
|
|
$this->args['background_blend_mode'] = 'overlay';
|
|
}
|
|
|
|
$this->args['margin_bottom'] = '' !== $this->args['margin_bottom'] ? fusion_library()->sanitize->get_value_with_unit( $this->args['margin_bottom'] ) : '';
|
|
$this->args['margin_top'] = '' !== $this->args['margin_top'] ? fusion_library()->sanitize->get_value_with_unit( $this->args['margin_top'] ) : '';
|
|
|
|
if ( $this->args['border_size'] ) {
|
|
$this->args['border_size'] = FusionBuilder::validate_shortcode_attr_value( $this->args['border_size'], 'px' );
|
|
}
|
|
|
|
if ( $this->args['padding'] ) {
|
|
$this->args['padding'] = fusion_library()->sanitize->get_value_with_unit( $this->args['padding'] );
|
|
}
|
|
|
|
if ( $this->args['border_sizes_top'] ) {
|
|
$this->args['border_sizes_top'] = fusion_library()->sanitize->get_value_with_unit( $this->args['border_sizes_top'] );
|
|
}
|
|
|
|
if ( $this->args['border_sizes_bottom'] ) {
|
|
$this->args['border_sizes_bottom'] = fusion_library()->sanitize->get_value_with_unit( $this->args['border_sizes_bottom'] );
|
|
}
|
|
|
|
if ( $this->args['border_sizes_left'] ) {
|
|
$this->args['border_sizes_left'] = fusion_library()->sanitize->get_value_with_unit( $this->args['border_sizes_left'] );
|
|
}
|
|
|
|
if ( $this->args['border_sizes_right'] ) {
|
|
$this->args['border_sizes_right'] = fusion_library()->sanitize->get_value_with_unit( $this->args['border_sizes_right'] );
|
|
}
|
|
|
|
$this->args['border_radius_top_left'] = $this->args['border_radius_top_left'] ? fusion_library()->sanitize->get_value_with_unit( $this->args['border_radius_top_left'] ) : '0px';
|
|
$this->args['border_radius_top_right'] = $this->args['border_radius_top_right'] ? fusion_library()->sanitize->get_value_with_unit( $this->args['border_radius_top_right'] ) : '0px';
|
|
$this->args['border_radius_bottom_right'] = $this->args['border_radius_bottom_right'] ? fusion_library()->sanitize->get_value_with_unit( $this->args['border_radius_bottom_right'] ) : '0px';
|
|
$this->args['border_radius_bottom_left'] = $this->args['border_radius_bottom_left'] ? fusion_library()->sanitize->get_value_with_unit( $this->args['border_radius_bottom_left'] ) : '0px';
|
|
$this->args['border_radius'] = $this->args['border_radius_top_left'] . ' ' . $this->args['border_radius_top_right'] . ' ' . $this->args['border_radius_bottom_right'] . ' ' . $this->args['border_radius_bottom_left'];
|
|
$this->args['border_radius'] = ( '0px 0px 0px 0px' === $this->args['border_radius'] ) ? '' : $this->args['border_radius'];
|
|
|
|
$this->args['border_position'] = ( 'all' !== $this->args['border_position'] ) ? $this->args['border_position'] : '';
|
|
|
|
// Backwards-compatibility fix.
|
|
if ( '' === $this->args['border_sizes_top'] && '' === $this->args['border_sizes_bottom'] && '' === $this->args['border_sizes_left'] && '' === $this->args['border_sizes_right'] ) {
|
|
if ( $this->args['border_color'] && $this->args['border_size'] && $this->args['border_style'] ) {
|
|
if ( ! $this->args['border_position'] ) {
|
|
$this->args['border_sizes_top'] = $this->args['border_size'];
|
|
$this->args['border_sizes_right'] = $this->args['border_size'];
|
|
$this->args['border_sizes_bottom'] = $this->args['border_size'];
|
|
$this->args['border_sizes_left'] = $this->args['border_size'];
|
|
} else {
|
|
$this->args[ 'border_sizes_' . $this->args['border_position'] ] = $this->args['border_size'];
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_image'] ) ) {
|
|
$this->args['background_data'] = fusion_library()->images->get_attachment_data_by_helper( $this->args['background_image_id'], $this->args['background_image'] );
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_image_medium'] ) ) {
|
|
$this->args['background_data_medium'] = fusion_library()->images->get_attachment_data_by_helper( $this->args['background_image_id_medium'], $this->args['background_image_medium'] );
|
|
}
|
|
|
|
if ( ! empty( $this->args['background_image_small'] ) ) {
|
|
$this->args['background_data_small'] = fusion_library()->images->get_attachment_data_by_helper( $this->args['background_image_id_small'], $this->args['background_image_small'] );
|
|
}
|
|
|
|
if ( empty( $this->args['background_color_hover'] ) && ! empty( $this->args['background_color'] ) ) {
|
|
$this->args['background_color_hover'] = $this->args['background_color'];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets the extra args.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_extra_args() {
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
|
|
$this->args['flex'] = false;
|
|
$this->args['column_map'] = [
|
|
'fusion_builder_column' => [],
|
|
'fusion_builder_column_inner' => [],
|
|
];
|
|
$this->args['column_spacing'] = false;
|
|
$this->args['flex_align_items'] = false;
|
|
if ( function_exists( 'fusion_builder_container' ) ) {
|
|
if ( fusion_builder_container()->rendering ) {
|
|
$this->args['flex'] = fusion_builder_container()->is_flex();
|
|
$this->args['column_spacing'] = fusion_builder_container()->get_column_spacing();
|
|
$this->args['flex_align_items'] = fusion_builder_container()->get_column_alignment();
|
|
if ( ! empty( fusion_builder_container()->column_map ) ) {
|
|
$this->args['column_map'] = fusion_builder_container()->column_map;
|
|
}
|
|
} elseif ( null === fusion_builder_container()->data && ( defined( 'STUDIO_VERSION' ) || FusionBuilder()->post_card_data['is_rendering'] ) ) {
|
|
$this->args['flex'] = true;
|
|
}
|
|
}
|
|
|
|
// If there is no map of columns, we must use fallback method like 4.0.3.
|
|
if ( ! isset( $this->args['column_map'][ $this->shortcode_name ] ) || empty( $this->args['column_map'][ $this->shortcode_name ] ) && 'no' !== $this->args['spacing'] ) {
|
|
$this->args['spacing'] = 'yes';
|
|
}
|
|
|
|
$this->args['column_counter'] = $this->column_counter++;
|
|
|
|
// If not ajax this will be column_counter.
|
|
if ( isset( $_POST['cid'] ) ) { // phpcs:disable WordPress.Security.NonceVerification.Missing
|
|
$this->set_element_id( $this->args['column_counter'] );
|
|
$this->args['column_counter'] = $this->element_id;
|
|
}
|
|
|
|
// Fixes selectors duplication for terms & conditions section on checkout page.
|
|
if ( class_exists( 'WooCommerce' ) && is_checkout() && fusion_library()->get_page_id() !== intval( get_option( 'woocommerce_checkout_page_id' ) ) ) {
|
|
$this->set_element_id( $this->column_counter . '_' . fusion_library()->get_page_id() );
|
|
$this->args['column_counter'] = $this->element_id;
|
|
}
|
|
|
|
// Whether lazy load should be used.
|
|
$this->args['lazy_load'] = ( 'avada' === $fusion_settings->get( 'lazy_load' ) && ! is_feed() && 'skip' !== $this->args['skip_lazy_load'] ) ? true : false;
|
|
if ( ! $this->args['background_image'] || '' === $this->args['background_image'] ) {
|
|
$this->args['lazy_load'] = false;
|
|
}
|
|
|
|
$this->args['old_spacing_values'] = [
|
|
'yes',
|
|
'Yes',
|
|
'No',
|
|
'no',
|
|
];
|
|
|
|
$this->args['hover_or_link'] = ( 'none' !== $this->args['hover_type'] && ! empty( $this->args['hover_type'] ) ) || ! empty( $this->args['link'] );
|
|
}
|
|
|
|
/**
|
|
* Overrides args for post card rendering
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function post_card_args() {
|
|
$defaults = self::get_element_defaults();
|
|
|
|
$reset = [
|
|
'align_self',
|
|
'order',
|
|
'order_medium',
|
|
'order_small',
|
|
'hide_on_mobile',
|
|
'spacing',
|
|
'spacing_left',
|
|
'spacing_right',
|
|
'spacing_left_medium',
|
|
'spacing_right_medium',
|
|
'spacing_left_small',
|
|
'spacing_right_small',
|
|
'type',
|
|
'type_medium',
|
|
'type_small',
|
|
'margin_top_medium',
|
|
'margin_bottom_medium',
|
|
'margin_top_small',
|
|
'margin_bottom_small',
|
|
];
|
|
|
|
foreach ( $reset as $reset_key ) {
|
|
$this->args[ $reset_key ] = $defaults[ $reset_key ];
|
|
}
|
|
|
|
$this->args['margin_top'] = '0px';
|
|
$this->args['margin_bottom'] = '0px';
|
|
$this->args['flex'] = true;
|
|
$this->args['column_spacing'] = false;
|
|
$this->args['flex_align_items'] = false;
|
|
}
|
|
|
|
/**
|
|
* Works out the column size based on args.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_column_size() {
|
|
$size_class = '';
|
|
|
|
switch ( $this->args['type'] ) {
|
|
case '1_1':
|
|
$size_class = 'fusion-one-full';
|
|
break;
|
|
case '1_4':
|
|
$size_class = 'fusion-one-fourth';
|
|
break;
|
|
case '3_4':
|
|
$size_class = 'fusion-three-fourth';
|
|
break;
|
|
case '1_2':
|
|
$size_class = 'fusion-one-half';
|
|
break;
|
|
case '1_3':
|
|
$size_class = 'fusion-one-third';
|
|
break;
|
|
case '2_3':
|
|
$size_class = 'fusion-two-third';
|
|
break;
|
|
case '1_5':
|
|
$size_class = 'fusion-one-fifth';
|
|
break;
|
|
case '2_5':
|
|
$size_class = 'fusion-two-fifth';
|
|
break;
|
|
case '3_5':
|
|
$size_class = 'fusion-three-fifth';
|
|
break;
|
|
case '4_5':
|
|
$size_class = 'fusion-four-fifth';
|
|
break;
|
|
case '5_6':
|
|
$size_class = 'fusion-five-sixth';
|
|
break;
|
|
case '1_6':
|
|
$size_class = 'fusion-one-sixth';
|
|
break;
|
|
}
|
|
|
|
$this->args['column_size'] = $this->validate_column_size( $this->args['type'] );
|
|
$this->args['size_class'] = $size_class;
|
|
}
|
|
|
|
/**
|
|
* Gets column size as a decimal.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param mixed $column_size Size of column.
|
|
* @return mixed
|
|
*/
|
|
public function validate_column_size( $column_size = '1_3' ) {
|
|
|
|
// Fractional value.
|
|
|
|
if ( false !== strpos( $column_size, '_' ) ) {
|
|
$fractions = explode( '_', $column_size );
|
|
return (float) $fractions[0] / (float) $fractions[1];
|
|
}
|
|
|
|
// Size in px or calc, return as it is.
|
|
if ( strpos( $column_size, 'px' ) || strpos( $column_size, 'calc' ) ) {
|
|
return $column_size;
|
|
}
|
|
|
|
// Greater than one, no px or calc, assume percentage and divide by 100.
|
|
if ( 1 < (float) $column_size && ! strpos( $column_size, 'px' ) && ! strpos( $column_size, 'calc' ) ) {
|
|
return (float) $column_size / 100;
|
|
}
|
|
return $column_size;
|
|
}
|
|
|
|
/**
|
|
* Works out if column is first or last in a row.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_first_last() {
|
|
global $columns, $inner_columns;
|
|
|
|
// Globals depending on column type.
|
|
$non_global_columns = 'fusion_builder_column' === $this->shortcode_name ? $columns : $inner_columns;
|
|
|
|
$first = false;
|
|
$last = false;
|
|
|
|
// If not using a fallback, work out first and last from the generated array.
|
|
if ( ! $this->args['fallback'] ) {
|
|
if ( false !== strpos( $this->args['current_column_type'], 'first' ) ) {
|
|
$first = true;
|
|
}
|
|
|
|
if ( false !== strpos( $this->args['current_column_type'], 'last' ) ) {
|
|
$last = true;
|
|
|
|
}
|
|
} else {
|
|
if ( ! $non_global_columns ) {
|
|
$non_global_columns = 0;
|
|
}
|
|
|
|
if ( 0 === $non_global_columns ) {
|
|
$first = true;
|
|
}
|
|
$non_global_columns += $this->args['column_size'];
|
|
if ( 0.990 < $non_global_columns ) {
|
|
$last = true;
|
|
$non_global_columns = 0;
|
|
}
|
|
if ( 1 < $non_global_columns ) {
|
|
$last = false;
|
|
$non_global_columns = $this->args['column_size'];
|
|
}
|
|
}
|
|
|
|
if ( 'fusion_builder_column' === $this->shortcode_name ) {
|
|
$columns = $non_global_columns;
|
|
} else {
|
|
$inner_columns = $non_global_columns;
|
|
}
|
|
$this->args['last'] = $last;
|
|
$this->args['first'] = $first;
|
|
}
|
|
|
|
/**
|
|
* Half a value passed in
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param string $value The value you want to get half of.
|
|
* @return string
|
|
*/
|
|
public function get_half_spacing( $value ) {
|
|
if ( 0 === (float) $value ) {
|
|
return $value;
|
|
}
|
|
$unitless_spacing = (float) filter_var( $value, FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );
|
|
$unitless_half = $unitless_spacing / 2;
|
|
return str_replace( $unitless_spacing, $unitless_half, $value );
|
|
}
|
|
|
|
/**
|
|
* Spacing weighted for col width.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param string $value The value you want to get half of.
|
|
* @param mixed $columns Number of columns in the row.
|
|
* @return string
|
|
*/
|
|
public function get_weighted_spacing( $value, $columns = false ) {
|
|
|
|
if ( ! isset( $this->args['column_size'] ) ) {
|
|
$this->set_column_size();
|
|
}
|
|
if ( strpos( $this->args['column_size'], 'px' ) || strpos( $this->args['column_size'], 'calc' ) ) {
|
|
return $value;
|
|
}
|
|
$unitless_spacing = (float) filter_var( $value, FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );
|
|
|
|
// If we only have two columns, weight the distribution, otherwise just half.
|
|
if ( false !== $columns && 3 > $columns ) {
|
|
$unitless_weighted = $unitless_spacing * (float) $this->args['column_size'];
|
|
} else {
|
|
$unitless_weighted = $unitless_spacing / 2;
|
|
}
|
|
return str_replace( $unitless_spacing, $unitless_weighted, $value );
|
|
}
|
|
|
|
/**
|
|
* Set column spacing data.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_column_map_data() {
|
|
global $fusion_col_type;
|
|
|
|
// Globals depending on column type.
|
|
$non_global_column_array = $this->args['column_map'][ $this->shortcode_name ];
|
|
|
|
$current_row = false;
|
|
$current_column_type = false;
|
|
$current_row_number_of_columns = false;
|
|
|
|
$fusion_col_type = [
|
|
'padding' => $this->args['padding'],
|
|
'type' => $this->args['type'],
|
|
];
|
|
|
|
// If we are flex, we do not have a column map.
|
|
if ( $this->args['flex'] ) {
|
|
$this->set_column_size();
|
|
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
|
|
// Medium default to TO or validate if set.
|
|
if ( empty( $this->args['type_medium'] ) ) {
|
|
$this->args['type_medium'] = 'inherit_from_large' === $fusion_settings->get( 'col_width_medium' ) ? $this->args['column_size'] : 1;
|
|
} else {
|
|
$this->args['type_medium'] = $this->validate_column_size( $this->args['type_medium'] );
|
|
}
|
|
|
|
// Small default to TO or validate if set.
|
|
if ( empty( $this->args['type_small'] ) ) {
|
|
$this->args['type_small'] = 'inherit_from_large' === $fusion_settings->get( 'col_width_small' ) ? $this->args['column_size'] : 1;
|
|
} else {
|
|
$this->args['type_small'] = $this->validate_column_size( $this->args['type_small'] );
|
|
}
|
|
|
|
// Not full width medium, inherit from large if set.
|
|
if ( ! empty( $this->args['type_medium'] ) && 1 !== $this->args['type_medium'] ) {
|
|
if ( '' === $this->args['spacing_left_medium'] ) {
|
|
$this->args['spacing_left_medium'] = $this->args['spacing_left'];
|
|
}
|
|
if ( '' === $this->args['spacing_right_medium'] ) {
|
|
$this->args['spacing_right_medium'] = $this->args['spacing_right'];
|
|
}
|
|
}
|
|
|
|
// Not full width small, inherit from medium or large if set.
|
|
if ( ! empty( $this->args['type_small'] ) && 1 !== $this->args['type_small'] ) {
|
|
if ( '' === $this->args['spacing_left_small'] ) {
|
|
$this->args['spacing_left_small'] = '' !== $this->args['spacing_left_medium'] ? $this->args['spacing_left_medium'] : $this->args['spacing_left'];
|
|
}
|
|
if ( '' === $this->args['spacing_right_small'] ) {
|
|
$this->args['spacing_right_small'] = '' !== $this->args['spacing_right_medium'] ? $this->args['spacing_right_medium'] : $this->args['spacing_right'];
|
|
}
|
|
}
|
|
|
|
// Half the spacing on container.
|
|
$half_spacing = $this->get_half_spacing( $this->args['column_spacing'] );
|
|
|
|
// Validate left and right margins that are set.
|
|
foreach ( [ 'large', 'medium', 'small' ] as $width ) {
|
|
|
|
// Need to calc for each because column width may be different and that changes things.
|
|
$width_key = 'large' === $width ? 'column_size' : 'type_' . $width;
|
|
$empty_offset = $this->validate_percentage_margin( $half_spacing, $this->args[ $width_key ] );
|
|
|
|
// We have a value, validate it, else we use the empty offset.
|
|
$spacing_left_key = 'large' === $width ? 'spacing_left' : 'spacing_left_' . $width;
|
|
if ( '' !== $this->args[ $spacing_left_key ] ) {
|
|
$this->args[ $spacing_left_key ] = $this->validate_percentage_margin( $this->args[ $spacing_left_key ], $this->args[ $width_key ] );
|
|
} else {
|
|
$this->args[ $spacing_left_key ] = $empty_offset;
|
|
|
|
}
|
|
|
|
$spacing_right_key = 'large' === $width ? 'spacing_right' : 'spacing_right_' . $width;
|
|
if ( '' !== $this->args[ $spacing_right_key ] ) {
|
|
$this->args[ $spacing_right_key ] = $this->validate_percentage_margin( $this->args[ $spacing_right_key ], $this->args[ $width_key ] );
|
|
} else {
|
|
$this->args[ $spacing_right_key ] = $empty_offset;
|
|
}
|
|
$fusion_col_type['margin'][ $width ] = [
|
|
'left' => $this->args[ $spacing_left_key ],
|
|
'right' => $this->args[ $spacing_right_key ],
|
|
];
|
|
}
|
|
} else {
|
|
// Set the row and column index as well as the column type for the current column.
|
|
if ( '' !== $this->args['row_column_index'] ) {
|
|
$this->args['row_column_index'] = explode( '_', $this->args['row_column_index'] );
|
|
$current_row_index = $this->args['row_column_index'][0];
|
|
$current_column_index = $this->args['row_column_index'][1];
|
|
if ( isset( $non_global_column_array ) && isset( $non_global_column_array[ $current_row_index ] ) ) {
|
|
$current_row = $non_global_column_array[ $current_row_index ];
|
|
}
|
|
|
|
if ( isset( $current_row ) && is_array( $current_row ) ) {
|
|
$current_row_number_of_columns = count( $current_row );
|
|
$current_column_type = $current_row[ $current_column_index ][1];
|
|
}
|
|
}
|
|
|
|
// Check if all columns are yes, no, or empty.
|
|
$fallback = true;
|
|
if ( is_array( $current_row ) && 0 !== count( $non_global_column_array ) ) {
|
|
foreach ( $current_row as $column_space ) {
|
|
if ( isset( $column_space[0] ) && ! in_array( $column_space[0], $this->args['old_spacing_values'], true ) ) {
|
|
$fallback = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fix the spacing values.
|
|
if ( is_array( $current_row ) ) {
|
|
foreach ( $current_row as $key => $value ) {
|
|
if ( '' === $value[0] || 'yes' === $value[0] ) {
|
|
$current_row[ $key ] = '4%';
|
|
} elseif ( 'no' === $value[0] ) {
|
|
unset( $current_row[ $key ] );
|
|
} else {
|
|
$current_row[ $key ] = $value[0];
|
|
}
|
|
}
|
|
}
|
|
|
|
$fusion_col_type['spacings'] = $current_row;
|
|
$this->args['fallback'] = $fallback;
|
|
$this->args['current_row'] = $current_row;
|
|
$this->args['current_column_type'] = $current_column_type;
|
|
$this->args['current_row_number_of_columns'] = $current_row_number_of_columns;
|
|
|
|
$this->set_column_size();
|
|
$this->set_first_last();
|
|
$this->set_spacing_styling();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Works out the column spacing and creates styles for it.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_spacing_styling() {
|
|
$map_old_spacing = [
|
|
'0.1667' => '13.3333%',
|
|
'0.8333' => '82.6666%',
|
|
'0.2' => '16.8%',
|
|
'0.4' => '37.6%',
|
|
'0.6' => '58.4%',
|
|
'0.8' => '79.2%',
|
|
'0.25' => '22%',
|
|
'0.75' => '74%',
|
|
'0.3333' => '30.6666%',
|
|
'0.6667' => '65.3333%',
|
|
'0.5' => '48%',
|
|
'1' => '100%',
|
|
];
|
|
|
|
$this->args['column_spacing_style'] = '';
|
|
$this->args['spacing_classes'] = '';
|
|
|
|
$rounded = round( (float) $this->args['column_size'], 4 );
|
|
$old_width = isset( $map_old_spacing[ fusion_i18_float_to_string( $rounded ) ] ) ? $map_old_spacing[ fusion_i18_float_to_string( $rounded ) ] : ( $rounded * 100 ) . '%';
|
|
|
|
// Spacing. If using fallback and spacing is no then ignore and just use full % width.
|
|
if ( isset( $this->args['spacing'] ) && ! ( in_array( $this->args['spacing'], [ '0px', 'no' ], true ) && $this->args['fallback'] ) ) {
|
|
$width = fusion_i18_float_to_string( $this->args['column_size'] * 100 ) . '%';
|
|
|
|
if ( 'yes' === $this->args['spacing'] || '' === $this->args['spacing'] ) {
|
|
$this->args['spacing'] = '4%';
|
|
} elseif ( 'no' === $this->args['spacing'] ) {
|
|
$this->args['spacing'] = '0px';
|
|
}
|
|
$this->args['spacing'] = fusion_library()->sanitize->get_value_with_unit( esc_attr( $this->args['spacing'] ) );
|
|
|
|
if ( 0 === filter_var( $this->args['spacing'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ) ) {
|
|
$this->args['spacing_classes'] = ' fusion-spacing-no';
|
|
}
|
|
|
|
$width_offset = '';
|
|
if ( is_array( $this->args['current_row'] ) ) {
|
|
$width_offset = '( ( ' . implode( ' + ', $this->args['current_row'] ) . ' ) * ' . fusion_i18_float_to_string( $this->args['column_size'] ) . ' ) ';
|
|
}
|
|
|
|
if ( ! $this->args['last'] && ! ( $this->args['fallback'] && '0px' === $this->args['spacing'] ) ) {
|
|
$spacing_direction = 'right';
|
|
if ( is_rtl() ) {
|
|
$spacing_direction = 'left';
|
|
}
|
|
if ( ! $this->args['fallback'] ) {
|
|
$this->args['column_spacing_style'] = 'width:' . $width . ';width:calc(' . $width . ' - ' . $width_offset . ');margin-' . $spacing_direction . ': ' . $this->args['spacing'] . ';';
|
|
} else {
|
|
$this->args['column_spacing_style'] = 'width:' . $old_width . '; margin-' . $spacing_direction . ': ' . $this->args['spacing'] . ';';
|
|
}
|
|
} elseif ( isset( $this->args['current_row_number_of_columns'] ) && false !== $this->args['current_row_number_of_columns'] && 1 < $this->args['current_row_number_of_columns'] ) {
|
|
if ( ! $this->args['fallback'] ) {
|
|
$this->args['column_spacing_style'] = 'width:' . $width . ';width:calc(' . $width . ' - ' . $width_offset . ');';
|
|
} elseif ( '0px' !== $this->args['spacing'] ) {
|
|
$this->args['column_spacing_style'] = 'width:' . $old_width . ';';
|
|
} else {
|
|
$this->args['column_spacing_style'] = 'width:' . $width . ';';
|
|
}
|
|
} elseif ( ! isset( $this->args['current_row_number_of_columns'] ) || false === $this->args['current_row_number_of_columns'] ) {
|
|
$this->args['column_spacing_style'] = 'width:' . $old_width . ';';
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Checks if column has a gradient color.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return bool
|
|
*/
|
|
public function is_gradient_color() {
|
|
return ( ! empty( $this->args['gradient_start_color'] ) && 0 !== $this->args['alpha_gradient_start_color'] ) || ( ! empty( $this->args['gradient_end_color'] ) && 0 !== $this->args['alpha_gradient_end_color'] );
|
|
}
|
|
|
|
/**
|
|
* Helper which adds lazy load attributes into existing attributes.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param array $attr The attributes.
|
|
* @param array $element The element adding to.
|
|
* @return array
|
|
*/
|
|
public function add_lazy_attributes( $attr, $element = '' ) {
|
|
|
|
// Check if we are using lazy load.
|
|
if ( $this->args['lazy_load'] ) {
|
|
|
|
// If its not wrapper and we call this it is always true. If we have no hover then we also add to wrapper.
|
|
if ( 'wrapper' !== $element || ! $this->args['hover_or_link'] ) {
|
|
$attr['class'] .= ' lazyload';
|
|
|
|
// Have background image, set its url.
|
|
if ( ! empty( $this->args['lazy_bg'] ) ) {
|
|
foreach ( $this->args['lazy_bg'] as $key => $value ) {
|
|
$attr[ $key ] = $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return $attr;
|
|
}
|
|
|
|
/**
|
|
* Checks value and returns relative to row.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @param string $value Margin value.
|
|
* @param mixed $column_size Column width.
|
|
* @return string $value Formatted value.
|
|
*/
|
|
public function validate_percentage_margin( $value = '', $column_size = 1 ) {
|
|
|
|
// If custom column size, return actual value.
|
|
if ( strpos( $column_size, 'px' ) || strpos( $column_size, 'calc' ) ) {
|
|
return $value;
|
|
}
|
|
|
|
// If value is in percentage and not calc, make it relative to container.
|
|
if ( 0 < (float) $column_size && strpos( $value, '%' ) && ! strpos( $value, 'calc' ) ) {
|
|
// If all are in % just work it out.
|
|
if ( strpos( $this->args['column_spacing'], '%' ) && ! strpos( $this->args['column_spacing'], 'calc' ) ) {
|
|
return (float) $value / (float) $column_size / 100 * ( 100 - (float) $this->args['column_spacing'] ) . '%';
|
|
} else {
|
|
|
|
// Not all % then we need to use calc.
|
|
return 'calc( ' . ( (float) $value / (float) $column_size / 100 ) . ' * calc( 100% - ' . $this->args['column_spacing'] . ' ) )';
|
|
}
|
|
}
|
|
return $value;
|
|
}
|
|
|
|
/**
|
|
* Set parent state to inactive.
|
|
*
|
|
* @access public
|
|
* @since 3.0
|
|
* @return void
|
|
*/
|
|
public function set_inactive() {
|
|
$this->active_parent = false;
|
|
}
|
|
|
|
/**
|
|
* Adds settings to element options panel.
|
|
*
|
|
* @access public
|
|
* @since 1.1
|
|
* @return array $sections Column settings.
|
|
*/
|
|
public function add_options() {
|
|
|
|
return [
|
|
'column_shortcode_section' => [
|
|
'label' => esc_html__( 'Column', 'fusion-builder' ),
|
|
'description' => '',
|
|
'id' => 'column_shortcode_section',
|
|
'default' => '',
|
|
'type' => 'accordion',
|
|
'icon' => 'fusiona-column',
|
|
'fields' => [
|
|
'col_margin' => [
|
|
'label' => esc_html__( 'Column Margins', 'fusion-builder' ),
|
|
'description' => esc_html__( 'Controls the top/bottom margins for all column sizes.', 'fusion-builder' ),
|
|
'id' => 'col_margin',
|
|
'type' => 'spacing',
|
|
'choices' => [
|
|
'top' => true,
|
|
'bottom' => true,
|
|
],
|
|
'transport' => 'postMessage',
|
|
'default' => [
|
|
'top' => '0px',
|
|
'bottom' => '20px',
|
|
],
|
|
'css_vars' => [
|
|
[
|
|
'name' => '--col_margin-top',
|
|
'choice' => 'top',
|
|
],
|
|
[
|
|
'name' => '--col_margin-bottom',
|
|
'choice' => 'bottom',
|
|
],
|
|
],
|
|
],
|
|
'col_spacing' => [
|
|
'label' => esc_html__( 'Column Spacing', 'fusion-builder' ),
|
|
'description' => esc_html__( 'Controls the column spacing between one column to the next.', 'fusion-builder' ),
|
|
'id' => 'col_spacing',
|
|
'default' => '4%',
|
|
'type' => 'dimension',
|
|
'transport' => 'postMessage',
|
|
'css_vars' => [
|
|
[
|
|
'name' => '--col_spacing',
|
|
],
|
|
],
|
|
],
|
|
'col_width_medium' => [
|
|
'label' => esc_html__( 'Column Width On Medium Screens', 'fusion-builder' ),
|
|
'description' => esc_html__( 'Controls how columns should be displayed on medium sized screens.', 'fusion-builder' ),
|
|
'id' => 'col_width_medium',
|
|
'default' => 'inherit_from_large',
|
|
'type' => 'radio-buttonset',
|
|
'transport' => 'postMessage',
|
|
'choices' => [
|
|
'inherit_from_large' => esc_html__( 'Inherit From Large', 'fusion-builder' ),
|
|
'1_1' => esc_html__( 'Full Width ', 'fusion-builder' ),
|
|
],
|
|
[
|
|
'name' => '--medium-col-default',
|
|
'callback' => [ 'column_width_inheritance', '' ],
|
|
],
|
|
],
|
|
'col_width_small' => [
|
|
'label' => esc_html__( 'Column Width On Small Screens', 'fusion-builder' ),
|
|
'description' => esc_html__( 'Controls how columns should be displayed on small sized screens.', 'fusion-builder' ),
|
|
'id' => 'col_width_small',
|
|
'default' => '1_1',
|
|
'type' => 'radio-buttonset',
|
|
'transport' => 'postMessage',
|
|
'choices' => [
|
|
'inherit_from_large' => esc_html__( 'Inherit From Large', 'fusion-builder' ),
|
|
'1_1' => esc_html__( 'Full Width ', 'fusion-builder' ),
|
|
],
|
|
[
|
|
'name' => '--small-col-default',
|
|
'callback' => [ 'column_width_inheritance', '' ],
|
|
],
|
|
],
|
|
],
|
|
],
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Sets the necessary scripts.
|
|
*
|
|
* @access public
|
|
* @since 1.1
|
|
* @return void
|
|
*/
|
|
public function add_scripts() {
|
|
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
|
|
$is_builder = ( function_exists( 'fusion_is_preview_frame' ) && fusion_is_preview_frame() ) || ( function_exists( 'fusion_is_builder_frame' ) && fusion_is_builder_frame() );
|
|
|
|
if ( $is_builder ) {
|
|
Fusion_Dynamic_JS::localize_script(
|
|
'fusion-column-bg-image',
|
|
'fusionBgImageVars',
|
|
[
|
|
'content_break_point' => intval( $fusion_settings->get( 'content_break_point' ) ),
|
|
]
|
|
);
|
|
Fusion_Dynamic_JS::enqueue_script(
|
|
'fusion-column-bg-image',
|
|
FusionBuilder::$js_folder_url . '/general/fusion-column-bg-image.js',
|
|
FusionBuilder::$js_folder_path . '/general/fusion-column-bg-image.js',
|
|
[ 'jquery', 'modernizr', 'fusion-equal-heights' ],
|
|
FUSION_BUILDER_VERSION,
|
|
true
|
|
);
|
|
}
|
|
Fusion_Dynamic_JS::enqueue_script(
|
|
'fusion-column',
|
|
FusionBuilder::$js_folder_url . '/general/fusion-column.js',
|
|
FusionBuilder::$js_folder_path . '/general/fusion-column.js',
|
|
[ 'jquery', 'fusion-animations' ],
|
|
FUSION_BUILDER_VERSION,
|
|
true
|
|
);
|
|
|
|
// Legacy column script.
|
|
Fusion_Dynamic_JS::register_script(
|
|
'fusion-column-legacy',
|
|
FusionBuilder::$js_folder_url . '/general/fusion-column-legacy.js',
|
|
FusionBuilder::$js_folder_path . '/general/fusion-column-legacy.js',
|
|
[ 'jquery', 'fusion-animations', 'fusion-equal-heights' ],
|
|
FUSION_BUILDER_VERSION,
|
|
true
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Sets the legacy scripts.
|
|
*
|
|
* @access public
|
|
* @since 3.4
|
|
* @return void
|
|
*/
|
|
public function add_legacy_scripts() {
|
|
Fusion_Dynamic_JS::enqueue_script( 'fusion-column-legacy' );
|
|
}
|
|
}
|
|
|
|
if ( ! function_exists( 'fusion_get_column_subparam_map' ) ) {
|
|
|
|
/**
|
|
* Return an array of column sub param maps..
|
|
*
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
function fusion_get_column_subparam_map() {
|
|
return [
|
|
'spacing_left' => 'dimension_spacing',
|
|
'spacing_right' => 'dimension_spacing',
|
|
'spacing_left_medium' => 'dimension_spacing_medium',
|
|
'spacing_right_medium' => 'dimension_spacing_medium',
|
|
'spacing_left_small' => 'dimension_spacing_small',
|
|
'spacing_right_small' => 'dimension_spacing_small',
|
|
'margin_top' => 'dimension_margin',
|
|
'margin_bottom' => 'dimension_margin',
|
|
'margin_top_medium' => 'dimension_margin_medium',
|
|
'margin_bottom_medium' => 'dimension_margin_medium',
|
|
'margin_top_small' => 'dimension_margin_small',
|
|
'margin_bottom_small' => 'dimension_margin_small',
|
|
'padding_top' => 'padding',
|
|
'padding_right' => 'padding',
|
|
'padding_bottom' => 'padding',
|
|
'padding_left' => 'padding',
|
|
'padding_top_medium' => 'padding_medium',
|
|
'padding_right_medium' => 'padding_medium',
|
|
'padding_bottom_medium' => 'padding_medium',
|
|
'padding_left_medium' => 'padding_medium',
|
|
'padding_top_small' => 'padding_small',
|
|
'padding_right_small' => 'padding_small',
|
|
'padding_bottom_small' => 'padding_small',
|
|
'padding_left_small' => 'padding_small',
|
|
|
|
];
|
|
}
|
|
}
|
|
if ( ! function_exists( 'fusion_get_column_params' ) ) {
|
|
|
|
/**
|
|
* Return an array of column parameters.
|
|
*
|
|
* @since 3.0
|
|
* @return array
|
|
*/
|
|
function fusion_get_column_params() {
|
|
$fusion_settings = awb_get_fusion_settings();
|
|
|
|
return [
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Alignment', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Defines how the column should align itself within the container. Overrides what is set on the container.', 'fusion-builder' ),
|
|
'param_name' => 'align_self',
|
|
'default' => 'auto',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'auto' => esc_attr__( 'Default', 'fusion-builder' ),
|
|
'flex-start' => esc_attr__( 'Flex Start', 'fusion-builder' ),
|
|
'center' => esc_attr__( 'Center', 'fusion-builder' ),
|
|
'flex-end' => esc_attr__( 'Flex End', 'fusion-builder' ),
|
|
'stretch' => esc_attr__( 'Stretch', 'fusion-builder' ),
|
|
],
|
|
'icons' => [
|
|
'auto' => '<span class="fusiona-cog"></span>',
|
|
'flex-start' => '<span class="fusiona-align-top-columns"></span>',
|
|
'center' => '<span class="fusiona-align-center-columns"></span>',
|
|
'flex-end' => '<span class="fusiona-align-bottom-columns"></span>',
|
|
'stretch' => '<span class="fusiona-full-height"></span>',
|
|
],
|
|
'grid_layout' => true,
|
|
'back_icons' => true,
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_update_flex_column',
|
|
'args' => [
|
|
'selector' => '.fusion-layout-column',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Content Layout', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Defines how the column content should be positioned. If block is selected it will not use flex positioning and will instead allow floated elements.', 'fusion-builder' ),
|
|
'param_name' => 'content_layout',
|
|
'default' => 'column',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'column' => esc_attr__( 'Column', 'fusion-builder' ),
|
|
'row' => esc_attr__( 'Row', 'fusion-builder' ),
|
|
'block' => esc_attr__( 'Block', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_update_flex_elements',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Content Alignment', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Defines how the column content should align. Works only with full height columns.', 'fusion-builder' ),
|
|
'param_name' => 'align_content',
|
|
'default' => 'flex-start',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'flex-start' => esc_attr__( 'Flex Start', 'fusion-builder' ),
|
|
'center' => esc_attr__( 'Center', 'fusion-builder' ),
|
|
'flex-end' => esc_attr__( 'Flex End', 'fusion-builder' ),
|
|
'space-between' => esc_attr__( 'Space Between', 'fusion-builder' ),
|
|
'space-around' => esc_attr__( 'Space Around', 'fusion-builder' ),
|
|
'space-evenly' => esc_attr__( 'Space Evenly', 'fusion-builder' ),
|
|
],
|
|
'icons' => [
|
|
'flex-start' => '<span class="fusiona-align-top-vert"></span>',
|
|
'center' => '<span class="fusiona-align-center-vert"></span>',
|
|
'flex-end' => '<span class="fusiona-align-bottom-vert"></span>',
|
|
'space-between' => '<span class="fusiona-space-between"></span>',
|
|
'space-around' => '<span class="fusiona-space-around"></span>',
|
|
'space-evenly' => '<span class="fusiona-space-evenly"></span>',
|
|
],
|
|
'grid_layout' => true,
|
|
'back_icons' => true,
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
[
|
|
'element' => 'content_layout',
|
|
'value' => 'block',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_update_flex_column',
|
|
'args' => [
|
|
'selector' => '.fusion-layout-column',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Content Vertical Alignment', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Defines how the column content should vertically align.', 'fusion-builder' ),
|
|
'param_name' => 'valign_content',
|
|
'default' => 'flex-start',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'flex-start' => esc_attr__( 'Flex Start', 'fusion-builder' ),
|
|
'center' => esc_attr__( 'Center', 'fusion-builder' ),
|
|
'flex-end' => esc_attr__( 'Flex End', 'fusion-builder' ),
|
|
'stretch' => esc_attr__( 'Stretch', 'fusion-builder' ),
|
|
],
|
|
'icons' => [
|
|
'flex-start' => '<span class="fusiona-align-top-columns"></span>',
|
|
'center' => '<span class="fusiona-align-center-columns"></span>',
|
|
'flex-end' => '<span class="fusiona-align-bottom-columns"></span>',
|
|
'stretch' => '<span class="fusiona-full-height"></span>',
|
|
],
|
|
'grid_layout' => true,
|
|
'back_icons' => true,
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
[
|
|
'element' => 'content_layout',
|
|
'value' => 'row',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_update_flex_column',
|
|
'args' => [
|
|
'selector' => '.fusion-layout-column',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Content Wrap', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Defines whether elements are forced onto one line or can wrap onto multiple lines.', 'fusion-builder' ),
|
|
'param_name' => 'content_wrap',
|
|
'default' => 'wrap',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'wrap' => esc_attr__( 'Wrap', 'fusion-builder' ),
|
|
'nowrap' => esc_attr__( 'No Wrap', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
[
|
|
'element' => 'content_layout',
|
|
'value' => 'row',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_update_flex_column',
|
|
'args' => [
|
|
'selector' => '.fusion-layout-column',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Column Spacing', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Controls the column spacing between one column to the next. Enter value including any valid CSS unit, ex: 4%.', 'fusion-builder' ),
|
|
'param_name' => 'spacing',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => '',
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Center Content', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Set to "Yes" to center the content vertically. Equal heights on the parent container must be turned on.', 'fusion-builder' ),
|
|
'param_name' => 'center_content',
|
|
'default' => 'no',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'yes' => esc_attr__( 'Yes', 'fusion-builder' ),
|
|
'no' => esc_attr__( 'No', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Column HTML Tag', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose column HTML tag, default is div.', 'fusion-builder' ),
|
|
'param_name' => 'column_tag',
|
|
'value' => [
|
|
'div' => 'Default',
|
|
'section' => 'Section',
|
|
'header' => 'Header',
|
|
'footer' => 'Footer',
|
|
'main' => 'Main',
|
|
'article' => 'Article',
|
|
'aside' => 'Aside',
|
|
'nav' => 'Nav',
|
|
],
|
|
'default' => 'div',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
],
|
|
[
|
|
'type' => 'link_selector',
|
|
'heading' => esc_attr__( 'Link URL', 'fusion-builder' ),
|
|
'description' => __( 'Add the URL the column will link to, ex: http://example.com. <strong>IMPORTANT:</strong> This will disable links on elements inside the column.', 'fusion-builder' ),
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'param_name' => 'link',
|
|
'value' => '',
|
|
'dynamic_data' => true,
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Link Target', 'fusion-builder' ),
|
|
'description' => esc_attr__( '_self = open in same browser tab, _blank = open in new browser tab.', 'fusion-builder' ),
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'param_name' => 'target',
|
|
'default' => '_self',
|
|
'value' => [
|
|
'_self' => esc_attr__( '_self', 'fusion-builder' ),
|
|
'_blank' => esc_attr__( '_blank', 'fusion-builder' ),
|
|
'lightbox' => esc_attr__( 'Lightbox', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'link',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Link Description', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Add descriptive text to the link to make it easier accessible.', 'fusion-builder' ),
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'param_name' => 'link_description',
|
|
'value' => '',
|
|
'dynamic_data' => true,
|
|
'dependency' => [
|
|
[
|
|
'element' => 'link',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Ignore Equal Heights', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose to ignore equal heights on this column if you are using equal heights on the surrounding container.', 'fusion-builder' ),
|
|
'param_name' => 'min_height',
|
|
'default' => '',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'value' => [
|
|
'none' => esc_attr__( 'Yes', 'fusion-builder' ),
|
|
'' => esc_attr__( 'No', 'fusion-builder' ),
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_toggle_class',
|
|
'args' => [
|
|
'classes' => [
|
|
'none' => 'fusion-column-no-min-height',
|
|
'' => '',
|
|
],
|
|
],
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'checkbox_button_set',
|
|
'heading' => esc_attr__( 'Column Visibility', 'fusion-builder' ),
|
|
'param_name' => 'hide_on_mobile',
|
|
'value' => fusion_builder_visibility_options( 'full' ),
|
|
'default' => fusion_builder_default_visibility( 'array' ),
|
|
'description' => esc_attr__( 'Choose to show or hide the column on small, medium or large screens. You can choose more than one at a time.', 'fusion-builder' ),
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
],
|
|
'fusion_sticky_visibility_placeholder' => [],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'CSS Class', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Add a class to the wrapping HTML element.', 'fusion-builder' ),
|
|
'param_name' => 'class',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'callback' => [
|
|
'function' => 'fusion_add_class',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'CSS ID', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Add an ID to the wrapping HTML element.', 'fusion-builder' ),
|
|
'param_name' => 'id',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'General', 'fusion-builder' ),
|
|
'callback' => [
|
|
'function' => 'fusion_add_id',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'column_width',
|
|
'heading' => esc_attr__( 'Width', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Column width on respective display size. Enter values including any valid CSS unit, ex: 4%.', 'fusion-builder' ),
|
|
'param_name' => 'type',
|
|
'default' => '0',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Flex Grow', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Flex grow specifies how much of the remaining space in the container should be assigned to the column.', 'fusion-builder' ),
|
|
'param_name' => 'flex_grow',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Flex Shrink', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Flex shrink specifies how much the column may shrink within the container if not enough space is available.', 'fusion-builder' ),
|
|
'param_name' => 'flex_shrink',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'range',
|
|
'heading' => esc_attr__( 'Order', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Column order on respective display size.', 'fusion-builder' ),
|
|
'param_name' => 'order',
|
|
'value' => '0',
|
|
'min' => '0',
|
|
'max' => '50',
|
|
'step' => '1',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'responsive' => [
|
|
'state' => 'large', // Just an example, not needed if main state is excluded.
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
'exclude_main_state' => true,
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'dimension',
|
|
'remove_from_atts' => true,
|
|
'heading' => esc_attr__( 'Column Spacing', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Enter values including any valid CSS unit, ex: 4%. Leave empty to inherit from container or Global Option.', 'fusion-builder' ),
|
|
'param_name' => 'dimension_spacing',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'value' => [
|
|
'spacing_left' => '',
|
|
'spacing_right' => '',
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'fusion_builder_container',
|
|
'param' => 'type',
|
|
'value' => 'flex',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_column_margin',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'dimension',
|
|
'remove_from_atts' => true,
|
|
'heading' => esc_attr__( 'Margin', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Enter values including any valid CSS unit, ex: 4%.', 'fusion-builder' ),
|
|
'param_name' => 'dimension_margin',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'value' => [
|
|
'margin_top' => '',
|
|
'margin_bottom' => '',
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_column_margin',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'dimension',
|
|
'remove_from_atts' => true,
|
|
'heading' => esc_attr__( 'Padding', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Enter values including any valid CSS unit, ex: 4%.', 'fusion-builder' ),
|
|
'param_name' => 'padding',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'value' => [
|
|
'padding_top' => '',
|
|
'padding_right' => '',
|
|
'padding_bottom' => '',
|
|
'padding_left' => '',
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
'callback' => [
|
|
'function' => 'fusion_column_padding',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Hover Type', 'fusion-builder' ),
|
|
'description' => __( 'Select the hover effect type. <strong>IMPORTANT:</strong> For the effect to be noticeable, you\'ll need a background color/image, and/or a border enabled. This will disable links and hover effects on elements inside the column.', 'fusion-builder' ),
|
|
'param_name' => 'hover_type',
|
|
'default' => 'none',
|
|
'value' => [
|
|
'none' => esc_attr__( 'None', 'fusion-builder' ),
|
|
'zoomin' => esc_attr__( 'Zoom In', 'fusion-builder' ),
|
|
'zoomout' => esc_attr__( 'Zoom Out', 'fusion-builder' ),
|
|
'liftup' => esc_attr__( 'Lift Up', 'fusion-builder' ),
|
|
],
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'preview' => [
|
|
'selector' => '.fusion-column-inner-bg',
|
|
'type' => 'class',
|
|
'toggle' => 'hover',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'dimension',
|
|
'heading' => esc_attr__( 'Column Border Size', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Controls the border size of the column element.', 'fusion-builder' ),
|
|
'param_name' => 'border_sizes',
|
|
'value' => [
|
|
'border_sizes_top' => '',
|
|
'border_sizes_right' => '',
|
|
'border_sizes_bottom' => '',
|
|
'border_sizes_left' => '',
|
|
],
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
],
|
|
[
|
|
'type' => 'colorpickeralpha',
|
|
'heading' => esc_attr__( 'Column Border Color', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Controls the border color of the column element.', 'fusion-builder' ),
|
|
'param_name' => 'border_color',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'or' => true,
|
|
'dependency' => [
|
|
[
|
|
'element' => 'border_sizes_top',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'border_sizes_bottom',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'border_sizes_left',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'border_sizes_right',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'states' => [
|
|
'hover' => [
|
|
'label' => __( 'Hover', 'fusion-builder' ),
|
|
'preview' => [
|
|
'selector' => '.fusion-column-wrapper, .fusion-column-inner-bg',
|
|
'type' => 'class',
|
|
'toggle' => 'hover',
|
|
],
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Border Style', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Controls the border style.', 'fusion-builder' ),
|
|
'param_name' => 'border_style',
|
|
'default' => 'solid',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'or' => true,
|
|
'dependency' => [
|
|
[
|
|
'element' => 'border_sizes_top',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'border_sizes_bottom',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'border_sizes_left',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'border_sizes_right',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'value' => [
|
|
'solid' => esc_attr__( 'Solid', 'fusion-builder' ),
|
|
'dashed' => esc_attr__( 'Dashed', 'fusion-builder' ),
|
|
'dotted' => esc_attr__( 'Dotted', 'fusion-builder' ),
|
|
],
|
|
],
|
|
[
|
|
'type' => 'dimension',
|
|
'remove_from_atts' => true,
|
|
'heading' => esc_attr__( 'Border Radius', 'fusion-builder' ),
|
|
'description' => __( 'Enter values including any valid CSS unit, ex: 10px. <strong>IMPORTANT:</strong> In order to make border radius work in browsers, the overflow CSS rule of the column needs set to hidden. Thus, depending on the setup, some contents might get clipped.', 'fusion-builder' ),
|
|
'param_name' => 'border_radius',
|
|
'value' => [
|
|
'border_radius_top_left' => '',
|
|
'border_radius_top_right' => '',
|
|
'border_radius_bottom_right' => '',
|
|
'border_radius_bottom_left' => '',
|
|
],
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
],
|
|
'fusion_box_shadow_placeholder' => [
|
|
'callback' => [
|
|
'function' => 'fusion_update_box_shadow_vars',
|
|
'args' => [
|
|
'selector' => '.fusion-column-wrapper',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Z Index', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Value for the z-index CSS property of the column, can be both positive or negative.', 'fusion-builder' ),
|
|
'param_name' => 'z_index',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
'states' => [
|
|
'hover' => [
|
|
'label' => __( 'Hover', 'fusion-builder' ),
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Overflow', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Value for column\'s overflow CSS property.', 'fusion-builder' ),
|
|
'param_name' => 'overflow',
|
|
'value' => [
|
|
'' => esc_attr__( 'Default', 'fusion-builder' ),
|
|
'visible' => esc_attr__( 'Visible', 'fusion-builder' ),
|
|
'scroll' => esc_attr__( 'Scroll', 'fusion-builder' ),
|
|
'hidden' => esc_attr__( 'Hidden', 'fusion-builder' ),
|
|
'auto' => esc_attr__( 'Auto', 'fusion-builder' ),
|
|
],
|
|
'default' => '',
|
|
'group' => esc_attr__( 'Design', 'fusion-builder' ),
|
|
],
|
|
[
|
|
'type' => 'subgroup',
|
|
'heading' => esc_attr__( 'Background Type', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Use filters to see specific type of content.', 'fusion-builder' ),
|
|
'param_name' => 'background_type',
|
|
'default' => 'single',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'remove_from_atts' => true,
|
|
'value' => [
|
|
'single' => esc_attr__( 'Color', 'fusion-builder' ),
|
|
'gradient' => esc_attr__( 'Gradient', 'fusion-builder' ),
|
|
'image' => esc_attr__( 'Image', 'fusion-builder' ),
|
|
'slider' => esc_attr__( 'Slider', 'fusion-builder' ),
|
|
],
|
|
'icons' => [
|
|
'single' => '<span class="fusiona-fill-drip-solid" style="font-size:18px;"></span>',
|
|
'gradient' => '<span class="fusiona-gradient-fill" style="font-size:18px;"></span>',
|
|
'image' => '<span class="fusiona-image" style="font-size:18px;"></span>',
|
|
'slider' => '<span class="fusiona-images" style="font-size:18px;"></span>',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'colorpickeralpha',
|
|
'heading' => esc_attr__( 'Background Color', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Controls the background color.', 'fusion-builder' ),
|
|
'param_name' => 'background_color',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'single',
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
'states' => [
|
|
'hover' => [
|
|
'label' => __( 'Hover', 'fusion-builder' ),
|
|
'preview' => [
|
|
'selector' => '.fusion-column-wrapper, .fusion-column-inner-bg',
|
|
'type' => 'class',
|
|
'toggle' => 'hover',
|
|
],
|
|
],
|
|
],
|
|
],
|
|
'fusion_gradient_placeholder' => [
|
|
'selector' => '.fusion-column-wrapper',
|
|
],
|
|
[
|
|
'type' => 'upload',
|
|
'heading' => esc_attr__( 'Background Image', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Upload an image to display in the background.', 'fusion-builder' ),
|
|
'param_name' => 'background_image',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'dynamic_data' => true,
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Background Image ID', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Background Image ID from Media Library.', 'fusion-builder' ),
|
|
'param_name' => 'background_image_id',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'hidden' => true,
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Lazy Load', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Lazy load which is being used.', 'fusion-builder' ),
|
|
'param_name' => 'lazy_load',
|
|
'value' => [
|
|
'avada' => esc_attr__( 'Avada', 'fusion-builder' ),
|
|
'wordpress' => esc_attr__( 'WordPress', 'fusion-builder' ),
|
|
'none' => esc_attr__( 'None', 'fusion-builder' ),
|
|
],
|
|
'default' => $fusion_settings->get( 'lazy_load' ),
|
|
'hidden' => true,
|
|
'remove_from_atts' => true,
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Skip Lazy Loading', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Select whether you want to skip lazy loading on this image or not.', 'fusion-builder' ),
|
|
'param_name' => 'skip_lazy_load',
|
|
'default' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'value' => [
|
|
'skip' => esc_attr__( 'Yes', 'fusion-builder' ),
|
|
'' => esc_attr__( 'No', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'lazy_load',
|
|
'value' => 'avada',
|
|
'operator' => '==',
|
|
],
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Background Position', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose the position of the background image.', 'fusion-builder' ),
|
|
'param_name' => 'background_position',
|
|
'default' => 'left top',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'value' => [
|
|
'' => esc_attr__( 'Default', 'fusion-builder' ),
|
|
'left top' => esc_attr__( 'Left Top', 'fusion-builder' ),
|
|
'left center' => esc_attr__( 'Left Center', 'fusion-builder' ),
|
|
'left bottom' => esc_attr__( 'Left Bottom', 'fusion-builder' ),
|
|
'right top' => esc_attr__( 'Right Top', 'fusion-builder' ),
|
|
'right center' => esc_attr__( 'Right Center', 'fusion-builder' ),
|
|
'right bottom' => esc_attr__( 'Right Bottom', 'fusion-builder' ),
|
|
'center top' => esc_attr__( 'Center Top', 'fusion-builder' ),
|
|
'center center' => esc_attr__( 'Center Center', 'fusion-builder' ),
|
|
'center bottom' => esc_attr__( 'Center Bottom', 'fusion-builder' ),
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
'defaults' => [
|
|
'small' => '',
|
|
'medium' => '',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Background Repeat', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose how the background image repeats.', 'fusion-builder' ),
|
|
'param_name' => 'background_repeat',
|
|
'default' => 'no-repeat',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'value' => [
|
|
'' => esc_attr__( 'Default', 'fusion-builder' ),
|
|
'no-repeat' => esc_attr__( 'No Repeat', 'fusion-builder' ),
|
|
'repeat' => esc_attr__( 'Repeat Vertically and Horizontally', 'fusion-builder' ),
|
|
'repeat-x' => esc_attr__( 'Repeat Horizontally', 'fusion-builder' ),
|
|
'repeat-y' => esc_attr__( 'Repeat Vertically', 'fusion-builder' ),
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
'defaults' => [
|
|
'small' => '',
|
|
'medium' => '',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Background Size', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose the size of the background image or set a custom size.', 'fusion-builder' ),
|
|
'param_name' => 'background_size',
|
|
'value' => [
|
|
'' => esc_attr__( 'Default', 'fusion-builder' ),
|
|
'cover' => esc_attr__( 'Cover', 'fusion-builder' ),
|
|
'contain' => esc_attr__( 'Contain', 'fusion-builder' ),
|
|
'custom' => esc_attr__( 'Custom', 'fusion-builder' ),
|
|
],
|
|
'default' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
'defaults' => [
|
|
'small' => '',
|
|
'medium' => '',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Background Custom Size', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Set the custom size of the background image.', 'fusion-builder' ),
|
|
'param_name' => 'background_custom_size',
|
|
'default' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'device' => 'large',
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'background_size',
|
|
'value' => 'custom',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Background Custom Size', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Set the custom size of the background image.', 'fusion-builder' ),
|
|
'param_name' => 'background_custom_size_medium',
|
|
'default' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'device' => 'medium',
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'background_size_medium',
|
|
'value' => 'custom',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Background Custom Size', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Set the custom size of the background image.', 'fusion-builder' ),
|
|
'param_name' => 'background_custom_size_small',
|
|
'default' => '',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'device' => 'small',
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'background_size_small',
|
|
'value' => 'custom',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'select',
|
|
'heading' => esc_attr__( 'Background Blend Mode', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose how blending should work for each background layer.', 'fusion-builder' ),
|
|
'param_name' => 'background_blend_mode',
|
|
'value' => [
|
|
'' => esc_attr__( 'Default', 'fusion-builder' ),
|
|
'none' => esc_attr__( 'Disabled', 'fusion-builder' ),
|
|
'multiply' => esc_attr__( 'Multiply', 'fusion-builder' ),
|
|
'screen' => esc_attr__( 'Screen', 'fusion-builder' ),
|
|
'overlay' => esc_attr__( 'Overlay', 'fusion-builder' ),
|
|
'darken' => esc_attr__( 'Darken', 'fusion-builder' ),
|
|
'lighten' => esc_attr__( 'Lighten', 'fusion-builder' ),
|
|
'color-dodge' => esc_attr__( 'Color Dodge', 'fusion-builder' ),
|
|
'color-burn' => esc_attr__( 'Color Burn', 'fusion-builder' ),
|
|
'hard-light' => esc_attr__( 'Hard Light', 'fusion-builder' ),
|
|
'soft-light' => esc_attr__( 'Soft Light', 'fusion-builder' ),
|
|
'difference' => esc_attr__( 'Difference', 'fusion-builder' ),
|
|
'exclusion' => esc_attr__( 'Exclusion', 'fusion-builder' ),
|
|
'hue' => esc_attr__( 'Hue', 'fusion-builder' ),
|
|
'saturation' => esc_attr__( 'Saturation', 'fusion-builder' ),
|
|
'color' => esc_attr__( 'Color', 'fusion-builder' ),
|
|
'luminosity' => esc_attr__( 'Luminosity', 'fusion-builder' ),
|
|
],
|
|
'default' => 'none',
|
|
'group' => esc_attr__( 'Background', 'fusion-builder' ),
|
|
'subgroup' => [
|
|
'name' => 'background_type',
|
|
'tab' => 'image',
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'background_image',
|
|
'value' => '',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
'responsive' => [
|
|
'state' => 'large',
|
|
'additional_states' => [ 'medium', 'small' ],
|
|
'defaults' => [
|
|
'small' => '',
|
|
'medium' => '',
|
|
],
|
|
],
|
|
],
|
|
'fusion_background_slider_placeholder' => [],
|
|
'fusion_conditional_render_placeholder' => [],
|
|
'fusion_get_column_params' => [],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Position Sticky', 'fusion-builder' ),
|
|
'description' => __( 'Turn on to have the column stick inside its parent container on scroll. <strong>NOTE:</strong> this feature uses the browser native sticky positioning. Depending on the browser and specific setup the feature may not be available.', 'fusion-builder' ),
|
|
'param_name' => 'sticky',
|
|
'default' => 'off',
|
|
'group' => esc_attr__( 'Extras', 'fusion-builder' ),
|
|
'value' => [
|
|
'on' => esc_html__( 'On', 'fusion-builder' ),
|
|
'off' => esc_html__( 'Off', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'absolute',
|
|
'value' => 'on',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'checkbox_button_set',
|
|
'heading' => esc_attr__( 'Responsive Position Sticky', 'fusion-builder' ),
|
|
'param_name' => 'sticky_devices',
|
|
'value' => fusion_builder_visibility_options( 'full' ),
|
|
'default' => fusion_builder_default_visibility( 'array' ),
|
|
'group' => esc_attr__( 'Extras', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Choose at which screen sizes the container should be sticky.', 'fusion-builder' ),
|
|
'dependency' => [
|
|
[
|
|
'element' => 'sticky',
|
|
'value' => 'on',
|
|
'operator' => '==',
|
|
],
|
|
[
|
|
'element' => 'absolute',
|
|
'value' => 'on',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'textfield',
|
|
'heading' => esc_attr__( 'Sticky Column Offset', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Controls how far the top of the column is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector.', 'fusion-builder' ),
|
|
'param_name' => 'sticky_offset',
|
|
'value' => '',
|
|
'group' => esc_attr__( 'Extras', 'fusion-builder' ),
|
|
'dependency' => [
|
|
[
|
|
'element' => 'sticky',
|
|
'value' => 'on',
|
|
'operator' => '==',
|
|
],
|
|
[
|
|
'element' => 'absolute',
|
|
'value' => 'on',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'radio_button_set',
|
|
'heading' => esc_attr__( 'Position Absolute', 'fusion-builder' ),
|
|
'description' => __( 'Turn on to have the column in absolute position.', 'fusion-builder' ),
|
|
'param_name' => 'absolute',
|
|
'default' => 'off',
|
|
'group' => esc_attr__( 'Extras', 'fusion-builder' ),
|
|
'value' => [
|
|
'on' => esc_html__( 'On', 'fusion-builder' ),
|
|
'off' => esc_html__( 'Off', 'fusion-builder' ),
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'sticky',
|
|
'value' => 'on',
|
|
'operator' => '!=',
|
|
],
|
|
],
|
|
],
|
|
[
|
|
'type' => 'dimension',
|
|
'remove_from_atts' => true,
|
|
'heading' => esc_attr__( 'Absolute Offset', 'fusion-builder' ),
|
|
'description' => esc_attr__( 'Enter values including any valid CSS unit, ex: 4%.', 'fusion-builder' ),
|
|
'param_name' => 'absolute_props',
|
|
'group' => esc_attr__( 'Extras', 'fusion-builder' ),
|
|
'value' => [
|
|
'absolute_top' => '',
|
|
'absolute_right' => '',
|
|
'absolute_bottom' => '',
|
|
'absolute_left' => '',
|
|
],
|
|
'dependency' => [
|
|
[
|
|
'element' => 'sticky',
|
|
'value' => 'on',
|
|
'operator' => '!=',
|
|
],
|
|
[
|
|
'element' => 'absolute',
|
|
'value' => 'on',
|
|
'operator' => '==',
|
|
],
|
|
],
|
|
],
|
|
'fusion_filter_placeholder' => [
|
|
'selector_base' => 'fusion-builder-column-live-',
|
|
'parent_hover' => 'true',
|
|
],
|
|
'fusion_transform_placeholder' => [
|
|
'selector_base' => 'fusion-builder-column-live-',
|
|
],
|
|
'fusion_transition_placeholder' => [
|
|
'selector_base' => 'fusion-builder-column-live-',
|
|
],
|
|
'fusion_motion_effects_placeholder' => [],
|
|
'fusion_animation_placeholder' => [
|
|
'preview_selector' => '$el',
|
|
],
|
|
];
|
|
}
|
|
}
|
|
}
|