Hugging Face's logo

Spaces:
Omnibus
/
pdfhtml
Running

App Files Community
Omnibus commited on
Commit
f46f810
·
1 Parent(s): f5816dc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +126 -2
index.html CHANGED
@@ -7,6 +7,130 @@
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
- <object data="dummy.pdf" type="application/pdf" width="100%" height="500px"></object>
11
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </html>
 
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
+ <script>
11
+ toastr.options.progressBar = true;
12
+
13
+ const url = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
14
+
15
+ const pdfjsLib = window["pdfjs-dist/build/pdf"];
16
+ pdfjsLib.GlobalWorkerOptions.workerSrc =
17
+ "//mozilla.github.io/pdf.js/build/pdf.worker.js";
18
+
19
+ let loggedIn = false,
20
+ pdfDoc = null,
21
+ pageNum = 1,
22
+ pageRendering = false,
23
+ pageNumPending = null,
24
+ scale = 1,
25
+ canvas = document.getElementById("pdfviewer"),
26
+ ctx = canvas.getContext("2d");
27
+
28
+ /**
29
+ * Get page info from document, resize canvas accordingly, and render page.
30
+ * @param num Page number.
31
+ */
32
+ function renderPage(num) {
33
+ pageRendering = true;
34
+ // Using promise to fetch the page
35
+ pdfDoc.getPage(num).then(function(page) {
36
+ const viewport = page.getViewport({scale});
37
+ canvas.height = viewport.height;
38
+ canvas.width = viewport.width;
39
+
40
+ // Render PDF page into canvas context
41
+ var renderContext = {
42
+ canvasContext: ctx,
43
+ viewport: viewport
44
+ };
45
+ var renderTask = page.render(renderContext);
46
+
47
+ // Wait for rendering to finish
48
+ renderTask.promise.then(function() {
49
+ pageRendering = false;
50
+ if (pageNumPending !== null) {
51
+ // New page rendering is pending
52
+ renderPage(pageNumPending);
53
+ pageNumPending = null;
54
+ }
55
+ });
56
+ });
57
+
58
+ // Update page counters
59
+ document.getElementById("currentPage").textContent = num;
60
+ }
61
+
62
+ /**
63
+ * If another page rendering in progress, waits until the rendering is
64
+ * finised. Otherwise, executes rendering immediately.
65
+ */
66
+ function queueRenderPage(num) {
67
+ if (pageRendering) {
68
+ pageNumPending = num;
69
+ } else {
70
+ renderPage(num);
71
+ }
72
+ }
73
+
74
+ /**
75
+ * Asynchronously downloads PDF.
76
+ */
77
+ pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
78
+ pdfDoc = pdfDoc_;
79
+ document.getElementById("totalPages").textContent = pdfDoc.numPages;
80
+
81
+ // Initial/first page rendering
82
+ renderPage(pageNum || 1);
83
+ });
84
+
85
+ function onPrevPage() {
86
+ if (pageNum <= 1) {
87
+ return;
88
+ }
89
+ pageNum--;
90
+ queueRenderPage(pageNum);
91
+ }
92
+ document.getElementById("prev").addEventListener("click", onPrevPage);
93
+
94
+ function onNextPage() {
95
+ if (
96
+ (pageNum < 5) ||
97
+ loggedIn
98
+ ) {
99
+ if (pageNum >= pdfDoc.numPages) {
100
+ return;
101
+ }
102
+ pageNum++;
103
+ queueRenderPage(pageNum);
104
+ } else {
105
+ toastr.error("You Must be Logged in to view more pages", "Sorry");
106
+ }
107
+ }
108
+ document.getElementById("next").addEventListener("click", onNextPage);
109
+
110
+
111
+ document.getElementById("download").addEventListener("click", (e) => {
112
+ if (loggedIn) {
113
+ toastr.success('You can download the Document', 'Ok!');
114
+ } else {
115
+ toastr.error("You Must be Logged in to Download this Document", "Sorry");
116
+ }
117
+ });
118
+
119
+
120
+ const loggedInClass = "bg-green-500";
121
+ const loggedOutClass = "bg-red-500";
122
+ $(".nav").prepend($("<a>", {href: "#"})
123
+ .text("Logged In")
124
+ .addClass("border py-2 px-4 rounded " + ((loggedIn)?loggedInClass:loggedOutClass))
125
+ .on("click", function(e) {
126
+ e.preventDefault();
127
+ if (loggedIn) {
128
+ $(this).removeClass(loggedInClass).addClass(loggedOutClass);
129
+ loggedIn = false;
130
+ } else {
131
+ $(this).removeClass(loggedOutClass).addClass(loggedInClass);
132
+ loggedIn = true;
133
+ }
134
+ }))
135
+ ; </script></body>
136
  </html>