elementor / modules / atomic-widgets / elements / atomic-svg / atomic-svg.php

atomic-svg.php in Elementor Website Builder – more than just a page builder 3.35.0-dev2, at modules/atomic-widgets/elements/atomic-svg/atomic-svg.php

241 lines 6.9 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Svg;
3
4	use Elementor\Modules\AtomicWidgets\Controls\Section;
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;
9	use Elementor\Modules\AtomicWidgets\Controls\Types\Svg_Control;
10	use Elementor\Modules\AtomicWidgets\PropTypes\Image_Src_Prop_Type;
11	use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
12	use Elementor\Modules\AtomicWidgets\PropTypes\Link_Prop_Type;
13	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
14	use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
15	use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
16	use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
17	use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
18	use Elementor\Modules\Components\PropTypes\Overridable_Prop_Type;
19	use Elementor\Utils;
20
21	if ( ! defined( 'ABSPATH' ) ) {
22	exit; // Exit if accessed directly.
23	}
24
25	class Atomic_Svg extends Atomic_Widget_Base {
26	const BASE_STYLE_KEY = 'base';
27	const DEFAULT_SVG = 'images/default-svg.svg';
28	const DEFAULT_SVG_PATH = ELEMENTOR_ASSETS_PATH . self::DEFAULT_SVG;
29	const DEFAULT_SVG_URL = ELEMENTOR_ASSETS_URL . self::DEFAULT_SVG;
30
31	public static $widget_description = 'Display an SVG image with customizable styles and link options.';
32
33	public static function get_element_type(): string {
34	return 'e-svg';
35	}
36
37	public function get_title() {
38	return esc_html__( 'SVG', 'elementor' );
39	}
40
41	public function get_keywords() {
42	return [ 'ato', 'atom', 'atoms', 'atomic' ];
43	}
44
45	public function get_icon() {
46	return 'eicon-svg';
47	}
48
49	protected static function define_props_schema(): array {
50	return [
51	'classes' => Classes_Prop_Type::make()->default( [] ),
52	'svg' => Image_Src_Prop_Type::make()
53	->default_url( static::DEFAULT_SVG_URL )
54	->meta( 'is_svg', true ),
55	'link' => Link_Prop_Type::make(),
56	'attributes' => Attributes_Prop_Type::make()->meta( Overridable_Prop_Type::ignore() ),
57	];
58	}
59
60	protected function define_atomic_controls(): array {
61	return [
62	Section::make()
63	->set_label( esc_html__( 'Content', 'elementor' ) )
64	->set_items( [
65	Svg_Control::bind_to( 'svg' )
66	->set_label( __( 'SVG', 'elementor' ) ),
67	] ),
68	Section::make()
69	->set_label( __( 'Settings', 'elementor' ) )
70	->set_id( 'settings' )
71	->set_items( $this->get_settings_controls() ),
72	];
73	}
74
75	protected function get_settings_controls(): array {
76	return [
77	Link_Control::bind_to( 'link' )
78	->set_placeholder( __( 'Type or paste your URL', 'elementor' ) )
79	->set_label( __( 'Link', 'elementor' ) ),
80	Text_Control::bind_to( '_cssid' )
81	->set_label( __( 'ID', 'elementor' ) )
82	->set_meta( $this->get_css_id_control_meta() ),
83	];
84	}
85
86	protected function define_base_styles(): array {
87	$display_value = String_Prop_Type::generate( 'inline-block' );
88
89	$size = Size_Prop_Type::generate( [
90	'size' => 65,
91	'unit' => 'px',
92	] );
93
94	return [
95	self::BASE_STYLE_KEY => Style_Definition::make()
96	->add_variant(
97	Style_Variant::make()
98	->add_prop( 'display', $display_value )
99	->add_prop( 'width', $size )
100	->add_prop( 'height', $size )
101	),
102	];
103	}
104
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_id() );
122
123	$interaction_ids = $this->get_interactions_ids();
124	if ( ! empty( $interaction_ids ) ) {
125	$svg->set_attribute( 'data-interactions', wp_json_encode( $interaction_ids ) );
126	}
127
128	$this->add_svg_style( $svg, 'width: 100%; height: 100%; overflow: unset;' );
129
130	$svg_html = ( new Svg_Sanitizer() )->sanitize( $svg->get_updated_html() );
131
132	$classes = array_filter( array_merge(
133	[ self::BASE_STYLE_KEY => $this->get_base_styles_dictionary()[ self::BASE_STYLE_KEY ] ],
134	$settings['classes']
135	) );
136
137	$classes_string = implode( ' ', $classes );
138
139	$cssid_attribute = ! empty( $settings['_cssid'] ) ? 'id="' . esc_attr( $settings['_cssid'] ) . '"' : '';
140
141	$all_attributes = trim( $cssid_attribute . ' ' . $settings['attributes'] );
142
143	$data_attributes_string = '';
144
145	if ( ! empty( $interaction_ids ) ) {
146	$data_attributes_string = sprintf(
147	'data-interaction-id="%s" data-interactions="%s"',
148	esc_attr( $this->get_id() ),
149	esc_attr( wp_json_encode( $interaction_ids ) )
150	);
151	}
152
153	$attributes_string = trim( $data_attributes_string . ' ' . $all_attributes );
154
155	if ( isset( $settings['link'] ) && ! empty( $settings['link']['href'] ) ) {
156	$html_tag = Utils::validate_html_tag( $settings['link']['tag'] ?? 'a' );
157	$link_attributes = $this->get_link_attributes( $settings['link'], true );
158	$link_attribute_key = $link_attributes['key'];
159	$link_destination = $link_attributes[ $link_attribute_key ];
160
161	$svg_html = sprintf(
162	'<%s %s="%s" target="%s" class="%s" %s>%s</%s>',
163	$html_tag,
164	$link_attribute_key,
165	$link_destination,
166	esc_attr( $settings['link']['target'] ),
167	esc_attr( $classes_string ),
168	$attributes_string,
169	$svg_html,
170	$html_tag
171	);
172	} else {
173	$svg_html = sprintf( '<div class="%s" %s>%s</div>', esc_attr( $classes_string ), $attributes_string, $svg_html );
174	}
175
176	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
177	echo $svg_html;
178	}
179
180	private function get_svg_content( $settings ) {
181	$svg_data = $settings['svg'] ?? null;
182
183	if ( ! $svg_data ) {
184	return $this->get_default_svg_content();
185	}
186
187	if ( is_string( $svg_data ) ) {
188	return $this->fetch_svg_from_url( $svg_data );
189	}
190
191	if ( isset( $svg_data['id'] ) ) {
192	$content = Utils::file_get_contents(
193	get_attached_file( $svg_data['id'] )
194	);
195
196	if ( $content ) {
197	return $content;
198	}
199	}
200
201	if ( isset( $svg_data['url'] ) && static::DEFAULT_SVG_URL !== $svg_data['url'] ) {
202	return $this->fetch_svg_from_url( $svg_data['url'] );
203	}
204
205	return $this->get_default_svg_content();
206	}
207
208	private function fetch_svg_from_url( string $url ) {
209	if ( empty( $url ) \|\| static::DEFAULT_SVG_URL === $url ) {
210	return $this->get_default_svg_content();
211	}
212
213	$content = wp_safe_remote_get( $url );
214
215	if ( ! is_wp_error( $content ) ) {
216	return $content['body'];
217	}
218
219	return $this->get_default_svg_content();
220	}
221
222	private function get_default_svg_content() {
223	$content = Utils::file_get_contents( static::DEFAULT_SVG_PATH );
224
225	return $content ? $content : null;
226	}
227
228	private function add_svg_style( &$svg, $new_style ) {
229	$svg_style = $svg->get_attribute( 'style' );
230	$svg_style = trim( (string) $svg_style );
231
232	if ( empty( $svg_style ) ) {
233	$svg_style = $new_style;
234	} else {
235	$svg_style = rtrim( $svg_style, ';' ) . '; ' . $new_style;
236	}
237
238	$svg->set_attribute( 'style', $svg_style );
239	}
240	}
241