aw-front-helpers 2.3.10 → 2.4.1

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.
@@ -1,17 +1,17 @@
1
- import { TweenMax, gsap } from 'gsap/all';
2
- import ScrollToPlugin from 'gsap/ScrollToPlugin';
3
- gsap.registerPlugin( ScrollToPlugin );
4
-
5
- import create from 'dom-create-element';
6
-
7
- import getClosest from '../utils/dom/getClosest';
8
- import regex_email from '../utils/regex/email';
1
+ import {
2
+ gsap
3
+ } from 'gsap/all';
4
+ import ScrollToPlugin from 'gsap/ScrollToPlugin';
5
+ gsap.registerPlugin(ScrollToPlugin);
6
+ import create from 'dom-create-element';
7
+ import getClosest from '../utils/dom/getClosest';
8
+ import regex_email from '../utils/regex/email';
9
9
 
10
10
  const defaultOptions = {
11
11
  selectorGroup: '.form-group',
12
12
  classErrorElement: 'form-error',
13
13
  classIsError: 'is-error',
14
- animateToFirstError: true,
14
+ animateToFirstError: false,
15
15
  i18n: {
16
16
  required: Translator ? Translator.trans('form_errors.pattern') : 'Ce champs est obligatoire',
17
17
  same: Translator ? Translator.trans('form_errors.same') : 'Les champs ne correspondent pas.',
@@ -23,17 +23,39 @@ const defaultOptions = {
23
23
  }
24
24
  };
25
25
 
26
- class FormControl {
26
+ export default class FormControl {
27
27
  //________________________________________________________ constructor
28
28
  // -
29
- constructor(el, options = {}) {
30
- this._el = el;
29
+ /**
30
+ * Add controls on your formulaire
31
+ * @param {Element} form formulaire need add control
32
+ * @param {Object} options define options of controls
33
+ * @param {string} options.selectorGroup - The name of the employee.
34
+ * @param {string} options.classErrorElement - The employee's department.
35
+ * @param {string} options.classIsError - The employee's department.
36
+ * @param {string} options.animateToFirstError - The employee's department.
37
+ * @param {Object} options.i18n - The employee's department.
38
+ * @param {Object} options.i18n.required - The employee's department.
39
+ * @param {Object} options.i18n.same - The employee's department.
40
+ * @param {Object} options.i18n.email - The employee's department.
41
+ * @param {Object} options.i18n.empty - The employee's department.
42
+ * @param {Object} options.i18n.checkbox - The employee's department.
43
+ * @param {Object} options.i18n.radio - The employee's department.
44
+ * @param {Object} options.i18n.pattern - The employee's department.
45
+ **/
46
+ constructor(form, options = {}) {
47
+ /** @private */
48
+ this._form = form;
49
+ /** @private */
31
50
  this._dom = {};
32
- this._options = {...defaultOptions, ...options};
51
+ /** @private */
52
+ this._options = {
53
+ ...defaultOptions,
54
+ ...options
55
+ };
33
56
 
57
+ this._form.setAttribute('novalidate', 'novalidate');
34
58
  this._formCreateBound();
35
- this._el.setAttribute('novalidate', 'novalidate');
36
-
37
59
  this._formGrabDom();
38
60
  this._formAddEvents();
39
61
  }
@@ -45,44 +67,46 @@ class FormControl {
45
67
  };
46
68
  }
47
69
 
70
+ get form() {
71
+ return this._form;
72
+ }
73
+
48
74
  get options() {
49
75
  return this._options;
50
76
  }
51
77
 
78
+ /**
79
+ * @deprecated use isValid
80
+ */
52
81
  get isValidate() {
53
- return this._formValidate();
82
+ return this._isValid();
83
+ }
84
+
85
+ get isValid() {
86
+ return this._isValid();
54
87
  }
55
88
 
56
89
  //________________________________________________________ public
57
90
  // -
58
91
  destroy() {
59
- this._el.removeEventListener('submit', this._onFormSubmit);
60
- this._domForm.inputs.forEach( input => {
61
- input.removeEventListener('keyup', this._onFormKeyUp);
62
- if (input.getAttribute('type') === 'checkbox' ||
63
- input.getAttribute('type') === 'radio' ||
64
- input.tagName === 'SELECT') {
65
- input.removeEventListener('change', this._onFormKeyUp);
66
- }
67
- })
68
- }
69
-
70
- removeErrors() {
71
- const isErrors = [...this._el.querySelectorAll(`${this._options.classIsError}`)];
72
- const currentErrors = [...this._el.querySelectorAll(`.${this._options.classErrorElement}`)];
73
- currentErrors.forEach(error => {
74
- error.parentNode.removeChild(error);
92
+ this._form.removeEventListener('submit', this._onFormSubmit);
93
+ this._domForm.inputs.forEach(input => {
94
+ input.removeEventListener('keyup', this._onChange);
75
95
  });
76
- isErrors.forEach(error => {
77
- error.classList.remove(this._options.classIsError);
96
+ this._domForm.choices.forEach(input => {
97
+ input.removeEventListener('change', this._onChange);
78
98
  });
79
99
  }
80
100
 
101
+ removeErrors(el = null) {
102
+ this._removeError(el);
103
+ }
104
+
81
105
  setError(element, message = null) {
82
106
  const parent = getClosest(element, this._options.selectorGroup);
83
- if( parent) {
107
+ if (parent) {
84
108
  let error = parent.querySelector(`.${this._options.classErrorElement}`);
85
- if(!error) {
109
+ if (!error) {
86
110
  error = create({
87
111
  selector: 'ul',
88
112
  styles: this._options.classErrorElement
@@ -90,7 +114,12 @@ class FormControl {
90
114
  parent.appendChild(error);
91
115
  }
92
116
  parent.classList.add(this._options.classIsError);
93
- if(message) {
117
+
118
+ const previousErrors = [...error.querySelectorAll('li')];
119
+ for (let i = 0; i < previousErrors.length; i++) {
120
+ if (previousErrors[i].innerHTML === message) return;
121
+ }
122
+ if (message) {
94
123
  const errorElement = document.createElement('li');
95
124
  errorElement.innerHTML = message;
96
125
  error.appendChild(errorElement);
@@ -100,113 +129,185 @@ class FormControl {
100
129
 
101
130
  //________________________________________________________ events
102
131
  // -
103
- _onFormSubmit(pEvt) {
104
- if (!this._formValidate()) {
132
+ /** @protected */
133
+ onFormSubmit(pEvt) {
134
+ if (!this._isValid()) {
105
135
  pEvt.preventDefault();
106
136
  }
107
137
  }
108
138
 
109
- _onFormKeyUp(pEvt) {
110
- var el = pEvt.target,
111
- parent = getClosest(el, this._options.selectorGroup);
112
- parent.classList.remove(this._options.classIsError);
113
- const currentErrors = [...parent.querySelectorAll(`.${this._options.classErrorElement}`)];
114
- currentErrors.forEach(error => {
115
- error.classList.remove(this._options.classIsError);
116
- error.parentNode.removeChild(error);
117
- });
139
+ /**
140
+ * @deprecated use onFormSubmit
141
+ */
142
+ _onFormSubmit(pEvt) {
143
+ this.onFormSubmit(pEvt);
144
+ }
145
+
146
+ /** @private */
147
+ _onChange(pEvt) {
148
+ const el = pEvt.target;
149
+ this._removeError(el);
118
150
  }
119
151
 
120
152
  //________________________________________________________ private
121
153
  // -
154
+ /** @private */
122
155
  _formCreateBound() {
123
- ['_onFormKeyUp', '_onFormSubmit']
124
- .forEach((fn) => this[fn] = this[fn].bind(this));
156
+ ['_onChange', '_onFormSubmit', 'onFormSubmit']
157
+ .forEach((fn) => this[fn] = this[fn].bind(this));
125
158
  }
126
159
 
127
- _formGrabDom() {
128
- this._domForm = {};
129
- let texts = [...this._el.querySelectorAll('input[type=text]')],
130
- hiddens = [...this._el.querySelectorAll('input[type=hidden]')],
131
- emails = [...this._el.querySelectorAll('input[type=email]')],
132
- tels = [...this._el.querySelectorAll('input[type=tel]')],
133
- passwords = [...this._el.querySelectorAll('input[type=password]')],
134
- textarea = [...this._el.querySelectorAll('textarea')],
135
- radios = [...this._el.querySelectorAll('input[type=radio]')],
136
- checkbox = [...this._el.querySelectorAll('input[type=checkbox]')],
137
- numbers = [...this._el.querySelectorAll('input[type=number]')],
138
- selects = [...this._el.querySelectorAll('select')];
139
- this._domForm.inputs = [...texts, ...hiddens, ...emails, ...passwords, ...tels, ...numbers, ...checkbox, ...radios, ...selects, ...textarea];
140
- }
141
-
142
- _formValidate() {
143
- let validate = true,
144
- errorEl = null;
145
- this.removeErrors();
146
- for (let i = 0; i < this._domForm.inputs.length; i++) {
147
- let el = this._domForm.inputs[i],
148
- parent = getClosest(el, this._options.selectorGroup);
149
- if (parent === null) continue;
150
- if (el.getAttribute('disabled')) continue;
151
- if (el.getAttribute('type') && el.getAttribute('type') === 'email' && (!regex_email(el.value) && el.value !== '')) {
152
- validate = false;
153
- this.setError(el, this._options.i18n.email);
154
- }
155
- if (el.getAttribute('data-formvalidate-same') && this._el.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`).value !== el.value) {
156
- validate = false;
157
- this.setError(el, this._options.i18n.same);
158
- }
159
- if ( el.getAttribute('pattern') && el.value !== '') {
160
- const pattern = el.getAttribute('pattern');
161
- const rgx = new RegExp(pattern);
162
- if(rgx.test(el.value)){
163
- validate = false;
164
- this.setError(el, this._options.i18n.pattern);
165
- }
166
- }
167
- if (el.getAttribute('required') !== null) {
168
- if (el.getAttribute('type') === 'radio') {
169
- let isChecked = false;
170
- let els = [...this._el.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
171
- for (let i = 0; i < els.length; i++) {
172
- if (els[i].checked) {
173
- isChecked = true;
174
- break;
175
- }
176
- }
177
- if (!isChecked) {
178
- validate = false;
179
- this.setError(el, this._options.i18n.radio);
180
- }
181
- }
182
- if (el.getAttribute('type') === 'checkbox' && !el.checked) {
183
- validate = false;
184
- this.setError(el, this._options.i18n.checkbox);
185
- } else if (el.value === '') {
186
- validate = false;
187
- const message = el.getAttribute('type') !== 'hidden' ? this._options.i18n.empty : null;
188
- this.setError(el, message);
189
- }
190
- }
191
- if (!validate && errorEl === null) errorEl = el;
160
+ /** @private */
161
+ _removeError(el = null) {
162
+ if (el) {
163
+ const group = getClosest(el, this._options.selectorGroup);
164
+ group.classList.remove(this._options.classIsError);
165
+ const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
166
+ currentErrors.forEach(error => {
167
+ error.classList.remove(this._options.classIsError);
168
+ error.parentNode.removeChild(error);
169
+ });
170
+ } else {
171
+ const isErrors = [...this._form.querySelectorAll(`${this._options.classIsError}`)];
172
+ const currentErrors = [...this._form.querySelectorAll(`.${this._options.classErrorElement}`)];
173
+ currentErrors.forEach(error => {
174
+ error.parentNode.removeChild(error);
175
+ });
176
+ isErrors.forEach(error => {
177
+ error.classList.remove(this._options.classIsError);
178
+ });
192
179
  }
193
- if (!validate && errorEl && this._options.animateToFirstError) {
194
- TweenMax.to(window, .6, { scrollTo: (window.pageYOffset + errorEl.getBoundingClientRect().top - 150) })
180
+ }
181
+
182
+ /** @private */
183
+ _checkError(el) {
184
+ const group = getClosest(el, this._options.selectorGroup);
185
+ if (group === null) return false;
186
+ if (el.getAttribute('disabled') !== null) return false;
187
+
188
+ let invalid = false;
189
+ if (!testRequired(el, this._form)) {
190
+ invalid = true;
191
+ const type = el.getAttribute('type');
192
+ if (type === 'radio') this.setError(el, this._options.i18n.radio);
193
+ else if (type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
194
+ else if (type !== 'hidden') this.setError(el, this._options.i18n.empty);
195
+ }
196
+ if (!testEmail(el, this._form)) {
197
+ invalid = true;
198
+ this.setError(el, this._options.i18n.email);
199
+ }
200
+ if (!testPattern(el, this._form)) {
201
+ invalid = true;
202
+ this.setError(el, this._options.i18n.pattern);
203
+ }
204
+ if (!testSame(el, this._form)) {
205
+ invalid = true;
206
+ this.setError(el, this._options.i18n.same);
207
+ }
208
+
209
+ return invalid;
210
+ }
211
+
212
+ /** @private */
213
+ _isValid() {
214
+ let isValid = true,
215
+ firstErrorElement = null;
216
+ this._removeError();
217
+
218
+ for (let i = 0; i < this._domForm.els.length; i++) {
219
+ const el = this._domForm.els[i];
220
+ const error = this._checkError(el);
221
+ if (!error) continue;
222
+ else isValid = false;
223
+ if (!isValid && firstErrorElement === null) firstErrorElement = el;
195
224
  }
196
- return validate;
225
+
226
+ if (!isValid && firstErrorElement && this._options.animateToFirstError) {
227
+ gsap.to(window, {
228
+ duration: .6,
229
+ scrollTo: (window.pageYOffset + firstErrorElement.getBoundingClientRect().top - 150)
230
+ })
231
+ }
232
+ return isValid;
197
233
  }
198
234
 
235
+ /** @private */
236
+ _formGrabDom() {
237
+ /** @private */
238
+ this._domForm = {};
239
+ this._domForm.inputs = [...this._form.querySelectorAll('input[type=text],input[type=number],input[type=password],input[type=hidden],input[type=search],input[type=email],input[type=email],input[type=tel],textarea')];
240
+ this._domForm.choices = [...this._form.querySelectorAll('select, input[type=radio],input[type=checkbox]')];
241
+ this._domForm.els = [...this._domForm.inputs, ...this._domForm.choices];
242
+ }
243
+
244
+ /** @private */
199
245
  _formAddEvents() {
200
- this._el.addEventListener('submit', this._onFormSubmit);
201
- this._domForm.inputs.forEach( input => {
202
- input.addEventListener('keyup', this._onFormKeyUp);
203
- if (input.getAttribute('type') === 'checkbox' ||
204
- input.getAttribute('type') === 'radio' ||
205
- input.tagName === 'SELECT') {
206
- input.addEventListener('change', this._onFormKeyUp);
207
- }
246
+ this._form.addEventListener('submit', this._onFormSubmit);
247
+ this._domForm.inputs.forEach(input => {
248
+ input.addEventListener('keyup', this._onChange);
249
+ });
250
+ this._domForm.choices.forEach(input => {
251
+ input.addEventListener('change', this._onChange);
208
252
  });
209
253
  }
210
254
  }
211
255
 
212
- export default FormControl;
256
+ /**
257
+ * Test required input/radio/checkbox is valid
258
+ * @param {Element} el Input to test
259
+ * @param {Element} form Formulaire
260
+ * @return {Boolean} Returns if element is valid or not
261
+ */
262
+ export function testRequired(el, form) {
263
+ const isRequired = el.getAttribute('required');
264
+ if (isRequired === null) return true;
265
+
266
+ const type = el.getAttribute('type');
267
+ if (type === 'radio') {
268
+ const radios = [...form.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
269
+ for (let i = 0; i < radios.length; i++) {
270
+ if (radios[i].checked) return true;
271
+ }
272
+ return false;
273
+ } else if (type === 'checkbox') return el.checked;
274
+ return el.value !== '';
275
+ }
276
+
277
+ /**
278
+ * Test input of email type is valid
279
+ * @param {Element} el Input to test
280
+ * @param {Element} form Formulaire
281
+ * @return {Boolean} Returns if element is valid or not
282
+ */
283
+ export function testEmail(el, form) {
284
+ const type = el.getAttribute('type');
285
+ if (type !== 'email' || el.value === '') return true;
286
+ return regex_email(el.value);
287
+ }
288
+
289
+ /**
290
+ * Test element with attribute data-formvalidate-same and his twin are same
291
+ * @param {Element} el Input to test
292
+ * @param {Element} form Formulaire
293
+ * @return {Boolean} Returns if element is valid or not
294
+ */
295
+ export function testSame(el, form) {
296
+ const hasSame = el.getAttribute('data-formvalidate-same');
297
+ if (hasSame === null) return true;
298
+ const twinEl = form.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`);
299
+ return twinEl.value === el.value;
300
+ }
301
+
302
+ /**
303
+ * Test element with pattern is valid
304
+ * @param {Element} el Input to test
305
+ * @param {Element} form Formulaire
306
+ * @return {Boolean} Returns if element is valid or not
307
+ */
308
+ export function testPattern(el, form) {
309
+ const pattern = el.getAttribute('pattern');
310
+ if (pattern === null || el.value === '') return true;
311
+ const rgx = new RegExp(pattern);
312
+ return rgx.test(el.value);
313
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aw-front-helpers",
3
- "version": "2.3.10",
3
+ "version": "2.4.1",
4
4
  "description": "Assets helpers for projects",
5
5
  "author": "Yoann Le Poupon",
6
6
  "license": "ISC",
@@ -1,13 +1,9 @@
1
1
  export default (callback) => {
2
- // Is the callback a function?
3
2
  if (typeof callback !== 'function') {
4
- console.log('Autoplay: Callback must be a function!');
3
+ console.warn('Autoplay: Callback must be a function!');
5
4
  return false;
6
5
  }
7
- // Check if sessionStorage exist for autoplaySupported,
8
- // if so we don't need to check for support again
9
6
  if (!sessionStorage.autoplaySupported) {
10
- // Create video element to test autoplay
11
7
  var video = document.createElement('video');
12
8
  video.autoplay = true;
13
9
  video.src = 'data:video/mp4;base64,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';
@@ -15,27 +11,14 @@ export default (callback) => {
15
11
  video.style.display = 'none';
16
12
  video.playing = false;
17
13
  video.play();
18
- // Check if video plays
19
14
  video.onplay = function () {
20
15
  this.playing = true;
21
16
  };
22
- // Video has loaded, check autoplay support
23
17
  video.oncanplay = function () {
24
- if (video.playing) {
25
- sessionStorage.autoplaySupported = 'true';
26
- callback(true);
27
- } else {
28
- sessionStorage.autoplaySupported = 'false';
29
- callback(false);
30
- }
18
+ sessionStorage.autoplaySupported = video.playing ? 'true' : 'false';
19
+ callback(video.playing);
31
20
  };
32
21
  } else {
33
- // We've already tested for support
34
- // use sessionStorage.autoplaySupported
35
- if (sessionStorage.autoplaySupported === 'true') {
36
- callback(true);
37
- } else {
38
- callback(false);
39
- }
22
+ callback(sessionStorage.autoplaySupported === 'true');
40
23
  }
41
24
  }