premium-image-button.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.32

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

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

premium-image-button.php

1932 lines

1	<?php
2	/**
3	* Premium Image Button.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Plugin;
10	use Elementor\Icons_Manager;
11	use Elementor\Widget_Base;
12	use Elementor\Controls_Manager;
13	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
14	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
15	use Elementor\Group_Control_Border;
16	use Elementor\Group_Control_Typography;
17	use Elementor\Group_Control_Text_Shadow;
18	use Elementor\Group_Control_Box_Shadow;
19	use Elementor\Group_Control_Background;
20
21	// PremiumAddons Classes.
22	use PremiumAddons\Admin\Includes\Admin_Helper;
23	use PremiumAddons\Includes\Helper_Functions;
24	use PremiumAddons\Includes\Controls\Premium_Post_Filter;
25
26	if ( ! defined( 'ABSPATH' ) ) {
27	exit; // If this file is called directly, abort.
28	}
29
30	/**
31	* Class Premium_Image_Button
32	*/
33	class Premium_Image_Button extends Widget_Base {
34
35	/**
36	* Check if the icon draw is enabled.
37	*
38	* @since 4.9.26
39	* @access private
40	*
41	* @var bool
42	*/
43	private $is_draw_enabled = null;
44
45	/**
46	* Check Icon Draw Option.
47	*
48	* @since 4.9.26
49	* @access public
50	*/
51	public function check_icon_draw() {
52
53	if ( null === $this->is_draw_enabled ) {
54	$this->is_draw_enabled = Admin_Helper::check_svg_draw( 'premium-image-button' );
55	}
56
57	return $this->is_draw_enabled;
58
59	}
60
61	/**
62	* Retrieve Widget Name.
63	*
64	* @since 1.0.0
65	* @access public
66	*/
67	public function get_name() {
68	return 'premium-addon-image-button';
69	}
70
71	/**
72	* Retrieve Widget Title.
73	*
74	* @since 1.0.0
75	* @access public
76	*/
77	public function get_title() {
78	return __( 'Image Button', 'premium-addons-for-elementor' );
79	}
80
81	/**
82	* Retrieve Widget Dependent CSS.
83	*
84	* @since 1.0.0
85	* @access public
86	*
87	* @return array CSS style handles.
88	*/
89	public function get_style_depends() {
90	return array(
91	'pa-btn',
92	'premium-addons',
93	);
94	}
95
96	/**
97	* Retrieve Widget Dependent JS.
98	*
99	* @since 1.0.0
100	* @access public
101	*
102	* @return array JS script handles.
103	*/
104	public function get_script_depends() {
105
106	$draw_scripts = $this->check_icon_draw() ? array(
107	'pa-tweenmax',
108	'pa-motionpath',
109	) : array();
110
111	return array_merge(
112	$draw_scripts,
113	array(
114	'lottie-js',
115	'premium-addons',
116	)
117	);
118	}
119
120	/**
121	* Retrieve Widget Icon.
122	*
123	* @since 1.0.0
124	* @access public
125	*
126	* @return string widget icon.
127	*/
128	public function get_icon() {
129	return 'pa-image-button';
130	}
131
132	/**
133	* Retrieve Widget Keywords.
134	*
135	* @since 1.0.0
136	* @access public
137	*
138	* @return string Widget keywords.
139	*/
140	public function get_keywords() {
141	return array( 'pa', 'premium', 'premium image button', 'cta', 'call', 'link', 'btn' );
142	}
143
144	protected function is_dynamic_content(): bool {
145	return false;
146	}
147
148	/**
149	* Retrieve Widget Categories.
150	*
151	* @since 1.5.1
152	* @access public
153	*
154	* @return array Widget categories.
155	*/
156	public function get_categories() {
157	return array( 'premium-elements' );
158	}
159
160	/**
161	* Retrieve Widget Support URL.
162	*
163	* @access public
164	*
165	* @return string support URL.
166	*/
167	public function get_custom_help_url() {
168	return 'https://premiumaddons.com/support/';
169	}
170
171	public function has_widget_inner_wrapper(): bool {
172	return ! Helper_Functions::check_elementor_experiment( 'e_optimized_markup' );
173	}
174
175	/**
176	* Register Image Button controls.
177	*
178	* @since 1.0.0
179	* @access protected
180	*/
181	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
182
183	$draw_icon = $this->check_icon_draw();
184
185	$this->start_controls_section(
186	'premium_image_button_general_section',
187	array(
188	'label' => __( 'Button', 'premium-addons-for-elementor' ),
189	)
190	);
191
192	$demo = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/image-button-widget-for-elementor-page-builder/', 'img-button', 'wp-editor', 'demo' );
193	Helper_Functions::add_templates_controls( $this, 'image-button', $demo );
194
195	$this->add_control(
196	'premium_image_button_text',
197	array(
198	'label' => __( 'Text', 'premium-addons-for-elementor' ),
199	'type' => Controls_Manager::TEXT,
200	'dynamic' => array( 'active' => true ),
201	'default' => __( 'Premium Addons', 'premium-addons-for-elementor' ),
202	'label_block' => true,
203	)
204	);
205
206	$this->add_control(
207	'premium_image_button_link_selection',
208	array(
209	'label' => __( 'Link Type', 'premium-addons-for-elementor' ),
210	'type' => Controls_Manager::SELECT,
211	'options' => array(
212	'url' => __( 'URL', 'premium-addons-for-elementor' ),
213	'link' => __( 'Existing Page', 'premium-addons-for-elementor' ),
214	),
215	'default' => 'url',
216	'label_block' => true,
217	)
218	);
219
220	$this->add_control(
221	'premium_image_button_link',
222	array(
223	'label' => __( 'Link', 'premium-addons-for-elementor' ),
224	'type' => Controls_Manager::URL,
225	'dynamic' => array( 'active' => true ),
226	'default' => array(
227	'url' => '#',
228	),
229	'placeholder' => 'https://premiumaddons.com/',
230	'label_block' => true,
231	'condition' => array(
232	'premium_image_button_link_selection' => 'url',
233	),
234	)
235	);
236
237	$this->add_control(
238	'premium_image_button_existing_link',
239	array(
240	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
241	'type' => Premium_Post_Filter::TYPE,
242	'label_block' => true,
243	'multiple' => false,
244	'source' => array( 'post', 'page' ),
245	'condition' => array(
246	'premium_image_button_link_selection' => 'link',
247	),
248	)
249	);
250
251	$this->add_control(
252	'premium_image_button_hover_effect',
253	array(
254	'label' => __( 'Hover Effect', 'premium-addons-for-elementor' ),
255	'type' => Controls_Manager::SELECT,
256	'default' => 'none',
257	'options' => array(
258	'none' => __( 'None', 'premium-addons-for-elementor' ),
259	'style1' => __( 'Background Slide', 'premium-addons-for-elementor' ),
260	'style3' => __( 'Diagonal Slide', 'premium-addons-for-elementor' ),
261	'style4' => __( 'Icon Slide', 'premium-addons-for-elementor' ),
262	'style5' => __( 'Overlap', 'premium-addons-for-elementor' ),
263	'style6' => __( 'Grow', 'premium-addons-for-elementor' ),
264	'style8' => __( 'Animated Underline', 'premium-addons-for-elementor' ),
265	),
266	'separator' => 'before',
267	'label_block' => true,
268	)
269	);
270
271	$this->add_control(
272	'underline_style',
273	array(
274	'label' => __( 'Underline Style', 'premium-addons-for-elementor' ),
275	'type' => Controls_Manager::SELECT,
276	'default' => 'line1',
277	'options' => array(
278	'line1' => __( 'Style 1', 'premium-addons-for-elementor' ),
279	'line2' => __( 'Style 2', 'premium-addons-for-elementor' ),
280	'line3' => __( 'Style 3', 'premium-addons-for-elementor' ),
281	'line4' => __( 'Style 4', 'premium-addons-for-elementor' ),
282	'line5' => __( 'Style 5', 'premium-addons-for-elementor' ),
283	'line6' => __( 'Style 6', 'premium-addons-for-elementor' ),
284	'line7' => __( 'Style 7', 'premium-addons-for-elementor' ),
285	),
286	'condition' => array(
287	'premium_image_button_hover_effect' => 'style8',
288	),
289	'label_block' => true,
290	)
291	);
292
293	$this->add_responsive_control(
294	'line_width',
295	array(
296	'label' => __( 'Line Width (%)', 'premium-addons-for-elementor' ),
297	'type' => Controls_Manager::SLIDER,
298	'condition' => array(
299	'premium_image_button_hover_effect' => 'style8',
300	'underline_style' => array( 'line1', 'line3', 'line5' ),
301	),
302	'default' => array(
303	'size' => 100,
304	),
305	'selectors' => array(
306	'{{WRAPPER}} .premium-btn-svg, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after' => 'width: {{SIZE}}%',
307	),
308	)
309	);
310
311	$this->add_responsive_control(
312	'line_height',
313	array(
314	'label' => __( 'Line Height (PX)', 'premium-addons-for-elementor' ),
315	'type' => Controls_Manager::SLIDER,
316	'condition' => array(
317	'premium_image_button_hover_effect' => 'style8',
318	'underline_style!' => array( 'line1', 'line3', 'line4' ),
319	),
320	'selectors' => array(
321	'{{WRAPPER}} .premium-button-line2::before, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after, {{WRAPPER}} .premium-button-line6::before, {{WRAPPER}} .premium-button-line7::before' => 'height: {{SIZE}}px',
322	),
323	)
324	);
325
326	$this->add_responsive_control(
327	'line_h_position',
328	array(
329	'label' => __( 'Line Horizontal Position (%)', 'premium-addons-for-elementor' ),
330	'type' => Controls_Manager::SLIDER,
331	'condition' => array(
332	'premium_image_button_hover_effect' => 'style8',
333	'underline_style' => array( 'line3', 'line5' ),
334	),
335	'selectors' => array(
336	'{{WRAPPER}} .premium-btn-line-wrap, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after' => 'left: {{SIZE}}%',
337	),
338	)
339	);
340
341	$this->add_responsive_control(
342	'line_v_position',
343	array(
344	'label' => __( 'Line Vertical Position (%)', 'premium-addons-for-elementor' ),
345	'type' => Controls_Manager::SLIDER,
346	'condition' => array(
347	'premium_image_button_hover_effect' => 'style8',
348	),
349	'selectors' => array(
350	'{{WRAPPER}} .premium-btn-line-wrap, {{WRAPPER}} .premium-button-line2::before, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line6::before, {{WRAPPER}} .premium-button-line7::before' => 'top: {{SIZE}}%',
351	'{{WRAPPER}} .premium-button-line5::after' => 'top: calc( ( {{SIZE}}% + 2px ) + {{line_height.SIZE}}px )',
352	),
353	)
354	);
355
356	$this->add_control(
357	'premium_image_button_style1_dir',
358	array(
359	'label' => __( 'Slide Direction', 'premium-addons-for-elementor' ),
360	'type' => Controls_Manager::SELECT,
361	'default' => 'bottom',
362	'options' => array(
363	'bottom' => __( 'Top to Bottom', 'premium-addons-for-elementor' ),
364	'top' => __( 'Bottom to Top', 'premium-addons-for-elementor' ),
365	'left' => __( 'Right to Left', 'premium-addons-for-elementor' ),
366	'right' => __( 'Left to Right', 'premium-addons-for-elementor' ),
367	),
368	'label_block' => true,
369	'condition' => array(
370	'premium_image_button_hover_effect' => 'style1',
371	),
372	)
373	);
374
375	$this->add_control(
376	'premium_image_button_style3_dir',
377	array(
378	'label' => __( 'Slide Direction', 'premium-addons-for-elementor' ),
379	'type' => Controls_Manager::SELECT,
380	'default' => 'bottom',
381	'options' => array(
382	'top' => __( 'Bottom Left to Top Right', 'premium-addons-for-elementor' ),
383	'bottom' => __( 'Top Right to Bottom Left', 'premium-addons-for-elementor' ),
384	'left' => __( 'Top Left to Bottom Right', 'premium-addons-for-elementor' ),
385	'right' => __( 'Bottom Right to Top Left', 'premium-addons-for-elementor' ),
386	),
387	'condition' => array(
388	'premium_image_button_hover_effect' => 'style3',
389	),
390	'label_block' => true,
391	)
392	);
393
394	$this->add_control(
395	'premium_image_button_style4_dir',
396	array(
397	'label' => __( 'Slide Direction', 'premium-addons-for-elementor' ),
398	'type' => Controls_Manager::SELECT,
399	'default' => 'bottom',
400	'options' => array(
401	'top' => __( 'Bottom to Top', 'premium-addons-for-elementor' ),
402	'bottom' => __( 'Top to Bottom', 'premium-addons-for-elementor' ),
403	'left' => __( 'Left to Right', 'premium-addons-for-elementor' ),
404	'right' => __( 'Right to Left', 'premium-addons-for-elementor' ),
405	),
406	'label_block' => true,
407	'condition' => array(
408	'premium_image_button_hover_effect' => 'style4',
409	),
410	)
411	);
412
413	$this->add_control(
414	'premium_image_button_style5_dir',
415	array(
416	'label' => __( 'Overlap Direction', 'premium-addons-for-elementor' ),
417	'type' => Controls_Manager::SELECT,
418	'default' => 'horizontal',
419	'options' => array(
420	'horizontal' => __( 'Horizontal', 'premium-addons-for-elementor' ),
421	'vertical' => __( 'Vertical', 'premium-addons-for-elementor' ),
422	),
423	'label_block' => true,
424	'condition' => array(
425	'premium_image_button_hover_effect' => 'style5',
426	),
427	)
428	);
429
430	$this->add_responsive_control(
431	'grow_size',
432	array(
433	'label' => __( 'Grow Layer Size', 'premium-addons-for-elementor' ),
434	'type' => Controls_Manager::SLIDER,
435	'range' => array(
436	'px' => array(
437	'min' => 0,
438	'max' => 500,
439	),
440	),
441	'condition' => array(
442	'premium_image_button_hover_effect' => 'style6',
443	'mouse_detect!' => 'yes',
444	),
445	'selectors' => array(
446	'{{WRAPPER}} .premium-image-button.premium-button-style6:before' => 'width: {{SIZE}}px; height: {{SIZE}}px',
447	),
448	)
449	);
450
451	$this->add_responsive_control(
452	'grow_speed',
453	array(
454	'label' => __( 'Grow Animation Speed (Sec)', 'premium-addons-for-elementor' ),
455	'type' => Controls_Manager::SLIDER,
456	'range' => array(
457	'px' => array(
458	'min' => 0,
459	'max' => 3,
460	'step' => 0.1,
461	),
462	),
463	'condition' => array(
464	'premium_image_button_hover_effect' => 'style6',
465	'mouse_detect!' => 'yes',
466	),
467	'selectors' => array(
468	'{{WRAPPER}} .premium-image-button.premium-button-style6:before' => 'transition-duration: {{SIZE}}s',
469	),
470	)
471	);
472
473	$this->add_control(
474	'mouse_detect',
475	array(
476	'label' => __( 'Detect Mouse Position', 'premium-addons-for-elementor' ),
477	'type' => Controls_Manager::SWITCHER,
478	'prefix_class' => 'premium-mouse-detect-',
479	'render_type' => 'template',
480	'separator' => 'after',
481	'condition' => array(
482	'premium_image_button_hover_effect' => 'style6',
483	),
484	)
485	);
486
487	$this->add_control(
488	'premium_image_button_icon_switcher',
489	array(
490	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
491	'type' => Controls_Manager::SWITCHER,
492	'description' => __( 'Enable or disable button icon', 'premium-addons-for-elementor' ),
493	'condition' => array(
494	'premium_image_button_hover_effect!' => 'style4',
495	),
496	)
497	);
498
499	$common_conditions = array(
500	'premium_image_button_icon_switcher' => 'yes',
501	'premium_image_button_hover_effect!' => 'style4',
502	);
503
504	$this->add_control(
505	'icon_type',
506	array(
507	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
508	'type' => Controls_Manager::SELECT,
509	'options' => array(
510	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
511	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
512	'svg' => __( 'SVG Code', 'premium-addons-for-elementor' ),
513	),
514	'default' => 'icon',
515	'label_block' => true,
516	'condition' => $common_conditions,
517	)
518	);
519
520	$this->add_control(
521	'premium_image_button_icon_selection_updated',
522	array(
523	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
524	'type' => Controls_Manager::ICONS,
525	'fa4compatibility' => 'premium_image_button_icon_selection',
526	'default' => array(
527	'value' => 'fas fa-star',
528	'library' => 'fa-solid',
529	),
530	'condition' => array_merge(
531	$common_conditions,
532	array(
533	'icon_type' => 'icon',
534	)
535	),
536	'label_block' => true,
537	)
538	);
539
540	$this->add_control(
541	'custom_svg',
542	array(
543	'label' => __( 'SVG Code', 'premium-addons-for-elementor' ),
544	'type' => Controls_Manager::TEXTAREA,
545	'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>',
546	'condition' => array_merge(
547	$common_conditions,
548	array(
549	'icon_type' => 'svg',
550	)
551	),
552	)
553	);
554
555	$this->add_control(
556	'lottie_url',
557	array(
558	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
559	'type' => Controls_Manager::TEXT,
560	'dynamic' => array( 'active' => true ),
561	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
562	'label_block' => true,
563	'condition' => array_merge(
564	$common_conditions,
565	array(
566	'icon_type' => 'animation',
567	)
568	),
569	)
570	);
571
572	$animation_conds = array(
573	'terms' => array(
574	array(
575	'name' => 'premium_image_button_icon_switcher',
576	'value' => 'yes',
577	),
578	array(
579	'name' => 'premium_image_button_hover_effect',
580	'operator' => '!==',
581	'value' => 'style4',
582	),
583	array(
584	'relation' => 'or',
585	'terms' => array(
586	array(
587	'name' => 'icon_type',
588	'value' => 'animation',
589	),
590	array(
591	'terms' => array(
592	array(
593	'relation' => 'or',
594	'terms' => array(
595	array(
596	'name' => 'icon_type',
597	'value' => 'icon',
598	),
599	array(
600	'name' => 'icon_type',
601	'value' => 'svg',
602	),
603	),
604	),
605	array(
606	'name' => 'draw_svg',
607	'value' => 'yes',
608	),
609	),
610	),
611	),
612	),
613	),
614	);
615
616	$this->add_control(
617	'draw_svg',
618	array(
619	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
620	'type' => Controls_Manager::SWITCHER,
621	'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>',
622	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
623	'condition' => array_merge(
624	$common_conditions,
625	array(
626	'icon_type' => array( 'icon', 'svg' ),
627	'premium_image_button_icon_selection_updated[library]!' => 'svg',
628	)
629	),
630	)
631	);
632
633	if ( $draw_icon ) {
634
635	$this->add_control(
636	'stroke_width',
637	array(
638	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
639	'type' => Controls_Manager::SLIDER,
640	'range' => array(
641	'px' => array(
642	'min' => 0,
643	'max' => 50,
644	'step' => 0.1,
645	),
646	),
647	'condition' => array_merge(
648	$common_conditions,
649	array(
650	'icon_type' => array( 'icon', 'svg' ),
651	)
652	),
653	'selectors' => array(
654	'{{WRAPPER}} .premium-image-button-text-icon-wrapper svg:not(.premium-btn-svg) *' => 'stroke-width: {{SIZE}}',
655	),
656	)
657	);
658
659	$this->add_control(
660	'svg_sync',
661	array(
662	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
663	'type' => Controls_Manager::SWITCHER,
664	'condition' => array_merge(
665	$common_conditions,
666	array(
667	'icon_type' => array( 'icon', 'svg' ),
668	'draw_svg' => 'yes',
669	)
670	),
671	)
672	);
673
674	$this->add_control(
675	'frames',
676	array(
677	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
678	'type' => Controls_Manager::NUMBER,
679	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
680	'default' => 5,
681	'min' => 1,
682	'max' => 100,
683	'condition' => array_merge(
684	$common_conditions,
685	array(
686	'icon_type' => array( 'icon', 'svg' ),
687	'draw_svg' => 'yes',
688	)
689	),
690	)
691	);
692	} else {
693
694	Helper_Functions::get_draw_svg_notice(
695	$this,
696	'button',
697	array_merge(
698	$common_conditions,
699	array(
700	'icon_type' => array( 'icon', 'svg' ),
701	'premium_image_button_icon_selection_updated[library]!' => 'svg',
702	)
703	)
704	);
705
706	}
707
708	$this->add_control(
709	'lottie_loop',
710	array(
711	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
712	'type' => Controls_Manager::SWITCHER,
713	'return_value' => 'true',
714	'default' => 'true',
715	'conditions' => $animation_conds,
716	)
717	);
718
719	$this->add_control(
720	'lottie_reverse',
721	array(
722	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
723	'type' => Controls_Manager::SWITCHER,
724	'return_value' => 'true',
725	'conditions' => $animation_conds,
726	)
727	);
728
729	if ( $draw_icon ) {
730	$this->add_control(
731	'start_point',
732	array(
733	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
734	'type' => Controls_Manager::SLIDER,
735	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
736	'default' => array(
737	'unit' => '%',
738	'size' => 0,
739	),
740	'condition' => array_merge(
741	$common_conditions,
742	array(
743	'icon_type' => array( 'icon', 'svg' ),
744	'draw_svg' => 'yes',
745	'lottie_reverse!' => 'true',
746	)
747	),
748	)
749	);
750
751	$this->add_control(
752	'end_point',
753	array(
754	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
755	'type' => Controls_Manager::SLIDER,
756	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
757	'default' => array(
758	'unit' => '%',
759	'size' => 0,
760	),
761	'condition' => array_merge(
762	$common_conditions,
763	array(
764	'icon_type' => array( 'icon', 'svg' ),
765	'draw_svg' => 'yes',
766	'lottie_reverse' => 'true',
767	)
768	),
769
770	)
771	);
772
773	$this->add_control(
774	'svg_hover',
775	array(
776	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
777	'type' => Controls_Manager::SWITCHER,
778	'return_value' => 'true',
779	'condition' => array_merge(
780	$common_conditions,
781	array(
782	'icon_type' => array( 'icon', 'svg' ),
783	'draw_svg' => 'yes',
784	)
785	),
786	)
787	);
788
789	$this->add_control(
790	'svg_yoyo',
791	array(
792	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
793	'type' => Controls_Manager::SWITCHER,
794	'condition' => array_merge(
795	$common_conditions,
796	array(
797	'icon_type' => array( 'icon', 'svg' ),
798	'draw_svg' => 'yes',
799	'lottie_loop' => 'true',
800	)
801	),
802	)
803	);
804	}
805
806	$this->add_control(
807	'slide_icon_type',
808	array(
809	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
810	'type' => Controls_Manager::SELECT,
811	'options' => array(
812	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
813	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
814	),
815	'default' => 'icon',
816	'label_block' => true,
817	'condition' => array(
818	'premium_image_button_hover_effect' => 'style4',
819	),
820	)
821	);
822
823	$this->add_control(
824	'premium_image_button_style4_icon_selection_updated',
825	array(
826	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
827	'type' => Controls_Manager::ICONS,
828	'fa4compatibility' => 'premium_image_button_style4_icon_selection',
829	'default' => array(
830	'value' => 'fas fa-star',
831	'library' => 'fa-solid',
832	),
833	'label_block' => true,
834	'condition' => array(
835	'slide_icon_type' => 'icon',
836	'premium_image_button_hover_effect' => 'style4',
837	),
838	)
839	);
840
841	$this->add_control(
842	'slide_lottie_url',
843	array(
844	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
845	'type' => Controls_Manager::TEXT,
846	'dynamic' => array( 'active' => true ),
847	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
848	'label_block' => true,
849	'condition' => array(
850	'slide_icon_type' => 'animation',
851	'premium_image_button_hover_effect' => 'style4',
852	),
853	)
854	);
855
856	$this->add_control(
857	'slide_lottie_loop',
858	array(
859	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
860	'type' => Controls_Manager::SWITCHER,
861	'return_value' => 'true',
862	'default' => 'true',
863	'condition' => array(
864	'slide_icon_type' => 'animation',
865	'premium_image_button_hover_effect' => 'style4',
866	),
867	)
868	);
869
870	$this->add_control(
871	'slide_lottie_reverse',
872	array(
873	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
874	'type' => Controls_Manager::SWITCHER,
875	'return_value' => 'true',
876	'condition' => array(
877	'slide_icon_type' => 'animation',
878	'premium_image_button_hover_effect' => 'style4',
879	),
880	)
881	);
882
883	$this->add_control(
884	'premium_image_button_icon_position',
885	array(
886	'label' => __( 'Icon Position', 'premium-addons-for-elementor' ),
887	'type' => Controls_Manager::SELECT,
888	'default' => 'before',
889	'options' => array(
890	'before' => __( 'Before', 'premium-addons-for-elementor' ),
891	'after' => __( 'After', 'premium-addons-for-elementor' ),
892	),
893	'label_block' => true,
894	'condition' => array(
895	'premium_image_button_icon_switcher' => 'yes',
896	'premium_image_button_hover_effect!' => 'style4',
897	),
898	)
899	);
900
901	$this->add_responsive_control(
902	'premium_image_button_icon_before_size',
903	array(
904	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
905	'type' => Controls_Manager::SLIDER,
906	'size_units' => array( 'px', 'em', 'vw' ),
907	'range' => array(
908	'px' => array(
909	'min' => 0,
910	'max' => 200,
911	),
912	),
913	'condition' => array(
914	'premium_image_button_icon_switcher' => 'yes',
915	'premium_image_button_hover_effect!' => 'style4',
916	),
917	'selectors' => array(
918	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}}',
919	'{{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important',
920	),
921	)
922	);
923
924	$this->add_responsive_control(
925	'premium_image_button_icon_style4_size',
926	array(
927	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
928	'type' => Controls_Manager::SLIDER,
929	'size_units' => array( 'px', 'em', 'vw' ),
930	'condition' => array(
931	'premium_image_button_hover_effect' => 'style4',
932	),
933	'selectors' => array(
934	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}}',
935	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important',
936	),
937	)
938	);
939
940	$icon_spacing = is_rtl() ? 'left' : 'right';
941
942	$icon_spacing_after = is_rtl() ? 'right' : 'left';
943
944	$this->add_responsive_control(
945	'premium_image_button_icon_before_spacing',
946	array(
947	'label' => __( 'Icon Spacing', 'premium-addons-for-elementor' ),
948	'type' => Controls_Manager::SLIDER,
949	'default' => array(
950	'size' => 15,
951	),
952	'selectors' => array(
953	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i, {{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'margin-' . $icon_spacing . ': {{SIZE}}px',
954	),
955	'separator' => 'after',
956	'condition' => array(
957	'premium_image_button_icon_switcher' => 'yes',
958	'premium_image_button_icon_position' => 'before',
959	'premium_image_button_hover_effect!' => 'style4',
960	),
961	)
962	);
963
964	$this->add_responsive_control(
965	'premium_image_button_icon_after_spacing',
966	array(
967	'label' => __( 'Icon Spacing', 'premium-addons-for-elementor' ),
968	'type' => Controls_Manager::SLIDER,
969	'default' => array(
970	'size' => 15,
971	),
972	'selectors' => array(
973	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i, {{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'margin-' . $icon_spacing_after . ': {{SIZE}}px',
974	),
975	'separator' => 'after',
976	'condition' => array(
977	'premium_image_button_icon_switcher' => 'yes',
978	'premium_image_button_icon_position' => 'after',
979	'premium_image_button_hover_effect!' => 'style4',
980	),
981	)
982	);
983
984	$this->add_control(
985	'premium_image_button_size',
986	array(
987	'label' => __( 'Size', 'premium-addons-for-elementor' ),
988	'type' => Controls_Manager::SELECT,
989	'default' => 'lg',
990	'options' => array(
991	'sm' => __( 'Small', 'premium-addons-for-elementor' ),
992	'md' => __( 'Medium', 'premium-addons-for-elementor' ),
993	'lg' => __( 'Large', 'premium-addons-for-elementor' ),
994	'block' => __( 'Block', 'premium-addons-for-elementor' ),
995	),
996	'label_block' => true,
997	'separator' => 'before',
998	)
999	);
1000
1001	$this->add_responsive_control(
1002	'premium_image_button_align',
1003	array(
1004	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
1005	'type' => Controls_Manager::CHOOSE,
1006	'options' => array(
1007	'left' => array(
1008	'title' => __( 'Left', 'premium-addons-for-elementor' ),
1009	'icon' => 'eicon-text-align-left',
1010	),
1011	'center' => array(
1012	'title' => __( 'Center', 'premium-addons-for-elementor' ),
1013	'icon' => 'eicon-text-align-center',
1014	),
1015	'right' => array(
1016	'title' => __( 'Right', 'premium-addons-for-elementor' ),
1017	'icon' => 'eicon-text-align-right',
1018	),
1019	),
1020	'selectors' => array(
1021	'{{WRAPPER}}' => 'text-align: {{VALUE}}',
1022	),
1023	'toggle' => false,
1024	'default' => 'center',
1025	'condition' => array(
1026	'premium_image_button_size!' => 'block',
1027	),
1028	)
1029	);
1030
1031	// Allow admins only to add JS.
1032	if ( current_user_can( 'administrator' ) ) {
1033	$this->add_control(
1034	'premium_image_button_event_switcher',
1035	array(
1036	'label' => __( 'onclick Event', 'premium-addons-for-elementor' ),
1037	'type' => Controls_Manager::SWITCHER,
1038	'separator' => 'before',
1039	)
1040	);
1041
1042	$this->add_control(
1043	'premium_image_button_event_function',
1044	array(
1045	'label' => __( 'Example: myFunction();', 'premium-addons-for-elementor' ),
1046	'type' => Controls_Manager::CODE,
1047	'dynamic' => array( 'active' => true ),
1048	'condition' => array(
1049	'premium_image_button_event_switcher' => 'yes',
1050	),
1051	)
1052	);
1053	}
1054
1055	$this->end_controls_section();
1056
1057	$this->start_controls_section(
1058	'section_pa_docs',
1059	array(
1060	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
1061	)
1062	);
1063
1064	$docs = array(
1065	'https://premiumaddons.com/docs/image-button-widget-tutorial' => __( 'Getting started »', 'premium-addons-for-elementor' ),
1066	'https://premiumaddons.com/docs/how-can-i-open-an-elementor-popup-using-premium-button' => __( 'How to open an Elementor popup using Image Button widget »', 'premium-addons-for-elementor' ),
1067	'https://premiumaddons.com/docs/how-to-play-pause-a-soundtrack-using-premium-button-widget' => __( 'How to play/pause a soundtrack using Image Button widget »', 'premium-addons-for-elementor' ),
1068	'https://premiumaddons.com/docs/how-to-use-elementor-widgets-to-navigate-through-carousel-widget-slides/' => __( 'How To Use Image Button To Navigate Through Carousel Widget Slides »', 'premium-addons-for-elementor' ),
1069	);
1070
1071	$doc_index = 1;
1072	foreach ( $docs as $url => $title ) {
1073
1074	$doc_url = Helper_Functions::get_campaign_link( $url, 'img-button-widget', 'wp-editor', 'get-support' );
1075
1076	$this->add_control(
1077	'doc_' . $doc_index,
1078	array(
1079	'type' => Controls_Manager::RAW_HTML,
1080	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title, 'premium-addons-for-elementor' ),
1081	'content_classes' => 'editor-pa-doc',
1082	)
1083	);
1084
1085	++$doc_index;
1086
1087	}
1088
1089	$this->end_controls_section();
1090
1091	Helper_Functions::register_papro_promotion_controls( $this, 'img-button' );
1092
1093	$this->start_controls_section(
1094	'premium_image_button_style_section',
1095	array(
1096	'label' => __( 'Button', 'premium-addons-for-elementor' ),
1097	'tab' => Controls_Manager::TAB_STYLE,
1098	)
1099	);
1100
1101	$this->add_responsive_control(
1102	'button_width',
1103	array(
1104	'label' => __( 'Width', 'premium-addons-for-elementor' ),
1105	'type' => Controls_Manager::SLIDER,
1106	'size_units' => array( 'px', '%', 'vw', 'custom' ),
1107	'range' => array(
1108	'px' => array(
1109	'min' => 1,
1110	'max' => 500,
1111	),
1112	),
1113	'selectors' => array(
1114	'{{WRAPPER}} .premium-image-button' => 'width: {{SIZE}}{{UNIT}};',
1115	),
1116	'condition' => array(
1117	'premium_image_button_size!' => 'block',
1118	),
1119	)
1120	);
1121
1122	$this->add_control(
1123	'svg_color',
1124	array(
1125	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
1126	'type' => Controls_Manager::COLOR,
1127	'global' => false,
1128	'separator' => 'after',
1129	'condition' => array(
1130	'premium_image_button_icon_switcher' => 'yes',
1131	'icon_type' => array( 'icon', 'svg' ),
1132	'premium_image_button_hover_effect!' => 'style4',
1133	'draw_svg' => 'yes',
1134	),
1135	)
1136	);
1137
1138	$this->add_group_control(
1139	Group_Control_Typography::get_type(),
1140	array(
1141	'name' => 'premium_image_button_typo',
1142	'global' => array(
1143	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1144	),
1145	'selector' => '{{WRAPPER}} .premium-image-button',
1146	)
1147	);
1148
1149	$this->start_controls_tabs( 'premium_image_button_style_tabs' );
1150
1151	$this->start_controls_tab(
1152	'premium_image_button_style_normal',
1153	array(
1154	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
1155	)
1156	);
1157
1158	$this->add_control(
1159	'premium_image_button_text_color_normal',
1160	array(
1161	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
1162	'type' => Controls_Manager::COLOR,
1163	'global' => array(
1164	'default' => Global_Colors::COLOR_SECONDARY,
1165	),
1166	'selectors' => array(
1167	'{{WRAPPER}} .premium-image-button .premium-image-button-text-icon-wrapper span' => 'color: {{VALUE}};',
1168	),
1169	)
1170	);
1171
1172	$this->add_control(
1173	'premium_image_button_icon_color_normal',
1174	array(
1175	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
1176	'type' => Controls_Manager::COLOR,
1177	'global' => array(
1178	'default' => Global_Colors::COLOR_SECONDARY,
1179	),
1180	'selectors' => array(
1181	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i' => 'color: {{VALUE}}',
1182	'{{WRAPPER}} .premium-drawable-icon, {{WRAPPER}} svg:not([class*="premium-"])' => 'fill: {{VALUE}};',
1183	),
1184	'condition' => array(
1185	'premium_image_button_icon_switcher' => 'yes',
1186	'icon_type' => 'icon',
1187	'premium_image_button_hover_effect!' => 'style4',
1188	),
1189	)
1190	);
1191
1192	if ( $draw_icon ) {
1193	$this->add_control(
1194	'stroke_color',
1195	array(
1196	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1197	'type' => Controls_Manager::COLOR,
1198	'global' => array(
1199	'default' => Global_Colors::COLOR_ACCENT,
1200	),
1201	'condition' => array(
1202	'premium_image_button_icon_switcher' => 'yes',
1203	'icon_type' => array( 'icon', 'svg' ),
1204	'premium_image_button_hover_effect!' => array( 'style3', 'style4' ),
1205	),
1206	'selectors' => array(
1207	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
1208	),
1209	)
1210	);
1211	}
1212
1213	$this->add_group_control(
1214	Group_Control_Background::get_type(),
1215	array(
1216	'name' => 'premium_image_button_background',
1217	'types' => array( 'classic', 'gradient' ),
1218	'selector' => '{{WRAPPER}} .premium-image-button',
1219	'fields_options' => array(
1220	'background' => array(
1221	'default' => 'classic',
1222	),
1223	'color' => array(
1224	'global' => array(
1225	'default' => Global_Colors::COLOR_PRIMARY,
1226	),
1227	),
1228	),
1229	)
1230	);
1231
1232	$this->add_group_control(
1233	Group_Control_Border::get_type(),
1234	array(
1235	'name' => 'premium_image_button_border_normal',
1236	'selector' => '{{WRAPPER}} .premium-image-button',
1237	)
1238	);
1239
1240	$this->add_control(
1241	'premium_image_button_border_radius_normal',
1242	array(
1243	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1244	'type' => Controls_Manager::SLIDER,
1245	'size_units' => array( 'px', '%', 'em' ),
1246	'selectors' => array(
1247	'{{WRAPPER}} .premium-image-button' => 'border-radius: {{SIZE}}{{UNIT}};',
1248	),
1249	'condition' => array(
1250	'button_adv_radius!' => 'yes',
1251	),
1252	)
1253	);
1254
1255	$this->add_control(
1256	'button_adv_radius',
1257	array(
1258	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
1259	'type' => Controls_Manager::SWITCHER,
1260	'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>',
1261	)
1262	);
1263
1264	$this->add_control(
1265	'button_adv_radius_value',
1266	array(
1267	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1268	'type' => Controls_Manager::TEXT,
1269	'dynamic' => array( 'active' => true ),
1270	'selectors' => array(
1271	'{{WRAPPER}} .premium-image-button' => 'border-radius: {{VALUE}};',
1272	),
1273	'condition' => array(
1274	'button_adv_radius' => 'yes',
1275	),
1276	)
1277	);
1278
1279	$this->add_group_control(
1280	Group_Control_Text_Shadow::get_type(),
1281	array(
1282	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
1283	'name' => 'premium_image_button_icon_shadow_normal',
1284	'selector' => '{{WRAPPER}} .premium-image-button-text-icon-wrapper i',
1285	'condition' => array(
1286	'premium_image_button_icon_switcher' => 'yes',
1287	'icon_type' => 'icon',
1288	'premium_image_button_hover_effect!' => 'style4',
1289	),
1290	)
1291	);
1292
1293	$this->add_group_control(
1294	Group_Control_Text_Shadow::get_type(),
1295	array(
1296	'label' => __( 'Text Shadow', 'premium-addons-for-elementor' ),
1297	'name' => 'premium_image_button_text_shadow_normal',
1298	'selector' => '{{WRAPPER}} .premium-image-button-text-icon-wrapper span',
1299	)
1300	);
1301
1302	$this->add_group_control(
1303	Group_Control_Box_Shadow::get_type(),
1304	array(
1305	'label' => __( 'Button Shadow', 'premium-addons-for-elementor' ),
1306	'name' => 'premium_image_button_box_shadow_normal',
1307	'selector' => '{{WRAPPER}} .premium-image-button',
1308	)
1309	);
1310
1311	$this->add_responsive_control(
1312	'premium_image_button_margin_normal',
1313	array(
1314	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1315	'type' => Controls_Manager::DIMENSIONS,
1316	'size_units' => array( 'px', 'em', '%', 'vw', 'custom' ),
1317	'selectors' => array(
1318	'{{WRAPPER}} .premium-image-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1319	),
1320	)
1321	);
1322
1323	$this->add_responsive_control(
1324	'premium_image_button_padding_normal',
1325	array(
1326	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1327	'type' => Controls_Manager::DIMENSIONS,
1328	'size_units' => array( 'px', 'em', '%', 'vw', 'custom' ),
1329	'selectors' => array(
1330	'{{WRAPPER}} .premium-image-button, {{WRAPPER}} .premium-image-button-effect-container, {{WRAPPER}} .premium-button-line6::after' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1331	),
1332	)
1333	);
1334
1335	$this->end_controls_tab();
1336
1337	$this->start_controls_tab(
1338	'premium_image_button_style_hover',
1339	array(
1340	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
1341	)
1342	);
1343
1344	$this->add_control(
1345	'grow_effect_notice',
1346	array(
1347	'raw' => __( 'It\'s not recommened to set a hover image background with Grow effect.', 'premium-addons-for-elementor' ),
1348	'type' => Controls_Manager::RAW_HTML,
1349	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
1350	'condition' => array(
1351	'premium_image_button_hover_effect' => 'style6',
1352	),
1353	)
1354	);
1355
1356	$this->add_control(
1357	'premium_image_button_text_color_hover',
1358	array(
1359	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
1360	'type' => Controls_Manager::COLOR,
1361	'global' => array(
1362	'default' => Global_Colors::COLOR_PRIMARY,
1363	),
1364	'selectors' => array(
1365	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper span, {{WRAPPER}} .premium-button-line6::after' => 'color: {{VALUE}};',
1366	),
1367	'condition' => array(
1368	'premium_image_button_hover_effect!' => 'style4',
1369	),
1370	)
1371	);
1372
1373	$this->add_control(
1374	'premium_image_button_icon_color_hover',
1375	array(
1376	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
1377	'type' => Controls_Manager::COLOR,
1378	'global' => array(
1379	'default' => Global_Colors::COLOR_SECONDARY,
1380	),
1381	'selectors' => array(
1382	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper i' => 'color: {{VALUE}}',
1383	'{{WRAPPER}} .premium-image-button:hover .premium-drawable-icon, {{WRAPPER}} .premium-image-button:hover svg:not([class*="premium-"])' => 'fill: {{VALUE}};',
1384	),
1385	'condition' => array(
1386	'premium_image_button_icon_switcher' => 'yes',
1387	'icon_type' => 'icon',
1388	'premium_image_button_hover_effect!' => 'style4',
1389	),
1390	)
1391	);
1392
1393	$this->add_control(
1394	'underline_color',
1395	array(
1396	'label' => __( 'Line Color', 'premium-addons-for-elementor' ),
1397	'type' => Controls_Manager::COLOR,
1398	'global' => array(
1399	'default' => Global_Colors::COLOR_PRIMARY,
1400	),
1401	'selectors' => array(
1402	'{{WRAPPER}} .premium-btn-svg' => 'stroke: {{VALUE}};',
1403	'{{WRAPPER}} .premium-button-line2::before, {{WRAPPER}} .premium-button-line4::before, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after, {{WRAPPER}} .premium-button-line6::before, {{WRAPPER}} .premium-button-line7::before' => 'background-color: {{VALUE}};',
1404	),
1405	'condition' => array(
1406	'premium_image_button_hover_effect' => 'style8',
1407	),
1408	)
1409	);
1410
1411	if ( $draw_icon ) {
1412	$this->add_control(
1413	'stroke_color_hover',
1414	array(
1415	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1416	'type' => Controls_Manager::COLOR,
1417	'global' => array(
1418	'default' => Global_Colors::COLOR_ACCENT,
1419	),
1420	'condition' => array(
1421	'premium_image_button_icon_switcher' => 'yes',
1422	'icon_type' => array( 'icon', 'svg' ),
1423	'premium_image_button_hover_effect!' => 'style4',
1424	),
1425	'selectors' => array(
1426	'{{WRAPPER}} .premium-image-button:hover .premium-drawable-icon , {{WRAPPER}} .premium-image-button:hover svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
1427	),
1428	)
1429	);
1430	}
1431
1432	$this->add_control(
1433	'premium_image_button_style4_icon_color',
1434	array(
1435	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
1436	'type' => Controls_Manager::COLOR,
1437	'global' => array(
1438	'default' => Global_Colors::COLOR_PRIMARY,
1439	),
1440	'selectors' => array(
1441	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper' => 'color: {{VALUE}}',
1442	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper svg' => 'fill: {{VALUE}}',
1443	),
1444	'condition' => array(
1445	'premium_image_button_hover_effect' => 'style4',
1446	'slide_icon_type' => 'icon',
1447	),
1448	)
1449	);
1450
1451	$this->add_control(
1452	'premium_image_button_diagonal_overlay_color',
1453	array(
1454	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
1455	'type' => Controls_Manager::COLOR,
1456	'global' => array(
1457	'default' => Global_Colors::COLOR_PRIMARY,
1458	),
1459	'selectors' => array(
1460	'{{WRAPPER}} .premium-image-button-style3:before' => 'background-color: {{VALUE}};',
1461	),
1462	'condition' => array(
1463	'premium_image_button_hover_effect' => 'style3',
1464	),
1465	)
1466	);
1467
1468	$this->add_control(
1469	'premium_image_button_overlap_overlay_color',
1470	array(
1471	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
1472	'type' => Controls_Manager::COLOR,
1473	'global' => array(
1474	'default' => Global_Colors::COLOR_PRIMARY,
1475	),
1476	'selectors' => array(
1477	'{{WRAPPER}} .premium-image-button-overlap-effect-horizontal:before, {{WRAPPER}} .premium-image-button-overlap-effect-vertical:before' => 'background-color: {{VALUE}};',
1478	),
1479	'condition' => array(
1480	'premium_image_button_hover_effect' => 'style5',
1481	),
1482	)
1483	);
1484
1485	$this->add_group_control(
1486	Group_Control_Background::get_type(),
1487	array(
1488	'name' => 'premium_image_button_background_hover',
1489	'types' => array( 'classic', 'gradient' ),
1490	'selector' => '{{WRAPPER}} .premium-image-button-none:hover, {{WRAPPER}} .premium-button-style8:hover, {{WRAPPER}} .premium-image-button-style4-icon-wrapper, {{WRAPPER}} .premium-image-button-style1:before, {{WRAPPER}} .premium-image-button-style3:hover, {{WRAPPER}} .premium-image-button-overlap-effect-horizontal:hover, {{WRAPPER}} .premium-image-button-overlap-effect-vertical:hover, {{WRAPPER}} .premium-button-style6-bg, {{WRAPPER}} .premium-button-style6:before',
1491	'fields_options' => array(
1492	'background' => array(
1493	'default' => 'classic',
1494	),
1495	'color' => array(
1496	'global' => array(
1497	'default' => Global_Colors::COLOR_TEXT,
1498	),
1499	),
1500	),
1501	)
1502	);
1503
1504	$this->add_control(
1505	'premium_image_button_overlay_color',
1506	array(
1507	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
1508	'type' => Controls_Manager::COLOR,
1509	'global' => array(
1510	'default' => Global_Colors::COLOR_PRIMARY,
1511	),
1512	'condition' => array(
1513	'premium_image_button_overlay_switcher' => 'yes',
1514	),
1515	'selectors' => array(
1516	'{{WRAPPER}} .premium-image-button-squares-effect:before, {{WRAPPER}} .premium-image-button-squares-effect:after,{{WRAPPER}} .premium-image-button-squares-square-container:before, {{WRAPPER}} .premium-image-button-squares-square-container:after' => 'background-color: {{VALUE}};',
1517	),
1518	)
1519	);
1520
1521	$this->add_group_control(
1522	Group_Control_Border::get_type(),
1523	array(
1524	'name' => 'premium_image_button_border_hover',
1525	'selector' => '{{WRAPPER}} .premium-image-button:hover',
1526	)
1527	);
1528
1529	$this->add_control(
1530	'premium_image_button_border_radius_hover',
1531	array(
1532	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1533	'type' => Controls_Manager::SLIDER,
1534	'size_units' => array( 'px', '%', 'em' ),
1535	'selectors' => array(
1536	'{{WRAPPER}} .premium-image-button:hover' => 'border-radius: {{SIZE}}{{UNIT}};',
1537	),
1538	'condition' => array(
1539	'button_hover_adv_radius!' => 'yes',
1540	),
1541	)
1542	);
1543
1544	$this->add_control(
1545	'button_hover_adv_radius',
1546	array(
1547	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
1548	'type' => Controls_Manager::SWITCHER,
1549	'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>',
1550	)
1551	);
1552
1553	$this->add_control(
1554	'button_hover_adv_radius_value',
1555	array(
1556	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1557	'type' => Controls_Manager::TEXT,
1558	'dynamic' => array( 'active' => true ),
1559	'selectors' => array(
1560	'{{WRAPPER}} .premium-image-button:hover' => 'border-radius: {{VALUE}};',
1561	),
1562	'condition' => array(
1563	'button_hover_adv_radius' => 'yes',
1564	),
1565	)
1566	);
1567
1568	$this->add_group_control(
1569	Group_Control_Text_Shadow::get_type(),
1570	array(
1571	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
1572	'name' => 'premium_image_button_icon_shadow_hover',
1573	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper i',
1574	'condition' => array(
1575	'premium_image_button_icon_switcher' => 'yes',
1576	'icon_type' => 'icon',
1577	'premium_image_button_hover_effect!' => 'style4',
1578	),
1579	)
1580	);
1581
1582	$this->add_group_control(
1583	Group_Control_Text_Shadow::get_type(),
1584	array(
1585	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
1586	'name' => 'premium_image_button_style4_icon_shadow_hover',
1587	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-style4-icon-wrapper i',
1588	'condition' => array(
1589	'premium_image_button_hover_effect' => 'style4',
1590	'slide_icon_type' => 'icon',
1591	),
1592	)
1593	);
1594
1595	$this->add_group_control(
1596	Group_Control_Text_Shadow::get_type(),
1597	array(
1598	'label' => __( 'Text Shadow', 'premium-addons-for-elementor' ),
1599	'name' => 'premium_image_button_text_shadow_hover',
1600	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper span',
1601	'condition' => array(
1602	'premium_image_button_hover_effect!' => 'style4',
1603	),
1604	)
1605	);
1606
1607	$this->add_group_control(
1608	Group_Control_Box_Shadow::get_type(),
1609	array(
1610	'label' => __( 'Button Shadow', 'premium-addons-for-elementor' ),
1611	'name' => 'premium_image_button_box_shadow_hover',
1612	'selector' => '{{WRAPPER}} .premium-image-button:hover',
1613	)
1614	);
1615
1616	$this->add_responsive_control(
1617	'premium_image_button_margin_hover',
1618	array(
1619	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1620	'type' => Controls_Manager::DIMENSIONS,
1621	'size_units' => array( 'px', 'em', '%', 'vw', 'custom' ),
1622	'selectors' => array(
1623	'{{WRAPPER}} .premium-image-button:hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1624	),
1625	)
1626	);
1627
1628	$this->add_responsive_control(
1629	'premium_image_button_padding_hover',
1630	array(
1631	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1632	'type' => Controls_Manager::DIMENSIONS,
1633	'size_units' => array( 'px', 'em', '%', 'vw', 'custom' ),
1634	'selectors' => array(
1635	'{{WRAPPER}} .premium-image-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1636	),
1637	)
1638	);
1639
1640	$this->end_controls_tab();
1641
1642	$this->end_controls_tabs();
1643
1644	$this->end_controls_section();
1645	}
1646
1647	/**
1648	* Render Image Button widget output on the frontend.
1649	*
1650	* Written in PHP and used to generate the final HTML.
1651	*
1652	* @since 1.0.0
1653	* @access protected
1654	*/
1655	protected function render() {
1656
1657	$settings = $this->get_settings_for_display();
1658
1659	$this->add_inline_editing_attributes( 'premium_image_button_text' );
1660
1661	if ( 'url' === $settings['premium_image_button_link_selection'] ) {
1662	$image_link = $settings['premium_image_button_link'];
1663	} else {
1664	$image_link = get_permalink( $settings['premium_image_button_existing_link'] );
1665	}
1666
1667	$button_text = $settings['premium_image_button_text'];
1668
1669	$button_size = 'premium-btn-' . $settings['premium_image_button_size'];
1670
1671	if ( 'yes' === $settings['premium_image_button_icon_switcher'] ) {
1672
1673	$icon_type = $settings['icon_type'];
1674
1675	if ( 'icon' === $icon_type \|\| 'svg' === $icon_type ) {
1676
1677	$this->add_render_attribute( 'icon', 'class', 'premium-drawable-icon' );
1678
1679	// if ( 'icon' === $icon_type ) {
1680
1681	// if ( ! empty( $settings['premium_image_button_icon_selection'] ) ) {
1682	// $this->add_render_attribute(
1683	// 'icon',
1684	// array(
1685	// 'class' => $settings['premium_image_button_icon_selection'],
1686	// 'aria-hidden' => 'true',
1687	// )
1688	// );
1689
1690	// }
1691
1692	// $migrated = isset( $settings['__fa4_migrated']['premium_image_button_icon_selection_updated'] );
1693	// $is_new = empty( $settings['premium_image_button_icon_selection'] ) && Icons_Manager::is_migration_allowed();
1694
1695	// }
1696
1697	if ( 'yes' === $settings['draw_svg'] ) {
1698
1699	$this->add_render_attribute(
1700	'button',
1701	'class',
1702	array(
1703	'elementor-invisible',
1704	'premium-drawer-hover',
1705	)
1706	);
1707
1708	// if ( 'icon' === $icon_type ) {
1709
1710	// $this->add_render_attribute( 'icon', 'class', $settings['premium_image_button_icon_selection_updated']['value'] );
1711
1712	// }
1713
1714	$this->add_render_attribute(
1715	'icon',
1716	array(
1717	'class' => 'premium-svg-drawer',
1718	'data-svg-reverse' => $settings['lottie_reverse'],
1719	'data-svg-loop' => $settings['lottie_loop'],
1720	'data-svg-sync' => $settings['svg_sync'],
1721	'data-svg-hover' => $settings['svg_hover'],
1722	'data-svg-fill' => $settings['svg_color'],
1723	'data-svg-frames' => $settings['frames'],
1724	'data-svg-yoyo' => $settings['svg_yoyo'],
1725	'data-svg-point' => $settings['lottie_reverse'] ? $settings['end_point']['size'] : $settings['start_point']['size'],
1726	)
1727	);
1728
1729	} else {
1730	$this->add_render_attribute( 'icon', 'class', 'premium-svg-nodraw' );
1731	}
1732	} else {
1733	$this->add_render_attribute(
1734	'lottie',
1735	array(
1736	'class' => 'premium-lottie-animation',
1737	'data-lottie-url' => $settings['lottie_url'],
1738	'data-lottie-loop' => $settings['lottie_loop'],
1739	'data-lottie-reverse' => $settings['lottie_reverse'],
1740	)
1741	);
1742	}
1743	}
1744
1745	if ( 'none' === $settings['premium_image_button_hover_effect'] ) {
1746	$style_dir = 'premium-image-button-none';
1747	} elseif ( 'style1' === $settings['premium_image_button_hover_effect'] ) {
1748	$style_dir = 'premium-image-button-style1-' . $settings['premium_image_button_style1_dir'];
1749	} elseif ( 'style3' === $settings['premium_image_button_hover_effect'] ) {
1750	$style_dir = 'premium-image-button-diagonal-' . $settings['premium_image_button_style3_dir'];
1751	} elseif ( 'style4' === $settings['premium_image_button_hover_effect'] ) {
1752	$style_dir = 'premium-image-button-style4-' . $settings['premium_image_button_style4_dir'];
1753
1754	$slide_icon_type = $settings['slide_icon_type'];
1755
1756	if ( 'icon' !== $slide_icon_type ) {
1757
1758	$this->add_render_attribute(
1759	'slide_lottie',
1760	array(
1761	'class' => 'premium-lottie-animation',
1762	'data-lottie-url' => $settings['slide_lottie_url'],
1763	'data-lottie-loop' => $settings['slide_lottie_loop'],
1764	'data-lottie-reverse' => $settings['slide_lottie_reverse'],
1765	)
1766	);
1767
1768	}
1769	} elseif ( 'style5' === $settings['premium_image_button_hover_effect'] ) {
1770	$style_dir = 'premium-image-button-overlap-effect-' . $settings['premium_image_button_style5_dir'];
1771	} elseif ( 'style6' === $settings['premium_image_button_hover_effect'] ) {
1772	$style_dir = 'premium-button-style6';
1773	$mouse_detect = $settings['mouse_detect'];
1774	$this->add_render_attribute( 'style6', 'class', 'premium-button-style6-bg' );
1775	} elseif ( 'style8' === $settings['premium_image_button_hover_effect'] ) {
1776	$style_dir = 'premium-button-' . $settings['underline_style'];
1777
1778	$this->add_render_attribute( 'button', 'data-text', $button_text );
1779	}
1780
1781	if ( 'style8' !== $settings['premium_image_button_hover_effect'] ) {
1782	$this->add_render_attribute( 'button', 'class', 'premium-image-button-' . $settings['premium_image_button_hover_effect'] );
1783	} else {
1784	$this->add_render_attribute( 'button', 'class', 'premium-button-' . $settings['premium_image_button_hover_effect'] );
1785	}
1786
1787	$this->add_render_attribute(
1788	'button',
1789	'class',
1790	array(
1791	'premium-image-button',
1792	$button_size,
1793	$style_dir,
1794	)
1795	);
1796
1797	if ( ! empty( $image_link ) ) {
1798
1799	if ( 'url' === $settings['premium_image_button_link_selection'] ) {
1800	$this->add_link_attributes( 'button', $image_link );
1801	} else {
1802	$this->add_render_attribute( 'button', 'href', $image_link );
1803	}
1804	}
1805
1806	if ( isset( $settings['premium_image_button_event_switcher'] ) ) {
1807	$image_event = $settings['premium_image_button_event_function'];
1808	if ( 'yes' === $settings['premium_image_button_event_switcher'] && ! empty( $image_event ) ) {
1809
1810	if ( Helper_Functions::check_capability( 'unfiltered_html' ) ) {
1811	$this->add_render_attribute( 'button', 'onclick', esc_js( $image_event ) );
1812	}
1813	}
1814	}
1815
1816	?>
1817
1818	<a <?php echo wp_kses_post( $this->get_render_attribute_string( 'button' ) ); ?>>
1819	<div class="premium-image-button-text-icon-wrapper">
1820	<?php if ( 'yes' === $settings['premium_image_button_icon_switcher'] ) : ?>
1821	<?php if ( 'style4' !== $settings['premium_image_button_hover_effect'] && 'before' === $settings['premium_image_button_icon_position'] ) : ?>
1822	<?php if ( 'icon' === $icon_type ) : ?>
1823	<?php
1824
1825	if ( 'yes' !== $settings['draw_svg'] ) :
1826	Icons_Manager::render_icon(
1827	$settings['premium_image_button_icon_selection_updated'],
1828	array(
1829	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1830	'aria-hidden' => 'true',
1831	)
1832	);
1833
1834	else :
1835
1836	echo Helper_Functions::get_svg_by_icon(
1837	$settings['premium_image_button_icon_selection_updated'],
1838	$this->get_render_attribute_string( 'icon' )
1839	);
1840
1841	endif;
1842	?>
1843	<?php elseif ( 'svg' === $icon_type ) : ?>
1844	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>>
1845	<?php $this->print_unescaped_setting( 'custom_svg' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1846	</div>
1847	<?php else : ?>
1848	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'lottie' ) ); ?>></div>
1849	<?php endif; ?>
1850	<?php endif; ?>
1851	<?php endif; ?>
1852
1853	<?php if ( ! empty( $button_text ) ) : ?>
1854	<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'premium_image_button_text' ) ); ?>>
1855	<?php echo wp_kses_post( $button_text ); ?>
1856	</span>
1857	<?php endif; ?>
1858
1859	<?php if ( 'yes' === $settings['premium_image_button_icon_switcher'] ) : ?>
1860	<?php if ( 'style4' !== $settings['premium_image_button_hover_effect'] && 'after' === $settings['premium_image_button_icon_position'] ) : ?>
1861	<?php if ( 'icon' === $icon_type ) : ?>
1862	<?php
1863
1864	if ( 'yes' !== $settings['draw_svg'] ) :
1865	Icons_Manager::render_icon(
1866	$settings['premium_image_button_icon_selection_updated'],
1867	array(
1868	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1869	'aria-hidden' => 'true',
1870	)
1871	);
1872
1873	else :
1874
1875	echo Helper_Functions::get_svg_by_icon(
1876	$settings['premium_image_button_icon_selection_updated'],
1877	$this->get_render_attribute_string( 'icon' )
1878	);
1879
1880	endif;
1881	?>
1882	<?php elseif ( 'svg' === $icon_type ) : ?>
1883	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>>
1884	<?php $this->print_unescaped_setting( 'custom_svg' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1885	</div>
1886	<?php else : ?>
1887	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'lottie' ) ); ?>></div>
1888	<?php endif; ?>
1889	<?php endif; ?>
1890	<?php endif; ?>
1891	</div>
1892
1893	<?php if ( 'style4' === $settings['premium_image_button_hover_effect'] ) : ?>
1894	<div class="premium-image-button-style4-icon-wrapper <?php echo esc_attr( $settings['premium_image_button_style4_dir'] ); ?>">
1895	<?php if ( 'icon' === $slide_icon_type ) : ?>
1896	<?php
1897
1898	Icons_Manager::render_icon( $settings['premium_image_button_style4_icon_selection_updated'], array( 'aria-hidden' => 'true' ) );
1899
1900	else :
1901	?>
1902
1903	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'slide_lottie' ) ); ?>></div>
1904
1905	<?php endif; ?>
1906	</div>
1907	<?php endif; ?>
1908
1909	<?php if ( 'style6' === $settings['premium_image_button_hover_effect'] && 'yes' === $mouse_detect ) : ?>
1910	<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'style6' ) ); ?>></span>
1911	<?php endif; ?>
1912
1913	<?php if ( 'style8' === $settings['premium_image_button_hover_effect'] ) : ?>
1914	<?php echo Helper_Functions::get_btn_svgs( $settings['underline_style'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1915	<?php endif; ?>
1916
1917	</a>
1918
1919	<?php
1920	}
1921
1922	/**
1923	* Render Image Button widget output in the editor.
1924	*
1925	* Written as a Backbone JavaScript template and used to generate the live preview.
1926	*
1927	* @since 1.0.0
1928	* @access protected
1929	*/
1930	protected function content_template() {}
1931	}
1932