king-addons / includes / widgets / Phone_Call_Button / Phone_Call_Button.php

Phone_Call_Button.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/widgets/Phone_Call_Button/Phone_Call_Button.php

655 lines 20.3 KB

Raw Download Zip

1	<?php
2	/**
3	* Phone Call Button Widget (Free).
4	*
5	* @package King_Addons
6	*/
7
8	namespace King_Addons;
9
10	use Elementor\Controls_Manager;
11	use Elementor\Group_Control_Border;
12	use Elementor\Group_Control_Box_Shadow;
13	use Elementor\Group_Control_Typography;
14	use Elementor\Icons_Manager;
15	use Elementor\Widget_Base;
16
17	if (!defined('ABSPATH')) {
18	exit;
19	}
20
21	/**
22	* Renders a phone call button.
23	*/
24	class Phone_Call_Button extends Widget_Base
25	{
26	/**
27	* Widget slug.
28	*
29	* @return string
30	*/
31	public function get_name(): string
32	{
33	return 'king-addons-phone-call-button';
34	}
35
36	/**
37	* Widget title.
38	*
39	* @return string
40	*/
41	public function get_title(): string
42	{
43	return esc_html__('Phone Call Button', 'king-addons');
44	}
45
46	/**
47	* Widget icon.
48	*
49	* @return string
50	*/
51	public function get_icon(): string
52	{
53	return 'king-addons-icon king-addons-phone-call-button';
54	}
55
56	/**
57	* Style dependencies.
58	*
59	* @return array<int, string>
60	*/
61	public function get_style_depends(): array
62	{
63	return [
64	KING_ADDONS_ASSETS_UNIQUE_KEY . '-phone-call-button-style',
65	];
66	}
67
68	/**
69	* Script dependencies.
70	*
71	* @return array<int, string>
72	*/
73	public function get_script_depends(): array
74	{
75	return [
76	KING_ADDONS_ASSETS_UNIQUE_KEY . '-phone-call-button-script',
77	];
78	}
79
80	/**
81	* Categories.
82	*
83	* @return array<int, string>
84	*/
85	public function get_categories(): array
86	{
87	return ['king-addons'];
88	}
89
90	/**
91	* Keywords.
92	*
93	* @return array<int, string>
94	*/
95	public function get_keywords(): array
96	{
97	return ['phone', 'call', 'button', 'contact'];
98	}
99
100	/**
101	* Register controls.
102	*
103	* @return void
104	*/
105	public function register_controls(): void
106	{
107	$this->register_content_controls();
108	$this->register_layout_controls();
109	$this->register_style_controls();
110	$this->register_pro_notice_controls();
111	}
112
113	/**
114	* Render widget.
115	*
116	* @return void
117	*/
118	public function render(): void
119	{
120	$settings = $this->get_settings_for_display();
121	$phone = trim((string) ($settings['kng_phone'] ?? ''));
122	if ($phone === '') {
123	return;
124	}
125
126	$button_text = $settings['kng_button_text'] ?? '';
127	$alignment = $settings['kng_align'] ?? 'left';
128	$icon_position = (string) ($settings['kng_icon_position'] ?? 'left');
129	$icon = $settings['kng_icon'] ?? [
130	'value' => 'fas fa-phone',
131	'library' => 'fa-solid',
132	];
133
134	$effect = (string) ($settings['kng_attention_animation'] ?? $settings['kng_effect'] ?? 'none');
135	$can_use_pro = (bool) king_addons_freemius()->can_use_premium_code__premium_only();
136	$pro_effects = ['bounce', 'ring'];
137	if (in_array($effect, $pro_effects, true) && !$can_use_pro) {
138	$effect = 'none';
139	}
140
141	$wrapper_classes = ['king-addons-phone-call'];
142	$wrapper_classes[] = 'align-' . $alignment;
143	$button_classes = ['king-addons-phone-call__button'];
144	if ($icon_position === 'right') {
145	$button_classes[] = 'is-icon-right';
146	}
147	if ($effect !== 'none') {
148	$button_classes[] = 'is-anim-' . $effect;
149	}
150
151	?>
152	<div class="<?php echo esc_attr(implode(' ', $wrapper_classes)); ?>">
153	<a class="<?php echo esc_attr(implode(' ', $button_classes)); ?>" href="tel:<?php echo esc_attr($phone); ?>" data-device="all" data-animation="<?php echo esc_attr($effect); ?>" aria-label="<?php echo esc_attr($button_text ?: $phone); ?>">
154	<?php if (!empty($icon['value'])) : ?>
155	<span class="king-addons-phone-call__icon" aria-hidden="true">
156	<?php Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']); ?>
157	</span>
158	<?php endif; ?>
159	<?php if (!empty($button_text)) : ?>
160	<span class="king-addons-phone-call__text"><?php echo esc_html($button_text); ?></span>
161	<?php else : ?>
162	<span class="king-addons-phone-call__text"><?php echo esc_html($phone); ?></span>
163	<?php endif; ?>
164	</a>
165	</div>
166	<?php
167	}
168
169	/**
170	* Content controls.
171	*
172	* @return void
173	*/
174	protected function register_content_controls(): void
175	{
176	$this->start_controls_section(
177	'kng_content_section',
178	[
179	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
180	'tab' => Controls_Manager::TAB_CONTENT,
181	]
182	);
183
184	$this->add_control(
185	'kng_phone',
186	[
187	'label' => esc_html__('Phone Number', 'king-addons'),
188	'type' => Controls_Manager::TEXT,
189	'default' => '12345',
190	'placeholder' => esc_html__('+1 555 000 1234', 'king-addons'),
191	'description' => esc_html__('Will be used in tel: link. Keep digits and plus.', 'king-addons'),
192	]
193	);
194
195	$this->add_control(
196	'kng_button_text',
197	[
198	'label' => esc_html__('Button Text', 'king-addons'),
199	'type' => Controls_Manager::TEXT,
200	'default' => esc_html__('Call now', 'king-addons'),
201	]
202	);
203
204	$this->add_control(
205	'kng_icon',
206	[
207	'label' => esc_html__('Icon', 'king-addons'),
208	'type' => Controls_Manager::ICONS,
209	'default' => [
210	'value' => 'fas fa-phone',
211	'library' => 'fa-solid',
212	],
213	]
214	);
215
216	$this->end_controls_section();
217	}
218
219	/**
220	* Layout controls.
221	*
222	* @return void
223	*/
224	protected function register_layout_controls(): void
225	{
226	$this->start_controls_section(
227	'kng_layout_section',
228	[
229	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Layout', 'king-addons'),
230	'tab' => Controls_Manager::TAB_CONTENT,
231	]
232	);
233
234	// Clean up any legacy/duplicate controls added elsewhere (e.g., Pro attention animation).
235	$this->remove_control('kng_effect');
236	$this->remove_control('kng_attention_animation');
237
238	$this->add_responsive_control(
239	'kng_align',
240	[
241	'label' => esc_html__('Alignment', 'king-addons'),
242	'type' => Controls_Manager::CHOOSE,
243	'options' => [
244	'left' => [
245	'title' => esc_html__('Left', 'king-addons'),
246	'icon' => 'eicon-text-align-left',
247	],
248	'center' => [
249	'title' => esc_html__('Center', 'king-addons'),
250	'icon' => 'eicon-text-align-center',
251	],
252	'right' => [
253	'title' => esc_html__('Right', 'king-addons'),
254	'icon' => 'eicon-text-align-right',
255	],
256	],
257	'default' => 'left',
258	'selectors' => [
259	'{{WRAPPER}} .king-addons-phone-call' => 'justify-content: {{VALUE}};',
260	],
261	]
262	);
263
264	$this->add_control(
265	'kng_icon_position',
266	[
267	'label' => esc_html__('Icon Position', 'king-addons'),
268	'type' => Controls_Manager::SELECT,
269	'default' => 'left',
270	'options' => [
271	'left' => esc_html__('Left', 'king-addons'),
272	'right' => esc_html__('Right', 'king-addons'),
273	],
274	]
275	);
276
277	$this->add_control(
278	'kng_attention_animation',
279	[
280	'label' => esc_html__('Attention Animation', 'king-addons'),
281	'type' => Controls_Manager::SELECT,
282	'default' => 'pulse',
283	'options' => [
284	'none' => esc_html__('None', 'king-addons'),
285	'pulse' => esc_html__('Pulse (Free)', 'king-addons'),
286	'waves' => esc_html__('Waves (Free)', 'king-addons'),
287	'bounce' => esc_html__('Bounce (Pro)', 'king-addons'),
288	'ring' => esc_html__('Ring (Pro)', 'king-addons'),
289	],
290	]
291	);
292
293	$this->end_controls_section();
294	}
295
296	/**
297	* Style controls.
298	*
299	* @return void
300	*/
301	protected function register_style_controls(): void
302	{
303	$this->start_controls_section(
304	'kng_style_section',
305	[
306	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
307	'tab' => Controls_Manager::TAB_STYLE,
308	]
309	);
310
311	$this->add_group_control(
312	Group_Control_Typography::get_type(),
313	[
314	'name' => 'kng_text_typography',
315	'selector' => '{{WRAPPER}} .king-addons-phone-call__text',
316	]
317	);
318
319	$this->start_controls_tabs('kng_button_tabs');
320
321	$this->start_controls_tab(
322	'kng_button_tab_normal',
323	[
324	'label' => esc_html__('Normal', 'king-addons'),
325	]
326	);
327
328	$this->add_control(
329	'kng_text_color',
330	[
331	'label' => esc_html__('Text Color', 'king-addons'),
332	'type' => Controls_Manager::COLOR,
333	'selectors' => [
334	'{{WRAPPER}} .king-addons-phone-call__button' => 'color: {{VALUE}};',
335	],
336	]
337	);
338
339	$this->add_control(
340	'kng_hover_scale',
341	[
342	'label' => esc_html__('Hover Scale', 'king-addons'),
343	'type' => Controls_Manager::SLIDER,
344	'size_units' => ['custom'],
345	'range' => [
346	'custom' => ['min' => 1, 'max' => 1.5, 'step' => 0.01],
347	],
348	'default' => [
349	'size' => 1.05,
350	],
351	'selectors' => [
352	'{{WRAPPER}} .king-addons-phone-call__button' => '--kng-phone-hover-scale: {{SIZE}};',
353	],
354	]
355	);
356
357	$this->add_control(
358	'kng_bg_color',
359	[
360	'label' => esc_html__('Background', 'king-addons'),
361	'type' => Controls_Manager::COLOR,
362	'selectors' => [
363	'{{WRAPPER}} .king-addons-phone-call__button' => 'background-color: {{VALUE}};',
364	],
365	]
366	);
367
368	$this->add_group_control(
369	Group_Control_Border::get_type(),
370	[
371	'name' => 'kng_border',
372	'selector' => '{{WRAPPER}} .king-addons-phone-call__button',
373	]
374	);
375
376	$this->add_group_control(
377	Group_Control_Box_Shadow::get_type(),
378	[
379	'name' => 'kng_shadow',
380	'selector' => '{{WRAPPER}} .king-addons-phone-call__button',
381	'condition' => [
382	'kng_disable_shadow!' => 'yes',
383	],
384	]
385	);
386
387	$this->end_controls_tab();
388
389	$this->start_controls_tab(
390	'kng_button_tab_hover',
391	[
392	'label' => esc_html__('Hover', 'king-addons'),
393	]
394	);
395
396	$this->add_control(
397	'kng_text_color_hover',
398	[
399	'label' => esc_html__('Text Color', 'king-addons'),
400	'type' => Controls_Manager::COLOR,
401	'selectors' => [
402	'{{WRAPPER}} .king-addons-phone-call__button:hover' => 'color: {{VALUE}};',
403	],
404	]
405	);
406
407	$this->add_control(
408	'kng_bg_color_hover',
409	[
410	'label' => esc_html__('Background', 'king-addons'),
411	'type' => Controls_Manager::COLOR,
412	'selectors' => [
413	'{{WRAPPER}} .king-addons-phone-call__button:hover' => 'background-color: {{VALUE}};',
414	],
415	]
416	);
417
418	$this->add_control(
419	'kng_border_color_hover',
420	[
421	'label' => esc_html__('Border Color', 'king-addons'),
422	'type' => Controls_Manager::COLOR,
423	'selectors' => [
424	'{{WRAPPER}} .king-addons-phone-call__button:hover' => 'border-color: {{VALUE}};',
425	],
426	]
427	);
428
429	$this->add_group_control(
430	Group_Control_Border::get_type(),
431	[
432	'name' => 'kng_border_hover',
433	'selector' => '{{WRAPPER}} .king-addons-phone-call__button:hover',
434	]
435	);
436
437	$this->add_group_control(
438	Group_Control_Box_Shadow::get_type(),
439	[
440	'name' => 'kng_shadow_hover',
441	'selector' => '{{WRAPPER}} .king-addons-phone-call__button:hover',
442	'condition' => [
443	'kng_disable_shadow!' => 'yes',
444	],
445	]
446	);
447
448	$this->end_controls_tab();
449	$this->end_controls_tabs();
450
451	$this->add_control(
452	'kng_radius',
453	[
454	'label' => esc_html__('Border Radius', 'king-addons'),
455	'type' => Controls_Manager::SLIDER,
456	'size_units' => ['px', '%'],
457	'range' => [
458	'px' => ['min' => 0, 'max' => 40],
459	'%' => ['min' => 0, 'max' => 100],
460	],
461	'selectors' => [
462	'{{WRAPPER}} .king-addons-phone-call__button' => 'border-radius: {{SIZE}}{{UNIT}};',
463	],
464	]
465	);
466
467	$this->add_control(
468	'kng_disable_shadow',
469	[
470	'label' => esc_html__('Disable Box Shadow', 'king-addons'),
471	'type' => Controls_Manager::SWITCHER,
472	'label_on' => esc_html__('Yes', 'king-addons'),
473	'label_off' => esc_html__('No', 'king-addons'),
474	'return_value' => 'yes',
475	'default' => '',
476	'selectors' => [
477	'{{WRAPPER}} .king-addons-phone-call__button' => 'box-shadow: none;',
478	'{{WRAPPER}} .king-addons-phone-call__button:hover' => 'box-shadow: none;',
479	],
480	]
481	);
482
483	$this->add_control(
484	'kng_effect_heading',
485	[
486	'label' => esc_html__('Effect Styling', 'king-addons'),
487	'type' => Controls_Manager::HEADING,
488	'separator' => 'before',
489	]
490	);
491
492	$this->add_control(
493	'kng_effect_color',
494	[
495	'label' => esc_html__('Effect Color', 'king-addons'),
496	'type' => Controls_Manager::COLOR,
497	'default' => '#5B03FF',
498	'selectors' => [
499	'{{WRAPPER}} .king-addons-phone-call__button' => '--kng-phone-effect-color: {{VALUE}};',
500	],
501	]
502	);
503
504	$this->add_control(
505	'kng_effect_color_hover',
506	[
507	'label' => esc_html__('Hover Effect Color', 'king-addons'),
508	'type' => Controls_Manager::COLOR,
509	'default' => '#7A2CFF',
510	'selectors' => [
511	'{{WRAPPER}} .king-addons-phone-call__button:hover' => '--kng-phone-effect-color-hover: {{VALUE}};',
512	],
513	]
514	);
515
516	$this->add_control(
517	'kng_effect_thickness',
518	[
519	'label' => esc_html__('Effect Thickness', 'king-addons'),
520	'type' => Controls_Manager::SLIDER,
521	'size_units' => ['px'],
522	'range' => [
523	'px' => ['min' => 0, 'max' => 8],
524	],
525	'default' => [
526	'size' => 2,
527	'unit' => 'px',
528	],
529	'selectors' => [
530	'{{WRAPPER}} .king-addons-phone-call__button' => '--kng-phone-effect-thickness: {{SIZE}}{{UNIT}};',
531	],
532	]
533	);
534
535	$this->add_control(
536	'kng_effect_spread',
537	[
538	'label' => esc_html__('Effect Spread', 'king-addons'),
539	'type' => Controls_Manager::SLIDER,
540	'size_units' => ['px'],
541	'range' => [
542	'px' => ['min' => 0, 'max' => 30],
543	],
544	'default' => [
545	'size' => 10,
546	'unit' => 'px',
547	],
548	'selectors' => [
549	'{{WRAPPER}} .king-addons-phone-call__button' => '--kng-phone-effect-inset: calc(-1 * {{SIZE}}{{UNIT}});',
550	],
551	]
552	);
553
554	$this->add_control(
555	'kng_effect_duration',
556	[
557	'label' => esc_html__('Effect Duration (s)', 'king-addons'),
558	'type' => Controls_Manager::SLIDER,
559	'size_units' => ['s'],
560	'range' => [
561	's' => ['min' => 0.5, 'max' => 3, 'step' => 0.1],
562	],
563	'default' => [
564	'size' => 1.6,
565	'unit' => 's',
566	],
567	'selectors' => [
568	'{{WRAPPER}} .king-addons-phone-call__button' => '--kng-phone-effect-duration: {{SIZE}}{{UNIT}};',
569	],
570	]
571	);
572
573	$this->add_control(
574	'kng_effect_opacity',
575	[
576	'label' => esc_html__('Effect Opacity', 'king-addons'),
577	'type' => Controls_Manager::SLIDER,
578	'size_units' => ['custom'],
579	'range' => [
580	'custom' => ['min' => 0, 'max' => 1, 'step' => 0.05],
581	],
582	'default' => [
583	'size' => 0.35,
584	],
585	'selectors' => [
586	'{{WRAPPER}} .king-addons-phone-call__button' => '--kng-phone-effect-opacity: {{SIZE}};',
587	],
588	]
589	);
590
591	$this->add_control(
592	'kng_disable_shadow',
593	[
594	'label' => esc_html__('Disable Box Shadow', 'king-addons'),
595	'type' => Controls_Manager::SWITCHER,
596	'label_on' => esc_html__('Yes', 'king-addons'),
597	'label_off' => esc_html__('No', 'king-addons'),
598	'return_value' => 'yes',
599	'default' => '',
600	'selectors' => [
601	'{{WRAPPER}} .king-addons-phone-call__button' => 'box-shadow: none;',
602	'{{WRAPPER}} .king-addons-phone-call__button:hover' => 'box-shadow: none;',
603	],
604	]
605	);
606
607	$this->add_group_control(
608	Group_Control_Box_Shadow::get_type(),
609	[
610	'name' => 'kng_shadow_footer_placeholder', // kept to avoid breaking existing references; hidden by tabs usage.
611	'selector' => '{{WRAPPER}} .king-addons-phone-call__button',
612	'condition' => ['_never_render_' => 'true'],
613	]
614	);
615
616	$this->add_responsive_control(
617	'kng_padding',
618	[
619	'label' => esc_html__('Padding', 'king-addons'),
620	'type' => Controls_Manager::DIMENSIONS,
621	'size_units' => ['px', 'em'],
622	'selectors' => [
623	'{{WRAPPER}} .king-addons-phone-call__button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
624	],
625	]
626	);
627
628	$this->end_controls_section();
629	}
630
631	/**
632	* Render pro notice.
633	*
634	* @return void
635	*/
636	public function register_pro_notice_controls(): void
637	{
638	if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
639	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'phone-call-button', [
640	'Floating button (left/right, mobile-only)',
641	'More attention animations: Bounce, Ring',
642	'Device targeting and schedule',
643	'Custom SVG icon and tooltip',
644	]);
645	}
646	}
647	}
648
649
650
651
652
653
654
655