Fonction pour gérer l'état de "lock" pour ajouter plusieurs fois le

même svg à la suite
24eme · Oct 12, 2021 · b71c1ca · b71c1ca
1 parent a37f68c
commit b71c1ca
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -88,10 +88,9 @@ loadingTask.promise.then(function(pdf) {
                 document.getElementById('svg_selected_container').classList.add('d-none');
                 document.getElementById('svg_selected').src = null;
             }
-            addLock = false;
-            document.querySelectorAll('.btn-svg').forEach(function(item) {
-                item.style.borderWidth = "1px";
-            });
+
+            stateAddLock(false);
+
             canvasEditions.forEach(function(canvasEdition, index) {
                 var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
                 if(input_selected) {
@@ -130,15 +129,12 @@ loadingTask.promise.then(function(pdf) {
         });
         svgButton.addEventListener('click', function(event) {
             if(addLock) {
-                svgButton.style.borderWidth = "1px";
-                addLock = false;
-
+                stateAddLock(false);
                 return;
             }
         });
         svgButton.addEventListener('dblclick', function(event) {
-            svgButton.style.borderWidth = "2px";
-            addLock = true;
+            stateAddLock(true);
         });
         var svgImg = document.createElement('img');
         svgImg.src = svg.svg;
@@ -154,6 +150,36 @@ loadingTask.promise.then(function(pdf) {
         return svgContainer;
     }
 
+    document.getElementById('add-lock-checkbox').addEventListener('change', function() {
+        stateAddLock(this.checked);
+    });
+
+    var stateAddLock = function(state) {
+        var checkbox = document.getElementById('add-lock-checkbox');
+        var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
+
+        addLock = state;
+
+        if(!input_selected) {
+            addLock = false;
+            checkbox.disabled = true;
+        } else {
+            checkbox.disabled = false;
+        }
+
+        if(addLock) {
+            var svgButton = document.querySelector('.btn-svg[for="'+input_selected.id+'"]');
+            svgButton.style.borderWidth = "2px";
+            checkbox.checked = true;
+            return;
+        }
+
+        document.querySelectorAll('.btn-svg').forEach(function(item) {
+            item.style.borderWidth = "1px";
+        });
+        checkbox.checked = false;
+    }
+
     var displaysSVG = function() {
         document.getElementById('svg_list').innerHTML = "";
         document.getElementById('svg_list_signature').innerHTML = "";
@@ -205,15 +231,13 @@ loadingTask.promise.then(function(pdf) {
         });
         item.addEventListener('click', function(event) {
             if(addLock) {
-                item.style.borderWidth = "1px";
-                addLock = false;
+                stateAddLock(false);
 
                 return;
             }
         });
         item.addEventListener('dblclick', function(event) {
-            item.style.borderWidth = "2px";
-            addLock = true;
+            stateAddLock(true);
         });
     });
 
@@ -228,10 +252,7 @@ loadingTask.promise.then(function(pdf) {
                 document.getElementById('svg_selected_container').classList.add('d-none');
                 document.getElementById('svg_selected').src = null;
             }
-            addLock = false;
-            document.querySelectorAll('.btn-svg').forEach(function(item) {
-                item.style.borderWidth = "1px";
-            });
+            stateAddLock(false);
             canvasEditions.forEach(function(canvasEdition, index) {
                 var input_selected = document.querySelector('input[name="svg_2_add"]:checked');
                 if(input_selected) {
@@ -247,6 +268,7 @@ loadingTask.promise.then(function(pdf) {
     });
 
     displaysSVG();
+    stateAddLock();
 
     document.getElementById('btn_modal_ajouter').addEventListener('click', function() {
         var svgItem = {};

diff --git a/templates/pdf.html.php b/templates/pdf.html.php
@@ -29,11 +29,15 @@
         </div>
         <div style="height: 55px;" class="d-md-none"></div>
         <div class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-keyboard="false" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="width: 350px;">
-            <div class="offcanvas-header">
+            <div class="offcanvas-header mb-0 pb-0">
                 <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 class="form-check form-switch mb-2 small">
+                  <input class="form-check-input" type="checkbox" id="add-lock-checkbox" disabled="disabled">
+                  <label class="form-check-label" for="add-lock-checkbox"> Garder la séléction active</label>
+                </div>
               <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">