gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
174 lines (173 loc) • 7.2 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.Nav = void 0;
var base_1 = require("../base");
var link_1 = require("./link");
var templates_1 = require("./templates");
/**
* Navigation
* @param props - The navigation properties.
*/
var _Nav = /** @class */ (function (_super) {
__extends(_Nav, _super);
// Constructor
function _Nav(props, template, itemTemplate) {
if (template === void 0) { template = props.menuOnly ? templates_1.HTML : (props.isVertical ? templates_1.HTMLVerticalTabs : templates_1.HTMLTabs); }
var _this = _super.call(this, template, props) || this;
_this._links = null;
// Configure the collapse
_this.configure(itemTemplate);
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the card group
_Nav.prototype.configure = function (itemTemplate) {
// Update the navigation
var nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
if (nav) {
this.props.id ? nav.id = this.props.id : null;
this.props.enableFill ? nav.classList.add("nav-fill") : null;
this.props.isJustified ? nav.classList.add("nav-justified") : null;
this.props.isPills ? nav.classList.add("nav-pills") : null;
this.props.isTabs ? nav.classList.add("nav-tabs") : null;
this.props.isUnderline ? nav.classList.add("nav-underline") : null;
this.props.isVertical ? nav.classList.add("flex-column") : null;
}
// Render the nav links
this.renderItems(itemTemplate);
};
// Configure the events
_Nav.prototype.configureEvents = function () {
// Execute the event(s)
this.props.onRendered ? this.props.onRendered(this.el) : null;
};
// Configures the tab link event
_Nav.prototype.configureLinkEvents = function (link) {
var _this = this;
// Add a click event
link.el.addEventListener("click", function () {
var prevTab = null;
var newTab = link;
// See if this link is disabled
if (link.isDisabled) {
// Do nothing
return;
}
// Parse the links
for (var i = 0; i < _this._links.length; i++) {
var link_2 = _this._links[i];
// See if it's active
if (link_2.isActive) {
// Set the old tab
prevTab = link_2;
// Toggle it
link_2.toggle(_this.props.fadeTabs);
}
}
// Toggle the link
link.toggle(_this.props.fadeTabs);
// Call the click event
_this.props.onClick ? _this.props.onClick(newTab, prevTab) : null;
});
};
// Renders the links
_Nav.prototype.renderItems = function (itemTemplate) {
// Clear the links
this._links = [];
// Get the nav and tab elements
var nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
if (nav) {
var tabs = this.el.querySelector(".tab-content");
// Parse the navigation items
var links = this.props.items || [];
for (var i = 0; i < links.length; i++) {
// Create the link
var link = new link_1.NavLink(links[i], tabs ? true : false, itemTemplate);
nav.appendChild(link.el);
this._links.push(link);
// Configure the link event
this.configureLinkEvents(link);
// See if we are rendering tabs
if (tabs) {
// Add the tab content
tabs.appendChild(link.elTabContent);
// See if the fade option is enabled
if (this.props.fadeTabs) {
// Set the class name
link.elTabContent.classList.add("fade");
// See if the tab is active
if (link.props.isActive) {
// Set the class name
link.elTabContent.classList.add("show");
}
}
}
// Call the render events
this.props.onLinkRendered ? this.props.onLinkRendered(link.elTab, links[i]) : null;
this.props.onTabRendered ? this.props.onTabRendered(link.elTabContent, links[i]) : null;
}
}
};
Object.defineProperty(_Nav.prototype, "activeTab", {
/**
* Public Interface
*/
// The active tab
get: function () {
// Parse the links
for (var i = 0; i < this._links.length; i++) {
var link = this._links[i];
// See if it's active
if (link.isActive) {
// Return the link
return link;
}
}
// Active tab not found
return null;
},
enumerable: false,
configurable: true
});
// Shows a tab
_Nav.prototype.showTab = function (tabId) {
// Ensure tabs exist
if (this.props.isTabs) {
// Parse the tabs
for (var i = 0; i < this._links.length; i++) {
var link = this._links[i];
// See if this is the target tab
if (tabId === i + 1 || link.elTabContent.getAttribute("data-title") == tabId) {
// Toggle it if it's not active
link.isActive ? null : link.toggle(this.props.fadeTabs);
}
// Else, see if it's active
else if (link.isActive) {
// Toggle it
link.toggle(this.props.fadeTabs);
}
}
}
};
return _Nav;
}(base_1.Base));
var Nav = function (props, template, itemTemplate) { return new _Nav(props, template, itemTemplate); };
exports.Nav = Nav;