diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 07ae57e..ad5863d 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1845,8 +1845,6 @@ function theme_table($variables) { $responsive = $variables['responsive']; $empty = $variables['empty']; - // Add the standard table behaviors. - drupal_add_library('system', 'drupal.table'); // Add sticky headers, if applicable. if (count($header) && $sticky) { drupal_add_library('system', 'drupal.tableheader'); diff --git a/core/misc/debounce.js b/core/misc/debounce.js deleted file mode 100644 index 2a784a0..0000000 --- a/core/misc/debounce.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @file debounce.js - * - * Returns a function that will not invoked while it continues to be called, - * until the wait period has experied without a call to the function. - * - * Use this function to prevent frequent calls to functions, for - * example like event handlers attached to the resize event. - * - * To use debounce, pass your function to debounce as the first argument - * and the waiting period as the second. - * - * If immediate is passed as true, the provided function will be invoked before - * the wait time has elapsed instead of after, once the debounce-wrapped function - * ceases to be called. - */ -(function (Drupal, undefined) { - -"use strict"; - - Drupal.debounce = function (fn, wait, immediate) { - var timeout; - return function () { - var context = this; - var args = arguments; - var deferred = function () { - timeout = null; - if (!immediate) { - fn.apply(context, args); - } - }; - var invoke = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(deferred, wait); - if (invoke) { - fn.apply(context, args); - } - }; - }; -})(Drupal); diff --git a/core/misc/table.js b/core/misc/table.js deleted file mode 100644 index 6b03bfd..0000000 --- a/core/misc/table.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * table.js - * - * Behaviors to facilitate interactivity with tables. - */ -(function ($) { - -"use strict"; - - /** - * Attach the table function to Drupal.behaviors. - */ - Drupal.behaviors.table = { - attach: function (context, settings) { - $(context).find('table').once('table', function () { - $(this).data("drupal-table", new Drupal.Table(this)); - }); - } - }; - /** - * The Table manages behaviors that enhance table element interactivity. - */ - Drupal.Table = function (table) { - var self = this; - this.$table = $(table); - this.actions = $(); - this.hasActions = false; - // Build a link that will toggle the column visibility. - this.$actionsContainer = $('
', { - 'class': 'table-actions' - }) - .data('drupal-table', {}); - }; - /** - * Add a link to perform an action on the table to the list of table actions. - * - * @param actions: actions may be an object or an array of action objects. - * An action object has the following structure: - * - * action = { - * 'href': 'url', - * 'text': 'string', - * 'attributes': { - * 'title': 'title attribute description', - * 'class': 'string of classes' - * }, - * 'callback': function () {} - * }; - */ - Drupal.Table.prototype.addAction = function (actions) { - // Keep a list of actions added during this method call. - var newActions = $(); - // Actions could be a single action or an array. - if (!$.isArray(actions)) { - actions = [actions]; - } - // If the table does not have any actions yet, prepend the container - // that will display them. - if (!this.hasActions) { - this.$actionsContainer.insertBefore(this.$table); - } - // Append the actions to the list of table actions. - for (var i = 0; i < actions.length; i++) { - var link; - var action = actions[i]; - // If the action doesn't have a callback, there is no reason to proceed. - if ('callback' in action && typeof action.callback === 'function') { - var attributes = $.extend({}, ('attributes' in action && typeof action.attributes === 'object') ? action.attributes : {}); - this.$actionsContainer.append( - link = $('', { - 'href': ('href' in action) ? action.href : '#', - 'text': ('text' in action) ? Drupal.t(action.text) : Drupal.t('No text provided'), - 'title': ('title' in attributes) ? Drupal.t(attributes.title) : '', - 'class': ('class' in attributes) ? attributes['class'] : '', - // Aria information. - 'role': 'button', - }) - .on({ - 'click': action.callback - }) - ); - newActions = $().add(newActions).add(link); - } - } - // Store the actions added in this object's list of actions. - this.actions = $().add(this.actions).add(newActions); - // Return just the actions that were added. - return newActions; - }; -})(jQuery); diff --git a/core/misc/tabledrag.js b/core/misc/tabledrag.js index 8bf37c1..2cd9c7a 100644 --- a/core/misc/tabledrag.js +++ b/core/misc/tabledrag.js @@ -51,7 +51,6 @@ Drupal.tableDrag = function (table, tableSettings) { // Required object variables. this.$table = $(table); - this.table = this.$table.data('drupal-table'); this.tableSettings = tableSettings; this.dragObject = null; // Used to hold information about a current drag operation. this.rowObject = null; // Provides operations for row manipulation. @@ -105,22 +104,16 @@ Drupal.tableDrag = function (table, tableSettings) { // Match immediate children of the parent element to allow nesting. $table.find('> tr.draggable, > tbody > tr.draggable').each(function () { self.makeDraggable(this); }); - // Build a link before the table for users to show or hide weight columns. - this.actionLink = { - 'text': this.showText, - 'attributes': { - 'title': Drupal.t('Re-order rows by numerical weight instead of dragging.'), - 'class': 'tabledrag-toggle-weight', - }, - 'namespace': 'drupal-tabledrag', - 'callback': $.proxy(function (event) { - event.preventDefault(); - this.toggleColumns(); - }, this) - }; - // Add the toggle to the table's control bar. - this.$columnToggle = this.table.addAction([this.actionLink]); - this.$columnToggle.data('drupal-tabledrag', {}); + // Add a link before the table for users to show or hide weight columns. + $table.before($('') + .attr('title', Drupal.t('Re-order rows by numerical weight instead of dragging.')) + .click($.proxy(function (e) { + e.preventDefault(); + this.toggleColumns(); + }, this)) + .wrap('
') + .parent() + ); // Initialize the specified columns (for example, weight or parent columns) // to show or hide according to user preference. This aids accessibility @@ -152,7 +145,8 @@ Drupal.tableDrag = function (table, tableSettings) { * 'Drupal.tableDrag.showWeight' localStorage value. */ Drupal.tableDrag.prototype.initColumns = function () { - var $table = $(this.table), hidden, cell, columnIndex; + var $table = this.$table; + var hidden, cell, columnIndex; for (var group in this.tableSettings) { if (this.tableSettings.hasOwnProperty(group)) { // Find the first field in this group. for (var d in this.tableSettings[group]) { diff --git a/core/misc/tableresponsive.js b/core/misc/tableresponsive.js index 3d1fbac..dd08929 100644 --- a/core/misc/tableresponsive.js +++ b/core/misc/tableresponsive.js @@ -7,100 +7,95 @@ "use strict"; - /** - * Attach the tableResponsive function to Drupal.behaviors. - */ - Drupal.behaviors.tableResponsive = { - attach: function (context, settings) { - $(context).find('table.responsive-enabled').once('tableresponsive', function () { - $(this).data("drupal-tableresponsive", new Drupal.tableResponsive(this)); - }); +/** + * Attach the tableResponsive function to Drupal.behaviors. + */ +Drupal.behaviors.tableResponsive = { + attach: function (context, settings) { + var $tables = $(context).find('table.responsive-enabled').once('tableresponsive'); + if ($tables.length) { + for (var i = 0, il = $tables.length; i < il; i++) { + TableResponsive.tables.push(new TableResponsive($tables[i])); + } } - }; - /** - * A responsive table hides columns at small screen sizes, leaving the most - * important columns visible to the end user. Users should not be prevented from - * accessing all columns, however. This class adds a toggle to a table with - * hidden columns that exposes the columns. Exposing the columns will likely - * break layouts, but it provides the user with a means to access data, which - * is a guiding principle of responsive design. - */ - Drupal.tableResponsive = function (table) { - var self = this; - this.$table = $(table); - this.table = this.$table.data('drupal-table'); - this.showText = Drupal.t('Show all columns'); - this.hideText = Drupal.t('Hide unimportant columns'); - // Store a reference to the header elements of the table so that the DOM is - // traversed only once to find them. - this.$headers = this.$table.find('th'); - // Build a link that will toggle the column visibility. - this.actionLink = { - 'text': this.showText, - 'attributes': { - 'title': Drupal.t('Expose table cells that were hidden to make the table fit within a small screen.'), - 'class': 'responsive-table-toggle', - 'aria-disabled': 'false' - }, - 'namespace': 'drupal-tableresponsive', - 'callback': $.proxy(this, 'eventhandlerToggleColumns') - }; - // Add the toggle to the table's control bar. - this.$columnToggle = this.table.addAction([this.actionLink]); - this.$columnToggle.data('drupal-tableresponsive', {}); - // Attach a resize handler to the window. - $(window) - .bind('resize.drupal-tableresponsive', Drupal.debounce($.proxy(this, 'eventhandlerEvaluateColumnVisibility'), 250)) - .triggerHandler('resize.drupal-tableresponsive'); - }; + } +}; + +/** + * A responsive table hides columns at small screen sizes, leaving the most + * important columns visible to the end user. Users should not be prevented from + * accessing all columns, however. This class adds a toggle to a table with + * hidden columns that exposes the columns. Exposing the columns will likely + * break layouts, but it provides the user with a means to access data, which + * is a guiding principle of responsive design. + */ +function TableResponsive (table) { + this.$table = $(table); + this.table = this.$table.data('drupal-table'); + this.showText = Drupal.t('Show all columns'); + this.hideText = Drupal.t('Hide unimportant columns'); + // Store a reference to the header elements of the table so that the DOM is + // traversed only once to find them. + this.$headers = this.$table.find('th'); + // Build a link that will toggle the column visibility. + + // Add a link before the table for users to show or hide weight columns. + this.$link = $('') + .attr({ + title: Drupal.t('Expose table cells that were hidden to make the table fit within a small screen.'), + 'aria-disabled': 'false' + }) + .on('click', $.proxy(this, 'eventhandlerToggleColumns')); + + this.$table.before($('
').append(this.$link)); + + // Attach a resize handler to the window. + $(window) + .on('resize.drupal-tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility')) + .trigger('resize.drupal-tableresponsive'); +} + +$.extend(TableResponsive, { + tables: [] +}); + /** * Associates an action link with the table that will show hidden columns. * Columns are assumed to be hidden if their header's display property is none * or if the visibility property is hidden. */ - Drupal.tableResponsive.prototype.eventhandlerEvaluateColumnVisibility = function (event) { - var self = this; - var $headers = this.$headers; - var $toggle = this.$columnToggle; - var $hiddenHeaders = $headers.filter('.advisable:hidden, .helpful:hidden'); - var hiddenLength = $hiddenHeaders.length; - var toggleData = $toggle.data('drupal-tableresponsive'); +$.extend(TableResponsive.prototype, { + eventhandlerEvaluateColumnVisibility: function (e) { + var sticky = +this.$link.attr('data-sticky'); + var hiddenLength = this.$headers.filter('.advisable:hidden, .helpful:hidden').length; // If the table has hidden columns, associate an action link with the table // to show the columns. if (hiddenLength > 0) { - $toggle - .show() - .attr('aria-disabled', 'false'); - + this.$link.show().text(this.showText).attr('aria-disabled', 'false'); } // When the toggle is sticky, its presence is maintained because the user has // interacted with it. This is necessary to keep the link visible if the user // adjusts screen size and changes the visibilty of columns. - if ((!('sticky' in toggleData) && hiddenLength === 0) || ('sticky' in toggleData && !toggleData.sticky && hiddenLength === 0)) { - $toggle - .hide() - .attr('aria-disabled', 'true'); - delete this.$columnToggle.data('drupal-tableresponsive').sticky; + if (!sticky && hiddenLength === 0) { + this.$link.hide().text(this.hideText).attr('aria-disabled', 'true'); } - }; + }, /** * Reveal hidden columns and hide any columns that were revealed because they were * previously hidden. */ - Drupal.tableResponsive.prototype.eventhandlerToggleColumns = function (event) { - event.preventDefault(); + eventhandlerToggleColumns: function (e) { + e.preventDefault(); var self = this; - var $headers = this.$headers; var $hiddenHeaders = this.$headers.filter('.advisable:hidden, .helpful:hidden'); this.$revealedCells = this.$revealedCells || $(); // Reveal hidden columns. if ($hiddenHeaders.length > 0) { $hiddenHeaders.each(function (index, element) { var $header = $(this); - var position = Number($header.prevAll('th').length); - $('tbody tr', this.$table).each(function (index, element) { - var $row = $(this); - var $cells = $row.find('td:eq(' + position + ')'); + var position = $header.prevAll('th').length; + self.$table.find('tbody tr').each(function () { + var $cells = $(this).find('td:eq(' + position + ')'); $cells.show(); // Keep track of the revealed cells, so they can be hidden later. self.$revealedCells = $().add(self.$revealedCells).add($cells); @@ -108,21 +103,16 @@ $header.show(); // Keep track of the revealed headers, so they can be hidden later. self.$revealedCells = $().add(self.$revealedCells).add($header); - - }); - this.$columnToggle.text(this.hideText); - this.$columnToggle.data('drupal-tableresponsive').sticky = true; + this.$link.text(this.hideText).attr('data-sticky', 1); } // Hide revealed columns. else { this.$revealedCells.hide(); - this.$columnToggle.text(this.showText); // Strip out display this.$revealedCells.each(function (index, element) { var $cell = $(this); - var style = $cell.attr('style'); - var properties = style.split(';'); + var properties = $cell.attr('style').split(';'); var newProps = []; // The columns should simply have the display table-cell property // removed, which the jQuery hide method does. The hide method @@ -132,7 +122,7 @@ // value from the style attribute. var match = /^display\s*\:\s*none$/; for (var i = 0; i < properties.length; i++) { - var prop = properties[i] + var prop = properties[i]; prop.trim(); // Find the display:none property and remove it. var isDisplayNone = match.exec(prop); @@ -144,11 +134,13 @@ // Return the rest of the style attribute values to the element. $cell.attr('style', newProps.join(';')); }); - delete this.$revealedCells; - this.$columnToggle.data('drupal-tableresponsive').sticky = false; + this.$link.text(this.showText).attr('data-sticky', 0); // Refresh the toggle link. - $(window) - .triggerHandler('resize.drupal-tableresponsive'); + $(window).trigger('resize.drupal-tableresponsive'); } - }; + } +}); + +Drupal.TableResponsive = TableResponsive; + })(jQuery); diff --git a/core/modules/system/system.module b/core/modules/system/system.module index 3b0bd13..93cb1dc 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -1253,15 +1253,6 @@ function system_library_info() { ), ); - // Drupal's debounce API. - $libraries['drupal.debounce'] = array( - 'title' => 'Drupal debounce API', - 'version' => VERSION, - 'js' => array( - 'core/misc/debounce.js' => array('group' => JS_LIBRARY), - ), - ); - // Drupal's progress indicator. $libraries['drupal.progress'] = array( 'title' => 'Drupal progress indicator', @@ -1306,15 +1297,6 @@ function system_library_info() { ), ); - // Drupal's table library. - $libraries['drupal.table'] = array( - 'title' => 'Drupal table API', - 'version' => VERSION, - 'js' => array( - 'core/misc/table.js' => array('group' => JS_LIBRARY,), - ), - ); - // Drupal's tableheader library. $libraries['drupal.tableheader'] = array( 'title' => 'Drupal tableheader API', @@ -1323,7 +1305,9 @@ function system_library_info() { 'core/misc/tableheader.js' => array('group' => JS_LIBRARY,), ), 'dependencies' => array( - array('system', 'drupal.table',), + array('system', 'jquery'), + array('system', 'drupal'), + array('system', 'jquery.once'), ), ); @@ -1339,8 +1323,7 @@ function system_library_info() { array('system', 'drupal'), array('system', 'drupal.settings'), array('system', 'jquery.once'), - array('system', 'jquery.cookie',), - array('system', 'drupal.table',), + array('system', 'jquery.cookie'), ), ); @@ -1352,8 +1335,9 @@ function system_library_info() { 'core/misc/tableresponsive.js' => array('group' => JS_LIBRARY,), ), 'dependencies' => array( - array('system', 'drupal.debounce',), - array('system', 'drupal.table',), + array('system', 'jquery'), + array('system', 'drupal'), + array('system', 'jquery.once'), ), );