@osimatic/helpers-js 1.5.3 → 1.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/details_sub_array.js +45 -41
  2. package/form_helper.js +283 -232
  3. package/google_charts.js +154 -144
  4. package/google_maps.js +1 -1
  5. package/import_from_csv.js +166 -157
  6. package/multi_files_input.js +42 -34
  7. package/multiple_action_in_table.js +116 -105
  8. package/package.json +1 -1
  9. package/paging.js +103 -84
  10. package/select_all.js +65 -70
  11. package/sortable_list.js +12 -13
  12. package/tests/details_sub_array.test.js +211 -239
  13. package/tests/form_helper.test.js +553 -673
  14. package/tests/google_charts.test.js +338 -339
  15. package/tests/google_maps.test.js +3 -15
  16. package/tests/import_from_csv.test.js +391 -652
  17. package/tests/multi_files_input.test.js +292 -722
  18. package/tests/multiple_action_in_table.test.js +458 -417
  19. package/tests/paging.test.js +344 -475
  20. package/tests/select_all.test.js +232 -318
  21. package/tests/sortable_list.test.js +176 -500
  22. package/tests/user.test.js +163 -54
  23. package/user.js +35 -38
package/select_all.js CHANGED
@@ -3,119 +3,114 @@ class SelectAll {
3
3
  // Dans un form-group
4
4
 
5
5
  static initLinkInFormGroup(link) {
6
- link.off('click').click(function() {
7
- let formGroup = $(this).closest('.form-group');
8
- let allCheckbox = formGroup.find('input[type="checkbox"]:not(.check_all)');
9
- let allCheckboxWithCheckAll = formGroup.find('input[type="checkbox"]');
10
- let allCheckboxChecked = formGroup.find('input[type="checkbox"]:not(.check_all):checked');
11
- if (allCheckbox.length === allCheckboxChecked.length) {
12
- allCheckboxWithCheckAll.prop('checked', false);
13
- }
14
- else {
15
- allCheckboxWithCheckAll.prop('checked', true);
16
- }
6
+ const linkClone = link.cloneNode(true);
7
+ link.parentElement.replaceChild(linkClone, link);
8
+ linkClone.addEventListener('click', function(e) {
9
+ e.preventDefault();
10
+ const formGroup = this.closest('.form-group');
11
+ const allCheckbox = formGroup.querySelectorAll('input[type="checkbox"]:not(.check_all)');
12
+ const allCheckboxChecked = formGroup.querySelectorAll('input[type="checkbox"]:not(.check_all):checked');
13
+ const allCheckboxWithCheckAll = formGroup.querySelectorAll('input[type="checkbox"]');
14
+ const newState = allCheckbox.length !== allCheckboxChecked.length;
15
+ allCheckboxWithCheckAll.forEach(cb => { cb.checked = newState; });
17
16
  SelectAll.updateFormGroup(formGroup);
18
- return false;
19
17
  });
20
18
 
21
- link.closest('.form-group').find('input[type="checkbox"]').change(function() {
22
- SelectAll.updateFormGroup($(this).closest('.form-group'));
19
+ const formGroup = linkClone.closest('.form-group');
20
+ formGroup.querySelectorAll('input[type="checkbox"]').forEach(cb => {
21
+ cb.addEventListener('change', () => {
22
+ SelectAll.updateFormGroup(cb.closest('.form-group'));
23
+ });
23
24
  });
24
- SelectAll.updateFormGroup(link.closest('.form-group'));
25
+ SelectAll.updateFormGroup(formGroup);
25
26
  }
26
27
 
27
28
  static updateFormGroup(formGroup) {
28
- let allCheckbox = formGroup.find('input[type="checkbox"]:not(.check_all)');
29
- let allCheckboxChecked = formGroup.find('input[type="checkbox"]:not(.check_all):checked');
30
- let lienSelectAll = formGroup.find('a.check_all');
31
- // console.log(formGroup);
32
- // console.log('SelectAll.updateFormGroup', allCheckbox.length, allCheckboxChecked.length);
29
+ const allCheckbox = formGroup.querySelectorAll('input[type="checkbox"]:not(.check_all)');
30
+ const allCheckboxChecked = formGroup.querySelectorAll('input[type="checkbox"]:not(.check_all):checked');
31
+ const lienSelectAll = formGroup.querySelector('a.check_all');
32
+ if (!lienSelectAll) {
33
+ return;
34
+ }
33
35
  if (allCheckboxChecked.length > 0 && allCheckbox.length === allCheckboxChecked.length) {
34
- lienSelectAll.text('Tout désélectionner');
36
+ lienSelectAll.textContent = 'Tout désélectionner';
35
37
  }
36
38
  else {
37
- lienSelectAll.text('Tout sélectionner');
39
+ lienSelectAll.textContent = 'Tout sélectionner';
38
40
  }
39
41
  }
40
42
 
41
43
  // Dans tableau
42
44
 
43
45
  static initInTable(table) {
44
- let inputCheckAll = table.find('tr input.check_all');
45
- if (inputCheckAll.length === 0) {
46
+ const inputCheckAll = table.querySelector('tr input.check_all');
47
+ if (!inputCheckAll) {
46
48
  return;
47
49
  }
48
- inputCheckAll.off('click').click(function() {
49
- let allCheckbox = table.find('tbody input[type="checkbox"]');
50
- let allCheckboxChecked = table.find('tbody input[type="checkbox"]:checked');
51
- if (allCheckbox.length === allCheckboxChecked.length) {
52
- allCheckbox.prop('checked', false);
53
- }
54
- else {
55
- allCheckbox.prop('checked', true);
56
- }
50
+ const checkAllClone = inputCheckAll.cloneNode(true);
51
+ inputCheckAll.parentElement.replaceChild(checkAllClone, inputCheckAll);
52
+ checkAllClone.addEventListener('click', function() {
53
+ const allCheckbox = table.querySelectorAll('tbody input[type="checkbox"]');
54
+ const allCheckboxChecked = table.querySelectorAll('tbody input[type="checkbox"]:checked');
55
+ const newState = allCheckbox.length !== allCheckboxChecked.length;
56
+ allCheckbox.forEach(cb => { cb.checked = newState; });
57
57
  SelectAll.updateTable(table);
58
58
  });
59
59
 
60
- table.find('tbody input[type="checkbox"]').off('change').change(function() {
61
- SelectAll.updateTable(table);
60
+ table.querySelectorAll('tbody input[type="checkbox"]').forEach(cb => {
61
+ cb.addEventListener('change', () => {
62
+ SelectAll.updateTable(table);
63
+ });
62
64
  });
63
65
  SelectAll.updateTable(table);
64
66
  }
65
67
 
66
68
  static updateTable(table) {
67
- let allCheckbox = table.find('tbody input[type="checkbox"]');
68
- let allCheckboxChecked = table.find('tbody input[type="checkbox"]:checked');
69
- let checkboxSelectAll = table.find('thead input.check_all');
70
- if (allCheckboxChecked.length > 0 && allCheckbox.length === allCheckboxChecked.length) {
71
- checkboxSelectAll.prop('checked', true);
72
- }
73
- else {
74
- checkboxSelectAll.prop('checked', false);
69
+ const allCheckbox = table.querySelectorAll('tbody input[type="checkbox"]');
70
+ const allCheckboxChecked = table.querySelectorAll('tbody input[type="checkbox"]:checked');
71
+ const checkboxSelectAll = table.querySelector('thead input.check_all');
72
+ if (!checkboxSelectAll) {
73
+ return;
75
74
  }
75
+ checkboxSelectAll.checked = allCheckboxChecked.length > 0 && allCheckbox.length === allCheckboxChecked.length;
76
76
  }
77
77
 
78
78
  // Dans un div
79
79
 
80
80
  static initDiv(contentDiv) {
81
- contentDiv.find('input.check_all').each(function(idx, inputCheckAll) {
82
- let div = $(inputCheckAll).closest('div.checkbox_with_check_all');
81
+ contentDiv.querySelectorAll('input.check_all').forEach(inputCheckAll => {
82
+ const div = inputCheckAll.closest('div.checkbox_with_check_all');
83
83
 
84
- $(inputCheckAll).off('click').click(function() {
85
- let div = $(this).closest('div.checkbox_with_check_all');
86
- let allCheckbox = div.find('input[type="checkbox"]:not(.check_all)');
87
- let allCheckboxChecked = div.find('input[type="checkbox"]:not(.check_all):checked');
88
- if (allCheckbox.length === allCheckboxChecked.length) {
89
- allCheckbox.prop('checked', false);
90
- }
91
- else {
92
- allCheckbox.prop('checked', true);
93
- }
94
- SelectAll.updateDiv(div);
95
- //SelectAll.updateFormGroup(rootDiv.closest('.form-group'));
84
+ const clone = inputCheckAll.cloneNode(true);
85
+ inputCheckAll.parentElement.replaceChild(clone, inputCheckAll);
86
+ clone.addEventListener('click', function() {
87
+ const d = this.closest('div.checkbox_with_check_all');
88
+ const allCheckbox = d.querySelectorAll('input[type="checkbox"]:not(.check_all)');
89
+ const allCheckboxChecked = d.querySelectorAll('input[type="checkbox"]:not(.check_all):checked');
90
+ const newState = allCheckbox.length !== allCheckboxChecked.length;
91
+ allCheckbox.forEach(cb => { cb.checked = newState; });
92
+ SelectAll.updateDiv(d);
96
93
  });
97
94
 
98
- div.find('div.checkbox, div.form-check').find('input[type="checkbox"]').change(function() {
99
- SelectAll.updateDiv($(this).closest('div.checkbox_with_check_all'));
95
+ div.querySelectorAll('div.checkbox input[type="checkbox"], div.form-check input[type="checkbox"]').forEach(cb => {
96
+ cb.addEventListener('change', () => {
97
+ SelectAll.updateDiv(cb.closest('div.checkbox_with_check_all'));
98
+ });
100
99
  });
101
100
  SelectAll.updateDiv(div);
102
101
  });
103
102
  }
104
103
 
105
104
  static updateDiv(div) {
106
- // console.log('SelectAll.updateDiv');
107
- // console.log(checkbox);
108
105
  // 22/11/2021 : rajout :not(.check_all) sinon si toutes les cases sont coché, la case select all n'est pas coché à l'initialisation
109
- let allCheckbox = div.find('div.checkbox, div.form-check').find('input[type="checkbox"]:not(.check_all)');
110
- let allCheckboxChecked = div.find('div.checkbox, div.form-check').find('input[type="checkbox"]:not(.check_all):checked');
111
- let checkboxSelectAll = div.find('input.check_all');
112
- if (allCheckboxChecked.length > 0 && allCheckbox.length === allCheckboxChecked.length) {
113
- checkboxSelectAll.prop('checked', true);
114
- }
115
- else {
116
- checkboxSelectAll.prop('checked', false);
106
+ const allCheckbox = div.querySelectorAll('div.checkbox input[type="checkbox"]:not(.check_all), div.form-check input[type="checkbox"]:not(.check_all)');
107
+ const allCheckboxChecked = div.querySelectorAll('div.checkbox input[type="checkbox"]:not(.check_all):checked, div.form-check input[type="checkbox"]:not(.check_all):checked');
108
+ const checkboxSelectAll = div.querySelector('input.check_all');
109
+ if (!checkboxSelectAll) {
110
+ return;
117
111
  }
112
+ checkboxSelectAll.checked = allCheckboxChecked.length > 0 && allCheckbox.length === allCheckboxChecked.length;
118
113
  }
119
114
  }
120
115
 
121
- module.exports = { SelectAll };
116
+ module.exports = { SelectAll };
package/sortable_list.js CHANGED
@@ -1,37 +1,36 @@
1
1
  class SortableList {
2
2
  static init(sortableList, clientYOffset=0) {
3
- const items = sortableList.find('[draggable="true"]');
4
- items.get().forEach(item => {
5
- $(item).on('dragstart', () => {
3
+ sortableList.querySelectorAll('[draggable="true"]').forEach(item => {
4
+ item.addEventListener('dragstart', () => {
6
5
  // Adding dragging class to an item after a delay
7
- setTimeout(() => $(item).addClass('dragging'), 0);
8
-
6
+ setTimeout(() => item.classList.add('dragging'), 0);
9
7
  });
10
8
 
11
9
  // Removing dragging class from the item on the dragend event
12
- $(item).on('dragend', () => $(item).removeClass('dragging'));
10
+ item.addEventListener('dragend', () => item.classList.remove('dragging'));
13
11
  });
14
12
 
15
13
  const initSortableList = (e) => {
16
14
  e.preventDefault();
17
15
 
18
- const draggingItem = sortableList.find('.dragging');
16
+ const draggingItem = sortableList.querySelector('.dragging');
19
17
 
20
18
  // Getting all items except currently dragging and making an array of them
21
- const siblings = [...sortableList.find('[draggable="true"]:not(.dragging)').get()];
19
+ const siblings = [...sortableList.querySelectorAll('[draggable="true"]:not(.dragging)')];
22
20
 
23
21
  // Finding the sibling after which the dragging item should be placed
24
22
  let nextSibling = siblings.find(sibling => {
25
- //console.log(e.clientY, sibling.offsetTop + sibling.offsetHeight / 2, sibling.offsetTop, sibling.offsetHeight, sibling);
26
- return e.clientY+clientYOffset <= sibling.offsetTop + sibling.offsetHeight / 2;
23
+ return e.clientY + clientYOffset <= sibling.offsetTop + sibling.offsetHeight / 2;
27
24
  });
28
25
 
29
26
  // Inserting the dragging item before the found sibling
30
- sortableList.get()[0].insertBefore(draggingItem.get()[0], nextSibling);
27
+ if (draggingItem) {
28
+ sortableList.insertBefore(draggingItem, nextSibling);
29
+ }
31
30
  };
32
31
 
33
- sortableList.on('dragover', initSortableList);
34
- sortableList.on('dragenter', e => e.preventDefault());
32
+ sortableList.addEventListener('dragover', initSortableList);
33
+ sortableList.addEventListener('dragenter', e => e.preventDefault());
35
34
  }
36
35
  }
37
36