- /**
- * The TableResponsive object optimizes table presentation for screen size.
- *
- * 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.
- *
- * @constructor Drupal.TableResponsive
- *
- * @param {HTMLElement} table
- * The table element to initialize the responsive table on.
- */
- function TableResponsive(table) {
- this.table = table;
- this.$table = $(table);
- this.showText = Drupal.t('Show all columns');
- this.hideText = Drupal.t('Hide lower priority 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');
- // Add a link before the table for users to show or hide weight columns.
- this.$link = $('<button type="button" class="link tableresponsive-toggle"></button>')
- .attr('title', Drupal.t('Show table cells that were hidden to make the table fit within a small screen.'))
- .on('click', $.proxy(this, 'eventhandlerToggleColumns'));
-
- this.$table.before($('<div class="tableresponsive-toggle-columns"></div>').append(this.$link));
-
- // Attach a resize handler to the window.
- $(window)
- .on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility'))
- .trigger('resize.tableresponsive');
- }
-
- /**
- * Extend the TableResponsive function with a list of managed tables.
- */
- $.extend(TableResponsive, /** @lends Drupal.TableResponsive */{
-
- /**
- * Store all created instances.
- *
- * @type {Array.<Drupal.TableResponsive>}
- */