major bugfixes and refactoring on form editor - just waitin' for the db now :)

assets/css/admin.css

@@ -665,10 +665,19 @@ h2.title {
   min-width: 255px;
   position: relative;
   cursor: pointer;
-  max-height: auto;
+  overflow: hidden;
+  max-height: 1000px;
+  -webkit-transition: max-height 0.5s ease-in-out;
+  -moz-transition: max-height 0.5s ease-in-out;
+  -o-transition: max-height 0.5s ease-in-out;
+  -ms-transition: max-height 0.5s ease-in-out;
+  transition: max-height 0.5s ease-in-out;
 }
 .mailpoet_toolbar_section > div {
   padding: 10px 20px 20px 20px;
+  overflow: auto;
+  height: 100%;
+  min-width: 255px;
 }
 .mailpoet_toolbar_section h3 {
   margin: 10px;
@@ -676,7 +685,6 @@ h2.title {
 }
 .mailpoet_toolbar_section.closed {
   max-height: 38px;
-  overflow: hidden;
 }
 .mailpoet_toolbar_section .mailpoet_toggle {
   position: absolute;

assets/css/src/form_editor.styl

@@ -201,10 +201,15 @@ h2.title
   min-width: 255px
   position: relative
   cursor: pointer
-  max-height: auto
+  overflow: hidden
+  max-height: 1000px
+  transition: max-height 0.5s ease-in-out
 
 .mailpoet_toolbar_section > div
   padding: 10px 20px 20px 20px
+  overflow: auto
+  height: 100%
+  min-width: 255px
 
 .mailpoet_toolbar_section h3
   margin: 10px
@@ -212,7 +217,6 @@ h2.title
 
 .mailpoet_toolbar_section.closed
   max-height: 38px
-  overflow: hidden
 
 .mailpoet_toolbar_section .mailpoet_toggle
   position: absolute

assets/js/form_editor.js

@@ -389,7 +389,6 @@ var WysijaForm = {
         return data;
     },
     toggleWidgets: function() {
-        return;
         $$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled');
 
         // loop through each unique field already inserted in the editor and disable its toolbar equivalent
@@ -401,7 +400,7 @@ var WysijaForm = {
         });
 
         // hide list selection if a list widget has been dragged into the editor
-        $('mailpoet_list_selection')[(($$('#'+WysijaForm.options.editor+' [wysija_field="list"]').length > 0) === true) ? 'hide': 'show']();
+        $('mailpoet_settings_list_selection')[(($$('#'+WysijaForm.options.editor+' [wysija_field="list"]').length > 0) === true) ? 'hide': 'show']();
     },
     setBlockPositions: function(event, target) {
         // release dragging lock
@@ -877,11 +876,6 @@ WysijaForm.Block.create = function(block, target) {
 
     // position settings
     WysijaForm.setSettingsPosition();
-
-    // toggle widgets
-    setTimeout(function() {
-        WysijaForm.toggleWidgets();
-    }, 1);
 };
 
 document.observe('wjfe:item:drop', function(event) {
@@ -891,6 +885,11 @@ document.observe('wjfe:item:drop', function(event) {
     // hide block controls
     info('hide controls');
     WysijaForm.hideBlockControls();
+
+    // toggle widgets
+    setTimeout(function() {
+        WysijaForm.toggleWidgets();
+    }, 1);
 });
 
 /* Form Widget */

assets/js/lib/jquery.serializeObject.js

@@ -0,0 +1,99 @@
+// jQuery extensions
+(function($) {
+  // Combination of jQuery.deparam and jQuery.serializeObject by Ben Alman.
+  /*!
+   * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
+   * http://benalman.com/projects/jquery-bbq-plugin/
+   *
+   * Copyright (c) 2010 "Cowboy" Ben Alman
+   * Dual licensed under the MIT and GPL licenses.
+   * http://benalman.com/about/license/
+   */
+  /*!
+   * jQuery serializeObject - v0.2 - 1/20/2010
+   * http://benalman.com/projects/jquery-misc-plugins/
+   *
+   * Copyright (c) 2010 "Cowboy" Ben Alman
+   * Dual licensed under the MIT and GPL licenses.
+   * http://benalman.com/about/license/
+   */
+  $.fn.serializeObject = function(coerce) {
+    var obj = {},
+      coerce_types = { 'true': !0, 'false': !1, 'null': null };
+
+    // Iterate over all name=value pairs.
+    $.each( this.serializeArray(), function(j,v){
+      var key = v.name,
+        val = v.value,
+        cur = obj,
+        i = 0,
+
+        // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
+        // into its component parts.
+        keys = key.split( '][' ),
+        keys_last = keys.length - 1;
+
+      // If the first keys part contains [ and the last ends with ], then []
+      // are correctly balanced.
+      if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
+        // Remove the trailing ] from the last keys part.
+        keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
+
+        // Split first keys part into two parts on the [ and add them back onto
+        // the beginning of the keys array.
+        keys = keys.shift().split('[').concat( keys );
+
+        keys_last = keys.length - 1;
+      } else {
+        // Basic 'foo' style key.
+        keys_last = 0;
+      }
+
+      // Coerce values.
+      if ( coerce ) {
+        val = val && !isNaN(val)            ? +val              // number
+          : val === 'undefined'             ? undefined         // undefined
+          : coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
+          : val;                                                // string
+      }
+
+      if ( keys_last ) {
+        // Complex key, build deep object structure based on a few rules:
+        // * The 'cur' pointer starts at the object top-level.
+        // * [] = array push (n is set to array length), [n] = array if n is
+        //   numeric, otherwise object.
+        // * If at the last keys part, set the value.
+        // * For each keys part, if the current level is undefined create an
+        //   object or array based on the type of the next keys part.
+        // * Move the 'cur' pointer to the next level.
+        // * Rinse & repeat.
+        for ( ; i <= keys_last; i++ ) {
+          key = keys[i] === '' ? cur.length : keys[i];
+          cur = cur[key] = i < keys_last
+            ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
+            : val;
+        }
+
+      } else {
+        // Simple key, even simpler rules, since only scalars and shallow
+        // arrays are allowed.
+
+        if ( $.isArray( obj[key] ) ) {
+          // val is already an array, so push on the next value.
+          obj[key].push( val );
+
+        } else if ( obj[key] !== undefined ) {
+          // val isn't an array, but since a second value has been specified,
+          // convert val into an array.
+          obj[key] = [ obj[key], val ];
+
+        } else {
+          // val is a scalar.
+          obj[key] = val;
+        }
+      }
+    });
+
+    return obj;
+  };
+})(jQuery);

lib/config/initializer.php

@@ -40,7 +40,7 @@ class Initializer {
     $this->renderer = new \Twig_Environment(
       new \Twig_Loader_Filesystem($this->views_path),
       array(
-        'cache' => $this->views_path.'/cache',
+        'cache' => (WP_DEBUG === false) ? $this->views_path.'/cache' : false,
       )
     );
 
@@ -243,6 +243,11 @@ class Initializer {
   }
 
   public function admin_page_form() {
+    $lists = array(
+      array('id' => 1, 'name' => 'My First List'),
+      array('id' => 2, 'name' => 'My Second List')
+    );
+
     $this->data['form'] = array(
       'form' => 1,
       'form_name' => __("New form"),
@@ -251,7 +256,7 @@ class Initializer {
         'settings' => array(
           'on_success' => 'message',
           'success_message' => __('Check your inbox or spam folder now to confirm your subscription.'),
-          'lists' => array(1, 2),
+          'lists' => array(2),
           'lists_selected_by' => 'admin'
           ),
         'body' => array(
@@ -263,8 +268,17 @@ class Initializer {
             'params' => array(
               'label' => __('Email'),
               'required' => true
-              )
+            )
-            ),
+          ),
+          array(
+            'name' => __('List selection'),
+            'type' => 'list',
+            'field' => 'list',
+            'params' => array(
+              'label' => __('Select list(s):'),
+              'values' => $lists
+            )
+          ),
           array(
             'name' => __('Submit'),
             'type' => 'submit',
@@ -278,17 +292,18 @@ class Initializer {
       )
     );
 
-    $lists = array(
-      array('id' => 1, 'name' => 'My First List'),
-      array('id' => 2, 'name' => 'My Second List')
-    );
-
     // form editor vars
     $this->data = array_merge($this->data, array(
       'date_formats' => \MailPoet\Form\Renderer::getDateFormats(),
       'date_types' => \MailPoet\Form\Renderer::getDateTypes(),
       'default_list' => $lists[0],
-      'lists' => $lists
+      'selected_lists' => (!empty($this->data['form']['settings']['lists']))
+        ? $this->data['form']['settings']['lists']
+        : array($lists[0]),
+      'lists' => $lists,
+      'pages' => get_pages(),
+      'styles' => \MailPoet\Form\Renderer::getStyles(),
+      'exports' => \MailPoet\Form\Renderer::getExports($this->data['form'])
     ));
     echo $this->renderer->render('form/editor.html', $this->data);
   }

views/form/editor.html

@@ -27,23 +27,31 @@
 
     <!-- Form Editor: Toolbar -->
     <div id="mailpoet_form_toolbar" style="visibility:hidden;">
-      <div class="mailpoet_toolbar_section">
+      <div class="mailpoet_toolbar_section closed" data-section="settings">
-          <a href="javascript:;" class="mailpoet_toggle"><br /></a>
+        <a href="javascript:;" class="mailpoet_toggle"><br /></a>
-          <h3><%= __('Settings') %></h3>
+        <h3><%= __('Settings') %></h3>
 
-          <div>
+        <div>
-            <!-- Form settings -->
+          <!-- Form settings -->
           <form id="mailpoet_form_settings" action="" method="POST">
-            <div id="mailpoet_list_selection">
+            <div id="mailpoet_settings_list_selection">
               <!-- Form settings: list selection -->
               <p>
               <strong><%= __('This form adds subscribers to these lists:') %></strong>
               </p>
               <select name="lists" data-placeholder="<%= __('Choose a list') %>" multiple>
-                <option value="1" <% if 1 in form.data.settings.lists %>selected="selected"<% endif %>>My First list</option>
+                <% for list in lists %>
+                  <option value="<%= list.id %>"
+                    <% if list.id in form.data.settings.lists %>
+                      selected="selected"
+                    <% endif %>
+                  ><%= list.name %></option>
+                <% endfor %>
               </select>
               <!-- error if user tries to save and has not selected a list -->
-              <p class="mailpoet_error" data-error="admin_no_list"><%= __('You have to select at least 1 list') %></p>
+              <p class="mailpoet_error" data-error="admin_no_list">
+                <%= __('You have to select at least 1 list') %>
+              </p>
             </div>
 
             <div id="mailpoet_on_success">
@@ -51,11 +59,19 @@
               <p>
                 <label><strong><%= __('After submit...') %></strong></label>
                 <label>
-                  <input class="mailpoet_radio" type="radio" name="on_success" value="message" /><%= __('Show message') %>
+                  <input class="mailpoet_radio"
+                    type="radio"
+                    name="on_success"
+                    value="message"
+                  /><%= __('Show message') %>
                 </label>
                 &nbsp;
                 <label>
-                  <input class="mailpoet_radio" type="radio" name="on_success" value="page" /><%= __('Go to page') %>
+                  <input class="mailpoet_radio"
+                    type="radio"
+                    name="on_success"
+                    value="page"
+                  /><%= __('Go to page') %>
                 </label>
               </p>
               <!-- default success message -->
@@ -65,78 +81,88 @@
                 <% set success_message = __('Check your inbox now to confirm your subscription.') %>
               <% endif %>
 
-              <p id="mailpoet_on_success_message" class="mailpoet_on_success_option"><textarea name="success_message"><%= success_message %></textarea></p>
+              <p
-              <p id="mailpoet_on_success_page" class="mailpoet_on_success_option"><select name="success_page">
+                id="mailpoet_on_success_message"
-                <!-- $pages = get_pages() %>
+                class="mailpoet_on_success_option"
-                $success_page = (isset($form['data']['settings']['success_page']) && (int)$form['data']['settings']['success_page'] > 0) ? $form['data']['settings']['success_page'] : null;
+              >
-                foreach($pages as $key => $page) {
+                <textarea name="success_message"><%= success_message %></textarea>
-                  print '<option value="'.$page->ID.'">'.$page->post_title.'</option>';
+              </p>
-                }
+              <p
- -->
+                id="mailpoet_on_success_page"
-              </select></p>
+                class="mailpoet_on_success_option"
+              >
+                <select name="success_page">
+                  <% for page in pages %>
+                    <option value="<%= page.ID %>"
+                      <%- if form.data.settings.success_page != page.ID %>
+                        <%=- ' selected="selected"' %>
+                      <%- endif %>><%= page.post_title %></option>
+                  <% endfor %>
+                </select>
+              </p>
             </div>
           </form>
         </div>
-        </div>
+      </div>
 
         <!-- Toolbar: Shortcodes / Export -->
-        <div class="mailpoet_toolbar_section closed">
+        <div class="mailpoet_toolbar_section closed" data-section="shortcodes">
-        <a href="javascript:;" class="mailpoet_toggle"><br /></a>
+          <a href="javascript:;" class="mailpoet_toggle"><br /></a>
-        <h3><%= __('Shortcodes') %></h3>
+          <h3><%= __('Shortcodes') %></h3>
 
-        <div>
+          <div>
-          <!-- Form export links -->
+            <!-- Form export links -->
-          <p>
+            <p>
-            <%= __("You can easily add this form to your theme's in the %sWidgets area%s")
+              <%= __("You can easily add this form to your theme's in the %sWidgets area%s")
-              | format('<a href="widgets.php" target="_blank">', '</a>')
+                | format('<a href="widgets.php" target="_blank">', '</a>')
-              | raw
+                | raw
-            %>
+              %>
-         </p>
+           </p>
-          <p>
+            <p>
-            <%= __('%sHTML%s, %sPHP%s, %siframe%s and %sshortcode%s versions are also available.', 'wysija-newsletters')
+              <%= __('%sHTML%s, %sPHP%s, %siframe%s and %sshortcode%s versions are also available.', 'wysija-newsletters')
-              | format(
+                | format(
-                '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="html">',
+                  '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="html">',
-                '</a>',
+                  '</a>',
-                '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="php">',
+                  '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="php">',
-                '</a>',
+                  '</a>',
-                '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="iframe">',
+                  '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="iframe">',
-                '</a>',
+                  '</a>',
-                '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="shortcode">',
+                  '<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="shortcode">',
-                '</a>'
+                  '</a>'
-              )
+                )
-              | raw
+                | raw
-            %>
+              %>
-         </p>
+           </p>
 
-          <!-- Form export -->
+            <!-- Form export -->
-          <div id="mailpoet_form_export"></div>
+            <div id="mailpoet_form_export"></div>
-        </div>
+          </div>
         </div>
 
         <!-- Toolbar: Fields -->
-      <div class="mailpoet_toolbar_section closed">
+      <div class="mailpoet_toolbar_section closed" data-section="fields">
         <a href="javascript:;" class="mailpoet_toggle"><br /></a>
         <h3><%= __('Fields') %></h3>
 
         <div>
           <ul id="mailpoet_toolbar_fields">
           </ul>
-            <p class="mailpoet_align_center">
+          <p class="mailpoet_align_center">
-                <a id="mailpoet_form_add_field" class="button button-primary" href="javascript:;" style="width:100%;"><%= __('Add New Field') %></a>
+            <a id="mailpoet_form_add_field" class="button button-primary" href="javascript:;" style="width:100%;"><%= __('Add New Field') %></a>
-              </p>
+          </p>
-          </div>
+        </div>
 
       </div>
 
       <!-- Toolbar: Styles -->
-        <div class="mailpoet_toolbar_section closed">
+      <div class="mailpoet_toolbar_section closed" data-section="styles">
-          <a href="javascript:;" class="mailpoet_toggle"><br /></a>
+        <a href="javascript:;" class="mailpoet_toggle"><br /></a>
-          <h3><%= __('Styles') %></h3>
+        <h3><%= __('Styles') %></h3>
-          <div>
+        <div>
-            <textarea id="mailpoet_form_styles"><%= form.data.styles %></textarea>
+          <textarea id="mailpoet_form_styles"><%= styles %></textarea>
-          <br />
+        <br />
-          <p class="mailpoet_align_center"><a id="mailpoet_form_preview" href="javascript:;" class="button button-primary" style="width:100%;"><%= __('Preview') %></a></p>
+        <p class="mailpoet_align_center"><a id="mailpoet_form_preview" href="javascript:;" class="button button-primary" style="width:100%;"><%= __('Preview') %></a></p>
-        </div>
+      </div>
         </div>
 
     <!-- End | Form Editor: Toolbar -->
@@ -153,6 +179,7 @@
     'lib/codemirror/codemirror.js',
     'lib/codemirror/syntax_php.js',
     'lib/codemirror/syntax_css.js',
+    'lib/jquery.serializeObject.js',
     'form_editor.js'
   )%>
 
@@ -164,16 +191,6 @@
 
   <script type="text/javascript">
     jQuery(function($) {
-      $(function() {
-        // load form
-        WysijaForm.load(<%= form | json_encode | raw %>);
-
-        // initialize list selector
-        $('select[name="lists"]').select2({
-          width:'100%'
-        });
-      });
-
       function mailpoet_form_fields(data) {
         var template = Handlebars.compile(jQuery('#form_template_fields').html());
 
@@ -201,21 +218,19 @@
         },
         {
           name: "<%= __('First name') %>",
-          field: 'subscriber_firstname',
+          field: 'firstname',
           type: 'input',
           params: {
-            label: "<%= __('First name') %>",
+            label: "<%= __('First name') %>"
-            required: true
           },
           readonly: true
         },
         {
           name: "<%= __('Last name') %>",
-          field: 'subscriber_lastname',
+          field: 'lastname',
           type: 'input',
           params: {
-            label: "<%= __('Last name') %>",
+            label: "<%= __('Last name') %>"
-            required: true
           },
           readonly: true
         },
@@ -225,7 +240,7 @@
           type: 'list',
           params: {
             label: "<%= __('Select list(s):') %>",
-            values: [ ] // default list
+            values: [ <%= default_list | json_encode | raw %> ] // default list
           },
           readonly: true
         },
@@ -243,16 +258,283 @@
 
       // toolbar sections
       $(document).on('click', '.mailpoet_toolbar_section.closed', function() {
-        $('.mailpoet_toolbar_section').addClass('closed');
+          // close currently opened section
-        $(this).removeClass('closed');
+          $('.mailpoet_toolbar_section:not(.closed)').addClass('closed');
+          // open selected section after a mini delay
+          setTimeout(function() { $(this).removeClass('closed'); }.bind(this), 250);
+          return false;
+      });
+
+      // toolbar: open default section
+      $('.mailpoet_toolbar_section[data-section="settings"]').removeClass('closed');
+
+      // form: edit name (in place editor)
+      $('#mailpoet_form_edit_name').on('click', function() {
+        mailpoet_edit_form_name();
         return false;
       });
 
-      var meta_fields = [];
+      $('#mailpoet_form_name_input').on('keypress', function(e) {
+        if(e.which === 13) {
+          mailpoet_edit_form_name();
+          return false;
+        }
+      })
 
-      // render toolbar
+      function mailpoet_edit_form_name() {
-      mailpoet_form_fields({
+        var is_editing = $('#mailpoet_form_name').data('mailpoet_editing') || false;
-        fields: $.merge(meta_fields, default_fields)
+
+        if(!is_editing) {
+          // set input value and show
+          $('#mailpoet_form_name_input').val($('#mailpoet_form_name').text()).show();
+
+          // set editing mode
+          $('#mailpoet_form_name').data('mailpoet_editing', true);
+
+          // hide form name
+          $('#mailpoet_form_name').hide();
+
+          // focus on text input
+          $('#mailpoet_form_name_input').focus();
+
+          // set edit name label
+          $('#mailpoet_form_edit_name').html("<%= __('Save') %>");
+        } else {
+          var current_value = $('#mailpoet_form_name').html(),
+            new_value = $('#mailpoet_form_name_input').val();
+
+          // hide text input
+          $('#mailpoet_form_name_input').hide();
+
+          // set value
+          $('#mailpoet_form_name').text(new_value);
+
+          // set editing mode
+          $('#mailpoet_form_name').data('mailpoet_editing', false);
+
+          // show form name
+          $('#mailpoet_form_name').show();
+
+          // set edit name label
+          $('#mailpoet_form_edit_name').text("<%= __('Edit name') %>");
+
+          // save change if necessary
+          if(new_value !== '' && current_value !== new_value) {
+            console.log('TODO: form->save', {
+              form: <%= form.form %>,
+              form_name: new_value,
+            });
+            MailPoet.Notice.success("<%= __('Form name successfully updated!') %>");
+          }
+        }
+      }
+
+      // on dom loaded
+      $(function() {
+
+        // load form
+        WysijaForm.load(<%= form | json_encode | raw %>);
+
+        // save form
+        $('#mailpoet_form_save').on('click', function() {
+          mailpoet_form_save();
+          return false;
+        });
+
+        // preview form
+        $(document).on('click', '#mailpoet_form_preview', function() {
+          mailpoet_form_save(mailpoet_form_preview);
+          return false;
+        });
+
+        function mailpoet_form_preview() {
+          console.log('TODO: form->preview');
+          /*
+          MailPoet.Modal.popup({
+            title: "<%= __('Form preview') %>",
+            template: $('#mailpoet_form_preview_template').html(),
+            data: response
+          });*/
+        }
+
+        mailpoet_form_export();
+
+        function mailpoet_form_save(callback) {
+          console.log('TODO: form->save');
+
+          // if there is a callback, call it!
+          if(callback !== undefined) {
+            callback();
+          }
+          /*mailpoet_post_json('form_save.php', {
+            form: <%= form.form %>,
+            data: WysijaForm.save()
+          }, function(response) {
+            if(response.result === false) {
+              var error = null;
+              if(response.error !== undefined) {
+                // display custom error message
+                error = $('.mailpoet_error[data-error="'+response.error+'"]');
+              }
+
+              if(error !== null) {
+                $(error).show();
+              } else {
+                // display unknown error message
+                MailPoet.Notice.error("<%= __('An unknown error occurred. Please try again or get in touch with our support.') %>", { scroll: true });
+              }
+            } else {
+              // if there is a callback, call it!
+              if(callback !== undefined) {
+                callback();
+              } else {
+                // otherwise display a success message
+
+                  $success_message = str_replace(array(
+                                 '[link_widget]',
+                                 '[/link_widget]'
+                              ), array(
+                                  '<a href="'.admin_url('widgets.php').'" target="_blank">',
+                                  '</a>'
+                              ),
+                              __('Saved! Add this form to [link_widget]a widget[/link_widget].')
+                          );
+                ?>
+                var success_message = "<?php echo addslashes($success_message); ?>";
+
+                if(response.is_widget === true) {
+                  success_message = "<?php esc_html_e("Saved! The changes are already active in your widget."); ?>";
+                      }
+
+                      // display success message and scroll to it
+                      MailPoet.Notice.hide(true);
+                MailPoet.Notice.success(success_message, { scroll: true, static: true });
+              }
+            }
+          });*/
+        }
+
+        // toolbar: on success toggle
+        $(document).on('change', 'input[name="on_success"]', toggleOnSuccessOptions);
+        toggleOnSuccessOptions();
+
+        function toggleOnSuccessOptions() {
+          // hide all options
+          $('.mailpoet_on_success_option').hide();
+
+          // display selected option
+          var value = $('input[name="on_success"]:checked').val();
+          $('#mailpoet_on_success_'+value).show();
+        }
+
+        function mailpoet_form_export() {
+          var template = Handlebars.compile($('#form_template_exports').html());
+          $('#mailpoet_form_export').html(template({ exports: <%= exports | json_encode | raw %> }));
+        }
+
+        $(document).on('click', '.mailpoet_form_export_toggle', function() {
+          $('.mailpoet_form_export_output').hide();
+          $('#mailpoet_form_export_'+$(this).data('type')).show();
+          return false;
+        });
+
+        // add new field
+        $(document).on('click', '#mailpoet_form_add_field', function() {
+          // open popup
+          MailPoet.Modal.popup({
+            title: "<%= __('Add new field') %>",
+            template: $('#form_template_field_new').html(),
+            onSuccess: function(data) {
+              // toggle widgets
+              WysijaForm.toggleWidgets();
+            }
+          });
+
+          return false;
+        });
+
+        // edit field
+        $(document).on('click', '.mailpoet_form_field_edit', function() {
+          var field = $(this).data('field');
+
+          MailPoet.Modal.popup({
+            title: "<%= __('Edit field') %>",
+            template: $('#form_template_field_new').html(),
+            //url: mailpoet_api_url('subscriber_get_meta.php?field='+field),
+            onSuccess: function(data) {
+              console.log('TODO: field->edit');
+              /*mailpoet_get_json('subscriber_get_meta.php', { field: data.field }, function(data) {
+                // update field in form
+                var block_id = $('.mailpoet_form_block[wysija_field="'+field+'"]');
+                if(block_id.length > 0) {
+                  // redraw block
+                  WysijaForm.get(block_id[0]).block.redraw(data);
+                  // save form
+                  mailpoet_form_save();
+                }
+                // toggle widgets
+                WysijaForm.toggleWidgets();
+              });*/
+            }
+          });
+        });
+
+        // delete field
+        $(document).on('click', '.mailpoet_form_field_delete', function() {
+          var field = $(this).data('field');
+
+          if(window.confirm("<%= __('Do you really want to delete this custom field?') %>")) {
+            // delete field
+            console.log('TODO subscriber->meta->delete');
+            /*mailpoet_post_json('subscriber_delete_meta.php', { field: field }, function(response) {
+              var fields = (response.fields !== undefined) ? (response.fields || []) : [];
+
+              // refresh toolbar
+              mailpoet_form_fields({
+                fields: $.merge(fields, default_fields)
+              });
+
+              // delete field in form
+              // remove any instance of the field present in the form
+              var blocks = $$('#mailpoet_form_body .mailpoet_form_block[wysija_field="'+field+'"]');
+              if(blocks.length > 0) {
+                var block = WysijaForm.get(blocks[0]);
+                block.removeBlock();
+              }
+            });*/
+          }
+        });
+
+        // undo button
+        $(document).on('click', '#mailpoet_form_undo', function() {
+          // pop last element off the history
+          WysijaHistory.dequeue();
+
+          // init wysija form
+          WysijaForm.init();
+          return false;
+        });
+
+        // toolbar: list selection
+        var selected_lists = <%= selected_lists | json_encode | raw %>,
+          selected_lists_ids = selected_lists.map(function(list) { return parseInt(list.list, 10); });
+        //  enable select2 for list selection
+        $('select[name="lists"]').select2({
+          width:'100%'
+        });
+
+        // subscriber meta fields
+        var meta_fields = [
+          {"name":"CF text input (mandatory + numbers only)","field":"627e1c8d4fe97712836484e0f2377abd","type":"input","params":{"required":"1","validate":"onlyNumberSp","label":"CF text input (mandatory + numbers only)"}},
+          {"name":"CF text area (no validation)","field":"6607e6e447b89384c59adc124e979d6b","type":"textarea","params":{"required":"","validate":"","label":"CF text area (no validation)"}},
+          {"name":"CF text area (letters only)","field":"47a9cae88f8b3b3e23a16990922e7905","type":"textarea","params":{"required":"","validate":"onlyLetterSp","label":"CF text area (letters only)"}},
+          {"name":"CF radio (mandatory)","field":"5f01b4ccc146fdd6b889bab63dc1b5cd","type":"radio","params":{"values":[{"value":"un"},{"is_checked":"1","value":"deux"},{"value":"trois"}],"required":"1","label":"CF radio (mandatory)"}}
+        ];
+
+        // toolbar: fiels
+        mailpoet_form_fields({
+          fields: $.merge(meta_fields, default_fields)
+        });
       });
     });
   </script>
@@ -294,8 +576,7 @@
   <%= partial('field_settings_date_formats', 'form/templates/settings/date_formats.hbs') %>
   <%= partial('field_settings_date_type', 'form/templates/settings/date_types.hbs') %>
   <%= partial('field_settings_list_selection_item', 'form/templates/settings/list_selection_item.hbs') %>
-  <%= partial('field_settings_list_selection', 'form/templates/settings/list_selection.hbs') %>
+  <%= partial('field_settings_list_selection', 'form/templates/settings/list_selection.hbs', '_settings_list_selection') %>
-  <%= partial() %>
 
   <!-- custom field: new -->
   <%= partial('form_template_field_new', 'form/templates/settings/field_new.hbs') %>
@@ -307,6 +588,7 @@
   <script id="form_template_field_input" type="text/x-handlebars-template">
     {{> _settings_required }}
     {{> _settings_validate }}
+    heyh
   </script>
 
   <script id="form_template_field_textarea" type="text/x-handlebars-template">

views/form/templates/blocks/container.hbs

@@ -2,7 +2,7 @@
   wysija_type="{{ type }}"
   wysija_field="{{ field }}"
   wysija_name="{{ name }}"
-  wysija_unique="{{#if unique}}1{{else}}0{{/if}}"
+  wysija_unique="{{#if multiple}}0{{else}}1{{/if}}"
   wysija_static="{{#if static}}1{{else}}0{{/if}}"
   wysija_params="{{#if params}}{{ json_encode params }}{{/if}}">
   {{#ifCond type '!==' 'divider'}}

views/form/templates/blocks/list.hbs

@@ -2,6 +2,6 @@
 {{#unless params.values}}<p class="mailpoet_error"><%= __('You have to select at least 1 list') %></p>{{/unless}}
 {{#each params.values}}
   <p>
-    <input class="mailpoet_checkbox" type="checkbox" data-list-id="{{ list_id }}" {{#if is_checked}}checked="checked"{{/if}} disabled="disabled" />{{ list_name }}
+    <input class="mailpoet_checkbox" type="checkbox" data-list-id="{{ id }}" {{#if is_checked}}checked="checked"{{/if}} disabled="disabled" />{{ name }}
   </p>
 {{/each}}

views/form/templates/settings/field.hbs

@@ -1,63 +1,66 @@
 <form id="form_field_settings" name="form_field_settings" action="" method="post">
   {{#ifCond type 'in' 'submit'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
   {{/ifCond}}
 
   {{#ifCond type '==' 'input'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
-  {{> _settings_label_within }}
+    {{> _settings_label_within }}
+    {{#ifCond field 'in' 'firstname,lastname' }}
+      {{> _settings_required }}
+    {{/ifCond}}
   {{/ifCond}}
 
   {{#ifCond type '==' 'textarea'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
-  {{> _settings_label_within }}
+    {{> _settings_label_within }}
 
-  <p class="clearfix">
+    <p class="clearfix">
-    <label><%= __('Number of lines:') %></label>
+      <label><%= __('Number of lines:') %></label>
-    <select name="params[lines]">
+      <select name="params[lines]">
-      <% for i in 1..5 %>
+        <% for i in 1..5 %>
-        <option value="<%= i %>"
+          <option value="<%= i %>"
-          {{#ifCond params.lines '==' <%= i %>}}selected="selected"{{/ifCond}}
+            {{#ifCond params.lines '==' <%= i %>}}selected="selected"{{/ifCond}}
-        ><%= _n('1 line', '%d lines', i) | format(i) %></option>
+          ><%= _n('1 line', '%d lines', i) | format(i) %></option>
-      <% endfor %>
+        <% endfor %>
-    </select>
+      </select>
-  </p>
+    </p>
   {{/ifCond}}
 
   {{#ifCond type 'in' 'checkbox,radio'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
   {{/ifCond}}
 
   {{#ifCond type '==' 'list'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
-  {{> _settings_list_selection }}
+    {{> _settings_list_selection }}
   {{/ifCond}}
 
   {{#ifCond type '==' 'select'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
-  {{> _settings_label_within }}
+    {{> _settings_label_within }}
   {{/ifCond}}
 
   {{#ifCond type '==' 'date'}}
-  {{> _settings_label }}
+    {{> _settings_label }}
-  {{> _settings_date_default }}
+    {{> _settings_date_default }}
-  {{> _settings_date_format }}
+    {{> _settings_date_format }}
   {{/ifCond}}
 
   {{#ifCond type '==' 'html'}}
-  <textarea name="params[text]">{{ params.text }}</textarea>
+    <textarea name="params[text]">{{ params.text }}</textarea>
-  <p class="clearfix">
+    <p class="clearfix">
-    <label>
+      <label>
-      <input type="hidden" name="params[nl2br]" value="0" />
+        <input type="hidden" name="params[nl2br]" value="0" />
-      <input
+        <input
-        class="mailpoet_checkbox"
+          class="mailpoet_checkbox"
-        type="checkbox"
+          type="checkbox"
-        name="params[nl2br]"
+          name="params[nl2br]"
-        {{#ifCond params.nl2br ">" 0}}checked="checked"{{/ifCond}}
+          {{#ifCond params.nl2br ">" 0}}checked="checked"{{/ifCond}}
-        value="1"
+          value="1"
-        />&nbsp;<%= __('Automatically add paragraphs') %>
+          />&nbsp;<%= __('Automatically add paragraphs') %>
-    </label>
+      </label>
-  </p>
+    </p>
   {{/ifCond}}
 
   {{> _settings_submit }}

views/form/templates/settings/field_new.hbs

@@ -70,25 +70,26 @@
       // hide errors
       $('.mailpoet_error').hide();
 
-      mailpoet_post_json('subscriber_extend.php', data, function(response) {
+      console.log(('TODO: subscriber->meta->edit'));
-        if(response.error !== undefined) {
+      // mailpoet_post_json('subscriber_extend.php', data, function(response) {
-          // there's an error!
+      //   if(response.error !== undefined) {
-          $('.mailpoet_error[data-error="'+response.error+'"]').show();
+      //     // there's an error!
-        } else {
+      //     $('.mailpoet_error[data-error="'+response.error+'"]').show();
-          // we should get the fields list in the response
+      //   } else {
-          if(response.fields !== undefined) {
+      //     // we should get the fields list in the response
-            // get fields (defaults to empty array)
+      //     if(response.fields !== undefined) {
-            var fields = response.fields || [];
+      //       // get fields (defaults to empty array)
-            // refresh toolbar
+      //       var fields = response.fields || [];
-            mailpoet_form_fields({
+      //       // refresh toolbar
-              fields: $.merge(fields, default_fields)
+      //       mailpoet_form_fields({
-            });
+      //         fields: $.merge(fields, default_fields)
-          }
+      //       });
+      //     }
 
-          // close popup
+      // close popup
-          MailPoet.Modal.success();
+      MailPoet.Modal.success();
-        }
+      //   }
-      });
+      // });
       return false;
     });
 
@@ -118,4 +119,4 @@
       }
     }
   });
-<{{!}}/script>
+</script>

views/form/templates/settings/list_selection.hbs

@@ -2,7 +2,7 @@
   <%= __('You need to specify at least 1 list.') %>
 </p>
 
-<ul class="mailpoet_list_selection clearfix"></ul>
+<ul id="mailpoet_list_selection" class="clearfix"></ul>
 
 <div id="mailpoet_list_available_container">
   <h3><%= __('Select the list you want to add:') %></h3>
@@ -13,6 +13,7 @@
 </div>
 
 <script type="text/javascript">
+  <% autoescape false %>
   var selected_lists = {{#if params.values}}{{{ json_encode params.values }}}
     {{else}}<%= default_list | json_encode %>{{/if}},
   available_lists = [
@@ -20,6 +21,7 @@
       <%= list | json_encode %>,
     <% endfor %>
   ];
+  <% endautoescape %>
 
   jQuery(function($) {
     $(function() {
@@ -28,6 +30,11 @@
 
       setInputNames();
 
+      // make list selection sortable
+      Sortable.create('mailpoet_list_selection', {
+        handles: $$('#mailpoet_list_selection .handle')
+      });
+
       // add list
       $('.mailpoet_list_add').on('click', function() {
         // add currently selected list to the selection
@@ -50,14 +57,14 @@
       });
 
       // remove list
-      $('.mailpoet_list_selection').on('click', '.remove', function() {
+      $('#mailpoet_list_selection').on('click', '.remove', function() {
         var element = $(this).parents('li');
         // remove currently selected list to the selection
         var selected_list = parseInt(element.data('list'), 10);
 
         // remove list from selection
         selected_lists = selected_lists.filter(function(list) {
-          return (parseInt(list.list, 10) !== selected_list);
+          return (parseInt(list.id, 10) !== selected_list);
         });
 
         // remove element
@@ -72,15 +79,15 @@
 
     function mailpoet_list_available_render() {
       // get selected lists ids
-      var selected_lists_ids = selected_lists.map(function(list) { return parseInt(list.list, 10); });
+      var selected_lists_ids = selected_lists.map(function(list) { return parseInt(list.id, 10); });
 
       // clear available lists
       $('.mailpoet_list_available').html('');
 
       // display available lists
       $.each(available_lists, function(i, list) {
-        if($.inArray(list.list, selected_lists_ids) < 0) {
+        if($.inArray(list.id, selected_lists_ids) < 0) {
-          $('.mailpoet_list_available').append('<option value="'+list.list+'">'+list.list_name+'</option>');
+          $('.mailpoet_list_available').append('<option value="'+list.id+'">'+list.name+'</option>');
         }
       });
 
@@ -92,7 +99,7 @@
       var template = Handlebars.compile($('#field_settings_list_selection_item').html());
 
       // update view
-      $('.mailpoet_list_selection').html(template({ lists: selected_lists }));
+      $('#mailpoet_list_selection').html(template({ lists: selected_lists }));
 
       mailpoet_list_available_toggle();
     }
@@ -107,10 +114,10 @@
     }
 
     function setInputNames() {
-      $('.mailpoet_list_selection li').each(function(index, item) {
+      $('#mailpoet_list_selection li').each(function(index, item) {
         $(item).find('.mailpoet_is_checked').attr('name', 'params[values]['+index+'][is_checked]');
-        $(item).find('.mailpoet_list_id').attr('name', 'params[values]['+index+'][list]');
+        $(item).find('.mailpoet_list_id').attr('name', 'params[values]['+index+'][id]');
-        $(item).find('.mailpoet_list_name').attr('name', 'params[values]['+index+'][list_name]');
+        $(item).find('.mailpoet_list_name').attr('name', 'params[values]['+index+'][name]');
       });
     }
   });

views/form/templates/settings/list_selection_item.hbs

@@ -1,11 +1,11 @@
 {{#each lists}}
-<li data-list="{{ list }}">
+<li data-list="{{ id }}">
   <label>
-    <input class="mailpoet_list_id" type="hidden" value="{{ list }}" />
+    <input class="mailpoet_list_id" type="hidden" value="{{ id }}" />
     <input class="mailpoet_is_checked" type="checkbox" value="1"
       {{#ifCond is_checked '>' 0}}checked="checked"{{/ifCond}} />
-    <input class="mailpoet_list_name" type="hidden" value="{{ list_name }}" />
+    <input class="mailpoet_list_name" type="hidden" value="{{ name }}" />
-    {{ list_name }}
+    {{ name }}
   </label>
   <a class="remove" href="javascript:;"><%= __('Remove') %></a>
   <a class="handle" href="javascript:;"><%= __('Move') %></a>