svg.php — Shortcodes and extra features for Phlox theme 2.5.8

auxin-elements / includes / elementor / widgets / svg.php

auxin-elements / includes / elementor / widgets Last commit date

svg.php

448 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Image_Size;
8	use Elementor\Utils;
9	use Elementor\Group_Control_Border;
10	use Elementor\Group_Control_Background;
11	use Elementor\Group_Control_Box_Shadow;
12
13
14	if ( ! defined( 'ABSPATH' ) ) {
15	exit; // Exit if accessed directly.
16	}
17
18	/**
19	* Elementor 'Simple_SVG' widget.
20	*
21	* Elementor widget that displays an 'Simple_SVG' with lightbox.
22	*
23	* @since 1.0.0
24	*/
25	class Simple__SVG extends Widget_Base {
26
27	/**
28	* Get widget name.
29	*
30	* Retrieve 'Simple_SVG' widget name.
31	*
32	* @since 1.0.0
33	* @access public
34	*
35	* @return string Widget name.
36	*/
37	public function get_name() {
38	return 'aux_simple_svg';
39	}
40
41	/**
42	* Get widget title.
43	*
44	* Retrieve 'Simple_SVG' widget title.
45	*
46	* @since 1.0.0
47	* @access public
48	*
49	* @return string Widget title.
50	*/
51	public function get_title() {
52	return __('Simple SVG', 'auxin-elements' );
53	}
54
55	/**
56	* Get widget icon.
57	*
58	* Retrieve 'Simple_SVG' widget icon.
59	*
60	* @since 1.0.0
61	* @access public
62	*
63	* @return string Widget icon.
64	*/
65	public function get_icon() {
66	return 'eicon-integration auxin-badge-pro';
67	}
68
69	/**
70	* Get widget categories.
71	*
72	* Retrieve 'Simple_SVG' widget icon.
73	*
74	* @since 1.0.0
75	* @access public
76	*
77	* @return string Widget icon.
78	*/
79	public function get_categories() {
80	return array( 'auxin-pro' );
81	}
82
83	/**
84	* Register 'Simple_SVG' widget controls.
85	*
86	* Adds different input fields to allow the user to change and customize the widget settings.
87	*
88	* @since 1.0.0
89	* @access protected
90	*/
91	protected function _register_controls() {
92
93	/-----------------------------------------------------------------------------------/
94	/* Content Tab
95	/-----------------------------------------------------------------------------------/
96
97	$this->start_controls_section(
98	'svg_image_section',
99	array(
100	'label' => __( 'SVG', 'auxin-elements' )
101	)
102	);
103
104	$this->add_control(
105	'type',
106	array(
107	'label' => __( 'Type', 'auxin-elements' ),
108	'type' => Controls_Manager::SELECT,
109	'options' => array(
110	'image' => __( 'Image', 'auxin-elements' ),
111	'inline' => __( 'Inline', 'auxin-elements' )
112	),
113	'default' => 'image'
114	)
115	);
116
117	$this->add_control(
118	'image',
119	array(
120	'label' => __( 'Choose Image', 'elementor' ),
121	'type' => Controls_Manager::MEDIA,
122	'default' => array(
123	'url' => Utils::get_placeholder_image_src(),
124	),
125	'condition' => array(
126	'type' => 'image'
127	)
128	)
129	);
130
131	$this->add_control(
132	'inline',
133	array(
134	'label' => '',
135	'type' => Controls_Manager::CODE,
136	'default' => '',
137	'placeholder' => __( 'Enter inline SVG content here', 'elementor' ),
138	'show_label' => false,
139	'condition' => array(
140	'type' => 'inline'
141	)
142	)
143	);
144
145	$this->end_controls_section();
146
147	/-----------------------------------------------------------------------------------/
148	/* Style Tab
149	/-----------------------------------------------------------------------------------/
150
151	$this->start_controls_section(
152	'svg_style_section',
153	array(
154	'label' => __( 'Style', 'auxin-elements' ),
155	'tab' => Controls_Manager::TAB_STYLE
156	)
157	);
158
159	$this->add_responsive_control(
160	'_width',
161	array(
162	'label' => __('Width','auxin-elements' ),
163	'type' => Controls_Manager::SLIDER,
164	'size_units' => array('px', 'em', '%'),
165	'range' => array(
166	'%' => array(
167	'min' => 1,
168	'max' => 100,
169	'step' => 1
170	),
171	'px' => array(
172	'min' => 0,
173	'max' => 1600,
174	'step' => 1
175	),
176	'em' => array(
177	'min' => 0,
178	'step' => 1
179	)
180	),
181	'desktop_default' => array(
182	'size' => 300,
183	'unit' => 'px'
184	),
185	'selectors' => array(
186	'{{WRAPPER}} .aux-the-svg' => 'width:{{SIZE}}{{UNIT}};'
187	)
188	)
189	);
190
191	$this->add_responsive_control(
192	'_height',
193	array(
194	'label' => __( 'Height','auxin-elements' ),
195	'type' => Controls_Manager::SLIDER,
196	'size_units' => array('px', 'em', '%'),
197	'range' => array(
198	'%' => array(
199	'min' => 1,
200	'max' => 100,
201	'step' => 1
202	),
203	'px' => array(
204	'min' => 0,
205	'max' => 1600,
206	'step' => 1
207	),
208	'em' => array(
209	'min' => 0,
210	'step' => 1
211	)
212	),
213	'selectors' => array(
214	'{{WRAPPER}} .aux-the-svg' => 'height:{{SIZE}}{{UNIT}};'
215	)
216	)
217	);
218
219	$this->add_responsive_control(
220	'_max_width',
221	array(
222	'label' => __('Max Width','auxin-elements' ),
223	'type' => Controls_Manager::SLIDER,
224	'size_units' => array('px', 'em', '%'),
225	'range' => array(
226	'%' => array(
227	'min' => 1,
228	'max' => 100,
229	'step' => 1
230	),
231	'px' => array(
232	'min' => 0,
233	'max' => 1600,
234	'step' => 1
235	),
236	'em' => array(
237	'min' => 0,
238	'step' => 1
239	)
240	),
241	'selectors' => array(
242	'{{WRAPPER}} .aux-widget-container-inner' => 'max-width:{{SIZE}}{{UNIT}};'
243	)
244	)
245	);
246
247	$this->add_responsive_control(
248	'_max_height',
249	array(
250	'label' => __('Max Height','auxin-elements' ),
251	'type' => Controls_Manager::SLIDER,
252	'size_units' => array('px', 'em','%'),
253	'range' => array(
254	'%' => array(
255	'min' => 1,
256	'max' => 100,
257	'step' => 1
258	),
259	'px' => array(
260	'min' => 0,
261	'max' => 2000,
262	'step' => 10
263	),
264	'em' => array(
265	'min' => 0,
266	'step' => 1
267	)
268	),
269	'selectors' => array(
270	'{{WRAPPER}} .aux-widget-container-inner' => 'max-height:{{SIZE}}{{UNIT}};'
271	),
272	'separator' => 'after'
273	)
274	);
275
276	$this->add_responsive_control(
277	'alignment',
278	array(
279	'label' => __('Alignment', 'auxin-elements'),
280	'type' => Controls_Manager::CHOOSE,
281	'default' => 'center',
282	'options' => array(
283	'left' => array(
284	'title' => __( 'Left', 'auxin-elements' ),
285	'icon' => 'fa fa-align-left',
286	),
287	'center' => array(
288	'title' => __( 'Center', 'auxin-elements' ),
289	'icon' => 'fa fa-align-center',
290	),
291	'right' => array(
292	'title' => __( 'Right', 'auxin-elements' ),
293	'icon' => 'fa fa-align-right',
294	)
295	),
296	'selectors' => array(
297	'{{WRAPPER}} .aux-widget-container' => 'text-align: {{VALUE}};'
298	)
299	)
300	);
301
302	$this->add_responsive_control(
303	'svg_border_radius',
304	array(
305	'label' => __( 'Border radius', 'auxin-elements' ),
306	'type' => Controls_Manager::DIMENSIONS,
307	'size_units' => array( 'px', 'em', '%' ),
308	'selectors' => array(
309	'{{WRAPPER}} .aux-the-svg > *' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
310	),
311	'separator' => 'after'
312	)
313	);
314
315	$this->start_controls_tabs( 'svg_style_tabs' );
316
317	$this->start_controls_tab(
318	'svg_status_normal',
319	array(
320	'label' => __( 'Normal' , 'auxin-elements' )
321	)
322	);
323
324	$this->add_group_control(
325	Group_Control_Box_Shadow::get_type(),
326	array(
327	'name' => 'svg_box_shadow',
328	'selector' => '{{WRAPPER}} .aux-the-svg > *',
329	'separator' => 'none'
330	)
331	);
332
333	$this->add_group_control(
334	Group_Control_Border::get_type(),
335	array(
336	'name' => 'svg_border',
337	'selector' => '{{WRAPPER}} .aux-the-svg > *',
338	'separator' => 'none'
339	)
340	);
341
342	$this->add_group_control(
343	Group_Control_Background::get_type(),
344	array(
345	'name' => 'svg_background',
346	'selector' => '{{WRAPPER}} .aux-the-svg > *',
347	'separator' => 'none'
348	)
349	);
350
351	$this->end_controls_tab();
352
353
354	$this->start_controls_tab(
355	'svg_status_hover',
356	array(
357	'label' => __( 'Hover' , 'auxin-elements' )
358	)
359	);
360
361	$this->add_group_control(
362	Group_Control_Box_Shadow::get_type(),
363	array(
364	'name' => 'svg_box_shadow_hover',
365	'selector' => '{{WRAPPER}} .aux-the-svg:hover > *',
366	'separator' => 'none'
367	)
368	);
369
370	$this->add_group_control(
371	Group_Control_Border::get_type(),
372	array(
373	'name' => 'svg_border_hover',
374	'selector' => '{{WRAPPER}} .aux-the-svg:hover > *',
375	'separator' => 'none'
376	)
377	);
378
379	$this->add_group_control(
380	Group_Control_Background::get_type(),
381	array(
382	'name' => 'svg_background_hover',
383	'selector' => '{{WRAPPER}} .aux-the-svg:hover > *',
384	'separator' => 'none'
385	)
386	);
387
388	$this->end_controls_tab();
389
390	$this->end_controls_tabs();
391
392	$this->end_controls_section();
393
394	}
395
396
397	/**
398	* Render the widget output on the frontend.
399	*
400	* Written in PHP and used to generate the final HTML.
401	*
402	*/
403	protected function render() {
404	$settings = $this->get_settings_for_display();
405
406	if( 'image' == $settings['type'] ){
407	$content = Group_Control_Image_Size::get_attachment_image_html( $settings );
408	} else {
409	$content = $this->get_settings_for_display( 'inline' );
410	}
411	?>
412	<div class="aux-widget-container aux-simple-svg-container">
413	<div class="aux-widget-container-inner">
414	<div class="aux-the-svg"><?php echo $content; ?></div>
415	</div>
416	</div>
417	<?php
418	}
419
420
421	/**
422	* Render the widget output in the editor.
423	*
424	* Written as a Backbone JavaScript template and used to generate the live preview.
425	*
426	*/
427	protected function _content_template() {
428	?>
429	<div class="aux-widget-container aux-simple-svg-container">
430	<div class="aux-widget-container-inner">
431	<div class="aux-the-svg">
432	<# if( settings.type == 'image' ){
433
434	if ( settings.image.url ) {
435	#><img src="{{ settings.image.url }}" /><#
436	}
437
438	} else { #>
439	{{{ settings.inline }}}
440	<# } #>
441	</div>
442	</div>
443	</div>
444	<?php
445	}
446
447	}
448