Use querySelector over alternative DOM methods (#31280)

As per
https://github.com/go-gitea/gitea/pull/30115#discussion_r1626060164,
prefer `querySelector` by enabling
[`unicorn/prefer-query-selector`](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-query-selector.md)
and autofixing all except 10 issues.

According to
[this](https://old.reddit.com/r/learnjavascript/comments/i0f5o8/performance_of_getelementbyid_vs_queryselector/),
querySelector may be faster as well, so it's a win-win.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2024-06-10 22:49:33 +02:00 committed by GitHub
parent a2304cb163
commit 507fbf4c3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
47 changed files with 165 additions and 168 deletions

View file

@ -6,7 +6,7 @@ import {POST} from '../../modules/fetch.js';
const {appSubUrl} = window.config;
function onSecurityProtocolChange() {
if (Number(document.getElementById('security_protocol')?.value) > 0) {
if (Number(document.querySelector('#security_protocol')?.value) > 0) {
showElem('.has-tls');
} else {
hideElem('.has-tls');
@ -21,34 +21,34 @@ export function initAdminCommon() {
// New user
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
document.getElementById('login_type')?.addEventListener('change', function () {
document.querySelector('#login_type')?.addEventListener('change', function () {
if (this.value?.substring(0, 1) === '0') {
document.getElementById('user_name')?.removeAttribute('disabled');
document.getElementById('login_name')?.removeAttribute('required');
document.querySelector('#user_name')?.removeAttribute('disabled');
document.querySelector('#login_name')?.removeAttribute('required');
hideElem('.non-local');
showElem('.local');
document.getElementById('user_name')?.focus();
document.querySelector('#user_name')?.focus();
if (this.getAttribute('data-password') === 'required') {
document.getElementById('password')?.setAttribute('required', 'required');
document.querySelector('#password')?.setAttribute('required', 'required');
}
} else {
if (document.querySelector('.admin.edit.user')) {
document.getElementById('user_name')?.setAttribute('disabled', 'disabled');
document.querySelector('#user_name')?.setAttribute('disabled', 'disabled');
}
document.getElementById('login_name')?.setAttribute('required', 'required');
document.querySelector('#login_name')?.setAttribute('required', 'required');
showElem('.non-local');
hideElem('.local');
document.getElementById('login_name')?.focus();
document.querySelector('#login_name')?.focus();
document.getElementById('password')?.removeAttribute('required');
document.querySelector('#password')?.removeAttribute('required');
}
});
}
function onUsePagedSearchChange() {
const searchPageSizeElements = document.querySelectorAll('.search-page-size');
if (document.getElementById('use_paged_search').checked) {
if (document.querySelector('#use_paged_search').checked) {
showElem('.search-page-size');
for (const el of searchPageSizeElements) {
el.querySelector('input')?.setAttribute('required', 'required');
@ -67,7 +67,7 @@ export function initAdminCommon() {
input.removeAttribute('required');
}
const provider = document.getElementById('oauth2_provider').value;
const provider = document.querySelector('#oauth2_provider').value;
switch (provider) {
case 'openidConnect':
document.querySelector('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
@ -91,19 +91,19 @@ export function initAdminCommon() {
}
function onOAuth2UseCustomURLChange(applyDefaultValues) {
const provider = document.getElementById('oauth2_provider').value;
const provider = document.querySelector('#oauth2_provider').value;
hideElem('.oauth2_use_custom_url_field');
for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
input.removeAttribute('required');
}
const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
if (elProviderCustomUrlSettings && document.getElementById('oauth2_use_custom_url').checked) {
if (elProviderCustomUrlSettings && document.querySelector('#oauth2_use_custom_url').checked) {
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
if (applyDefaultValues) {
document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
document.querySelector(`#oauth2_${custom}`).value = document.querySelector(`#${provider}_${custom}`).value;
}
const customInput = document.getElementById(`${provider}_${custom}`);
const customInput = document.querySelector(`#${provider}_${custom}`);
if (customInput && customInput.getAttribute('data-available') === 'true') {
for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
input.setAttribute('required', 'required');
@ -115,12 +115,12 @@ export function initAdminCommon() {
}
function onEnableLdapGroupsChange() {
toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
toggleElem(document.querySelector('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
}
// New authentication
if (document.querySelector('.admin.new.authentication')) {
document.getElementById('auth_type')?.addEventListener('change', function () {
document.querySelector('#auth_type')?.addEventListener('change', function () {
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
for (const input of document.querySelectorAll('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
@ -180,25 +180,25 @@ export function initAdminCommon() {
}
});
$('#auth_type').trigger('change');
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
}
// Edit authentication
if (document.querySelector('.admin.edit.authentication')) {
const authType = document.getElementById('auth_type')?.value;
const authType = document.querySelector('#auth_type')?.value;
if (authType === '2' || authType === '5') {
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
onEnableLdapGroupsChange();
if (authType === '2') {
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
}
} else if (authType === '6') {
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
onOAuth2Change(false);
}
}
@ -206,13 +206,13 @@ export function initAdminCommon() {
if (document.querySelector('.admin.authentication')) {
$('#auth_name').on('input', function () {
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
}).trigger('input');
}
// Notice
if (document.querySelector('.admin.notice')) {
const detailModal = document.getElementById('detail-modal');
const detailModal = document.querySelector('#detail-modal');
// Attach view detail modals
$('.view-detail').on('click', function () {
@ -244,7 +244,7 @@ export function initAdminCommon() {
break;
}
});
document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
document.querySelector('#delete-selection')?.addEventListener('click', async function (e) {
e.preventDefault();
this.classList.add('is-loading', 'disabled');
const data = new FormData();