From ea98ee5bd99598a89d8bd54a5014f4aaed32d4ed Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Mon, 20 Sep 2021 09:55:42 +0200
Subject: [PATCH] =?UTF-8?q?Radiobox=20pour=20choisir=20quel=20=C3=A9l?=
 =?UTF-8?q?=C3=A9ment=20ajouter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/app.js    | 42 +++++++++++++++++++++++++++---------------
 pdf.html.php | 13 ++++++++-----
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/js/app.js b/js/app.js
index 872d866..f835420 100644
--- a/js/app.js
+++ b/js/app.js
@@ -13,7 +13,14 @@ loadingTask.promise.then(function(pdf) {
         backgroundColor: 'rgba(255, 255, 255, 0)',
         penColor: 'rgb(0, 0, 0)',
         minWidth: 0.75,
-        maxWidth: 1.1
+        maxWidth: 1.1,
+        onEnd: function() {
+            document.getElementById('radio_signature_pad').checked = true;
+        }
+    });
+    
+    document.getElementById('input-text-signature').addEventListener('keypress', function(event) {
+        document.getElementById('radio_signature_text').checked = true;
     });
     
     var svgImage = null;
@@ -27,6 +34,7 @@ loadingTask.promise.then(function(pdf) {
         xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
         xhr.onreadystatechange = function () { 
             svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText);
+            document.getElementById('radio_signature_image').checked = true;
         };
         xhr.send( data );
 
@@ -65,14 +73,28 @@ loadingTask.promise.then(function(pdf) {
           canvasEdition.on('mouse:dblclick', function(event) {
               x = event.pointer.x
               y = event.pointer.y
-            
-              svg2add = signaturePad.toDataURL("image/svg+xml");
               
-              if(svgImage) {
+              var svg2add = null;
+              
+              if(document.getElementById('radio_signature_pad').checked) {
+                 svg2add = signaturePad.toDataURL("image/svg+xml");
+              }
+              
+              if(document.getElementById('radio_signature_image').checked) {
                 svg2add = svgImage;
               }
+              
+              if(svg2add) {
+                  fabric.loadSVGFromURL(svg2add, function(objects, options) {
+                      var svg = fabric.util.groupSVGElements(objects, options);
+                      svg.scaleToHeight(100);
+                      svg.top = y - (svg.getScaledHeight() / 2);
+                      svg.left = x - (svg.getScaledWidth() / 2);
+                      canvasEdition.add(svg).renderAll();
+                  });
+              }
 
-              if(document.getElementById('input-text-signature').value) {
+              if(document.getElementById('radio_signature_text').checked) {
                 var textSignature = new fabric.Text(document.getElementById('input-text-signature').value, {
                       fontFamily: 'Caveat'
                 });
@@ -80,16 +102,6 @@ loadingTask.promise.then(function(pdf) {
                 textSignature.left = x - (textSignature.getScaledWidth() / 2);    
                 canvasEdition.add(textSignature).renderAll();
               }
-              
-              
-              fabric.loadSVGFromURL(svg2add, function(objects, options) {
-                  var svg = fabric.util.groupSVGElements(objects, options);
-                  svg.scaleToHeight(100);
-                  svg.top = y - (svg.getScaledHeight() / 2);
-                  svg.left = x - (svg.getScaledWidth() / 2);
-                  canvasEdition.add(svg).renderAll();
-              });
-
           });
 
           canvasEditions.push(canvasEdition);
diff --git a/pdf.html.php b/pdf.html.php
index 8b8c8ad..cc781e7 100644
--- a/pdf.html.php
+++ b/pdf.html.php
@@ -18,18 +18,21 @@
         <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><i class="bi bi-vector-pen"></i> Signature à main lever</h5> 
+                <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_pad"></div>
+                <h5><i class="bi bi-vector-pen"></i> À main lever</h5> 
                 <canvas id="signature-pad" class="border bg-light" width=200 height=150></canvas>
                 <hr />
-                <h5><i class="bi bi-fonts"></i> Signature texte</h5>
-                <input id="input-text-signature" type="text" class="form-control" placeholder="Ma signature" style="font-family: 'Caveat', cursive; font-size: 24px;" /> 
+                <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_text"></div>
+                <h5><i class="bi bi-fonts"></i> Texte</h5>
+                <input id="input-text-signature" type="text" class="form-control" placeholder="Ma signature" style="font-family: 'Caveat', cursive; font-size: 24px;" />
                 <hr />
+                <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_image"></div>
+                <h5><i class="bi bi-image"></i> Image</h5> 
                 <form id="form-image-upload" action="/image2svg" method="POST" class="row g-3" enctype="multipart/form-data">
-                    <h5><i class="bi bi-image"></i> Importer une image</h5> 
                     <input id="input-image-upload" class="form-control" name="image" type="file">
                 </form>
                 <hr />
-                <p><small class="text-muted">Double-cliquez sur le PDF pour ajouter la signature</small></p>
+                <p><small class="text-muted"><i class="bi bi-hand-index"></i><i class="bi bi-hand-index"></i> Double-cliquer sur le PDF pour <i class="bi bi-plus-circle-fill"></i> ajouter la signature</small></p>
                 <form id="form_pdf" action="/<?php echo $key ?>/save" method="post">
                     <div class="position-fixed bottom-0 mb-2">
                         <button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>