steps extension fixes and compat with addFields

README.md

@@ -515,10 +515,10 @@ Steps adds the following options to Ideal Forms:
 
 ```javascript
 {
-  stepsContainer: 'idealsteps-container', // the main container
-  stepsOptions: { // the options for the Steps extension
-    nav: '.idealsteps-nav',
-    navItems: 'li',
+  steps: {
+    container: 'idealsteps-container', // the main container
+    nav: '.idealsteps-nav', // navigation
+    navItems: 'li', // navigation element that receives events
     // Build nav items as "Step 1", "Step 2"... automatically
     // Set to `false` to use your own custom markup
     buildNavItems: true,
@@ -554,6 +554,12 @@ Go to the first step.
 
 Go to the last step.
 
+Steps adds the `appendToStep:index` option to `addFields`:
+
+```javascript
+$('form').addFields({ 'newfield': { type: 'text', label: 'New Field', appendToStep: 1 }});
+```
+
 ### Extension: Custom Inputs
 
 Adds custom checkboxes, radios and file inputs (yes!) seamlessly. The custom select menu has been dropped from Ideal Forms 3; it was proving to be a pain to maintain, and there are much better alternatives, such as [Select2](http://ivaynberg.github.io/select2/) if you need them.

js/extensions/dynamic-fields/dynamic-fields.ext.js

@@ -66,23 +66,30 @@ module.exports = {
       $.each(fields, function(name, field) {
 
         var typeArray = field.type.split(':')
-          , rules = {};
+          , rules = {}
+          , $last = self.$form.find(self.opts.field).last()
+          , html;
 
         field.name = name;
         field.type = typeArray[0];
         if (typeArray[1]) field.subtype = typeArray[1];
 
-        var html = template(self.opts.templates.base, {
+        html = template(self.opts.templates.base, {
           label: field.label,
           field: template(self.opts.templates[field.type], field)
         });
 
+        self._inject('addFields', field);
+
         if (field.after || field.before) {
-          self.$form.find('[name='+ (field.after || field.before) +']').each(function() {
+          self.$form.find('[name="'+ (field.after || field.before) +'"]').first().each(function() {
             self._getField(this)[field.after ? 'after' : 'before'](html);
           });
         } else {
-          self.$form.find(self.opts.field).last().after(html);
+          // Form has at least one field
+          if ($last.length) $last.after(html);
+          // Form has no fields
+          else self.$form.append(html);
         }
 
         if (field.rules) {
@@ -91,7 +98,6 @@ module.exports = {
         }
       });
 
-      this._inject('addFields');
     },
 
     removeFields: function(names) {

js/extensions/steps/steps.ext.js

@@ -5,8 +5,18 @@ module.exports = {
   name: 'steps',
 
   options: {
-    stepsContainer: '.idealsteps-container',
-    stepsOptions: {}
+    steps: {
+      container: '.idealsteps-container',
+      nav: '.idealsteps-nav',
+      navItems: 'li',
+      buildNavItems: true,
+      wrap: '.idealsteps-wrap',
+      step: '.idealsteps-step',
+      activeClass: 'idealsteps-step-active',
+      before: null,
+      after: null,
+      fadeSpeed: 0
+    }
   },
 
   methods: {
@@ -50,11 +60,15 @@ module.exports = {
           ? '<span class="counter"/>'
           : '<span class="counter zero">0</span>';
 
-      options = $.extend({}, {
-        buildNavItems: function(i){ return 'Step '+ (i+1) + counter }
-      }, this.opts.stepsOptions);
+      if (this.opts.steps.buildNavItems === true) {
+        this.opts.steps.buildNavItems = function(i) {
+          return 'Step '+ (i+1) + counter;
+        };
+      }
 
-      this.$stepsContainer = this.$form.closest(this.opts.stepsContainer).idealsteps(options);
+      this.$stepsContainer = this.$form
+        .closest(this.opts.steps.container)
+        .idealsteps(this.opts.steps);
     },
 
     _updateSteps: function() {
@@ -77,6 +91,15 @@ module.exports = {
       this.firstStep();
     },
 
+    // @extend
+    addFields: function(field) {
+      field.after = this.$stepsContainer
+        .find(this.opts.steps.step)
+        .eq(field.appendToStep)
+        .find('input, textarea, select')
+        .last()[0].name;
+    },
+
     // @extend
     toggleFields: function() {
       this._updateSteps();