gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
139 lines (138 loc) • 5.38 kB
JavaScript
import { Base } from "../base";
import { ClassNames } from "../classNames";
import { setClassNames } from "../common";
import { ListGroupItem } from "./item";
import { HTML, HTMLTabs } from "./templates";
/**
* List Group Item Types
*/
export var ListGroupItemTypes;
(function (ListGroupItemTypes) {
ListGroupItemTypes[ListGroupItemTypes["Danger"] = 1] = "Danger";
ListGroupItemTypes[ListGroupItemTypes["Dark"] = 2] = "Dark";
ListGroupItemTypes[ListGroupItemTypes["Info"] = 3] = "Info";
ListGroupItemTypes[ListGroupItemTypes["Light"] = 4] = "Light";
ListGroupItemTypes[ListGroupItemTypes["Primary"] = 5] = "Primary";
ListGroupItemTypes[ListGroupItemTypes["Secondary"] = 6] = "Secondary";
ListGroupItemTypes[ListGroupItemTypes["Success"] = 7] = "Success";
ListGroupItemTypes[ListGroupItemTypes["Warning"] = 8] = "Warning";
})(ListGroupItemTypes || (ListGroupItemTypes = {}));
/**
* List Group Classes
*/
export const ListGroupClassNames = new ClassNames([
"list-group-item-danger",
"list-group-item-dark",
"list-group-item-info",
"list-group-item-light",
"list-group-item-primary",
"list-group-item-secondary",
"list-group-item-success",
"list-group-item-warning"
]);
/**
* List Group
* @param props The list group properties.
*/
class _ListGroup extends Base {
// Constructor
constructor(props, template = props.isTabs && props.colWidth > 0 && props.colWidth <= 12 ? HTMLTabs : HTML, itemTemplate) {
super(template, props);
this._items = null;
// Configure the collapse
this.configure(itemTemplate);
// Configure the parent
this.configureParent();
}
// Configure the card group
configure(itemTemplate) {
// Update the list group
let listGroup = this.el.querySelector(".list-group") || this.el;
if (listGroup) {
this.props.isFlush ? listGroup.classList.add("list-group-flush") : null;
this.props.isHorizontal ? listGroup.classList.add("list-group-horizontal") : null;
this.props.isNumbered ? listGroup.classList.add("list-group-numbered") : null;
this.props.isTabs ? listGroup.setAttribute("role", "tablist") : null;
}
// See if the column width is defined
let column = this.el.querySelector(".col");
if (column) {
// Update the width
column.className = "col-" + this.props.colWidth;
}
// Render the items
this.renderItems(listGroup, itemTemplate);
}
// Configures the item event
configureEvents(tab) {
// Add a click event
tab.el.addEventListener("click", () => {
// Parse the tabs
for (let i = 0; i < this._items.length; i++) {
let item = this._items[i];
// See if it's visible
if (item.isVisible) {
// Toggle it
item.toggle(this.props.fadeTabs);
}
}
// Toggle the link
tab.toggle(this.props.fadeTabs);
});
}
// Render the items
renderItems(listGroup, itemTemplate) {
// Clear the items
this._items = [];
// Get the tab content element
let tabs = this.el.querySelector(".tab-content");
// Parse the items
let items = this.props.items || [];
for (let i = 0; i < items.length; i++) {
// Create the item
let item = new ListGroupItem(items[i], tabs ? true : false, itemTemplate);
this._items.push(item);
listGroup.appendChild(item.el);
// See if we are rendering tabs
if (tabs) {
// Configure the events
this.configureEvents(item);
// Set the class names
setClassNames(item.elTab, this.props.tabClassName);
// Add the tab content
tabs.appendChild(item.elTab);
// See if the fade option is enabled
if (this.props.fadeTabs) {
// Set the class name
item.elTab.classList.add("fade");
// See if the tab is active
if (item.props.isActive) {
// Set the class name
item.elTab.classList.add("show");
item.elTab.classList.add("active");
}
}
}
}
}
/**
* Public Interface
*/
showTab(tabId) {
// Parse the tabs
for (let i = 0; i < this._items.length; i++) {
let item = this._items[i];
// See if this is the target tab
if (tabId === i + 1 || item.elTab.id == tabId) {
// Toggle it if it's not visible
item.isVisible ? null : item.toggle(this.props.fadeTabs);
}
// Else, see if it's visible
else if (item.isVisible) {
// Toggle it
item.toggle(this.props.fadeTabs);
}
}
}
}
export const ListGroup = (props, template, itemTemplate) => { return new _ListGroup(props, template, itemTemplate); };