Merge pull request #35 from antoniojunyor/master

Creating a method to multiply form

source/assets/javascripts/locastyle.js

@@ -5,6 +5,7 @@
 //= require locastyle/_hopscotch
 //= require locastyle/_guided_tour
 //= require locastyle/_equal_height
+//= require locastyle/_duplicate_form
 //= require locastyle/_password_strength
 //= require locastyle/_step_form
 //= require locastyle/_sum_values

source/assets/javascripts/locastyle/_duplicate_form.js

@@ -0,0 +1,65 @@
+Locastyle.prototype.duplicateForm = (function() {
+  'use strict';
+
+  function init() {
+    multiplyForm();
+    verifyFormNumbers();
+    addValueToDataForm();
+    removeForm();
+  }
+
+  var config = {
+    selectors: {
+      form: '[data-form]',
+      parent: '[data-form-parent]'
+    },
+    classes: {
+      hide: 'dNone'
+    },
+    actions: {
+      duplicate: '[data-duplicate-form]',
+      remove: '[data-remove-form]'
+    }
+  };
+
+  function multiplyForm() {
+    $(config.actions.duplicate).on('click', function(el) {
+      el.preventDefault();
+      var cloneLast = $(config.selectors.form).last().clone();
+      cloneLast.appendTo(config.selectors.parent);
+
+      addValueToDataForm();
+      verifyFormNumbers();
+      removeForm();
+    });
+  }
+
+  function addValueToDataForm() {
+    $(config.selectors.form).each(function(i, el) {
+      $(el).attr('data-form', i);
+    });
+  }
+
+  function verifyFormNumbers() {
+    if ($(config.selectors.form).length > 1) {
+      $(config.actions.remove).removeClass(config.classes.hide);
+    } else {
+      $(config.actions.remove).addClass(config.classes.hide);
+    }
+  }
+
+  function removeForm() {
+    $(config.actions.remove).on('click', function(el) {
+      el.preventDefault();
+      if($(config.selectors.form).length > 1) {
+        $(this).parents().eq(1).remove();
+      }
+      verifyFormNumbers();
+    });
+  }
+
+  return {
+    init: init
+  };
+
+}());

source/assets/javascripts/locastyle/_initializer.js

@@ -5,4 +5,5 @@ $(window).load(function() {
   locastyle.passwordStrength.init();
   locastyle.sumValues.init();
   locastyle.equalHeight.init();
+  locastyle.duplicateForm.init();
 });

source/manual/formularios/multiplicando-campos.html.erb

@@ -0,0 +1,63 @@
+---
+title: Formulários - Multiplicando Campos
+menu_page: sidebar-formularios.erb
+---
+
+<article class="text">
+  <header>
+    <h1>Multiplicando Formulários</h1>
+    <h3>Como multiplicar campos dentro de um formulários</h3>
+  </header>
+
+  <div class="example">
+    <form action="#" class="form">
+      <div class="row">
+        <div data-form-parent class="dInlineBlock">
+          <div class="dInlineBlock" data-form>
+            <div class="control-group span3">
+              <label for="type" class="dNone">Select</label>
+              <select name="" id="">
+                <option value="1">Opção 1</option>
+                <option value="1">Opção 2</option>
+              </select>
+            </div>
+            <div class="control-group span6">
+              <label for="" class="dNone">Campo</label>
+              <input type="text" class="span6" placeholder="Campo">
+            </div>
+            <div class="control-group span2">
+              <a href="#" class="btn ico-hifen dNone" data-remove-form></a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a href="#" class="btn" data-duplicate-form>Adicionar</a>
+    </form>
+  </div>
+
+<pre class="lang-html prettyprint linenums">
+&lt;form action="#" class="form"&gt;
+  &lt;div class="row"&gt;
+    &lt;div data-form-parent class="dInlineBlock"&gt;
+      &lt;div class="dInlineBlock" data-form&gt;
+        &lt;div class="control-group span3"&gt;
+          &lt;label for="type" class="dNone"&gt;Select&lt;/label&gt;
+          &lt;select&gt;
+            &lt;option value="1"&gt;Opção 1&lt;/option&gt;
+            &lt;option value="1"&gt;Opção 2&lt;/option&gt;
+          &lt;/select&gt;
+        &lt;/div&gt;
+        &lt;div class="control-group span6"&gt;
+          &lt;label class="dNone"&gt;Campo&lt;/label&gt;
+          &lt;input type="text" class="span6" placeholder="Campo"&gt;
+        &lt;/div&gt;
+        &lt;div class="control-group span2"&gt;
+          &lt;a href="#" class="btn ico-hifen dNone" data-remove-form&gt;&lt;/a&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;a href="#" class="btn" data-duplicate-form&gt;Adicionar&lt;/a&gt;
+&lt;/form&gt;
+</pre>
+</article>

source/partials/_sidebar-formularios.erb

@@ -9,5 +9,6 @@
 		<li><%= link_to "Customizando os selects", "#{base_url}/manual/formularios/selects" %></li>
 		<li><%= link_to "Medidor de senha", "#{base_url}/manual/formularios/medidor-senhas" %></li>
 		<li><%= link_to "Alternando campos", "#{base_url}/manual/formularios/alternando-campos" %></li>
+		<li><%= link_to "Multiplicando Campos", "#{base_url}/manual/formularios/multiplicando-campos" %></li>
 	</ul>
 </nav>