gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
401 lines (400 loc) • 16.3 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.Modal = exports.ModalClassNames = exports.ModalTypes = void 0;
var base_1 = require("../base");
var classNames_1 = require("../classNames");
var common_1 = require("../common");
var templates_1 = require("./templates");
/**
* Modal Types
*/
var ModalTypes;
(function (ModalTypes) {
ModalTypes[ModalTypes["Small"] = 1] = "Small";
ModalTypes[ModalTypes["Medium"] = 2] = "Medium";
ModalTypes[ModalTypes["Large"] = 3] = "Large";
ModalTypes[ModalTypes["XLarge"] = 4] = "XLarge";
ModalTypes[ModalTypes["Full"] = 5] = "Full";
ModalTypes[ModalTypes["FullSmall"] = 6] = "FullSmall";
ModalTypes[ModalTypes["FullMedium"] = 7] = "FullMedium";
ModalTypes[ModalTypes["FullLarge"] = 8] = "FullLarge";
ModalTypes[ModalTypes["FullXLarge"] = 9] = "FullXLarge";
})(ModalTypes = exports.ModalTypes || (exports.ModalTypes = {}));
/**
* Modal Classes
*/
exports.ModalClassNames = new classNames_1.ClassNames([
"modal-sm",
"",
"modal-lg",
"modal-xl",
"modal-fullscreen",
"modal-fullscreen-sm-down",
"modal-fullscreen-md-down",
"modal-fullscreen-lg-down",
"modal-fullscreen-xl-down"
]);
/**
* Modal
* @param props The modal properties.
*/
var _Modal = /** @class */ (function (_super) {
__extends(_Modal, _super);
// Constructor
function _Modal(props, template) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
_this._autoClose = null;
_this._eventCreated = false;
_this._options = null;
_this._tranisitioningFl = false;
// Configure the collapse
_this.configure();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the card group
_Modal.prototype.configure = function () {
// Set the modal attributes
this.props.id ? this.el.id = this.props.id : null;
this.props.disableFade ? null : this.el.classList.add("fade");
// Update the dialog
var dialog = this.el.querySelector(".modal-dialog");
if (dialog) {
// Add the class name, based on the type
var className = exports.ModalClassNames.getByType(this.props.type);
className ? dialog.classList.add(className) : null;
// Update the title
this.setTitle(this.props.title);
// See if we are hiding the close button
if (this.props.hideCloseButton) {
// Remove the close button
var closeButton = dialog.querySelector(".btn-close");
closeButton ? closeButton.classList.add("d-none") : null;
}
}
// Set the header
(0, common_1.appendContent)(this.el.querySelector(".modal-header"), this.props.header);
// Set the body
(0, common_1.appendContent)(this.el.querySelector(".modal-body"), this.props.body);
// Set the footer
(0, common_1.appendContent)(this.el.querySelector(".modal-footer"), this.props.footer);
// Get the modal options
this._options = this.props.options;
if (this._options) {
// Set the backdrop
if (typeof (this._options.backdrop) === "boolean") {
this.el.setAttribute("data-bs-backdrop", this._options.backdrop ? "true" : "false");
}
// Set the center option
if (dialog && typeof (this._options.centered) === "boolean") {
dialog.classList.add("modal-dialog-centered");
}
// Set the focus
if (typeof (this._options.focus) === "boolean") {
this.el.setAttribute("data-bs-focus", this._options.focus ? "true" : "false");
}
// Set the keyboard
if (typeof (this._options.keyboard) === "boolean") {
this.el.setAttribute("data-bs-keyboard", this._options.keyboard ? "true" : "false");
}
// Set the scrollable option
if (dialog && typeof (this._options.scrollable) === "boolean") {
dialog.classList.add("modal-dialog-scrollable");
}
// See if we are showing the modal
if (this._options.visible) {
// Toggle the modal
this.toggle();
}
}
};
// Configures the auto-close event
_Modal.prototype.configureAutoCloseEvent = function () {
var _this = this;
// See if the event exists
if (this._eventCreated) {
return;
}
// Ensure the body exists
if (document.body) {
// Add a click event to the modal
document.body.addEventListener("click", function (ev) {
// See if the auto close flag is set
if (_this._autoClose) {
var elContent = _this.el.querySelector(".modal-content");
// Do nothing if we are tranisitionsing
if (_this._tranisitioningFl) {
return;
}
// Do nothing if we clicked within the modal
if (ev.composedPath().includes(elContent)) {
return;
}
else {
// Get the mouse coordinates
var x = ev.clientX;
var y = ev.clientY;
var elCoordinate = elContent.getBoundingClientRect();
// See if we clicked within the modal
if (x <= elCoordinate.right && x >= elCoordinate.left && y <= elCoordinate.bottom && y >= elCoordinate.top) {
return;
}
// Else, see if something was selected
else if (x == 0 && y == 0) {
return;
}
}
// Close the modal if it's visible
if (_this.isVisible) {
_this.toggle();
}
}
});
// Set the flag
this._eventCreated = true;
}
else {
// Add the load event
window.addEventListener("load", function () {
// Configure the event
_this.configureAutoCloseEvent();
});
}
};
// Configure the events
_Modal.prototype.configureEvents = function () {
var _this = this;
// Execute the events
this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(".modal-header")) : null;
this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(".modal-body")) : null;
this.props.onRenderFooter ? this.props.onRenderFooter(this.el.querySelector(".modal-footer")) : null;
// Get the close button
var elClose = this.el.querySelector(".btn-close");
if (elClose) {
// Add a click event
elClose.addEventListener("click", function () {
// Hide the modal
_this.hide();
});
}
// See if the keyboard option is set
if (this._options && this._options.keyboard) {
// Add a click event
this.el.addEventListener("keydown", function (ev) {
// See if the escape key was clicked and the modal is visible
if (ev.code === "27" && _this.isVisible) {
// Toggle the modal
_this.toggle();
}
});
}
// Set the flag to determine if the modal is sticky
this.setAutoClose(this.props.options && typeof (this.props.options.autoClose) === "boolean" ? this.props.options.autoClose : true);
};
/**
* Public Interface
*/
// Hides the modal
_Modal.prototype.hide = function () {
var _this = this;
// See if a transition is currently happening
if (this._tranisitioningFl) {
// Wait for the transition to complete
var id_1 = setInterval(function () {
// See if the transition is complete
if (!_this._tranisitioningFl) {
// Stop the loop
clearInterval(id_1);
// Toggle the modal
_this.isVisible ? _this.toggle() : null;
}
}, 250);
}
else {
// Toggle the modal
this.isVisible ? this.toggle() : null;
}
};
Object.defineProperty(_Modal.prototype, "isVisible", {
// Returns true if the modal is visible
get: function () { return this.el.classList.contains("show"); },
enumerable: false,
configurable: true
});
// Updates the auto close flag
_Modal.prototype.setAutoClose = function (value) {
// Set the flag
this._autoClose = value;
// Configure the event if we are setting the value
this._autoClose ? this.configureAutoCloseEvent() : null;
};
// Updates the backdrop flag
_Modal.prototype.setBackdrop = function (value) {
// Set the backdrop
this.el.setAttribute("data-bs-backdrop", value ? "true" : "false");
};
// Updates the visibility of the close button
_Modal.prototype.setCloseButtonVisibility = function (showFl) {
// Get the close button
var closeButton = this.el.querySelector(".btn-close");
if (closeButton) {
// See if we are showing the button
if (showFl) {
// Show the button
closeButton.classList.remove("d-none");
}
else {
// Hide the button
closeButton.classList.add("d-none");
}
}
};
// Updates the focus flag
_Modal.prototype.setFocus = function (value) {
// Set the focus
if (typeof (this._options.focus) === "boolean") {
this.el.setAttribute("data-bs-focus", value ? "true" : "false");
}
};
// Updates the center option
_Modal.prototype.setIsCentered = function (value) {
// Get the dialog
var dialog = this.el.querySelector(".modal-dialog");
if (dialog) {
// Add/Remove the class name
dialog.classList[value ? "add" : "remove"]("modal-dialog-centered");
}
};
// Updates the keyboard flag
_Modal.prototype.setKeyboard = function (value) {
// Set the keyboard
if (typeof (this._options.keyboard) === "boolean") {
this.el.setAttribute("data-bs-keyboard", value ? "true" : "false");
}
};
// Updates the scrollable option
_Modal.prototype.setScrollable = function (value) {
// Get the dialog
var dialog = this.el.querySelector(".modal-dialog");
if (dialog) {
// Add/Remove the class name
dialog.classList[value ? "add" : "remove"]("modal-dialog-scrollable");
}
};
// Updates the title
_Modal.prototype.setTitle = function (title) {
// Get the title
var elTitle = this.el.querySelector(".modal-title");
if (elTitle) {
// Clear the element
while (elTitle.firstChild) {
elTitle.removeChild(elTitle.firstChild);
}
// Append the content
(0, common_1.appendContent)(elTitle, title);
}
};
// Updates the type
_Modal.prototype.setType = function (modalType) {
var dialog = this.el.querySelector(".modal-dialog");
// Parse the class names
exports.ModalClassNames.parse(function (className) {
// Remove the class names
className ? dialog.classList.remove(className) : null;
});
// Set the class name
var className = exports.ModalClassNames.getByType(modalType);
className ? dialog.classList.add(className) : null;
};
// Shows the modal
_Modal.prototype.show = function () {
var _this = this;
// See if a transition is currently happening
if (this._tranisitioningFl) {
// Wait for the transition to complete
var id_2 = setInterval(function () {
// See if the transition is complete
if (!_this._tranisitioningFl) {
// Stop the loop
clearInterval(id_2);
// Toggle the modal
_this.isVisible ? null : _this.toggle();
}
}, 250);
}
else {
// Toggle the modal
this.isVisible ? null : this.toggle();
}
};
// Toggles the modal
_Modal.prototype.toggle = function () {
var _this = this;
var backdrop = document.querySelector(".modal-backdrop");
// Set the flag
this._tranisitioningFl = true;
// See if this modal is visible
if (this.isVisible) {
// Hide the modal
this.el.classList.remove("show");
// Wait for the animation to complete
setTimeout(function () {
// Hide the modal
_this.el.style.display = "";
// Remove the backdrop
backdrop ? document.body.removeChild(backdrop) : null;
backdrop = null;
// Set the flag
_this._tranisitioningFl = false;
// Call the event
_this.props.onClose ? _this.props.onClose(_this.el) : null;
}, 250);
}
else {
// Start the animation
this.el.classList.add("modal-open");
this.el.style.display = "block";
// Create the backdrop if we are showing it
var showBackdrop = this._options && typeof (this._options.backdrop) === "boolean" ? this._options.backdrop : true;
if (showBackdrop && backdrop == null) {
backdrop = document.createElement("div");
backdrop.classList.add("modal-backdrop");
backdrop.classList.add("fade");
backdrop.classList.add("show");
document.body.appendChild(backdrop);
}
// Set the focus
this.el.focus();
// Wait for the animation to complete
setTimeout(function () {
// Show the modal
_this.el.classList.remove("modal-open");
_this.el.classList.add("show");
// Set the flag
_this._tranisitioningFl = false;
}, 250);
}
};
return _Modal;
}(base_1.Base));
var Modal = function (props, template) { return new _Modal(props, template); };
exports.Modal = Modal;