@teipublisher/pb-components 1.41.1 → 1.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.41.1",
+  "version": "1.42.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -80,6 +80,7 @@
     "lit-html": "^1.3.0",
     "marked": "^1.2.0",
     "openseadragon": "^2.4.2",
+    "pagedjs": "^0.4.0",
     "prismjs": "^1.21.0",
     "tippy.js": "^6.2.7",
     "tom-select": "^2.0.2",

package/pb-elements.json

@@ -5145,6 +5145,11 @@
           "description": "Switch the ODD to use for display",
           "type": "string"
         },
+        {
+          "name": "view",
+          "description": "Control the view mode, i.e. 'page', 'div', 'single'",
+          "type": "string"
+        },
         {
           "name": "history",
           "description": "Modify browser history: if set, clicking this\nelement will generate a new history entry in the browser's history.\nOnly use this on one element on the page.",
@@ -5213,6 +5218,12 @@
           "description": "Switch the ODD to use for display",
           "type": "string"
         },
+        {
+          "name": "view",
+          "attribute": "view",
+          "description": "Control the view mode, i.e. 'page', 'div', 'single'",
+          "type": "string"
+        },
         {
           "name": "history",
           "attribute": "history",
@@ -7256,7 +7267,7 @@
         {
           "name": "outputs",
           "type": "array",
-          "default": "[\"\",\"web\",\"print\",\"epub\",\"fo\",\"latex\",\"plain\"]"
+          "default": "[\"\",\"web\",\"printcss\",\"print\",\"epub\",\"fo\",\"latex\",\"plain\"]"
         },
         {
           "name": "behaviours",
@@ -7379,7 +7390,7 @@
           "name": "outputs",
           "attribute": "outputs",
           "type": "array",
-          "default": "[\"\",\"web\",\"print\",\"epub\",\"fo\",\"latex\",\"plain\"]"
+          "default": "[\"\",\"web\",\"printcss\",\"print\",\"epub\",\"fo\",\"latex\",\"plain\"]"
         },
         {
           "name": "parentModel",
@@ -8379,6 +8390,102 @@
         }
       ]
     },
+    {
+      "name": "pb-print-preview",
+      "path": "./src/pb-print-preview.js",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "ID of the pb-document this element is connected to. The document path to\nload will be taken from the pb-document.",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "src",
+          "attribute": "src",
+          "description": "ID of the pb-document this element is connected to. The document path to\nload will be taken from the pb-document.",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "attribute": "styles",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "pb-progress",
       "path": "./src/pb-progress.js",

package/src/pb-document.js

@@ -86,6 +86,10 @@ class PbDocument extends pbMixin(LitElement) {
         return this.path.replace(/^.*?([^\/]+)$/, '$1');
     }
 
+    getCollection() {
+        return this.path.replace(/^(.*?)\/[^\/]+$/, '$1');
+    }
+
     /**
      * Returns the full path to the document.
 

package/src/pb-link.js

@@ -36,6 +36,10 @@ export class PbLink extends pbMixin(LitElement) {
             odd: {
                 type: String
             },
+            /** Control the view mode, i.e. 'page', 'div', 'single'  */
+            view: {
+                type: String
+            },
             /**
              * Modify browser history: if set, clicking this
              * element will generate a new history entry in the browser's history.
@@ -102,6 +106,10 @@ export class PbLink extends pbMixin(LitElement) {
             params.odd = this.odd;
             this.history && this.setParameter('odd', this.odd);
         }
+        if (this.view) {
+            params.view = this.view;
+            this.history && this.setParameter('view', this.view);
+        }
         if (this.hash){
             params.hash = this.hash;
             if (this.history) {

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

@@ -362,6 +362,7 @@ export class PbOddModelEditor extends LitElement {
 
         this.outputs = ["",
             "web",
+            "printcss",
             "print",
             "epub",
             "fo",

package/src/pb-print-preview.js

@@ -0,0 +1,111 @@
+import { LitElement, html } from 'lit-element';
+import { Previewer } from "pagedjs/dist/paged.esm";
+import { pbMixin } from './pb-mixin.js';
+import { resolveURL } from './utils.js';
+
+/**
+ *
+ *
+ * @customElement  pb-print-preview
+ * @polymer
+ * @demo demo/pb-print-preview.html
+ * @appliesMixin pbMixin
+ */
+export class PbPrintPreview extends pbMixin(LitElement) {
+
+    static get properties() {
+        return {
+            /** ID of the pb-document this element is connected to. The document path to
+             * load will be taken from the pb-document.
+             */
+            src: {
+                type: String
+            },
+            styles: {
+                type: String
+            },
+            ...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);
+        }
+    }
+
+    firstUpdated() {
+        super.firstUpdated();
+
+        this._container = this.querySelector('.content');
+
+        PbPrintPreview.waitOnce('pb-page-ready', () => {
+            this.refresh();
+        });
+    }
+
+    refresh() {
+        this.emitTo('pb-start-update');
+
+        const doc = this.getDocument();
+        const params = new URLSearchParams();
+        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');
+        });
+    }
+
+    render() {
+        return html`
+            <div class="content"></div>
+        `;
+    }
+
+    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;
+        }
+        return customStyles;
+    }
+}
+customElements.define('pb-print-preview', PbPrintPreview);