Changes for page CLB Search Component

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

From 7.17 to 7.16 From 7.36 to 7.35

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.17

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

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,24 +9,20 @@
          this.attachShadow({ mode: 'open'});
      }
--    get template() {
++    createTemplate(htmlString) {
          const template = document.createElement('template');
          template.innerHTML = `
            <style>
              ${this.styles}
            </style>
--          ${this.html}
++          ${htmlString}
          `;
          return template;
      }
      get styles() {
--      return '';
++      return ``;
      }
--
--    get html() {
--      return '';
--    }
      $(selector) {
          return this.shadowRoot.querySelector(selector);
      }
@@ -46,56 +46,29 @@
          }
          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.$('#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();
++            });
          }
--        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;
++              border: 1px solid red;
              }
--
            `
          }
--        handlePrevPage = () => {
--          if(this.offset > 0) {
--            this.offset--;
--            this.handleSearch();
--          }
--        }
--        handleNextPage = () => {
--          this.offset++;
--          this.handleSearch();
--        }
          handleSearch = () => {
              const value = this.$('input[type="text"]').value;
@@ -104,14 +104,9 @@
              .then(this.renderResults);
          }
--        handleKeyPress = (e) => {
--          if(e.code === 'Enter') {
--            this.handleSearch();
--          }
--        }
--        get html() {
--            return `
++        get searchInputTemplate() {
++            return this.createTemplate(`
                  <div>
                      <input type="text"><button id="search">Search</button>
                      <div id="results"></div>
@@ -118,7 +118,7 @@
                      <button id="prev">prev</button>
                      <button id="next">next</button>
                  </div>
--            `;
++            `);
          }
          renderResults = (results) => {
@@ -135,7 +135,7 @@
          }
          render() {
--            this.shadowRoot.appendChild(this.template.content.cloneNode(true));
++            this.shadowRoot.appendChild(this.searchInputTemplate.content.cloneNode(true));
          }
      }
  );
@@ -161,21 +161,21 @@
                }
            `;
          }
--        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>