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.
- package/classes/formControl.js +228 -127
- package/package.json +1 -1
- package/utils/media/autoplay.js +4 -21
package/classes/formControl.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import getClosest
|
|
8
|
-
import 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:
|
|
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
|
-
|
|
30
|
-
|
|
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
|
-
|
|
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.
|
|
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.
|
|
60
|
-
this._domForm.inputs.forEach(
|
|
61
|
-
input.removeEventListener('keyup', this.
|
|
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
|
-
|
|
77
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
104
|
-
|
|
132
|
+
/** @protected */
|
|
133
|
+
onFormSubmit(pEvt) {
|
|
134
|
+
if (!this._isValid()) {
|
|
105
135
|
pEvt.preventDefault();
|
|
106
136
|
}
|
|
107
137
|
}
|
|
108
138
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
['
|
|
124
|
-
|
|
156
|
+
['_onChange', '_onFormSubmit', 'onFormSubmit']
|
|
157
|
+
.forEach((fn) => this[fn] = this[fn].bind(this));
|
|
125
158
|
}
|
|
126
159
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
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
|
-
|
|
194
|
-
|
|
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
|
-
|
|
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.
|
|
201
|
-
this._domForm.inputs.forEach(
|
|
202
|
-
input.addEventListener('keyup', this.
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
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
|
-
|
|
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
package/utils/media/autoplay.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
export default (callback) => {
|
|
2
|
-
// Is the callback a function?
|
|
3
2
|
if (typeof callback !== 'function') {
|
|
4
|
-
console.
|
|
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
|
-
|
|
25
|
-
|
|
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
|
-
|
|
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
|
}
|