geno/wp-content/plugins/essential-addons-for-elementor-lite/includes/Elements/SVG_Draw.php
2024-02-01 11:54:18 +00:00

543 lines
No EOL
17 KiB
PHP

<?php
namespace Essential_Addons_Elementor\Elements;
// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
use \Elementor\Controls_Manager;
use \Elementor\Group_Control_Background;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Box_Shadow;
use Elementor\Icons_Manager;
use \Elementor\Widget_Base;
use \Essential_Addons_Elementor\Classes\Helper;
class SVG_Draw extends Widget_Base {
public function get_name() {
return 'eael-svg-draw';
}
public function get_title() {
return esc_html__( 'SVG Draw', 'essential-addons-for-elementor-lite' );
}
public function get_icon() {
return 'eaicon-svg-draw';
}
public function get_categories() {
return [ 'essential-addons-elementor' ];
}
public function get_keywords() {
return [
'svg',
'draq',
'ea svg',
'ea svg draw',
'animation',
'icon',
'icon animation',
'svg animation',
'ea',
'essential addons',
];
}
public function get_custom_help_url() {
return 'https://essential-addons.com/elementor/docs/ea-svg-draw/';
}
protected function default_custom_svg() {
return '<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Icons" viewBox="0 0 74 74" width="512" height="512">
<path d="M65,72H9a3,3,0,0,1-3-3V30a1,1,0,0,1,2,0V69a1,1,0,0,0,1,1H65a1,1,0,0,0,1-1V30a1,1,0,0,1,2,0V69A3,3,0,0,1,65,72Z"/>
<path d="M70,31H52.31a1,1,0,0,1,0-2H70V19H4V29H21.69a1,1,0,1,1,0,2H4a2,2,0,0,1-2-2V19a2,2,0,0,1,2-2H70a2,2,0,0,1,2,2V29A2,2,0,0,1,70,31Z"/>
<path d="M37,19a1,1,0,0,1-.86-1.509c2.193-3.712,7.618-12.538,10.615-14.326a8.2,8.2,0,1,1,8.4,14.078c-1.222.73-3.7,1.319-7.369,1.75a1,1,0,1,1-.233-1.986c4.439-.522,6.025-1.151,6.576-1.48A6.179,6.179,0,0,0,56.971,11.7a6.194,6.194,0,0,0-9.191-6.818c-2.126,1.269-6.517,7.871-9.918,13.626A1,1,0,0,1,37,19Z"/>
<path d="M37,19a1,1,0,0,1-.862-.491c-3.4-5.756-7.792-12.358-9.917-13.626a6.2,6.2,0,1,0-6.347,10.644c.55.329,2.136.958,6.576,1.48a1,1,0,1,1-.233,1.986c-3.667-.431-6.147-1.02-7.369-1.75a8.2,8.2,0,1,1,8.4-14.078c3,1.788,8.42,10.614,10.614,14.326A1,1,0,0,1,37,19Z"/>
<path d="M42,72H32a1,1,0,0,1-1-1V29.12a1,1,0,0,1,2,0V70h8V29.12a1,1,0,0,1,2,0V71A1,1,0,0,1,42,72Z"/>
<path d="M41.94,30H32.06a1,1,0,1,1,0-2h9.88a1,1,0,0,1,0,2Z"/>
<path d="M46.692,40.563a1,1,0,0,1-.912-.59L36.088,18.41a1,1,0,0,1,1.824-.82l8.613,19.162,1.29-4.114a1,1,0,0,1,1.365-.613l3.77,1.7-7.163-15.3a1,1,0,1,1,1.812-.848L55.906,35.32a1,1,0,0,1-1.316,1.335l-5.2-2.344-1.74,5.55a1,1,0,0,1-.895.7Z"/>
<path d="M27.308,40.563l-.06,0a1,1,0,0,1-.895-.7l-1.74-5.55-5.2,2.344a1,1,0,0,1-1.316-1.335L26.4,17.576a1,1,0,1,1,1.812.848l-7.163,15.3,3.77-1.7a1,1,0,0,1,1.365.613l1.29,4.114L36.088,17.59a1,1,0,0,1,1.824.82L28.22,39.973A1,1,0,0,1,27.308,40.563Z"/>
</svg>
';
}
protected function register_controls() {
$this->start_controls_section(
'eael_section_svg_content_settings',
[
'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'eael_svg_src',
[
'label' => esc_html__( 'Source', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'icon',
'options' => [
'icon' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
'custom' => esc_html__( 'Custom SVG', 'essential-addons-for-elementor-lite' ),
],
]
);
$this->add_control(
'eael_svg_icon',
[
'label' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
'type' => \Elementor\Controls_Manager::ICONS,
'default' => [
'value' => [
'url' => EAEL_PLUGIN_URL . 'assets/admin/images/svg-draw.svg',
],
'library' => 'svg',
],
'condition' => [
'eael_svg_src' => 'icon'
]
]
);
$this->add_control(
'svg_html',
[
'label' => esc_html__( 'SVG Code', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::TEXTAREA,
'condition' => [
'eael_svg_src' => 'custom'
],
'default' => $this->default_custom_svg(),
'description' => esc_html__( 'SVG draw works best on path elements.', 'essential-addons-for-elementor-lite' ),
]
);
$this->add_control(
'eael_svg_exclude_style',
[
'label' => esc_html__( 'Exclude Style', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
'default' => 'no',
'description' => esc_html__( 'Exclude style from SVG Source (If any).', 'essential-addons-for-elementor-lite' )
]
);
$this->add_responsive_control(
'eael_svg_width',
[
'label' => esc_html__( 'Width', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%' ],
'range' => [
'px' => [
'min' => 1,
'max' => 500,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 200,
],
'separator' => 'before',
'selectors' => [
'{{WRAPPER}} svg' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'eael_svg_height',
[
'label' => esc_html__( 'Height', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [
'px' => [
'min' => 0,
'max' => 500,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 200,
],
'selectors' => [
'{{WRAPPER}} svg' => 'height: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'eael_svg_alignment',
[
'label' => esc_html__( 'Alignment', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'essential-addons-for-elementor-lite' ),
'icon' => 'eicon-text-align-right',
],
],
'default' => 'center',
'selectors' => [
'{{WRAPPER}} .eael-svg-draw-container' => 'text-align: {{VALUE}};',
],
]
);
$this->add_control(
'eael_svg_link',
[
'label' => esc_html__( 'Link', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::URL,
'placeholder' => esc_html__( 'https://your-link.com', 'essential-addons-for-elementor-lite' ),
'options' => [ 'url' ],
'label_block' => true,
'separator' => 'before'
]
);
$this->end_controls_section();
$this->start_controls_section(
'eael_section_svg_appearance',
[
'label' => esc_html__( 'Appearance', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'eael_svg_fill',
[
'label' => esc_html__( 'SVG Fill Type', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'none',
'options' => [
'none' => esc_html__( 'None', 'essential-addons-for-elementor-lite' ),
'after' => esc_html__( 'Fill After Draw', 'essential-addons-for-elementor-lite' ),
'before' => esc_html__( 'Fill Before Draw', 'essential-addons-for-elementor-lite' ),
],
]
);
$this->add_control(
'eael_svg_fill_transition',
[
'label' => esc_html__( 'Fill Transition', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::NUMBER,
'default' => 1,
'min' => 0,
'selectors' => [
'{{WRAPPER}} .fill-svg svg path' => 'animation-duration: {{SIZE}}s;',
],
'description' => esc_html__( 'Duration on SVG fills (in seconds)', 'essential-addons-for-elementor-lite' )
]
);
$this->add_control(
'eael_svg_animation_on',
[
'label' => esc_html__( 'Animation', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'page-load',
'options' => [
'none' => esc_html__( 'None', 'essential-addons-for-elementor-lite' ),
'page-load' => esc_html__( 'On Page Load', 'essential-addons-for-elementor-lite' ),
'page-scroll' => esc_html__( 'On Page Scroll', 'essential-addons-for-elementor-lite' ),
'hover' => esc_html__( 'Mouse Hover', 'essential-addons-for-elementor-lite' ),
],
'separator' => 'before'
]
);
$this->add_control(
'eael_svg_draw_offset',
[
'label' => esc_html__( 'Drawing Start Point', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::NUMBER,
'min' => 1,
'max' => 1000,
'step' => 1,
'default' => 50,
'condition' => [
'eael_svg_animation_on' => [ 'page-scroll' ],
],
'description' => esc_html__( 'The point at which the drawing begins to animate as scrolls down (in pixels).', 'essential-addons-for-elementor-lite' )
]
);
$this->add_control(
'eael_svg_pause_on_hover',
[
'label' => esc_html__( 'Pause on Hover Off', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
'default' => 'yes',
'condition' => [
'eael_svg_animation_on' => 'hover',
],
'description' => esc_html__( 'Pause SVG drawing on mouse leave', 'essential-addons-for-elementor-lite' )
]
);
$this->add_control(
'eael_svg_loop',
[
'label' => esc_html__( 'Repeat Drawing', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
'label_off' => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
'return_value' => 'yes',
'default' => 'yes',
'condition' => [
'eael_svg_animation_on!' => [ 'page-scroll', 'none' ],
]
]
);
$this->add_control(
'eael_svg_animation_direction',
[
'label' => esc_html__( 'Direction', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'reverse',
'options' => [
'reverse' => esc_html__( 'Reverse', 'essential-addons-for-elementor-lite' ),
'restart' => esc_html__( 'Restart', 'essential-addons-for-elementor-lite' ),
],
'condition' => [
'eael_svg_animation_on!' => [ 'page-scroll', 'none' ],
'eael_svg_loop' => 'yes'
]
]
);
$this->add_control(
'eael_svg_draw_speed',
[
'label' => esc_html__( 'Speed', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::NUMBER,
'min' => 1,
'max' => 300,
'step' => 1,
'default' => 20,
'condition' => [
'eael_svg_animation_on!' => [ 'page-scroll' ],
],
'description' => esc_html__( 'Duration on SVG draws (in ms)', 'essential-addons-for-elementor-lite' )
]
);
$this->end_controls_section();
$this->start_controls_section(
'eael_section_svg_style_settings',
[
'label' => esc_html__( 'Style', 'essential-addons-for-elementor-lite' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'eael_svg_path_thickness',
[
'label' => esc_html__( 'Path Thickness', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [
'px' => [
'min' => 0,
'max' => 50,
'step' => .1,
],
],
'default' => [
'unit' => 'px',
'size' => 1.2,
],
'selectors' => [
'{{WRAPPER}} svg path' => 'stroke-width: {{SIZE}};',
'{{WRAPPER}} svg circle' => 'stroke-width: {{SIZE}};',
'{{WRAPPER}} svg rect' => 'stroke-width: {{SIZE}};',
'{{WRAPPER}} svg polygon' => 'stroke-width: {{SIZE}};',
],
]
);
$this->add_control(
'eael_svg_color',
[
'type' => Controls_Manager::COLOR,
'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
'selectors' => [
'{{WRAPPER}} svg path' => 'stroke:{{VALUE}};',
'{{WRAPPER}} svg circle' => 'stroke:{{VALUE}};',
'{{WRAPPER}} svg rect' => 'stroke:{{VALUE}};',
'{{WRAPPER}} svg polygon' => 'stroke:{{VALUE}};',
],
'default' => '#974CF3'
]
);
$this->add_control(
'eael_svg_fill_color',
[
'type' => Controls_Manager::COLOR,
'label' => esc_html__( 'Fill Color', 'essential-addons-for-elementor-lite' ),
'selectors' => [
'{{WRAPPER}} .elementor-widget-container .fill-svg svg path' => 'fill:{{VALUE}};',
'{{WRAPPER}} .elementor-widget-container .eael-svg-draw-container.fill-svg svg path' => 'fill:{{VALUE}};',
'{{WRAPPER}} .elementor-widget-container .eael-svg-draw-container.fill-svg svg circle' => 'fill:{{VALUE}};',
'{{WRAPPER}} .elementor-widget-container .eael-svg-draw-container.fill-svg svg rect' => 'fill:{{VALUE}};',
'{{WRAPPER}} .elementor-widget-container .eael-svg-draw-container.fill-svg svg polygon' => 'fill:{{VALUE}};'
],
'default' => '#D8C2F3',
'condition' => [
'eael_svg_fill!' => 'none'
]
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'eael_svg_background',
'types' => [ 'classic', 'gradient' ],
'selector' => '{{WRAPPER}} .eael-svg-draw-container svg',
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'eael_svg_border',
'selector' => '{{WRAPPER}} .eael-svg-draw-container svg',
'separator' => 'before'
]
);
$this->add_control(
'eael_svg_border_radius',
[
'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .eael-svg-draw-container svg' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'eael_svg_padding',
[
'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .eael-svg-draw-container svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_control(
'eael_svg_margin',
[
'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .eael-svg-draw-container svg' => 'Margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'box_shadow',
'selector' => '{{WRAPPER}} .eael-svg-draw-container svg',
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$svg_html = isset( $settings['svg_html'] ) ? preg_replace( '#<script(.*?)>(.*?)</script>#is', '', $settings['svg_html'] ) : '';
$this->add_render_attribute( 'eael-svg-drow-wrapper', [
'class' => [
'eael-svg-draw-container',
esc_attr( $settings['eael_svg_animation_on'] ),
$settings['eael_svg_fill'] === 'before' ? 'fill-svg' : ''
],
] );
$svg_options = [
'fill' => $settings['eael_svg_fill'] === 'after' ? 'fill-svg' : '',
'speed' => esc_attr( $settings['eael_svg_draw_speed'] ),
'offset' => esc_attr( $settings['eael_svg_draw_offset'] ),
'loop' => $settings['eael_svg_loop'] ? esc_attr( $settings['eael_svg_loop'] ) : 'no',
'pause' => $settings['eael_svg_pause_on_hover'] ? esc_attr( $settings['eael_svg_pause_on_hover'] ) : 'no',
'direction' => esc_attr( $settings['eael_svg_animation_direction'] ),
'excludeStyle' => esc_attr( $settings['eael_svg_exclude_style'] )
];
$this->add_render_attribute( 'eael-svg-drow-wrapper', [
'data-settings' => wp_json_encode( $svg_options )
] );
if ( ! empty( $settings['eael_svg_link']['url'] ) ) {
$this->add_link_attributes( 'eael_svg_link', $settings['eael_svg_link'] );
echo '<a ' . $this->get_render_attribute_string( 'eael_svg_link' ) . '>';
}
echo '<div ' . $this->get_render_attribute_string( 'eael-svg-drow-wrapper' ) . '>';
if ( $settings['eael_svg_src'] === 'icon' ):
if ( $settings['eael_svg_icon']['library'] === 'svg' ) {
if ( empty( $settings['eael_svg_icon']['value']['id'] ) ) {
echo $this->default_custom_svg();
}
Icons_Manager::render_icon( $settings['eael_svg_icon'], [ 'aria-hidden' => 'true', 'class' => [ 'eael-svg-drow-wrapper' ] ] );
} else {
echo Helper::get_svg_by_icon( $settings['eael_svg_icon'] );
}
else:
printf( '%s', $svg_html );
endif;
echo ' </div>';
if ( ! empty( $settings['eael_svg_link']['url'] ) ) {
echo "</a>";
}
}
}