gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
106 lines (105 loc) • 3.54 kB
JavaScript
import { appendContent, setClassNames } from "../common";
import { CardAction } from "./action";
import { HTMLItem } from "./templates";
/**
* Card Body
*/
export class CardBody {
// Constructor
constructor(props) {
this._el = null;
this._props = null;
// Save the properties
this._props = props;
// Create the item
let elItem = document.createElement("div");
elItem.innerHTML = HTMLItem;
this._el = elItem.firstChild;
// Configure the item
this.configure();
// Configure the events
this.configureEvents();
}
// Configure the body
configure() {
// Set the class names
if (this._props.className) {
// Set the class names
setClassNames(this._el, this._props.className);
}
// Update the title
let elTitle = this._el.querySelector(".card-title");
if (this._props.title || this._props.onRenderTitle) {
// Append the title
appendContent(elTitle, this._props.title);
// Call the render event
this._props.onRenderTitle ? this._props.onRenderTitle(elTitle, this._props) : null;
}
else {
// Remove the title
this._el.removeChild(elTitle);
}
// Update the sub-title
let subTitle = this._el.querySelector(".card-subtitle");
if (this._props.subTitle) {
// Set the sub-title
subTitle.innerHTML = this._props.subTitle;
}
else {
// Remove the sub-title
this._el.removeChild(subTitle);
}
// Update the text
let text = this._el.querySelector(".card-text");
if (this._props.text) {
// Set the text
text.innerHTML = this._props.text;
}
// Else, see if there is content
else if (this._props.content && typeof (this._props.content) === "string") {
// Set the text
text.innerHTML = this._props.content;
}
else {
// Remove the text
this._el.removeChild(text);
}
// See if the content is an element
if (this._props.content && typeof (this._props.content) !== "string") {
// Append the content
appendContent(this._el, this._props.content);
}
// Render the actions
this.renderActions();
}
// Configure the events
configureEvents() {
// Call the render event if it exists
this._props.onRender ? this._props.onRender(this._el, this._props) : null;
// See if there is a click event
if (this._props.onClick) {
// Set the click event
this._el.addEventListener("click", ev => {
// Execute the event
this._props.onClick(this._props, ev);
});
}
}
// Render the card actions
renderActions() {
// Parse the actions
let actions = this._props.actions || [];
for (let i = 0; i < actions.length; i++) {
// Add the action
let action = new CardAction(actions[i], this);
this._el.appendChild(action.el);
}
}
/**
* Public Interface
*/
// The component HTML element
get el() { return this._el; }
// The component properties
get props() { return this._props; }
}