? misc/tree-bottom.png
? misc/tree.png
Index: includes/common.inc
===================================================================
RCS file: /cvs/drupal/drupal/includes/common.inc,v
retrieving revision 1.704
diff -u -p -r1.704 common.inc
--- includes/common.inc 19 Oct 2007 10:30:54 -0000 1.704
+++ includes/common.inc 28 Oct 2007 06:00:35 -0000
@@ -1915,6 +1915,25 @@ function drupal_get_js($scope = 'header'
return $output;
}
+function drupal_add_tabledrag($table_id, $group, $action, $relationship, $target, $source = NULL, $hidden = TRUE) {
+ static $js_added = FALSE;
+ if (!$js_added) {
+ drupal_add_js('misc/tabledrag.js', 'core');
+ $js_added = TRUE;
+ }
+
+ // If source isn't set, assume it is the same as the target.
+ $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.
*
Index: misc/tabledrag.js
===================================================================
RCS file: misc/tabledrag.js
diff -N misc/tabledrag.js
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ misc/tabledrag.js 28 Oct 2007 06:00:35 -0000
@@ -0,0 +1,738 @@
+// $Id $
+
+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 + ':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');
+ }
+ }
+};
+
+Drupal.tabledrag = function(table, tableSettings) {
+ var self = this;
+
+ // Required object variables.
+ this.table = table;
+ this.tableSettings = tableSettings;
+ this.dragObject = null; // Keep hold of the current drag object if any.
+ this.oldDragElement = null; // Remember the previous element.
+ this.oldY = 0; // Save processing by remembering x, y positions.
+
+ // 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) {
+ var hidden = this.tableSettings[group][0]['hidden'];
+ var field = $('.' + this.tableSettings[group][0]['target'] + ':first', this.table);
+ var cell = field.parents('td:first, th:first');
+ if (hidden && cell[0] && cell.css('display') != 'none') {
+ var columnIndex = $('td', field.parents('tr:first')).index(cell.get(0));
+ var headerIndex = $('td:not(:hidden)', field.parents('tr:first')).index(cell.get(0));
+ columnIndex++; // nth-child selector is 1 based, not 0 based.
+ headerIndex++;
+ $('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 (n in this.tableSettings[group][delta]) {
+ rowSettings[n] = this.tableSettings[group][delta][n];
+ }
+ return rowSettings;
+ }
+ }
+};
+
+/**
+ * Take an item and add an onmousedown method so that we can make it draggable.
+ */
+Drupal.tabledrag.prototype.makeDraggable = function(item) {
+ if (!item) return;
+ var self = this; // Keep the context of the tabledrag object.
+ // Create the handle.
+ handle = $('
');
+ // 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) {
+ self.dragObject = new Object();
+ self.dragObject.element = item;
+ self.dragObject.group = new Array(item);
+ self.dragObject.groupDepth = $('.indentation', item).size();
+ self.dragObject.changed = false;
+ self.dragObject.initMouseOffset = self.getMouseOffset(item, event);
+ self.dragObject.initMouseCoords = self.mouseCoords(event);
+ if (self.indentEnabled) {
+ self.dragObject.indentMousePos = self.dragObject.initMouseCoords;
+ self.dragObject.indents = $('.indentation', item).size();
+ self.dragObject.children = self.rowChildren(item, true);
+ self.dragObject.group = $.merge(self.dragObject.group, self.dragObject.children);
+ // Find the depth of this entire group.
+ for (var n = 0; n < self.dragObject.group.length; n++) {
+ self.dragObject.groupDepth = Math.max($('.indentation', self.dragObject.group[n]).size(), self.dragObject.groupDepth);
+ }
+ }
+
+ // 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');
+ if (self.oldDragElement) {
+ $(self.oldDragElement).removeClass('highlight');
+ }
+
+ // Hack for IE6 that flickers uncontrollably if select lists are moved.
+ if (navigator.userAgent.indexOf('MSIE 6.') != -1) {
+ $('select', this.table).css('display', 'none');
+ }
+ 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) {
+ var dragDirection = 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);
+ // Scroll the window according to the scrollSettings.
+ if (scrollAmount > 0 && dragDirection == 'down' || scrollAmount > 0 && dragDirection == 'up') {
+ clearInterval(self.scrollInterval);
+ self.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);
+ }
+ }, self.scrollSettings.interval);
+ }
+ else {
+ clearInterval(self.scrollInterval);
+ }
+
+ // If w have a valid target, perform the swap and restripe the table.
+ var currentRow = self.findDropTargetRow(x, y, dragDirection);
+ if (currentRow) {
+ if (dragDirection == 'down') {
+ $(currentRow).after($(self.dragObject.group));
+ }
+ else {
+ $(currentRow).before($(self.dragObject.group));
+ }
+ self.dragObject.changed = true;
+ self.onSwap(currentRow);
+ self.restripeTable(self.table);
+ }
+ }
+
+ // 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.dragObject.indents + 1) : Math.max(indentDiff, -self.dragObject.indents);
+ if (indentDiff != 0) {
+ // Further limit the diff according to surrounding rows.
+ if (indentDiff > 0) {
+ var prevIndent = $('.indentation', $(self.dragObject.group).filter(':first').prev()).size();
+ indentDiff = Math.min(prevIndent - self.dragObject.indents + 1, indentDiff);
+ }
+ else {
+ var nextIndent = $('.indentation', $(self.dragObject.group).filter(':last').next()).size();
+ indentDiff = Math.max(nextIndent - self.dragObject.indents, indentDiff);
+ }
+
+ // Never allow indentation greater than 8 parents (menu system limit).
+ if (indentDiff + self.dragObject.groupDepth > 8) {
+ indentDiff = 0;
+ }
+
+ for (var n = 1; n <= Math.abs(indentDiff); n++) {
+ // Add or remove indentations.
+ if (indentDiff < 0) {
+ $('.indentation:first', self.dragObject.group).remove();
+ self.dragObject.indents--;
+ }
+ else {
+ $('td:first', self.dragObject.group).prepend(Drupal.theme('tabledragIndentation'));
+ self.dragObject.indents++;
+ }
+ }
+ if (indentDiff) {
+ self.dragObject.changed = true;
+ }
+ // Update indentation for this actual row.
+ self.dragObject.indentMousePos.x += self.indentAmount * indentDiff;
+ self.dragObject.groupDepth += indentDiff;
+ self.onIndent();
+ // Update table total indentations.
+ self.indentCount = Math.max(self.indentCount, self.dragObject.indents);
+ }
+ }
+
+ return false;
+ }
+};
+
+/**
+ * Mouseup event handler, bound to document.
+ */
+Drupal.tabledrag.prototype.dropRow = function(event) {
+ var self = event.data.tabledrag;
+ if (self.dragObject != null) {
+ var droppedRow = self.dragObject.element;
+ // The row is already in the right place so we just release it.
+ $(droppedRow).removeClass('drag').addClass('highlight');
+ $('.tabledrag-handle', droppedRow).removeClass('tabledrag-handle-hover');
+ if (self.dragObject.changed == true) {
+ self.updateFields(droppedRow);
+ self.markChanged(droppedRow);
+ }
+ if (self.indentEnabled) {
+ self.removeIndentClasses(self.dragObject.children);
+ }
+ self.onDrop();
+ self.oldDragElement = droppedRow;
+ self.dragObject = null;
+ 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 going up the DOM tree and adding up all
+ * the offsets.
+ */
+Drupal.tabledrag.prototype.getPosition = function(event){
+ 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 (event.offsetHeight == 0) {
+ event = event.firstChild; // a table cell
+ }
+
+ while (event.offsetParent){
+ left += event.offsetLeft;
+ top += event.offsetTop;
+ event = event.offsetParent;
+ }
+
+ left += event.offsetLeft;
+ top += event.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){
+ event = event || window.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).
+ * @param dragDirection
+ * The y coordinate of the mouse on the page (not the screen).
+ */
+Drupal.tabledrag.prototype.findDropTargetRow = function(x, y, dragDirection) {
+ var rows = this.table.tBodies[0].rows;
+ for (var n=0; n (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.dragObject.group) {
+ if (this.dragObject.group[n] == row) {
+ return null;
+ }
+ }
+
+ // Check that moving this row will not cause invalid relationships.
+ var xDiff = this.currentMouseCoords.x - this.dragObject.initMouseCoords.x;
+ var indentDiff = parseInt(xDiff / this.indentAmount);
+ var thisIndents = $('.indentation', row).size();
+ var prevIndents = $('.indentation', $(row).prev()).size();
+ var nextIndents = $('.indentation', $(row).next()).size();
+ var firstDragIndents = $('.indentation', this.dragObject.element).size();
+
+ if (
+ (dragDirection == 'down') && (
+ // Prevent being able to drag a row downward with 2 indentations from a parent.
+ firstDragIndents > thisIndents + 1 ||
+ // Prevent orphaning children when dragging into a parent.
+ firstDragIndents < nextIndents - indentDiff
+ ) ||
+ (dragDirection == 'up') && (
+ // Prevent being able to drag a row upward with 2 indentations from a parent.
+ firstDragIndents < thisIndents ||
+ // Prevent orphaning children when dragging between a child and parent.
+ firstDragIndents > prevIndents + 1 - indentDiff ||
+ // Do not let the first row in the table contain indentations.
+ firstDragIndents > 0 && this.table.tBodies[0].rows[0] == row
+ )
+ ) {
+ return null;
+ }
+ }
+
+ // Special case for the first row, if it's not draggable, do not allow
+ // another row to be put before it.
+ if (n == 0 && $(row).is(':not(.draggable)')) {
+ return null;
+ }
+
+ // We've 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().is(':hidden')) {
+ row = $(row).prev().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().get(0);
+ var nextRow = $(changedRow).next().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();
+ while (previousRow.length && $('.indentation', previousRow).length >= this.dragObject.indents) {
+ previousRow = previousRow.prev();
+ }
+ // 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 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.rowSiblings(group, changedRow);
+ 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;
+ }
+ }
+ }
+};
+
+/**
+ * Find all children of a row by indentation.
+ * @param row
+ * DOM object of the row for which we're investigating children.
+ * @param addClasses
+ * Whether we want to add classes to this row to indicate child relationships.
+ */
+Drupal.tabledrag.prototype.rowChildren = function(row, addClasses) {
+ var parentIndentation = $('.indentation', row).length;
+ var currentRow = $(row, this.table).next('tr');
+ 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 {
+ if (addClasses) {
+ $('.indentation:nth-child(' + (parentIndentation + 1) + ')', currentRow.prev('tr.draggable')).addClass('tree-child-last');
+ }
+ break;
+ }
+ currentRow = currentRow.next('tr.draggable');
+ }
+ return rows;
+};
+
+/**
+ * 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 group
+ * The field group we're checking siblings against.
+ * @param row
+ * The row for which we're finding siblings.
+ */
+Drupal.tabledrag.prototype.rowSiblings = function(group, row) {
+ var siblings = new Array();
+ var rowSettings = this.rowSettings(group, row);
+ var directions = new Array('prev', 'next');
+ var rowIndentation = $('.indentation', row).length;
+ for (d in directions) {
+ var checkRow = $(row)[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(row);
+ }
+ }
+ return siblings;
+};
+
+/**
+ * Remove indentation helper classes.
+ * @param children
+ * An array of DOM element table rows. The child classes will be removed from
+ * all rows in this array.
+ */
+Drupal.tabledrag.prototype.removeIndentClasses = function(children) {
+ for (n in this.dragObject.children) {
+ $('.indentation', this.dragObject.children[n])
+ .removeClass('tree-child')
+ .removeClass('tree-child-first')
+ .removeClass('tree-child-last')
+ .removeClass('tree-child-horizontal')
+ }
+};
+
+/**
+ * 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.restripeTable = function(table) {
+ // :even and :odd are reversed because jquery counts from 0 and
+ // we count from 1, so we're out of sync.
+ $('tbody tr:not(:hidden)', table)
+ .filter(':odd').filter('.odd')
+ .removeClass('odd').addClass('even')
+ .end().end()
+ .filter(':even').filter('.even')
+ .removeClass('even').addClass('odd');
+};
+
+/**
+ * Add an asterisk or other marker to the changed row.
+ */
+Drupal.tabledrag.prototype.markChanged = function(changedRow) {
+ var marker = Drupal.theme('tabledragChangedMarker');
+ var cell = $('td:first', changedRow);
+ if ($('span.tabledrag-changed', cell).length == 0) {
+ cell.append(marker);
+ }
+};
+
+/**
+ * Stub function. Allows a custom handler when a row is indented.
+ */
+Drupal.tabledrag.prototype.onIndent = function() {
+ return null;
+};
+
+/**
+ * Stub function. Allows a custom handler when a row is swapped.
+ */
+Drupal.tabledrag.prototype.onSwap = function(swappedRow) {
+ return null;
+};
+
+/**
+ * Stub function. Allows a custom handler when a row is dropped.
+ */
+Drupal.tabledrag.prototype.onDrop = function() {
+ return null;
+};
+
+/**
+ * Theme function for the marker to indicate a row has changed. If the tabledrag
+ * class is removed Drupal.tabledrag.markChanged must also over ridden.
+ */
+Drupal.theme.prototype.tabledragChangedMarker = function () {
+ return '*';
+};
+
+Drupal.theme.prototype.tabledragIndentation = function () {
+ return '
';
+};
Index: modules/block/block-admin-display-form.tpl.php
===================================================================
RCS file: /cvs/drupal/drupal/modules/block/block-admin-display-form.tpl.php,v
retrieving revision 1.1
diff -u -p -r1.1 block-admin-display-form.tpl.php
--- modules/block/block-admin-display-form.tpl.php 5 Oct 2007 09:36:52 -0000 1.1
+++ modules/block/block-admin-display-form.tpl.php 28 Oct 2007 06:00:35 -0000
@@ -6,13 +6,15 @@
* 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.
+ * - $empty_text: The text displayed in a region header when it is empty.
* - $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 +27,16 @@
* @see theme_block_admin_display()
*/
?>
-
-
-
+ array('emptyText' => $empty_text)), 'setting');
+ foreach ($block_regions as $region => $title) {
+ drupal_add_tabledrag('blocks', 'block-region-select', 'match', 'sibling', 'block-region-'. $region, NULL, FALSE);
+ drupal_add_tabledrag('blocks', 'block-weight', 'order', 'sibling', 'block-weight-'. $region);
+ }
+?>
',
);
foreach ($blocks as $i => $block) {
$key = $block['module'] .'_'. $block['delta'];
@@ -69,7 +66,7 @@ function block_admin_display_form(&$form
);
$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 +79,9 @@ function block_admin_display_form(&$form
}
}
- // 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;
@@ -115,104 +101,28 @@ function block_admin_display_form_submit
}
/**
- * 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'] = $_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 Save blocks 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.
*
* Active blocks are sorted by region, then by weight.
* 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 +352,21 @@ function block_box_delete_submit($form,
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'));
+ $variables['empty_text'] = ' ('. t('empty') .')';
- // 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, '
'. $value .'
');
+ // 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
// 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');
- }
- }
-
- $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']) : '';
+ // 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'][$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']);
}
Index: modules/block/block.css
===================================================================
RCS file: /cvs/drupal/drupal/modules/block/block.css,v
retrieving revision 1.5
diff -u -p -r1.5 block.css
--- modules/block/block.css 10 Oct 2007 10:24:25 -0000 1.5
+++ modules/block/block.css 28 Oct 2007 06:00:35 -0000
@@ -3,8 +3,10 @@
#blocks td.region {
font-weight: bold;
}
-#blocks td.block {
- padding-left: 1.5em; /* LTR */
+#blocks span.region-empty-text {
+ font-weight: normal;
+ font-size: 0.9em;
+ color: #999;
}
.block-region {
background-color: #ff6;
@@ -12,12 +14,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;
-}
Index: modules/block/block.js
===================================================================
RCS file: modules/block/block.js
diff -N modules/block/block.js
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ modules/block/block.js 28 Oct 2007 06:00:35 -0000
@@ -0,0 +1,84 @@
+// $Id $
+/**
+ * Move a block in the blocks table from one region to another. If the
+ * destination region is currently empty, unhide the region header. Conversely,
+ * if the region becomes empty, hide the region header.
+ *
+ * This behavior is dependent on the tabledrag behavior, since it uses the
+ * defined classes initiallized in that behavior.
+ */
+Drupal.behaviors.blockRegionSelect = function(context) {
+ var table = $('table#blocks');
+ var tableDrag = Drupal.tabledrag.blocks; // Get the blocks tabledrag object.
+
+ // Add a custom handler for when a row is dropped, update empty regions.
+ tableDrag.onDrop = function() {
+ checkEmptyRegions(table);
+ };
+
+ $('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);
+
+ // Find the correct region and insert the row as the first in the region.
+ $('tr.region', table).each(function() {
+ if ($(this).is('.region-' + select[0].value)) {
+ // Ensure the region is visible.
+ $(this).removeClass('empty-region');
+ // Add the new row and remove the old one.
+ $(this).after(row);
+ // Manually update weights and restripe.
+ tableDrag.restripeTable(table.get(0));
+ tableDrag.markChanged(row.get(0));
+ tableDrag.updateFields(row.get(0));
+ // Add the highlight.
+ if (tableDrag.oldDragElement) {
+ $(tableDrag.oldDragElement).removeClass('highlight');
+ }
+ tableDrag.oldDragElement = row.get(0);
+ row.addClass('highlight');
+ }
+ });
+
+ // Modify empty regions with added or removed fields.
+ checkEmptyRegions(table);
+ // Remove focus from selectbox.
+ select.blur();
+ });
+ $(this).addClass('blockregionselect-processed');
+ });
+
+ var checkEmptyRegions = function(table) {
+ var emptyText = Drupal.settings.block.emptyText;
+
+ $('tr.region', table).each(function() {
+ if ($(this).next().is(':not(.draggable)') || $(this).next().size() == 0) {
+ // An empty region, add the empty text.
+ if ($(this).is(':not(.region-empty)')) {
+ $(this).addClass('region-empty');
+ $('td', this).append(emptyText);
+ }
+ }
+ else if ($(this).is('.region-empty')) {
+ // A populated region. Ensure the empty text is removed.
+ $(this).removeClass('region-empty');
+ var htmlText = $('