BookStack/resources/assets/js/components/breadcrumb-listing.js

class BreadcrumbListing {

    constructor(elem) {
        this.elem = elem;
        this.searchInput = elem.querySelector('input');
        this.loadingElem = elem.querySelector('.loading-container');
        this.entityListElem = elem.querySelector('.breadcrumb-listing-entity-list');
        this.toggleElem = elem.querySelector('[dropdown-toggle]');

        // this.loadingElem.style.display = 'none';
        const entityDescriptor = elem.getAttribute('breadcrumb-listing').split(':');
        this.entityType = entityDescriptor[0];
        this.entityId = Number(entityDescriptor[1]);

        this.toggleElem.addEventListener('click', this.onShow.bind(this));
        this.searchInput.addEventListener('input', this.onSearch.bind(this));
        this.elem.addEventListener('keydown', this.keyDown.bind(this));
    }

    keyDown(event) {
        if (event.key === 'ArrowDown') {
            this.listFocusChange(1);
            event.preventDefault();
        } else if  (event.key === 'ArrowUp') {
            this.listFocusChange(-1);
            event.preventDefault();
        }
    }

    listFocusChange(indexChange = 1) {
        const links = Array.from(this.entityListElem.querySelectorAll('a:not(.hidden)'));
        const currentFocused = this.entityListElem.querySelector('a:focus');
        const currentFocusedIndex = links.indexOf(currentFocused);
        const defaultFocus = (indexChange > 0) ? links[0] : this.searchInput;
        const nextElem = links[currentFocusedIndex + indexChange] || defaultFocus;
        nextElem.focus();
    }

    onShow() {
        this.loadEntityView();
    }

    onSearch() {
        const input = this.searchInput.value.toLowerCase().trim();
        const listItems = this.entityListElem.querySelectorAll('.entity-list-item');
        for (let listItem of listItems) {
            const match = !input || listItem.textContent.toLowerCase().includes(input);
            listItem.style.display = match ? 'flex' : 'none';
            listItem.classList.toggle('hidden', !match);
        }
    }

    loadEntityView() {
        this.toggleLoading(true);

        const params = {
            'entity_id': this.entityId,
            'entity_type': this.entityType,
        };

        window.$http.get('/search/entity/siblings', {params}).then(resp => {
            this.entityListElem.innerHTML = resp.data;
        }).catch(err => {
            console.error(err);
        }).then(() => {
            this.toggleLoading(false);
            this.onSearch();
        });
    }

    toggleLoading(show = false) {
        this.loadingElem.style.display = show ? 'block' : 'none';
    }

}

export default BreadcrumbListing;