handle form as iframe

assets/js/src/iframe.js

@@ -0,0 +1,23 @@
+define('iframe', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+  'use strict';
+  MailPoet.Iframe = {
+    marginY: 15,
+    autoSize: function(iframe) {
+      if(!iframe) return;
+
+      this.setSize(
+        iframe,
+        iframe.contentWindow.document.body.scrollHeight
+      );
+    },
+    setSize: function(iframe, i) {
+      if(!iframe) return;
+
+      iframe.style.height = (
+        parseInt(i) + this.marginY
+      ) + "px";
+    }
+  };
+
+  return MailPoet;
+});

assets/js/src/public.js

@@ -20,13 +20,18 @@ function(
       $('form.mailpoet_form').each(function() {
         var form = $(this);
 
-        form.parsley().on('form:submit', function(parsley) {
+        form.parsley().on('form:validated', function(parsley) {
-
-          var data = form.serializeObject() || {};
-
           // clear messages
           form.find('.mailpoet_message').html('');
 
+          // resize iframe
+          if(window.frameElement !== null) {
+            MailPoet.Iframe.autoSize(window.frameElement);
+          }
+        });
+
+        form.parsley().on('form:submit', function(parsley) {
+          var data = form.serializeObject() || {};
           // check if we're on the same domain
           if(isSameDomain(MailPoetForm.ajax_url) === false) {
             // non ajax post request
@@ -68,6 +73,11 @@ function(
                 // reset validation
                 parsley.reset();
               }
+
+              // resize iframe
+              if(window.frameElement !== null) {
+                MailPoet.Iframe.autoSize(window.frameElement);
+              }
             });
           }
           return false;

lib/Config/Initializer.php

@@ -130,7 +130,7 @@ class Initializer {
   }
 
   function setupWidget() {
-    $widget = new Widget();
+    $widget = new Widget($this->renderer);
     $widget->init();
   }
 

lib/Config/Widget.php

@@ -1,11 +1,17 @@
 <?php
 namespace MailPoet\Config;
 use \MailPoet\Util\Security;
+use \MailPoet\Models\Form;
 
 if(!defined('ABSPATH')) exit;
 
 class Widget {
-  function __construct() {
+  private $renderer = null;
+
+  function __construct($renderer = null) {
+    if($renderer !== null) {
+      $this->renderer = $renderer;
+    }
   }
 
   function init() {
@@ -13,11 +19,67 @@ class Widget {
 
     if(!is_admin()) {
       $this->setupDependencies();
+      $this->setupIframe();
     } else {
       $this->setupAdminDependencies();
     }
   }
 
+  function setupIframe() {
+    $form_id = (isset($_GET['mailpoet_form_iframe']) ? (int)$_GET['mailpoet_form_iframe'] : 0);
+    if($form_id > 0) {
+      $form = Form::findOne($form_id);
+
+      if($form !== false) {
+        $form_widget = new \MailPoet\Form\Widget();
+        $form_html = $form_widget->widget(array(
+          'form' => $form_id,
+          'form_type' => 'iframe'
+        ));
+
+        // capture javascripts
+        ob_start();
+        wp_print_scripts('jquery');
+        wp_print_scripts('mailpoet_vendor');
+        wp_print_scripts('mailpoet_public');
+        $scripts = ob_get_contents();
+        ob_end_clean();
+
+        // language attributes
+        $language_attributes = array();
+        $is_rtl = (bool)(function_exists('is_rtl') && is_rtl());
+
+        if($is_rtl) {
+          $language_attributes[] = 'dir="rtl"';
+        }
+
+        if($lang = get_bloginfo('language')) {
+          if(get_option('html_type') === 'text/html') {
+            $language_attributes[] = "lang=\"$lang\"";
+          }
+        }
+
+        $language_attributes = apply_filters(
+          'language_attributes', implode(' ', $language_attributes)
+        );
+
+        $data = array(
+          'language_attributes' => $language_attributes,
+          'scripts' => $scripts,
+          'form' => $form_html,
+          'mailpoet_form' => array(
+            'ajax_url' => admin_url('admin-ajax.php', 'absolute'),
+            'is_rtl' => $is_rtl,
+            'token' => Security::generateToken()
+          )
+        );
+
+        echo $this->renderer->render('form/iframe.html', $data);
+        exit();
+      }
+    }
+  }
+
   function registerWidget() {
     register_widget('\MailPoet\Form\Widget');
   }

lib/Form/Util/Export.php

@@ -17,8 +17,7 @@ class Export {
       case 'iframe':
         // generate url to load iframe's content
         $iframe_url = add_query_arg(array(
-          'mailpoet_page' => 'mailpoet_form_iframe',
+          'mailpoet_form_iframe' => $form['id']
-          'mailpoet_form' => $form['id']
         ), site_url());
 
         // generate iframe
@@ -31,7 +30,7 @@ class Export {
           'class="mailpoet_form_iframe"',
           'vspace="0"',
           'tabindex="0"',
-          'onload="javascript:(this.style.height = this.contentWindow.document.body.scrollHeight + \'px\');"',
+          'onload="MailPoet.Iframe.autoSize(this);"',
           'marginwidth="0"',
           'marginheight="0"',
           'hspace="0"',

views/form/iframe.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--[if IE 7]>
+<html class="ie ie7" <%= language_attributes | raw %>>
+<![endif]-->
+<!--[if IE 8]>
+<html class="ie ie8" <%= language_attributes | raw %>>
+<![endif]-->
+<!--[if !(IE 7) & !(IE 8)]><!-->
+<html <%= language_attributes | raw %>>
+<!--<![endif]-->
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <meta name="robots" content="noindex, nofollow">
+    <title><%= __('MailPoet Subscription Form') %></title>
+    <%= stylesheet('public.css') %>
+    <%= scripts | raw %>
+  </head>
+  <body>
+    <%= form | raw %>
+    <script type="text/javascript">
+      var MailPoetForm = <%= json_encode(mailpoet_form) %>;
+      function autoSize() {
+        var iframe = window.frameElement;
+        var height = document.body.scrollHeight;
+        parent.MailPoet.Iframe.setSize(iframe, height);
+      }
+
+      jQuery(function($) {
+        $(function() {
+          autoSize();
+        });
+      });
+
+      jQuery('form').on('submit', function() {
+        setTimeout(function() {
+          // make sure we resize the iframe
+          autoSize();
+        }.bind(this), 1);
+        return true;
+      }.bind(this));
+    </script>
+  </body>
+</html>

webpack.config.js

@@ -178,6 +178,7 @@ config.push(_.extend({}, baseConfig, {
     public: [
       'mailpoet',
       'ajax',
+      'iframe',
       'jquery.serialize_object',
       'public.js'
     ]