← All changes
|
modules/atomic-widgets/elements/atomic-svg/atomic-svg.php
+133
-28
4.3.1
→
4.0.0-dev4
View file →
| @@ -2,25 +2,22 @@ | ||
| 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\Base\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; | |
| 10 | +use Elementor\Modules\AtomicWidgets\PropTypes\Image_Src_Prop_Type; | |
| 12 | 11 | 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; | |
| 15 | 12 | use Elementor\Modules\AtomicWidgets\PropTypes\Link_Prop_Type; |
| 16 | 13 | use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type; |
| 17 | 14 | 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 | 15 | use Elementor\Modules\AtomicWidgets\Styles\Style_Definition; |
| 21 | 16 | use Elementor\Modules\AtomicWidgets\Styles\Style_Variant; |
| 17 | +use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control; | |
| 22 | 18 | use Elementor\Modules\Components\PropTypes\Overridable_Prop_Type; |
| 19 | +use Elementor\Utils; | |
| 23 | 20 | |
| 24 | 21 | if ( ! defined( 'ABSPATH' ) ) { |
| 25 | 22 | exit; // Exit if accessed directly. |
| 26 | 23 | } |
| @@ -25,10 +22,8 @@ | ||
| 25 | 22 | exit; // Exit if accessed directly. |
| 26 | 23 | } |
| 27 | 24 | |
| 28 | 25 | class Atomic_Svg extends Atomic_Widget_Base { |
| 29 | - use Has_Template; | |
| 30 | - | |
| 31 | 26 | const BASE_STYLE_KEY = 'base'; |
| 32 | 27 | const DEFAULT_SVG = 'images/default-svg.svg'; |
| 33 | 28 | const DEFAULT_SVG_PATH = ELEMENTOR_ASSETS_PATH . self::DEFAULT_SVG; |
| 34 | 29 | const DEFAULT_SVG_URL = ELEMENTOR_ASSETS_URL . self::DEFAULT_SVG; |
| @@ -43,9 +38,9 @@ | ||
| 43 | 38 | return esc_html__( 'SVG', 'elementor' ); |
| 44 | 39 | } |
| 45 | 40 | |
| 46 | 41 | public function get_keywords() { |
| 47 | - return [ 'ato', 'atom', 'atoms', 'atomic', 'svg', 'icon', 'vector' ]; | |
| 42 | + return [ 'ato', 'atom', 'atoms', 'atomic' ]; | |
| 48 | 43 | } |
| 49 | 44 | |
| 50 | 45 | public function get_icon() { |
| 51 | 46 | return 'eicon-svg'; |
| @@ -50,18 +45,14 @@ | ||
| 50 | 45 | public function get_icon() { |
| 51 | 46 | return 'eicon-svg'; |
| 52 | 47 | } |
| 53 | 48 | |
| 54 | - public static function get_computed_html_tag( array $settings ): string { | |
| 55 | - return Html_Tag_Computer::compute( $settings, 'div' ); | |
| 56 | - } | |
| 57 | - | |
| 58 | 49 | protected static function define_props_schema(): array { |
| 59 | 50 | return [ |
| 60 | 51 | '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() ), | |
| 52 | + 'svg' => Image_Src_Prop_Type::make() | |
| 53 | + ->default_url( static::DEFAULT_SVG_URL ) | |
| 54 | + ->meta( 'is_svg', true ), | |
| 64 | 55 | 'link' => Link_Prop_Type::make(), |
| 65 | 56 | 'attributes' => Attributes_Prop_Type::make()->meta( Overridable_Prop_Type::ignore() ), |
| 66 | 57 | ]; |
| 67 | 58 | } |
| @@ -69,13 +60,11 @@ | ||
| 69 | 60 | protected function define_atomic_controls(): array { |
| 70 | 61 | return [ |
| 71 | 62 | Section::make() |
| 72 | 63 | ->set_label( esc_html__( 'Content', 'elementor' ) ) |
| 73 | - ->set_id( 'content' ) | |
| 74 | 64 | ->set_items( [ |
| 75 | 65 | Svg_Control::bind_to( 'svg' ) |
| 76 | - ->set_label( __( 'SVG', 'elementor' ) ) | |
| 77 | - ->set_show_icon_library( Atomic_Widgets_Module::is_svg_library_active() ), | |
| 66 | + ->set_label( __( 'SVG', 'elementor' ) ), | |
| 78 | 67 | ] ), |
| 79 | 68 | Section::make() |
| 80 | 69 | ->set_label( __( 'Settings', 'elementor' ) ) |
| 81 | 70 | ->set_id( 'settings' ) |
| @@ -112,14 +101,130 @@ | ||
| 112 | 101 | ), |
| 113 | 102 | ]; |
| 114 | 103 | } |
| 115 | 104 | |
| 116 | - protected function get_templates(): array { | |
| 117 | - return [ | |
| 118 | - 'elementor/elements/atomic-svg' => __DIR__ . '/atomic-svg.html.twig', | |
| 119 | - ]; | |
| 105 | + protected function render() { | |
| 106 | + $settings = $this->get_atomic_settings(); | |
| 107 | + | |
| 108 | + $svg = $this->get_svg_content( $settings ); | |
| 109 | + | |
| 110 | + if ( ! $svg ) { | |
| 111 | + return; | |
| 112 | + } | |
| 113 | + | |
| 114 | + $svg = new \WP_HTML_Tag_Processor( $svg ); | |
| 115 | + | |
| 116 | + if ( ! $svg->next_tag( 'svg' ) ) { | |
| 117 | + return; | |
| 118 | + } | |
| 119 | + | |
| 120 | + $svg->set_attribute( 'fill', 'currentColor' ); | |
| 121 | + $svg->set_attribute( 'data-interaction-id', $this->get_interaction_id() ); | |
| 122 | + | |
| 123 | + $this->add_svg_style( $svg, 'width: 100%; height: 100%; overflow: unset;' ); | |
| 124 | + | |
| 125 | + $svg_html = ( new Svg_Sanitizer() )->sanitize( $svg->get_updated_html() ); | |
| 126 | + | |
| 127 | + $classes = array_filter( array_merge( | |
| 128 | + [ self::BASE_STYLE_KEY => $this->get_base_styles_dictionary()[ self::BASE_STYLE_KEY ] ], | |
| 129 | + $settings['classes'] | |
| 130 | + ) ); | |
| 131 | + | |
| 132 | + $classes_string = implode( ' ', $classes ); | |
| 133 | + | |
| 134 | + $cssid_attribute = ! empty( $settings['_cssid'] ) ? 'id="' . esc_attr( $settings['_cssid'] ) . '"' : ''; | |
| 135 | + | |
| 136 | + $all_attributes = trim( $cssid_attribute . ' ' . $settings['attributes'] ); | |
| 137 | + | |
| 138 | + $data_attributes_string = sprintf( | |
| 139 | + 'data-interaction-id="%s"', | |
| 140 | + esc_attr( $this->get_interaction_id() ) | |
| 141 | + ); | |
| 142 | + | |
| 143 | + $attributes_string = trim( $data_attributes_string . ' ' . $all_attributes ); | |
| 144 | + | |
| 145 | + if ( isset( $settings['link'] ) && ! empty( $settings['link']['href'] ) ) { | |
| 146 | + $html_tag = Utils::validate_html_tag( $settings['link']['tag'] ?? 'a' ); | |
| 147 | + $link_attributes = $this->get_link_attributes( $settings['link'], true ); | |
| 148 | + $link_attribute_key = $link_attributes['key']; | |
| 149 | + $link_destination = $link_attributes[ $link_attribute_key ]; | |
| 150 | + | |
| 151 | + $svg_html = sprintf( | |
| 152 | + '<%s %s="%s" target="%s" class="%s" %s>%s</%s>', | |
| 153 | + $html_tag, | |
| 154 | + $link_attribute_key, | |
| 155 | + $link_destination, | |
| 156 | + esc_attr( $settings['link']['target'] ), | |
| 157 | + esc_attr( $classes_string ), | |
| 158 | + $attributes_string, | |
| 159 | + $svg_html, | |
| 160 | + $html_tag | |
| 161 | + ); | |
| 162 | + } else { | |
| 163 | + $svg_html = sprintf( '<div class="%s" %s>%s</div>', esc_attr( $classes_string ), $attributes_string, $svg_html ); | |
| 164 | + } | |
| 165 | + | |
| 166 | + // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped | |
| 167 | + echo $svg_html; | |
| 120 | 168 | } |
| 121 | 169 | |
| 122 | - public function render_markdown(): string { | |
| 123 | - return ''; | |
| 170 | + private function get_svg_content( $settings ) { | |
| 171 | + $svg_data = $settings['svg'] ?? null; | |
| 172 | + | |
| 173 | + if ( ! $svg_data ) { | |
| 174 | + return $this->get_default_svg_content(); | |
| 175 | + } | |
| 176 | + | |
| 177 | + if ( is_string( $svg_data ) ) { | |
| 178 | + return $this->fetch_svg_from_url( $svg_data ); | |
| 179 | + } | |
| 180 | + | |
| 181 | + if ( isset( $svg_data['id'] ) ) { | |
| 182 | + $content = Utils::file_get_contents( | |
| 183 | + get_attached_file( $svg_data['id'] ) | |
| 184 | + ); | |
| 185 | + | |
| 186 | + if ( $content ) { | |
| 187 | + return $content; | |
| 188 | + } | |
| 189 | + } | |
| 190 | + | |
| 191 | + if ( isset( $svg_data['url'] ) && static::DEFAULT_SVG_URL !== $svg_data['url'] ) { | |
| 192 | + return $this->fetch_svg_from_url( $svg_data['url'] ); | |
| 193 | + } | |
| 194 | + | |
| 195 | + return $this->get_default_svg_content(); | |
| 196 | + } | |
| 197 | + | |
| 198 | + private function fetch_svg_from_url( string $url ) { | |
| 199 | + if ( empty( $url ) || static::DEFAULT_SVG_URL === $url ) { | |
| 200 | + return $this->get_default_svg_content(); | |
| 201 | + } | |
| 202 | + | |
| 203 | + $content = wp_safe_remote_get( $url ); | |
| 204 | + | |
| 205 | + if ( ! is_wp_error( $content ) ) { | |
| 206 | + return $content['body']; | |
| 207 | + } | |
| 208 | + | |
| 209 | + return $this->get_default_svg_content(); | |
| 210 | + } | |
| 211 | + | |
| 212 | + private function get_default_svg_content() { | |
| 213 | + $content = Utils::file_get_contents( static::DEFAULT_SVG_PATH ); | |
| 214 | + | |
| 215 | + return $content ? $content : null; | |
| 216 | + } | |
| 217 | + | |
| 218 | + private function add_svg_style( &$svg, $new_style ) { | |
| 219 | + $svg_style = $svg->get_attribute( 'style' ); | |
| 220 | + $svg_style = trim( (string) $svg_style ); | |
| 221 | + | |
| 222 | + if ( empty( $svg_style ) ) { | |
| 223 | + $svg_style = $new_style; | |
| 224 | + } else { | |
| 225 | + $svg_style = rtrim( $svg_style, ';' ) . '; ' . $new_style; | |
| 226 | + } | |
| 227 | + | |
| 228 | + $svg->set_attribute( 'style', $svg_style ); | |
| 124 | 229 | } |
| 125 | 230 | } |