gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
105 lines (104 loc) • 4.49 kB
JavaScript
;
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.Collapse = void 0;
var base_1 = require("../base");
var common_1 = require("../common");
var templates_1 = require("./templates");
/**
* Collapse
*/
var _Collapse = /** @class */ (function (_super) {
__extends(_Collapse, _super);
// Constructor
function _Collapse(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 parent
_this.configureParent();
return _this;
}
// Configure the card group
_Collapse.prototype.configure = function () {
// Set the id
var id = this.props.id || "collapse" + (new Date()).getTime();
// Set the attributes
this.el.id = id;
this.props.isHorizontal ? this.el.classList.add("collapse-horizontal") : null;
this.props.isMulti ? this.el.classList.add("multi-collapse") : null;
// Append the content
var body = this.el.querySelector(".card");
(0, common_1.appendContent)(body, this.props.content);
// Execute the render event
this.props.onRender ? this.props.onRender(body, this.props) : null;
// See if we are expanding it by default
if (this.props.options && this.props.options.toggle) {
// Toggle the element
this.toggle();
}
};
Object.defineProperty(_Collapse.prototype, "isExpanded", {
/**
* Public Interface
*/
// Returns true if the item is expanded
get: function () {
// See if the item is expanded
return this.el.classList.contains("collapsing") || this.el.classList.contains("show");
},
enumerable: false,
configurable: true
});
// Toggles the collapse
_Collapse.prototype.toggle = function () {
var _this = this;
// See if it's expanded
if (this.isExpanded) {
// Start the animation
this.el.style[this.props.isHorizontal ? "width" : "height"] = this.el.getBoundingClientRect()[this.props.isHorizontal ? "width" : "height"] + "px";
setTimeout(function () {
_this.el.classList.add("collapsing");
_this.el.classList.remove("collapse");
_this.el.classList.remove("show");
_this.el.style[_this.props.isHorizontal ? "width" : "height"] = "";
}, 10);
// Wait for the animation to complete
setTimeout(function () {
_this.el.classList.remove("collapsing");
_this.el.classList.add("collapse");
}, 250);
}
else {
// Start the animation
this.el.classList.remove("collapse");
this.el.classList.add("collapsing");
this.el.style[this.props.isHorizontal ? "width" : "height"] = (this.props.isHorizontal ? this.el.scrollWidth : this.el.scrollHeight) + "px";
// Wait for the animation to complete
setTimeout(function () {
_this.el.classList.remove("collapsing");
_this.el.classList.add("collapse");
_this.el.classList.add("show");
_this.el.style[_this.props.isHorizontal ? "width" : "height"] = "";
}, 250);
}
};
return _Collapse;
}(base_1.Base));
var Collapse = function (props, template) { return new _Collapse(props, template); };
exports.Collapse = Collapse;