@teipublisher/pb-components 1.42.1 → 1.42.2

package/package.json

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

package/pb-elements.json

@@ -8393,6 +8393,7 @@
     {
       "name": "pb-print-preview",
       "path": "./src/pb-print-preview.js",
+      "description": "Generates a HTML print preview of a document using the [pagedjs](https://pagedjs.org/) polyfill\nto support CSS Paged Media.",
       "attributes": [
         {
           "name": "src",
@@ -8401,8 +8402,21 @@
         },
         {
           "name": "styles",
+          "description": "Additional CSS stylesheets to be loaded. Relative URLs will be resolved\nrelative to the API endpoint.",
           "type": "string"
         },
+        {
+          "name": "url",
+          "description": "The generated API URL from which the HTML content will be loaded.\nReadonly.",
+          "type": "string",
+          "default": "\"about:blank\""
+        },
+        {
+          "name": "raw",
+          "description": "Set to disable the pagejs polyfill, i.e. show the HTML as delivered from the server.",
+          "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.",
@@ -8445,8 +8459,23 @@
         {
           "name": "styles",
           "attribute": "styles",
+          "description": "Additional CSS stylesheets to be loaded. Relative URLs will be resolved\nrelative to the API endpoint.",
           "type": "string"
         },
+        {
+          "name": "url",
+          "attribute": "url",
+          "description": "The generated API URL from which the HTML content will be loaded.\nReadonly.",
+          "type": "string",
+          "default": "\"about:blank\""
+        },
+        {
+          "name": "raw",
+          "attribute": "raw",
+          "description": "Set to disable the pagejs polyfill, i.e. show the HTML as delivered from the server.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/pb-components.js

@@ -59,6 +59,7 @@ import './pb-table-grid.js';
 import './pb-split-list.js';
 import './pb-timeline.js';
 import './pb-combo-box.js';
+import './pb-print-preview.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-print-preview.js

@@ -1,13 +1,11 @@
-import { LitElement, html } from 'lit-element';
-import { Previewer } from "pagedjs/dist/paged.esm";
+import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 
 /**
+ * Generates a HTML print preview of a document using the [pagedjs](https://pagedjs.org/) polyfill
+ * to support CSS Paged Media.
  *
- *
- * @customElement  pb-print-preview
- * @polymer
  * @demo demo/pb-print-preview.html
  * @appliesMixin pbMixin
  */
@@ -21,42 +19,64 @@ export class PbPrintPreview extends pbMixin(LitElement) {
             src: {
                 type: String
             },
+            /**
+             * Additional CSS stylesheets to be loaded. Relative URLs will be resolved
+             * relative to the API endpoint.
+             */
             styles: {
                 type: String
             },
+            /**
+             * The generated API URL from which the HTML content will be loaded.
+             * Readonly.
+             */
+            url: {
+                type: String,
+                reflect: true,
+                readOnly: true
+            },
+            /**
+             * Set to disable the pagejs polyfill, i.e. show the HTML as delivered from the server. 
+             */
+            raw: {
+                type: Boolean
+            },
             ...super.properties
         };
     }
 
     constructor() {
         super();
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
 
-        if (!document.head.querySelector('#pb-print-preview-interface')) {
-            const style = document.createElement('link');
-            style.id = 'pb-print-preview-interface';
-            style.rel = 'Stylesheet';
-            style.type = 'text/css';
-            style.href = resolveURL('../css/pagedjs/interface.css');
-            document.head.appendChild(style);
-        }
+        this.url = 'about:blank';
+        this.raw = false;
     }
 
     firstUpdated() {
         super.firstUpdated();
 
-        this._container = this.querySelector('.content');
+        this._iframe = this.shadowRoot.querySelector('iframe');
+        this._iframe.addEventListener('load', this._preview.bind(this));
 
         PbPrintPreview.waitOnce('pb-page-ready', () => {
             this.refresh();
         });
     }
 
+    /**
+     * Open the browser's print dialog.
+     */
+    print() {
+        this._iframe.contentWindow.print();
+    }
+
+    /**
+     * Refresh the displayed content.
+     */
     refresh() {
         this.emitTo('pb-start-update');
+        this._iframe.className = 'hidden';
+        this._iframe.src = 'about:blank';
 
         const doc = this.getDocument();
         const params = new URLSearchParams();
@@ -66,29 +86,48 @@ export class PbPrintPreview extends pbMixin(LitElement) {
         }
         params.set('base', `${this.getEndpoint()}/${doc.getCollection()}`);
 
-        const url = `${this.getEndpoint()}/api/document/${encodeURIComponent(doc.path)}/print?${params.toString()}`;
-        fetch(url, {
-            method: 'GET',
-            mode: 'cors',
-            credentials: 'same-origin'
-        })
-        .then((response) => response.text())
-        .then((data) => {
-            const previewer = new Previewer();
-            // previewer.registerHandlers(previewHandler(this._container));
-            previewer.preview(data, this._getCustomStyles(), this._container);
-            this.emitTo('pb-end-update');
-        });
+        this.url = `${this.getEndpoint()}/api/document/${encodeURIComponent(doc.path)}/print?${params.toString()}`;
+        this._iframe.src = this.url;
     }
 
     render() {
         return html`
-            <div class="content"></div>
+            <iframe title="Preview" src="about:blank"></iframe>
         `;
     }
 
-    createRenderRoot() {
-        return this;
+    _preview() {
+        const idoc = this._iframe.contentDocument;
+        if (!idoc.body.firstElementChild) {
+            return;
+        }
+        
+        this.emitTo('pb-end-update');
+        idoc.body.className = 'content';
+
+        const customStyles = this._getCustomStyles();
+        const firstLink = idoc.head.querySelector('link');
+        if (firstLink) {
+            customStyles.reverse();
+        }
+        customStyles.forEach((style) => {
+            const link = idoc.createElement('link');
+            link.rel = 'Stylesheet';
+            link.type = 'text/css';
+            link.href = style;
+            if (firstLink) {
+                firstLink.before(link);
+            } else {
+                idoc.head.appendChild(link);
+            }
+        });
+
+        if (!this.raw) {
+            const script = idoc.createElement('script');
+            script.src = resolveURL('../lib/paged.polyfill.js');
+            idoc.head.appendChild(script);
+        }
+        this._iframe.className = '';
     }
 
     _getCustomStyles() {
@@ -100,12 +139,31 @@ export class PbPrintPreview extends pbMixin(LitElement) {
                     this.toAbsoluteURL(href, this.getEndpoint())
                 );
             }
-            if (doc.odd) {
-                customStyles.push(`${this.getEndpoint()}/transform/${doc.odd}.css`);
-            }
-            return customStyles;
         }
+        customStyles.push(resolveURL('../css/pagedjs/interface.css'));
         return customStyles;
     }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+
+            iframe {
+                border: 0;
+                width: 100%;
+                height: 100%;
+                opacity: 1;
+                transition: opacity 0.5s ease-out 0.5s;
+            }
+
+            .hidden {
+                opacity: 0;
+                transition: opacity 0.5s ease-out;
+            }
+
+        `;
+    }
 }
 customElements.define('pb-print-preview', PbPrintPreview);