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

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

976 lines 40.8 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Box_Shadow;
9	use Elementor\Group_Control_Typography;
10	use Elementor\Widget_Base;
11
12	if (!defined('ABSPATH')) {
13	exit; // Exit if accessed directly.
14	}
15
16
17
18	class Creative_Button extends Widget_Base
19	{
20
21
22	public function get_name(): string
23	{
24	return 'king-addons-creative-button';
25	}
26
27	public function get_title(): string
28	{
29	return esc_html__('Creative Button', 'king-addons');
30	}
31
32	public function get_icon(): string
33	{
34	return 'king-addons-icon king-addons-creative-button';
35	}
36
37	public function get_style_depends(): array
38	{
39	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-creative-button-style'];
40	}
41
42	public function get_categories(): array
43	{
44	return ['king-addons'];
45	}
46
47	public function get_keywords(): array
48	{
49	return ['creative button', 'animated button', 'cta button', 'button', 'sidebar', 'side', 'bar', 'ripple button',
50	'cta', 'call to action', 'call', 'sale', 'animation', 'effect', 'animated', 'link', 'left', 'ripple',
51	'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'border', 'splash',
52	'float', 'floating', 'click', 'target', 'point', 'king', 'addons', 'mouseover', 'page', 'center', 'wave',
53	'kingaddons', 'king-addons', 'appear', 'show', 'hide', 'up', 'video', 'play', 'player', 'url', 'waving',
54	'youtube', 'link', 'source', 'external', 'internal', 'king addons', 'pulse button', 'creative', 'pulse',
55	'creativity', 'move', 'moving', 'fill', 'btn'];
56	}
57
58	public function get_custom_help_url()
59	{
60	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
61	}
62
63	public function has_widget_inner_wrapper(): bool {
64	return true;
65	}
66
67	protected function register_controls(): void
68	{
69
70	$this->start_controls_section(
71	'king_addons_creative_btn_section_button',
72	[
73	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Creative Button', 'king-addons'),
74	'tab' => Controls_Manager::TAB_CONTENT,
75	]
76	);
77
78	$this->add_control(
79	'king_addons_creative_btn_style',
80	[
81	'label' => esc_html__('Style', 'king-addons'),
82	'type' => Controls_Manager::SELECT,
83	'default' => 'london',
84	'options' => [
85	'london' => esc_html__('London', 'king-addons'),
86	'paris' => esc_html__('Paris', 'king-addons'),
87	'rome' => esc_html__('Rome', 'king-addons'),
88	'icon-slide' => esc_html__('Icon-Slide', 'king-addons'),
89	'icon-show' => esc_html__('Icon-Show', 'king-addons'),
90	],
91	]
92	);
93
94	$this->add_control(
95	'king_addons_creative_btn_london_effect',
96	[
97	'label' => esc_html__('Effects', 'king-addons'),
98	'type' => Controls_Manager::SELECT,
99	'default' => 'elevate',
100	'options' => [
101	'elevate' => esc_html__('Elevate', 'king-addons'),
102	'glide' => esc_html__('Glide', 'king-addons'),
103	'fresh-start' => esc_html__('Fresh Start', 'king-addons'),
104	'illuminate' => esc_html__('Illuminate', 'king-addons'),
105	'morph' => esc_html__('Morph', 'king-addons'),
106	'cascade' => esc_html__('Cascade', 'king-addons'),
107	'flourish' => esc_html__('Flourish', 'king-addons'),
108	'radiate' => esc_html__('Radiate', 'king-addons'),
109	],
110	'condition' => [
111	'king_addons_creative_btn_style' => 'london',
112	],
113	]
114	);
115
116	$this->add_control(
117	'king_addons_creative_btn_paris_effect',
118	[
119	'label' => esc_html__('Effects', 'king-addons'),
120	'type' => Controls_Manager::SELECT,
121	'default' => 'serene',
122	'options' => [
123	'serene' => esc_html__('Serene', 'king-addons'),
124	'zephyr' => esc_html__('Zephyr', 'king-addons'),
125	'prism' => esc_html__('Prism', 'king-addons'),
126	'ember' => esc_html__('Ember', 'king-addons'),
127	'apex' => esc_html__('Apex', 'king-addons'),
128	'vortex' => esc_html__('Vortex', 'king-addons'),
129	'brilliance' => esc_html__('Brilliance', 'king-addons'),
130	],
131	'condition' => [
132	'king_addons_creative_btn_style' => 'paris',
133	],
134	]
135	);
136
137	$this->add_control(
138	'king_addons_creative_btn_rome_effect',
139	[
140	'label' => esc_html__('Effects', 'king-addons'),
141	'type' => Controls_Manager::SELECT,
142	'default' => 'fill',
143	'options' => [
144	'fill' => esc_html__('Fill', 'king-addons'),
145	'slide-down' => esc_html__('Slide In Down', 'king-addons'),
146	'slide-right' => esc_html__('Slide In Right', 'king-addons'),
147	'slide-x' => esc_html__('Slide Out X', 'king-addons'),
148	'slide-y' => esc_html__('Slide Out Y', 'king-addons'),
149	'diagonal' => esc_html__('Diagonal', 'king-addons'),
150	],
151	'condition' => [
152	'king_addons_creative_btn_style' => 'rome',
153	],
154	]
155	);
156
157	$this->add_control(
158	'king_addons_creative_btn_icon_show_effect',
159	[
160	'label' => esc_html__('Effects', 'king-addons'),
161	'type' => Controls_Manager::SELECT,
162	'default' => 'back-in-left',
163	'options' => [
164	'back-in-left' => esc_html__('Back In Left', 'king-addons'),
165	'back-in-right' => esc_html__('Back In Right', 'king-addons'),
166	'back-out-left' => esc_html__('Back Out Left', 'king-addons'),
167	'back-out-right' => esc_html__('Back Out Right', 'king-addons'),
168	],
169	'condition' => [
170	'king_addons_creative_btn_style' => 'icon-show',
171	],
172	]
173	);
174
175	$this->add_control(
176	'king_addons_creative_btn_icon_slide_effect',
177	[
178	'label' => esc_html__('Effects', 'king-addons'),
179	'type' => Controls_Manager::SELECT,
180	'default' => 'slide-in-top',
181	'options' => [
182	'slide-in-top' => esc_html__('Slide In Top', 'king-addons'),
183	'slide-in-down' => esc_html__('Slide In Down', 'king-addons'),
184	'slide-in-left' => esc_html__('Slide In Left', 'king-addons'),
185	'slide-in-right' => esc_html__('Slide In Right', 'king-addons'),
186	],
187	'condition' => [
188	'king_addons_creative_btn_style' => 'icon-slide',
189	],
190	]
191	);
192
193	$this->add_control(
194	'king_addons_creative_btn_button_text',
195	[
196	'label' => esc_html__('Text', 'king-addons'),
197	'label_block' => true,
198	'type' => Controls_Manager::TEXT,
199	'default' => esc_html__('Button Text', 'king-addons'),
200	'dynamic' => [
201	'active' => true,
202	],
203	]
204	);
205
206	$this->add_control(
207	'king_addons_creative_btn_button_link',
208	array(
209	'label' => esc_html__('Link', 'king-addons'),
210	'type' => Controls_Manager::URL,
211	'show_external' => true,
212	'default' => array(
213	'url' => '#',
214	'is_external' => false,
215	'nofollow' => false,
216	),
217	'dynamic' => [
218	'active' => true,
219	],
220	)
221	);
222
223	$this->add_control(
224	'king_addons_creative_btn_icon',
225	[
226	'label' => esc_html__('Icon for the button', 'king-addons'),
227	'label_block' => false,
228	'type' => Controls_Manager::ICONS,
229	'skin' => 'inline',
230	'render_type' => 'template',
231	'exclude_inline_options' => ['svg'],
232	'default' => [
233	'value' => 'fas fa-crown',
234	'library' => 'fa-solid',
235	],
236	'conditions' => [
237	'relation' => 'or',
238	'terms' => [
239	[
240	'relation' => 'or',
241	'terms' => [
242	[
243	'name' => 'king_addons_creative_btn_style',
244	'operator' => '==',
245	'value' => 'icon-show',
246	],
247	[
248	'name' => 'king_addons_creative_btn_style',
249	'operator' => '==',
250	'value' => 'icon-slide',
251	],
252	],
253	],
254	[
255	'relation' => 'and',
256	'terms' => [
257	[
258	'name' => 'king_addons_creative_btn_style',
259	'operator' => '==',
260	'value' => 'london',
261	],
262	[
263	'name' => 'king_addons_creative_btn_london_effect',
264	'operator' => '==',
265	'value' => 'morph',
266	],
267	],
268	],
269	],
270	],
271	]
272	);
273
274	$this->add_responsive_control(
275	'king_addons_creative_btn_align_x',
276	[
277	'label' => esc_html__('Alignment', 'king-addons'),
278	'type' => Controls_Manager::CHOOSE,
279	'label_block' => false,
280	'options' => [
281	'left' => [
282	'title' => esc_html__('Left', 'king-addons'),
283	'icon' => 'eicon-h-align-left',
284	],
285	'center' => [
286	'title' => esc_html__('Center', 'king-addons'),
287	'icon' => 'eicon-h-align-center',
288	],
289	'right' => [
290	'title' => esc_html__('Right', 'king-addons'),
291	'icon' => 'eicon-h-align-right',
292	],
293	],
294	'toggle' => true,
295	'selectors' => [
296	'{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}};',
297	],
298	]
299	);
300
301	$this->end_controls_section();
302
303	$this->start_controls_section(
304	'king_addons_creative_btn_rome_icon_show_icon_slide_style_section',
305	[
306	'label' => esc_html__('Common', 'king-addons'),
307	'tab' => Controls_Manager::TAB_STYLE,
308	]
309	);
310
311	$this->add_responsive_control(
312	'king_addons_creative_btn_button_item_width',
313	[
314	'label' => esc_html__('Size', 'king-addons'),
315	'type' => Controls_Manager::SLIDER,
316	'size_units' => ['px'],
317	'range' => [
318	'px' => [
319	'min' => 0,
320	'max' => 1000,
321	],
322	],
323	'selectors' => [
324	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-effect-cascade' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
325	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-effect-radiate' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
326	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-effect-radiate .king-addons-creative-btn-progress' => 'width: calc({{SIZE}}{{UNIT}} - (({{SIZE}}{{UNIT}} / 100) * 20) ); height:auto;',
327	],
328	'conditions' => [
329	'terms' => [
330	[
331	'relation' => 'or',
332	'terms' => [
333	[
334	'name' => 'king_addons_creative_btn_london_effect',
335	'operator' => '==',
336	'value' => 'radiate',
337	],
338	[
339	'name' => 'king_addons_creative_btn_london_effect',
340	'operator' => '==',
341	'value' => 'cascade',
342	],
343	],
344	],
345	[
346	'terms' => [
347	[
348	'name' => 'king_addons_creative_btn_style',
349	'operator' => '==',
350	'value' => 'london',
351	],
352	],
353	],
354	],
355	],
356	]
357	);
358
359	$this->add_responsive_control(
360	'king_addons_creative_btn_button_icon_size',
361	[
362	'label' => esc_html__('Icon Size', 'king-addons'),
363	'type' => Controls_Manager::SLIDER,
364	'size_units' => ['px'],
365	'range' => [
366	'px' => [
367	'min' => 0,
368	'max' => 500,
369	],
370	],
371	'default' => [
372	'unit' => 'px',
373	'size' => 24,
374	],
375	'selectors' => [
376	'{{WRAPPER}} .king-addons-creative-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
377	],
378	'conditions' => [
379	'relation' => 'or',
380	'terms' => [
381	[
382	'relation' => 'or',
383	'terms' => [
384	[
385	'name' => 'king_addons_creative_btn_style',
386	'operator' => '==',
387	'value' => 'icon-show',
388	],
389	[
390	'name' => 'king_addons_creative_btn_style',
391	'operator' => '==',
392	'value' => 'icon-slide',
393	],
394	],
395	],
396	[
397	'relation' => 'and',
398	'terms' => [
399	[
400	'name' => 'king_addons_creative_btn_style',
401	'operator' => '==',
402	'value' => 'london',
403	],
404	[
405	'name' => 'king_addons_creative_btn_london_effect',
406	'operator' => '==',
407	'value' => 'morph',
408	],
409	],
410	],
411	],
412	],
413	]
414	);
415
416	$this->add_group_control(
417	Group_Control_Typography::get_type(),
418	[
419	'name' => 'king_addons_creative_btn_typography',
420	'label' => esc_html__('Typography', 'king-addons'),
421	'selector' => '{{WRAPPER}} .king-addons-creative-btn',
422	'global' => [
423	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
424	],
425	]
426	);
427
428	$this->add_group_control(
429	Group_Control_Border::get_type(),
430	[
431	'name' => 'king_addons_creative_btn_border',
432	'exclude' => ['color'],
433	'selector' => '{{WRAPPER}} .king-addons-creative-btn, {{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-effect-flourish div',
434	'conditions' => [
435	'terms' => [
436	[
437	'relation' => 'or',
438	'terms' => [
439	[
440	'name' => 'king_addons_creative_btn_london_effect',
441	'operator' => '!=',
442	'value' => 'radiate',
443	],
444	],
445	],
446	[
447	'terms' => [
448	[
449	'name' => 'king_addons_creative_btn_style',
450	'operator' => '!=',
451	'value' => '',
452	],
453	],
454	],
455	],
456	],
457	]
458	);
459
460	$this->add_responsive_control(
461	'king_addons_creative_btn_button_border_radius',
462	[
463	'label' => esc_html__('Border Radius', 'king-addons'),
464	'type' => Controls_Manager::DIMENSIONS,
465	'size_units' => ['px', '%'],
466	'selectors' => [
467	'{{WRAPPER}} .king-addons-creative-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
468	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish div' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
469	],
470	]
471	);
472
473	$this->add_responsive_control(
474	'king_addons_creative_btn_button_london_radiate_stroke_width',
475	[
476	'label' => esc_html__('Stroke Width', 'king-addons'),
477	'type' => Controls_Manager::SLIDER,
478	'size_units' => ['px'],
479	'range' => [
480	'px' => [
481	'min' => 1,
482	'max' => 10,
483	],
484	],
485	'selectors' => [
486	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-effect-radiate' => '--king-addons-creative-btn-stroke-width: {{SIZE}}{{UNIT}};',
487	],
488	'conditions' => [
489	'terms' => [
490	[
491	'relation' => 'or',
492	'terms' => [
493	[
494	'name' => 'king_addons_creative_btn_london_effect',
495	'operator' => '==',
496	'value' => 'radiate',
497	],
498	],
499	],
500	[
501	'terms' => [
502	[
503	'name' => 'king_addons_creative_btn_style',
504	'operator' => '==',
505	'value' => 'london',
506	],
507	],
508	],
509	],
510	],
511	]
512	);
513
514	$conditions = [
515	'terms' => [
516	[
517	'relation' => 'or',
518	'terms' => [
519	[
520	'name' => 'king_addons_creative_btn_london_effect',
521	'operator' => '!=',
522	'value' => 'radiate',
523	],
524	],
525	],
526	[
527	'terms' => [
528	[
529	'name' => 'king_addons_creative_btn_style',
530	'operator' => '!=',
531	'value' => '',
532	],
533	],
534	],
535	],
536	];
537
538	$this->start_controls_tabs('king_addons_creative_btn_tabs_button');
539	$this->start_controls_tab(
540	'king_addons_creative_btn__tab_button_normal',
541	[
542	'label' => esc_html__('Normal', 'king-addons'),
543	]
544	);
545
546	$this->add_control(
547	'king_addons_creative_btn_button_text_color',
548	[
549	'label' => esc_html__('Text Color', 'king-addons'),
550	'type' => Controls_Manager::COLOR,
551	'selectors' => [
552	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn' => '--king-addons-creative-btn-txt-color: {{VALUE}}',
553	],
554	]
555	);
556
557	$this->add_control(
558	'king_addons_creative_btn_button_bg_color',
559	[
560	'label' => esc_html__('Background Color', 'king-addons'),
561	'type' => Controls_Manager::COLOR,
562	'selectors' => [
563	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn' => '--king-addons-creative-btn-bg-color: {{VALUE}}',
564	],
565	'conditions' => $conditions,
566	]
567	);
568
569	$this->add_control(
570	'king_addons_creative_btn_button_border_color',
571	[
572	'label' => esc_html__('Border Color', 'king-addons'),
573	'type' => Controls_Manager::COLOR,
574	'selectors' => [
575	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn' => '--king-addons-creative-btn-border-color: {{VALUE}}',
576	],
577	'conditions' => [
578	'terms' => [
579	[
580	'relation' => 'or',
581	'terms' => [
582	[
583	'name' => 'king_addons_creative_btn_london_effect',
584	'operator' => '!=',
585	'value' => 'radiate',
586	],
587	],
588	],
589	[
590	'terms' => [
591	[
592	'name' => 'king_addons_creative_btn_style',
593	'operator' => '!=',
594	'value' => '',
595	],
596	],
597	],
598	],
599	],
600	]
601	);
602
603	$this->add_control(
604	'king_addons_creative_btn_button_radiate_circle_color',
605	[
606	'label' => esc_html__('Circle Color', 'king-addons'),
607	'type' => Controls_Manager::COLOR,
608	'selectors' => [
609	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn.king-addons-creative-btn-effect-radiate' => '--king-addons-creative-btn-border-color: {{VALUE}}',
610	],
611	'conditions' => [
612	'terms' => [
613	[
614	'relation' => 'or',
615	'terms' => [
616	[
617	'name' => 'king_addons_creative_btn_london_effect',
618	'operator' => '==',
619	'value' => 'radiate',
620	],
621	],
622	],
623	[
624	'terms' => [
625	[
626	'name' => 'king_addons_creative_btn_style',
627	'operator' => '==',
628	'value' => 'london',
629	],
630	],
631	],
632	],
633	],
634	]
635	);
636
637	$this->add_group_control(
638	Group_Control_Box_Shadow::get_type(),
639	[
640	'name' => 'button_box_shadow',
641	'selector' => '{{WRAPPER}} .king-addons-creative-btn',
642	]
643	);
644
645	$this->end_controls_tab();
646
647	$this->start_controls_tab(
648	'king_addons_creative_btn__tabs_button_hover',
649	[
650	'label' => esc_html__('Hover', 'king-addons'),
651	]
652	);
653
654	$this->add_control(
655	'king_addons_creative_btn_button_hover_text_color',
656	[
657	'label' => esc_html__('Text Color', 'king-addons'),
658	'type' => Controls_Manager::COLOR,
659	'selectors' => [
660	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn' => '--king-addons-creative-btn-txt-hover-color: {{VALUE}}',
661	],
662	]
663	);
664
665	$this->add_control(
666	'king_addons_creative_btn_button_hover_bg_color',
667	[
668	'label' => esc_html__('Background Color', 'king-addons'),
669	'type' => Controls_Manager::COLOR,
670	'selectors' => [
671	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn' => '--king-addons-creative-btn-bg-hover-color: {{VALUE}}',
672	],
673	'conditions' => $conditions,
674	]
675	);
676
677	$this->add_control(
678	'king_addons_creative_btn_button_hover_border_color',
679	[
680	'label' => esc_html__('Border Color', 'king-addons'),
681	'type' => Controls_Manager::COLOR,
682	'selectors' => [
683	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn' => '--king-addons-creative-btn-border-hover-color: {{VALUE}}',
684	],
685	'conditions' => [
686	'terms' => [
687	[
688	'relation' => 'or',
689	'terms' => [
690	[
691	'name' => 'king_addons_creative_btn_london_effect',
692	'operator' => '!=',
693	'value' => 'radiate',
694	],
695	],
696	],
697	[
698	'terms' => [
699	[
700	'name' => 'king_addons_creative_btn_style',
701	'operator' => '!=',
702	'value' => '',
703	],
704	],
705	],
706	],
707	],
708	]
709	);
710
711	$this->add_control(
712	'king_addons_creative_btn_button_hover_radiate_circle_color',
713	[
714	'label' => esc_html__('Circle Color', 'king-addons'),
715	'type' => Controls_Manager::COLOR,
716	'selectors' => [
717	'{{WRAPPER}} .king-addons-creative-btn-wrap .king-addons-creative-btn.king-addons-creative-btn-effect-radiate' => '--king-addons-creative-btn-border-hover-color: {{VALUE}}',
718	],
719	'conditions' => [
720	'terms' => [
721	[
722	'relation' => 'or',
723	'terms' => [
724	[
725	'name' => 'king_addons_creative_btn_london_effect',
726	'operator' => '==',
727	'value' => 'radiate',
728	],
729	],
730	],
731	[
732	'terms' => [
733	[
734	'name' => 'king_addons_creative_btn_style',
735	'operator' => '==',
736	'value' => 'london',
737	],
738	],
739	],
740	],
741	],
742	]
743	);
744
745	$this->add_group_control(
746	Group_Control_Box_Shadow::get_type(),
747	[
748	'name' => 'king_addons_creative_btn_hover_box_shadow',
749	'selector' => '{{WRAPPER}} .king-addons-creative-btn:hover',
750	]
751	);
752
753	$this->end_controls_tab();
754	$this->end_controls_tabs();
755
756	$this->add_responsive_control(
757	'king_addons_creative_btn_button_padding',
758	[
759	'label' => esc_html__('Padding', 'king-addons'),
760	'type' => Controls_Manager::DIMENSIONS,
761	'size_units' => ['px', 'em', '%'],
762	'selectors' => [
763	'{{WRAPPER}} .king-addons-creative-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
764	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-icon-slide > span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
765	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene > span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
766	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-serene::after' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
767	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr > span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
768	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-zephyr::before' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
769	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
770	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-paris.king-addons-creative-btn-effect-apex::before' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
771	'{{WRAPPER}} .king-addons-creative-btn.king-addons-creative-btn-style-london.king-addons-creative-btn-effect-flourish span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
772	],
773	'separator' => 'before',
774	]
775	);
776
777
778
779
780	$this->end_controls_section();
781
782
783	}
784
785	protected function render(): void
786	{
787	$settings = $this->get_settings();
788
789	switch ($settings['king_addons_creative_btn_style']) {
790	case 'london':
791	$this->renderLondon($settings, $this->get_id());
792	break;
793	case 'paris':
794	$this->renderParis($settings);
795	break;
796	case 'rome':
797	$this->renderRome($settings);
798	break;
799	case 'icon-slide':
800	$this->renderIconSlide($settings);
801	break;
802	case 'icon-show':
803	$this->renderIconShow($settings);
804	break;
805	}
806	}
807
808	public function renderLondon($settings, $id): void
809	{
810	$effect = $settings['king_addons_creative_btn_london_effect'];
811
812	echo '<div class="king-addons-creative-btn-wrap">';
813	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
814	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
815	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
816	' class ="king-addons-creative-btn king-addons-creative-btn-style-london king-addons-creative-btn-effect-' . esc_attr($effect) . ' king-addons-creative-btn-id-' . esc_attr($id) . '"';
817	echo '>';
818
819	$btn_txt = $settings['king_addons_creative_btn_button_text'];
820	if ('glide' == $effect \|\| 'illuminate' == $effect \|\| 'elevate' == $effect) {
821	echo '<span>' . esc_html($btn_txt) . '</span>';
822	} elseif ('fresh-start' == $effect \|\| 'cascade' == $effect) {
823	echo '<span><span>' . esc_html($btn_txt) . '</span></span>';
824	} elseif ('flourish' == $effect) {
825	echo '<div></div><span>' . esc_html($btn_txt) . '</span>';
826	} elseif ('radiate' == $effect) {
827	echo '<svg aria-hidden="true" class="king-addons-creative-btn-progress" width="70" height="70" viewbox="0 0 70 70"><path class="king-addons-creative-btn-progress-circle" d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z" /><path class="king-addons-creative-btn-progress-path" d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z" pathLength="0.9"/></svg><span>' . esc_html($btn_txt) . '</span>';
828	} elseif ('morph' == $effect) {
829	echo '<span class="king-addons-creative-btn-morph-text">' . esc_html($btn_txt) . '</span><span class="king-addons-creative-btn-morph-icon"><i aria-hidden="true" class="' . esc_attr(($settings['king_addons_creative_btn_icon']['value'] ?: 'fas fa-crown')) . '"></i></span>';
830	}
831
832	echo '</a>';
833	echo '</div>';
834
835	if ('morph' == $effect) {
836	$js = '
837	(function() {
838	function bindMorphAnimation() {
839	let morph = document.querySelector(".king-addons-creative-btn-id-' . esc_js($id) . '");
840	let text = morph.querySelector(".king-addons-creative-btn-morph-text");
841	if (morph && text) {
842	text.addEventListener("transitionend", function () {
843	if (text.style.width !== "") {
844	text.style.width = "auto";
845	}
846	});
847
848	morph.addEventListener("mouseenter", function () {
849	text.style.width = "auto";
850	let predictedWidth = text.offsetWidth;
851	text.style.width = "0";
852	window.getComputedStyle(text).transform; // Trigger reflow
853	text.style.width = `${predictedWidth}px`;
854	});
855
856	morph.addEventListener("mouseleave", function () {
857	text.style.width = `${text.offsetWidth}px`;
858	window.getComputedStyle(text).transform; // Trigger reflow
859	text.style.width = "";
860	});
861	}
862	}
863	if (document.readyState === "complete") {
864	bindMorphAnimation();
865	} else {
866	document.addEventListener("DOMContentLoaded", bindMorphAnimation);
867	}
868	})();
869	';
870	wp_print_inline_script_tag($js);
871	}
872	}
873
874	public function renderParis($settings): void
875	{
876	$effect = $settings['king_addons_creative_btn_paris_effect'];
877
878	echo '<div class="king-addons-creative-btn-wrap">';
879	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
880	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
881	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
882	' class ="king-addons-creative-btn king-addons-creative-btn-style-paris king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
883	if ('serene' == $effect \|\| 'zephyr' == $effect \|\| 'apex' == $effect) {
884	echo ' data-text="' . esc_attr($settings['king_addons_creative_btn_button_text']) . '"';
885	}
886	echo '>';
887
888	$btn_txt = esc_html($settings['king_addons_creative_btn_button_text']);
889	if ('serene' == $effect \|\| 'zephyr' == $effect \|\| 'brilliance' == $effect) {
890	$btn_txt = '<span>' . esc_html($btn_txt) . '</span>';
891	} elseif ('apex' == $effect) {
892	$btn_txt = $this->splitText($btn_txt);
893	}
894
895	// Define allowed tags and attributes
896	$allowed_tags = wp_kses_allowed_html('post');
897	$allowed_tags['span']['class'] = true;
898	$allowed_tags['span']['style'] = true;
899
900	echo wp_kses($btn_txt, $allowed_tags);
901
902	echo '</a>';
903	echo '</div>';
904	}
905
906	public function renderRome($settings): void
907	{
908	$effect = $settings['king_addons_creative_btn_rome_effect'];
909
910	echo '<div class="king-addons-creative-btn-wrap">';
911	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
912	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
913	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
914	' class ="king-addons-creative-btn king-addons-creative-btn-style-rome king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
915	if ('serene' == $effect \|\| 'zephyr' == $effect \|\| 'apex' == $effect) {
916	echo ' data-text="' . esc_attr($settings['king_addons_creative_btn_button_text']) . '"';
917	}
918	echo '>';
919
920	echo esc_html($settings['king_addons_creative_btn_button_text']);
921
922	echo '</a>';
923	echo '</div>';
924	}
925
926	public function renderIconSlide($settings): void
927	{
928	$effect = $settings['king_addons_creative_btn_icon_slide_effect'];
929
930	echo '<div class="king-addons-creative-btn-wrap">';
931	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
932	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
933	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
934	' class ="king-addons-creative-btn king-addons-creative-btn-style-icon-slide king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
935	echo '>';
936
937	$btn_txt = $settings['king_addons_creative_btn_button_text'];
938	$icon = $settings['king_addons_creative_btn_icon']['value'] ?: 'fas fa-crown';
939
940	echo '<span>' . esc_html($btn_txt) . '</span><i aria-hidden="true" class="' . esc_attr($icon) . '"></i>';
941
942	echo '</a>';
943	echo '</div>';
944	}
945
946	public function renderIconShow($settings): void
947	{
948	$effect = $settings['king_addons_creative_btn_icon_show_effect'];
949
950	echo '<div class="king-addons-creative-btn-wrap">';
951	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
952	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
953	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
954	' class ="king-addons-creative-btn king-addons-creative-btn-style-icon-show king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
955	echo '>';
956
957	$btn_txt = $settings['king_addons_creative_btn_button_text'];
958	$icon = $settings['king_addons_creative_btn_icon']['value'] ?: 'fas fa-crown';
959
960	echo esc_html($btn_txt) . '<i aria-hidden="true" class="' . esc_attr($icon) . '"></i>';
961
962	echo '</a>';
963	echo '</div>';
964	}
965
966	public function splitText($text): string
967	{
968	$base = 0.045;
969	$markup = '';
970	foreach (str_split($text) as $key => $value) {
971	$delay = $base * ($key + 1);
972	$markup .= trim($value) ? '<span style="--king-addons-creative-btn-effect-apex-delay:' . esc_attr($delay) . 's">' . esc_html($value) . '</span>' : '<span> </span>';
973	}
974	return $markup;
975	}
976	}