gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
55 lines (54 loc) • 2.01 kB
JavaScript
import { Base } from "../base";
import { HTML, HTMLItem } from "./templates";
import { AccordionItem } from "./item";
/**
* Accordion
*/
class _Accordion extends Base {
// Constructor
constructor(props, template = HTML, itemTemplate = HTMLItem) {
super(template, props);
this._items = null;
// Ensure the id is set
this.el.id = this.el.id || props.id || "accordion";
// Render the items
this.renderItems(itemTemplate);
// Configure the parent
this.configureParent();
}
// Configure the item event
configureEvent(item) {
// Set the click event
if (item.elHeader) {
item.elHeader.addEventListener("click", (ev) => {
// Parse the items
for (let i = 0; i < this._items.length; i++) {
let item = this._items[i];
// Toggle the item if it's active
if (item.isExpanded) {
item.toggle();
}
}
// Toggle this item
item.toggle();
});
}
}
// Renders the items
renderItems(itemTemplate) {
// Clear the items
this._items = [];
// Set the flag
let autoCollapse = typeof (this.props.autoCollapse) === "boolean" ? this.props.autoCollapse : true;
// Parse the items
let items = this.props.items || [];
for (let i = 0; i < items.length; i++) {
// Create the item and append it to the accordion
let item = new AccordionItem(this.el.id, this.el.id + i, items[i], itemTemplate, autoCollapse);
this._items.push(item);
autoCollapse ? this.configureEvent(item) : null;
this.el.appendChild(item.el);
}
}
}
export const Accordion = (props, template, itemTemplate) => { return new _Accordion(props, template, itemTemplate); };