@ribajs/bs4
Version:
Bootstrap 4 module for Riba.js
140 lines • 11.7 kB
JavaScript
import { handleizeFormatter, TemplatesComponent, } from "@ribajs/core";
import { CollapseService, EVENT_HIDE, EVENT_SHOW, } from "../../services/collapse.service.js";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
const handleize = handleizeFormatter.read;
export class Bs4AccordionComponent extends TemplatesComponent {
static tagName = "bs4-accordion";
autobind = true;
templateAttributes = [
{
name: "title",
required: true,
},
{
name: "show",
required: false,
},
{
name: "icon-direction",
required: false,
},
];
static get observedAttributes() {
return ["collapse-icon-src", "collapse-icon-size", "show-only-one"];
}
scope = {
items: [],
toggle: this.toggle,
show: this.show,
hide: this.hide,
collapseIconSize: 16,
showOnlyOne: true,
};
constructor() {
super();
}
hide(item, index) {
const target = this.querySelector(`[data-index="${index}"]`);
if (target) {
this.initItemEventListeners(item, target);
new CollapseService(target, [this], { 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 CollapseService(other, [], { toggle: false }).hide();
}
}
if (target) {
this.initItemEventListeners(item, target);
new CollapseService(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 CollapseService(other, [], { toggle: false }).hide();
}
}
if (target) {
this.initItemEventListeners(item, target);
new CollapseService(target, [], { toggle: false }).toggle();
}
}
initItemEventListeners(item, element) {
element.removeEventListener(EVENT_HIDE, this.onHide.bind(this, element, item));
element.removeEventListener(EVENT_SHOW, this.onShow.bind(this, element, item));
element.addEventListener(EVENT_HIDE, this.onHide.bind(this, element, item), { once: true });
element.addEventListener(EVENT_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);
}
connectedCallback() {
super.connectedCallback();
this.init(Bs4AccordionComponent.observedAttributes);
}
async init(observedAttributes) {
return super.init(observedAttributes).then((view) => {
return view;
});
}
async beforeBind() {
return await super.beforeBind();
}
async afterBind() {
return await super.afterBind();
}
requiredAttributes() {
return [];
}
parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
}
disconnectedCallback() {
super.disconnectedCallback();
}
async template() {
if (!hasChildNodesTrim(this) || this.hasOnlyTemplateChilds()) {
const { default: template } = await import("./bs4-accordion.component.html?raw");
return template;
}
else {
return null;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnM0LWFjY29yZGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9iczQtYWNjb3JkaW9uL2JzNC1hY2NvcmRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxrQkFBa0IsRUFFbEIsa0JBQWtCLEdBRW5CLE1BQU0sY0FBYyxDQUFDO0FBQ3RCLE9BQU8sRUFDTCxlQUFlLEVBQ2YsVUFBVSxFQUNWLFVBQVUsR0FDWCxNQUFNLG9DQUFvQyxDQUFDO0FBQzVDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBRTdELE1BQU0sU0FBUyxHQUFHLGtCQUFrQixDQUFDLElBQW1CLENBQUM7QUEyQnpELE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxrQkFBa0I7SUFDcEQsTUFBTSxDQUFDLE9BQU8sR0FBRyxlQUFlLENBQUM7SUFFOUIsUUFBUSxHQUFHLElBQUksQ0FBQztJQUVoQixrQkFBa0IsR0FBRztRQUM3QjtZQUNFLElBQUksRUFBRSxPQUFPO1lBQ2IsUUFBUSxFQUFFLElBQUk7U0FDZjtRQUNEO1lBQ0UsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsS0FBSztTQUNoQjtRQUNEO1lBQ0UsSUFBSSxFQUFFLGdCQUFnQjtZQUN0QixRQUFRLEVBQUUsS0FBSztTQUNoQjtLQUNGLENBQUM7SUFJRixNQUFNLEtBQUssa0JBQWtCO1FBQzNCLE9BQU8sQ0FBQyxtQkFBbUIsRUFBRSxvQkFBb0IsRUFBRSxlQUFlLENBQUMsQ0FBQztJQUN0RSxDQUFDO0lBRU0sS0FBSyxHQUFVO1FBQ3BCLEtBQUssRUFBRSxFQUFFO1FBQ1QsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1FBQ25CLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtRQUNmLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtRQUNmLGdCQUFnQixFQUFFLEVBQUU7UUFDcEIs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