PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-27 13:47:58 +01:00
Code Issues Projects Releases Packages Wiki Activity

convert draggable utils to typescript

Browse source
This commit is contained in:
SeinopSys 2022-03-25 22:34:08 +01:00 committed by Luna D
parent 0628eb0c23
commit 7f744a2a46
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
3 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/js/match_query.js
View file

@ -874,7 +874,4 @@ SearchAST.prototype.dumpTree = function() {
return retStrArr.join('\n');
};
// Force module handling for Jest, can be removed after TypeScript migration
export {};
export default parseSearch;

4
assets/js/utils/__tests__/draggable.spec.ts
View file

@ -269,7 +269,7 @@ describe('Draggable Utilities', () => {
initDraggables();
const mockEvent = createDragEvent('dragstart');
const documentClosestSpy = jest.spyOn(mockDraggable, 'closest').mockReturnValue(null);
const draggableClosestSpy = jest.spyOn(mockDraggable, 'closest').mockReturnValue(null);
try {
fireEvent(mockDraggable, mockEvent);
@ -277,7 +277,7 @@ describe('Draggable Utilities', () => {
expect(mockEvent.dataTransfer?.effectAllowed).toBeFalsy();
}
finally {
documentClosestSpy.mockRestore();
draggableClosestSpy.mockRestore();
}
});
});

44
assets/js/utils/draggable.js → assets/js/utils/draggable.ts
View file

@ -1,11 +1,13 @@
import { $$ } from './dom';
let dragSrcEl;
let dragSrcEl: HTMLElement | undefined;
function dragStart(event, target) {
function dragStart(event: DragEvent, target: HTMLElement) {
target.classList.add('dragging');
dragSrcEl = target;
if (!event.dataTransfer) return;
if (event.dataTransfer.items.length === 0) {
event.dataTransfer.setData('text/plain', '');
}
@ -13,30 +15,34 @@ function dragStart(event, target) {
event.dataTransfer.effectAllowed = 'move';
}
function dragOver(event) {
function dragOver(event: DragEvent) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move';
}
}
function dragEnter(event, target) {
function dragEnter(event: DragEvent, target: HTMLElement) {
target.classList.add('over');
}
function dragLeave(event, target) {
function dragLeave(event: DragEvent, target: HTMLElement) {
target.classList.remove('over');
}
function drop(event, target) {
function drop(event: DragEvent, target: HTMLElement) {
event.preventDefault();
if (!dragSrcEl) return;
dragSrcEl.classList.remove('dragging');
if (dragSrcEl === target) return;
// divide the target element into two sets of coordinates
// and determine how to act based on the relative mouse positioin
// and determine how to act based on the relative mouse position
const bbox = target.getBoundingClientRect();
const detX = bbox.left + (bbox.width / 2);
const detX = bbox.left + bbox.width / 2;
if (event.clientX < detX) {
target.insertAdjacentElement('beforebegin', dragSrcEl);
@ -46,17 +52,21 @@ function drop(event, target) {
}
}
function dragEnd(event, target) {
dragSrcEl.classList.remove('dragging');
function dragEnd(event: DragEvent, target: HTMLElement) {
dragSrcEl?.classList.remove('dragging');
$$('.over', target.parentNode).forEach(t => t.classList.remove('over'));
if (target.parentNode) {
$$('.over', target.parentNode).forEach(t => t.classList.remove('over'));
}
}
function wrapper(func) {
return function(event) {
if (!event.target.closest) return;
const target = event.target.closest('.drag-container [draggable]');
if (target) func(event, target);
function wrapper<E extends Event, T extends Element>(func: (event: E, target: T) => void) {
return function(event: E) {
const evtTarget = event.target as EventTarget | Element | null;
if (evtTarget && 'closest' in evtTarget && typeof evtTarget.closest === 'function') {
const target: T | null = evtTarget.closest('.drag-container [draggable]');
if (target) func(event, target);
}
};
}