gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
126 lines (125 loc) • 5.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavbarItem = void 0;
var common_1 = require("../common");
var dropdown_1 = require("../dropdown");
var templates_1 = require("./templates");
/**
* Navbar Item
*/
var NavbarItem = /** @class */ (function () {
// Constructor
function NavbarItem(props, parent, template) {
if (template === void 0) { template = props.isButton ? templates_1.HTMLItemButton : templates_1.HTMLItem; }
this._el = null;
this._parent = null;
this._props = null;
// Save the properties
this._parent = parent;
this._props = props;
// Create the item
var el = document.createElement("div");
el.innerHTML = template;
this._el = el.firstChild;
// Configure the item
this.configure();
// Configure the events
this.configureEvents();
}
// Configures the item
NavbarItem.prototype.configure = function () {
var link = this._el.querySelector("a");
// See if this is a dropdown
if (this._props.items) {
// Render a dropdown menu
this._el = (0, dropdown_1.Dropdown)({
isReadonly: this._props.isDisabled,
items: this._props.items,
label: this._props.text,
navFl: true,
onMenuRendering: this._props.onMenuRendering
}).el;
// Update the link
link = this._el.querySelector(".nav-link");
if (link) {
this._props.isActive ? link.classList.add("active") : null;
// See if this is a button
if (this._props.isButton) {
link.classList.remove("nav-link");
link.classList.add("btn");
this._props.iconType ? link.classList.add("nav-icon") : null;
}
}
}
// Else, ensure there is text
else if (this._props.text) {
// Update the link
if (link) {
this._props.isActive ? link.classList.add("active") : link.removeChild(link.querySelector('span'));
link.innerHTML = this._props.text == null ? "" : this._props.text;
}
}
// Set the class names
(0, common_1.setClassNames)(link, this._props.className);
(0, common_1.setClassNames)(this._el, this._props.classNameItem);
// Update the link
if (link) {
this._props.target ? link.setAttribute("data-bs-target", this._props.target) : null;
this._props.toggle ? link.setAttribute("data-bs-toggle", this._props.toggle) : null;
// See if the link is disabled
if (this._props.isDisabled) {
// Add the class and set the tab index
link.classList.add("disabled");
link.setAttribute("aria-disabled", "true");
link.tabIndex = -1;
}
// Set the icon if it exists
if (this._props.iconType) {
var iconSize = this._props.iconSize || 16;
// See if it's a function
if (typeof (this._props.iconType) === "function") {
// Append the icon
link.prepend(this._props.iconType(iconSize, iconSize, this._props.iconClassName));
}
// Else, it's an element
else if (typeof (this._props.iconType) === "object") {
// Append the icon
link.prepend(this._props.iconType);
}
}
}
};
// Configures the events
NavbarItem.prototype.configureEvents = function () {
var _this = this;
// Ensure it's not disabled
if (this._props.isDisabled) {
return;
}
// Add a click event
this._el.addEventListener("click", function (ev) {
// Prevent the page from moving to the top
ev.preventDefault();
// See if we are toggling anything
if (_this._props.toggleObj && typeof (_this._props.toggleObj.toggle) === "function") {
// Toggle the object
_this._props.toggleObj.toggle();
}
// Call the events
_this._props.onClick ? _this._props.onClick(_this._props, ev) : null;
_this._parent.onClick ? _this._parent.onClick(_this._props, ev) : null;
});
// Execute the render events
this._props.onRender ? this._props.onRender(this._el, this._props) : null;
};
Object.defineProperty(NavbarItem.prototype, "el", {
/**
* Public Interface
*/
get: function () { return this._el; },
enumerable: false,
configurable: true
});
return NavbarItem;
}());
exports.NavbarItem = NavbarItem;