source: gs3-extensions/tabletop-dl/trunk/drag-with-inertia.js@ 37462

// For details about event bubbling, see:
//   https://javascript.info/bubbling-and-capturing


// If thinking about adding touch-pad gesutring, see:
//   https://kenneth.io/post/detecting-multi-touch-trackpad-gestures-in-javascript

let DragDEBUG = true;

var activeDrag = {

    // The element to drag
    draggableElement: null,

    // Define the starting position of the element
    startX: 0,
    startY: 0,

    // Define the current position and velocity of the element
    currentX: 0,
    currentY: 0,

    lastX: 0,
    lastY: 0,
    animationId: null,
    
    velocityX: 0,
    velocityY: 0,
    
    dragging: false
};

let docXDim = null;
let docYDim = null;



function handleDragStart(event, client_x, client_y)
{
    if (DragDEBUG) {
    console.log(`  handleDragStart(${client_x},${client_y})`);
    }
    
    activeDrag.currentX = activeDrag.lastX = activeDrag.draggableElement.offsetLeft;
    activeDrag.currentY = activeDrag.lastY = activeDrag.draggableElement.offsetTop;

    activeDrag.startX = client_x - activeDrag.currentX;
    activeDrag.startY = client_y - activeDrag.currentY;

    // Stop any existing animation
    cancelAnimationFrame(activeDrag.animationId);

    activeDrag.dragging = true;
}


function handleTouchStart(event)
{
    if (DragDEBUG) {
    console.log("handleTouchtart()");
    }
    
    let client_x = event.touches[0].clientX;
    let client_y = event.touches[0].clientY;

    handleDragStart(event,client_x,client_y);
}


function handleMouseStart(event)
{
    if (DragDEBUG) {
    console.log("handleMouseStart()");
    }

    if (event.target == event.currentTarget) {
    // As we know this is our element, don't want to
    // allow any other events, such as text selection with
    // child div elements
    
    event.preventDefault();
    }
    
    let client_x = event.clientX;
    let client_y = event.clientY;
    
    handleDragStart(event,client_x,client_y);
}


function handleDrag(event, client_x, client_y)
{
    if (DragDEBUG) {
    console.log(`  handleDrag(${client_x},${client_y})`);
    }
    
    if (event.target == event.currentTarget) {
    if (DragDEBUG) {
        console.log(`  + event.target == event.currentTarget`);
    }
    

    const de_x_org = client_x - activeDrag.startX;
    const de_y_org = client_y - activeDrag.startY;

    let de_x_dim = $(activeDrag.draggableElement).width();
    let de_y_dim = $(activeDrag.draggableElement).height();

    let out_of_bounds_x = false;
    let out_of_bounds_y = false;

    //console.log(`    (${de_x_org},${de_y_org})`);
    
    if ((de_x_org >= 0) && ((de_x_org+de_x_dim <= docXDim))) {

        activeDrag.draggableElement.style.left = `${de_x_org}px`;
    
        // Update the current position of the element, store previous in LastX for velocity calc
        activeDrag.lastX = activeDrag.currentX;
        activeDrag.currentX = de_x_org;

    }
    else {
        out_of_bounds_x = true;

        // update startX by how much the overshoot is
        if (de_x_org<0) {
        activeDrag.startX += de_x_org;
        }
        else {
        activeDrag.startX += (de_x_org+de_x_dim) - docXDim;
        }
        
    }

    if ((de_y_org >= 0) && (de_y_org+de_y_dim <= docYDim)) {

        activeDrag.draggableElement.style.top = `${de_y_org}px`;
    
        // Update the current position of the element, store previous in LastY for velocity calc
        activeDrag.lastY = activeDrag.currentY;
        activeDrag.currentY = de_y_org;

    }
    else {
        out_of_bounds_y = true;
        
        // update startY by how much the overshoot is
        if (de_y_org<0) {
        activeDrag.startY += de_y_org;
        }
        else {
        activeDrag.startY += (de_y_org+de_y_dim) - docYDim;
        }
    }

    if (!event.clientX) {
        // Touch event
        //
        // prevent additional event handler
        // this is done to stop chrome's annoying back-page operation
        // triggering on a long right drag
        
        event.preventDefault();
    }
    
    if (out_of_bounds_x || out_of_bounds_y) {
        // Hard up against an edge
        
        /*
        if (event.clientX) {
        // Mouse event
        //
        // Don't want any child dragging events such as selecting text to trigger, unless
        // actually over the child element
        
        event.preventDefault();
        }*/
    }
    }
    else {
    if (DragDEBUG) {
        console.log(`  - event.target != event.currentTarget`);
    }
    }
}

function handleTouchDrag(event)
{    
    const client_x = event.touches[0].clientX;
    const client_y = event.touches[0].clientY;

    handleDrag(event,client_x,client_y);
}

function handleMouseDrag(event)
{
    if (activeDrag.dragging) {
    const client_x = event.clientX;
    const client_y = event.clientY;
    
    handleDrag(event,client_x,client_y);
    }
}


function handleDragEnd(event)
{
    if (DragDEBUG) {
    console.log(`  handleDragEnd(velocityX = ${activeDrag.currentX} - ${activeDrag.lastX}, velocityY = ${activeDrag.currentY} - ${activeDrag.lastY}`);
    }
    
    activeDrag.dragging = false;

    // Calculate the velocity of the element based on the last few frames of movement
    activeDrag.velocityX = activeDrag.currentX - activeDrag.lastX;
    activeDrag.velocityY = activeDrag.currentY - activeDrag.lastY;
    
    // Animate the movement of the element
    activeDrag.animationId = requestAnimationFrame(animateElement);
}

// Define the animation function
function animateElement() {
    // Update the position of the element based on its current velocity
    activeDrag.currentX += activeDrag.velocityX;
    activeDrag.currentY += activeDrag.velocityY;
    
    let x = activeDrag.currentX;
    let y = activeDrag.currentY;

    // Update the element's position
    activeDrag.draggableElement.style.left = `${x}px`;
    activeDrag.draggableElement.style.top = `${y}px`;
    
    let de_x_dim = $(activeDrag.draggableElement).width();
    let de_y_dim = $(activeDrag.draggableElement).height();

    
    if (x < -0.05) {
    // bounce, taking a small dampening hit in velocity/force first
    activeDrag.velocityX *= 0.75;
    
    activeDrag.currentX = 0;
    activeDrag.velocityX = -1 * activeDrag.velocityX;
    }
    else if ((x+de_x_dim) > (docXDim+0.05)) {
    // bounce, taking a small dampening hit in velocity/force first
    activeDrag.velocityX *= 0.75;

    activeDrag.currentX = docXDim-de_x_dim;
    activeDrag.velocityX = -1 * activeDrag.velocityX;
    }
    
    if (y < -0.05) {
    // bounce, taking a small dampening hit in velocity/force first
    activeDrag.velocityY *= 0.75;

    activeDrag.currentY = 0;
    activeDrag.velocityY = -1 * activeDrag.velocityY;
    }
    else if (((y+de_y_dim) > (docYDim+0.05))) {
    // bounce, taking a small dampening hit in velocity/force first
    activeDrag.velocityY *= 0.75;

    activeDrag.currentY = docYDim-de_y_dim;
    activeDrag.velocityY = -1 * activeDrag.velocityY;
    }
    
    // Decelerate the velocity over time
    activeDrag.velocityX *= 0.95;
    activeDrag.velocityY *= 0.95;
    
    // Stop the animation when the velocity is low enough
    if (Math.abs(activeDrag.velocityX) < 0.1 && Math.abs(activeDrag.velocityY) < 0.1) {
    cancelAnimationFrame(activeDrag.animationId);
    } else {
    activeDrag.animationId = requestAnimationFrame(animateElement);
    }
}

function handleTouchDragEnd(event)
{
    handleDragEnd(event);
}

function handleMouseDragEnd(event)
{
    if (activeDrag.dragging) {
    handleDragEnd(event)
    }
}
    
// Add the event listeners
//let lastX, lastY, animationId;
//let animationId;

// https://stackoverflow.com/questions/56703458/how-to-make-a-draggable-elements-for-touch-and-mousedrag-events

$(document).ready(function() {
    //console.log("document ready");

    //docXDim = document.body.clientHeight;
    //docYDim = document.body.clientWidth;

    docXDim = Math.max($(document).width(), $(window).width() );
    docYDim = Math.max($(document).height(),$(window).height());

    activeDrag.draggableElement = document.getElementById('myWindow');

    // psudeo drag-start
    activeDrag.draggableElement.addEventListener('touchstart', handleTouchStart);
    activeDrag.draggableElement.addEventListener('mousedown',  handleMouseStart);

    // psudeo drag
    activeDrag.draggableElement.addEventListener('touchmove', handleTouchDrag);
    activeDrag.draggableElement.addEventListener('mousemove', handleMouseDrag)

    
    // psudeo drag-end
    activeDrag.draggableElement.addEventListener('touchend', handleTouchDragEnd);
    activeDrag.draggableElement.addEventListener('mouseup',  handleMouseDragEnd);
});