vb_support = 'on';
$this->slug = 'ba_icon_box';
$this->name = esc_html__('Icon Box', 'addons-for-divi');
$this->icon_path = $this->dtl_icon_path('icon-box');
$this->settings_modal_toggles = array(
'general' => array(
'toggles' => array(
'content' => esc_html__('Content', 'addons-for-divi'),
),
),
'advanced' => array(
'toggles' => array(
'icon_box' => esc_html__('Alignment', 'addons-for-divi'),
'icon' => esc_html__('Icon', 'addons-for-divi'),
'badge' => esc_html__('Badge', 'addons-for-divi'),
'title' => esc_html__('Title', 'addons-for-divi'),
'desc' => esc_html__('Description', 'addons-for-divi'),
'border' => esc_html__('Border', 'addons-for-divi'),
'box_shadow' => esc_html__('Box Shadow', 'addons-for-divi'),
),
),
);
$this->custom_css_fields = array(
'icon_wrap' => array(
'label' => esc_html__('Icon Wrapper', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-iconbox__icon',
),
'icon' => array(
'label' => esc_html__('Icon', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-iconbox__icon i',
),
'icon_img' => array(
'label' => esc_html__('Icon Image', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-iconbox__icon img',
),
'badge' => array(
'label' => esc_html__('Badge', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-iconbox__badge',
),
'title' => array(
'label' => esc_html__('Title', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-iconbox__title',
),
'desc' => array(
'label' => esc_html__('Description', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-iconbox__desc',
),
);
}
public function get_fields()
{
$fields_top = array();
$fields = array();
$fields['icon'] = array(
'label' => esc_html__('Icon', 'addons-for-divi'),
'description' => esc_html__('Select icon for the icon box.', 'addons-for-divi'),
'type' => 'select_icon',
'toggle_slug' => 'content',
'show_if' => array(
'use_image' => 'off',
),
);
$fields['use_image'] = array(
'label' => esc_html__('Use Image', 'addons-for-divi'),
'description' => esc_html__('Here you can choose whether image should be used.', 'addons-for-divi'),
'type' => 'yes_no_button',
'option_category' => 'configuration',
'options' => array(
'on' => esc_html__('Yes', 'addons-for-divi'),
'off' => esc_html__('No', 'addons-for-divi'),
),
'default' => 'off',
'toggle_slug' => 'content',
);
$fields['icon_image'] = array(
'label' => esc_html__('Upload Icon Image', 'addons-for-divi'),
'description' => esc_html__('Upload an image or type in the URL of the image you would like to display for the icon box.', 'addons-for-divi'),
'type' => 'upload',
'option_category' => 'basic_option',
'upload_button_text' => esc_attr__('Upload an Icon', 'addons-for-divi'),
'choose_text' => esc_attr__('Choose an Icon', 'addons-for-divi'),
'update_text' => esc_attr__('Set As Icon', 'addons-for-divi'),
'toggle_slug' => 'content',
'show_if' => array(
'use_image' => 'on',
),
);
$fields['image_alt'] = array(
'label' => esc_html__('Image Alt Text', 'addons-for-divi'),
'description' => esc_html__('Define the HTML ALT text for your image here.', 'addons-for-divi'),
'type' => 'text',
'toggle_slug' => 'content',
'show_if' => array(
'use_image' => 'on',
),
);
$fields['badge_text'] = array(
'label' => esc_html__('Badge Text', 'addons-for-divi'),
'description' => esc_html__('Define the badge text for your icon box.', 'addons-for-divi'),
'type' => 'text',
'toggle_slug' => 'content',
'dynamic_content' => 'text',
);
$fields['title'] = array(
'label' => esc_html__('Title', 'addons-for-divi'),
'description' => esc_html__('Define the title text for your icon box.', 'addons-for-divi'),
'type' => 'text',
'toggle_slug' => 'content',
'dynamic_content' => 'text',
);
$fields['description'] = array(
'label' => esc_html__('Description', 'addons-for-divi'),
'description' => esc_html__('Define the description text for your icon box.', 'addons-for-divi'),
'type' => 'textarea',
'toggle_slug' => 'content',
'dynamic_content' => 'text',
);
$fields_top['icon__placement'] = array(
'label' => esc_html__('Icon Position', 'addons-for-divi'),
'description' => esc_html__('Select icon position. By selecting absolute position icon can be placed any where on the icon box.', 'addons-for-divi'),
'type' => 'select',
'toggle_slug' => 'icon',
'tab_slug' => 'advanced',
'default' => 'normal',
'options' => array(
'normal' => esc_html__('Normal', 'addons-for-divi'),
'absolute' => esc_html__('Absolute', 'addons-for-divi'),
),
);
$fields['icon_color'] = array(
'label' => esc_html__('Icon Color', 'addons-for-divi'),
'description' => esc_html__('Here you can define a custom color for the icon.', 'addons-for-divi'),
'type' => 'color-alpha',
'tab_slug' => 'advanced',
'toggle_slug' => 'icon',
'default' => '#333',
'hover' => 'tabs',
'show_if' => array(
'use_image' => 'off',
),
);
$fields['icon_size'] = array(
'label' => esc_html__('Icon Size', 'addons-for-divi'),
'description' => esc_html__('Here you can define a custom size for the icon.', 'addons-for-divi'),
'type' => 'range',
'mobile_options' => true,
'default' => '60px',
'range_settings' => array(
'min' => 0,
'step' => 1,
'max' => 200,
),
'toggle_slug' => 'icon',
'sub_toggle' => 'icon',
'tab_slug' => 'advanced',
);
$fields['icon_width'] = array(
'label' => esc_html__('Icon Width', 'addons-for-divi'),
'description' => esc_html__('Define static width for the icon box.', 'addons-for-divi'),
'type' => 'range',
'mobile_options' => true,
'default' => 'auto',
'default_unit' => 'px',
'range_settings' => array(
'min' => 1,
'step' => 1,
'max' => 500,
),
'toggle_slug' => 'icon',
'sub_toggle' => 'icon',
'tab_slug' => 'advanced',
);
$fields['icon_height'] = array(
'label' => esc_html__('Icon Height', 'addons-for-divi'),
'description' => esc_html__('Define static height for the icon box.', 'addons-for-divi'),
'type' => 'range',
'mobile_options' => true,
'default' => 'auto',
'default_unit' => 'px',
'range_settings' => array(
'min' => 1,
'step' => 1,
'max' => 500,
),
'toggle_slug' => 'icon',
'sub_toggle' => 'icon',
'tab_slug' => 'advanced',
);
$fields['icon_padding'] = array(
'label' => esc_html__('Icon Padding', 'addons-for-divi'),
'description' => esc_html__('Here you can define a custom padding for the icon.', 'addons-for-divi'),
'type' => 'custom_padding',
'mobile_options' => true,
'toggle_slug' => 'icon',
'tab_slug' => 'advanced',
'show_if' => array(
'use_image' => 'on',
),
);
$fields['icon_spacing'] = array(
'label' => esc_html__('Icon Bottom Spacing', 'addons-for-divi'),
'description' => esc_html__('Here you can define a custom spacing at the bottom of the icon.', 'addons-for-divi'),
'type' => 'range',
'default' => '10px',
'mobile_options' => true,
'range_settings' => array(
'min' => 0,
'max' => 200,
'step' => 1,
),
'toggle_slug' => 'icon',
'tab_slug' => 'advanced',
'show_if' => array(
'icon__placement' => 'normal',
),
);
$fields['icon_bg_rotate'] = array(
'label' => esc_html__('Icon Box Rotate', 'addons-for-divi'),
'description' => esc_html__('Rotate icon box, icon will be in same position. Only container box will be rotated.', 'addons-for-divi'),
'type' => 'range',
'default' => '0deg',
'fixed_unit' => 'deg',
'range_settings' => array(
'min' => -360,
'max' => 360,
'step' => 1,
),
'toggle_slug' => 'icon',
'tab_slug' => 'advanced',
);
$fields['content_alignment'] = array(
'label' => esc_html__('Alignment', 'addons-for-divi'),
'description' => esc_html__('Align content to the left, right or center.', 'addons-for-divi'),
'type' => 'text_align',
'option_category' => 'layout',
'options' => et_builder_get_text_orientation_options(array('justified')),
'options_icon' => 'module_align',
'default_on_front' => 'center',
'toggle_slug' => 'icon_box',
'tab_slug' => 'advanced',
);
$fields['title_spacing'] = array(
'label' => esc_html__('Title Spacing Bottom', 'addons-for-divi'),
'description' => esc_html__('Here you can define a custom spacing at the top of the title.', 'addons-for-divi'),
'type' => 'range',
'mobile_options' => true,
'default' => '10px',
'range_settings' => array(
'min' => 0,
'max' => 200,
'step' => 1,
),
'toggle_slug' => 'title',
'tab_slug' => 'advanced',
);
$icon_defaults = array(
'position' => 'left_top',
'offset_x' => '50%',
'offset_y' => '50%',
);
$badge_defaults = array(
'position' => 'right_top',
'offset_x' => '15px',
'offset_y' => '15px',
'padding' => '5px|15px|5px|15px',
'bg' => '#efefef',
'color' => '#ffffff',
);
$icon_additional_opts = $this->get_absolute_element_options('icon', 'Icon', 'icon', $icon_defaults, array('icon__placement' => 'absolute'));
$badge_additional_opts = $this->get_badge_options(
'badge',
esc_html__('Badge', 'addons-for-divi'),
'badge',
$badge_defaults
);
$icon_bg = $this->custom_background_fields(
'icon',
esc_html__('Icon', 'addons-for-divi'),
'advanced',
'icon',
array('color', 'gradient', 'hover'),
array(),
''
);
return array_merge($fields_top, $icon_additional_opts, $badge_additional_opts, $fields, $icon_bg);
}
public function get_advanced_fields_config()
{
$advanced_fields = array();
$advanced_fields['text'] = array();
$advanced_fields['text_shadow'] = array();
$advanced_fields['fonts'] = array();
$advanced_fields['borders']['icon'] = array(
'label_prefix' => esc_html__('Icon', 'addons-for-divi'),
'toggle_slug' => 'icon',
'css' => array(
'main' => array(
'border_radii' => '%%order_class%% .dtq-iconbox__icon',
'border_styles' => '%%order_class%% .dtq-iconbox__icon',
),
'important' => 'all',
),
'defaults' => array(
'border_radii' => 'on|0px|0px|0px|0px',
'border_styles' => array(
'width' => '0px',
'color' => '#333',
'style' => 'solid',
),
),
);
$advanced_fields['borders']['badge'] = array(
'label_prefix' => esc_html__('Badge', 'addons-for-divi'),
'toggle_slug' => 'badge',
'css' => array(
'main' => array(
'border_radii' => '%%order_class%% .dtq-iconbox__badge',
'border_styles' => '%%order_class%% .dtq-iconbox__badge',
),
'important' => 'all',
),
'defaults' => array(
'border_radii' => 'on|0px|0px|0px|0px',
'border_styles' => array(
'width' => '0px',
'color' => '#333',
'style' => 'solid',
),
),
);
$advanced_fields['height'] = array(
'css' => array(
'main' => '%%order_class%% .dtq-iconbox-inner',
'important' => 'all',
),
);
$advanced_fields['width'] = array(
'css' => array(
'main' => '%%order_class%% .dtq-iconbox-inner',
'important' => 'all',
),
);
$advanced_fields['margin_padding'] = array(
'css' => array(
'main' => '%%order_class%% .dtq-iconbox-inner',
'important' => 'all',
),
);
$advanced_fields['background'] = array(
'css' => array(
'main' => '%%order_class%% .dtq-iconbox-inner',
'important' => 'all',
),
);
$advanced_fields['borders']['box'] = array(
'toggle_slug' => 'border',
'css' => array(
'main' => array(
'border_radii' => '%%order_class%% .dtq-iconbox-inner',
'border_styles' => '%%order_class%% .dtq-iconbox-inner',
),
'important' => 'all',
),
);
$advanced_fields['box_shadow']['item'] = array(
'label' => esc_html__('Box Shadow', 'addons-for-divi'),
'css' => array(
'main' => '%%order_class%% .dtq-iconbox-inner',
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'box_shadow',
);
$advanced_fields['box_shadow']['icon'] = array(
'label' => esc_html__('Icon Box Shadow', 'addons-for-divi'),
'css' => array(
'main' => '%%order_class%% .dtq-iconbox__icon',
'important' => 'all',
),
'tab_slug' => 'advanced',
'toggle_slug' => 'icon',
);
$advanced_fields['fonts']['title'] = array(
'label' => esc_html__('Title', 'addons-for-divi'),
'css' => array(
'main' => '%%order_class%% .dtq-iconbox__title',
'important' => 'all',
),
'header_level' => array(
'default' => 'h3',
),
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'title',
'line_height' => array(
'default' => '1em',
),
'font_size' => array(
'default' => '22px',
),
);
$advanced_fields['fonts']['description'] = array(
'label' => esc_html__('Description', 'addons-for-divi'),
'css' => array(
'main' => '%%order_class%% .dtq-iconbox__desc',
),
'important' => 'all',
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'desc',
'show_if' => array(
'is_description_hide' => 'off',
),
'font_size' => array(
'default' => '14px',
),
);
$advanced_fields['fonts']['badge'] = array(
'label' => esc_html__('Badge', 'addons-for-divi'),
'css' => array(
'main' => '%%order_class%% .dtq-iconbox__badge',
),
'important' => 'all',
'hide_text_align' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'badge',
'line_height' => array(
'default' => '1em',
),
'font_size' => array(
'default' => '14px',
),
);
// Default values.
if (!dt_if_not_migrated()) {
// $advanced_fields['fonts']['title']['font_size']['default'] = '20px';
$advanced_fields['borders']['box']['defaults'] = array(
'border_styles' => array(
'width' => '1px',
'color' => '#EBEBEB',
),
);
} else {
// $advanced_fields['fonts']['title']['font_size']['default'] = '26px';
$advanced_fields['borders']['box']['defaults'] = array(
'border_styles' => array(
'width' => '0px',
),
);
}
return $advanced_fields;
}
public function render_icon()
{
$use_image = $this->props['use_image'];
$icon = $this->props['icon'];
$icon_image = $this->props['icon_image'];
$image_alt = $this->props['image_alt'];
$html = '';
if ('off' === $use_image) {
// Inject Font Awesome Manually!.
dtq_inject_fa_icons($this->props['icon']);
$icon = esc_attr(et_pb_process_font_icon($icon));
$html = '' . $icon . '';
} else {
$html = '';
}
if (!empty($icon) || !empty($icon_image)) {
return sprintf(
'