mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-05-21 20:21:54 +02:00
add embed-pdf shortcode
This commit is contained in:
zhangyikun01
parent
8ece6072fc
commit
51b99eb6f2
6 changed files with 1540 additions and 1 deletions
22
assets/lib/embed-pdf/pdf.min.js
vendored
Normal file
22
assets/lib/embed-pdf/pdf.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
22
assets/lib/embed-pdf/pdf.worker.min.js
vendored
Normal file
22
assets/lib/embed-pdf/pdf.worker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -57,3 +57,11 @@
|
|||
{{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
|
||||
<script defer src="{{ $twelementsLib.RelPermalink }}" integrity="{{ $twelementsLib.Data.Integrity }}"></script>
|
||||
{{ end }}
|
||||
|
||||
{{/* pdf */}}
|
||||
{{ if .Page.HasShortcode "embed-pdf" }}
|
||||
{{ $pdfLib := resources.Get "lib/embed-pdf/pdf.min.js" }}
|
||||
{{ $pdfWorkerLib := resources.Get "lib/embed-pdf/pdf.worker.min.js" }}
|
||||
{{ $pdfJS := slice $pdfLib $pdfWorkerLib | resources.Concat "js/pdf.bundle.js" | resources.Fingerprint "sha512" }}
|
||||
<script type="text/javascript" src="{{ $pdfJS.RelPermalink }}" integrity="{{ $pdfJS.Data.Integrity }}"></script>
|
||||
{{ end }}
|
||||
245
layouts/shortcodes/embed-pdf.html
Normal file
245
layouts/shortcodes/embed-pdf.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
{{- if not ($.Page.Scratch.Get "embed-pdf-count") -}}
|
||||
<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;
|
||||
}
|
||||
|
||||
.pdf-paginator {
|
||||
display: inline-block;
|
||||
margin: 6px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.pdf-paginator-item {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pdf-paginator-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
{{- end -}}
|
||||
|
||||
{{ $icon := resources.Get "icons/download.svg" }}
|
||||
{{- $.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>
|
||||
<canvas class="pdf-canvas" id="pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="pdf-paginator-item" id="pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}" >
|
||||
<div class="pdf-paginator-wrap">
|
||||
<a class="pdf-paginator !rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" role="button" id="pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}">Previous</a>
|
||||
<a class="pdf-paginator !rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" role="button" id="pdf-next-{{ substr (.Get "url" | md5) 0 8 }}">Next</a>
|
||||
</div>
|
||||
<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="relative inline-block align-text-bottom icon" role="img" id="pdf-source-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">
|
||||
{{ $icon.Content | safeHTML }}
|
||||
</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;
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
|
||||
|
||||
// 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 content
|
||||
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>
|
||||
1233
package-lock.json
generated
1233
package-lock.json
generated
File diff suppressed because it is too large
Load diff
11
package.json
11
package.json
|
|
@ -47,7 +47,8 @@
|
|||
"tailwindcss": "^3.3.1",
|
||||
"tw-elements": "1.0.0-beta1",
|
||||
"typeit": "^8.7.1",
|
||||
"vendor-copy": "^3.0.1"
|
||||
"vendor-copy": "^3.0.1",
|
||||
"pdfjs-dist": "^3.4.120"
|
||||
},
|
||||
"vendorCopy": [],
|
||||
"devVendorCopy": [
|
||||
|
|
@ -90,6 +91,14 @@
|
|||
{
|
||||
"from": "node_modules/tw-elements/dist/js/index.min.js",
|
||||
"to": "assets/lib/tw-elements/index.min.js"
|
||||
},
|
||||
{
|
||||
"from": "node_modules/pdfjs-dist/build/pdf.min.js",
|
||||
"to": "assets/lib/embed-pdf/pdf.min.js"
|
||||
},
|
||||
{
|
||||
"from": "node_modules/pdfjs-dist/build/pdf.worker.min.js",
|
||||
"to": "assets/lib/embed-pdf/pdf.worker.min.js"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue