deblan-mirror/24eme-signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf synced 2024-05-31 04:52:56 +02:00
Code Activity

Définition des normes d'édition

Browse source
This commit is contained in:
Vincent LAURENT 2021-10-12 01:02:40 +02:00
parent 3a44c5a9b7
commit 21ff3c8ff7
2 changed files with 62 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.editorconfig Normal file
View file

@ -0,0 +1,15 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
end_of_line = lf
charset = utf-8
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

93
public/js/app.js
View file

@ -9,7 +9,7 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = '/vendor/pdf.worker.js?legacy';
// Asynchronous download of PDF // Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url); var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) { loadingTask.promise.then(function(pdf) {
var fontCaveat = null; var fontCaveat = null;
var copiedObject = null; var copiedObject = null;
var activeCanvas = null; var activeCanvas = null;
@ -23,11 +23,11 @@ loadingTask.promise.then(function(pdf) {
var windowWidth = window.innerWidth; var windowWidth = window.innerWidth;
var menu = document.getElementById('offcanvasTop') var menu = document.getElementById('offcanvasTop')
var menuOffcanvas = new bootstrap.Offcanvas(menu) var menuOffcanvas = new bootstrap.Offcanvas(menu)
var is_mobile = function() { var is_mobile = function() {
return !(window.getComputedStyle(document.getElementById('is_mobile')).display === "none"); return !(window.getComputedStyle(document.getElementById('is_mobile')).display === "none");
} }
var responsiveDisplay = function() { var responsiveDisplay = function() {
if(is_mobile()) { if(is_mobile()) {
document.body.style.paddingRight = ""; document.body.style.paddingRight = "";
@ -50,6 +50,7 @@ loadingTask.promise.then(function(pdf) {
} }
var storeCollections = function () { var storeCollections = function () {
console.log('store');
localStorage.setItem('svgCollections', JSON.stringify(svgCollections)); localStorage.setItem('svgCollections', JSON.stringify(svgCollections));
} }
@ -202,7 +203,7 @@ loadingTask.promise.then(function(pdf) {
}); });
displaysSVG(); displaysSVG();
document.getElementById('btn_modal_ajouter').addEventListener('click', function() { document.getElementById('btn_modal_ajouter').addEventListener('click', function() {
var svgItem = {}; var svgItem = {};
if(document.getElementById('input-svg-type').value) { if(document.getElementById('input-svg-type').value) {
@ -214,8 +215,8 @@ loadingTask.promise.then(function(pdf) {
if(document.getElementById('nav-type-tab').classList.contains('active')) { if(document.getElementById('nav-type-tab').classList.contains('active')) {
var fontPath = fontCaveat.getPath(document.getElementById('input-text-signature').value, 0, 0, 42); var fontPath = fontCaveat.getPath(document.getElementById('input-text-signature').value, 0, 0, 42);
var fabricPath = new fabric.Path(fontPath.toPathData()); var fabricPath = new fabric.Path(fontPath.toPathData());
fabricPath.top = 0; fabricPath.top = 0;
fabricPath.left = 0; fabricPath.left = 0;
fabricPath.height = fabricPath.getScaledHeight(); fabricPath.height = fabricPath.getScaledHeight();
var textCanvas = document.createElement('canvas'); var textCanvas = document.createElement('canvas');
textCanvas.width = fabricPath.getScaledWidth(); textCanvas.width = fabricPath.getScaledWidth();
@ -238,7 +239,7 @@ loadingTask.promise.then(function(pdf) {
document.querySelector('#'+svg_list_id+' label:last-child').click(); document.querySelector('#'+svg_list_id+' label:last-child').click();
}); });
function dataURLtoBlob(dataurl) { function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
@ -247,10 +248,10 @@ loadingTask.promise.then(function(pdf) {
} }
return new Blob([u8arr], {type:mime}); return new Blob([u8arr], {type:mime});
} }
function trimSvgWhitespace(svgContent) { function trimSvgWhitespace(svgContent) {
if(!svgContent) { if(!svgContent) {
return null; return null;
} }
var svgContainer = document.createElement("div") var svgContainer = document.createElement("div")
@ -266,25 +267,25 @@ loadingTask.promise.then(function(pdf) {
svg.setAttribute("viewBox", [box.x, box.y, box.width, box.height].join(" ")); svg.setAttribute("viewBox", [box.x, box.y, box.width, box.height].join(" "));
svgContent = svgContainer.innerHTML; svgContent = svgContainer.innerHTML;
document.body.removeChild(svgContainer) document.body.removeChild(svgContainer)
return svgContent = svgContainer.innerHTML; return svgContent = svgContainer.innerHTML;
} }
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), { var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
penColor: 'rgb(0, 0, 0)', penColor: 'rgb(0, 0, 0)',
minWidth: 1.25, minWidth: 1.25,
maxWidth: 2, maxWidth: 2,
throttle: 0, throttle: 0,
onEnd: function() { onEnd: function() {
document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled'); document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled');
const file = new File([dataURLtoBlob(signaturePad.toDataURL())], "draw.png", { const file = new File([dataURLtoBlob(signaturePad.toDataURL())], "draw.png", {
type: 'image/png' type: 'image/png'
}); });
var data = new FormData(); var data = new FormData();
data.append('file', file); data.append('file', file);
xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest();
xhr.open( 'POST', document.getElementById('form-image-upload').action, true ); xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText)); var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText));
document.getElementById('img-upload').src = svgImage; document.getElementById('img-upload').src = svgImage;
document.getElementById('img-upload').classList.remove("d-none"); document.getElementById('img-upload').classList.remove("d-none");
@ -294,7 +295,7 @@ loadingTask.promise.then(function(pdf) {
xhr.send( data ); xhr.send( data );
} }
}); });
document.querySelectorAll('#modalAddSvg .nav-link').forEach(function(item) { item.addEventListener('shown.bs.tab', function (event) { document.querySelectorAll('#modalAddSvg .nav-link').forEach(function(item) { item.addEventListener('shown.bs.tab', function (event) {
var firstInput = document.querySelector(event.target.dataset.bsTarget).querySelector('input'); var firstInput = document.querySelector(event.target.dataset.bsTarget).querySelector('input');
if(firstInput) { if(firstInput) {
@ -320,7 +321,7 @@ loadingTask.promise.then(function(pdf) {
document.getElementById('img-upload').classList.add("d-none"); document.getElementById('img-upload').classList.add("d-none");
bootstrap.Tab.getOrCreateInstance(document.querySelector('#modalAddSvg #nav-tab button:first-child')).show(); bootstrap.Tab.getOrCreateInstance(document.querySelector('#modalAddSvg #nav-tab button:first-child')).show();
}) })
document.getElementById('input-text-signature').addEventListener('keydown', function(event) { document.getElementById('input-text-signature').addEventListener('keydown', function(event) {
document.getElementById('btn_modal_ajouter').removeAttribute('disabled'); document.getElementById('btn_modal_ajouter').removeAttribute('disabled');
if(event.key == 'Enter') { if(event.key == 'Enter') {
@ -331,13 +332,13 @@ loadingTask.promise.then(function(pdf) {
document.getElementById('input-image-upload').addEventListener('change', function(event) { document.getElementById('input-image-upload').addEventListener('change', function(event) {
document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled'); document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled');
var data = new FormData(); var data = new FormData();
data.append('file', document.getElementById('input-image-upload').files[0]); data.append('file', document.getElementById('input-image-upload').files[0]);
xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest();
xhr.open( 'POST', document.getElementById('form-image-upload').action, true ); xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText)); var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText));
document.getElementById('img-upload').src = svgImage; document.getElementById('img-upload').src = svgImage;
document.getElementById('img-upload').classList.remove("d-none"); document.getElementById('img-upload').classList.remove("d-none");
@ -348,13 +349,13 @@ loadingTask.promise.then(function(pdf) {
event.preventDefault(); event.preventDefault();
}); });
document.getElementById('save').addEventListener('click', function(event) { document.getElementById('save').addEventListener('click', function(event) {
canvasEditions.forEach(function(canvasEdition, index) { canvasEditions.forEach(function(canvasEdition, index) {
document.getElementById('data-svg-'+index).value = canvasEdition.toSVG(); document.getElementById('data-svg-'+index).value = canvasEdition.toSVG();
}) })
}); });
document.getElementById('save_mobile').addEventListener('click', function(event) { document.getElementById('save_mobile').addEventListener('click', function(event) {
document.getElementById('save').click(); document.getElementById('save').click();
}); });
@ -371,16 +372,16 @@ loadingTask.promise.then(function(pdf) {
}) })
return; return;
} }
if(event.ctrlKey && event.key == 'c') { if(event.ctrlKey && event.key == 'c') {
if(!activeCanvas || !activeCanvas.getActiveObject()) { if(!activeCanvas || !activeCanvas.getActiveObject()) {
return; return;
} }
copiedObject = fabric.util.object.clone(activeCanvas.getActiveObject()); copiedObject = fabric.util.object.clone(activeCanvas.getActiveObject());
return; return;
} }
if(event.ctrlKey && event.key == 'v') { if(event.ctrlKey && event.key == 'v') {
copiedObject = fabric.util.object.clone(copiedObject); copiedObject = fabric.util.object.clone(copiedObject);
copiedObject.left = activeCanvasPointer.x; copiedObject.left = activeCanvasPointer.x;
@ -408,7 +409,7 @@ loadingTask.promise.then(function(pdf) {
return; return;
} }
}); });
var addSvgInCanvas = function(canvas, item, x, y) { var addSvgInCanvas = function(canvas, item, x, y) {
save.removeAttribute('disabled'); save.removeAttribute('disabled');
save_mobile.removeAttribute('disabled'); save_mobile.removeAttribute('disabled');
@ -420,6 +421,7 @@ loadingTask.promise.then(function(pdf) {
width: 300, width: 300,
fontSize: 20 fontSize: 20
}); });
canvas.add(textbox).setActiveObject(textbox); canvas.add(textbox).setActiveObject(textbox);
textbox.enterEditing(); textbox.enterEditing();
textbox.selectAll(); textbox.selectAll();
@ -459,13 +461,14 @@ loadingTask.promise.then(function(pdf) {
return; return;
} }
event.preventDefault() && event.stopPropagation(); event.preventDefault() && event.stopPropagation();
if(event.deltaY > 0) { if(event.deltaY > 0) {
zoomChange(-1) zoomChange(-1)
} else { } else {
zoomChange(1) zoomChange(1)
} }
}, { passive: false }); }, { passive: false });
document.getElementById('btn-zoom-decrease').addEventListener('click', function() { document.getElementById('btn-zoom-decrease').addEventListener('click', function() {
zoomChange(-1) zoomChange(-1)
}); });
@ -477,29 +480,27 @@ loadingTask.promise.then(function(pdf) {
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resizePDF, 100); resizeTimeout = setTimeout(resizePDF, 100);
} }
var zoomChange = function (inOrOut) { var zoomChange = function (inOrOut) {
if(resizeTimeout) { if(resizeTimeout) {
return; return;
} }
var deltaScale = 0.2 * inOrOut; var deltaScale = 0.2 * inOrOut;
if(currentScale + deltaScale < 0) { if(currentScale + deltaScale < 0) {
return return
} }
if(currentScale + deltaScale > 3) { if(currentScale + deltaScale > 3) {
return return
} }
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
currentScale += deltaScale; currentScale += deltaScale;
console.log(currentScale);
resizeTimeout = setTimeout(resizePDF(currentScale), 50); resizeTimeout = setTimeout(resizePDF(currentScale), 50);
} }
var resizePDF = function (scale = 'auto') { var resizePDF = function (scale = 'auto') {
renderComplete = true; renderComplete = true;
pdfRenderTasks.forEach(function(renderTask) { pdfRenderTasks.forEach(function(renderTask) {
@ -507,16 +508,16 @@ loadingTask.promise.then(function(pdf) {
renderComplete = false; renderComplete = false;
} }
}); });
if(!renderComplete) { if(!renderComplete) {
clearTimeout(resizeTimeout); clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){ resizePDF(scale) }, 50); resizeTimeout = setTimeout(function(){ resizePDF(scale) }, 50);
return; return;
} }
pdfPages.forEach(function(page, pageIndex) { pdfPages.forEach(function(page, pageIndex) {
var renderTask = pdfRenderTasks[pageIndex]; var renderTask = pdfRenderTasks[pageIndex];
if(scale == 'auto' && page.getViewport({scale: 1.5}).width > document.getElementById('container-pages').clientWidth - 40) { if(scale == 'auto' && page.getViewport({scale: 1.5}).width > document.getElementById('container-pages').clientWidth - 40) {
scale = (document.getElementById('container-pages').clientWidth - 40) / page.getViewport({scale: 1}).width; scale = (document.getElementById('container-pages').clientWidth - 40) / page.getViewport({scale: 1}).width;
} }
@ -548,7 +549,7 @@ loadingTask.promise.then(function(pdf) {
canvasEdition.setHeight(canvasEdition.getHeight() * scaleMultiplier); canvasEdition.setHeight(canvasEdition.getHeight() * scaleMultiplier);
canvasEdition.renderAll(); canvasEdition.renderAll();
canvasEdition.calcOffset(); canvasEdition.calcOffset();
var renderContext = { var renderContext = {
canvasContext: context, canvasContext: context,
viewport: viewport, viewport: viewport,
@ -574,14 +575,14 @@ loadingTask.promise.then(function(pdf) {
scale = (document.getElementById('container-pages').clientWidth - 40) / viewport.width; scale = (document.getElementById('container-pages').clientWidth - 40) / viewport.width;
viewport = page.getViewport({ scale: scale }); viewport = page.getViewport({ scale: scale });
} }
currentScale = scale; currentScale = scale;
var pageIndex = page.pageNumber - 1; var pageIndex = page.pageNumber - 1;
document.getElementById('form_pdf').insertAdjacentHTML('beforeend', '<input name="svg[' + pageIndex + ']" id="data-svg-' + pageIndex + '" type="hidden" value="" />'); document.getElementById('form_pdf').insertAdjacentHTML('beforeend', '<input name="svg[' + pageIndex + ']" id="data-svg-' + pageIndex + '" type="hidden" value="" />');
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div>'); document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div>');
var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex); var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex);
var canvasEditionHTML = document.getElementById('canvas-edition-' + pageIndex); var canvasEditionHTML = document.getElementById('canvas-edition-' + pageIndex);
// Prepare canvas using PDF page dimensions // Prepare canvas using PDF page dimensions
@ -590,7 +591,7 @@ loadingTask.promise.then(function(pdf) {
canvasPDF.width = viewport.width; canvasPDF.width = viewport.width;
canvasEditionHTML.height = canvasPDF.height; canvasEditionHTML.height = canvasPDF.height;
canvasEditionHTML.width = canvasPDF.width; canvasEditionHTML.width = canvasPDF.width;
var renderContext = { var renderContext = {
canvasContext: context, canvasContext: context,
viewport: viewport, viewport: viewport,
@ -603,7 +604,7 @@ loadingTask.promise.then(function(pdf) {
selection : false, selection : false,
allowTouchScrolling: true allowTouchScrolling: true
}); });
document.getElementById('canvas-container-' + pageIndex).addEventListener('drop', function(event) { document.getElementById('canvas-container-' + pageIndex).addEventListener('drop', function(event) {
var input_selected = document.querySelector('input[name="svg_2_add"]:checked'); var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
if(!input_selected) { if(!input_selected) {