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
|
/**
* Interactive behavior for duplicate reports.
*/
import { $, $$, showEl } from './utils/dom';
const selectedDupeReports = [];
function setupDupeReports() {
const [ onion, slider ] = $$('.onion-skin__image, .onion-skin__slider');
const swipe = $('.swipe__image');
if (swipe) setupSwipe(swipe);
if (onion) setupOnionSkin(onion, slider);
setupMassSelection();
}
function setupSwipe(swipe) {
const [ clip, divider ] = $$('#clip rect, #divider', swipe);
const { width } = swipe.viewBox.baseVal;
function moveDivider({ clientX }) {
// Move center to cursor
const rect = swipe.getBoundingClientRect();
const newX = (clientX - rect.left) * (width / rect.width);
divider.setAttribute('x', newX);
clip.setAttribute('width', newX);
}
swipe.addEventListener('mousemove', moveDivider);
}
function setupOnionSkin(onion, slider) {
const target = $('#target', onion);
function setOpacity() {
target.setAttribute('opacity', slider.value);
}
setOpacity();
slider.addEventListener('input', setOpacity);
}
function setupMassSelection() {
const submitForm = $(".js-mass-dupe-submit");
if (!submitForm) return;
const submitButton = $('a', submitForm);
const hiddenField = $('input[name=duplicate_report_ids]', submitForm);
submitButton.addEventListener('click', evt => {
submitForm.submit();
evt.preventDefault();
});
[].forEach.call($$(".js-mass-dupe-reject"), elem => {
elem.addEventListener('change', evt => {
const dupeReportId = evt.currentTarget.dataset.dupeReportId;
if (evt.currentTarget.checked) {
selectedDupeReports.push(dupeReportId);
} else {
selectedDupeReports.splice(selectedDupeReports.indexOf(dupeReportId), 1);
}
hiddenField.setAttribute('value', selectedDupeReports.join(','));
});
showEl(elem);
});
showEl(submitForm);
}
export { setupDupeReports };
|
