Foundation Gravity

foundation.gravity.js

/**
 * Foundation Gravity by Adam Jenkins
 * Licensed under MIT Open Source
 */

'use strict';

!function ( $ ) {

  /**
   * Gravity Module
   * @module foundation.gravity
   * @requires foundation.abide
   */
  class Gravity {

    /**
     * Creates a new instance of Abide.
     * @class
     * @fires Gravity#init
     * @param {Object} element - jQuery object to add the trigger to.
     * @param {Object} options - Overrides to the default plugin settings.
     */
    constructor( element, options ) {
      this.$element = element;

      if ( ! this.$element.is( 'form' ) ) {
        console.warn( 'Foundation Gravity can only be used on <form> elements' );
        return;
      } else if ( ! Foundation.Abide ) {
        console.warn( 'Foundation Gravity requires Foundation Abide to be initialized first.' );
        return;
      }

      this.options = $.extend( {}, Gravity.defaults, this.$element.data(), options );

      this._init();

      // Register with Foundation
      Foundation.registerPlugin( this, 'Gravity' );
    }

    /**
     * Initializes the Abide plugin and calls functions to get Abide functioning on load.
     * @private
     */
    _init() {
      this.$inputs = this.$element.find('input, textarea, select');
      this._events();
    }

    /**
   * Initializes events for Gravity.
   * @private
   */
    _events() {
      this.$element.off( '.gravity' )
        .on( 'submit.zf.gravity', e => {
          e.preventDefault();
          return this.submitForm();
        } );
    }

    /**
     * Calls necessary functions to update Gravity upon DOM change
     * @private
     */
    _reflow() {
      this._init();
    }

    /**
     * Validates inputs with Foundation Abide, submits form via AJAX call
     * @returns {Boolean} noError - true if no errors were detected...
     * @fires Gravity#submitSuccess
     * @fires Gravity#submitFail
     */
    submitForm() {
      const _this = this;
      var data = [];

      console.log( Foundation.Abide );

      if ( this.$element.foundation( 'validateForm' ) ) {

        // Hide Gravity Error
        this.$element.find( '[data-gravity-error]' ).css( 'display', valid ? 'none' : 'block' );

        this.$element.serializeArray();

      }
    }

    /**
     * Destroys an instance of Gravity.
     * Removes error styles and classes from elements, without resetting their values.
     */
    destroy() {
      var _this = this;
      this.$element
        .off( '.gravity' )
        .find( '[data-gravity-error]' )
          .css( 'display', 'none' );

      this.$inputs
        .off('.gravity')
        .each( function () {
          Foundation.Abide.removeErrorClasses( $(this) );
        });

      Foundation.unregisterPlugin( this );
    }

    static get defaults() {
      return {

        /**
         * Gravity Form ID
         * @type {Number}
         */
        formId: 1,

        /**
         * AJAX method
         * @type {String}
         */
        method: 'POST',

        /**
         * Gravity Forms API path
         * @type {String}
         */
        apiPath: '/gravityformsapi',

        /**
         * Route to entries
         * @type {String}
         */
        route: '/form/{formId}/entries',

      };
    }

  }

  // Window exports
  Foundation.plugin( Gravity, 'Gravity' );

}( jQuery );