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

king-addons / includes / widgets / Progress_Bar / script.js

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

133 lines 5.5 KB

Raw Download Zip

1	"use strict";
2	(function ($) {
3	$(window).on('elementor/frontend/init', function () {
4	let ProgressBarHandler = elementorModules.frontend.handlers.Base.extend({
5	onInit: function onInit() {
6	this.initProgressBar();
7	},
8
9	initProgressBar: function initProgressBar() {
10	let $scope = this.$element;
11
12	// noinspection JSUnresolvedReference
13	let $progressBar = $scope.find('.king-addons-progress-bar'),
14	prBarCircle = $scope.find('.king-addons-prbar-circle'),
15	$prBarCirclePrline = $scope.find('.king-addons-prbar-circle-prline'),
16	prBarHrLine = $progressBar.find('.king-addons-prbar-hr-line-inner'),
17	prBarVrLine = $progressBar.find('.king-addons-prbar-vr-line-inner'),
18	prBarOptions = $progressBar.data('options'),
19	prBarCircleOptions = prBarCircle.data('circle-options'),
20	prBarCounter = $progressBar.find('.king-addons-prbar-counter-value'),
21	prBarCounterValue = prBarOptions.counterValue,
22	prBarCounterValuePercent = prBarOptions.counterValuePercent,
23	prBarAnimDuration = prBarOptions.animDuration,
24	prBarAnimDelay = prBarOptions.animDelay,
25	prBarLoopDelay = +prBarOptions.loopDelay,
26	numeratorData = {
27	toValue: prBarCounterValue,
28	duration: prBarAnimDuration,
29	};
30
31	// noinspection JSUnresolvedReference
32	if ('yes' === prBarOptions.counterSeparator) {
33	numeratorData.delimiter = ',';
34	}
35
36	function isInViewport($selector) {
37	if ($selector.length) {
38	let elementTop = $selector.offset().top,
39	elementBottom = elementTop + $selector.outerHeight(),
40	viewportTop = $(window).scrollTop(),
41	viewportBottom = viewportTop + $(window).height();
42
43	if (elementTop > $(window).height()) {
44	elementTop += 50;
45	}
46
47	return elementBottom > viewportTop && elementTop < viewportBottom;
48	}
49	}
50
51	function progressBar() {
52
53	if (isInViewport(prBarVrLine)) {
54	prBarVrLine.css({
55	'height': prBarCounterValuePercent + '%'
56	});
57	}
58
59	if (isInViewport(prBarHrLine)) {
60	prBarHrLine.css({
61	'width': prBarCounterValuePercent + '%'
62	});
63	}
64
65	if (isInViewport(prBarCircle)) {
66	// noinspection JSUnresolvedReference
67	let circleDashOffset = prBarCircleOptions.circleOffset;
68
69	$prBarCirclePrline.css({
70	'stroke-dashoffset': circleDashOffset
71	});
72	}
73
74	if (isInViewport(prBarVrLine) \|\| isInViewport(prBarHrLine) \|\| isInViewport(prBarCircle)) {
75	setTimeout(function () {
76	prBarCounter.numerator(numeratorData);
77	}, prBarAnimDelay);
78	}
79
80	}
81
82	progressBar();
83
84	if (prBarOptions.loop === 'yes') {
85	setInterval(function () {
86
87	if (isInViewport(prBarVrLine)) {
88	prBarVrLine.css({
89	'height': 0 + '%'
90	});
91	}
92
93	if (isInViewport(prBarHrLine)) {
94	prBarHrLine.css({
95	'width': 0 + '%'
96	});
97	}
98
99	if (isInViewport(prBarCircle)) {
100	$prBarCirclePrline.css({
101	'stroke-dashoffset': $prBarCirclePrline.css('stroke-dasharray')
102	});
103	}
104
105	if (isInViewport(prBarVrLine) \|\| isInViewport(prBarHrLine) \|\| isInViewport(prBarCircle)) {
106	setTimeout(function () {
107	prBarCounter.numerator({
108	toValue: 0,
109	duration: prBarAnimDuration,
110	});
111	}, prBarAnimDelay);
112	}
113
114	setTimeout(function () {
115	progressBar();
116	}, prBarAnimDuration + prBarAnimDelay);
117	}, (prBarAnimDuration + prBarAnimDelay) * prBarLoopDelay);
118	}
119
120	$(window).on('scroll', function () {
121	progressBar();
122	});
123	}
124	});
125
126	// Initialize the handler when the specific widget is ready in Elementor
127	elementorFrontend.hooks.addAction('frontend/element_ready/king-addons-progress-bar.default', function ($scope) {
128	elementorFrontend.elementsHandler.addHandler(ProgressBarHandler, {
129	$element: $scope
130	});
131	});
132	});
133	})(jQuery);