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', esc_attr($this->props['html_tag']), $this->render_title() ); } } new DTQ_Gradient_Heading();