CLB Search Component

class ClbComponent extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open'});
    }

    createTemplate(htmlString) {
        const template = document.createElement('template');
        template.innerHTML = htmlString;
        return template;
    }

    $(selector) {
        return this.shadowRoot.querySelector(selector);
    }

    $$(selector) {
        return this.shadowRoot.querySelectorAll(selector);
    }
}

customElements.define('clb-simplified-search',
    class extends ClbComponent {
        searchBaseUrl = '/bin/get/XWiki/SuggestSolrService?outputSyntax=plain&media=json&nb=10&offset=0&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
        constructor() {
            super();
            this.results = [];
            this.offset = 0;
        }

        connectedCallback() {
            // this.attachShadow({ mode: 'open' });
            super.connectedCallback();
            this.render();
            this.$('#search').addEventListener('click', () => this.handleSearch());
            this.$('#prev').addEventListener('click', () => {
                if(this.offset > 0) {
                    this.offset--;
                    this.handleSearch();
                }
            });
            this.$('#next').addEventListener('click', () => {
                this.offset++;
                this.handleSearch();
            });
        }


        handleSearch = () => {
            const value = this.$('input[type="text"]').value;
            fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}&offset=${this.offset}&nb=10`)
            .then(res => res.json())
            .then(this.renderResults);
        }


        get searchInputTemplate() {
            return this.createTemplate(`
                

                    
                    

                    
                    
                
            `);
        }

        renderResults = (results) => {
            const resultsContainer = this.$('#results');
            resultsContainer.replaceChildren();
            for(let i = 0, j = results.length; i < j; i++) {
                const { title_, spaces, doccontent_en } = results[i];
                const elt = document.createElement('clb-search-result');
                elt.setAttribute('data-title', title_);
                elt.setAttribute('data-href', spaces.join('/'));
                elt.innerHTML = doccontent_en;
                resultsContainer.appendChild(elt);
            }
        }

        render() {
            this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
        }
    }
);

customElements.define('clb-search-result',
    class extends ClbComponent {
        constructor() {
            super();
        }

        get titleAttr() {
            return this.getAttribute('data-title');
        }

        get hrefAttr() {
            return this.getAttribute('data-href');
        }

        get resultTemplate() {
            return this.createTemplate(`
                

                    ${this.titleAttr}
                    

                        
                    
                
                `);
        }
        connectedCallback() {
            this.attachShadow({ mode: 'open' });
            this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
        }
    }
);