@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
102 lines • 8.37 kB
JavaScript
import { Component } from "@ribajs/core";
import { Collapse } from "../../services/collapse.js";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
import { CollapseEvents } from "../../types/index.js";
export class Bs5CollapseComponent extends Component {
static tagName = "bs5-collapse";
autobind = true;
collapse;
static get observedAttributes() {
return ["title", "content", "collapsed"];
}
requiredAttributes() {
return ["title"];
}
scope = {
title: "",
content: "Please set the content of the collapse using the content attribute or just by set the content as the child of this element",
collapsed: true,
toggle: this.toggle,
show: this.show,
hide: this.hide,
};
constructor() {
super();
}
hide() {
console.debug("hide");
if (this.collapse) {
this.scope.collapsed = true;
this.collapse.hide();
}
}
show() {
if (this.collapse) {
this.scope.collapsed = false;
this.collapse.show();
}
}
toggle() {
if (this.collapse) {
this.collapse.toggle();
this.scope.collapsed = !!this.scope.collapsed;
}
}
addEventListeners() {
if (this.scope.collapseEl) {
this.scope.collapseEl.addEventListener(CollapseEvents.hide, this.onHide.bind(this));
this.scope.collapseEl.addEventListener(CollapseEvents.show, this.onShow.bind(this));
}
}
removeEventListeners() {
if (this.scope.collapseEl) {
this.scope.collapseEl.removeEventListener(CollapseEvents.hide, this.onHide.bind(this));
this.scope.collapseEl.removeEventListener(CollapseEvents.show, this.onShow.bind(this));
}
}
onShow() {
console.debug("onShow");
this.scope.collapsed = false;
this.triggerVisibilityChangedForElement(!this.scope.collapsed);
}
onHide() {
console.debug("onShow");
this.scope.collapsed = true;
this.triggerVisibilityChangedForElement(!this.scope.collapsed);
}
triggerVisibilityChangedForElement(visible) {
setTimeout(() => {
const event = new CustomEvent("visibility-changed", {
detail: { visible },
});
this.dispatchEvent(event);
if (this.scope.collapseEl) {
this.scope.collapseEl.dispatchEvent(event);
}
}, 200);
}
connectedCallback() {
super.connectedCallback();
this.init(Bs5CollapseComponent.observedAttributes);
}
async afterBind() {
console.debug("afterBind", this.scope.collapsed);
this.scope.collapseEl = this.querySelector(".collapse") || undefined;
if (!this.scope.collapseEl) {
throw new Error("No collapse element found!");
}
this.collapse = new Collapse(this.scope.collapseEl, {
toggle: !this.scope.collapsed,
});
}
template() {
if (hasChildNodesTrim(this)) {
this.scope.content = this.innerHTML;
}
return (jsxCreateElement("div", null,
jsxCreateElement("button", { "rv-on-click": "toggle", class: "btn btn-primary", type: "button", "aria-expanded": "false", "rv-aria-controls": "title | handleize", "rv-text": "title" }),
jsxCreateElement("div", { class: "collapse mt-2", "rv-id": "title" },
jsxCreateElement("div", { class: "card card-body", "rv-template": "content" }))));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LWNvbGxhcHNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2JzNS1jb2xsYXBzZS9iczUtY29sbGFwc2UuY29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFvQixNQUFNLGNBQWMsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDN0QsT0FBTyxFQUF1QixjQUFjLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVkzRSxNQUFNLE9BQU8sb0JBQXFCLFNBQVEsU0FBUztJQUMxQyxNQUFNLENBQUMsT0FBTyxHQUFHLGNBQWMsQ0FBQztJQUU3QixRQUFRLEdBQUcsSUFBSSxDQUFDO0lBRWhCLFFBQVEsQ0FBWTtJQUU5QixNQUFNLEtBQUssa0JBQWtCO1FBQzNCLE9BQU8sQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFUyxrQkFBa0I7UUFDMUIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ25CLENBQUM7SUFFTSxLQUFLLEdBQVU7UUFDcEIsS0FBSyxFQUFFLEVBQUU7UUFDVCxPQUFPLEVBQ0wsNEhBQTRIO1FBQzlILFNBQVMsRUFBRSxJQUFJO1FBQ2YsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1FBQ25CLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtRQUNmLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtLQUNoQixDQUFDO0lBRUY7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7SUFFTSxJQUFJO1FBQ1QsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN0QixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixJQUFJ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