From d8b088577246a02bcf39c5e73cdbe8bbf3049524 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Fri, 20 Aug 2021 18:34:03 +0200
Subject: [PATCH] Update js

---
 .../templates/elections/election_admin.html   |  32 +++--
 .../templates/elections/election_voters.html  |  23 +---
 shared/templates/base.html                    | 117 ++++++++++--------
 3 files changed, 83 insertions(+), 89 deletions(-)

diff --git a/elections/templates/elections/election_admin.html b/elections/templates/elections/election_admin.html
index 5de14cf..403ae64 100644
--- a/elections/templates/elections/election_admin.html
+++ b/elections/templates/elections/election_admin.html
@@ -5,24 +5,20 @@
 {% block extra_head %}
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-    var $modalButtons = document.querySelectorAll('.modal-button') || [];
+    let mbs = _$('.modal-button');
 
-    $modalButtons.forEach($el => {
-      $el.addEventListener('click', () => {
-        var $target = document.getElementById($el.dataset.target);
-        var $target_form = $target.querySelector("form");
-        var modal_title = '';
-        $target_form.action = $el.dataset.post_url;
-        $target.querySelector('.modal-card-title').innerHTML = $el.dataset.title;
+    mbs.forEach(b => {
+      b.addEventListener('click', () => {
+        let f = _$('form', _id(b.dataset.target), false);
 
-        if ($el.classList.contains('question')) {
-          $target_form.querySelector('#id_text_fr').value = $el.dataset.q_fr || '';
-          $target_form.querySelector('#id_text_en').value = $el.dataset.q_en || '';
-          $target_form.querySelector('#id_type').value = $el.dataset.type || 'assentiment';
-        } else if ($el.classList.contains('option')) {
-          $target_form.querySelector('#id_text_fr').value = $el.dataset.o_fr || '';
-          $target_form.querySelector('#id_text_en').value = $el.dataset.o_en || '';
-          $target_form.querySelector('#id_abbreviation').value = $el.dataset.abbr || '';
+        if (b.dataset.type == 'question') {
+          _$('[name="text_fr"]', f, false).value = b.dataset.q_fr || '';
+          _$('[name="text_en"]', f, false).value = b.dataset.q_en || '';
+          _$('[name="type"]', f, false).value = b.dataset.q_type || 'assentiment';
+        } else if (b.dataset.type == 'option') {
+          _$('[name="text_fr"]', f, false).value = b.dataset.o_fr || '';
+          _$('[name="text_en"]', f, false).value = b.dataset.o_en || '';
+          _$('[name="abbreviation"]', f, false).value = b.dataset.abbr || '';
         }
       });
     });
@@ -244,7 +240,7 @@
             </span>
           </a>
 
-          <a class="tag is-outlined is-light is-info ml-1 modal-button question" data-post_url="{% url 'election.mod-question' q.pk %}" data-target="modal-question" data-type="{{ q.type }}" data-q_en="{{ q.text_en }}" data-q_fr="{{ q.text_fr }}" data-title="{% trans "Modifier la question" %}">
+          <a class="tag is-outlined is-light is-info ml-1 modal-button" data-post_url="{% url 'election.mod-question' q.pk %}" data-target="modal-question" data-q_type="{{ q.type }}" data-q_en="{{ q.text_en }}" data-q_fr="{{ q.text_fr }}" data-title="{% trans "Modifier la question" %}" data-type="question">
             <span class="icon-text">
               <span class="icon">
                 <i class="fas fa-edit"></i>
@@ -273,7 +269,7 @@
         </span>
       </a>
 
-      <a class="tag is-info is-light is-outlined has-tooltip-primary mb-0 modal-button option" data-tooltip="{% trans "Modifier" %}" data-post_url="{% url 'election.mod-option' o.pk %}" data-target="modal-option" data-o_en="{{ o.text_en }}" data-o_fr="{{ o.text_fr }}" data-abbr="{{ o.abbreviation }}" data-title="{% trans "Modifier l'option" %}">
+      <a class="tag is-info is-light is-outlined has-tooltip-primary mb-0 modal-button" data-tooltip="{% trans "Modifier" %}" data-post_url="{% url 'election.mod-option' o.pk %}" data-target="modal-option" data-o_en="{{ o.text_en }}" data-o_fr="{{ o.text_fr }}" data-abbr="{{ o.abbreviation }}" data-title="{% trans "Modifier l'option" %}" data-type="option">
         <span class="icon">
           <i class="fas fa-edit"></i>
         </span>
diff --git a/elections/templates/elections/election_voters.html b/elections/templates/elections/election_voters.html
index 4443a65..97056bf 100644
--- a/elections/templates/elections/election_voters.html
+++ b/elections/templates/elections/election_voters.html
@@ -2,27 +2,6 @@
 {% load i18n markdown %}
 
 
-{% block extra_head %}
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const $del_modal = document.getElementById('modal-delete');
-    const $del_title = $del_modal.querySelector('.modal-card-title');
-    const $del_form = $del_modal.querySelector('form');
-
-    $del_buttons = document.querySelectorAll('.modal-button.delete-vote')
-
-    $del_buttons.forEach($del => {
-      $del.addEventListener('click', () => {
-        $del_form.action = $del.dataset.post_url;
-        $del_title.innerHTML = $del.dataset.tooltip;
-      });
-    });
-  });
-
-</script>
-
-{% endblock %}
-
 {% block content %}
 
 <div class="level">
@@ -111,7 +90,7 @@
           {% if can_delete %}
           <td class="has-text-centered">
             {% blocktrans with v_name=v.full_name asvar v_delete %}Supprimer le vote de {{ v_name }}{% endblocktrans %}
-            <a class="tag is-danger has-tooltip-primary modal-button delete-vote" data-target="modal-delete" data-tooltip="{{ v_delete }}" data-post_url="{% url 'election.delete-vote' election.pk v.pk forloop.counter %}">
+            <a class="tag is-danger has-tooltip-primary modal-button delete-vote" data-target="modal-delete" data-tooltip="{{ v_delete }}" data-post_url="{% url 'election.delete-vote' election.pk v.pk forloop.counter %}" data-title="{{ v_delete }}">
               <span class="icon">
                 <i class="fas fa-user-minus"></i>
               </span>
diff --git a/shared/templates/base.html b/shared/templates/base.html
index 4cab2b1..c38e168 100644
--- a/shared/templates/base.html
+++ b/shared/templates/base.html
@@ -17,108 +17,124 @@
   <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
   <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/solid.min.css' %}">
 
-  {% block extra_head %}{% endblock extra_head %}
-
   <script>
+    const _$ = (s, e = document, a = true) => {
+      let r = e.querySelectorAll(s) || [];
+      if (!a) {
+        return r.item(0);
+      }
+      return r;
+    };
+    const _id = s => document.getElementById(s);
+
     document.addEventListener('DOMContentLoaded', () => {
       // Delete notifications
-      (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
-        var $notification = $delete.parentNode;
+      _$('.notification .delete').forEach(d => {
+        let n = d.parentNode;
 
-        $delete.addEventListener('click', () => {
-          $notification.parentNode.removeChild($notification);
+        d.addEventListener('click', () => {
+          n.parentNode.removeChild(n);
         });
       });
 
       // Interact with dropdowns
-      var $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)') || [];
+      let ds = _$('.dropdown:not(.is-hoverable)');
 
-      $dropdowns.forEach(($dropdown) => {
-        $dropdown.addEventListener('click', (event) => {
-          event.stopPropagation();
-          $dropdown.classList.toggle('is-active');
+      ds.forEach(d => {
+        d.addEventListener('click', e => {
+          e.stopPropagation();
+          d.classList.toggle('is-active');
         });
       });
 
       document.addEventListener('click', () => {
-        $dropdowns.forEach(($dropdown) => {
-          $dropdown.classList.remove('is-active');
+        ds.forEach(d => {
+          d.classList.remove('is-active');
         });
       });
 
       // Interact with modals
-      var $modals = document.querySelectorAll('.modal') || [];
-      var $modalButtons = document.querySelectorAll('.modal-button') || [];
-      var $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close') || [];
+      let ms = _$('.modal');
+      let mbs = _$('.modal-button');
+      let mcs = _$('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close');
+
+      mbs.forEach(b => {
+        b.addEventListener('click', () => {
+          let m = _id(b.dataset.target);
+          if ('post_url' in b.dataset) {
+            _$('form', m, false).action = b.dataset.post_url;
+          };
+
+          if ('title' in b.dataset) {
+            _$('.modal-card-title', m, false).innerHTML = b.dataset.title;
+          };
 
-      $modalButtons.forEach(function($el) {
-        $el.addEventListener('click', function() {
-          var target = $el.dataset.target;
-          var $target = document.getElementById(target);
           document.documentElement.classList.add('is-clipped');
-          $target.classList.add('is-active');
+          m.classList.add('is-active');
         });
       });
 
-      $modalCloses.forEach(function($el) {
-        $el.addEventListener('click', (event) => {
+      mcs.forEach(d => {
+        d.addEventListener('click', () => {
           document.documentElement.classList.remove('is-clipped');
-          $modals.forEach(function($el) {
-            $el.classList.remove('is-active');
+          ms.forEach(m => {
+            m.classList.remove('is-active');
           });
         });
       });
 
-      document.addEventListener('keydown', (event) => {
-        var e = event || window.event;
+      document.addEventListener('keydown', ev => {
+        var e = ev || window.event;
         if (e.keyCode === 27) {
-          $dropdowns.forEach(($dropdown) => {
-            $dropdown.classList.remove('is-active');
+          ds.forEach(d => {
+            d.classList.remove('is-active');
           });
+
           document.documentElement.classList.remove('is-clipped');
-          $modals.forEach(function($el) {
-            $el.classList.remove('is-active');
+
+          ms.forEach(m => {
+            m.classList.remove('is-active');
           });
         }
       });
 
       // Language selection
-      var $langs = document.querySelectorAll('.dropdown-item.lang-selector') || [];
+      let ls = _$('.dropdown-item.lang-selector');
 
-      $langs.forEach($lang => {
-        $lang.addEventListener('click', () => {
-          document.getElementById('lang-input').value = $lang.dataset.lang;
-          document.getElementById('lang-form').submit();
+      ls.forEach(l => {
+        l.addEventListener('click', () => {
+          _id('lang-input').value = l.dataset.lang;
+          _id('lang-form').submit();
         });
       });
 
       // Disable button after form submission
-      var $forms = document.querySelectorAll('form');
-
-      $forms.forEach($form => {
-        const $submit = $form.querySelector('button[type=submit]');
-
-        $form.addEventListener('submit', () => {
-          $submit.classList.add('is-loading');
+      _$('form').forEach(f => {
+        f.addEventListener('submit', () => {
+          _$('button[type=submit]', f).forEach(b => {
+            b.classList.add('is-loading');
+            setTimeout(() => {
+              b.classList.remove('is-loading');
+            }, 1000);
+          });
         });
-
       });
 
       // Scroll to top button
-      $up_btn = document.getElementById('scroll-button');
+      let up = _id('scroll-button');
       if (document.documentElement.scrollTop >= 100) {
-        $up_btn.classList.remove('is-hidden');
+        up.classList.remove('is-hidden');
       }
 
       window.onscroll = () => {
         if (document.documentElement.scrollTop >= 100) {
-          $up_btn.classList.remove('is-hidden');
+          up.classList.remove('is-hidden');
         } else {
-          $up_btn.classList.add('is-hidden');
+          up.classList.add('is-hidden');
         }
       }
 
-      $up_btn.addEventListener('click', () => {
+      up.addEventListener('click', () => {
         window.scrollTo({
           top: 0,
           behavior: 'smooth',
@@ -128,6 +144,9 @@
     });
 
   </script>
+
+  {% block extra_head %}{% endblock extra_head %}
+
 </head>
 
 <body>