@teipublisher/pb-components 2.3.0 → 2.4.0

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.4.0",
   "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/authority/airtable.js

@@ -46,7 +46,7 @@ export class Airtable extends Registry {
     }
 
     this.tokenizeChars = configElem.getAttribute('tokenize-regex') || "\\W";
-    
+
     this.infoExpr = getTemplate(configElem, '.info');
     this.detailExpr = getTemplate(configElem, '.detail');
 
@@ -55,7 +55,7 @@ export class Airtable extends Registry {
 
   _init() {
       window.ESGlobalBridge.requestAvailability();
-      const path = resolveURL('https://unpkg.com/airtable@0.11.1/build/airtable.browser.js');
+      const path = resolveURL('https://cdn.jsdelivr.net/npm/airtable@0.11.1/build/airtable.browser.js');
       window.ESGlobalBridge.instance.load('airtable', path);
       window.addEventListener(
         'es-bridge-airtable-loaded',
@@ -140,7 +140,7 @@ export class Airtable extends Registry {
         }
         let strings = [];
         const data = {};
-        this.fields.forEach((field) => { 
+        this.fields.forEach((field) => {
           const value = record.get(field);
           if (value) {
             data[field] = value;

package/src/pb-ajax.js

@@ -16,10 +16,10 @@ import './pb-message.js';
  *
  * @slot - unnamed slot for link content
  * @slot title - dialog title
- * 
+ *
  * @fires pb-start-update - Fired before the element updates its content
- * @fires pb-end-update - Fired after the element has finished updating its content 
- * @fires pb-update - When received, copies request parameters from the event 
+ * @fires pb-end-update - Fired after the element has finished updating its content
+ * @fires pb-update - When received, copies request parameters from the event
 
  */
 export class PbAjax extends pbMixin(LitElement) {
@@ -95,6 +95,7 @@ export class PbAjax extends pbMixin(LitElement) {
                 @response="${this._handleResponse}"></iron-ajax>
             <pb-message id="confirmDialog"></pb-message>
             <slot name="title" style="display: none"></slot>
+            <progress id="progress" max="100"></progress>
         `;
     }
 
@@ -103,6 +104,8 @@ export class PbAjax extends pbMixin(LitElement) {
         const slot = this.shadowRoot.querySelector('slot[name=title]');
         this._dialogTitle = '';
         slot.assignedNodes().forEach(node => {this._dialogTitle += node.innerHTML});
+        this.button = this.querySelector('paper-button');
+        this.progress = this.shadowRoot.querySelector('progress');
     }
 
     static get styles() {
@@ -113,6 +116,13 @@ export class PbAjax extends pbMixin(LitElement) {
             slot[name="title"] {
                 margin: 0;
             }
+            progress{
+                width: 100%;
+                opacity: 0;
+            }
+            progress.running{
+                opacity: 1;
+            }
         `;
     }
 
@@ -127,15 +137,33 @@ export class PbAjax extends pbMixin(LitElement) {
             this.trigger();
         }
     }
-    
-    trigger() {
+
+    async trigger() {
+        this._disable();
         const loader = this.shadowRoot.getElementById('loadContent');
         loader.url = `${this.getEndpoint()}/${this.url}`;
         this.emitTo('pb-start-update');
-        this.shadowRoot.getElementById('loadContent').generateRequest();
+        await this.shadowRoot.getElementById('loadContent').generateRequest();
+    }
+
+    _enable(){
+        if(this.button){
+            this.button.removeAttribute('disabled');
+            this.button.removeAttribute('readonly');
+            this.progress.classList.remove('running');
+        }
     }
+    _disable(){
+        if(this.button){
+            this.button.setAttribute('disabled','disabled');
+            this.button.setAttribute('readonly','readonly');
+            this.progress.classList.add('running');
+        }
+    }
+
 
     _handleResponse() {
+        this._enable();
         const resp = this.shadowRoot.getElementById('loadContent').lastResponse;
         this._message = resp;
         if (!this.quiet) {
@@ -151,6 +179,7 @@ export class PbAjax extends pbMixin(LitElement) {
     }
 
     _handleError() {
+        this._enable();
         const loader = this.shadowRoot.getElementById('loadContent');
         const msg = loader.lastError.response;
         const parser = new DOMParser();
@@ -170,4 +199,4 @@ export class PbAjax extends pbMixin(LitElement) {
         this.shadowRoot.getElementById('loadContent').params = ev.detail.params;
     }
 }
-customElements.define('pb-ajax', PbAjax);
+customElements.define('pb-ajax', PbAjax);

package/src/pb-manage-odds.js

@@ -205,7 +205,7 @@ export class PbManageOdds extends pbMixin(LitElement) {
                 <pb-ajax id="regenerateAll" url="${regenUrl}" method="post" title="${translate('odd.manage.regenerate-all')}"
                     emit="${this.emit ? this.emit : ''}" .emitConfig="${this.emitConfig}">
                     <h3 slot="title">${translate('odd.manage.regenerate-all')}</h3>
-                    <a href="#">${translate('odd.manage.regenerate-all')}</a>
+                    <paper-button raised="raised"><a href="#">${translate('odd.manage.regenerate-all')}</a></paper-button>
                 </pb-ajax>
             </pb-restricted>
             ${this.odds.map((odd) =>
@@ -329,6 +329,12 @@ export class PbManageOdds extends pbMixin(LitElement) {
                 margin-top: 10px;
                 text-align: right;
             }
+            
+            #regenerateAll a{
+                text-decoration: none;
+                color: inherit;
+            }
+
             [icon]{
                 color:var(--pb-manage-odds-icon-color);
             }

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;