@teipublisher/pb-components 2.26.0-next-3.9 → 2.26.0-next-3.11

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

@@ -13,7 +13,7 @@ import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox/paper-listbox.js';
 import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-styles/color.js';
-import '@polymer/iron-collapse/iron-collapse.js';
+
 import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
 
 import { cmpVersion } from './utils.js';
@@ -149,7 +149,7 @@ export class PbOddModelEditor extends LitElement {
                 display:inline;
                 align-self:stretch;
             }
-            
+
             .group {
                 margin: 0;
                 font-size: 16px;
@@ -199,20 +199,25 @@ export class PbOddModelEditor extends LitElement {
             :host([currentselection]) > form > header > h4 > .btn-group{
                 display: inline-block;
             }
-            iron-collapse{
+            details {
+                display: block;
+            }
+
+            details summary {
+                display: none;
             }
 
             .renditions{
                 margin-top:10px;
             }
-            
+
             .details{
                 padding:0px 50px 20px 20px;
                 background:var(--paper-grey-200);
             }
-            
-            .editor {
-                margin-bottom: 20px;
+
+            details:not([open]) {
+                padding: 0;
             }
 
             .editor label {
@@ -425,12 +430,12 @@ export class PbOddModelEditor extends LitElement {
         }
         return html`
         <form>
-            <header> 
+            <header>
                 <h4>
                     <paper-icon-button id="toggle"
                                        icon="${this.icon}" @click="${this.toggle}"
                                        class="model-collapse"></paper-icon-button>
-                                       
+
                     <span class="modelType">${this.type}<span class="behaviour" ?hidden="${this._isGroupOrSequence()}">${this.behaviour}</span></span>
 
                     <span class="btn-group">
@@ -470,7 +475,8 @@ export class PbOddModelEditor extends LitElement {
                     <div class="predicate">${this.predicate}</div>
                 </p>
             </header>
-            <iron-collapse id="details" ?opened="${this.show}" class="details">
+            <details ?open="${this.show}" class="details">
+                <summary style="display: none;"></summary>
                 <div class="horizontal">
                     <paper-dropdown-menu class="selectOutput" label="Output">
                         <paper-listbox id="output" slot="dropdown-content" attr-for-selected="value"
@@ -494,13 +500,13 @@ export class PbOddModelEditor extends LitElement {
                 <div class="editor">
                     <label>Predicate</label>
                     <jinn-codemirror id="predicate"
-                        code="${this.predicate}"   
+                        code="${this.predicate}"
                         mode="xquery"
                         linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') < 0 ? 'modules/editor.xql' : 'api/lint'}"
                         placeholder="${translate('odd.editor.model.predicate-placeholder')}"
                         @update="${this._updatePredicate}"></jinn-codemirror>
                 </div>
-               
+
                 ${this._isModel()
                 ? html`
                         <div>
@@ -519,13 +525,13 @@ export class PbOddModelEditor extends LitElement {
                                 <span></span>
                             </div>
 
-                                
-    
+
+
                             <paper-input id="css" .value="${this.css}"
                                 placeholder="${translate('odd.editor.model.css-class-placeholder')}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
-                            
+
                             <div class="editor">
                                 <label>Template</label>
                                 <jinn-codemirror id="template"
@@ -538,20 +544,20 @@ export class PbOddModelEditor extends LitElement {
                                             title="Select element around current cursor position">&lt;|></paper-button>
                                         <paper-button data-mode="xml" data-command="encloseWith" data-key="mod-e mod-e"
                                             title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags" 
+                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags"
                                             data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
                                         <paper-button data-mode="html" data-command="selectElement" data-key="mod-e mod-s"
                                             title="Select element around current cursor position">&lt;|></paper-button>
                                         <paper-button data-mode="html" data-command="encloseWith" data-key="mod-e mod-e"
                                             title="Enclose selection in new element">&lt;...&gt;</paper-button>
-                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags" 
+                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags"
                                             data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
                                         <paper-button data-key="mod-e mod-p" data-command="snippet" data-params="[[\${_}]]" title="Insert template variable">[[...]]</paper-button>
                                     </div>
                                 </jinn-codemirror>
                             </div>
                         </div>
-        
+
                         <div class="parameters">
                             <div class="group">
                                 <span class="title">Parameters</span>
@@ -560,7 +566,7 @@ export class PbOddModelEditor extends LitElement {
                             </div>
                             ${repeat(this.parameters, (parameter) => parameter.name, (parameter, index) =>
                         html`
-                                <pb-odd-parameter-editor 
+                                <pb-odd-parameter-editor
                                        behaviour="${this.behaviour}"
                                        name="${parameter.name}"
                                        value="${parameter.value}"
@@ -597,11 +603,11 @@ export class PbOddModelEditor extends LitElement {
                     `
                 : ''
             }
-            </iron-collapse>
-            
+            </details>
+
             <div class="models">
                 ${repeat(this.model.models, (model, index) => html`
-                <pb-odd-model-editor 
+                <pb-odd-model-editor
                     behaviour="${model.behaviour || 'inline'}"
                     predicate="${model.predicate}"
                     type="${model.type}"
@@ -625,9 +631,9 @@ export class PbOddModelEditor extends LitElement {
                     hasParent
                     ></pb-odd-model-editor>
             `)}
-    
-            </div> 
-        </form> 
+
+            </div>
+        </form>
         <pb-message id="dialog"></pb-message>
         `;
     }

package/src/pb-view-annotate.js

@@ -268,6 +268,9 @@ class PbViewAnnotate extends PbView {
   connectedCallback() {
     super.connectedCallback();
 
+    // fill should always be 0 when doing annotations!!!
+    this.fill = 0;
+
     let isMouseDown = false;
 
     this._inHandler = false;

package/src/pb-view.js

@@ -12,11 +12,11 @@ import '@polymer/iron-ajax';
  * The document to be viewed is determined by the `pb-document` element the property
  * `src` points to. If not overwritten, `pb-view` will use the settings defined by
  * the connected document, like view type, ODD etc.
- * 
+ *
  * `pb-view` can display an entire document or just a fragment of it
  * as defined by the properties `xpath`, `xmlId` or `nodeId`. The most common use case
  * is to set `xpath` to point to a specific part of a document.
- * 
+ *
  * Navigating to the next or previous fragment would usually be triggered by a separate
  * `pb-navigation` element, which sends a `pb-navigate` event to the `pb-view`. However,
  * `pb-view` also implements automatic loading of next/previous fragments if the user
@@ -48,7 +48,7 @@ import '@polymer/iron-ajax';
  * @cssprop --pb-view-scroll-margin-top - Applied to any element with an id
  * @csspart content - The root div around the displayed content
  * @csspart footnotes - div containing the footnotes
-  
+
  * @fires pb-start-update - Fired before the element updates its content
  * @fires pb-update - Fired when the component received content from the server
  * @fires pb-end-update - Fired after the element has finished updating its content
@@ -95,6 +95,16 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             view: {
                 type: String
             },
+            /**
+             * Controls the pagination-by-div algorithm: if a page would have less than
+             * `fill` elements, it tries to fill
+             * up the page by pulling following divs in. When set to 0, it will never
+             * attempt to fill up the page. For the annotation editor this should
+             * always be 0.
+             */
+            fill: {
+                type: Number
+            },
             /**
             * An eXist nodeId. If specified, selects the root of the fragment of the document
             * which should be displayed. Normally this property is set automatically by pagination.
@@ -193,7 +203,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             },
             /**
             * The reading direction, i.e. 'ltr' or 'rtl'.
-            * 
+            *
             * @type {"ltr"|"rtl"}
             */
             direction: {
@@ -217,7 +227,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             /**
              * If set, a refresh will be triggered if a `pb-i18n-update` event is received,
              * e.g. due to the user selecting a different interface language.
-             * 
+             *
              * Also requires `requireLanguage` to be set on the surrounding `pb-page`.
              * See there for more information.
              */
@@ -236,7 +246,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
              * Experimental: if enabled, the view will incrementally load new document fragments if the user tries to scroll
              * beyond the start or end of the visible text. The feature inserts a small blank section at the top
              * and bottom. If this section becomes visible, a load operation will be triggered.
-             * 
+             *
              * Note: only browsers implementing the `IntersectionObserver` API are supported. Also the feature
              * does not work in two-column mode or with animations.
              */
@@ -259,8 +269,8 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
              * When method `wait` is called, it will wait until all referenced
              * components signal with a `pb-ready` event that they are ready and listening
              * to events.
-             * 
-             * `pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature` 
+             *
+             * `pb-view` by default sets this property to select `pb-toggle-feature` and `pb-select-feature`
              * elements.
              */
             waitFor: {
@@ -270,7 +280,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             /**
              * By default, navigating to next/previous page will update browser parameters,
              * so reloading the page will load the correct position within the document.
-             * 
+             *
              * Set this property to disable location tracking for the component altogether.
              */
             disableHistory: {
@@ -289,7 +299,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 attribute: 'before-update-event'
             },
             /**
-             * If set, do not scroll the view to target node (e.g. given in URL hash) 
+             * If set, do not scroll the view to target node (e.g. given in URL hash)
              * after content was loaded.
              */
             noScroll: {
@@ -401,6 +411,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             if (this.view !== 'single') {
                 newState.root = this.nodeId;
             }
+            if (this.fill) {
+                newState.fill = this.fill;
+            }
             console.log('id: %s; state: %o', this.id, newState);
             registry.replace(this, newState);
 
@@ -506,7 +519,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
 
     /**
      * Returns the ODD used to render content.
-     * 
+     *
      * @returns the ODD being used
      */
     getOdd() {
@@ -581,6 +594,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 this.columnSeparator = ev.detail.columnSeparator;
             }
             this.view = ev.detail.view || this.getView();
+            this.fill = ev.detail.fill || this.fill;
             if (ev.detail.xpath) {
                 this.xpath = ev.detail.xpath;
                 this.nodeId = null;
@@ -648,7 +662,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         }
 
         const loadContent = this.shadowRoot.getElementById('loadContent');
-        
+
         if (this.static !== null) {
             this._staticUrl(params).then((url) => {
                 loadContent.url = url;
@@ -689,7 +703,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             });
             return urlComponents.join('&');
         }
-        
+
         const index = await fetch(`index.json`)
             .then((response) => response.json());
         const paramNames = ['odd', 'view', 'xpath', 'map'];
@@ -729,7 +743,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         } else {
             message = '<pb-i18n key="dialogs.serverError"></pb-i18n>';
         }
-        
+
         let content;
         if (this.notFound != null) {
             content = `<p>${this.notFound}</p>`;
@@ -764,7 +778,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
 
         if (this._scrollTarget) {
             this.updateComplete.then(() => {
-                const target = this.shadowRoot.getElementById(this._scrollTarget) || 
+                const target = this.shadowRoot.getElementById(this._scrollTarget) ||
                     this.shadowRoot.querySelector(`[node-id="${this._scrollTarget}"]`);
                 if (target) {
                     window.requestAnimationFrame(() =>
@@ -1025,6 +1039,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         }
         params.odd = this.getOdd() + '.odd';
         params.view = this.getView();
+        params.fill = this.fill;
         if (pos) {
             params['root'] = pos;
         }
@@ -1120,7 +1135,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
      * Check the number of fragments which were already loaded in infinite
      * scroll mode. If they exceed `infiniteScrollMax`, remove either the
      * first or last fragment from the DOM, depending on the scroll direction.
-     * 
+     *
      * @param {string} direction either 'forward' or 'backward'
      */
     _checkChunks(direction) {
@@ -1165,7 +1180,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         const properties = registry.getState(this);
         if (properties) {
             this._setState(properties);
-            
+
         }
 
         if (ev.detail.refresh) {
@@ -1213,6 +1228,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 this.nodeId = this.switchView;
             }
         }
+        if (properties.fill && !this.getAttribute('fill')) {
+            this.fill = properties.fill;
+        }
         if (properties.xpath && !this.getAttribute('xpath')) {
             this.xpath = properties.xpath;
         }
@@ -1273,9 +1291,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 -ms-overflow-style: none;
             }
 
-            :host(.noscroll)::-webkit-scrollbar { 
+            :host(.noscroll)::-webkit-scrollbar {
                 width: 0 !important;
-                display: none; 
+                display: none;
             }
 
             [id] {
@@ -1355,7 +1373,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 0% {
                     background-position: 3rem 0;
                 }
-                
+
                 100% {
                     background-position: 0 0;
                 }