X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmisc%2Ftableresponsive.es6.js;fp=web%2Fcore%2Fmisc%2Ftableresponsive.es6.js;h=c55c0f59cfda2b883d4f80545f5080e78e203ec9;hp=8d1ae0115e77f647a8a02592cce076e42eedee34;hb=0bf8d09d2542548982e81a441b1f16e75873a04f;hpb=74df008bdbb3a11eeea356744f39b802369bda3c diff --git a/web/core/misc/tableresponsive.es6.js b/web/core/misc/tableresponsive.es6.js index 8d1ae0115..c55c0f59c 100644 --- a/web/core/misc/tableresponsive.es6.js +++ b/web/core/misc/tableresponsive.es6.js @@ -3,27 +3,7 @@ * Responsive table functionality. */ -(function ($, Drupal, window) { - /** - * Attach the tableResponsive function to {@link Drupal.behaviors}. - * - * @type {Drupal~behavior} - * - * @prop {Drupal~behaviorAttach} attach - * Attaches tableResponsive functionality. - */ - Drupal.behaviors.tableResponsive = { - attach(context, settings) { - const $tables = $(context).find('table.responsive-enabled').once('tableresponsive'); - if ($tables.length) { - const il = $tables.length; - for (let i = 0; i < il; i++) { - TableResponsive.tables.push(new TableResponsive($tables[i])); - } - } - }, - }; - +(function($, Drupal, window) { /** * The TableResponsive object optimizes table presentation for screen size. * @@ -48,30 +28,68 @@ // 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 = $('') - .attr('title', Drupal.t('Show table cells that were hidden to make the table fit within a small screen.')) + this.$link = $( + '', + ) + .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($('
').append(this.$link)); + this.$table.before( + $('
').append( + this.$link, + ), + ); // Attach a resize handler to the window. $(window) - .on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility')) + .on( + 'resize.tableresponsive', + $.proxy(this, 'eventhandlerEvaluateColumnVisibility'), + ) .trigger('resize.tableresponsive'); } /** - * Extend the TableResponsive function with a list of managed tables. + * Attach the tableResponsive function to {@link Drupal.behaviors}. + * + * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Attaches tableResponsive functionality. */ - $.extend(TableResponsive, /** @lends Drupal.TableResponsive */{ + Drupal.behaviors.tableResponsive = { + attach(context, settings) { + const $tables = $(context) + .find('table.responsive-enabled') + .once('tableresponsive'); + if ($tables.length) { + const il = $tables.length; + for (let i = 0; i < il; i++) { + TableResponsive.tables.push(new TableResponsive($tables[i])); + } + } + }, + }; - /** - * Store all created instances. - * - * @type {Array.} - */ - tables: [], - }); + /** + * Extend the TableResponsive function with a list of managed tables. + */ + $.extend( + TableResponsive, + /** @lends Drupal.TableResponsive */ { + /** + * Store all created instances. + * + * @type {Array.} + */ + tables: [], + }, + ); /** * Associates an action link with the table that will show hidden columns. @@ -79,92 +97,104 @@ * 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().text(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().text(this.hideText); - } - }, + $.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().text(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().text(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); + /** + * 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); }); - $header.show(); - // Keep track of the revealed headers, so they can be hidden later. - self.$revealedCells = $().add(self.$revealedCells).add($header); - }); - this.$link.text(this.hideText).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; + this.$link.text(this.hideText).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); } - newProps.push(prop); - } - // Return the rest of the style attribute values to the element. - $cell.attr('style', newProps.join(';')); - }); - this.$link.text(this.showText).data('pegged', 0); - // Refresh the toggle link. - $(window).trigger('resize.tableresponsive'); - } + // Return the rest of the style attribute values to the element. + $cell.attr('style', newProps.join(';')); + }); + this.$link.text(this.showText).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)); +})(jQuery, Drupal, window);