DGNum/kadenios
17
0
Fork 0
Code Issues 12 Pull requests Projects Wiki Activity

Répare la fermeture du datepicker

Browse source
This commit is contained in:
Tom Hubrecht 2021-08-25 09:53:49 +02:00
parent cd95f2c1e4
commit 04c14b37ec
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
shared/static/vendor/datetimepicker/picker.js vendored
View file

@ -43,10 +43,11 @@ class DateTimePicker {
throw TypeError('Selector required to construct a DateTimePicker'); throw TypeError('Selector required to construct a DateTimePicker');
} }
this.target = document.querySelector(selector); this.target = _$(selector, document, false);
if (!this.target) { if (!this.target) {
throw Error(`The selector '{selector}' doesn't give any results`); throw Error(`The selector '{selector}' doesn't give any results`);
} }
this.target.addEventListener('click', () => { this.target.addEventListener('click', () => {
document.documentElement.classList.add('is-clipped'); document.documentElement.classList.add('is-clipped');
this.modal.classList.add('is-active'); this.modal.classList.add('is-active');
@ -67,9 +68,10 @@ class DateTimePicker {
// Création du modal // Création du modal
this.modal = document.createElement('div'); this.modal = document.createElement('div');
this.modal.id = `modal-${this.target.id}`;
this.modal.classList.add('modal'); 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>`; 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 = this.modal.querySelectorAll('header a.button'); let _controls = _$('header a.button', this.modal);
this._leftArrow = _controls[0]; this._leftArrow = _controls[0];
this._menu = _controls[1]; this._menu = _controls[1];
this._rightArrow = _controls[2]; 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._hour = _selects[0];
this._minutes = _selects[1]; this._minutes = _selects[1];
@ -154,7 +156,7 @@ class DateTimePicker {
this._menu.innerHTML = `<b>${months[_beginning.getMonth()]} ${_beginning.getFullYear()}</b>`; 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>`; _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 // Création du tableau