diff options
| -rw-r--r-- | CHANGELOG.txt | 1 | ||||
| -rw-r--r-- | includes/common.inc | 107 | ||||
| -rw-r--r-- | misc/draggable.png | bin | 0 -> 349 bytes | |||
| -rw-r--r-- | misc/tabledrag.js | 1000 | ||||
| -rw-r--r-- | misc/tree-bottom.png | bin | 0 -> 976 bytes | |||
| -rw-r--r-- | misc/tree.png | bin | 0 -> 979 bytes | |||
| -rw-r--r-- | modules/block/block-admin-display-form.tpl.php | 39 | ||||
| -rw-r--r-- | modules/block/block-rtl.css | 15 | ||||
| -rw-r--r-- | modules/block/block.admin.inc | 166 | ||||
| -rw-r--r-- | modules/block/block.css | 17 | ||||
| -rw-r--r-- | modules/block/block.js | 95 | ||||
| -rw-r--r-- | modules/block/block.module | 7 | ||||
| -rw-r--r-- | modules/system/system.css | 48 | ||||
| -rw-r--r-- | themes/garland/style.css | 8 |
14 files changed, 1331 insertions, 172 deletions
diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 297fb2b18..b3f3be53b 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 919ca2f2d..5fd634aca 100644 --- a/includes/common.inc +++ b/includes/common.inc @@ -1927,6 +1927,113 @@ function drupal_get_js($scope = 'header', $javascript = NULL) { } /** + * 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. * * @param $files diff --git a/misc/draggable.png b/misc/draggable.png Binary files differnew file mode 100644 index 000000000..47e8a02cf --- /dev/null +++ b/misc/draggable.png diff --git a/misc/tabledrag.js b/misc/tabledrag.js new file mode 100644 index 000000000..03f5a4bb8 --- /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 Binary files differnew file mode 100644 index 000000000..256ae1f43 --- /dev/null +++ b/misc/tree-bottom.png diff --git a/misc/tree.png b/misc/tree.png Binary files differnew file mode 100644 index 000000000..fccec6bdb --- /dev/null +++ b/misc/tree.png diff --git a/modules/block/block-admin-display-form.tpl.php b/modules/block/block-admin-display-form.tpl.php index f7bf2e030..2a20ff4e0 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 b43e9cd29..000000000 --- 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 be886fd44..a90264075 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; @@ -115,104 +102,28 @@ function block_admin_display_form_submit($form, &$form_state) { } /** - * 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. * * 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 +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'); - } - } - - $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']); } diff --git a/modules/block/block.css b/modules/block/block.css index 87eac484f..3d579ee6c 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 000000000..6a2a31d02 --- /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 53d6974c6..aa44be98c 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 795ed99cc..172fc29a8 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; } @@ -334,6 +358,30 @@ html.js .resizable-textarea textarea { } /* +** 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 */ .joined + .grippie { diff --git a/themes/garland/style.css b/themes/garland/style.css index b01e2af36..01762cfac 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; } |
