← All changes | includes/widgets/Progress_Bar/script.js +133 -0 51.1.2 → 51.1.83 View file →

		@@ -1,0 +1,133 @@
	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);