gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
131 lines (130 loc) • 5.04 kB
JavaScript
;
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.Breadcrumb = void 0;
var base_1 = require("../base");
var templates_1 = require("./templates");
var item_1 = require("./item");
/**
* Breadcrumb
*/
var _Breadcrumb = /** @class */ (function (_super) {
__extends(_Breadcrumb, _super);
// Constructor
function _Breadcrumb(props, template, itemTemplate) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
_this._elList = null;
_this._itemTemplate = null;
// Set the template
_this._itemTemplate = itemTemplate;
// Render the items
_this.renderItems(_this.props.items);
// Configure the parent
_this.configureParent();
return _this;
}
// Configures the events
_Breadcrumb.prototype.configureEvents = function (item) {
var _this = this;
// See if there is a click event
if (this.props.onClick) {
// Add the click event
item.el.addEventListener("click", function (ev) {
// Call the click event
_this.props.onClick(item.props, ev);
});
}
};
// Renders the breadcrumb items
_Breadcrumb.prototype.renderItem = function (itemProps) {
// Render the item
var item = new item_1.BreadcrumbItem(itemProps, this._itemTemplate);
// Configure the events
this.configureEvents(item);
// Add the item
this._elList.appendChild(item.el);
};
// Renders the breadcrumb items
_Breadcrumb.prototype.renderItems = function (itemProps) {
if (itemProps === void 0) { itemProps = []; }
// Get the list element
this._elList = this.el.querySelector(".breadcrumb");
if (this._elList) {
// Parse the item properties
for (var i = 0; i < itemProps.length; i++) {
var itemProp = itemProps[i];
// Set the active flag
itemProp.isActive = i == itemProps.length - 1;
// Render the item
this.renderItem(itemProp);
}
}
};
/**
* Public Methods
*/
/** Adds a breadcrumb item. */
_Breadcrumb.prototype.add = function (item) {
// Find the active item
var elActive = this._elList.querySelector(".breadcrumb-item.active");
if (elActive) {
// Remove the class
elActive.classList.remove("active");
}
// Ensure this item is active
item.isActive = true;
// Add the item
this.renderItem(item);
};
/** Removes the last breadcrumb item. */
_Breadcrumb.prototype.remove = function () {
// Get the last item
var items = this._elList.querySelectorAll("li.breadcrumb-item");
if (items && items.length > 0) {
// Remove the last item
this._elList.removeChild(items[items.length - 1]);
// See if there is still an item
if (items.length > 1) {
// Make this item active
items[items.length - 2].classList.add("active");
}
}
};
/** Removes a breadcrumb item by it's name property. */
_Breadcrumb.prototype.removeByName = function (name) {
// Get the element
var el = this._elList.querySelector("li.breadcrumb-item[data-name='" + name + "']");
if (el) {
// Remove the item
this._elList.removeChild(el);
}
};
/** Sets the breadcrumb items. */
_Breadcrumb.prototype.setItems = function (items) {
if (items === void 0) { items = []; }
// Clear the list
while (this._elList.firstChild) {
this._elList.removeChild(this._elList.firstChild);
}
// Render the items
this.renderItems(items);
};
return _Breadcrumb;
}(base_1.Base));
var Breadcrumb = function (props, template, itemTemplate) { return new _Breadcrumb(props, template, itemTemplate); };
exports.Breadcrumb = Breadcrumb;