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

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

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

premium-image-separator.php

1099 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	)
244	);
245
246	$this->add_control(
247	'premium_image_separator_image',
248	array(
249	'label' => __( 'Image', 'premium-addons-for-elementor' ),
250	'type' => Controls_Manager::MEDIA,
251	'dynamic' => array( 'active' => true ),
252	'default' => array(
253	'url' => Utils::get_placeholder_image_src(),
254	),
255	'label_block' => true,
256	'condition' => array(
257	'separator_type' => 'image',
258	),
259	)
260	);
261
262	$this->add_control(
263	'lottie_url',
264	array(
265	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
266	'type' => Controls_Manager::TEXT,
267	'dynamic' => array( 'active' => true ),
268	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
269	'label_block' => true,
270	'condition' => array(
271	'separator_type' => 'animation',
272	),
273	)
274	);
275
276	$this->add_responsive_control(
277	'premium_image_separator_image_size',
278	array(
279	'label' => __( 'Width/Size', 'premium-addons-for-elementor' ),
280	'type' => Controls_Manager::SLIDER,
281	'size_units' => array( 'px', 'em', '%', 'custom' ),
282	'default' => array(
283	'unit' => 'px',
284	'size' => 200,
285	),
286	'range' => array(
287	'px' => array(
288	'min' => 1,
289	'max' => 800,
290	),
291	'em' => array(
292	'min' => 1,
293	'max' => 30,
294	),
295	),
296	'selectors' => array(
297	'{{WRAPPER}} .premium-image-separator-container img' => 'width: {{SIZE}}{{UNIT}}',
298	'{{WRAPPER}} .premium-image-separator-container i' => 'font-size: {{SIZE}}{{UNIT}}',
299	'{{WRAPPER}} .premium-image-separator-container svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;',
300	),
301	)
302	);
303
304	$this->add_responsive_control(
305	'premium_image_separator_image_height',
306	array(
307	'label' => __( 'Height', 'premium-addons-for-elementor' ),
308	'type' => Controls_Manager::SLIDER,
309	'size_units' => array( 'px', 'em', 'custom' ),
310	'range' => array(
311	'px' => array(
312	'min' => 1,
313	'max' => 500,
314	),
315	'em' => array(
316	'min' => 1,
317	'max' => 30,
318	),
319	),
320	'selectors' => array(
321	'{{WRAPPER}} .premium-image-separator-container img' => 'height: {{SIZE}}{{UNIT}} !important',
322	),
323	'condition' => array(
324	'separator_type' => 'image',
325	),
326	)
327	);
328
329	$this->add_responsive_control(
330	'image_fit',
331	array(
332	'label' => __( 'Image Fit', 'premium-addons-for-elementor' ),
333	'type' => Controls_Manager::SELECT,
334	'options' => array(
335	'cover' => __( 'Cover', 'premium-addons-for-elementor' ),
336	'fill' => __( 'Fill', 'premium-addons-for-elementor' ),
337	'contain' => __( 'Contain', 'premium-addons-for-elementor' ),
338	),
339	'default' => 'fill',
340	'selectors' => array(
341	'{{WRAPPER}} .premium-image-separator-container img' => 'object-fit: {{VALUE}}',
342	),
343	'condition' => array(
344	'separator_type' => 'image',
345	),
346	)
347	);
348
349	$animation_conds = array(
350	'relation' => 'or',
351	'terms' => array(
352	array(
353	'name' => 'separator_type',
354	'value' => 'animation',
355	),
356	array(
357	'terms' => array(
358	array(
359	'relation' => 'or',
360	'terms' => array(
361	array(
362	'name' => 'separator_type',
363	'value' => 'icon',
364	),
365	array(
366	'name' => 'separator_type',
367	'value' => 'svg',
368	),
369	),
370	),
371	array(
372	'name' => 'draw_svg',
373	'value' => 'yes',
374	),
375	),
376	),
377	),
378	);
379
380	$this->add_control(
381	'draw_svg',
382	array(
383	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
384	'type' => Controls_Manager::SWITCHER,
385	'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>',
386	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
387	'condition' => array(
388	'separator_type' => array( 'icon', 'svg' ),
389	'separator_icon[library]!' => 'svg',
390	),
391	)
392	);
393
394	if ( $draw_icon ) {
395
396	$this->add_control(
397	'stroke_width',
398	array(
399	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
400	'type' => Controls_Manager::SLIDER,
401	'range' => array(
402	'px' => array(
403	'min' => 0,
404	'max' => 50,
405	'step' => 0.1,
406	),
407	),
408	'condition' => array(
409	'separator_type' => array( 'icon', 'svg' ),
410	),
411	'selectors' => array(
412	'{{WRAPPER}} .premium-image-separator-container svg *' => 'stroke-width: {{SIZE}}',
413	),
414	)
415	);
416
417	$this->add_control(
418	'svg_sync',
419	array(
420	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
421	'type' => Controls_Manager::SWITCHER,
422	'condition' => array(
423	'separator_type' => array( 'icon', 'svg' ),
424	'draw_svg' => 'yes',
425	),
426	)
427	);
428
429	$this->add_control(
430	'frames',
431	array(
432	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
433	'type' => Controls_Manager::NUMBER,
434	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
435	'default' => 5,
436	'min' => 1,
437	'max' => 100,
438	'condition' => array(
439	'separator_type' => array( 'icon', 'svg' ),
440	'draw_svg' => 'yes',
441	),
442	)
443	);
444	} else {
445
446	Helper_Functions::get_draw_svg_notice(
447	$this,
448	'separator',
449	array(
450	'separator_type' => array( 'icon', 'svg' ),
451	'separator_icon[library]!' => 'svg',
452	)
453	);
454
455	}
456
457	$this->add_control(
458	'lottie_loop',
459	array(
460	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
461	'type' => Controls_Manager::SWITCHER,
462	'return_value' => 'true',
463	'default' => 'true',
464	'conditions' => $animation_conds,
465	)
466	);
467
468	$this->add_control(
469	'lottie_reverse',
470	array(
471	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
472	'type' => Controls_Manager::SWITCHER,
473	'return_value' => 'true',
474	'conditions' => $animation_conds,
475	)
476	);
477
478	$this->add_control(
479	'lottie_hover',
480	array(
481	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
482	'type' => Controls_Manager::SWITCHER,
483	'return_value' => 'true',
484	'conditions' => $animation_conds,
485	)
486	);
487
488	if ( $draw_icon ) {
489
490	$this->add_control(
491	'start_point',
492	array(
493	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
494	'type' => Controls_Manager::SLIDER,
495	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
496	'default' => array(
497	'unit' => '%',
498	'size' => 0,
499	),
500	'condition' => array(
501	'separator_type' => array( 'icon', 'svg' ),
502	'draw_svg' => 'yes',
503	'lottie_reverse!' => 'true',
504	),
505
506	)
507	);
508
509	$this->add_control(
510	'end_point',
511	array(
512	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
513	'type' => Controls_Manager::SLIDER,
514	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
515	'default' => array(
516	'unit' => '%',
517	'size' => 0,
518	),
519	'condition' => array(
520	'separator_type' => array( 'icon', 'svg' ),
521	'draw_svg' => 'yes',
522	'lottie_reverse' => 'true',
523	),
524
525	)
526	);
527
528	$this->add_control(
529	'svg_yoyo',
530	array(
531	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
532	'type' => Controls_Manager::SWITCHER,
533	'condition' => array(
534	'separator_type' => array( 'icon', 'svg' ),
535	'draw_svg' => 'yes',
536	'lottie_loop' => 'true',
537	),
538	)
539	);
540	}
541
542	$this->add_responsive_control(
543	'premium_image_separator_image_gutter',
544	array(
545	'label' => __( 'Gutter (%)', 'premium-addons-for-elementor' ),
546	'type' => Controls_Manager::NUMBER,
547	'default' => -50,
548	'separator' => 'before',
549	'description' => __( '-50% is default. Increase to push the image outside or decrease to pull the image inside.', 'premium-addons-for-elementor' ),
550	'selectors' => array(
551	'{{WRAPPER}} .premium-image-separator-container' => 'transform: translateY( {{VALUE}}% );',
552	),
553	)
554	);
555
556	$this->add_control(
557	'premium_image_separator_image_align',
558	array(
559	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
560	'type' => Controls_Manager::CHOOSE,
561	'options' => array(
562	'left' => array(
563	'title' => __( 'Left', 'premium-addons-for-elementor' ),
564	'icon' => 'eicon-text-align-left',
565	),
566	'center' => array(
567	'title' => __( 'Center', 'premium-addons-for-elementor' ),
568	'icon' => 'eicon-text-align-center',
569	),
570	'right' => array(
571	'title' => __( 'Right', 'premium-addons-for-elementor' ),
572	'icon' => 'eicon-text-align-right',
573	),
574	),
575	'default' => 'center',
576	'toggle' => false,
577	'selectors' => array(
578	'{{WRAPPER}} .premium-image-separator-container' => 'text-align: {{VALUE}};',
579	),
580	)
581	);
582
583	$this->add_control(
584	'premium_image_separator_link_switcher',
585	array(
586	'label' => __( 'Link', 'premium-addons-for-elementor' ),
587	'type' => Controls_Manager::SWITCHER,
588	'description' => __( 'Add a custom link or select an existing page link', 'premium-addons-for-elementor' ),
589	)
590	);
591
592	$this->add_control(
593	'premium_image_separator_link_type',
594	array(
595	'label' => __( 'Link/URL', 'premium-addons-for-elementor' ),
596	'type' => Controls_Manager::SELECT,
597	'options' => array(
598	'url' => __( 'URL', 'premium-addons-for-elementor' ),
599	'link' => __( 'Existing Page', 'premium-addons-for-elementor' ),
600	),
601	'default' => 'url',
602	'label_block' => true,
603	'condition' => array(
604	'premium_image_separator_link_switcher' => 'yes',
605	),
606	)
607	);
608
609	$this->add_control(
610	'premium_image_separator_existing_page',
611	array(
612	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
613	'type' => Premium_Post_Filter::TYPE,
614	'label_block' => true,
615	'multiple' => false,
616	'source' => array( 'post', 'page' ),
617	'condition' => array(
618	'premium_image_separator_link_switcher' => 'yes',
619	'premium_image_separator_link_type' => 'link',
620	),
621	)
622	);
623
624	$this->add_control(
625	'premium_image_separator_image_link',
626	array(
627	'label' => __( 'URL', 'premium-addons-for-elementor' ),
628	'type' => Controls_Manager::URL,
629	'dynamic' => array( 'active' => true ),
630	'label_block' => true,
631	'condition' => array(
632	'premium_image_separator_link_switcher' => 'yes',
633	'premium_image_separator_link_type' => 'url',
634	),
635	)
636	);
637
638	$this->add_control(
639	'mask_switcher',
640	array(
641	'label' => __( 'Mask Image Shape', 'premium-addons-for-elementor' ),
642	'type' => Controls_Manager::SWITCHER,
643	'condition' => array(
644	'separator_type!' => 'icon',
645	),
646	)
647	);
648
649	$this->add_control(
650	'mask_image',
651	array(
652	'label' => __( 'Mask Image', 'premium-addons-for-elementor' ),
653	'type' => Controls_Manager::MEDIA,
654	'description' => __( 'Use PNG image with the shape you want to mask around feature image.', 'premium-addons-for-elementor' ),
655	'selectors' => array(
656	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-image: url("{{URL}}"); -webkit-mask-image: url("{{URL}}");',
657	),
658	'condition' => array(
659	'separator_type!' => 'icon',
660	'mask_switcher' => 'yes',
661	),
662	)
663	);
664
665	$this->add_control(
666	'mask_size',
667	array(
668	'label' => __( 'Mask Size', 'premium-addons-for-elementor' ),
669	'type' => Controls_Manager::SELECT,
670	'options' => array(
671	'contain' => __( 'Contain', 'premium-addons-for-elementor' ),
672	'cover' => __( 'Cover', 'premium-addons-for-elementor' ),
673	),
674	'default' => 'contain',
675	'selectors' => array(
676	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-size: {{VALUE}}; -webkit-mask-size: {{VALUE}}',
677	),
678	'condition' => array(
679	'separator_type!' => 'icon',
680	'mask_switcher' => 'yes',
681	),
682	)
683	);
684
685	$this->add_control(
686	'mask_position_cover',
687	array(
688	'label' => __( 'Mask Position', 'premium-addons-for-elementor' ),
689	'type' => Controls_Manager::SELECT,
690	'options' => array(
691	'center center' => __( 'Center Center', 'premium-addons-for-elementor' ),
692	'center left' => __( 'Center Left', 'premium-addons-for-elementor' ),
693	'center right' => __( 'Center Right', 'premium-addons-for-elementor' ),
694	'top center' => __( 'Top Center', 'premium-addons-for-elementor' ),
695	'top left' => __( 'Top Left', 'premium-addons-for-elementor' ),
696	'top right' => __( 'Top Right', 'premium-addons-for-elementor' ),
697	'bottom center' => __( 'Bottom Center', 'premium-addons-for-elementor' ),
698	'bottom left' => __( 'Bottom Left', 'premium-addons-for-elementor' ),
699	'bottom right' => __( 'Bottom Right', 'premium-addons-for-elementor' ),
700	),
701	'default' => 'center center',
702	'selectors' => array(
703	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-position: {{VALUE}}; -webkit-mask-position: {{VALUE}}',
704	),
705	'condition' => array(
706	'separator_type!' => 'icon',
707	'mask_switcher' => 'yes',
708	'mask_size' => 'cover',
709	),
710	)
711	);
712
713	$this->add_control(
714	'mask_position_contain',
715	array(
716	'label' => __( 'Mask Position', 'premium-addons-for-elementor' ),
717	'type' => Controls_Manager::SELECT,
718	'options' => array(
719	'center center' => __( 'Center Center', 'premium-addons-for-elementor' ),
720	'top center' => __( 'Top Center', 'premium-addons-for-elementor' ),
721	'bottom center' => __( 'Bottom Center', 'premium-addons-for-elementor' ),
722	),
723	'default' => 'center center',
724	'selectors' => array(
725	'{{WRAPPER}} .premium-image-separator-container img, {{WRAPPER}} .premium-image-separator-container svg' => 'mask-position: {{VALUE}}; -webkit-mask-position: {{VALUE}}',
726	),
727	'condition' => array(
728	'separator_type!' => 'icon',
729	'mask_switcher' => 'yes',
730	'mask_size' => 'contain',
731	),
732	)
733	);
734
735	$this->end_controls_section();
736
737	$this->start_controls_section(
738	'section_pa_docs',
739	array(
740	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
741	)
742	);
743
744	$title = __( 'Getting started »', 'premium-addons-for-elementor' );
745
746	$doc_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/docs/image-separator-widget-tutorial/', 'separator-widget', 'wp-editor', 'get-support' );
747
748	$this->add_control(
749	'doc_1',
750	array(
751	'type' => Controls_Manager::RAW_HTML,
752	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title ),
753	'content_classes' => 'editor-pa-doc',
754	)
755	);
756
757	$this->end_controls_section();
758
759	$this->start_controls_section(
760	'premium_image_separator_style',
761	array(
762	'label' => __( 'Separator', 'premium-addons-for-elementor' ),
763	'tab' => Controls_Manager::TAB_STYLE,
764	)
765	);
766
767	$this->add_control(
768	'svg_color',
769	array(
770	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
771	'type' => Controls_Manager::COLOR,
772	'global' => false,
773	'condition' => array(
774	'separator_type' => array( 'icon', 'svg' ),
775	'draw_svg' => 'yes',
776	),
777	)
778	);
779
780	$this->add_control(
781	'icon_color',
782	array(
783	'label' => __( 'Color', 'premium-addons-for-elementor' ),
784	'type' => Controls_Manager::COLOR,
785	'global' => array(
786	'default' => Global_Colors::COLOR_PRIMARY,
787	),
788	'selectors' => array(
789	'{{WRAPPER}} .premium-image-separator-container i' => 'color: {{VALUE}}',
790	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'fill: {{VALUE}};',
791	),
792	'condition' => array(
793	'separator_type' => array( 'icon', 'svg' ),
794	// 'draw_svg!' => 'yes', we need user to control icon color even on draw
795	),
796	)
797	);
798
799	$this->add_control(
800	'icon_hover_color',
801	array(
802	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
803	'type' => Controls_Manager::COLOR,
804	'global' => array(
805	'default' => Global_Colors::COLOR_PRIMARY,
806	),
807	'selectors' => array(
808	'{{WRAPPER}} .premium-image-separator-container i:hover' => 'color: {{VALUE}}',
809	'{{WRAPPER}} .premium-drawable-icon:hover , {{WRAPPER}} svg:not([class="premium-"]):hover' => 'fill: {{VALUE}};',
810	),
811	'condition' => array(
812	'separator_type' => array( 'icon', 'svg' ),
813	// 'draw_svg!' => 'yes', we need user to control icon color even on draw
814	),
815	)
816	);
817
818	if ( $draw_icon ) {
819	$this->add_control(
820	'stroke_color',
821	array(
822	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
823	'type' => Controls_Manager::COLOR,
824	'global' => array(
825	'default' => Global_Colors::COLOR_ACCENT,
826	),
827	'condition' => array(
828	'separator_type' => array( 'icon', 'svg' ),
829	),
830	'selectors' => array(
831	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
832	),
833	)
834	);
835	}
836
837	$this->add_control(
838	'icon_background_color',
839	array(
840	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
841	'type' => Controls_Manager::COLOR,
842	'global' => array(
843	'default' => Global_Colors::COLOR_SECONDARY,
844	),
845	'selectors' => array(
846	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container > svg' => 'background-color: {{VALUE}}',
847	),
848	'condition' => array(
849	'separator_type' => 'icon',
850	),
851	)
852	);
853
854	$this->add_control(
855	'icon_hover_background_color',
856	array(
857	'label' => __( 'Hover Background Color', 'premium-addons-for-elementor' ),
858	'type' => Controls_Manager::COLOR,
859	'global' => array(
860	'default' => Global_Colors::COLOR_SECONDARY,
861	),
862	'selectors' => array(
863	'{{WRAPPER}} .premium-image-separator-container i:hover, {{WRAPPER}} .premium-image-separator-container > svg:hover' => 'background-color: {{VALUE}}',
864	),
865	'condition' => array(
866	'separator_type' => 'icon',
867	),
868	)
869	);
870
871	$this->add_group_control(
872	Group_Control_Css_Filter::get_type(),
873	array(
874	'name' => 'css_filters',
875	'selector' => '{{WRAPPER}} .premium-image-separator-container',
876	'condition' => array(
877	'separator_type!' => 'icon',
878	),
879	)
880	);
881
882	$this->add_group_control(
883	Group_Control_Css_Filter::get_type(),
884	array(
885	'name' => 'hover_css_filters',
886	'label' => __( 'Hover CSS Filters', 'premium-addons-for-elementor' ),
887	'selector' => '{{WRAPPER}} .premium-image-separator-container:hover',
888	'condition' => array(
889	'separator_type!' => 'icon',
890	),
891	)
892	);
893
894	$this->add_responsive_control(
895	'separator_border_radius',
896	array(
897	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
898	'type' => Controls_Manager::DIMENSIONS,
899	'size_units' => array( 'px', 'em', '%' ),
900	'selectors' => array(
901	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
902	),
903	'condition' => array(
904	'separator_adv_radius!' => 'yes',
905	'separator_type!' => 'animation',
906	),
907	)
908	);
909
910	$this->add_control(
911	'separator_adv_radius',
912	array(
913	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
914	'type' => Controls_Manager::SWITCHER,
915	'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>',
916	'condition' => array(
917	'separator_type!' => 'animation',
918	),
919	)
920	);
921
922	$this->add_control(
923	'separator_adv_radius_value',
924	array(
925	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
926	'type' => Controls_Manager::TEXT,
927	'dynamic' => array( 'active' => true ),
928	'selectors' => array(
929	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container img' => 'border-radius: {{VALUE}};',
930	),
931	'condition' => array(
932	'separator_adv_radius' => 'yes',
933	'separator_type!' => 'animation',
934	),
935	)
936	);
937
938	$this->add_group_control(
939	Group_Control_Text_Shadow::get_type(),
940	array(
941	'name' => 'separator_shadow',
942	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
943	'selector' => '{{WRAPPER}} .premium-image-separator-container i',
944	'condition' => array(
945	'separator_type' => 'icon',
946	),
947	)
948	);
949
950	$this->add_responsive_control(
951	'icon_padding',
952	array(
953	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
954	'type' => Controls_Manager::DIMENSIONS,
955	'size_units' => array( 'px', 'em', '%' ),
956	'selectors' => array(
957	'{{WRAPPER}} .premium-image-separator-container i, {{WRAPPER}} .premium-image-separator-container svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
958	),
959	'condition' => array(
960	'separator_type' => 'icon',
961	),
962	)
963	);
964
965	$this->end_controls_section();
966	}
967
968	/**
969	* Render Image Separator widget output on the frontend.
970	*
971	* Written in PHP and used to generate the final HTML.
972	*
973	* @since 1.0.0
974	* @access protected
975	*/
976	protected function render() {
977
978	$settings = $this->get_settings_for_display();
979
980	$type = $settings['separator_type'];
981
982	if ( 'yes' === $settings['premium_image_separator_link_switcher'] ) {
983	$link_type = $settings['premium_image_separator_link_type'];
984
985	if ( 'url' === $link_type ) {
986	$this->add_link_attributes( 'link', $settings['premium_image_separator_image_link'] );
987	} else {
988	$this->add_render_attribute( 'link', 'href', get_permalink( $settings['premium_image_separator_existing_page'] ) );
989	}
990
991	$this->add_render_attribute( 'link', 'class', 'premium-image-separator-link' );
992
993	}
994
995	if ( 'image' === $type ) {
996
997	$image_id = isset( $settings['premium_image_separator_image']['id'] ) ? (int) apply_filters( 'wpml_object_id', $settings['premium_image_separator_image']['id'], 'attachment', true ) : 0;
998
999	if ( $image_id ) {
1000	$image_url = wp_get_attachment_image_url( $image_id, 'full' );
1001	} else {
1002	$image_url = $settings['premium_image_separator_image']['url'];
1003	}
1004
1005	$alt = esc_attr( Control_Media::get_image_alt( $settings['premium_image_separator_image'] ) );
1006	} elseif ( 'animation' === $type ) {
1007	$this->add_render_attribute(
1008	'separator_lottie',
1009	array(
1010	'class' => 'premium-lottie-animation',
1011	'data-lottie-url' => $settings['lottie_url'],
1012	'data-lottie-loop' => $settings['lottie_loop'],
1013	'data-lottie-reverse' => $settings['lottie_reverse'],
1014	'data-lottie-hover' => $settings['lottie_hover'],
1015	)
1016	);
1017	} else {
1018
1019	$this->add_render_attribute( 'icon', 'class', 'premium-drawable-icon' );
1020
1021	if ( 'yes' === $settings['draw_svg'] ) {
1022	$this->add_render_attribute( 'container', 'class', 'elementor-invisible' );
1023
1024	if ( 'icon' === $type ) {
1025	$this->add_render_attribute( 'icon', 'class', $settings['separator_icon']['value'] );
1026	}
1027
1028	$this->add_render_attribute(
1029	'icon',
1030	array(
1031	'class' => 'premium-svg-drawer',
1032	'data-svg-reverse' => $settings['lottie_reverse'],
1033	'data-svg-loop' => $settings['lottie_loop'],
1034	'data-svg-hover' => $settings['lottie_hover'],
1035	'data-svg-sync' => $settings['svg_sync'],
1036	'data-svg-fill' => $settings['svg_color'],
1037	'data-svg-frames' => $settings['frames'],
1038	'data-svg-yoyo' => $settings['svg_yoyo'],
1039	'data-svg-point' => $settings['lottie_reverse'] ? $settings['end_point']['size'] : $settings['start_point']['size'],
1040	)
1041	);
1042
1043	} else {
1044	$this->add_render_attribute( 'icon', 'class', 'premium-svg-nodraw' );
1045	}
1046	}
1047
1048	$this->add_render_attribute( 'container', 'class', 'premium-image-separator-container' );
1049
1050	?>
1051
1052	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'container' ) ); ?>>
1053	<?php if ( 'image' === $type ) : ?>
1054	<img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $alt ); ?>">
1055	<?php
1056	elseif ( 'icon' === $type ) :
1057	if ( 'yes' !== $settings['draw_svg'] ) :
1058	Icons_Manager::render_icon(
1059	$settings['separator_icon'],
1060	array(
1061	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1062	'aria-hidden' => 'true',
1063	)
1064	);
1065	else :
1066
1067	echo Helper_Functions::get_svg_by_icon(
1068	$settings['separator_icon'],
1069	$this->get_render_attribute_string( 'icon' )
1070	);
1071
1072	endif;
1073	?>
1074	<?php elseif ( 'svg' === $type ) : ?>
1075	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>>
1076	<?php $this->print_unescaped_setting( 'custom_svg' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1077	</div>
1078	<?php else : ?>
1079	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'separator_lottie' ) ); ?>></div>
1080	<?php endif; ?>
1081
1082	<?php if ( 'yes' === $settings['premium_image_separator_link_switcher'] ) : ?>
1083	<a <?php echo wp_kses_post( $this->get_render_attribute_string( 'link' ) ); ?>></a>
1084	<?php endif; ?>
1085	</div>
1086	<?php
1087	}
1088
1089	/**
1090	* Render Image Separtor widget output in the editor.
1091	*
1092	* Written as a Backbone JavaScript template and used to generate the live preview.
1093	*
1094	* @since 1.0.0
1095	* @access protected
1096	*/
1097	protected function content_template() {}
1098	}
1099