Skip to content

Commit

Permalink
feat: Update deps (PDFjs), added support for mjs files (#322)
Browse files Browse the repository at this point in the history 
* Update PDF viewer to use mjs modules

* Update dependencies in package.json

* Add PDF viewer styles and update download button
  • Loading branch information
@totallynotdavid
totallynotdavid authored Nov 21, 2023
1 parent 01f273d commit fce03f9
Show file tree
Hide file tree
Showing 4 changed files with 463 additions and 960 deletions.
12 changes: 11 additions & 1 deletion assets/scss/components/pages/_pdfjs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,14 @@
span {
display: inline-block;
}
}
}

.pdf-viewer {
max-width: 100%;
overflow: hidden;

.pdf-canvas {
width: 100%;
height: auto;
}
}
201 changes: 97 additions & 104 deletions layouts/shortcodes/pdfjs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,116 +2,109 @@
{{- $pdfjs := resources.Get "scss/components/pages/_pdfjs.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint -}}
<link rel="stylesheet" href="{{ $pdfjs.Permalink }}" integrity="{{ $pdfjs.Data.Integrity }}" media="screen">

{{/* JS */}}
{{ $pdfjs_dist := resources.Get "js/vendor/pdfjs/build/pdf.min.js" | resources.Fingerprint -}}
<script src="{{ $pdfjs_dist.RelPermalink }}" integrity="{{ $pdfjs_dist.Data.Integrity }}" defer></script>
{{/* JS Modules */}}
{{ $pdfjs_dist := resources.Get "js/vendor/pdfjs/build/pdf.min.mjs" | resources.Fingerprint -}}
{{ $pdfjs_worker_dist := resources.Get "js/vendor/pdfjs/build/pdf.worker.min.mjs" | resources.Fingerprint -}}

<script type="module">
import * as pdfjsLib from '{{ $pdfjs_dist.RelPermalink }}';
pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ $pdfjs_worker_dist.RelPermalink }}';

{{ $pdf_file := .Get "file" }}
{{ $pdf_id := replaceRE "[.-]" "_" $pdf_file }}
{{ $lowercase_path := .Page.File.Dir | lower }}
{{ $pdf_url := path.Join $lowercase_path $pdf_file | relURL }}

<div class="mt-auto mb-4">
<div class="pdf-paginator d-flex justify-content-center pdf-head" id="paginator_{{- $pdf_id -}}">
<button class="btn btn-primary" id="prev_{{- $pdf_id -}}">Anterior</button>
<div class="paginas"><span>Página: <span id="page_num_{{- $pdf_id -}}"></span> / <span id="page_count_{{- $pdf_id -}}"></span></span></div>
<button class="btn btn-primary" id="next_{{- $pdf_id -}}">Siguiente</button>
<a href="{{ $pdf_url }}" target="_blank" rel="noopener noreferrer"><button class="btn btn-secondary" id="next_{{- $pdf_id -}}_descarga">Descargar</button></a>
</div>
<div id="embed-pdf-container_{{- $pdf_id -}} container-fluid" class="mt-4">
<div class="row justify-content-md-center"><canvas class="pdf-canvas pdf-cae col-md-auto" id="the-canvas_{{- $pdf_id -}}"></canvas></div>
</div>
</div>

<script type="text/javascript" nonce="dXNlcj0iaGVsbG8iLGRvbWFpbj0iaGVua3ZlcmxpbmRlLmNvbSIsZG9jdW1lbnQud3JpdGUodXNlcisiQCIrZG9tYWluKTs=">
window.addEventListener("load",function(){
var url = '{{ $pdf_url }}';
var hidePaginator = "{{ .Get "hidePaginator" }}";
var pdfjsLib = window['pdfjs-dist/build/pdf'];
{{ $pdfjs_worker := resources.Get "js/vendor/pdfjs/build/pdf.worker.min.js" -}}
pdfjsLib.GlobalWorkerOptions.workerSrc = "{{ $pdfjs_worker.RelPermalink }}";

// Cambiar el valor de la escala para una mayor o menor resolución
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1,
canvas_{{ safeJS $pdf_id }} = document.getElementById('the-canvas_{{ safeJS $pdf_id }}'),
ctx = canvas_{{ safeJS $pdf_id }}.getContext('2d');

// Obtiene la información de la página del documento, redimensiona el lienzo en consecuencia y renderiza la página. @param num Número de página
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas_{{ safeJS $pdf_id }}.height = viewport.height;
canvas_{{ safeJS $pdf_id }}.width = viewport.width;

// Renderiza la página del PDF en el contexto del lienzo
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);

// Espera a que la renderización termine
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
// Si hay una página pendiente de renderizar, la renderiza
renderPage(pageNumPending);
pageNumPending = null;
}
window.addEventListener("load", function() {
var url = '{{ $pdf_url }}';
var hidePaginator = "{{ .Get "hidePaginator" }}";
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1,
canvas = document.getElementById('the-canvas_{{ safeJS $pdf_id }}'),
ctx = canvas.getContext('2d');

function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({ scale: scale });
canvas.height = viewport.height;
canvas.width = viewport.width;

var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);

renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});

document.getElementById('page_num_{{ safeJS $pdf_id }}').textContent = num;
}

function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}

function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}

function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}

if (hidePaginator === "true") {
document.getElementById("paginator_{{ safeJS $pdf_id }}").style.display = 'none';
}

document.getElementById('prev_{{ safeJS $pdf_id }}').addEventListener('click', onPrevPage);
document.getElementById('next_{{ safeJS $pdf_id }}').addEventListener('click', onNextPage);

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count_{{ safeJS $pdf_id }}').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
});

// Actualiza los contadores de página
document.getElementById('page_num_{{ safeJS $pdf_id }}').textContent = num;
}

// Si hay otra página en proceso de renderizado, espera a que termine. De lo contrario, renderiza la página inmediatamente
function queuerenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}

// Opcionalmente oculta el paginador
if (hidePaginator == "true") {
document.getElementById("paginator_{{ safeJS $pdf_id }}").style.display = 'none';
}

// Muestra la página anterior
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queuerenderPage(pageNum);
}
document.getElementById('prev_{{ safeJS $pdf_id }}').addEventListener('click', onPrevPage);

// Muestra la página siguiente
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queuerenderPage(pageNum);
}
document.getElementById('next_{{ safeJS $pdf_id }}').addEventListener('click', onNextPage);

// Descarga el PDF asincronamente
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count_{{ safeJS $pdf_id }}').textContent = pdfDoc.numPages;

// Renderiza la primera página
renderPage(pageNum);
});
})

</script>
</script>

<div class="mt-auto mb-4">
<div class="pdf-paginator d-flex justify-content-center pdf-head" id="paginator_{{- $pdf_id -}}">
<button class="btn btn-primary" id="prev_{{- $pdf_id -}}">Anterior</button>
<div class="paginas">
<span>Página: <span id="page_num_{{- $pdf_id -}}"></span> / <span id="page_count_{{- $pdf_id -}}"></span></span>
</div>
<button class="btn btn-primary" id="next_{{- $pdf_id -}}">Siguiente</button>
<a href="{{ $pdf_url }}" target="_blank" rel="noopener noreferrer">
<button class="btn btn-secondary h-100 d-none d-sm-block" id="download_{{- $pdf_id -}}">Descargar</button>
</a>
</div>
<div id="embed-pdf-container_{{- $pdf_id -}}" class="container-fluid mt-4">
<div class="row justify-content-md-center">
<canvas class="pdf-canvas pdf-cae col-md-auto" id="the-canvas_{{- $pdf_id -}}"></canvas>
</div>
</div>
</div>
11 changes: 5 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"init": "shx rm -rf .git && git init -b master",
"clean": "npm run clean:build && npm run clean:packages",
"clean:build": "shx rm -rf public resources",
"clean:packages": "shx rm -rf package-lock.json node_modules",
"clean:packages": "shx rm -rf node_modules pnpm-lock.yaml",

"hugo:create": "exec-bin node_modules/.bin/hugo/hugo new",
"hugo:start": "exec-bin node_modules/.bin/hugo/hugo server --disableFastRender",
Expand All @@ -46,7 +46,7 @@
},

"devDependencies": {
"@babel/cli": "^7.23.0",
"@babel/cli": "^7.23.4",
"@babel/core": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"@fullhuman/postcss-purgecss": "^5.0",
Expand All @@ -64,11 +64,10 @@
"instant.page": "^5.1",
"katex": "^0.16.9",
"lazysizes": "^5.3.2",
"markdownlint-cli2": "^0.10.0",
"mermaid": "^10.6.0",
"netlify-plugin-cloudinary": "^1.12.0",
"markdownlint-cli2": "^0.11.0",
"mermaid": "^10.6.1",
"node-fetch": "^3.3.0",
"pdfjs-dist": "^3.11.174",
"pdfjs-dist": "^4.0.189",
"postcss": "^8.4.31",
"postcss-cli": "^10.0",
"purgecss-whitelister": "^2.4",
Expand Down
Loading

0 comments on commit fce03f9

Please sign in to comment.