@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
96 lines • 7.17 kB
JavaScript
import { Component } from "@ribajs/core";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
export class Bs5ContentsComponent extends Component {
static tagName = "bs5-contents";
autobind = true;
wrapperElement;
static get observedAttributes() {
return [
"headers-start",
"headers-depth",
"find-header-id-depth",
"header-parent-selector",
"scroll-offset",
"scroll-element",
];
}
scope = {
headersDepth: 1,
headersStart: 2,
findHeaderIdDepth: 1,
headerParentSelector: undefined,
scrollOffset: 0,
anchors: [],
};
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
this.init(Bs5ContentsComponent.observedAttributes);
}
getIdFromElementOrParent(element, depth = 1) {
if (element.id) {
return element.id;
}
if (depth <= this.scope.findHeaderIdDepth) {
if (element.parentElement) {
return this.getIdFromElementOrParent(element.parentElement, ++depth);
}
}
return null;
}
pushHeaders(wrapperElement, headersStart, headersDepth, pushTo) {
const headerElements = wrapperElement.querySelectorAll("h" + headersStart);
headerElements.forEach((headerElement) => {
const id = this.getIdFromElementOrParent(headerElement);
if (!id) {
return;
}
pushTo.push({
element: headerElement,
href: "#" + id,
title: headerElement.innerHTML,
childs: [],
});
if (headerElement.parentElement && headersDepth >= headersStart + 1) {
this.pushHeaders(headerElement.parentElement, headersStart + 1, headersDepth, pushTo[pushTo.length - 1].childs);
}
});
}
async afterBind() {
if (this.scope.headerParentSelector &&
this.scope.headersStart &&
this.scope.headersDepth) {
this.wrapperElement =
document.querySelector(this.scope.headerParentSelector) || undefined;
this.scope.anchors = [];
if (!this.wrapperElement) {
console.error("No wrapper element found!");
return;
}
this.pushHeaders(this.wrapperElement, this.scope.headersStart, this.scope.headersDepth, this.scope.anchors);
}
await super.afterBind();
}
requiredAttributes() {
return ["headersStart", "headersDepth", "headerParentSelector"];
}
async attributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.attributeChangedCallback(attributeName, oldValue, newValue, namespace);
}
disconnectedCallback() {
super.disconnectedCallback();
this.scope.anchors = [];
}
async template() {
if (hasChildNodesTrim(this)) {
return null;
}
else {
const { default: template } = await import("./bs5-contents.component.html?raw");
return template;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LWNvbnRlbnRzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2JzNS1jb250ZW50cy9iczUtY29udGVudHMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWEsTUFBTSxjQUFjLENBQUM7QUFDcEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUF3QzdELE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxTQUFTO0lBQzFDLE1BQU0sQ0FBQyxPQUFPLEdBQUcsY0FBYyxDQUFDO0lBRTdCLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFFaEIsY0FBYyxDQUFXO0lBRW5DLE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTztZQUNMLGVBQWU7WUFDZixlQUFlO1lBQ2Ysc0JBQXNCO1lBQ3RCLHdCQUF3QjtZQUN4QixlQUFlO1lBQ2YsZ0JBQWdCO1NBQ2pCLENBQUM7SUFDSixDQUFDO0lBRU0sS0FBSyxHQUFVO1FBQ3BCLFlBQVksRUFBRSxDQUFDO1FBQ2YsWUFBWSxFQUFFLENBQUM7UUFDZixpQkFBaUIsRUFBRSxDQUFDO1FBQ3BCLG9CQUFvQixFQUFFLFNBQVM7UUFDL0IsWUFBWSxFQUFFLENBQUM7UUFDZixPQUFPLEVBQUUsRUFBRTtLQUNaLENBQUM7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO0lBQ1YsQ0FBQztJQUVTLGlCQUFpQjtRQUN6QixLQUFLLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUMxQixJQUFJLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVTLHdCQUF3QixDQUNoQyxPQUFvQixFQUNwQixLQUFLLEdBQUcsQ0FBQztRQUVULElBQUksT0FBTyxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ2YsT0FBTyxPQUFPLENBQUMsRUFBRSxDQUFDO1FBQ3BCLENB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