Index: misc/tabledrag.js =================================================================== RCS file: /cvs/drupal/drupal/misc/tabledrag.js,v retrieving revision 1.32 diff -u -p -r1.32 tabledrag.js --- misc/tabledrag.js 3 Nov 2009 05:34:37 -0000 1.32 +++ misc/tabledrag.js 2 Dec 2009 03:24:26 -0000 @@ -83,8 +83,15 @@ Drupal.tableDrag = function (table, tabl // Match immediate children of the parent element to allow nesting. $('> tr.draggable, > tbody > tr.draggable', table).each(function() { self.makeDraggable(this); }); - // Hide columns containing affected form elements. - this.hideColumns(); + // Hide or show weight and parent columns according to user preference. + // This aids screenreader accessibility so users can enter weight values. + // Initialize the weight columns for the show/hide toggle. + self.initColumns(); + // Add a link before the table for users to show or hide weight columns. + $(table).before($('') + .append(Drupal.t('Show/hide weight fields')) + .click(function () { self.toggleShowWeight(self); return false; }) + ); // Add mouse bindings to the document. The self variable is passed along // as event handlers do not have direct access to the tableDrag object. @@ -93,10 +100,11 @@ Drupal.tableDrag = function (table, tabl }; /** - * Hide the columns containing form elements according to the settings for - * this tableDrag instance. + * Initialize weight/parent columns to be hidden. Identify and mark each cell + * with a CSS class so we can easily toggle show/hide it. Finally, hide + * columns if user does not have a 'showWeight' cookie. */ -Drupal.tableDrag.prototype.hideColumns = function () { +Drupal.tableDrag.prototype.initColumns = function () { for (var group in this.tableSettings) { // Find the first field in this group. for (var d in this.tableSettings[group]) { @@ -108,7 +116,7 @@ Drupal.tableDrag.prototype.hideColumns = } } - // Hide the column containing this field. + // Mark the column containing this field so it can be hidden. if (hidden && cell[0] && cell.css('display') != 'none') { // Add 1 to our indexes. The nth-child selector is 1 based, not 0 based. // Match immediate children of the parent element to allow nesting. @@ -128,21 +136,82 @@ Drupal.tableDrag.prototype.hideColumns = if (index > 0) { cell = row.children(':nth-child(' + index + ')'); if (cell[0].colSpan > 1) { - // If this cell has a colspan, simply reduce it. - cell[0].colSpan = cell[0].colSpan - 1; + // If this cell has a colspan, mark it so we can reduce the colspan. + $(cell[0]).addClass('tabledrag-reduce-colspan'); } else { - // Hide table body cells, but remove table header cells entirely - // (Safari doesn't hide properly). - parentTag == 'thead' ? cell.remove() : cell.css('display', 'none'); + // Mark this cell so we can hide it. + $(cell[0]).addClass('tabledrag-display-none'); } } }); } } + // Now hide cells and reduce colspans unless user cookie is set. + var show = $.cookie('Drupal.tableDrag.showWeight'); + if (show != 1) { + Drupal.tableDrag.prototype.hideColumns(); + } }; /** + * Hide the columns containing weight/parent form elements. + * Undo showColumns(). + */ +Drupal.tableDrag.prototype.hideColumns = function () { + // Turn off display of weight/parent cells and headers. + $('.tabledrag-display-none').css('display', 'none'); + // Reduce colspan of any effected multi-span columns. + $('.tabledrag-reduce-colspan').each(function() { this.colSpan = this.colSpan - 1; }); +} + +/** + * Show the columns containing weight/parent form elements + * Undo hideColumns(). + */ +Drupal.tableDrag.prototype.showColumns = function () { + // Increase colspan back to columns it was reduced. + $('.tabledrag-reduce-colspan').each(function() { this.colSpan = this.colSpan + 1; }); + // Turn on display of weight/parent cells and headers. + $('.tabledrag-display-none').css('display', 'table-cell'); +} + +/** + * Toggle visibility of weight/parent columns. Use a saved cookie to store the + * user preference. + */ +Drupal.tableDrag.prototype.toggleShowWeight = function (self) { + // Retrieve the tableDrag status from a stored cookie. + var show = $.cookie('Drupal.tableDrag.showWeight'); + + // Show or hide columns with weight fields and toggle the cookie value. + if (show == 1) { + $.cookie( + 'Drupal.tableDrag.showWeight', + 0, + { + path: Drupal.settings.basePath, + // The cookie should "never" expire. + expires: 36500, + } + ); + this.hideColumns(); + } + else { + $.cookie( + 'Drupal.tableDrag.showWeight', + 1, + { + path: Drupal.settings.basePath, + // The cookie should "never" expire. + expires: 36500, + } + ); + this.showColumns(); + } +} + +/** * Find the target used within a particular row and group. */ Drupal.tableDrag.prototype.rowSettings = function (group, row) { Index: modules/system/system.css =================================================================== RCS file: /cvs/drupal/drupal/modules/system/system.css,v retrieving revision 1.68 diff -u -p -r1.68 system.css --- modules/system/system.css 1 Dec 2009 00:39:34 -0000 1.68 +++ modules/system/system.css 2 Dec 2009 03:24:26 -0000 @@ -688,3 +688,21 @@ div.password-confirm { overflow: hidden; position: absolute; } + +/** + * Hide the tabledrag 'Show weight' link for everyone but screen readers and + * keyboard only users. + */ +a.tabledrag-show-weight { + height: 0; + overflow: hidden; + position: absolute; +} + +a.tabledrag-show-weight:focus, +a.tabledrag-show-weight:hover, +a.tabledrag-show-weight:active { + height: auto; + overflow: visible; + top: 3em; +}