* 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.
*
// 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.'))
+ 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));
+ 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'))
+ .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.<Drupal.TableResponsive>}
- */
- tables: [],
- });
+ /**
+ * 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().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);
projects / yaffs-website / blobdiff