more work to make nested sortable forms work, can now sort forms within forms

This commit is contained in:
John Bintz 2012-10-26 17:59:07 -04:00
parent 511184a267
commit a1715f049b
4 changed files with 95 additions and 21 deletions

View File

@ -7,6 +7,9 @@
content.replace(reg_exp, with_str); content.replace(reg_exp, with_str);
} }
$.fn.parentSiblings = function(selector) {
return $(this).parent().siblings(selector);
}
$('.add_fields').live('click', function(e) { $('.add_fields').live('click', function(e) {
e.preventDefault(); e.preventDefault();

View File

@ -1,29 +1,88 @@
//= require jquery-ui //= require jquery-ui
// //
(function($) { (function($) {
$(function() { $.cocoon = {
$('li[data-ordered_by]').each(function(index, element) { ordered: {
var field = $(element).data('ordered_by'); options: {
var fieldSearch = "[name*='[" + field + "]']" items: '> .nested-fields',
$(element).sortable({
items: '.nested-fields',
stop: function(e, ui) { stop: function(e, ui) {
$(element).find(fieldSearch).each(function(index, element) { if (window.CKEDITOR) {
$(element).val(index); var editors = $(ui.item).data('cocoon_ckeditors');
}); var i, j;
for (i = 0, j = editors.length; i < j; ++i) {
var id = editors[i];
var editor = CKEDITOR.instances[id];
if (editor) {
editor.destroy(true);
CKEDITOR.remove(id);
}
CKEDITOR.replace(id);
}
$(ui.item).data('cocoon_ckeditors', []);
}
$.cocoon.ordered._updateFields(this)
},
start: function(e, ui) {
if (window.CKEDITOR) {
var editors = [];
$(ui.item).find('textarea').each(function(index, element) {
var id = $(element).attr('id');
var editor = CKEDITOR.instances[id];
if (editor) {
editors.push(id);
editor.destroy();
CKEDITOR.remove(id);
}
});
$(ui.item).data('cocoon_ckeditors', editors);
}
} }
}); },
_updateFields: function(element) {
console.log(element)
console.log($(element).data('fieldSearch'))
console.log($(element).find($(element).data('fieldSearch')))
$(element).bind('cocoon:after-insert', function(e, node) { $(element).find($(element).data('fieldSearch')).each(function(index, element) {
var nextOrder = 0; $(element).val(index);
});
},
setup: function() {
$('li[data-ordered_by]').each(function(index, element) {
var field = $(element).data('ordered_by');
var fieldSelector = "[name*='[" + field + "]']"
var fieldGroupSelector = "> .forms > .nested-fields"
var orderFieldSelector = "> .nested-fields " + fieldSelector;
var fieldSearch = "> .forms " + orderFieldSelector;
$(element).find(fieldSearch).each(function() { $(element).find('.forms').data('fieldSearch', orderFieldSelector).sortable($.cocoon.ordered.options);
nextOrder = Math.max(nextOrder, Number($(this).val()) + 1);
$(element).unbind('cocoon:after-insert').bind('cocoon:after-insert', function(e, node) {
var nextOrder = 0;
if ($(element).find(fieldGroupSelector).is(node)) {
$(element).find(fieldSearch).each(function() {
nextOrder = Math.max(nextOrder, Number($(this).val()));
});
$(node).find(fieldSelector).val(nextOrder + 1)
}
});
}); });
$(node).find(fieldSearch).val(nextOrder) $(document).on('cocoon:after-insert', function() { $.cocoon.ordered.setup(); });
}); }
}); },
}); };
$(function() { $.cocoon.ordered.setup(); });
})(jQuery); })(jQuery);

View File

@ -19,7 +19,7 @@ li.cocoon {
@extend .button; @extend .button;
} }
&.ui-sortable { .forms.ui-sortable {
fieldset { fieldset {
border-top: solid #777 12px; border-top: solid #777 12px;
cursor: move; cursor: move;

View File

@ -4,7 +4,7 @@ class CocoonInput
include ::Formtastic::Inputs::Base include ::Formtastic::Inputs::Base
def to_html def to_html
output = label_html << semantic_fields_for << links output = label_html << wrapped_semantic_fields << links
template.content_tag(:li, output.html_safe, wrapper_html_options) template.content_tag(:li, output.html_safe, wrapper_html_options)
end end
@ -26,10 +26,22 @@ class CocoonInput
end end
end end
def wrapped_semantic_fields
template.content_tag(:div, semantic_fields_for, :class => 'forms')
end
def links def links
template.content_tag(:div, :class => 'links') do template.content_tag(:div, :class => 'links') do
template.link_to_add_association template.t('.add'), builder, method, input_html_options template.link_to_add_association template.t('.add'), builder, method, input_html_options
end end
end end
def input_html_options
super.merge(
'data-association-insertion-node' => '.forms',
'data-association-insertion-traversal' => 'parentSiblings',
'data-association-insertion-method' => 'append'
)
end
end end