264 lines
7.3 KiB
HTML
264 lines
7.3 KiB
HTML
{{- if not ($.Page.Scratch.Get "embed-pdf-count") -}}
|
|
|
|
<script type="text/javascript" src= '/js/pdf-js/build/pdf.js'></script>
|
|
|
|
<style>
|
|
#embed-pdf-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 20vh;
|
|
/* overflow-y:scroll; */
|
|
}
|
|
|
|
.pdf-canvas {
|
|
border: 1px solid black;
|
|
direction: ltr;
|
|
width: 100%;
|
|
height: auto;
|
|
display: none;
|
|
}
|
|
|
|
#the-canvas {
|
|
border: 1px solid black;
|
|
direction: ltr;
|
|
width: 100%;
|
|
height: auto;
|
|
display: none;
|
|
}
|
|
|
|
|
|
.pdf-loadingWrapper {
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
|
|
.pdf-loading {
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid #d2d0d0;;
|
|
border-radius: 50%;
|
|
border-top-color: #383838;
|
|
animation: spin 1s ease-in-out infinite;
|
|
-webkit-animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
{{/* Download link */}}
|
|
|
|
|
|
|
|
#overlayText {
|
|
word-wrap: break-word;
|
|
display: grid;
|
|
justify-content: end;
|
|
}
|
|
|
|
#overlayText a {
|
|
position: relative;
|
|
top: 10px;
|
|
right: 4px;
|
|
color: #000;
|
|
margin: auto;
|
|
background-color: #eeeeee;
|
|
padding: 0.3em 1em;
|
|
border: solid 2px;
|
|
border-radius: 12px;
|
|
border-color: #00000030;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#overlayText svg {
|
|
height: clamp(1em, 2vw, 1.4em);
|
|
width: clamp(1em, 2vw, 1.4em);
|
|
}
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
to { -webkit-transform: rotate(360deg); }
|
|
}
|
|
@-webkit-keyframes spin {
|
|
to { -webkit-transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
{{- end -}}
|
|
|
|
{{- $.Page.Scratch.Add "embed-pdf-count" 1 -}}
|
|
<div class="embed-pdf-container" id="embed-pdf-container-{{ substr (.Get "url" | md5) 0 8 }}">
|
|
<div class="pdf-loadingWrapper" id="pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}">
|
|
<div class="pdf-loading" id="pdf-loading-{{ substr (.Get "url" | md5) 0 8 }}"></div>
|
|
</div>
|
|
<div id="overlayText">
|
|
<a href="{{ .Get "url" }}" aria-label="Download" download>
|
|
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
|
<path d="M9 13c.3 0 .5-.1.7-.3L15.4 7 14 5.6l-4 4V1H8v8.6l-4-4L2.6 7l5.7 5.7c.2.2.4.3.7.3zm-7 2h14v2H2z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<canvas class="pdf-canvas" id="pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}"></canvas>
|
|
</div>
|
|
|
|
<div class="pdf-paginator" id="pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}">
|
|
<button id="pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}">Previous</button>
|
|
<button id="pdf-next-{{ substr (.Get "url" | md5) 0 8 }}">Next</button>
|
|
<span>
|
|
<span class="pdf-pagenum" id="pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}"></span> / <span class="pdf-pagecount" id="pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}"></span>
|
|
</span>
|
|
<a class="pdf-source" id="pdf-source-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">[pdf]</a>
|
|
</div>
|
|
|
|
<noscript>
|
|
View the PDF file <a class="pdf-source" id="pdf-source-noscript-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">here</a>.
|
|
</noscript>
|
|
|
|
<script type="text/javascript">
|
|
(function(){
|
|
var url = '{{ .Get "url" }}';
|
|
|
|
var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
|
|
var hideLoader = "{{ .Get "hideLoader" }}" === "true";
|
|
var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
|
|
|
|
// Loaded via <script> tag, create shortcut to access PDF.js exports.
|
|
var pdfjsLib = window['pdfjs-dist/build/pdf'];
|
|
|
|
// The workerSrc property shall be specified.
|
|
if (pdfjsLib.GlobalWorkerOptions.workerSrc == '')
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + 'js/pdf-js/build/pdf.worker.js';
|
|
|
|
// Change the Scale value for lower or higher resolution.
|
|
var pdfDoc = null,
|
|
pageNum = selectedPageNum,
|
|
pageRendering = false,
|
|
pageNumPending = null,
|
|
scale = 3,
|
|
canvas = document.getElementById('pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}'),
|
|
ctx = canvas.getContext('2d'),
|
|
paginator = document.getElementById("pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}"),
|
|
loadingWrapper = document.getElementById('pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}');
|
|
|
|
|
|
// Attempt to show paginator and loader if enabled
|
|
showPaginator();
|
|
showLoader();
|
|
|
|
/**
|
|
* Get page info from document, resize canvas accordingly, and render page.
|
|
* @param num Page number.
|
|
*/
|
|
function renderPage(num) {
|
|
pageRendering = true;
|
|
// Using promise to fetch the page
|
|
pdfDoc.getPage(num).then(function(page) {
|
|
var viewport = page.getViewport({scale: scale});
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
|
|
// Render PDF page into canvas context
|
|
var renderContext = {
|
|
canvasContext: ctx,
|
|
viewport: viewport
|
|
};
|
|
var renderTask = page.render(renderContext);
|
|
|
|
// Wait for rendering to finish
|
|
renderTask.promise.then(function() {
|
|
pageRendering = false;
|
|
showContent();
|
|
|
|
if (pageNumPending !== null) {
|
|
// New page rendering is pending
|
|
renderPage(pageNumPending);
|
|
pageNumPending = null;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Update page counters
|
|
document.getElementById('pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}').textContent = num;
|
|
}
|
|
|
|
/**
|
|
* Hides loader and shows canvas
|
|
*/
|
|
function showContent() {
|
|
loadingWrapper.style.display = 'none';
|
|
canvas.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* If we haven't disabled the loader, show loader and hide canvas
|
|
*/
|
|
function showLoader() {
|
|
if(hideLoader) return
|
|
loadingWrapper.style.display = 'flex';
|
|
canvas.style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* If we haven't disabled the paginator, show paginator
|
|
*/
|
|
function showPaginator() {
|
|
if(hidePaginator) return
|
|
paginator.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* If another page rendering in progress, waits until the rendering is
|
|
* finished. Otherwise, executes rendering immediately.
|
|
*/
|
|
function queueRenderPage(num) {
|
|
if (pageRendering) {
|
|
pageNumPending = num;
|
|
} else {
|
|
renderPage(num);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Displays previous page.
|
|
*/
|
|
function onPrevPage() {
|
|
if (pageNum <= 1) {
|
|
return;
|
|
}
|
|
pageNum--;
|
|
queueRenderPage(pageNum);
|
|
}
|
|
document.getElementById('pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onPrevPage);
|
|
|
|
/**
|
|
* Displays next page.
|
|
*/
|
|
function onNextPage() {
|
|
if (pageNum >= pdfDoc.numPages) {
|
|
return;
|
|
}
|
|
pageNum++;
|
|
queueRenderPage(pageNum);
|
|
}
|
|
document.getElementById('pdf-next-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onNextPage);
|
|
|
|
/**
|
|
* Asynchronously downloads PDF.
|
|
*/
|
|
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
|
pdfDoc = pdfDoc_;
|
|
var numPages = pdfDoc.numPages;
|
|
document.getElementById('pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}').textContent = numPages;
|
|
|
|
// If the user passed in a number that is out of range, render the last page.
|
|
if(pageNum > numPages) {
|
|
pageNum = numPages
|
|
}
|
|
|
|
// Initial/first page rendering
|
|
renderPage(pageNum);
|
|
});
|
|
})();
|
|
</script>
|