@teipublisher/pb-components 2.19.2 → 2.20.0

package/lib/read-me-osd.md

@@ -0,0 +1,12 @@
+## Openseadragon
+
+We are using our own patched version of OSD from https://github.com/Jinntec/openseadragon
+
+Reason:
+OSD removes all body children when going to fullscreen. This creates issues with `<pb-page>` also be gone so display is empty after existing full-screen.
+
+Fork is up-to-date with upstream OSD 4.1.1
+
+
+
+

package/package.json

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

package/pb-elements.json

@@ -4415,7 +4415,7 @@
         },
         {
           "name": "pb-load-facsimile",
-          "description": "When received, adds an image to the current image sequence. Emitted by \n`pb-facs-link`. The event detail should contain an object with the properties `url`, `order` and `element`,\nwhere `url` is the relative or absolute URL to the image, `order` is an integer specifying the position at which\nthe image should be inserted in the list, and `element` points to the `pb-facs-link` element triggering the event."
+          "description": "When received, adds an image to the current image sequence. Emitted by\n`pb-facs-link`. The event detail should contain an object with the properties `url`, `order` and `element`,\nwhere `url` is the relative or absolute URL to the image, `order` is an integer specifying the position at which\nthe image should be inserted in the list, and `element` points to the `pb-facs-link` element triggering the event."
         },
         {
           "name": "pb-show-annotation",
@@ -8791,6 +8791,12 @@
           "description": "a name for each available panel, to be displayed in the dropdown. If not set,\neach template will be checked for a title attribute, which will be taken as name.",
           "type": "array"
         },
+        {
+          "name": "draggable",
+          "description": "if set, the panel can be dragged to another position in the grid. A button will\nbe added to the toolbar to allow dragging.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -8844,6 +8850,18 @@
           "description": "a name for each available panel, to be displayed in the dropdown. If not set,\neach template will be checked for a title attribute, which will be taken as name.",
           "type": "array"
         },
+        {
+          "name": "position",
+          "type": "number",
+          "default": "-1"
+        },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "if set, the panel can be dragged to another position in the grid. A button will\nbe added to the toolbar to allow dragging.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -8890,6 +8908,9 @@
         {
           "name": "pb-refresh",
           "description": "Fired after a new content panel is shown to allow connected components to refresh."
+        },
+        {
+          "name": "pb-drop"
         }
       ],
       "slots": [

package/src/pb-facsimile.js

@@ -7,7 +7,7 @@ import { resolveURL } from './utils.js';
  * View zoomable images using a IIIF server.
  *
  * @fires pb-start-update - When received, resets the facsimile viewer
- * @fires pb-load-facsimile - When received, adds an image to the current image sequence. Emitted by 
+ * @fires pb-load-facsimile - When received, adds an image to the current image sequence. Emitted by
  * `pb-facs-link`. The event detail should contain an object with the properties `url`, `order` and `element`,
  * where `url` is the relative or absolute URL to the image, `order` is an integer specifying the position at which
  * the image should be inserted in the list, and `element` points to the `pb-facs-link` element triggering the event.
@@ -41,7 +41,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
                 type: Boolean,
                 attribute: 'show-navigator'
             },
-            
+
             /** If true then the 'previous" and 'next' button is displayed switch between images. */
             showSequenceMode: {
                 type: Boolean,
@@ -173,16 +173,16 @@ export class PbFacsimile extends pbMixin(LitElement) {
         this.subscribeTo('pb-start-update', this._clearAll.bind(this));
         this.subscribeTo('pb-load-facsimile', (e) => {
             const { element, order } = e.detail
-            const itemOrder = this._facsimiles.map(item => item.getOrder ? item.getOrder() : Number.POSITIVE_INFINITY )  
+            const itemOrder = this._facsimiles.map(item => item.getOrder ? item.getOrder() : Number.POSITIVE_INFINITY )
             const insertAt = itemOrder.reduce((result, next, index) => {
                 if (order < next) return result;
                 if (order === next) return index;
                 return index + 1;
             }, 0)
-            
+
             this._facsimiles.splice(insertAt, 0, element)
             this.loaded = this._facsimiles.length > 0;
-            
+
             this._facsimileObserver()
         });
         this.subscribeTo('pb-show-annotation', this._showAnnotationListener.bind(this));
@@ -236,7 +236,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
         const options = {
             element: this.shadowRoot.getElementById('viewer'),
             prefixUrl,
-            preserveViewport: true,            
+            preserveViewport: true,
             showZoomControl: true,
             sequenceMode: this.showSequenceMode,
             showHomeControl: this.showHomeControl,
@@ -271,10 +271,8 @@ export class PbFacsimile extends pbMixin(LitElement) {
         to full-page functionality. Standard OSD completely deletes all body children disconnecting all event-handlers
         that have been there. This solution just uses style.display to hide/show. Former display value of pb-page
         will be preserved.
-
-        Current limitation: this solution assumes that a pb-page element exists and is an immediate child of body.
          */
-        this.ownerPage = this.closest('pb-page');
+        this.ownerPage = document.querySelector('pb-page');
         if(this.ownerPage){
             this.pbPageDisplay = window.getComputedStyle(this.ownerPage).getPropertyValue('display');
             this.viewer.addHandler('full-screen', (ev) => {

package/src/pb-grid.js

@@ -92,10 +92,27 @@ export class PbGrid extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
+
         this.panels.forEach(panelNum => this._insertPanel(panelNum));
         registry.commit(this, this._getState())
         this._animate();
         this._update();
+
+        this.addEventListener('pb-drop', (ev) => {
+            const draggedPanelIdx = parseInt(ev.detail.panel);
+            const targetPanelIdx = this._getPanelIndex(ev.detail.target);
+
+            console.log('<pb-grid> Insert panel %d at %d in %s', draggedPanelIdx, targetPanelIdx, this.panels);
+            this.querySelectorAll('._grid_panel').forEach((panel) => {
+                panel.classList.remove('dragover');
+            });
+            
+            this.panels.splice(targetPanelIdx, 0, this.panels.splice(draggedPanelIdx, 1)[0]);
+            this.innerHTML=''; // hard reset of child DOM
+            this.panels.forEach(panelNum => this._insertPanel(panelNum));
+            registry.commit(this, this._getState());
+            this._update();
+        });
     }
 
     /**
@@ -153,14 +170,28 @@ export class PbGrid extends pbMixin(LitElement) {
         this.emitTo('pb-refresh', null);
     }
 
+    /**
+     * Remove a panel from the grid
+     * 
+     * @param {HTMLElement|number} panel the pb-panel element or the panel number 
+     */
     removePanel(panel) {
-        const idx = this._getPanelIndex(panel);
+        let idx;
+        let container;
+        if (typeof panel === 'number') {
+            idx = this.panels.indexOf(panel);
+            container = this.querySelector(`[active="${panel}"]`);
+        } else {
+            container = panel;
+            idx = this._getPanelIndex(panel);
+        }
         console.log('<pb-grid> Removing panel %d', idx);
         this.panels.splice(this.direction === 'rtl' ? this.panels.length - idx - 1 : idx, 1);
 
-        panel.parentNode.removeChild(panel);
+        container.parentNode.removeChild(panel);
         this._columns -= 1;
-        registry.commit(this, this._getState() )
+        registry.commit(this, this._getState());
+        this._assignPanelIds();
         this._update();
     }
 
@@ -173,6 +204,7 @@ export class PbGrid extends pbMixin(LitElement) {
             this.insertBefore(clone, this.firstElementChild);
         }
         clone.classList.add('_grid_panel');
+        this._assignPanelIds();
     }
 
     _update() {
@@ -194,6 +226,12 @@ export class PbGrid extends pbMixin(LitElement) {
         return panels.indexOf(panel);
     }
 
+    _assignPanelIds() {
+        this.querySelectorAll('._grid_panel').forEach((panel, idx) => {
+            panel.position = idx;
+        });
+    }
+
     _getState() {
         return { panels: this.panels.join('.') };
     }

package/src/pb-panel.js

@@ -43,6 +43,13 @@ export class PbPanel extends pbMixin(LitElement) {
             panels: {
                 type: Array,
                 reflect: true
+            },
+            /**
+             * if set, the panel can be dragged to another position in the grid. A button will
+             * be added to the toolbar to allow dragging.
+             */
+            draggable: {
+                type: Boolean
             }
         };
     }
@@ -52,6 +59,8 @@ export class PbPanel extends pbMixin(LitElement) {
         this.active = 0;
         this.label = 'View';
         this.panels = null;
+        this.position = -1;
+        this.draggable = false;
     }
 
     connectedCallback() {
@@ -65,15 +74,59 @@ export class PbPanel extends pbMixin(LitElement) {
         this._show();
     }
 
+    firstUpdated() {
+        const dragHandle = this.shadowRoot.getElementById('drag-handle');
+        let initiator = null;
+
+        if (this.draggable) {
+            dragHandle.addEventListener('dragstart', (ev) => {
+                ev.dataTransfer.setDragImage(this, 10, 10);
+                ev.dataTransfer.setData("text", this.position);
+                initiator = this;
+            });
+        }
+
+        this.addEventListener('dragover', (ev) => {
+            ev.preventDefault();
+        });
+        document.addEventListener('dragenter', (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            if (initiator === this) {
+                return;
+            }
+            if (this.contains(ev.target)) {
+                this.classList.add('dragover');
+            } else {
+                this.classList.remove('dragover');
+            }
+        });
+        this.addEventListener('drop', (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            initiator = null;
+            this.dispatchEvent(new CustomEvent('pb-drop', {
+                detail: {
+                    panel: ev.dataTransfer.getData("text"),
+                    target: this
+                },
+                bubbles: true,
+                composed: true
+            }));
+        });
+    }
+
     render() {
         return html`
-            <app-toolbar>
+            <app-toolbar id="toolbar">
                 <paper-dropdown-menu id="menu" label="${this.label}">
                     <paper-listbox id="panels" slot="dropdown-content" class="dropdown-content" 
-                        selected="${this.active}" @selected-item-changed="${this._update}">
+                    selected="${this.active}" @selected-item-changed="${this._update}">
                     ${this.panels.map((item) => html`<paper-item>${item}</paper-item>`)}
-                    </paper-listbox>
+                </paper-listbox>
                 </paper-dropdown-menu>
+                ${this.draggable ? html`<paper-icon-button id="drag-handle" icon="icons:open-with" draggable="true"></paper-icon-button>` : ''}
                 <slot name="toolbar"></slot>
             </app-toolbar>
             <slot></slot>
@@ -99,6 +152,20 @@ export class PbPanel extends pbMixin(LitElement) {
             app-toolbar {
                 font-size: 75%;
             }
+
+            :host(.dragover) {
+                background-color: var(--pb-grid-highlight-color, var(--pb-highlight-color));
+                animation: highlight 1s;
+            }
+
+            @keyframes highlight {
+                from {
+                    background-color: transparent;
+                }
+                to {
+                    background-color: var(--pb-grid-highlight-color, var(--pb-highlight-color));
+                }
+            }
         `;
     }