=== modified file 'includes/common.inc' --- includes/common.inc 2009-03-28 03:54:37 +0000 +++ includes/common.inc 2009-03-29 11:26:37 +0000 @@ -3717,6 +3717,12 @@ 'form_element' => array( 'arguments' => array('element' => NULL), ), + 'vertical_tab' => array( + 'arguments' => array('element' => NULL), + ), + 'vertical_tabs' => array( + 'arguments' => array('element' => NULL), + ), ); } === modified file 'includes/form.inc' --- includes/form.inc 2009-03-28 18:09:10 +0000 +++ includes/form.inc 2009-03-29 13:42:41 +0000 @@ -939,7 +939,8 @@ /** * Walk through the structured form array, adding any required * properties to each element and mapping the incoming $_POST - * data to the proper elements. + * data to the proper elements. Also, execute any #process handlers + * attached to a specific element. * * @param $form_id * A unique string identifying the form for validation, submission, @@ -972,9 +973,22 @@ } } + if (!isset($form['#id'])) { + $form['#id'] = form_clean_id('edit-' . implode('-', $form['#parents'])); + } if (isset($form['#input']) && $form['#input']) { _form_builder_handle_input_element($form_id, $form, $form_state, $complete_form); } + // Allow for elements to expand to multiple elements, e.g., radios, + // checkboxes and files. + if (isset($form['#process']) && !$form['#processed']) { + foreach ($form['#process'] as $process) { + if (drupal_function_exists($process)) { + $form = $process($form, $form_state, $complete_form); + } + } + $form['#processed'] = TRUE; + } $form['#defaults_loaded'] = TRUE; // We start off assuming all form elements are in the correct order. @@ -1062,8 +1076,7 @@ /** * Populate the #value and #name properties of input elements so they - * can be processed and rendered. Also, execute any #process handlers - * attached to a specific element. + * can be processed and rendered. */ function _form_builder_handle_input_element($form_id, &$form, &$form_state, $complete_form) { if (!isset($form['#name'])) { @@ -1080,9 +1093,6 @@ } array_unshift($form['#parents'], $name); } - if (!isset($form['#id'])) { - $form['#id'] = form_clean_id('edit-' . implode('-', $form['#parents'])); - } if (!empty($form['#disabled'])) { $form['#attributes']['disabled'] = 'disabled'; @@ -1151,16 +1161,6 @@ } } } - // Allow for elements to expand to multiple elements, e.g., radios, - // checkboxes and files. - if (isset($form['#process']) && !$form['#processed']) { - foreach ($form['#process'] as $process) { - if (drupal_function_exists($process)) { - $form = $process($form, isset($edit) ? $edit : NULL, $form_state, $complete_form); - } - } - $form['#processed'] = TRUE; - } form_set_value($form, $form['#value'], $form_state); } @@ -1597,6 +1597,7 @@ $element['#attributes']['class'] .= ' collapsed'; } } + $element['#attributes']['id'] = $element['#id']; return '' . ($element['#title'] ? '' . $element['#title'] . '' : '') . (isset($element['#description']) && $element['#description'] ? '
' . $element['#description'] . '
' : '') . (!empty($element['#children']) ? $element['#children'] : '') . (isset($element['#value']) ? $element['#value'] : '') . "\n"; } @@ -2222,6 +2223,81 @@ } /** + * Handles reset of the vertical tabs storage reset. + * + * @param $element + * An associative array containing the properties and children of the + * form element. + * + * @return + * The processed element. + */ +function form_process_form($element, &$form_state) { + $form_state['vertical tabs'] = array(); + return $element; +} + +/** + * Handles addition of fieldsets to a vertical tabs widget. + * + * @param $element + * An associative array containing the properties and children of the + * fieldset element. + * + * @return + * The processed element. + */ +function form_process_fieldset(&$element, &$form_state, $entire_form) { + if (isset($element['#vertical_tab'])) { + // Store a reference to this fieldset for the vertical tabs processing function. + $form_state['vertical tabs'][$element['#vertical_tab']][] = &$element; + + // Trick form_render() into believing this has already been output. + $element['#printed'] = TRUE; + + $element['#collapsible'] = FALSE; + + // Add CSS and JavaScript files. + foreach (array('css', 'js') as $kind) { + if (!empty($element['#vertical_tab_' . $kind]) && is_array($element['#vertical_tab_' . $kind])) { + foreach ($element['#vertical_tab_' . $kind] as $arguments) { + call_user_func_array('drupal_add_' . $kind, is_array($arguments) ? $arguments : array($arguments)); + } + } + } + } + return $element; +} + +function form_process_vertical_tabs($element, &$form_state, $entire_form) { + // Add the reference to the tabs to this element so that it's available + // in the theme function. + if (!isset($form_state['vertical tabs'][$element['#parents'][0]])) { + $form_state['vertical tabs'][$element['#parents'][0]] = array(); + } + $element['#tabs'] = &$form_state['vertical tabs'][$element['#parents'][0]]; + return $element; +} + +/** + * Makes the element's children fieldsets be vertical tabs. + */ +function theme_vertical_tabs(&$element) { + // Add required JavaScript and Stylesheet. + drupal_add_js('misc/vertical-tabs.js', array('weight' => JS_DEFAULT - 1)); + drupal_add_css('misc/vertical-tabs.css'); + + foreach ($element['#tabs'] as $tab) { + // Allow printing for this rendering. drupal_render_children() will + // set this back to TRUE. + $tab['#printed'] = FALSE; + $element[] = $tab; + } + + return '
' . drupal_render_children($element) . '
'; +} + +/** * Theme a form submit button. * * @ingroup themeable === added file 'misc/vertical-tabs.css' --- misc/vertical-tabs.css 1970-01-01 00:00:00 +0000 +++ misc/vertical-tabs.css 2009-03-28 23:39:42 +0000 @@ -0,0 +1,80 @@ +/* $Id */ + +.vertical-tabs { + margin: 1em 0 1em 15em; + border: 1px solid #ccc; +} + +.vertical-tabs-list { + width: 15em; + list-style: none; + list-style-image: none; /* IE6 */ + border-top: 1px solid #ccc; + padding: 0; + position: relative; /* IE6 */ + margin: -1px 0 -1px -15em; + float: left; +} + +.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane { + margin: 0 !important; + padding: 0 1em; + border: 0; +} + +.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane legend { + display: none; +} + + + +/* Layout of each tab */ +.vertical-tabs-list li { + background: #eee; + border: 1px solid #ccc; + border-top: 0; + padding: 0; + margin: 0; + height: 1%; +} + +.vertical-tabs-list li a { + display: block; + text-decoration: none; + padding: 0.5em 0.6em; + line-height: 1.3em; + height: 1%; +} + +.vertical-tabs-list li a:focus { + position:relative; + z-index: 5; +} + +.vertical-tabs-list li a:hover { + text-decoration: none; +} + +.vertical-tabs-list li strong { + font-weight:normal; +} + +.vertical-tabs-list li.selected { + background: #fff; + border-right: 0; + position: relative; +} + +.vertical-tabs-list li.selected strong { + font-weight: bold; + color: #000; +} + +.vertical-tabs-list .description { + display: block; +} + +.vertical-tabs ul.vertical-tabs-list .description { + line-height: normal; + margin-bottom: 0; +} === added file 'misc/vertical-tabs.js' --- misc/vertical-tabs.js 1970-01-01 00:00:00 +0000 +++ misc/vertical-tabs.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,142 @@ +// $Id$ + +(function($) { + +/** + * Vertical Tabs. + * + * This script transforms a set of fieldsets into a stack of vertical + * tabs. Another tab pane can be selected by clicking on the respective + * tab. + * + * Each tab may have a description which can be updated by another + * script. For that to work, each fieldset has an associated + * 'verticalTabCallback' (with jQuery.data() attached to the fieldset), + * which is called every time the user performs an update to a form + * element inside the tab pane. + */ +Drupal.behaviors.verticalTabs = { + attach: function(context) { + $('.vertical-tabs-panes:not(.vertical-tabs-processed)', context).each(function() { + // Create the tab column. + var list = $(''); + $(this).wrap('
').before(list); + + // Transform each fieldset into a tab. + $('> fieldset', this).each(function(i) { + var tab = new Drupal.verticalTab({ title: $('> legend', this).text(), fieldset: $(this) }); + list.append(tab.item); + $(this) + .addClass('vertical-tabs-pane') + .data('verticalTab', tab) + .find('input, textarea, select') + .bind('change click blur keyup', function() { + tab.updateDescription(); + }); + }); + + $('> li:first', list).addClass('first'); + $('> li:last', list).addClass('last'); + + $('> fieldset:first', this).data('verticalTab').focus(); + }).addClass('vertical-tabs-processed'); + } +}; + +Drupal.behaviors.verticalTabsDescriptions = { + attach: function(context) { + $.each(Drupal.verticalTab.descriptors, function() { + var pane = $('fieldset#' + this.id + '.vertical-tabs-pane'); + + // Add the description callback if the tab is not yet initialized. + pane.filter(':not(.vertical-tabs-processed)') + .data('verticalTabCallback', this.callback) + .addClass('vertical-tabs-processed') + .end(); + + // Always try to update the tab description; even if the tab + // was already initialized. + var data = pane.data('verticalTab'); + if (data) { + data.updateDescription(); + } + }); + } +}; + +/** + * Vertical Tab + * + * @param settings + * An object with the following keys: + * - title: The name of the tab. + * - fieldset: The jQuery object of the fieldset that is the tab pane. + */ +Drupal.verticalTab = function(settings) { + var that = this; + $.extend(this, settings, Drupal.theme('verticalTab', settings)); + + this.link.click(function() { + that.focus(); + return false; + }); + + this.updateDescription(); +}; + +// All description callbacks are stored here so that they can be applied +// to other tabs later when new HTML is inserted into the page. +Drupal.verticalTab.descriptors = []; + +Drupal.verticalTab.addDescription = function(id, callback) { + Drupal.verticalTab.descriptors.push({ id: id, callback: callback }); +}; + + +Drupal.verticalTab.prototype = { + // Displays the tab's content pane. + focus: function() { + this.fieldset.siblings().each(function() { + var tab = $(this).data('verticalTab'); + tab.fieldset.hide(); + tab.item.removeClass('selected'); + }); + + this.fieldset.show(); + this.item.addClass('selected'); + }, + + // Updates the tab's description. + updateDescription: function() { + var callback = this.fieldset.data('verticalTabCallback'); + if (callback) { + this.description.html(callback(this.fieldset)); + } + } +}; + +/** + * Theme function for a vertical tab. + * + * @param settings + * An object with the following keys: + * - title: The name of the tab. + * @return + * This function has to return an object with at least these keys: + * - item: The root tab jQuery element + * - link: The anchor tag that acts as the clickable area of the tab + * (jQuery version) + * - description: The jQuery element that contains the tab description + */ +Drupal.theme.prototype.verticalTab = function(settings) { + var tab = {}; + tab.item = $('
  • ') + .append(tab.link = $('') + .append(tab.title = $('').text(settings.title)) + .append(tab.description = $('') + ) + ); + return tab; +}; + +})(jQuery); === modified file 'modules/book/book.css' --- modules/book/book.css 2008-12-19 15:42:26 +0000 +++ modules/book/book.css 2009-03-28 23:39:42 +0000 @@ -35,6 +35,9 @@ margin-top: 0; margin-bottom: 0; } +html.js #edit-book-pick-book { + display: none; +} #edit-book-bid-wrapper .description { clear: both; } === added file 'modules/book/book.js' --- modules/book/book.js 1970-01-01 00:00:00 +0000 +++ modules/book/book.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,16 @@ +// $Id$ + +(function($) { + +Drupal.verticalTab.addDescription('edit-book', function (context) { + var val = $('#edit-book-bid').val(); + + if (val === '0') + return Drupal.t('Not in book'); + else if (val === 'new') + return Drupal.t('New book'); + else + return Drupal.checkPlain($('#edit-book-bid :selected').text()); +}); + +})(jQuery); === modified file 'modules/book/book.module' --- modules/book/book.module 2009-03-08 04:25:03 +0000 +++ modules/book/book.module 2009-03-29 11:56:41 +0000 @@ -415,7 +415,6 @@ function _book_add_form_elements(&$form, $node) { // Need this for AJAX. $form['#cache'] = TRUE; - drupal_add_js("if (Drupal.jsEnabled) { jQuery(function() { jQuery('#edit-book-pick-book').css('display', 'none'); }); }", 'inline'); $form['book'] = array( '#type' => 'fieldset', @@ -423,6 +422,8 @@ '#weight' => 10, '#collapsible' => TRUE, '#collapsed' => TRUE, + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'book') .'/book.js'), '#tree' => TRUE, '#attributes' => array('class' => 'book-outline-form'), ); === added file 'modules/comment/comment-node-form.js' --- modules/comment/comment-node-form.js 1970-01-01 00:00:00 +0000 +++ modules/comment/comment-node-form.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,9 @@ +// $Id$ + +(function($) { + +Drupal.verticalTab.addDescription('edit-comment-settings', function (context) { + return $('input:checked', context).parent().text(); +}); + +})(jQuery); === modified file 'modules/comment/comment.module' --- modules/comment/comment.module 2009-03-17 12:41:54 +0000 +++ modules/comment/comment.module 2009-03-29 11:56:03 +0000 @@ -580,6 +580,8 @@ '#title' => t('Comment settings'), '#collapsible' => TRUE, '#collapsed' => TRUE, + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'comment') . '/comment-node-form.js'), '#weight' => 30, ); $comment_count = isset($node->nid) ? db_query('SELECT comment_count FROM {node_comment_statistics} WHERE nid = :nid', array(':nid' => $node->nid))->fetchField() : 0; === added file 'modules/menu/menu.js' --- modules/menu/menu.js 1970-01-01 00:00:00 +0000 +++ modules/menu/menu.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,9 @@ +// $Id$ + +(function($) { + +Drupal.verticalTab.addDescription('edit-menu', function (context) { + return $('#edit-menu-link-title', context).val() || Drupal.t('Not in menu'); +}); + +})(jQuery); === modified file 'modules/menu/menu.module' --- modules/menu/menu.module 2009-03-28 03:58:55 +0000 +++ modules/menu/menu.module 2009-03-29 12:49:33 +0000 @@ -396,6 +396,8 @@ '#access' => user_access('administer menu'), '#collapsible' => TRUE, '#collapsed' => FALSE, + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'menu') . '/menu.js'), '#tree' => TRUE, '#weight' => -2, '#attributes' => array('class' => 'menu-item-form'), === added file 'modules/node/node.js' --- modules/node/node.js 1970-01-01 00:00:00 +0000 +++ modules/node/node.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,28 @@ +// $Id$ + +(function($) { + +Drupal.verticalTab.addDescription('edit-revision-information', function (context) { + return $('#edit-revision', context).is(':checked') ? + Drupal.t('Create new revision') : + Drupal.t('Don\'t create new revision'); +}); + +Drupal.verticalTab.addDescription('edit-author', function (context) { + var name = $('#edit-name').val(), date = $('#edit-date').val(); + return date ? + Drupal.t('By @name on @date', { '@name': name, '@date': date }) : + Drupal.t('By @name', { '@name': name }); +}); + +Drupal.verticalTab.addDescription('edit-options', function (context) { + var vals = []; + + $('input:checked', context).parent().each(function() { + vals.push($(this).text()); + }); + + return vals.join(', ') || Drupal.t('None'); +}); + +})(jQuery); === modified file 'modules/node/node.pages.inc' --- modules/node/node.pages.inc 2009-03-26 13:31:24 +0000 +++ modules/node/node.pages.inc 2009-03-29 13:41:33 +0000 @@ -152,6 +152,10 @@ $form['#node'] = $node; + $form['additional_settings'] = array( + '#type' => 'vertical_tabs', + ); + // Add a log field if the "Create new revision" option is checked, or if the // current user has the ability to check that option. if (!empty($node->revision) || user_access('administer nodes')) { @@ -161,6 +165,8 @@ '#collapsible' => TRUE, // Collapsed by default when "Create new revision" is unchecked '#collapsed' => !$node->revision, + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'node') . '/node.js'), '#weight' => 20, ); $form['revision_information']['revision'] = array( @@ -172,7 +178,7 @@ $form['revision_information']['log'] = array( '#type' => 'textarea', '#title' => t('Revision log message'), - '#rows' => 2, + '#rows' => 4, '#description' => t('Provide an explanation of the changes you are making. This will help other authors understand your motivations.'), ); } @@ -184,6 +190,8 @@ '#title' => t('Authoring information'), '#collapsible' => TRUE, '#collapsed' => TRUE, + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'node') . '/node.js'), '#weight' => 90, ); $form['author']['name'] = array( @@ -213,6 +221,8 @@ '#title' => t('Publishing options'), '#collapsible' => TRUE, '#collapsed' => TRUE, + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'node') . '/node.js'), '#weight' => 95, ); $form['options']['status'] = array( @@ -283,7 +293,7 @@ $form = array( '#after_build' => array('node_teaser_js', 'node_teaser_include_verify')); - $form['#prefix'] = '
    '; + $form['#prefix'] = '
    '; $form['#suffix'] = '
    '; $form['teaser_js'] = array( === added file 'modules/path/path.js' --- modules/path/path.js 1970-01-01 00:00:00 +0000 +++ modules/path/path.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,13 @@ +// $Id$ + +(function($) { + +Drupal.verticalTab.addDescription('edit-path', function (context) { + var path = $('#edit-path-1').val(); + + return path ? + Drupal.t('Alias: @alias', { '@alias': path }) : + Drupal.t('No alias'); +}); + +})(jQuery); === modified file 'modules/path/path.module' --- modules/path/path.module 2009-03-08 04:25:03 +0000 +++ modules/path/path.module 2009-03-29 11:59:03 +0000 @@ -194,6 +194,8 @@ '#title' => t('URL path settings'), '#collapsible' => TRUE, '#collapsed' => empty($path), + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'path') .'/path.js'), '#access' => user_access('create url aliases'), '#weight' => 30, ); === modified file 'modules/system/system.module' --- modules/system/system.module 2009-03-25 18:40:50 +0000 +++ modules/system/system.module 2009-03-29 13:27:56 +0000 @@ -236,6 +236,7 @@ '#method' => 'post', '#action' => request_uri(), '#theme_wrapper' => 'form', + '#process' => array('form_process_form'), ); $type['page'] = array( @@ -381,6 +382,7 @@ '#theme' => 'file', '#theme_wrapper' => 'form_element', ); + $type['tableselect'] = array( '#input' => TRUE, '#js_select' => TRUE, @@ -419,10 +421,15 @@ '#collapsible' => FALSE, '#collapsed' => FALSE, '#value' => NULL, - '#process' => array('form_process_ahah'), + '#process' => array('form_process_ahah', 'form_process_fieldset'), '#theme_wrapper' => 'fieldset', ); + $type['vertical_tabs'] = array( + '#theme_wrapper' => 'vertical_tabs', + '#process' => array('form_process_vertical_tabs'), + ); + $type['token'] = array( '#input' => TRUE, '#theme' => array('hidden'), === added file 'modules/upload/upload.js' --- modules/upload/upload.js 1970-01-01 00:00:00 +0000 +++ modules/upload/upload.js 2009-03-28 23:39:42 +0000 @@ -0,0 +1,10 @@ +// $Id$ + +(function($) { + +Drupal.verticalTab.addDescription('edit-attachments', function (context) { + var size = $('#upload-attachments tbody tr').size(); + return Drupal.formatPlural(size, '1 attachment', '@count attachments'); +}); + +})(jQuery); === modified file 'modules/upload/upload.module' --- modules/upload/upload.module 2009-03-25 16:43:02 +0000 +++ modules/upload/upload.module 2009-03-29 11:59:39 +0000 @@ -231,9 +231,9 @@ '#title' => t('File attachments'), '#collapsible' => TRUE, '#collapsed' => empty($node->files), + '#vertical_tab' => 'additional_settings', + '#vertical_tab_js' => array(drupal_get_path('module', 'upload') .'/upload.js'), '#description' => t('Changes made to the attachments are not permanent until you save this post. The first "listed" file will be included in RSS feeds.'), - '#prefix' => '
    ', - '#suffix' => '
    ', '#weight' => 30, ); === modified file 'themes/garland/fix-ie.css' --- themes/garland/fix-ie.css 2008-03-13 20:02:18 +0000 +++ themes/garland/fix-ie.css 2009-03-28 23:39:42 +0000 @@ -25,6 +25,10 @@ background: none; } +div.vertical-tabs ul.vertical-tabs-list li.first { + background-image: none; +} + ul.primary { /* Fix missing top margin */ position: relative; /* LTR */ === modified file 'themes/garland/style.css' --- themes/garland/style.css 2009-02-18 14:28:21 +0000 +++ themes/garland/style.css 2009-03-28 23:39:42 +0000 @@ -823,6 +823,13 @@ background-color: transparent; } +/* Keep the background position at 0 for filters and vertical tabs. */ +*:first-child+html fieldset.filter-wrapper, +*:first-child+html fieldset.vertical-tabs-pane { + background-position: 0 0; +} + + *:first-child+html fieldset > .description, *:first-child+html fieldset .fieldset-wrapper .description { padding-top: 1em; } @@ -851,6 +858,39 @@ background: url(images/menu-collapsed.gif) no-repeat 0% 50%; /* LTR */ } + /** + * Vertical tabs. + */ +div.vertical-tabs { + margin-right: 5%; + border-color: #d9eaf5; +} + +div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane { + padding: 0.5em 1em; +} + +div.vertical-tabs ul.vertical-tabs-list { + border-color: #d9eaf5; +} + +div.vertical-tabs ul.vertical-tabs-list li { + background-color: #edf5fa; + border-color: #d9eaf5; +} + +div.vertical-tabs ul.vertical-tabs-list li.selected { + background: #fff repeat-x 0 0; +} + +div.vertical-tabs ul.vertical-tabs-list li.selected.first { + background-image: url(images/gradient-inner.png); +} + +div.vertical-tabs ul.vertical-tabs-list li.selected a strong { + color: #494949; +} + /** * Syndication icons and block */