Fix 746 (#825)

* Fix: #746

* formatting

src/main/resources/static/js/downloader.js

@@ -29,13 +29,12 @@ $(document).ready(function () {
     // Set a timeout to show the game button if operation takes more than 5 seconds
     const timeoutId = setTimeout(() => {
       var boredWaiting = localStorage.getItem("boredWaiting") || "disabled";
-      const showGameBtn = document.getElementById('show-game-btn');
+      const showGameBtn = document.getElementById("show-game-btn");
       if (boredWaiting === "enabled" && showGameBtn) {
-      	showGameBtn.style.display = 'block';
+        showGameBtn.style.display = "block";
       }
     }, 5000);
 
-
     try {
       if (remoteCall === true) {
         if (override === "multi" || (!multiple && files.length > 1 && override !== "single")) {
@@ -46,7 +45,6 @@ $(document).ready(function () {
       }
       clearTimeout(timeoutId);
       $("#submitBtn").text(originalButtonText);
-      
     } catch (error) {
       clearTimeout(timeoutId);
       handleDownloadError(error);

src/main/resources/static/pdfjs/js/viewer.js

@@ -3323,13 +3323,13 @@
                     kind: OptionKind.WORKER
                 },
                 workerSrc: {
-                    value: "/pdfjs/pdf.worker.js",
+                    value: "./pdfjs/pdf.worker.js",
                     kind: OptionKind.WORKER
                 }
             };
             {
                 defaultOptions.defaultUrl = {
-                    value: "/pdfjs/example/Welcome.pdf",
+                    value: "./pdfjs/example/Welcome.pdf",
                     kind: OptionKind.VIEWER
                 };
                 defaultOptions.disablePreferences = {

src/main/resources/templates/fragments/common.html

@@ -34,7 +34,7 @@
     <link rel="stylesheet" href="css/bootstrap-icons.min.css">
 
     <!-- PDF.js -->
-    <script src="pdfjs/pdf.js"></script>
+    <script th:src="@{pdfjs/pdf.js}"></script>
 
     <!-- PDF-Lib -->
     <script src="js/thirdParty/pdf-lib.min.js"></script>
@@ -71,7 +71,6 @@
         console.log("loaded game");
         $(document).ready(function() {
 
-        	
            // Find the file input within the form
           var fileInput = $('input[type="file"]');
           
@@ -87,7 +86,6 @@
           // Insert the 'show-game-btn' just above the submit button
           submitButton.before(gameButton);
 
-            
           function loadGameScript(callback) {
             console.log('loadGameScript called');
             const script = document.createElement('script');
@@ -122,8 +120,6 @@
               gameDialog.close();
             }
           })
-    	
-          
         })
       </script>
       <div id="game-container">

src/main/resources/templates/misc/adjust-contrast.html

@@ -15,19 +15,13 @@
               <div class="row justify-content-center">
                 <div class="col-md-3">
                     <div id="sliders-container" style="display:none;">
-                                    <h4>
+                      <h4><span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%</h4>
-                                        <span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%
-                                    </h4>
                       <input type="range" min="0" max="200" value="100" id="contrast-slider" />
 
-                                    <h4>
+                      <h4><span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%</h4>
-                                        <span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%
-                                    </h4>
                       <input type="range" min="0" max="200" value="100" id="brightness-slider" />
 
-                                    <h4>
+                      <h4><span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%</h4>
-                                        <span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%
-                                    </h4>
                       <input type="range" min="0" max="200" value="100" id="saturation-slider" />
                     </div>
                 </div>
@@ -36,7 +30,7 @@
                   <div class="col-md-8">
                     <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                   </div>
-                                <br>
+                  <br />
                   <canvas id="contrast-pdf-canvas"></canvas>
                   <button id="download-button" class="btn btn-primary" th:text="#{adjustContrast.download}"></button>
                 </div>
@@ -51,8 +45,6 @@
                 }
               </style>
 
-
-            <script src="pdfjs/pdf.js"></script>
               <script>
                 var canvas = document.getElementById('contrast-pdf-canvas');
                 var context = canvas.getContext('2d');
@@ -107,7 +99,6 @@
                   });
                 }
 
-
                 function adjustImageProperties() {
                   var contrast = parseFloat(document.getElementById('contrast-slider').value);
                   var brightness = parseFloat(document.getElementById('brightness-slider').value);
@@ -121,8 +112,7 @@
                     var newImageData = context.createImageData(originalImageData.width, originalImageData.height);
                     newImageData.data.set(originalImageData.data);
 
-                      for(var i=0; i<newImageData.data.length; i+=4)
+                    for(var i=0; i<newImageData.data.length; i+=4) {
-                      {
                       var r = newImageData.data[i];
                       var g = newImageData.data[i+1];
                       var b = newImageData.data[i+2];
@@ -205,6 +195,7 @@
                   // Denormalize back to [0, 255]
                   return (normalized + 0.5) * 255;
                 }
+
                 function clamp(value, min, max) {
                   return Math.min(Math.max(value, min), max);
                 }
@@ -268,9 +259,6 @@
 
                 }
 
-
-
-
                 // Event listeners
                 document.getElementById('fileInput-input').addEventListener('change', function(e) {
                   if (e.target.files.length > 0) {

src/main/resources/templates/view-pdf.html

@@ -32,11 +32,11 @@ See https://github.com/adobe-type-tools/cmap-resources
 <script src="js/thirdParty/bootstrap.min.js"></script>
 
     <!-- This snippet is used in production (included from view-pdf.html) -->
-    <link rel="resource" type="application/l10n" href="pdfjs/locale/locale.properties">
+    <link rel="resource" type="application/l10n" th:href="@{pdfjs/locale/locale.properties}">
-    <script src="pdfjs/pdf.js"></script>
+    <script th:src="@{pdfjs/pdf.js}" type="module"></script>
 
-    <link rel="stylesheet" href="pdfjs/css/viewer.css">
+    <link rel="stylesheet" th:href="@{/pdfjs/css/viewer.css}">
-    <script src="pdfjs/js/viewer.js"></script>
+    <script th:src="@{pdfjs/js/viewer.js}" type="module"></script>
 </head>
 
 <body tabindex="1">