diff -rupN content.module content.module --- content.module 2009-03-18 20:20:52.000000000 +0100 +++ content.module 2009-04-02 03:14:46.000000000 +0200 @@ -471,6 +471,15 @@ function content_add_more_submit_proxy($ } /** + * Proxy function to call content_multiple_value_after_build(), because it might + * not be included yet when the form is processed and invokes the callback. + */ +function content_multiple_value_after_build_proxy($elements, &$form_state) { + module_load_include('inc', 'content', 'includes/content.node_form'); + return content_multiple_value_after_build($elements, $form_state); +} + +/** * Theme an individual form element. * * Combine multiple values into a table with drag-n-drop reordering. @@ -490,8 +499,11 @@ function theme_content_multiple_values($ 'data' => t('!title: !required', array('!title' => $element['#title'], '!required' => $required)), 'colspan' => 2 ), - t('Order'), + array('data' => t('Order'), 'class' => 'content-multiple-weight-header'), ); + if ($field['multiple'] == 1) { + $header[] = array('data' => ''. t('Remove') .'', 'class' => 'content-multiple-remove-header'); + } $rows = array(); // Sort items according to '_weight' (needed when the form comes back after @@ -499,24 +511,31 @@ function theme_content_multiple_values($ $items = array(); foreach (element_children($element) as $key) { if ($key !== $element['#field_name'] .'_add_more') { - $items[] = &$element[$key]; + $items[$element[$key]['#delta']] = &$element[$key]; } } - usort($items, '_content_sort_items_value_helper'); + uasort($items, '_content_sort_items_value_helper'); // Add the items as table rows. - foreach ($items as $key => $item) { + foreach ($items as $delta => $item) { $item['_weight']['#attributes']['class'] = $order_class; $delta_element = drupal_render($item['_weight']); + if ($field['multiple'] == 1) { + $remove_element = drupal_render($item['_remove']); + } $cells = array( array('data' => '', 'class' => 'content-multiple-drag'), drupal_render($item), array('data' => $delta_element, 'class' => 'delta-order'), ); - $rows[] = array( - 'data' => $cells, - 'class' => 'draggable', - ); + $row_class = 'draggable'; + if ($field['multiple'] == 1) { + if (!empty($item['_remove']['#default_value'])) { + $row_class .= ' content-multiple-removed-row'; + } + $cells[] = array('data' => $remove_element, 'class' => 'content-multiple-remove-cell'); + } + $rows[] = array('data' => $cells, 'class' => $row_class); } $output .= theme('table', $header, $rows, array('id' => $table_id, 'class' => 'content-multiple-table')); @@ -524,6 +543,7 @@ function theme_content_multiple_values($ $output .= drupal_render($element[$element['#field_name'] .'_add_more']); drupal_add_tabledrag($table_id, 'order', 'sibling', $order_class); + drupal_add_js(drupal_get_path('module', 'content') .'/theme/content-edit.js'); } else { foreach (element_children($element) as $key) { @@ -724,8 +744,8 @@ function content_field($op, &$node, $fie case 'view': $addition = array(); - // Previewed nodes bypass the 'presave' op, so we need to some massaging. - if ($node->build_mode == NODE_BUILD_PREVIEW && content_handle('widget', 'multiple values', $field) == CONTENT_HANDLE_CORE) { + // Previewed nodes bypass the 'presave' op, so we need to do some massaging. + if ($node->build_mode == NODE_BUILD_PREVIEW) { if (content_handle('widget', 'multiple values', $field) == CONTENT_HANDLE_CORE) { // Reorder items to account for drag-n-drop reordering. $items = _content_sort_items($field, $items); @@ -770,10 +790,10 @@ function content_field($op, &$node, $fie ); // Fill-in items. - foreach ($items as $delta => $item) { + foreach (array_keys($items) as $weight => $delta) { $element['items'][$delta] = array( - '#item' => $item, - '#weight' => $delta, + '#item' => $items[$delta], + '#weight' => $weight, ); } @@ -893,20 +913,22 @@ function content_field($op, &$node, $fie * returns filtered and adjusted item array */ function content_set_empty($field, $items) { - // Filter out empty values. + // Prepare an empty item. + $empty = array(); + foreach (array_keys($field['columns']) as $column) { + $empty[$column] = NULL; + } + + // Filter out items flagged for removal. $filtered = array(); $function = $field['module'] .'_content_is_empty'; foreach ((array) $items as $delta => $item) { - if (!$function($item, $field)) { - $filtered[] = $item; + if (empty($item['_remove'])) { + $filtered[] = ($function($item, $field) ? $empty : $item); } } // Make sure we store the right number of 'empty' values. - $empty = array(); - foreach (array_keys($field['columns']) as $column) { - $empty[$column] = NULL; - } $pad = $field['multiple'] > 1 ? $field['multiple'] : 1; $filtered = array_pad($filtered, $pad, $empty); @@ -921,7 +943,7 @@ function _content_sort_items($field, $it if ($field['multiple'] >= 1 && isset($items[0]['_weight'])) { usort($items, '_content_sort_items_helper'); foreach ($items as $delta => $item) { - if (is_array($items[$delta])) { + if (is_array($item) && isset($item['_weight'])) { unset($items[$delta]['_weight']); } } @@ -1002,7 +1024,14 @@ function content_storage($op, $node) { if (!isset($additions[$field_name])) { $additions[$field_name] = array(); } - $additions[$field_name][] = $item; + + // Preserve deltas when loading items from database. + if (isset($row['delta'])) { + $additions[$field_name][$row['delta']] = $item; + } + else { + $additions[$field_name][] = $item; + } } } } Binary files images/remove.png and images/remove.png differ diff -rupN includes/content.node_form.inc includes/content.node_form.inc --- includes/content.node_form.inc 2009-02-10 23:53:04.000000000 +0100 +++ includes/content.node_form.inc 2009-04-02 01:48:57.000000000 +0200 @@ -151,21 +151,23 @@ function content_multiple_value_form(&$f switch ($field['multiple']) { case 0: + $deltas = array(0); $max = 0; break; - case 1: - $filled_items = content_set_empty($field, $items); - $current_item_count = isset($form_state['item_count'][$field_name]) - ? $form_state['item_count'][$field_name] - : count($items); - // We always want at least one empty icon for the user to fill in. - $max = ($current_item_count > count($filled_items)) - ? $current_item_count - 1 - : $current_item_count; + case 1: + $deltas = array_keys($items); + $current_item_count = isset($form_state['item_count'][$field_name]) ? $form_state['item_count'][$field_name] : max(1, count($deltas)); + $max = (!empty($deltas) ? max($deltas) : -1); + while (count($deltas) < $current_item_count) { + $max++; + $deltas[] = $max; + } break; + default: $max = $field['multiple'] - 1; + $deltas = range(0, $max); break; } @@ -180,7 +182,7 @@ function content_multiple_value_form(&$f ); $function = $field['widget']['module'] .'_widget'; - for ($delta = 0; $delta <= $max; $delta++) { + foreach ($deltas as $delta) { if ($element = $function($form, $form_state, $field, $items, $delta)) { $defaults = array( '#title' => ($field['multiple'] >= 1) ? '' : $title, @@ -206,6 +208,25 @@ function content_multiple_value_form(&$f ); } + // Add a checkbox to allow users remove a single delta item. + // See content_set_empty() and theme_content_multiple_values(). + if ($field['multiple'] == 1) { + // We name the element '_remove' to avoid clashing with column names + // defined by field modules. + $element['_remove'] = array( + '#type' => 'checkbox', + '#attributes' => array('class' => 'content-multiple-remove-checkbox'), + '#default_value' => isset($items[$delta]['_remove']) ? $items[$delta]['_remove'] : 0, + ); + + // Prepend an #after_build callback to prevent validation of fields + // that are flagged for removal. + if (!isset($element['#after_build'])) { + $element['#after_build'] = array(); + } + array_unshift($element['#after_build'], 'content_multiple_value_after_build_proxy'); + } + $form_element[$delta] = array_merge($element, $defaults); } } @@ -242,12 +263,78 @@ function content_multiple_value_form(&$f $form_element['#prefix'] = '
'; $form_element['#suffix'] = '
'; $form_element[$field_name .'_add_more']['#prefix'] = '
'; - $form_element[$field_name .'_add_more']['#suffix'] = '
'; + $form_element[$field_name .'_add_more']['#suffix'] = ''; } return $form_element; } /** + * After build callback for multiple value fields. + * + * When an item has been flagged for removal, we need to empty user input + * to prevent from getting validation errors. + */ +function content_multiple_value_after_build($elements, &$form_state) { + // Process the element only when we have user input that needs validatation. + if (!empty($elements['#needs_validation'])) { + // Check if the item has been flagged for removal. + if (isset($elements['_remove']) && !empty($elements['_remove']['#value'])) { + + // Remove user input for the top level value of the element. + if (isset($elements['#value'])) { + // Update the value in the form element. + $elements['#value'] = NULL; + + // Update the value in the $form_state. + $empty = array( + '_weight' => $elements['_weight']['#value'], + '_remove' => 1, + ); + foreach ($elements['#columns'] as $column) { + $empty[$column] = NULL; + } + form_set_value($elements, $empty, $form_state); + + // Update the value in the #post attribute of the element. + $post = &$elements['#post']; + foreach ($elements['#parents'] as $name) { + $post = &$post[$name]; + } + $post = $empty; + } + + // Now, recursively remove the values of children elements. + foreach (element_children($elements) as $key) { + if ($key != '_weight' && $key != '_remove') { + content_multiple_value_remove_values($elements[$key], $form_state, $elements['#post']); + } + } + } + } + return $elements; +} + +/** + * Helper function to empty values for items flagged for removal recursively. + */ +function content_multiple_value_remove_values(&$elements, &$form_state, &$post) { + foreach (element_children($elements) as $key) { + if (isset($elements[$key]) && $elements[$key]) { + + // Remove values for items flagged for removal. + if (isset($elements[$key]['#value'])) { + $elements[$key]['#value'] = NULL; + form_set_value($elements[$key], NULL, $form_state); + $elements[$key]['#post'] = $post; + } + + // Recurse through all children elements. + content_multiple_value_remove_values($elements[$key], $form_state, $post); + } + } +} + +/** * Submit handler to add more choices to a content form. This handler is used when * JavaScript is not available. It makes changes to the form state and the * entire form is rebuilt during the page reload. @@ -264,7 +351,6 @@ function content_add_more_submit($form, } } - /** * Menu callback for AHAH addition of new empty widgets. */ @@ -313,11 +399,13 @@ function content_add_more_js($type_name_ unset($form_state['values'][$field_name][$field['field_name'] .'_add_more']); foreach ($_POST[$field_name] as $delta => $item) { $form_state['values'][$field_name][$delta]['_weight'] = $item['_weight']; + $form_state['values'][$field_name][$delta]['_remove'] = isset($item['_remove']) ? $item['_remove'] : 0; } $form_state['values'][$field_name] = _content_sort_items($field, $form_state['values'][$field_name]); $_POST[$field_name] = _content_sort_items($field, $_POST[$field_name]); // Build our new form element for the whole field, asking for one more element. + $delta = max(array_keys($_POST[$field_name])) + 1; $form_state['item_count'] = array($field_name => count($_POST[$field_name]) + 1); $form_element = content_field_form($form, $form_state, $field); // Let other modules alter it. @@ -337,7 +425,6 @@ function content_add_more_js($type_name_ // Build the new form against the incoming $_POST values so that we can // render the new element. - $delta = max(array_keys($_POST[$field_name])) + 1; $_POST[$field_name][$delta]['_weight'] = $delta; $form_state = array('submitted' => FALSE); $form += array( diff -rupN tests/content.crud.test tests/content.crud.test --- tests/content.crud.test 2008-12-08 13:41:08.000000000 +0100 +++ tests/content.crud.test 2009-04-01 16:27:24.000000000 +0200 @@ -1234,3 +1234,70 @@ class ContentOptionWidgetTest extends Co } +class ContentEmptyDeltaTest extends ContentCrudTestCase { + function getInfo() { + return array( + 'name' => t('Empty deltas'), + 'description' => t('Test leaving empty values on a multivalue field and then removing them.'), + 'group' => t('CCK'), + ); + } + + function setUp() { + parent::setUp(); + $this->loginWithPermissions(); + $this->acquireContentTypes(1); + } + + function testEmptyTextField() { + // Create a content type with a multivalue text field. + $type = $this->content_types[0]; + $type_url = str_replace('_', '-', $type->type); + $value1 = $this->randomName(5); + $value2 = $this->randomName(5); + $value3 = $this->randomName(5); + $field = $this->createFieldText(array('text_processing' => 0, 'multiple' => 1)); + $field_name = $field['field_name']; + + // Create a node with three values set. + $edit = array( + 'title' => $this->randomName(20), + 'body' => $this->randomName(20), + 'type' => $type->name, + ); + $edit[$field_name][0]['value'] = $value1; + $edit[$field_name][1]['value'] = $value2; + $edit[$field_name][2]['value'] = $value3; + $node = $this->drupalCreateNode($edit); + $max_delta = max(array_keys($node->{$field_name})); + $this->assertEqual($max_delta, 2, 'Three values saved, highest delta is 2'); + $this->drupalGet('node/'. $node->nid); + $this->assertText($value1, 'First value displayed'); + $this->assertText($value2, 'Second value displayed'); + $this->assertText($value3, 'Third value displayed'); + + // Set second value to an empty string. + $node->{$field_name}[1]['value'] = ''; + node_save($node); + $node = node_load($node->nid, NULL, TRUE); + $this->assertIdentical($node->{$field_name}[1]['value'], NULL, 'Second value is empty'); + $max_delta = max(array_keys($node->{$field_name})); + $this->assertEqual($max_delta, 2, 'Three values saved, highest delta is 2'); + $this->drupalGet('node/'. $node->nid); + $this->assertText($value1, 'First value displayed'); + $this->assertNoText($value2, 'Second value not displayed'); + $this->assertText($value3, 'Third value displayed'); + + // Remove the second value. + $node->{$field_name}[1]['_remove'] = 1; + node_save($node); + $node = node_load($node->nid, NULL, TRUE); + $this->assertEqual($node->{$field_name}[1]['value'], $value3, 'Third value has moved to delta 1'); + $max_delta = max(array_keys($node->{$field_name})); + $this->assertEqual($max_delta, 1, 'Two values saved, highest delta is 1'); + $this->drupalGet('node/'. $node->nid); + $this->assertText($value1, 'First value displayed'); + $this->assertNoText($value2, 'Second value not displayed'); + $this->assertText($value3, 'Third value displayed'); + } +} diff -rupN theme/content-edit.js theme/content-edit.js --- theme/content-edit.js 1970-01-01 01:00:00.000000000 +0100 +++ theme/content-edit.js 2009-04-02 03:23:41.000000000 +0200 @@ -0,0 +1,142 @@ +// $Id$ + +/** + * Manipulation of content remove buttons. + * + * TableDrag objects for multiple value fields (and multigroups) are scanned + * to find 'remove' checkboxes. These checkboxes are hidden when javascript is + * enabled (using the Global CSS Killswitch, html.js, defined in drupal.js). + * A new 'remove' button is created here in place of these checkboxes aimed to + * provide a more user-friendly method to remove items. + */ +Drupal.behaviors.contentRemoveButtons = function(context) { + $('table.content-multiple-table', context).not('.content-multiple-remove-buttons-processed').each(function() { + var table = this, tableDrag = Drupal.tableDrag[$(table).attr('id')]; + + // Make sure the element is not processed more than once. + $(table).addClass('content-multiple-remove-buttons-processed'); + + // Create remove buttons. + $('input.content-multiple-remove-checkbox', table).each(function() { + Drupal.contentRemoveButtons.createButton(tableDrag, this); + }); + }); +}; + +/** + * Global contentRemoveButtons object. + */ +Drupal.contentRemoveButtons = { + _isBusy: false +}; + +/** + * Create a 'remove' button. + */ +Drupal.contentRemoveButtons.createButton = function(tableDrag, checkbox) { + // Create a new remove button. + var isRemoved = $(checkbox).attr('checked'); + var button = $(Drupal.theme('contentRemoveButton', tableDrag.getRemoveButtonTitle(isRemoved))); + + // Bind the onClick event to the 'remove' button. + button.bind('click', function(event) { + $(this).blur(); + + // Do not allow users click on a 'remove' button while the process of + // another one has not been finished yet. + if (!Drupal.contentRemoveButtons._isBusy) { + Drupal.contentRemoveButtons._isBusy = true; + Drupal.contentRemoveButtons.onClick(button, checkbox, tableDrag); + } + + return false; + }); + + // Attach the new button to the DOM tree. + $(checkbox).parent().append(button); + + // If the row is removed, then hide the contents of the cells. + if (isRemoved) { + $(button).parents('tr:first').children('td:not(.content-multiple-drag):not(.content-multiple-remove-cell)').children().hide(); + } +}; + +/** + * onClick handler for 'remove' buttons. + */ +Drupal.contentRemoveButtons.onClick = function(button, checkbox, tableDrag) { + // Switch the state of the checkbox related to the 'remove' button. + var isRemoved = !$(checkbox).attr('checked'); + $(checkbox).attr('checked', isRemoved); + + $(button).parents('tr:first').each(function() { + var row = this; + + // Switch the row class. + if (isRemoved) { + $(row).addClass('content-multiple-removed-row'); + } + else { + $(row).removeClass('content-multiple-removed-row'); + } + + // Switch the visibility state of the contents of all cells, except + // the drag'n'drop cell and the 'remove' button cell. + $(row).children('td:not(.content-multiple-drag):not(.content-multiple-remove-cell)').each(function() { + if (isRemoved) { + $(this).children().fadeOut('slow'); + } + else { + $(this).children().fadeIn('slow'); + } + }); + + // Display the table changed warning. + tableDrag.displayChangedWarning(); + + // Disable the busy flag after a while. + setTimeout(function() { Drupal.contentRemoveButtons._isBusy = false; }, 500); + }); + + // Switch the 'remove' button image and title. + $(button).attr('title', tableDrag.getRemoveButtonTitle(isRemoved)); +}; + +/** + * tableDrag extension; Display table change warning when appropriate. + */ +Drupal.tableDrag.prototype.displayChangedWarning = function() { + if (this.changed == false) { + $(Drupal.theme('tableDragChangedWarning')).insertAfter(this.table).hide().fadeIn('slow'); + this.changed = true; + } +}; + +/** + * Get the title of the 'remove' button. + * + * This method is an extension of the tableDrag object. This means a separate + * module can override this method for a particular tableDrag object. For example, + * the multigroup module can change the text to read 'Remove this group of items', + * another module could change it to 'Remove this image', and so on... + * To override this function: + * + * var tableId = $(table).attr('id'); + * Drupal.tableDrag[tableId].getRemoveButtonTitle = function(isRemoved) { + * return (isRemoved ? Drupal.t('Restore this foo') : Drupal.t('Remove this foo')); + * }; + * + * + * @param isRemoved + * A flag that indicates the state of the button. + */ +Drupal.tableDrag.prototype.getRemoveButtonTitle = function(isRemoved) { + return (isRemoved ? Drupal.t('Restore this item') : Drupal.t('Remove this item')); +}; + +/** + * Theme the 'remove' button. + */ +Drupal.theme.prototype.contentRemoveButton = function(title) { + return ''; +}; diff -rupN theme/content-module.css theme/content-module.css --- theme/content-module.css 2009-03-14 19:45:38.000000000 +0100 +++ theme/content-module.css 2009-04-01 21:16:57.000000000 +0200 @@ -27,6 +27,42 @@ margin:0; } +.content-multiple-remove-button { + display: block; + float: right; + height: 12px; + width: 16px; + margin: 2px 0 1px 0; + padding: 0; + background:transparent url(../images/remove.png) no-repeat 0 0; + border-bottom: #C2C9CE 1px solid; + border-right: #C2C9CE 1px solid; +} +.content-multiple-remove-button:hover { + background-position: 0 -12px; +} +.content-multiple-removed-row .content-multiple-remove-button { + background-position: 0 -24px; +} +.content-multiple-removed-row .content-multiple-remove-button:hover { + background-position: 0 -36px; +} +html.js .content-multiple-removed-row { + background-color: #ffffcc; +} +.content-multiple-weight-header, +.content-multiple-remove-header, +.content-multiple-remove-cell, +.content-multiple-table td.delta-order { + text-align: center; +} +html.js .content-multiple-weight-header, +html.js .content-multiple-remove-header span, +html.js .content-multiple-table td.delta-order, +html.js .content-multiple-remove-checkbox { + display: none; +} + .node-form .number { display:inline; width:auto;