@teipublisher/pb-components 1.34.3 → 1.35.2

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",
@@ -10222,6 +10259,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10422,6 +10465,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",
@@ -10688,6 +10738,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10871,6 +10927,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.34.3",
+  "version": "1.35.2",
   "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",
@@ -10222,6 +10259,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10422,6 +10465,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",
@@ -10688,6 +10738,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10871,6 +10927,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",

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

@@ -294,6 +294,14 @@ export class PbView extends pbMixin(LitElement) {
                 type: String,
                 attribute: 'before-update-event'
             },
+            /**
+             * If set, do not scroll the view to target node (e.g. given in URL hash) 
+             * after content was loaded.
+             */
+            noScroll: {
+                type: Boolean,
+                attribute: 'no-scroll'
+            },
             _features: {
                 type: Object
             },
@@ -335,6 +343,7 @@ export class PbView extends pbMixin(LitElement) {
         this.infiniteScrollMax = 10;
         this.disableHistory = false;
         this.beforeUpdate = null;
+        this.noScroll = false;
         this._features = {};
         this._selector = new Map();
         this._chunks = [];
@@ -520,7 +529,7 @@ export class PbView extends pbMixin(LitElement) {
 
     _refresh(ev) {
         if (ev && ev.detail) {
-            if (ev.detail.hash && !(ev.detail.id || ev.detail.path || ev.detail.odd || ev.detail.view || ev.detail.position)) {
+            if (ev.detail.hash && !this.noScroll && !(ev.detail.id || ev.detail.path || ev.detail.odd || ev.detail.view || ev.detail.position)) {
                 // if only the scroll target has changed: scroll to the element without reloading
                 this._scrollTarget = ev.detail.hash;
                 const target = this.shadowRoot.getElementById(this._scrollTarget);
@@ -541,13 +550,19 @@ 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;
             } else {
                 this.nodeId = ev.detail.position || this.nodeId;
             }
-            this._scrollTarget = ev.detail.hash;
+            if (!this.noScroll) {
+                this._scrollTarget = ev.detail.hash;
+            }
         }
         this._updateStyles();
         if (this.infiniteScroll) {
@@ -863,12 +878,19 @@ export class PbView extends pbMixin(LitElement) {
     }
 
     _scroll() {
+        if (this.noScroll) {
+            return;
+        }
         const { hash } = this.getUrl();
         if (hash) {
             const target = this.shadowRoot.getElementById(hash.substring(1));
             console.log('hash target: %o', target);
             if (target) {
-                target.scrollIntoView({ block: "center", inline: "nearest" });
+                window.requestAnimationFrame(() =>
+                    setTimeout(() => {
+                        target.scrollIntoView({block: 'nearest'});
+                    }, 400)
+                );
             }
         }
     }