gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
193 lines (192 loc) • 7.42 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = void 0;
var base_1 = require("../base");
var common_1 = require("../common");
var templates_1 = require("./templates");
/**
* Toast
* @param props - The toast properties.
*/
var _Toast = /** @class */ (function (_super) {
__extends(_Toast, _super);
// Constructor
function _Toast(props, template) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
// Configure the collapse
_this.configure();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the card group
_Toast.prototype.configure = function () {
// Get the header
var header = this.el.querySelector(".toast-header");
if (header) {
// See if we are rendering an image
var img = header.querySelector("img");
if (img) {
if (this.props.headerImgSrc) {
// Create the image
img.className = this.props.headerImgClass || "";
img.src = this.props.headerImgSrc;
}
else {
// Remove the image
img.parentNode.removeChild(img);
}
}
// See if header text is defined
var headerText = header.querySelector("strong");
if (headerText) {
if (this.props.headerText) {
// Update the header text
headerText.innerHTML = this.props.headerText;
}
else {
// Remove the header
headerText.parentNode.removeChild(headerText);
}
}
// See if muted text is defined
var mutedText = header.querySelector("small");
if (mutedText) {
if (this.props.mutedText) {
// Create the text
mutedText.innerHTML = this.props.mutedText;
}
else {
// Remove the element
mutedText.parentNode.removeChild(mutedText);
}
}
// Get the close button
var closeButton = header.querySelector("button");
if (closeButton) {
if (this.props.options && this.props.options.autohide == false) {
// Remove the button
closeButton.parentNode.removeChild(closeButton);
}
}
}
// Set the body
(0, common_1.appendContent)(this.el.querySelector(".toast-body"), this.props.body);
};
// Configures the events
_Toast.prototype.configureEvents = function () {
var _this = this;
// Execute the render events
this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(".toast-header"), this.props.data) : null;
this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(".toast-body"), this.props.data) : null;
// See if we are dismissing the alert
var btnClose = this.el.querySelector(".btn-close");
if (btnClose) {
// Add a click event
btnClose.addEventListener("click", function () {
// Hide the toast
_this.hide();
});
}
// See if the click event exists
if (this.props.onClick) {
// Set the click event
this.el.addEventListener("click", function () {
// Execute the click event
_this.props.onClick(_this.el, _this.props.data);
});
}
// See if we are auto-hiding this toast
if (this.props.options && this.props.options.autohide) {
// Wait for the delay
setTimeout(this.hide.bind(this), this.props.options.delay || 5000);
}
};
/**
* Public Interface
*/
// Hides the toast
_Toast.prototype.hide = function () {
var _this = this;
// Completes the animation
var onComplete = function () {
// Remove the classes
_this.el.classList.add("hide");
_this.el.classList.remove("fade", "showing");
};
// Starts the animation
var start = function () {
// See if we are not showing animation
if (_this.props.options && _this.props.options.animation == false) {
// Update the classes
_this.el.classList.remove("show");
// Complete the request
onComplete();
}
else {
// Start the animation
_this.el.classList.add("fade");
_this.el.classList.remove("show");
_this.el.classList.add("showing");
// Complete the animation
setTimeout(onComplete, 250);
}
};
// See if there is a delay
var delay = this.props.options ? this.props.options.delay : null;
if (delay > 0) {
// Delay the request
setTimeout(start, delay);
}
else {
// Start the animation
start();
}
};
// Shows the toast
_Toast.prototype.show = function () {
var _this = this;
// Completes the animation
var onComplete = function () {
// Update the classes
_this.el.classList.remove("fade", "showing");
_this.el.classList.add("show");
};
// See if we are not showing animation
if (this.props.options && this.props.options.animation == false) {
// Update the classes
this.el.classList.remove("hide");
// Complete the request
onComplete();
}
else {
// Start the animation
this.el.classList.add("fade");
this.el.classList.remove("hide");
this.el.classList.add("showing");
// Complete the animation
setTimeout(onComplete, 250);
}
};
return _Toast;
}(base_1.Base));
var Toast = function (props, template) { return new _Toast(props, template); };
exports.Toast = Toast;