36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
//@ts-check
|
|
|
|
import { percentFromProgress } from "./percentFromProgress.mjs";
|
|
|
|
/**
|
|
* Returns a function that can update an HTML Element.
|
|
* The function, when called with `received` and `total`, set 3 custom css vars
|
|
* on the element, which can be used in CSS to reflect the state of the object
|
|
* @param {HTMLElement} element
|
|
*/
|
|
export const trackProgressWithCSS = (element, prefix = "load-") => {
|
|
const keyFract = `--${prefix}fraction`;
|
|
const keyProgress = `--${prefix}progress`;
|
|
const keyProgressStr = `--${prefix}progress-str`;
|
|
const classComplete = `${prefix}complete`;
|
|
/**
|
|
* @param {{received: number, total: number}} progress
|
|
*/
|
|
const setProgress = ({ received, total }) => {
|
|
const final = received == total;
|
|
const fraction = final ? 1 : received / total;
|
|
const percent = final ? "100%" : percentFromProgress(fraction, true);
|
|
console.log(keyProgress, percent);
|
|
element.style.setProperty(keyFract, `${fraction}`);
|
|
element.style.setProperty(keyProgress, percent);
|
|
element.style.setProperty(keyProgressStr, `"${percent}"`);
|
|
if (final) {
|
|
console.log("all done!", element, classComplete)
|
|
requestAnimationFrame(() => element.classList.add(classComplete));
|
|
}
|
|
};
|
|
return setProgress;
|
|
};
|
|
|
|
export default trackProgressWithCSS;
|