jpc-like-websites/src/modifications/dragAndDrop.js

/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * @copyright by its creator Christian Martin 
 */

const EventDrag = Object.freeze({
    OVER: "over",
    START: "start",
    END: "end",
    ENTER: "enter",
    LEAVE: "leave"
});

/**
 * Defines default functions to setup a drag/drop behaviour
 */
class DragAndDropImplementation {
    _isMngmtElNeeded;

    ensureManagementElementExists() {

    }

    getManagementElement() {

    }

    /**
     * 
     * @param {string} datakey 
     * @param {string} selector 
     * @returns {Function}
     */
    dragStartAction(datakey, selector) {
        return function (event) {
            console.log("DragEvent", event, "on", selector);
            event.dataTransfer
                .setData(
                    datakey,
                    JSON.stringify({
                        ["selector"]: selector,
                        ["relDims"]: new TwoDimPoint(
                            event.clientX - event.target.getBoundingClientRect().left,
                            event.clientY - event.target.getBoundingClientRect().top
                        )
                    })
                );
        }
    }

    dragEventAction(selector) {
        return function (event) {

        }
    }


    /**
     * 
     * @param {string} datakey 
     * @param {string} selector 
     * @returns {Function}
     */
    dropEventAction(datakey, selector) {
        return function (event) {
            event.preventDefault();

            let draggedData = JSON.parse(event.dataTransfer.getData(datakey));
            let draggedElement = document.querySelector(draggedData.selector);

            let target = event.target
                .closest(selector);

            console.log("Default drop event");

            //if (![...target.childNodes].includes(draggedElement)) {
            target.appendChild(draggedElement);
            //}
        }
    }
};


const DADInPlace = new DragAndDropImplementation();
DADInPlace.dropEventAction = function (datakey, selector) {
    /**
     * @param {Event} event 
     */
    return function (event) {
        event.preventDefault();

        let draggedData = JSON.parse(event.dataTransfer.getData(datakey));
        let draggedElement = document.querySelector(draggedData.selector);

        let target = event.target
            .closest(selector);

        let dimsDraggedEl = new Dimensions()
            .width(draggedElement.offsetWidth)
            .height(draggedElement.offsetHeight);

        let pagePoint = new TwoDimPoint(
            event.clientX,
            event.clientY
        );

        let parentPagePoint = new TwoDimPoint(
            target.getBoundingClientRect().left,
            target.getBoundingClientRect().top
        );

        draggedElement.style["width"] = dimsDraggedEl._fFirst + "px";
        draggedElement.style["height"] = dimsDraggedEl._fSecond + "px";

        // x page to relative is (parent-page), then -rel

        let dropPosition = pagePoint
            .minusTDP(parentPagePoint)
            .minusTDP(draggedData.relDims);

        draggedElement.style.position = "relative";
        draggedElement.style.left = dropPosition.x + "px";
        draggedElement.style.top = dropPosition.y + "px";
        //if (![...target.childNodes].includes(draggedElement)) {
        target.appendChild(draggedElement);
        //}
    }
}