Changes for page CLB Search Component

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

From 7.2 to 7.1 From 7.34 to 7.33

From version 7.33

edited by bougault
on 2023/01/17 09:41

Change comment: There is no comment for this version

To version 7.2

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

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,120 +9,53 @@
          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 '';
--    }
--
--    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=';
++        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() {
++            // this.attachShadow({ mode: 'open' });
              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();
++            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);
--          this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
++
++        handleSearch() {
++            fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
++              .then(res => res.json())
++              .then(this.renderResults);
          }
--        get styles() {
--          return `
--            input[type="text"] {
--              	display: block;
--                width: 100%;
--                height: 36px;
--                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;
--            }
--
--          `
++        get searchInput() {
++            return this.shadowRoot.querySelector('input[type="text"]');
          }
--        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);
++        get searchButton() {
++            return this.shadowRoot.querySelector('button');
          }
--        handleKeyPress = (e) => {
--          if(e.code === 'Enter') {
--            this.handleSearch();
--          }
++        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];
@@ -135,7 +135,7 @@
          }
          render() {
--            this.shadowRoot.appendChild(this.template.content.cloneNode(true));
++            this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
          }
      }
  );
@@ -154,28 +154,20 @@
              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="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
++                    <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>