Help message for signing a pdf with several people for the first time…

…, because the interface could suggest that creating the signature is enough.
24eme · Jul 17, 2023 · f4bab4a · f4bab4a
1 parent 26aac0a
commit f4bab4a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/public/js/signature.js b/public/js/signature.js
@@ -495,6 +495,9 @@ var addObjectInCanvas = function(canvas, item) {
 };
 
 var createAndAddSvgInCanvas = function(canvas, item, x, y, height = null) {
+    if(document.querySelector('#alert-signature-help')) {
+        document.querySelector('#alert-signature-help').classList.add('d-none');
+    }
     if(document.getElementById('save')) {
         document.getElementById('save').removeAttribute('disabled');
     }
@@ -709,6 +712,10 @@ var createEventsListener = function() {
         }
 
         document.querySelector('#'+svg_list_id+' label:last-child').click();
+
+        if(document.querySelector('#save').disabled && document.querySelector('#alert-signature-help') && !is_mobile()) {
+            document.querySelector('#alert-signature-help').classList.remove('d-none');
+        }
     });
 
 
@@ -1057,6 +1064,10 @@ var pageSignature = async function(url) {
         svgCollections = JSON.parse(localStorage.getItem('svgCollections'));
     }
 
+    if(svgCollections.length > 0 && document.querySelector('#alert-signature-help')) {
+        document.querySelector('#alert-signature-help').remove();
+    }
+
     opentype.load('/vendor/fonts/Caveat-Regular.ttf', function(err, font) {
         fontCaveat = font;
     });

diff --git a/templates/signature.html.php b/templates/signature.html.php
@@ -49,6 +49,16 @@
         </footer>
     </div>
     <div id="page-signature" style="padding-right: 350px;" class="d-none">
+        <?php if(isset($hash)): ?>
+        <div id="alert-signature-help" class="position-relative d-none">
+            <div class="alert alert-primary alert-dismissible position-absolute top-0 start-50 translate-middle-x text-center mt-4 pb-2 w-50 opacity-100" style="z-index: 100;" role="alert">
+                <h4 class="alert-heading">Comment signer ?</h4>
+                <strong>En cliquant directement sur la page du document</strong> pour insérer l'élément séléctionné dans la colonne de droite <small>(signature, paraphe, texte, tampon, etc ...)</small>
+                <div class="mt-1 fs-3"><i class="bi bi-box-arrow-down"></i></div>
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        </div>
+        <?php endif; ?>
         <div style="height: 65px;" class="d-md-none"></div>
         <div id="container-pages" class="col-12 pt-1 pb-1 text-center vh-100">
         </div>