|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
<title>My static Space</title> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
</head> |
|
|
<body> |
|
|
<script> |
|
|
toastr.options.progressBar = true; |
|
|
|
|
|
const url = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"; |
|
|
|
|
|
const pdfjsLib = window["pdfjs-dist/build/pdf"]; |
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = |
|
|
"//mozilla.github.io/pdf.js/build/pdf.worker.js"; |
|
|
|
|
|
let loggedIn = false, |
|
|
pdfDoc = null, |
|
|
pageNum = 1, |
|
|
pageRendering = false, |
|
|
pageNumPending = null, |
|
|
scale = 1, |
|
|
canvas = document.getElementById("pdfviewer"), |
|
|
ctx = canvas.getContext("2d"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderPage(num) { |
|
|
pageRendering = true; |
|
|
|
|
|
pdfDoc.getPage(num).then(function(page) { |
|
|
const viewport = page.getViewport({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("currentPage").textContent = num; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function queueRenderPage(num) { |
|
|
if (pageRendering) { |
|
|
pageNumPending = num; |
|
|
} else { |
|
|
renderPage(num); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) { |
|
|
pdfDoc = pdfDoc_; |
|
|
document.getElementById("totalPages").textContent = pdfDoc.numPages; |
|
|
|
|
|
|
|
|
renderPage(pageNum || 1); |
|
|
}); |
|
|
|
|
|
function onPrevPage() { |
|
|
if (pageNum <= 1) { |
|
|
return; |
|
|
} |
|
|
pageNum--; |
|
|
queueRenderPage(pageNum); |
|
|
} |
|
|
document.getElementById("prev").addEventListener("click", onPrevPage); |
|
|
|
|
|
function onNextPage() { |
|
|
if ( |
|
|
(pageNum < 5) || |
|
|
loggedIn |
|
|
) { |
|
|
if (pageNum >= pdfDoc.numPages) { |
|
|
return; |
|
|
} |
|
|
pageNum++; |
|
|
queueRenderPage(pageNum); |
|
|
} else { |
|
|
toastr.error("You Must be Logged in to view more pages", "Sorry"); |
|
|
} |
|
|
} |
|
|
document.getElementById("next").addEventListener("click", onNextPage); |
|
|
|
|
|
|
|
|
document.getElementById("download").addEventListener("click", (e) => { |
|
|
if (loggedIn) { |
|
|
toastr.success('You can download the Document', 'Ok!'); |
|
|
} else { |
|
|
toastr.error("You Must be Logged in to Download this Document", "Sorry"); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const loggedInClass = "bg-green-500"; |
|
|
const loggedOutClass = "bg-red-500"; |
|
|
$(".nav").prepend($("<a>", {href: "#"}) |
|
|
.text("Logged In") |
|
|
.addClass("border py-2 px-4 rounded " + ((loggedIn)?loggedInClass:loggedOutClass)) |
|
|
.on("click", function(e) { |
|
|
e.preventDefault(); |
|
|
if (loggedIn) { |
|
|
$(this).removeClass(loggedInClass).addClass(loggedOutClass); |
|
|
loggedIn = false; |
|
|
} else { |
|
|
$(this).removeClass(loggedOutClass).addClass(loggedInClass); |
|
|
loggedIn = true; |
|
|
} |
|
|
})) |
|
|
; </script></body> |
|
|
</html> |
|
|
|
