PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.87
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.87
51.1.87 51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 All 41 releases
← All changes | includes/widgets/Creative_Button/Creative_Button.php +990 -0 51.1.2 → 51.1.87 View file →
@@ -1,0 +1,990 @@
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:[email protected]?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 &amp; 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>&nbsp;</span>';
987 + }
988 + return $markup;
989 + }
990 +}