@teipublisher/pb-components 2.26.0-next-3.12 → 2.26.0-next-3.13

package/src/pb-search.js

@@ -1,9 +1,9 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { registry } from "./urls.js";
-import { translate } from "./pb-i18n.js";
+import { registry } from './urls.js';
+import { translate } from './pb-i18n.js';
 import '@polymer/iron-ajax';
-import {themableMixin} from "./theming.js";
+import { themableMixin } from './theming.js';
 
 /**
  * Implements a basic search form, which can be extended with additional inputs.
@@ -22,270 +22,281 @@ import {themableMixin} from "./theming.js";
  * @fires pb-search-resubmit - When received, triggers the search again
  */
 export class PbSearch extends themableMixin(pbMixin(LitElement)) {
-    static get properties() {
-        return {
-            ...super.properties,
-            action: {
-                type: String
-            },
-            name: {
-                type: String
-            },
-            value: {
-                type: String
-            },
-            start: {
-                type: Number
-            },
-            placeHolder: {
-                type: String,
-                attribute: 'place-holder'
-            },
-            redirect: {
-                type: Boolean
-            },
-            currentDoc: {
-                type: String,
-                attribute: 'current-doc'
-            },
-            submitOnLoad: {
-                type: Boolean,
-                attribute: 'submit-on-load'
-            },
-            subforms: {
-                type: String
-            },
-            disableAutocomplete: {
-                type: Boolean,
-                attribute: 'disable-autocomplete'
-            },
-            /**
-             * Optional URL to query for suggestions. If relative, it is interpreted
-             * relative to the endpoint defined on a surrounding `pb-page`.
-             *
-             * Upon autocomplete, the current input by the user will be sent with a query parameter
-             * `query`. The name/values of form controls nested within `pb-search` or subforms will also be
-             * appended to the request as parameters. This allows the server side code to distinguish
-             * different states.
-             */
-            source: {
-                type: String
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      action: {
+        type: String,
+      },
+      name: {
+        type: String,
+      },
+      value: {
+        type: String,
+      },
+      start: {
+        type: Number,
+      },
+      placeHolder: {
+        type: String,
+        attribute: 'place-holder',
+      },
+      redirect: {
+        type: Boolean,
+      },
+      currentDoc: {
+        type: String,
+        attribute: 'current-doc',
+      },
+      submitOnLoad: {
+        type: Boolean,
+        attribute: 'submit-on-load',
+      },
+      subforms: {
+        type: String,
+      },
+      disableAutocomplete: {
+        type: Boolean,
+        attribute: 'disable-autocomplete',
+      },
+      /**
+       * Optional URL to query for suggestions. If relative, it is interpreted
+       * relative to the endpoint defined on a surrounding `pb-page`.
+       *
+       * Upon autocomplete, the current input by the user will be sent with a query parameter
+       * `query`. The name/values of form controls nested within `pb-search` or subforms will also be
+       * appended to the request as parameters. This allows the server side code to distinguish
+       * different states.
+       */
+      source: {
+        type: String,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.name = 'query';
-        this.value = '';
-        this.redirect = false;
-        this.submitOnLoad = false;
-        this.placeHolder = 'search.placeholder';
-        this.disableAutocomplete = false;
-        this.start = 1;
-    }
+  constructor() {
+    super();
+    this.name = 'query';
+    this.value = '';
+    this.redirect = false;
+    this.submitOnLoad = false;
+    this.placeHolder = 'search.placeholder';
+    this.disableAutocomplete = false;
+    this.start = 1;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-        this.subscribeTo('pb-search-resubmit', this._doSearch.bind(this));
-        this.subscribeTo('pb-paginate', (ev) => {
-            this.start = ev.detail.params.start;
-            this._doSearch(true);
-        });
+    this.subscribeTo('pb-search-resubmit', this._doSearch.bind(this));
+    this.subscribeTo('pb-paginate', ev => {
+      this.start = ev.detail.params.start;
+      this._doSearch(true);
+    });
 
-        registry.subscribe(this, (state) => {
-            this.value = state.query || '';
-            this.start = state.start || 1;
-            if (this.submitOnLoad) {
-                this.emitTo('pb-load', {
-                    "url": this.action,
-                    "params": state
-                });
-            }
+    registry.subscribe(this, state => {
+      this.value = state.query || '';
+      this.start = state.start || 1;
+      if (this.submitOnLoad) {
+        this.emitTo('pb-load', {
+          url: this.action,
+          params: state,
         });
-    }
+      }
+    });
+  }
 
-    firstUpdated() {
-        waitOnce('pb-page-ready', (options) => {
-            const loader = this.shadowRoot.getElementById('autocompleteLoader');
-            const url = this.source || "api/search/autocomplete";
-            if (this.minApiVersion('1.0.0')) {
-                loader.url = `${options.endpoint}/${url}`;
-            } else {
-                loader.url = `${options.endpoint}/modules/autocomplete.xql`;
-            }
-        });
-
-        if (this.submitOnLoad) {
-            const params = registry.state;
-            registry.replace(this, params);
-            this.emitTo('pb-load', {
-                "url": this.action,
-                "params": params
-            });
-        }
+  firstUpdated() {
+    waitOnce('pb-page-ready', options => {
+      const loader = this.shadowRoot.getElementById('autocompleteLoader');
+      const url = this.source || 'api/search/autocomplete';
+      if (this.minApiVersion('1.0.0')) {
+        loader.url = `${options.endpoint}/${url}`;
+      } else {
+        loader.url = `${options.endpoint}/modules/autocomplete.xql`;
+      }
+    });
 
-        this.addEventListener('click', (e) => {
-            const root = e.target.closest('[slot]');
-            if (!root) {
-                return;
-            }
-            if (root.slot === 'searchButton'){
-                this._doSearch();
-            }
-            if (root.slot === 'resetButton'){
-                this._reset();
-            }
-        });
+    if (this.submitOnLoad) {
+      const params = registry.state;
+      registry.replace(this, params);
+      this.emitTo('pb-load', {
+        url: this.action,
+        params,
+      });
     }
 
-    render() {
-        return html`
-            <form id="searchPageForm" method="get" action="${this.action}" accept="text/html" @submit="${this._handleSubmit}">
-                <slot name="beforeInput"></slot>
-                <div class="input-wrapper">
-                    <input
-                        id="search"
-                        name="query"
-                        type="search"
-                        placeholder="${translate(this.placeHolder)}"
-                        .value="${this.value}"
-                        @keyup="${this._handleEnter}"
-                        list="suggestions"
-                        part="input"
-                    />
-                    <datalist id="suggestions"></datalist>
-                    <slot name="searchButton" part="search-button"></slot>
-                    <slot name="resetButton"></slot>
-                </div>
-                <slot></slot>
-            </form>
-            <iron-ajax
-                id="autocompleteLoader"
-                verbose
-                handle-as="json"
-                method="get"
-                with-credentials
-                @response="${this._updateSuggestions}"></iron-ajax>
-        `;
-    }
+    this.addEventListener('click', e => {
+      const root = e.target.closest('[slot]');
+      if (!root) {
+        return;
+      }
+      if (root.slot === 'searchButton') {
+        this._doSearch();
+      }
+      if (root.slot === 'resetButton') {
+        this._reset();
+      }
+    });
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: inline-block;
-            }
-            .input-wrapper {
-                display: flex;
-                align-items: center;
-            }
-            #search {
-                flex: 2;
-            }
-        `;
-    }
+  render() {
+    return html`
+      <form
+        id="searchPageForm"
+        method="get"
+        action="${this.action}"
+        accept="text/html"
+        @submit="${this._handleSubmit}"
+      >
+        <slot name="beforeInput"></slot>
+        <div class="input-wrapper">
+          <input
+            id="search"
+            name="query"
+            type="search"
+            placeholder="${translate(this.placeHolder)}"
+            .value="${this.value}"
+            @keyup="${this._handleEnter}"
+            list="suggestions"
+            part="input"
+          />
+          <datalist id="suggestions"></datalist>
+          <slot name="searchButton" part="search-button"></slot>
+          <slot name="resetButton"></slot>
+        </div>
+        <slot></slot>
+      </form>
+      <iron-ajax
+        id="autocompleteLoader"
+        verbose
+        handle-as="json"
+        method="get"
+        with-credentials
+        @response="${this._updateSuggestions}"
+      ></iron-ajax>
+    `;
+  }
 
-    _serializeForm() {
-        const form = this.shadowRoot.getElementById('searchPageForm');
-        const formData = new FormData(form);
-        const json = {};
-        // @ts-ignore - FormData.entries() is supported in modern browsers
-        for (let [key, value] of formData.entries()) {
-            json[key] = value;
-        }
-        
-        // Also collect form controls from slots
-        const formControls = this.querySelectorAll('input, select, textarea');
-        formControls.forEach(control => {
-            if (control.name && control.type !== 'button' && control.type !== 'submit' && control.type !== 'reset') {
-                if (control.type === 'checkbox' || control.type === 'radio') {
-                    if (control.checked) {
-                        json[control.name] = control.value;
-                    }
-                } else {
-                    json[control.name] = control.value;
-                }
-            }
-        });
-        
-        return json;
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      .input-wrapper {
+        display: flex;
+        align-items: center;
+      }
+      #search {
+        flex: 2;
+      }
+    `;
+  }
+
+  _serializeForm() {
+    const form = this.shadowRoot.getElementById('searchPageForm');
+    const formData = new FormData(form);
+    const json = {};
+    // @ts-ignore - FormData.entries() is supported in modern browsers
+    for (const [key, value] of formData.entries()) {
+      json[key] = value;
     }
 
-    _doSearch(pagination = false) {
-        let json = this._serializeForm();
-        json = this._paramsFromSubforms(json);
-        json.start = pagination ? this.start : 1;
-        if (this.redirect) {
-            const params = new URLSearchParams();
-            Object.keys(json).forEach(key => {
-                params.append(key, json[key]);
-            });
-            window.location.href = `${this.action}?${params}`;
+    // Also collect form controls from slots
+    const formControls = this.querySelectorAll('input, select, textarea');
+    formControls.forEach(control => {
+      if (
+        control.name &&
+        control.type !== 'button' &&
+        control.type !== 'submit' &&
+        control.type !== 'reset'
+      ) {
+        if (control.type === 'checkbox' || control.type === 'radio') {
+          if (control.checked) {
+            json[control.name] = control.value;
+          }
         } else {
-            registry.commit(this, json);
-            this.emitTo('pb-load', {
-                "url": this.action,
-                "params": json
-            });
+          json[control.name] = control.value;
         }
-    }
+      }
+    });
 
-    _handleSubmit(e) {
-        e.preventDefault();
-        this._doSearch();
-    }
+    return json;
+  }
 
-    _paramsFromSubforms(params) {
-        if (this.subforms) {
-            document.querySelectorAll(this.subforms).forEach((form) => {
-                if (form.serializeForm) {
-                    Object.assign(params, form.serializeForm());
-                }
-            });
-        }
-        return params;
+  _doSearch(pagination = false) {
+    let json = this._serializeForm();
+    json = this._paramsFromSubforms(json);
+    json.start = pagination ? this.start : 1;
+    if (this.redirect) {
+      const params = new URLSearchParams();
+      Object.keys(json).forEach(key => {
+        params.append(key, json[key]);
+      });
+      window.location.href = `${this.action}?${params}`;
+    } else {
+      registry.commit(this, json);
+      this.emitTo('pb-load', {
+        url: this.action,
+        params: json,
+      });
     }
+  }
 
-    _handleEnter(e) {
-        if (e.keyCode === 13) {
-            return this._doSearch();
-        }
-        const value = this.shadowRoot.getElementById('search').value;
-        if (value.length > 2) {
-            const loader = this.shadowRoot.getElementById('autocompleteLoader');
-            loader.params = {
-                query: value
-            };
-            loader.generateRequest();
+  _handleSubmit(e) {
+    e.preventDefault();
+    this._doSearch();
+  }
+
+  _paramsFromSubforms(params) {
+    if (this.subforms) {
+      document.querySelectorAll(this.subforms).forEach(form => {
+        if (form.serializeForm) {
+          Object.assign(params, form.serializeForm());
         }
+      });
     }
+    return params;
+  }
 
-    _doSubmit() {
-        this._doSearch();
+  _handleEnter(e) {
+    if (e.keyCode === 13) {
+      return this._doSearch();
     }
-
-    _reset() {
-        const form = this.shadowRoot.getElementById('searchPageForm');
-        form.reset();
-        registry.commit(this, {}, true);
+    const { value } = this.shadowRoot.getElementById('search');
+    if (value.length > 2) {
+      const loader = this.shadowRoot.getElementById('autocompleteLoader');
+      loader.params = {
+        query: value,
+      };
+      loader.generateRequest();
     }
+  }
 
-    _updateSuggestions() {
-        const loader = this.shadowRoot.getElementById('autocompleteLoader');
-        const datalist = this.shadowRoot.getElementById('suggestions');
-        if (loader.lastResponse) {
-            datalist.innerHTML = '';
-            loader.lastResponse.forEach(({text, value}) => {
-                const option = document.createElement('option');
-                option.value = value;
-                option.innerText = text;
-                datalist.appendChild(option);
-            });
-        }
+  _doSubmit() {
+    this._doSearch();
+  }
+
+  _reset() {
+    const form = this.shadowRoot.getElementById('searchPageForm');
+    form.reset();
+    registry.commit(this, {}, true);
+  }
+
+  _updateSuggestions() {
+    const loader = this.shadowRoot.getElementById('autocompleteLoader');
+    const datalist = this.shadowRoot.getElementById('suggestions');
+    if (loader.lastResponse) {
+      datalist.innerHTML = '';
+      loader.lastResponse.forEach(({ text, value }) => {
+        const option = document.createElement('option');
+        option.value = value;
+        option.innerText = text;
+        datalist.appendChild(option);
+      });
     }
+  }
 }
 if (!customElements.get('pb-search')) {
-    customElements.define('pb-search', PbSearch);
+  customElements.define('pb-search', PbSearch);
 }
-