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/features/Particles_Background/preview-handler.js +633 -0 51.1.2 → 51.1.83 View file →
@@ -1,0 +1,633 @@
1 +// noinspection SpellCheckingInspection
2 +
3 +"use strict";
4 +(function ($) {
5 + $(window).on('elementor/frontend/init', function () {
6 + let KngParticlesBackgroundHandler = elementorModules.frontend.handlers.Base.extend({
7 + onInit: function onInit() {
8 + if (this.$element.hasClass('kng-particles-bg-yes')) {
9 + this.applyKngParticlesBackground();
10 + }
11 + },
12 + getReadySettings: function getReadySettings() {
13 + let type = this.getElementSettings('kng_particles_bg_type');
14 + let color = this.getElementSettings('kng_particles_bg_color');
15 + let z_index = this.getElementSettings('kng_particles_bg_z_index');
16 + let config, speed, shape_type, move_direction, number, size;
17 + switch (type) {
18 + case 'default':
19 + speed = this.getElementSettings('kng_particles_bg_anim_speed_default');
20 + shape_type = this.getElementSettings('kng_particles_bg_shape_type');
21 + move_direction = this.getElementSettings('kng_particles_bg_move_direction');
22 + number = this.getElementSettings('kng_particles_bg_number_default');
23 + size = this.getElementSettings('kng_particles_bg_size_default');
24 + config = this.getParticlesJSON(color, speed, shape_type, move_direction, number, size).default;
25 + break;
26 + case 'nasa':
27 + speed = this.getElementSettings('kng_particles_bg_anim_speed_nasa');
28 + shape_type = this.getElementSettings('kng_particles_bg_shape_type');
29 + move_direction = this.getElementSettings('kng_particles_bg_move_direction');
30 + number = this.getElementSettings('kng_particles_bg_number_nasa');
31 + size = this.getElementSettings('kng_particles_bg_size_nasa');
32 + config = this.getParticlesJSON(color, speed, shape_type, move_direction, number, size).nasa;
33 + break;
34 + case 'bubble':
35 + speed = this.getElementSettings('kng_particles_bg_anim_speed_bubble');
36 + shape_type = this.getElementSettings('kng_particles_bg_shape_type_bubble');
37 + move_direction = this.getElementSettings('kng_particles_bg_move_direction');
38 + number = this.getElementSettings('kng_particles_bg_number_bubble');
39 + size = this.getElementSettings('kng_particles_bg_size_bubble');
40 + config = this.getParticlesJSON(color, speed, shape_type, move_direction, number, size).bubble;
41 + break;
42 + case 'snow':
43 + speed = this.getElementSettings('kng_particles_bg_anim_speed_snow');
44 + shape_type = this.getElementSettings('kng_particles_bg_shape_type');
45 + move_direction = this.getElementSettings('kng_particles_bg_move_direction_snow');
46 + number = this.getElementSettings('kng_particles_bg_number_snow');
47 + size = this.getElementSettings('kng_particles_bg_size_snow');
48 + config = this.getParticlesJSON(color, speed, shape_type, move_direction, number, size).snow;
49 + break;
50 + case 'nyan_cat':
51 + speed = this.getElementSettings('kng_particles_bg_anim_speed_nyan_cat');
52 + shape_type = this.getElementSettings('kng_particles_bg_shape_type_nyan_cat');
53 + move_direction = this.getElementSettings('kng_particles_bg_move_direction_nyan_cat');
54 + number = this.getElementSettings('kng_particles_bg_number_nyan_cat');
55 + size = this.getElementSettings('kng_particles_bg_size_nyan_cat');
56 + config = this.getParticlesJSON(color, speed, shape_type, move_direction, number, size).nyan_cat;
57 + break;
58 + case 'custom_code':
59 + config = this.getElementSettings('kng_particles_bg_custom_code');
60 + break;
61 + }
62 + return [type, config, z_index];
63 + },
64 + onElementChange: function onElementChange() {
65 + if (this.$element.hasClass('kng-particles-bg-yes')) {
66 + if (!this.$element.hasClass('kng-particles-bg-applied')) {
67 + this.applyKngParticlesBackground();
68 + }
69 + } else if (this.$element.hasClass('kng-particles-bg-applied')) {
70 + if (!this.$element.hasClass('kng-particles-bg-yes')) {
71 + this.$element.removeClass('kng-particles-bg-applied');
72 + let element_ID = this.$element.data('id');
73 + $('.king-addons-particles-js-' + element_ID).remove();
74 + $('#king-addons-particles-container-' + element_ID).remove();
75 + }
76 + }
77 + },
78 + applyKngParticlesBackground: function applyKngParticlesBackground() {
79 + let [type, config, z_index] = this.getReadySettings();
80 + let element_ID = this.$element.data('id');
81 + let config_code;
82 +
83 + if (type !== 'custom_code') {
84 + config_code = JSON.stringify(config);
85 + } else {
86 + config_code = config;
87 + }
88 +
89 + this.$element.addClass('kng-particles-bg-applied');
90 + $('.king-addons-particles-js-' + element_ID).remove();
91 + $('#king-addons-particles-container-' + element_ID + ' .particles-js-canvas-el').remove();
92 + this.$element.prepend('<div id="king-addons-particles-container-' + element_ID + '" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:' + z_index + ';"></div>');
93 + this.$element.after('<script class="king-addons-particles-js-' + element_ID + '">particlesJS("king-addons-particles-container-' + element_ID + '", ' + config_code + ');</script>');
94 + },
95 + getParticlesJSON: function getParticlesJSON(color, speed, shape_type, move_direction, number, size) {
96 + return {
97 + default: {
98 + "particles": {
99 + "number": {
100 + "value": number,
101 + "density": {
102 + "enable": true,
103 + "value_area": 800
104 + }
105 + },
106 + "color": {
107 + "value": color
108 + },
109 + "shape": {
110 + "type": shape_type,
111 + "stroke": {
112 + "width": 0,
113 + "color": "#000000"
114 + },
115 + "polygon": {
116 + "nb_sides": 5
117 + }
118 + },
119 + "opacity": {
120 + "value": 0.5,
121 + "random": false,
122 + "anim": {
123 + "enable": false,
124 + "speed": 1,
125 + "opacity_min": 0.1,
126 + "sync": false
127 + }
128 + },
129 + "size": {
130 + "value": size,
131 + "random": true,
132 + "anim": {
133 + "enable": false,
134 + "speed": 40,
135 + "size_min": 0.1,
136 + "sync": false
137 + }
138 + },
139 + "line_linked": {
140 + "enable": true,
141 + "distance": 150,
142 + "color": color,
143 + "opacity": 0.4,
144 + "width": 1
145 + },
146 + "move": {
147 + "enable": true,
148 + "speed": speed,
149 + "direction": move_direction,
150 + "random": false,
151 + "straight": false,
152 + "out_mode": "out",
153 + "bounce": false,
154 + "attract": {
155 + "enable": false,
156 + "rotateX": 600,
157 + "rotateY": 1200
158 + }
159 + }
160 + },
161 + "interactivity": {
162 + "detect_on": "canvas",
163 + "events": {
164 + "onhover": {
165 + "enable": false,
166 + "mode": "repulse"
167 + },
168 + "onclick": {
169 + "enable": false,
170 + "mode": "push"
171 + },
172 + "resize": true
173 + },
174 + "modes": {
175 + "grab": {
176 + "distance": 400,
177 + "line_linked": {
178 + "opacity": 1
179 + }
180 + },
181 + "bubble": {
182 + "distance": 400,
183 + "size": 40,
184 + "duration": 2,
185 + "opacity": 8,
186 + "speed": 3
187 + },
188 + "repulse": {
189 + "distance": 200,
190 + "duration": 0.4
191 + },
192 + "push": {
193 + "particles_nb": 4
194 + },
195 + "remove": {
196 + "particles_nb": 2
197 + }
198 + }
199 + },
200 + "retina_detect": true
201 + },
202 + nasa: {
203 + "particles": {
204 + "number": {
205 + "value": number,
206 + "density": {
207 + "enable": true,
208 + "value_area": 800
209 + }
210 + },
211 + "color": {
212 + "value": color
213 + },
214 + "shape": {
215 + "type": shape_type,
216 + "stroke": {
217 + "width": 0,
218 + "color": "#000000"
219 + },
220 + "polygon": {
221 + "nb_sides": 5
222 + }
223 + },
224 + "opacity": {
225 + "value": 1,
226 + "random": true,
227 + "anim": {
228 + "enable": true,
229 + "speed": 1,
230 + "opacity_min": 0,
231 + "sync": false
232 + }
233 + },
234 + "size": {
235 + "value": size,
236 + "random": true,
237 + "anim": {
238 + "enable": false,
239 + "speed": 4,
240 + "size_min": 0.3,
241 + "sync": false
242 + }
243 + },
244 + "line_linked": {
245 + "enable": false,
246 + "distance": 150,
247 + "color": "#ffffff",
248 + "opacity": 0.4,
249 + "width": 1
250 + },
251 + "move": {
252 + "enable": true,
253 + "speed": speed,
254 + "direction": move_direction,
255 + "random": true,
256 + "straight": false,
257 + "out_mode": "out",
258 + "bounce": false,
259 + "attract": {
260 + "enable": false,
261 + "rotateX": 600,
262 + "rotateY": 600
263 + }
264 + }
265 + },
266 + "interactivity": {
267 + "detect_on": "canvas",
268 + "events": {
269 + "onhover": {
270 + "enable": false,
271 + "mode": "bubble"
272 + },
273 + "onclick": {
274 + "enable": false,
275 + "mode": "repulse"
276 + },
277 + "resize": true
278 + },
279 + "modes": {
280 + "grab": {
281 + "distance": 400,
282 + "line_linked": {
283 + "opacity": 1
284 + }
285 + },
286 + "bubble": {
287 + "distance": 250,
288 + "size": 0,
289 + "duration": 2,
290 + "opacity": 0,
291 + "speed": 3
292 + },
293 + "repulse": {
294 + "distance": 400,
295 + "duration": 0.4
296 + },
297 + "push": {
298 + "particles_nb": 4
299 + },
300 + "remove": {
301 + "particles_nb": 2
302 + }
303 + }
304 + },
305 + "retina_detect": true
306 + },
307 + bubble: {
308 + "particles": {
309 + "number": {
310 + "value": number,
311 + "density": {
312 + "enable": true,
313 + "value_area": 800
314 + }
315 + },
316 + "color": {
317 + "value": color
318 + },
319 + "shape": {
320 + "type": shape_type,
321 + "stroke": {
322 + "width": 0,
323 + "color": "#000"
324 + },
325 + "polygon": {
326 + "nb_sides": 6
327 + }
328 + },
329 + "opacity": {
330 + "value": 0.3,
331 + "random": true,
332 + "anim": {
333 + "enable": false,
334 + "speed": 1,
335 + "opacity_min": 0.1,
336 + "sync": false
337 + }
338 + },
339 + "size": {
340 + "value": size,
341 + "random": false,
342 + "anim": {
343 + "enable": true,
344 + "speed": 10,
345 + "size_min": 40,
346 + "sync": false
347 + }
348 + },
349 + "line_linked": {
350 + "enable": false,
351 + "distance": 200,
352 + "color": "#ffffff",
353 + "opacity": 1,
354 + "width": 2
355 + },
356 + "move": {
357 + "enable": true,
358 + "speed": speed,
359 + "direction": move_direction,
360 + "random": false,
361 + "straight": false,
362 + "out_mode": "out",
363 + "bounce": false,
364 + "attract": {
365 + "enable": false,
366 + "rotateX": 600,
367 + "rotateY": 1200
368 + }
369 + }
370 + },
371 + "interactivity": {
372 + "detect_on": "canvas",
373 + "events": {
374 + "onhover": {
375 + "enable": false,
376 + "mode": "grab"
377 + },
378 + "onclick": {
379 + "enable": false,
380 + "mode": "push"
381 + },
382 + "resize": true
383 + },
384 + "modes": {
385 + "grab": {
386 + "distance": 400,
387 + "line_linked": {
388 + "opacity": 1
389 + }
390 + },
391 + "bubble": {
392 + "distance": 400,
393 + "size": 40,
394 + "duration": 2,
395 + "opacity": 8,
396 + "speed": 3
397 + },
398 + "repulse": {
399 + "distance": 200,
400 + "duration": 0.4
401 + },
402 + "push": {
403 + "particles_nb": 4
404 + },
405 + "remove": {
406 + "particles_nb": 2
407 + }
408 + }
409 + },
410 + "retina_detect": true
411 + },
412 + snow: {
413 + "particles": {
414 + "number": {
415 + "value": number,
416 + "density": {
417 + "enable": true,
418 + "value_area": 800
419 + }
420 + },
421 + "color": {
422 + "value": color
423 + },
424 + "shape": {
425 + "type": shape_type,
426 + "stroke": {
427 + "width": 0,
428 + "color": "#000000"
429 + },
430 + "polygon": {
431 + "nb_sides": 5
432 + }
433 + },
434 + "opacity": {
435 + "value": 0.5,
436 + "random": true,
437 + "anim": {
438 + "enable": false,
439 + "speed": 1,
440 + "opacity_min": 0.1,
441 + "sync": false
442 + }
443 + },
444 + "size": {
445 + "value": size,
446 + "random": true,
447 + "anim": {
448 + "enable": false,
449 + "speed": 40,
450 + "size_min": 0.1,
451 + "sync": false
452 + }
453 + },
454 + "line_linked": {
455 + "enable": false,
456 + "distance": 500,
457 + "color": "#ffffff",
458 + "opacity": 0.4,
459 + "width": 2
460 + },
461 + "move": {
462 + "enable": true,
463 + "speed": speed,
464 + "direction": move_direction,
465 + "random": false,
466 + "straight": false,
467 + "out_mode": "out",
468 + "bounce": false,
469 + "attract": {
470 + "enable": false,
471 + "rotateX": 600,
472 + "rotateY": 1200
473 + }
474 + }
475 + },
476 + "interactivity": {
477 + "detect_on": "canvas",
478 + "events": {
479 + "onhover": {
480 + "enable": false,
481 + "mode": "bubble"
482 + },
483 + "onclick": {
484 + "enable": false,
485 + "mode": "repulse"
486 + },
487 + "resize": true
488 + },
489 + "modes": {
490 + "grab": {
491 + "distance": 400,
492 + "line_linked": {
493 + "opacity": 0.5
494 + }
495 + },
496 + "bubble": {
497 + "distance": 400,
498 + "size": 4,
499 + "duration": 0.3,
500 + "opacity": 1,
501 + "speed": 3
502 + },
503 + "repulse": {
504 + "distance": 200,
505 + "duration": 0.4
506 + },
507 + "push": {
508 + "particles_nb": 4
509 + },
510 + "remove": {
511 + "particles_nb": 2
512 + }
513 + }
514 + },
515 + "retina_detect": true
516 + },
517 + nyan_cat: {
518 + "particles": {
519 + "number": {
520 + "value": number,
521 + "density": {
522 + "enable": false,
523 + "value_area": 800
524 + }
525 + },
526 + "color": {
527 + "value": color
528 + },
529 + "shape": {
530 + "type": shape_type,
531 + "stroke": {
532 + "width": 0,
533 + "color": "#000000"
534 + },
535 + "polygon": {
536 + "nb_sides": 5
537 + }
538 + },
539 + "opacity": {
540 + "value": 0.5,
541 + "random": false,
542 + "anim": {
543 + "enable": false,
544 + "speed": 1,
545 + "opacity_min": 0.1,
546 + "sync": false
547 + }
548 + },
549 + "size": {
550 + "value": size,
551 + "random": true,
552 + "anim": {
553 + "enable": false,
554 + "speed": 40,
555 + "size_min": 0.1,
556 + "sync": false
557 + }
558 + },
559 + "line_linked": {
560 + "enable": false,
561 + "distance": 150,
562 + "color": "#ffffff",
563 + "opacity": 0.4,
564 + "width": 1
565 + },
566 + "move": {
567 + "enable": true,
568 + "speed": speed,
569 + "direction": move_direction,
570 + "random": false,
571 + "straight": true,
572 + "out_mode": "out",
573 + "bounce": false,
574 + "attract": {
575 + "enable": false,
576 + "rotateX": 600,
577 + "rotateY": 1200
578 + }
579 + }
580 + },
581 + "interactivity": {
582 + "detect_on": "canvas",
583 + "events": {
584 + "onhover": {
585 + "enable": false,
586 + "mode": "grab"
587 + },
588 + "onclick": {
589 + "enable": false,
590 + "mode": "repulse"
591 + },
592 + "resize": true
593 + },
594 + "modes": {
595 + "grab": {
596 + "distance": 200,
597 + "line_linked": {
598 + "opacity": 1
599 + }
600 + },
601 + "bubble": {
602 + "distance": 400,
603 + "size": 40,
604 + "duration": 2,
605 + "opacity": 8,
606 + "speed": 3
607 + },
608 + "repulse": {
609 + "distance": 200,
610 + "duration": 0.4
611 + },
612 + "push": {
613 + "particles_nb": 4
614 + },
615 + "remove": {
616 + "particles_nb": 2
617 + }
618 + }
619 + },
620 + "retina_detect": true
621 + }
622 + };
623 + }
624 + });
625 +
626 + elementorFrontend.hooks.addAction('frontend/element_ready/global', function ($scope) {
627 + elementorFrontend.elementsHandler.addHandler(KngParticlesBackgroundHandler, {
628 + $element: $scope
629 + });
630 + });
631 +
632 + });
633 +})(jQuery);