gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
345 lines (344 loc) • 14.7 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.Navbar = exports.NavbarTypes = void 0;
var base_1 = require("../base");
var button_1 = require("../button");
var common_1 = require("../common");
var item_1 = require("./item");
var templates_1 = require("./templates");
/**
* Navbar Types
*/
var NavbarTypes;
(function (NavbarTypes) {
NavbarTypes[NavbarTypes["Dark"] = 1] = "Dark";
NavbarTypes[NavbarTypes["Light"] = 2] = "Light";
NavbarTypes[NavbarTypes["Primary"] = 3] = "Primary";
})(NavbarTypes = exports.NavbarTypes || (exports.NavbarTypes = {}));
/**
* Navbar
*/
var _Navbar = /** @class */ (function (_super) {
__extends(_Navbar, _super);
// Constructor
function _Navbar(props, template, itemTemplate) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
_this._items = null;
// Configure the collapse
_this.configure(itemTemplate);
// Configure search
_this.configureSearch();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
return _this;
}
// Configure the card group
_Navbar.prototype.configure = function (itemTemplate) {
// See if we are applying a brand
if (this.props.brand) {
var elBrand = this.el.querySelector("span.navbar-brand");
var elBrandLink = this.el.querySelector("a.navbar-brand");
// See if we are using a link
if (this.props.brandUrl || this.props.onClickBrand) {
// Remove the element
elBrand ? elBrand.parentElement.removeChild(elBrand) : null;
// Update the brand
elBrandLink ? elBrandLink.href = this.props.brandUrl : null;
// Append the content
(0, common_1.appendContent)(elBrandLink, this.props.brand);
}
else {
// Remove the link element
elBrandLink ? elBrandLink.parentElement.removeChild(elBrandLink) : null;
// Append the content
(0, common_1.appendContent)(elBrand, this.props.brand);
}
}
else {
// Remove the brand link
var elBrandLink = this.el.querySelector("a.navbar-brand");
if (elBrandLink) {
elBrandLink.parentNode.removeChild(elBrandLink);
}
// Remove the brand element
var elBrand = this.el.querySelector("span.navbar-brand");
if (elBrand) {
elBrand.parentNode.removeChild(elBrand);
}
}
// Update the nav bar
var navbar = this.el.querySelector(".navbar-collapse");
if (navbar) {
navbar.id = this.props.id || "navbar_content";
}
// Set the toggle
var toggler = this.el.querySelector(".navbar-toggler");
if (toggler) {
toggler.setAttribute("aria-controls", navbar.id);
toggler.setAttribute("data-bs-target", "#" + navbar.id);
}
// Set the scroll
var nav = this.el.querySelector(".navbar-nav");
if (nav && this.props.enableScrolling) {
// Add the class
nav.classList.add("navbar-nav-scroll");
}
// Add the classes based on the type
this._btnSearch = this.el.querySelector("button[type='submit']");
// Set the type
this.setType(this.props.type);
// Render the items
this.renderItems(itemTemplate);
};
// Configure the events
_Navbar.prototype.configureEvents = function () {
var _this = this;
var props = this.props.searchBox || {};
// See if the brand element and click event exist
var brand = this.el.querySelector(".navbar-brand");
if (brand && this.props.onClickBrand) {
// Set the click event
brand.addEventListener("click", function (ev) {
// Call the event
_this.props.onClickBrand(brand, ev);
});
}
// See if search events exist
var searchbox = this.el.querySelector("form input");
if (searchbox) {
// Set a keydown event to catch the "Enter" key being pressed
searchbox.addEventListener("keydown", function (ev) {
// See if the "Enter" key was pressed
if (ev.code == "13") {
// Disable the postback
ev.preventDefault();
// See if there is a search event
if (props.onSearch) {
// Call the event
props.onSearch(searchbox.value, ev);
}
}
});
// See if a change event exists
if (props.onChange) {
// Add an input event
searchbox.addEventListener("input", function (ev) {
// Call the event
props.onChange(searchbox.value, ev);
});
// Add a clear event
searchbox.addEventListener("clear", function (ev) {
// Call the event
props.onChange(searchbox.value, ev);
});
// Edge has a bug where the clear event isn't triggered
// See if this is the Edge browser
if (window.navigator.userAgent.indexOf("Edge") > 0) {
// Detect the mouse click event
searchbox.addEventListener("mouseup", function () {
var currentValue = searchbox.value;
// Set a timeout to see if the value is cleared
setTimeout(function () {
// Compare the values
if (currentValue != searchbox.value) {
// Call the event
props.onChange(searchbox.value);
}
}, 1);
});
}
}
}
// See if a search event exists
var button = this.el.querySelector("form button");
if (button && props.onSearch) {
// Add a click event
button.addEventListener("click", function (ev) {
// Prevent the page from moving to the top
ev.preventDefault();
// Call the event
props.onSearch(searchbox.value);
});
}
// See if the toggle exists
var btnToggle = this.el.querySelector(".navbar-toggler");
if (btnToggle) {
// Add a click event
btnToggle.addEventListener("click", function (ev) {
var elNav = _this.el.querySelector(".navbar-collapse");
// See if it's visible
if (!btnToggle.classList.contains("collapsed") && elNav.classList.contains("show")) {
// Start the animation
elNav.style.height = elNav.getBoundingClientRect()["height"] + "px";
setTimeout(function () {
elNav.classList.add("collapsing");
elNav.classList.remove("collapse");
elNav.classList.remove("show");
elNav.style.height = "";
btnToggle.classList.add("collapsed");
}, 10);
// Wait for the animation to complete
setTimeout(function () {
elNav.classList.remove("collapsing");
elNav.classList.add("collapse");
}, 250);
}
else {
// Start the animation
elNav.classList.remove("collapse");
elNav.classList.add("collapsing");
elNav.style.height = _this.el.scrollHeight + "px";
btnToggle.classList.remove("collapsed");
// Wait for the animation to complete
setTimeout(function () {
elNav.classList.remove("collapsing");
elNav.classList.add("collapse");
elNav.classList.add("show");
elNav.style.height = "";
}, 250);
}
});
}
// Execute the event(s)
this.props.onRendered ? this.props.onRendered(this.el) : null;
};
// Configures search
_Navbar.prototype.configureSearch = function () {
// See if we are rendering a search box
var search = this.el.querySelector("form");
if (search) {
if (this.props.enableSearch != false && this.props.searchBox) {
var props = this.props.searchBox || {};
// Update the searchbox
var searchbox = search.querySelector("input");
searchbox.placeholder = props.placeholder || searchbox.placeholder;
searchbox.value = props.value || "";
props.btnText ? searchbox.setAttribute("aria-label", props.btnText) : null;
// See if we are rendering a button
var button = search.querySelector("button");
if (props.hideButton == true) {
// Remove the button
search.removeChild(button);
}
else {
// Set the button type class name
var className = button_1.ButtonClassNames.getByType(props.btnType);
className ? button.classList.add(className) : null;
}
}
else {
// Remove the searchbox
search.parentNode.removeChild(search);
}
}
};
// Render the items
_Navbar.prototype.renderItems = function (itemTemplate) {
// Clear the list
this._items = [];
// Create the navbar list
var list = this.el.querySelector("ul.navbar-nav");
if (list) {
// Parse the items
var items = this.props.items || [];
for (var i = 0; i < items.length; i++) {
// Create the item
var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);
this._items.push(item);
list.appendChild(item.el);
// Call the render events
this.props.onItemRendered ? this.props.onItemRendered(item.el, items[i]) : null;
}
}
// Create the navbar right list
list = this.el.querySelectorAll("ul.navbar-nav")[1];
if (list) {
// See if no items exist
var items = this.props.itemsEnd || [];
if (items.length == 0) {
// Remove the element
list.remove();
}
else {
// Parse the items
for (var i = 0; i < items.length; i++) {
// Create the item
var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);
this._items.push(item);
list.appendChild(item.el);
}
}
}
};
/**
* Public Methods
*/
// Returns the current search value
_Navbar.prototype.getSearchValue = function () {
// Get the searchbox element
var searchbox = this.el.querySelector("form input");
if (searchbox) {
// Return the value
return searchbox.value;
}
// Return nothing by default
return "";
};
// Updates the navbar template type
_Navbar.prototype.setType = function (navbarType) {
// Remove the classes
this.el.classList.remove("navbar-dark");
this.el.classList.remove("navbar-light");
this.el.classList.remove("bg-dark");
this.el.classList.remove("bg-light");
this.el.classList.remove("bg-primary");
this._btnSearch.classList.remove("btn-outline-info");
this._btnSearch.classList.remove("btn-outline-light");
this._btnSearch.classList.remove("btn-outline-primary");
// See which classes to add
switch (navbarType) {
// Dark
case NavbarTypes.Dark:
// Add the class
this.el.classList.add("navbar-dark");
this.el.classList.add("bg-dark");
this._btnSearch.classList.add("btn-outline-info");
break;
// Default - Light
case NavbarTypes.Light:
// Add the class
this.el.classList.add("navbar-light");
this.el.classList.add("bg-light");
this._btnSearch.classList.add("btn-outline-primary");
break;
// Default - Primary
default:
// Add the class
this.el.classList.add("navbar-dark");
this.el.classList.add("bg-primary");
this._btnSearch.classList.add("btn-outline-light");
break;
}
};
return _Navbar;
}(base_1.Base));
var Navbar = function (props, template, itemTemplate) { return new _Navbar(props, template, itemTemplate); };
exports.Navbar = Navbar;