refactor: lazyload pdf.js

web/app/controllers/problem.php

@@ -2,7 +2,6 @@
 requireLib('bootstrap5');
 requireLib('hljs');
 requireLib('mathjax');
-requireLib('pdf.js');
 requirePHPLib('form');
 requirePHPLib('judger');
 

web/app/controllers/problem_solutions.php

@@ -2,7 +2,6 @@
 requireLib('bootstrap5');
 requireLib('hljs');
 requireLib('mathjax');
-requireLib('pdf.js');
 requirePHPLib('form');
 requirePHPLib('judger');
 

web/app/controllers/subdomain/blog/blog.php

@@ -2,7 +2,6 @@
 requireLib('bootstrap5');
 requireLib('mathjax');
 requireLib('hljs');
-requireLib('pdf.js');
 requirePHPLib('form');
 
 Auth::check() || redirectToLogin();

web/app/models/UOJBlogEditor.php

@@ -185,7 +185,6 @@ class UOJBlogEditor {
 			if ($this->type == 'blog') {
 				$req_lib = [
 					'mathjax' => '',
-					'pdf.js' => '',
 				];
 
 				if (isset($REQUIRE_LIB['bootstrap5'])) {

web/app/views/page-header.php

@@ -308,54 +308,6 @@ if (!isset($ShowPageHeader)) {
 		<?= HTML::css_link('/css/font-awesome.min.css') ?>
 	<?php endif ?>
 
-	<?php if (isset($REQUIRE_LIB['pdf.js'])) : ?>
-		<!-- pdf.js -->
-		<?= HTML::js_src('/js/pdf.js') ?>
-		<script>
-			pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.js';
-
-			function randstr(prefix) {
-				return Math.random().toString(36).replace('0.', prefix || '');
-			}
-
-			$(document).ready(function() {
-				$('div[data-pdf]').each(function() {
-					var _this = $(this);
-					var pdf_src = $(this).data('src');
-
-					$(this).css('width', '100%').css('height', '100%');
-
-					var task = pdfjsLib.getDocument(pdf_src);
-					var id = 'pdf_' + task.docId;
-
-					$(this).attr('id', id + '_container');
-
-					task.promise.then(function(pdf) {
-						for (var i = 1; i <= pdf.numPages; i++) {
-							$(_this).append('<canvas id="' + id + '_page_' + i + '" class="pdf-page-canvas"></canvas>');
-
-							pdf.getPage(i).then(function(page) {
-								var viewport = page.getViewport({
-									scale: 2,
-								});
-
-								var canvas = document.getElementById(id + '_page_' + page.pageNumber);
-
-								canvas.height = viewport.height;
-								canvas.width = viewport.width;
-
-								page.render({
-									canvasContext: canvas.getContext('2d'),
-									viewport: viewport,
-								});
-							});
-						}
-					});
-				});
-			});
-		</script>
-	<?php endif ?>
-
 	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 	<!--[if lt IE 9]>
 			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

web/css/uoj-bs5.css

@@ -235,7 +235,8 @@ h6,
 /* PDF */
 
 .pdf-page-canvas {
-	width: 100% !important;
+	/* min-width: 100%; */
+	max-width: 100%;
 }
 
 /* Form */

web/js/uoj.js

@@ -1052,6 +1052,65 @@ function showCommentReplies(id, replies) {
 	);
 }
 
+// PDF
+$(document).ready(function() {
+	$('div[data-pdf]').each(function() {
+		$(this).append(
+			$('<div class="uoj-pdf-loading-spinner border d-flex flex-column justify-content-center align-items-center" style="width: 100%; height: 350px;" />')
+				.append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />')
+				.append('<div class="mt-3">Loading PDF...</div>')
+			);
+	});
+
+	$LAB.script('/js/pdf.js').wait(function() {
+		pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.js';
+
+		// Support HiDPI-screens.
+		var outputScale = window.devicePixelRatio || 1;
+
+		$('div[data-pdf]').each(function() {
+			var _this = $(this);
+			var pdf_src = $(this).data('src');
+
+			$(this).css('width', '100%').css('height', '100%');
+
+			var task = pdfjsLib.getDocument(pdf_src);
+			var id = 'pdf_' + task.docId;
+
+			$(this).attr('id', id + '_container');
+
+			task.promise.then(function(pdf) {
+				for (var i = 1; i <= pdf.numPages; i++) {
+					$(_this).append('<canvas id="' + id + '_page_' + i + '" class="pdf-page-canvas"></canvas>');
+
+					pdf.getPage(i).then(function(page) {
+						var viewport = page.getViewport({
+							scale: 2.5,
+						});
+
+						var canvas = document.getElementById(id + '_page_' + page.pageNumber);
+
+						canvas.height = Math.floor(viewport.height * outputScale);
+						canvas.width = Math.floor(viewport.width * outputScale);
+
+						var transform = outputScale !== 1
+							? [outputScale, 0, 0, outputScale, 0, 0]
+							: null;
+
+						page.render({
+							canvasContext: canvas.getContext('2d'),
+							viewport: viewport,
+							transform: transform,
+						});
+					});
+				}
+
+				$('.uoj-pdf-loading-spinner', _this).remove();
+			});
+		});
+	});
+});
+
 // Tooltip
 $(document).ready(function() {
 	bootstrap.Tooltip.jQueryInterface.call($('[data-bs-toggle="tooltip"]'));