aw-front-helpers 2.3.10 → 2.3.12

package/classes/formControl.js

@@ -1,17 +1,13 @@
-import { TweenMax, gsap } from 'gsap/all';
-import ScrollToPlugin     from 'gsap/ScrollToPlugin';
-gsap.registerPlugin( ScrollToPlugin );
-
-import create             from 'dom-create-element';
-
-import getClosest         from '../utils/dom/getClosest';
-import regex_email        from '../utils/regex/email';
+import { gsap } from 'gsap/all';
+import ScrollToPlugin from 'gsap/ScrollToPlugin';
+gsap.registerPlugin(ScrollToPlugin);
+import regex_email from '../utils/regex/email';
 
 const defaultOptions = {
   selectorGroup: '.form-group',
   classErrorElement: 'form-error',
   classIsError: 'is-error',
-  animateToFirstError: true,
+  animateToFirstError: false,
   i18n: {
     required: Translator ? Translator.trans('form_errors.pattern') : 'Ce champs est obligatoire',
     same: Translator ? Translator.trans('form_errors.same') : 'Les champs ne correspondent pas.',
@@ -23,17 +19,39 @@ const defaultOptions = {
   }
 };
 
-class FormControl {
+export default class FormControl {
   //________________________________________________________ constructor
   // -
-  constructor(el, options = {}) {
-    this._el = el;
+  /**
+   * Add controls on your formulaire
+   * @param {Element} form formulaire need add control
+   * @param {Object} options define options of controls
+   * @param {string} options.selectorGroup - The name of the employee.
+   * @param {string} options.classErrorElement - The employee's department.
+   * @param {string} options.classIsError - The employee's department.
+   * @param {string} options.animateToFirstError - The employee's department.
+   * @param {Object} options.i18n - The employee's department.
+   * @param {Object} options.i18n.required - The employee's department.
+   * @param {Object} options.i18n.same - The employee's department.
+   * @param {Object} options.i18n.email - The employee's department.
+   * @param {Object} options.i18n.empty - The employee's department.
+   * @param {Object} options.i18n.checkbox - The employee's department.
+   * @param {Object} options.i18n.radio - The employee's department.
+   * @param {Object} options.i18n.pattern - The employee's department.
+   **/
+  constructor(form, options = {}) {
+    /** @private */
+    this._form = form;
+    /** @private */
     this._dom = {};
-    this._options = {...defaultOptions, ...options};
+    /** @private */
+    this._options = {
+      ...defaultOptions,
+      ...options
+    };
 
+    this._form.setAttribute('novalidate', 'novalidate');
     this._formCreateBound();
-    this._el.setAttribute('novalidate', 'novalidate');
-
     this._formGrabDom();
     this._formAddEvents();
   }
@@ -45,168 +63,247 @@ class FormControl {
     };
   }
 
+  get form() {
+    return this._form;
+  }
+
   get options() {
     return this._options;
   }
 
+  /**
+   * @deprecated use isValid
+   */
   get isValidate() {
-    return this._formValidate();
+    return this._isValid();
+  }
+
+  get isValid() {
+    return this._isValid();
   }
 
   //________________________________________________________ public
   // -
   destroy() {
-    this._el.removeEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach( input => {
-      input.removeEventListener('keyup', this._onFormKeyUp);
-      if (input.getAttribute('type') === 'checkbox' ||
-        input.getAttribute('type') === 'radio' ||
-        input.tagName === 'SELECT') {
-        input.removeEventListener('change', this._onFormKeyUp);
-      }
-    })
-  }
-
-  removeErrors() {
-    const isErrors = [...this._el.querySelectorAll(`${this._options.classIsError}`)];
-    const currentErrors = [...this._el.querySelectorAll(`.${this._options.classErrorElement}`)];
-    currentErrors.forEach(error => {
-      error.parentNode.removeChild(error);
+    this._form.removeEventListener('submit', this._onFormSubmit);
+    this._domForm.inputs.forEach(input => {
+      input.removeEventListener('keyup', this._onChange);
     });
-    isErrors.forEach(error => {
-      error.classList.remove(this._options.classIsError);
+    this._domForm.choices.forEach(input => {
+      input.removeEventListener('change', this._onChange);
     });
   }
 
+  removeErrors(el = null) {
+    this._removeError(el);
+  }
+
   setError(element, message = null) {
-    const parent = getClosest(element, this._options.selectorGroup);
-    if( parent) {
-      let error = parent.querySelector(`.${this._options.classErrorElement}`);
-      if(!error)  {
-        error = create({
-          selector: 'ul',
-          styles: this._options.classErrorElement
-        });
-        parent.appendChild(error);
-      }
-      parent.classList.add(this._options.classIsError);
-      if(message) {
-        const errorElement = document.createElement('li');
-        errorElement.innerHTML = message;
-        error.appendChild(errorElement);
-      }
+    const parent = element.closest(this._options.selectorGroup);
+    if (parent === null) return;
+    let error = parent.querySelector(`.${this._options.classErrorElement}`);
+    if (!error) {
+      error = Object.assign(
+        document.createElement('ul'), {
+        className: this._options.classErrorElement
+      });
+      parent.appendChild(error);
+    }
+    parent.classList.add(this._options.classIsError);
+
+    const previousErrors = [...error.querySelectorAll('li')];
+    for (let i = 0; i < previousErrors.length; i++) {
+      if (previousErrors[i].innerHTML === message) return;
+    }
+    if (message) {
+      const errorElement = document.createElement('li');
+      errorElement.innerHTML = message;
+      error.appendChild(errorElement);
     }
   }
 
   //________________________________________________________ events
   // -
-  _onFormSubmit(pEvt) {
-    if (!this._formValidate()) {
+  /** @protected */
+  onFormSubmit(pEvt) {
+    if (!this._isValid()) {
       pEvt.preventDefault();
     }
   }
 
-  _onFormKeyUp(pEvt) {
-    var el = pEvt.target,
-      parent = getClosest(el, this._options.selectorGroup);
-    parent.classList.remove(this._options.classIsError);
-    const currentErrors = [...parent.querySelectorAll(`.${this._options.classErrorElement}`)];
-    currentErrors.forEach(error => {
-      error.classList.remove(this._options.classIsError);
-      error.parentNode.removeChild(error);
-    });
+  /**
+   * @deprecated use onFormSubmit
+   */
+  _onFormSubmit(pEvt) {
+    this.onFormSubmit(pEvt);
+  }
+
+  /** @private */
+  _onChange(pEvt) {
+    const el = pEvt.target;
+    this._removeError(el);
   }
 
   //________________________________________________________ private
   // -
+  /** @private */
   _formCreateBound() {
-    ['_onFormKeyUp', '_onFormSubmit']
+    ['_onChange', '_onFormSubmit', 'onFormSubmit']
       .forEach((fn) => this[fn] = this[fn].bind(this));
   }
 
-  _formGrabDom() {
-    this._domForm = {};
-    let texts = [...this._el.querySelectorAll('input[type=text]')],
-      hiddens = [...this._el.querySelectorAll('input[type=hidden]')],
-      emails = [...this._el.querySelectorAll('input[type=email]')],
-      tels = [...this._el.querySelectorAll('input[type=tel]')],
-      passwords = [...this._el.querySelectorAll('input[type=password]')],
-      textarea = [...this._el.querySelectorAll('textarea')],
-      radios = [...this._el.querySelectorAll('input[type=radio]')],
-      checkbox = [...this._el.querySelectorAll('input[type=checkbox]')],
-      numbers = [...this._el.querySelectorAll('input[type=number]')],
-      selects = [...this._el.querySelectorAll('select')];
-    this._domForm.inputs = [...texts, ...hiddens, ...emails, ...passwords, ...tels, ...numbers, ...checkbox, ...radios, ...selects, ...textarea];
-  }
-
-  _formValidate() {
-    let validate = true,
-      errorEl = null;
-    this.removeErrors();
-    for (let i = 0; i < this._domForm.inputs.length; i++) {
-      let el = this._domForm.inputs[i],
-        parent = getClosest(el, this._options.selectorGroup);
-      if (parent === null) continue;
-      if (el.getAttribute('disabled')) continue;
-      if (el.getAttribute('type') && el.getAttribute('type') === 'email' && (!regex_email(el.value) && el.value !== '')) {
-        validate = false;
-        this.setError(el, this._options.i18n.email);
-      }
-      if (el.getAttribute('data-formvalidate-same') && this._el.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`).value !== el.value) {
-        validate = false;
-        this.setError(el, this._options.i18n.same);
-      }
-      if ( el.getAttribute('pattern') && el.value !== '') {
-        const pattern = el.getAttribute('pattern');
-        const rgx = new RegExp(pattern);
-        if(rgx.test(el.value)){
-          validate = false;
-          this.setError(el, this._options.i18n.pattern);
-        }
-      }
-      if (el.getAttribute('required') !== null) {
-        if (el.getAttribute('type') === 'radio') {
-          let isChecked = false;
-          let els = [...this._el.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
-          for (let i = 0; i < els.length; i++) {
-            if (els[i].checked) {
-              isChecked = true;
-              break;
-            }
-          }
-          if (!isChecked) {
-            validate = false;
-            this.setError(el, this._options.i18n.radio);
-          }
-        }
-        if (el.getAttribute('type') === 'checkbox' && !el.checked) {
-          validate = false;
-          this.setError(el, this._options.i18n.checkbox);
-        } else if (el.value === '') {
-          validate = false;
-          const message = el.getAttribute('type') !== 'hidden' ? this._options.i18n.empty : null;
-          this.setError(el, message);
-        }
-      }
-      if (!validate && errorEl === null) errorEl = el;
+  /** @private */
+  _removeError(el = null) {
+    if (el) {
+      const group = el.closest(this._options.selectorGroup);
+      if (group === null) return;
+      group.classList.remove(this._options.classIsError);
+      const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
+      currentErrors.forEach(error => {
+        error.classList.remove(this._options.classIsError);
+        error.parentNode.removeChild(error);
+      });
+    } else {
+      const isErrors = [...this._form.querySelectorAll(`${this._options.classIsError}`)];
+      const currentErrors = [...this._form.querySelectorAll(`.${this._options.classErrorElement}`)];
+      currentErrors.forEach(error => {
+        error.parentNode.removeChild(error);
+      });
+      isErrors.forEach(error => {
+        error.classList.remove(this._options.classIsError);
+      });
     }
-    if (!validate && errorEl && this._options.animateToFirstError) {
-      TweenMax.to(window, .6, { scrollTo: (window.pageYOffset + errorEl.getBoundingClientRect().top - 150) })
+  }
+
+  /** @private */
+  _checkError(el) {
+    const group = el.closest(this._options.selectorGroup);
+    if (group === null) return false;
+    if (el.getAttribute('disabled') !== null) return false;
+
+    let invalid = false;
+    if (!testRequired(el, this._form)) {
+      invalid = true;
+      const type = el.getAttribute('type');
+      if (type === 'radio') this.setError(el, this._options.i18n.radio);
+      else if (type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
+      else if (type !== 'hidden') this.setError(el, this._options.i18n.empty);
     }
-    return validate;
+    if (!testEmail(el, this._form)) {
+      invalid = true;
+      this.setError(el, this._options.i18n.email);
+    }
+    if (!testPattern(el, this._form)) {
+      invalid = true;
+      this.setError(el, this._options.i18n.pattern);
+    }
+    if (!testSame(el, this._form)) {
+      invalid = true;
+      this.setError(el, this._options.i18n.same);
+    }
+
+    return invalid;
+  }
+
+  /** @private */
+  _isValid() {
+    let isValid = true,
+      firstErrorElement = null;
+    this._removeError();
+
+    for (let i = 0; i < this._domForm.els.length; i++) {
+      const el = this._domForm.els[i];
+      const error = this._checkError(el);
+      if (!error) continue;
+      else isValid = false;
+      if (!isValid && firstErrorElement === null) firstErrorElement = el;
+    }
+
+    if (!isValid && firstErrorElement && this._options.animateToFirstError) {
+      gsap.to(window, {
+        duration: .6,
+        scrollTo: (window.pageYOffset + firstErrorElement.getBoundingClientRect().top - 150)
+      })
+    }
+    return isValid;
   }
 
+  /** @private */
+  _formGrabDom() {
+    /** @private */
+    this._domForm = {};
+    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')];
+    this._domForm.choices = [...this._form.querySelectorAll('select, input[type=radio],input[type=checkbox]')];
+    this._domForm.els = [...this._domForm.inputs, ...this._domForm.choices];
+  }
+
+  /** @private */
   _formAddEvents() {
-    this._el.addEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach( input => {
-      input.addEventListener('keyup', this._onFormKeyUp);
-      if (input.getAttribute('type') === 'checkbox' ||
-        input.getAttribute('type') === 'radio' ||
-        input.tagName === 'SELECT') {
-        input.addEventListener('change', this._onFormKeyUp);
-      }
+    this._form.addEventListener('submit', this._onFormSubmit);
+    this._domForm.inputs.forEach(input => {
+      input.addEventListener('keyup', this._onChange);
+    });
+    this._domForm.choices.forEach(input => {
+      input.addEventListener('change', this._onChange);
     });
   }
 }
 
-export default FormControl;
+/**
+ * Test required input/radio/checkbox is valid
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testRequired(el, form) {
+  const isRequired = el.getAttribute('required');
+  if (isRequired === null) return true;
+
+  const type = el.getAttribute('type');
+  if (type === 'radio') {
+    const radios = [...form.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
+    for (let i = 0; i < radios.length; i++) {
+      if (radios[i].checked) return true;
+    }
+    return false;
+  } else if (type === 'checkbox') return el.checked;
+  return el.value !== '';
+}
+
+/**
+ * Test input of email type is valid
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testEmail(el, form) {
+  const type = el.getAttribute('type');
+  if (type !== 'email' || el.value === '') return true;
+  return regex_email(el.value);
+}
+
+/**
+ * Test element with attribute data-formvalidate-same and his twin are same
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testSame(el, form) {
+  const hasSame = el.getAttribute('data-formvalidate-same');
+  if (hasSame === null) return true;
+  const twinEl = form.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`);
+  return twinEl.value === el.value;
+}
+
+/**
+ * Test element with pattern is valid
+ * @param  {Element} el     Input to test
+ * @param  {Element} form   Formulaire
+ * @return {Boolean} Returns if element is valid or not
+ */
+export function testPattern(el, form) {
+  const pattern = el.getAttribute('pattern');
+  if (pattern === null || el.value === '') return true;
+  const rgx = new RegExp(pattern);
+  return rgx.test(el.value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",