24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

Interface pour mobile

Browse Source
This commit is contained in:
Vincent LAURENT 2021-10-07 01:38:44 +02:00
parent 3554a607d6
commit 5aab5e3b57
3 changed files with 107 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
public/js/app.js
View File

@ -16,6 +16,17 @@ loadingTask.promise.then(function(pdf) {
var activeCanvasPointer = null;
var canvasEditions = [];
var svgCollections = [];
var is_mobile = !(window.getComputedStyle(document.getElementById('is_mobile')).display === "none");
var menu = document.getElementById('offcanvasTop')
var menuOffcanvas = new bootstrap.Offcanvas(menu)
if(is_mobile) {
menu.classList.remove('show');
menuOffcanvas.hide();
}
menu.classList.remove('d-md-block');
menu.classList.remove('d-none');
if(localStorage.getItem('svgCollections')) {
svgCollections = JSON.parse(localStorage.getItem('svgCollections'));
@ -34,6 +45,15 @@ loadingTask.promise.then(function(pdf) {
inputRadio.autocomplete = "off";
inputRadio.value = svg.svg;
inputRadio.addEventListener('change', function() {
if(this.checked) {
document.getElementById('btn_svn_select').classList.add('d-none');
document.getElementById('svg_selected_container').classList.remove('d-none');
document.getElementById('svg_selected').src = this.value;
} else {
document.getElementById('btn_svn_select').classList.remove('d-none');
document.getElementById('svg_selected_container').classList.add('d-none');
document.getElementById('svg_selected').src = null;
}
canvasEditions.forEach(function(canvasEdition, index) {
var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
if(input_selected) {
@ -42,6 +62,9 @@ loadingTask.promise.then(function(pdf) {
canvasEdition.defaultCursor = 'default';
}
})
if(is_mobile) {
menuOffcanvas.hide();
}
});
var svgButton = document.createElement('label');
svgButton.classList.add('position-relative');
@ -300,6 +323,10 @@ loadingTask.promise.then(function(pdf) {
})
});
document.getElementById('save_mobile').addEventListener('click', function(event) {
document.getElementById('save').click();
});
document.addEventListener('keydown', function(event) {
if(event.target.tagName != "BODY") {
return;
@ -333,6 +360,7 @@ loadingTask.promise.then(function(pdf) {
var addSvgInCanvas = function(canvas, item, x, y) {
save.removeAttribute('disabled');
save_mobile.removeAttribute('disabled');
if(item == 'text') {
var textbox = new fabric.Textbox('Texte à modifier', {
@ -364,22 +392,38 @@ loadingTask.promise.then(function(pdf) {
pdf.getPage(pageNumber).then(function(page) {
var scale = 1.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 });
}
var pageIndex = page.pageNumber - 1;
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-2 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div><div></div>');
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-2 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow"></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 canvasEditionHTML = document.getElementById('canvas-edition-' + pageIndex);
// Prepare canvas using PDF page dimensions
var context = canvasPDF.getContext('2d');
canvasPDF.height = viewport.height;
canvasPDF.width = viewport.width;
canvasEditionHTML.height = viewport.height;
canvasEditionHTML.width = viewport.width;
canvasEditionHTML.height = canvasPDF.height;
canvasEditionHTML.width = canvasPDF.width;
var renderContext = {
canvasContext: context,
viewport: viewport,
enhanceTextSelection: true
};
var renderTask = page.render(renderContext);
var canvasEdition = new fabric.Canvas('canvas-edition-' + pageIndex, {'selection' : false});
var canvasEdition = new fabric.Canvas('canvas-edition-' + pageIndex, {
selection : false
});
canvasEdition.allowTouchScrolling = true;
document.getElementById('canvas-container-' + pageIndex).addEventListener('drop', function(event) {
var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
@ -407,16 +451,6 @@ loadingTask.promise.then(function(pdf) {
});
canvasEditions.push(canvasEdition);
var renderContext = {
canvasContext: context,
viewport: viewport,
enhanceTextSelection: true
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
});
});
}
}, function (reason) {

3
public/vendor/fabric.min.js vendored
View File

File diff suppressed because one or more lines are too long

90
templates/pdf.html.php
View File

@ -15,7 +15,7 @@
src: url(/vendor/fonts/Caveat-Regular.ttf) format('truetype');
}
aside .list-item-add label:hover, aside .list-item-add label:active, aside .list-item-add label.active, aside .list-item-add .btn-check:active + .btn-outline-secondary, aside .list-item-add .btn-check:checked + .btn-outline-secondary {
.offcanvas .list-item-add label:hover, .offcanvas .list-item-add label:active, .offcanvas .list-item-add label.active, .offcanvas .list-item-add .btn-check:active + .btn-outline-secondary, .offcanvas .list-item-add .btn-check:checked + .btn-outline-secondary {
background: #c9d1d8;
border: 1px solid #000;
box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important
@ -26,40 +26,61 @@
<body>
<div class="container-fluid">
<div class="row">
<div id="container-pages" class="col-lg-10 col-md-9 col-sm-8 col-xs-6 bg-light text-center"></div>
<aside class="col-lg-2 col-md-3 col-sm-4 col-xs-6 mt-2 position-fixed end-0 bg-white">
<h5 class="mb-3">Signature du PDF</h5>
<div id="svg_list_signature" class="list-item-add"></div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_signature_add" name="svg_2_add" autocomplete="off" value="signature">
<label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="signature" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_signature_add"><i class="bi bi-vector-pen"></i> Signature <small class="text-muted float-end">Ajouter</small></label>
</div>
<div id="svg_list_initials" class="list-item-add"></div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_initials_add" name="svg_2_add" autocomplete="off" value="intials">
<label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="initials" data-modalnav="#nav-type-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_initials_add"><i class="bi bi-type"></i> Paraphe <small class="text-muted float-end">Ajouter</small></label>
</div>
<div id="svg_list_rubber_stamber" class="list-item-add"></div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_rubber_stamber_add" name="svg_2_add" autocomplete="off" value="rubber_stamber">
<label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="rubber_stamber" data-modalnav="#nav-import-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_rubber_stamber_add"><i class="bi bi-card-text"></i> Tampon <small class="text-muted float-end">Ajouter</small></label>
</div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_text" name="svg_2_add" autocomplete="off" value="text">
<label draggable="true" style="cursor: grab;" class="btn btn-outline-secondary text-black text-start btn-svg" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Texte</label>
</div>
<div id="svg_list" class="d-grid gap-2 mt-2 mb-2 list-item-add"></div>
<div id="container-pages" class="col-lg-9 col-md-9 col-sm-12 col-xs-12 bg-light text-center"></div>
</div>
<div class="offcanvas offcanvas-end show d-none d-md-block" data-bs-backdrop="false" data-bs-scroll="true" data-keyboard="false" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Signature du PDF</h5>
<button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div id="svg_list_signature" class="list-item-add"></div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_signature_add" name="svg_2_add" autocomplete="off" value="signature">
<label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="signature" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_signature_add"><i class="bi bi-vector-pen"></i> Signature <small class="text-muted float-end">Ajouter</small></label>
</div>
<div id="svg_list_initials" class="list-item-add"></div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_initials_add" name="svg_2_add" autocomplete="off" value="intials">
<label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="initials" data-modalnav="#nav-type-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_initials_add"><i class="bi bi-type"></i> Paraphe <small class="text-muted float-end">Ajouter</small></label>
</div>
<div id="svg_list_rubber_stamber" class="list-item-add"></div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_rubber_stamber_add" name="svg_2_add" autocomplete="off" value="rubber_stamber">
<label data-bs-toggle="modal" data-bs-target="#modalAddSvg" data-type="rubber_stamber" data-modalnav="#nav-import-tab" class="btn btn-outline-secondary text-black text-start btn-add-svg-type" for="radio_svg_rubber_stamber_add"><i class="bi bi-card-text"></i> Tampon <small class="text-muted float-end">Ajouter</small></label>
</div>
<div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_text" name="svg_2_add" autocomplete="off" value="text">
<label draggable="true" style="cursor: grab;" class="btn btn-outline-secondary text-black text-start btn-svg" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Texte</label>
</div>
<div id="svg_list" class="d-grid gap-2 mt-2 mb-2 list-item-add"></div>
<div class="d-grid gap-2 mt-2">
<button type="button" id="btn-add-svg" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#modalAddSvg"><i class="bi bi-plus-circle"></i> Ajouter un élément</button>
</div>
<div class="d-grid gap-2 mt-2">
<button type="button" id="btn-add-svg" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#modalAddSvg"><i class="bi bi-plus-circle"></i> Ajouter un élément</button>
</div>
<form class="position-fixed bottom-0 pb-2 pe-2" id="form_pdf" action="/<?php echo $key ?>/save" method="post">
<div class="d-grid gap-2">
<button class="btn btn-primary" disabled="disabled" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
<form class="position-absolute bottom-0 pb-2 ps-0 pe-4 w-100 d-none d-sm-none d-md-block" id="form_pdf" action="/<?php echo $key ?>/save" method="post">
<div class="d-grid gap-2 mt-2">
<button class="btn btn-primary" disabled="disabled" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
</div>
</form>
</aside>
</form>
</div>
</div>
<div class="position-fixed top-0 start-0 bg-white w-100 p-2 shadow d-md-none">
<div class="d-grid gap-2">
<button id="btn_svn_select" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"><i class="bi bi-check2-circle"></i> Séléctionner une signature</button>
</div>
<div id="svg_selected_container" class="d-grid gap-2 d-none">
<div class="btn-group">
<button class="btn btn-outline-secondary"><img id="svg_selected" src="" style="max-height: 40px;" class="img-fluid"/></button>
<button class="btn btn-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop"> Changer</button>
</div>
</div>
</div>
<div class="position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow d-md-none">
<div class="d-grid gap-2">
<button class="btn btn-primary" disabled="disabled" type="submit" id="save_mobile"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
</div>
</div>
</div>
@ -99,10 +120,11 @@
</div>
</div>
</div>
<span id="is_mobile" class="d-md-none"></span>
<script src="/vendor/bootstrap.min.js?5.1.1"></script>
<script src="/vendor/pdf.js?legacy"></script>
<script src="/vendor/fabric.min.js?4.4.0"></script>
<script src="/vendor/fabric.min.js?4.6.0"></script>
<script src="/vendor/signature_pad.umd.min.js?3.0.0-beta.3"></script>
<script src="/vendor/opentype.min.js?1.3.3"></script>
<script>