BookStack/resources/assets/js/components/entity-selector.js

class EntitySelector {

    constructor(elem) {
        this.elem = elem;
        this.search = '';
        this.lastClick = 0;

        let entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
        this.searchUrl = window.baseUrl(`/ajax/search/entities?types=${encodeURIComponent(entityTypes)}`);

        this.input = elem.querySelector('[entity-selector-input]');
        this.searchInput = elem.querySelector('[entity-selector-search]');
        this.loading = elem.querySelector('[entity-selector-loading]');
        this.resultsContainer = elem.querySelector('[entity-selector-results]');

        this.elem.addEventListener('click', this.onClick.bind(this));

        let lastSearch = 0;
        this.searchInput.addEventListener('input', event => {
            lastSearch = Date.now();
            this.showLoading();
            setTimeout(() => {
                if (Date.now() - lastSearch < 199) return;
                this.searchEntities(this.searchInput.value);
            }, 200);
        });
        this.searchInput.addEventListener('keydown', event => {
            if (event.keyCode === 13) event.preventDefault();
        });

        this.showLoading();
        this.initialLoad();
    }

    showLoading() {
        this.loading.style.display = 'block';
        this.resultsContainer.style.display = 'none';
    }

    hideLoading() {
        this.loading.style.display = 'none';
        this.resultsContainer.style.display = 'block';
    }

    initialLoad() {
        window.$http.get(this.searchUrl).then(resp => {
            this.resultsContainer.innerHTML = resp.data;
            this.hideLoading();
        })
    }

    searchEntities(searchTerm) {
        this.input.value = '';
        let url = this.searchUrl + `&term=${encodeURIComponent(searchTerm)}`;
        window.$http.get(url).then(resp => {
            this.resultsContainer.innerHTML = resp.data;
            this.hideLoading();
        });
    }

    isDoubleClick() {
        let now = Date.now();
        let answer = now - this.lastClick < 300;
        this.lastClick = now;
        return answer;
    }

    onClick(event) {
        let t = event.target;
        console.log('click', t);

        if (t.matches('.entity-list-item  *')) {
            event.preventDefault();
            event.stopPropagation();
            let item = t.closest('[data-entity-type]');
            this.selectItem(item);
        } else if (t.matches('[data-entity-type]')) {
            this.selectItem(t)
        }

    }

    selectItem(item) {
        let isDblClick = this.isDoubleClick();
        let type = item.getAttribute('data-entity-type');
        let id = item.getAttribute('data-entity-id');
        let isSelected = !item.classList.contains('selected') || isDblClick;

        this.unselectAll();
        this.input.value = isSelected ? `${type}:${id}` : '';

        if (!isSelected) window.$events.emit('entity-select-change', null);
        if (isSelected) {
            item.classList.add('selected');
            item.classList.add('primary-background');
        }
        if (!isDblClick && !isSelected) return;

        let link = item.querySelector('.entity-list-item-link').getAttribute('href');
        let name = item.querySelector('.entity-list-item-name').textContent;
        let data = {id: Number(id), name: name, link: link};

        if (isDblClick) window.$events.emit('entity-select-confirm', data);
        if (isSelected) window.$events.emit('entity-select-change', data);
    }

    unselectAll() {
        let selected = this.elem.querySelectorAll('.selected');
        for (let i = 0, len = selected.length; i < len; i++) {
            selected[i].classList.remove('selected');
            selected[i].classList.remove('primary-background');
        }
    }

}

module.exports = EntitySelector;