slug = 'ba_gradient_heading';
$this->vb_support = 'on';
$this->name = esc_html__('Gradient Heading', 'addons-for-divi');
$this->icon_path = $this->dtl_icon_path('heading');
$this->settings_modal_toggles = array(
'general' => array(
'toggles' => array(
'content' => esc_html__('Content', 'addons-for-divi'),
),
),
'advanced' => array(
'toggles' => array(
'gradient' => esc_html__('Gradient', 'addons-for-divi'),
'text' => esc_html__('Text', 'addons-for-divi'),
),
),
);
$this->custom_css_fields = array(
'title' => array(
'label' => esc_html__('Title', 'addons-for-divi'),
'selector' => '%%order_class%% .dtq-gradient-heading',
),
);
}
public function get_fields()
{
$content = array(
'title' => array(
'label' => esc_html__('Title Text', 'addons-for-divi'),
'Description' => esc_html__('Define the title text. Use
for line break.', 'addons-for-divi'),
'type' => 'textarea',
'default' => '',
'toggle_slug' => 'content',
),
'use_link' => array(
'label' => esc_html__('Use Link', 'addons-for-divi'),
'Description' => esc_html__('If enable, title will be render with tag.', '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',
),
'link_url' => array(
'label' => esc_html__('Link Url', 'addons-for-divi'),
'Description' => esc_html__('Define the link url for your title.', 'addons-for-divi'),
'type' => 'text',
'default' => '',
'toggle_slug' => 'content',
'show_if' => array(
'use_link' => 'on',
),
),
'link_options' => array(
'type' => 'multiple_checkboxes',
'default' => 'off|off',
'options' => array(
'link_target' => 'Open in new window',
'link_rel' => 'Add nofollow',
),
'toggle_slug' => 'content',
'show_if' => array(
'use_link' => 'on',
),
),
'html_tag' => array(
'label' => esc_html__('html Tag', 'addons-for-divi'),
'Description' => esc_html__('Define html heading tag for your title.', 'addons-for-divi'),
'type' => 'multiple_buttons',
'toggle_slug' => 'content',
'default' => 'h1',
'options' => array(
'h1' => array('title' => esc_html__('h1', 'addons-for-divi')),
'h2' => array('title' => esc_html__('h2', 'addons-for-divi')),
'h3' => array('title' => esc_html__('h3', 'addons-for-divi')),
'h4' => array('title' => esc_html__('h4', 'addons-for-divi')),
'h5' => array('title' => esc_html__('h5', 'addons-for-divi')),
'h6' => array('title' => esc_html__('h6', 'addons-for-divi')),
),
),
);
$styles = array(
'gradient_type' => array(
'label' => esc_html__('Gradient Type', 'addons-for-divi'),
'Description' => esc_html__('Here you can define linear/radial gradient type.', 'addons-for-divi'),
'type' => 'select',
'tab_slug' => 'advanced',
'toggle_slug' => 'gradient',
'default' => 'linear',
'options' => array(
'linear' => esc_html__('Linear', 'addons-for-divi'),
'radial' => esc_html__('Radial', 'addons-for-divi'),
),
),
'primary_color' => array(
'label' => esc_html__('Primary Color', 'addons-for-divi'),
'Description' => esc_html__('Define primary color for the gradient.', 'addons-for-divi'),
'type' => 'color-alpha',
'custom_color' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'gradient',
'default' => $this->default_color,
),
'primary_color_location' => array(
'label' => esc_html__('Location', 'addons-for-divi'),
'Description' => esc_html__('Here you can define primary color location for the gradient.', 'addons-for-divi'),
'type' => 'range',
'default' => 11,
'unitless' => true,
'range_settings' => array(
'min' => 0,
'max' => 100,
'step' => 1,
),
'toggle_slug' => 'gradient',
'tab_slug' => 'advanced',
),
'secondary_color' => array(
'label' => esc_html__('Secondary Color', 'addons-for-divi'),
'Description' => esc_html__('Define secondary color for the gradient.', 'addons-for-divi'),
'type' => 'color-alpha',
'custom_color' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'gradient',
'default' => '#e02b20',
),
'secondary_color_location' => array(
'label' => esc_html__('Location', 'addons-for-divi'),
'Description' => esc_html__('Here you can define secondary color location for the gradient.', 'addons-for-divi'),
'type' => 'range',
'default' => 37,
'unitless' => true,
'range_settings' => array(
'min' => 0,
'max' => 100,
'step' => 1,
),
'toggle_slug' => 'gradient',
'tab_slug' => 'advanced',
),
'angle' => array(
'label' => esc_html__('Gradient Angle', 'addons-for-divi'),
'Description' => esc_html__('Define custom gradient angle to use for linear gradient type.', 'addons-for-divi'),
'type' => 'range',
'default' => 130,
'unitless' => true,
'range_settings' => array(
'min' => 0,
'max' => 360,
'step' => 1,
),
'toggle_slug' => 'gradient',
'tab_slug' => 'advanced',
'show_if' => array(
'gradient_type' => 'linear',
),
),
'radial_position' => array(
'label' => esc_html__('Radial Position', 'addons-for-divi'),
'Description' => esc_html__('Choose radial position for the gradient text.', 'addons-for-divi'),
'type' => 'select',
'tab_slug' => 'advanced',
'toggle_slug' => 'gradient',
'default' => 'center center',
'options' => array(
'center center' => esc_html__('Center Center', 'addons-for-divi'),
'bottom center' => esc_html__('Bottom Center', 'addons-for-divi'),
'bottom left' => esc_html__('Bottom Left', 'addons-for-divi'),
'bottom right' => esc_html__('Bottom Right', 'addons-for-divi'),
'center left' => esc_html__('Center Left', 'addons-for-divi'),
'center right' => esc_html__('Center Right', 'addons-for-divi'),
'top center' => esc_html__('Top Center', 'addons-for-divi'),
'top left' => esc_html__('Top Left', 'addons-for-divi'),
'top right' => esc_html__('Top Right', 'addons-for-divi'),
),
'show_if' => array(
'gradient_type' => 'radial',
),
),
);
return array_merge($content, $styles);
}
public function get_advanced_fields_config()
{
$advanced_fields = array();
$advanced_fields['text'] = array();
$advanced_fields['text_shadow'] = array();
$advanced_fields['fonts'] = array();
$advanced_fields['fonts']['title'] = array(
'css' => array(
'main' => '%%order_class%% .dtq-gradient-heading',
),
'important' => 'all',
'hide_text_color' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'text',
'line_height' => array(
'range_settings' => array(
'min' => '1',
'max' => '3',
'step' => '.1',
),
),
'line_height' => array(
'default' => '1.2em',
),
'font_size' => array(
'default' => '60px',
),
'font' => array(
'default' => '|700|||||||',
),
);
return $advanced_fields;
}
public function render_title()
{
$title = $this->props['title'];
$use_link = $this->props['use_link'];
if ('on' === $use_link) {
$link_options = explode('|', $this->props['link_options']);
$link_target = 'on' === $link_options[0] ? '_blank' : '_self';
$link_rel = '';
if ('on' === $link_options[1]) {
$link_rel = sprintf('rel="nofollow"');
}
$title = sprintf(
'
%4$s
',
esc_attr($link_target),
esc_url($this->props['link_url']),
esc_attr($link_rel),
$this->props['title']
);
}
return $title;
}
public function render($attrs, $content, $render_slug)
{
$title_font_weight = explode('|', $this->props['title_font'])[1];
if ('700' === $title_font_weight) {
ET_Builder_Element::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .dtq-gradient-heading',
'declaration' => 'font-weight: bold;',
)
);
}
ET_Builder_Element::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .dtq-gradient-heading',
'declaration' => sprintf(
'font-size: %1$s;
line-height: %2$s;
color: %2$s;',
$this->props['title_font_size'],
$this->props['title_line_height'],
$this->props['primary_color']
),
)
);
ET_Builder_Element::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .dtq-gradient-heading',
'declaration' => sprintf(
'-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;'
),
)
);
if ('linear' === $this->props['gradient_type']) {
ET_Builder_Element::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .dtq-gradient-heading',
'declaration' => sprintf(
'
background-image: linear-gradient(%1$sdeg, %2$s %3$s%%, %4$s %5$s%%);',
$this->props['angle'],
$this->props['primary_color'],
$this->props['primary_color_location'],
$this->props['secondary_color'],
$this->props['secondary_color_location']
),
)
);
} elseif ('radial' === $this->props['gradient_type']) {
ET_Builder_Element::set_style(
$render_slug,
array(
'selector' => '%%order_class%% .dtq-gradient-heading',
'declaration' => sprintf(
'
background-image: radial-gradient(at %1$s, %2$s %3$s%%, %4$s %5$s%%);',
$this->props['radial_position'],
$this->props['primary_color'],
$this->props['primary_color_location'],
$this->props['secondary_color'],
$this->props['secondary_color_location']
),
)
);
}
return sprintf(
'<%1$s class="dtq-gradient-heading">%2$s%1$s>',
esc_attr($this->props['html_tag']),
$this->render_title()
);
}
}
new DTQ_Gradient_Heading();