diff options
Diffstat (limited to 'core/misc/tableresponsive.es6.js')
-rw-r--r-- | core/misc/tableresponsive.es6.js | 194 |
1 files changed, 0 insertions, 194 deletions
diff --git a/core/misc/tableresponsive.es6.js b/core/misc/tableresponsive.es6.js deleted file mode 100644 index 840bbf0e8cb..00000000000 --- a/core/misc/tableresponsive.es6.js +++ /dev/null @@ -1,194 +0,0 @@ -/** - * @file - * Responsive table functionality. - */ - -(function ($, Drupal, window) { - /** - * 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'); - } - - /** - * Attach the tableResponsive function to {@link Drupal.behaviors}. - * - * @type {Drupal~behavior} - * - * @prop {Drupal~behaviorAttach} attach - * Attaches tableResponsive functionality. - */ - Drupal.behaviors.tableResponsive = { - attach(context, settings) { - once('tableresponsive', 'table.responsive-enabled', context).forEach( - (table) => { - TableResponsive.tables.push(new TableResponsive(table)); - }, - ); - }, - }; - - /** - * Extend the TableResponsive function with a list of managed tables. - */ - $.extend( - TableResponsive, - /** @lends Drupal.TableResponsive */ { - /** - * Store all created instances. - * - * @type {Array.<Drupal.TableResponsive>} - */ - tables: [], - }, - ); - - /** - * Associates an action link with the table that will show hidden columns. - * - * Columns are assumed to be hidden if their header has the class priority-low - * or priority-medium. - */ - $.extend( - TableResponsive.prototype, - /** @lends Drupal.TableResponsive# */ { - /** - * @param {jQuery.Event} e - * The event triggered. - */ - eventhandlerEvaluateColumnVisibility(e) { - const pegged = parseInt(this.$link.data('pegged'), 10); - const hiddenLength = this.$headers.filter( - '.priority-medium:hidden, .priority-low:hidden', - ).length; - // If the table has hidden columns, associate an action link with the - // table to show the columns. - if (hiddenLength > 0) { - this.$link.show(); - this.$link[0].textContent = this.showText; - } - // When the toggle is pegged, 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 visibility of columns. - if (!pegged && hiddenLength === 0) { - this.$link.hide(); - this.$link[0].textContent = this.hideText; - } - }, - - /** - * Toggle the visibility of columns based on their priority. - * - * Columns are classed with either 'priority-low' or 'priority-medium'. - * - * @param {jQuery.Event} e - * The event triggered. - */ - eventhandlerToggleColumns(e) { - e.preventDefault(); - const self = this; - const $hiddenHeaders = this.$headers.filter( - '.priority-medium:hidden, .priority-low:hidden', - ); - this.$revealedCells = this.$revealedCells || $(); - // Reveal hidden columns. - if ($hiddenHeaders.length > 0) { - $hiddenHeaders.each(function (index, element) { - const $header = $(this); - const position = $header.prevAll('th').length; - self.$table.find('tbody tr').each(function () { - const $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); - }); - $header.show(); - // Keep track of the revealed headers, so they can be hidden later. - self.$revealedCells = $().add(self.$revealedCells).add($header); - }); - this.$link[0].textContent = this.hideText; - this.$link.data('pegged', 1); - } - // Hide revealed columns. - else { - this.$revealedCells.hide(); - // Strip the 'display:none' declaration from the style attributes of - // the table cells that .hide() added. - this.$revealedCells.each(function (index, element) { - const $cell = $(this); - const properties = $cell.attr('style').split(';'); - const newProps = []; - // The hide method adds display none to the element. The element - // should be returned to the same state it was in before the columns - // were revealed, so it is necessary to remove the display none value - // from the style attribute. - const match = /^display\s*:\s*none$/; - for (let i = 0; i < properties.length; i++) { - const prop = properties[i]; - prop.trim(); - // Find the display:none property and remove it. - const isDisplayNone = match.exec(prop); - if (isDisplayNone) { - continue; - } - newProps.push(prop); - } - // Return the rest of the style attribute values to the element. - $cell.attr('style', newProps.join(';')); - }); - this.$link[0].textContent = this.showText; - this.$link.data('pegged', 0); - // Refresh the toggle link. - $(window).trigger('resize.tableresponsive'); - } - }, - }, - ); - - // Make the TableResponsive object available in the Drupal namespace. - Drupal.TableResponsive = TableResponsive; -})(jQuery, Drupal, window); |