From 04c14b37ecd35539e9fa1988f1258700e846a7b9 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Wed, 25 Aug 2021 09:53:49 +0200
Subject: [PATCH] =?UTF-8?q?R=C3=A9pare=20la=20fermeture=20du=20datepicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/static/vendor/datetimepicker/picker.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/shared/static/vendor/datetimepicker/picker.js b/shared/static/vendor/datetimepicker/picker.js
index 34f96b5..be17471 100644
--- a/shared/static/vendor/datetimepicker/picker.js
+++ b/shared/static/vendor/datetimepicker/picker.js
@@ -43,10 +43,11 @@ class DateTimePicker {
       throw TypeError('Selector required to construct a DateTimePicker');
     }
 
-    this.target = document.querySelector(selector);
+    this.target = _$(selector, document, false);
     if (!this.target) {
       throw Error(`The selector '{selector}' doesn't give any results`);
     }
+
     this.target.addEventListener('click', () => {
       document.documentElement.classList.add('is-clipped');
       this.modal.classList.add('is-active');
@@ -67,9 +68,10 @@ class DateTimePicker {
 
     // Création du modal
     this.modal = document.createElement('div');
+    this.modal.id = `modal-${this.target.id}`;
     this.modal.classList.add('modal');
-    this.modal.innerHTML = `<div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><div class="field is-grouped has-addons is-flex-grow-1"><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-left"></i></span></a></div><div class="control is-expanded"><a class="button is-fullwidth"></a></div><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-right"></i></span></a></div></div></header><section class="modal-card-body"><div class="columns is-centered is-mobile"><div class="column is-narrow"></div></div></section><footer class="modal-card-foot is-block"><div class="field is-horizontal is-flex-grow-1"><div class="field-label is-normal"><label class="label">${_horaire[this.config.lang]}</label></div><div class="field-body"><div class="field has-addons"><div class="control"><div class="select is-left"><select><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>h</b></button></div></div><div class="field has-addons"><div class="control"><div class="select"><select><option>00</option><option>05</option><option>10</option><option>15</option><option>20</option><option>25</option><option>30</option><option>35</option><option>40</option><option>45</option><option>50</option><option>55</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>min</b></button></div></div></div></div><br><button class="button is-primary is-fullwidth button-close">${_valider[this.config.lang]}</button></footer></div><button class="modal-close is-large" aria-label="close"></button>`;
-    let _controls = this.modal.querySelectorAll('header a.button');
+    this.modal.innerHTML = `<div class="modal-background" data-closes="${this.modal.id}"></div><div class="modal-card"><header class="modal-card-head"><div class="field is-grouped has-addons is-flex-grow-1"><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-left"></i></span></a></div><div class="control is-expanded"><a class="button is-fullwidth"></a></div><div class="control"><a class="button"><span class="icon"><i class="fas fa-chevron-right"></i></span></a></div></div></header><section class="modal-card-body"><div class="columns is-centered is-mobile"><div class="column is-narrow"></div></div></section><footer class="modal-card-foot is-block"><div class="field is-horizontal is-flex-grow-1"><div class="field-label is-normal"><label class="label">${_horaire[this.config.lang]}</label></div><div class="field-body"><div class="field has-addons"><div class="control"><div class="select is-left"><select><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>h</b></button></div></div><div class="field has-addons"><div class="control"><div class="select"><select><option>00</option><option>05</option><option>10</option><option>15</option><option>20</option><option>25</option><option>30</option><option>35</option><option>40</option><option>45</option><option>50</option><option>55</option></select></div></div><div class="control"><button class="button is-static has-text-primary"><b>min</b></button></div></div></div></div><br><button class="button is-primary is-fullwidth button-close">${_valider[this.config.lang]}</button></footer></div><button class="modal-close is-large" data-closes="${this.modal.id}" aria-label="close"></button>`;
+    let _controls = _$('header a.button', this.modal);
     this._leftArrow = _controls[0];
     this._menu = _controls[1];
     this._rightArrow = _controls[2];
@@ -113,7 +115,7 @@ class DateTimePicker {
       }
     });
 
-    let _selects = this.modal.querySelectorAll('footer select');
+    let _selects = _$('footer select', this.modal);
     this._hour = _selects[0];
     this._minutes = _selects[1];
 
@@ -154,7 +156,7 @@ class DateTimePicker {
 
     this._menu.innerHTML = `<b>${months[_beginning.getMonth()]} ${_beginning.getFullYear()}</b>`;
 
-    const _body = this.modal.querySelector('.modal-card section .column');
+    const _body = _$('.modal-card section .column', this.modal, false);
     _body.innerHTML = `<table class="table has-text-centered is-narrow"><thead><tr><th>${days[0]}</th><th>${days[1]}</th><th>${days[2]}</th><th>${days[3]}</th><th>${days[4]}</th><th>${days[5]}</th><th>${days[6]}</th></tr></thead><tbody></tbody></table>`;
 
     // Création du tableau