@teipublisher/pb-components 1.28.2 → 1.30.2

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/dist/pb-odd-editor.js

@@ -12,7 +12,7 @@ import{h as e,o as t,F as o,D as i,E as s,H as r,l as a,f as n,t as d,g as l}fro
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const S=(e,t)=>{const o=e.startNode.parentNode,i=void 0===t?e.endNode:t.startNode,s=o.insertBefore(g(),i);o.insertBefore(g(),i);const r=new b(e.options);return r.insertAfterNode(s),r},C=(e,t)=>(e.setValue(t),e.commit(),e),k=(e,t,o)=>{const i=e.startNode.parentNode,s=o?o.startNode:e.endNode,r=t.endNode.nextSibling;r!==s&&v(i,t.startNode,r,s)},A=e=>{f(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},M=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},R=new WeakMap,I=new WeakMap,B=u((e,t,o)=>{let i;return void 0===o?o=t:void 0!==t&&(i=t),t=>{if(!(t instanceof b))throw new Error("repeat can only be used in text bindings");const s=R.get(t)||[],r=I.get(t)||[],a=[],n=[],d=[];let l,c,p=0;for(const t of e)d[p]=i?i(t,p):p,n[p]=o(t,p),p++;let h=0,m=s.length-1,u=0,g=n.length-1;for(;h<=m&&u<=g;)if(null===s[h])h++;else if(null===s[m])m--;else if(r[h]===d[u])a[u]=C(s[h],n[u]),h++,u++;else if(r[m]===d[g])a[g]=C(s[m],n[g]),m--,g--;else if(r[h]===d[g])a[g]=C(s[h],n[g]),k(t,s[h],a[g+1]),h++,g--;else if(r[m]===d[u])a[u]=C(s[m],n[u]),k(t,s[m],s[h]),m--,u++;else if(void 0===l&&(l=M(d,u,g),c=M(r,h,m)),l.has(r[h]))if(l.has(r[m])){const e=c.get(d[u]),o=void 0!==e?s[e]:null;if(null===o){const e=S(t,s[h]);C(e,n[u]),a[u]=e}else a[u]=C(o,n[u]),k(t,o,s[h]),s[e]=null;u++}else A(s[m]),m--;else A(s[h]),h++;for(;u<=g;){const e=S(t,a[g+1]);C(e,n[u]),a[u++]=e}for(;h<=m;){const e=s[h++];null!==e&&A(e)}R.set(t,a),I.set(t,d)}}),P=new WeakMap,T=u(e=>t=>{const o=P.get(t);if(void 0===e&&t instanceof w){if(void 0!==o||!P.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);P.set(t,e)}),z=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
+const S=(e,t)=>{const o=e.startNode.parentNode,i=void 0===t?e.endNode:t.startNode,s=o.insertBefore(g(),i);o.insertBefore(g(),i);const r=new b(e.options);return r.insertAfterNode(s),r},C=(e,t)=>(e.setValue(t),e.commit(),e),k=(e,t,o)=>{const i=e.startNode.parentNode,s=o?o.startNode:e.endNode,r=t.endNode.nextSibling;r!==s&&v(i,t.startNode,r,s)},A=e=>{f(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},M=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},R=new WeakMap,I=new WeakMap,B=u((e,t,o)=>{let i;return void 0===o?o=t:void 0!==t&&(i=t),t=>{if(!(t instanceof b))throw new Error("repeat can only be used in text bindings");const s=R.get(t)||[],r=I.get(t)||[],a=[],n=[],d=[];let l,c,p=0;for(const t of e)d[p]=i?i(t,p):p,n[p]=o(t,p),p++;let h=0,m=s.length-1,u=0,g=n.length-1;for(;h<=m&&u<=g;)if(null===s[h])h++;else if(null===s[m])m--;else if(r[h]===d[u])a[u]=C(s[h],n[u]),h++,u++;else if(r[m]===d[g])a[g]=C(s[m],n[g]),m--,g--;else if(r[h]===d[g])a[g]=C(s[h],n[g]),k(t,s[h],a[g+1]),h++,g--;else if(r[m]===d[u])a[u]=C(s[m],n[u]),k(t,s[m],s[h]),m--,u++;else if(void 0===l&&(l=M(d,u,g),c=M(r,h,m)),l.has(r[h]))if(l.has(r[m])){const e=c.get(d[u]),o=void 0!==e?s[e]:null;if(null===o){const e=S(t,s[h]);C(e,n[u]),a[u]=e}else a[u]=C(o,n[u]),k(t,o,s[h]),s[e]=null;u++}else A(s[m]),m--;else A(s[h]),h++;for(;u<=g;){const e=S(t,a[g+1]);C(e,n[u]),a[u++]=e}for(;h<=m;){const e=s[h++];null!==e&&A(e)}R.set(t,a),I.set(t,d)}}),P=new WeakMap,z=u(e=>t=>{const o=P.get(t);if(void 0===e&&t instanceof w){if(void 0!==o||!P.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);P.set(t,e)}),T=e`<dom-module id="lumo-tab" theme-for="vaadin-tab">
   <template>
     <style>
       :host {
@@ -234,7 +234,7 @@ const S=(e,t)=>{const o=e.startNode.parentNode,i=void 0===t?e.endNode:t.startNod
       }
     </style>
   </template>
-</dom-module>`;document.head.appendChild(z.content);
+</dom-module>`;document.head.appendChild(T.content);
 /**
 @license
 Copyright (c) 2017 Vaadin Ltd.
@@ -645,7 +645,7 @@ This program is available under Apache License Version 2.0, available at https:/
                         code="${this.value}"
                         linter="${this.endpoint}/${$(this.apiVersion,"1.0.0")?"modules/editor.xql":"api/lint"}"
                         apiVersion="${this.apiVersion}"></pb-code-editor>
-            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">set</paper-checkbox>
+            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">${d("odd.editor.model.set-param")}</paper-checkbox>
             <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
         </div>
 
@@ -830,6 +830,16 @@ This program is available under Apache License Version 2.0, available at https:/
             pb-code-editor {
                 margin-bottom: 20px;
             }
+
+            .horizontal {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+            }
+
+            #mode {
+                min-width: 18em;
+            }
         `}static get properties(){return{behaviour:{type:String},predicate:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},type:{type:String,reflect:!0},template:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},output:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},css:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},mode:{type:String},model:{type:Object},models:{type:Array},parameters:{type:Array},renditions:{type:Array},desc:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},sourcerend:{type:String},show:{type:Boolean,reflect:!0},outputs:{type:Array},behaviours:{type:Array},icon:{type:String},open:{type:String},hasCustomBehaviour:{type:Boolean},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.behaviour="inline",this.predicate="",this.type="",this.template="",this.output="",this.css="",this.mode="",this.model={},this.model.models=[],this.parameters=[],this.renditions=[],this.desc="",this.sourcerend="",this.show=!1,this.outputs=["","web","print","epub","fo","latex","plain"],this.parentModel=[],this.behaviours=["alternate","anchor","block","body","break","cell","cit","document","figure","graphic","heading","inline","link","list","listItem","metadata","note","omit","paragraph","pass-through","row","section","table","text","title","webcomponent"],this.icon="expand-more",this.hasCustomBehaviour=!1}render(){return x`
         <form>
             <header> 
@@ -874,17 +884,22 @@ This program is available under Apache License Version 2.0, available at https:/
                 </p>
             </header>
             <iron-collapse id="details" ?opened="${this.show}" class="details">
-                <paper-dropdown-menu class="selectOutput" label="Output">
-                    <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
-                                   selected="${this.output}" @iron-select="${this._selectOutput}">
+                <div class="horizontal">
+                    <paper-dropdown-menu class="selectOutput" label="Output">
+                        <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
+                                    selected="${this.output}" @iron-select="${this._selectOutput}">
 
-                        ${this.outputs.map(e=>x`
-                            <paper-item value="${e}">${e}</paper-item>
-                        `)}
-
-                    </paper-listbox>
-                </paper-dropdown-menu>
+                            ${this.outputs.map(e=>x`
+                                <paper-item value="${e}">${e}</paper-item>
+                            `)}
 
+                        </paper-listbox>
+                    </paper-dropdown-menu>
+                    <paper-input id="mode" .value="${this.mode}"
+                        placeholder="${d("odd.editor.model.mode-placeholder")}"
+                        label="Mode"
+                        @change="${this._inputMode}"></paper-input>
+                </div>
                 <paper-input id="desc" .value="${this.desc}" placeholder="${d("odd.editor.model.description-placeholder")}"
                     label="Description" @change="${this._inputDesc}"></paper-input>
 
@@ -919,11 +934,6 @@ This program is available under Apache License Version 2.0, available at https:/
                                 placeholder="${d("odd.editor.model.css-class-placeholder")}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
-                            
-                            <paper-input id="mode" .value="${this.mode}"
-                                placeholder="${d("odd.editor.model.mode-placeholder")}"
-                                label="Mode"
-                                @change="${this._inputMode}"></paper-input>
                                 
                             <pb-code-editor id="template"
                                              code="${this.template}"
@@ -1007,7 +1017,7 @@ This program is available under Apache License Version 2.0, available at https:/
             </div> 
         </form> 
         <pb-message id="dialog"></pb-message>
-        `}firstUpdated(){super.firstUpdated(),this.hasCustomBehaviour=this.behaviours.indexOf(this.behaviour)<0,this.hasCustomBehaviour&&(this.shadowRoot.getElementById("custombehaviour").value=this.behaviour)}updated(e){e.has("show")&&this.show&&this.refreshEditors()}refreshEditors(){if(console.log("refreshEditors"),this.shadowRoot.getElementById("predicate").refresh(),this._isGroupOrSequence())return console.log("asfdfa");this.shadowRoot.getElementById("template").refresh();const e=this.shadowRoot.querySelectorAll("pb-odd-model-editor");for(let t=0;t<e.length;t++)e[t].refreshEditors();const t=this.shadowRoot.querySelectorAll("pb-odd-rendition-editor");for(let e=0;e<t.length;e++)t[e].refreshEditor();const o=this.shadowRoot.querySelectorAll("pb-odd-parameter-editor");for(let e=0;e<o.length;e++)o[e].refreshEditor()}toggle(e){this.show=!this.show,this.toggleButtonIcon();const t=this.model,o=Object.assign({},t,{show:this.show});this.model=o,this.refreshEditors(),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:o}}))}toggleButtonIcon(){this.show?this.icon="expand-less":this.icon="expand-more"}_isModel(){return"model"===this.type}_isGroupOrSequence(){return"model"!==this.type}static _templateMode(e){switch(e){case"latex":return"latex";case"web":default:return"xml"}}_changeSelection(e){if(e.detail.target==this)return;e.preventDefault(),e.stopPropagation(),null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection");const t=e.detail.target;t.setAttribute("currentselection","true"),this.currentSelection=t}_requestRemoval(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("model-remove"))}_moveDown(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-down",{composed:!0,bubbles:!0,detail:{model:this}}))}_moveUp(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-up"))}_addNested(e){const t={behaviour:"inline",css:"",desc:"",predicate:"",type:e.detail.item.getAttribute("value"),output:"",sourcerend:!1,models:[],parameters:[],renditions:[],template:"",show:!0},o=this.model,i=Array.from(this.model.models);i.unshift(t),this.model=Object.assign({},o,{models:i});this.shadowRoot.querySelector("#modelType").select(""),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}}))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(l("odd.editor.model.delete-model-label"),l("odd.editor.model.delete-model-message")).then(()=>{const e=this.model,t=Array.from(this.model.models);t.splice(o,1),this.model=Object.assign({},e,{models:t}),this.models=t,this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:e,newModel:this.model}}))},()=>null)}_moveModelDown(e){console.log("MODEL._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(o===this.model.models.length)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o+1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];this._setCurrentSelection(o+1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}})),this.requestUpdate()}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(0===o)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o-1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}}))}handleModelChanged(e){console.log("handleModelChanged ",e,this),e.stopPropagation();const t=this.model,o=this.model.models.indexOf(e.detail.oldModel),i=Array.from(this.model.models);i.splice(o,1,e.detail.newModel),this.model=Object.assign({},t,{models:i}),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:this.model}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_inputDesc(e){this.desc=e.composedPath()[0].value,this._fireModelChanged("desc",this.desc)}_selectOutput(e){this.output=e.composedPath()[0].selected,this._fireModelChanged("output",this.output)}_updatePredicate(e){this.predicate=this.shadowRoot.getElementById("predicate").getSource(),console.log("_updatePredicate ",this.predicate),this._fireModelChanged("predicate",this.predicate)}_selectBehaviour(e){this.behaviour=e.composedPath()[0].selected,this._fireModelChanged("behaviour",this.behaviour)}_inputCss(e){this.css=e.composedPath()[0].value,this._fireModelChanged("css",this.css)}_inputMode(e){this.mode=e.composedPath()[0].value,this._fireModelChanged("mode",this.mode)}_updateTemplate(e){this.template=this.shadowRoot.getElementById("template").getSource(),this._fireModelChanged("template",this.template)}_addParameter(e){this.parameters.push({name:"",value:""}),this._fireModelChanged("parameters",this.parameters)}_updateParam(e,t){this.parameters[t].name=e.detail.name,this.parameters[t].value=e.detail.value,this.parameters[t].set=e.detail.set,this._fireModelChanged("parameters",this.parameters)}_removeParam(e,t){this.parameters.splice(t,1),this._fireModelChanged("parameters",this.parameters)}_addRendition(e){this.renditions.push({scope:"",css:""}),this._fireModelChanged("renditions",this.renditions)}_updateRendition(e,t){this.renditions[t].css=e.detail.css,this.renditions[t].scope=e.detail.scope,this._fireModelChanged("renditions",this.renditions)}_removeRendition(e,t){this.renditions.splice(t,1),this._fireModelChanged("renditions",this.renditions)}_fireModelChanged(e,t){const o=this.model;this.model=Object.assign({},this.model,{[e]:t}),console.log("model changed for %s: %o - %o",e,t,this.model),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}})),this.requestUpdate()}_copy(e){e.preventDefault(),e.stopPropagation(),console.log("odd-model.copy ",e),console.log("odd-model.copy data",this.model),this.dispatchEvent(new CustomEvent("odd-copy",{composed:!0,bubbles:!0,detail:{model:this.model}}))}_paste(e){console.log("model _paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}_handleCustomBehaviour(e){this.behaviour=e.composedPath()[0].value,this._fireModelChanged("behaviour",this.behaviour),""===this.behaviour?(this.behaviour="inline",this.hasCustomBehaviour=!1):this.hasCustomBehaviour=!0,this.requestUpdate()}}customElements.define("pb-odd-model-editor",F);class H extends y{static get styles(){return _`
+        `}firstUpdated(){super.firstUpdated(),this.hasCustomBehaviour=this.behaviours.indexOf(this.behaviour)<0,this.hasCustomBehaviour&&(this.shadowRoot.getElementById("custombehaviour").value=this.behaviour)}updated(e){e.has("show")&&this.show&&this.refreshEditors()}refreshEditors(){if(console.log("refreshEditors"),this.shadowRoot.getElementById("predicate").refresh(),this._isGroupOrSequence())return console.log("asfdfa");this.shadowRoot.getElementById("template").refresh();const e=this.shadowRoot.querySelectorAll("pb-odd-model-editor");for(let t=0;t<e.length;t++)e[t].refreshEditors();const t=this.shadowRoot.querySelectorAll("pb-odd-rendition-editor");for(let e=0;e<t.length;e++)t[e].refreshEditor();const o=this.shadowRoot.querySelectorAll("pb-odd-parameter-editor");for(let e=0;e<o.length;e++)o[e].refreshEditor()}toggle(e){this.show=!this.show,this.toggleButtonIcon();const t=this.model,o=Object.assign({},t,{show:this.show});this.model=o,this.refreshEditors(),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:o}}))}toggleButtonIcon(){this.show?this.icon="expand-less":this.icon="expand-more"}_isModel(){return"model"===this.type}_isGroupOrSequence(){return"model"!==this.type}static _templateMode(e){switch(e){case"latex":return"latex";case"web":default:return"xml"}}_changeSelection(e){if(e.detail.target==this)return;e.preventDefault(),e.stopPropagation(),null!=this.currentSelection&&this.currentSelection.removeAttribute("currentselection");const t=e.detail.target;t.setAttribute("currentselection","true"),this.currentSelection=t}_requestRemoval(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("model-remove"))}_moveDown(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-down",{composed:!0,bubbles:!0,detail:{model:this}}))}_moveUp(e){e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent("model-move-up"))}_addNested(e){const t={behaviour:"inline",css:"",desc:"",predicate:"",type:e.detail.item.getAttribute("value"),output:"",sourcerend:!1,models:[],mode:"",parameters:[],renditions:[],template:"",show:!0},o=this.model,i=Array.from(this.model.models);i.unshift(t),this.model=Object.assign({},o,{models:i});this.shadowRoot.querySelector("#modelType").select(""),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}}))}_removeModel(e){console.log("_removeModel ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);this.shadowRoot.getElementById("dialog").confirm(l("odd.editor.model.delete-model-label"),l("odd.editor.model.delete-model-message")).then(()=>{const e=this.model,t=Array.from(this.model.models);t.splice(o,1),this.model=Object.assign({},e,{models:t}),this.models=t,this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:e,newModel:this.model}}))},()=>null)}_moveModelDown(e){console.log("MODEL._moveModelDown ",e),e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(o===this.model.models.length)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o+1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o+1];this._setCurrentSelection(o+1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}})),this.requestUpdate()}_moveModelUp(e){e.stopPropagation();const{model:t}=e.target,o=this.model.models.indexOf(t);if(0===o)return;const i=this.model,s=Array.from(this.model.models);s.splice(o,1),s.splice(o-1,0,t),this.model=Object.assign({},i,{models:s});const r=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[o-1];this._setCurrentSelection(o-1,r),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:i,newModel:this.model}}))}handleModelChanged(e){console.log("handleModelChanged ",e,this),e.stopPropagation();const t=this.model,o=this.model.models.indexOf(e.detail.oldModel),i=Array.from(this.model.models);i.splice(o,1,e.detail.newModel),this.model=Object.assign({},t,{models:i}),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:t,newModel:this.model}}))}setCurrentSelection(e,t){e.preventDefault(),e.stopPropagation(),this._setCurrentSelection(t,e.target)}_setCurrentSelection(e,t){const o=this.shadowRoot.querySelectorAll("pb-odd-model-editor")[e];o&&(o.hasAttribute("currentselection")||(this.dispatchEvent(new CustomEvent("current-changed",{composed:!0,bubbles:!0,detail:{target:t}})),this.requestUpdate()))}_inputDesc(e){this.desc=e.composedPath()[0].value,this._fireModelChanged("desc",this.desc)}_selectOutput(e){this.output=e.composedPath()[0].selected,this._fireModelChanged("output",this.output)}_updatePredicate(e){this.predicate=this.shadowRoot.getElementById("predicate").getSource(),console.log("_updatePredicate ",this.predicate),this._fireModelChanged("predicate",this.predicate)}_selectBehaviour(e){this.behaviour=e.composedPath()[0].selected,this._fireModelChanged("behaviour",this.behaviour)}_inputCss(e){this.css=e.composedPath()[0].value,this._fireModelChanged("css",this.css)}_inputMode(e){this.mode=e.composedPath()[0].value,this._fireModelChanged("mode",this.mode)}_updateTemplate(e){this.template=this.shadowRoot.getElementById("template").getSource(),this._fireModelChanged("template",this.template)}_addParameter(e){this.parameters.push({name:"",value:""}),this._fireModelChanged("parameters",this.parameters)}_updateParam(e,t){this.parameters[t].name=e.detail.name,this.parameters[t].value=e.detail.value,this.parameters[t].set=e.detail.set,this._fireModelChanged("parameters",this.parameters)}_removeParam(e,t){this.parameters.splice(t,1),this._fireModelChanged("parameters",this.parameters)}_addRendition(e){this.renditions.push({scope:"",css:""}),this._fireModelChanged("renditions",this.renditions)}_updateRendition(e,t){this.renditions[t].css=e.detail.css,this.renditions[t].scope=e.detail.scope,this._fireModelChanged("renditions",this.renditions)}_removeRendition(e,t){this.renditions.splice(t,1),this._fireModelChanged("renditions",this.renditions)}_fireModelChanged(e,t){const o=this.model;this.model=Object.assign({},this.model,{[e]:t}),console.log("model changed for %s: %o - %o",e,t,this.model),this.dispatchEvent(new CustomEvent("model-changed",{composed:!0,bubbles:!0,detail:{oldModel:o,newModel:this.model}})),this.requestUpdate()}_copy(e){e.preventDefault(),e.stopPropagation(),console.log("odd-model.copy ",e),console.log("odd-model.copy data",this.model),this.dispatchEvent(new CustomEvent("odd-copy",{composed:!0,bubbles:!0,detail:{model:this.model}}))}_paste(e){console.log("model _paste ",e),this.dispatchEvent(new CustomEvent("odd-paste",{composed:!0,bubbles:!0,detail:{target:this}}))}_handleCustomBehaviour(e){this.behaviour=e.composedPath()[0].value,this._fireModelChanged("behaviour",this.behaviour),""===this.behaviour?(this.behaviour="inline",this.hasCustomBehaviour=!1):this.hasCustomBehaviour=!0,this.requestUpdate()}}customElements.define("pb-odd-model-editor",F);class H extends y{static get styles(){return _`
             :host {
                 display: block;
                 padding: 4px 10px;
@@ -1325,7 +1335,7 @@ This program is available under Apache License Version 2.0, available at https:/
                             <paper-input id="titleShort" name="short-title" .value="${this.titleShort}" label="${d("odd.editor.title-short")}"
                                          placeholder="[${d("odd.editor.title-short-placeholder")}]"
                                          @change="${e=>this.titleShort=e.composedPath()[0].value}"></paper-input>
-                            <paper-input id="description" name="description" .value="${T(this.description)}" label="${d("odd.editor.description-label")}"
+                            <paper-input id="description" name="description" .value="${z(this.description)}" label="${d("odd.editor.description-label")}"
                                       placeholder="[${d("odd.editor.description-placeholder")}]"
                                       @change="${e=>this.description=e.composedPath()[0].value}"></paper-input>
                             <paper-input id="source" name="source" ?value="${this.source}" label="${d("odd.editor.source-label")}"

package/i18n/common/de.json

@@ -162,7 +162,9 @@
         "custom-behaviour-placeholder": "[Selbstdefiniertes Behaviour]",
         "template-placeholder": "[Code Vorlage für den Inhalt angeben]",
         "param-name-placeholder": "[Name des Parameters]",
-        "empty": "[Leer]"
+        "empty": "[Leer]",
+        "mode-placeholder": "[Modus setzen für nachfolgende Modelle]",
+        "set-param": "setze"
       },
       "css-source": "CSS Datei öffnen"
     }

package/i18n/common/en.json

@@ -163,7 +163,8 @@
         "template-placeholder": "[Define code template to apply to content]",
         "param-name-placeholder": "[Param name]",
         "empty": "[Empty]",
-        "mode-placeholder": "Processing mode - passed to subsequent models"
+        "mode-placeholder": "[Processing mode - passed to subsequent models]",
+        "set-param": "set"
       },
       "css-source": "Open CSS file"
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.28.2",
+  "version": "1.30.2",
   "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-odd-model-editor.js

@@ -214,6 +214,16 @@ export class PbOddModelEditor extends LitElement {
             pb-code-editor {
                 margin-bottom: 20px;
             }
+
+            .horizontal {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+            }
+
+            #mode {
+                min-width: 18em;
+            }
         `;
     }
 
@@ -435,18 +445,23 @@ export class PbOddModelEditor extends LitElement {
                 </p>
             </header>
             <iron-collapse id="details" ?opened="${this.show}" class="details">
-                <paper-dropdown-menu class="selectOutput" label="Output">
-                    <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
-                                   selected="${this.output}" @iron-select="${this._selectOutput}">
-
-                        ${this.outputs.map((item) =>
-                        html`
-                            <paper-item value="${item}">${item}</paper-item>
-                        `)}
+                <div class="horizontal">
+                    <paper-dropdown-menu class="selectOutput" label="Output">
+                        <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
+                                    selected="${this.output}" @iron-select="${this._selectOutput}">
 
-                    </paper-listbox>
-                </paper-dropdown-menu>
+                            ${this.outputs.map((item) =>
+                            html`
+                                <paper-item value="${item}">${item}</paper-item>
+                            `)}
 
+                        </paper-listbox>
+                    </paper-dropdown-menu>
+                    <paper-input id="mode" .value="${this.mode}"
+                        placeholder="${translate('odd.editor.model.mode-placeholder')}"
+                        label="Mode"
+                        @change="${this._inputMode}"></paper-input>
+                </div>
                 <paper-input id="desc" .value="${this.desc}" placeholder="${translate('odd.editor.model.description-placeholder')}"
                     label="Description" @change="${this._inputDesc}"></paper-input>
 
@@ -483,11 +498,6 @@ export class PbOddModelEditor extends LitElement {
                                 placeholder="${translate('odd.editor.model.css-class-placeholder')}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
-                            
-                            <paper-input id="mode" .value="${this.mode}"
-                                placeholder="${translate('odd.editor.model.mode-placeholder')}"
-                                label="Mode"
-                                @change="${this._inputMode}"></paper-input>
                                 
                             <pb-code-editor id="template"
                                              code="${this.template}"
@@ -708,6 +718,7 @@ export class PbOddModelEditor extends LitElement {
             output: '',
             sourcerend: false,
             models: [],
+            mode: '',
             parameters: [],
             renditions: [],
             template: '',

package/src/pb-odd-parameter-editor.js

@@ -57,7 +57,7 @@ export class PbOddParameterEditor extends LitElement {
                         code="${this.value}"
                         linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') ? 'modules/editor.xql' : 'api/lint'}"
                         apiVersion="${this.apiVersion}"></pb-code-editor>
-            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">set</paper-checkbox>
+            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">${translate('odd.editor.model.set-param')}</paper-checkbox>
             <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
         </div>
 

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;
 }
 
 /**
@@ -322,7 +323,7 @@ class PbViewAnnotate extends PbView {
 
   set annotations(annoData) {
     this._ranges = annoData;
-    this.updateAnnotations();
+    this.updateAnnotations(true);
     this._initAnnotationColors();
     this._annotationStyles();
   }
@@ -412,7 +413,7 @@ class PbViewAnnotate extends PbView {
     }, 300));
   }
 
-  _updateAnnotation(teiRange, batch = false) {
+  _updateAnnotation(teiRange, silent = false, batch = false) {
     const view = this.shadowRoot.getElementById('view');
     const context = Array.from(view.querySelectorAll(`[data-tei="${teiRange.context}"]`)).filter(
       node => node.closest('pb-popover') === null && node.getAttribute('rel') !== 'footnote',
@@ -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));
@@ -462,6 +467,9 @@ class PbViewAnnotate extends PbView {
     try {
       range.surroundContents(span);
     } catch (e) {
+      if (silent) {
+        return null;
+      }
       throw new Error('An error occurred. The annotation may not be displayed. You should consider saving and reloading the document.');
     }
     this._rangesMap.set(span, teiRange);
@@ -473,7 +481,7 @@ class PbViewAnnotate extends PbView {
     return span;
   }
 
-  updateAnnotations() {
+  updateAnnotations(silent = false) {
     this._ranges.forEach((teiRange) => { 
       let span;
       switch (teiRange.type) {
@@ -490,7 +498,7 @@ class PbViewAnnotate extends PbView {
           span.dataset.annotation = JSON.stringify(teiRange.properties);
           break;
         default:
-          this._updateAnnotation(teiRange, true);
+          this._updateAnnotation(teiRange, silent, true);
           break;   
       }
     });
@@ -980,6 +988,7 @@ class PbViewAnnotate extends PbView {
         lightness: [30, 60]
       }));
     });
+    this.emitTo('pb-annotation-colors', { colors: this._annotationColors });
   }
 
   _checkAnnotationColor(type) {
@@ -992,6 +1001,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 = [];
@@ -696,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;