@teipublisher/pb-components 1.41.2 → 1.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.41.2",
+  "version": "1.42.1",
   "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

@@ -7267,7 +7267,7 @@
         {
           "name": "outputs",
           "type": "array",
-          "default": "[\"\",\"web\",\"print\",\"epub\",\"fo\",\"latex\",\"plain\"]"
+          "default": "[\"\",\"web\",\"printcss\",\"print\",\"epub\",\"fo\",\"latex\",\"plain\"]"
         },
         {
           "name": "behaviours",
@@ -7390,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",
@@ -8390,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/assets/pagedjs/interface.css

@@ -0,0 +1,180 @@
+/* CSS for Paged.js interface – v0.4 */
+
+/* Change the look */
+:root {
+    --color-background: whitesmoke;
+    --color-pageSheet: #cfcfcf;
+    --color-pageBox: violet;
+    --color-paper: white;
+    --color-marginBox: transparent;
+    --pagedjs-crop-color: black;
+    --pagedjs-crop-shadow: white;
+    --pagedjs-crop-stroke: 1px;
+}
+
+/* To define how the book look on the screen: */
+@media screen, pagedjs-ignore {
+    #preview {
+        background-color: var(--color-background);
+    }
+
+    .pagedjs_pages {
+        display: flex;
+        width: calc(var(--pagedjs-width) * 2);
+        flex: 0;
+        flex-wrap: wrap;
+        margin: 0 auto;
+    }
+
+    .pagedjs_page {
+        background-color: var(--color-paper);
+        box-shadow: 0 0 0 1px var(--color-pageSheet);
+        margin: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-top: 10mm;
+    }
+
+    .pagedjs_first_page {
+        margin-left: var(--pagedjs-width);
+    }
+
+    .pagedjs_page:last-of-type {
+        margin-bottom: 10mm;
+    }
+
+    .pagedjs_pagebox{
+        box-shadow: 0 0 0 1px var(--color-pageBox);
+    }
+
+    .pagedjs_left_page{
+        z-index: 20;
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
+        border-color: transparent;
+    }
+    
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: 0;
+    } 
+
+    .pagedjs_right_page{
+        z-index: 10;
+        position: relative;
+        left: calc(var(--pagedjs-bleed-left)*-1);
+    }
+
+    /* show the margin-box */
+
+    .pagedjs_margin-top-left-corner-holder,
+    .pagedjs_margin-top,
+    .pagedjs_margin-top-left,
+    .pagedjs_margin-top-center,
+    .pagedjs_margin-top-right,
+    .pagedjs_margin-top-right-corner-holder,
+    .pagedjs_margin-bottom-left-corner-holder,
+    .pagedjs_margin-bottom,
+    .pagedjs_margin-bottom-left,
+    .pagedjs_margin-bottom-center,
+    .pagedjs_margin-bottom-right,
+    .pagedjs_margin-bottom-right-corner-holder,
+    .pagedjs_margin-right,
+    .pagedjs_margin-right-top,
+    .pagedjs_margin-right-middle,
+    .pagedjs_margin-right-bottom,
+    .pagedjs_margin-left,
+    .pagedjs_margin-left-top,
+    .pagedjs_margin-left-middle,
+    .pagedjs_margin-left-bottom {
+        box-shadow: 0 0 0 1px inset var(--color-marginBox);
+    }
+
+    /* uncomment this part for recto/verso book : ------------------------------------ */
+
+    /*
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    } 
+
+    .pagedjs_left_page{
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
+        border-color: var(--pagedjs-crop-color);
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: var(--pagedjs-cross-size)!important;
+    } 
+
+    .pagedjs_right_page{
+        left: 0; 
+    } 
+    */
+    
+    
+
+    /*--------------------------------------------------------------------------------------*/
+
+
+
+    /* uncomment this par to see the baseline : -------------------------------------------*/
+
+    
+    /* .pagedjs_pagebox {
+        --pagedjs-baseline: 22px;
+        --pagedjs-baseline-position: 5px;
+        --pagedjs-baseline-color: cyan;
+        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
+        background-repeat: repeat-y;
+        background-position-y: var(--pagedjs-baseline-position);
+    }  */
+   
+
+    /*--------------------------------------------------------------------------------------*/
+}
+
+
+
+
+
+/* Marks (to delete when merge in paged.js) */
+
+.pagedjs_marks-crop{
+    z-index: 999999999999;
+  
+}
+
+.pagedjs_bleed-top .pagedjs_marks-crop, 
+.pagedjs_bleed-bottom .pagedjs_marks-crop{
+    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
+    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-left .pagedjs_marks-crop,
+.pagedjs_bleed-right .pagedjs_marks-crop{
+    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
+    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
+}

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-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);