Adding drag n drop ordering of form elements on edit custom form page

3months · Feb 25, 2010 · 85ee28a · 85ee28a
1 parent d023e52
commit 85ee28a
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 40 deletions.
diff --git a/app/controllers/cms/custom_forms_controller.rb b/app/controllers/cms/custom_forms_controller.rb
@@ -43,11 +43,26 @@ def new_element_partial
 #    end
 #  end
 
+  # order_elements
+  #
+  # Reassign position attribute for each element in params[:element_list_order].
+  # Always return success.
+  #
+  def order_elements
+    load_block
+
+    @block.reorder_elements!(params[:element_list_order]) if params[:element_list_order].is_a?(Array)
+
+    render :nothing => true, :code => 200
+  rescue ActiveRecord::RecordNotFound
+    render :nothing => true, :code => 200
+  end
+
   protected
 
     def check_permissions
       case action_name
-      when 'edit_elements'
+      when 'edit_elements', 'order_elements'
         raise Cms::Errors::AccessDenied unless current_user.able_to_edit?(@block)
       else
         super

diff --git a/app/models/custom_form.rb b/app/models/custom_form.rb
@@ -36,6 +36,18 @@ def next_elements_position
     return base_position + 1
   end
 
+  def reorder_elements!(element_order)
+    elements = self.custom_form_elements
+    elements.each do |el|
+      element_order << el.id.to_s unless element_order.include?(el.id.to_s)
+    end
+    elements.sort! {|a, b| element_order.index(a.id.to_s) <=> element_order.index(b.id.to_s)}
+
+    elements.each_with_index do |el, i|
+      el.update_attribute(:position, i + 1)
+    end
+  end
+
   private
 
     # validate_elements

diff --git a/app/views/cms/custom_forms/_form.html.erb b/app/views/cms/custom_forms/_form.html.erb
@@ -1,5 +1,30 @@
 <% content_for :html_head do %>
     <%= javascript_include_tag 'form_builder' %>
+    <% javascript_tag do %>
+      $(document).ready(function(){
+          $('#element_list').sortable(
+            {axis: "y",
+            cursor: "move",
+            opacity: 0.4,
+            scroll: true,
+            update: function(){
+              $.ajax({
+                  type: 'post',
+                  axis: 'y',
+                  dropOnEmpty:false,
+                  handle: '.handle',
+                  cursor: 'crosshair',
+                  items: 'li',
+                  data: $('#element_list').sortable('serialize'),
+                  complete: function(request){
+                      $('#element_list').effect('highlight');
+                    },
+                  url: '<%= order_elements_cms_custom_form_path(:id => @block.id) %>'})
+              }
+            }
+          );
+      });
+    <% end %>
     <%= stylesheet_link_tag 'form_builder' %>
 <% end %>
 
@@ -24,13 +49,15 @@
 
 <br clear="all" />
 
-<% @block.custom_form_elements.each do |element| -%>
-  <div class="dyn_element">
-    <%= render(:partial => "cms/custom_forms/forms/#{element.class.config.name}_element", :locals => {:index => element.id, :element => element}) %>
-  </div>
-<% end -%>
-
-<div id="new_form_element"></div>
+<ul id="element_list">
+  <% @block.custom_form_elements.each do |element| -%>
+    <li class="dyn_element" id="element_list_order_<%= element.id %>">
+      <input class="hidden_order" type="hidden" name="element_order[]" value="<%= element.id %>" />
+      <%= render(:partial => "cms/custom_forms/forms/#{element.class.config.name}_element", :locals => {:index => element.id, :element => element}) %>
+    </li>
+  <% end -%>
+    <li id="new_form_element"></li>
+</ul>
 
 <div class="fields text_fields">
   <a name="new_element"></a>
@@ -42,3 +69,4 @@
     )
   %>
 </div>
+
diff --git a/app/views/cms/custom_forms/forms/_check_box_element.html.erb b/app/views/cms/custom_forms/forms/_check_box_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_name", 'Label' %>
     <%= text_field_tag("custom_form[elements][#{index}][label]", element.label) %>

diff --git a/app/views/cms/custom_forms/forms/_description_element.html.erb b/app/views/cms/custom_forms/forms/_description_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_text", 'Text' %>
     <%= text_area_tag("custom_form[elements][#{index}][text]", element.text, :cols => 65, :rows => 3) %>

diff --git a/app/views/cms/custom_forms/forms/_element_management_links.html.erb b/app/views/cms/custom_forms/forms/_element_management_links.html.erb
@@ -2,5 +2,5 @@
     <% unless element.new_record? -%>
       <%= link_to('edit', edit_cms_custom_form_custom_form_element_path(:custom_form_id => @block.id, :id => element.id)) %> |
     <% end -%>
-    <%= link_to('delete', {:anchor => ''}, :onclick => 'deleteFormElement($(this)); return false;', :class => 'delete_link', :confirm => "Are you sure you want to delete this element?  The element will not be deleted permanently until you click 'Save'") %>
+    <%= link_to('delete', {:anchor => ''}, :onclick => 'deleteFormElement($(this)); return false;', :class => 'delete_link') %>
   </div>
diff --git a/app/views/cms/custom_forms/forms/_html_block_element.html.erb b/app/views/cms/custom_forms/forms/_html_block_element.html.erb
@@ -5,8 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
   <%= hidden_field_tag("custom_form[elements][#{index}][type]", 'HtmlBlockCustomFormElement') %>
   <br clear="all" />
   <%= render :partial => 'cms/custom_forms/forms/element_management_links', :locals => {:element => element}  %>

diff --git a/app/views/cms/custom_forms/forms/_radio_button_element.html.erb b/app/views/cms/custom_forms/forms/_radio_button_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_name", 'Label' %>
     <%= text_field_tag("custom_form[elements][#{index}][label]", element.label) %>

diff --git a/app/views/cms/custom_forms/forms/_select_element.html.erb b/app/views/cms/custom_forms/forms/_select_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_name", 'Label' %>
     <%= text_field_tag("custom_form[elements][#{index}][label]", element.label) %>

diff --git a/app/views/cms/custom_forms/forms/_string_element.html.erb b/app/views/cms/custom_forms/forms/_string_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_name", 'Label' %>
     <%= text_field_tag("custom_form[elements][#{index}][label]", element.label) %>

diff --git a/app/views/cms/custom_forms/forms/_submit_element.html.erb b/app/views/cms/custom_forms/forms/_submit_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_value", 'Display Label' %>
     <%= text_field_tag("custom_form[elements][#{index}][label]", element.label) %>

diff --git a/app/views/cms/custom_forms/forms/_text_element.html.erb b/app/views/cms/custom_forms/forms/_text_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_name", 'Label' %>
     <%= text_field_tag("custom_form[elements][#{index}][label]", element.label) %>

diff --git a/app/views/cms/custom_forms/forms/_title_element.html.erb b/app/views/cms/custom_forms/forms/_title_element.html.erb
@@ -5,9 +5,6 @@
   <%= label_tag "custom_form_elements_#{index}_name", 'Identifier' %>
   <%= text_field_tag("custom_form[elements][#{index}][name]", element.name) %>
   <br clear="all" />
-  <%= label_tag "custom_form_elements_#{index}_position", 'Position' %>
-  <%= text_field_tag("custom_form[elements][#{index}][position]", element.position) %>
-  <br clear="all" />
   <% hide_if_editing(:div, element) do %>
     <%= label_tag "custom_form_elements_#{index}_name", 'Title' %>
     <%= text_field_tag("custom_form[elements][#{index}][title]", element.title) %>

diff --git a/lib/bcms_form_builder/routes.rb b/lib/bcms_form_builder/routes.rb
@@ -1,7 +1,7 @@
 module Cms::Routes
   def routes_for_bcms_form_builder
     namespace(:cms) do |cms|      
-      cms.content_blocks :custom_forms, :collection => {:new_element_partial => :get, :new_element => [:get, :post]}, :has_many => [:custom_form_elements]
+      cms.content_blocks :custom_forms, :member => {:order_elements => :post}, :collection => {:new_element_partial => :get, :new_element => [:get, :post]}, :has_many => [:custom_form_elements]
     end
   end
 end
diff --git a/public/javascripts/form_builder.js b/public/javascripts/form_builder.js
@@ -1,11 +1,11 @@
 function newFormElement(selector) {
     var new_form_element = $('#new_form_element');
-    $.get('/cms/custom_forms/new_element', {type: selector.value}, function(data, textStatus) {
+    $.get('/cms/custom_forms/new_element_partial', {type: selector.value}, function(data, textStatus) {
         new_form_element.hide();
         new_form_element[0].innerHTML = data;
         new_form_element.removeAttr('id');
         new_form_element.addClass('dyn_element');
-        new_form_element.after("<div id=\"new_form_element\"></div>")
+        new_form_element.after("<li id=\"new_form_element\"></li>")
         new_form_element.show(500);
         /*new_form_element.siblings('.dyn_element').each(function(){
             hideElement($(this));
@@ -38,7 +38,7 @@ function showElement(el) {
 }
 
 function deleteFormElement(link_el) {
-    var parent_element = link_el.parents("div.dyn_element");
+    var parent_element = link_el.parents("li.dyn_element");
     if(parent_element){
         //parent_element.remove();
         $(parent_element).fadeOut(500, function() { parent_element.remove(); });

diff --git a/public/stylesheets/form_builder.css b/public/stylesheets/form_builder.css
@@ -9,7 +9,7 @@ form.edit_custom_form h3, form.new_custom_form h3 {
     float:right;
 }
 
-form div.dyn_element {
+form li.dyn_element {
     border: dotted 1px #36659D;
     padding: 7px 7px 0px 7px;
     margin-bottom: 5px;