'https://diviextended.com/product/all-in-one-carousel-for-divi', 'author' => 'Elicus', 'author_uri' => 'https://elicus.com', ); public function init() { $this->name = esc_html__( 'Flipbox Item', 'all-in-one-carousel-for-divi' ); $this->advanced_setting_title_text = esc_html__( 'Flipbox', 'all-in-one-carousel-for-divi' ); $this->child_title_var = 'front_title'; $this->main_css_element = '.aioc_flipbox_carousel %%order_class%%'; } public function get_settings_modal_toggles() { return array( 'general' => array( 'toggles' => array( 'main_content' => array( 'title' => esc_html__( 'Flipbox Content', 'all-in-one-carousel-for-divi' ), 'sub_toggles' => array( 'front' => array( 'name' => esc_html__( 'Front', 'all-in-one-carousel-for-divi' ) ), 'back' => array( 'name' => esc_html__( 'Back', 'all-in-one-carousel-for-divi' ) ) ), 'tabbed_subtoggles' => true, ), 'elements' => array( 'title' => esc_html__( 'Flipbox Elements', 'all-in-one-carousel-for-divi' ), 'sub_toggles' => array( 'el_front' => array( 'name' => esc_html__( 'Front', 'all-in-one-carousel-for-divi' ) ), 'el_back' => array( 'name' => esc_html__( 'Back', 'all-in-one-carousel-for-divi' ) ) ), 'tabbed_subtoggles' => true, ), 'flipbox_background' => array( 'title' => esc_html__( 'Flipbox Background', 'all-in-one-carousel-for-divi' ), 'sub_toggles' => array( 'bg_front' => array( 'name' => esc_html__( 'Front', 'all-in-one-carousel-for-divi' ) ), 'bg_back' => array( 'name' => esc_html__( 'Back', 'all-in-one-carousel-for-divi' ) ) ), 'tabbed_subtoggles' => true, ) ) ), 'advanced' => array( 'toggles' => array( 'front_icon_settings' => esc_html__( 'Front Icon Style', 'all-in-one-carousel-for-divi' ), 'back_icon_settings' => esc_html__( 'Back Icon Style', 'all-in-one-carousel-for-divi' ), 'front_text' => array( 'title' => esc_html__( 'Front Text Style', 'all-in-one-carousel-for-divi' ), 'sub_toggles' => array( 'general' => array( 'name' => esc_html__( 'General', 'all-in-one-carousel-for-divi' ) ), 'title' => array( 'name' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ) ), 'content' => array( 'name' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ) ) ), 'tabbed_subtoggles' => true, ), 'back_text' => array( 'title' => esc_html__( 'Back Text Style', 'all-in-one-carousel-for-divi' ), 'sub_toggles' => array( 'general' => array( 'name' => esc_html__( 'General', 'all-in-one-carousel-for-divi' ) ), 'title' => array( 'name' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ) ), 'content' => array( 'name' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ) ) ), 'tabbed_subtoggles' => true, ), 'back_button' => esc_html__( 'Back Button Style', 'all-in-one-carousel-for-divi' ), ) ) ); } public function get_advanced_fields_config() { return array( 'fonts' => array( 'front_general_settings' => array( 'label' => esc_html__( 'General', 'all-in-one-carousel-for-divi' ), 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_module_header, .aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_module_header a, .aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_flipbox_description, .aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_flipbox_description p, .aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_flipbox_icon_image.use_icon", ), 'hide_font' => true, 'hide_font_size' => true, 'hide_font_weight' => true, 'hide_font_style' => true, 'hide_letter_spacing' => true, 'hide_line_height' => true, 'hide_text_color' => true, 'hide_text_shadow' => true, 'important' => 'all', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_text', 'sub_toggle' => 'general', ), 'front_header' => array( 'label' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ), 'font_size' => array( 'default' => '18px', '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' => '0px', 'range_settings' => array( 'min' => '0', 'max' => '10', 'step' => '1', ), 'validate_unit' => true, ), 'header_level' => array( 'default' => 'h4', 'default_on_front' => 'h4', ), 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_module_header, .aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_module_header a", ), 'hide_text_align' => true, 'important' => 'all', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_text', 'sub_toggle' => 'title', ), 'front_body' => array( 'label' => esc_html__( 'Body', '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' => '1em', 'range_settings' => array( 'min' => '0', 'max' => '5', 'step' => '0.1', ), ), 'letter_spacing' => array( 'default' => '0px', 'range_settings' => array( 'min' => '0', 'max' => '10', 'step' => '1', ), 'validate_unit' => true, ), 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_flipbox_description, .aioc_flipbox_carousel %%order_class%% .flipbox_front .aioc_flipbox_description p", ), 'hide_text_align' => true, 'important' => 'all', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_text', 'sub_toggle' => 'content', ), 'back_general_settings' => array( 'label' => esc_html__( 'General', 'all-in-one-carousel-for-divi' ), 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_module_header, .aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_module_header a, .aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_flipbox_description, .aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_flipbox_description p, .aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_flipbox_icon_image.use_icon", ), 'hide_font' => true, 'hide_font_size' => true, 'hide_font_weight' => true, 'hide_font_style' => true, 'hide_letter_spacing' => true, 'hide_line_height' => true, 'hide_text_color' => true, 'hide_text_shadow' => true, 'important' => 'all', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_text', 'sub_toggle' => 'general', ), 'back_header' => array( 'label' => esc_html__( 'Title', 'all-in-one-carousel-for-divi' ), 'font_size' => array( 'default' => '18px', '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' => '0px', 'range_settings' => array( 'min' => '0', 'max' => '10', 'step' => '1', ), 'validate_unit' => true, ), 'header_level' => array( 'default' => 'h4', 'default_on_front' => 'h4', ), 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_module_header, .aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_module_header a", ), 'hide_text_align' => true, 'important' => 'all', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_text', 'sub_toggle' => 'title', ), 'back_body' => array( 'label' => esc_html__( 'Body', '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' => '1em', 'range_settings' => array( 'min' => '0', 'max' => '5', 'step' => '0.1', ), ), 'letter_spacing' => array( 'default' => '0px', 'range_settings' => array( 'min' => '0', 'max' => '10', 'step' => '1', ), 'validate_unit' => true, ), 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_flipbox_description, .aioc_flipbox_carousel %%order_class%% .flipbox_back .aioc_flipbox_description p", ), 'hide_text_align' => true, 'important' => 'all', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_text', 'sub_toggle' => 'content', ), ), 'button' => array( 'back_button' => array( 'label' => esc_html__( 'Button', 'all-in-one-carousel-for-divi' ), 'css' => array( 'main' => "%%order_class%% .flipbox_back .et_pb_button", 'alignment' => "%%order_class%% .flipbox_back .et_pb_button_wrapper", 'important' => 'all', ), 'margin_padding' => array( 'css' => array( 'margin' => "%%order_class%% .flipbox_back .et_pb_button_wrapper", 'padding' => "%%order_class%% .flipbox_back .et_pb_button", 'important' => 'all', ), ), 'text_size' => array( 'default' => '16px', ), 'no_rel_attr' => true, 'box_shadow' => false, 'use_alignment' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'back_button', ), ), 'max_width' => array( 'css' => array( 'main' => ".aioc_flipbox_carousel %%order_class%%", 'module_alignment' => ".aioc_flipbox_carousel %%order_class%%", ), ), 'margin_padding' => array( 'css' => array( 'padding' => ".aioc_flipbox_carousel %%order_class%% .flipbox_front, .aioc_flipbox_carousel %%order_class%% .flipbox_back", 'margin' => ".aioc_flipbox_carousel %%order_class%%", 'important' => 'all', ), ), 'box_shadow' => array( 'default' => false, ), 'scroll_effects' => false, 'background' => false, 'text' => false, 'border' => false, 'height' => false, 'filters' => false, 'sticky' => false, ); } public function get_fields() { $et_accent_color = et_builder_accent_color(); return array_merge( array( 'front_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', 'sub_toggle' => 'front', 'description' => esc_html__( 'The front title of your module.', 'all-in-one-carousel-for-divi' ), ), 'front_content' => array( 'label' => esc_html__( 'Content', 'all-in-one-carousel-for-divi' ), 'type' => 'textarea', 'option_category' => 'basic_option', 'tab_slug' => 'general', 'toggle_slug' => 'main_content', 'sub_toggle' => 'front', 'description' => esc_html__( 'Input the front text content for your module here.', 'all-in-one-carousel-for-divi' ), ), 'back_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', 'sub_toggle' => 'back', 'description' => esc_html__( 'The back title of your module.', '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', 'tab_slug' => 'general', 'toggle_slug' => 'main_content', 'sub_toggle' => 'back', 'description' => esc_html__( 'Input the back text content for your module here.', 'all-in-one-carousel-for-divi' ), ), 'front_use_icon' => array( 'label' => esc_html__( 'Use Icon on Front', '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' ), ), 'default' => 'off', 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_front', 'description' => esc_html__( 'Here you can choose whether icon set below should be used.', 'all-in-one-carousel-for-divi' ), ), 'front_icon' => array( 'label' => esc_html__( 'Front Icon', 'all-in-one-carousel-for-divi' ), 'type' => 'select_icon', 'option_category' => 'basic_option', 'class' => array( 'et-pb-font-icon' ), 'show_if' => array( 'front_use_icon' => 'on', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_front', 'description' => esc_html__( 'Choose an icon to display on frontside of your flip box.', 'all-in-one-carousel-for-divi' ), ), 'front_image' => array( 'label' => esc_html__( 'Front 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' ), 'show_if' => array( 'front_use_icon' => 'off', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_front', 'description' => esc_html__( 'Upload an image to display on frontside of your flip box.', 'all-in-one-carousel-for-divi' ), ), 'front_image_alt' => array( 'label' => esc_html__( 'Front Image Alt Text', 'all-in-one-carousel-for-divi' ), 'type' => 'text', 'option_category' => 'basic_option', 'show_if' => array( 'front_use_icon' => 'off', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_front', 'description' => esc_html__( 'Define the HTML ALT text for your image here.', 'all-in-one-carousel-for-divi' ), ), 'back_use_icon' => array( 'label' => esc_html__( 'Use Icon on Back', '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' ), ), 'default' => 'off', 'default_on_front' => 'off', 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Here you can choose whether icon set below should be used.', 'all-in-one-carousel-for-divi' ), ), 'back_icon' => array( 'label' => esc_html__( 'Back Icon', 'all-in-one-carousel-for-divi' ), 'type' => 'select_icon', 'option_category' => 'basic_option', 'class' => array( 'et-pb-font-icon' ), 'show_if' => array( 'back_use_icon' => 'on', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Choose an icon to display on backside of your flip box.', 'all-in-one-carousel-for-divi' ), ), 'back_image' => array( 'label' => esc_html__( 'Back 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' ), 'show_if' => array( 'back_use_icon' => 'off', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Upload an image to display on backside of your flip box.', 'all-in-one-carousel-for-divi' ), ), 'back_image_alt' => array( 'label' => esc_html__( 'Back Image Alt Text', 'all-in-one-carousel-for-divi' ), 'type' => 'text', 'option_category' => 'basic_option', 'show_if' => array( 'back_use_icon' => 'off', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Define the HTML ALT text for your image here.', 'all-in-one-carousel-for-divi' ), ), 'back_button_display' => array( 'label' => esc_html__( 'Display Button on Back', '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' ), ), 'default' => 'off', 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Here you can choose whether button should be used.', 'all-in-one-carousel-for-divi' ), ), 'back_button_text' => array( 'label' => esc_html__( 'Back Button Text', 'all-in-one-carousel-for-divi' ), 'type' => 'text', 'option_category' => 'basic_option', 'show_if' => array( 'back_button_display' => 'on', ), 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Here you can define custom button text.', 'all-in-one-carousel-for-divi' ), ), 'back_button_url' => array( 'label' => esc_html__( 'Back Button URL', 'all-in-one-carousel-for-divi' ), 'type' => 'text', 'option_category' => 'basic_option', 'tab_slug' => 'general', 'show_if' => array( 'back_button_display' => 'on', ), 'dynamic_content' => 'url', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Your button link, input your destination URL here.', 'all-in-one-carousel-for-divi' ), ), 'back_button_target' => array( 'label' => esc_html__( 'URL Opens in New Window', 'all-in-one-carousel-for-divi' ), 'type' => 'select', 'option_category' => 'configuration', 'show_if' => array( 'back_button_display' => 'on', ), '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', 'tab_slug' => 'general', 'toggle_slug' => 'elements', 'sub_toggle' => 'el_back', 'description' => esc_html__( 'Here you can choose whether or not your button link opens in a new window', 'all-in-one-carousel-for-divi' ), ), 'front_background_color' => array( 'label' => esc_html__( 'Front Background', 'all-in-one-carousel-for-divi' ), 'type' => 'background-field', 'base_name' => 'front_background', 'context' => 'front_background_color', 'custom_color' => true, 'background_fields' => $this->generate_background_options( "front_background", 'button', 'general', 'flipbox_background', 'front_background_color' ), 'mobile_options' => true, 'tab_slug' => 'general', 'toggle_slug' => 'flipbox_background', 'sub_toggle' => 'bg_front', 'description' => esc_html__( 'Adjust the background style of the frontside of your flip box by customizing the background color, gradient, and image.', 'all-in-one-carousel-for-divi' ), ), 'back_background_color' => array( 'label' => esc_html__( 'Back Background', 'all-in-one-carousel-for-divi' ), 'type' => 'background-field', 'base_name' => 'back_background', 'context' => 'back_background_color', 'custom_color' => true, 'background_fields' => $this->generate_background_options( "back_background", 'button', 'general', 'flipbox_background', 'back_background_color' ), 'mobile_options' => true, 'tab_slug' => 'general', 'toggle_slug' => 'flipbox_background', 'sub_toggle' => 'bg_back', 'description' => esc_html__( 'Adjust the background style of the backside of your flip box by customizing the background color, gradient, and image.', 'all-in-one-carousel-for-divi' ), ), 'content_max_width' => array( 'label' => esc_html__( 'Content Width', 'all-in-one-carousel-for-divi' ), 'type' => 'range', 'option_category' => 'layout', 'mobile_options' => true, 'validate_unit' => true, 'allow_empty' => true, 'range_settings' => array( 'min' => '0', 'max' => '1100', 'step' => '1', ), 'default' => '550px', 'tab_slug' => 'advanced', 'toggle_slug' => 'width', 'description' => esc_html__( 'Here you can set the width of the Flip Box.', 'all-in-one-carousel-for-divi' ), ), 'flipbox_min_height' => array( 'label' => esc_html__( 'Min Height', 'all-in-one-carousel-for-divi' ), 'type' => 'range', 'option_category' => 'layout', 'mobile_options' => true, 'validate_unit' => true, 'allow_empty' => true, 'range_settings' => array( 'min' => '0', 'max' => '1000', 'step' => '1', ), 'default' => '200px', 'tab_slug' => 'advanced', 'toggle_slug' => 'width', 'description' => esc_html__( 'Increase or decrease the height of the Flip Box.', 'all-in-one-carousel-for-divi' ), ), 'front_style_icon' => array( 'label' => esc_html__( 'Style Icon', 'all-in-one-carousel-for-divi' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ), 'on' => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ) ), 'show_if' => array( 'front_use_icon' => 'on', ), 'default' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_icon_settings', 'description' => esc_html__( 'Here you can choose whether icon set above should display within a shape.', 'all-in-one-carousel-for-divi' ), ), 'front_icon_shape' => array( 'label' => esc_html__( 'Shape', 'all-in-one-carousel-for-divi' ), 'type' => 'select', 'option_category' => 'configuration', 'options' => array( 'use_square' => esc_html__( 'Square', 'all-in-one-carousel-for-divi' ), 'use_circle' => esc_html__( 'Circle', 'all-in-one-carousel-for-divi' ), 'use_hexagon' => esc_html__( 'Hexagon', 'all-in-one-carousel-for-divi' ) ), 'show_if' => array( 'front_use_icon' => 'on', 'front_style_icon' => 'on', ), 'default' => 'use_square', 'default_on_front' => 'use_square', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_icon_settings', 'description' => esc_html__( 'Here you can choose shape.', 'all-in-one-carousel-for-divi' ), ), 'front_shape_color' => array( 'label' => esc_html__( 'Shape Background', 'all-in-one-carousel-for-divi' ), 'type' => 'color-alpha', 'show_if' => array( 'front_use_icon' => 'on', 'front_style_icon' => 'on', ), 'default' => '#000000', 'default_on_front' => '#000000', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_icon_settings', 'description' => esc_html__( 'Here you can define a custom color for the icon shape.', 'all-in-one-carousel-for-divi' ), ), 'front_use_shape_border' => array( 'label' => esc_html__( 'Display Shape Border', 'all-in-one-carousel-for-divi' ), 'type' => 'yes_no_button', 'option_category' => 'layout', 'options' => array( 'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ), 'on' => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ) ), 'show_if' => array( 'front_use_icon' => 'on', 'front_style_icon' => 'on', ), 'default' => 'off', 'default_on_front' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'front_icon_settings', 'description' => esc_html__( 'Here you can choose whether if the icon border should display.', 'all-in-one-carousel-for-divi' ), ), 'front_shape_border_color' => array( 'label' => esc_html__( 'Shape Border Color', 'all-in-one-carousel-for-divi' ), 'type' => 'color-alpha', 'custom_color' => true, 'show_if' => array( 'front_use_icon' => 'on', 'front_style_icon' => 'on', 'front_use_shape_border' => 'on', ), 'default' => $et_accent_color, 'default_on_front' => $et_accent_color, 'tab_slug' => 'advanced', 'toggle_slug' => 'front_icon_settings', 'description' => esc_html__( 'Here you can define a custom color for the icon border.', 'all-in-one-carousel-for-divi' ), ), 'back_style_icon' => array( 'label' => esc_html__( 'Style Icon', 'all-in-one-carousel-for-divi' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ), 'on' => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ) ), 'show_if' => array( 'back_use_icon' => 'on', ), 'default' => 'off', 'default_on_front' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_icon_settings', 'description' => esc_html__( 'Here you can choose whether icon set above should display within a shape.', 'all-in-one-carousel-for-divi' ), ), 'back_icon_shape' => array( 'label' => esc_html__( 'Shape', 'all-in-one-carousel-for-divi' ), 'type' => 'select', 'option_category' => 'configuration', 'options' => array( 'use_square' => esc_html__( 'Square', 'all-in-one-carousel-for-divi' ), 'use_circle' => esc_html__( 'Circle', 'all-in-one-carousel-for-divi' ), 'use_hexagon' => esc_html__( 'Hexagon', 'all-in-one-carousel-for-divi' ) ), 'show_if' => array( 'back_use_icon' => 'on', 'back_style_icon' => 'on', ), 'default' => 'use_square', 'default_on_front' => 'use_square', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_icon_settings', 'description' => esc_html__( 'Here you can choose shape.', 'all-in-one-carousel-for-divi' ), ), 'back_shape_color' => array( 'label' => esc_html__( 'Shape Background', 'all-in-one-carousel-for-divi' ), 'type' => 'color-alpha', 'custom_color' => true, 'show_if' => array( 'back_use_icon' => 'on', 'back_style_icon' => 'on', ), 'default' => '#000000', 'default_on_front' => '#000000', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_icon_settings', 'description' => esc_html__( 'Here you can define a custom color for the icon shape.', 'all-in-one-carousel-for-divi' ), ), 'back_use_shape_border' => array( 'label' => esc_html__( 'Display Shape Border', 'all-in-one-carousel-for-divi' ), 'type' => 'yes_no_button', 'option_category' => 'layout', 'options' => array( 'off' => esc_html__( 'No', 'all-in-one-carousel-for-divi' ), 'on' => esc_html__( 'Yes', 'all-in-one-carousel-for-divi' ) ), 'show_if' => array( 'back_use_icon' => 'on', 'back_style_icon' => 'on', ), 'default' => 'off', 'default_on_front' => 'off', 'tab_slug' => 'advanced', 'toggle_slug' => 'back_icon_settings', 'description' => esc_html__( 'Here you can choose whether if the icon border should display.', 'all-in-one-carousel-for-divi' ), ), 'back_shape_border_color' => array( 'label' => esc_html__( 'Shape Border Color', 'all-in-one-carousel-for-divi' ), 'type' => 'color-alpha', 'custom_color' => true, 'show_if' => array( 'back_use_icon' => 'on', 'back_style_icon' => 'on', 'back_use_shape_border' => 'on', ), 'default' => $et_accent_color, 'default_on_front' => $et_accent_color, 'tab_slug' => 'advanced', 'toggle_slug' => 'back_icon_settings', 'description' => esc_html__( 'Here you can define a custom color for the icon border.', 'all-in-one-carousel-for-divi' ), ), ), $this->generate_background_options( 'front_background', 'skip', 'general', 'flipbox_background', 'front_background_color' ), $this->generate_background_options( 'back_background', 'skip', 'general', 'flipbox_background', 'back_background_color' ) ); } public function render( $attrs, $content, $render_slug ) { global $aioc_flipbox_layout; $front_use_icon = esc_attr( $this->props['front_use_icon'] ); $front_icon = $this->props['front_icon']; $front_image = esc_attr( $this->props['front_image'] ); $front_image_alt = esc_attr( $this->props['front_image_alt'] ); $front_icon_shape = esc_attr( $this->props['front_icon_shape'] ); $front_style_icon = esc_attr( $this->props['front_style_icon'] ); $front_use_shape_border = esc_attr( $this->props['front_use_shape_border'] ); $back_use_icon = esc_attr( $this->props['back_use_icon'] ); $back_icon = $this->props['back_icon']; $back_image = esc_attr( $this->props['back_image'] ); $back_image_alt = esc_attr( $this->props['back_image_alt'] ); $back_icon_shape = esc_attr( $this->props['back_icon_shape'] ); $back_style_icon = esc_attr( $this->props['back_style_icon'] ); $back_use_shape_border = esc_attr( $this->props['back_use_shape_border'] ); $back_button_display = esc_attr( $this->props['back_button_display'] ); $front_header_level = esc_attr( $this->props['front_header_level'] ); $back_header_level = esc_attr( $this->props['back_header_level'] ); $header_level_front = et_pb_process_header_level( esc_attr( $front_header_level ), 'h4' ); $header_level_back = et_pb_process_header_level( esc_attr( $back_header_level ), 'h4' ); // Render titles. $front_title = wp_kses_post( $this->props['front_title'] ); if ( '' !== $front_title ) { $front_title = sprintf( '<%1$s class="aioc_module_header">%2$s', $header_level_front, $front_title ); } $back_title = wp_kses_post( $this->props['back_title'] ); if ( '' !== $back_title ) { $back_title = sprintf( '<%1$s class="aioc_module_header">%2$s', $header_level_back, $back_title ); } $front_content = wp_kses_post( $this->props['front_content'] ); $back_content = ''; if ( '' !== $this->content ) { $back_content = sprintf( '%1$s', __( wp_kses_post( $this->content ), 'divi-plus' ) ); } $front_image_icon = ''; if ( 'off' === $front_use_icon && '' !== trim( $front_image ) ) { $front_image_icon = sprintf( '%2$s', esc_url( $front_image ), esc_attr( $front_image_alt ) ); } else { $flipbox_icon_class = array( 'et-pb-icon' ); if ( 'on' === $front_style_icon && 'on' === $front_use_shape_border && 'use_hexagon' !== $front_icon_shape ) { $flipbox_icon_class[] = 'et-pb-icon-shape-border'; } if ( 'on' === $front_style_icon ) { $icon_class = ''; switch ( $front_icon_shape ) { case 'use_circle': $icon_class = 'el-icon-circle'; break; case 'use_square': $icon_class = 'el-icon-square'; break; case 'use_hexagon': $icon_class = 'el-icon-hexagon'; break; default: $icon_class = 'el-icon-square'; break; } if ( ! empty( $icon_class ) ) { $flipbox_icon_class[] = $icon_class; } if ( 'use_hexagon' === $front_icon_shape ) { $front_image_icon = sprintf( '
%3$s
', ( 'on' === $front_use_shape_border ) ? ' et-pb-icon-shape-border' : '', implode( ' ', $flipbox_icon_class ), esc_attr( et_pb_process_font_icon( $front_icon ) ) ); } else { $front_image_icon = sprintf( '%2$s', implode( ' ', $flipbox_icon_class ), esc_attr( et_pb_process_font_icon( $front_icon ) ) ); } } else { $front_image_icon = sprintf( '%2$s', implode( ' ', $flipbox_icon_class ), esc_attr( et_pb_process_font_icon( $front_icon ) ) ); } } $back_image_icon = ''; if ( 'off' === $back_use_icon && '' !== trim( $back_image ) ) { $back_image_icon = sprintf( '%2$s', esc_url( $back_image ), esc_attr( $back_image_alt ) ); } else { $flipbox_icon_class = array( 'et-pb-icon' ); if ( 'on' === $back_style_icon && 'on' === $back_use_shape_border && 'use_hexagon' !== $back_icon_shape ) { $flipbox_icon_class[] = 'et-pb-icon-shape-border'; } if ( 'on' === $back_style_icon ) { $icon_class = ''; switch ( $back_icon_shape ) { case 'use_circle': $icon_class = 'el-icon-circle'; break; case 'use_square': $icon_class = 'el-icon-square'; break; case 'use_hexagon': $icon_class = 'el-icon-hexagon'; break; default: $icon_class = 'el-icon-square'; break; } if ( ! empty( $icon_class ) ) { $flipbox_icon_class[] = $icon_class; } if ( 'use_hexagon' === $back_icon_shape ) { $back_image_icon = sprintf( '
%3$s
', ( 'on' === $back_use_shape_border ) ? ' et-pb-icon-shape-border' : '', implode( ' ', $flipbox_icon_class ), esc_attr( et_pb_process_font_icon( $back_icon ) ) ); } else { $back_image_icon = sprintf( '%2$s', implode( ' ', $flipbox_icon_class ), esc_attr( et_pb_process_font_icon( $back_icon ) ) ); } } else { $back_image_icon = sprintf( '%2$s', implode( ' ', $flipbox_icon_class ), esc_attr( et_pb_process_font_icon( $back_icon ) ) ); } } $back_button_output = ''; if ( 'off' !== $back_button_display ) { $back_button_output = $this->render_button( array( 'button_text' => esc_html( $this->props['back_button_text'] ), 'button_url' => esc_url( $this->props['back_button_url'] ), 'url_new_window' => esc_attr( $this->props['back_button_target'] ), 'button_custom' => esc_attr( $this->props['custom_back_button'] ), 'custom_icon' => esc_attr( $this->props['back_button_icon'] ), ) ); } $flipbox_content = ''; if ( file_exists( plugin_dir_path( __FILE__ ) . 'layouts/' . $aioc_flipbox_layout . '.php' ) ) { include ( plugin_dir_path( __FILE__ ) . 'layouts/' . $aioc_flipbox_layout . '.php' ); } if ( isset( $this->props['back_button_icon'] ) ){ self::set_style( $render_slug, array( 'selector' => '%%order_class%% .et_pb_button_wrapper .et_pb_button::after', 'declaration' => 'content: attr(data-icon);', ) ); } // Advanced Flip Box Front Content reponsive CSS. $content_max_width = et_pb_responsive_options()->get_property_values( $this->props, 'content_max_width' ); et_pb_responsive_options()->generate_responsive_css( $content_max_width, '%%order_class%% .aioc_flipbox_wrapper', 'max-width', $render_slug, '!important;', 'range' ); $flipbox_min_height = et_pb_responsive_options()->get_property_values( $this->props, 'flipbox_min_height' ); et_pb_responsive_options()->generate_responsive_css( $flipbox_min_height, '%%order_class%% .aioc_flipbox_wrapper .flipbox_side', 'min-height', $render_slug, '!important;', 'range' ); // Front icon style. if ( 'on' === $front_use_icon && ! empty( $front_icon ) ) { 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' => 'front_icon', 'important' => true, 'selector' => '%%order_class%% .flipbox_front .et-pb-icon', 'processor' => array( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon', ), ) ); } // Style shape icon. if ( 'on' === $front_style_icon ) { $ficon_selector = ( 'use_hexagon' === $front_icon_shape ) ? '%%order_class%% .flipbox_front .hexagon' : '%%order_class%% .flipbox_front .et-pb-icon'; self::set_style( $render_slug, array( 'selector' => esc_html( $ficon_selector ), 'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['front_shape_color'] ) ) ) ); if ( 'on' === $front_use_shape_border ) { self::set_style( $render_slug, array( 'selector' => esc_html( $ficon_selector ), 'declaration' => sprintf( 'border-color: %1$s;', esc_attr( $this->props['front_shape_border_color'] ) ) ) ); } } } // Back icon style. if ( 'on' === $back_use_icon && ! empty( $back_icon ) ) { 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' => 'back_icon', 'important' => true, 'selector' => '%%order_class%% .flipbox_back .et-pb-icon', 'processor' => array( 'ET_Builder_Module_Helper_Style_Processor', 'process_extended_icon', ), ) ); } // Style shape icon. if ( 'on' === $back_style_icon ) { $bicon_selector = ( 'use_hexagon' === $back_icon_shape ) ? '%%order_class%% .flipbox_back .hexagon' : '%%order_class%% .flipbox_back .et-pb-icon'; self::set_style( $render_slug, array( 'selector' => esc_html( $bicon_selector ), 'declaration' => sprintf( 'background-color: %1$s;', esc_attr( $this->props['back_shape_color'] ) ) ) ); if ( 'on' === $back_use_shape_border ) { self::set_style( $render_slug, array( 'selector' => esc_html( $bicon_selector ), 'declaration' => sprintf( 'border-color: %1$s;', esc_attr( $this->props['back_shape_border_color'] ) ) ) ); } } } $args = array( 'render_slug' => $render_slug, 'props' => $this->props, 'fields' => $this->fields_unprocessed, 'module' => $this, 'backgrounds' => array( 'front_background' => array( 'normal' => ".aioc_flipbox_carousel %%order_class%% .flipbox_front", 'hover' => ".aioc_flipbox_carousel %%order_class%% .flipbox_front:hover", ), 'back_background' => array( 'normal' => ".aioc_flipbox_carousel %%order_class%% .flipbox_back", 'hover' => ".aioc_flipbox_carousel %%order_class%% .flipbox_back:hover", ), ), ); AIOC_Helper::process_background( $args ); $this->add_classname( array( $this->get_text_orientation_classname(), 'aioc_flipbox_carousel_slide', 'swiper-slide' ) ); return et_core_intentionally_unescaped( $flipbox_content, 'html' ); } } new AIOC_FlipboxCarouselItem;