require_once 'helpers/Slider.php';
class ET_Builder_Module_Fullwidth_Slider extends ET_Builder_Module {
$this->name = esc_html__( 'Fullwidth Slider', 'et_builder' );
$this->plural = esc_html__( 'Fullwidth Sliders', 'et_builder' );
$this->slug = 'et_pb_fullwidth_slider';
$this->vb_support = 'on';
$this->child_slug = 'et_pb_slide';
$this->child_item_text = et_builder_i18n( 'Slide' );
$this->main_css_element = '%%order_class%%.et_pb_slider';
$this->settings_modal_toggles = array(
'elements' => et_builder_i18n( 'Elements' ),
'overlay' => et_builder_i18n( 'Overlay' ),
'navigation' => esc_html__( 'Navigation', 'et_builder' ),
'image' => et_builder_i18n( 'Image' ),
'layout' => et_builder_i18n( 'Layout' ),
'title' => esc_html__( 'Animation', 'et_builder' ),
$this->advanced_fields = array(
'label' => et_builder_i18n( 'Title' ),
'main' => "{$this->main_css_element} .et_pb_slide_description .et_pb_slide_title",
'limited_main' => "{$this->main_css_element} .et_pb_slide_description .et_pb_slide_title, {$this->main_css_element} .et_pb_slide_description .et_pb_slide_title a",
'label' => et_builder_i18n( 'Body' ),
'main' => "{$this->main_css_element}.et_pb_module .et_pb_slides .et_pb_slide_content",
'line_height' => "{$this->main_css_element} p",
'important' => array( 'size', 'font-size' ),
'block_elements' => array(
'tabbed_subtoggles' => true,
'bb_icons_support' => true,
'border_radii' => '%%order_class%% .et_pb_slide_image img',
'border_styles' => '%%order_class%% .et_pb_slide_image img',
'label_prefix' => et_builder_i18n( 'Image' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'depends_show_if' => 'off',
'border_radii' => 'on||||',
'border_styles' => array(
'label' => esc_html__( 'Image Box Shadow', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'main' => '%%order_class%% .et_pb_slide_image img',
'default_on_fronts' => array(
'label' => et_builder_i18n( 'Button' ),
'main' => "{$this->main_css_element} .et_pb_more_button.et_pb_button",
'linited_main' => "{$this->main_css_element} .et_pb_more_button.et_pb_button",
'alignment' => "{$this->main_css_element} .et_pb_button_wrapper",
'main' => '%%order_class%% .et_pb_button',
'margin_padding' => array(
'use_background_color' => 'fields_only',
'use_background_color_gradient' => 'fields_only',
'use_background_image' => 'fields_only',
'parallax_method' => array(
'background_position' => array(),
'background_size' => array(),
'margin_padding' => array(
'main' => '%%order_class%%',
'padding' => '%%order_class%% .et_pb_slide_description, .et_pb_slider_fullwidth_off%%order_class%% .et_pb_slide_description',
'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling
'text_orientation' => '%%order_class%% .et_pb_slide .et_pb_slide_description',
'text_shadow' => '%%order_class%% .et_pb_slide .et_pb_slide_description',
'text_orientation' => array(
'main' => '%%order_class%%, %%order_class%% .et_pb_slide',
'%%order_class%% .et_pb_slide_image',
'%%order_class%% .et_pb_section_video_bg',
'use_module_alignment' => false,
'main' => '%%order_class%% .et_pb_slide > .et_pb_container',
'label' => esc_html__( 'Content Width', 'et_builder' ),
'label' => esc_html__( 'Content Max Width', 'et_builder' ),
$this->custom_css_fields = array(
'slide_description' => array(
'label' => esc_html__( 'Slide Description', 'et_builder' ),
'selector' => '.et_pb_slide_description',
'label' => esc_html__( 'Slide Title', 'et_builder' ),
'selector' => '.et_pb_slide_description .et_pb_slide_title',
'label' => esc_html__( 'Slide Button', 'et_builder' ),
'selector' => '.et_pb_slider .et_pb_slide .et_pb_slide_description a.et_pb_more_button.et_pb_button',
'no_space_before_selector' => true,
'slide_controllers' => array(
'label' => esc_html__( 'Slide Controllers', 'et_builder' ),
'selector' => '.et-pb-controllers',
'slide_active_controller' => array(
'label' => esc_html__( 'Slide Active Controller', 'et_builder' ),
'selector' => '.et-pb-controllers .et-pb-active-control',
'label' => esc_html__( 'Slide Image', 'et_builder' ),
'selector' => '.et_pb_slide_image',
'label' => esc_html__( 'Slide Arrows', 'et_builder' ),
'selector' => '.et-pb-slider-arrows a',
$this->help_videos = array(
'name' => esc_html__( 'An introduction to the Fullwidth Slider module', 'et_builder' ),
'label' => esc_html__( 'Show Arrows', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'This setting allows you to turn the navigation arrows on or off.', 'et_builder' ),
'mobile_options' => true,
'show_pagination' => array(
'label' => esc_html__( 'Show Controls', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'toggle_slug' => 'elements',
'description' => esc_html__( 'Disabling this option will remove the circle button at the bottom of the slider.', 'et_builder' ),
'mobile_options' => true,
'show_content_on_mobile' => array(
'label' => esc_html__( 'Show Content On Mobile', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'tab_slug' => 'custom_css',
'toggle_slug' => 'visibility',
'show_cta_on_mobile' => array(
'label' => esc_html__( 'Show CTA On Mobile', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'default_on_front' => 'on',
'tab_slug' => 'custom_css',
'toggle_slug' => 'visibility',
'show_image_video_mobile' => array(
'label' => esc_html__( 'Show Image / Video On Mobile', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'layout',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
'default_on_front' => 'off',
'tab_slug' => 'custom_css',
'toggle_slug' => 'visibility',
'use_bg_overlay' => array(
'label' => esc_html__( 'Use Background Overlay', 'et_builder' ),
'description' => esc_html__( 'When enabled, a custom overlay color will be added above your background image and behind your slider content.', 'et_builder' ),
'type' => 'yes_no_button',
'off' => et_builder_i18n( 'No' ),
// Uses cached uppercase translation but keeps the lowercase not change definition content.
'on' => strtolower( et_builder_i18n( 'Yes' ) ),
'default_on_front' => '',
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'option_category' => 'configuration',
'bg_overlay_color' => array(
'label' => esc_html__( 'Background Overlay Color', 'et_builder' ),
'description' => esc_html__( 'Use the color picker to choose a color for the background overlay.', 'et_builder' ),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'option_category' => 'configuration',
'mobile_options' => true,
'use_text_overlay' => array(
'label' => esc_html__( 'Use Text Overlay', 'et_builder' ),
'description' => esc_html__( 'When enabled, a background color is added behind the slider text to make it more readable atop background images.', 'et_builder' ),
'type' => 'yes_no_button',
'off' => et_builder_i18n( 'No' ),
// Uses cached uppercase translation but keeps the lowercase not change definition content.
'on' => strtolower( et_builder_i18n( 'Yes' ) ),
'default_on_front' => '',
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'option_category' => 'configuration',
'text_overlay_color' => array(
'label' => esc_html__( 'Text Overlay Color', 'et_builder' ),
'description' => esc_html__( 'Use the color picker to choose a color for the text overlay.', 'et_builder' ),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'option_category' => 'configuration',
'mobile_options' => true,
'text_border_radius' => array(
'label' => esc_html__( 'Text Overlay Border Radius', 'et_builder' ),
'description' => esc_html__( 'Increasing the border radius will increase the roundness of the overlay corners. Setting this value to 0 will result in squared corners.', 'et_builder' ),
'option_category' => 'layout',
'default_on_front' => '',
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
'range_settings' => array(
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => 'overlay',
'mobile_options' => true,
'arrows_custom_color' => array(
'label' => esc_html__( 'Arrow Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to use for the slider arrows that are used to navigate through each slide.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'navigation',
'mobile_options' => true,
'dot_nav_custom_color' => array(
'label' => esc_html__( 'Dot Navigation Color', 'et_builder' ),
'description' => esc_html__( 'Pick a color to use for the dot navigation that appears at the bottom of the slider to designate which slide is active.', 'et_builder' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'navigation',
'mobile_options' => true,
function before_render() {
global $et_pb_slider_has_video, $et_pb_slider_parallax, $et_pb_slider_parallax_method, $et_pb_slider_show_mobile, $et_pb_slider_custom_icon, $et_pb_slider_custom_icon_tablet, $et_pb_slider_custom_icon_phone, $et_pb_slider_item_num, $et_pb_slider_button_rel;
global $et_pb_slider_parent_type;
$et_pb_slider_parent_type = $this->slug;
$et_pb_slider_item_num = 0;
$sticky = et_pb_sticky_options();
$parallax = $this->props['parallax'];
$parallax_method = $this->props['parallax_method'];
$show_content_on_mobile = $this->props['show_content_on_mobile'];
$show_cta_on_mobile = $this->props['show_cta_on_mobile'];
$button_rel = $this->props['button_rel'];
$button_custom = $this->props['custom_button'];
$custom_icon_values = et_pb_responsive_options()->get_property_values( $this->props, 'button_icon' );
$custom_icon = isset( $custom_icon_values['desktop'] ) ? $custom_icon_values['desktop'] : '';
$custom_icon_tablet = isset( $custom_icon_values['tablet'] ) ? $custom_icon_values['tablet'] : '';
$custom_icon_phone = isset( $custom_icon_values['phone'] ) ? $custom_icon_values['phone'] : '';
$et_pb_slider_has_video = false;
$et_pb_slider_parallax = $parallax;
$et_pb_slider_parallax_method = $parallax_method;
$et_pb_slider_show_mobile = array(
'show_content_on_mobile' => $show_content_on_mobile,
'show_cta_on_mobile' => $show_cta_on_mobile,
$et_pb_slider_custom_icon = 'on' === $button_custom ? $custom_icon : '';
$et_pb_slider_custom_icon_tablet = 'on' === $button_custom ? $custom_icon_tablet : '';
$et_pb_slider_custom_icon_phone = 'on' === $button_custom ? $custom_icon_phone : '';
$et_pb_slider_button_rel = $button_rel;
$bg_overlay_color = $this->props['bg_overlay_color'];
$bg_overlay_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'bg_overlay_color' );
$bg_overlay_color_tablet = isset( $bg_overlay_color_values['tablet'] ) ? $bg_overlay_color_values['tablet'] : '';
$bg_overlay_color_phone = isset( $bg_overlay_color_values['phone'] ) ? $bg_overlay_color_values['phone'] : '';
$text_overlay_color = $this->props['text_overlay_color'];
$text_overlay_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'text_overlay_color' );
$text_overlay_color_tablet = isset( $text_overlay_color_values['tablet'] ) ? $text_overlay_color_values['tablet'] : '';
$text_overlay_color_phone = isset( $text_overlay_color_values['phone'] ) ? $text_overlay_color_values['phone'] : '';
$text_border_radius = $this->props['text_border_radius'];
$text_border_radius_values = et_pb_responsive_options()->get_property_values( $this->props, 'text_border_radius' );
$text_border_radius_tablet = isset( $text_border_radius_values['tablet'] ) ? $text_border_radius_values['tablet'] : '';
$text_border_radius_phone = isset( $text_border_radius_values['phone'] ) ? $text_border_radius_values['phone'] : '';
$arrows_custom_color = $this->props['arrows_custom_color'];
$arrows_custom_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'arrows_custom_color' );
$arrows_custom_color_tablet = isset( $arrows_custom_color_values['tablet'] ) ? $arrows_custom_color_values['tablet'] : '';
$arrows_custom_color_phone = isset( $arrows_custom_color_values['phone'] ) ? $arrows_custom_color_values['phone'] : '';
$dot_nav_custom_color = $this->props['dot_nav_custom_color'];
$dot_nav_custom_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'dot_nav_custom_color' );
$dot_nav_custom_color_tablet = isset( $dot_nav_custom_color_values['tablet'] ) ? $dot_nav_custom_color_values['tablet'] : '';
$dot_nav_custom_color_phone = isset( $dot_nav_custom_color_values['phone'] ) ? $dot_nav_custom_color_values['phone'] : '';
// Pass Fullwidth Slider Module settings to Slide Item
'background_last_edited' => $this->props['background_last_edited'],
'background__hover_enabled' => isset( $this->props['background__hover_enabled'] ) ? $this->props['background__hover_enabled'] : '',
'background_enable_color' => $this->props['background_enable_color'],
'background_enable_color_tablet' => $this->props['background_enable_color_tablet'],
'background_enable_color_phone' => $this->props['background_enable_color_phone'],
'background_enable_color__hover' => isset( $this->props['background_enable_color__hover'] ) ? $this->props['background_enable_color__hover'] : '',
'background_color' => $this->props['background_color'],
'background_color_tablet' => $this->props['background_color_tablet'],
'background_color_phone' => $this->props['background_color_phone'],
'background_color__hover' => isset( $this->props['background_color__hover'] ) ? $this->props['background_color__hover'] : '',
'use_background_color_gradient' => $this->props['use_background_color_gradient'],
'use_background_color_gradient_tablet' => $this->props['use_background_color_gradient_tablet'],
'use_background_color_gradient_phone' => $this->props['use_background_color_gradient_phone'],
'use_background_color_gradient__hover' => isset( $this->props['use_background_color_gradient__hover'] ) ? $this->props['use_background_color_gradient__hover'] : '',