mirror of
https://github.com/24eme/signaturepdf
synced 2024-05-29 03:52:31 +02:00
Interface pour mobile
This commit is contained in:
Vincent LAURENT
parent
3554a607d6
commit
5aab5e3b57
|
|
@ -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
3
public/vendor/fabric.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue