Form Widget

- added public js code to handle validation and ajax submit
- added widget initializer
- added form widget
- added acceptance test for adding the widget

assets/js/src/public.js

@@ -1,8 +1,22 @@
-define('public', ['jquery'], function(jQuery) {
-  jQuery(function($) {
-    // dom ready
-    $(function() {
+define('public', ['jquery', 'jquery-validation'],
+  function($) {
 
+    function isSameDomain(url) {
+      var link = document.createElement('a');
+      link.href = url;
+      return (window.location.hostname === link.hostname);
+    }
+
+    $(function() {
+      // setup form validation
+      $('form.mailpoet_form').validate({
+        submitHandler: function(form) {
+          console.log(form);
+          $(form).ajaxSubmit({
+            target: "#result"
+          });
+        }
       });
     });
-});
+  }
+);

lib/Config/Initializer.php

@@ -4,10 +4,10 @@ namespace MailPoet\Config;
 use MailPoet\Models;
 use MailPoet\Router;
 
-if (!defined('ABSPATH')) exit;
+if(!defined('ABSPATH')) exit;
 
 class Initializer {
-  public function __construct($params = array(
+  function __construct($params = array(
     'file'    => '',
     'version' => '1.0.0'
   )) {
@@ -21,6 +21,7 @@ class Initializer {
     $this->setupLocalizer();
     $this->setupMenu();
     $this->setupRouter();
+    $this->setupWidget();
   }
 
   function setupDB() {
@@ -64,4 +65,9 @@ class Initializer {
     $router = new Router\Router();
     $router->init();
   }
+
+  function setupWidget() {
+    $widget = new Widget();
+    $widget->init();
+  }
 }

lib/Config/Widget.php

@@ -0,0 +1,60 @@
+<?php
+namespace MailPoet\Config;
+
+if(!defined('ABSPATH')) exit;
+
+class Widget {
+  function __construct() {
+  }
+
+  function init() {
+    add_action('widgets_init', array($this, 'registerWidget'));
+    add_action('widgets_init', array($this, 'setupActions'));
+    add_action('widgets_init', array($this, 'setupDependencies'));
+  }
+
+  function registerWidget() {
+    register_widget('\MailPoet\Form\Widget');
+  }
+
+  function setupDependencies() {
+    wp_enqueue_script('mailpoet_vendor',
+      Env::$assets_url.'/js/vendor.js',
+      array(),
+      Env::$version,
+      true
+    );
+
+    wp_enqueue_script('mailpoet_public',
+      Env::$assets_url.'/js/public.js',
+      array(),
+      Env::$version,
+      true
+    );
+  }
+
+  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

@@ -0,0 +1,110 @@
+<?php
+namespace MailPoet\Form;
+
+if(!defined('ABSPATH')) exit;
+
+class Widget extends \WP_Widget {
+
+  function __construct() {
+    return parent::__construct(
+      'mailpoet_form',
+      __('MailPoet Subscription Form'),
+      array(
+        'title' => __('Newsletter subscription form')
+      )
+    );
+  }
+
+  public function update($new_instance, $old_instance) {
+    $instance = $old_instance;
+    $instance['title'] = strip_tags($new_instance['title']);
+    $instance['form'] = (int)$new_instance['form'];
+    return $instance;
+  }
+
+  public function form($instance) {
+    $instance = wp_parse_args(
+      (array)$instance,
+      array(
+        'title' => __('Subscribe to our Newsletter')
+      )
+    );
+
+    // set title
+    $title = isset($instance['title']) ? strip_tags($instance['title']) : '';
+
+    $output = '';
+
+    $output .= '<p>';
+    $output .= '  <label for="'.$this->get_field_id('title').'">';
+    $output .= __('Title:' );
+    $output .= '  </label>';
+    $output .= '  <input type="text" class="widefat"';
+    $output .= '    id="'.$this->get_field_id('title').'"';
+    $output .= '    name="'.$this->get_field_name('title').'"';
+    $output .= '    value="'.esc_attr($title).'"';
+    $output .= '  />';
+    $output .= '</p>';
+    $output .= '<p>';
+    $output .= '  <a href="javascript:;" class="mailpoet_form_new">';
+    $output .= __('Create a new form');
+    $output .= '  </a>';
+    $output .= '</p>';
+
+    echo $output;
+  }
+
+  function widget($args, $instance = null) {
+    extract($args);
+    if($instance === null) { $instance = $args; }
+
+    $title = apply_filters(
+      'widget_title',
+      $instance['title'],
+      $instance,
+      $this->id_base
+    );
+
+    $output = '';
+
+    // before widget
+    $output .= (isset($before_widget) ? $before_widget : '');
+
+    // title
+    $output .= $before_title.$title.$after_title;
+
+    // form
+    $form_id = $this->id_base.'_'.$this->number;
+    $form_type = 'widget';
+
+    $output .= '<div class="mailpoet_form mailpoet_form_'.$form_type.'">';
+
+    $output .= '<form '.
+      'id="'.$form_id.'" '.
+      'method="post" '.
+      'action="'.admin_url('admin-post.php?action=mailpoet_form_subscribe').'" '.
+      'class="mailpoet_form mailpoet_form_'.$form_type.'" novalidate>';
+
+    $output .= '  <p>';
+    $output .= '    <label>'.__('E-mail');
+    $output .= '      <input type="email" name="email"';
+    $output .= '      data-validation-engine="validate[required,custom[email]]"';
+    $output .= '      />';
+    $output .= '    </label>';
+    $output .= '  </p>';
+
+    $output .= '  <p>';
+    $output .= '    <label>';
+    $output .= '      <input type="submit" value="'.esc_attr('Subscribe!').'" />';
+    $output .= '    </label>';
+    $output .= '  </p>';
+
+    $output .= '</form>';
+    $output .= '</div>';
+
+    // after widget
+    $output .= (isset($after_widget) ? $after_widget : '');
+
+    echo $output;
+  }
+}

tests/acceptance/FormWidgetCest.php

@@ -0,0 +1,45 @@
+<?php
+
+class FormWidgetCest {
+
+  function _before(AcceptanceTester $I) {
+    $I->login();
+  }
+
+  function iCanAddAWidget(AcceptanceTester $I) {
+    $I->amOnPage('/wp-admin/widgets.php');
+    $I->see('MailPoet Subscription Form');
+
+    // select the mailpoet form widget
+    $I->click('#widgets-left div[id*="mailpoet_form"] .widget-title');
+
+    // add it as a widget
+    $I->waitForText(
+      'Add Widget',
+      1,
+      '#widgets-left div[id*="mailpoet_form"]'
+    );
+
+    $I->click(
+      'Add Widget',
+      '#widgets-left div[id*="mailpoet_form"]'
+    );
+
+    // wait for the JS animation to end
+    sleep(1);
+
+    // save the widget
+    $I->click(
+      'Save',
+      '#widgets-right div[id*="mailpoet_form"]:last-child'
+    );
+  }
+
+  function _after(AcceptanceTester $I) {
+    // delete widget
+    $I->click(
+      'Delete',
+      '#widgets-right div[id*="mailpoet_form"]:last-child'
+    );
+  }
+}