gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
151 lines (150 loc) • 6.34 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.NavLink = void 0;
var base_1 = require("../base");
var common_1 = require("../common");
var templates_1 = require("./templates");
/**
* Nav Link
*/
var NavLink = /** @class */ (function (_super) {
__extends(NavLink, _super);
// Constructor
function NavLink(props, isTab, template) {
if (template === void 0) { template = templates_1.HTMLLink; }
var _this = _super.call(this, template, props) || this;
_this._elLink = null;
_this._elTab = null;
// See if this is for a tab
if (isTab) {
// Create the tab element
var el = document.createElement("div");
el.innerHTML = templates_1.HTMLTab;
_this._elTab = el.firstChild;
}
// Configure the item
_this.configure();
// Configure the events
_this.configureEvents();
return _this;
}
// Configure the item
NavLink.prototype.configure = function () {
// Update the link
this._elLink = this.el.querySelector("a.nav-link");
if (this._elLink) {
// Set the class names
(0, common_1.setClassNames)(this._elLink, this.props.className);
this.props.isActive ? this._elLink.classList.add("active") : null;
this.props.isDisabled ? this._elLink.classList.add("disabled") : null;
// Set the html
this._elLink.innerHTML = this.props.title == null ? "" : this.props.title;
// See if this is a tab
if (this._elTab) {
var tabId = this.props.title.replace(/[^a-zA-Z]/g, "");
// Set the properties
this._elLink.id = tabId + "-tab";
this._elLink.setAttribute("href", "#" + tabId);
this._elLink.setAttribute("data-bs-toggle", "tab");
this._elLink.setAttribute("aria-controls", tabId);
this._elLink.innerHTML = this.props.title == null ? "" : this.props.title;
// Update the tab
this._elTab.id = tabId;
this._elTab.setAttribute("aria-labelledby", tabId);
this._elTab.setAttribute("data-title", this.props.title || "");
// See if this tab is active
if (this.props.isActive) {
// Update the classes
this._elTab.classList.add("active");
}
// Append the content
(0, common_1.appendContent)(this._elTab, this.props.tabContent);
}
else {
// Set the properties
this._elLink.setAttribute("href", this.props.href || "#");
}
}
};
// Configures the events
NavLink.prototype.configureEvents = function () {
var _this = this;
// Add a click event
this.el.addEventListener("click", function (ev) {
// Prevent the page from moving to the top
ev.preventDefault();
// Execute the event
_this.props.onClick ? _this.props.onClick(_this.props, ev) : null;
});
// Execute the render events
this.props.onRender ? this.props.onRender(this._elLink, this.props) : null;
this._elTab && this.props.onRenderTab ? this.props.onRenderTab(this._elTab, this.props) : null;
};
Object.defineProperty(NavLink.prototype, "elTab", {
/**
* Public Interface
*/
// The HTML tab element
get: function () { return this._elLink; },
enumerable: false,
configurable: true
});
Object.defineProperty(NavLink.prototype, "elTabContent", {
// The HTML tab content element
get: function () { return this._elTab; },
enumerable: false,
configurable: true
});
Object.defineProperty(NavLink.prototype, "isActive", {
// Returns true if the link is active
get: function () { return this._elLink.classList.contains("active"); },
enumerable: false,
configurable: true
});
Object.defineProperty(NavLink.prototype, "isDisabled", {
// Returns true if the link is disabled
get: function () { return this._elLink.classList.contains("disabled"); },
enumerable: false,
configurable: true
});
Object.defineProperty(NavLink.prototype, "tabName", {
// Gets the tab name
get: function () { return this._elLink.innerHTML.trim(); },
set: function (value) { this._elLink.innerHTML = (value || "").trim(); },
enumerable: false,
configurable: true
});
// Toggles a link
NavLink.prototype.toggle = function (fadeTabs) {
// See if this item is currently active
if (this.isActive) {
// Hide this link and tab
this._elLink.classList.remove("active");
this._elTab ? this._elTab.classList.remove("active") : null;
this._elTab ? this._elTab.classList.remove("show") : null;
}
else {
// Show this link and tab
this._elLink.classList.add("active");
this._elTab ? this._elTab.classList.add("active") : null;
this._elTab && fadeTabs ? this._elTab.classList.add("show") : null;
}
};
return NavLink;
}(base_1.Base));
exports.NavLink = NavLink;