seven/js/drag.js

function makeDraggable(elmnt) {
    let currentPosX = 0, currentPosY = 0, previousPosX = 0, previousPosY = 0;

    if (elmnt.querySelector('.title-bar')) {
        elmnt.querySelector('.title-bar').addEventListener("mousedown", dragMouseDown);
    } else {
        elmnt.addEventListener("mousedown", dragMouseDown);
    }

    function dragMouseDown(e) {
        if(e.button != 0) return;
        e.preventDefault();
        previousPosX = e.clientX;
        previousPosY = e.clientY;
        document.addEventListener("mouseup", closeDragElement);
        document.addEventListener("mousemove", elementDrag);
    }

    function elementDrag(e) {
        e.preventDefault();
        currentPosX = previousPosX - e.clientX;
        currentPosY = previousPosY - e.clientY;
        previousPosX = e.clientX;
        previousPosY = e.clientY;
        elmnt.style.top = `${elmnt.offsetTop - currentPosY}px`;
        elmnt.style.left = `${elmnt.offsetLeft - currentPosX}px`;
    }

    function closeDragElement() {
        document.removeEventListener("mouseup", closeDragElement);
        document.removeEventListener("mousemove", elementDrag);
    }
}

function makeResizable(elmnt) {
    var startX = 0, startY = 0, startWidth = 0, startHeight = 0;
    var doX = false, doY = false;
    var xDir = true;

    elmnt.addEventListener("mousedown", resizeMouseDown);
    elmnt.addEventListener("mousemove", resizeMouseMove);

    function resizeMouseMove(e) {
        if(e.target != elmnt) {
            elmnt.style.cursor = "default";
            return;
        }
        if(e.layerY < 27) {
            elmnt.style.cursor = "default";
            return;
        }
        var mx = e.clientX - elmnt.offsetLeft;
        var my = e.clientY - elmnt.offsetTop;
        let doX = (my < (elmnt.offsetHeight - 8) || mx > (elmnt.offsetWidth - 8) || mx < 8);
        let doY = (my >= (elmnt.offsetHeight - 8));
        let xDir = (mx < (elmnt.offsetWidth - 8));
        if(xDir && doX && doY) {
            elmnt.style.cursor = "nesw-resize";
        } else if(doX && doY) {
            elmnt.style.cursor = "nwse-resize";
        } else if(doX) {
            elmnt.style.cursor = "ew-resize";
        } else if(doY) {
            elmnt.style.cursor = "ns-resize";
        } else {
            elmnt.style.cursor = "default";
        }
    }

    function resizeMouseDown(e) {
        if(e.button != 0) return;
        if(e.target != elmnt) return;
        e.preventDefault();
        startX = e.clientX;
        startY = e.clientY;
        startWidth = elmnt.offsetWidth;
        startHeight = elmnt.offsetHeight;
        var mx = e.clientX - elmnt.offsetLeft;
        var my = e.clientY - elmnt.offsetTop;
        doX = (my < (elmnt.offsetHeight - 8) || mx > (elmnt.offsetWidth - 8) || mx < 8);
        doY = (my >= (elmnt.offsetHeight - 8));
        xDir = (mx < (elmnt.offsetWidth - 8));
        document.addEventListener("mouseup", closeResizeElement);
        document.addEventListener("mousemove", elementResize);
    }

    function elementResize(e) {
        e.preventDefault();
        let x = e.clientX - startX;
        if(doX) elmnt.style.width = (startWidth + (xDir ? -x : x)) + 'px';
        if(xDir) elmnt.style.left = (e.clientX) + 'px';
        if(doY) elmnt.style.height = (startHeight + e.clientY - startY) + 'px';
    }

    function closeResizeElement() {
        document.removeEventListener("mouseup", closeResizeElement);
        document.removeEventListener("mousemove", elementResize);
    }
}