WIP

Author: kirs

app/assets/javascripts/link_helpers.js

@@ -1,21 +1,80 @@
 (function($) {
+  var activeFormHelpers = {
+    generateResourceId: function() {
+      return new Date().getTime();
+    },
+    decodeHtml: function(input){
+      var e = document.createElement('div');
+      e.innerHTML = input;
+      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
+    },
+  };
 
-  var createNewResourceID = function() {
-    return new Date().getTime();
-  }
+  $.fn.removeFormField = function(nodeToDelete) {
+    // maybe nodeToDelete could be field index
+
+    this.trigger('before-remove', [nodeToDelete]);
+
+    var timeout = this.data('remove-timeout') || 0;
+
+    console.log(nodeToDelete)
+    var input = nodeToDelete.find("input").filter(function(i, t) {
+      console.log(t, $(t).attr("name"))
+      return false
+    })
+
+    var context = this;
+    setTimeout(function() {
+      if (isDynamic) {
+          nodeToDelete.remove();
+      } else {
+          nodeToDelete.find("input[type=hidden]").val("1");
+          nodeToDelete.hide();
+      }
+      context.trigger('after-remove', [nodeToDelete]);
+    }, timeout);
+
+    return this
+  };
+
+  $.fn.addFormField = function(assoc, options) {
+    if(options == undefined) {
+      options = {}
+    }
+    var selector = "." + assoc + "_template";
+    var contentTemplate = this.find(selector)
+
+    if(contentTemplate.length == 0) {
+      contentTemplate = this.siblings().filter(selector)
+    }
+
+    var newId = activeFormHelpers.generateResourceId();
+    var regex = new RegExp("new_" + assoc, "g");
+    var content = contentTemplate.text().replace(regex, newId);
+    var contentNode = $(activeFormHelpers.decodeHtml(content));
+
+    if(!options.insertionMethod) {
+      options.insertionMethod = 'before';
+    }
+
+    this.trigger('before-insert', [contentNode]);
+
+    var addedContent = this[options.insertionMethod](contentNode);
+
+    this.trigger('after-insert', [contentNode]);
+
+    return this;
+  };
 
   $(document).on('click', '.add_fields', function(e) {
     e.preventDefault();
 
     var $link = $(this);
+    var form = $link.parents("form").eq(0);
     var assoc = $link.data('association');
-    var content = $link.data('association-insertion-template');
-    var insertionMethod = $link.data('association-insertion-method') || $link.data('association-insertion-position') || 'before';
+    var insertionMethod = $link.data('association-insertion-method') || $link.data('association-insertion-position');
     var insertionNode = $link.data('association-insertion-node');
     var insertionTraversal = $link.data('association-insertion-traversal');
-    var newId = createNewResourceID();
-    var regex = new RegExp("new_" + assoc, "g");
-    var newContent = content.replace(regex, newId);
 
     if (insertionNode){
       if (insertionTraversal){
@@ -27,12 +86,10 @@
       insertionNode = $link.parent();
     }
 
-    var contentNode = $(newContent);
-    insertionNode.trigger('before-insert', [contentNode]);
-
-    var addedContent = insertionNode[insertionMethod](contentNode);
-
-    insertionNode.trigger('after-insert', [contentNode]);
+    insertionNode.addFormField(assoc, {
+      insertionMethod: insertionMethod,
+      insertionTraversal: insertionTraversal,
+    })
   });
 
   $(document).on('click', '.remove_fields.dynamic, .remove_fields.existing', function(e) {
@@ -41,21 +98,10 @@
     var $link = $(this);
     var wrapperClass = $link.data('wrapper-class') || 'nested-fields';
     var nodeToDelete = $link.closest('.' + wrapperClass);
-    var triggerNode = nodeToDelete.parent();
 
-    triggerNode.trigger('before-remove', [nodeToDelete]);
-
-    var timeout = triggerNode.data('remove-timeout') || 0;
+    var triggerNode = nodeToDelete.parent();
 
-    setTimeout(function() {
-      if ($link.hasClass('dynamic')) {
-          nodeToDelete.remove();
-      } else {
-          $link.prev("input[type=hidden]").val("1");
-          nodeToDelete.hide();
-      }
-      triggerNode.trigger('after-remove', [nodeToDelete]);
-    }, timeout);
+    triggerNode.removeFormField(nodeToDelete, $link.hasClass('dynamic'))
   });
 
 })(jQuery);

lib/active_form/view_helpers.rb

@@ -7,7 +7,7 @@ def link_to_remove_association(name, f, html_options={})
 
       is_existing = f.object.persisted?
       classes << (is_existing ? 'existing' : 'dynamic')
-      
+
       wrapper_class = html_options.delete(:wrapper_class)
       html_options[:class] = [html_options[:class], classes.join(' ')].compact.join(' ')
       html_options[:'data-wrapper-class'] = wrapper_class if wrapper_class.present?
@@ -21,35 +21,38 @@ def link_to_remove_association(name, f, html_options={})
 
     def render_association(association, f, new_object, render_options={}, custom_partial=nil)
       partial = get_partial_path(custom_partial, association)
-      
+
       if f.respond_to?(:semantic_fields_for)
         method_name = :semantic_fields_for
       elsif f.respond_to?(:simple_fields_for)
         method_name = :simple_fields_for
       else
         method_name = :fields_for
       end
-      
+
       f.send(method_name, association, new_object, {:child_index => "new_#{association}"}.merge(render_options)) do |builder|
         render(partial: partial, locals: {:f => builder})
       end
     end
 
     def link_to_add_association(name, f, association, html_options={})
-      render_options = html_options.delete(:render_options)
-      render_options ||= {}
-      override_partial = html_options.delete(:partial)
-
       html_options[:class] = [html_options[:class], "add_fields"].compact.join(' ')
       html_options[:'data-association'] = association.to_s
 
+      link_to(name, '#', html_options)
+    end
+
+    def render_association_template(f, association, html_options={})
+      render_options = html_options.delete(:render_options)
+      render_options ||= {}
+      override_partial = html_options.delete(:partial)
       new_object = create_object(f, association)
 
-      html_options[:'data-association-insertion-template'] = CGI.escapeHTML(render_association(association, f, new_object, render_options, override_partial).to_str).html_safe
-        
-      link_to(name, '#', html_options)
+      content_tag :script, class: "association_template #{association}_template", type: "text/plain" do
+        CGI.escapeHTML(render_association(association, f, new_object, render_options, override_partial)).html_safe
+      end
     end
-    
+
     def create_object(f, association)
       f.object.get_model(association)
     end

test/dummy/.ruby-version

@@ -0,0 +1 @@
+2.0.0-p451

test/dummy/app/assets/javascripts/projects.js

@@ -23,25 +23,20 @@ $(document).ready(function() {
              $(".project-tag-fields a.add_fields").
                  data("association-insertion-position", 'before').
                  data("association-insertion-node", 'this');
-             $('.project-tag-fields').bind('after-insert',
-                  function() {
-                    $(this).children("#tag_from_list").remove();
-                    $(this).children("a.add_fields").hide();
-                  });
          });
 
+     $("body").on('after-insert', '.project-tag-fields',
+        function() {
+          $(this).children("#tag_from_list").remove();
+          $(this).children("a.add_fields").hide();
+        });
+
     $('#tasks').bind('before-insert', function(e,task_to_be_added) {
         task_to_be_added.fadeIn('slow');
     });
 
-    $('#tasks').bind('after-insert', function(e, added_task) {
-        //added_task.css("background","red");
-    });
-
     $('#tasks').bind('before-remove', function(e, task) {
         $(this).data('remove-timeout', 1000);
         task.fadeOut('slow');
     })
-
-    $('body').tabs();
-});
+});

test/dummy/app/views/assignments/_form.html.erb

@@ -17,15 +17,18 @@
   </div>
 
   <h2>Tasks Details</h2>
-  <%= f.fields_for :tasks do |task_fields| %>
-    <%= render "task_fields", :f => task_fields %>
-  <% end %>
 
-  <div class="links">
-    <%= link_to_add_association "Add a Task", f, :tasks %>
+  <div class="tasks_container">
+    <%= f.fields_for :tasks do |task_fields| %>
+      <%= render "task_fields", :f => task_fields %>
+    <% end %>
+    <%= render_association_template(f, :tasks) %>
   </div>
 
+  <!-- $(".tasks_container").addFormField("tasks", {insertionMethod: 'after'}) -->
+  <!-- $(".tasks_container").removeFormField("tasks", $(".nested-fields").eq(3)) -->
+
   <div class="actions">
     <%= f.submit %>
   </div>
-<% end %>
+<% end %>

test/dummy/app/views/projects/_form.html.erb

@@ -21,20 +21,22 @@
 
   <div class="tab-content">
     <div id="tasks" class="active">
+      <%= render_association_template f, :tasks, :render_options => { :wrapper => 'inline' } %>
       <%= f.simple_fields_for :tasks, wrapper: 'inline' do |task| %>
         <%= render 'task_fields', :f => task %>
       <% end %>
       <div class="links">
-        <%= link_to_add_association 'add task', f, :tasks, :render_options => { :wrapper => 'inline' } %>
+        <%= link_to_add_association 'add task', f, :tasks %>
       </div>
     </div>
 
     <div id="people">
+      <%= render_association_template f, :contributors, :render_options => { :wrapper => 'inline' } %>
       <%= f.simple_fields_for :contributors, wrapper: 'inline' do |contributor| %>
         <%= render 'contributor_fields', :f => contributor %>
       <% end %>
       <div class="links">
-        <%= link_to_add_association 'add contributor', f, :contributors, :render_options => { :wrapper => 'inline' } %>
+        <%= link_to_add_association 'add contributor', f, :contributors %>
       </div>
     </div>
 
@@ -46,14 +48,15 @@
     </div>
 
     <div id="tags">
+      <%= render_association_template f, :project_tags, :render_options => { :wrapper => 'inline' } %>
       <%= f.simple_fields_for :project_tags, wrapper: 'inline' do |project_tag| %>
         <%= render 'project_tag_fields', :f => project_tag %>
       <% end %>
-      <%= link_to_add_association 'add a tag', f, :project_tags, :render_options => { :wrapper => 'inline' } %>
+      <%= link_to_add_association 'add a tag', f, :project_tags %>
     </div>
   </div>
 
   <div class="actions">
     <%= f.button :submit, :disable_with => 'Please wait ...' %>
   </div>
-<% end %>
+<% end %>

test/dummy/app/views/projects/_project_tag_fields.html.erb

@@ -1,7 +1,8 @@
 <div class="nested-fields project-tag-fields">
+  <%= render_association_template f, :tag, :render_options => { :wrapper => 'inline' } %>
   <div id="tag_from_list">
     <%= f.association :tag, :collection => Tag.order(:name), :prompt => 'Choose an existing tag' %>
   </div>
-  <%= link_to_add_association 'or create a new tag', f, :tag, :render_options => { :wrapper => 'inline' } %>
+  <%= link_to_add_association 'or create a new tag', f, :tag %>
   <%= link_to_remove_association "remove tag", f %>
-</div>
+</div>