@teipublisher/pb-components 1.27.1 → 1.29.0

package/src/pb-odd-editor.js

@@ -832,8 +832,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             this.serializeAttribute('predicate', model.predicate),
             model.type === 'model' ? this.serializeAttribute('behaviour', model.behaviour) : '',
             this.serializeAttribute('cssClass', model.css),
-            this.serializeAttribute('useSourceRendition', model.sourcerend)
-        ].join('')
+            this.serializeAttribute('useSourceRendition', model.sourcerend),
+            this.serializeAttribute('pb:mode', model.mode)
+        ].join('');
 
         const desc = model.desc ? nestedIndent + '<desc>' + model.desc + '</desc>\n' : '';
 
@@ -854,6 +855,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
         }
         const name = this.serializeAttribute('name', parameter.name);
         const value = this.serializeAttribute('value', parameter.value);
+        if (parameter.set) {
+            return `${indent}<pb:set-param xmlns=""${name}${value}/>\n`
+        }
         return `${indent}<param${name}${value}/>\n`
     }
 

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

@@ -171,6 +171,7 @@ export class PbOddElementspecEditor extends LitElement {
                 type="${model.type}"
                 output="${model.output}"
                 css="${model.css}"
+                mode="${model.mode}"
                 .model="${model}"
                 .parameters="${model.parameters}"
                 desc="${model.desc}"
@@ -203,6 +204,7 @@ export class PbOddElementspecEditor extends LitElement {
         const newModel = {
             behaviour: 'inline',
             css: '',
+            mode: '',
             predicate: '',
             desc: '',
             type: addModel.selected,

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

@@ -271,6 +271,9 @@ export class PbOddModelEditor extends LitElement {
                     return value;
                 }
             },
+            mode: {
+                type: String
+            },
             model: {
                 type: Object
             },
@@ -331,6 +334,7 @@ export class PbOddModelEditor extends LitElement {
         this.template = '';
         this.output = '';
         this.css = '';
+        this.mode = '';
         this.model = {};
         this.model.models = [];
         this.parameters = [];
@@ -479,6 +483,11 @@ 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}"
@@ -501,6 +510,7 @@ export class PbOddModelEditor extends LitElement {
                                        behaviour="${this.behaviour}"
                                        name="${parameter.name}"
                                        value="${parameter.value}"
+                                       ?set="${parameter.set}"
                                        endpoint="${this.endpoint}"
                                        apiVersion="${this.apiVersion}"
                                        @parameter-remove="${(e) => this._removeParam(e, index)}"
@@ -543,6 +553,7 @@ export class PbOddModelEditor extends LitElement {
                     type="${model.type}"
                     output="${model.output}"
                     css="${model.css}"
+                    mode="${model.mode}"
                     .model="${model}"
                     .parameters="${model.parameters}"
                     desc="${model.desc}"
@@ -836,6 +847,11 @@ export class PbOddModelEditor extends LitElement {
         this._fireModelChanged('css', this.css);
     }
 
+    _inputMode(ev) {
+        this.mode = ev.composedPath()[0].value;
+        this._fireModelChanged('mode', this.mode);
+    }
+
     _updateTemplate(ev) {
         this.template = this.shadowRoot.getElementById('template').getSource();
         this._fireModelChanged('template', this.template);
@@ -854,6 +870,7 @@ export class PbOddModelEditor extends LitElement {
     _updateParam(e, index) {
         this.parameters[index].name = e.detail.name;
         this.parameters[index].value = e.detail.value;
+        this.parameters[index].set = e.detail.set;
         this._fireModelChanged('parameters', this.parameters);
     }
 

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

@@ -29,7 +29,7 @@ export class PbOddParameterEditor extends LitElement {
             }
             .wrapper{
                 display:grid;
-                grid-template-columns:150px auto 50px;
+                grid-template-columns:150px auto 50px 50px;
                 grid-column-gap:20px;
                 grid-row-gap:20px;
                 margin-bottom:10px;
@@ -37,8 +37,9 @@ export class PbOddParameterEditor extends LitElement {
             paper-dropdown-menu{
                 align-self:start;
             }
-            paper-icon-button{
-                align-self:center;
+            paper-icon-button, paper-checkbox {
+                align-self: center;
+                margin-top: 16px;
             }
         `;
     }
@@ -56,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-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
         </div>
 
@@ -87,6 +88,10 @@ export class PbOddParameterEditor extends LitElement {
             parameters: {
                 type: Object
             },
+            setParam: {
+                type: Boolean,
+                attribute: 'set'
+            },
             _currentParameters: {
                 type: Array
             },
@@ -104,6 +109,7 @@ export class PbOddParameterEditor extends LitElement {
         super();
         this.name = '';
         this.value = '';
+        this.setParam = false;
         this.behaviour = '';
         this.currentParameters = [];
         this.parameters = {
@@ -189,7 +195,8 @@ export class PbOddParameterEditor extends LitElement {
         console.log('_handleCodeChange ', e);
         this.value = this.shadowRoot.getElementById('editor').getSource();
         this.name = this.shadowRoot.getElementById('combo').text;
-        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value } }));
+        this.setParam = this.shadowRoot.getElementById('set').checked;
+        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value, set: this.setParam } }));
     }
 
 

package/src/pb-table-grid.js

@@ -60,6 +60,13 @@ export class PbTableGrid extends pbMixin(LitElement) {
             resizable: {
                 type: Boolean
             },
+            perPage: {
+                type: Number,
+                attribute: 'per-page'
+            },
+            height: {
+                type: String
+            },
             /**
              * If specified, enable server-side search.
              */
@@ -79,6 +86,9 @@ export class PbTableGrid extends pbMixin(LitElement) {
         this._params = {};
         this.resizable = false;
         this.search = false;
+        this.perPage = 10;
+        this.height = null;
+        this.fixedHeader = false;
     }
 
     connectedCallback() {
@@ -93,6 +103,15 @@ export class PbTableGrid extends pbMixin(LitElement) {
             this._params = ev.state;
             this._submit();
         });
+
+        if (!this.height) {
+            const property = getComputedStyle(this).getPropertyValue('--pb-table-grid-height');
+            if (property) {
+                this.height = property;
+            } else {
+                this.height = 'auto';
+            }
+        }
     }
 
     firstUpdated() {
@@ -101,11 +120,12 @@ export class PbTableGrid extends pbMixin(LitElement) {
         const pbColumns = this.querySelectorAll('pb-table-column');
         const columns = [];
         pbColumns.forEach((column) => columns.push(column.data()));
-
         PbTableGrid.waitOnce('pb-page-ready', () => {
             this._params = this.getParameters();
             const url = this.toAbsoluteURL(this.source);
             const config = {
+                height: this.height,
+                fixedHeader: true,
                 columns,
                 resizable: this.resizable,
                 server: {
@@ -115,6 +135,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                 },
                 sort: {
                     multiColumn: false,
+                    enabled: true,
                     server: {
                         url: (prev, cols) => {
                             if (!cols.length) return prev;
@@ -125,7 +146,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                 },
                 pagination: {
                     enabled: true,
-                    limit: 10,
+                    limit: this.perPage,
                     server: {
                         url: (prev, page, limit) => {
                             const form = this.shadowRoot.getElementById('form');
@@ -133,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);
 
@@ -142,6 +163,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                     }
                 }
             };
+
             this.grid = new Grid(config);
             this.grid.on('load', () => {
                 this.emitTo('pb-results-received', {

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;