@teipublisher/pb-components 3.6.2 → 3.6.4

package/package.json

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

package/src/pb-authority-lookup.js

@@ -87,6 +87,20 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
     this._authorities = {};
     this.noOccurrences = false;
     this.group = 'tei';
+    this._queryGeneration = 0;
+    this._queryDebounceMs = 300;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._queryTimer) {
+      clearTimeout(this._queryTimer);
+      this._queryTimer = null;
+    }
+    if (this._occurrencesController) {
+      this._occurrencesController.abort();
+      this._occurrencesController = null;
+    }
   }
 
   connectedCallback() {
@@ -101,7 +115,7 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
       this.query = ev.detail.query;
       this.type = ev.detail.type;
       this._results = [];
-      this._query();
+      this._scheduleQuery(true);
     });
 
     waitOnce('pb-page-ready', () => {
@@ -110,7 +124,7 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
         this._authorities[connector.register] = connector;
       });
       if (this.autoLookup) {
-        this._query();
+        this._scheduleQuery(true);
       }
     });
 
@@ -347,28 +361,76 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
     }
     this._results = [];
     this.query = e.target.value;
-    this._query();
+    this._scheduleQuery();
+  }
+
+  _scheduleQuery(immediate = false) {
+    if (this._queryTimer) {
+      clearTimeout(this._queryTimer);
+      this._queryTimer = null;
+    }
+    if (immediate) {
+      this._query();
+      return;
+    }
+    this._queryTimer = setTimeout(() => {
+      this._queryTimer = null;
+      this._query();
+    }, this._queryDebounceMs);
   }
 
   _query() {
+    const generation = ++this._queryGeneration;
+
+    if (this._occurrencesController) {
+      this._occurrencesController.abort();
+      this._occurrencesController = null;
+    }
+
+    const authority = this._authorities[this.type];
+    if (!authority) {
+      return;
+    }
+
     this.emitTo('pb-start-update');
-    this._authorities[this.type].query(this.query).then(results => {
-      this._occurrences(results.items).then(merged => {
+    authority
+      .query(this.query)
+      .then(results => {
+        if (generation !== this._queryGeneration) {
+          return undefined;
+        }
+        return this._occurrences(results.items, generation);
+      })
+      .then(merged => {
+        if (merged === undefined || generation !== this._queryGeneration) {
+          return;
+        }
         this._results = merged;
+        this.emitTo('pb-end-update');
+      })
+      .catch(err => {
+        if (generation !== this._queryGeneration) {
+          return;
+        }
+        console.error('<pb-authority-lookup> query failed: %s', err.message);
+        this.emitTo('pb-end-update');
       });
-      this.emitTo('pb-end-update');
-      // this.shadowRoot.getElementById('query').focus();
-    });
   }
 
   _addEntity() {
     this.emitTo('pb-authority-new-entity', { query: this.query, type: this.type });
   }
 
-  _occurrences(items) {
+  _occurrences(items, generation) {
     if (this.noOccurrences) {
       return Promise.resolve(items);
     }
+    if (this._occurrencesController) {
+      this._occurrencesController.abort();
+    }
+    const controller = new AbortController();
+    this._occurrencesController = controller;
+
     const params = new FormData();
     params.append('register', this.type);
     items.forEach(item => {
@@ -378,13 +440,27 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
       fetch(`${this.getEndpoint()}/api/annotations/occurrences`, {
         method: 'POST',
         body: params,
+        signal: controller.signal,
       })
         .then(response => {
+          if (generation !== this._queryGeneration) {
+            resolve(undefined);
+            return undefined;
+          }
           if (response.ok) {
             return response.json();
           }
+          resolve(items);
+          return undefined;
         })
         .then(json => {
+          if (json === undefined) {
+            return;
+          }
+          if (generation !== this._queryGeneration) {
+            resolve(undefined);
+            return;
+          }
           items.forEach(item => {
             if (json[item.id]) {
               item.occurrences = json[item.id];
@@ -406,6 +482,13 @@ export class PbAuthorityLookup extends themableMixin(pbMixin(LitElement)) {
             return d;
           });
           resolve(items);
+        })
+        .catch(err => {
+          if (err.name === 'AbortError' || generation !== this._queryGeneration) {
+            resolve(undefined);
+            return;
+          }
+          resolve(items);
         });
     });
   }

package/src/pb-view-annotate.js

@@ -405,7 +405,7 @@ class PbViewAnnotate extends PbView {
       console.warn('<pb-view-annotate> history is empty');
       return;
     }
-    this._scrollTop = this.scrollTop;
+    this._captureScrollPosition();
     const lastEntry = this._history.pop();
     this._clearMarkers();
     this._ranges = JSON.parse(lastEntry);
@@ -460,11 +460,57 @@ class PbViewAnnotate extends PbView {
     });
   }
 
+  /**
+   * Return the nearest ancestor (or this element) that actually scrolls.
+   * In fixed-layout annotate pages the scroll container is usually `main`,
+   * not the pb-view-annotate host.
+   */
+  _scrollContainer() {
+    let el = this;
+    while (el) {
+      const { overflow, overflowY } = getComputedStyle(el);
+      const scrollable =
+        /(auto|scroll|overlay)/.test(overflowY) || /(auto|scroll|overlay)/.test(overflow);
+      if (scrollable && el.scrollHeight > el.clientHeight) {
+        return el;
+      }
+      el = el.parentElement;
+    }
+    return this;
+  }
+
+  _captureScrollPosition() {
+    const el = this._scrollContainer();
+    this._scrollEl = el;
+    this._scrollTop = el.scrollTop;
+  }
+
+  _restoreScrollPosition() {
+    if (this._scrollTop === undefined || !this._scrollEl) {
+      return;
+    }
+    const { _scrollEl: el, _scrollTop: top } = this;
+    const restore = () => {
+      el.scrollTop = top;
+    };
+    restore();
+    requestAnimationFrame(() => {
+      restore();
+      setTimeout(restore, 100);
+      // Run after pb-view._scroll() (400ms) so URL-hash scrolling does not win.
+      setTimeout(() => {
+        restore();
+        this._scrollTop = undefined;
+        this._scrollEl = undefined;
+      }, 450);
+    });
+  }
+
   _refresh(ev) {
-    super._refresh(ev);
-    if (ev && ev.detail && ev.detail.preserveScroll) {
-      this._scrollTop = this.scrollTop;
+    if (ev?.detail?.preserveScroll) {
+      this._captureScrollPosition();
     }
+    super._refresh(ev);
   }
 
   _doLoad(params) {
@@ -480,10 +526,7 @@ class PbViewAnnotate extends PbView {
       this._annotationStyles();
       this.updateAnnotations(true, false);
       this._markIncompleteAnnotations();
-      if (this._scrollTop) {
-        this.scrollTop = this._scrollTop;
-        this._scrollTop = undefined;
-      }
+      this._restoreScrollPosition();
       this.emitTo('pb-annotations-loaded');
       // Marker positions depend on the ODD stylesheet and final text layout.
       this._scheduleMarkerRefresh();