Changes for page CLB Search Component

Last modified by bougault on 2023/01/17 11:42

From 7.1 to 6.1 From 7.21 to 7.20

From version 7.20

edited by bougault
on 2023/01/13 14:33

Change comment: There is no comment for this version

To version 7.1

edited by bougault
on 2023/01/13 13:26

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

@@ -9,37 +9,19 @@
          this.attachShadow({ mode: 'open'});
      }
--    get template() {
++    createTemplate(htmlString) {
          const template = document.createElement('template');
--        template.innerHTML = `
--          <style>
--            ${this.styles}
--          </style>
--          ${this.html}
--        `;
++        template.innerHTML = htmlString;
          return template;
      }
--
--
--    get styles() {
--      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=';
++        searchBaseUrl = 'https://wiki-dev.ebrains.eu/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() {
@@ -46,56 +46,34 @@
              // this.attachShadow({ mode: 'open' });
              super.connectedCallback();
              this.render();
--            this.$('#search').addEventListener('click', this.handleSearch);
--            this.$('#prev').addEventListener('click', this.handlePrevPage);
--            this.$('#next').addEventListener('click', this.handleNextPage;
++            this.searchButton.addEventListener('click', () => this.handleSearch());
          }
--        disconnectedCallback() {
--          this.$('#search').removeEventListener('click', this.handleSearch;
--          this.$('#prev').removeEventListener('click', this.handlePrevPage);
--          this.$('#next').removeEventListener('click', this.handleNextPage);
++
++        handleSearch() {
++            fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
++              .then(res => res.json())
++              .then(this.renderResults);
          }
--        get styles() {
--          return `
--            input[type="text"] {
--              border: 1px solid red;
--            }
--          `
++        get searchInput() {
++            return this.shadowRoot.querySelector('input[type="text"]');
          }
--        handlePrevPage = () => {
--          if(this.offset > 0) {
--            this.offset--;
--            this.handleSearch();
--          }
++
++        get searchButton() {
++            return this.shadowRoot.querySelector('button');
          }
--        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);
++        get searchInputTemplate() {
++            return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
          }
--
--        get html() {
--            return `
--                <div>
--                    <input type="text"><button id="search">Search</button>
--                    <div id="results"></div>
--                    <button id="prev">prev</button>
--                    <button id="next">next</button>
--                </div>
--            `;
++        resultsContainer = () => {
++            return this.shadowRoot.querySelector('#results');
          }
--        renderResults = (results) => {
--            const resultsContainer = this.$('#results');
++        renderResults(results) {
++            const resultsContainer = this.shadowRoot.querySelector('#results');
              resultsContainer.replaceChildren();
              for(let i = 0, j = results.length; i < j; i++) {
                  const { title_, spaces, doccontent_en } = results[i];
@@ -108,7 +108,7 @@
          }
          render() {
--            this.shadowRoot.appendChild(this.template.content.cloneNode(true));
++            this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
          }
      }
  );
@@ -127,29 +127,21 @@
              return this.getAttribute('data-href');
          }
--        get styles() {
--          return `
--              a {
--                color: var(--color-brand-primary);
--              }
--          `;
--        }
--        get html() {
--          return `
++        get resultTemplate() {
++            return this.createTemplate(`
                  <div>
                      <a href=${this.hrefAttr}>${this.titleAttr}</a>
                      <div>
                          <slot></slot>
                      </div>
--                </div>       `
++                </div>
++                `);
          }
--
          connectedCallback() {
              this.attachShadow({ mode: 'open' });
--            this.shadowRoot.appendChild(this.template.content.cloneNode(true));
++            this.shadowRoot.appendChild(this.resultTemplate.content.cloneNode(true));
          }
      }
  );
  </script>
--<clb-simplified-search></clb-simplified-search>
  {{/html}}