@teipublisher/pb-components 1.28.0 → 1.30.0

package/dist/pb-elements.json

@@ -9743,6 +9743,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -9932,6 +9937,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "beforeUpdate",
+          "attribute": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -10183,6 +10194,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10355,6 +10371,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "beforeUpdate",
+          "attribute": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/package.json

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

package/pb-elements.json

@@ -9743,6 +9743,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -9932,6 +9937,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "beforeUpdate",
+          "attribute": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -10183,6 +10194,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10355,6 +10371,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "beforeUpdate",
+          "attribute": "before-update-event",
+          "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
+          "type": "string"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/pb-table-grid.js

@@ -154,7 +154,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                                 Object.assign(this._params, form.serializeForm());
                             }
                             this._params.limit = limit;
-                            this._params.start = page * limit;
+                            this._params.start = page * limit + 1;
                             this.setParameters(this._params);
                             this.pushHistory('grid', this._params);
 

package/src/pb-view-annotate.js

@@ -112,12 +112,13 @@ function ancestors(node, selector) {
  * @param {Node} node the current node
  * @returns next text node or the current node if none is found
  */
-function nextTextNode(node) {
-  let next = node.nextSibling;
-  while (next.hasChildNodes()) {
-    next = next.firstChild;
+function nextTextNode(context, node) {
+  const walker = document.createTreeWalker(context, NodeFilter.SHOW_TEXT);
+  walker.currentNode = node;
+  if (walker.nextNode()) {
+    return walker.currentNode;
   }
-  return next.nodeType === Node.TEXT_NODE ? next : node;
+  return node;
 }
 
 /**
@@ -433,12 +434,16 @@ class PbViewAnnotate extends PbView {
 
     console.log('<pb-view-annotate> Range before adjust: %o %o', startPoint, endPoint);
     if (startPoint[1] === startPoint[0].textContent.length) {
-      const nextNode = nextTextNode(startPoint[0]);
+      // try to find the next text node
+      const nextNode = nextTextNode(context, startPoint[0]);
       // next text node is the endpoint: start there
       if (nextNode === endPoint[0]) {
         range.setStart(nextNode, 0);
+        // adjust startPoint for check below
+        startPoint[0] = nextNode;
+        startPoint[1] = 0;
       } else {
-        range.setStartBefore(startPoint[0].nextSibling);
+        range.setStartBefore(startPoint[0].nextSibling || nextNode);
       }
     } else if (startPoint[0] !== endPoint[0] && startPoint[1] === 0) {
       range.setStartBefore(extendRange(startPoint[0], context));
@@ -980,6 +985,7 @@ class PbViewAnnotate extends PbView {
         lightness: [30, 60]
       }));
     });
+    this.emitTo('pb-annotation-colors', { colors: this._annotationColors });
   }
 
   _checkAnnotationColor(type) {
@@ -992,6 +998,7 @@ class PbViewAnnotate extends PbView {
       lightness: [30, 60]
     }));
     this._annotationStyles();
+    this.emitTo('pb-annotation-colors', { colors: this._annotationColors });
   }
 
   _annotationStyles() {

package/src/pb-view.js

@@ -272,6 +272,17 @@ export class PbView extends pbMixin(LitElement) {
                 type: Boolean,
                 attribute: 'disable-history'
             },
+            /**
+             * If set to the name of an event, the content of the pb-view will not be replaced
+             * immediately upon updates. Instead, an event is emitted, which contains the new content
+             * in property `root`. An event handler intercepting the event can thus modify the content.
+             * Once it is done, it should pass the modified content to the callback function provided
+             * in the event detail under the name `render`. See the demo for an example.
+             */
+            beforeUpdate: {
+                type: String,
+                attribute: 'before-update-event'
+            },
             _features: {
                 type: Object
             },
@@ -312,6 +323,7 @@ export class PbView extends pbMixin(LitElement) {
         this.highlight = false;
         this.infiniteScrollMax = 10;
         this.disableHistory = false;
+        this.beforeUpdate = null;
         this._features = {};
         this._selector = new Map();
         this._chunks = [];
@@ -496,6 +508,15 @@ export class PbView extends pbMixin(LitElement) {
 
     _refresh(ev) {
         if (ev && ev.detail) {
+            if (ev.detail.hash && !(ev.detail.id || ev.detail.path || ev.detail.odd || ev.detail.view || ev.detail.position)) {
+                // if only the scroll target has changed: scroll to the element without reloading
+                this._scrollTarget = ev.detail.hash;
+                const target = this.shadowRoot.getElementById(this._scrollTarget);
+                if (target) {
+                    setTimeout(() => target.scrollIntoView());
+                }
+                return;
+            }
             if (ev.detail.path) {
                 const doc = this.getDocument();
                 doc.path = ev.detail.path;
@@ -641,7 +662,7 @@ export class PbView extends pbMixin(LitElement) {
                 if (target) {
                     setTimeout(() => {
                         target.scrollIntoView();
-                    });
+                    }, 100);
                 }
                 this._scrollTarget = null;
             });
@@ -687,6 +708,22 @@ export class PbView extends pbMixin(LitElement) {
         fragment.appendChild(elem);
         elem.innerHTML = resp.content;
 
+        // if before-update-event is set, we do not replace the content immediately,
+        // but emit an event
+        if (this.beforeUpdate) {
+            this.emitTo(this.beforeUpdate, {
+                data: resp,
+                root: elem,
+                render: (content) => {
+                    this._doReplaceContent(content, resp, direction);
+                }
+            });
+        } else {
+            this._doReplaceContent(elem, resp, direction);
+        }
+    }
+
+    _doReplaceContent(elem, resp, direction) {
         if (this.columnSeparator) {
             this._replaceColumns(elem);
             this._loading = false;