| Server IP : 213.186.33.4 / Your IP : 216.73.216.146 Web Server : Apache System : Linux webm005.cluster103.gra.hosting.ovh.net 6.18.39-ovh-vps-grsec-zfs+ #1 SMP PREEMPT_DYNAMIC Tue Jul 21 12:03:15 CEST 2026 x86_64 User : karinebmkh ( 644538) PHP Version : 8.4.22 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/karinebmkh/www/wp-content/plugins/divi-pixel/includes/modules/HoverBox/ |
Upload File : |
<?php
class DIPI_HoverBox extends DIPI_Builder_Module
{
protected $module_credits = array(
'module_uri' => 'https://divi-pixel.com/modules/hover-box',
'author' => 'Divi Pixel',
'author_uri' => 'https://divi-pixel.com',
);
public function init()
{
$this->icon_path = plugin_dir_path(__FILE__) . "dp-hover-box.svg";
$this->slug = 'dipi_hover_box';
$this->vb_support = 'on';
$this->name = esc_html__('Pixel Hover Box', 'dipi-divi-pixel');
$this->settings_modal_toggles = [
'general' => [
'toggles' => [
'content' => esc_html__('Default Blurb ', 'dipi-divi-pixel'),
'content_hover' => esc_html__('Hover Blurb', 'dipi-divi-pixel'),
'settings' => esc_html__('Settings', 'dipi-divi-pixel'),
],
],
'advanced' => [
'toggles' => [
'content_background' => esc_html__('Content Background', 'dipi-divi-pixel'),
'content_hover_background' => esc_html__('Hover Background', 'dipi-divi-pixel'),
'content_icon_image' => esc_html__('Content Image & Icon', 'dipi-divi-pixel'),
'content_hover_icon_image' => esc_html__('Hover Image & Icon', 'dipi-divi-pixel'),
'content_text' => [
'sub_toggles' => [
'title' => [
'name' => 'Title',
],
'desc' => [
'name' => 'Description',
],
],
'tabbed_subtoggles' => true,
'title' => esc_html__('Content Text', 'dipi-divi-pixel'),
'priority' => 49,
],
'content_hover_text' => [
'sub_toggles' => [
'title' => [
'name' => 'Title',
],
'desc' => [
'name' => 'Description',
],
],
'tabbed_subtoggles' => true,
'title' => esc_html__('Hover Text', 'dipi-divi-pixel'),
'priority' => 49,
],
],
],
];
}
public function get_custom_css_fields_config()
{
$fields = [];
$fields['content_card_container'] = [
'label' => esc_html__('Content Card Container', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-box-content',
];
$fields['content_image_icon'] = [
'label' => esc_html__('Content Image/Icon', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-content-image-icon-wrap',
];
$fields['content_title'] = [
'label' => esc_html__('Content Title', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-hover-box-heading',
];
$fields['content_description'] = [
'label' => esc_html__('Content Description', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-desc',
];
$fields['content_button'] = [
'label' => esc_html__('Content Button', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-content-button',
];
$fields['content_hover_card_container'] = [
'label' => esc_html__('Hover Card Container', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-box-hover',
];
$fields['content_hover_image_icon'] = [
'label' => esc_html__('Hover Image/Icon', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-image-icon-wrap',
];
$fields['content_hover_title'] = [
'label' => esc_html__('Hover Title', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-hover-box-heading',
];
$fields['content_hover_description'] = [
'label' => esc_html__('Hover Description', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-desc',
];
$fields['content_hover_button'] = [
'label' => esc_html__('Hover Button', 'dipi-divi-pixel'),
'selector' => '%%order_class%% .dipi-hover-button',
];
return $fields;
}
public function get_fields()
{
$fields = [];
$fields['content_title'] = [
'label' => esc_html__('Content Title', 'dipi-divi-pixel'),
'type' => 'text',
'toggle_slug' => 'content',
];
$fields['use_content_icon'] = [
'label' => esc_html__('Icon for Content', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'options' => [
'off' => esc_html__('No', 'dipi-divi-pixel'),
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
],
'default' => 'off',
'toggle_slug' => 'content'
];
$fields["content_image"] = [
'label' => esc_html__('Image', 'dipi-divi-pixel'),
'type' => 'upload',
'option_category' => 'basic_option',
'upload_button_text' => esc_attr__('Upload an image', 'dipi-divi-pixel'),
'choose_text' => esc_attr__('Choose an Image', 'dipi-divi-pixel'),
'update_text' => esc_attr__('Set As Image', 'dipi-divi-pixel'),
'hide_metadata' => true,
'show_if' => ['use_content_icon' => 'off'],
'toggle_slug' => 'content',
'dynamic_content' => 'image',
];
$fields["content_image_width"] = [
'label' => esc_html__('Content Image Width', 'dipi-divi-pixel'),
'type' => 'range',
'validate_unit' => true,
'default' => '100%',
'default_unit' => '%',
'show_if' => ['use_content_icon' => 'off'],
'range_settings' => [
'min' => '0',
'max' => '100',
'step' => '1',
],
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
];
$fields['content_icon'] = [
'label' => esc_html__('Content Icon', 'dipi-divi-pixel'),
'type' => 'select_icon',
'default' => '5',
'show_if' => ['use_content_icon' => 'on'],
'toggle_slug' => 'content',
];
$fields["content_icon_color"] = [
'label' => esc_html__('Icon Color', 'dipi-divi-pixel'),
'type' => 'color-alpha',
'default' => '#7EBEC5',
'show_if' => ['use_content_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$fields["content_circle_icon"] = [
'label' => esc_html__('Circle Icon', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'default' => 'off',
'options' => array(
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
'off' => esc_html__('No', 'dipi-divi-pixel'),
),
'show_if' => ['use_content_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$fields["content_circle_color"] = [
'label' => esc_html__('Circle Color', 'dipi-divi-pixel'),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'content_circle_icon' => 'on',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$fields["content_circle_border"] = [
'label' => esc_html__('Show Circle Border', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'default' => 'off',
'options' => [
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
'off' => esc_html__('No', 'dipi-divi-pixel'),
],
'show_if' => ['content_circle_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$fields["content_circle_border_color"] = [
'label' => esc_html__('Circle Border Color', 'dipi-divi-pixel'),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => [
'content_circle_border' => 'on',
],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$fields["content_icon_size"] = [
'label' => esc_html__('Icon Font Size', 'dipi-divi-pixel'),
'type' => 'range',
'validate_unit' => true,
'default' => '40px',
'default_unit' => 'px',
'range_settings' => array(
'min' => '0',
'max' => '100',
'step' => '1',
),
'show_if' => ['use_content_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$fields['body_text'] = [
'label' => esc_html__('Body Text', 'dipi-divi-pixel'),
'type' => 'tiny_mce',
'toggle_slug' => 'content',
];
// Hover side
$fields['content_hover_title'] = [
'label' => esc_html__('Hover Title', 'dipi-divi-pixel'),
'type' => 'text',
'toggle_slug' => 'content_hover',
];
$fields['use_content_hover_icon'] = [
'label' => esc_html__('Icon for Hover Side', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'options' => [
'off' => esc_html__('No', 'dipi-divi-pixel'),
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
],
'default' => 'off',
'toggle_slug' => 'content_hover',
];
$fields["content_hover_image"] = [
'label' => esc_html__('Image', 'dipi-divi-pixel'),
'type' => 'upload',
'upload_button_text' => esc_attr__('Upload an image', 'dipi-divi-pixel'),
'choose_text' => esc_attr__('Choose an Image', 'dipi-divi-pixel'),
'update_text' => esc_attr__('Set As Image', 'dipi-divi-pixel'),
'description' => esc_html__('Upload an image to display as before image', 'dipi-divi-pixel'),
'hide_metadata' => true,
'show_if' => ['use_content_hover_icon' => 'off'],
'toggle_slug' => 'content_hover',
'dynamic_content' => 'image',
];
$fields["content_hover_image_width"] = [
'label' => esc_html__('Hover Image Width', 'dipi-divi-pixel'),
'type' => 'range',
'validate_unit' => true,
'default' => '100%',
'default_unit' => '%',
'show_if' => ['use_content_hover_icon' => 'off'],
'range_settings' => [
'min' => '0',
'max' => '100',
'step' => '1',
],
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
];
$fields['content_hover_icon'] = [
'label' => esc_html__('Hover Icon', 'dipi-divi-pixel'),
'type' => 'select_icon',
'default' => '5',
'show_if' => ['use_content_hover_icon' => 'on'],
'toggle_slug' => 'content_hover',
];
$fields["content_hover_icon_color"] = [
'label' => esc_html__('Icon Color', 'dipi-divi-pixel'),
'type' => 'color-alpha',
'default' => '#7EBEC5',
'show_if' => ['use_content_hover_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
$fields["content_hover_circle_icon"] = [
'label' => esc_html__('Circle Icon', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'default' => 'off',
'options' => array(
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
'off' => esc_html__('No', 'dipi-divi-pixel'),
),
'show_if' => ['use_content_hover_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
$fields["content_hover_circle_color"] = [
'label' => esc_html__('Circle Color', 'dipi-divi-pixel'),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => array(
'content_hover_circle_icon' => 'on',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
$fields["content_hover_circle_border"] = [
'label' => esc_html__('Show Circle Border', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'default' => 'off',
'options' => [
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
'off' => esc_html__('No', 'dipi-divi-pixel'),
],
'show_if' => ['use_content_hover_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
$fields["content_hover_circle_border_color"] = [
'label' => esc_html__('Circle Border Color', 'dipi-divi-pixel'),
'type' => 'color-alpha',
'custom_color' => true,
'show_if' => [
'content_hover_circle_border' => 'on',
],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
$fields["content_hover_icon_size"] = [
'label' => esc_html__('Icon Font Size', 'dipi-divi-pixel'),
'type' => 'range',
'validate_unit' => true,
'default' => '40px',
'default_unit' => 'px',
'range_settings' => array(
'min' => '0',
'max' => '100',
'step' => '1',
),
'show_if' => ['use_content_hover_icon' => 'on'],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
$fields['content_hover_content'] = [
'label' => esc_html__('Body Text', 'dipi-divi-pixel'),
'type' => 'tiny_mce',
'toggle_slug' => 'content_hover',
];
$fields['use_content_hover_button'] = [
'label' => esc_html__('Show Hover Side Button', 'dipi-divi-pixel'),
'type' => 'yes_no_button',
'default' => 'off',
'options' => [
'off' => esc_html__('No', 'dipi-divi-pixel'),
'on' => esc_html__('Yes', 'dipi-divi-pixel'),
],
'toggle_slug' => 'content_hover',
];
$fields["content_hover_button_text"] = [
'label' => esc_html__('Button Text', 'dipi-divi-pixel'),
'type' => 'text',
'default' => esc_html__('Click Here', 'dipi-divi-pixel'),
'show_if' => ['use_content_hover_button' => 'on'],
'toggle_slug' => 'content_hover',
];
$fields["content_hover_button_link"] = [
'label' => esc_html__('Button Link', 'dipi-divi-pixel'),
'type' => 'text',
'default' => '#',
'show_if' => ['use_content_hover_button' => 'on'],
'toggle_slug' => 'content_hover',
];
$fields["content_hover_button_link_target"] = [
'label' => esc_html__('Button Link Target', 'dipi-divi-pixel'),
'type' => 'select',
'option_category' => 'layout',
'default' => 'same_window',
'default_on_child' => true,
'options' => [
'same_window' => esc_html__('In The Same Window', 'dipi-divi-pixel'),
'new_window' => esc_html__('In The New Window', 'dipi-divi-pixel'),
],
'show_if' => ['use_content_hover_button' => 'on'],
'toggle_slug' => 'content_hover',
];
$fields["hover_type"] = [
'label' => esc_html__('Hover Type', 'dipi-divi-pixel'),
'type' => 'select',
'toggle_slug' => 'settings',
'default' => 'slide',
'options' => [
'slide' => esc_html__('Slide', 'dipi-divi-pixel'),
'fade' => esc_html__('Fade', 'dipi-divi-pixel'),
'zoom' => esc_html__('Zoom', 'dipi-divi-pixel'),
],
];
$fields["hover_direction"] = [
'label' => esc_html__('Direction', 'dipi-divi-pixel'),
'type' => 'select',
'toggle_slug' => 'settings',
'default' => 'top',
'options' => [
'top' => esc_html__('Bottom to Top', 'dipi-divi-pixel'),
'bottom' => esc_html__('Top to Bottom', 'dipi-divi-pixel'),
'left' => esc_html__('Left to Right', 'dipi-divi-pixel'),
'right' => esc_html__('Right to Left', 'dipi-divi-pixel'),
],
'show_if_not' => [
'hover_type' => ['zoom', 'fade'],
],
];
$fields["animation_speed"] = [
'label' => esc_html__('Animation Speed', 'dipi-divi-pixel'),
'type' => 'range',
'option_category' => 'basic_option',
'default' => '600ms',
'fixed_unit' => 'ms',
'range_settings' => [
'min' => 100,
'max' => 3000,
'step' => 100,
],
'toggle_slug' => 'settings',
];
$fields["hover_box_align_front"] = [
'label' => esc_html__('Content Align', 'dipi-divi-pixel'),
'type' => 'select',
'default' => 'center',
'toggle_slug' => 'settings',
'options' => [
'top_left' => esc_html__('Top Left', 'dipi-divi-pixel'),
'top' => esc_html__('Center Top', 'dipi-divi-pixel'),
'top_right' => esc_html__('Top Right', 'dipi-divi-pixel'),
'left' => esc_html__('Left', 'dipi-divi-pixel'),
'center' => esc_html__('Center', 'dipi-divi-pixel'),
'right' => esc_html__('Right', 'dipi-divi-pixel'),
'bottom_left' => esc_html__('Bottom Left', 'dipi-divi-pixel'),
'bottom' => esc_html__('Center Bottom', 'dipi-divi-pixel'),
'bottom_right' => esc_html__('Bottom Right', 'dipi-divi-pixel'),
],
];
$fields["hover_box_align_back"] = [
'label' => esc_html__('Hover Content Align', 'dipi-divi-pixel'),
'type' => 'select',
'default' => 'center',
'toggle_slug' => 'settings',
'options' => [
'top_left' => esc_html__('Top Left', 'dipi-divi-pixel'),
'top' => esc_html__('Center Top', 'dipi-divi-pixel'),
'top_right' => esc_html__('Top Right', 'dipi-divi-pixel'),
'left' => esc_html__('Left', 'dipi-divi-pixel'),
'center' => esc_html__('Center', 'dipi-divi-pixel'),
'right' => esc_html__('Right', 'dipi-divi-pixel'),
'bottom_left' => esc_html__('Bottom Left', 'dipi-divi-pixel'),
'bottom' => esc_html__('Center Bottom', 'dipi-divi-pixel'),
'bottom_right' => esc_html__('Bottom Right', 'dipi-divi-pixel'),
],
];
$fields["box_height"] = [
'label' => esc_html__('Box Height', 'dipi-divi-pixel'),
'type' => 'range',
'option_category' => 'basic_option',
'default' => '400px',
'range_settings' => [
'min' => 1,
'max' => 1000,
'step' => 1,
],
'toggle_slug' => 'settings',
'mobile_options' => true,
];
$additional_options = [];
$additional_options['content_bg_color'] = [
'label' => esc_html__('Content Background', 'dipi-divi-pixel'),
'type' => 'background-field',
'base_name' => "content_bg",
'context' => "content_bg",
'option_category' => 'layout',
'custom_color' => true,
'default' => ET_Global_Settings::get_value('all_buttons_bg_color'),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => "content_background",
'background_fields' => array_merge(
ET_Builder_Element::generate_background_options('content_bg', 'gradient', "advanced", "content_background", "content_bg_gradient"),
ET_Builder_Element::generate_background_options("content_bg", "color", "advanced", "content_background", "content_bg_color"),
ET_Builder_Element::generate_background_options("content_bg", "image", "advanced", "content_background", "content_bg_image")
),
];
$additional_options['content_hover_bg_color'] = [
'label' => esc_html__('Hover Background', 'dipi-divi-pixel'),
'type' => 'background-field',
'base_name' => "content_hover_bg",
'context' => "content_hover_bg",
'option_category' => 'layout',
'custom_color' => true,
'default' => ET_Global_Settings::get_value('all_buttons_bg_color'),
'depends_show_if' => 'on',
'tab_slug' => 'advanced',
'toggle_slug' => "content_hover_background",
'background_fields' => array_merge(
ET_Builder_Element::generate_background_options('content_hover_bg', 'gradient', "advanced", "content_hover_background", "content_hover_bg_gradient"),
ET_Builder_Element::generate_background_options("content_hover_bg", "color", "advanced", "content_hover_background", "content_hover_bg_color"),
ET_Builder_Element::generate_background_options("content_hover_bg", "image", "advanced", "content_hover_background", "content_hover_bg_image")
),
];
$additional_options = array_merge($additional_options, $this->generate_background_options("content_bg", 'skip', "advanced", "content_background", "content_bg_gradient"));
$additional_options = array_merge($additional_options, $this->generate_background_options("content_bg", 'skip', "advanced", "content_background", "content_bg_color"));
$additional_options = array_merge($additional_options, $this->generate_background_options("content_bg", 'skip', "advanced", "content_background", "content_bg_image"));
$additional_options = array_merge($additional_options, $this->generate_background_options("content_hover_bg", 'skip', "advanced", "content_hover_background", "content_hover_bg_gradient"));
$additional_options = array_merge($additional_options, $this->generate_background_options("content_hover_bg", 'skip', "advanced", "content_hover_background", "content_hover_bg_color"));
$additional_options = array_merge($additional_options, $this->generate_background_options("content_hover_bg", 'skip', "advanced", "content_hover_background", "content_hover_bg_image"));
return array_merge($fields, $additional_options);
}
public function get_advanced_fields_config()
{
$advanced_fields = [];
$advanced_fields["text"] = false;
$advanced_fields["text_shadow"] = false;
$advanced_fields["fonts"] = false;
$advanced_fields["borders"]["default"] = [
'css' => [
'main' => [
'border_radii' => "%%order_class%%,
%%order_class%% .dipi-hover-box-container,
%%order_class%% .dipi-hover-box-content,
%%order_class%% .dipi-hover-box-hover",
'border_styles' => "%%order_class%% .dipi-hover-box-container",
],
],
];
$advanced_fields["fonts"]["content_title"] = [
'label' => esc_html__('Title', 'dipi-divi-pixel'),
'css' => [
'main' => "%%order_class%% .dipi-hover-box-content .dipi-hover-box-heading",
],
'important' => 'all',
'hide_text_align' => true,
'toggle_slug' => 'content_text',
'sub_toggle' => 'title',
'line_height' => [
'range_settings' => [
'min' => '1',
'max' => '3',
'step' => '0.1',
],
],
];
$advanced_fields["fonts"]["content_desc"] = [
'label' => esc_html__('Description', 'dipi-divi-pixel'),
'css' => [
'main' => "%%order_class%% .dipi-hover-box-content .dipi-desc",
],
'important' => 'all',
'hide_text_align' => true,
'toggle_slug' => 'content_text',
'sub_toggle' => 'desc',
'line_height' => [
'range_settings' => [
'min' => '1',
'max' => '3',
'step' => '0.1',
],
],
];
$advanced_fields["fonts"]["content_hover_title"] = [
'label' => esc_html__('Title', 'dipi-divi-pixel'),
'css' => [
'main' => "%%order_class%% .dipi-hover-box-hover .dipi-hover-box-heading",
],
'important' => 'all',
'hide_text_align' => true,
'toggle_slug' => 'content_hover_text',
'sub_toggle' => 'title',
'line_height' => [
'range_settings' => [
'min' => '1',
'max' => '3',
'step' => '0.1',
],
],
];
$advanced_fields["fonts"]["content_hover_desc"] = [
'label' => esc_html__('Description', 'dipi-divi-pixel'),
'css' => [
'main' => "%%order_class%% .dipi-hover-box-hover .dipi-desc",
],
'important' => 'all',
'hide_text_align' => true,
'toggle_slug' => 'content_hover_text',
'sub_toggle' => 'desc',
'line_height' => [
'range_settings' => [
'min' => '1',
'max' => '3',
'step' => '0.1',
],
],
];
$advanced_fields["box_shadow"]["default"] = [
'label' => esc_html__('Box Shadow', 'dipi-divi-pixel'),
'css' => [
'main' => "%%order_class%% .dipi-hover-box-container",
],
];
$advanced_fields['margin_padding'] = [
'css' => [
'margin' => "%%order_class%% .dipi-hover-box-content, %%order_class%% .dipi-hover-box-hover",
'padding' => "%%order_class%% .dipi-hover-box-content-innner, %%order_class%% .dipi-hover-box-hover-innner",
'important' => 'all',
],
];
$advanced_fields['button']["content_hover_button"] = [
'label' => esc_html__('Hover Button', 'dipi-divi-pixel'),
'css' => [
'main' => "%%order_class%% .dipi-hover-button",
'important' => 'all',
],
'use_alignment' => false,
'box_shadow' => [
'css' => [
'main' => "%%order_class%% .dipi-hover-button",
'important' => true,
],
],
'borders' => [
'css' => [
'main' => "%%order_class%% .dipi-hover-button",
'important' => true,
],
],
'margin_padding' => [
'css' => [
'main' => "%%order_class%% .dipi-hover-button.et_pb_button",
'important' => true,
],
],
];
$advanced_fields['borders']['content_image'] = [
'css' => [
'main' => [
'border_radii' => "%%order_class%% .dipi-hover-box-content .dipi-image-wrap img",
'border_styles' => "%%order_class%% .dipi-hover-box-content .dipi-image-wrap img",
],
],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
'depends_on' => ['use_content_icon'],
'depends_show_if' => 'off',
];
$advanced_fields['box_shadow']['content_image'] = [
'label' => esc_html__('Content Image Box Shadow', 'dipi-divi-pixel'),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'show_if' => ['use_content_icon' => 'off'],
'css' => [
'main' => '%%order_class%% .dipi-hover-box-content .dipi-image-wrap img',
'overlay' => 'inset',
],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_icon_image',
];
$advanced_fields['borders']['content_hover_image'] = [
'css' => [
'main' => [
'border_radii' => "%%order_class%% .dipi-hover-box-hover .dipi-image-wrap img",
'border_styles' => "%%order_class%% .dipi-hover-box-hover .dipi-image-wrap img",
],
],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
'depends_on' => ['use_content_hover_icon'],
'depends_show_if' => 'off',
];
$advanced_fields['box_shadow']['content_hover_icon_image'] = [
'label' => esc_html__('Hover Image Box Shadow', 'dipi-divi-pixel'),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'show_if' => ['use_content_hover_icon' => 'off'],
'css' => [
'main' => '%%order_class%% .dipi-hover-box-hover .dipi-image-wrap img',
'overlay' => 'inset',
],
'tab_slug' => 'advanced',
'toggle_slug' => 'content_hover_icon_image',
];
return $advanced_fields;
}
public function _render_content($args = [])
{
if('on' == $this->props['use_content_icon']) {
$content_circle_icon_class = ('on' === $this->props['content_circle_icon']) ? ' dipi-content-icon-circle' : '';
$content_border_icon_class = ('on' === $this->props['content_circle_border']) ? ' dipi-content-icon-border' : '';
$content_icon = et_pb_process_font_icon($this->props['content_icon']);
$content_icon_image = sprintf(
'<div class="dipi-content-image-icon-wrap dipi-icon-wrap">
<span class="et-pb-icon et-pb-font-icon dipi-hover-box-content-icon%2$s%3$s">%1$s</span>
</div>',
esc_attr($content_icon),
$content_circle_icon_class,
$content_border_icon_class
);
} else {
$content_icon_image = sprintf(
'<div class="dipi-content-image-icon-wrap dipi-image-wrap">
<img src="%1$s" alt="">
</div>',
esc_attr($this->props['content_image'])
);
}
$content_title = '';
if( isset($this->props['content_title'] ) ) {
$content_title = sprintf('
<h2 class="dipi-hover-box-heading">%1$s</h2>',
esc_attr($this->props['content_title'])
);
}
$body_text = '';
if( isset($this->props['body_text'] ) ) {
$body_text = sprintf('
<div class="dipi-desc">%1$s</div>',
$this->sanitize_content($this->props['body_text'])
);
}
$content_parallax_bg = '';
if ('on' == $this->props["content_bg_parallax"]) {
$content_parallax_bg = $this->_dipi_parallax_image_bg("content_bg");
}
return sprintf('
<div class="dipi-hover-box-content">
%1$s
<div class="dipi-hover-box-content-innner">
%2$s
<div class="dipi-text">
%3$s
%4$s
</div>
</div>
</div>
',
$content_parallax_bg,
$content_icon_image,
$content_title,
$body_text
);
}
/**
* Render function for back Flipbox
*/
public function _render_content_hover($args = [])
{
if( 'on' == $this->props['use_content_hover_icon'] ) {
$hover_circle_icon_class = ('on' === $this->props['content_circle_icon']) ? ' dipi-hover-icon-circle' : '';
$hover_border_icon_class = ('on' === $this->props['content_circle_border']) ? ' dipi-hover-icon-border' : '';
$content_hover_icon = et_pb_process_font_icon( $this->props['content_hover_icon'] );
$content_hover_icon_image = sprintf('
<div class="dipi-hover-image-icon-wrap dipi-icon-wrap">
<span class="et-pb-icon et-pb-font-icon dipi-hover-box-hover-icon %2$s%3$s">
%1$s
</span>
</div>',
esc_attr($content_hover_icon),
$hover_circle_icon_class,
$hover_border_icon_class
);
} else {
$content_hover_image = $this->props['content_hover_image'];
$content_hover_icon_image = sprintf('
<div class="dipi-hover-image-icon-wrap dipi-image-wrap">
<img class="dipi-hover-box-hover-imge" src="%1$s" alt="">
</div>',
$content_hover_image
);
}
/**
* Hover Title
*/
$content_hover_title = '';
if( isset($this->props['content_hover_title']) ) {
$content_hover_title = sprintf('
<h2 class="dipi-hover-box-heading">
%1$s
</h2>',
esc_attr( $this->props['content_hover_title'] )
);
}
/**
* Hover Content
*/
$content_hover_content = '';
if( isset($this->props['content_hover_content']) ) {
$content_hover_content = sprintf('
<div class="dipi-desc">
%1$s
</div>',
$this->sanitize_content($this->props['content_hover_content'])
);
}
/**
* Hover Button
*/
$content_hover_button_rel = $this->props['content_hover_button_rel'];
$use_content_hover_button = $this->props['use_content_hover_button'];
$content_hover_button_text = $this->props['content_hover_button_text'];
$content_hover_button_link = $this->props['content_hover_button_link'];
$content_hover_button_link_target = ('new_window' == $this->props['content_hover_button_link_target']) ? '_blank' : '';
$content_hover_button_icon = $this->props['content_hover_button_icon'];
$content_hover_button = 'on' == $use_content_hover_button ? $this->render_button([
'button_classname' => ["dipi-hover-button"],
'button_rel' => $content_hover_button_rel,
'button_text' => $content_hover_button_text,
'button_url' => $content_hover_button_link,
'custom_icon' => $content_hover_button_icon,
'has_wrapper' => false,
'url_new_window' => $content_hover_button_link_target,
]) : '';
$content_hover_parallax_bg = 'on' == $this->props["content_hover_bg_parallax"] ? $this->_dipi_parallax_image_bg("content_hover_bg") : '';
return sprintf('
<div class="dipi-hover-box-hover">
%1$s
<div class="dipi-hover-box-hover-innner">
%2$s
<div class="dipi-text">
%3$s
%4$s
</div>
%5$s
</div>
</div>
',
$content_hover_parallax_bg,
$content_hover_icon_image,
$content_hover_title,
$content_hover_content,
$content_hover_button
);
}
/**
* Background Process
*/
public function _dipi_process_background(string $class_name, string $base_name, $render_slug)
{
$background_images = [];
$background_style = '';
$use_bg_gradient = $this->props["{$base_name}_use_color_gradient"];
$bg_type = $this->props["{$base_name}_color_gradient_type"];
$bg_direction = $this->props["{$base_name}_color_gradient_direction"];
$bg_direction_radial = $this->props["{$base_name}_color_gradient_direction_radial"];
$bg_start = $this->props["{$base_name}_color_gradient_start"];
$bg_end = $this->props["{$base_name}_color_gradient_end"];
$bg_start_position = $this->props["{$base_name}_color_gradient_start_position"];
$bg_end_position = $this->props["{$base_name}_color_gradient_end_position"];
$bg_overlays_image = $this->props["{$base_name}_color_gradient_overlays_image"];
$has_bg_gradient = false;
$has_bg_image = false;
// Gradient
if ('on' === $use_bg_gradient) {
$direction = $bg_type === 'linear' ? $bg_direction : "circle at {$bg_direction_radial}";
$start_position = et_sanitize_input_unit($bg_start_position, false, '%');
$end_position = et_sanitize_input_unit($bg_end_position, false, '%');
$gradient_bg = "{$bg_type}-gradient({$direction}, {$bg_start} {$start_position},{$bg_end} {$end_position})";
if (!empty($gradient_bg)) {
$background_images[] = $gradient_bg;
}
$has_bg_gradient = true;
}
$bg_image = $this->props["{$base_name}_image"];
$parallax = $this->props["{$base_name}_parallax"];
$is_bg_image_active = '' !== $bg_image && 'on' !== $parallax;
if ($is_bg_image_active) {
$has_bg_image = true;
$bg_size = $this->props["{$base_name}_size"];
$bg_position = $this->props["{$base_name}_position"];
$bg_repeat = $this->props["{$base_name}_repeat"];
$bg_blend = $this->props["{$base_name}_blend"];
if ('' !== $bg_size) {
$background_style .= sprintf(
'background-size: %1$s !important; ',
esc_html($bg_size)
);
}
if ('' !== $bg_position) {
$background_style .= sprintf(
'background-position: %1$s !important; ',
esc_html(str_replace('_', ' ', $bg_position))
);
}
if ('' !== $bg_repeat) {
$background_style .= sprintf(
'background-repeat: %1$s !important; ',
esc_html($bg_repeat)
);
}
if ('' !== $bg_blend) {
$background_style .= sprintf(
'background-blend-mode: %1$s !important;',
esc_html($bg_blend)
);
}
$background_images[] = sprintf('url(%1$s)', esc_html($bg_image));
}
if (!empty($background_images)) {
if ('on' !== $bg_overlays_image) {
$background_images = array_reverse($background_images);
}
$background_style .= sprintf(
'background-image: %1$s !important;',
esc_html(join(', ', $background_images))
);
}
if (!$has_bg_gradient || !$has_bg_image) {
$background_color = $this->props["{$base_name}_color"];
if ('' !== $background_color) {
$background_style .= sprintf(
'background-color: %1$s !important; ',
esc_html($background_color)
);
}
}
if ('' !== $background_style) {
ET_Builder_Element::set_style($render_slug, array(
'selector' => "%%order_class%% {$class_name}",
'declaration' => rtrim($background_style),
));
}
}
/**
* Parallax Image Background
*/
public function _dipi_parallax_image_bg($base_name)
{
$bg_image = $this->props["{$base_name}_image"];
$parallax = $this->props["{$base_name}_parallax"];
$parallax_method = $this->props["{$base_name}_parallax_method"];
$parallax_classname = [];
if ('' !== $bg_image && 'on' === $parallax) {
$parallax_classname[] = 'et_parallax_bg';
if ('off' === $parallax_method) {
$parallax_classname[] = 'et_pb_parallax_css';
}
}
return sprintf(
'<span class="et_parallax_bg_wrap">
<span class="%1$s" style="background-image: url(%2$s);"></span>
</span>',
esc_attr(implode(' ', $parallax_classname)),
esc_url($bg_image)
);
}
/**
* Render
*/
public function render($attrs, $content = null, $render_slug)
{
$content_icon_color = $this->props['content_icon_color'];
$content_circle_icon = $this->props['content_circle_icon'];
$content_circle_color = $this->props['content_circle_color'];
$content_circle_border = $this->props['content_circle_border'];
$content_circle_border_color = $this->props['content_circle_border_color'];
$content_icon_size = $this->props['content_icon_size'];
$content_image_width = $this->props['content_image_width'];
$content_hover_icon_color = $this->props['content_hover_icon_color'];
$content_hover_circle_icon = $this->props['content_hover_circle_icon'];
$content_hover_circle_color = $this->props['content_hover_circle_color'];
$content_hover_circle_border = $this->props['content_hover_circle_border'];
$content_hover_circle_border_color = $this->props['content_hover_circle_border_color'];
$content_hover_icon_size = $this->props['content_hover_icon_size'];
$content_hover_image_width = $this->props['content_hover_image_width'];
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-content, %%order_class%% .dipi-hover-box-hover, %%order_class%% .dipi-hover-box-container',
'declaration' => "height: {$this->props['box_height']};",
]);
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-container, %%order_class%% .dipi-hover-box-content, %%order_class%% .dipi-hover-box-hover',
'declaration' => "min-height: {$this->props['box_height']}; width: 100%;",
]);
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-hover-box-content-icon',
'declaration' => "color: {$content_icon_color} !important;",
]);
if ('on' == $content_circle_icon):
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-content-icon-circle',
'declaration' => "background-color: {$content_circle_color} !important;",
]);
endif;
if ('on' == $content_circle_border):
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-content-icon-border',
'declaration' => "border-color: {$content_circle_border_color} !important;",
]);
endif;
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-hover-box-content-icon',
'declaration' => "font-size: {$content_icon_size} !important;",
]);
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-hover-box-hover-icon',
'declaration' => "color: {$content_hover_icon_color} !important;",
]);
if ('on' == $content_hover_circle_icon):
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-hover-icon-circle',
'declaration' => "background-color: {$content_hover_circle_color} !important;",
]);
endif;
if ('on' == $content_hover_circle_border):
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-hover-icon-border',
'declaration' => "border-color: {$content_hover_circle_border_color} !important;",
]);
endif;
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-hover-box-hover-icon',
'declaration' => "font-size: {$content_hover_icon_size} !important;",
]);
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-content .dipi-image-wrap',
'declaration' => "max-width: {$content_image_width} !important;",
]);
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-hover .dipi-image-wrap',
'declaration' => "max-width: {$content_hover_image_width} !important;",
]);
\ET_Builder_Element::set_style($render_slug, [
'selector' => '%%order_class%% .dipi-hover-box-container .dipi-hover-box-content, %%order_class%% .dipi-hover-box-container .dipi-hover-box-hover',
'declaration' => "transition-duration: {$this->props['animation_speed']} !important;",
]);
$this->_dipi_process_background(".dipi-hover-box-content", "content_bg", $render_slug);
$this->_dipi_process_background(".dipi-hover-box-hover", "content_hover_bg", $render_slug);
$hover_box_animation = 'dipi-hover-box-slide-top';
if ('slide' === $this->props['hover_type']) {
$hover_box_animation = "dipi-hover-box-slide-{$this->props['hover_direction']}";
} else if ('fade' === $this->props['hover_type']) {
$hover_box_animation = 'dipi-hover-box-fade';
} else if ('zoom' === $this->props['hover_type']) {
$hover_box_animation = 'dipi-hover-box-zoom';
}
$hover_box_align_front_class = sprintf(
'hover_box_align_front_%1$s',
$this->props['hover_box_align_front']
);
$hover_box_align_back_class = sprintf(
'hover_box_align_back_%1$s',
$this->props['hover_box_align_back']
);
return sprintf(
'<div class="dipi-hover-box-container %3$s %4$s %5$s">
<div class="dipi-hover-box-inner-wrapper">
%1$s
%2$s
</div>
</div>',
$this->_render_content([]),
$this->_render_content_hover([]),
$hover_box_animation,
$hover_box_align_front_class,
$hover_box_align_back_class
);
}
}
new DIPI_HoverBox;