From fe5e9b17e58546a17002c55f4d7db0fefa415aa5 Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Thu, 2 Feb 2023 11:19:35 +0800
Subject: [PATCH] refactor: lazyload pdf.js

---
 web/app/controllers/problem.php             |  1 -
 web/app/controllers/problem_solutions.php   |  1 -
 web/app/controllers/subdomain/blog/blog.php |  1 -
 web/app/models/UOJBlogEditor.php            |  1 -
 web/app/views/page-header.php               | 48 -----------------
 web/css/uoj-bs5.css                         |  3 +-
 web/js/uoj.js                               | 59 +++++++++++++++++++++
 7 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/web/app/controllers/problem.php b/web/app/controllers/problem.php
index 9ddba6b..8e289e3 100644
--- a/web/app/controllers/problem.php
+++ b/web/app/controllers/problem.php
@@ -2,7 +2,6 @@
 requireLib('bootstrap5');
 requireLib('hljs');
 requireLib('mathjax');
-requireLib('pdf.js');
 requirePHPLib('form');
 requirePHPLib('judger');
 
diff --git a/web/app/controllers/problem_solutions.php b/web/app/controllers/problem_solutions.php
index 59d9747..62ffe50 100644
--- a/web/app/controllers/problem_solutions.php
+++ b/web/app/controllers/problem_solutions.php
@@ -2,7 +2,6 @@
 requireLib('bootstrap5');
 requireLib('hljs');
 requireLib('mathjax');
-requireLib('pdf.js');
 requirePHPLib('form');
 requirePHPLib('judger');
 
diff --git a/web/app/controllers/subdomain/blog/blog.php b/web/app/controllers/subdomain/blog/blog.php
index c44ac50..65c1c17 100644
--- a/web/app/controllers/subdomain/blog/blog.php
+++ b/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();
diff --git a/web/app/models/UOJBlogEditor.php b/web/app/models/UOJBlogEditor.php
index 7d9bc21..5c95ace 100644
--- a/web/app/models/UOJBlogEditor.php
+++ b/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'])) {
diff --git a/web/app/views/page-header.php b/web/app/views/page-header.php
index 8e1c80d..7f4ada4 100644
--- a/web/app/views/page-header.php
+++ b/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>
diff --git a/web/css/uoj-bs5.css b/web/css/uoj-bs5.css
index 2520679..80a9d31 100644
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@@ -235,7 +235,8 @@ h6,
 /* PDF */
 
 .pdf-page-canvas {
-	width: 100% !important;
+	/* min-width: 100%; */
+	max-width: 100%;
 }
 
 /* Form */
diff --git a/web/js/uoj.js b/web/js/uoj.js
index 01451b9..41bf66a 100644
--- a/web/js/uoj.js
+++ b/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"]'));