gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
182 lines (181 loc) • 8.09 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownItem = void 0;
/**
* Dropdown Item
*/
var DropdownItem = /** @class */ (function () {
// Constructor
function DropdownItem(props, parent) {
this._el = null;
this._elLink = null;
this._isSelected = false;
this._parent = null;
this._props = null;
// Save the properties
this._parent = parent;
this._props = props;
// Configure the item
this.configure();
// Configure the events
this.configureEvents();
}
// Configures the item
DropdownItem.prototype.configure = function () {
// See if this is a divider
if (this._props.isDivider) {
// Add the divider
this._el = document.createElement("div");
this._el.className = this._props.className || "";
this._el.classList.add("dropdown-divider");
this._props.isDisabled ? this._el.classList.add("disabled") : null;
}
// Else, see if this is a header
else if (this._props.isHeader) {
// Add the header
this._el = document.createElement("h6");
this._el.className = this._props.className || "";
this._el.classList.add("dropdown-header");
this._props.isDisabled ? this._el.classList.add("disabled") : null;
this._el.innerText = this._props.text == null ? "" : this._props.text;
this._props.title ? this._el.title = this._props.title : null;
}
else {
// See if we are rendering this in a nav bar
if (this._parent.navFl) {
// Create the link
this._elLink = document.createElement("a");
this._elLink.className = this._props.className || "";
this._elLink.classList.add("dropdown-item");
this._props.isDisabled ? this._elLink.classList.add("disabled") : null;
this._props.target ? this._elLink.setAttribute("data-bs-target", this._props.target) : null;
this._props.title ? this._elLink.title = this._props.title : null;
this._props.toggle ? this._elLink.setAttribute("data-bs-toggle", this._props.toggle) : null;
this._elLink.href = this._props.href || "#";
this._elLink.innerText = this._props.text == null ? "" : this._props.text;
// Add the item
this._el = document.createElement("li");
this._el.appendChild(this._elLink);
}
else {
// Create the item
this._elLink = document.createElement("a");
this._elLink.className = this._props.className || "";
this._elLink.classList.add("dropdown-item");
this._props.isDisabled ? this._elLink.classList.add("disabled") : null;
this._props.target ? this._elLink.setAttribute("data-bs-target", this._props.target) : null;
this._props.title ? this._elLink.title = this._props.title : null;
this._props.toggle ? this._elLink.setAttribute("data-bs-toggle", this._props.toggle) : null;
this._elLink.href = this._props.href || "#";
this._elLink.innerText = this._props.text == null ? "" : this._props.text;
// See if this item is selected
if (this._props.isSelected) {
// Select the item
this._elLink.classList.add("active");
}
// Else, see if a value exists
else if (this._parent.value != undefined) {
// Ensure it's an array
var values = this._parent.value && this._parent.value.length && typeof (this._parent.value) !== "string" ? this._parent.value : [this._parent.value];
// Parse the values
for (var j = 0; j < values.length; j++) {
var value = this._props.value == undefined ? this._props.text : this._props.value;
// See if this item is selected
if (value == values[j]) {
// Select the item
this._elLink.classList.add("active");
break;
}
}
}
// Set the flag
this._isSelected = this._elLink.classList.contains("active");
// Add the item
this._el = document.createElement("li");
this._el.appendChild(this._elLink);
}
}
// Set the icon if it exists
if (this.props.iconType) {
var elItem = this._elLink || this._el;
var iconSize = this.props.iconSize || 16;
// See if it's a function
if (typeof (this.props.iconType) === "function") {
// Append the icon
elItem.prepend(this.props.iconType(iconSize, iconSize, this.props.iconClassName));
}
// Else, it's an element
else if (typeof (this.props.iconType) === "object") {
// Append the icon
elItem.prepend(this.props.iconType);
}
}
};
// Configures the events
DropdownItem.prototype.configureEvents = function () {
var _this = this;
// Set the click event
this._el.addEventListener("click", function (ev) {
// Prevent the page from moving to the top
ev.preventDefault();
// See if we are automatically selecting items
var autoSelect = typeof (_this._parent.autoSelect) === "boolean" ? _this._parent.autoSelect : true;
if (autoSelect) {
// Toggle the item
_this.toggle();
}
// See if there is a click event defined
if (_this._props.onClick) {
// Execute the event
_this._props.onClick(_this._props, ev);
}
});
// Call the render event
this._props.onRender ? this._props.onRender(this._el, this._props) : null;
};
Object.defineProperty(DropdownItem.prototype, "el", {
/**
* Public Interface
*/
// The component HTML element
get: function () { return this._el; },
enumerable: false,
configurable: true
});
// Hides the item
DropdownItem.prototype.hide = function () { this._el.classList.add("d-none"); };
Object.defineProperty(DropdownItem.prototype, "isSelected", {
// Returns true if the item is selected
get: function () { return this._isSelected; },
enumerable: false,
configurable: true
});
Object.defineProperty(DropdownItem.prototype, "props", {
// The component properties
get: function () { return this._props; },
enumerable: false,
configurable: true
});
// Shows the item
DropdownItem.prototype.show = function () { this._el.classList.remove("d-none"); };
// Toggles the item selection
DropdownItem.prototype.toggle = function () {
// Skip the dividers, headers and nav items
if (this._props.isDivider || this._props.isHeader || this._parent.navFl) {
return;
}
// Update the selected flag
this._isSelected = !this._isSelected;
// Update the class
if (this._isSelected) {
// Add the active class
(this._elLink || this._el).classList.add("active");
}
else {
// Remove the active class
(this._elLink || this._el).classList.remove("active");
}
};
return DropdownItem;
}());
exports.DropdownItem = DropdownItem;