From 75813eefaac2faf1a19bd1efe8805e59e9149201 Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Thu, 7 Apr 2022 00:13:22 +0200
Subject: [PATCH] Plus and minus button to change the number of pages displayed
 per line

---
 public/js/organization.js       | 23 +++++++++++++++++++----
 templates/organization.html.php | 13 +++++--------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/public/js/organization.js b/public/js/organization.js
index 33c2fff..47310a0 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -81,8 +81,9 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
                     stateCheckboxAll();
                 });
                 canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
-                    console.log(document.querySelector('#input_rotate_'+pageIndex));
-                    pageRender(pageIndex, parseInt(document.querySelector('#input_rotate_'+pageIndex).value) + 90);
+                    let inputRotate = document.querySelector('#input_rotate_'+pageIndex);
+                    inputRotate.value = parseInt(inputRotate.value) + 90;
+                    pageRender(pageIndex);
                 })
 
                 pageRender(pageIndex);
@@ -93,8 +94,15 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
     });
 };
 
-var pageRender = function(pageIndex, rotation = 0) {
+var pageRenderAll = function() {
+    for(pageIndex in pages) {
+        pageRender(pageIndex);
+    }
+}
+
+var pageRender = function(pageIndex) {
   let page = pages[pageIndex];
+  let rotation = parseInt(document.querySelector('#input_rotate_'+pageIndex).value);
   let viewport = page.getViewport({scale: 1, rotation: rotation});
   let size =  (document.getElementById('container-pages').offsetWidth - (12*nbPagePerLine) - 12) / nbPagePerLine;
   let scaleWidth = size / viewport.width;
@@ -113,7 +121,6 @@ var pageRender = function(pageIndex, rotation = 0) {
   canvasContainer.style.width = (size + 4) + "px";
   let canvasPDF = canvasContainer.querySelector('.canvas-pdf');
   let context = canvasPDF.getContext('2d');
-  document.querySelector('#input_rotate_'+pageIndex).value = rotation;
   canvasPDF.height = viewport.height;
   canvasPDF.width = viewport.width;
 
@@ -177,6 +184,14 @@ var createEventsListener = function() {
         loadPDF(pdfBlob, filename, nbPDF);
         this.value = '';
     });
+    document.getElementById('btn-zoom-decrease').addEventListener('click', function(event) {
+        nbPagePerLine++;
+        pageRenderAll();
+    });
+    document.getElementById('btn-zoom-increase').addEventListener('click', function(event) {
+        nbPagePerLine--;
+        pageRenderAll();
+    });
 }
 
 async function getPDFBlobFromCache(cacheUrl) {
diff --git a/templates/organization.html.php b/templates/organization.html.php
index f3adb79..6b9ff91 100644
--- a/templates/organization.html.php
+++ b/templates/organization.html.php
@@ -35,7 +35,7 @@
         </footer>
     </div>
     <div id="page-organization" class="d-none">
-        <div id="container-pages" class="col-12 pt-1 vh-100 d-flex flex-wrap" style="padding-bottom: 60px;">
+        <div id="container-pages" class="col-12 pt-1 vh-100 d-flex align-content-start flex-wrap" style="padding-bottom: 60px;">
         </div>
         <div id="container-bar" class="position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow-lg">
             <form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data">
@@ -51,13 +51,10 @@
                     <div class="col-2 d-none d-sm-none d-md-block">
                     </div>
                     <div class="col-1 d-none d-sm-none d-md-block">
-                        <select class="form-select">
-                            <option>3 pages</option>
-                            <option>4 pages</option>
-                            <option selected>5 pages</option>
-                            <option>8 pages</option>
-                            <option>10 pages</option>
-                        </select>
+                        <div class="btn-group">
+                            <button id="btn-zoom-decrease" type="button" class="btn btn-outline-dark"><i class="bi bi-dash"></i></button>
+                            <button id="btn-zoom-increase" type="button" class="btn btn-outline-dark"><i class="bi bi-plus"></i></button>
+                        </div>
                     </div>
                     <div class="col-2 d-none d-sm-none d-md-block">
                     </div>