/**
* @file
* User permission page behaviors.
*/
(function ($, Drupal) {
/**
* Shows checked and disabled checkboxes for inherited permissions.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches functionality to the permissions table.
*/
Drupal.behaviors.permissions = {
attach(context) {
const self = this;
$('table#permissions')
.once('permissions')
.each(function () {
// On a site with many roles and permissions, this behavior initially
// has to perform thousands of DOM manipulations to inject checkboxes
// and hide them. By detaching the table from the DOM, all operations
// can be performed without triggering internal layout and re-rendering
// processes in the browser.
const $table = $(this);
let $ancestor;
let method;
if ($table.prev().length) {
$ancestor = $table.prev();
method = 'after';
} else {
$ancestor = $table.parent();
method = 'append';
}
$table.detach();
// Create dummy checkboxes. We use dummy checkboxes instead of reusing
// the existing checkboxes here because new checkboxes don't alter the
// submitted form. If we'd automatically check existing checkboxes, the
// permission table would be polluted with redundant entries. This
// is deliberate, but desirable when we automatically check them.
const $dummy = $(Drupal.theme('checkbox'))
.removeClass('form-checkbox')
.addClass('dummy-checkbox js-dummy-checkbox')
.attr('disabled', 'disabled')
.attr('checked', 'checked')
.attr(
'title',
Drupal.t(
'This permission is inherited from the authenticated user role.',
),
)
.hide();
$table
.find('input[type="checkbox"]')
.not('.js-rid-anonymous, .js-rid-authenticated')
.addClass('real-checkbox js-real-checkbox')
.after($dummy);
// Initialize the authenticated user checkbox.
$table
.find('input[type=checkbox].js-rid-authenticated')
.on('click.permissions', self.toggle)
// .triggerHandler() cannot be used here, as it only affects the first
// element.
.each(self.toggle);
// Re-insert the table into the DOM.
$ancestor[method]($table);
});
},
/**
* Toggles all dummy checkboxes based on the checkboxes' state.
*
* If the "authenticated user" checkbox is checked, the checked and disabled
* checkboxes are shown, the real checkboxes otherwise.
*/
toggle() {
const authCheckbox = this;
const $row = $(this).closest('tr');
// jQuery performs too many layout calculations for .hide() and .show(),
// leading to a major page rendering lag on sites with many roles and
// permissions. Therefore, we toggle visibility directly.
$row.find('.js-real-checkbox').each(function () {
this.style.display = authCheckbox.checked ? 'none' : '';
});
$row.find('.js-dummy-checkbox').each(function () {
this.style.display = authCheckbox.checked ? '' : 'none';
});
},
};
})(jQuery, Drupal);