golden hour

/home/godaofbq/hardchambers.com/wp-content/plugins/essential-blocks/src/blocks/progress-bar/src

File/Folder	Size	Actions
.htaccess	127 B
attributes.js	3.93 KB
constants	-
deprecated.js	22.56 KB
edit.js	20.74 KB
example.js	84 B
frontend.js	4.57 KB
icon.js	1.03 KB
icon.svg	1008 B
index.js	718 B
inspector.js	31.26 KB
save.js	11.68 KB
style.css	5.84 KB
style.js	11.89 KB
style.scss	7.85 KB

Edit: frontend.js

/**
 * WordPress dependencies
 */
import domReady from '@wordpress/dom-ready';

// Animates the progress
const animate = function ({ duration, draw, timing }) {
    let start = performance.now();

requestAnimationFrame(function animate(time) {
        let timeFraction = (time - start) / duration;
        if (timeFraction > 1) timeFraction = 1;

let progress = timing(timeFraction);

draw(progress);

if (timeFraction < 1) {
            requestAnimationFrame(animate);
        }
    });
};

// Initialize after DOM is ready
domReady(function () {
    var progressbars = document.querySelectorAll(".eb-progressbar");
    if (!progressbars) return;

// Function to start animation when in view
    function startProgressbarAnimation(progressbar) {
        var layout = progressbar.getAttribute("data-layout");
        var count = progressbar.getAttribute("data-count");
        var duration = progressbar.getAttribute("data-duration");

animate({
            duration: duration,
            timing: function (timeFraction) {
                return timeFraction;
            },
            draw: function (progress) {
                var counter = Math.floor(progress * 100);

if (counter <= count) {
                    if (layout === "line" || layout === "line_rainbow") {
                        progressbar.querySelector(
                            ".eb-progressbar-line-fill"
                        ).style.width = counter + "%";
                    } else if (layout === "circle" || layout === "circle_fill") {
                        var rotate = counter * 3.6;
                        progressbar.querySelector(
                            ".eb-progressbar-circle-half-left"
                        ).style.transform = "rotate(" + rotate + "deg)";
                        if (rotate > 180) {
                            progressbar.querySelector(
                                ".eb-progressbar-circle-pie"
                            ).style.clipPath = "inset(0)";
                            progressbar.querySelector(
                                ".eb-progressbar-circle-half-right"
                            ).style.visibility = "visible";
                        }
                    } else if (
                        layout === "half_circle" ||
                        layout === "half_circle_fill"
                    ) {
                        var rotate = counter * 1.8;
                        progressbar.querySelector(
                            ".eb-progressbar-circle-half"
                        ).style.transform = "rotate(" + rotate + "deg)";
                    } else if (layout === "box") {
                        progressbar.querySelector(
                            ".eb-progressbar-box-fill"
                        ).style.height = counter + "%";
                    }
                }
            },
        });
    }
    // Function to start animation when in view
    function startProgressbarAnimationCount(progressbar) {
        const duration = progressbar.getAttribute("data-duration");
        const absoluteValue = progressbar.getAttribute("data-absolute");
        const count = progressbar.getAttribute("data-count");
        const dataType = progressbar.getAttribute("data-type");
        const newCount = dataType === 'absolute' ? absoluteValue : count;

animate({
            duration: duration,
            timing: function (timeFraction) {
                return timeFraction;
            },
            draw: function (progress) {
                var counter2 = Math.floor(progress * newCount);

if (counter2 <= newCount) {
                    const range = progressbar.querySelector(".eb-progressbar-count");
                    if (range) {
                        range.innerText = counter2;
                    }
                }
            },
        });
    }

// IntersectionObserver setup
    const observerOptions = {
        threshold: 0.25,
    };

// Observe each progress bar element
    progressbars.forEach(function (progressbar) {
        observer.observe(progressbar);
    });
});