1 // $Id: tabledrag.js,v 1.13.2.5 2009/06/18 12:24:24 goba Exp $

     2 

     3 /**

     4  * Drag and drop table rows with field manipulation.

     5  *

     6  * Using the drupal_add_tabledrag() function, any table with weights or parent

     7  * relationships may be made into draggable tables. Columns containing a field

     8  * may optionally be hidden, providing a better user experience.

     9  *

    10  * Created tableDrag instances may be modified with custom behaviors by

    11  * overriding the .onDrag, .onDrop, .row.onSwap, and .row.onIndent methods.

    12  * See blocks.js for an example of adding additional functionality to tableDrag.

    13  */

    14 Drupal.behaviors.tableDrag = function(context) {

    15   for (var base in Drupal.settings.tableDrag) {

    16     if (!$('#' + base + '.tabledrag-processed', context).size()) {

    17       var tableSettings = Drupal.settings.tableDrag[base];

    18 

    19       $('#' + base).filter(':not(.tabledrag-processed)').each(function() {

    20         // Create the new tableDrag instance. Save in the Drupal variable

    21         // to allow other scripts access to the object.

    22         Drupal.tableDrag[base] = new Drupal.tableDrag(this, tableSettings);

    23       });

    24 

    25       $('#' + base).addClass('tabledrag-processed');

    26     }

    27   }

    28 };

    29 

    30 /**

    31  * Constructor for the tableDrag object. Provides table and field manipulation.

    32  *

    33  * @param table

    34  *   DOM object for the table to be made draggable.

    35  * @param tableSettings

    36  *   Settings for the table added via drupal_add_dragtable().

    37  */

    38 Drupal.tableDrag = function(table, tableSettings) {

    39   var self = this;

    40 

    41   // Required object variables.

    42   this.table = table;

    43   this.tableSettings = tableSettings;

    44   this.dragObject = null; // Used to hold information about a current drag operation.

    45   this.rowObject = null; // Provides operations for row manipulation.

    46   this.oldRowElement = null; // Remember the previous element.

    47   this.oldY = 0; // Used to determine up or down direction from last mouse move.

    48   this.changed = false; // Whether anything in the entire table has changed.

    49   this.maxDepth = 0; // Maximum amount of allowed parenting.

    50   this.rtl = $(this.table).css('direction') == 'rtl' ? -1 : 1; // Direction of the table.

    51 

    52   // Configure the scroll settings.

    53   this.scrollSettings = { amount: 4, interval: 50, trigger: 70 };

    54   this.scrollInterval = null;

    55   this.scrollY = 0;

    56   this.windowHeight = 0;

    57 

    58   // Check this table's settings to see if there are parent relationships in

    59   // this table. For efficiency, large sections of code can be skipped if we

    60   // don't need to track horizontal movement and indentations.

    61   this.indentEnabled = false;

    62   for (group in tableSettings) {

    63     for (n in tableSettings[group]) {

    64       if (tableSettings[group][n]['relationship'] == 'parent') {

    65         this.indentEnabled = true;

    66       }

    67       if (tableSettings[group][n]['limit'] > 0) {

    68         this.maxDepth = tableSettings[group][n]['limit'];

    69       }

    70     }

    71   }

    72   if (this.indentEnabled) {

    73     this.indentCount = 1; // Total width of indents, set in makeDraggable.

    74     // Find the width of indentations to measure mouse movements against.

    75     // Because the table doesn't need to start with any indentations, we

    76     // manually append 2 indentations in the first draggable row, measure

    77     // the offset, then remove.

    78     var indent = Drupal.theme('tableDragIndentation');

    79     // Match immediate children of the parent element to allow nesting.

    80     var testCell = $('> tbody > tr.draggable:first td:first, > tr.draggable:first td:first', table).prepend(indent).prepend(indent);

    81     this.indentAmount = $('.indentation', testCell).get(1).offsetLeft - $('.indentation', testCell).get(0).offsetLeft;

    82     $('.indentation', testCell).slice(0, 2).remove();

    83   }

    84 

    85   // Make each applicable row draggable.

    86   // Match immediate children of the parent element to allow nesting.

    87   $('> tr.draggable, > tbody > tr.draggable', table).each(function() { self.makeDraggable(this); });

    88 

    89   // Hide columns containing affected form elements.

    90   this.hideColumns();

    91 

    92   // Add mouse bindings to the document. The self variable is passed along

    93   // as event handlers do not have direct access to the tableDrag object.

    94   $(document).bind('mousemove', function(event) { return self.dragRow(event, self); });

    95   $(document).bind('mouseup', function(event) { return self.dropRow(event, self); });

    96 };

    97 

    98 /**

    99  * Hide the columns containing form elements according to the settings for

   100  * this tableDrag instance.

   101  */

   102 Drupal.tableDrag.prototype.hideColumns = function(){

   103   for (var group in this.tableSettings) {

   104     // Find the first field in this group.

   105     for (var d in this.tableSettings[group]) {

   106       var field = $('.' + this.tableSettings[group][d]['target'] + ':first', this.table);

   107       if (field.size() && this.tableSettings[group][d]['hidden']) {

   108         var hidden = this.tableSettings[group][d]['hidden'];

   109         var cell = field.parents('td:first');

   110         break;

   111       }

   112     }

   113 

   114     // Hide the column containing this field.

   115     if (hidden && cell[0] && cell.css('display') != 'none') {

   116       // Add 1 to our indexes. The nth-child selector is 1 based, not 0 based.

   117       // Match immediate children of the parent element to allow nesting.

   118       var columnIndex = $('> td', cell.parent()).index(cell.get(0)) + 1;

   119       var headerIndex = $('> td:not(:hidden)', cell.parent()).index(cell.get(0)) + 1;

   120       $('> thead > tr, > tbody > tr, > tr', this.table).each(function(){

   121         var row = $(this);

   122         var parentTag = row.parent().get(0).tagName.toLowerCase();

   123         var index = (parentTag == 'thead') ? headerIndex : columnIndex;

   124 

   125         // Adjust the index to take into account colspans.

   126         row.children().each(function(n) {

   127           if (n < index) {

   128             index -= (this.colSpan && this.colSpan > 1) ? this.colSpan - 1 : 0;

   129           }

   130         });

   131         if (index > 0) {

   132           cell = row.children(':nth-child(' + index + ')');

   133           if (cell[0].colSpan > 1) {

   134             // If this cell has a colspan, simply reduce it.

   135             cell[0].colSpan = cell[0].colSpan - 1;

   136           }

   137           else {

   138             // Hide table body cells, but remove table header cells entirely

   139             // (Safari doesn't hide properly).

   140             parentTag == 'thead' ? cell.remove() : cell.css('display', 'none');

   141           }

   142         }

   143       });

   144     }

   145   }

   146 };

   147 

   148 /**

   149  * Find the target used within a particular row and group.

   150  */

   151 Drupal.tableDrag.prototype.rowSettings = function(group, row) {

   152   var field = $('.' + group, row);

   153   for (delta in this.tableSettings[group]) {

   154     var targetClass = this.tableSettings[group][delta]['target'];

   155     if (field.is('.' + targetClass)) {

   156       // Return a copy of the row settings.

   157       var rowSettings = new Object();

   158       for (var n in this.tableSettings[group][delta]) {

   159         rowSettings[n] = this.tableSettings[group][delta][n];

   160       }

   161       return rowSettings;

   162     }

   163   }

   164 };

   165 

   166 /**

   167  * Take an item and add event handlers to make it become draggable.

   168  */

   169 Drupal.tableDrag.prototype.makeDraggable = function(item) {

   170   var self = this;

   171 

   172   // Create the handle.

   173   var handle = $('<a href="#" class="tabledrag-handle"><div class="handle">&nbsp;</div></a>').attr('title', Drupal.t('Drag to re-order'));

   174   // Insert the handle after indentations (if any).

   175   if ($('td:first .indentation:last', item).after(handle).size()) {

   176     // Update the total width of indentation in this entire table.

   177     self.indentCount = Math.max($('.indentation', item).size(), self.indentCount);

   178   }

   179   else {

   180     $('td:first', item).prepend(handle);

   181   }

   182 

   183   // Add hover action for the handle.

   184   handle.hover(function() {

   185     self.dragObject == null ? $(this).addClass('tabledrag-handle-hover') : null;

   186   }, function() {

   187     self.dragObject == null ? $(this).removeClass('tabledrag-handle-hover') : null;

   188   });

   189 

   190   // Add the mousedown action for the handle.

   191   handle.mousedown(function(event) {

   192     // Create a new dragObject recording the event information.

   193     self.dragObject = new Object();

   194     self.dragObject.initMouseOffset = self.getMouseOffset(item, event);

   195     self.dragObject.initMouseCoords = self.mouseCoords(event);

   196     if (self.indentEnabled) {

   197       self.dragObject.indentMousePos = self.dragObject.initMouseCoords;

   198     }

   199 

   200     // If there's a lingering row object from the keyboard, remove its focus.

   201     if (self.rowObject) {

   202       $('a.tabledrag-handle', self.rowObject.element).blur();

   203     }

   204 

   205     // Create a new rowObject for manipulation of this row.

   206     self.rowObject = new self.row(item, 'mouse', self.indentEnabled, self.maxDepth, true);

   207 

   208     // Save the position of the table.

   209     self.table.topY = self.getPosition(self.table).y;

   210     self.table.bottomY = self.table.topY + self.table.offsetHeight;

   211 

   212     // Add classes to the handle and row.

   213     $(this).addClass('tabledrag-handle-hover');

   214     $(item).addClass('drag');

   215 

   216     // Set the document to use the move cursor during drag.

   217     $('body').addClass('drag');

   218     if (self.oldRowElement) {

   219       $(self.oldRowElement).removeClass('drag-previous');

   220     }

   221 

   222     // Hack for IE6 that flickers uncontrollably if select lists are moved.

   223     if (navigator.userAgent.indexOf('MSIE 6.') != -1) {

   224       $('select', this.table).css('display', 'none');

   225     }

   226 

   227     // Hack for Konqueror, prevent the blur handler from firing.

   228     // Konqueror always gives links focus, even after returning false on mousedown.

   229     self.safeBlur = false;

   230 

   231     // Call optional placeholder function.

   232     self.onDrag();

   233     return false;

   234   });

   235 

   236   // Prevent the anchor tag from jumping us to the top of the page.

   237   handle.click(function() {

   238     return false;

   239   });

   240 

   241   // Similar to the hover event, add a class when the handle is focused.

   242   handle.focus(function() {

   243     $(this).addClass('tabledrag-handle-hover');

   244     self.safeBlur = true;

   245   });

   246 

   247   // Remove the handle class on blur and fire the same function as a mouseup.

   248   handle.blur(function(event) {

   249     $(this).removeClass('tabledrag-handle-hover');

   250     if (self.rowObject && self.safeBlur) {

   251       self.dropRow(event, self);

   252     }

   253   });

   254 

   255   // Add arrow-key support to the handle.

   256   handle.keydown(function(event) {

   257     // If a rowObject doesn't yet exist and this isn't the tab key.

   258     if (event.keyCode != 9 && !self.rowObject) {

   259       self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true);

   260     }

   261 

   262     var keyChange = false;

   263     switch (event.keyCode) {

   264       case 37: // Left arrow.

   265       case 63234: // Safari left arrow.

   266         keyChange = true;

   267         self.rowObject.indent(-1 * self.rtl);

   268         break;

   269       case 38: // Up arrow.

   270       case 63232: // Safari up arrow.

   271         var previousRow = $(self.rowObject.element).prev('tr').get(0);

   272         while (previousRow && $(previousRow).is(':hidden')) {

   273           previousRow = $(previousRow).prev('tr').get(0);

   274         }

   275         if (previousRow) {

   276           self.safeBlur = false; // Do not allow the onBlur cleanup.

   277           self.rowObject.direction = 'up';

   278           keyChange = true;

   279 

   280           if ($(item).is('.tabledrag-root')) {

   281             // Swap with the previous top-level row..

   282             var groupHeight = 0;

   283             while (previousRow && $('.indentation', previousRow).size()) {

   284               previousRow = $(previousRow).prev('tr').get(0);

   285               groupHeight += $(previousRow).is(':hidden') ? 0 : previousRow.offsetHeight;

   286             }

   287             if (previousRow) {

   288               self.rowObject.swap('before', previousRow);

   289               // No need to check for indentation, 0 is the only valid one.

   290               window.scrollBy(0, -groupHeight);

   291             }

   292           }

   293           else if (self.table.tBodies[0].rows[0] != previousRow || $(previousRow).is('.draggable')) {

   294             // Swap with the previous row (unless previous row is the first one

   295             // and undraggable).

   296             self.rowObject.swap('before', previousRow);

   297             self.rowObject.interval = null;

   298             self.rowObject.indent(0);

   299             window.scrollBy(0, -parseInt(item.offsetHeight));

   300           }

   301           handle.get(0).focus(); // Regain focus after the DOM manipulation.

   302         }

   303         break;

   304       case 39: // Right arrow.

   305       case 63235: // Safari right arrow.

   306         keyChange = true;

   307         self.rowObject.indent(1 * self.rtl);

   308         break;

   309       case 40: // Down arrow.

   310       case 63233: // Safari down arrow.

   311         var nextRow = $(self.rowObject.group).filter(':last').next('tr').get(0);

   312         while (nextRow && $(nextRow).is(':hidden')) {

   313           nextRow = $(nextRow).next('tr').get(0);

   314         }

   315         if (nextRow) {

   316           self.safeBlur = false; // Do not allow the onBlur cleanup.

   317           self.rowObject.direction = 'down';

   318           keyChange = true;

   319 

   320           if ($(item).is('.tabledrag-root')) {

   321             // Swap with the next group (necessarily a top-level one).

   322             var groupHeight = 0;

   323             nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false);

   324             if (nextGroup) {

   325               $(nextGroup.group).each(function () {groupHeight += $(this).is(':hidden') ? 0 : this.offsetHeight});

   326               nextGroupRow = $(nextGroup.group).filter(':last').get(0);

   327               self.rowObject.swap('after', nextGroupRow);

   328               // No need to check for indentation, 0 is the only valid one.

   329               window.scrollBy(0, parseInt(groupHeight));

   330             }

   331           }

   332           else {

   333             // Swap with the next row.

   334             self.rowObject.swap('after', nextRow);

   335             self.rowObject.interval = null;

   336             self.rowObject.indent(0);

   337             window.scrollBy(0, parseInt(item.offsetHeight));

   338           }

   339           handle.get(0).focus(); // Regain focus after the DOM manipulation.

   340         }

   341         break;

   342     }

   343 

   344     if (self.rowObject && self.rowObject.changed == true) {

   345       $(item).addClass('drag');

   346       if (self.oldRowElement) {

   347         $(self.oldRowElement).removeClass('drag-previous');

   348       }

   349       self.oldRowElement = item;

   350       self.restripeTable();

   351       self.onDrag();

   352     }

   353 

   354     // Returning false if we have an arrow key to prevent scrolling.

   355     if (keyChange) {

   356       return false;

   357     }

   358   });

   359 

   360   // Compatibility addition, return false on keypress to prevent unwanted scrolling.

   361   // IE and Safari will supress scrolling on keydown, but all other browsers

   362   // need to return false on keypress. http://www.quirksmode.org/js/keys.html

   363   handle.keypress(function(event) {

   364     switch (event.keyCode) {

   365       case 37: // Left arrow.

   366       case 38: // Up arrow.

   367       case 39: // Right arrow.

   368       case 40: // Down arrow.

   369         return false;

   370     }

   371   });

   372 };

   373 

   374 /**

   375  * Mousemove event handler, bound to document.

   376  */

   377 Drupal.tableDrag.prototype.dragRow = function(event, self) {

   378   if (self.dragObject) {

   379     self.currentMouseCoords = self.mouseCoords(event);

   380 

   381     var y = self.currentMouseCoords.y - self.dragObject.initMouseOffset.y;

   382     var x = self.currentMouseCoords.x - self.dragObject.initMouseOffset.x;

   383 

   384     // Check for row swapping and vertical scrolling.

   385     if (y != self.oldY) {

   386       self.rowObject.direction = y > self.oldY ? 'down' : 'up';

   387       self.oldY = y; // Update the old value.

   388 

   389       // Check if the window should be scrolled (and how fast).

   390       var scrollAmount = self.checkScroll(self.currentMouseCoords.y);

   391       // Stop any current scrolling.

   392       clearInterval(self.scrollInterval);

   393       // Continue scrolling if the mouse has moved in the scroll direction.

   394       if (scrollAmount > 0 && self.rowObject.direction == 'down' || scrollAmount < 0 && self.rowObject.direction == 'up') {

   395         self.setScroll(scrollAmount);

   396       }

   397 

   398       // If we have a valid target, perform the swap and restripe the table.

   399       var currentRow = self.findDropTargetRow(x, y);

   400       if (currentRow) {

   401         if (self.rowObject.direction == 'down') {

   402           self.rowObject.swap('after', currentRow, self);

   403         }

   404         else {

   405           self.rowObject.swap('before', currentRow, self);

   406         }

   407         self.restripeTable();

   408       }

   409     }

   410 

   411     // Similar to row swapping, handle indentations.

   412     if (self.indentEnabled) {

   413       var xDiff = self.currentMouseCoords.x - self.dragObject.indentMousePos.x;

   414       // Set the number of indentations the mouse has been moved left or right.

   415       var indentDiff = Math.round(xDiff / self.indentAmount * self.rtl);

   416       // Indent the row with our estimated diff, which may be further

   417       // restricted according to the rows around this row.

   418       var indentChange = self.rowObject.indent(indentDiff);

   419       // Update table and mouse indentations.

   420       self.dragObject.indentMousePos.x += self.indentAmount * indentChange * self.rtl;

   421       self.indentCount = Math.max(self.indentCount, self.rowObject.indents);

   422     }

   423 

   424     return false;

   425   }

   426 };

   427 

   428 /**

   429  * Mouseup event handler, bound to document.

   430  * Blur event handler, bound to drag handle for keyboard support.

   431  */

   432 Drupal.tableDrag.prototype.dropRow = function(event, self) {

   433   // Drop row functionality shared between mouseup and blur events.

   434   if (self.rowObject != null) {

   435     var droppedRow = self.rowObject.element;

   436     // The row is already in the right place so we just release it.

   437     if (self.rowObject.changed == true) {

   438       // Update the fields in the dropped row.

   439       self.updateFields(droppedRow);

   440 

   441       // If a setting exists for affecting the entire group, update all the

   442       // fields in the entire dragged group.

   443       for (var group in self.tableSettings) {

   444         var rowSettings = self.rowSettings(group, droppedRow);

   445         if (rowSettings.relationship == 'group') {

   446           for (n in self.rowObject.children) {

   447             self.updateField(self.rowObject.children[n], group);

   448           }

   449         }

   450       }

   451 

   452       self.rowObject.markChanged();

   453       if (self.changed == false) {

   454         $(Drupal.theme('tableDragChangedWarning')).insertAfter(self.table).hide().fadeIn('slow');

   455         self.changed = true;

   456       }

   457     }

   458 

   459     if (self.indentEnabled) {

   460       self.rowObject.removeIndentClasses();

   461     }

   462     if (self.oldRowElement) {

   463       $(self.oldRowElement).removeClass('drag-previous');

   464     }

   465     $(droppedRow).removeClass('drag').addClass('drag-previous');

   466     self.oldRowElement = droppedRow;

   467     self.onDrop();

   468     self.rowObject = null;

   469   }

   470 

   471   // Functionality specific only to mouseup event.

   472   if (self.dragObject != null) {

   473     $('.tabledrag-handle', droppedRow).removeClass('tabledrag-handle-hover');

   474 

   475     self.dragObject = null;

   476     $('body').removeClass('drag');

   477     clearInterval(self.scrollInterval);

   478 

   479     // Hack for IE6 that flickers uncontrollably if select lists are moved.

   480     if (navigator.userAgent.indexOf('MSIE 6.') != -1) {

   481       $('select', this.table).css('display', 'block');

   482     }

   483   }

   484 };

   485 

   486 /**

   487  * Get the position of an element by adding up parent offsets in the DOM tree.

   488  */

   489 Drupal.tableDrag.prototype.getPosition = function(element){

   490   var left = 0;

   491   var top  = 0;

   492   // Because Safari doesn't report offsetHeight on table rows, but does on table

   493   // cells, grab the firstChild of the row and use that instead.

   494   // http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari

   495   if (element.offsetHeight == 0) {

   496     element = element.firstChild; // a table cell

   497   }

   498 

   499   while (element.offsetParent){

   500     left   += element.offsetLeft;

   501     top    += element.offsetTop;

   502     element = element.offsetParent;

   503   }

   504 

   505   left += element.offsetLeft;

   506   top  += element.offsetTop;

   507 

   508   return {x:left, y:top};

   509 };

   510 

   511 /**

   512  * Get the mouse coordinates from the event (allowing for browser differences).

   513  */

   514 Drupal.tableDrag.prototype.mouseCoords = function(event){

   515   if (event.pageX || event.pageY) {

   516     return {x:event.pageX, y:event.pageY};

   517   }

   518   return {

   519     x:event.clientX + document.body.scrollLeft - document.body.clientLeft,

   520     y:event.clientY + document.body.scrollTop  - document.body.clientTop

   521   };

   522 };

   523 

   524 /**

   525  * Given a target element and a mouse event, get the mouse offset from that

   526  * element. To do this we need the element's position and the mouse position.

   527  */

   528 Drupal.tableDrag.prototype.getMouseOffset = function(target, event) {

   529   var docPos   = this.getPosition(target);

   530   var mousePos = this.mouseCoords(event);

   531   return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

   532 };

   533 

   534 /**

   535  * Find the row the mouse is currently over. This row is then taken and swapped

   536  * with the one being dragged.

   537  *

   538  * @param x

   539  *   The x coordinate of the mouse on the page (not the screen).

   540  * @param y

   541  *   The y coordinate of the mouse on the page (not the screen).

   542  */

   543 Drupal.tableDrag.prototype.findDropTargetRow = function(x, y) {

   544   var rows = this.table.tBodies[0].rows;

   545   for (var n=0; n<rows.length; n++) {

   546     var row = rows[n];

   547     var indentDiff = 0;

   548     // Safari fix see Drupal.tableDrag.prototype.getPosition()

   549     if (row.offsetHeight == 0) {

   550       var rowY = this.getPosition(row.firstChild).y;

   551       var rowHeight = parseInt(row.firstChild.offsetHeight)/2;

   552     }

   553     // Other browsers.

   554     else {

   555       var rowY = this.getPosition(row).y;

   556       var rowHeight = parseInt(row.offsetHeight)/2;

   557     }

   558 

   559     // Because we always insert before, we need to offset the height a bit.

   560     if ((y > (rowY - rowHeight)) && (y < (rowY + rowHeight))) {

   561       if (this.indentEnabled) {

   562         // Check that this row is not a child of the row being dragged.

   563         for (n in this.rowObject.group) {

   564           if (this.rowObject.group[n] == row) {

   565             return null;

   566           }

   567         }

   568       }

   569       // Check that swapping with this row is allowed.

   570       if (!this.rowObject.isValidSwap(row)) {

   571         return null;

   572       }

   573 

   574       // We may have found the row the mouse just passed over, but it doesn't

   575       // take into account hidden rows. Skip backwards until we find a draggable

   576       // row.

   577       while ($(row).is(':hidden') && $(row).prev('tr').is(':hidden')) {

   578         row = $(row).prev('tr').get(0);

   579       }

   580       return row;

   581     }

   582   }

   583   return null;

   584 };

   585 

   586 /**

   587  * After the row is dropped, update the table fields according to the settings

   588  * set for this table.

   589  *

   590  * @param changedRow

   591  *   DOM object for the row that was just dropped.

   592  */

   593 Drupal.tableDrag.prototype.updateFields = function(changedRow) {

   594   for (var group in this.tableSettings) {

   595     // Each group may have a different setting for relationship, so we find

   596     // the source rows for each seperately.

   597     this.updateField(changedRow, group);

   598   }

   599 };

   600 

   601 /**

   602  * After the row is dropped, update a single table field according to specific

   603  * settings.

   604  *

   605  * @param changedRow

   606  *   DOM object for the row that was just dropped.

   607  * @param group

   608  *   The settings group on which field updates will occur.

   609  */

   610 Drupal.tableDrag.prototype.updateField = function(changedRow, group) {

   611   var rowSettings = this.rowSettings(group, changedRow);

   612 

   613   // Set the row as it's own target.

   614   if (rowSettings.relationship == 'self' || rowSettings.relationship == 'group') {

   615     var sourceRow = changedRow;

   616   }

   617   // Siblings are easy, check previous and next rows.

   618   else if (rowSettings.relationship == 'sibling') {

   619     var previousRow = $(changedRow).prev('tr').get(0);

   620     var nextRow = $(changedRow).next('tr').get(0);

   621     var sourceRow = changedRow;

   622     if ($(previousRow).is('.draggable') && $('.' + group, previousRow).length) {

   623       if (this.indentEnabled) {

   624         if ($('.indentations', previousRow).size() == $('.indentations', changedRow)) {

   625           sourceRow = previousRow;

   626         }

   627       }

   628       else {

   629         sourceRow = previousRow;

   630       }

   631     }

   632     else if ($(nextRow).is('.draggable') && $('.' + group, nextRow).length) {

   633       if (this.indentEnabled) {

   634         if ($('.indentations', nextRow).size() == $('.indentations', changedRow)) {

   635           sourceRow = nextRow;

   636         }

   637       }

   638       else {

   639         sourceRow = nextRow;

   640       }

   641     }

   642   }

   643   // Parents, look up the tree until we find a field not in this group.

   644   // Go up as many parents as indentations in the changed row.

   645   else if (rowSettings.relationship == 'parent') {

   646     var previousRow = $(changedRow).prev('tr');

   647     while (previousRow.length && $('.indentation', previousRow).length >= this.rowObject.indents) {

   648       previousRow = previousRow.prev('tr');

   649     }

   650     // If we found a row.

   651     if (previousRow.length) {

   652       sourceRow = previousRow[0];

   653     }

   654     // Otherwise we went all the way to the left of the table without finding

   655     // a parent, meaning this item has been placed at the root level.

   656     else {

   657       // Use the first row in the table as source, because it's garanteed to

   658       // be at the root level. Find the first item, then compare this row

   659       // against it as a sibling.

   660       sourceRow = $('tr.draggable:first').get(0);

   661       if (sourceRow == this.rowObject.element) {

   662         sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]).next('tr.draggable').get(0);

   663       }

   664       var useSibling = true;

   665     }

   666   }

   667 

   668   // Because we may have moved the row from one category to another,

   669   // take a look at our sibling and borrow its sources and targets.

   670   this.copyDragClasses(sourceRow, changedRow, group);

   671   rowSettings = this.rowSettings(group, changedRow);

   672 

   673   // In the case that we're looking for a parent, but the row is at the top

   674   // of the tree, copy our sibling's values.

   675   if (useSibling) {

   676     rowSettings.relationship = 'sibling';

   677     rowSettings.source = rowSettings.target;

   678   }

   679 

   680   var targetClass = '.' + rowSettings.target;

   681   var targetElement = $(targetClass, changedRow).get(0);

   682 

   683   // Check if a target element exists in this row.

   684   if (targetElement) {

   685     var sourceClass = '.' + rowSettings.source;

   686     var sourceElement = $(sourceClass, sourceRow).get(0);

   687     switch (rowSettings.action) {

   688       case 'depth':

   689         // Get the depth of the target row.

   690         targetElement.value = $('.indentation', $(sourceElement).parents('tr:first')).size();

   691         break;

   692       case 'match':

   693         // Update the value.

   694         targetElement.value = sourceElement.value;

   695         break;

   696       case 'order':

   697         var siblings = this.rowObject.findSiblings(rowSettings);

   698         if ($(targetElement).is('select')) {

   699           // Get a list of acceptable values.

   700           var values = new Array();

   701           $('option', targetElement).each(function() {

   702             values.push(this.value);

   703           });

   704           var maxVal = values[values.length - 1];

   705           // Populate the values in the siblings.

   706           $(targetClass, siblings).each(function() {

   707             // If there are more items than possible values, assign the maximum value to the row. 

   708             if (values.length > 0) {

   709               this.value = values.shift();

   710             }

   711             else {

   712               this.value = maxVal;

   713             }

   714           });

   715         }

   716         else {

   717           // Assume a numeric input field.

   718           var weight = parseInt($(targetClass, siblings[0]).val()) || 0;

   719           $(targetClass, siblings).each(function() {

   720             this.value = weight;

   721             weight++;

   722           });

   723         }

   724         break;

   725     }

   726   }

   727 };

   728 

   729 /**

   730  * Copy all special tableDrag classes from one row's form elements to a

   731  * different one, removing any special classes that the destination row

   732  * may have had.

   733  */

   734 Drupal.tableDrag.prototype.copyDragClasses = function(sourceRow, targetRow, group) {

   735   var sourceElement = $('.' + group, sourceRow);

   736   var targetElement = $('.' + group, targetRow);

   737   if (sourceElement.length && targetElement.length) {

   738     targetElement[0].className = sourceElement[0].className;

   739   }

   740 };

   741 

   742 Drupal.tableDrag.prototype.checkScroll = function(cursorY) {

   743   var de  = document.documentElement;

   744   var b  = document.body;

   745 

   746   var windowHeight = this.windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth != 0 ? de.clientHeight : b.offsetHeight);

   747   var scrollY = this.scrollY = (document.all ? (!de.scrollTop ? b.scrollTop : de.scrollTop) : (window.pageYOffset ? window.pageYOffset : window.scrollY));

   748   var trigger = this.scrollSettings.trigger;

   749   var delta = 0;

   750 

   751   // Return a scroll speed relative to the edge of the screen.

   752   if (cursorY - scrollY > windowHeight - trigger) {

   753     delta = trigger / (windowHeight + scrollY - cursorY);

   754     delta = (delta > 0 && delta < trigger) ? delta : trigger;

   755     return delta * this.scrollSettings.amount;

   756   }

   757   else if (cursorY - scrollY < trigger) {

   758     delta = trigger / (cursorY - scrollY);

   759     delta = (delta > 0 && delta < trigger) ? delta : trigger;

   760     return -delta * this.scrollSettings.amount;

   761   }

   762 };

   763 

   764 Drupal.tableDrag.prototype.setScroll = function(scrollAmount) {

   765   var self = this;

   766 

   767   this.scrollInterval = setInterval(function() {

   768     // Update the scroll values stored in the object.

   769     self.checkScroll(self.currentMouseCoords.y);

   770     var aboveTable = self.scrollY > self.table.topY;

   771     var belowTable = self.scrollY + self.windowHeight < self.table.bottomY;

   772     if (scrollAmount > 0 && belowTable || scrollAmount < 0 && aboveTable) {

   773       window.scrollBy(0, scrollAmount);

   774     }

   775   }, this.scrollSettings.interval);

   776 };

   777 

   778 Drupal.tableDrag.prototype.restripeTable = function() {

   779   // :even and :odd are reversed because jquery counts from 0 and

   780   // we count from 1, so we're out of sync.

   781   // Match immediate children of the parent element to allow nesting.

   782   $('> tbody > tr.draggable, > tr.draggable', this.table)

   783     .filter(':odd').filter('.odd')

   784       .removeClass('odd').addClass('even')

   785     .end().end()

   786     .filter(':even').filter('.even')

   787       .removeClass('even').addClass('odd');

   788 };

   789 

   790 /**

   791  * Stub function. Allows a custom handler when a row begins dragging.

   792  */

   793 Drupal.tableDrag.prototype.onDrag = function() {

   794   return null;

   795 };

   796 

   797 /**

   798  * Stub function. Allows a custom handler when a row is dropped.

   799  */

   800 Drupal.tableDrag.prototype.onDrop = function() {

   801   return null;

   802 };

   803 

   804 /**

   805  * Constructor to make a new object to manipulate a table row.

   806  *

   807  * @param tableRow

   808  *   The DOM element for the table row we will be manipulating.

   809  * @param method

   810  *   The method in which this row is being moved. Either 'keyboard' or 'mouse'.

   811  * @param indentEnabled

   812  *   Whether the containing table uses indentations. Used for optimizations.

   813  * @param maxDepth

   814  *   The maximum amount of indentations this row may contain.

   815  * @param addClasses

   816  *   Whether we want to add classes to this row to indicate child relationships.

   817  */

   818 Drupal.tableDrag.prototype.row = function(tableRow, method, indentEnabled, maxDepth, addClasses) {

   819   this.element = tableRow;

   820   this.method = method;

   821   this.group = new Array(tableRow);

   822   this.groupDepth = $('.indentation', tableRow).size();

   823   this.changed = false;

   824   this.table = $(tableRow).parents('table:first').get(0);

   825   this.indentEnabled = indentEnabled;

   826   this.maxDepth = maxDepth;

   827   this.direction = ''; // Direction the row is being moved.

   828 

   829   if (this.indentEnabled) {

   830     this.indents = $('.indentation', tableRow).size();

   831     this.children = this.findChildren(addClasses);

   832     this.group = $.merge(this.group, this.children);

   833     // Find the depth of this entire group.

   834     for (var n = 0; n < this.group.length; n++) {

   835       this.groupDepth = Math.max($('.indentation', this.group[n]).size(), this.groupDepth);

   836     }

   837   }

   838 };

   839 

   840 /**

   841  * Find all children of rowObject by indentation.

   842  *

   843  * @param addClasses

   844  *   Whether we want to add classes to this row to indicate child relationships.

   845  */

   846 Drupal.tableDrag.prototype.row.prototype.findChildren = function(addClasses) {

   847   var parentIndentation = this.indents;

   848   var currentRow = $(this.element, this.table).next('tr.draggable');

   849   var rows = new Array();

   850   var child = 0;

   851   while (currentRow.length) {

   852     var rowIndentation = $('.indentation', currentRow).length;

   853     // A greater indentation indicates this is a child.

   854     if (rowIndentation > parentIndentation) {

   855       child++;

   856       rows.push(currentRow[0]);

   857       if (addClasses) {

   858         $('.indentation', currentRow).each(function(indentNum) {

   859           if (child == 1 && (indentNum == parentIndentation)) {

   860             $(this).addClass('tree-child-first');

   861           }

   862           if (indentNum == parentIndentation) {

   863             $(this).addClass('tree-child');

   864           }

   865           else if (indentNum > parentIndentation) {

   866             $(this).addClass('tree-child-horizontal');

   867           }

   868         });

   869       }

   870     }

   871     else {

   872       break;

   873     }

   874     currentRow = currentRow.next('tr.draggable');

   875   }

   876   if (addClasses && rows.length) {

   877     $('.indentation:nth-child(' + (parentIndentation + 1) + ')', rows[rows.length - 1]).addClass('tree-child-last');

   878   }

   879   return rows;

   880 };

   881 

   882 /**

   883  * Ensure that two rows are allowed to be swapped.

   884  *

   885  * @param row

   886  *   DOM object for the row being considered for swapping.

   887  */

   888 Drupal.tableDrag.prototype.row.prototype.isValidSwap = function(row) {

   889   if (this.indentEnabled) {

   890     var prevRow, nextRow;

   891     if (this.direction == 'down') {

   892       prevRow = row;

   893       nextRow = $(row).next('tr').get(0);

   894     }

   895     else {

   896       prevRow = $(row).prev('tr').get(0);

   897       nextRow = row;

   898     }

   899     this.interval = this.validIndentInterval(prevRow, nextRow);

   900 

   901     // We have an invalid swap if the valid indentations interval is empty.

   902     if (this.interval.min > this.interval.max) {

   903       return false;

   904     }

   905   }

   906 

   907   // Do not let an un-draggable first row have anything put before it.

   908   if (this.table.tBodies[0].rows[0] == row && $(row).is(':not(.draggable)')) {

   909     return false;

   910   }

   911 

   912   return true;

   913 };

   914 

   915 /**

   916  * Perform the swap between two rows.

   917  *

   918  * @param position

   919  *   Whether the swap will occur 'before' or 'after' the given row.

   920  * @param row

   921  *   DOM element what will be swapped with the row group.

   922  */

   923 Drupal.tableDrag.prototype.row.prototype.swap = function(position, row) {

   924   $(row)[position](this.group);

   925   this.changed = true;

   926   this.onSwap(row);

   927 };

   928 

   929 /**

   930  * Determine the valid indentations interval for the row at a given position

   931  * in the table.

   932  *

   933  * @param prevRow

   934  *   DOM object for the row before the tested position

   935  *   (or null for first position in the table).

   936  * @param nextRow

   937  *   DOM object for the row after the tested position

   938  *   (or null for last position in the table).

   939  */

   940 Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function (prevRow, nextRow) {

   941   var minIndent, maxIndent;

   942 

   943   // Minimum indentation:

   944   // Do not orphan the next row.

   945   minIndent = nextRow ? $('.indentation', nextRow).size() : 0;

   946 

   947   // Maximum indentation:

   948   if (!prevRow || $(this.element).is('.tabledrag-root')) {

   949     // Do not indent the first row in the table or 'root' rows..

   950     maxIndent = 0;

   951   }

   952   else {

   953     // Do not go deeper than as a child of the previous row.

   954     maxIndent = $('.indentation', prevRow).size() + ($(prevRow).is('.tabledrag-leaf') ? 0 : 1);

   955     // Limit by the maximum allowed depth for the table.

   956     if (this.maxDepth) {

   957       maxIndent = Math.min(maxIndent, this.maxDepth - (this.groupDepth - this.indents));

   958     }

   959   }

   960 

   961   return {'min':minIndent, 'max':maxIndent};

   962 }

   963 

   964 /**

   965  * Indent a row within the legal bounds of the table.

   966  *

   967  * @param indentDiff

   968  *   The number of additional indentations proposed for the row (can be

   969  *   positive or negative). This number will be adjusted to nearest valid

   970  *   indentation level for the row.

   971  */

   972 Drupal.tableDrag.prototype.row.prototype.indent = function(indentDiff) {

   973   // Determine the valid indentations interval if not available yet.

   974   if (!this.interval) {

   975     prevRow = $(this.element).prev('tr').get(0);

   976     nextRow = $(this.group).filter(':last').next('tr').get(0);

   977     this.interval = this.validIndentInterval(prevRow, nextRow);

   978   }

   979 

   980   // Adjust to the nearest valid indentation.

   981   var indent = this.indents + indentDiff;

   982   indent = Math.max(indent, this.interval.min);

   983   indent = Math.min(indent, this.interval.max);

   984   indentDiff = indent - this.indents;

   985 

   986   for (var n = 1; n <= Math.abs(indentDiff); n++) {

   987     // Add or remove indentations.

   988     if (indentDiff < 0) {

   989       $('.indentation:first', this.group).remove();

   990       this.indents--;

   991     }

   992     else {

   993       $('td:first', this.group).prepend(Drupal.theme('tableDragIndentation'));

   994       this.indents++;

   995     }

   996   }

   997   if (indentDiff) {

   998     // Update indentation for this row.

   999     this.changed = true;

  1000     this.groupDepth += indentDiff;

  1001     this.onIndent();

  1002   }

  1003 

  1004   return indentDiff;

  1005 };

  1006 

  1007 /**

  1008  * Find all siblings for a row, either according to its subgroup or indentation.

  1009  * Note that the passed in row is included in the list of siblings.

  1010  *

  1011  * @param settings

  1012  *   The field settings we're using to identify what constitutes a sibling.

  1013  */

  1014 Drupal.tableDrag.prototype.row.prototype.findSiblings = function(rowSettings) {

  1015   var siblings = new Array();

  1016   var directions = new Array('prev', 'next');

  1017   var rowIndentation = this.indents;

  1018   for (var d in directions) {

  1019     var checkRow = $(this.element)[directions[d]]();

  1020     while (checkRow.length) {

  1021       // Check that the sibling contains a similar target field.

  1022       if ($('.' + rowSettings.target, checkRow)) {

  1023         // Either add immediately if this is a flat table, or check to ensure

  1024         // that this row has the same level of indentaiton.

  1025         if (this.indentEnabled) {

  1026           var checkRowIndentation = $('.indentation', checkRow).length

  1027         }

  1028 

  1029         if (!(this.indentEnabled) || (checkRowIndentation == rowIndentation)) {

  1030           siblings.push(checkRow[0]);

  1031         }

  1032         else if (checkRowIndentation < rowIndentation) {

  1033           // No need to keep looking for siblings when we get to a parent.

  1034           break;

  1035         }

  1036       }

  1037       else {

  1038         break;

  1039       }

  1040       checkRow = $(checkRow)[directions[d]]();

  1041     }

  1042     // Since siblings are added in reverse order for previous, reverse the

  1043     // completed list of previous siblings. Add the current row and continue.

  1044     if (directions[d] == 'prev') {

  1045       siblings.reverse();

  1046       siblings.push(this.element);

  1047     }

  1048   }

  1049   return siblings;

  1050 };

  1051 

  1052 /**

  1053  * Remove indentation helper classes from the current row group.

  1054  */

  1055 Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function() {

  1056   for (n in this.children) {

  1057     $('.indentation', this.children[n])

  1058       .removeClass('tree-child')

  1059       .removeClass('tree-child-first')

  1060       .removeClass('tree-child-last')

  1061       .removeClass('tree-child-horizontal');

  1062   }

  1063 };

  1064 

  1065 /**

  1066  * Add an asterisk or other marker to the changed row.

  1067  */

  1068 Drupal.tableDrag.prototype.row.prototype.markChanged = function() {

  1069   var marker = Drupal.theme('tableDragChangedMarker');

  1070   var cell = $('td:first', this.element);

  1071   if ($('span.tabledrag-changed', cell).length == 0) {

  1072     cell.append(marker);

  1073   }

  1074 };

  1075 

  1076 /**

  1077  * Stub function. Allows a custom handler when a row is indented.

  1078  */

  1079 Drupal.tableDrag.prototype.row.prototype.onIndent = function() {

  1080   return null;

  1081 };

  1082 

  1083 /**

  1084  * Stub function. Allows a custom handler when a row is swapped.

  1085  */

  1086 Drupal.tableDrag.prototype.row.prototype.onSwap = function(swappedRow) {

  1087   return null;

  1088 };

  1089 

  1090 Drupal.theme.prototype.tableDragChangedMarker = function () {

  1091   return '<span class="warning tabledrag-changed">*</span>';

  1092 };

  1093 

  1094 Drupal.theme.prototype.tableDragIndentation = function () {

  1095   return '<div class="indentation">&nbsp;</div>';

  1096 };

  1097 

  1098 Drupal.theme.prototype.tableDragChangedWarning = function () {

  1099   return '<div class="warning">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t("Changes made in this table will not be saved until the form is submitted.") + '</div>';

  1100 };