forgejo/web_src/js/features/common-issue.js
silverwind 525b7382d3
Convert issue list checkboxes to native (#23596)
Use native instead of fomantic checkboxes in issue list. Benefits
include no more JS pop-in on load and perfect a11y.

Before, with JS pop-in:

<img width="92" alt="Screenshot 2023-03-20 at 17 02 02"
src="https://user-images.githubusercontent.com/115237/226398955-99029a1c-1150-449c-821b-e4165e7446a8.png">

After, Firefox on macOS:

<img width="126" alt="Screenshot 2023-03-20 at 17 01 26"
src="https://user-images.githubusercontent.com/115237/226399018-58df2c32-c2b2-4c78-b7df-7b76523abe21.png">

After, Chrome on macOS:

<img width="79" alt="Screenshot 2023-03-20 at 17 01 42"
src="https://user-images.githubusercontent.com/115237/226399074-947e6279-8dc3-42c2-90b5-b106c471b23d.png">

I opted to not do styling yet but I see that the inconsistency between
browsers may already be reason enough on doing it. I think if we style
them, there should be one global style, including markdown ones which
currently have custom styling.
2023-03-30 11:02:47 -04:00

59 lines
2 KiB
JavaScript

import $ from 'jquery';
import {updateIssuesMeta} from './repo-issue.js';
import {toggleElem} from '../utils/dom.js';
export function initCommonIssue() {
const $issueSelectAll = $('.issue-checkbox-all');
const $issueCheckboxes = $('.issue-checkbox');
const syncIssueSelectionState = () => {
const $checked = $issueCheckboxes.filter(':checked');
const anyChecked = $checked.length !== 0;
const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
if (allChecked) {
$issueSelectAll.prop({'checked': true, 'indeterminate': false});
} else if (anyChecked) {
$issueSelectAll.prop({'checked': false, 'indeterminate': true});
} else {
$issueSelectAll.prop({'checked': false, '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('.column:first').prepend($issueSelectAll);
};
$issueCheckboxes.on('change', syncIssueSelectionState);
$issueSelectAll.on('change', () => {
$issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
syncIssueSelectionState();
});
$('.issue-action').on('click', async function (e) {
e.preventDefault();
let action = this.getAttribute('data-action');
let elementId = this.getAttribute('data-element-id');
const url = this.getAttribute('data-url');
const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
return el.getAttribute('data-issue-id');
}).get().join(',');
if (elementId === '0' && url.slice(-9) === '/assignee') {
elementId = '';
action = 'clear';
}
if (action === 'toggle' && e.altKey) {
action = 'toggle-alt';
}
updateIssuesMeta(
url,
action,
issueIDs,
elementId
).then(() => {
window.location.reload();
});
});
}