summaryrefslogtreecommitdiff
path: root/source/features/batch-mark-files-as-viewed.tsx
blob: dc691b1b91338fc976566009b7b776a8ae361815 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import select from 'select-dom';
import * as pageDetect from 'github-url-detection';
import debounceFn from 'debounce-fn';
import delegate, {DelegateEvent} from 'delegate-it';

import features from '../feature-manager.js';
import clickAll from '../helpers/click-all.js';
import showToast from '../github-helpers/toast.js';
import getItemsBetween from '../helpers/get-items-between.js';
import onAbort from '../helpers/abort-controller.js';

let previousFile: HTMLElement | undefined;
let runningBatch = false;

function remember(event: DelegateEvent): void {
	// Only remember if the user clicked it. `isTrusted` doesn't work because `remember` is called on a fake `submit` event
	if (!runningBatch) {
		previousFile = event.delegateTarget.closest('.js-file')!;
	}
}

function isChecked(file: HTMLElement): boolean {
	return file.querySelector('input.js-reviewed-checkbox')!.checked;
}

// A single click is somehow causing two separate trusted `click` events, so it needs to be debounced
const batchToggle = debounceFn((event: DelegateEvent<MouseEvent, HTMLFormElement>): void => {
	if (!event.shiftKey) {
		return;
	}

	event.stopImmediatePropagation();

	const files = select.all('.js-file');
	const thisFile = event.delegateTarget.closest('.js-file')!;
	const isThisBeingFileChecked = !isChecked(thisFile); // Flip it because the value hasn't changed yet

	runningBatch = true;
	const selectedFiles = getItemsBetween(files, previousFile, thisFile);
	for (const file of selectedFiles) {
		if (file !== thisFile && isChecked(file) !== isThisBeingFileChecked) {
			select('.js-reviewed-checkbox', file)!.click();
		}
	}

	runningBatch = false;
}, {
	before: true,
	after: false,
});

function markAsViewedSelector(target: HTMLElement): string {
	const checked = isChecked(target) ? ':not([checked])' : '[checked]';
	return '.js-reviewed-checkbox' + checked;
}

const markAsViewed = clickAll(markAsViewedSelector);

// A single click is somehow causing two separate trusted `click` events, so it needs to be debounced
const onAltClick = debounceFn((event: DelegateEvent<MouseEvent, HTMLInputElement>): void => {
	if (!event.altKey || !event.isTrusted) {
		return;
	}

	const newState = isChecked(event.delegateTarget) ? 'unviewed' : 'viewed';
	void showToast(async () => {
		markAsViewed(event);
	}, {
		message: `Marking visible files as ${newState}`,
		doneMessage: `Files marked as ${newState}`,
	});
}, {
	before: true,
	after: false,
});

function avoidSelectionOnShiftClick(event: MouseEvent): void {
	if (event.shiftKey) {
		event.preventDefault();
	}
}

function init(signal: AbortSignal): void {
	delegate('.js-reviewed-toggle', 'click', onAltClick, {signal});
	delegate('.js-reviewed-toggle', 'click', batchToggle, {signal});
	delegate('.js-reviewed-toggle', 'mousedown', avoidSelectionOnShiftClick, {signal});
	delegate('.js-toggle-user-reviewed-file-form', 'submit', remember, {signal});
	onAbort(signal, () => {
		previousFile = undefined;
	});
}

void features.add(import.meta.url, {
	include: [
		pageDetect.isPRFiles,
	],
	init,
});

/*

Test URLs:

https://github.com/refined-github/sandbox/pull/55/files

Use this style to avoid layout shift while testing:

```css
table {display: none !important;}
```

*/