gd-bs/build/components/breadcrumb/index.js

Bootstrap JavaScript, TypeScript and Web Components library.

import { Base } from "../base";
import { HTML } from "./templates";
import { BreadcrumbItem } from "./item";
/**
 * Breadcrumb
 */
class _Breadcrumb extends Base {
    // Constructor
    constructor(props, template = HTML, itemTemplate) {
        super(template, props);
        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();
    }
    // Configures the events
    configureEvents(item) {
        // See if there is a click event
        if (this.props.onClick) {
            // Add the click event
            item.el.addEventListener("click", ev => {
                // Call the click event
                this.props.onClick(item.props, ev);
            });
        }
    }
    // Renders the breadcrumb items
    renderItem(itemProps) {
        // Render the item
        let item = new BreadcrumbItem(itemProps, this._itemTemplate);
        // Configure the events
        this.configureEvents(item);
        // Add the item
        this._elList.appendChild(item.el);
    }
    // Renders the breadcrumb items
    renderItems(itemProps = []) {
        // Get the list element
        this._elList = this.el.querySelector(".breadcrumb");
        if (this._elList) {
            // Parse the item properties
            for (let i = 0; i < itemProps.length; i++) {
                let 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. */
    add(item) {
        // Find the active item
        let 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. */
    remove() {
        // Get the last item
        let 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. */
    removeByName(name) {
        // Get the element
        let el = this._elList.querySelector("li.breadcrumb-item[data-name='" + name + "']");
        if (el) {
            // Remove the item
            this._elList.removeChild(el);
        }
    }
    /** Sets the breadcrumb items. */
    setItems(items = []) {
        // Clear the list
        while (this._elList.firstChild) {
            this._elList.removeChild(this._elList.firstChild);
        }
        // Render the items
        this.renderItems(items);
    }
}
export const Breadcrumb = (props, template, itemTemplate) => { return new _Breadcrumb(props, template, itemTemplate); };