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

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

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

premium-image-button.php

1956 lines

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