Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /proc/self/cwd/wp-content/plugins/bdthemes-element-pack/modules/svg-blob/widgets/ |
<?php
namespace ElementPack\Modules\SvgBlob\Widgets;
use ElementPack\Base\Module_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Image_Size;
use Elementor\Utils;
if (!defined('ABSPATH')) {
exit;
}
class Svg_Blob extends Module_Base {
public function get_name() {
return 'bdt-svg-blob';
}
public function get_title() {
return BDTEP . esc_html__('SVG Blob', 'bdthemes-element-pack');
}
public function get_icon() {
return 'bdt-wi-svg-blob';
}
public function get_categories() {
return ['element-pack'];
}
public function get_keywords() {
return ['svg-blob', 'svg', 'blob', 'image', 'morphing'];
}
public function get_style_depends() {
if ($this->ep_is_edit_mode()) {
return ['ep-styles'];
} else {
return ['ep-svg-blob'];
}
}
public function get_script_depends() {
if ($this->ep_is_edit_mode()) {
return ['animejs', 'ep-scripts'];
} else {
return ['animejs', 'ep-svg-blob'];
}
}
public function get_custom_help_url() {
return 'https://youtu.be/sgyUOC7TXPA';
}
protected function register_controls() {
$this->register_controls_blob_content();
$this->register_controls_style_blob();
$this->register_style_controls_gradient_blob();
}
private function register_controls_blob_content() {
$this->start_controls_section(
'svg_blob_section_content',
[
'label' => esc_html__('Blob Content', 'bdthemes-element-pack'),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'svg_blob_select_type',
[
'label' => esc_html__('Select Type', 'bdthemes-element-pack'),
'type' => Controls_Manager::SELECT,
'default' => 'images',
'options' => [
'images' => esc_html__('Image', 'bdthemes-element-pack'),
'color' => esc_html__('Color', 'bdthemes-element-pack'),
'gradient' => esc_html__('Gradient Color', 'bdthemes-element-pack'),
],
]
);
$this->add_control(
'svg_blob_image',
[
'label' => esc_html__('Choose Image', 'bdthemes-element-pack'),
'type' => Controls_Manager::MEDIA,
'media_type' => 'image',
'library_type' => 'image',
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'dynamic' => [
'active' => true,
],
'condition' => [
'svg_blob_select_type' => ['images'],
],
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'svg_blob_image_size',
'default' => 'large',
'separator' => 'none',
'condition' => [
'svg_blob_select_type' => ['images'],
],
]
);
$this->add_control(
'svg_blob_color_show_stroke',
[
'label' => esc_html__('Show Stroke', 'bdthemes-element-pack'),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__('Show', 'bdthemes-element-pack'),
'label_off' => esc_html__('Hide', 'bdthemes-element-pack'),
'return_value' => 'yes',
'default' => 'no',
'condition' => [
'svg_blob_select_type' => ['color'],
],
]
);
$this->add_control(
'svg_blob_shape_style',
[
'label' => esc_html__('Select Shape Style', 'bdthemes-element-pack'),
'type' => Controls_Manager::SELECT,
'options' => [
'shape-01' => esc_html__('Shape 01', 'bdthemes-element-pack'),
'shape-02' => esc_html__('Shape 02', 'bdthemes-element-pack'),
'shape-03' => esc_html__('Shape 03', 'bdthemes-element-pack'),
'shape-04' => esc_html__('Shape 04', 'bdthemes-element-pack'),
'shape-05' => esc_html__('Shape 05', 'bdthemes-element-pack'),
'shape-06' => esc_html__('Shape 06', 'bdthemes-element-pack'),
'shape-07' => esc_html__('Shape 07', 'bdthemes-element-pack'),
'shape-08' => esc_html__('Shape 08', 'bdthemes-element-pack'),
'shape-09' => esc_html__('Shape 09', 'bdthemes-element-pack'),
'shape-10' => esc_html__('Shape-10', 'bdthemes-element-pack'),
],
'default' => 'shape-01',
'dynamic' => ['active' => true],
'separator' => 'before',
]
);
// $this->add_control(
// 'svg_blob_easing_type',
// [
// 'label' => esc_html__('Animation Type', 'bdthemes-element-pack'),
// 'type' => Controls_Manager::SELECT,
// 'default' => 'easeInSine',
// 'frontend_available' => true,
// 'options' => [
// 'linear' => esc_html__('Linear', 'bdthemes-element-pack'),
// 'easeInQuad' => esc_html__('EaseInQuad', 'bdthemes-element-pack'),
// 'easeOutQuad' => esc_html__('EaseOutQuad', 'bdthemes-element-pack'),
// 'easeInOutQuad' => esc_html__('EaseInOutQuad', 'bdthemes-element-pack'),
// 'easeOutInQuad' => esc_html__('EaseOutInQuad', 'bdthemes-element-pack'),
// 'easeInCubic' => esc_html__('EaseInCubic', 'bdthemes-element-pack'),
// 'easeOutCubic' => esc_html__('EaseOutCubic', 'bdthemes-element-pack'),
// 'easeInOutCubic' => esc_html__('EaseInOutCubic', 'bdthemes-element-pack'),
// 'easeOutInCubic' => esc_html__('EaseOutInCubic', 'bdthemes-element-pack'),
// 'easeInQuart' => esc_html__('EaseInQuart', 'bdthemes-element-pack'),
// 'easeOutQuart' => esc_html__('EaseOutQuart', 'bdthemes-element-pack'),
// 'easeInOutQuart' => esc_html__('EaseInOutQuart', 'bdthemes-element-pack'),
// 'easeOutInQuart' => esc_html__('EaseOutInQuart', 'bdthemes-element-pack'),
// 'easeInQuint' => esc_html__('EaseInQuint', 'bdthemes-element-pack'),
// 'easeOutQuint' => esc_html__('EaseOutQuint', 'bdthemes-element-pack'),
// 'easeInOutQuint' => esc_html__('EaseInOutQuint', 'bdthemes-element-pack'),
// 'easeOutInQuint' => esc_html__('EaseOutInQuint', 'bdthemes-element-pack'),
// 'easeInSine' => esc_html__('EaseInSine', 'bdthemes-element-pack'),
// 'easeOutSine' => esc_html__('EaseOutSine', 'bdthemes-element-pack'),
// 'easeInOutSine' => esc_html__('EaseInOutSine', 'bdthemes-element-pack'),
// 'easeOutInSine' => esc_html__('EaseOutInSine', 'bdthemes-element-pack'),
// 'easeInExpo' => esc_html__('EaseInExpo', 'bdthemes-element-pack'),
// 'easeOutExpo' => esc_html__('EaseOutExpo', 'bdthemes-element-pack'),
// 'easeInOutExpo' => esc_html__('EaseInOutExpo', 'bdthemes-element-pack'),
// 'easeOutInExpo' => esc_html__('EaseOutInExpo', 'bdthemes-element-pack'),
// 'easeInCirc' => esc_html__('EaseInCirc', 'bdthemes-element-pack'),
// 'easeOutCirc' => esc_html__('EaseOutCirc', 'bdthemes-element-pack'),
// 'easeInOutCirc' => esc_html__('EaseInOutCirc', 'bdthemes-element-pack'),
// 'easeOutInCirc' => esc_html__('EaseOutInCirc', 'bdthemes-element-pack'),
// 'easeInBack' => esc_html__('EaseInBack', 'bdthemes-element-pack'),
// 'easeOutBack' => esc_html__('EaseOutBack', 'bdthemes-element-pack'),
// 'easeInOutBack' => esc_html__('EaseInOutBack', 'bdthemes-element-pack'),
// 'easeOutInBack' => esc_html__('EaseOutInBack', 'bdthemes-element-pack'),
// 'easeInBounce' => esc_html__('EaseInBounce', 'bdthemes-element-pack'),
// 'easeOutBounce' => esc_html__('EaseOutBounce', 'bdthemes-element-pack'),
// 'easeInOutBounce' => esc_html__('EaseInOutBounce', 'bdthemes-element-pack'),
// 'easeOutInBounce' => esc_html__('EaseOutInBounce', 'bdthemes-element-pack'),
// ],
// ]
// );
//
// $this->add_control(
// 'svg_blob_direction',
// [
// 'label' => esc_html__('Blob Direction', 'bdthemes-element-pack'),
// 'type' => Controls_Manager::SELECT,
// 'default' => 'alternate',
// 'frontend_available' => true,
// 'options' => [
// 'normal' => esc_html__('Normal', 'bdthemes-element-pack'),
// 'reverse' => esc_html__('Reverse', 'bdthemes-element-pack'),
// 'alternate' => esc_html__('Alternate', 'bdthemes-element-pack'),
// ],
// ]
// );
$this->add_control(
'svg_blob_loop',
[
'label' => esc_html__('Loop', 'bdthemes-element-pack'),
'type' => Controls_Manager::SWITCHER,
'default' => 'yes',
'frontend_available' => true,
]
);
$this->add_control(
'svg_blob_duration',
[
'label' => esc_html__('Duration', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'description' => esc_html__('Set the duration of the animation in millisecond.', 'bdthemes-element-pack'),
'range' => [
'px' => [
'min' => 0,
'max' => 10000,
'step' => 1,
],
],
'frontend_available' => true,
]
);
$this->add_control(
'svg_blob_delay',
[
'label' => esc_html__('Delay', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'description' => esc_html__('Set the duration of the animation in millisecond.', 'bdthemes-element-pack'),
'range' => [
'px' => [
'min' => 0,
'max' => 10000,
'step' => 1,
],
],
'frontend_available' => true,
]
);
$this->add_control(
'svg_blob_end_delay',
[
'label' => esc_html__('End Delay', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'description' => esc_html__('Set the end delay of the animation in millisecond.', 'bdthemes-element-pack'),
'range' => [
'px' => [
'min' => 0,
'max' => 10000,
'step' => 1,
],
],
'frontend_available' => true,
]
);
$this->end_controls_section();
}
private function register_controls_style_blob() {
$this->start_controls_section(
'svg_blob_section_style',
[
'label' => esc_html__('Blob Style', 'bdthemes-element-pack'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'svg_blob_fill_color',
[
'label' => esc_html__('SVG Color', 'bdthemes-element-pack'),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => [
'{{WRAPPER}} .bdt-svg-blob svg path' => 'fill: {{VALUE}};',
],
'condition' => [
'svg_blob_select_type' => ['color'],
]
]
);
$this->add_control(
'svg_blob_stroke_color',
[
'label' => esc_html__('Stroke Color', 'bdthemes-element-pack'),
'type' => Controls_Manager::COLOR,
'default' => '#BB004B',
'selectors' => [
'{{WRAPPER}} .bdt-svg-blob svg path' => 'stroke: {{VALUE}};',
],
'condition' => [
'svg_blob_color_show_stroke' => ['yes'],
'svg_blob_select_type' => ['color'],
]
]
);
$this->add_control(
'svg_blob_stroke_weight',
[
'label' => esc_html__('Stroke Weight', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'default' => [
'unit' => 'px',
'size' => 5,
],
'selectors' => [
'{{WRAPPER}} .bdt-svg-blob svg path' => 'stroke-width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'svg_blob_color_show_stroke' => ['yes'],
'svg_blob_select_type' => ['color'],
]
]
);
// SVG Gradient Color style
$this->add_control(
'svg_blob_gradient_color_primary',
[
'label' => esc_html__('Color Primary', 'bdthemes-element-pack'),
'type' => Controls_Manager::COLOR,
'condition' => [
'svg_blob_select_type' => ['gradient'],
],
]
);
$this->add_control(
'svg_blob_gradient_color_secondary',
[
'label' => esc_html__('Color Secondary', 'bdthemes-element-pack'),
'type' => Controls_Manager::COLOR,
'condition' => [
'svg_blob_select_type' => ['gradient'],
],
]
);
$this->add_responsive_control(
'svg_blob_width',
[
'label' => esc_html__('Width', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px', '%'],
'range' => [
'px' => [
'min' => 1,
'max' => 1200,
],
'%' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .bdt-svg-blob svg' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'svg_blob_height',
[
'label' => esc_html__('Height', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px', '%'],
'range' => [
'px' => [
'min' => 1,
'max' => 1200,
],
'%' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .bdt-svg-blob svg' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'svg_blob_opacity',
[
'label' => esc_html__('Opacity', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'max' => 1,
'min' => 0.10,
'step' => 0.01,
],
],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} .bdt-svg-blob svg > *' => 'opacity: {{SIZE}};',
],
]
);
$this->add_group_control(
Group_Control_Css_Filter::get_type(),
[
'name' => 'svg_blob_filters',
'selector' => '{{WRAPPER}} .bdt-svg-blob svg > *',
]
);
$this->end_controls_section();
}
private function register_style_controls_gradient_blob() {
$this->start_controls_section(
'svg_blob_gradient_section_style',
[
'label' => esc_html__('Advanced Blob Style', 'bdthemes-element-pack'),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => [
'svg_blob_select_type' => ['gradient'],
],
]
);
$this->add_control(
'svg_blob_offset_primary',
[
'label' => esc_html__('Primary Color Offset (%)', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'separator' => 'before',
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
],
'default' => [
'unit' => '%',
],
]
);
$this->add_control(
'svg_blob_offset_secondary',
[
'label' => esc_html__('Secondary Color Offset (%)', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
],
'default' => [
'unit' => '%',
],
]
);
$this->add_control(
'svg_blob_color_position_x1',
[
'label' => esc_html__('Position X1', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'separator' => 'before',
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
],
'step' => 0.5,
'default' => [
'unit' => '%',
],
]
);
$this->add_control(
'svg_blob_color_position_x2',
[
'label' => esc_html__('Position X2', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => '%',
],
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
],
'step' => 0.5,
]
);
$this->add_control(
'svg_blob_color_position_y1',
[
'label' => esc_html__('Position Y1', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => '%',
],
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
],
'step' => 0.5,
]
);
$this->add_control(
'svg_blob_color_position_y2',
[
'label' => esc_html__('Position Y2', 'bdthemes-element-pack'),
'type' => Controls_Manager::SLIDER,
'default' => [
'unit' => '%',
],
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 1,
'max' => 100,
],
],
'step' => 0.5,
]
);
$this->end_controls_section();
}
protected function render_shape_generator() {
$settings = $this->get_settings_for_display();
$shapes = [
'shape-01' => [
'M392,337.5Q351,425,243.5,436.5Q136,448,68.5,349Q1,250,70.5,154.5Q140,59,255.5,49.5Q371,40,402,145Q433,250,392,337.5Z',
'M387,325.5Q337,401,254.5,392.5Q172,384,126.5,317Q81,250,107.5,149.5Q134,49,246.5,55.5Q359,62,398,156Q437,250,387,325.5Z',
],
'shape-02' => [
'M423,312.5Q350,375,276,418Q202,461,142.5,395.5Q83,330,54.5,236Q26,142,111.5,81Q197,20,274,71.5Q351,123,423.5,186.5Q496,250,423,312.5Z',
'M412,333Q382,416,293,435Q204,454,155.5,386.5Q107,319,88.5,241Q70,163,144,137Q218,111,289,111.5Q360,112,401,181Q442,250,412,333Z',
],
'shape-03' => [
'M441.5,296Q458,342,401,348.5Q344,355,335.5,421Q327,487,278.5,464Q230,441,199.5,415.5Q169,390,113,390Q57,390,49,342Q41,294,82.5,258.5Q124,223,94.5,169Q65,115,120.5,119Q176,123,202,82.5Q228,42,267,60.5Q306,79,359,75Q412,71,442,111Q472,151,448.5,200.5Q425,250,441.5,296Z',
'M441.5,293.5Q445,337,415.5,369Q386,401,348.5,420Q311,439,269,453Q227,467,192.5,438Q158,409,122.5,389Q87,369,54.5,333.5Q22,298,70.5,260Q119,222,110.5,182.5Q102,143,120,99.5Q138,56,181,31.5Q224,7,266,39.5Q308,72,354.5,77Q401,82,397.5,134Q394,186,416,218Q438,250,441.5,293.5Z',
],
'shape-04' => [
'M428,282.5Q439,315,428,347.5Q417,380,386,395.5Q355,411,326.5,424.5Q298,438,266.5,436.5Q235,435,203.5,431.5Q172,428,136.5,420Q101,412,76.5,384.5Q52,357,61,318.5Q70,280,76,251Q82,222,71,184.5Q60,147,87,124.5Q114,102,150.5,103.5Q187,105,210.5,81Q234,57,267,55.5Q300,54,333.5,62Q367,70,387.5,98.5Q408,127,404.5,162.5Q401,198,409,224Q417,250,428,282.5Z',
'M436,282Q437,314,418,340Q399,366,367.5,374Q336,382,313,395.5Q290,409,260,449.5Q230,490,195.5,472Q161,454,153.5,408.5Q146,363,131,342.5Q116,322,85.5,302.5Q55,283,47,249Q39,215,49.5,181Q60,147,98.5,137Q137,127,156.5,104Q176,81,204.5,65Q233,49,268.5,43Q304,37,345,39Q386,41,378.5,98.5Q371,156,414,167.5Q457,179,446,214.5Q435,250,436,282Z',
],
'shape-05' => [
'M471,283Q453,316,421.5,334Q390,352,366,364.5Q342,377,326.5,406.5Q311,436,280.5,426Q250,416,215,441Q180,466,162,431Q144,396,119,379.5Q94,363,97,331Q100,299,67.5,274.5Q35,250,59,223Q83,196,100.5,175Q118,154,112.5,103.5Q107,53,142.5,41.5Q178,30,214,30.5Q250,31,286.5,28.5Q323,26,339,65.5Q355,105,402,105Q449,105,447,146Q445,187,467,218.5Q489,250,471,283Z',
'M455.5,281Q440,312,441,350.5Q442,389,416.5,416.5Q391,444,352.5,445.5Q314,447,282,443Q250,439,219.5,438Q189,437,149,440.5Q109,444,102,403.5Q95,363,86,334.5Q77,306,58,278Q39,250,64,224Q89,198,94,169Q99,140,112.5,109.5Q126,79,162,84Q198,89,224,89Q250,89,274,95.5Q298,102,320.5,112Q343,122,392.5,116Q442,110,443,148.5Q444,187,457.5,218.5Q471,250,455.5,281Z',
],
'shape-06' => [
'M438,272.5Q387,295,387,322.5Q387,350,383.5,389.5Q380,429,335,400.5Q290,372,270,397.5Q250,423,227.5,405.5Q205,388,157.5,415.5Q110,443,118.5,391.5Q127,340,103.5,322.5Q80,305,102,277.5Q124,250,86,217Q48,184,82,168.5Q116,153,129,127.5Q142,102,172,102Q202,102,226,70.5Q250,39,279.5,53.5Q309,68,339.5,76.5Q370,85,371,123Q372,161,429.5,167Q487,173,488,211.5Q489,250,438,272.5Z',
'M422.5,270Q372,290,375,316.5Q378,343,358.5,358Q339,373,323.5,400.5Q308,428,279,410Q250,392,221.5,409Q193,426,184.5,389Q176,352,161.5,338.5Q147,325,120.5,313Q94,301,109.5,275.5Q125,250,113,226Q101,202,89,163Q77,124,125,134Q173,144,174,81.5Q175,19,212.5,60.5Q250,102,270.5,113Q291,124,314.5,126Q338,128,345,152Q352,176,379.5,187.5Q407,199,440,224.5Q473,250,422.5,270Z',
],
'shape-07' => [
'M422.5,270Q372,290,375,316.5Q378,343,358.5,358Q339,373,323.5,400.5Q308,428,279,410Q250,392,221.5,409Q193,426,184.5,389Q176,352,161.5,338.5Q147,325,120.5,313Q94,301,109.5,275.5Q125,250,113,226Q101,202,89,163Q77,124,125,134Q173,144,174,81.5Q175,19,212.5,60.5Q250,102,270.5,113Q291,124,314.5,126Q338,128,345,152Q352,176,379.5,187.5Q407,199,440,224.5Q473,250,422.5,270Z',
'M363.5,269.5Q371,289,400.5,334.5Q430,380,386.5,379Q343,378,315,371.5Q287,365,268.5,368Q250,371,212.5,425.5Q175,480,182,407Q189,334,162,333.5Q135,333,89.5,325Q44,317,25,283.5Q6,250,67.5,230.5Q129,211,130.5,187.5Q132,164,139.5,136Q147,108,167.5,83.5Q188,59,219,63Q250,67,286.5,46.5Q323,26,319.5,92.5Q316,159,346.5,158.5Q377,158,431.5,165.5Q486,173,421,211.5Q356,250,363.5,269.5Z',
],
'shape-08' => [
'M450,279Q429,308,392.5,317.5Q356,327,352.5,356.5Q349,386,327,402.5Q305,419,277.5,456.5Q250,494,228.5,438.5Q207,383,194.5,363Q182,343,168,331.5Q154,320,128.5,309Q103,298,64.5,274Q26,250,72,228.5Q118,207,125,185.5Q132,164,152,153.5Q172,143,173,80.5Q174,18,212,69Q250,120,272,117.5Q294,115,311.5,128Q329,141,344,156Q359,171,370,189Q381,207,426,228.5Q471,250,450,279Z',
'M446.5,282.5Q449,315,395,315.5Q341,316,334,336Q327,356,324,412Q321,468,285.5,425.5Q250,383,225,393Q200,403,152,427Q104,451,129,385.5Q154,320,96.5,319Q39,318,39,284Q39,250,65.5,224.5Q92,199,101,174Q110,149,113,107.5Q116,66,151.5,61.5Q187,57,218.5,78.5Q250,100,278,89.5Q306,79,344.5,73Q383,67,383,110Q383,153,417,169Q451,185,447.5,217.5Q444,250,446.5,282.5Z',
],
'shape-09' => [
'M416,270Q374,290,372,313.5Q370,337,334,326.5Q298,316,290,332Q282,348,266,419Q250,490,231,428Q212,366,177,382.5Q142,399,98,396Q54,393,72,347.5Q90,302,97.5,276Q105,250,77,217.5Q49,185,54,148Q59,111,113.5,124.5Q168,138,196,154Q224,170,237,110Q250,50,264.5,105Q279,160,331,113.5Q383,67,364.5,124Q346,181,367.5,193Q389,205,423.5,227.5Q458,250,416,270Z',
'M345.5,268.5Q363,287,386,326Q409,365,368.5,361Q328,357,327,420Q326,483,288,487.5Q250,492,212.5,486.5Q175,481,185,403Q195,325,127,357Q59,389,79.5,344Q100,299,117.5,274.5Q135,250,92.5,217.5Q50,185,101,182Q152,179,175.5,179Q199,179,212.5,177.5Q226,176,238,107Q250,38,282,45Q314,52,344,65.5Q374,79,382,113.5Q390,148,414.5,168.5Q439,189,383.5,219.5Q328,250,345.5,268.5Z',
],
'shape-10' => [
'M430.5,283.5Q455,317,409.5,325Q364,333,356,359Q348,385,316.5,371.5Q285,358,267.5,422.5Q250,487,213,482.5Q176,478,197.5,385.5Q219,293,148,334.5Q77,376,136,322Q195,268,192.5,259Q190,250,138,223.5Q86,197,120,188.5Q154,180,133,120Q112,60,164,102.5Q216,145,233,136.5Q250,128,260.5,157.5Q271,187,324.5,130Q378,73,363,125.5Q348,178,411,177.5Q474,177,440,213.5Q406,250,430.5,283.5Z',
'M350.5,273.5Q394,297,403,332.5Q412,368,385.5,384Q359,400,335,419Q311,438,280.5,372Q250,306,242,302.5Q234,299,173.5,368.5Q113,438,96.5,406Q80,374,128.5,324Q177,274,136,262Q95,250,123,234Q151,218,152.5,199.5Q154,181,133.5,121.5Q113,62,149,55Q185,48,217.5,95Q250,142,282.5,95.5Q315,49,332.5,80.5Q350,112,351.5,143.5Q353,175,327.5,204Q302,233,304.5,241.5Q307,250,350.5,273.5Z',
],
];
return [
'first' => array_shift($shapes[$settings['svg_blob_shape_style']]),
'lasts' => json_encode($shapes[$settings['svg_blob_shape_style']]),
];
}
public function render_image($paths) {
$settings = $this->get_settings_for_display();
$id = $this->get_id();
$image = Group_Control_Image_Size::get_attachment_image_src($settings['svg_blob_image']['id'], 'svg_blob_image_size', $settings);
$image_url = !empty($image) ? $image : $settings['svg_blob_image']['url'];
?>
<clipPath id="blob-shape-<?php echo esc_attr($id); ?>">
<path d="<?php echo esc_attr($paths['first']); ?>" />
</clipPath>
<g clip-path="url(#blob-shape-<?php echo esc_attr($id); ?>)">
<image id="<?php echo esc_attr($settings['svg_blob_image']['id']) ?>" class="svg-blob-image" href="<?php echo esc_url($image_url); ?>" preserveAspectRatio="none"></image>
</g>
<?php
}
public function render_gradient($paths) {
$settings = $this->get_settings_for_display();
$id = $this->get_id();
$color_position = [
'position_x' => [
(!empty($settings['svg_blob_color_position_x1']['size'])) ? $settings['svg_blob_color_position_x1']['size'] . '%' : "0%",
(!empty($settings['svg_blob_color_position_x2']['size'])) ? $settings['svg_blob_color_position_x2']['size'] . '%' : "100%",
],
'position_y' => [
(!empty($settings['svg_blob_color_position_y1']['size'])) ? $settings['svg_blob_color_position_y1']['size'] . '%' : "70.711%",
(!empty($settings['svg_blob_color_position_y2']['size'])) ? $settings['svg_blob_color_position_y2']['size'] . '%' : "100%",
],
];
$gradient_offset = [
'offset' => [
(!empty($settings['svg_blob_offset_primary']['size'])) ? $settings['svg_blob_offset_primary']['size'] . '%' : "0%",
(!empty($settings['svg_blob_offset_secondary']['size'])) ? $settings['svg_blob_offset_secondary']['size'] . '%' : "100%",
],
'stop_color' => [
(!empty($settings['svg_blob_gradient_color_primary'])) ? $settings['svg_blob_gradient_color_primary'] : "#5F3698",
(!empty($settings['svg_blob_gradient_color_secondary'])) ? $settings['svg_blob_gradient_color_secondary'] : "#DC638D",
],
];
$this->add_render_attribute('gradient', [
'id' => 'shape-gradient-color-' . $id,
'x1' => $color_position['position_x'][0],
'x2' => $color_position['position_x'][1],
'y1' => $color_position['position_y'][0],
'y2' => $color_position['position_y'][1],
]);
?>
<linearGradient <?php $this->print_render_attribute_string('gradient'); ?>>
<stop offset="<?php echo esc_attr($gradient_offset['offset'][0]); ?>" stop-color="<?php echo esc_attr($gradient_offset['stop_color'][0]); ?>" stop-opacity="1"></stop>
<stop offset="<?php echo esc_attr($gradient_offset['offset'][1]); ?>" stop-color="<?php echo esc_attr($gradient_offset['stop_color'][1]); ?>" stop-opacity="1"></stop>
</linearGradient>
<path fill="url(#shape-gradient-color-<?php echo esc_attr($id); ?>)" d="<?php echo esc_attr($paths['first']); ?>" />
<?php
}
protected function render() {
$settings = $this->get_settings_for_display();
$paths = $this->render_shape_generator();
$this->add_render_attribute('svg-blob', [
'class' => ['bdt-svg-blob'],
'data-settings' => $paths['lasts'],
]); ?>
<div <?php $this->print_render_attribute_string('svg-blob'); ?>>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<?php if ('images' === $settings['svg_blob_select_type']) : ?>
<?php $this->render_image($paths); ?>
<?php elseif ('color' === $settings['svg_blob_select_type']) : ?>
<path fill="#8C24FF" d="<?php echo esc_attr($paths['first']); ?>">
<?php elseif ('gradient' === $settings['svg_blob_select_type']) : ?>
<?php $this->render_gradient($paths); ?>
<?php endif; ?>
</svg>
</div>
<?php
}
}