diff --git a/app.php b/app.php index be0083b..8b587b0 100644 --- a/app.php +++ b/app.php @@ -155,15 +155,16 @@ $f3->route('POST /organize', $filename = null; $tmpfile = tempnam($f3->get('UPLOADS'), 'pdfsignature_organize'); unlink($tmpfile); + $pages = explode(',', $f3->get('POST.pages')); $files = Web::instance()->receive(function($file,$formFieldName){ if($formFieldName == "pdf" && strpos(Web::instance()->mime($file['tmp_name'], true), 'application/pdf') !== 0) { $f3->error(403); } return true; - }, false, function($fileBaseName, $formFieldName) use ($f3, $tmpfile, &$filename, &$svgFiles) { + }, false, function($fileBaseName, $formFieldName) use ($f3, $tmpfile, &$filename, $pages) { if($formFieldName == "pdf") { - $filename = str_replace(".pdf", "_organise.pdf", $fileBaseName); + $filename = str_replace(".pdf", "_page_".implode("-", $pages).".pdf", $fileBaseName); return basename($tmpfile).".pdf"; } }); @@ -172,9 +173,9 @@ $f3->route('POST /organize', $f3->error(403); } - shell_exec(sprintf("pdftk %s cat %s output %s", $tmpfile.".pdf", implode(" ", $f3->get('POST.pages')), $tmpfile.'_organise.pdf')); + shell_exec(sprintf("pdftk %s cat %s output %s", $tmpfile.".pdf", implode(" ", $pages), $tmpfile.'_organize.pdf')); - Web::instance()->send($tmpfile."_organise.pdf", null, 0, TRUE, $filename); + Web::instance()->send($tmpfile."_organize.pdf", null, 0, TRUE, $filename); if($f3->get('DEBUG')) { return; diff --git a/public/css/app.css b/public/css/app.css index 025e2f8..e53192e 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -32,4 +32,15 @@ #img-upload { max-width: 460px; max-height: 200px; -} \ No newline at end of file +} + +.canvas-container .btn-drag { + font-size: 30px; + cursor: move; + background: rgb(255,255,255,0.6); + opacity: 0; +} + +.canvas-container:hover .btn-drag { + opacity: 1; +} diff --git a/public/js/organization.js b/public/js/organization.js index 6e4036d..611dce5 100644 --- a/public/js/organization.js +++ b/public/js/organization.js @@ -1,8 +1,7 @@ var pdfRenderTasks = []; var pdfPages = []; -var resizeTimeout; -var currentScale = 1.5; var windowWidth = window.innerWidth; +var nbPagePerLine = 4; var loadPDF = async function(pdfBlob, filename) { var pdfjsLib = window['pdfjs-dist/build/pdf']; @@ -19,29 +18,49 @@ var loadPDF = async function(pdfBlob, filename) { loadingTask.promise.then(function(pdf) { for(var pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) { pdf.getPage(pageNumber).then(function(page) { - var scale = 0.5; - var viewport = page.getViewport({scale: scale}); - if(viewport.width > document.getElementById('container-pages').clientWidth - 40) { - viewport = page.getViewport({scale: 1}); - scale = (document.getElementById('container-pages').clientWidth - 40) / viewport.width; - viewport = page.getViewport({ scale: scale }); - } - - currentScale = scale; + let viewport = page.getViewport({scale: 1}); + let scale = (document.getElementById('container-pages').clientWidth - (8*nbPagePerLine) - 10) / viewport.width / nbPagePerLine; + viewport = page.getViewport({scale: scale}); var pageIndex = page.pageNumber - 1; - document.getElementById('container-pages').insertAdjacentHTML('beforeend', '
'); + document.getElementById('container-pages').insertAdjacentHTML('beforeend', '

Page '+page.pageNumber+' - 202008.pdf

'); let canvasContainer = document.getElementById('canvas-container-' + pageIndex); - let canvasCheckbox = canvasContainer.querySelector('input[type=checkbox]'); - canvasCheckbox.addEventListener('click', function(e) { + canvasContainer.addEventListener('dragstart', function(e) { + this.querySelector('.canvas-pdf').classList.add('shadow-lg'); + e.dataTransfer.setData('element', this.id); + }); + canvasContainer.addEventListener('dragend', function(e) { + this.querySelector('.canvas-pdf').classList.remove('shadow-lg'); + }); + canvasContainer.addEventListener('dragover', function(e) { + if (e.preventDefault) { + e.preventDefault(); + } + if(e.layerX > e.target.clientWidth / 2) { + this.insertAdjacentElement('beforebegin', document.querySelector('#'+e.dataTransfer.getData('element'))); + } else { + this.insertAdjacentElement('afterend', document.querySelector('#'+e.dataTransfer.getData('element'))); + } + + return false; + }); + + canvasContainer.querySelector('input[type=checkbox]').addEventListener('click', function(e) { e.stopPropagation(); - }) + }); + canvasContainer.querySelector('input[type=checkbox]').addEventListener('change', function(e) { + stateCheckbox(this); + stateCheckboxAll(); + }); canvasContainer.addEventListener('click', function(e) { - this.querySelector('input[type=checkbox]').checked = !this.querySelector('input[type=checkbox]').checked; - document.querySelector('#checkbox_all_pages').checked = (document.querySelectorAll('.checkbox-page:checked').length == document.querySelectorAll('.checkbox-page').length); - }) + let checkbox = this.querySelector('input[type=checkbox]'); + checkbox.checked = !checkbox.checked; + stateCheckbox(checkbox); + stateCheckboxAll(); + }); + var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex); // Prepare canvas using PDF page dimensions @@ -68,13 +87,43 @@ var is_mobile = function() { return !(window.getComputedStyle(document.getElementById('is_mobile')).display === "none"); }; +var stateCheckbox = function(checkbox) { + let checkboxContainer = checkbox.parentNode.parentNode.parentNode; + + if(checkbox.checked) { + checkboxContainer.querySelector('.canvas-pdf').style.opacity = '1'; + checkboxContainer.querySelector('.canvas-pdf').style.cursor = 'inherit'; + checkboxContainer.querySelector('.container-resize').classList.remove('d-none'); + checkboxContainer.querySelector('.container-checkbox').style.background = 'rgb(255,255,255,0.8)'; + } else { + checkboxContainer.querySelector('.canvas-pdf').style.opacity = '0.3'; + checkboxContainer.querySelector('.canvas-pdf').style.cursor = 'pointer'; + checkboxContainer.querySelector('.container-resize').classList.add('d-none'); + checkboxContainer.querySelector('.container-checkbox').style.background = 'transparent'; + } +}; + +var stateCheckboxAll = function() { + document.querySelector('#checkbox_all_pages').checked = (document.querySelectorAll('.checkbox-page:checked').length == document.querySelectorAll('.checkbox-page').length); +}; + var createEventsListener = function() { document.querySelector('#checkbox_all_pages').addEventListener('change', function() { let checkboxAll = this; document.querySelectorAll('.checkbox-page').forEach(function(checkbox) { checkbox.checked = checkboxAll.checked; + stateCheckbox(checkbox); }); - }) + }); + document.getElementById('save').addEventListener('click', function(event) { + let order = []; + document.querySelectorAll('.checkbox-page').forEach(function(checkbox) { + if(checkbox.checked) { + order.push(checkbox.value); + } + }); + document.querySelector('#input_pages').value = order.join(','); + }); } async function getPDFBlobFromCache(cacheUrl) { diff --git a/templates/organization.html.php b/templates/organization.html.php index eae78cb..2819705 100644 --- a/templates/organization.html.php +++ b/templates/organization.html.php @@ -35,13 +35,23 @@
+
-
-
+
+
- +
+
+
+
+ +
+
+
@@ -54,9 +64,6 @@ - - -