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 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'); return retStrArr.join('\n');
}; };
// Force module handling for Jest, can be removed after TypeScript migration
export {};
export default parseSearch; export default parseSearch;

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

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

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

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