CLB Search Component

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

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

    get template() {
        const template = document.createElement('template');
        template.innerHTML = `
          
            ${this.styles}
          
          ${this.html}
        `;
        return template;
    }

    get styles() {
      return '';
    }

    get html() {
      return '';
    }
    $(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&query=q%3D%22__INPUT__%22~100%0Afq%3Dtype%3ADOCUMENT%0Afq%3Dspace%3ACollabs.*&input=';
        constructor() {
            super();
            this.results = [];
            this.offset = 0;
        }

        connectedCallback() {
            super.connectedCallback();
            this.render();
            const searchInput = this.$('input[type="text"]');
            this.$('#search').addEventListener('click', this.handleSearch);
            this.$('#prev').addEventListener('click', this.handlePrevPage);
            this.$('#next').addEventListener('click', this.handleNextPage);
            searchInput.addEventListener('keypress', this.handleKeyPress);
            searchInput.focus();
        }

        disconnectedCallback() {
          this.$('#search').removeEventListener('click', this.handleSearch);
          this.$('#prev').removeEventListener('click', this.handlePrevPage);
          this.$('#next').removeEventListener('click', this.handleNextPage);
          this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
        }

        get styles() {
          return `
            input[type="text"] {
               display: block;
                width: 100%;
box-sizing: border-box;
                padding: 6px 12px;
                font-size: 16px;
                line-height: 1.428571429;
                color: #555555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            }

          `
        }
        handlePrevPage = () => {
          if(this.offset > 0) {
            this.offset--;
            this.handleSearch();
          }
        }
        handleNextPage = () => {
          this.offset++;
          this.handleSearch();
        }

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

        handleKeyPress = (e) => {
          if(e.code === 'Enter') {
            this.handleSearch();
          }
        }

        get html() {
            return `
                

                    
                    

                    
                    
                
            `;
        }

        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.template.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 styles() {
          return `
              a {
                color: var(--color-brand-primary);
              }
          `;
        }
        get html() {
          return `
                

                    ${this.titleAttr}
                    

                        
                    
                
       `
        }

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

    }
);