git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Forbid jQuery .prop and fix related issues (#29832)

Browse source 
The issue checkbox code received a few more cleanups and I specifically
tested it. The other changes are trivial. Also, I checked the cases for
how many elements match the jQuery selection to determine querySelector
vs. querySelectorAll.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 21fe512aac42c9ce3440b8eaae6b2cb2116a0e50)
This commit is contained in:
silverwind 2024-03-16 16:08:10 +01:00 • committed by Earl Warren
parent c1b6182625
commit 18256b024e
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
6 changed files with 37 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

36
web_src/js/features/repo-issue-list.js
View file

@ -1,6 +1,6 @@
import $ from 'jquery';
import {updateIssuesMeta} from './repo-issue.js';
import {toggleElem, hideElem} from '../utils/dom.js';
import {toggleElem, hideElem, isElemHidden} from '../utils/dom.js';
import {htmlEscape} from 'escape-goat';
import {confirmModal} from './comp/ConfirmModal.js';
import {showErrorToast} from '../modules/toast.js';
@ -8,32 +8,42 @@ import {createSortable} from '../modules/sortable.js';
import {DELETE, POST} from '../modules/fetch.js';
function initRepoIssueListCheckboxes() {
const $issueSelectAll = $('.issue-checkbox-all');
const $issueCheckboxes = $('.issue-checkbox');
const issueSelectAll = document.querySelector('.issue-checkbox-all');
const issueCheckboxes = document.querySelectorAll('.issue-checkbox');
const syncIssueSelectionState = () => {
const $checked = $issueCheckboxes.filter(':checked');
const anyChecked = $checked.length !== 0;
const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
const checkedCheckboxes = Array.from(issueCheckboxes).filter((el) => el.checked);
const anyChecked = Boolean(checkedCheckboxes.length);
const allChecked = anyChecked && checkedCheckboxes.length === issueCheckboxes.length;
if (allChecked) {
$issueSelectAll.prop({'checked': true, 'indeterminate': false});
issueSelectAll.checked = true;
issueSelectAll.indeterminate = false;
} else if (anyChecked) {
$issueSelectAll.prop({'checked': false, 'indeterminate': true});
issueSelectAll.checked = false;
issueSelectAll.indeterminate = true;
} else {
$issueSelectAll.prop({'checked': false, 'indeterminate': false});
issueSelectAll.checked = false;
issueSelectAll.indeterminate = false;
}
// if any issue is selected, show the action panel, otherwise show the filter panel
toggleElem($('#issue-filters'), !anyChecked);
toggleElem($('#issue-actions'), anyChecked);
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
$('#issue-filters, #issue-actions').filter(':visible').find('.issue-list-toolbar-left').prepend($issueSelectAll);
const panels = document.querySelectorAll('#issue-filters, #issue-actions');
const visiblePanel = Array.from(panels).find((el) => !isElemHidden(el));
const toolbarLeft = visiblePanel.querySelector('.issue-list-toolbar-left');
toolbarLeft.prepend(issueSelectAll);
};
$issueCheckboxes.on('change', syncIssueSelectionState);
for (const el of issueCheckboxes) {
el.addEventListener('change', syncIssueSelectionState);
}
$issueSelectAll.on('change', () => {
$issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
issueSelectAll.addEventListener('change', () => {
for (const el of issueCheckboxes) {
el.checked = issueSelectAll.checked;
}
syncIssueSelectionState();
});