Merge branch 'master' of https://github.com/eeditiones/tei-publisher-…

…components
eeditiones · May 16, 2024 · 205de03 · 205de03
2 parents d06a34a + 04d14cc
commit 205de03
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# [2.23.0](https://github.com/eeditiones/tei-publisher-components/compare/v2.22.2...v2.23.0) (2024-05-15)
+
+
+### Features
+
+* **pb-facsimile:** added option to add download icon to trigger download of current viewport. Added a demo for the feature ([0233c83](https://github.com/eeditiones/tei-publisher-components/commit/0233c8333e9e78ed529a21361e358974c1cecf46))
+
+## [2.22.2](https://github.com/eeditiones/tei-publisher-components/compare/v2.22.1...v2.22.2) (2024-05-02)
+
+
+### Bug Fixes
+
+* **pb-grid:** emit pb-refresh to configured channel only ([63091ab](https://github.com/eeditiones/tei-publisher-components/commit/63091ab6d509770b8b847fe25fe5a1a2ed7d86e8))
+
 ## [2.22.1](https://github.com/eeditiones/tei-publisher-components/compare/v2.22.0...v2.22.1) (2024-05-02)
 
 

diff --git a/demo/demos.json b/demo/demos.json
@@ -40,7 +40,8 @@
   },
   "pb-facsimile": {
     "demo/pb-facsimile.html": "Demo",
-    "demo/pb-facsimile-2.html": "Align text page with facsimile"
+    "demo/pb-facsimile-2.html": "Align text page with facsimile",
+    "demo/pb-facsimile-3.html": "With Download Button"
   },
   "pb-image-strip": {
     "demo/pb-image-strip-view.html": "Demo with pb-view",

diff --git a/demo/pb-facsimile-3.html b/demo/pb-facsimile-3.html
@@ -0,0 +1,82 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
+
+    <title>pb-view Demo</title>
+    <!--scripts-->
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
+    <script type="module" src="../src/docs/pb-demo-snippet.js"></script>
+    <script type="module" src="../node_modules/@polymer/iron-icons/iron-icons.js"></script>
+    <script type="module" src="../node_modules/@polymer/paper-fab/paper-fab.js"></script>
+    <script type="module" src="../src/pb-page.js"></script>
+    <script type="module" src="../src/pb-document.js"></script>
+    <script type="module" src="../src/pb-view.js"></script>
+    <script type="module" src="../src/pb-navigation.js"></script>
+    <script type="module" src="../src/pb-facsimile.js"></script>
+    <script type="module" src="../src/pb-facs-link.js"></script>
+    <!--/scripts-->
+</head>
+
+<body>
+    <pb-demo-snippet>
+        <template>
+            <style type="text/css">
+            body {
+                --paper-fab-background: #35424b;
+            }
+
+            main {
+                position: relative;
+                height: 70vh;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+            }
+
+            pb-navigation {
+                position: absolute;
+                bottom: 45%;
+                --paper-fab-background: #35424b;
+                color: white;
+            }
+
+            pb-navigation[direction=backward] {
+                left: 20px;
+            }
+
+            pb-navigation[direction=forward] {
+                right: 20px;
+            }
+
+            pb-facsimile {
+                flex: 1 1;
+                max-width: 50vw;
+                margin-right: 20px;
+            }
+            </style>
+            <pb-page endpoint="http://localhost:8080/exist/apps/tei-publisher" url-path="query">
+                <pb-document id="document1" path="test/cortes_to_dantiscus.xml" odd="dantiscus"></pb-document>
+                <main>
+                    <pb-facsimile base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/" default-zoom-level="0"
+                        show-navigator show-navigation-control show-home-control show-download-control subscribe="transcription">
+                    </pb-facsimile>
+
+                    <!-- Navigate to previous page -->
+                    <pb-navigation direction="backward" keyboard="left">
+                        <paper-fab icon="icons:chevron-left"></paper-fab>
+                    </pb-navigation>
+                    <pb-view id="view1" src="document1" view="page" xpath="//text[@type='source']" append-footnotes>
+                    </pb-view>
+                    <!-- Navigate to next page -->
+                    <pb-navigation direction="forward" keyboard="right">
+                        <paper-fab icon="icons:chevron-right"></paper-fab>
+                    </pb-navigation>
+                </main>
+            </pb-page>
+        </template>
+    </pb-demo-snippet>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "2.22.1",
+  "version": "2.23.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

diff --git a/src/pb-facsimile.js b/src/pb-facsimile.js
@@ -58,6 +58,13 @@ export class PbFacsimile extends pbMixin(LitElement) {
                 type: Boolean,
                 attribute: 'show-full-page-control'
             },
+            /**
+             * if true shows a 'download' button
+             */
+            showDownloadButton:{
+              type: Boolean,
+              attribute: 'show-download-control'
+            },
             /**
              * Default zoom between: set to 0 to adjust to viewer size.
              */
@@ -138,6 +145,14 @@ export class PbFacsimile extends pbMixin(LitElement) {
             loaded: {
                 type: Boolean,
                 reflect: true
+            },
+            /**
+             * CORS (Cross-Origin Resource Sharing) policy - wraps the OSD Viewer option -
+             * only sensible values are 'anonymous' (default) or 'use-credentials'.
+             */
+            crossOriginPolicy:{
+                type: String,
+                attribute: 'cors'
             }
         };
     }
@@ -146,6 +161,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
         super();
         this._facsimiles = [];
         this.baseUri = '';
+        this.crossOriginPolicy = 'anonymous';
         this.type = 'iiif';
         this.visibilityRatio = 1;
         this.defaultZoomLevel = 0;
@@ -155,6 +171,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
         this.showNavigationControl = false;
         this.showFullPageControl = false;
         this.showRotationControl = false;
+        this.showDownloadButton = false;
         this.constrainDuringPan = false;
         this.referenceStrip = false;
         this.referenceStripSizeRatio = 0.2;
@@ -189,22 +206,31 @@ export class PbFacsimile extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
-        window.ESGlobalBridge.requestAvailability();
-        const path = resolveURL('../lib/openseadragon.min.js');
-        window.ESGlobalBridge.instance.load("openseadragon", path);
-        window.addEventListener(
-            "es-bridge-openseadragon-loaded",
-            this._initOpenSeadragon.bind(this),
-            { once: true }
-        );
+        try{
+            window.ESGlobalBridge.requestAvailability();
+            const path = resolveURL('../lib/openseadragon.min.js');
+            window.ESGlobalBridge.instance.load("openseadragon", path);
+            window.addEventListener(
+                "es-bridge-openseadragon-loaded",
+                this._initOpenSeadragon.bind(this),
+                { once: true }
+            );
+        } catch (error){
+            console.error(error.message);
+        }
     }
 
     render() {
         return html`
             <slot name="before"></slot>
             <!-- Openseadragon -->
+
             <div id="viewer" part="image"></div>
             <slot name="after"></slot>
+            ${this.showDownloadButton ?
+                html`<a id="downloadBtn" title="Download">&#8676;</a>`:''
+            }
+
         `;
     }
 
@@ -227,6 +253,26 @@ export class PbFacsimile extends pbMixin(LitElement) {
                 max-height: var(--pb-facsimile-height, auto);
                 width: 100%;
             }
+            #downloadBtn{
+                position: absolute;
+                z-index: 100;
+                bottom:0.25rem;
+                width:1.35rem;
+                height:1.35rem;
+                transform:rotate(-90deg);
+                cursor: pointer;
+                border: thin solid #D7DDE8;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius:0.75rem;
+                background-image:linear-gradient(to left, #fafafa 0%, #D7DDE8  51%, #bbbbbb  100%);
+                font-size:1.2rem;
+                box-shadow: -2px 1px 5px 0px rgba(0,0,0,0.75);
+            }
+            #downloadBtn:hover{
+                background-image:radial-gradient( white, #efefef);
+            }
         `;
     }
 
@@ -248,8 +294,10 @@ export class PbFacsimile extends pbMixin(LitElement) {
             visibilityRatio: 1,
             minZoomLevel: 1,
             defaultZoomLevel: this.defaultZoomLevel,
-            constrainDuringPan: true
+            constrainDuringPan: true,
+            crossOriginPolicy: this.crossOriginPolicy
         };
+
         if (this.referenceStrip) {
             options.showReferenceStrip = true;
             options.referenceStripSizeRatio = this.referenceStripSizeRatio;
@@ -266,6 +314,18 @@ export class PbFacsimile extends pbMixin(LitElement) {
             this.emitTo('pb-facsimile-status', { status: 'fail' });
         });
 
+        const download = this.shadowRoot.querySelector('#downloadBtn');
+        if(this.showDownloadButton){
+            download.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                const currentImage = this.viewer.drawer.canvas.toDataURL("image/png");
+                const downloadLink = document.createElement('a');
+                downloadLink.href = currentImage;
+                downloadLink.download = 'download';
+                downloadLink.click();
+            });
+        }
+
         /*
         handling of full-screen view requires to hide/unhide the content of body to allow full screen viewer
         to full-page functionality. Standard OSD completely deletes all body children disconnecting all event-handlers