Skip to content

Commit

Permalink
Merge pull request #176 from eeditiones/pb-facsimile-download
Browse files Browse the repository at this point in the history 
feat(pb-facsimile): added option to add download icon to trigger down…
  • Loading branch information
@wolfgangmm
wolfgangmm authored May 15, 2024
2 parents 62f73f6 + 0233c83 commit 964617a
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 10 deletions.
3 changes: 2 additions & 1 deletion demo/demos.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
82 changes: 82 additions & 0 deletions demo/pb-facsimile-3.html
View file
Original file line number Diff line number Diff line change
@@ -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>
78 changes: 69 additions & 9 deletions src/pb-facsimile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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'
}
};
}
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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>`:''
}
`;
}

Expand All @@ -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);
}
`;
}

Expand All @@ -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;
Expand All @@ -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
Expand Down

0 comments on commit 964617a

Please sign in to comment.