@teipublisher/pb-components 1.42.1 → 1.42.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.42.1",
+  "version": "1.42.3",
   "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,91 +19,125 @@ 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', () => {
+            if (this._iframe.src === 'about:blank') {
+                return;
+            }
+            this._iframe.className = '';
+            this.emitTo('pb-end-update');
+        });
 
         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();
-        params.set('wc', false);
+        params.set('wc', 'false');
         if (doc.odd) {
             params.set('odd', `${doc.odd}.odd`);
         }
-        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');
-        });
+        params.set('base', `${this.getEndpoint()}/${doc.getCollection()}/`);
+        if (!this.raw) {
+            params.set('script', resolveURL('../lib/paged.polyfill.js'));
+        }
+        this._getCustomStyles().forEach((href) => params.append('style', href));
+        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;
-    }
-
     _getCustomStyles() {
         let customStyles = [];
-        if (this.getEndpoint()) {
-            const doc = this.getDocument();
-            if (this.styles) {
-                customStyles = this.styles.split(/\s*,\s*/).map((href) => 
-                    this.toAbsoluteURL(href, this.getEndpoint())
-                );
-            }
-            if (doc.odd) {
-                customStyles.push(`${this.getEndpoint()}/transform/${doc.odd}.css`);
-            }
-            return customStyles;
+        if (this.styles) {
+            customStyles = this.styles.split(/\s*,\s*/);
+        }
+
+        if (!this.raw) {
+            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);