saas0801/static/equipment/mafp_serial/index.js

	const TIME_TO_FILL_FPRINT = 2000; //ms

	const $fprintPaths = document.querySelectorAll('.demo__fprint-path');
	const $endingPaths = document.querySelectorAll('.demo__ending-path');
	const fprintPathSelector = '.demo__fprint-path';
	let fprintPaths = [];  
	let lastRafCallTimestamp = 0;  
	let curFprintPathsOffset = -1;
	let fprintProgressionDirection = 1; 
	let isFprintAnimationInProgress = false;
  	let isFprintAnimationOver = false;
	let fprintTick = 0;
    let currentFprintProgresss = 0;
	function offsetAllFprintPaths(ratio) {
		fprintPaths.forEach(path => path.offset(ratio));
	}
	function fprintFrame(timestamp) {
		if (!lastRafCallTimestamp) {
			lastRafCallTimestamp = timestamp;
			window.requestAnimationFrame(fprintFrame);
			return;
		}
		let diff = timestamp - lastRafCallTimestamp;
		fprintTick = (diff / TIME_TO_FILL_FPRINT) * 2;
		lastRafCallTimestamp = timestamp;
		curFprintPathsOffset += fprintTick * fprintProgressionDirection;
		offsetAllFprintPaths(curFprintPathsOffset);
		if (curFprintPathsOffset >= -1 && curFprintPathsOffset <= 1) {
			window.requestAnimationFrame(fprintFrame);
		} 
		else if (curFprintPathsOffset > 1) {
			curFprintPathsOffset = curFprintPathsOffset - 2;
			offsetAllFprintPaths(curFprintPathsOffset);
			window.requestAnimationFrame(fprintFrame);

		}
		else if (curFprintPathsOffset < -1) {
			curFprintPathsOffset = curFprintPathsOffset + 2;
			offsetAllFprintPaths(curFprintPathsOffset);
			window.requestAnimationFrame(fprintFrame);
		}
	}

    function fprintFrameToProcess(timestamp) {
		if (!lastRafCallTimestamp) {
			lastRafCallTimestamp = timestamp;
			window.requestAnimationFrame(fprintFrameToProcess);
			return;
		}
		let diff = timestamp - lastRafCallTimestamp;
		fprintTick = (diff / TIME_TO_FILL_FPRINT) * 2;
		lastRafCallTimestamp = timestamp;
		curFprintPathsOffset += fprintTick * fprintProgressionDirection;
        offsetAllFprintPaths(curFprintPathsOffset);
		if (curFprintPathsOffset >= -1 && curFprintPathsOffset <= currentFprintProgresss - 1) {
			window.requestAnimationFrame(fprintFrameToProcess);
		} 
		else if (curFprintPathsOffset >  currentFprintProgresss - 1) {
			curFprintPathsOffset =  currentFprintProgresss - 1;
            offsetAllFprintPaths(curFprintPathsOffset);
            lastRafCallTimestamp = 0;
		}
	}
    function setFprintProgress(progress) {
        if (progress == 0) {
            curFprintPathsOffset = -1;
            offsetAllFprintPaths(curFprintPathsOffset);
        }else {
            currentFprintProgresss = progress;
            window.requestAnimationFrame(fprintFrameToProcess);
        }
    }

	class Path {
		constructor(selector, index) {
			this.index = index;
			this.querySelection = document.querySelectorAll(selector)[index];
			this.length = this.querySelection.getTotalLength();
			this.$ = $(selector).eq(index);
			this.setDasharray();
			this.removesForwards = this.$.hasClass('demo__fprint-path--removes-forwards');
		}
		
		setDasharray() {
			this.$.css('stroke-dasharray', `${this.length} ${this.length + 2}`);
			return this;
		}
		offset(ratio) {
			this.$.css('stroke-dashoffset', -this.length * ratio );
			return this;
		}
		makeVisible() {
			this.$.css('visibility', 'visible');
			return this;
		}
    }
    $(document).ready(() => {
        for (let i = 0; i < document.querySelectorAll(fprintPathSelector).length; i++) {
			fprintPaths.push(new Path(fprintPathSelector, i));
			fprintPaths[i].offset(-1).makeVisible();
		}
		//window.requestAnimationFrame(fprintFrame);
    })