gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
166 lines (165 loc) • 6.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccordionItem = void 0;
var common_1 = require("../common");
/**
* Accordion Item
*/
var AccordionItem = /** @class */ (function () {
// Constructor
function AccordionItem(parentId, itemId, props, template, autoCollapse) {
this._autoCollapse = null;
this._el = null;
this._elCollapse = null;
this._elHeader = null;
this._id = null;
this._itemId = null;
this._parentId = null;
this._props = null;
// Save the properties
this._autoCollapse = autoCollapse;
this._id = "collapse" + itemId;
this._itemId = itemId;
this._parentId = parentId;
this._props = props;
// Create the item
var elItem = document.createElement("div");
elItem.innerHTML = template;
this._el = elItem.firstChild;
// Set the class name
var classNames = (this._props.className || "").trim().split(" ");
for (var i = 0; i < classNames.length; i++) {
var className = classNames[i];
// Add the class name
className ? this._el.classList.add(className) : null;
}
// Render the header
this.renderHeader();
// Append the content
(0, common_1.appendContent)(this._el.querySelector(".accordion-body"), this._props.content);
// Configure the collapse element
this.configureCollapse();
// Configure the events
this.configureEvents();
}
// Configures the collapse element
AccordionItem.prototype.configureCollapse = function () {
this._elCollapse = this._el.querySelector(".accordion-collapse");
if (this._elCollapse) {
this._props.showFl ? this._elCollapse.classList.add("show") : null;
this._elCollapse.setAttribute("aria-labelledby", this._itemId);
this._elCollapse.setAttribute("data-bs-parent", "#" + this._parentId);
this._elCollapse.id = this._id;
}
};
// Configures the events
AccordionItem.prototype.configureEvents = function () {
var _this = this;
// Add a click event
this._elHeader.addEventListener("click", function () {
// See if the auto collapse flag is not set
if (!_this._autoCollapse) {
// Toggle the element
_this.toggle();
}
// Call the click event
_this._props.onClick ? _this._props.onClick(_this._elHeader, _this._props) : null;
});
// Execute the render event
this._props.onRender ? this._props.onRender(this._el, this._props) : null;
this._props.onRenderBody ? this._props.onRenderBody(this._el.querySelector(".accordion-body"), this._props) : null;
this._props.onRenderHeader ? this._props.onRenderHeader(this._el.querySelector(".accordion-header"), this._props) : null;
};
// Renders the header
AccordionItem.prototype.renderHeader = function () {
var elHeader = this._el.querySelector(".accordion-header");
if (elHeader) {
// Set the properties
elHeader.id = this._itemId;
}
// Get the button
this._elHeader = this._el.querySelector(".accordion-button");
if (this._elHeader) {
// Set the class
this._props.showFl ? null : this._elHeader.classList.add("collapsed");
// Set the properties
this._elHeader.setAttribute("aria-controls", "collapse" + this._itemId);
this._elHeader.setAttribute("aria-expanded", this._props.showFl ? "true" : "false");
this._elHeader.setAttribute("data-bs-target", '#' + "collapse" + this._itemId);
this._elHeader.innerHTML = this._props.header;
}
};
Object.defineProperty(AccordionItem.prototype, "el", {
/**
* Public Properties
*/
// The component HTML element
get: function () { return this._el; },
enumerable: false,
configurable: true
});
Object.defineProperty(AccordionItem.prototype, "elCollapse", {
// The collapse element
get: function () { return this._elCollapse; },
enumerable: false,
configurable: true
});
Object.defineProperty(AccordionItem.prototype, "elHeader", {
// The header element
get: function () { return this._elHeader; },
enumerable: false,
configurable: true
});
Object.defineProperty(AccordionItem.prototype, "id", {
// The item id
get: function () { return this._id; },
enumerable: false,
configurable: true
});
Object.defineProperty(AccordionItem.prototype, "isExpanded", {
// Returns true if the item is expanded
get: function () {
// See if the item is expanded
return this.elCollapse.classList.contains("collapsing") || this.elCollapse.classList.contains("show");
},
enumerable: false,
configurable: true
});
// Toggles the item
AccordionItem.prototype.toggle = function () {
var _this = this;
// See if it's expanded
if (this.isExpanded) {
// Start the animation
this.elCollapse.style.height = this.el.getBoundingClientRect()["height"] + "px";
setTimeout(function () {
_this.elCollapse.classList.add("collapsing");
_this.elCollapse.classList.remove("collapse");
_this.elCollapse.classList.remove("show");
_this.elCollapse.style.height = "";
}, 10);
// Wait for the animation to complete
setTimeout(function () {
_this.elCollapse.classList.remove("collapsing");
_this.elCollapse.classList.add("collapse");
_this.elHeader.classList.add("collapsed");
}, 250);
}
else {
// Start the animation
this.elCollapse.classList.remove("collapse");
this.elCollapse.classList.add("collapsing");
this.elCollapse.style.height = this.el.scrollHeight + "px";
// Wait for the animation to complete
setTimeout(function () {
_this.elCollapse.classList.remove("collapsing");
_this.elCollapse.classList.add("collapse");
_this.elCollapse.classList.add("show");
_this.elCollapse.style.height = "";
_this.elHeader.classList.remove("collapsed");
}, 250);
}
};
return AccordionItem;
}());
exports.AccordionItem = AccordionItem;