PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-30 14:57:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Convert duplicate report comparison scripts to TypeScript

Browse source
This commit is contained in:
Luna D 2024-06-06 20:42:04 -04:00 committed by Liam
parent d8fd98ea27
commit 7a6015b549
2 changed files with 42 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
assets/js/duplicate_reports.js
View file

@ -1,42 +0,0 @@
/**
* Interactive behavior for duplicate reports.
*/
import { $, $$ } from './utils/dom';
function setupDupeReports() {
const [ onion, slider ] = $$('.onion-skin__image, .onion-skin__slider');
const swipe = $('.swipe__image');
if (swipe) setupSwipe(swipe);
if (onion) setupOnionSkin(onion, slider);
}
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);
}
export { setupDupeReports };

42
assets/js/duplicate_reports.ts Normal file
View file

@ -0,0 +1,42 @@
/**
* Interactive behavior for duplicate reports.
*/
import { assertNotNull } from './utils/assert';
import { $, $$ } from './utils/dom';
export function setupDupeReports() {
const onion = $<SVGSVGElement>('.onion-skin__image');
const slider = $<HTMLInputElement>('.onion-skin__slider');
const swipe = $<SVGSVGElement>('.swipe__image');
if (swipe) setupSwipe(swipe);
if (onion && slider) setupOnionSkin(onion, slider);
}
function setupSwipe(swipe: SVGSVGElement) {
const [ clip, divider ] = $$<SVGRectElement>('#clip rect, #divider', swipe);
const { width } = swipe.viewBox.baseVal;
function moveDivider({ clientX }: MouseEvent) {
// Move center to cursor
const rect = swipe.getBoundingClientRect();
const newX = (clientX - rect.left) * (width / rect.width);
divider.setAttribute('x', newX.toString());
clip.setAttribute('width', newX.toString());
}
swipe.addEventListener('mousemove', moveDivider);
}
function setupOnionSkin(onion: SVGSVGElement, slider: HTMLInputElement) {
const target = assertNotNull($<SVGImageElement>('#target', onion));
function setOpacity() {
target.setAttribute('opacity', slider.value);
}
setOpacity();
slider.addEventListener('input', setOpacity);
}