@teipublisher/pb-components 3.3.1 → 3.4.0

package/src/pb-view-annotate.js

@@ -342,6 +342,10 @@ class PbViewAnnotate extends PbView {
 
     this.subscribeTo('pb-add-annotation', ev => this.addAnnotation(ev.detail));
     this.subscribeTo('pb-edit-annotation', this._editAnnotation.bind(this));
+    this.subscribeTo('pb-start-update', () => {
+      this._cancelMarkerRefresh();
+      this._clearMarkers();
+    });
     this.subscribeTo('pb-refresh', () => {
       this._ranges = [];
       this._rangesMap.clear();
@@ -373,6 +377,7 @@ class PbViewAnnotate extends PbView {
   disconnectedCallback() {
     super.disconnectedCallback();
 
+    this._cancelMarkerRefresh();
     // Remove any events that we had earlier.
     this._disconnectedSignal.abort();
   }
@@ -383,10 +388,11 @@ class PbViewAnnotate extends PbView {
 
   set annotations(annoData) {
     this._ranges = annoData;
-    this.updateAnnotations(true);
+    this.updateAnnotations(true, false);
     this._markIncompleteAnnotations();
     this._initAnnotationColors();
     this._annotationStyles();
+    this._scheduleMarkerRefresh();
   }
 
   saveHistory() {
@@ -431,7 +437,7 @@ class PbViewAnnotate extends PbView {
 
   zoom(direction) {
     super.zoom(direction);
-    window.requestAnimationFrame(() => this.refreshMarkers());
+    this._scheduleMarkerRefresh();
   }
 
   getKey(type) {
@@ -444,7 +450,7 @@ class PbViewAnnotate extends PbView {
     const scheduleCallback = () => {
       _pendingCallback = setTimeout(() => {
         _pendingCallback = null;
-        this.refreshMarkers();
+        this._scheduleMarkerRefresh();
       }, 200);
     };
     window.addEventListener('resize', () => {
@@ -467,19 +473,76 @@ class PbViewAnnotate extends PbView {
 
   _handleContent() {
     super._handleContent();
-    this.updateComplete.then(() =>
-      setTimeout(() => {
-        this._initAnnotationColors();
-        this._annotationStyles();
-        this.updateAnnotations();
-        this._markIncompleteAnnotations();
-        if (this._scrollTop) {
-          this.scrollTop = this._scrollTop;
-          this._scrollTop = undefined;
-        }
-        this.emitTo('pb-annotations-loaded');
-      }, 300),
-    );
+    this.updateComplete.then(() => {
+      this._initAnnotationColors();
+      this._annotationStyles();
+      this.updateAnnotations(true, false);
+      this._markIncompleteAnnotations();
+      if (this._scrollTop) {
+        this.scrollTop = this._scrollTop;
+        this._scrollTop = undefined;
+      }
+      this.emitTo('pb-annotations-loaded');
+      // Marker positions depend on the ODD stylesheet and final text layout.
+      this._scheduleMarkerRefresh();
+    });
+  }
+
+  _cancelMarkerRefresh() {
+    if (this._markerRefreshController) {
+      this._markerRefreshController.abort();
+      this._markerRefreshController = null;
+    }
+  }
+
+  /**
+   * Refresh annotation markers after layout has settled. Measuring too early
+   * (e.g. while paginated content is still being replaced) leaves markers at
+   * stale coordinates.
+   */
+  async _scheduleMarkerRefresh() {
+    this._cancelMarkerRefresh();
+    const controller = new AbortController();
+    this._markerRefreshController = controller;
+    const { signal } = controller;
+
+    try {
+      await this.updateComplete;
+      if (signal.aborted) {
+        return;
+      }
+
+      const styleLink = this.shadowRoot.querySelector('#view link[rel="stylesheet"]');
+      if (styleLink && !styleLink.sheet) {
+        await new Promise(resolve => {
+          const done = () => resolve();
+          styleLink.addEventListener('load', done, { once: true });
+          styleLink.addEventListener('error', done, { once: true });
+        });
+      }
+      if (signal.aborted) {
+        return;
+      }
+
+      if (document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+      if (signal.aborted) {
+        return;
+      }
+
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      if (signal.aborted) {
+        return;
+      }
+
+      this._paintMarkers();
+    } finally {
+      if (this._markerRefreshController === controller) {
+        this._markerRefreshController = null;
+      }
+    }
   }
 
   _updateAnnotation(teiRange, silent = false, batch = false) {
@@ -548,13 +611,13 @@ class PbViewAnnotate extends PbView {
     this._rangesMap.set(span, teiRange);
 
     if (!batch) {
-      this.refreshMarkers();
+      this._scheduleMarkerRefresh();
     }
 
     return span;
   }
 
-  updateAnnotations(silent = false) {
+  updateAnnotations(silent = false, refreshMarkers = true) {
     this._ranges.forEach(teiRange => {
       let span;
       switch (teiRange.type) {
@@ -579,7 +642,9 @@ class PbViewAnnotate extends PbView {
           break;
       }
     });
-    window.requestAnimationFrame(() => this.refreshMarkers());
+    if (refreshMarkers) {
+      this._scheduleMarkerRefresh();
+    }
   }
 
   _getSelection() {
@@ -750,7 +815,7 @@ class PbViewAnnotate extends PbView {
 
     this.emitTo('pb-annotations-changed', { ranges: this._ranges });
 
-    window.requestAnimationFrame(() => this.refreshMarkers());
+    this._scheduleMarkerRefresh();
 
     this._inHandler = true;
     try {
@@ -976,11 +1041,16 @@ class PbViewAnnotate extends PbView {
 
   /**
    * For all annotations currently shown, create a marker element and position
-   * it absolute next to the annotation
-   *
-   * @param {HTMLElement} root element containing the markers
+   * it absolute next to the annotation. Waits for layout to settle before measuring.
    */
   refreshMarkers() {
+    this._scheduleMarkerRefresh();
+  }
+
+  /**
+   * Measure annotation spans and paint underline markers into the marker layer.
+   */
+  _paintMarkers() {
     const root = this.shadowRoot.getElementById('view');
     const rootRect = root.getBoundingClientRect();
     const markerLayer = this.shadowRoot.getElementById('marker-layer');
@@ -1212,6 +1282,19 @@ class PbViewAnnotate extends PbView {
     return [
       super.styles,
       css`
+        :host {
+          position: relative;
+        }
+
+        #marker-layer {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+        }
+
         .annotation-type {
           display: inline-block;
           text-align: right;

package/src/pb-view.js

@@ -650,6 +650,18 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
   _doLoad(params) {
     this.emitTo('pb-start-update', params);
 
+    // On the first load, check whether the server already rendered this
+    // fragment into our light DOM. If so, request only
+    // the navigation metadata (content=none) and adopt the existing markup
+    // instead of rendering the same content a second time.
+    if (this._ssrContent === undefined) {
+      this._ssrContent = this.querySelector(':scope > [data-pb-ssr]') || null;
+      this._ssrFootnotes = this.querySelector(':scope > [data-pb-ssr-footnotes]') || null;
+    }
+    if (this._ssrContent) {
+      params.content = 'none';
+    }
+
     console.log('<pb-view> Loading view with params %o', params);
     if (!this.infiniteScroll) {
       this._clear();
@@ -709,9 +721,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
 
     const index = await fetch(`index.json`).then(response => response.json());
     const paramNames = ['odd', 'view', 'xpath', 'map'];
-    this.querySelectorAll('pb-param').forEach(param =>
-      paramNames.push(`user.${param.getAttribute('name')}`),
-    );
+    this._params().forEach(param => paramNames.push(`user.${param.getAttribute('name')}`));
     let url = params.id ? createKey([...paramNames, 'id']) : createKey([...paramNames, 'root']);
     let file = index[url];
     if (!file) {
@@ -827,7 +837,17 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
     const elem = document.createElement('div');
     // elem.style.opacity = 0; //hide it - animation has to make sure to blend it in
     fragment.appendChild(elem);
-    elem.innerHTML = resp.content;
+    if (this._ssrContent && (!resp.content || resp.content.length === 0)) {
+      // Adopt the server-rendered content from light DOM (SSR) rather than
+      // re-rendering it: move its children into the shadow content container.
+      while (this._ssrContent.firstChild) {
+        elem.appendChild(this._ssrContent.firstChild);
+      }
+      this._ssrContent.remove();
+      this._ssrContent = null;
+    } else {
+      elem.innerHTML = resp.content;
+    }
 
     // if before-update-event is set, we do not replace the content immediately,
     // but emit an event
@@ -889,11 +909,23 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
 
     if (this.appendFootnotes) {
       const footnotes = document.createElement('div');
-      if (resp.footnotes) {
+      if (this._ssrFootnotes) {
+        // Adopt the server-rendered footnotes from light DOM (SSR).
+        while (this._ssrFootnotes.firstChild) {
+          footnotes.appendChild(this._ssrFootnotes.firstChild);
+        }
+      } else if (resp.footnotes) {
         footnotes.innerHTML = resp.footnotes;
       }
       this._footnotes = footnotes;
     }
+    // Drop the SSR footnotes marker even when not appending, so it does not
+    // linger in the light DOM (matches the dynamic path, which ignores
+    // footnotes unless append-footnotes is set).
+    if (this._ssrFootnotes) {
+      this._ssrFootnotes.remove();
+      this._ssrFootnotes = null;
+    }
 
     this._initFootnotes(this._footnotes);
 
@@ -1013,9 +1045,20 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
     }
   }
 
+  /**
+   * Collect the configuration `pb-param` children of this view. Excludes any
+   * `pb-param` that may occur inside server-rendered (SSR) content adopted into
+   * the light DOM, so injected content can never be mistaken for a parameter.
+   */
+  _params() {
+    return Array.from(this.querySelectorAll('pb-param')).filter(
+      param => !param.closest('[data-pb-ssr], [data-pb-ssr-footnotes]'),
+    );
+  }
+
   _getParameters() {
     const params = [];
-    this.querySelectorAll('pb-param').forEach(param => {
+    this._params().forEach(param => {
       params[`user.${param.getAttribute('name')}`] = param.getAttribute('value');
     });
     // add parameters for features set with pb-toggle-feature