fluid-dnd/dist/core/utils/ParseStyles.js

An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte

import { getPropByDirection, getRect, parseFloatEmpty } from './GetStyles';
export const getNumberFromPixels = (pixels) => {
    if (pixels.length == 0) {
        return 0;
    }
    return parseFloatEmpty(pixels.replace('px', ''));
};
export const computeGapPixels = (element, gapType) => {
    const gap = getComputedStyle(element)[gapType];
    if (gap.match('%')) {
        const gap_percent = parseFloatEmpty(gap.replace('%', ''));
        const { width } = getRect(element);
        return width * (gap_percent / 100);
    }
    const gap_px = getNumberFromPixels(gap);
    return gap_px;
};
export const gapAndDisplayInformation = (element, gapStyle) => {
    if (!(element instanceof Element))
        return [0, false];
    const gap = computeGapPixels(element, gapStyle);
    const display = getComputedStyle(element).display;
    const hasGaps = gap > 0 || display === 'flex';
    return [gap, hasGaps];
};
export const getBeforeStyles = (element) => {
    const { top, left } = getComputedStyle(element);
    return [getNumberFromPixels(top), getNumberFromPixels(left)];
};
export const getGapInfo = (element, direction) => {
    const { gap: gapStyle } = getPropByDirection(direction);
    return gapAndDisplayInformation(element, gapStyle);
};
export const getGapPixels = (element, direction) => {
    const [gap, hasGaps] = getGapInfo(element, direction);
    if (hasGaps) {
        return gap;
    }
    return 0;
};