'https://diviextended.com/product/all-in-one-carousel-for-divi',
'author' => 'Elicus',
'author_uri' => 'http://elicus.com',
);
public function init() {
$this->name = esc_html__( 'Timeline Carousel Item', 'all-in-one-carousel-for-divi' );
$this->advanced_setting_title_text = esc_html__( 'Timeline', 'all-in-one-carousel-for-divi' );
$this->child_title_var = 'title';
$this->main_css_element = '.aioc_timeline_carousel %%order_class%%';
if ( is_archive() ) {
$this->main_css_element = '%%order_class%%';
}
add_filter( 'et_builder_processed_range_value', array( $this, 'aioc_builder_processed_range_value' ), 10, 3 );
}
public function get_settings_modal_toggles() {
return array(
'general' => array(
'toggles' => array(
'main_content' => array(
'title' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
),
'label_setting' => array(
'title' => esc_html__( 'Label', 'all-in-one-carousel-for-divi' ),
),
'switch_setting' => array(
'title' => esc_html__( 'Switch', 'all-in-one-carousel-for-divi' ),
),
'button' => array(
'title' => esc_html__( 'Button', 'all-in-one-carousel-for-divi' ),
),
),
),
'advanced' => array(
'toggles' => array(
'text_settings' => array(
'title' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
'sub_toggles' => array(
'title' => array(
'name' => 'Title',
),
'subtitle' => array(
'name' => 'Subtitle',
),
'content' => array(
'name' => 'Content',
),
),
'tabbed_subtoggles' => true,
),
'label_styling' => array(
'title' => esc_html__( ' Label', 'all-in-one-carousel-for-divi' ),
),
'switch_styling' => array(
'title' => esc_html__( 'Switch', 'all-in-one-carousel-for-divi' ),
),
'image' => array(
'title' => esc_html__( 'Image', 'all-in-one-carousel-for-divi' ),
),
'button' => array(
'title' => esc_html__( 'Button', 'all-in-one-carousel-for-divi' ),
),
),
),
);
}
public function get_advanced_fields_config() {
return array(
'fonts' => array(
'title' => array(
'label' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default_on_front' => '1.2em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default_on_front' => '',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'header_level' => array(
'default' => 'h4',
),
'css' => array(
'main' => "{$this->main_css_element} .aioc_slide_title",
'important' => 'all',
),
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'text_settings',
'sub_toggle' => 'title',
),
'subtitle' => array(
'label' => esc_html__( 'Subtitle', 'all-in-one-carousel-for-divi' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default_on_front' => '1.2em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default_on_front' => '',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'header_level' => array(
'default' => 'h5',
),
'css' => array(
'main' => "{$this->main_css_element} .aioc_slide_subtitle",
'important' => 'all',
),
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'text_settings',
'sub_toggle' => 'subtitle',
),
'content' => array(
'label' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
'font_size' => array(
'default' => '14px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default' => '1.5em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default' => '',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'css' => array(
'main' => "{$this->main_css_element} .aioc_slide_content",
'important' => 'all',
),
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'text_settings',
'sub_toggle' => 'content',
),
'switch_text' => array(
'label' => esc_html__( 'Switch Text', 'all-in-one-carousel-for-divi' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default_on_front' => '1.2em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default_on_front' => '',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'css' => array(
'main' => "{$this->main_css_element} .aioc_slide_switch_text",
'important' => 'all',
),
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'switch_styling',
),
'label' => array(
'label' => esc_html__( 'Label', 'all-in-one-carousel-for-divi' ),
'font_size' => array(
'default' => '16px',
'range_settings' => array(
'min' => '1',
'max' => '100',
'step' => '1',
),
'validate_unit' => true,
),
'line_height' => array(
'default_on_front' => '1.2em',
'range_settings' => array(
'min' => '0.1',
'max' => '10',
'step' => '0.1',
),
),
'letter_spacing' => array(
'default_on_front' => '',
'range_settings' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
'validate_unit' => true,
),
'css' => array(
'main' => "{$this->main_css_element} .aioc_slide_label",
'important' => 'all',
),
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'label_styling',
),
),
'margin_padding' => array(
'css' => array(
'main' => '%%order_class%% .aioc_slide_inner_wrapper',
'important' => 'all',
),
),
'slide_content_margin_padding' => array(
'button_wrapper' => array(
'margin_padding' => array(
'css' => array(
'margin' => '%%order_class%% .et_pb_button_wrapper',
'padding' => false,
'important' => 'all',
),
),
),
'content' => array(
'margin_padding' => array(
'css' => array(
'margin' => '%%order_class%% .aioc_slide_inner_content_wrapper',
'padding' => '%%order_class%% .aioc_slide_inner_content_wrapper',
'important' => 'all',
),
),
),
'label' => array(
'margin_padding' => array(
'css' => array(
'margin' => false,
'padding' => '.aioc_timeline_carousel %%order_class%% .aioc_slide_label_wrapper',
'important' => 'all',
),
),
),
),
'button' => array(
'button' => array(
'label' => esc_html__( 'Button', 'all-in-one-carousel-for-divi' ),
'css' => array(
'main' => "{$this->main_css_element} .aioc_timeline_carousel_button",
'alignment' => false,
'important' => 'all',
),
'margin_padding' => array(
'css' => array(
'margin' => "{$this->main_css_element} .aioc_timeline_carousel_button",
'padding' => "{$this->main_css_element} .aioc_timeline_carousel_button",
'important' => 'all',
),
),
'border_width' => array(
'default' => '2px',
),
'box_shadow' => false,
'depends_on' => array( 'show_button' ),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => 'button',
),
),
'max_width' => array(
'default' => array(
'css' => array(
'main' => '%%order_class%%',
'module_alignment' => '%%order_class%%',
),
),
),
'height' => array(
'css' => array(
'main' => '%%order_class%%',
'important' => 'all',
),
),
'borders' => array(
'image' => array(
'css' => array(
'main' => array(
'border_radii' => '.aioc_timeline_carousel %%order_class%% .aioc_slide_image',
'border_styles' => '.aioc_timeline_carousel %%order_class%% .aioc_slide_image',
'important' => 'all',
),
),
'label_prefix' => esc_html__( 'Image', 'all-in-one-carousel-for-divi' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
),
'switch' => array(
'css' => array(
'main' => array(
'border_styles' => '%%order_class%% .aioc_slide_switch_wrapper',
'border_radii' => '%%order_class%% .aioc_slide_switch_wrapper',
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'switch_styling',
),
'label' => array(
'css' => array(
'main' => array(
'border_styles' => '%%order_class%% .aioc_slide_label_wrapper',
'border_radii' => '%%order_class%% .aioc_slide_label_wrapper',
),
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'label',
),
'default' => array(
'css' => array(
'main' => array(
'border_styles' => '%%order_class%% .aioc_slide_inner_wrapper',
'border_radii' => '%%order_class%% .aioc_slide_inner_wrapper',
),
'important' => 'all',
),
),
),
'box_shadow' => array(
'label' => array(
'css' => array(
'main' => "%%order_class%% .aioc_slide_label",
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'label',
),
'default' => array(
'css' => array(
'main' => '%%order_class%% .aioc_slide_inner_wrapper',
),
),
),
'background' => array(
'css' => array(
'main' => '%%order_class%% .aioc_slide_inner_wrapper',
'important' => 'all',
),
),
'text' => false,
'filters' => false,
'text_shadow' => false,
);
}
public function get_fields() {
return array(
'title' => array(
'label' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can input the text to be used for the title.', 'all-in-one-carousel-for-divi' ),
),
'subtitle' => array(
'label' => esc_html__( 'Subtitle', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can input the text to be used for the subtitle.', 'all-in-one-carousel-for-divi' ),
),
'content' => array(
'label' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can input the text to be used for the content.', 'all-in-one-carousel-for-divi' ),
),
'content_length' => array(
'label' => esc_html__( 'Content Length', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'configuration',
'default' => '250',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can define content length in characters, if 0 no content will be shown.', 'all-in-one-carousel-for-divi' ),
),
'image' => array(
'label' => esc_html__( 'Image', 'all-in-one-carousel-for-divi' ),
'type' => 'upload',
'option_category' => 'basic_option',
'upload_button_text' => esc_attr__( 'Upload an image', 'all-in-one-carousel-for-divi' ),
'choose_text' => esc_attr__( 'Choose an Image', 'all-in-one-carousel-for-divi' ),
'update_text' => esc_attr__( 'Set As Image', 'all-in-one-carousel-for-divi' ),
'dynamic_content' => 'image',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Upload an image to display.', 'all-in-one-carousel-for-divi' ),
),
'image_alt' => array(
'label' => esc_html__( 'Image Alt Text', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'tab_slug' => 'general',
'toggle_slug' => 'main_content',
'description' => esc_html__( 'Here you can input the text to be used for the image as HTML ALT text.', 'all-in-one-carousel-for-divi' ),
),
'label_type' => array(
'label' => esc_html__( 'Label Type', 'all-in-one-carousel-for-divi' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'text' => esc_html__( 'Text', 'all-in-one-carousel-for-divi' ),
'icon' => esc_html__( 'Icon', 'all-in-one-carousel-for-divi' ),
),
'default' => 'text',
'default_on_front' => 'text',
'tab_slug' => 'general',
'toggle_slug' => 'label_setting',
'description' => esc_html__( 'Here you can select the label type.', 'all-in-one-carousel-for-divi' ),
),
'label_text' => array(
'label' => esc_html__( 'Label', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'show_if' => array(
'label_type' => 'text',
),
'tab_slug' => 'general',
'toggle_slug' => 'label_setting',
'description' => esc_html__( 'Here you can input the text to be used for the label.', 'all-in-one-carousel-for-divi' ),
),
'label_icon' => array(
'label' => esc_html__( 'Icon', 'all-in-one-carousel-for-divi' ),
'type' => 'select_icon',
'option_category' => 'basic_option',
'class' => array(
'et-pb-font-icon'
),
'show_if' => array(
'label_type' => 'icon',
),
'default' => ET_BUILDER_PRODUCT_VERSION < '4.13.0' ? '%%59%%' : '\||divi||400',
'tab_slug' => 'general',
'toggle_slug' => 'label_setting',
'description' => esc_html__( 'Choose an icon to display.', 'all-in-one-carousel-for-divi' ),
),
'switch_type' => array(
'label' => esc_html__( 'Switch Type', 'all-in-one-carousel-for-divi' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'icon' => esc_html__( 'Icon', 'all-in-one-carousel-for-divi' ),
'text' => esc_html__( 'Text', 'all-in-one-carousel-for-divi' ),
),
'default' => 'icon',
'default_on_front' => 'icon',
'tab_slug' => 'general',
'toggle_slug' => 'switch_setting',
'description' => esc_html__( 'Here you can select the switch type.', 'all-in-one-carousel-for-divi' ),
),
'icon' => array(
'label' => esc_html__( 'Icon', 'all-in-one-carousel-for-divi' ),
'type' => 'select_icon',
'option_category' => 'basic_option',
'class' => array(
'et-pb-font-icon'
),
'show_if' => array(
'switch_type' => 'icon',
),
'default' => ET_BUILDER_PRODUCT_VERSION < '4.13.0' ? '%%59%%' : '\||divi||400',
'tab_slug' => 'general',
'toggle_slug' => 'switch_setting',
'description' => esc_html__( 'Choose an icon to display.', 'all-in-one-carousel-for-divi' ),
),
'switch_text' => array(
'label' => esc_html__( 'Text', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'show_if' => array(
'switch_type' => 'text',
),
'tab_slug' => 'general',
'toggle_slug' => 'switch_setting',
'description' => esc_html__( 'Here you can input the text to be used inside switch.', 'all-in-one-carousel-for-divi' ),
),
'switch_background_color' => array(
'label' => esc_html__( 'Switch Background', 'all-in-one-carousel-for-divi' ),
'type' => 'color-alpha',
'custom_color' => true,
'default' => '',
'default_on_front' => '',
'hover' => 'tabs',
'tab_slug' => 'advanced',
'toggle_slug' => 'switch_styling',
'description' => esc_html__( 'Here you can choose a custom color to be used for background of switch.', 'all-in-one-carousel-for-divi' ),
),
'icon_font_size' => array(
'label' => esc_html__( 'Icon Font Size', 'all-in-one-carousel-for-divi' ),
'type' => 'range',
'option_category' => 'font_option',
'range_settings' => array(
'min' => '1',
'max' => '120',
'step' => '1',
),
'show_if' => array(
'switch_type' => 'icon',
),
'mobile_options' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'switch_styling',
'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'all-in-one-carousel-for-divi' ),
),
'icon_color' => array(
'label' => esc_html__( 'Icon Color', 'all-in-one-carousel-for-divi' ),
'type' => 'color-alpha',
'hover' => 'tabs',
'mobile_options' => true,
'show_if' => array(
'switch_type' => 'icon',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'switch_styling',
'description' => esc_html__( 'Here you can define a custom color for your icon.', 'all-in-one-carousel-for-divi' ),
),
'label_icon_color' => array(
'label' => esc_html__( 'Label Icon Color', 'all-in-one-carousel-for-divi' ),
'type' => 'color-alpha',
'hover' => 'tabs',
'mobile_options' => true,
'show_if' => array(
'label_type' => 'icon',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'label_styling',
'description' => esc_html__( 'Here you can define a custom color for your label icon.', 'all-in-one-carousel-for-divi' ),
),
'label_icon_font_size' => array(
'label' => esc_html__( 'Label Icon Font Size', 'all-in-one-carousel-for-divi' ),
'type' => 'range',
'option_category' => 'font_option',
'range_settings' => array(
'min' => '1',
'max' => '120',
'step' => '1',
),
'show_if' => array(
'label_type' => 'icon',
),
'mobile_options' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'label_styling',
'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'all-in-one-carousel-for-divi' ),
),
'label_align' => array(
'label' => esc_html__( 'Label Alignment', 'all-in-one-carousel-for-divi' ),
'type' => 'text_align',
'option_category' => 'layout',
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
'default_on_front' => 'center',
'tab_slug' => 'advanced',
'toggle_slug' => 'label_styling',
'description' => esc_html__( 'Here you can choose the label alignment.', 'all-in-one-carousel-for-divi' ),
'options_icon' => 'module_align',
),
'label_background_color' => array(
'label' => esc_html__( 'Label Background', 'all-in-one-carousel-for-divi' ),
'type' => 'color-alpha',
'custom_color' => true,
'hover' => 'tabs',
'tab_slug' => 'advanced',
'toggle_slug' => 'label_styling',
'description' => esc_html__( 'Here you can choose a custom color to be used for background of label.', 'all-in-one-carousel-for-divi' ),
),
'label_custom_padding' => array(
'label' => esc_html__( 'Label Padding', 'all-in-one-carousel-for-divi' ),
'type' => 'custom_padding',
'option_category' => 'layout',
'mobile_options' => true,
'hover' => false,
'default' => '||||true|true',
'default_on_front' => '||||true|true',
'tab_slug' => 'advanced',
'toggle_slug' => 'label_styling',
'description' => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
),
'show_button' => array(
'label' => esc_html__( 'Show Button', 'all-in-one-carousel-for-divi' ),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'options' => array(
'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ),
'on' => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ),
),
'affects' => array(
'custom_button',
),
'default' => 'off',
'tab_slug' => 'general',
'toggle_slug' => 'button',
'description' => esc_html__( 'Here you can choose whether or not display button.', 'all-in-one-carousel-for-divi' ),
),
'button_text' => array(
'label' => esc_html__( 'Button Text', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'show_if' => array(
'show_button' => 'on',
),
'default' => esc_html__( 'Read More', 'all-in-one-carousel-for-divi' ),
'default_on_front' => esc_html__( 'Read More', 'all-in-one-carousel-for-divi' ),
'tab_slug' => 'general',
'toggle_slug' => 'button',
'description' => esc_html__( 'Here you can input the text to be used for the Button.', 'all-in-one-carousel-for-divi' ),
),
'button_url' => array(
'label' => esc_html__( 'Url', 'all-in-one-carousel-for-divi' ),
'type' => 'text',
'option_category' => 'basic_option',
'default' => '#',
'default_on_front' => '#',
'show_if' => array(
'show_button' => 'on',
),
'dynamic_content' => 'url',
'tab_slug' => 'general',
'toggle_slug' => 'button',
'description' => esc_html__( 'Here you can input the URL that you want to open when the user clicks on the button.', 'all-in-one-carousel-for-divi' ),
),
'button_url_new_window' => array(
'label' => esc_html__( 'Link Target', 'all-in-one-carousel-for-divi' ),
'type' => 'select',
'option_category' => 'configuration',
'options' => array(
'off' => esc_html__( 'In The Same Window', 'all-in-one-carousel-for-divi' ),
'on' => esc_html__( 'In The New Tab', 'all-in-one-carousel-for-divi' ),
),
'default' => 'off',
'default_on_front' => 'off',
'show_if' => array(
'show_button' => 'on',
),
'tab_slug' => 'general',
'toggle_slug' => 'button',
'description' => esc_html__( 'Here you can choose whether or not the link opens in a new window.', 'all-in-one-carousel-for-divi' ),
),
'button_wrapper_custom_margin' => array(
'label' => esc_html__( 'Button Wrapper Margin', 'all-in-one-carousel-for-divi' ),
'type' => 'custom_padding',
'option_category' => 'layout',
'mobile_options' => true,
'hover' => false,
'option_category' => 'basic_option',
'show_if' => array(
'show_button' => 'on',
),
'default' => '20px||||true|true',
'default_on_front' => '20px||||true|true',
'tab_slug' => 'advanced',
'toggle_slug' => 'margin_padding',
'description' => esc_html__( 'Margin adds extra space to the outside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
),
'content_custom_padding' => array(
'label' => esc_html__( 'Content Padding', 'all-in-one-carousel-for-divi' ),
'type' => 'custom_padding',
'option_category' => 'layout',
'mobile_options' => true,
'hover' => false,
'default' => '||||true|true',
'default_on_front' => '||||true|true',
'tab_slug' => 'advanced',
'toggle_slug' => 'margin_padding',
'description' => esc_html__( 'Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
),
'content_custom_margin' => array(
'label' => esc_html__( 'Content Margin', 'all-in-one-carousel-for-divi' ),
'type' => 'custom_padding',
'option_category' => 'layout',
'mobile_options' => true,
'hover' => false,
'default' => '||||true|true',
'default_on_front' => '||||true|true',
'tab_slug' => 'advanced',
'toggle_slug' => 'margin_padding',
'description' => esc_html__( 'Margin adds extra space to the outside of the element, increasing the distance between the edge of the element and its inner contents.', 'all-in-one-carousel-for-divi' ),
),
);
}
public function render( $attrs, $content, $render_slug ) {
global $aioc_cc_parent_icon_font_size, $slide_effect, $aioc_tc_disable_lazyload;
$multi_view = et_pb_multi_view_options( $this );
$switch_type = $this->props['switch_type'];
$label_type = $this->props['label_type'];
$switch_background_color = $this->props['switch_background_color'];
$label_background_color = $this->props['label_background_color'];
$button_text = sprintf( esc_html__( '%s', 'all-in-one-carousel-for-divi' ), $this->props['button_text'] );
$button_url_new_window = $this->props['button_url_new_window'];
$image_alt = sprintf( esc_html__( '%s', 'all-in-one-carousel-for-divi' ), $this->props['image_alt'] );
$slide_border_radius = '' !== $this->props['border_radii'] ? explode( '|', $this->props['border_radii'] ) : '';
$title_level = $this->props['title_level'];
$subtitle_level = $this->props['subtitle_level'];
$processed_title_level = et_pb_process_header_level( $title_level, 'h4' );
$processed_subtitle_level = et_pb_process_header_level( $subtitle_level, 'h5' );
$processed_title_level = esc_html( $processed_title_level );
$processed_subtitle_level = esc_html( $processed_subtitle_level );
$content_length = '' !== intval( $this->props['content_length'] ) ? intval( $this->props['content_length'] ) : 250;
$icon_classes = implode( ' ', array(
'aioc_timeline_carousel_icon',
'et-pb-icon',
) );
$image_classes = 'aioc_slide_image';
if ( 'on' === $aioc_tc_disable_lazyload ) {
$image_classes .= ' no-lazyload skip-lazy';
}
$image = $multi_view->render_element( array(
'tag' => 'img',
'attrs' => array(
'src' => '{{image}}',
'data-mfp-src' => '{{image}}',
'class' => $image_classes,
'alt' => $image_alt,
),
'required' => 'image',
) );
$title = $multi_view->render_element( array(
'tag' => $processed_title_level,
'content' => '{{title}}',
'attrs' => array(
'class' => 'aioc_slide_title',
),
'required' => 'title',
) );
$subtitle = $multi_view->render_element( array(
'tag' => $processed_subtitle_level,
'content' => '{{subtitle}}',
'attrs' => array(
'class' => 'aioc_slide_subtitle',
),
'required' => 'subtitle',
) );
// Switch.
$icon = $multi_view->render_element( array(
'content' => '{{icon}}',
'attrs' => array(
'class' => $icon_classes,
),
'required' => 'icon',
) );
$switch_text = $multi_view->render_element( array(
'tag' => 'span',
'content' => '{{switch_text}}',
'attrs' => array(
'class' => 'aioc_slide_switch_text',
),
'required' => 'switch_text',
) );
// Label.
$label = $multi_view->render_element( array(
'tag' => 'span',
'content' => '{{label_text}}',
'attrs' => array(
'class' => 'aioc_slide_label',
),
'required' => 'label_text',
) );
$label_icon = $multi_view->render_element( array(
'content' => '{{label_icon}}',
'attrs' => array(
'class' => $icon_classes,
),
'required' => 'label_icon',
) );
$contentLength = substr($content, 0, $content_length);
$content = $multi_view->render_element( array(
'tag' => 'div',
'content' => $contentLength,
'attrs' => array(
'class' => 'aioc_slide_content',
),
'required' => 'content',
) );
$button = $this->render_button( array(
'display_button' => '' !== $this->props['button_url'] && 'off' !== $this->props['show_button'] ? true : false,
'button_text' => $button_text,
'button_text_escaped' => true,
'has_wrapper' => false,
'button_classname' => array('aioc_timeline_carousel_button'),
'button_url' => esc_url( $this->props['button_url'] ),
'url_new_window' => esc_attr( $this->props['button_url_new_window'] ),
'button_custom' => isset( $this->props['custom_button'] ) ? esc_attr( $this->props['custom_button'] ) : 'off',
'custom_icon' => isset( $this->props['button_icon'] ) ? $this->props['button_icon'] : '',
'button_rel' => isset( $this->props['button_rel'] ) ? esc_attr( $this->props['button_rel'] ) : '',
) );
if ( isset( $this->props['button_icon'] ) ){
self::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .et_pb_button_wrapper .et_pb_button::after',
'declaration' => 'content: attr(data-icon);',
)
);
}
if ( '' !== $image ) {
$image_wrapper = sprintf(
'%1$s
',
et_core_intentionally_unescaped( $image, 'html' )
);
}
if ( '' !== $button ) {
$button_wrapper = sprintf(
'%1$s
',
et_core_intentionally_unescaped( $button, 'html' )
);
}
// Switch Wrapper.
if ( 'icon' === $switch_type ) {
if ( '' !== $icon ) {
$switch_wrapper = sprintf(
'
%1$s
',
'' !== $icon ? et_core_intentionally_unescaped( $icon, 'html' ) : ''
);
}
} else{
$switch_wrapper = sprintf(
'
%1$s
',
'' !== $switch_text ? et_core_intentionally_unescaped( $switch_text, 'html' ) : ''
);
}
// Label Wrapper.
if ( 'icon' === $label_type ) {
if ( '' !== $label_icon ) {
$label_wrapper = sprintf(
'
%1$s
',
'' !== $label_icon ? et_core_intentionally_unescaped( $label_icon, 'html' ) : ''
);
}
} else if ( 'text' === $label_type ) {
if ( '' !== $label ) {
$label_wrapper = sprintf(
'
%1$s
',
'' !== $label ? et_core_intentionally_unescaped( $label, 'html' ) : ''
);
}
} else {
$label_wrapper = '';
}
if ( '' !== $title || '' !== $subtitle || '' !== $content || isset( $button_wrapper ) ) {
$content_wrapper = sprintf(
'',
et_core_intentionally_unescaped( $title, 'html' ),
et_core_intentionally_unescaped( $subtitle, 'html' ),
et_core_intentionally_unescaped( $content, 'html' ),
isset( $button_wrapper ) ? et_core_intentionally_unescaped( $button_wrapper, 'html' ) : ''
);
}
if ( isset( $image_wrapper ) || isset( $content_wrapper ) || isset( $switch_wrapper ) || isset( $label_wrapper ) ) {
$slide_wrapper = sprintf(
'',
isset( $image_wrapper ) ? et_core_intentionally_unescaped( $image_wrapper, 'html' ) : '',
isset( $content_wrapper ) ? et_core_intentionally_unescaped( $content_wrapper, 'html' ) : '',
isset( $switch_wrapper ) ? et_core_intentionally_unescaped( $switch_wrapper, 'html' ) : '',
isset( $label_wrapper ) ? et_core_intentionally_unescaped( $label_wrapper, 'html' ) : ''
);
} else {
$slide_wrapper = '';
}
self::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .aioc_slide_image_wrapper',
'declaration' => 'position: relative;',
)
);
// Swicth Background Color.
if ( '' !== $switch_background_color ){
self::set_style(
$render_slug,
array(
'selector' => '.aioc_timeline_carousel %%order_class%% .aioc_slide_switch_wrapper',
'declaration' => sprintf( 'background-color: %1$s;',
$switch_background_color
)
)
);
}
// Icon CSS.
if ( '' !== $icon ) {
$icon_font_size = et_pb_responsive_options()->get_property_values( $this->props, 'icon_font_size' );
$icon_font_size = array_merge( $aioc_cc_parent_icon_font_size, array_filter( $icon_font_size ) );
$icon_color = et_pb_responsive_options()->get_property_values( $this->props, 'icon_color' );
et_pb_responsive_options()->generate_responsive_css( $icon_font_size, '%%order_class%% .aioc_slide_switch_wrapper .aioc_timeline_carousel_icon', 'font-size', $render_slug, '!important;', 'range' );
et_pb_responsive_options()->generate_responsive_css( $icon_color, '%%order_class%% .aioc_slide_switch_wrapper .aioc_timeline_carousel_icon', 'color', $render_slug, '!important;', 'color' );
$icon_color_hover = $this->get_hover_value( 'icon_color' );
if ( $icon_color_hover ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .aioc_slide_switch_wrapper .aioc_timeline_carousel_icon:hover',
'declaration' => sprintf(
'color: %1$s !important;',
esc_attr( $icon_color_hover )
),
) );
}
if ( class_exists( 'ET_Builder_Module_Helper_Style_Processor' ) && method_exists( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ) ) {
$this->generate_styles( array(
'utility_arg' => 'icon_font_family',
'render_slug' => $render_slug,
'base_attr_name' => 'icon',
'important' => true,
'selector' => '%%order_class%% .aioc_slide_switch_wrapper .aioc_timeline_carousel_icon',
'processor' => array(
'ET_Builder_Module_Helper_Style_Processor',
'process_extended_icon',
),
) );
}
}
if ( isset( $label_wrapper ) ){
if ( '' !== $label_background_color ){
self::set_style(
$render_slug,
array(
'selector' => "{$this->main_css_element} .aioc_slide_label_wrapper",
'declaration' => sprintf( 'background-color: %1$s;',
$label_background_color
),
)
);
}
}
// Label Icon CSS.
if ( 'icon' === $label_type ) {
if ( '' !== $label_icon ) {
$label_icon_font_size = et_pb_responsive_options()->get_property_values( $this->props, 'label_icon_font_size' );
//$icon_font_size = array_merge( $aioc_cc_parent_icon_font_size, array_filter( $icon_font_size ) );
$label_icon_color = et_pb_responsive_options()->get_property_values( $this->props, 'label_icon_color' );
et_pb_responsive_options()->generate_responsive_css( $label_icon_font_size, '%%order_class%% .aioc_slide_label_wrapper .aioc_timeline_carousel_icon', 'font-size', $render_slug, '!important;', 'range' );
et_pb_responsive_options()->generate_responsive_css( $label_icon_color, '%%order_class%% .aioc_slide_label_wrapper .aioc_timeline_carousel_icon', 'color', $render_slug, '!important;', 'color' );
$label_icon_color_hover = $this->get_hover_value( 'label_icon_color' );
if ( $label_icon_color_hover ) {
self::set_style( $render_slug, array(
'selector' => '%%order_class%% .aioc_slide_label_wrapper .aioc_timeline_carousel_icon:hover',
'declaration' => sprintf(
'color: %1$s !important;',
esc_attr( $label_icon_color_hover )
),
) );
}
if ( class_exists( 'ET_Builder_Module_Helper_Style_Processor' ) && method_exists( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon' ) ) {
$this->generate_styles( array(
'utility_arg' => 'icon_font_family',
'render_slug' => $render_slug,
'base_attr_name' => 'label_icon',
'important' => true,
'selector' => '%%order_class%% .aioc_slide_label_wrapper .aioc_timeline_carousel_icon',
'processor' => array(
'ET_Builder_Module_Helper_Style_Processor',
'process_extended_icon',
),
) );
}
}
}
$fields = array( 'slide_content_margin_padding' );
AIOC_Helper::process_advanced_margin_padding_css( $this, $render_slug, $this->margin_padding, $fields );
$background_layout_class_names = et_pb_background_layout_options()->get_background_layout_class( $this->props );
$this->add_classname( array(
$this->get_text_orientation_classname(),
$background_layout_class_names[0],
'aioc_slide_carousel_slide',
'swiper-slide'
) );
$file = et_is_builder_plugin_active() ? 'style-dbp' : 'style';
wp_enqueue_style( 'aioc-timeline-carousel-item-style', ALL_IN_ONE_CAROUSEL_FOR_DIVI_PATH . 'includes/modules/TimelineCarouselItem/' . $file . '.min.css', array(), '1.0.0' );
return $slide_wrapper;
}
/**
* Filter multi view value.
*
* @since 3.27.1
*
* @see ET_Builder_Module_Helper_MultiViewOptions::filter_value
*
* @param mixed $raw_value Props raw value.
* @param array $args {
* Context data.
*
* @type string $context Context param: content, attrs, visibility, classes.
* @type string $name Module options props name.
* @type string $mode Current data mode: desktop, hover, tablet, phone.
* @type string $attr_key Attribute key for attrs context data. Example: src, class, etc.
* @type string $attr_sub_key Attribute sub key that availabe when passing attrs value as array such as styes. Example: padding-top, margin-botton, etc.
* }
* @param ET_Builder_Module_Helper_MultiViewOptions $multi_view Multiview object instance.
*
* @return mixed
*/
public function multi_view_filter_value( $raw_value, $args, $multi_view ) {
$name = isset( $args['name'] ) ? $args['name'] : '';
$mode = isset( $args['mode'] ) ? $args['mode'] : '';
if ( ( $raw_value && 'icon' === $name ) || ( $raw_value && 'label_icon' === $name )) {
$processed_value = html_entity_decode( et_pb_process_font_icon( $raw_value ) );
if ( '%%1%%' === $raw_value ) {
$processed_value = '"';
}
return $processed_value;
}
return $raw_value;
}
public function aioc_builder_processed_range_value( $result, $range, $range_string ) {
if ( false !== strpos( $result, '0calc' ) ) {
return $range;
}
return $result;
}
}
new AIOC_TimelineCarouselItem;