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

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

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

premium-image-button.php

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