← All changes
|
modules/atomic-widgets/elements/atomic-svg/atomic-svg.php
+54
-64
4.3.1
→
3.28.0-dev2
View file →
| @@ -2,25 +2,18 @@ | ||
| 2 | 2 | namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Svg; |
| 3 | 3 | |
| 4 | 4 | use Elementor\Modules\AtomicWidgets\Controls\Section; |
| 5 | 5 | use Elementor\Modules\AtomicWidgets\Controls\Types\Link_Control; |
| 6 | +use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type; | |
| 7 | +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Widget_Base; | |
| 8 | +use Elementor\Core\Utils\Svg\Svg_Sanitizer; | |
| 6 | 9 | use Elementor\Modules\AtomicWidgets\Controls\Types\Svg_Control; |
| 7 | -use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control; | |
| 8 | -use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Widget_Base; | |
| 9 | -use Elementor\Modules\AtomicWidgets\Elements\Base\Has_Template; | |
| 10 | -use Elementor\Modules\AtomicWidgets\Module as Atomic_Widgets_Module; | |
| 11 | -use Elementor\Modules\AtomicWidgets\Elements\Base\Html_Tag_Computer; | |
| 12 | -use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type; | |
| 13 | -use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type; | |
| 14 | -use Elementor\Modules\AtomicWidgets\PropTypes\Icon_Prop_Type; | |
| 10 | +use Elementor\Modules\AtomicWidgets\PropTypes\Image_Src_Prop_Type; | |
| 11 | + | |
| 15 | 12 | use Elementor\Modules\AtomicWidgets\PropTypes\Link_Prop_Type; |
| 16 | -use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type; | |
| 17 | 13 | use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type; |
| 18 | -use Elementor\Modules\AtomicWidgets\PropTypes\Svg_Src_Prop_Type; | |
| 19 | -use Elementor\Modules\AtomicWidgets\PropTypes\Union_Prop_Type; | |
| 20 | 14 | use Elementor\Modules\AtomicWidgets\Styles\Style_Definition; |
| 21 | 15 | use Elementor\Modules\AtomicWidgets\Styles\Style_Variant; |
| 22 | -use Elementor\Modules\Components\PropTypes\Overridable_Prop_Type; | |
| 23 | 16 | |
| 24 | 17 | if ( ! defined( 'ABSPATH' ) ) { |
| 25 | 18 | exit; // Exit if accessed directly. |
| 26 | 19 | } |
| @@ -25,45 +18,29 @@ | ||
| 25 | 18 | exit; // Exit if accessed directly. |
| 26 | 19 | } |
| 27 | 20 | |
| 28 | 21 | class Atomic_Svg extends Atomic_Widget_Base { |
| 29 | - use Has_Template; | |
| 30 | - | |
| 31 | 22 | const BASE_STYLE_KEY = 'base'; |
| 32 | - const DEFAULT_SVG = 'images/default-svg.svg'; | |
| 33 | - const DEFAULT_SVG_PATH = ELEMENTOR_ASSETS_PATH . self::DEFAULT_SVG; | |
| 34 | - const DEFAULT_SVG_URL = ELEMENTOR_ASSETS_URL . self::DEFAULT_SVG; | |
| 23 | + const DEFAULT_SIZE = 'full'; | |
| 24 | + const DEFAULT_SVG_PATH = ELEMENTOR_ASSETS_URL . 'images/a-default-svg.svg'; | |
| 35 | 25 | |
| 36 | - public static $widget_description = 'Display an SVG image with customizable styles and link options.'; | |
| 37 | - | |
| 38 | 26 | public static function get_element_type(): string { |
| 39 | - return 'e-svg'; | |
| 27 | + return 'a-svg'; | |
| 40 | 28 | } |
| 41 | 29 | |
| 42 | 30 | public function get_title() { |
| 43 | - return esc_html__( 'SVG', 'elementor' ); | |
| 31 | + return esc_html__( 'Atomic SVG', 'elementor' ); | |
| 44 | 32 | } |
| 45 | 33 | |
| 46 | - public function get_keywords() { | |
| 47 | - return [ 'ato', 'atom', 'atoms', 'atomic', 'svg', 'icon', 'vector' ]; | |
| 48 | - } | |
| 49 | - | |
| 50 | 34 | public function get_icon() { |
| 51 | 35 | return 'eicon-svg'; |
| 52 | 36 | } |
| 53 | 37 | |
| 54 | - public static function get_computed_html_tag( array $settings ): string { | |
| 55 | - return Html_Tag_Computer::compute( $settings, 'div' ); | |
| 56 | - } | |
| 57 | - | |
| 58 | 38 | protected static function define_props_schema(): array { |
| 59 | 39 | return [ |
| 60 | 40 | 'classes' => Classes_Prop_Type::make()->default( [] ), |
| 61 | - 'svg' => Union_Prop_Type::create_from( | |
| 62 | - Svg_Src_Prop_Type::make()->default_url( static::DEFAULT_SVG_URL ) | |
| 63 | - )->add_prop_type( Icon_Prop_Type::make() ), | |
| 41 | + 'svg' => Image_Src_Prop_Type::make()->default_url( self::DEFAULT_SVG_PATH ), | |
| 64 | 42 | 'link' => Link_Prop_Type::make(), |
| 65 | - 'attributes' => Attributes_Prop_Type::make()->meta( Overridable_Prop_Type::ignore() ), | |
| 66 | 43 | ]; |
| 67 | 44 | } |
| 68 | 45 | |
| 69 | 46 | protected function define_atomic_controls(): array { |
| @@ -69,57 +46,70 @@ | ||
| 69 | 46 | protected function define_atomic_controls(): array { |
| 70 | 47 | return [ |
| 71 | 48 | Section::make() |
| 72 | 49 | ->set_label( esc_html__( 'Content', 'elementor' ) ) |
| 73 | - ->set_id( 'content' ) | |
| 74 | 50 | ->set_items( [ |
| 75 | - Svg_Control::bind_to( 'svg' ) | |
| 76 | - ->set_label( __( 'SVG', 'elementor' ) ) | |
| 77 | - ->set_show_icon_library( Atomic_Widgets_Module::is_svg_library_active() ), | |
| 51 | + Svg_Control::bind_to( 'svg' ), | |
| 52 | + Link_Control::bind_to( 'link' ) | |
| 53 | + ->set_placeholder( __( 'Paste URL or type', 'elementor' ) ), | |
| 78 | 54 | ] ), |
| 79 | - Section::make() | |
| 80 | - ->set_label( __( 'Settings', 'elementor' ) ) | |
| 81 | - ->set_id( 'settings' ) | |
| 82 | - ->set_items( $this->get_settings_controls() ), | |
| 83 | 55 | ]; |
| 84 | 56 | } |
| 85 | 57 | |
| 86 | - protected function get_settings_controls(): array { | |
| 87 | - return [ | |
| 88 | - Link_Control::bind_to( 'link' ) | |
| 89 | - ->set_placeholder( __( 'Type or paste your URL', 'elementor' ) ) | |
| 90 | - ->set_label( __( 'Link', 'elementor' ) ), | |
| 91 | - Text_Control::bind_to( '_cssid' ) | |
| 92 | - ->set_label( __( 'ID', 'elementor' ) ) | |
| 93 | - ->set_meta( $this->get_css_id_control_meta() ), | |
| 94 | - ]; | |
| 95 | - } | |
| 96 | - | |
| 97 | 58 | protected function define_base_styles(): array { |
| 98 | - $display_value = String_Prop_Type::generate( 'inline-block' ); | |
| 99 | - | |
| 100 | - $size = Size_Prop_Type::generate( [ | |
| 59 | + $width = Size_Prop_Type::generate( [ | |
| 101 | 60 | 'size' => 65, |
| 102 | 61 | 'unit' => 'px', |
| 103 | 62 | ] ); |
| 63 | + $height = Size_Prop_Type::generate( [ | |
| 64 | + 'size' => 65, | |
| 65 | + 'unit' => 'px', | |
| 66 | + ] ); | |
| 104 | 67 | |
| 105 | 68 | return [ |
| 106 | 69 | self::BASE_STYLE_KEY => Style_Definition::make() |
| 107 | 70 | ->add_variant( |
| 108 | 71 | Style_Variant::make() |
| 109 | - ->add_prop( 'display', $display_value ) | |
| 110 | - ->add_prop( 'width', $size ) | |
| 111 | - ->add_prop( 'height', $size ) | |
| 72 | + ->add_prop( 'width', $width ) | |
| 73 | + ->add_prop( 'height', $height ) | |
| 112 | 74 | ), |
| 113 | 75 | ]; |
| 114 | 76 | } |
| 115 | 77 | |
| 116 | - protected function get_templates(): array { | |
| 117 | - return [ | |
| 118 | - 'elementor/elements/atomic-svg' => __DIR__ . '/atomic-svg.html.twig', | |
| 119 | - ]; | |
| 78 | + protected function render() { | |
| 79 | + $settings = $this->get_atomic_settings(); | |
| 80 | + $svg_url = isset( $settings['svg']['url'] ) ? $settings['svg']['url'] : null; | |
| 81 | + | |
| 82 | + if ( ! $svg_url && isset( $settings['svg']['id'] ) ) { | |
| 83 | + $attachment = wp_get_attachment_image_src( $settings['svg']['id'], self::DEFAULT_SIZE ); | |
| 84 | + $svg_url = isset( $attachment[0] ) ? $attachment[0] : null; | |
| 85 | + } | |
| 86 | + | |
| 87 | + $svg = file_get_contents( $svg_url ); | |
| 88 | + $svg = $svg ? new \WP_HTML_Tag_Processor( $svg ) : null; | |
| 89 | + | |
| 90 | + if ( $svg && $svg->next_tag( 'svg' ) ) { | |
| 91 | + $this->set_svg_attributes( $svg, $settings ); | |
| 92 | + } | |
| 93 | + | |
| 94 | + if ( $svg ) { | |
| 95 | + $svg_html = ( new Svg_Sanitizer() )->sanitize( $svg->get_updated_html() ); | |
| 96 | + } | |
| 97 | + | |
| 98 | + $svg_html = $svg_html ?? file_get_contents( self::DEFAULT_SVG_PATH ); | |
| 99 | + | |
| 100 | + if ( isset( $settings['link'] ) && ! empty( $settings['link']['href'] ) ) { | |
| 101 | + $svg_html = sprintf( '<a href="%s" target="%s"> %s </a>', esc_url( $settings['link']['href'] ), esc_attr( $settings['link']['target'] ), $svg_html ); | |
| 102 | + } | |
| 103 | + | |
| 104 | + // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped | |
| 105 | + echo $svg_html; | |
| 120 | 106 | } |
| 121 | 107 | |
| 122 | - public function render_markdown(): string { | |
| 123 | - return ''; | |
| 108 | + private function set_svg_attributes( \WP_HTML_Tag_Processor $svg, $settings ) { | |
| 109 | + $svg->set_attribute( 'fill', 'currentColor' ); | |
| 110 | + $string_classes = implode( ' ', $settings['classes'] ); | |
| 111 | + $svg->add_class( $string_classes ); | |
| 112 | + $base_styles = $this->get_base_styles_dictionary()[ self::BASE_STYLE_KEY ]; | |
| 113 | + $svg->add_class( $base_styles ); | |
| 124 | 114 | } |
| 125 | 115 | } |