stylescape
Version:
Stylescape is a visual identity framework developed by Scape Agency.
89 lines • 3.21 kB
JavaScript
export class ProgressBarManager {
constructor(selectorOrElement, options = {}) {
this.element =
typeof selectorOrElement === "string"
? document.querySelector(selectorOrElement)
: selectorOrElement;
this.options = {
value: options.value ?? 0,
min: options.min ?? 0,
max: options.max ?? 100,
animate: options.animate !== false,
animationDuration: options.animationDuration ?? 300,
onChange: options.onChange ?? (() => { }),
onComplete: options.onComplete ?? (() => { }),
property: options.property ?? "width",
};
this.currentValue = this.options.value;
this.bar =
this.element?.querySelector("[class*='bar']") ||
this.element;
if (!this.element) {
console.warn("[Stylescape] ProgressBarManager element not found");
return;
}
this.init();
}
setProgress(value) {
const clamped = Math.min(Math.max(value, this.options.min), this.options.max);
const percentage = this.calculatePercentage(clamped);
this.currentValue = clamped;
this.updateDisplay(percentage);
this.options.onChange(clamped, percentage);
if (percentage >= 100) {
this.options.onComplete();
}
}
getProgress() {
return this.currentValue;
}
getPercentage() {
return this.calculatePercentage(this.currentValue);
}
increment(amount = 1) {
this.setProgress(this.currentValue + amount);
}
decrement(amount = 1) {
this.setProgress(this.currentValue - amount);
}
reset() {
this.setProgress(this.options.min);
}
complete() {
this.setProgress(this.options.max);
}
setIndeterminate(indeterminate) {
if (!this.element)
return;
this.element.classList.toggle("progress--indeterminate", indeterminate);
this.element.removeAttribute("aria-valuenow");
}
destroy() {
this.element = null;
this.bar = null;
}
init() {
if (!this.element)
return;
this.element.setAttribute("role", "progressbar");
this.element.setAttribute("aria-valuemin", String(this.options.min));
this.element.setAttribute("aria-valuemax", String(this.options.max));
if (this.bar && this.options.animate) {
this.bar.style.transition = `${this.options.property} ${this.options.animationDuration}ms ease`;
}
this.setProgress(this.currentValue);
}
calculatePercentage(value) {
const range = this.options.max - this.options.min;
return ((value - this.options.min) / range) * 100;
}
updateDisplay(percentage) {
if (!this.bar || !this.element)
return;
this.bar.style[this.options.property] = `${percentage}%`;
this.element.setAttribute("aria-valuenow", String(this.currentValue));
this.element.setAttribute("data-progress", String(Math.round(percentage)));
}
}
export default ProgressBarManager;
//# sourceMappingURL=ProgressBarManager.js.map