From 6049f23760cc3653e46ee4bf3f7843590d9954f8 Mon Sep 17 00:00:00 2001
From: Dries Buytaert <dries@buytaert.net>
Date: Wed, 14 Nov 2007 09:50:00 +0000
Subject: [PATCH] - Patch #181066 by quicksketch et al: drag and drop of table
rows on the block adminsitration page.
---
CHANGELOG.txt | 1 +
includes/common.inc | 107 ++
misc/draggable.png | Bin 0 -> 349 bytes
misc/tabledrag.js | 1000 +++++++++++++++++
misc/tree-bottom.png | Bin 0 -> 976 bytes
misc/tree.png | Bin 0 -> 979 bytes
.../block/block-admin-display-form.tpl.php | 39 +-
modules/block/block-rtl.css | 15 -
modules/block/block.admin.inc | 164 +--
modules/block/block.css | 17 +-
modules/block/block.js | 95 ++
modules/block/block.module | 7 +-
modules/system/system.css | 48 +
themes/garland/style.css | 8 +
14 files changed, 1330 insertions(+), 171 deletions(-)
create mode 100644 misc/draggable.png
create mode 100644 misc/tabledrag.js
create mode 100644 misc/tree-bottom.png
create mode 100644 misc/tree.png
delete mode 100644 modules/block/block-rtl.css
create mode 100644 modules/block/block.js
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 297fb2b18a4..b3f3be53bb0 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -46,6 +46,7 @@ Drupal 6.0, xxxx-xx-xx (development version)
.info file.
* Dynamically check password strength and confirmation.
* Refactored poll administration.
+ * Drag and drop of table rows in the block administration page.
- Theme system:
* Added .info files to themes and made it easier to specify regions and
features.
diff --git a/includes/common.inc b/includes/common.inc
index 919ca2f2d57..5fd634acace 100644
--- a/includes/common.inc
+++ b/includes/common.inc
@@ -1926,6 +1926,113 @@ function drupal_get_js($scope = 'header', $javascript = NULL) {
return $output;
}
+/**
+ * Assist in adding the tableDrag JavaScript behavior to a themed table.
+ *
+ * Draggable tables should be used wherever an outline or list of sortable items
+ * needs to be arranged by an end-user. Draggable tables are very flexible and
+ * can manipulate the value of form elements placed within individual columns.
+ *
+ * To setup a table to use drag and drop in place of weight select-lists or
+ * in place of a form that contains parent relationships, the form must be
+ * themed into a table. The table must have an id attribute set. If using
+ * theme_table(), the id may be set as such:
+ * @code
+ * $output = theme('table', $header, $rows, array('id' => 'my-module-table'));
+ * return $output;
+ * @endcode
+ *
+ * In the theme function for the form, a special class must be added to each
+ * form element within the same column, "grouping" them together.
+ *
+ * In a situation where a single weight column is being sorted in the table, the
+ * classes could be added like this (in the theme function):
+ * @code
+ * $form['my_elements'][$delta]['weight']['attributes']['class'] = "my-elements-weight";
+ * @endcode
+ *
+ * Calling drupal_add_tabledrag() would then be written as such:
+ * @code
+ * drupal_add_tabledrag('my-module-table', 'sort', 'sibling', 'my-elements-weight');
+ * @endcode
+ *
+ * In a more complex case where there are several groups in one column (such as
+ * the block regions on the admin/build/block page), a separate subgroup class
+ * must also be added to differentiate the groups.
+ * @code
+ * $form['my_elements'][$region][$delta]['weight']['attributes']['class'] = "my-elements-weight my-elements-weight-". $region;
+ * @endcode
+ *
+ * $group is still 'my-element-weight', and the additional $subgroup variable
+ * will be passed in as 'my-elements-weight-'. $region. This also means that
+ * you'll need to call drupal_add_tabledrag() once for every region added.
+ *
+ * @code
+ * foreach ($regions as $region) {
+ * drupal_add_tabledrag('my-module-table', 'sort', 'sibling', 'my-elements-weight', 'my-elements-weight-'. $region);
+ * }
+ * @endcode
+ *
+ * In a situation where tree relationships are present, adding multiple
+ * subgroups is not necessary, because the table will contain indentations that
+ * provide enough information about the sibling and parent relationships.
+ * See theme_menu_overview_form() for an example creating a table containing
+ * parent relationships.
+ *
+ * Please note that this function should be called from the theme layer, such as
+ * in a .tpl.php file, theme_ function, or in a template_preprocess function,
+ * not in a form declartion. Though the same JavaScript could be added to the
+ * page using drupal_add_js() directly, this function helps keep template files
+ * clean and readable. It also prevents tabledrag.js from being added twice
+ * accidentally.
+ *
+ * @param $table_id
+ * String containing the target table's id attribute. If the table does not
+ * have an id, one will need to be set, such as <table id="my-module-table">.
+ * @param $action
+ * String describing the action to be done on the form item. Either 'match' or
+ * 'sort'. Match is typically used for parent relationships, sort is typically
+ * used to set weights on other form elements with the same group.
+ * @param $relationship
+ * String describing where the $action variable should be performed. Either
+ * 'parent' or 'sibling'. Parent will only look for fields up the tree.
+ * Sibling will look for fields in the same group in rows above and below it.
+ * @param $group
+ * A class name applied on all related form elements for this action.
+ * @param $subgroup
+ * (optional) If the group has several subgroups within it, this string should
+ * contain the class name identifying fields in the same subgroup.
+ * @param $source
+ * (optional) If the $action is 'match', this string should contain the class
+ * name identifying what field will be used as the source value when matching
+ * the value in $subgroup.
+ * @param $hidden
+ * (optional) The column containing the field elements may be entirely hidden
+ * from view dynamically when the JavaScript is loaded. Set to FALSE if the
+ * column should not be hidden.
+ * @see block-admin-display-form.tpl.php
+ * @see theme_menu_overview_form()
+ */
+function drupal_add_tabledrag($table_id, $action, $relationship, $group, $subgroup = NULL, $source = NULL, $hidden = TRUE) {
+ static $js_added = FALSE;
+ if (!$js_added) {
+ drupal_add_js('misc/tabledrag.js', 'core');
+ $js_added = TRUE;
+ }
+
+ // If a subgroup or source isn't set, assume it is the same as the group.
+ $target = isset($subgroup) ? $subgroup : $group;
+ $source = isset($source) ? $source : $target;
+ $settings['tableDrag'][$table_id][$group][] = array(
+ 'target' => $target,
+ 'source' => $source,
+ 'relationship' => $relationship,
+ 'action' => $action,
+ 'hidden' => $hidden,
+ );
+ drupal_add_js($settings, 'setting');
+}
+
/**
* Aggregate JS files, putting them in the files directory.
*
diff --git a/misc/draggable.png b/misc/draggable.png
new file mode 100644
index 0000000000000000000000000000000000000000..47e8a02cf432be62bde8984f14cb2d243b6db160
GIT binary patch
literal 349
zcmeAS@N?(olHy`uVBq!ia0vp^{6MV1!VDxY2k!k2q?n7HJVQ7*IBq}me*omF2l#}z
z0_j7C4z;$n78Mmeefsp?y?Y-%eCY1(77!4aJbCh$FJG#wt7p!f`DZ0l15hb%NswRg
ze>h<H|9@T4&u2gh&H|6fVg?4T4<O9ww8mrxP*AnRHKHUqKdq!Zu_%?nH!-;=KQ}cc
zGf}}UvnaJZzbLy{!8by|$iTp)y=={SpoV5o7srr_Imr=Qv!;p&=qCW_M8zqJJ3YA$
zMQmbKQrem$9dMPYtu;7y`z|>aqa)?ajT1!zmWXI<5{%?^x~^5ItZ6d&VOb+1E03;5
za;5N;g$EY0ChDZNc4Vx5#Po=j=X7LHWbljz9#%Gi3sDC)aHuhbH(%K5)ySB2PD!m~
dw??5cgB0^N9f>5BNkHc?c)I$ztaD0e0sz|Kfb{?X
literal 0
HcmV?d00001
diff --git a/misc/tabledrag.js b/misc/tabledrag.js
new file mode 100644
index 00000000000..03f5a4bb89f
--- /dev/null
+++ b/misc/tabledrag.js
@@ -0,0 +1,1000 @@
+// $Id $
+
+/**
+ * Drag and drop table rows with field manipulation.
+ *
+ * Using the drupal_add_tabledrag() function, any table with weights or parent
+ * relationships may be made into draggable tables. Columns containing a field
+ * may optionally be hidden, providing a better user experience.
+ *
+ * Created tableDrag instances may be modified with custom behaviors by
+ * overriding the .onDrag, .onDrop, .row.onSwap, and .row.onIndent methods.
+ * See blocks.js for an example of adding additional functionality to tableDrag.
+ */
+Drupal.behaviors.tableDrag = function(context) {
+ for (var base in Drupal.settings.tableDrag) {
+ if (!$('#' + base + '.tabledrag-processed').size(), context) {
+ var tableSettings = Drupal.settings.tableDrag[base];
+
+ $('#' + base).filter(':not(.tabledrag-processed)').each(function() {
+ // Create the new tableDrag instance. Save in the Drupal variable
+ // to allow other scripts access to the object.
+ Drupal.tableDrag[base] = new Drupal.tableDrag(this, tableSettings);
+ });
+
+ $('#' + base).addClass('tabledrag-processed');
+ }
+ }
+};
+
+/**
+ * Constructor for the tableDrag object. Provides table and field manipulation.
+ *
+ * @param table
+ * DOM object for the table to be made draggable.
+ * @param tableSettings
+ * Settings for the table added via drupal_add_dragtable().
+ */
+Drupal.tableDrag = function(table, tableSettings) {
+ var self = this;
+
+ // Required object variables.
+ this.table = table;
+ this.tableSettings = tableSettings;
+ this.dragObject = null; // Used to hold information about a current drag operation.
+ this.rowObject = null; // Provides operations for row manipulation.
+ this.oldRowElement = null; // Remember the previous element.
+ this.oldY = 0; // Used to determine up or down direction from last mouse move.
+ this.changed = false; // Whether anything in the entire table has changed.
+
+ // Configure the scroll settings.
+ this.scrollSettings = { amount: 4, interval: 50, trigger: 70 };
+ this.scrollInterval = null;
+ this.scrollY = 0;
+ this.windowHeight = 0;
+
+ // Check if this table contains indentations.
+ var indents = $('div.indentation', table);
+ this.indentEnabled = indents.size() > 0 ? true : false;
+ if (this.indentEnabled) {
+ var indentSize = indents.css('width');
+ this.oldX = 0;
+ this.indentCount = 1; // Total width of indents, set in makeDraggable.
+ this.indentIncrement = indentSize.replace(/[0-9\.]*/, '');
+ this.indentAmount = parseInt(indentSize);
+ }
+
+ // Make each applicable row draggable.
+ $('tr.draggable', table).each(function() { self.makeDraggable(this); });
+
+ // Hide columns containing affected form elements.
+ this.hideColumns();
+
+ // Add mouse bindings to the document. The self variable is passed along
+ // as event handlers do not have direct access to the tableDrag object.
+ $(document).bind('mousemove', { tableDrag: self }, self.dragRow);
+ $(document).bind('mouseup', { tableDrag: self }, self.dropRow);
+};
+
+/**
+ * Hide the columns containing form elements according to the settings for
+ * this tableDrag instance.
+ */
+Drupal.tableDrag.prototype.hideColumns = function() {
+ for (var group in this.tableSettings) {
+ // Find the first field in this group.
+ for (var d in this.tableSettings[group]) {
+ if ($('.' + this.tableSettings[group][d]['target'], this.table).size()) {
+ var hidden = this.tableSettings[group][d]['hidden'];
+ var field = $('.' + this.tableSettings[group][d]['target'] + ':first', this.table);
+ var cell = field.parents('td:first, th:first');
+ break;
+ }
+ }
+ // Hide the column containing this field.
+ if (hidden && cell[0] && cell.css('display') != 'none') {
+ // Add 1 to our indexes. The nth-child selector is 1 based, not 0 based.
+ var columnIndex = $('td', field.parents('tr:first')).index(cell.get(0)) + 1;
+ var headerIndex = $('td:not(:hidden)', field.parents('tr:first')).index(cell.get(0)) + 1;
+ $('tbody tr', this.table).each(function() {
+ // Find and hide the cell in the table body.
+ var cell = $('td:nth-child('+ columnIndex +')', this);
+ if (cell.size()) {
+ cell.css('display', 'none');
+ }
+ // We might be dealing with a row spanning the entire table.
+ // Reduce the colspan on the first cell to prevent the cell from
+ // overshooting the table.
+ else {
+ cell = $('td:first', this);
+ cell.attr('colspan', cell.attr('colspan') - 1);
+ }
+ });
+ $('thead tr', this.table).each(function() {
+ // Remove table header cells entirely (Safari doesn't hide properly).
+ var th = $('th:nth-child('+ headerIndex +')', this);
+ if (th.size()) {
+ th.remove();
+ }
+ });
+ }
+ }
+};
+
+/**
+ * Find the target used within a particular row and group.
+ */
+Drupal.tableDrag.prototype.rowSettings = function(group, row) {
+ var field = $('.' + group, row);
+ for (delta in this.tableSettings[group]) {
+ var targetClass = this.tableSettings[group][delta]['target'];
+ if (field.is('.' + targetClass)) {
+ // Return a copy of the row settings.
+ var rowSettings = new Object();
+ for (var n in this.tableSettings[group][delta]) {
+ rowSettings[n] = this.tableSettings[group][delta][n];
+ }
+ return rowSettings;
+ }
+ }
+};
+
+/**
+ * Take an item and add event handlers to make it become draggable.
+ */
+Drupal.tableDrag.prototype.makeDraggable = function(item) {
+ var self = this;
+
+ // Create the handle.
+ var handle = $('<a href="#" title="Drag to re-order" class="tabledrag-handle"><div class="handle"> </div></a>');
+ // Insert the handle after indentations (if any).
+ if ($('td:first .indentation:last', item).after(handle).size()) {
+ // Update the total width of indentation in this entire table.
+ self.indentCount = Math.max($('.indentation', item).size(), self.indentCount);
+ }
+ else {
+ $('td:first', item).prepend(handle);
+ }
+
+ // Add hover action for the handle.
+ handle.hover(function() {
+ self.dragObject == null ? $(this).addClass('tabledrag-handle-hover') : null;
+ }, function() {
+ self.dragObject == null ? $(this).removeClass('tabledrag-handle-hover') : null;
+ });
+
+ // Add the mousedown action for the handle.
+ handle.mousedown(function(event) {
+ // Create a new dragObject recording the event information.
+ self.dragObject = new Object();
+ self.dragObject.initMouseOffset = self.getMouseOffset(item, event);
+ self.dragObject.initMouseCoords = self.mouseCoords(event);
+ if (self.indentEnabled) {
+ self.dragObject.indentMousePos = self.dragObject.initMouseCoords;
+ }
+
+ // If there's a lingering row object from the keyboard, remove it's focus.
+ if (self.rowObject) {
+ $('a.tabledrag-handle', self.rowObject.element).blur();
+ }
+
+ // Create a new rowObject for manipulation of this row.
+ self.rowObject = new self.row(item, 'mouse', self.indentEnabled, true);
+
+ // Save the position of the table.
+ self.table.topY = self.getPosition(self.table).y;
+ self.table.bottomY = self.table.topY + self.table.offsetHeight;
+
+ // Add classes to the handle and row.
+ $(this).addClass('tabledrag-handle-hover');
+ $(item).addClass('drag');
+
+ // Set the document to use the move cursor during drag.
+ $('body').addClass('drag');
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+
+ // Hack for IE6 that flickers uncontrollably if select lists are moved.
+ if (navigator.userAgent.indexOf('MSIE 6.') != -1) {
+ $('select', this.table).css('display', 'none');
+ }
+
+ // Hack for Konqueror, prevent the blur handler from firing.
+ // Konqueror always gives links focus, even after returning false on mousedown.
+ self.safeBlur = false;
+
+ // Call optional placeholder function.
+ self.onDrag();
+ return false;
+ });
+
+ // Prevent the anchor tag from jumping us to the top of the page.
+ handle.click(function() {
+ return false;
+ });
+
+ // Similar to the hover event, add a class when the handle is focused.
+ handle.focus(function() {
+ $(this).addClass('tabledrag-handle-hover');
+ self.safeBlur = true;
+ });
+
+ // Remove the handle class on blur and fire the same function as a mouseup.
+ handle.blur(function(event) {
+ $(this).removeClass('tabledrag-handle-hover');
+ if (self.rowObject && self.safeBlur) {
+ event.data = { tableDrag: self };
+ self.dropRow(event);
+ }
+ });
+
+ // Add arrow-key support to the handle.
+ handle.keydown(function(event) {
+ // If a rowObject doesn't yet exist and this isn't the tab key.
+ if (event.keyCode != 9 && !self.rowObject) {
+ self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, true);
+ }
+
+ var keyChange = false;
+ switch (event.keyCode) {
+ case 37: // Left arrow.
+ case 63234: // Safari left arrow.
+ keyChange = true;
+ self.rowObject.indent(-1);
+ break;
+ case 38: // Up arrow.
+ case 63232: // Safari up arrow.
+ var previousRow = $(self.rowObject.element).prev('tr').get(0);
+ while (previousRow && $(previousRow).is(':hidden')) {
+ previousRow = $(previousRow).prev('tr').get(0);
+ }
+ if (previousRow) {
+ self.safeBlur = false; // Do not allow the onBlur cleanup.
+ self.rowObject.direction = 'up';
+ keyChange = true;
+ if (self.rowObject.isValidSwap(previousRow, 'up', 0)) {
+ self.rowObject.swap('before', previousRow);
+ window.scrollBy(0, -parseInt(item.offsetHeight));
+ }
+ else if (self.table.tBodies[0].rows[0] != previousRow || $(previousRow).is('.draggable')) {
+ self.rowObject.swap('before', previousRow);
+ self.rowObject.indent(-1);
+ window.scrollBy(0, -parseInt(item.offsetHeight));
+ }
+ handle.get(0).focus(); // Regain focus after the DOM manipulation.
+ }
+ break;
+ case 39: // Right arrow.
+ case 63235: // Safari right arrow.
+ keyChange = true;
+ self.rowObject.indent(1);
+ break;
+ case 40: // Down arrow.
+ case 63233: // Safari down arrow.
+ var nextRow = $(self.rowObject.group).filter(':last').next('tr').get(0);
+ while (nextRow && $(nextRow).is(':hidden')) {
+ nextRow = $(nextRow).next('tr').get(0);
+ }
+ if (nextRow) {
+ self.safeBlur = false; // Do not allow the onBlur cleanup.
+ self.rowObject.direction = 'down';
+ keyChange = true;
+ if (self.rowObject.isValidSwap(nextRow, 'down', 0)) {
+ self.rowObject.swap('after', nextRow);
+ }
+ else {
+ self.rowObject.swap('after', nextRow);
+ self.rowObject.indent(-1);
+ }
+ handle.get(0).focus(); // Regain focus after the DOM manipulation.
+ window.scrollBy(0, parseInt(item.offsetHeight));
+ }
+ break;
+ }
+
+ if (self.rowObject && self.rowObject.changed == true) {
+ $(item).addClass('drag');
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ self.oldRowElement = item;
+ self.restripeTable();
+ self.onDrag();
+ }
+
+ // Returning false if we have an arrow key to prevent scrolling.
+ if (keyChange) {
+ return false;
+ }
+ });
+
+ // Compatibility addition, return false on keypress to prevent unwanted scrolling.
+ // IE and Safari will supress scrolling on keydown, but all other browsers
+ // need to return false on keypress. http://www.quirksmode.org/js/keys.html
+ handle.keypress(function(event) {
+ switch (event.keyCode) {
+ case 37: // Left arrow.
+ case 38: // Up arrow.
+ case 39: // Right arrow.
+ case 40: // Down arrow.
+ return false;
+ }
+ });
+};
+
+/**
+ * Mousemove event handler, bound to document.
+ */
+Drupal.tableDrag.prototype.dragRow = function(event) {
+ var self = event.data.tableDrag;
+
+ if (self.dragObject) {
+ self.currentMouseCoords = self.mouseCoords(event);
+
+ var y = self.currentMouseCoords.y - self.dragObject.initMouseOffset.y;
+ var x = self.currentMouseCoords.x - self.dragObject.initMouseOffset.x;
+
+ // Check for row swapping and vertical scrolling.
+ if (y != self.oldY) {
+ self.rowObject.direction = y > self.oldY ? 'down' : 'up';
+ self.oldY = y; // Update the old value.
+
+ // Check if the window should be scrolled (and how fast).
+ var scrollAmount = self.checkScroll(self.currentMouseCoords.y);
+ // Stop any current scrolling.
+ clearInterval(self.scrollInterval);
+ // Continue scrolling if the mouse has moved in the scroll direction.
+ if (scrollAmount > 0 && self.rowObject.direction == 'down' || scrollAmount < 0 && self.rowObject.direction == 'up') {
+ self.setScroll(scrollAmount);
+ }
+
+ // If we have a valid target, perform the swap and restripe the table.
+ var currentRow = self.findDropTargetRow(x, y);
+ if (currentRow) {
+ if (self.rowObject.direction == 'down') {
+ self.rowObject.swap('after', currentRow, self);
+ }
+ else {
+ self.rowObject.swap('before', currentRow, self);
+ }
+ self.restripeTable();
+ }
+ }
+
+ // Similar to row swapping, handle indentations.
+ if (self.indentEnabled && x != self.oldX) {
+ self.oldX = x;
+ var xDiff = self.currentMouseCoords.x - self.dragObject.indentMousePos.x;
+ // Set the number of indentations the mouse has been moved left or right.
+ var indentDiff = parseInt(xDiff / self.indentAmount);
+ // Limit the indentation to no less than the left edge of the table and no
+ // more than the total amount of indentation in the table.
+ indentDiff = indentDiff > 0 ? Math.min(indentDiff, self.indentCount - self.rowObject.indents + 1) : Math.max(indentDiff, -self.rowObject.indents);
+ if (indentDiff != 0) {
+ // Indent the row with our estimated diff, which may be further
+ // restricted according to the rows around this row.
+ var indentChange = self.rowObject.indent(indentDiff);
+
+ // Update table and mouse indentations.
+ self.dragObject.indentMousePos.x += self.indentAmount * indentChange;
+ self.indentCount = Math.max(self.indentCount, self.rowObject.indents);
+ }
+ }
+
+ return false;
+ }
+};
+
+/**
+ * Mouseup event handler, bound to document.
+ * Blur event handler, bound to drag handle for keyboard support.
+ */
+Drupal.tableDrag.prototype.dropRow = function(event) {
+ var self = event.data.tableDrag;
+
+ // Drop row functionality shared between mouseup and blur events.
+ if (self.rowObject != null) {
+ var droppedRow = self.rowObject.element;
+ // The row is already in the right place so we just release it.
+ if (self.rowObject.changed == true) {
+ self.updateFields(droppedRow);
+ self.rowObject.markChanged();
+ if (self.changed == false) {
+ $(Drupal.theme('tableDragChangedWarning')).insertAfter(self.table).hide().fadeIn('slow');
+ self.changed = true;
+ }
+ }
+
+ if (self.indentEnabled) {
+ self.rowObject.removeIndentClasses();
+ }
+ if (self.oldRowElement) {
+ $(self.oldRowElement).removeClass('drag-previous');
+ }
+ $(droppedRow).removeClass('drag').addClass('drag-previous');
+ self.oldRowElement = droppedRow;
+ self.onDrop();
+ self.rowObject = null;
+ }
+
+ // Functionality specific only to mouseup event.
+ if (self.dragObject != null) {
+ $('.tabledrag-handle', droppedRow).removeClass('tabledrag-handle-hover');
+
+ self.dragObject = null;
+ $('body').removeClass('drag');
+ clearInterval(self.scrollInterval);
+
+ // Hack for IE6 that flickers uncontrollably if select lists are moved.
+ if (navigator.userAgent.indexOf('MSIE 6.') != -1) {
+ $('select', this.table).css('display', 'block');
+ }
+ }
+};
+
+/**
+ * Get the position of an element by adding up parent offsets in the DOM tree.
+ */
+Drupal.tableDrag.prototype.getPosition = function(element){
+ var left = 0;
+ var top = 0;
+ // Because Safari doesn't report offsetHeight on table rows, but does on table
+ // cells, grab the firstChild of the row and use that instead.
+ // http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari
+ if (element.offsetHeight == 0) {
+ element = element.firstChild; // a table cell
+ }
+
+ while (element.offsetParent){
+ left += element.offsetLeft;
+ top += element.offsetTop;
+ element = element.offsetParent;
+ }
+
+ left += element.offsetLeft;
+ top += element.offsetTop;
+
+ return {x:left, y:top};
+};
+
+/**
+ * Get the mouse coordinates from the event (allowing for browser differences).
+ */
+Drupal.tableDrag.prototype.mouseCoords = function(event){
+ if (event.pageX || event.pageY) {
+ return {x:event.pageX, y:event.pageY};
+ }
+ return {
+ x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
+ y:event.clientY + document.body.scrollTop - document.body.clientTop
+ };
+};
+
+/**
+ * Given a target element and a mouse event, get the mouse offset from that
+ * element. To do this we need the element's position and the mouse position.
+ */
+Drupal.tableDrag.prototype.getMouseOffset = function(target, event) {
+ var docPos = this.getPosition(target);
+ var mousePos = this.mouseCoords(event);
+ return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
+};
+
+/**
+ * Find the row the mouse is currently over. This row is then taken and swapped
+ * with the one being dragged.
+ *
+ * @param x
+ * The x coordinate of the mouse on the page (not the screen).
+ * @param y
+ * The y coordinate of the mouse on the page (not the screen).
+ */
+Drupal.tableDrag.prototype.findDropTargetRow = function(x, y) {
+ var rows = this.table.tBodies[0].rows;
+ for (var n=0; n<rows.length; n++) {
+ var row = rows[n];
+ var indentDiff = 0;
+ // Safari fix see Drupal.tableDrag.prototype.getPosition()
+ if (row.offsetHeight == 0) {
+ var rowY = this.getPosition(row.firstChild).y;
+ var rowHeight = parseInt(row.firstChild.offsetHeight)/2;
+ }
+ // Other browsers.
+ else {
+ var rowY = this.getPosition(row).y;
+ var rowHeight = parseInt(row.offsetHeight)/2;
+ }
+
+ // Because we always insert before, we need to offset the height a bit.
+ if ((y > (rowY - rowHeight)) && (y < (rowY + rowHeight))) {
+ if (this.indentEnabled) {
+ // Check that this row is not a child of the row being dragged.
+ for (n in this.rowObject.group) {
+ if (this.rowObject.group[n] == row) {
+ return null;
+ }
+ }
+ // Check that moving this row will not cause invalid relationships.
+ var xDiff = this.currentMouseCoords.x - this.dragObject.initMouseCoords.x;
+ indentDiff = parseInt(xDiff / this.indentAmount);
+ }
+
+ if (!this.rowObject.isValidSwap(row, indentDiff)) {
+ return null;
+ }
+
+ // We've may have found the row the mouse just passed over, but it doesn't
+ // take into account hidden rows. Skip backwards until we find a draggable
+ // row.
+ while ($(row).is(':hidden') && $(row).prev('tr').is(':hidden')) {
+ row = $(row).prev('tr').get(0);
+ }
+ return row;
+ }
+ }
+ return null;
+};
+
+/**
+ * After the row is dropped, update the table fields according to the settings
+ * set for this table.
+ *
+ * @param changedRow
+ * DOM object for the row that was just dropped.
+ */
+Drupal.tableDrag.prototype.updateFields = function(changedRow) {
+ for (var group in this.tableSettings) {
+ // Each group may have a different setting for relationship, so we find
+ // the source rows for each seperately.
+ var rowSettings = this.rowSettings(group, changedRow);
+
+ // Siblings are easy, check previous and next rows.
+ if (rowSettings.relationship == 'sibling') {
+ var previousRow = $(changedRow).prev('tr').get(0);
+ var nextRow = $(changedRow).next('tr').get(0);
+ var sourceRow = changedRow;
+ if ($(previousRow).is('.draggable') && $('.' + group, previousRow).length) {
+ if (this.indentEnabled) {
+ if ($('.indentations', previousRow).size() == $('.indentations', changedRow)) {
+ sourceRow = previousRow;
+ }
+ }
+ else {
+ sourceRow = previousRow;
+ }
+ }
+ else if ($(nextRow).is('.draggable') && $('.' + group, nextRow).length) {
+ if (this.indentEnabled) {
+ if ($('.indentations', nextRow).size() == $('.indentations', changedRow)) {
+ sourceRow = nextRow;
+ }
+ }
+ else {
+ sourceRow = nextRow;
+ }
+ }
+ }
+ // Parents, look up the tree until we find a field not in this group.
+ // Go up as many parents as indentations in the changed row.
+ else if (rowSettings.relationship == 'parent') {
+ var previousRow = $(changedRow).prev('tr');
+ while (previousRow.length && $('.indentation', previousRow).length >= this.rowObject.indents) {
+ previousRow = previousRow.prev('tr');
+ }
+ // If we found a row.
+ if (previousRow.length) {
+ sourceRow = previousRow[0];
+ }
+ // Otherwise we went all the way to the top of the table.
+ // Assume that the first item has no indentions.
+ else {
+ // Basically copy first item's value.
+ sourceRow = $('tr.draggable:first')[0];
+ var useSibling = true;
+ }
+ }
+
+ // Because we may have moved the row from one category to another,
+ // take a look at our sibling and borrow its sources and targets.
+ this.copyDragClasses(sourceRow, changedRow, group);
+ rowSettings = this.rowSettings(group, changedRow);
+
+ // In the case that we're looking for a parent, but the row is at the top
+ // of the tree, copy our sibling's values.
+ if (useSibling) {
+ rowSettings.relationship = 'sibling';
+ rowSettings.source = rowSettings.target;
+ }
+
+ var targetClass = '.' + rowSettings.target;
+ var targetElement = $(targetClass, changedRow).get(0);
+
+ // Check if a target element exists in this row.
+ if (targetElement) {
+ var sourceClass = '.' + rowSettings.source;
+ var sourceElement = $(sourceClass, sourceRow).get(0);
+ switch (rowSettings.action) {
+ case 'match':
+ // Update the value.
+ targetElement.value = sourceElement.value;
+ break;
+ case 'order':
+ var siblings = this.rowObject.findSiblings(rowSettings);
+ if ($(targetElement).is('select')) {
+ // Get a list of acceptable values.
+ var values = new Array();
+ $('option', targetElement).each(function() {
+ values.push(this.value);
+ });
+ // Populate the values in the siblings.
+ $(targetClass, siblings).each(function() {
+ this.value = values.shift();
+ });
+ }
+ else {
+ // Assume a numeric input field.
+ var weight = 0;
+ $(targetClass, siblings).each(function() {
+ this.value = weight;
+ weight++;
+ });
+ }
+ break;
+ }
+ }
+ }
+};
+
+/**
+ * Copy all special tableDrag classes from one row's form elements to a
+ * different one, removing any special classes that the destination row
+ * may have had.
+ */
+Drupal.tableDrag.prototype.copyDragClasses = function(sourceRow, targetRow, group) {
+ var sourceElement = $('.' + group, sourceRow);
+ var targetElement = $('.' + group, targetRow);
+ if (sourceElement.length && targetElement.length) {
+ targetElement[0].className = sourceElement[0].className;
+ }
+};
+
+Drupal.tableDrag.prototype.checkScroll = function(cursorY) {
+ var de = document.documentElement;
+ var b = document.body;
+
+ var windowHeight = this.windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth != 0 ? de.clientHeight : b.offsetHeight);
+ var scrollY = this.scrollY = (document.all ? (!de.scrollTop ? b.scrollTop : de.scrollTop) : (window.pageYOffset ? window.pageYOffset : window.scrollY));
+ var trigger = this.scrollSettings.trigger;
+ var delta = 0;
+
+ // Return a scroll speed relative to the edge of the screen.
+ if (cursorY - scrollY > windowHeight - trigger) {
+ delta = trigger / (windowHeight + scrollY - cursorY);
+ delta = (delta > 0 && delta < trigger) ? delta : trigger;
+ return delta * this.scrollSettings.amount;
+ }
+ else if (cursorY - scrollY < trigger) {
+ delta = trigger / (cursorY - scrollY);
+ delta = (delta > 0 && delta < trigger) ? delta : trigger;
+ return -delta * this.scrollSettings.amount;
+ }
+};
+
+Drupal.tableDrag.prototype.setScroll = function(scrollAmount) {
+ var self = this;
+
+ this.scrollInterval = setInterval(function() {
+ // Update the scroll values stored in the object.
+ self.checkScroll(self.currentMouseCoords.y);
+ var aboveTable = self.scrollY > self.table.topY;
+ var belowTable = self.scrollY + self.windowHeight < self.table.bottomY;
+ if (scrollAmount > 0 && belowTable || scrollAmount < 0 && aboveTable) {
+ window.scrollBy(0, scrollAmount);
+ }
+ }, this.scrollSettings.interval);
+};
+
+Drupal.tableDrag.prototype.restripeTable = function() {
+ // :even and :odd are reversed because jquery counts from 0 and
+ // we count from 1, so we're out of sync.
+ $('tr.draggable', this.table)
+ .filter(':odd').filter('.odd')
+ .removeClass('odd').addClass('even')
+ .end().end()
+ .filter(':even').filter('.even')
+ .removeClass('even').addClass('odd');
+};
+
+/**
+ * Stub function. Allows a custom handler when a row begins dragging.
+ */
+Drupal.tableDrag.prototype.onDrag = function() {
+ return null;
+};
+
+/**
+ * Stub function. Allows a custom handler when a row is dropped.
+ */
+Drupal.tableDrag.prototype.onDrop = function() {
+ return null;
+};
+
+/**
+ * Constructor to make a new object to manipulate a table row.
+ *
+ * @param tableRow
+ * The DOM element for the table row we will be manipulating.
+ * @param method
+ * The method in which this row is being moved. Either 'keyboard' or 'mouse'.
+ * @param indentEnabled
+ * Whether the containing table uses indentations. Used for optimizations.
+ * @param addClasses
+ * Whether we want to add classes to this row to indicate child relationships.
+ */
+Drupal.tableDrag.prototype.row = function(tableRow, method, indentEnabled, addClasses) {
+ this.element = tableRow;
+ this.method = method;
+ this.group = new Array(tableRow);
+ this.groupDepth = $('.indentation', tableRow).size();
+ this.changed = false;
+ this.table = $(tableRow).parents('table:first').get(0);
+ this.indentEnabled = indentEnabled;
+ this.direction = ''; // Direction the row is being moved.
+
+ if (this.indentEnabled) {
+ this.indents = $('.indentation', tableRow).size();
+ this.children = this.findChildren(addClasses);
+ this.group = $.merge(this.group, this.children);
+ // Find the depth of this entire group.
+ for (var n = 0; n < this.group.length; n++) {
+ this.groupDepth = Math.max($('.indentation', this.group[n]).size(), this.groupDepth);
+ }
+ }
+};
+
+/**
+ * Find all children of rowObject by indentation.
+ *
+ * @param addClasses
+ * Whether we want to add classes to this row to indicate child relationships.
+ */
+Drupal.tableDrag.prototype.row.prototype.findChildren = function(addClasses) {
+ var parentIndentation = this.indents;
+ var currentRow = $(this.element, this.table).next('tr.draggable');
+ var rows = new Array();
+ var child = 0;
+ while (currentRow.length) {
+ var rowIndentation = $('.indentation', currentRow).length;
+ // A greater indentation indicates this is a child.
+ if (rowIndentation > parentIndentation) {
+ child++;
+ rows.push(currentRow[0]);
+ if (addClasses) {
+ $('.indentation', currentRow).each(function(indentNum) {
+ if (child == 1 && (indentNum == parentIndentation)) {
+ $(this).addClass('tree-child-first');
+ }
+ if (indentNum == parentIndentation) {
+ $(this).addClass('tree-child');
+ }
+ else if (indentNum > parentIndentation) {
+ $(this).addClass('tree-child-horizontal');
+ }
+ });
+ }
+ }
+ else {
+ break;
+ }
+ currentRow = currentRow.next('tr.draggable');
+ }
+ if (addClasses && rows.length) {
+ $('.indentation:nth-child(' + (parentIndentation + 1) + ')', rows[rows.length - 1]).addClass('tree-child-last');
+ }
+ return rows;
+};
+
+/**
+ * Ensure that two rows are allowed to be swapped. Returns false if swapping
+ * will cause invalid parent relationships.
+ *
+ * @param row
+ * The row being considered for swapping.
+ * @param indentDiff
+ * A horizontal difference in indendations.
+ */
+Drupal.tableDrag.prototype.row.prototype.isValidSwap = function(row, indentDiff) {
+ if (this.indentEnabled) {
+ var rowIndents = $('.indentation', row).size();
+ var prevIndents = $('.indentation', $(row).prev('tr')).size();
+ var nextIndents = $('.indentation', $(row).next('tr')).size();
+
+ if (
+ (this.direction == 'down') && (
+ // Prevent being able to drag a row downward with 2 indentations from a parent.
+ this.indents > rowIndents + 1 ||
+ // Prevent orphaning children when dragging into a parent.
+ this.indents < nextIndents - indentDiff
+ ) ||
+ (this.direction == 'up') && (
+ // Prevent being able to drag a row upward with 2 indentations from a parent.
+ this.indents < rowIndents ||
+ // Prevent orphaning children when dragging between a child and parent.
+ this.indents > prevIndents + 1 - indentDiff
+ )
+ ) {
+ return false;
+ }
+ }
+
+ // Restriction special cases for the first row in the table.
+ if (this.table.tBodies[0].rows[0] == row) {
+ // Do not let the first row contain indentations
+ // or let an un-draggable first row have anything put before it.
+ if (this.indents > 0 || $(row).is(':not(.draggable)')) {
+ return false;
+ }
+ }
+
+ return true;
+};
+
+/**
+ * Perform the swap between two rows.
+ *
+ * @param position
+ * Whether the swap will occur 'before' or 'after' the given row.
+ * @param row
+ * DOM element what will be swapped with the row group.
+ */
+Drupal.tableDrag.prototype.row.prototype.swap = function(position, row) {
+ $(row)[position](this.group);
+ this.changed = true;
+ this.onSwap(row);
+};
+
+/**
+ * Indent a row within the legal bounds of the table.
+ *
+ * @param indentDiff
+ * The number of indentations the row group should receive, can be negative or
+ * positive.
+ */
+Drupal.tableDrag.prototype.row.prototype.indent = function(indentDiff) {
+ if (indentDiff > 0) {
+ var prevRow = $(this.group).filter(':first').prev('tr').get(0);
+ if (prevRow) {
+ var prevIndent = $('.indentation', $(this.group).filter(':first').prev('tr')).size();
+ indentDiff = Math.min(prevIndent - this.indents + 1, indentDiff);
+ }
+ else {
+ indentDiff = 0; // First row may not contain indents.
+ }
+ }
+ else {
+ var nextIndent = $('.indentation', $(this.group).filter(':last').next('tr')).size();
+ indentDiff = Math.max(nextIndent - this.indents, indentDiff);
+ }
+
+ // Never allow indentation greater than 8 parents (menu system limit).
+ if (indentDiff + this.groupDepth > 8) {
+ indentDiff = 0;
+ }
+
+ for (var n = 1; n <= Math.abs(indentDiff); n++) {
+ // Add or remove indentations.
+ if (indentDiff < 0) {
+ $('.indentation:first', this.group).remove();
+ this.indents--;
+ }
+ else {
+ $('td:first', this.group).prepend(Drupal.theme('tableDragIndentation'));
+ this.indents++;
+ }
+ }
+ if (indentDiff) {
+ this.changed = true;
+ }
+
+ // Update indentation for this row.
+ this.groupDepth += indentDiff;
+ this.onIndent();
+
+ return indentDiff;
+};
+
+/**
+ * Find all siblings for a row, either according to its subgroup or indentation.
+ * Note that the passed in row is included in the list of siblings.
+ *
+ * @param settings
+ * The field settings we're using to identify what constitutes a sibling.
+ */
+Drupal.tableDrag.prototype.row.prototype.findSiblings = function(rowSettings) {
+ var siblings = new Array();
+ var directions = new Array('prev', 'next');
+ var rowIndentation = this.indents;
+ for (var d in directions) {
+ var checkRow = $(this.element)[directions[d]]();
+ while (checkRow.length) {
+ // Check that the sibling contains a similar target field.
+ if ($('.' + rowSettings.target, checkRow)) {
+ // Either add immediately if this is a flat table, or check to ensure
+ // that this row has the same level of indentaiton.
+ if (this.indentEnabled) {
+ var checkRowIndentation = $('.indentation', checkRow).length
+ }
+
+ if (!(this.indentEnabled) || (checkRowIndentation == rowIndentation)) {
+ siblings.push(checkRow[0]);
+ }
+ else if (checkRowIndentation < rowIndentation) {
+ // No need to keep looking for siblings when we get to a parent.
+ break;
+ }
+ }
+ else {
+ break;
+ }
+ checkRow = $(checkRow)[directions[d]]();
+ }
+ // Since siblings are added in reverse order for previous, reverse the
+ // completed list of previous siblings. Add the current row and continue.
+ if (directions[d] == 'prev') {
+ siblings.reverse();
+ siblings.push(this.element);
+ }
+ }
+ return siblings;
+};
+
+/**
+ * Remove indentation helper classes from the current row group.
+ */
+Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function() {
+ for (n in this.children) {
+ $('.indentation', this.children[n])
+ .removeClass('tree-child')
+ .removeClass('tree-child-first')
+ .removeClass('tree-child-last')
+ .removeClass('tree-child-horizontal');
+ }
+};
+
+/**
+ * Add an asterisk or other marker to the changed row.
+ */
+Drupal.tableDrag.prototype.row.prototype.markChanged = function() {
+ var marker = Drupal.theme('tableDragChangedMarker');
+ var cell = $('td:first', this.element);
+ if ($('span.tabledrag-changed', cell).length == 0) {
+ cell.append(marker);
+ }
+};
+
+/**
+ * Stub function. Allows a custom handler when a row is indented.
+ */
+Drupal.tableDrag.prototype.row.prototype.onIndent = function() {
+ return null;
+};
+
+/**
+ * Stub function. Allows a custom handler when a row is swapped.
+ */
+Drupal.tableDrag.prototype.row.prototype.onSwap = function(swappedRow) {
+ return null;
+};
+
+Drupal.theme.prototype.tableDragChangedMarker = function () {
+ return '<span class="warning tabledrag-changed">*</span>';
+};
+
+Drupal.theme.prototype.tableDragIndentation = function () {
+ return '<div class="indentation"> </div>';
+};
+
+Drupal.theme.prototype.tableDragChangedWarning = function () {
+ return '<div class="warning">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t("Changes made in this table will not be saved until the form is submitted.") + '</div>';
+};
diff --git a/misc/tree-bottom.png b/misc/tree-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..256ae1f432e6dd602f2b24999baf871fe7b78ccb
GIT binary patch
literal 976
zcmZ|OMQkfZ5CBkD$>A&Nzg4P!rLe=y%ytq79LEl`6Fbatn3<WGnVFfHnVFfnTm5ra
z+8xbmwTCw|p(v!xPm+H~AP~q;ge(jVA_{EfA4K4^kDnC;;THj}LBQA;6P&U3c!&hf
z#t=_|u)><)(ReJ*)ov6o41o|qPzow=A0MBcot?nIKx1QL0)b#}Z|~;j=H=z(?d|R8
z=xA$eYieq0Vq#)rW8>oDVqsz7>FMd}>S}FmZEkMv;o;%z?Cj*^6d4&=TwFXoJ)NDM
z-PP6g{ryc!N=imXMovynK|w)DNl8UTMNLf&g+gg)XlQ9^>FDU_>FF657#JBDnV6WE
znVDHwSXfzE+1S|F+1WWbI5;^uxwyEvxw(0GczAhv`S|$w`S}F|1Ox>Ig@lBJg@r{#
zL_|eJ#l*zK#l<BgBqSvzrKF@_Fc=&TmzI{6k&%&=l|>*Ba&mI=^70A_3W|z~NF-88
zNeP8QDJv_Z(P#_?qoSgss;a7{rlzj0uA!l!si~=@rKPQ{t)ru(tE;Q0r>C#4Z(v}6
z#bON&4ULS9a5x+uj|Wfy1hANynE?b~Vrgk<Wn~3SfD#b1v$F$?4h{~$6Bq&?pak@Q
z8?beEcL#2O@i#K?_x1Jl^Yiof_YVjN0EGw&3JMMm4habf4Gj$o3kweqkBEo>!ckFC
z(b3T{F)^{Rv2k&6@$vBq2?>dbiAhOG$;rtnDJiL`scC6x>FMbi85x<GnORv`pd2|l
zIk~yHd3kyH`S}F}1%-u$MMXuRSS2MTrKP21Wo6~%<rNhbm6erMRaMp1)ipIWwY9Z%
zb#?Xi^$iUTjg5^>O-;?s%`Gi0t*xzXZEfxC?HwH*ot>Sa(B0kLJv}|Wy}f;Xef|CY
z0|NttgM&juL&L+vBO@cDqoZSEW8>rF6B84Ylao_ZQ=mg;W@ct*XXobT=I7@Z78Vv4
z7nhcnmY0`TR#sM5SJ&3o*4NiJHa0dlH@CL7wzs!IbMEf$?(OaE@9!TR92_1V9vvMW
zA0MBboSdGXo}HbYpPye`TwGpWUR_;XUtizc+}z&Y-re2Z-`_txJUl)=K0Q4>KR>^`
zyu7}?zP-J@zrTNce0+X>etms`Muq-eBLxPAlz>KJK>EK6q8W5-4jzgiU=k`WYZnt7
ze?TbyB&s1vT@iVaCjOKqhH58eGUlS_{~`&L%tgImUCMYdw7--8?xL%}#1VH;TM}ES
Qwu6r#2sjc}C28RIFO<#q8vp<R
literal 0
HcmV?d00001
diff --git a/misc/tree.png b/misc/tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..fccec6bdb704370506fc122b0d1250006c20c2fa
GIT binary patch
literal 979
zcmZ|ORZQ$h6bImcOCN4-E=k*$n>NAS-EENt7Fm|Xodp(m7T3ky-QC^Y-QC^YT{}tp
z+DT?kPBNK??{_8yg_I)v{`YqXf(Q}P5@=9SU@Lwj0H=N23_mD;;o#~xB^zU$GsYeZ
zi5l4$U`Y{H7!xcSi!pMw8^H=f5CMdeQ-=Ha_-t=)2LuEd8yn+rID310H#avgFE4Lz
zZ%0Q*TU%RGQ&STY6B`>F7Z(=`3ky$APghr0YinzBb8`<54`*j*Cnu+fh=`)1qN%B=
ztgNig&d#r|FCro$Vq#(v5)x8UQZh0!a&mGC3JOX}N-8QUYHDg48X8(!S~@y9dU|>W
z1_nk(MkXdEW@cs<78X`kRyH;^c6N3S4h~LEPA)DkZf<TK9v)s^UOqlPetv!d0Rcfl
zK_MX_VPRnr5fK;+CMqf_CMG5>E-oP<0f)mSB_*Y#q@<;#5eS5gjEt<Ttel*jyu3UT
ziBwQfK%r2Iii&77T1iPsSy@>{MMYIrRZUGzU0q#6Lqk(jQ%g%rTU%R4M@LszS5Hq*
zUtb@C!5A1A7#bQH85v=*SO5h;0E?NK89)FgmX?-QR#w0SC;>4$J3GMW;NSo}fg$h#
zN<a^|0b6%>ci;vX|3wD=cs$<M*VoU_&)?r41Q8e*7!(u~92^`H5)v938Wt879v%*a
zBO@cDqN1Xsqhn%XVq;_D;^N}t;}a4R5)%`Xl9G~>lT%VsQd3jY($dn?(=#$MGBYzl
z9NF2~IXOAGxw(0HdHMPI1qB6#g@quj;^N|xl9JNW(z3F$^78VEii*n0%BrfW>gwv6
znwr|$+Pb>B`uh5YhK9z*#-^sG=H}*>mX_Am*0#2`_V)IUjt&rXS65eecXv-uPj7E;
zUteE;fB(S1z~JEE(9qEE@bJjU$mr<k*x1<k`1r)c#N^~8n2_n|>6w|C+1c5-xw-lI
z`Gtjr#l^*?rKRQN<&~9{)z#ItwYBy2^^J{<&CSiNtt~K|J3BkOySsaPd;9zQ2L}g-
zhlfW;N5{v<CnqPTr>AFUXXoeV7Z(?omzP&pSJ&6qH#ax8x3_n9clY=A4-XHIkB?7J
zPtVWKFE1~zudi=!Z}0E#A0Ho|pPyh*DSuXrgAYT5LnD<y`@aj)2s|<e7hwnqQDv9a
z^Ch-FAl4rQH4vRT%Yn|H#BM)@pbHT?9=-)180qide)|;<+ZLNHg7E)!-CNySObR}~
YK$>_A<rd+UD|ib+z>yM_V*0-S01vG9FaQ7m
literal 0
HcmV?d00001
diff --git a/modules/block/block-admin-display-form.tpl.php b/modules/block/block-admin-display-form.tpl.php
index f7bf2e0300d..2a20ff4e0ca 100644
--- a/modules/block/block-admin-display-form.tpl.php
+++ b/modules/block/block-admin-display-form.tpl.php
@@ -6,13 +6,14 @@
* Default theme implementation to configure blocks.
*
* Available variables:
- * - $block_listing: An array of block controls within regions.
+ * - $block_regions: An array of regions. Keyed by name with the title as value.
+ * - $block_listing: An array of blocks keyed by region and then delta.
* - $form_submit: Form submit button.
* - $throttle: TRUE or FALSE depending on throttle module being enabled.
*
- * Each $data in $block_listing contains:
- * - $data->is_region_first: TRUE or FALSE depending on the listed blocks
- * positioning. Used here to insert a region header.
+ * Each $block_listing[$region] contains an array of blocks for that region.
+ *
+ * Each $data in $block_listing[$region] contains:
* - $data->region_title: Region title for the listed block.
* - $data->block_title: Block title.
* - $data->region_select: Drop-down menu for assigning a region.
@@ -25,9 +26,15 @@
* @see theme_block_admin_display()
*/
?>
-<?php drupal_add_js('misc/tableheader.js'); ?>
-<?php print $messages; ?>
-
+<?php
+ // Add table javascript.
+ drupal_add_js('misc/tableheader.js');
+ drupal_add_js(drupal_get_path('module', 'block') .'/block.js');
+ foreach ($block_regions as $region => $title) {
+ drupal_add_tabledrag('blocks', 'match', 'sibling', 'block-region-select', 'block-region-'. $region, NULL, FALSE);
+ drupal_add_tabledrag('blocks', 'order', 'sibling', 'block-weight', 'block-weight-'. $region);
+ }
+?>
<table id="blocks">
<thead>
<tr>
@@ -42,15 +49,16 @@
</thead>
<tbody>
<?php $row = 0; ?>
- <?php foreach ($block_listing as $data): ?>
- <?php if ($data->is_region_first): ?>
- <tr class="<?php print $row % 2 == 0 ? 'odd' : 'even'; ?>">
- <td colspan="<?php print $throttle ? '7' : '6'; ?>" class="region"><?php print $data->region_title; ?></td>
+ <?php foreach ($block_regions as $region => $title): ?>
+ <tr class="region region-<?php print $region?>">
+ <td colspan="<?php print $throttle ? '6' : '5'; ?>" class="region"><?php print $title; ?></td>
</tr>
- <?php $row++; ?>
- <?php endif; ?>
- <tr class="<?php print $row % 2 == 0 ? 'odd' : 'even'; ?><?php print $data->row_class ? ' '. $data->row_class : ''; ?>">
- <td class="block"><?php print $data->block_title; ?><?php print $data->block_modified ? '<span class="warning">*</span>' : ''; ?></td>
+ <tr class="region-message region-<?php print $region?>-message <?php print empty($block_listing[$region]) ? 'region-empty' : 'region-populated'; ?>">
+ <td colspan="<?php print $throttle ? '6' : '5'; ?>"><em><?php print t('No blocks in this region'); ?></em></td>
+ </tr>
+ <?php foreach ($block_listing[$region] as $delta => $data): ?>
+ <tr class="draggable <?php print $row % 2 == 0 ? 'odd' : 'even'; ?><?php print $data->row_class ? ' '. $data->row_class : ''; ?>">
+ <td class="block"><?php print $data->block_title; ?></td>
<td><?php print $data->region_select; ?></td>
<td><?php print $data->weight_select; ?></td>
<?php if ($throttle): ?>
@@ -60,6 +68,7 @@
<td><?php print $data->delete_link; ?></td>
</tr>
<?php $row++; ?>
+ <?php endforeach; ?>
<?php endforeach; ?>
</tbody>
</table>
diff --git a/modules/block/block-rtl.css b/modules/block/block-rtl.css
deleted file mode 100644
index b43e9cd29db..00000000000
--- a/modules/block/block-rtl.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/* $Id$ */
-
-#blocks td.block {
- padding-left: inherit;
- padding-right: 1.5em;
-}
-#blocks select {
- margin-left: 24px;
-}
-#blocks select.progress-disabled {
- margin-left: 0px;
-}
-#blocks .progress .bar {
- float: right;
-}
diff --git a/modules/block/block.admin.inc b/modules/block/block.admin.inc
index be886fd44f7..a90264075e6 100644
--- a/modules/block/block.admin.inc
+++ b/modules/block/block.admin.inc
@@ -36,16 +36,14 @@ function block_admin_display_form(&$form_state, $blocks, $theme = NULL) {
init_theme();
$throttle = module_exists('throttle');
- $block_regions = array(BLOCK_REGION_NONE => '<'. t('none') .'>') + system_region_list($theme_key);
+ $block_regions = system_region_list($theme_key) + array(BLOCK_REGION_NONE => '<'. t('none') .'>');
// Build form tree
$form = array(
'#action' => arg(3) ? url('admin/build/block/list/'. $theme_key) : url('admin/build/block'),
'#tree' => TRUE,
- '#cache' => TRUE,
- '#prefix' => '<div id="block-admin-display-form-wrapper">',
- '#suffix' => '</div>',
);
+
foreach ($blocks as $i => $block) {
$key = $block['module'] .'_'. $block['delta'];
$form[$key]['module'] = array(
@@ -69,7 +67,7 @@ function block_admin_display_form(&$form_state, $blocks, $theme = NULL) {
);
$form[$key]['region'] = array(
'#type' => 'select',
- '#default_value' => $block['status'] ? (isset($block['region']) ? $block['region'] : system_default_region($theme_key)) : BLOCK_REGION_NONE,
+ '#default_value' => $block['region'],
'#options' => $block_regions,
);
@@ -82,20 +80,9 @@ function block_admin_display_form(&$form_state, $blocks, $theme = NULL) {
}
}
- // Attach the AHAH events to the submit button. Set the AHAH selector to every
- // select element in the form. The AHAH event could be attached to every select
- // element individually, but using the selector is more efficient, especially
- // on a page where hundreds of AHAH enabled elements may be present.
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Save blocks'),
- '#ahah' => array(
- 'path' => 'admin/build/block/list/js/'. $theme_key,
- 'selector' => '#block-admin-display-form-wrapper select',
- 'wrapper' => 'block-admin-display-form-wrapper',
- 'event' => 'change',
- 'effect' => 'fade',
- ),
);
return $form;
@@ -114,91 +101,6 @@ function block_admin_display_form_submit($form, &$form_state) {
cache_clear_all();
}
-/**
- * Javascript callback for AHAH replacement. Re-generate the form with the
- * updated values and return necessary html.
- */
-function block_admin_display_js($theme = NULL) {
- // Load the cached form.
- $form_cache = cache_get('form_'. $_POST['form_build_id'], 'cache_form');
-
- // Set the new weights and regions for each block.
- $blocks = array();
- foreach (element_children($form_cache->data) as $key) {
- $field = $form_cache->data[$key];
- if (isset($field['info'])) {
- $block = array(
- 'module' => $field['module']['#value'],
- 'delta' => $field['delta']['#value'],
- 'info' => html_entity_decode($field['info']['#value'], ENT_QUOTES),
- 'region' => $_POST[$key]['region'],
- 'weight' => $_POST[$key]['weight'],
- 'status' => $_POST[$key]['region'] == BLOCK_REGION_NONE ? 0 : 1,
- );
-
- $throttle = module_exists('throttle');
- if ($throttle) {
- $block['throttle'] = !empty($_POST[$key]['throttle']);
- }
-
- if ($block['weight'] != $form_cache->data[$key]['weight']['#default_value'] || $block['region'] != $form_cache->data[$key]['region']['#default_value']) {
- $changed_block = $block['module'] .'_'. $block['delta'];
- }
-
- $blocks[] = $block;
- }
- }
-
- // Resort the blocks with the new weights.
- usort($blocks, '_block_compare');
-
- // Create a form in the new order.
- $form_state = array('submitted' => FALSE);
- $form = block_admin_display_form($form_state, $blocks, $theme);
-
- // Maintain classes set on individual blocks.
- foreach (element_children($form_cache->data) as $key) {
- if (isset($form_cache->data[$key]['#attributes'])) {
- $form[$key]['#attributes'] = $form_cache->data[$key]['#attributes'];
- }
- }
-
- // Preserve the order of the new form while merging the previous data.
- $form_order = array_flip(array_keys($form)); // Save the form order.
- $form = array_merge($form_cache->data, $form); // Merge the data.
- $form = array_merge($form_order, $form); // Put back into the correct order.
-
- // Add a permanent class to the changed block.
- $form[$changed_block]['#attributes']['class'] = 'block-modified';
-
- cache_set('form_'. $_POST['form_build_id'], $form, 'cache_form', $form_cache->expire);
-
- // Add a temporary class to mark the new AHAH content.
- $form[$changed_block]['#attributes']['class'] = empty($form[$changed_block]['#attributes']['class']) ? 'ahah-new-content' : $form[$changed_block]['#attributes']['class'] .' ahah-new-content';
- $form['js_modified'] = array(
- '#type' => 'value',
- '#value' => TRUE,
- );
-
- $form['#post'] = $_POST;
- $form['#theme'] = 'block_admin_display_form';
-
- // Add messages to our output.
- drupal_set_message(t('Your settings will not be saved until you click the <em>Save blocks</em> button.'), 'warning');
-
- // Render the form.
- drupal_alter('form', $form, array(), 'block_admin_display_form');
- $form = form_builder('block_admin_display_form', $form, $form_state);
-
- // Remove the wrapper from the form to prevent duplicate div IDs.
- unset($form['#prefix'], $form['#suffix']);
-
- $output = drupal_render($form);
-
- // Return the output in JSON format.
- drupal_json(array('status' => TRUE, 'data' => $output));
-}
-
/**
* Helper function for sorting blocks on admin/build/block.
*
@@ -206,13 +108,22 @@ function block_admin_display_js($theme = NULL) {
* Disabled blocks are sorted by name.
*/
function _block_compare($a, $b) {
- $status = $b['status'] - $a['status'];
+ global $theme_key;
+ static $regions;
+
+ // We need the region list to correctly order by region.
+ if (!isset($regions)) {
+ $regions = array_flip(array_keys(system_region_list($theme_key)));
+ $regions[BLOCK_REGION_NONE] = count($regions);
+ }
+
// Separate enabled from disabled.
+ $status = $b['status'] - $a['status'];
if ($status) {
return $status;
}
- // Sort by region.
- $place = strcmp($a['region'], $b['region']);
+ // Sort by region (in the order defined by theme .info file).
+ $place = $regions[$a['region']] - $regions[$b['region']];
if ($place) {
return $place;
}
@@ -442,14 +353,20 @@ function block_box_delete_submit($form, &$form_state) {
function template_preprocess_block_admin_display_form(&$variables) {
global $theme_key;
- $variables['throttle'] = module_exists('throttle');
$block_regions = system_region_list($theme_key);
+ $variables['throttle'] = module_exists('throttle');
+ $variables['block_regions'] = $block_regions + array(BLOCK_REGION_NONE => t('Disabled'));
- // Highlight regions on page to provide visual reference.
foreach ($block_regions as $key => $value) {
+ // Highlight regions on page to provide visual reference.
drupal_set_content($key, '<div class="block-region">'. $value .'</div>');
+ // Initialize an empty array for the region.
+ $variables['block_listing'][$key] = array();
}
+ // Initialize disabled blocks array.
+ $variables['block_listing'][BLOCK_REGION_NONE] = array();
+
// Setup to track previous region in loop.
$last_region = '';
foreach (element_children($variables['form']) as $i) {
@@ -460,34 +377,23 @@ function template_preprocess_block_admin_display_form(&$variables) {
// Fetch region for current block.
$region = $block['region']['#default_value'];
- // Track first block listing to insert region header inside block_admin_display.tpl.php.
- $is_region_first = FALSE;
- if ($last_region != $region) {
- $is_region_first = TRUE;
- // Set region title. Block regions already translated.
- if ($region != BLOCK_REGION_NONE) {
- $region_title = drupal_ucfirst($block_regions[$region]);
- }
- else {
- $region_title = t('Disabled');
- }
- }
+ // Set special classes needed for table drag and drop.
+ $variables['form'][$i]['region']['#attributes']['class'] = 'block-region-select block-region-'. $region;
+ $variables['form'][$i]['weight']['#attributes']['class'] = 'block-weight block-weight-'. $region;
- $variables['block_listing'][$i]->is_region_first = $is_region_first;
- $variables['block_listing'][$i]->row_class = isset($block['#attributes']['class']) ? $block['#attributes']['class'] : '';
- $variables['block_listing'][$i]->block_modified = isset($block['#attributes']['class']) && strpos($block['#attributes']['class'], 'block-modified') !== FALSE ? TRUE : FALSE;
- $variables['block_listing'][$i]->region_title = $region_title;
- $variables['block_listing'][$i]->block_title = drupal_render($block['info']);
- $variables['block_listing'][$i]->region_select = drupal_render($block['region']) . drupal_render($block['theme']);
- $variables['block_listing'][$i]->weight_select = drupal_render($block['weight']);
- $variables['block_listing'][$i]->throttle_check = $variables['throttle'] ? drupal_render($block['throttle']) : '';
- $variables['block_listing'][$i]->configure_link = drupal_render($block['configure']);
- $variables['block_listing'][$i]->delete_link = !empty($block['delete']) ? drupal_render($block['delete']) : '';
+ $variables['block_listing'][$region][$i]->row_class = isset($block['#attributes']['class']) ? $block['#attributes']['class'] : '';
+ $variables['block_listing'][$region][$i]->block_modified = isset($block['#attributes']['class']) && strpos($block['#attributes']['class'], 'block-modified') !== FALSE ? TRUE : FALSE;
+ $variables['block_listing'][$region][$i]->block_title = drupal_render($block['info']);
+ $variables['block_listing'][$region][$i]->region_select = drupal_render($block['region']) . drupal_render($block['theme']);
+ $variables['block_listing'][$region][$i]->weight_select = drupal_render($block['weight']);
+ $variables['block_listing'][$region][$i]->throttle_check = $variables['throttle'] ? drupal_render($block['throttle']) : '';
+ $variables['block_listing'][$region][$i]->configure_link = drupal_render($block['configure']);
+ $variables['block_listing'][$region][$i]->delete_link = !empty($block['delete']) ? drupal_render($block['delete']) : '';
+ $variables['block_listing'][$region][$i]->printed = FALSE;
$last_region = $region;
}
}
- $variables['messages'] = isset($variables['form']['js_modified']) ? theme('status_messages') : '';
$variables['form_submit'] = drupal_render($variables['form']);
}
diff --git a/modules/block/block.css b/modules/block/block.css
index 87eac484fee..3d579ee6c6c 100644
--- a/modules/block/block.css
+++ b/modules/block/block.css
@@ -3,8 +3,12 @@
#blocks td.region {
font-weight: bold;
}
-#blocks td.block {
- padding-left: 1.5em; /* LTR */
+#blocks tr.region-message {
+ font-weight: normal;
+ color: #999;
+}
+#blocks tr.region-populated {
+ display: none;
}
.block-region {
background-color: #ff6;
@@ -12,12 +16,3 @@
margin-bottom: 4px;
padding: 3px;
}
-#blocks select {
- margin-right: 24px; /* LTR */
-}
-#blocks select.progress-disabled {
- margin-right: 0px; /* LTR */
-}
-#blocks tr.ahah-new-content {
- background-color: #ffd;
-}
diff --git a/modules/block/block.js b/modules/block/block.js
new file mode 100644
index 00000000000..6a2a31d02d3
--- /dev/null
+++ b/modules/block/block.js
@@ -0,0 +1,95 @@
+// $Id $
+
+/**
+ * Move a block in the blocks table from one region to another via select list.
+ *
+ * This behavior is dependent on the tableDrag behavior, since it uses the
+ * objects initialized in that behavior to update the row.
+ */
+Drupal.behaviors.blockDrag = function(context) {
+ var table = $('table#blocks');
+ var tableDrag = Drupal.tableDrag.blocks; // Get the blocks tableDrag object.
+
+ // Add a handler for when a row is swapped, update empty regions.
+ tableDrag.row.prototype.onSwap = function(swappedRow) {
+ checkEmptyRegions(table, this);
+ };
+
+ // A custom message for the blocks page specifically.
+ Drupal.theme.tableDragChangedWarning = function () {
+ return '<div class="warning">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t("The changes to these blocks will not be saved until the <em>Save blocks</em> button is clicked.") + '</div>';
+ };
+
+ // Add a handler so when a row is dropped, update fields dropped into new regions.
+ tableDrag.onDrop = function() {
+ dragObject = this;
+ if ($(dragObject.rowObject.element).prev('tr').is('.region-message')) {
+ var regionRow = $(dragObject.rowObject.element).prev('tr').get(0);
+ var regionName = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
+ var regionField = $('select.block-region-select', dragObject.rowObject.element);
+ var weightField = $('select.block-weight', dragObject.rowObject.element);
+ var oldRegionName = weightField[0].className.replace(/([^ ]+[ ]+)*block-weight-([^ ]+)([ ]+[^ ]+)*/, '$2');
+
+ if (!regionField.is('.block-region-'+ regionName)) {
+ regionField.removeClass('block-region-' + oldRegionName).addClass('block-region-' + regionName);
+ weightField.removeClass('block-weight-' + oldRegionName).addClass('block-weight-' + regionName);
+ regionField.val(regionName);
+ }
+ }
+ };
+
+ // Add the behavior to each region select list.
+ $('select.block-region-select:not(.blockregionselect-processed)', context).each(function() {
+ $(this).change(function(event) {
+ // Make our new row and select field.
+ var row = $(this).parents('tr:first');
+ var select = $(this);
+ tableDrag.rowObject = new tableDrag.row(row);
+
+ // Find the correct region and insert the row as the first in the region.
+ $('tr.region-message', table).each(function() {
+ if ($(this).is('.region-' + select[0].value + '-message')) {
+ // Add the new row and remove the old one.
+ $(this).after(row);
+ // Manually update weights and restripe.
+ tableDrag.updateFields(row.get(0));
+ tableDrag.rowObject.changed = true;
+ if (tableDrag.oldRowElement) {
+ $(tableDrag.oldRowElement).removeClass('drag-previous');
+ }
+ tableDrag.oldRowElement = row.get(0);
+ tableDrag.restripeTable();
+ tableDrag.rowObject.markChanged();
+ tableDrag.oldRowElement = row;
+ $(row).addClass('drag-previous');
+ }
+ });
+
+ // Modify empty regions with added or removed fields.
+ checkEmptyRegions(table, row);
+ // Remove focus from selectbox.
+ select.get(0).blur();
+ });
+ $(this).addClass('blockregionselect-processed');
+ });
+
+ var checkEmptyRegions = function(table, rowObject) {
+ $('tr.region-message', table).each(function() {
+ // If the dragged row is in this region, but above the message row, swap it down one space.
+ if ($(this).prev('tr').get(0) == rowObject.element) {
+ // Prevent a recursion problem when using the keyboard to move rows up.
+ if ((rowObject.method != 'keyboard' || rowObject.direction == 'down')) {
+ rowObject.swap('after', this);
+ }
+ }
+ // This region has become empty
+ if ($(this).next('tr').is(':not(.draggable)') || $(this).next('tr').size() == 0) {
+ $(this).removeClass('region-populated').addClass('region-empty');
+ }
+ // This region has become populated.
+ else if ($(this).is('.region-empty')) {
+ $(this).removeClass('region-empty').addClass('region-populated');
+ }
+ });
+ };
+};
diff --git a/modules/block/block.module b/modules/block/block.module
index 53d6974c624..aa44be98c8e 100644
--- a/modules/block/block.module
+++ b/modules/block/block.module
@@ -248,6 +248,9 @@ function _block_rehash() {
}
// Add defaults and save it into the database.
drupal_write_record('blocks', $block);
+ // Set region to none if not enabled.
+ $block['region'] = $block['status'] ? $block['region'] : BLOCK_REGION_NONE;
+ // Add to the list of blocks we return.
$blocks[] = $block;
}
else {
@@ -257,7 +260,9 @@ function _block_rehash() {
// do not need to update the database here.
// Add 'info' to this block.
$old_blocks[$module][$delta]['info'] = $block['info'];
- // Add this block to the list of blocks we return
+ // Set region to none if not enabled.
+ $old_blocks[$module][$delta]['region'] = $old_blocks[$module][$delta]['status'] ? $old_blocks[$module][$delta]['region'] : BLOCK_REGION_NONE;
+ // Add this block to the list of blocks we return.
$blocks[] = $old_blocks[$module][$delta];
// Remove this block from the list of blocks to be deleted.
unset($old_blocks[$module][$delta]);
diff --git a/modules/system/system.css b/modules/system/system.css
index 795ed99cce6..172fc29a8ec 100644
--- a/modules/system/system.css
+++ b/modules/system/system.css
@@ -3,6 +3,9 @@
/*
** HTML elements
*/
+body.drag {
+ cursor: move;
+}
th.active img {
display: inline;
}
@@ -11,6 +14,12 @@ tr.even, tr.odd {
border-bottom: 1px solid #ccc;
padding: 0.1em 0.6em;
}
+tr.drag {
+ background-color: #fffff0;
+}
+tr.drag-previous {
+ background-color: #ffd;
+}
td.active {
background-color: #ddd;
}
@@ -32,6 +41,21 @@ thead th {
.breadcrumb {
padding-bottom: .5em
}
+div.indentation {
+ width: 20px;
+ margin: -0.4em 0.2em -0.4em -0.4em;
+ padding: 0.4em 0 0.4em 0.6em;
+ float: left;
+}
+div.tree-child {
+ background: url(../../misc/tree.png) no-repeat 11px center;
+}
+div.tree-child-last {
+ background: url(../../misc/tree-bottom.png) no-repeat 11px center;
+}
+div.tree-child-horizontal {
+ background: url(../../misc/tree.png) no-repeat -11px center;
+}
.error {
color: #e55;
}
@@ -333,6 +357,30 @@ html.js .resizable-textarea textarea {
display: block;
}
+/*
+** Table drag and drop.
+*/
+a.tabledrag-handle {
+ cursor: move;
+ float: left;
+ height: 1.7em;
+ margin: -0.42em 0 -0.42em -0.5em;
+ padding: 0.42em 1.5em 0.42em 0.5em;
+ text-decoration: none;
+}
+a.tabledrag-handle:hover {
+ text-decoration: none;
+}
+a.tabledrag-handle .handle {
+ margin-top: 4px;
+ height: 13px;
+ width: 13px;
+ background: url(../../misc/draggable.png) no-repeat 0 0;
+}
+a.tabledrag-handle-hover .handle {
+ background-position: 0 -20px;
+}
+
/*
** Teaser splitter
*/
diff --git a/themes/garland/style.css b/themes/garland/style.css
index b01e2af3681..01762cfac47 100644
--- a/themes/garland/style.css
+++ b/themes/garland/style.css
@@ -226,6 +226,14 @@ tr.even {
background-color: #fff;
}
+tr.drag {
+ background-color: #fffff0;
+}
+
+tr.drag-previous {
+ background-color: #ffd;
+}
+
tr.odd td.active {
background-color: #ddecf5;
}