gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
348 lines (347 loc) • 14 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.Offcanvas = exports.OffcanvasTypesClassNames = exports.OffcanvasTypes = exports.OffcanvasSizeClassNames = exports.OffcanvasSize = void 0;
var classNames_1 = require("../classNames");
var base_1 = require("../base");
var common_1 = require("../common");
var templates_1 = require("./templates");
/**
* Offcanvas Size
*/
var OffcanvasSize;
(function (OffcanvasSize) {
OffcanvasSize[OffcanvasSize["Small"] = 1] = "Small";
OffcanvasSize[OffcanvasSize["Small1"] = 2] = "Small1";
OffcanvasSize[OffcanvasSize["Small2"] = 3] = "Small2";
OffcanvasSize[OffcanvasSize["Small3"] = 4] = "Small3";
OffcanvasSize[OffcanvasSize["Medium"] = 5] = "Medium";
OffcanvasSize[OffcanvasSize["Medium1"] = 6] = "Medium1";
OffcanvasSize[OffcanvasSize["Medium2"] = 7] = "Medium2";
OffcanvasSize[OffcanvasSize["Medium3"] = 8] = "Medium3";
OffcanvasSize[OffcanvasSize["Large"] = 9] = "Large";
OffcanvasSize[OffcanvasSize["Large1"] = 10] = "Large1";
OffcanvasSize[OffcanvasSize["Large2"] = 11] = "Large2";
OffcanvasSize[OffcanvasSize["Large3"] = 12] = "Large3";
OffcanvasSize[OffcanvasSize["XLarge"] = 13] = "XLarge";
OffcanvasSize[OffcanvasSize["XXLarge"] = 14] = "XXLarge";
OffcanvasSize[OffcanvasSize["Full"] = 15] = "Full";
})(OffcanvasSize = exports.OffcanvasSize || (exports.OffcanvasSize = {}));
/**
* Offcanvas Size Classes
*/
exports.OffcanvasSizeClassNames = new classNames_1.ClassNames([
"offcanvas-sm",
"offcanvas-size-sm1",
"offcanvas-size-sm2",
"offcanvas-size-sm3",
"offcanvas-md",
"offcanvas-size-md1",
"offcanvas-size-md2",
"offcanvas-size-md3",
"offcanvas-lg",
"offcanvas-size-lg1",
"offcanvas-size-lg2",
"offcanvas-size-lg3",
"offcanvas-xl",
"offcanvas-xxl",
"offcanvas-size-full"
]);
/**
* Offcanvas Types
*/
var OffcanvasTypes;
(function (OffcanvasTypes) {
OffcanvasTypes[OffcanvasTypes["Bottom"] = 1] = "Bottom";
OffcanvasTypes[OffcanvasTypes["End"] = 2] = "End";
OffcanvasTypes[OffcanvasTypes["Start"] = 3] = "Start";
OffcanvasTypes[OffcanvasTypes["Top"] = 4] = "Top";
})(OffcanvasTypes = exports.OffcanvasTypes || (exports.OffcanvasTypes = {}));
/**
* Offcanvas Types Classes
*/
exports.OffcanvasTypesClassNames = new classNames_1.ClassNames([
"offcanvas-bottom",
"offcanvas-end",
"offcanvas-start",
"offcanvas-top"
]);
/**
* Offcanvas
*/
var _Offcanvas = /** @class */ (function (_super) {
__extends(_Offcanvas, _super);
// Constructor
function _Offcanvas(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._tranisitioningFl = false;
// Configure the offcanvas
_this.configure();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the card group
_Offcanvas.prototype.configure = function () {
// Set the attributes
this.props.id ? this.el.id = this.props.id : null;
// Set the size & type
this.setSize(this.props.size);
this.setType(this.props.type);
// Get the options
var options = this.props.options || {
backdrop: true,
keyboard: true,
scroll: false
};
// Set the properties
options.backdrop ? this.el.setAttribute("data-bs-body", "backdrop") : null;
options.scroll ? this.el.setAttribute("data-bs-body", "scroll") : null;
// Set the header
(0, common_1.appendContent)(this.el.querySelector(".offcanvas-header > div"), this.props.title);
// Set the body
(0, common_1.appendContent)(this.el.querySelector(".offcanvas-body"), this.props.body);
// Set the focus
if (options.focus) {
this.el.focus();
}
// Set the visibility
if (options.visible) {
this.toggle();
}
};
// Configures the auto-close event
_Offcanvas.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) {
// Do nothing if we are tranisitionsing
if (_this._tranisitioningFl) {
return;
}
// Do nothing if we clicked within the offcanvas
if (ev.composedPath().includes(_this.el)) {
return;
}
else {
// Get the mouse coordinates
var x = ev.clientX;
var y = ev.clientY;
var elCoordinate = _this.el.getBoundingClientRect();
// See if we clicked within the offcanvas
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 offcanvas 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
_Offcanvas.prototype.configureEvents = function () {
var _this = this;
// Execute the events
this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(".offcanvas-header > div"), this.props) : null;
this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(".offcanvas-body"), this.props) : 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();
});
}
// 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);
// See if the keyboard option is set
if (this.props.options && this.props.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();
}
});
}
};
/**
* Public Interface
*/
// Hides the modal
_Offcanvas.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(_Offcanvas.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
_Offcanvas.prototype.setAutoClose = function (value) {
// Set the flag
this._autoClose = value;
// Configure the event if we are setting the value
this._autoClose ? this.configureAutoCloseEvent() : null;
};
// Sets the offcanvas size
_Offcanvas.prototype.setSize = function (offcanvasSize) {
var _this = this;
// Parse the class names
exports.OffcanvasSizeClassNames.parse(function (className) {
// Remove the class names
_this.el.classList.remove(className);
});
// Set the class name
var className = exports.OffcanvasSizeClassNames.getByType(offcanvasSize);
if (className) {
this.el.classList.add(className);
}
};
// Sets the offcanvas type
_Offcanvas.prototype.setType = function (offcanvasType) {
var _this = this;
// Parse the class names
exports.OffcanvasTypesClassNames.parse(function (className) {
// Remove the class names
_this.el.classList.remove(className);
});
// Set the class name
var className = exports.OffcanvasTypesClassNames.getByType(offcanvasType) || exports.OffcanvasTypesClassNames.getByType(OffcanvasTypes.End);
this.el.classList.add(className);
};
// Shows the modal
_Offcanvas.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
_Offcanvas.prototype.toggle = function () {
var _this = this;
var backdrop = document.querySelector(".offcanvas-backdrop");
// Set the flag
this._tranisitioningFl = true;
// See if this modal is visible
if (this.isVisible) {
// Hide the modal
this.el.classList.add("offcanvas-toggling");
this.el.classList.remove("show");
// Wait for the animation to complete
setTimeout(function () {
_this.el.style.visibility = "hidden";
_this.el.classList.remove("offcanvas-toggling");
// 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 {
// Create the backdrop if we are showing it
var showBackdrop = this.props.options && typeof (this.props.options.backdrop) === "boolean" ? this.props.options.backdrop : true;
if (showBackdrop && backdrop == null) {
backdrop = document.createElement("div");
backdrop.classList.add("offcanvas-backdrop");
backdrop.classList.add("fade");
backdrop.classList.add("show");
document.body.appendChild(backdrop);
}
// Show the modal
this.el.style.visibility = "visible";
this.el.classList.add("offcanvas-toggling");
this.el.classList.add("show");
// Wait for the animation to complete
setTimeout(function () {
// Update the class
_this.el.classList.remove("offcanvas-toggling");
// Set the flag
_this._tranisitioningFl = false;
}, 250);
}
};
return _Offcanvas;
}(base_1.Base));
var Offcanvas = function (props, template) { return new _Offcanvas(props, template); };
exports.Offcanvas = Offcanvas;