JS update

elections/templates/elections/vote/rank.html

@@ -1,19 +1,76 @@
 {% extends "elections/vote.html" %}
-{% load i18n %}
+{% load static i18n %}
 
 
 {% block extra_head %}
 <script>
   const nb_options = {{ nb_options }};
-  var ranks_used = 1;
+  var ranks_used = nb_options;
   var rank_zones = new Array(nb_options + 1);
   var ranked = 0;
+  var $unranked;
 
   function getLabelText($input) {
     var label = $input.closest('.field').querySelector('.label label').innerHTML;
     return label.substring(0, label.length - 1).trim();
   }
 
+  function collapseRanks() {
+    // On décale pour éviter les rangs vides
+    for (let i = 1; i < nb_options; i++) {
+      // On a au moins le tag avec le numéro du rang
+      if (rank_zones[i].childElementCount == 1) {
+        // On cherche le prochain rang avec des options
+        var next_rank = i + 1;
+        for (; next_rank < nb_options && rank_zones[next_rank].childElementCount == 1; next_rank++) {}
+
+        // On déplace les options
+        while (rank_zones[next_rank].childElementCount > 1) {
+          let $tile = rank_zones[next_rank].lastChild;
+          let $input = document.getElementById($tile.dataset.input);
+          $input.value = i.toString();
+          rank_zones[i].append($tile);
+        }
+      }
+    }
+
+    // On recalcule ranks_used
+    for (ranks_used = 1; ranks_used < nb_options && rank_zones[ranks_used + 1].childElementCount > 1; ranks_used++) {}
+
+    // On affiche le bouton + si besoin
+    if (ranks_used < nb_options) {
+      let $add_rank = document.getElementById('rank-add');
+      $add_rank.parentElement.classList.remove('is-hidden')
+    }
+
+    // On cache les zones non utilisées
+    for (let i = 1; i <= nb_options; i++) {
+      if (i > ranks_used) {
+        rank_zones[i].parentElement.classList.add('is-hidden');
+      } else {
+        rank_zones[i].parentElement.classList.remove('is-hidden');
+      }
+    }
+  }
+
+  function moveOptions() {
+    (document.querySelectorAll('.control .input') || []).forEach($input => {
+      // On rajoute la tuile dans le classement ou dans les non classées
+      const rank = parseInt($input.value);
+      var $tile = document.getElementById(`tile-${$input.id}`);
+
+      if (!(typeof rank === 'undefined') && rank > 0 && rank <= nb_options) {
+        rank_zones[rank].appendChild($tile);
+        rank_zones[rank].parentElement.classList.remove('is-hidden');
+        ranks_used = Math.max(rank, ranks_used);
+      } else {
+        $unranked.appendChild($tile);
+        // On enlève les valeurs non règlementaires
+        $input.value = '';
+      }
+    });
+  }
+
   // Fonction auxilliaires gérant le drag & drop
   function dragstart_handler(event) {
     event.dataTransfer.setData('text/plain', event.target.id);
@@ -52,33 +109,10 @@
     var $input = document.getElementById($tile.dataset.input);
     $input.value = rank;
 
-    // On modifie ranked pour savoir combien d'option on a classé
+    // On modifie ranked pour savoir combien d'options on a classé
     ranked += ($target.id == 'unranked' ? -1 : 1);
 
-    // On décale pour éviter les rangs vides
-    for (let i = 1; i <= ranks_used && i < nb_options; i++) {
-      // On a au moins le tag avec le numéro du rang
-      if (rank_zones[i].childElementCount == 1) {
-        while (rank_zones[i + 1].childElementCount > 1) {
-          let $tile = rank_zones[i + 1].lastChild;
-          let $input = document.getElementById($tile.dataset.input);
-          $input.value = i.toString();
-          rank_zones[i].append($tile);
-        }
-      }
-    }
-
-    // On cache la dernière zone si elle est vide, mias on garde au moins la première
-    if (ranks_used > 1 && rank_zones[ranks_used].childElementCount == 1) {
-      // On affiche le bouton + si besoin
-      if (ranks_used == nb_options) {
-        let $add_rank = document.getElementById('rank-add');
-        $add_rank.parentElement.classList.remove('is-hidden')
-      }
-
-      rank_zones[ranks_used].parentElement.classList.add('is-hidden');
-      ranks_used -= 1;
-    }
+    collapseRanks();
   }
 
   document.addEventListener('DOMContentLoaded', () => {
@@ -139,13 +173,15 @@
 
       if ($hide.classList.contains('is-hidden')) {
         $method_button.innerHTML = "{% trans "Utiliser le formulaire classique" %}";
+        moveOptions();
+        collapseRanks();
       } else {
         $method_button.innerHTML = "{% trans "Utiliser le cliquer-déposer" %}";
       }
     });
 
     // Initialise les éléments pour le formulaire interactif
-    var $unranked = document.getElementById('unranked');
+    $unranked = document.getElementById('unranked');
 
     for (let i = 1; i <= nb_options; i++) {
       rank_zones[i] = document.getElementById(`rank-${i}`);
@@ -165,19 +201,17 @@
       $tile.setAttribute('draggable', true);
       $tile.addEventListener('dragstart', dragstart_handler);
 
-      // On rajoute la tuile dans le classement ou dans les non classées
-      const rank = parseInt($input.value);
-      if (!(typeof rank === 'undefined') && rank > 0 && rank <= nb_options) {
-        rank_zones[rank].appendChild($tile);
-      } else {
-        $unranked.appendChild($tile);
-        // On enlève les valeurs non règlementaires
-        $input.value = '';
-      }
+      // Par défaut on ajoute la tuile dans undefined
+      $unranked.appendChild($tile);
     });
+
+    moveOptions();
+    collapseRanks();
   });
 
 </script>
+
+<script src="{% static 'vendor/dragdroptouch/main.min.js' %}"></script>
 {% endblock %}