112 lines
16 KiB
JavaScript
112 lines
16 KiB
JavaScript
|
export const DROP_EFFECTS = ['move', 'copy', 'link'];
|
||
|
|
export const CUSTOM_MIME_TYPE = 'application/x-dnd';
|
||
|
|
export const JSON_MIME_TYPE = 'application/json';
|
||
|
|
export const MSIE_MIME_TYPE = 'Text';
|
||
|
|
function mimeTypeIsCustom(mimeType) {
|
||
|
|
return mimeType.substr(0, CUSTOM_MIME_TYPE.length) === CUSTOM_MIME_TYPE;
|
||
|
|
}
|
||
|
|
export function getWellKnownMimeType(event) {
|
||
|
|
if (event.dataTransfer) {
|
||
|
|
const types = event.dataTransfer.types;
|
||
|
|
// IE 9 workaround.
|
||
|
|
if (!types) {
|
||
|
|
return MSIE_MIME_TYPE;
|
||
|
|
}
|
||
|
|
for (let i = 0; i < types.length; i++) {
|
||
|
|
if (types[i] === MSIE_MIME_TYPE ||
|
||
|
|
types[i] === JSON_MIME_TYPE ||
|
||
|
|
mimeTypeIsCustom(types[i])) {
|
||
|
|
return types[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
export function setDragData(event, data, effectAllowed) {
|
||
|
|
// Internet Explorer and Microsoft Edge don't support custom mime types, see design doc:
|
||
|
|
// https://github.com/marceljuenemann/angular-drag-and-drop-lists/wiki/Data-Transfer-Design
|
||
|
|
const mimeType = CUSTOM_MIME_TYPE + (data.type ? '-' + data.type : '');
|
||
|
|
const dataString = JSON.stringify(data);
|
||
|
|
try {
|
||
|
|
event.dataTransfer?.setData(mimeType, dataString);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
// Setting a custom MIME type did not work, we are probably in IE or Edge.
|
||
|
|
try {
|
||
|
|
event.dataTransfer?.setData(JSON_MIME_TYPE, dataString);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
// We are in Internet Explorer and can only use the Text MIME type. Also note that IE
|
||
|
|
// does not allow changing the cursor in the dragover event, therefore we have to choose
|
||
|
|
// the one we want to display now by setting effectAllowed.
|
||
|
|
const effectsAllowed = filterEffects(DROP_EFFECTS, effectAllowed);
|
||
|
|
if (event.dataTransfer) {
|
||
|
|
event.dataTransfer.effectAllowed = effectsAllowed[0];
|
||
|
|
}
|
||
|
|
event.dataTransfer?.setData(MSIE_MIME_TYPE, dataString);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export function getDropData(event, dragIsExternal) {
|
||
|
|
// check if the mime type is well known
|
||
|
|
const mimeType = getWellKnownMimeType(event);
|
||
|
|
// drag did not originate from [dndDraggable]
|
||
|
|
if (dragIsExternal === true) {
|
||
|
|
if (mimeType !== null && mimeTypeIsCustom(mimeType)) {
|
||
|
|
// the type of content is well known and safe to handle
|
||
|
|
return JSON.parse(event.dataTransfer?.getData(mimeType) ?? '{}');
|
||
|
|
}
|
||
|
|
// the contained data is unknown, let user handle it
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
if (mimeType !== null) {
|
||
|
|
// the type of content is well known and safe to handle
|
||
|
|
return JSON.parse(event.dataTransfer?.getData(mimeType) ?? '{}');
|
||
|
|
}
|
||
|
|
// the contained data is unknown, let user handle it
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
export function filterEffects(effects, allowed) {
|
||
|
|
if (allowed === 'all' || allowed === 'uninitialized') {
|
||
|
|
return effects;
|
||
|
|
}
|
||
|
|
return effects.filter(function (effect) {
|
||
|
|
return allowed.toLowerCase().indexOf(effect) !== -1;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
export function getDirectChildElement(parentElement, childElement) {
|
||
|
|
let directChild = childElement;
|
||
|
|
while (directChild.parentNode !== parentElement) {
|
||
|
|
// reached root node without finding given parent
|
||
|
|
if (!directChild.parentNode) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
directChild = directChild.parentNode;
|
||
|
|
}
|
||
|
|
return directChild;
|
||
|
|
}
|
||
|
|
export function shouldPositionPlaceholderBeforeElement(event, element, horizontal) {
|
||
|
|
const bounds = element.getBoundingClientRect();
|
||
|
|
// If the pointer is in the upper half of the list item element,
|
||
|
|
// we position the placeholder before the list item, otherwise after it.
|
||
|
|
if (horizontal) {
|
||
|
|
return event.clientX < bounds.left + bounds.width / 2;
|
||
|
|
}
|
||
|
|
return event.clientY < bounds.top + bounds.height / 2;
|
||
|
|
}
|
||
|
|
export function calculateDragImageOffset(event, dragImage) {
|
||
|
|
const dragImageComputedStyle = window.getComputedStyle(dragImage);
|
||
|
|
const paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0;
|
||
|
|
const paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0;
|
||
|
|
const borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0;
|
||
|
|
const borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0;
|
||
|
|
return {
|
||
|
|
x: event.offsetX + paddingLeft + borderLeft,
|
||
|
|
y: event.offsetY + paddingTop + borderTop,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
export function setDragImage(event, dragImage, offsetFunction) {
|
||
|
|
const offset = offsetFunction(event, dragImage) || { x: 0, y: 0 };
|
||
|
|
event.dataTransfer.setDragImage(dragImage, offset.x, offset.y);
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG5kLXV0aWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZG5kL3NyYy9saWIvZG5kLXV0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCQSxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sQ0FBaUIsQ0FBQztBQUVyRSxNQUFNLENBQUMsTUFBTSxnQkFBZ0IsR0FBRyxtQkFBbUIsQ0FBQztBQUNwRCxNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsa0JBQWtCLENBQUM7QUFDakQsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLE1BQU0sQ0FBQztBQUVyQyxTQUFTLGdCQUFnQixDQUFDLFFBQWdCO0lBQ3hDLE9BQU8sUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLEtBQUssZ0JBQWdCLENBQUM7QUFDMUUsQ0FBQztBQUVELE1BQU0sVUFBVSxvQkFBb0IsQ0FBQyxLQUFnQjtJQUNuRCxJQUFJLEtBQUssQ0FBQyxZQUFZLEVBQUU7UUFDdEIsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUM7UUFFdkMsbUJBQW1CO1FBQ25CLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDVixPQUFPLGNBQWMsQ0FBQztTQUN2QjtRQUVELEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3JDLElBQ0UsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLGNBQWM7Z0JBQzNCLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxjQUFjO2dCQUMzQixnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFDMUI7Z0JBQ0EsT0FBTyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDakI7U0FDRjtLQUNGO0lBRUQs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
|