Form Widget validation

- reorganized jquery validation lib to include languages
- added Widget initializer class
- fixed cache method in initializer
- added widget front JS to validate and submit (ajax / post)

assets/css/lib/jquery.validationEngine.css

@@ -0,0 +1 @@
+../../../node_modules/jquery-validation-engine/css/validationEngine.jquery.css

assets/js/lib/jQuery.validationEngine-en.js

@@ -1 +0,0 @@
-../../../node_modules/jquery-validation-engine/js/languages/jquery.validationEngine-en.js

assets/js/lib/jquery.validationEngine.js

@@ -1 +0,0 @@
-../../../node_modules/jquery-validation-engine/js/jquery.validationEngine.js

assets/js/lib/validation/jquery.validationEngine.js

@@ -0,0 +1 @@
+../../../../node_modules/jquery-validation-engine/js/jquery.validationEngine.js

assets/js/lib/validation/languages

@@ -0,0 +1 @@
+../../../../node_modules/jquery-validation-engine/js/languages/

assets/js/widget.js

@@ -0,0 +1,88 @@
+jQuery(function($) {
+  function isSameDomain(url) {
+    var link = document.createElement('a');
+    link.href = url;
+    return (window.location.hostname === link.hostname);
+  }
+
+  // backwards compatibility for older jQuery versions
+  if($.fn.on === undefined) {
+    // mimic on() function using live()
+    $.fn.on = function(events, selector, data, handler) {
+      if(typeof(selector) === 'function') {
+        $(this.context).live(events, selector);
+      } else {
+        $(selector).live(events, data, handler);
+      }
+      return this;
+    };
+  }
+
+  $(function() {
+    // setup form validation
+    $('form.mailpoet_form').validationEngine('attach', {
+      promptPosition: (parseInt(MailPoetWidget.is_rtl, 10) === 1)
+                      ? 'centerLeft' : 'centerRight',
+      scroll: false,
+      onValidationComplete: function(form, is_form_valid) {
+        if(is_form_valid === true) {
+          // get data
+          var raw_data = $(form).serializeArray(),
+          data = {};
+
+          // clear messages
+          $(form).find('.mailpoet_message').html('');
+          // hide all validation messages
+          $(form).validationEngine('hideAll');
+
+          // format data
+          $.each(raw_data, function(index, value) {
+            if(value.name.endsWith('[]')) {
+              var value_name = value.name.substr(0, value.name.length - 2);
+              // it's an array
+              if(data[value_name] === undefined) {
+                data[value_name] = [];
+              }
+              data[value_name].push(value.value);
+            } else {
+              data[value.name] = value.value;
+            }
+          });
+
+          if(isSameDomain(MailPoetWidget.ajax_url)) {
+            $.ajax(MailPoetWidget.ajax_url+ '?action=mailpoet_form_subscribe', {
+              data: JSON.stringify(data),
+              processData: false,
+              contentType: "application/json; charset=utf-8",
+              type : 'POST',
+              dataType: 'json',
+              success:function(response) {
+                // display response
+                if(response.success === true) {
+                  if(response.page !== undefined) {
+                    window.location.href = response.page;
+                  } else if(response.message !== undefined) {
+                    // success
+                    $(form)
+                      .find('.mailpoet_message')
+                      .html('<p class="mailpoet_validate_success">'+response.message+'</p>');
+                  }
+
+                  $(form).trigger('reset');
+                } else {
+                  if(response.message !== undefined) {
+                    $(form)
+                      .find('.mailpoet_message')
+                      .html('<p class="mailpoet_validate_error">'+response.message+'</p>');
+                  }
+                }
+              }
+            });
+          } else {
+            return true;
+          }
+        }
+      }
+    });
+  });
+});

lib/Config/Initializer.php

@@ -57,8 +57,7 @@ class Initializer {
   }
 
   function setupWidget() {
-    add_action('widgets_init', function() {
+    $widget = new Widget();
-      register_widget('\MailPoet\Form\Widget');
+    $widget->init();
-    });
   }
 }

lib/Config/Renderer.php

@@ -12,7 +12,7 @@ class Renderer {
     $file_system = new TwigFileSystem(Env::$views_path);
     $this->renderer = new TwigEnv(
       $file_system,
-      array('cache' => $this->detectCache())
+      array('cache' => $this->getCachePath())
     );
   }
 
@@ -49,9 +49,8 @@ class Renderer {
     $this->renderer->setLexer($lexer);
   }
 
-  function detectCache() {
+  function getCachePath() {
-    $cache_path = Env::$views_path . '/cache';
+    if(WP_DEBUG === true) { return false; }
-    if (WP_DEBUG === false) return $cache_path;
+    return Env::$views_path . '/cache';
-    return false;
   }
 }

lib/Config/Widget.php

@@ -0,0 +1,91 @@
+<?php
+namespace MailPoet\Config;
+
+if(!defined('ABSPATH')) exit;
+
+class Widget {
+  function __construct() {
+  }
+
+  function init() {
+    $this->registerWidget();
+    $this->setupActions();
+    $this->setupDependencies();
+  }
+
+  private function registerWidget() {
+    add_action('widgets_init',
+      function() {
+      register_widget('\MailPoet\Form\Widget');
+    });
+  }
+
+  private function setupDependencies() {
+    add_action('widgets_init', function() {
+      $locale = \get_locale();
+
+      wp_enqueue_script(
+        'mailpoet_validation_i18n',
+        Env::$assets_url.'/js/lib/validation/languages/'.
+        'jquery.validationEngine-'.substr($locale, 0, 2).'.js',
+        array(),
+        Env::$version,
+        true
+      );
+
+      wp_enqueue_script(
+        'mailpoet_validation',
+        Env::$assets_url.'/js/lib/validation/jquery.validationEngine.js',
+        array(),
+        Env::$version,
+        true
+      );
+
+      wp_enqueue_style('mailpoet_validation',
+        Env::$assets_url.'/css/lib/jquery.validationEngine.css',
+        array(),
+        Env::$version
+      );
+
+      wp_enqueue_script('mailpoet_widget',
+        Env::$assets_url.'/js/widget.js',
+        array(),
+        Env::$version,
+        true
+      );
+
+      wp_localize_script(
+        'mailpoet_widget',
+        'MailPoetWidget',
+        array(
+          'is_rtl'   => (int)(function_exists('is_rtl') && is_rtl()),
+          'ajax_url' => admin_url('admin-ajax.php')
+      ));
+    });
+  }
+
+  private function setupActions() {
+    // ajax requests
+    add_action(
+      'wp_ajax_mailpoet_form_subscribe',
+      'mailpoet_form_subscribe'
+    );
+    add_action(
+      'wp_ajax_nopriv_mailpoet_form_subscribe',
+      'mailpoet_form_subscribe'
+    );
+    // post request
+    add_action(
+      'admin_post_nopriv_mailpoet_form_subscribe',
+      'mailpoet_form_subscribe'
+    );
+    add_action(
+      'admin_post_mailpoet_form_subscribe',
+      'mailpoet_form_subscribe'
+    );
+    /*add_action(
+      'init',
+      'mailpoet_form_subscribe'
+    );*/
+  }
+}

lib/Form/Widget.php

@@ -87,7 +87,7 @@ class Widget extends \WP_Widget {
 
     $output .= '  <p>';
     $output .= '    <label>';
-    $output .=        __('E-mail').' <input type="email" name="email" />';
+    $output .=        __('E-mail').' <input type="email" name="email" data-validation-engine="validate[required,custom[email]]"/>';
     $output .= '    </label>';
     $output .= '  </p>';