@teipublisher/pb-components 1.34.1 → 1.35.0

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",
@@ -10224,9 +10250,8 @@
         },
         {
           "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10426,9 +10451,8 @@
         {
           "name": "static",
           "attribute": "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10550,6 +10574,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": [
@@ -10688,9 +10716,8 @@
         },
         {
           "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10873,9 +10900,8 @@
         {
           "name": "static",
           "attribute": "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10985,6 +11011,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.1",
+  "version": "1.35.0",
   "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",
@@ -10224,9 +10250,8 @@
         },
         {
           "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10426,9 +10451,8 @@
         {
           "name": "static",
           "attribute": "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10550,6 +10574,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": [
@@ -10688,9 +10716,8 @@
         },
         {
           "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10873,9 +10900,8 @@
         {
           "name": "static",
           "attribute": "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).",
-          "type": "boolean",
-          "default": "false"
+          "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.",
+          "type": "string"
         },
         {
           "name": "subscribe",
@@ -10985,6 +11011,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/parse-date-service.js

@@ -30,12 +30,12 @@ export class ParseDateService {
     const resultWeekMatch = this.input.match(this._weekMatchRegex());
     const resultYearAndMonthMatch = this.input.match(this._yearAndMonthRegex());
     if (resultIsoMatch) {
-      const split = resultIsoMatch[0].split(/-|\/|\s/);
+      const split = resultIsoMatch[1].split(/-|\/|\s/);
       this.year  = split[0];
       this.month = this._setWithLeadingZero(split[1]);
       this.day   = this._setWithLeadingZero(split[2]);
     } else if (resultYearAndMonthMatch) {
-      const split = resultYearAndMonthMatch[0].split("-");
+      const split = resultYearAndMonthMatch[1].split("-");
       this.year = split[0];
       this.month = this._setWithLeadingZero(split[1]);
       this.day = "01";
@@ -73,7 +73,7 @@ export class ParseDateService {
   * | 2012/1/31  | 2012 1 31 | 2012 01 31 |
   */
   _isoMatchRegex() {
-    return /(?<=\s|^)\d{4}(-|\s|\/)([0][1-9]|[1-9]|10|11|12)(-|\s|\/)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.)/;
+    return /(?:\s|^)(\d{4}(-|\s|\/)([0][1-9]|[1-9]|10|11|12)(-|\s|\/)([0][1-9]|[1-2][0-9]|3[01]|[1-9]))(?=\s|$|\.)/;
     /*      |        | year         | 01-09 | 1-9 | 10-12   |         |01-09  |10-29     |30,31| 1-9  |
     *       |             | dash or slash                   | dash or slash                           |
     *       |preceding with space or start of string                 end with space endofstr or dot <-|*/
@@ -111,7 +111,7 @@ export class ParseDateService {
   * | 2020-01 | 2020-12 | 2012-1 |
   */
   _yearAndMonthRegex() {
-    return /(?<=\s|^)\d{4}-([0][1-9]|[1-9]|10|11|12)(?=\s|$)/;
+    return /(?:\s|^)(\d{4}-([0][1-9]|[1-9]|10|11|12))(?=\s|$)/;
   }
 
   _findYear() {
@@ -126,14 +126,14 @@ export class ParseDateService {
   _findMonth() {
     const months = this._monthDictionaryValues();
     months.forEach(month => {
-      let re = new RegExp(`(?<=\\s|^)(${month})(?=\\s|$|\\.)`, "i")
+      const re = new RegExp(`(?:\\s|^)(${month})(?=\\s|$|\\.)`, "i")
       const result = this.input.match(re);
       if (result) { // yes => get dict and value + return
-        this.month = this._monthDictionary()[result[0].toLowerCase()];
+        this.month = this._monthDictionary()[result[1].toLowerCase()];
         this._removeMatchFromInput(result);
         return this.month;
       }
-    })
+    });
     return undefined;
   }
 
@@ -141,14 +141,14 @@ export class ParseDateService {
   * find single numbers from 1-31
   */
   _findDay() {
-    let regex = /(?<=\s|^)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.|st|nd|rd|th)/;
+    const regex = /(?:\s|^)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.|st|nd|rd|th)/;
     /*           |         | 01-09 | 10-29    |30,31|1-9    | ends with whitespace, endofstr or dot.
     *            | starts with whitepace or startoftr       | won't be included in match (lookbehind operator)
     *            | look behind operator (not included)
     *            | https://stackoverflow.com/a/6713378/6272061 */
     const result = this.input.match(regex)
     if (result) {
-      this.day = this._setWithLeadingZero(result[0]);
+      this.day = this._setWithLeadingZero(result[1]);
     }
   }
 

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-timeline.js

@@ -299,6 +299,9 @@ export class PbTimeline extends pbMixin(LitElement) {
             },
             resettable: {
               type: Boolean
+            },
+            _language: {
+              type: String
             }
         };
     }
@@ -315,6 +318,7 @@ export class PbTimeline extends pbMixin(LitElement) {
     this.url = '';
     this.auto = false;
     this.resettable = false;
+    this._language = 'en';
     this._resetSelectionProperty();
   }
 
@@ -327,6 +331,9 @@ export class PbTimeline extends pbMixin(LitElement) {
       loader.url = url;
       loader.generateRequest();
     });
+    this.subscribeTo('pb-i18n-update', (ev) => {
+      this._language = ev.detail.language;
+    });
   }
 
   firstUpdated() {
@@ -620,7 +627,7 @@ export class PbTimeline extends pbMixin(LitElement) {
   }
 
   _numberWithCommas(input) {
-    return input.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, "'");
+    return new Intl.NumberFormat(this._language, {style: 'decimal'}).format(input);
   }
 
   _areOverlapping(A, B) { // check if 2 intervals are overlapping

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
   
@@ -165,9 +166,11 @@ export class PbView extends pbMixin(LitElement) {
              * If set, rewrite URLs to load pages as static HTML files,
              * so no TEI Publisher instance is required. Use this in combination with
              * [tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).
+             * The value should point to the HTTP root path under which the static version
+             * will be hosted. This is used to resolve CSS stylesheets.
              */
             static: {
-                type: Boolean
+                type: String
             },
             /**
             * The server returns footnotes separately. Set this property
@@ -336,7 +339,7 @@ export class PbView extends pbMixin(LitElement) {
         this._selector = new Map();
         this._chunks = [];
         this._scrollTarget = null;
-        this.static = false;
+        this.static = null;
     }
 
     attributeChangedCallback(name, oldVal, newVal) {
@@ -522,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;
             }
@@ -538,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;
@@ -593,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();
@@ -623,7 +630,7 @@ export class PbView extends pbMixin(LitElement) {
         function createKey(paramNames) {
             const urlComponents = [];
             paramNames.sort().forEach(key => {
-                if (params[key]) {
+                if (params.hasOwnProperty(key)) {
                     urlComponents.push(`${key}=${params[key]}`);
                 }
             });
@@ -632,9 +639,9 @@ export class PbView extends pbMixin(LitElement) {
         
         const index = await fetch(`index.json`)
             .then((response) => response.json());
-        const paramNames = ['odd', 'view', 'xpath'];
+        const paramNames = ['odd', 'view', 'xpath', 'map'];
         this.querySelectorAll('pb-param').forEach((param) => paramNames.push(`user.${param.getAttribute('name')}`));
-        let url = createKey([...paramNames, 'root']);
+        let url = params.id ? createKey([...paramNames, 'id']) : createKey([...paramNames, 'root']);
         let file = index[url];
         if (!file) {
             url = createKey(paramNames);
@@ -705,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;
             });
@@ -883,8 +892,8 @@ export class PbView extends pbMixin(LitElement) {
         let link = document.createElement('link');
         link.setAttribute('rel', 'stylesheet');
         link.setAttribute('type', 'text/css');
-        if (this.static) {
-            link.setAttribute('href', `/css/${this.getOdd()}.css`);
+        if (this.static !== null) {
+            link.setAttribute('href', `${this.static}/css/${this.getOdd()}.css`);
         } else {
             link.setAttribute('href', `${this.getEndpoint()}/transform/${this.getOdd()}.css`);
         }
@@ -894,7 +903,7 @@ export class PbView extends pbMixin(LitElement) {
             link = document.createElement('link');
             link.setAttribute('rel', 'stylesheet');
             link.setAttribute('type', 'text/css');
-            link.setAttribute('href', `${this.getEndpoint()}/${this.loadCss}`);
+            link.setAttribute('href', this.toAbsoluteURL(this.loadCss));
             links.push(link);
         }
 
@@ -1204,6 +1213,10 @@ export class PbView extends pbMixin(LitElement) {
                 display: none; 
             }
 
+            [id] {
+                scroll-margin-top: var(--pb-view-scroll-margin-top);
+            }
+
             #view {
                 position: relative;
             }