gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
113 lines (112 loc) • 3.65 kB
JavaScript
import { Base } from "../base";
import { ClassNames } from "../classNames";
import { appendContent } from "../common";
import { HTML } from "./templates";
/**
* Jumbotron Size
*/
export var JumbotronSize;
(function (JumbotronSize) {
JumbotronSize[JumbotronSize["XSmall"] = 1] = "XSmall";
JumbotronSize[JumbotronSize["Small"] = 2] = "Small";
JumbotronSize[JumbotronSize["Medium"] = 3] = "Medium";
JumbotronSize[JumbotronSize["Large"] = 4] = "Large";
JumbotronSize[JumbotronSize["XLarge"] = 5] = "XLarge";
})(JumbotronSize || (JumbotronSize = {}));
/**
* Jumbotron Types
*/
export var JumbotronTypes;
(function (JumbotronTypes) {
JumbotronTypes[JumbotronTypes["Danger"] = 1] = "Danger";
JumbotronTypes[JumbotronTypes["Dark"] = 2] = "Dark";
JumbotronTypes[JumbotronTypes["Info"] = 3] = "Info";
JumbotronTypes[JumbotronTypes["Light"] = 4] = "Light";
JumbotronTypes[JumbotronTypes["Primary"] = 5] = "Primary";
JumbotronTypes[JumbotronTypes["Secondary"] = 6] = "Secondary";
JumbotronTypes[JumbotronTypes["Success"] = 7] = "Success";
JumbotronTypes[JumbotronTypes["Warning"] = 8] = "Warning";
})(JumbotronTypes || (JumbotronTypes = {}));
/**
* Jumbotron Classes
*/
export const JumbotronSizeClassNames = new ClassNames([
"py-1",
"py-2",
"py-3",
"py-4",
"py-5"
]);
/**
* Jumbotron Classes
*/
export const JumbotronTypeClassNames = new ClassNames([
"jumbotron-danger",
"jumbotron-dark",
"jumbotron-info",
"jumbotron-light",
"jumbotron-primary",
"jumbotron-secondary",
"jumbotron-success",
"jumbotron-warning"
]);
/**
* Jumbotron
*/
class _Jumbotron extends Base {
// Constructor
constructor(props, template = HTML) {
super(template, props);
// Configure the collapse
this.configure();
// Configure the events
this.configureEvents();
// Configure the parent
this.configureParent();
}
// Configure the card group
configure() {
// Set the class names
this.props.isFluid ? this.el.classList.add("jumbotron-fluid") : null;
// Set the title
let title = this.el.querySelector("h1");
if (title) {
if (this.props.title) {
// Set the title
title.innerHTML = this.props.title;
}
else {
// Remove the title
this.el.removeChild(title);
}
}
// Set the lead
let lead = this.el.querySelector("p");
if (lead) {
if (this.props.lead) {
// Set the lead
lead.innerHTML = this.props.lead;
}
else {
// Remove the lead
this.el.removeChild(lead);
}
}
// Set the size
let className = JumbotronSizeClassNames.getByType(this.props.size) || JumbotronSizeClassNames.getByType(JumbotronSize.XLarge);
this.el.classList.add(className);
// Set the type
className = JumbotronTypeClassNames.getByType(this.props.type);
if (className) {
this.el.classList.add(className);
}
// Append the content
appendContent(this.el, this.props.content);
}
// Configures the events
configureEvents() {
// Call the render event
this.props.onRenderContent ? this.props.onRenderContent(this.el) : null;
}
}
export const Jumbotron = (props, template) => { return new _Jumbotron(props, template); };