dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
100 lines (99 loc) • 3.9 kB
JavaScript
import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as p } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { DdsElement as m } from "../../internal/dds-hu-element.js";
import { SizedMixin as g } from "../../internal/mixin/sizedMixin.js";
import f from "./scroll-progress.scss.js";
import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
var S = Object.defineProperty, o = (n, e, r, l) => {
for (var t = void 0, a = n.length - 1, c; a >= 0; a--)
(c = n[a]) && (t = c(e, r, t) || t);
return t && S(e, r, t), t;
};
const b = g(m), i = class i extends b {
constructor() {
super(), this.variant = "brand", this.progress = 0, this.targetElement = null, this.rafId = null, this.handleScroll = () => {
this.rafId === null && (this.rafId = requestAnimationFrame(() => {
this.calculateProgress(), this.rafId = null;
}));
}, this.boundHandleScroll = this.handleScroll.bind(this);
}
/** Maps effectiveSize from SizedMixin to scroll-progress visual size (xs, sm, md; xxs→xs, lg→md). */
get scrollProgressSize() {
return this.effectiveSize === "xxs" ? "xs" : this.effectiveSize === "lg" ? "md" : this.effectiveSize;
}
connectedCallback() {
super.connectedCallback(), this.setupScrollListener();
}
disconnectedCallback() {
super.disconnectedCallback(), this.cleanupScrollListener();
}
updated(e) {
super.updated(e), e.has("target") && (this.cleanupScrollListener(), this.setupScrollListener());
}
setupScrollListener() {
this.target ? (this.targetElement = document.querySelector(this.target), this.targetElement && this.targetElement.addEventListener("scroll", this.boundHandleScroll, {
passive: !0
})) : window.addEventListener("scroll", this.boundHandleScroll, {
passive: !0
}), this.handleScroll();
}
cleanupScrollListener() {
this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.targetElement ? (this.targetElement.removeEventListener("scroll", this.boundHandleScroll), this.targetElement = null) : window.removeEventListener("scroll", this.boundHandleScroll);
}
calculateProgress() {
let e, r, l;
this.target && this.targetElement ? (e = this.targetElement.scrollTop, r = this.targetElement.scrollHeight, l = this.targetElement.clientHeight) : (e = window.scrollY, r = document.documentElement.scrollHeight, l = window.innerHeight);
const t = r - l;
if (t <= 0) {
this.progress = 0;
return;
}
this.progress = Math.min(
100,
Math.max(0, e / t * 100)
);
}
render() {
var e;
return p`
<div
part="base"
class=${d(
"scroll-progress",
`scroll-progress--${this.variant}`,
`scroll-progress--${this.scrollProgressSize}`
)}
role="progressbar"
aria-valuenow=${Math.round(this.progress)}
aria-valuemin="0"
aria-valuemax="100"
aria-label=${(e = this.ariaLabel) != null ? e : "Scroll progress"}>
<div part="track" class="scroll-progress__track">
<div
part="fill"
class="scroll-progress__fill"
style="width: ${this.progress}%"></div>
</div>
</div>
`;
}
};
i.tagName = "dap-ds-scroll-progress", i.styles = v(f);
let s = i;
o([
h({ type: String, reflect: !0 })
], s.prototype, "target");
o([
h({ type: String, reflect: !0 })
], s.prototype, "variant");
o([
u()
], s.prototype, "progress");
export {
s as default
};
//# sourceMappingURL=scroll-progress.component.js.map