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

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

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

premium-image-button.php

1197 lines

1	<?php
2
3	/**
4	* Premium Image Button.
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\Scheme_Color;
13	use Elementor\Scheme_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\Includes\Helper_Functions;
22	use PremiumAddons\Includes\Premium_Template_Tags;
23
24	if ( ! defined( 'ABSPATH' ) ) exit; // If this file is called directly, abort.
25
26	/**
27	* Class Premium_Image_Button
28	*/
29	class Premium_Image_Button extends Widget_Base {
30
31	public function get_name() {
32	return 'premium-addon-image-button';
33	}
34
35	public function get_title() {
36	return sprintf( '%1$s %2$s', Helper_Functions::get_prefix(), __('Image Button', 'premium-addons-for-elementor') );
37	}
38
39	public function getTemplateInstance() {
40	return $this->templateInstance = Premium_Template_Tags::getInstance();
41	}
42
43	public function get_style_depends() {
44	return [
45	'premium-addons'
46	];
47	}
48
49	public function get_script_depends() {
50	return [
51	'lottie-js'
52	];
53	}
54
55	public function get_icon() {
56	return 'pa-image-button';
57	}
58
59	public function get_categories() {
60	return [ 'premium-elements' ];
61	}
62
63	public function get_custom_help_url() {
64	return 'https://premiumaddons.com/support/';
65	}
66
67	/**
68	* Register Image Button controls.
69	*
70	* @since 1.0.0
71	* @access protected
72	*/
73	protected function _register_controls() {
74
75	$this->start_controls_section('premium_image_button_general_section',
76	[
77	'label' => __('Button', 'premium-addons-for-elementor'),
78	]
79	);
80
81	$this->add_control('premium_image_button_text',
82	[
83	'label' => __('Text', 'premium-addons-for-elementor'),
84	'type' => Controls_Manager::TEXT,
85	'dynamic' => [ 'active' => true ],
86	'default' => __('Click Me','premium-addons-for-elementor'),
87	'label_block' => true,
88	]
89	);
90
91	$this->add_control('premium_image_button_link_selection',
92	[
93	'label' => __('Link Type', 'premium-addons-for-elementor'),
94	'type' => Controls_Manager::SELECT,
95	'options' => [
96	'url' => __('URL', 'premium-addons-for-elementor'),
97	'link' => __('Existing Page', 'premium-addons-for-elementor'),
98	],
99	'default' => 'url',
100	'label_block' => true,
101	]
102	);
103
104	$this->add_control('premium_image_button_link',
105	[
106	'label' => __('Link', 'premium-addons-for-elementor'),
107	'type' => Controls_Manager::URL,
108	'dynamic' => [ 'active' => true ],
109	'default' => [
110	'url' => '#',
111	],
112	'placeholder' => 'https://premiumaddons.com/',
113	'label_block' => true,
114	'separator' => 'after',
115	'condition' => [
116	'premium_image_button_link_selection' => 'url'
117	]
118	]
119	);
120
121	$this->add_control('premium_image_button_existing_link',
122	[
123	'label' => __('Existing Page', 'premium-addons-for-elementor'),
124	'type' => Controls_Manager::SELECT2,
125	'options' => $this->getTemplateInstance()->get_all_posts(),
126	'condition' => [
127	'premium_image_button_link_selection' => 'link',
128	],
129	'multiple' => false,
130	'separator' => 'after',
131	'label_block' => true,
132	]
133	);
134
135	$this->add_control('premium_image_button_hover_effect',
136	[
137	'label' => __('Hover Effect', 'premium-addons-for-elementor'),
138	'type' => Controls_Manager::SELECT,
139	'default' => 'none',
140	'options' => [
141	'none' => __('None','premium-addons-for-elementor'),
142	'style1' => __('Background Slide','premium-addons-for-elementor'),
143	'style3' => __('Diagonal Slide','premium-addons-for-elementor'),
144	'style4' => __('Icon Slide','premium-addons-for-elementor'),
145	'style5' => __('Overlap','premium-addons-for-elementor'),
146	],
147	'label_block' => true,
148	]
149	);
150
151	$this->add_control('premium_image_button_style1_dir',
152	[
153	'label' => __('Slide Direction', 'premium-addons-for-elementor'),
154	'type' => Controls_Manager::SELECT,
155	'default' => 'bottom',
156	'options' => [
157	'bottom' => __('Top to Bottom','premium-addons-for-elementor'),
158	'top' => __('Bottom to Top','premium-addons-for-elementor'),
159	'left' => __('Right to Left','premium-addons-for-elementor'),
160	'right' => __('Left to Right','premium-addons-for-elementor'),
161	],
162	'label_block' => true,
163	'condition' => [
164	'premium_image_button_hover_effect' => 'style1',
165	],
166	]
167	);
168
169	$this->add_control('premium_image_button_style3_dir',
170	[
171	'label' => __('Slide Direction', 'premium-addons-for-elementor'),
172	'type' => Controls_Manager::SELECT,
173	'default' => 'bottom',
174	'options' => [
175	'top' => __('Bottom Left to Top Right','premium-addons-for-elementor'),
176	'bottom' => __('Top Right to Bottom Left','premium-addons-for-elementor'),
177	'left' => __('Top Left to Bottom Right','premium-addons-for-elementor'),
178	'right' => __('Bottom Right to Top Left','premium-addons-for-elementor'),
179	],
180	'condition' => [
181	'premium_image_button_hover_effect' => 'style3',
182	],
183	'label_block' => true,
184	]
185	);
186
187	$this->add_control('premium_image_button_style4_dir',
188	[
189	'label' => __('Slide Direction', 'premium-addons-for-elementor'),
190	'type' => Controls_Manager::SELECT,
191	'default' => 'bottom',
192	'options' => [
193	'top' => __('Bottom to Top','premium-addons-for-elementor'),
194	'bottom' => __('Top to Bottom','premium-addons-for-elementor'),
195	'left' => __('Left to Right','premium-addons-for-elementor'),
196	'right' => __('Right to Left','premium-addons-for-elementor'),
197	],
198	'label_block' => true,
199	'condition' => [
200	'premium_image_button_hover_effect' => 'style4',
201	],
202	]
203	);
204
205	$this->add_control('premium_image_button_style5_dir',
206	[
207	'label' => __('Overlap Direction', 'premium-addons-for-elementor'),
208	'type' => Controls_Manager::SELECT,
209	'default' => 'horizontal',
210	'options' => [
211	'horizontal' => __('Horizontal','premium-addons-for-elementor'),
212	'vertical' => __('Vertical','premium-addons-for-elementor'),
213	],
214	'label_block' => true,
215	'condition' => [
216	'premium_image_button_hover_effect' => 'style5',
217	],
218	]
219	);
220
221	$this->add_control('premium_image_button_icon_switcher',
222	[
223	'label' => __('Icon', 'premium-addons-for-elementor'),
224	'type' => Controls_Manager::SWITCHER,
225	'description' => __('Enable or disable button icon','premium-addons-for-elementor'),
226	'condition' => [
227	'premium_image_button_hover_effect!' => 'style4'
228	],
229	]
230	);
231
232	$this->add_control('icon_type',
233	[
234	'label' => __('Icon Type', 'premium-addons-for-elementor'),
235	'type' => Controls_Manager::SELECT,
236	'options' => [
237	'icon' => __('Icon', 'premium-addons-for-elementor'),
238	'animation' => __('Lottie Animation', 'premium-addons-for-elementor'),
239	],
240	'default' => 'icon',
241	'label_block' => true,
242	'condition' => [
243	'premium_image_button_hover_effect!' => 'style4',
244	'premium_image_button_icon_switcher' => 'yes',
245	],
246	]
247	);
248
249	$this->add_control('premium_image_button_icon_selection_updated',
250	[
251	'label' => __('Icon', 'premium-addons-for-elementor'),
252	'type' => Controls_Manager::ICONS,
253	'fa4compatibility' => 'premium_image_button_icon_selection',
254	'default' => [
255	'value' => 'fas fa-bars',
256	'library' => 'fa-solid',
257	],
258	'condition' => [
259	'premium_image_button_icon_switcher' => 'yes',
260	'premium_image_button_hover_effect!' => 'style4',
261	'icon_type' => 'icon'
262	],
263	'label_block' => true,
264	]
265	);
266
267	$this->add_control('lottie_url',
268	[
269	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
270	'type' => Controls_Manager::TEXT,
271	'dynamic' => [ 'active' => true ],
272	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
273	'label_block' => true,
274	'condition' => [
275	'premium_image_button_icon_switcher' => 'yes',
276	'premium_image_button_hover_effect!' => 'style4',
277	'icon_type' => 'animation'
278	],
279	]
280	);
281
282	$this->add_control('lottie_loop',
283	[
284	'label' => __('Loop','premium-addons-for-elementor'),
285	'type' => Controls_Manager::SWITCHER,
286	'return_value' => 'true',
287	'default' => 'true',
288	'condition' => [
289	'premium_image_button_icon_switcher' => 'yes',
290	'premium_image_button_hover_effect!' => 'style4',
291	'icon_type' => 'animation'
292	],
293	]
294	);
295
296	$this->add_control('lottie_reverse',
297	[
298	'label' => __('Reverse','premium-addons-for-elementor'),
299	'type' => Controls_Manager::SWITCHER,
300	'return_value' => 'true',
301	'condition' => [
302	'premium_image_button_icon_switcher' => 'yes',
303	'premium_image_button_hover_effect!' => 'style4',
304	'icon_type' => 'animation'
305	],
306	]
307	);
308
309	$this->add_control('slide_icon_type',
310	[
311	'label' => __('Icon Type', 'premium-addons-for-elementor'),
312	'type' => Controls_Manager::SELECT,
313	'options' => [
314	'icon' => __('Icon', 'premium-addons-for-elementor'),
315	'animation' => __('Lottie Animation', 'premium-addons-for-elementor'),
316	],
317	'default' => 'icon',
318	'label_block' => true,
319	'condition' => [
320	'premium_image_button_hover_effect' => 'style4'
321	],
322	]
323	);
324
325	$this->add_control('premium_image_button_style4_icon_selection_updated',
326	[
327	'label' => __('Icon', 'premium-addons-for-elementor'),
328	'type' => Controls_Manager::ICONS,
329	'fa4compatibility' => 'premium_image_button_style4_icon_selection',
330	'default' => [
331	'value' => 'fas fa-bars',
332	'library' => 'fa-solid',
333	],
334	'label_block' => true,
335	'condition' => [
336	'slide_icon_type' => 'icon',
337	'premium_image_button_hover_effect' => 'style4'
338	],
339	]
340	);
341
342	$this->add_control('slide_lottie_url',
343	[
344	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
345	'type' => Controls_Manager::TEXT,
346	'dynamic' => [ 'active' => true ],
347	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
348	'label_block' => true,
349	'condition' => [
350	'slide_icon_type' => 'animation',
351	'premium_image_button_hover_effect' => 'style4'
352	],
353	]
354	);
355
356	$this->add_control('slide_lottie_loop',
357	[
358	'label' => __('Loop','premium-addons-for-elementor'),
359	'type' => Controls_Manager::SWITCHER,
360	'return_value' => 'true',
361	'default' => 'true',
362	'condition' => [
363	'slide_icon_type' => 'animation',
364	'premium_image_button_hover_effect' => 'style4'
365	]
366	]
367	);
368
369	$this->add_control('slide_lottie_reverse',
370	[
371	'label' => __('Reverse','premium-addons-for-elementor'),
372	'type' => Controls_Manager::SWITCHER,
373	'return_value' => 'true',
374	'condition' => [
375	'slide_icon_type' => 'animation',
376	'premium_image_button_hover_effect' => 'style4'
377	]
378	]
379	);
380
381	$this->add_control('premium_image_button_icon_position',
382	[
383	'label' => __('Icon Position', 'premium-addons-for-elementor'),
384	'type' => Controls_Manager::SELECT,
385	'default' => 'before',
386	'options' => [
387	'before' => __('Before','premium-addons-for-elementor'),
388	'after' => __('After','premium-addons-for-elementor'),
389	],
390	'label_block' => true,
391	'condition' => [
392	'premium_image_button_icon_switcher' => 'yes',
393	'premium_image_button_hover_effect!' => 'style4'
394	],
395	]
396	);
397
398	$this->add_responsive_control('premium_image_button_icon_before_size',
399	[
400	'label' => __('Icon Size', 'premium-addons-for-elementor'),
401	'type' => Controls_Manager::SLIDER,
402	'condition' => [
403	'premium_image_button_icon_switcher' => 'yes',
404	'premium_image_button_hover_effect!' => 'style4'
405	],
406	'selectors' => [
407	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i' => 'font-size: {{SIZE}}px',
408	'{{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'width: {{SIZE}}px; height: {{SIZE}}px',
409	]
410	]
411	);
412
413	$this->add_responsive_control('premium_image_button_icon_style4_size',
414	[
415	'label' => __('Icon Size', 'premium-addons-for-elementor'),
416	'type' => Controls_Manager::SLIDER,
417	'condition' => [
418	'premium_image_button_hover_effect' => 'style4'
419	],
420	'selectors' => [
421	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper i' => 'font-size: {{SIZE}}px',
422	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper svg' => 'width: {{SIZE}}px; height: {{SIZE}}px',
423	]
424	]
425	);
426
427	$this->add_responsive_control('premium_image_button_icon_before_spacing',
428	[
429	'label' => __('Icon Spacing', 'premium-addons-for-elementor'),
430	'type' => Controls_Manager::SLIDER,
431	'default' => [
432	'size' => 15
433	],
434	'selectors' => [
435	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i, {{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'margin-right: {{SIZE}}px',
436	],
437	'separator' => 'after',
438	'condition' => [
439	'premium_image_button_icon_switcher' => 'yes',
440	'premium_image_button_icon_position' => 'before',
441	'premium_image_button_hover_effect!' => 'style4'
442	],
443	]
444	);
445
446	$this->add_responsive_control('premium_image_button_icon_after_spacing',
447	[
448	'label' => __('Icon Spacing', 'premium-addons-for-elementor'),
449	'type' => Controls_Manager::SLIDER,
450	'default' => [
451	'size' => 15
452	],
453	'selectors' => [
454	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i, {{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'margin-left: {{SIZE}}px',
455	],
456	'separator' => 'after',
457	'condition' => [
458	'premium_image_button_icon_switcher' => 'yes',
459	'premium_image_button_icon_position' => 'after',
460	'premium_image_button_hover_effect!' => 'style4'
461	],
462	]
463	);
464
465	$this->add_control('premium_image_button_size',
466	[
467	'label' => __('Size', 'premium-addons-for-elementor'),
468	'type' => Controls_Manager::SELECT,
469	'default' => 'lg',
470	'options' => [
471	'sm' => __('Small','premium-addons-for-elementor'),
472	'md' => __('Medium','premium-addons-for-elementor'),
473	'lg' => __('Large','premium-addons-for-elementor'),
474	'block' => __('Block','premium-addons-for-elementor'),
475	],
476	'label_block' => true,
477	'separator' => 'before',
478	]
479	);
480
481	$this->add_responsive_control('premium_image_button_align',
482	[
483	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
484	'type' => Controls_Manager::CHOOSE,
485	'options' => [
486	'left' => [
487	'title' => __( 'Left', 'premium-addons-for-elementor' ),
488	'icon' => 'fa fa-align-left',
489	],
490	'center' => [
491	'title' => __( 'Center', 'premium-addons-for-elementor' ),
492	'icon' => 'fa fa-align-center',
493	],
494	'right' => [
495	'title' => __( 'Right', 'premium-addons-for-elementor' ),
496	'icon' => 'fa fa-align-right',
497	],
498	],
499	'selectors' => [
500	'{{WRAPPER}} .premium-image-button-container' => 'text-align: {{VALUE}}',
501	],
502	'default' => 'center',
503	]
504	);
505
506	$this->add_control('premium_image_button_event_switcher',
507	[
508	'label' => __('onclick Event', 'premium-addons-for-elementor'),
509	'type' => Controls_Manager::SWITCHER,
510	'separator' => 'before',
511	]
512	);
513
514	$this->add_control('premium_image_button_event_function',
515	[
516	'label' => __('Example: myFunction();', 'premium-addons-for-elementor'),
517	'type' => Controls_Manager::CODE,
518	'dynamic' => [ 'active' => true ],
519	'condition' => [
520	'premium_image_button_event_switcher' => 'yes',
521	],
522	]
523	);
524
525	$this->end_controls_section();
526
527	$this->start_controls_section('section_pa_docs',
528	[
529	'label' => __('Helpful Documentations', 'premium-addons-for-elementor'),
530	]
531	);
532
533	$docs = [
534	'https://premiumaddons.com/docs/image-button-widget-tutorial' => 'Getting started »',
535	'https://premiumaddons.com/docs/how-can-i-open-an-elementor-popup-using-premium-button' => 'How to open an Elementor popup using Image Button widget »',
536	'https://premiumaddons.com/docs/how-to-play-pause-a-soundtrack-using-premium-button-widget' => 'How to play/pause a soundtrack using Image Button widget »',
537	'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 »'
538	];
539
540	$doc_index = 1;
541	foreach( $docs as $url => $title ) {
542
543	$doc_url = Helper_Functions::get_campaign_link( $url, 'editor-page', 'wp-editor', 'get-support' );
544
545	$this->add_control('doc_' . $doc_index,
546	[
547	'type' => Controls_Manager::RAW_HTML,
548	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url , __( $title, 'premium-addons-for-elementor' ) ),
549	'content_classes' => 'editor-pa-doc',
550	]
551	);
552
553	$doc_index++;
554
555	}
556
557	$this->end_controls_section();
558
559	$this->start_controls_section('premium_image_button_style_section',
560	[
561	'label' => __('Button', 'premium-addons-for-elementor'),
562	'tab' => Controls_Manager::TAB_STYLE,
563	]
564	);
565
566	$this->add_group_control(
567	Group_Control_Typography::get_type(),
568	[
569	'name' => 'premium_image_button_typo',
570	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
571	'selector' => '{{WRAPPER}} .premium-image-button',
572	]
573	);
574
575	$this->start_controls_tabs('premium_image_button_style_tabs');
576
577	$this->start_controls_tab('premium_image_button_style_normal',
578	[
579	'label' => __('Normal', 'premium-addons-for-elementor'),
580	]
581	);
582
583	$this->add_control('premium_image_button_text_color_normal',
584	[
585	'label' => __('Text Color', 'premium-addons-for-elementor'),
586	'type' => Controls_Manager::COLOR,
587	'scheme' => [
588	'type' => Scheme_Color::get_type(),
589	'value' => Scheme_Color::COLOR_2,
590	],
591	'selectors' => [
592	'{{WRAPPER}} .premium-image-button .premium-image-button-text-icon-wrapper span' => 'color: {{VALUE}};',
593	]
594	]);
595
596	$this->add_control('premium_image_button_icon_color_normal',
597	[
598	'label' => __('Icon Color', 'premium-addons-for-elementor'),
599	'type' => Controls_Manager::COLOR,
600	'scheme' => [
601	'type' => Scheme_Color::get_type(),
602	'value' => Scheme_Color::COLOR_2,
603	],
604	'selectors' => [
605	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i' => 'color: {{VALUE}};',
606	],
607	'condition' => [
608	'premium_image_button_icon_switcher' => 'yes',
609	'icon_type' => 'icon',
610	'premium_image_button_hover_effect!' => 'style4'
611	]
612	]);
613
614
615	$this->add_group_control(
616	Group_Control_Background::get_type(),
617	[
618	'name' => 'premium_image_button_background',
619	'types' => [ 'classic' , 'gradient' ],
620	'selector' => '{{WRAPPER}} .premium-image-button',
621	]
622	);
623
624	$this->add_group_control(
625	Group_Control_Border::get_type(),
626	[
627	'name' => 'premium_image_button_border_normal',
628	'selector' => '{{WRAPPER}} .premium-image-button',
629	]
630	);
631
632	$this->add_control('premium_image_button_border_radius_normal',
633	[
634	'label' => __('Border Radius', 'premium-addons-for-elementor'),
635	'type' => Controls_Manager::SLIDER,
636	'size_units' => ['px', '%' ,'em'],
637	'selectors' => [
638	'{{WRAPPER}} .premium-image-button' => 'border-radius: {{SIZE}}{{UNIT}};'
639	]
640	]
641	);
642
643	$this->add_group_control(
644	Group_Control_Text_Shadow::get_type(),
645	[
646	'label' => __('Icon Shadow','premium-addons-for-elementor'),
647	'name' => 'premium_image_button_icon_shadow_normal',
648	'selector' => '{{WRAPPER}} .premium-image-button-text-icon-wrapper i',
649	'condition' => [
650	'premium_image_button_icon_switcher' => 'yes',
651	'icon_type' => 'icon',
652	'premium_image_button_hover_effect!' => 'style4'
653	]
654	]
655	);
656
657	$this->add_group_control(
658	Group_Control_Text_Shadow::get_type(),
659	[
660	'label' => __('Text Shadow','premium-addons-for-elementor'),
661	'name' => 'premium_image_button_text_shadow_normal',
662	'selector' => '{{WRAPPER}} .premium-image-button-text-icon-wrapper span',
663	]
664	);
665
666	$this->add_group_control(
667	Group_Control_Box_Shadow::get_type(),
668	[
669	'label' => __('Button Shadow','premium-addons-for-elementor'),
670	'name' => 'premium_image_button_box_shadow_normal',
671	'selector' => '{{WRAPPER}} .premium-image-button',
672	]
673	);
674
675	$this->add_responsive_control('premium_image_button_margin_normal',
676	[
677	'label' => __('Margin', 'premium-addons-for-elementor'),
678	'type' => Controls_Manager::DIMENSIONS,
679	'size_units' => ['px', 'em', '%'],
680	'selectors' => [
681	'{{WRAPPER}} .premium-image-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
682	]
683	]);
684
685	$this->add_responsive_control('premium_image_button_padding_normal',
686	[
687	'label' => __('Padding', 'premium-addons-for-elementor'),
688	'type' => Controls_Manager::DIMENSIONS,
689	'size_units' => ['px', 'em', '%'],
690	'selectors' => [
691	'{{WRAPPER}} .premium-image-button, {{WRAPPER}} .premium-image-button-effect-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
692	]
693	]);
694
695	$this->end_controls_tab();
696
697	$this->start_controls_tab('premium_image_button_style_hover',
698	[
699	'label' => __('Hover', 'premium-addons-for-elementor'),
700	]
701	);
702
703	$this->add_control('premium_image_button_text_color_hover',
704	[
705	'label' => __('Text Color', 'premium-addons-for-elementor'),
706	'type' => Controls_Manager::COLOR,
707	'scheme' => [
708	'type' => Scheme_Color::get_type(),
709	'value' => Scheme_Color::COLOR_1,
710	],
711	'selectors' => [
712	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper span' => 'color: {{VALUE}};',
713	],
714	'condition' => [
715	'premium_image_button_hover_effect!' => 'style4'
716	]
717	]);
718
719	$this->add_control('premium_image_button_icon_color_hover',
720	[
721	'label' => __('Icon Color', 'premium-addons-for-elementor'),
722	'type' => Controls_Manager::COLOR,
723	'scheme' => [
724	'type' => Scheme_Color::get_type(),
725	'value' => Scheme_Color::COLOR_1,
726	],
727	'selectors' => [
728	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper i' => 'color: {{VALUE}};',
729	],
730	'condition' => [
731	'premium_image_button_icon_switcher' => 'yes',
732	'icon_type' => 'icon',
733	'premium_image_button_hover_effect!' => 'style4'
734	]
735	]
736	);
737
738	$this->add_control('premium_image_button_style4_icon_color',
739	[
740	'label' => __('Icon Color', 'premium-addons-for-elementor'),
741	'type' => Controls_Manager::COLOR,
742	'scheme' => [
743	'type' => Scheme_Color::get_type(),
744	'value' => Scheme_Color::COLOR_1,
745	],
746	'selectors' => [
747	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-style4-icon-wrapper' => 'color: {{VALUE}};',
748	],
749	'condition' => [
750	'premium_image_button_hover_effect' => 'style4',
751	'slide_icon_type' => 'icon'
752	]
753	]
754	);
755
756	$this->add_control('premium_image_button_diagonal_overlay_color',
757	[
758	'label' => __('Overlay Color', 'premium-addons-for-elementor'),
759	'type' => Controls_Manager::COLOR,
760	'scheme' => [
761	'type' => Scheme_Color::get_type(),
762	'value' => Scheme_Color::COLOR_1,
763	],
764	'selectors' => [
765	'{{WRAPPER}} .premium-image-button-diagonal-effect-top:before, {{WRAPPER}} .premium-image-button-diagonal-effect-bottom:before, {{WRAPPER}} .premium-image-button-diagonal-effect-left:before, {{WRAPPER}} .premium-image-button-diagonal-effect-right:before' => 'background-color: {{VALUE}};',
766	],
767	'condition' => [
768	'premium_image_button_hover_effect' => 'style3'
769	]
770	]
771	);
772
773	$this->add_control('premium_image_button_overlap_overlay_color',
774	[
775	'label' => __('Overlay Color', 'premium-addons-for-elementor'),
776	'type' => Controls_Manager::COLOR,
777	'scheme' => [
778	'type' => Scheme_Color::get_type(),
779	'value' => Scheme_Color::COLOR_1,
780	],
781	'selectors' => [
782	'{{WRAPPER}} .premium-image-button-overlap-effect-horizontal:before, {{WRAPPER}} .premium-image-button-overlap-effect-vertical:before' => 'background-color: {{VALUE}};',
783	],
784	'condition' => [
785	'premium_image_button_hover_effect' => 'style5'
786	]
787	]
788	);
789
790	$this->add_group_control(
791	Group_Control_Background::get_type(),
792	[
793	'name' => 'premium_image_button_background_hover',
794	'types' => [ 'classic' , 'gradient' ],
795	'selector' => '{{WRAPPER}} .premium-image-button-none:hover, {{WRAPPER}} .premium-image-button-style4-icon-wrapper,{{WRAPPER}} .premium-image-button-style1-top:before,{{WRAPPER}} .premium-image-button-style1-bottom:before,{{WRAPPER}} .premium-image-button-style1-left:before,{{WRAPPER}} .premium-image-button-style1-right:before,{{WRAPPER}} .premium-image-button-diagonal-effect-right:hover, {{WRAPPER}} .premium-image-button-diagonal-effect-top:hover, {{WRAPPER}} .premium-image-button-diagonal-effect-left:hover, {{WRAPPER}} .premium-image-button-diagonal-effect-bottom:hover,{{WRAPPER}} .premium-image-button-overlap-effect-horizontal:hover, {{WRAPPER}} .premium-image-button-overlap-effect-vertical:hover',
796	]
797	);
798
799	$this->add_control('premium_image_button_overlay_color',
800	[
801	'label' => __('Overlay Color', 'premium-addons-for-elementor'),
802	'type' => Controls_Manager::COLOR,
803	'scheme' => [
804	'type' => Scheme_Color::get_type(),
805	'value' => Scheme_Color::COLOR_1,
806	],
807	'condition' => [
808	'premium_image_button_overlay_switcher' => 'yes'
809	],
810	'selectors' => [
811	'{{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}};',
812	]
813	]
814	);
815
816	$this->add_group_control(
817	Group_Control_Border::get_type(),
818	[
819	'name' => 'premium_image_button_border_hover',
820	'selector' => '{{WRAPPER}} .premium-image-button:hover',
821	]
822	);
823
824	$this->add_control('premium_image_button_border_radius_hover',
825	[
826	'label' => __('Border Radius', 'premium-addons-for-elementor'),
827	'type' => Controls_Manager::SLIDER,
828	'size_units' => ['px', '%' ,'em'],
829	'selectors' => [
830	'{{WRAPPER}} .premium-image-button:hover' => 'border-radius: {{SIZE}}{{UNIT}};'
831	]
832	]
833	);
834
835	$this->add_group_control(
836	Group_Control_Text_Shadow::get_type(),
837	[
838	'label' => __('Icon Shadow','premium-addons-for-elementor'),
839	'name' => 'premium_image_button_icon_shadow_hover',
840	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper i',
841	'condition' => [
842	'premium_image_button_icon_switcher' => 'yes',
843	'icon_type' => 'icon',
844	'premium_image_button_hover_effect!' => 'style4'
845	]
846	]
847	);
848
849	$this->add_group_control(
850	Group_Control_Text_Shadow::get_type(),
851	[
852	'label' => __('Icon Shadow','premium-addons-for-elementor'),
853	'name' => 'premium_image_button_style4_icon_shadow_hover',
854	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-style4-icon-wrapper i',
855	'condition' => [
856	'premium_image_button_hover_effect' => 'style4',
857	'slide_icon_type' => 'icon'
858	]
859	]
860	);
861
862	$this->add_group_control(
863	Group_Control_Text_Shadow::get_type(),
864	[
865	'label' => __('Text Shadow','premium-addons-for-elementor'),
866	'name' => 'premium_image_button_text_shadow_hover',
867	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper span',
868	'condition' => [
869	'premium_image_button_hover_effect!' => 'style4'
870	]
871	]
872	);
873
874	$this->add_group_control(
875	Group_Control_Box_Shadow::get_type(),
876	[
877	'label' => __('Button Shadow','premium-addons-for-elementor'),
878	'name' => 'premium_image_button_box_shadow_hover',
879	'selector' => '{{WRAPPER}} .premium-image-button:hover',
880	]
881	);
882
883	$this->add_responsive_control('premium_image_button_margin_hover',
884	[
885	'label' => __('Margin', 'premium-addons-for-elementor'),
886	'type' => Controls_Manager::DIMENSIONS,
887	'size_units' => ['px', 'em', '%'],
888	'selectors' => [
889	'{{WRAPPER}} .premium-image-button:hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
890	]
891	]);
892
893	$this->add_responsive_control('premium_image_button_padding_hover',
894	[
895	'label' => __('Padding', 'premium-addons-for-elementor'),
896	'type' => Controls_Manager::DIMENSIONS,
897	'size_units' => ['px', 'em', '%'],
898	'selectors' => [
899	'{{WRAPPER}} .premium-image-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
900	]
901	]);
902
903	$this->end_controls_tab();
904
905	$this->end_controls_tabs();
906
907	$this->end_controls_section();
908	}
909
910	/**
911	* Render Image Button widget output on the frontend.
912	*
913	* Written in PHP and used to generate the final HTML.
914	*
915	* @since 1.0.0
916	* @access protected
917	*/
918	protected function render() {
919
920	$settings = $this->get_settings_for_display();
921
922	$this->add_inline_editing_attributes( 'premium_image_button_text' );
923
924	if($settings['premium_image_button_link_selection'] == 'url'){
925	$image_link = $settings['premium_image_button_link']['url'];
926	} else {
927	$image_link = get_permalink($settings['premium_image_button_existing_link']);
928	}
929
930	$button_text = $settings['premium_image_button_text'];
931
932	$button_size = 'premium-image-button-' . $settings['premium_image_button_size'];
933
934	$image_event = $settings['premium_image_button_event_function'];
935
936	if ( ! empty ( $settings['premium_image_button_icon_selection'] ) ) {
937	$this->add_render_attribute( 'icon', 'class', $settings['premium_image_button_icon_selection'] );
938	$this->add_render_attribute( 'icon', 'aria-hidden', 'true' );
939	}
940
941	$icon_type = $settings['icon_type'];
942
943	if( 'icon' === $icon_type ) {
944	$migrated = isset( $settings['__fa4_migrated']['premium_image_button_icon_selection_updated'] );
945	$is_new = empty( $settings['premium_image_button_icon_selection'] ) && Icons_Manager::is_migration_allowed();
946	} else {
947	$this->add_render_attribute( 'lottie', [
948	'class' => 'premium-lottie-animation',
949	'data-lottie-url' => $settings['lottie_url'],
950	'data-lottie-loop' => $settings['lottie_loop'],
951	'data-lottie-reverse' => $settings['lottie_reverse'],
952	]
953	);
954	}
955
956	if ($settings['premium_image_button_hover_effect'] == 'none'){
957	$style_dir = 'premium-image-button-none';
958	} elseif($settings['premium_image_button_hover_effect'] == 'style1'){
959	$style_dir = 'premium-image-button-style1-' . $settings['premium_image_button_style1_dir'];
960	} elseif($settings['premium_image_button_hover_effect'] == 'style3'){
961	$style_dir = 'premium-image-button-diagonal-effect-' . $settings['premium_image_button_style3_dir'];
962	} elseif($settings['premium_image_button_hover_effect'] == 'style4'){
963	$style_dir = 'premium-image-button-style4-' . $settings['premium_image_button_style4_dir'];
964
965	$slide_icon_type = $settings['slide_icon_type'];
966
967	if( 'icon' === $slide_icon_type ) {
968
969	if ( ! empty ( $settings['premium_image_button_style4_icon_selection'] ) ) {
970	$this->add_render_attribute( 'slide_icon', 'class', $settings['premium_image_button_style4_icon_selection'] );
971	$this->add_render_attribute( 'slide_icon', 'aria-hidden', 'true' );
972	}
973
974	$slide_migrated = isset( $settings['__fa4_migrated']['premium_image_button_style4_icon_selection_updated'] );
975	$slide_is_new = empty( $settings['premium_image_button_style4_icon_selection'] ) && Icons_Manager::is_migration_allowed();
976
977	} else {
978
979	$this->add_render_attribute( 'slide_lottie', [
980	'class' => 'premium-lottie-animation',
981	'data-lottie-url' => $settings['slide_lottie_url'],
982	'data-lottie-loop' => $settings['slide_lottie_loop'],
983	'data-lottie-reverse' => $settings['slide_lottie_reverse'],
984	]
985	);
986
987	}
988
989
990	} elseif($settings['premium_image_button_hover_effect'] == 'style5'){
991	$style_dir = 'premium-image-button-overlap-effect-' . $settings['premium_image_button_style5_dir'];
992	}
993
994	$this->add_render_attribute( 'button', 'class', array(
995	'premium-image-button',
996	$button_size,
997	$style_dir
998	));
999
1000	if( ! empty( $image_link ) ) {
1001
1002	$this->add_render_attribute( 'button', 'href', $image_link );
1003
1004	if( ! empty( $settings['premium_image_button_link']['is_external'] ) )
1005	$this->add_render_attribute( 'button', 'target', '_blank' );
1006
1007	if( ! empty( $settings['premium_image_button_link']['nofollow'] ) )
1008	$this->add_render_attribute( 'button', 'rel', 'nofollow' );
1009	}
1010
1011	if( 'yes' === $settings['premium_image_button_event_switcher'] && ! empty( $image_event ) ) {
1012	$this->add_render_attribute( 'button', 'onclick', $image_event );
1013	}
1014
1015	?>
1016	<div class="premium-image-button-container">
1017	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
1018	<div class="premium-image-button-text-icon-wrapper">
1019	<?php if('yes' === $settings['premium_image_button_icon_switcher'] ) : ?>
1020	<?php if( $settings['premium_image_button_hover_effect'] !== 'style4' && $settings['premium_image_button_icon_position'] === 'before' ) : ?>
1021	<?php if( 'icon' === $icon_type ) : ?>
1022	<?php if ( $is_new \|\| $migrated ) :
1023	Icons_Manager::render_icon( $settings['premium_image_button_icon_selection_updated'], [ 'aria-hidden' => 'true' ] );
1024	else: ?>
1025	<i <?php echo $this->get_render_attribute_string( 'icon' ); ?>></i>
1026	<?php endif; ?>
1027	<?php else: ?>
1028	<div <?php echo $this->get_render_attribute_string( 'lottie' ); ?>></div>
1029	<?php endif; ?>
1030	<?php endif; ?>
1031	<?php endif; ?>
1032
1033	<span <?php echo $this->get_render_attribute_string( 'premium_image_button_text' ); ?>>
1034	<?php echo $button_text; ?>
1035	</span>
1036	<?php if('yes' === $settings['premium_image_button_icon_switcher'] ) : ?>
1037	<?php if( $settings['premium_image_button_hover_effect'] !== 'style4' && $settings['premium_image_button_icon_position'] == 'after' ) : ?>
1038	<?php if( 'icon' === $icon_type ) : ?>
1039	<?php if ( $is_new \|\| $migrated ) :
1040	Icons_Manager::render_icon( $settings['premium_image_button_icon_selection_updated'], [ 'aria-hidden' => 'true' ] );
1041	else: ?>
1042	<i <?php echo $this->get_render_attribute_string( 'icon' ); ?>></i>
1043	<?php endif; ?>
1044	<?php else: ?>
1045	<div <?php echo $this->get_render_attribute_string( 'lottie' ); ?>></div>
1046	<?php endif; ?>
1047	<?php endif; ?>
1048	<?php endif; ?>
1049	</div>
1050	<?php if( $settings['premium_image_button_hover_effect'] == 'style4') : ?>
1051	<div class="premium-image-button-style4-icon-wrapper <?php echo esc_attr( $settings['premium_image_button_style4_dir'] ); ?>">
1052	<?php if( 'icon' === $slide_icon_type ) : ?>
1053	<?php if ( $slide_is_new \|\| $slide_migrated ) :
1054	Icons_Manager::render_icon( $settings['premium_image_button_style4_icon_selection_updated'], [ 'aria-hidden' => 'true' ] );
1055	else: ?>
1056	<i <?php echo $this->get_render_attribute_string( 'slide_icon' ); ?>></i>
1057	<?php endif; ?>
1058	<?php else: ?>
1059	<div <?php echo $this->get_render_attribute_string( 'slide_lottie' ); ?>></div>
1060	<?php endif;?>
1061	</div>
1062	<?php endif; ?>
1063	</a>
1064	</div>
1065
1066	<?php
1067	}
1068
1069	/**
1070	* Render Image Button widget output in the editor.
1071	*
1072	* Written as a Backbone JavaScript template and used to generate the live preview.
1073	*
1074	* @since 1.0.0
1075	* @access protected
1076	*/
1077	protected function content_template() {
1078	?>
1079	<#
1080
1081	view.addInlineEditingAttributes( 'premium_image_button_text' );
1082
1083	var buttonText = settings.premium_image_button_text,
1084	buttonUrl,
1085	styleDir,
1086	slideIcon,
1087	buttonSize = 'premium-image-button-' + settings.premium_image_button_size,
1088	buttonEvent = settings.premium_image_button_event_function,
1089	buttonIcon = settings.premium_image_button_icon_selection;
1090
1091	if( 'url' == settings.premium_image_button_link_selection ) {
1092	buttonUrl = settings.premium_image_button_link.url;
1093	} else {
1094	buttonUrl = settings.premium_image_button_existing_link;
1095	}
1096
1097	if ( 'none' == settings.premium_image_button_hover_effect ) {
1098	styleDir = 'premium-button-none';
1099	} else if( 'style1' == settings.premium_image_button_hover_effect ) {
1100	styleDir = 'premium-image-button-style1-' + settings.premium_image_button_style1_dir;
1101	} else if ( 'style3' == settings.premium_image_button_hover_effect ) {
1102	styleDir = 'premium-image-button-diagonal-effect-' + settings.premium_image_button_style3_dir;
1103	} else if ( 'style4' == settings.premium_image_button_hover_effect ) {
1104	styleDir = 'premium-image-button-style4-' + settings.premium_image_button_style4_dir;
1105
1106	var slideIconType = settings.slide_icon_type;
1107
1108	if( 'icon' === slideIconType ) {
1109	slideIcon = settings.premium_image_button_style4_icon_selection;
1110
1111	var slideIconHTML = elementor.helpers.renderIcon( view, settings.premium_image_button_style4_icon_selection_updated, { 'aria-hidden': true }, 'i' , 'object' ),
1112	slideMigrated = elementor.helpers.isIconMigrated( settings, 'premium_image_button_style4_icon_selection_updated' );
1113
1114	} else {
1115
1116	view.addRenderAttribute( 'slide_lottie', {
1117	'class': 'premium-lottie-animation',
1118	'data-lottie-url': settings.slide_lottie_url,
1119	'data-lottie-loop': settings.slide_lottie_loop,
1120	'data-lottie-reverse': settings.slide_lottie_reverse
1121	});
1122
1123	}
1124
1125	} else if ( 'style5' == settings.premium_image_button_hover_effect ){
1126	styleDir = 'premium-image-button-overlap-effect-' + settings.premium_image_button_style5_dir;
1127	}
1128
1129	var iconType = settings.icon_type;
1130
1131	if( 'icon' === iconType ) {
1132	var iconHTML = elementor.helpers.renderIcon( view, settings.premium_image_button_icon_selection_updated, { 'aria-hidden': true }, 'i' , 'object' ),
1133	migrated = elementor.helpers.isIconMigrated( settings, 'premium_image_button_icon_selection_updated' );
1134	} else {
1135
1136	view.addRenderAttribute( 'slide_lottie', {
1137	'class': 'premium-lottie-animation',
1138	'data-lottie-url': settings.lottie_url,
1139	'data-lottie-loop': settings.lottie_loop,
1140	'data-lottie-reverse': settings.lottie_reverse
1141	});
1142
1143	}
1144
1145	#>
1146
1147	<div class="premium-image-button-container">
1148	<a class="premium-image-button {{ buttonSize }} {{ styleDir }}" href="{{ buttonUrl }}" onclick="{{ buttonEvent }}">
1149	<div class="premium-image-button-text-icon-wrapper">
1150	<# if ('yes' === settings.premium_image_button_icon_switcher) { #>
1151	<# if( 'before' === settings.premium_image_button_icon_position && 'style4' !== settings.premium_image_button_hover_effect ) { #>
1152	<# if( 'icon' === iconType ) {
1153	if ( iconHTML && iconHTML.rendered && ( ! buttonIcon \|\| migrated ) ) { #>
1154	{{{ iconHTML.value }}}
1155	<# } else { #>
1156	<i class="{{ buttonIcon }}" aria-hidden="true"></i>
1157	<# } #>
1158	<# } else { #>
1159	<div {{{ view.getRenderAttributeString('lottie') }}}></div>
1160	<# } #>
1161	<# } #>
1162	<# } #>
1163
1164	<span {{{ view.getRenderAttributeString('premium_image_button_text') }}}>{{{ buttonText }}}</span>
1165	<# if ('yes' === settings.premium_image_button_icon_switcher) { #>
1166	<# if( 'after' === settings.premium_image_button_icon_position && 'style4' !== settings.premium_image_button_hover_effect ) { #>
1167	<# if( 'icon' === iconType ) {
1168	if ( iconHTML && iconHTML.rendered && ( ! buttonIcon \|\| migrated ) ) { #>
1169	{{{ iconHTML.value }}}
1170	<# } else { #>
1171	<i class="{{ buttonIcon }}" aria-hidden="true"></i>
1172	<# } #>
1173	<# } else { #>
1174	<div {{{ view.getRenderAttributeString('lottie') }}}></div>
1175	<# } #>
1176	<# } #>
1177	<# } #>
1178	</div>
1179	<# if( 'style4' == settings.premium_image_button_hover_effect ) { #>
1180	<div class="premium-image-button-style4-icon-wrapper {{ settings.premium_image_button_style4_dir }}">
1181	<# if ( 'icon' === slideIconType ) { #>
1182	<# if ( slideIconHTML && slideIconHTML.rendered && ( ! slideIcon \|\| slideMigrated ) ) { #>
1183	{{{ slideIconHTML.value }}}
1184	<# } else { #>
1185	<i class="{{ slideIcon }}" aria-hidden="true"></i>
1186	<# } #>
1187	<# } else { #>
1188	<div {{{ view.getRenderAttributeString('slide_lottie') }}}></div>
1189	<# } #>
1190	</div>
1191	<# } #>
1192	</a>
1193	</div>
1194
1195	<?php
1196	}
1197	}