Per default Drag&Drop nur auf Item mit Klasse 'dragdrop' zulassen

[mfinanz.git] / SL / Template / Plugin / L.pm

diff --git a/SL/Template/Plugin/L.pm b/SL/Template/Plugin/L.pm
index d28ecb44f43d9d0ffb723583ba345af88df240b5..b78ebb01543715b4ef34e87353efb1e0c7b1e09d 100644 (file)
--- a/SL/Template/Plugin/L.pm
+++ b/SL/Template/Plugin/L.pm
@@ -400,34 +400,53 @@ sub sortable_element {
   my ($self, $selector, @slurp) = @_;
   my %params                    = _hashify(@slurp);
 
-  my %attributes = ( helper => <<JAVASCRIPT );
+  my %attributes = ( distance => 5,
+                     helper   => <<'JAVASCRIPT' );
     function(event, ui) {
       ui.children().each(function() {
-        \$(this).width(\$(this).width());
+        $(this).width($(this).width());
       });
       return ui;
     }
 JAVASCRIPT
 
+  my $stop_event = '';
+
   if ($params{url} && $params{with}) {
     my $as      = $params{as} || $params{with};
     my $filter  = ".filter(function(idx) { return this.substr(0, " . length($params{with}) . ") == '$params{with}'; })";
     $filter    .= ".map(function(idx, str) { return str.replace('$params{with}_', ''); })";
 
+    $stop_event = <<JAVASCRIPT;
+        \$.post('$params{url}', { '${as}[]': \$(\$('${selector}').sortable('toArray'))${filter}.toArray() });
+JAVASCRIPT
+  }
+
+  if (!$params{dont_recolor}) {
+    $stop_event .= <<JAVASCRIPT;
+        \$('${selector}>*:odd').removeClass('listrow1').removeClass('listrow0').addClass('listrow0');
+        \$('${selector}>*:even').removeClass('listrow1').removeClass('listrow0').addClass('listrow1');
+JAVASCRIPT
+  }
+
+  if ($stop_event) {
     $attributes{stop} = <<JAVASCRIPT;
       function(event, ui) {
-        \$.post('$params{url}', { '${as}[]': \$(\$('${selector}').sortable('toArray'))${filter}.toArray() });
+        ${stop_event}
         return ui;
       }
 JAVASCRIPT
   }
 
+  $params{handle}     = '.dragdrop' unless exists $params{handle};
+  $attributes{handle} = "'$params{handle}'" if $params{handle};
+
   my $attr_str = join(', ', map { "${_}: $attributes{$_}" } keys %attributes);
 
   my $code = <<JAVASCRIPT;
 <script type="text/javascript">
   \$(function() {
-    \$( "${selector}" ).sortable({ ${attr_str} }).disableSelection();
+    \$( "${selector}" ).sortable({ ${attr_str} })
   });
 </script>
 JAVASCRIPT
@@ -649,6 +668,9 @@ sortable with the I<jQuery UI Selectable> library. The children can be
 dragged & dropped around. After dropping an element an URL can be
 postet to with the element IDs of the sorted children.
 
+If this is used then the JavaScript file C<js/jquery-ui.js> must be
+included manually as well as it isn't loaded via C<$::form-gt;header>.
+
 C<%params> can contain the following entries:
 
 =over 2
@@ -673,10 +695,27 @@ C<$params{as}> or, missing that, C<$params{with}>.
 Sets the POST parameter name for AJAX request after dropping an
 element (see C<$params{with}>).
 
+=item C<handle>
+
+An optional jQuery selector specifying which part of the child element
+is dragable. If the parameter is not given then it defaults to
+C<.dragdrop> matching DOM elements with the class C<dragdrop>.  If the
+parameter is set and empty then the whole child element is dragable,
+and clicks through to underlying elements like inputs or links might
+not work.
+
+=item C<dont_recolor>
+
+If trueish then the children will not be recolored. The default is to
+recolor the children by setting the class C<listrow0> on odd and
+C<listrow1> on even entries.
+
 =back
 
 Example:
 
+  <script type="text/javascript" src="js/jquery-ui.js"></script>
+
   <table id="thing_list">
     <thead>
       <tr><td>This</td><td>That</td></tr>
@@ -689,9 +728,10 @@ Example:
   <table>
 
   [% L.sortable_element('#thing_list tbody',
-                        'url'  => 'controller.pl?action=SystemThings/reorder',
-                        'with' => 'thingy',
-                        'as'   => 'thing_ids') %]
+                        url          => 'controller.pl?action=SystemThings/reorder',
+                        with         => 'thingy',
+                        as           => 'thing_ids',
+                        recolor_rows => 1) %]
 
 After dropping e.g. the third element at the top of the list a POST
 request would be made to the C<reorder> action of the C<SystemThings>