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

Navigation au clavier

Browse Source
This commit is contained in:
Vincent LAURENT 2021-09-25 15:36:34 +02:00
parent f7db55cb75
commit 5be1947006
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/js/app.js
View File

@ -69,20 +69,39 @@ loadingTask.promise.then(function(pdf) {
svgCollections.push(document.getElementById('img-upload').src); svgCollections.push(document.getElementById('img-upload').src);
} }
displaysSVG(); displaysSVG();
document.querySelector('#svg_list label:last-child').click();
}); });
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: 0.75, onEnd: function() { document.getElementById('btn_modal_ajouter').focus() }
maxWidth: 1.1
}); });
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');
if(firstInput) {
firstInput.focus();
}
})});
document.getElementById('modalAddSvg').addEventListener('shown.bs.modal', function (event) {
document.querySelector('#modalAddSvg #nav-tab button:first-child').focus()
})
document.getElementById('modalAddSvg').addEventListener('hidden.bs.modal', function (event) { document.getElementById('modalAddSvg').addEventListener('hidden.bs.modal', function (event) {
signaturePad.clear(); signaturePad.clear();
document.getElementById('input-text-signature').value = null; document.getElementById('input-text-signature').value = null;
document.getElementById('input-image-upload').value = null; document.getElementById('input-image-upload').value = null;
document.getElementById('img-upload').src = null; document.getElementById('img-upload').src = null;
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();
})
document.getElementById('input-text-signature').addEventListener('keypress', function(event) {
if(event.key == 'Enter') {
document.getElementById('btn_modal_ajouter').click()
}
}) })
document.getElementById('input-image-upload').addEventListener('change', function(event) { document.getElementById('input-image-upload').addEventListener('change', function(event) {
@ -96,6 +115,7 @@ loadingTask.promise.then(function(pdf) {
var svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText); var svgImage = "data:image/svg+xml;base64,"+btoa(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");
document.getElementById('btn_modal_ajouter').focus();
}; };
xhr.send( data ); xhr.send( data );

6
templates/pdf.html.php
View File

@ -48,7 +48,7 @@
<button class="nav-link" id="nav-import-tab" data-bs-toggle="tab" data-bs-target="#nav-import" type="button" role="tab" aria-controls="nav-import" aria-selected="false"><i class="bi bi-image"></i> Importer</button> <button class="nav-link" id="nav-import-tab" data-bs-toggle="tab" data-bs-target="#nav-import" type="button" role="tab" aria-controls="nav-import" aria-selected="false"><i class="bi bi-image"></i> Importer</button>
</div> </div>
</nav> </nav>
<div class="tab-content mt-3" id="nav-tabContent"> <div class="tab-content mt-3" id="nav-svg-add">
<div class="tab-pane fade show active" id="nav-draw" role="tabpanel" aria-labelledby="nav-draw-tab"> <div class="tab-pane fade show active" id="nav-draw" role="tabpanel" aria-labelledby="nav-draw-tab">
<canvas id="signature-pad" class="border bg-light" width="462" height="175"></canvas> <canvas id="signature-pad" class="border bg-light" width="462" height="175"></canvas>
</div> </div>
@ -57,7 +57,7 @@
</div> </div>
<div class="tab-pane fade" id="nav-import" role="tabpanel" aria-labelledby="nav-import-tab"> <div class="tab-pane fade" id="nav-import" role="tabpanel" aria-labelledby="nav-import-tab">
<div class="text-center"> <div class="text-center">
<img id="img-upload" class="d-none" style="max-width: 460px;" src="" /> <img id="img-upload" class="d-none" style="max-width: 460px; max-height: 200px;" src="" />
</div> </div>
<form id="form-image-upload" action="/image2svg" method="POST" enctype="multipart/form-data"> <form id="form-image-upload" action="/image2svg" method="POST" enctype="multipart/form-data">
<input id="input-image-upload" class="form-control" name="image" type="file"> <input id="input-image-upload" class="form-control" name="image" type="file">
@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button> <button tabindex="-1" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button id="btn_modal_ajouter" type="button" class="btn btn-primary" data-bs-dismiss="modal">Ajouter</button> <button id="btn_modal_ajouter" type="button" class="btn btn-primary" data-bs-dismiss="modal">Ajouter</button>
</div> </div>
</div> </div>