FileMaster

Edit File: progress-bar.js

(function ($) {
  window["cozyBlockProgressBarInit"] = (e) => {
    const n = e.replace(/-/gi, "_");
    const blockOptions = window[`cozyProgressBar_${n}`];
    const progressBarClass = `#cozyBlock_${n}`;
    const cozyProgressBar = document.querySelector(progressBarClass);

let progress = cozyProgressBar.querySelector(".progress");

if (progress === null) {
      const prevSiblingDiv = cozyProgressBar.previousElementSibling;
      progress = prevSiblingDiv.querySelector(".progress");
    }

const progressBar = cozyProgressBar.querySelector(".cozy-progress-bar");

let animationTriggered = false;

function isElementInViewport(el) {
      var rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <=
          (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <=
          (window.innerWidth || document.documentElement.clientWidth)
      );
    }

function addCounterAnimation() {
      if (
        blockOptions.layout === "default" &&
        !animationTriggered &&
        isElementInViewport(cozyProgressBar)
      ) {
        progressBar.style.width = `${blockOptions.progress}%`;
        progressBar.style.height = ``;
      }

if (
        blockOptions.layout === "vertical" &&
        !animationTriggered &&
        isElementInViewport(cozyProgressBar)
      ) {
        progressBar.style.height = `${blockOptions.progress}%`;
        progressBar.style.width = ``;
      }

if (
        blockOptions.layout === "circle" &&
        !animationTriggered &&
        isElementInViewport(cozyProgressBar)
      ) {
        const circleProgressBarStyles = [
          {
            property: "--circleProgressPercentage",
            value: blockOptions.progress + "%",
          },
        ];

function animateProgressBar() {
          let currentProgress = 0;

currentProgress += 1; // You can adjust the increment value
              requestAnimationFrame(updateProgressBar);
            }
          }

updateProgressBar();
        }

// Call the function to start the animation
        animateProgressBar();
      }

if (
        progress &&
        !animationTriggered &&
        isElementInViewport(cozyProgressBar)
      ) {
        animationTriggered = true;

const time = 500;

const endTarget = blockOptions.progress
          ? parseFloat(blockOptions.progress).toFixed(1)
          : 0;

let cleanStartValue = 0;

const increaseBy = ((endTarget - cleanStartValue) / time) * 53;
        let timeoutIdInside;

return () => {
          clearTimeout(timeoutId);
          clearTimeout(timeoutIdInside);
        };
      }
    }
    addCounterAnimation();

window.addEventListener("scroll", addCounterAnimation);
  };
})(jQuery);

Back