user.permissions.es6.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /**
  2. * @file
  3. * User permission page behaviors.
  4. */
  5. (function($, Drupal) {
  6. /**
  7. * Shows checked and disabled checkboxes for inherited permissions.
  8. *
  9. * @type {Drupal~behavior}
  10. *
  11. * @prop {Drupal~behaviorAttach} attach
  12. * Attaches functionality to the permissions table.
  13. */
  14. Drupal.behaviors.permissions = {
  15. attach(context) {
  16. const self = this;
  17. $('table#permissions')
  18. .once('permissions')
  19. .each(function() {
  20. // On a site with many roles and permissions, this behavior initially
  21. // has to perform thousands of DOM manipulations to inject checkboxes
  22. // and hide them. By detaching the table from the DOM, all operations
  23. // can be performed without triggering internal layout and re-rendering
  24. // processes in the browser.
  25. const $table = $(this);
  26. let $ancestor;
  27. let method;
  28. if ($table.prev().length) {
  29. $ancestor = $table.prev();
  30. method = 'after';
  31. } else {
  32. $ancestor = $table.parent();
  33. method = 'append';
  34. }
  35. $table.detach();
  36. // Create dummy checkboxes. We use dummy checkboxes instead of reusing
  37. // the existing checkboxes here because new checkboxes don't alter the
  38. // submitted form. If we'd automatically check existing checkboxes, the
  39. // permission table would be polluted with redundant entries. This
  40. // is deliberate, but desirable when we automatically check them.
  41. const $dummy = $(Drupal.theme('checkbox'))
  42. .removeClass('form-checkbox')
  43. .addClass('dummy-checkbox js-dummy-checkbox')
  44. .attr('disabled', 'disabled')
  45. .attr('checked', 'checked')
  46. .attr(
  47. 'title',
  48. Drupal.t(
  49. 'This permission is inherited from the authenticated user role.',
  50. ),
  51. )
  52. .hide();
  53. $table
  54. .find('input[type="checkbox"]')
  55. .not('.js-rid-anonymous, .js-rid-authenticated')
  56. .addClass('real-checkbox js-real-checkbox')
  57. .after($dummy);
  58. // Initialize the authenticated user checkbox.
  59. $table
  60. .find('input[type=checkbox].js-rid-authenticated')
  61. .on('click.permissions', self.toggle)
  62. // .triggerHandler() cannot be used here, as it only affects the first
  63. // element.
  64. .each(self.toggle);
  65. // Re-insert the table into the DOM.
  66. $ancestor[method]($table);
  67. });
  68. },
  69. /**
  70. * Toggles all dummy checkboxes based on the checkboxes' state.
  71. *
  72. * If the "authenticated user" checkbox is checked, the checked and disabled
  73. * checkboxes are shown, the real checkboxes otherwise.
  74. */
  75. toggle() {
  76. const authCheckbox = this;
  77. const $row = $(this).closest('tr');
  78. // jQuery performs too many layout calculations for .hide() and .show(),
  79. // leading to a major page rendering lag on sites with many roles and
  80. // permissions. Therefore, we toggle visibility directly.
  81. $row.find('.js-real-checkbox').each(function() {
  82. this.style.display = authCheckbox.checked ? 'none' : '';
  83. });
  84. $row.find('.js-dummy-checkbox').each(function() {
  85. this.style.display = authCheckbox.checked ? '' : 'none';
  86. });
  87. },
  88. };
  89. })(jQuery, Drupal);