PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.49
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.49
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 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Pulsing_Button / Pulsing_Button.php

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

498 lines 18.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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 }