PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
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 51.1.45 51.1.46 All 39 releases
← All changes | includes/widgets/Pulsing_Button/Pulsing_Button.php +498 -0 51.1.2 → 51.1.83 View file →
@@ -1,0 +1,498 @@
1 +<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2 +
3 +namespace King_Addons;
4 +
5 +use Elementor\Controls_Manager;
6 +use Elementor\Group_Control_Border;
7 +use Elementor\Group_Control_Box_Shadow;
8 +use Elementor\Group_Control_Typography;
9 +use Elementor\Icons_Manager;
10 +use Elementor\Widget_Base;
11 +
12 +if (!defined('ABSPATH')) {
13 + exit; // Exit if accessed directly.
14 +}
15 +
16 +
17 +
18 +class Pulsing_Button extends Widget_Base
19 +{
20 +
21 +
22 + public function get_name(): string
23 + {
24 + return 'king-addons-pulsing-button';
25 + }
26 +
27 + public function get_title(): string
28 + {
29 + return esc_html__('Pulsing Button', 'king-addons');
30 + }
31 +
32 + public function get_icon(): string
33 + {
34 + /** @noinspection SpellCheckingInspection */
35 + return 'king-addons-icon king-addons-pulsing-button';
36 + }
37 +
38 + public function get_style_depends(): array
39 + {
40 + return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-pulsing-button-style'];
41 + }
42 +
43 + public function get_categories(): array
44 + {
45 + return ['king-addons'];
46 + }
47 +
48 + public function get_keywords(): array
49 + {
50 + return ['pulsing button', 'animated button', 'cta button', 'button', 'sidebar', 'side', 'bar', 'ripple button',
51 + 'cta', 'call to action', 'call', 'sale', 'animation', 'effect', 'animated', 'link', 'left', 'ripple',
52 + 'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'border', 'splash',
53 + 'float', 'floating', 'click', 'target', 'point', 'king', 'addons', 'mouseover', 'page', 'center', 'wave',
54 + 'kingaddons', 'king-addons', 'appear', 'show', 'hide', 'up', 'video', 'play', 'player', 'url', 'waving',
55 + 'youtube', 'link', 'source', 'external', 'internal', 'king addons', 'pulse button', 'pulsing', 'pulse',
56 + 'btn'];
57 + }
58 +
59 + public function get_custom_help_url()
60 + {
61 + return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
62 + }
63 +
64 + protected function register_controls(): void
65 + {
66 + /** SECTION: Button ===================== */
67 + $this->start_controls_section(
68 + 'kng_pulsing_button_section_style_btn',
69 + [
70 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
71 + 'tab' => Controls_Manager::TAB_CONTENT,
72 + ]
73 + );
74 +
75 + $this->add_control(
76 + 'kng_pulsing_button_link',
77 + [
78 + 'label' => esc_html__('Link', 'king-addons'),
79 + 'type' => Controls_Manager::URL,
80 + ]
81 + );
82 +
83 + $this->add_control(
84 + 'kng_pulsing_button_text',
85 + [
86 + 'label' => esc_html__('Text', 'king-addons'),
87 + 'type' => Controls_Manager::TEXT,
88 + 'default' => 'Text',
89 + ]
90 + );
91 +
92 + /** @noinspection SpellCheckingInspection */
93 + $this->add_control(
94 + 'kng_pulsing_button_icon_reverse_switcher',
95 + [
96 + 'label' => esc_html__('Reverse Icon Position', 'king-addons'),
97 + 'description' => esc_html__('Left / Right', 'king-addons'),
98 + 'type' => Controls_Manager::SWITCHER,
99 + ]
100 + );
101 +
102 + $this->add_control(
103 + 'kng_pulsing_button_icon',
104 + [
105 + 'label' => esc_html__('Select Icon', 'king-addons'),
106 + 'type' => Controls_Manager::ICONS,
107 + 'skin' => 'inline',
108 + 'label_block' => false,
109 + 'exclude_inline_options' => ['svg'],
110 + 'default' => [
111 + 'value' => 'fas fa-angle-right',
112 + 'library' => 'fa-solid',
113 + ],
114 + ]
115 + );
116 +
117 + $this->add_responsive_control(
118 + 'kng_img_hotspots_space_b_icon_title',
119 + [
120 + 'label' => esc_html__('Space between icon and title (px)', 'king-addons'),
121 + 'type' => Controls_Manager::NUMBER,
122 + 'step' => 1,
123 + 'min' => 0,
124 + 'default' => 10,
125 + 'selectors' => [
126 + '{{WRAPPER}} .king-addons-pulsing-button-icon-reverse i' => 'margin-right: {{VALUE}}px;',
127 + '{{WRAPPER}} .king-addons-pulsing-button-icon-reverse img' => 'margin-right: {{VALUE}}px;',
128 + '{{WRAPPER}} .king-addons-pulsing-button-icon-reverse svg' => 'margin-right: {{VALUE}}px;',
129 + '{{WRAPPER}} .king-addons-pulsing-button-icon-regular i' => 'margin-left: {{VALUE}}px;',
130 + '{{WRAPPER}} .king-addons-pulsing-button-icon-regular img' => 'margin-left: {{VALUE}}px;',
131 + '{{WRAPPER}} .king-addons-pulsing-button-icon-regular svg' => 'margin-left: {{VALUE}}px;',
132 + ],
133 + ]
134 + );
135 +
136 + $this->add_responsive_control(
137 + 'kng_pulsing_button_h_position',
138 + [
139 + 'label' => esc_html__('Button Horizontal Position', 'king-addons'),
140 + 'type' => Controls_Manager::CHOOSE,
141 + 'default' => 'center',
142 + 'options' => [
143 + 'left' => [
144 + 'title' => esc_html__('Left', 'king-addons'),
145 + 'icon' => 'eicon-h-align-left',
146 + ],
147 + 'center' => [
148 + 'title' => esc_html__('Center', 'king-addons'),
149 + 'icon' => 'eicon-h-align-center',
150 + ],
151 + 'right' => [
152 + 'title' => esc_html__('Right', 'king-addons'),
153 + 'icon' => 'eicon-h-align-right',
154 + ],
155 + ],
156 + 'selectors' => [
157 + '{{WRAPPER}}' => 'text-align: {{VALUE}};',
158 + ],
159 + ]
160 + );
161 +
162 + $this->add_responsive_control(
163 + 'kng_pulsing_button_icon_size',
164 + [
165 + 'label' => esc_html__('Icon Size', 'king-addons'),
166 + 'type' => Controls_Manager::NUMBER,
167 + 'step' => 1,
168 + 'min' => 0,
169 + 'default' => 20,
170 + 'selectors' => [
171 + '{{WRAPPER}} .king-addons-pulsing-button-button i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
172 + '{{WRAPPER}} .king-addons-pulsing-button-button img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
173 + '{{WRAPPER}} .king-addons-pulsing-button-button svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
174 + ],
175 + ]
176 + );
177 +
178 + $this->add_responsive_control(
179 + 'kng_pulsing_button_transition_icon',
180 + [
181 + 'label' => esc_html__('Transition duration for icon on hover (ms)', 'king-addons'),
182 + 'type' => Controls_Manager::NUMBER,
183 + 'min' => 0,
184 + 'step' => 10,
185 + 'default' => 300,
186 + 'selectors' => [
187 + '{{WRAPPER}} .king-addons-pulsing-button-button i' => 'transition: all {{SIZE}}ms;',
188 + '{{WRAPPER}} .king-addons-pulsing-button-button img' => 'transition: all {{SIZE}}ms;',
189 + '{{WRAPPER}} .king-addons-pulsing-button-button svg' => 'transition: all {{SIZE}}ms;',
190 + '{{WRAPPER}} .king-addons-pulsing-button-button-wrap .king-addons-pulsing-button-button' => 'transition: all {{SIZE}}ms;',
191 + ],
192 + ]
193 + );
194 +
195 + $this->add_control(
196 + 'kng_pulsing_button_scale_switcher',
197 + [
198 + 'label' => esc_html__('Scale button on hover', 'king-addons'),
199 + 'type' => Controls_Manager::SWITCHER,
200 + 'default' => 'yes',
201 + ]
202 + );
203 +
204 + $this->add_responsive_control(
205 + 'kng_pulsing_button_scale_hover',
206 + [
207 + 'label' => esc_html__('Scale on hover', 'king-addons'),
208 + 'type' => Controls_Manager::NUMBER,
209 + 'min' => 0,
210 + 'step' => 0.01,
211 + 'default' => 1.1,
212 + 'selectors' => [
213 + '{{WRAPPER}} .king-addons-pulsing-button-button-wrap:hover .king-addons-pulsing-button-button' => 'transform: scale({{SIZE}});'
214 + ],
215 + 'condition' => [
216 + 'kng_pulsing_button_scale_switcher' => 'yes',
217 + ]
218 + ]
219 + );
220 +
221 + $this->add_control(
222 + 'kng_pulsing_button_effect_type',
223 + [
224 + 'label' => esc_html__('Button Effect', 'king-addons'),
225 + 'type' => Controls_Manager::SELECT,
226 + 'default' => 'ripple',
227 + 'options' => [
228 + 'none' => esc_html__('None', 'king-addons'),
229 + 'ripple' => esc_html__('Ripple', 'king-addons'),
230 + ],
231 + 'separator' => 'before',
232 + ]
233 + );
234 +
235 + $this->add_control(
236 + 'kng_pulsing_button_effect_ripple_color',
237 + [
238 + 'label' => esc_html__('Ripple Color', 'king-addons'),
239 + 'type' => Controls_Manager::COLOR,
240 + 'default' => '#000000',
241 + 'selectors' => [
242 + '{{WRAPPER}} .king-addons-pulsing-button-button.king-addons-pulsing-button-button-effect-ripple:before' => 'border: 1px solid {{VALUE}};',
243 + ],
244 + 'condition' => [
245 + 'kng_pulsing_button_effect_type' => 'ripple',
246 + ],
247 + ]
248 + );
249 +
250 + $this->add_group_control(
251 + Group_Control_Typography::get_type(),
252 + [
253 + 'name' => 'kng_pulsing_button_txt_typography',
254 + 'label' => esc_html__('Typography', 'king-addons'),
255 + 'selector' => '{{WRAPPER}} .king-addons-pulsing-button-button .king-addons-pulsing-button-text',
256 + ]
257 + );
258 +
259 + $this->add_responsive_control(
260 + 'kng_pulsing_button_padding',
261 + [
262 + 'label' => esc_html__('Padding', 'king-addons'),
263 + 'type' => Controls_Manager::DIMENSIONS,
264 + 'size_units' => ['px'],
265 + 'default' => [
266 + 'top' => 20,
267 + 'right' => 30,
268 + 'bottom' => 20,
269 + 'left' => 30,
270 + ],
271 + 'selectors' => [
272 + '{{WRAPPER}} .king-addons-pulsing-button-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
273 + ],
274 + 'separator' => 'before',
275 + ]
276 + );
277 +
278 + $this->add_responsive_control(
279 + 'kng_pulsing_button_margin',
280 + [
281 + 'label' => esc_html__('Margin', 'king-addons'),
282 + 'type' => Controls_Manager::DIMENSIONS,
283 + 'size_units' => ['px'],
284 + 'default' => [
285 + 'top' => 30,
286 + 'right' => 30,
287 + 'bottom' => 30,
288 + 'left' => 30,
289 + ],
290 + 'selectors' => [
291 + '{{WRAPPER}} .king-addons-pulsing-button-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
292 + ]
293 + ]
294 + );
295 +
296 + $this->add_control(
297 + 'kng_pulsing_button_tabs_title',
298 + [
299 + 'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
300 + 'type' => Controls_Manager::RAW_HTML,
301 + 'separator' => 'before'
302 + ]
303 + );
304 +
305 + $this->start_controls_tabs('kng_pulsing_button_tabs');
306 +
307 + $this->start_controls_tab(
308 + 'kng_pulsing_button_tab_normal',
309 + [
310 + 'label' => esc_html__('Normal', 'king-addons'),
311 + ]
312 + );
313 +
314 + $this->add_control(
315 + 'kng_pulsing_button_txt_color',
316 + [
317 + 'label' => esc_html__('Text Color', 'king-addons'),
318 + 'type' => Controls_Manager::COLOR,
319 + 'default' => '#000000',
320 + 'selectors' => [
321 + '{{WRAPPER}} .king-addons-pulsing-button-button .king-addons-pulsing-button-text' => 'color: {{VALUE}}',
322 + ],
323 + ]
324 + );
325 +
326 + $this->add_control(
327 + 'kng_pulsing_button_icon_color',
328 + [
329 + 'label' => esc_html__('Icon Color', 'king-addons'),
330 + 'type' => Controls_Manager::COLOR,
331 + 'default' => '#000000',
332 + 'selectors' => [
333 + '{{WRAPPER}} .king-addons-pulsing-button-button i' => 'color: {{VALUE}}',
334 + '{{WRAPPER}} .king-addons-pulsing-button-button svg' => 'fill: {{VALUE}}',
335 + ],
336 + ]
337 + );
338 +
339 + $this->add_control(
340 + 'kng_pulsing_button_bg_color',
341 + [
342 + 'label' => esc_html__('Background Color', 'king-addons'),
343 + 'type' => Controls_Manager::COLOR,
344 + 'default' => '#ededed',
345 + 'selectors' => [
346 + '{{WRAPPER}} .king-addons-pulsing-button-button' => 'background-color: {{VALUE}}',
347 + ],
348 + ]
349 + );
350 +
351 + $this->add_group_control(
352 + Group_Control_Box_Shadow::get_type(),
353 + [
354 + 'name' => 'kng_pulsing_button_box_shadow',
355 + 'selector' => '{{WRAPPER}} .king-addons-pulsing-button-button',
356 + ]
357 + );
358 +
359 + $this->add_group_control(
360 + Group_Control_Border::get_type(),
361 + [
362 + 'name' => 'kng_pulsing_button_border',
363 + 'selector' => '{{WRAPPER}} .king-addons-pulsing-button-button',
364 + 'fields_options' => [
365 + 'border' => [
366 + 'default' => 'none',
367 + ],
368 + ],
369 + ]
370 + );
371 +
372 + $this->add_responsive_control(
373 + 'kng_pulsing_button_border_radius',
374 + [
375 + 'label' => esc_html__('Border Radius', 'king-addons'),
376 + 'type' => Controls_Manager::DIMENSIONS,
377 + 'size_units' => ['px', '%'],
378 + 'default' => [
379 + 'top' => 40,
380 + 'right' => 40,
381 + 'bottom' => 40,
382 + 'left' => 40,
383 + 'unit' => 'px',
384 + ],
385 + 'selectors' => [
386 + '{{WRAPPER}} .king-addons-pulsing-button-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
387 + ]
388 + ]
389 + );
390 +
391 + $this->end_controls_tab();
392 +
393 + $this->start_controls_tab(
394 + 'kng_pulsing_button_tab_hover',
395 + [
396 + 'label' => esc_html__('Hover', 'king-addons'),
397 + ]
398 + );
399 +
400 + $this->add_control(
401 + 'kng_pulsing_button_txt_color_hover',
402 + [
403 + 'label' => esc_html__('Text Color', 'king-addons'),
404 + 'type' => Controls_Manager::COLOR,
405 + 'selectors' => [
406 + '{{WRAPPER}} .king-addons-pulsing-button-button-wrap:hover .king-addons-pulsing-button-button .king-addons-pulsing-button-text' => 'color: {{VALUE}}',
407 + ],
408 + ]
409 + );
410 +
411 + $this->add_control(
412 + 'kng_pulsing_button_icon_color_hover',
413 + [
414 + 'label' => esc_html__('Icon Color', 'king-addons'),
415 + 'type' => Controls_Manager::COLOR,
416 + 'selectors' => [
417 + '{{WRAPPER}} .king-addons-pulsing-button-button-wrap:hover .king-addons-pulsing-button-button i' => 'color: {{VALUE}}',
418 + '{{WRAPPER}} .king-addons-pulsing-button-button-wrap:hover .king-addons-pulsing-button-button svg' => 'fill: {{VALUE}}',
419 + ],
420 + ]
421 + );
422 +
423 + $this->add_control(
424 + 'kng_pulsing_button_bg_color_hover',
425 + [
426 + 'label' => esc_html__('Background Color', 'king-addons'),
427 + 'type' => Controls_Manager::COLOR,
428 + 'selectors' => [
429 + '{{WRAPPER}} .king-addons-pulsing-button-button:hover' => 'background-color: {{VALUE}}',
430 + ],
431 + ]
432 + );
433 +
434 + $this->add_group_control(
435 + Group_Control_Box_Shadow::get_type(),
436 + [
437 + 'name' => 'kng_pulsing_button_box_shadow_hover',
438 + 'selector' => '{{WRAPPER}} .king-addons-pulsing-button-button:hover',
439 + ]
440 + );
441 +
442 + $this->add_group_control(
443 + Group_Control_Border::get_type(),
444 + [
445 + 'name' => 'kng_pulsing_button_border_hover',
446 + 'selector' => '{{WRAPPER}} .king-addons-pulsing-button-button:hover',
447 + ]
448 + );
449 +
450 + $this->add_responsive_control(
451 + 'kng_pulsing_button_border_radius_hover',
452 + [
453 + 'label' => esc_html__('Border Radius', 'king-addons'),
454 + 'type' => Controls_Manager::DIMENSIONS,
455 + 'size_units' => ['px', '%'],
456 + 'selectors' => [
457 + '{{WRAPPER}} .king-addons-pulsing-button-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
458 + ]
459 + ]
460 + );
461 +
462 + $this->end_controls_tab();
463 +
464 + $this->end_controls_tabs();
465 +
466 + $this->end_controls_section();
467 + /** END SECTION: Button ===================== */
468 + }
469 +
470 + protected function render(): void
471 + {
472 + $settings = $this->get_settings_for_display();
473 + $this_ID = $this->get_id();
474 +
475 + echo '<div class="king-addons-pulsing-button-button-wrap">';
476 +
477 + echo '<a href="' . esc_url($settings['kng_pulsing_button_link']['url']) . '"' .
478 + (($settings['kng_pulsing_button_link']['is_external']) ? ' target="_blank"' : '') .
479 + (($settings['kng_pulsing_button_link']['nofollow']) ? ' rel="nofollow"' : '') .
480 + '>';
481 +
482 + echo '<button class="king-addons-pulsing-button-button king-addons-pulsing-button-button-' .
483 + esc_attr($this_ID) . ' king-addons-pulsing-button-button-effect-' . esc_attr($settings['kng_pulsing_button_effect_type']) . (('yes' === $settings['kng_pulsing_button_icon_reverse_switcher']) ? ' king-addons-pulsing-button-icon-reverse' : ' king-addons-pulsing-button-icon-regular') . '">';
484 +
485 + if ('' !== $settings['kng_pulsing_button_text']) {
486 + echo '<span class="king-addons-pulsing-button-text">' . esc_html($settings['kng_pulsing_button_text']) . '</span>';
487 + }
488 +
489 + Icons_Manager::render_icon($settings['kng_pulsing_button_icon']);
490 +
491 + echo '</button>';
492 +
493 + echo '</a>';
494 +
495 + echo '</div>';
496 +
497 + }
498 +}