Changes for page CLB Search Component

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

From 7.34 to 7.35 From 7.38 to 7.39

From version 7.35

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

Change comment: There is no comment for this version

To version 7.38

edited by bougault
on 2023/01/17 10:30

Change comment: There is no comment for this version

Raw
Rendered

Summary

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

Details

Page properties

Content

@@ -1,183 +7,4 @@
--{{html clean="false"}}
--<script>
--class ClbComponent extends HTMLElement {
--    constructor() {
--        super();
--    }
--    connectedCallback() {
--        this.attachShadow({ mode: 'open'});
--    }
--
--    get template() {
--        const template = document.createElement('template');
--        template.innerHTML = `
--          <style>
--            ${this.styles}
--          </style>
--          ${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 `
--                <div>
--                    <input type="text"><button id="search">Search</button>
--                    <div id="results"></div>
--                    <button id="prev">prev</button>
--                    <button id="next">next</button>
--                </div>
--            `;
--        }
--
--        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 `
--                <div>
--                    <a href="/bin/view/${this.hrefAttr}">${this.titleAttr}</a>
--                    <div>
--                        <slot></slot>
--                    </div>
--                </div>       `
--        }
--
--        connectedCallback() {
--            this.attachShadow({ mode: 'open' });
--            this.shadowRoot.appendChild(this.template.content.cloneNode(true));
--        }
--
--    }
--);
--</script>
++{{html clean="false"}}
  <clb-simplified-search></clb-simplified-search>
  {{/html}}