94 lines
3.3 KiB
JavaScript
94 lines
3.3 KiB
JavaScript
|
/**
|
||
|
|
* @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 = $(
|
||
|
|
'<input type="checkbox" class="dummy-checkbox js-dummy-checkbox" disabled="disabled" 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);
|