@teipublisher/pb-components 2.3.0 → 2.3.1

package/dist/pb-elements.json

@@ -8164,9 +8164,16 @@
         },
         {
           "name": "url-path",
+          "description": "Is the resource path part of the URL or should it be\nencoded as a parameter? TEI Publisher uses the\nURL path, but the webcomponent demos need to encode the resource path\nin a query parameter.",
           "type": "string",
           "default": "\"path\""
         },
+        {
+          "name": "id-hash",
+          "description": "If enabled, a hash in the URL (e.g. documentation.xml#introduction) will\nbe interpreted as an xml:id to navigate to when talking to the server.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "api-version",
           "type": "string",
@@ -8266,9 +8273,17 @@
         {
           "name": "urlPath",
           "attribute": "url-path",
+          "description": "Is the resource path part of the URL or should it be\nencoded as a parameter? TEI Publisher uses the\nURL path, but the webcomponent demos need to encode the resource path\nin a query parameter.",
           "type": "string",
           "default": "\"path\""
         },
+        {
+          "name": "idHash",
+          "attribute": "id-hash",
+          "description": "If enabled, a hash in the URL (e.g. documentation.xml#introduction) will\nbe interpreted as an xml:id to navigate to when talking to the server.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "apiVersion",
           "attribute": "api-version",

package/package.json

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

package/pb-elements.json

@@ -8164,9 +8164,16 @@
         },
         {
           "name": "url-path",
+          "description": "Is the resource path part of the URL or should it be\nencoded as a parameter? TEI Publisher uses the\nURL path, but the webcomponent demos need to encode the resource path\nin a query parameter.",
           "type": "string",
           "default": "\"path\""
         },
+        {
+          "name": "id-hash",
+          "description": "If enabled, a hash in the URL (e.g. documentation.xml#introduction) will\nbe interpreted as an xml:id to navigate to when talking to the server.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "api-version",
           "type": "string",
@@ -8266,9 +8273,17 @@
         {
           "name": "urlPath",
           "attribute": "url-path",
+          "description": "Is the resource path part of the URL or should it be\nencoded as a parameter? TEI Publisher uses the\nURL path, but the webcomponent demos need to encode the resource path\nin a query parameter.",
           "type": "string",
           "default": "\"path\""
         },
+        {
+          "name": "idHash",
+          "attribute": "id-hash",
+          "description": "If enabled, a hash in the URL (e.g. documentation.xml#introduction) will\nbe interpreted as an xml:id to navigate to when talking to the server.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "apiVersion",
           "attribute": "api-version",

package/src/pb-page.js

@@ -39,10 +39,24 @@ export class PbPage extends pbMixin(LitElement) {
                 type: String,
                 attribute: 'app-root'
             },
+            /**
+             * Is the resource path part of the URL or should it be
+             * encoded as a parameter? TEI Publisher uses the
+             * URL path, but the webcomponent demos need to encode the resource path
+             * in a query parameter.
+             */
             urlPath: {
                 type: String,
                 attribute: 'url-path'
             },
+            /**
+             * If enabled, a hash in the URL (e.g. documentation.xml#introduction) will
+             * be interpreted as an xml:id to navigate to when talking to the server.
+             */
+            idHash: {
+                type: Boolean,
+                attribute: 'id-hash'
+            },
             /**
              * TEI Publisher internal: set to the current page template.
              */
@@ -148,6 +162,7 @@ export class PbPage extends pbMixin(LitElement) {
         this.unresolved = true;
         this.endpoint = ".";
         this.urlPath = 'path';
+        this.idHash = false;
         this.apiVersion = undefined;
         this.requireLanguage = false;
         this.theme = null;
@@ -189,7 +204,7 @@ export class PbPage extends pbMixin(LitElement) {
             this.appRoot = window.location.pathname;
         }
 
-        registry.configure(this.urlPath === 'path', this.appRoot);
+        registry.configure(this.urlPath === 'path', this.idHash, this.appRoot);
 
         this.endpoint = this.endpoint.replace(/\/+$/, '');
         

package/src/pb-view.js

@@ -907,13 +907,13 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         if (this.noScroll) {
             return;
         }
-        if (registry.state.id) {
-            const target = this.shadowRoot.getElementById(registry.state.id);
+        if (registry.hash) {
+            const target = this.shadowRoot.getElementById(registry.hash.substring(1));
             console.log('hash target: %o', target);
             if (target) {
                 window.requestAnimationFrame(() =>
                     setTimeout(() => {
-                        target.scrollIntoView({block: 'nearest'});
+                        target.scrollIntoView({ block: "center", inline: "nearest" });
                     }, 400)
                 );
             }

package/src/urls.js

@@ -36,6 +36,11 @@ class Registry {
     
     constructor() {
         this.rootPath = '';
+        /**
+         * Is the resource path part of the URL path or is it
+         * passed in a query parameter?
+         */
+        this.usePath = false;
         /**
          * Records current state as determined from parsing the URL.
          * This should be used to initialize components.
@@ -46,12 +51,21 @@ class Registry {
          * if a component calls commit or replace.
          */
         this.channelStates = {};
+        /**
+         * Records the hash part of the URL, if any
+         */
+        this.hash = null;
+        /**
+         * Should a hash in the URL be interpreted as an xml:id for loading the content?
+         */
+        this.idHash = true;
         this._listeners = [];
     }
 
-    configure(usePath = true, rootPath = '') {
+    configure(usePath = true, idHash = false, rootPath = '') {
         this.rootPath = rootPath;
         this.usePath = usePath;
+        this.idHash = idHash;
 
         // determine initial state of the registry by parsing current URL
         const initialState = this._stateFromURL();
@@ -92,8 +106,11 @@ class Registry {
 
     _stateFromURL() {
         const params = {};
-        if (window.location.hash.length > 0) {
-            params.id = window.location.hash.substring(1);
+        this.hash = window.location.hash;
+        // use the hash as an xml:id?
+        // hashs of the form #1.2.3.4 are internal eXist ids though and thus excluded
+        if (this.idHash && this.hash.length > 0 && (!/^#\d+\./.test(this.hash))) {
+            params.id = this.hash.substring(1);
         }
         if (this.usePath) {
             params.path = window.location.pathname.replace(new RegExp(`^${this.rootPath}/?`), '');
@@ -216,7 +233,9 @@ class Registry {
             newUrl.pathname = `${this.rootPath}/${this.state.path}`;
         }
 
-        newUrl.hash = this.state.id ? `#${this.state.id}` : '';
+        if (this.state.id) {
+            newUrl.hash = `#${this.state.id}`;
+        }
 
         console.log('urlFromState', newUrl.searchParams.toString())
         return newUrl;