@teipublisher/pb-components 1.34.2 → 1.35.1

package/dist/pb-elements.json

@@ -754,6 +754,18 @@
           "type": "array",
           "default": "[]"
         },
+        {
+          "name": "preload",
+          "description": "If set, the entire list of possible suggestions will be preloaded upon initialization of the\ncomponent.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "substring",
+          "description": "By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix\ntyped by the user are shown. Set this property to true to search for the user-provided string\nanywhere within the suggestion text.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -828,6 +840,20 @@
         {
           "name": "lastSelected"
         },
+        {
+          "name": "preload",
+          "attribute": "preload",
+          "description": "If set, the entire list of possible suggestions will be preloaded upon initialization of the\ncomponent.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "substring",
+          "attribute": "substring",
+          "description": "By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix\ntyped by the user are shown. Set this property to true to search for the user-provided string\nanywhere within the suggestion text.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -8258,6 +8284,11 @@
           "type": "string",
           "default": "\"search.placeholder\""
         },
+        {
+          "name": "disable-autocomplete",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -8330,6 +8361,12 @@
           "type": "string",
           "default": "\"search.placeholder\""
         },
+        {
+          "name": "disableAutocomplete",
+          "attribute": "disable-autocomplete",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -10548,6 +10585,10 @@
         {
           "name": "--pb-footnote-font-family",
           "description": "Font family for the footnote marker"
+        },
+        {
+          "name": "--pb-view-scroll-margin-top",
+          "description": "Applied to any element with an id"
         }
       ],
       "cssParts": [
@@ -10981,6 +11022,10 @@
         {
           "name": "--pb-footnote-font-family",
           "description": "Font family for the footnote marker"
+        },
+        {
+          "name": "--pb-view-scroll-margin-top",
+          "description": "Applied to any element with an id"
         }
       ],
       "cssParts": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.34.2",
+  "version": "1.35.1",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -754,6 +754,18 @@
           "type": "array",
           "default": "[]"
         },
+        {
+          "name": "preload",
+          "description": "If set, the entire list of possible suggestions will be preloaded upon initialization of the\ncomponent.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "substring",
+          "description": "By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix\ntyped by the user are shown. Set this property to true to search for the user-provided string\nanywhere within the suggestion text.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -828,6 +840,20 @@
         {
           "name": "lastSelected"
         },
+        {
+          "name": "preload",
+          "attribute": "preload",
+          "description": "If set, the entire list of possible suggestions will be preloaded upon initialization of the\ncomponent.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "substring",
+          "attribute": "substring",
+          "description": "By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix\ntyped by the user are shown. Set this property to true to search for the user-provided string\nanywhere within the suggestion text.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -8258,6 +8284,11 @@
           "type": "string",
           "default": "\"search.placeholder\""
         },
+        {
+          "name": "disable-autocomplete",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -8330,6 +8361,12 @@
           "type": "string",
           "default": "\"search.placeholder\""
         },
+        {
+          "name": "disableAutocomplete",
+          "attribute": "disable-autocomplete",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -10548,6 +10585,10 @@
         {
           "name": "--pb-footnote-font-family",
           "description": "Font family for the footnote marker"
+        },
+        {
+          "name": "--pb-view-scroll-margin-top",
+          "description": "Applied to any element with an id"
         }
       ],
       "cssParts": [
@@ -10981,6 +11022,10 @@
         {
           "name": "--pb-footnote-font-family",
           "description": "Font family for the footnote marker"
+        },
+        {
+          "name": "--pb-view-scroll-margin-top",
+          "description": "Applied to any element with an id"
         }
       ],
       "cssParts": [

package/src/pb-autocomplete.js

@@ -6,6 +6,31 @@ import '@polymer/iron-ajax';
 import '@polymer/iron-icon';
 import '@cwmr/paper-autocomplete/paper-autocomplete-suggestions.js';
 
+function _query(datasource, query) {
+    const queryResult = [];
+    datasource.forEach((item) => {
+      let objText, objValue;
+
+      if (typeof item === 'object') {
+        objText = item.text;
+        objValue = item.value;
+      } else {
+        objText = item.toString();
+        objValue = objText;
+      }
+
+      if (objText.toLowerCase().indexOf(query) > -1) {
+        // NOTE: the structure of the result object matches with the current template. For custom templates, you
+        // might need to return more data
+        const resultItem = {};
+        resultItem.text = objText;
+        resultItem.value = objValue;
+        queryResult.push(resultItem);
+      }
+    });
+    return queryResult;
+}
+
 /**
  * Provides an input with attached autocomplete. The autocomplete suggestions can be read
  * either from a static list or a remote endpoint to which the current user input is sent.
@@ -52,6 +77,13 @@ export class PbAutocomplete extends pbMixin(LitElement) {
             source: {
                 type: String
             },
+            /**
+             * If set, the entire list of possible suggestions will be preloaded upon initialization of the
+             * component.
+             */
+            preload: {
+                type: Boolean
+            },
             /**
              * A static list of suggestions. Use instead of `source`. May either be a flat array of strings,
              * or an array containing objects of the form `{"text": "", "value": ""}, in which case "value" denotes
@@ -60,6 +92,14 @@ export class PbAutocomplete extends pbMixin(LitElement) {
             suggestions: {
                 type: Array
             },
+            /**
+             * By default suggestions are filtered by prefix, i.e. only suggestions starting with the prefix
+             * typed by the user are shown. Set this property to true to search for the user-provided string
+             * anywhere within the suggestion text.
+             */
+            substring: {
+                type: Boolean
+            },
             /**
              * An icon to display next to the input.
              */
@@ -74,6 +114,8 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         this.placeholder = 'search.placeholder';
         this.suggestions = [];
         this.lastSelected = null;
+        this.preload = false;
+        this.substring = false;
         this._hiddenInput = null;
         this._initialized = false;
     }
@@ -94,7 +136,14 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         const autocomplete = this.shadowRoot.getElementById('autocomplete'); 
         autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
 
-        if (this.value) {
+        if (this.preload && this.source) {
+            if (this.substring) {
+                autocomplete.queryFn = _query;
+            }
+            PbAutocomplete.waitOnce('pb-page-ready', () => {
+                this._sendRequest();
+            });
+        } else if (this.value) {
             if (this.source) {
                 PbAutocomplete.waitOnce('pb-page-ready', () => {
                     //console.log('send autocomplete request for remote source %s on value %s', this.source, this.value);
@@ -140,7 +189,7 @@ export class PbAutocomplete extends pbMixin(LitElement) {
                 always-float-label>
                 ${this.icon ? html`<iron-icon icon="${this.icon}" slot="prefix"></iron-icon>` : null}
             </paper-input>
-            <paper-autocomplete-suggestions id="autocomplete" for="search" .source="${this.suggestions}" ?remote-source="${this.source}"
+            <paper-autocomplete-suggestions id="autocomplete" for="search" .source="${this.suggestions}" ?remote-source="${!this.preload && this.source}"
                 @autocomplete-selected="${this._autocompleteSelected}"></paper-autocomplete-suggestions>
           
         <iron-ajax
@@ -179,7 +228,6 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         this._sendRequest(search.value);
     }
 
-
     _sendRequest(query) {
         const loader = this.shadowRoot.getElementById('autocompleteLoader');
         loader.url = this.toAbsoluteURL(this.source);
@@ -195,35 +243,33 @@ export class PbAutocomplete extends pbMixin(LitElement) {
 
     _updateSuggestions() {
         const loader = this.shadowRoot.getElementById('autocompleteLoader');
-
         if (this._initialized) {
             const autocomplete = this.shadowRoot.getElementById('autocomplete');
             if (loader.lastResponse) {
                 this.suggestions = loader.lastResponse;
                 autocomplete.suggestions(this.suggestions);
             }
-        } else {
-            if (loader.lastResponse) {
-                let suggestions = loader.lastResponse;
-                //console.log('suggestions received', suggestions);
+        } else if (loader.lastResponse) {
+            const suggestions = loader.lastResponse;
 
-                const input = this.shadowRoot.getElementById('search');
-                const value = suggestions.find((suggestion) => {
-                    if (suggestion.text) {
-                        return suggestion.value === this.value;
-                    }
-                    return suggestion === this.value;
-                });
-                if (value) {
-                    input.value = value.text || value;
-                    if (this._hiddenInput) {
-                        this._hiddenInput.value = value.value || value;
-                    }
-                } else {
-                    if (this._hiddenInput) {
-                        this._hiddenInput.value = this.value;
-                    }
+            const input = this.shadowRoot.getElementById('search');
+            const value = suggestions.find((suggestion) => {
+                if (suggestion.text) {
+                    return suggestion.value === this.value;
                 }
+                return suggestion === this.value;
+            });
+            if (value) {
+                input.value = value.text || value;
+                if (this._hiddenInput) {
+                    this._hiddenInput.value = value.value || value;
+                }
+            } else if (this._hiddenInput) {
+                this._hiddenInput.value = this.value;
+            }
+
+            if (this.preload) {
+                this.suggestions = suggestions;
             }
         }
         this._initialized = true;
@@ -242,22 +288,48 @@ export class PbAutocomplete extends pbMixin(LitElement) {
     _autocompleteSelected(ev) {
         this.lastSelected = ev.detail.text;
         const input = this.shadowRoot.getElementById('search');
-        console.log('autocomplete selected %s', ev.detail.text);
         input.value = ev.detail.text;
         this.value = ev.detail.value;
         if (this._hiddenInput) {
             this._hiddenInput.value = this.value;
         }
+
+        this.emitTo('pb-autocomplete-selected', {
+            text: ev.detail.text,
+            value: ev.detail.value
+        });
     }
 
     _setInput(ev) {
         const input = this.shadowRoot.getElementById('search');
-        console.log('Autocomplete set manually to %s', input.value);
-
         this.value = input.value;
+
         if (this._hiddenInput) {
             this._hiddenInput.value = this.value;
         } 
+
+        if (ev.keyCode === 13) {
+            const entry = this.suggestions.find((suggestion) => {
+                if (suggestion.text) {
+                    return suggestion.value === this.value;
+                }
+                return suggestion === this.value;
+            });
+            if (!entry) {
+                return;
+            }
+            if (entry.value) {
+                this.emitTo('pb-autocomplete-selected', {
+                    text: entry.text,
+                    value: entry.value
+                });
+            } else {
+                this.emitTo('pb-autocomplete-selected', {
+                    text: entry,
+                    value: entry
+                });
+            }
+        }
     }
 
    

package/src/pb-search.js

@@ -51,6 +51,10 @@ export class PbSearch extends pbMixin(LitElement) {
             },
             subforms: {
                 type: String
+            },
+            disableAutocomplete: {
+                type: Boolean,
+                attribute: 'disable-autocomplete'
             }
         };
     }
@@ -61,6 +65,7 @@ export class PbSearch extends pbMixin(LitElement) {
         this.redirect = false;
         this.submitOnLoad = false;
         this.placeHolder = 'search.placeholder';
+        this.disableAutocomplete = false;
     }
 
     connectedCallback() {
@@ -70,8 +75,10 @@ export class PbSearch extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
-        const autocomplete = this.shadowRoot.getElementById('autocomplete');
-        autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
+        if (!this.disableAutocomplete) {
+            const autocomplete = this.shadowRoot.getElementById('autocomplete');
+            autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
+        }
         const ironform = this.shadowRoot.getElementById('ironform');
         ironform.addEventListener('iron-form-response', (event) =>
             event.detail.completes.then((r) => this.emitTo('pb-search', r.parseResponse()))

package/src/pb-view.js

@@ -45,6 +45,7 @@ import '@polymer/paper-dialog-scrollable';
  * @cssprop --pb-footnote-padding - Padding around a footnote marker
  * @cssprop --pb-footnote-font-size - Font size for the footnote marker
  * @cssprop --pb-footnote-font-family - Font family for the footnote marker
+ * @cssprop --pb-view-scroll-margin-top - Applied to any element with an id
  * @csspart content - The root div around the displayed content
  * @csspart footnotes - div containing the footnotes
   
@@ -524,7 +525,7 @@ export class PbView extends pbMixin(LitElement) {
                 this._scrollTarget = ev.detail.hash;
                 const target = this.shadowRoot.getElementById(this._scrollTarget);
                 if (target) {
-                    setTimeout(() => target.scrollIntoView());
+                    setTimeout(() => target.scrollIntoView({block: 'nearest'}));
                 }
                 return;
             }
@@ -540,6 +541,10 @@ export class PbView extends pbMixin(LitElement) {
                 this.columnSeparator = ev.detail.columnSeparator;
             }
             this.view = ev.detail.view || this.view;
+            if (ev.detail.xpath) {
+                this.xpath = ev.detail.xpath;
+                this.nodeId = null;
+            }
             // clear nodeId if set to null
             if (ev.detail.position === null) {
                 this.nodeId = null;
@@ -595,7 +600,7 @@ export class PbView extends pbMixin(LitElement) {
 
         const loadContent = this.shadowRoot.getElementById('loadContent');
         
-        if (this.static) {
+        if (this.static !== null) {
             this._staticUrl(params).then((url) => {
                 loadContent.url = url;
                 loadContent.generateRequest();
@@ -707,9 +712,11 @@ export class PbView extends pbMixin(LitElement) {
                 const target = this.shadowRoot.getElementById(this._scrollTarget) || 
                     this.shadowRoot.querySelector(`[node-id="${this._scrollTarget}"]`);
                 if (target) {
-                    setTimeout(() => {
-                        target.scrollIntoView();
-                    }, 100);
+                    window.requestAnimationFrame(() =>
+                        setTimeout(() => {
+                            target.scrollIntoView({block: 'nearest'});
+                        }, 400)
+                    );
                 }
                 this._scrollTarget = null;
             });
@@ -885,7 +892,7 @@ export class PbView extends pbMixin(LitElement) {
         let link = document.createElement('link');
         link.setAttribute('rel', 'stylesheet');
         link.setAttribute('type', 'text/css');
-        if (this.static) {
+        if (this.static !== null) {
             link.setAttribute('href', `${this.static}/css/${this.getOdd()}.css`);
         } else {
             link.setAttribute('href', `${this.getEndpoint()}/transform/${this.getOdd()}.css`);
@@ -1206,6 +1213,10 @@ export class PbView extends pbMixin(LitElement) {
                 display: none; 
             }
 
+            [id] {
+                scroll-margin-top: var(--pb-view-scroll-margin-top);
+            }
+
             #view {
                 position: relative;
             }