dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
233 lines (232 loc) • 9 kB
JavaScript
var $ = Object.defineProperty, L = Object.defineProperties;
var H = Object.getOwnPropertyDescriptors;
var b = Object.getOwnPropertySymbols, C = Object.getPrototypeOf, R = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable, T = Reflect.get;
var _ = (n, e, t) => e in n ? $(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, w = (n, e) => {
for (var t in e || (e = {}))
R.call(e, t) && _(n, t, e[t]);
if (b)
for (var t of b(e))
M.call(e, t) && _(n, t, e[t]);
return n;
}, A = (n, e) => L(n, H(e));
var f = (n, e, t) => T(C(n), t, e);
var u = (n, e, t) => new Promise((s, i) => {
var r = (h) => {
try {
o(t.next(h));
} catch (l) {
i(l);
}
}, a = (h) => {
try {
o(t.throw(h));
} catch (l) {
i(l);
}
}, o = (h) => h.done ? s(h.value) : Promise.resolve(h.value).then(r, a);
o((t = t.apply(n, e)).next());
});
import { clsx as I } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { anchorClass as y } from "../../common/const.js";
import { DdsElement as k } from "../../internal/dds-hu-element.js";
import { SizedMixin as E } from "../../internal/mixin/sizedMixin.js";
import "../../localization/localization.js";
import S from "./toc.scss.js";
import { t as x } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as j } from "../../node_modules/@lit/reactive-element/css-tag.js";
var N = Object.defineProperty, p = (n, e, t, s) => {
for (var i = void 0, r = n.length - 1, a; r >= 0; r--)
(a = n[r]) && (i = a(e, t, i) || i);
return i && N(e, t, i), i;
};
const m = class m extends E(k) {
constructor() {
super(), this.root = "", this.rootMargin = "0px 0px -80% 0px", this.lastAnchorRootMargin = "0px 0px -50% 0px", this.threshold = [0, 0.1, 0.25, 0.5, 0.75, 1], this.minHeadingLevel = 2, this.maxHeadingLevel = 3, this.noIndent = !1, this._selectors = [], this._intersectionData = /* @__PURE__ */ new Map(), this._debounceTimer = null, this.onScroll = () => {
if (this._anchors && this._anchors.length > 0 && Math.round(window.scrollY + window.innerHeight) === document.body.scrollHeight) {
const e = this._anchors[this._anchors.length - 1], t = this.shadowRoot.querySelector(`[href="#${e.id}"`);
t && this.setActiveAnchor(t, t);
}
}, this.getHeaders = () => u(this, null, function* () {
const e = [];
return yield this._anchors.forEach((t, s) => u(this, null, function* () {
var o, h, l;
yield t.updateComplete;
const i = t.getAttribute("data-text") || ((o = t.innerText) == null ? void 0 : o.trim()) || ((h = t.textContent) == null ? void 0 : h.trim()) || "", r = t.id || ((l = t.innerText) == null ? void 0 : l.toLowerCase().split(" ").join("-")) || i.toLowerCase().split(" ").join("-");
if (!t.id && r) {
let v = 0;
for (this._anchors.some((g) => g.id === r) && v++; this._anchors.some((g) => g.id === `${r}-${v}`); )
v++;
v === 0 ? t.setAttribute("id", r) : t.setAttribute("id", `${r}-${v}`);
}
let a = this._selectors.indexOf(
`${t.tagName.toLowerCase()}.${y}`
);
a === -1 && (a = this._selectors.indexOf(
`dap-ds-typography[variant=${t.getAttribute("variant")}][anchor]`
)), e[s] = {
id: r,
text: i,
level: Math.floor(a / 2)
};
})), e;
}), this._handleIntersect = (e) => {
e.forEach((t) => {
this._intersectionData.set(t.target, {
isIntersecting: t.isIntersecting,
intersectionRatio: t.intersectionRatio,
boundingRect: t.boundingClientRect
});
}), this._debounceTimer && clearTimeout(this._debounceTimer), this._debounceTimer = window.setTimeout(() => {
this._updateActiveAnchor();
}, 50);
}, this._updateActiveAnchor = () => {
const e = window.innerHeight / 2;
let t = null, s = -1 / 0;
if (this._intersectionData.forEach((i, r) => {
if (!i.isIntersecting) return;
const a = Math.abs(
i.boundingRect.top + i.boundingRect.height / 2 - e
), h = i.intersectionRatio - a / window.innerHeight * 0.5;
h > s && (s = h, t = r);
}), t && t.id) {
const i = this.shadowRoot.querySelector(
`[href="#${t.id}"`
);
i && i !== this._activeAnchor && this.setActiveAnchor(
i,
t
);
}
}, this.threshold = [0.1], this.size = "lg";
}
get activeAnchor() {
return this._activeAnchor;
}
get anchors() {
return this._anchors;
}
get items() {
return this._items;
}
connectedCallback() {
super.connectedCallback();
const e = {
root: this.root ? document.querySelector(this.root) : null,
rootMargin: this.rootMargin,
threshold: this.threshold
};
this._observer = new IntersectionObserver(this._handleIntersect, e), this._lastAnchorObserver = new IntersectionObserver(this._handleIntersect, A(w({}, e), {
rootMargin: this.lastAnchorRootMargin
})), window.addEventListener("scroll", this.onScroll);
}
firstUpdated(e) {
return u(this, null, function* () {
f(m.prototype, this, "firstUpdated").call(this, e), yield this.renderTree();
});
}
attributeChangedCallback(e, t, s) {
return u(this, null, function* () {
f(m.prototype, this, "attributeChangedCallback").call(this, e, t, s), yield this.renderTree();
});
}
updated(e) {
return u(this, null, function* () {
f(m.prototype, this, "updated").call(this, e), yield this.renderTree();
});
}
disconnectedCallback() {
var e, t;
super.disconnectedCallback(), this._observer && ((e = this._observer) == null || e.disconnect(), (t = this._lastAnchorObserver) == null || t.disconnect(), window.removeEventListener("scroll", this.onScroll));
}
renderTree() {
return u(this, null, function* () {
var i, r;
if (this._anchors = this.getAnchors(
this.minHeadingLevel ? this.minHeadingLevel : 2,
this.maxHeadingLevel ? this.maxHeadingLevel : 3
), this._anchors.length === 0 || !this._anchors)
return;
this._anchors.forEach((a, o) => {
var h, l;
o === this._anchors.length - 1 ? (h = this._lastAnchorObserver) == null || h.observe(a) : (l = this._observer) == null || l.observe(a);
}), this._items = yield this.getHeaders();
const e = this.buildTree(this._items), t = document.createElement("div");
t.setAttribute("part", "base"), t.classList.add("toc");
const s = `
<span class="toc-title toc-title--${this.effectiveSize}">${(i = this.header) != null ? i : x("tocTitle")}</span>
<nav aria-label='${(r = this.header) != null ? r : x("tocTitle")}''>${e}</nav>`;
t.innerHTML = s, this.shadowRoot && (this.shadowRoot.removeChild(this.shadowRoot.childNodes[0]), this.shadowRoot.appendChild(t));
});
}
getAnchors(e, t) {
this._selectors = [];
for (let s = e; s <= t; s += 1)
this._selectors.push(`h${s}.${y}`), this._selectors.push(`dap-ds-typography[variant=h${s}][anchor]`);
return Array.from(document.querySelectorAll(this._selectors.join()));
}
setActiveAnchor(e, t) {
var s;
(s = this._activeAnchor) == null || s.removeAttribute("aria-current"), e.setAttribute("aria-current", "true"), this._activeAnchor = e, this.emit("dds-anchor-change", {
selectedItem: e,
anchorElement: t
});
}
buildTree(e) {
const t = [];
let s = [], i = -1;
if (e.length === 0)
return "";
const r = () => {
s.length > 0 && (t[t.length - 1] += this.buildTree(s));
};
e.forEach((o) => {
if (i !== -1 && i < o.level) {
s.push(o);
return;
}
r(), i = o.level, t.push(
`<a href="#${o.id}" class="toc-link toc-link--${this.effectiveSize}">${o.text}<span class="toc-link__high-contrast"></span></a>`
), s = [];
}), r();
const a = t.map(
(o) => `<li class="toc-item ${"toc-item-level-" + i}">${o}</li>`
).join("");
return `<ul class="${I({
"toc--no-indent": this.noIndent
})}">${a}</ul>`;
}
};
m.tagName = "dap-ds-toc", m.styles = j(S);
let c = m;
p([
d()
], c.prototype, "root");
p([
d()
], c.prototype, "rootMargin");
p([
d()
], c.prototype, "lastAnchorRootMargin");
p([
d({ type: Array })
], c.prototype, "threshold");
p([
d({ type: Number })
], c.prototype, "minHeadingLevel");
p([
d({ type: Number })
], c.prototype, "maxHeadingLevel");
p([
d({ type: Boolean })
], c.prototype, "noIndent");
p([
d()
], c.prototype, "header");
export {
c as default
};
//# sourceMappingURL=toc.component.js.map