@teipublisher/pb-components 3.6.3 → 3.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "3.6.3",
+  "version": "3.6.5",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -18,7 +18,7 @@
     "start": "npm run build && npm run docs && es-dev-server",
     "test": "karma start",
     "test:watch": "karma start --auto-watch=true --single-run=false",
-    "docker": "npm run build:production && docker build --no-cache --pull --rm -f 'Dockerfile' -t pbcomponents:master '.'",
+    "docker": "npm run build:production && ci/setup-tei-publisher-app.sh && docker build --no-cache --pull --rm -f 'Dockerfile' -t pbcomponents:master '.'",
     "docker:run": "docker run --rm -it -p 8080:8080/tcp -p 8443:8443/tcp pbcomponents:master",
     "docs": "wca src -f json --outFile pb-elements.json",
     "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",

package/src/pb-page.js

@@ -281,19 +281,11 @@ export class PbPage extends pbMixin(LitElement) {
     console.log('<pb-page> Loading component theme stylesheets from %s', stylesheetURLs.join(', '));
     this._themeSheet = await loadStylesheets(stylesheetURLs);
 
-    // try to figure out what version of TEI Publisher the server is running
+    // Determine the server API version. Jinks-generated apps expose a /login
+    // page (HTTP 200), so probing that URL is no longer a reliable indicator
+    // of a pre-7 server — use /api/version directly.
     if (!this.apiVersion) {
-      // first check if it has a login endpoint, i.e. runs a version < 7
-      // this is necessary to prevent a CORS failure
-      const json = await fetch(`${this.endpoint}/login`)
-        .then(res => {
-          if (res.ok) {
-            return null;
-          }
-          // if not, access the actual /api/version endpoint to retrieve the API version
-          return fetch(`${this.endpoint}/api/version`).then(res2 => res2.json());
-        })
-        .catch(() => fetch(`${this.endpoint}/api/version`).then(res2 => res2.json()));
+      const json = await fetch(`${this.endpoint}/api/version`).then(res2 => res2.json());
 
       if (json) {
         this.apiVersion = json.api;

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();

package/src/pb-view.js

@@ -384,28 +384,26 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
     }
 
     if (!this.disableHistory) {
-      if (registry.state.id && !this.xmlId) {
-        this.xmlId = registry.state.id;
-      }
+      this._syncPositionFromRegistry();
 
       if (registry.state.action && registry.state.action === 'search') {
         this.highlight = true;
       }
 
-      if (this.view === 'single') {
-        this.nodeId = null;
-      } else if (registry.state.root && !this.nodeId) {
-        this.nodeId = registry.state.root;
-      }
-
+      const doc = this.getDocument();
+      const prevState = { ...registry.state, ...registry.getState(this) };
       const newState = {
-        id: this.xmlId,
         view: this.getView(),
         odd: this.getOdd(),
-        path: this.getDocument().path,
+        path: doc.path,
       };
-      if (this.view !== 'single') {
+      if (this.xmlId) {
+        newState.id = this.xmlId;
+      }
+      if (this.view !== 'single' && this.nodeId) {
         newState.root = this.nodeId;
+      } else if (prevState.path && prevState.path !== doc.path) {
+        newState.root = null;
       }
       if (this.fill) {
         newState.fill = this.fill;
@@ -567,6 +565,43 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
     }
   }
 
+  _refreshHasPosition(detail) {
+    if (!detail) {
+      return false;
+    }
+    return (
+      Object.prototype.hasOwnProperty.call(detail, 'id') ||
+      Object.prototype.hasOwnProperty.call(detail, 'root') ||
+      Object.prototype.hasOwnProperty.call(detail, 'position') ||
+      Object.prototype.hasOwnProperty.call(detail, 'path') ||
+      Object.prototype.hasOwnProperty.call(detail, 'xpath')
+    );
+  }
+
+  _syncPositionFromRegistry() {
+    if (this.disableHistory || this.getAttribute('xml-id')) {
+      return;
+    }
+    const doc = this.getDocument();
+    if (!doc?.path) {
+      return;
+    }
+    const state = { ...registry.state, ...registry.getState(this) };
+    if (state.path && state.path !== doc.path) {
+      return;
+    }
+    if (!this.xmlId && state.id) {
+      this.xmlId = state.id;
+    }
+    if (!this.nodeId) {
+      if (this.getView() === 'single') {
+        this.nodeId = null;
+      } else if (state.root) {
+        this.nodeId = state.root;
+      }
+    }
+  }
+
   _refresh(ev) {
     if (ev && ev.detail) {
       if (
@@ -588,6 +623,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
       }
       if (ev.detail.id) {
         this.xmlId = ev.detail.id;
+        this.nodeId = null;
       } else if (ev.detail.id == null) {
         this.xmlId = null;
       }
@@ -619,6 +655,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         this._scrollTarget = ev.detail.hash;
       }
     }
+    if (!this._refreshHasPosition(ev?.detail)) {
+      this._syncPositionFromRegistry();
+    }
     this._updateStyles();
     if (this.infiniteScroll) {
       this._clear();
@@ -1264,7 +1303,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
       if (this.view === 'single') {
         // when switching to single view, clear current node id
         this.nodeId = null;
-      } else {
+      } else if (this.switchView) {
         // otherwise use value for alternate view returned from server
         this.nodeId = this.switchView;
       }
@@ -1279,7 +1318,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
       this.columnSeparator = properties.columnSeparator;
     }
     this.xmlId = (!this.getAttribute('xml-id') && properties.id) || this.xmlId;
-    this.nodeId = (!this.getAttribute('xml-id') && properties.root) || null;
+    if (Object.prototype.hasOwnProperty.call(properties, 'root')) {
+      this.nodeId = (!this.getAttribute('xml-id') && properties.root) || null;
+    }
 
     if (properties.path) {
       this.getDocument().path = properties.path;