tableresponsive.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal, window) {
  8. Drupal.behaviors.tableResponsive = {
  9. attach: function attach(context, settings) {
  10. var $tables = $(context).find('table.responsive-enabled').once('tableresponsive');
  11. if ($tables.length) {
  12. var il = $tables.length;
  13. for (var i = 0; i < il; i++) {
  14. TableResponsive.tables.push(new TableResponsive($tables[i]));
  15. }
  16. }
  17. }
  18. };
  19. function TableResponsive(table) {
  20. this.table = table;
  21. this.$table = $(table);
  22. this.showText = Drupal.t('Show all columns');
  23. this.hideText = Drupal.t('Hide lower priority columns');
  24. this.$headers = this.$table.find('th');
  25. 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'));
  26. this.$table.before($('<div class="tableresponsive-toggle-columns"></div>').append(this.$link));
  27. $(window).on('resize.tableresponsive', $.proxy(this, 'eventhandlerEvaluateColumnVisibility')).trigger('resize.tableresponsive');
  28. }
  29. $.extend(TableResponsive, {
  30. tables: []
  31. });
  32. $.extend(TableResponsive.prototype, {
  33. eventhandlerEvaluateColumnVisibility: function eventhandlerEvaluateColumnVisibility(e) {
  34. var pegged = parseInt(this.$link.data('pegged'), 10);
  35. var hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
  36. if (hiddenLength > 0) {
  37. this.$link.show().text(this.showText);
  38. }
  39. if (!pegged && hiddenLength === 0) {
  40. this.$link.hide().text(this.hideText);
  41. }
  42. },
  43. eventhandlerToggleColumns: function eventhandlerToggleColumns(e) {
  44. e.preventDefault();
  45. var self = this;
  46. var $hiddenHeaders = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden');
  47. this.$revealedCells = this.$revealedCells || $();
  48. if ($hiddenHeaders.length > 0) {
  49. $hiddenHeaders.each(function (index, element) {
  50. var $header = $(this);
  51. var position = $header.prevAll('th').length;
  52. self.$table.find('tbody tr').each(function () {
  53. var $cells = $(this).find('td').eq(position);
  54. $cells.show();
  55. self.$revealedCells = $().add(self.$revealedCells).add($cells);
  56. });
  57. $header.show();
  58. self.$revealedCells = $().add(self.$revealedCells).add($header);
  59. });
  60. this.$link.text(this.hideText).data('pegged', 1);
  61. } else {
  62. this.$revealedCells.hide();
  63. this.$revealedCells.each(function (index, element) {
  64. var $cell = $(this);
  65. var properties = $cell.attr('style').split(';');
  66. var newProps = [];
  67. var match = /^display\s*:\s*none$/;
  68. for (var i = 0; i < properties.length; i++) {
  69. var prop = properties[i];
  70. prop.trim();
  71. var isDisplayNone = match.exec(prop);
  72. if (isDisplayNone) {
  73. continue;
  74. }
  75. newProps.push(prop);
  76. }
  77. $cell.attr('style', newProps.join(';'));
  78. });
  79. this.$link.text(this.showText).data('pegged', 0);
  80. $(window).trigger('resize.tableresponsive');
  81. }
  82. }
  83. });
  84. Drupal.TableResponsive = TableResponsive;
  85. })(jQuery, Drupal, window);