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

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

import { NONE_TRANSLATE } from '.';
import { HORIZONTAL, VERTICAL } from '..';
import { getBefore, getBorderBeforeWidthValue, getPageValue, getRect, getScrollValue } from './GetStyles';
import { IsHTMLElement, IsMouseEvent, isTouchEvent } from './typesCheckers';
const onMouseEvents = ['onmouseup', 'onmousedown', 'onmousemove'];
export const setSizeStyles = (element, translate) => {
    element.style.height = `${translate.height}px`;
    element.style.width = `${translate.width}px`;
};
export const moveTranslate = (element, translation = NONE_TRANSLATE) => {
    if (!element || !IsHTMLElement(element)) {
        return;
    }
    if (translation.width == 0 && translation.height == 0) {
        element.style.transform = '';
    }
    else {
        element.style.transform = `translate(${translation.width}px,${translation.height}px)`;
    }
};
const assignDraggingTouchEvent = (element, onEvent, callback, touchCallback) => {
    element[onEvent] = (event) => {
        if (event.defaultPrevented) {
            return;
        }
        touchCallback && touchCallback(event);
        const dragMouseTouchEvent = convetEventToDragMouseTouchEvent(event);
        callback(dragMouseTouchEvent);
    };
};
export const assignDraggingEvent = (element, onEvent, callback, touchCallback) => {
    if (!callback) {
        return;
    }
    if (isOnMouseEvent(onEvent)) {
        element[onEvent] = callback;
    }
    else {
        assignDraggingTouchEvent(element, onEvent, callback, touchCallback);
    }
};
const isOnMouseEvent = (x) => onMouseEvents.includes(x);
const getDefaultEvent = (event) => {
    const { target } = event;
    return {
        clientX: 0,
        clientY: 0,
        pageX: 0,
        pageY: 0,
        screenX: 0,
        screenY: 0,
        target,
        offsetX: 0,
        offsetY: 0
    };
};
const getOffsetFromEvent = (event, tempEvent) => {
    const getTouchEventOffset = (element, direction) => {
        return getOffset(tempEvent, window, direction, element);
    };
    if (IsMouseEvent(event)) {
        const { offsetX, offsetY } = event;
        return [offsetX, offsetY];
    }
    else {
        const element = event.target;
        return [
            getTouchEventOffset(element, HORIZONTAL),
            getTouchEventOffset(element, VERTICAL)
        ];
    }
};
export const convetEventToDragMouseTouchEvent = (event) => {
    const tempEvent = getEvent(event);
    if (!tempEvent) {
        return getDefaultEvent(event);
    }
    const [offsetX, offsetY] = getOffsetFromEvent(event, tempEvent);
    const { clientX, clientY, pageX, pageY, screenX, screenY, target } = tempEvent;
    return {
        clientX,
        clientY,
        pageX,
        pageY,
        screenX,
        screenY,
        target,
        offsetX,
        offsetY
    };
};
const getEvent = (event) => {
    if (isTouchEvent(event)) {
        return event.touches[0] ?? event.changedTouches[0];
    }
    if (IsMouseEvent(event)) {
        return event;
    }
};
const getOffset = (event, window, direction, element) => {
    const boundingClientRect = getRect(element);
    return (getPageValue(direction, event) -
        getScrollValue(direction, window) -
        getBefore(direction, boundingClientRect) -
        getBorderBeforeWidthValue(direction, element));
};
export const setTranistion = (element, duration, timingFunction = 'ease-out', types = 'transform') => {
    if (IsHTMLElement(element)) {
        element.style.transitionDuration = `${duration}ms`;
        element.style.transitionTimingFunction = `${timingFunction}`;
        element.style.transitionProperty = `${types}`;
    }
};
export const setEventWithInterval = (element, eventName, callback) => {
    if (!element || !IsHTMLElement(element)) {
        return;
    }
    element[eventName] = () => {
        callback();
    };
};
const getStyles = (node) => {
    var style = node.querySelector('style');
    if (!style) {
        var newStyle = document.createElement('style');
        node.appendChild(newStyle);
        return newStyle;
    }
    return style;
};
const containRule = (sheet, cssCode) => {
    const selectorTextRegex = /\.-?[_a-zA-Z0-9-*\s<>():]+/g;
    const [selectorText] = cssCode.match(selectorTextRegex) || [];
    for (const rule of sheet.cssRules) {
        const [ruleSelectorText] = rule.cssText.match(selectorTextRegex) || [];
        if (selectorText === ruleSelectorText) {
            return true;
        }
    }
    return false;
};
export const AddCssStylesToElement = (node, cssCodes) => {
    cssCodes.forEach((cssCode) => {
        AddCssStyleToElement(node, cssCode);
    });
};
const AddCssStyleToElement = (node, cssCode) => {
    var style = getStyles(node);
    if (style.sheet && !containRule(style.sheet, cssCode)) {
        style.sheet?.insertRule(cssCode, style.sheet.cssRules.length);
    }
};
export const setCustomFixedSize = (element, fixedProps = {}) => {
    for (const fixedProp of Object.keys(fixedProps)) {
        const fixedValue = fixedProps[fixedProp];
        if (fixedValue != undefined) {
            setCustomProperty(element, `--${fixedProp}`, fixedValue);
        }
    }
};
const setCustomProperty = (element, fixedProp, newFixedSize) => {
    return element && element.style.setProperty(fixedProp, newFixedSize);
};
export const removeTranslateWhitoutTransition = (element) => {
    if (IsHTMLElement(element)) {
        element.style.transition = '';
        element.style.transform = '';
    }
};