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

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

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

premium-image-button.php

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