Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pb-facsimile): added option to add download icon to trigger down… #176

Merged
merged 1 commit into from
May 15, 2024
Merged

feat(pb-facsimile): added option to add download icon to trigger down… #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion demo/demos.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading