@ribajs/bs5
Version:
Bootstrap 5 module for Riba.js
127 lines • 10.6 kB
JavaScript
import { handleizeFormatter, TemplatesComponent, } from "@ribajs/core";
import { Collapse } from "../../services/collapse.js";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
import { CollapseEvents, } from "../../types/index.js";
import template from "./bs5-accordion.component.html?raw";
const handleize = handleizeFormatter.read;
export class Bs5AccordionComponent extends TemplatesComponent {
static tagName = "bs5-accordion";
autobind = true;
_debug = false;
templateAttributes = [
{
name: "title",
required: true,
},
{
name: "show",
required: false,
},
{
name: "icon-direction",
required: false,
},
];
static get observedAttributes() {
return [
"items",
"collapse-icon-src",
"collapse-icon-size",
"show-only-one",
];
}
connectedCallback() {
super.connectedCallback();
this.init(Bs5AccordionComponent.observedAttributes);
}
requiredAttributes() {
return [];
}
scope = {
items: [],
toggle: this.toggle.bind(this),
show: this.show.bind(this),
hide: this.hide.bind(this),
collapseIconSize: 16,
showOnlyOne: true,
};
hide(item, index) {
const target = this.querySelector(`[data-index="${index}"]`);
if (target) {
this.initItemEventListeners(item, target);
new Collapse(target, { toggle: false }).hide();
}
}
show(item, index) {
const target = this.querySelector(`[data-index="${index}"]`);
const others = Array.from(this.querySelectorAll(`[data-index]:not([data-index="${index}"])`));
if (others && this.scope.showOnlyOne) {
for (const other of others) {
new Collapse(other, { toggle: false }).hide();
}
}
if (target) {
this.initItemEventListeners(item, target);
new Collapse(target, { toggle: false }).show();
}
}
toggle(item, index) {
const target = this.querySelector(`[data-index="${index}"]`);
const others = Array.from(this.querySelectorAll(`[data-index]:not([data-index="${index}"])`));
if (others && this.scope.showOnlyOne) {
for (const other of others) {
new Collapse(other, { toggle: false }).hide();
}
}
if (target) {
this.initItemEventListeners(item, target);
new Collapse(target, { toggle: false }).toggle();
}
}
initItemEventListeners(item, element) {
element.removeEventListener(CollapseEvents.hide, this.onHide.bind(this, element, item));
element.removeEventListener(CollapseEvents.show, this.onShow.bind(this, element, item));
element.addEventListener(CollapseEvents.hide, this.onHide.bind(this, element, item), { once: true });
element.addEventListener(CollapseEvents.show, this.onShow.bind(this, element, item), { once: true });
}
getContentChildByIndex() {
return this.querySelector(`.card-body > *`) || undefined;
}
onShow(element, item) {
item.show = true;
item.iconDirection = "up";
const firstContentChild = this.getContentChildByIndex();
if (firstContentChild) {
this.triggerVisibilityChangedForElement(firstContentChild, item.show);
}
}
onHide(element, item) {
item.show = false;
item.iconDirection = "down";
const firstContentChild = this.getContentChildByIndex();
if (firstContentChild) {
this.triggerVisibilityChangedForElement(firstContentChild, item.show);
}
}
transformTemplateAttributes(attributes) {
attributes.handle = attributes.handle || handleize(attributes.title);
attributes.show = !!attributes.show;
attributes.iconDirection =
attributes.iconDirection || attributes.show ? "up" : "down";
return attributes;
}
triggerVisibilityChangedForElement(element, visible) {
setTimeout(() => {
element.dispatchEvent(new CustomEvent("visibility-changed", { detail: { visible } }));
}, 200);
}
async template() {
if (!hasChildNodesTrim(this) || this.hasOnlyTemplateChilds()) {
return template;
}
else {
return null;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM1LWFjY29yZGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9iczUtYWNjb3JkaW9uL2JzNS1hY2NvcmRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxrQkFBa0IsRUFFbEIsa0JBQWtCLEdBRW5CLE1BQU0sY0FBYyxDQUFDO0FBQ3RCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM3RCxPQUFPLEVBRUwsY0FBYyxHQUVmLE1BQU0sc0JBQXNCLENBQUM7QUFFOUIsT0FBTyxRQUFRLE1BQU0sb0NBQW9DLENBQUM7QUFFMUQsTUFBTSxTQUFTLEdBQUcsa0JBQWtCLENBQUMsSUFBbUIsQ0FBQztBQVl6RCxNQUFNLE9BQU8scUJBQXNCLFNBQVEsa0JBQWtCO0lBQ3BELE1BQU0sQ0FBQyxPQUFPLEdBQUcsZUFBZSxDQUFDO0lBRTlCLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDbkIsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUVaLGtCQUFrQixHQUFHO1FBQzdCO1lBQ0UsSUFBSSxFQUFFLE9BQU87WUFDYixRQUFRLEVBQUUsSUFBSTtTQUNmO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsTUFBTTtZQUNaLFFBQVEsRUFBRSxLQUFLO1NBQ2hCO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsZ0JBQWdCO1lBQ3RCLFFBQVEsRUFBRSxLQUFLO1NBQ2hCO0tBQ0YsQ0FBQztJQUlGLE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTztZQUNMLE9BQU87WUFDUCxtQkFBbUI7WUFDbkIsb0JBQW9CO1lBQ3BCLGVBQWU7U0FDaEIsQ0FBQztJQUNKLENBQUM7SUFFUyxpQkFBaUI7UUFDekIsS0FBSyxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDMUIsSUFBSSxDQUFDLElB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