mirror of
https://github.com/24eme/signaturepdf
synced 2024-05-29 12:03:11 +02:00
Ajout de svg de type de svg signature, paraphe et tampon. Ses type de
svg sont listés de base et permettent de créer un motif.
This commit is contained in:
Vincent LAURENT
parent
8dd4c9b645
commit
857ecea8c2
|
|
@ -25,34 +25,62 @@ loadingTask.promise.then(function(pdf) {
|
|||
fontCaveat = font;
|
||||
});
|
||||
|
||||
var getHtmlSvg = function(svg, i) {
|
||||
var inputRadio = document.createElement('input');
|
||||
inputRadio.type = "radio";
|
||||
inputRadio.classList.add("btn-check");
|
||||
inputRadio.id="radio_svg_"+i;
|
||||
inputRadio.name = "svg_2_add";
|
||||
inputRadio.autocomplete = "off";
|
||||
inputRadio.value = svg.svg;
|
||||
var svgButton = document.createElement('label');
|
||||
svgButton.classList.add('position-relative');
|
||||
svgButton.classList.add('btn');
|
||||
svgButton.classList.add('btn-outline-secondary');
|
||||
svgButton.htmlFor = "radio_svg_"+i;
|
||||
if(svg.type == 'signature') {
|
||||
svgButton.innerHTML += '<i class="bi bi-vector-pen text-black align-middle float-start"></i> ';
|
||||
}
|
||||
if(svg.type == 'initials') {
|
||||
svgButton.innerHTML += '<i class="bi bi-type text-black align-middle float-start"></i> ';
|
||||
}
|
||||
if(svg.type == 'rubber_stamber') {
|
||||
svgButton.innerHTML += '<i class="bi bi-card-text text-black align-middle float-start"></i> ';
|
||||
}
|
||||
if(svg.type) {
|
||||
document.querySelector('.btn-add-svg-type[data-type="'+svg.type+'"]').classList.add('d-none');
|
||||
}
|
||||
|
||||
svgButton.innerHTML += '<a title="Supprimer" data-index="'+i+'" class="btn-svg-list-suppression opacity-50 link-dark position-absolute" style="right: 6px; top: 2px;"><i class="bi bi-trash"></i></a>';
|
||||
var svgImg = document.createElement('img');
|
||||
svgImg.src = svg.svg;
|
||||
svgImg.style = "max-width: 180px;max-height: 70px;";
|
||||
svgButton.appendChild(svgImg);
|
||||
var svgContainer = document.createElement('div');
|
||||
svgContainer.classList.add('d-grid');
|
||||
svgContainer.classList.add('gap-2');
|
||||
svgContainer.appendChild(inputRadio);
|
||||
svgContainer.appendChild(svgButton);
|
||||
|
||||
return svgContainer;
|
||||
}
|
||||
|
||||
var displaysSVG = function() {
|
||||
document.getElementById('svg_list').innerHTML = "";
|
||||
svgCollections.forEach((svg, i) => {
|
||||
var inputRadio = document.createElement('input');
|
||||
inputRadio.type = "radio";
|
||||
inputRadio.classList.add("btn-check");
|
||||
inputRadio.id="radio_svg_"+i;
|
||||
inputRadio.name = "svg_2_add";
|
||||
inputRadio.autocomplete = "off";
|
||||
inputRadio.value = svg;
|
||||
var svgButton = document.createElement('label');
|
||||
svgButton.classList.add('position-relative');
|
||||
svgButton.classList.add('btn');
|
||||
svgButton.classList.add('btn-lg');
|
||||
svgButton.classList.add('btn-outline-secondary');
|
||||
svgButton.htmlFor = "radio_svg_"+i;
|
||||
svgButton.innerHTML = '<a title="Supprimer" data-index="'+i+'" class="btn-svg-list-suppression opacity-50 link-dark position-absolute fs-6" style="right: 6px; top: 2px;"><i class="bi bi-trash"></i></a>';
|
||||
var svgImg = document.createElement('img');
|
||||
svgImg.src = svg;
|
||||
svgImg.style = "max-width: 180px;max-height: 70px;";
|
||||
svgButton.appendChild(svgImg);
|
||||
document.getElementById('svg_list').appendChild(inputRadio);
|
||||
document.getElementById('svg_list').appendChild(svgButton);
|
||||
document.getElementById('svg_list_signature').innerHTML = "";
|
||||
document.getElementById('svg_list_initials').innerHTML = "";
|
||||
document.getElementById('svg_list_rubber_stamber').innerHTML = "";
|
||||
document.querySelectorAll('.btn-add-svg-type').forEach(function(item) {
|
||||
item.classList.remove('d-none');
|
||||
});
|
||||
svgCollections.forEach((svg, i) => {
|
||||
var svgHtmlChild = getHtmlSvg(svg, i);
|
||||
if(svg.type) {
|
||||
document.getElementById('svg_list_'+svg.type).appendChild(svgHtmlChild);
|
||||
return;
|
||||
}
|
||||
document.getElementById('svg_list').appendChild(svgHtmlChild);
|
||||
});
|
||||
|
||||
document.getElementById('btn-add-svg').classList.add('btn-primary');
|
||||
document.getElementById('btn-add-svg').classList.remove('btn-light');
|
||||
|
||||
if(svgCollections.length > 0) {
|
||||
document.getElementById('btn-add-svg').classList.add('btn-light');
|
||||
|
|
@ -73,11 +101,21 @@ loadingTask.promise.then(function(pdf) {
|
|||
|
||||
}
|
||||
|
||||
document.querySelectorAll('.btn-add-svg-type').forEach(function(item) {
|
||||
item.addEventListener('click', function(event) {
|
||||
document.getElementById('input-svg-type').value = this.dataset.type;
|
||||
});
|
||||
});
|
||||
|
||||
displaysSVG();
|
||||
|
||||
document.getElementById('btn_modal_ajouter').addEventListener('click', function() {
|
||||
var svgItem = {};
|
||||
if(document.getElementById('input-svg-type').value) {
|
||||
svgItem.type = document.getElementById('input-svg-type').value;
|
||||
}
|
||||
if(document.getElementById('nav-draw-tab').classList.contains('active')) {
|
||||
svgCollections.push(document.getElementById('img-upload').src);
|
||||
svgItem.svg = document.getElementById('img-upload').src;
|
||||
}
|
||||
if(document.getElementById('nav-type-tab').classList.contains('active')) {
|
||||
var fontPath = fontCaveat.getPath(document.getElementById('input-text-signature').value, 0, 0, 42);
|
||||
|
|
@ -90,11 +128,12 @@ loadingTask.promise.then(function(pdf) {
|
|||
textCanvas.height = fabricPath.getScaledHeight();
|
||||
var textCanvas = new fabric.Canvas(textCanvas);
|
||||
textCanvas.add(fabricPath).renderAll();
|
||||
svgCollections.push("data:image/svg+xml;base64,"+btoa(textCanvas.toSVG()));
|
||||
svgItem.svg = "data:image/svg+xml;base64,"+btoa(textCanvas.toSVG());
|
||||
}
|
||||
if(document.getElementById('nav-import-tab').classList.contains('active')) {
|
||||
svgCollections.push(document.getElementById('img-upload').src);
|
||||
svgItem.svg = document.getElementById('img-upload').src;
|
||||
}
|
||||
svgCollections.push(svgItem);
|
||||
displaysSVG();
|
||||
document.querySelector('#svg_list label:last-child').click();
|
||||
localStorage.setItem('svgCollections', JSON.stringify(svgCollections));
|
||||
|
|
@ -171,6 +210,7 @@ loadingTask.promise.then(function(pdf) {
|
|||
document.getElementById('modalAddSvg').addEventListener('hidden.bs.modal', function (event) {
|
||||
signaturePad.clear();
|
||||
document.getElementById('btn_modal_ajouter').setAttribute('disabled', 'disabled');
|
||||
document.getElementById('input-svg-type').value = null;
|
||||
document.getElementById('input-text-signature').value = null;
|
||||
document.getElementById('input-image-upload').value = null;
|
||||
document.getElementById('img-upload').src = null;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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 {
|
||||
background: #e6ebf0;
|
||||
border: 1px solid #000;
|
||||
box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important
|
||||
|
|
@ -28,22 +28,36 @@
|
|||
<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-0">Motifs</h5>
|
||||
<small class="text-muted">Signature, paraphe, tampon, etc.</small>
|
||||
<div id="svg_list" class="d-grid gap-2 mt-2 list-item-add"></div>
|
||||
<div class="d-grid gap-2 mt-2">
|
||||
<button type="button" id="btn-add-svg" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddSvg"><i class="bi bi-plus-circle"></i> Ajouter un motif</button>
|
||||
<h5 class="mb-3">Signature du PDF</h5>
|
||||
<div id="svg_list_signature"></div>
|
||||
<div class="d-grid gap-2 mb-2">
|
||||
<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>
|
||||
<h5 class="mt-3">Texte</h5>
|
||||
<div class="d-grid gap-2 mt-3 list-item-add">
|
||||
<div id="svg_list_initials"></div>
|
||||
<div class="d-grid gap-2 mb-2">
|
||||
<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" 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"></div>
|
||||
<div class="d-grid gap-2 mb-2">
|
||||
<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" 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 svg_list_text">
|
||||
<input type="radio" class="btn-check" id="radio_svg_text" name="svg_2_add" autocomplete="off" value="text">
|
||||
<label class="btn btn-outline-secondary text-black text-start" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Zone de texte</label>
|
||||
<label class="btn btn-outline-secondary text-black text-start" 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>
|
||||
|
||||
<form class="position-fixed bottom-0 pb-2 pe-2" id="form_pdf" action="/<?php echo $key ?>/save" method="post">
|
||||
<p class="fs-6"><small class="text-muted"><i class="bi bi-hand-index"></i> + <i class="bi bi-hand-index"></i> = <i class="bi bi-plus-circle-fill"></i><br />Double-cliquez sur le PDF pour ajouter le motif ou l'élément sélectionné</small></p>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-success " disabled="disabled" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
|
||||
<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>
|
||||
|
|
@ -77,7 +91,8 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input id="input-svg-type" type="hidden" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button tabindex="-1" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
||||
<button id="btn_modal_ajouter" type="button" disabled="disabled" class="btn btn-primary" data-bs-dismiss="modal">Ajouter</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue