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.81, at includes/widgets/Creative_Button/Creative_Button.php

990 lines 41.6 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 = Core::displaySettings($this);
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	// The label is kept raw here and escaped once, where it goes into
889	// markup. Escaping it up front and again below turned "Tom & Jerry"
890	// into visible "Tom & Jerry" in the apex effect, because splitText()
891	// cuts the entity apart and wp_kses can no longer recognise it.
892	$btn_txt = $settings['king_addons_creative_btn_button_text'];
893	if ('serene' == $effect \|\| 'zephyr' == $effect \|\| 'brilliance' == $effect) {
894	$btn_txt = '<span>' . esc_html($btn_txt) . '</span>';
895	} elseif ('apex' == $effect) {
896	$btn_txt = $this->splitText($btn_txt);
897	} else {
898	$btn_txt = esc_html($btn_txt);
899	}
900
901	// Define allowed tags and attributes
902	$allowed_tags = wp_kses_allowed_html('post');
903	$allowed_tags['span']['class'] = true;
904	$allowed_tags['span']['style'] = true;
905
906	echo wp_kses($btn_txt, $allowed_tags);
907
908	echo '</a>';
909	echo '</div>';
910	}
911
912	public function renderRome($settings): void
913	{
914	$effect = $settings['king_addons_creative_btn_rome_effect'];
915
916	echo '<div class="king-addons-creative-btn-wrap">';
917	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
918	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
919	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
920	' class ="king-addons-creative-btn king-addons-creative-btn-style-rome king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
921	if ('serene' == $effect \|\| 'zephyr' == $effect \|\| 'apex' == $effect) {
922	echo ' data-text="' . esc_attr($settings['king_addons_creative_btn_button_text']) . '"';
923	}
924	echo '>';
925
926	echo esc_html($settings['king_addons_creative_btn_button_text']);
927
928	echo '</a>';
929	echo '</div>';
930	}
931
932	public function renderIconSlide($settings): void
933	{
934	$effect = $settings['king_addons_creative_btn_icon_slide_effect'];
935
936	echo '<div class="king-addons-creative-btn-wrap">';
937	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
938	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
939	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
940	' class ="king-addons-creative-btn king-addons-creative-btn-style-icon-slide king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
941	echo '>';
942
943	$btn_txt = $settings['king_addons_creative_btn_button_text'];
944	$icon = $settings['king_addons_creative_btn_icon']['value'] ?: 'fas fa-crown';
945
946	echo '<span>' . esc_html($btn_txt) . '</span><i aria-hidden="true" class="' . esc_attr($icon) . '"></i>';
947
948	echo '</a>';
949	echo '</div>';
950	}
951
952	public function renderIconShow($settings): void
953	{
954	$effect = $settings['king_addons_creative_btn_icon_show_effect'];
955
956	echo '<div class="king-addons-creative-btn-wrap">';
957	echo '<a href="' . esc_url($settings['king_addons_creative_btn_button_link']['url']) . '"' .
958	(($settings['king_addons_creative_btn_button_link']['is_external']) ? ' target="_blank"' : '') .
959	(($settings['king_addons_creative_btn_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
960	' class ="king-addons-creative-btn king-addons-creative-btn-style-icon-show king-addons-creative-btn-effect-' . esc_attr($effect) . '"';
961	echo '>';
962
963	$btn_txt = $settings['king_addons_creative_btn_button_text'];
964	$icon = $settings['king_addons_creative_btn_icon']['value'] ?: 'fas fa-crown';
965
966	echo esc_html($btn_txt) . '<i aria-hidden="true" class="' . esc_attr($icon) . '"></i>';
967
968	echo '</a>';
969	echo '</div>';
970	}
971
972	public function splitText($text): string
973	{
974	$base = 0.045;
975	$markup = '';
976
977	// str_split() cuts bytes, not characters: a Cyrillic label came out as
978	// twice as many empty spans, because every half of a character was
979	// invalid UTF-8 and esc_html() dropped it. The button rendered blank.
980	$characters = function_exists('mb_str_split')
981	? mb_str_split((string) $text)
982	: preg_split('//u', (string) $text, -1, PREG_SPLIT_NO_EMPTY);
983
984	foreach ((array) $characters as $key => $value) {
985	$delay = $base * ($key + 1);
986	$markup .= trim($value) ? '<span style="--king-addons-creative-btn-effect-apex-delay:' . esc_attr($delay) . 's">' . esc_html($value) . '</span>' : '<span> </span>';
987	}
988	return $markup;
989	}
990	}