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

replace wrapper function with delegate in draggable utils

Browse source
This commit is contained in:
SeinopSys 2022-04-17 15:12:21 +02:00 committed by Luna D
parent efa5092502
commit 9c8b6b8931
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
2 changed files with 11 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/js/utils/draggable.ts
View file

@ -1,4 +1,5 @@
import { $$ } from './dom'; import { $$ } from './dom';
import { delegate } from './events';
let dragSrcEl: HTMLElement | null = null; let dragSrcEl: HTMLElement | null = null;
@ -60,23 +61,14 @@ function dragEnd(event: DragEvent, target: HTMLElement) {
} }
} }
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);
}
};
}
export function initDraggables() { export function initDraggables() {
document.addEventListener('dragstart', wrapper(dragStart)); const draggableSelector = '.drag-container [draggable]';
document.addEventListener('dragover', wrapper(dragOver)); delegate(document, 'dragstart', { [draggableSelector]: dragStart});
document.addEventListener('dragenter', wrapper(dragEnter)); delegate(document, 'dragover', { [draggableSelector]: dragOver});
document.addEventListener('dragleave', wrapper(dragLeave)); delegate(document, 'dragenter', { [draggableSelector]: dragEnter});
document.addEventListener('dragend', wrapper(dragEnd)); delegate(document, 'dragleave', { [draggableSelector]: dragLeave});
document.addEventListener('drop', wrapper(drop)); delegate(document, 'dragend', { [draggableSelector]: dragEnd});
delegate(document, 'drop', { [draggableSelector]: drop});
} }
export function clearDragSource() { export function clearDragSource() {

6
assets/js/utils/events.ts
View file

@ -12,12 +12,12 @@ export function leftClick<E extends MouseEvent, Target extends EventTarget>(func
return (event: E, target: Target) => { if (event.button === 0) return func(event, target); }; return (event: E, target: Target) => { if (event.button === 0) return func(event, target); };
} }
export function delegate<K extends keyof GlobalEventHandlersEventMap>(node: GlobalEventHandlers, event: K, selectors: Record<string, ((e: GlobalEventHandlersEventMap[K], target: Element) => boolean)>) { export function delegate<K extends keyof GlobalEventHandlersEventMap, Target extends Element>(node: GlobalEventHandlers, event: K, selectors: Record<string, ((e: GlobalEventHandlersEventMap[K], target: Target) => void | boolean)>) {
node.addEventListener(event, e => { node.addEventListener(event, e => {
for (const selector in selectors) { for (const selector in selectors) {
const evtTarget = e.target as EventTarget | Element | null; const evtTarget = e.target as EventTarget | Target | null;
if (evtTarget && 'closest' in evtTarget && typeof evtTarget.closest === 'function') { if (evtTarget && 'closest' in evtTarget && typeof evtTarget.closest === 'function') {
const target = evtTarget.closest(selector); const target = evtTarget.closest(selector) as Target;
if (target && selectors[selector](e, target) === false) break; if (target && selectors[selector](e, target) === false) break;
} }
} }