premium-image-separator.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.77

premium-addons-for-elementor / widgets / premium-image-separator.php

premium-addons-for-elementor / widgets Last commit date

premium-image-separator.php

1110 lines

1	<?php
2	/**
3	* Premium Image Separator.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Modules\DynamicTags\Module as TagsModule;
10	use Elementor\Plugin;
11	use Elementor\Widget_Base;
12	use Elementor\Utils;
13	use Elementor\Control_Media;
14	use Elementor\Controls_Manager;
15	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
16	use Elementor\Icons_Manager;
17	use Elementor\Group_Control_Css_Filter;
18	use Elementor\Group_Control_Text_Shadow;
19
20	// PremiumAddons Classes.
21	use PremiumAddons\Admin\Includes\Admin_Helper;
22	use PremiumAddons\Includes\Helper_Functions;
23	use PremiumAddons\Includes\Controls\Premium_Post_Filter;
24
25	if ( ! defined( 'ABSPATH' ) ) {
26	exit; // If this file is called directly, abort.
27	}
28
29	/**
30	* Class Premium_Image_Separator
31	*/
32	class Premium_Image_Separator extends Widget_Base {
33
34	/**
35	* Check if the icon draw is enabled.
36	*
37	* @since 4.9.26
38	* @access private
39	*
40	* @var bool
41	*/
42	private $is_draw_enabled = null;
43
44	/**
45	* Check Icon Draw Option.
46	*
47	* @since 4.9.26
48	* @access public
49	*/
50	public function check_icon_draw() {
51
52	if ( null === $this->is_draw_enabled ) {
53	$this->is_draw_enabled = Admin_Helper::check_svg_draw( 'premium-image-separator' );
54	}
55
56	return $this->is_draw_enabled;
57	}
58
59	/**
60	* Retrieve Widget Name.
61	*
62	* @since 1.0.0
63	* @access public
64	*/
65	public function get_name() {
66	return 'premium-addon-image-separator';
67	}
68
69	/**
70	* Retrieve Widget Title.
71	*
72	* @since 1.0.0
73	* @access public
74	*/
75	public function get_title() {
76	return __( 'Image Separator', 'premium-addons-for-elementor' );
77	}
78
79	/**
80	* Retrieve Widget Dependent CSS.
81	*
82	* @since 1.0.0
83	* @access public
84	*
85	* @return array CSS style handles.
86	*/
87	public function get_style_depends() {
88	return array(
89	'premium-addons',
90	);
91	}
92
93	/**
94	* Retrieve Widget Dependent JS.
95	*
96	* @since 1.0.0
97	* @access public
98	*
99	* @return array JS script handles.
100	*/
101	public function get_script_depends() {
102
103	$is_edit = Helper_Functions::is_edit_mode();
104
105	$scripts = array();
106
107	if ( $is_edit ) {
108
109	$draw_scripts = $this->check_icon_draw() ? array( 'pa-tweenmax', 'pa-motionpath' ) : array();
110
111	$scripts = array_merge( $draw_scripts, array( 'lottie-js' ) );
112
113	} else {
114	$settings = $this->get_settings();
115
116	if ( 'yes' === $settings['draw_svg'] ) {
117	$scripts[] = 'pa-tweenmax';
118	$scripts[] = 'pa-motionpath';
119	}
120
121	if ( 'animation' === $settings['separator_type'] ) {
122	$scripts[] = 'lottie-js';
123	}
124	}
125
126	return $scripts;
127	}
128
129	/**
130	* Retrieve Widget Icon.
131	*
132	* @since 1.0.0
133	* @access public
134	*
135	* @return string widget icon.
136	*/
137	public function get_icon() {
138	return 'pa-image-separator';
139	}
140
141	/**
142	* Retrieve Widget Categories.
143	*
144	* @since 1.5.1
145	* @access public
146	*
147	* @return array Widget categories.
148	*/
149	public function get_categories() {
150	return array( 'premium-elements' );
151	}
152
153	/**
154	* Retrieve Widget Keywords.
155	*
156	* @since 1.0.0
157	* @access public
158	*
159	* @return string Widget keywords.
160	*/
161	public function get_keywords() {
162	return array( 'pa', 'premium', 'premium image separator', 'divider', 'section', 'shape' );
163	}
164
165	protected function is_dynamic_content(): bool {
166	return false;
167	}
168
169	/**
170	* Retrieve Widget Support URL.
171	*
172	* @access public
173	*
174	* @return string support URL.
175	*/
176	public function get_custom_help_url() {
177	return 'https://premiumaddons.com/support/';
178	}
179
180	public function has_widget_inner_wrapper(): bool {
181	return ! Helper_Functions::check_elementor_experiment( 'e_optimized_markup' );
182	}
183
184	/**
185	* Register Image Controls controls.
186	*
187	* @since 1.0.0
188	* @access protected
189	*/
190	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
191
192	$draw_icon = $this->check_icon_draw();
193
194	$this->start_controls_section(
195	'premium_image_separator_general_settings',
196	array(
197	'label' => __( 'Image Settings', 'premium-addons-for-elementor' ),
198	)
199	);
200
201	$demo = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/image-separator-widget-elementor-page-builder/', 'image-separator', 'wp-editor', 'demo' );
202	Helper_Functions::add_templates_controls( $this, 'image-separator', $demo );
203
204	$this->add_control(
205	'separator_type',
206	array(
207	'label' => __( 'Separator Type', 'premium-addons-for-elementor' ),
208	'type' => Controls_Manager::SELECT,
209	'options' => array(
210	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
211	'image' => __( 'Image', 'premium-addons-for-elementor' ),
212	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
213	'svg' => __( 'SVG Code', 'premium-addons-for-elementor' ),
214	),
215	'default' => 'image',
216	)
217	);
218
219	$this->add_control(
220	'separator_icon',
221	array(
222	'label' => __( 'Select an Icon', 'premium-addons-for-elementor' ),
223	'type' => Controls_Manager::ICONS,
224	'default' => array(
225	'value' => 'fas fa-star',
226	'library' => 'fa-solid',
227	),
228	'condition' => array(
229	'separator_type' => 'icon',
230	),
231	)
232	);
233
234	$this->add_control(
235	'custom_svg',
236	array(
237	'label' => __( 'SVG Code', 'premium-addons-for-elementor' ),
238	'type' => Controls_Manager::TEXTAREA,
239	'description' => 'You can use these sites to create SVGs: <a href="https://danmarshall.github.io/google-font-to-svg-path/" target="_blank">Google Fonts</a> and <a href="https://boxy-svg.com/" target="_blank">Boxy SVG</a>',
240	'condition' => array(
241	'separator_type' => 'svg',
242	),
243	'ai' => array(
244	'active' => false,
245	),
246	)
247	);
248
249	$this->add_control(
250	'premium_image_separator_image',
251	array(
252	'label' => __( 'Image', 'premium-addons-for-elementor' ),
253	'type' => Controls_Manager::MEDIA,
254	'dynamic' => array( 'active' => true ),
255	'default' => array(
256	'url' => Utils::get_placeholder_image_src(),
257	),
258	'label_block' => true,
259	'condition' => array(
260	'separator_type' => 'image',
261	),
262	)
263	);
264
265	$this->add_control(
266	'lottie_url',
267	array(
268	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
269	'type' => Controls_Manager::TEXT,
270	'dynamic' => array( 'active' => true ),
271	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
272	'label_block' => true,
273	'condition' => array(
274	'separator_type' => 'animation',
275	),
276	'ai' => array(
277	'active' => false,
278	),
279	)
280	);
281
282	$this->add_responsive_control(
283	'premium_image_separator_image_size',
284	array(
285	'label' => __( 'Width/Size', 'premium-addons-for-elementor' ),
286	'type' => Controls_Manager::SLIDER,
287	'size_units' => array( 'px', 'em', '%', 'custom' ),
288	'default' => array(
289	'unit' => 'px',
290	'size' => 200,
291	),
292	'range' => array(
293	'px' => array(
294	'min' => 1,
295	'max' => 800,
296	),
297	'em' => array(
298	'min' => 1,
299	'max' => 30,
300	),
301	),
302	'selectors' => array(
303	'{{WRAPPER}} .premium-image-separator-container img' => 'width: {{SIZE}}{{UNIT}}',
304	'{{WRAPPER}} .premium-image-separator-container i' => 'font-size: {{SIZE}}{{UNIT}}',
305	'{{WRAPPER}} .premium-image-separator-container svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;',
306	),
307	)
308	);
309
310	$this->add_responsive_control(
311	'premium_image_separator_image_height',
312	array(
313	'label' => __( 'Height', 'premium-addons-for-elementor' ),
314	'type' => Controls_Manager::SLIDER,
315	'size_units' => array( 'px', 'em', 'custom' ),
316	'range' => array(
317	'px' => array(
318	'min' => 1,
319	'max' => 500,
320	),
321	'em' => array(
322	'min' => 1,
323	'max' => 30,
324	),
325	),
326	'selectors' => array(
327	'{{WRAPPER}} .premium-image-separator-container img' => 'height: {{SIZE}}{{UNIT}} !important',
328	),
329	'condition' => array(
330	'separator_type' => 'image',
331	),
332	)
333	);
334
335	$this->add_responsive_control(
336	'image_fit',
337	array(
338	'label' => __( 'Image Fit', 'premium-addons-for-elementor' ),
339	'type' => Controls_Manager::SELECT,
340	'options' => array(
341	'cover' => __( 'Cover', 'premium-addons-for-elementor' ),
342	'fill' => __( 'Fill', 'premium-addons-for-elementor' ),
343	'contain' => __( 'Contain', 'premium-addons-for-elementor' ),
344	),
345	'default' => 'fill',
346	'selectors' => array(
347	'{{WRAPPER}} .premium-image-separator-container img' => 'object-fit: {{VALUE}}',
348	),
349	'condition' => array(
350	'separator_type' => 'image',
351	),
352	)
353	);
354
355	$animation_conds = array(
356	'relation' => 'or',
357	'terms' => array(
358	array(
359	'name' => 'separator_type',
360	'value' => 'animation',
361	),
362	array(
363	'terms' => array(
364	array(
365	'relation' => 'or',
366	'terms' => array(
367	array(
368	'name' => 'separator_type',
369	'value' => 'icon',
370	),
371	array(
372	'name' => 'separator_type',
373	'value' => 'svg',
374	),
375	),
376	),
377	array(
378	'name' => 'draw_svg',
379	'value' => 'yes',
380	),
381	),
382	),
383	),
384	);
385
386	$this->add_control(
387	'draw_svg',
388	array(
389	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
390	'type' => Controls_Manager::SWITCHER,
391	'description' => __( 'Enable this option to make the icon drawable. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=ZLr0bRe0RAY" target="_blank">tutorial</a>',
392	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
393	'condition' => array(
394	'separator_type' => array( 'icon', 'svg' ),
395	'separator_icon[library]!' => 'svg',
396	),
397	)
398	);
399
400	if ( $draw_icon ) {
401
402	$this->add_control(
403	'stroke_width',
404	array(
405	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
406	'type' => Controls_Manager::SLIDER,
407	'range' => array(
408	'px' => array(
409	'min' => 0,
410	'max' => 50,
411	'step' => 0.1,
412	),
413	),
414	'condition' => array(
415	'separator_type' => array( 'icon', 'svg' ),
416	),
417	'selectors' => array(
418	'{{WRAPPER}} .premium-image-separator-container svg *' => 'stroke-width: {{SIZE}}',
419	),
420	)
421	);
422
423	$this->add_control(
424	'svg_sync',
425	array(
426	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
427	'type' => Controls_Manager::SWITCHER,
428	'condition' => array(
429	'separator_type' => array( 'icon', 'svg' ),
430	'draw_svg' => 'yes',
431	),
432	)
433	);
434
435	$this->add_control(
436	'frames',
437	array(
438	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
439	'type' => Controls_Manager::NUMBER,
440	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
441	'default' => 5,
442	'min' => 1,
443	'max' => 100,
444	'condition' => array(
445	'separator_type' => array( 'icon', 'svg' ),
446	'draw_svg' => 'yes',
447	),
448	)
449	);
450	} else {
451
452	Helper_Functions::get_draw_svg_notice(
453	$this,
454	'separator',
455	array(
456	'separator_type' => array( 'icon', 'svg' ),
457	'separator_icon[library]!' => 'svg',
458	)
459	);
460
461	}
462
463	$this->add_control(
464	'lottie_loop',
465	array(
466	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
467	'type' => Controls_Manager::SWITCHER,
468	'return_value' => 'true',
469	'default' => 'true',
470	'conditions' => $animation_conds,
471	)
472	);
473
474	$this->add_control(
475	'lottie_reverse',
476	array(
477	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
478	'type' => Controls_Manager::SWITCHER,
479	'return_value' => 'true',
480	'conditions' => $animation_conds,
481	)
482	);
483
484	$this->add_control(
485	'lottie_hover',
486	array(
487	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
488	'type' => Controls_Manager::SWITCHER,
489	'return_value' => 'true',
490	'conditions' => $animation_conds,
491	)
492	);
493
494	if ( $draw_icon ) {
495
496	$this->add_control(
497	'start_point',
498	array(
499	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
500	'type' => Controls_Manager::SLIDER,
501	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
502	'default' => array(
503	'unit' => '%',
504	'size' => 0,
505	),
506	'condition' => array(
507	'separator_type' => array( 'icon', 'svg' ),
508	'draw_svg' => 'yes',
509	'lottie_reverse!' => 'true',
510	),
511
512	)
513	);
514
515	$this->add_control(
516	'end_point',
517	array(
518	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
519	'type' => Controls_Manager::SLIDER,
520	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
521	'default' => array(
522	'unit' => '%',
523	'size' => 0,
524	),
525	'condition' => array(
526	'separator_type' => array( 'icon', 'svg' ),
527	'draw_svg' => 'yes',
528	'lottie_reverse' => 'true',
529	),
530
531	)
532	);
533
534	$this->add_control(
535	'svg_yoyo',
536	array(
537	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
538	'type' => Controls_Manager::SWITCHER,
539	'condition' => array(
540	'separator_type' => array( 'icon', 'svg' ),
541	'draw_svg' => 'yes',
542	'lottie_loop' => 'true',
543	),
544	)
545	);
546	}
547
548	$this->add_responsive_control(
549	'premium_image_separator_image_gutter',
550	array(
551	'label' => __( 'Gutter (%)', 'premium-addons-for-elementor' ),
552	'type' => Controls_Manager::NUMBER,
553	'default' => -50,
554	'separator' => 'before',
555	'description' => __( '-50% is default. Increase to push the image outside or decrease to pull the image inside.', 'premium-addons-for-elementor' ),
556	'selectors' => array(
557	'{{WRAPPER}} .premium-image-separator-container' => 'transform: translateY( {{VALUE}}% );',
558	),
559	)
560	);
561
562	$this->add_control(
563	'premium_image_separator_image_align',
564	array(
565	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
566	'type' => Controls_Manager::CHOOSE,
567	'options' => array(
568	'left' => array(
569	'title' => __( 'Left', 'premium-addons-for-elementor' ),
570	'icon' => 'eicon-text-align-left',
571	),
572	'center' => array(
573	'title' => __( 'Center', 'premium-addons-for-elementor' ),
574	'icon' => 'eicon-text-align-center',
575	),
576	'right' => array(
577	'title' => __( 'Right', 'premium-addons-for-elementor' ),
578	'icon' => 'eicon-text-align-right',
579	),
580	),
581	'default' => 'center',
582	'toggle' => false,
583	'selectors' => array(
584	'{{WRAPPER}} .premium-image-separator-container' => 'text-align: {{VALUE}};',
585	),
586	)
587	);
588
589	$this->add_control(
590	'premium_image_separator_link_switcher',
591	array(
592	'label' => __( 'Link', 'premium-addons-for-elementor' ),
593	'type' => Controls_Manager::SWITCHER,
594	'description' => __( 'Add a custom link or select an existing page link', 'premium-addons-for-elementor' ),
595	)
596	);
597
598	$this->add_control(
599	'premium_image_separator_link_type',
600	array(
601	'label' => __( 'Link/URL', 'premium-addons-for-elementor' ),
602	'type' => Controls_Manager::SELECT,
603	'options' => array(
604	'url' => __( 'URL', 'premium-addons-for-elementor' ),
605	'link' => __( 'Existing Page', 'premium-addons-for-elementor' ),
606	),
607	'default' => 'url',
608	'label_block' => true,
609	'condition' => array(
610	'premium_image_separator_link_switcher' => 'yes',
611	),
612	)
613	);
614
615	$this->add_control(
616	'premium_image_separator_existing_page',
617	array(
618	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
619	'type' => Premium_Post_Filter::TYPE,
620	'label_block' => true,
621	'multiple' => false,
622	'source' => array( 'post', 'page' ),
623	'condition' => array(
624	'premium_image_separator_link_switcher' => 'yes',
625	'premium_image_separator_link_type' => 'link',
626	),
627	)
628	);
629
630	$this->add_control(
631	'premium_image_separator_image_link',
632	array(
633	'label' => __( 'URL', 'premium-addons-for-elementor' ),
634	'type' => Controls_Manager::URL,
635	'dynamic' => array( 'active' => true ),
636	'label_block' => true,
637	'condition' => array(
638	'premium_image_separator_link_switcher' => 'yes',
639	'premium_image_separator_link_type' => 'url',
640	),
641	)
642	);
643
644	$this->add_control(
645	'mask_switcher',
646	array(
647	'label' => __( 'Mask Image Shape', 'premium-addons-for-elementor' ),
648	'type' => Controls_Manager::SWITCHER,
649	'condition' => array(
650	'separator_type!' => 'icon',
651	),
652	)
653	);
654
655	$this->add_control(
656	'mask_image',
657	array(
658	'label' => __( 'Mask Image', 'premium-addons-for-elementor' ),
659	'type' => Controls_Manager::MEDIA,
660	'description' => __( 'Use PNG image with the shape you want to mask around feature image.', 'premium-addons-for-elementor' ),
661	'selectors' => array(
662	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-image: url("{{URL}}"); -webkit-mask-image: url("{{URL}}");',
663	),
664	'condition' => array(
665	'separator_type!' => 'icon',
666	'mask_switcher' => 'yes',
667	),
668	)
669	);
670
671	$this->add_control(
672	'mask_size',
673	array(
674	'label' => __( 'Mask Size', 'premium-addons-for-elementor' ),
675	'type' => Controls_Manager::SELECT,
676	'options' => array(
677	'contain' => __( 'Contain', 'premium-addons-for-elementor' ),
678	'cover' => __( 'Cover', 'premium-addons-for-elementor' ),
679	),
680	'default' => 'contain',
681	'selectors' => array(
682	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-size: {{VALUE}}; -webkit-mask-size: {{VALUE}}',
683	),
684	'condition' => array(
685	'separator_type!' => 'icon',
686	'mask_switcher' => 'yes',
687	),
688	)
689	);
690
691	$this->add_control(
692	'mask_position_cover',
693	array(
694	'label' => __( 'Mask Position', 'premium-addons-for-elementor' ),
695	'type' => Controls_Manager::SELECT,
696	'options' => array(
697	'center center' => __( 'Center Center', 'premium-addons-for-elementor' ),
698	'center left' => __( 'Center Left', 'premium-addons-for-elementor' ),
699	'center right' => __( 'Center Right', 'premium-addons-for-elementor' ),
700	'top center' => __( 'Top Center', 'premium-addons-for-elementor' ),
701	'top left' => __( 'Top Left', 'premium-addons-for-elementor' ),
702	'top right' => __( 'Top Right', 'premium-addons-for-elementor' ),
703	'bottom center' => __( 'Bottom Center', 'premium-addons-for-elementor' ),
704	'bottom left' => __( 'Bottom Left', 'premium-addons-for-elementor' ),
705	'bottom right' => __( 'Bottom Right', 'premium-addons-for-elementor' ),
706	),
707	'default' => 'center center',
708	'selectors' => array(
709	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-position: {{VALUE}}; -webkit-mask-position: {{VALUE}}',
710	),
711	'condition' => array(
712	'separator_type!' => 'icon',
713	'mask_switcher' => 'yes',
714	'mask_size' => 'cover',
715	),
716	)
717	);
718
719	$this->add_control(
720	'mask_position_contain',
721	array(
722	'label' => __( 'Mask Position', 'premium-addons-for-elementor' ),
723	'type' => Controls_Manager::SELECT,
724	'options' => array(
725	'center center' => __( 'Center Center', 'premium-addons-for-elementor' ),
726	'top center' => __( 'Top Center', 'premium-addons-for-elementor' ),
727	'bottom center' => __( 'Bottom Center', 'premium-addons-for-elementor' ),
728	),
729	'default' => 'center center',
730	'selectors' => array(
731	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-position: {{VALUE}}; -webkit-mask-position: {{VALUE}}',
732	),
733	'condition' => array(
734	'separator_type!' => 'icon',
735	'mask_switcher' => 'yes',
736	'mask_size' => 'contain',
737	),
738	)
739	);
740
741	$this->end_controls_section();
742
743	$this->start_controls_section(
744	'section_pa_docs',
745	array(
746	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
747	)
748	);
749
750	$title = __( 'Getting started »', 'premium-addons-for-elementor' );
751
752	$doc_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/docs/image-separator-widget-tutorial/', 'separator-widget', 'wp-editor', 'get-support' );
753
754	$this->add_control(
755	'doc_1',
756	array(
757	'type' => Controls_Manager::RAW_HTML,
758	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title ),
759	'content_classes' => 'editor-pa-doc',
760	)
761	);
762
763	Helper_Functions::register_element_feedback_controls( $this );
764
765	$this->end_controls_section();
766
767	$this->start_controls_section(
768	'premium_image_separator_style',
769	array(
770	'label' => __( 'Separator', 'premium-addons-for-elementor' ),
771	'tab' => Controls_Manager::TAB_STYLE,
772	)
773	);
774
775	$this->add_control(
776	'svg_color',
777	array(
778	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
779	'type' => Controls_Manager::COLOR,
780	'global' => false,
781	'condition' => array(
782	'separator_type' => array( 'icon', 'svg' ),
783	'draw_svg' => 'yes',
784	),
785	)
786	);
787
788	$this->add_control(
789	'icon_color',
790	array(
791	'label' => __( 'Color', 'premium-addons-for-elementor' ),
792	'type' => Controls_Manager::COLOR,
793	'global' => array(
794	'default' => Global_Colors::COLOR_PRIMARY,
795	),
796	'selectors' => array(
797	'{{WRAPPER}} .premium-image-separator-container i' => 'color: {{VALUE}}',
798	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'fill: {{VALUE}};',
799	),
800	'condition' => array(
801	'separator_type' => array( 'icon', 'svg' ),
802	// 'draw_svg!' => 'yes', we need user to control icon color even on draw
803	),
804	)
805	);
806
807	$this->add_control(
808	'icon_hover_color',
809	array(
810	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
811	'type' => Controls_Manager::COLOR,
812	'global' => array(
813	'default' => Global_Colors::COLOR_PRIMARY,
814	),
815	'selectors' => array(
816	'{{WRAPPER}} .premium-image-separator-container i:hover' => 'color: {{VALUE}}',
817	'{{WRAPPER}} .premium-drawable-icon:hover , {{WRAPPER}} svg:not([class="premium-"]):hover' => 'fill: {{VALUE}};',
818	),
819	'condition' => array(
820	'separator_type' => array( 'icon', 'svg' ),
821	// 'draw_svg!' => 'yes', we need user to control icon color even on draw
822	),
823	)
824	);
825
826	if ( $draw_icon ) {
827	$this->add_control(
828	'stroke_color',
829	array(
830	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
831	'type' => Controls_Manager::COLOR,
832	'global' => array(
833	'default' => Global_Colors::COLOR_ACCENT,
834	),
835	'condition' => array(
836	'separator_type' => array( 'icon', 'svg' ),
837	),
838	'selectors' => array(
839	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
840	),
841	)
842	);
843	}
844
845	$this->add_control(
846	'icon_background_color',
847	array(
848	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
849	'type' => Controls_Manager::COLOR,
850	'global' => array(
851	'default' => Global_Colors::COLOR_SECONDARY,
852	),
853	'selectors' => array(
854	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container > svg' => 'background-color: {{VALUE}}',
855	),
856	'condition' => array(
857	'separator_type' => 'icon',
858	),
859	)
860	);
861
862	$this->add_control(
863	'icon_hover_background_color',
864	array(
865	'label' => __( 'Hover Background Color', 'premium-addons-for-elementor' ),
866	'type' => Controls_Manager::COLOR,
867	'global' => array(
868	'default' => Global_Colors::COLOR_SECONDARY,
869	),
870	'selectors' => array(
871	'{{WRAPPER}} .premium-image-separator-container i:hover, {{WRAPPER}} .premium-image-separator-container > svg:hover' => 'background-color: {{VALUE}}',
872	),
873	'condition' => array(
874	'separator_type' => 'icon',
875	),
876	)
877	);
878
879	$this->add_group_control(
880	Group_Control_Css_Filter::get_type(),
881	array(
882	'name' => 'css_filters',
883	'selector' => '{{WRAPPER}} .premium-image-separator-container',
884	'condition' => array(
885	'separator_type!' => 'icon',
886	),
887	)
888	);
889
890	$this->add_group_control(
891	Group_Control_Css_Filter::get_type(),
892	array(
893	'name' => 'hover_css_filters',
894	'label' => __( 'Hover CSS Filters', 'premium-addons-for-elementor' ),
895	'selector' => '{{WRAPPER}} .premium-image-separator-container:hover',
896	'condition' => array(
897	'separator_type!' => 'icon',
898	),
899	)
900	);
901
902	$this->add_responsive_control(
903	'separator_border_radius',
904	array(
905	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
906	'type' => Controls_Manager::DIMENSIONS,
907	'size_units' => array( 'px', 'em', '%' ),
908	'selectors' => array(
909	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
910	),
911	'condition' => array(
912	'separator_adv_radius!' => 'yes',
913	'separator_type!' => 'animation',
914	),
915	)
916	);
917
918	$this->add_control(
919	'separator_adv_radius',
920	array(
921	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
922	'type' => Controls_Manager::SWITCHER,
923	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>' . __( '. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=S0BJazLHV-M" target="_blank">tutorial</a>',
924	'condition' => array(
925	'separator_type!' => 'animation',
926	),
927	)
928	);
929
930	$this->add_control(
931	'separator_adv_radius_value',
932	array(
933	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
934	'type' => Controls_Manager::TEXT,
935	'dynamic' => array( 'active' => true ),
936	'selectors' => array(
937	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container img' => 'border-radius: {{VALUE}};',
938	),
939	'condition' => array(
940	'separator_adv_radius' => 'yes',
941	'separator_type!' => 'animation',
942	),
943	'ai' => array(
944	'active' => false,
945	),
946	)
947	);
948
949	$this->add_group_control(
950	Group_Control_Text_Shadow::get_type(),
951	array(
952	'name' => 'separator_shadow',
953	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
954	'selector' => '{{WRAPPER}} .premium-image-separator-container i',
955	'condition' => array(
956	'separator_type' => 'icon',
957	),
958	)
959	);
960
961	$this->add_responsive_control(
962	'icon_padding',
963	array(
964	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
965	'type' => Controls_Manager::DIMENSIONS,
966	'size_units' => array( 'px', 'em', '%' ),
967	'selectors' => array(
968	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
969	),
970	'condition' => array(
971	'separator_type' => 'icon',
972	),
973	)
974	);
975
976	$this->end_controls_section();
977	}
978
979	/**
980	* Render Image Separator widget output on the frontend.
981	*
982	* Written in PHP and used to generate the final HTML.
983	*
984	* @since 1.0.0
985	* @access protected
986	*/
987	protected function render() {
988
989	$settings = $this->get_settings_for_display();
990
991	$type = $settings['separator_type'];
992
993	if ( 'yes' === $settings['premium_image_separator_link_switcher'] ) {
994	$link_type = $settings['premium_image_separator_link_type'];
995
996	if ( 'url' === $link_type ) {
997	$this->add_link_attributes( 'link', $settings['premium_image_separator_image_link'] );
998	} else {
999	$this->add_render_attribute( 'link', 'href', get_permalink( $settings['premium_image_separator_existing_page'] ) );
1000	}
1001
1002	$this->add_render_attribute( 'link', 'class', 'premium-image-separator-link' );
1003
1004	}
1005
1006	if ( 'image' === $type ) {
1007
1008	$image_id = isset( $settings['premium_image_separator_image']['id'] ) ? (int) apply_filters( 'wpml_object_id', $settings['premium_image_separator_image']['id'], 'attachment', true ) : 0;
1009
1010	if ( $image_id ) {
1011	$image_url = wp_get_attachment_image_url( $image_id, 'full' );
1012	} else {
1013	$image_url = $settings['premium_image_separator_image']['url'];
1014	}
1015
1016	$alt = esc_attr( Control_Media::get_image_alt( $settings['premium_image_separator_image'] ) );
1017	} elseif ( 'animation' === $type ) {
1018	$this->add_render_attribute(
1019	'separator_lottie',
1020	array(
1021	'class' => 'premium-lottie-animation',
1022	'data-lottie-url' => $settings['lottie_url'],
1023	'data-lottie-loop' => $settings['lottie_loop'],
1024	'data-lottie-reverse' => $settings['lottie_reverse'],
1025	'data-lottie-hover' => $settings['lottie_hover'],
1026	)
1027	);
1028	} else {
1029
1030	$this->add_render_attribute( 'icon', 'class', 'premium-drawable-icon' );
1031
1032	if ( 'yes' === $settings['draw_svg'] ) {
1033	$this->add_render_attribute( 'container', 'class', 'elementor-invisible' );
1034
1035	if ( 'icon' === $type ) {
1036	$this->add_render_attribute( 'icon', 'class', $settings['separator_icon']['value'] );
1037	}
1038
1039	$this->add_render_attribute(
1040	'icon',
1041	array(
1042	'class' => 'premium-svg-drawer',
1043	'data-svg-reverse' => $settings['lottie_reverse'],
1044	'data-svg-loop' => $settings['lottie_loop'],
1045	'data-svg-hover' => $settings['lottie_hover'],
1046	'data-svg-sync' => $settings['svg_sync'],
1047	'data-svg-fill' => $settings['svg_color'],
1048	'data-svg-frames' => $settings['frames'],
1049	'data-svg-yoyo' => $settings['svg_yoyo'],
1050	'data-svg-point' => $settings['lottie_reverse'] ? $settings['end_point']['size'] : $settings['start_point']['size'],
1051	)
1052	);
1053
1054	} else {
1055	$this->add_render_attribute( 'icon', 'class', 'premium-svg-nodraw' );
1056	}
1057	}
1058
1059	$this->add_render_attribute( 'container', 'class', 'premium-image-separator-container' );
1060
1061	?>
1062
1063	<div <?php $this->print_render_attribute_string( 'container' ); ?>>
1064	<?php if ( 'image' === $type ) : ?>
1065	<img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $alt ); ?>">
1066	<?php
1067	elseif ( 'icon' === $type ) :
1068	if ( 'yes' !== $settings['draw_svg'] ) :
1069	Icons_Manager::render_icon(
1070	$settings['separator_icon'],
1071	array(
1072	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1073	'aria-hidden' => 'true',
1074	)
1075	);
1076	else :
1077
1078	echo Helper_Functions::get_svg_by_icon(
1079	$settings['separator_icon'],
1080	$this->get_render_attribute_string( 'icon' )
1081	);
1082
1083	endif;
1084	?>
1085	<?php elseif ( 'svg' === $type ) : ?>
1086	<div <?php $this->print_render_attribute_string( 'icon' ); ?>>
1087	<?php echo Helper_Functions::sanitize_svg( $this->get_settings_for_display( 'custom_svg' ) ); ?>
1088	</div>
1089	<?php else : ?>
1090	<div <?php $this->print_render_attribute_string( 'separator_lottie' ); ?>></div>
1091	<?php endif; ?>
1092
1093	<?php if ( 'yes' === $settings['premium_image_separator_link_switcher'] ) : ?>
1094	<a <?php $this->print_render_attribute_string( 'link' ); ?>></a>
1095	<?php endif; ?>
1096	</div>
1097	<?php
1098	}
1099
1100	/**
1101	* Render Image Separator widget output in the editor.
1102	*
1103	* Written as a Backbone JavaScript template and used to generate the live preview.
1104	*
1105	* @since 1.0.0
1106	* @access protected
1107	*/
1108	protected function content_template() {}
1109	}
1110