source: gs3-extensions/tabletop-dl/trunk/tabletop-interact.js@ 37555

function dragMoveListener(event)
{
  var target = event.target
  // keep the dragged position in the data-x/data-y attributes
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

  // translate the element
  target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'

  // update the posiion attributes
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
}

function getCoreDraggableOptions()
{
    let core_draggable_options = {

    listeners: { move: dragMoveListener },

    modifiers: [
        interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
        })
    ],  

    inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
    }       
    };

    return core_draggable_options;
}

// http://localhost:8383/greenstone3/library

function getCoreResizableOptions()
{
    let core_resizable_options = {
    
    edges: { left: true, right: true, bottom: true, top: true },
        
    listeners: {

        moveNEWER: function (event) {
        let { x, y } = event.target.dataset
        
        x = (parseFloat(x) || 0) + event.deltaRect.left
        y = (parseFloat(y) || 0) + event.deltaRect.top
        
        Object.assign(event.target.style, {
            width: `${event.rect.width}px`,
            height: `${event.rect.height}px`,
            transform: `translate(${x}px, ${y}px)`
        })
        
        Object.assign(event.target.dataset, { x, y })
        },
        
        move (event) {
        var target = event.target
        var x = (parseFloat(target.getAttribute('data-x')) || 0)
        var y = (parseFloat(target.getAttribute('data-y')) || 0)
        //var x = (parseFloat(target.getAttribute('data-x')) || target.style.clientLeft)
        //var y = (parseFloat(target.getAttribute('data-y')) || target.style.clientTop)
        
        // update the element's style
        target.style.width = event.rect.width + 'px'
        target.style.height = event.rect.height + 'px'
        
        // translate when resizing from top or left edges
        x += event.deltaRect.left
        y += event.deltaRect.top
        
        target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
        
        //var target_new_x_org = target.clientLeft + event.deltaRect.left;
        //var target_new_y_org = target.clientTop  + event.deltaRect.top;

        //target.style.left = target_new_x_org + 'px';
        //target.style.top  = target_new_y_org + 'px';

        //target.style.left = x + 'px';
        //target.style.top  = y + 'px';

        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)
        
        // var textEl = $(event.target).find('.interact-info-bar')[0];          
        // textEl.textContent = "Resized to: " + Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height) + " pixels"
        }
    },
    
    modifiers: [
        // keep the edges inside the parent
        interact.modifiers.restrictEdges({
        outer: 'parent'
        }),
        
        // minimum size
        interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
        })
    ],
        
    inertia: false
    
    /*inertia: {
            resistance: 6,
            //minSpeed: 20,
            //endSpeed: 10,
            smoothEndDuration: 500,
            allowResume: true
    }*/     
    };

    return core_resizable_options;
    
}


function getCoreGesturableOptions(elem,angleScale)
{
    let core_gesturable_options = {
    
    listeners: {
        start (event) {
        angleScale.angle -= event.angle;
        },
        move (event) {
        let currentAngle = event.angle + angleScale.angle;
        let currentScale = event.scale * angleScale.scale;
        
        //let scale_elem = $(elem).find('.scale-element')[0];
        
        //scale_elem.style.transform =          
        //    'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')';

        let $scale_elem = $(elem).find('.scale-element');
        
        $scale_elem.css(
            'transform',
            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
        );

        
        dragMoveListener(event);
        },
        end (event) {
        angleScale.angle = angleScale.angle + event.angle;
        angleScale.scale = angleScale.scale * event.scale;          
        }
    }
    };

    return core_gesturable_options;
}
    
    
    
$(document).ready(function() {

    let draggable_options = getCoreDraggableOptions();
    let resizable_options = getCoreResizableOptions();
    
    draggable_options.autoScroll =true;    
    
    interact('.resize-drag')
    .draggable(draggable_options)
    .resizable(resizable_options)

    // still needed??
    //window.dragMoveListener = dragMoveListener


    var $drag_and_zoom_elems = $('.drag-and-zoom');

    $drag_and_zoom_elems.each(function(index) {

    let this_elem = this;

    /*
    let draggable_options = getCoreDraggableOptions();
    let angleScale = {
        angle: 0,
        scale: 1
    }

    */
    
    let this_angle_scale = {
        angle: 0,
        scale: 1
    }

    
    let gdraggable_options = getCoreDraggableOptions();
    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);

    interact(this_elem)
        .gesturable(gesturable_options)
        .draggable(gdraggable_options);
        
    /*
    interact(this_elem)
        .gesturable({
        listeners: {
            start (event) {
            angleScale.angle -= event.angle     
            },
            move (event) {
            let currentAngle = event.angle + angleScale.angle
            let currentScale = event.scale * angleScale.scale

            let this_scale_elem = $(this_elem).find('.scale-element')[0];
            
            this_scale_elem.style.transform =           
                'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
            
            dragMoveListener(event)
            },
            end (event) {
            angleScale.angle = angleScale.angle + event.angle
            angleScale.scale = angleScale.scale * event.scale           
            }
        }
        })
        .draggable(draggable_options)
        
    */

    });
});


$(document).ready(function() {

    $.ajax({
    url: "http://localhost:8383/greenstone3/library?excerptid=collectionAndGroupLinks"
    })
    .done(function(data) {
        const winbox1 = new WinBox({
        id:    "my-winbox1",
        title: 'Winbox + Interact Example 1',
        x: 200,
        y: 200,
        width: '900px',
        height: '400px',
        border: "0.3em",
        background: "#29e",
        html: data

        });

        $('#my-winbox1 .wb-header').css("user-select", "none");
        $('#my-winbox1 .wb-header').css("touch-action","none");
        
        let draggable_options = getCoreDraggableOptions();
        let resizable_options = getCoreResizableOptions();
        
        draggable_options.autoScroll = true;
    
        interact('#my-winbox1')
        .draggable(draggable_options)
        .resizable(resizable_options);
    });



    const win2 = new WinBox({
    id:    "my-winbox2",
    title: 'Winbox + Interact Example 2',
    x: 800,
    y: 200,
    width: '500px',
    height: '300px',
    border: "0.3em",
    background: "#29e",
    html: "<p classXXX=\"scale-element\" style=\"padding: 8px; color: #000;\">This window can be dragged around, rotated and zoomed in and out</p>"
    });

    // user-select: none;
    // touch-action: none;
    
    let $win2 = $('#my-winbox2');
    let $scale_element_div = $('<div>').attr("class","scale-element");
    $scale_element_div.append($win2.children()).clone();
    
    $win2.empty().append($scale_element_div);
    
    
    
    /*
    interact('#my-winbox2')
    .draggable(draggable_options)
    .resizable(resizable_options);
    */

    let this_elem = document.getElementById('my-winbox2');
    
    let this_angle_scale = {
    angle: 0,
    scale: 1
    }
    
    
    let gdraggable_options = getCoreDraggableOptions();
    let gesturable_options = getCoreGesturableOptions(this_elem,this_angle_scale);
    
    interact('#my-winbox2')
    .gesturable(gesturable_options)
    .draggable(gdraggable_options);
    
    
    /*
    interact('#my-winbox')
        .draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        modifiers: [
            interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
            })
        ],
        // enable autoScroll
        autoScroll: true,
        
        listeners: {
            // call this function on every dragmove event
            move: dragMoveListener,
            
            // call this function on every dragend event
            end (event) {
            var textEl = event.target.querySelector('p')
            
            textEl && (textEl.textContent =
                   'moved a distance of ' +
                   (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                          Math.pow(event.pageY - event.y0, 2) | 0))
                   .toFixed(2) + 'px')
            }
        }
        });
    */
    
});