Basco.js test

by busyoumono99

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.37/Bacon.min.js"></script>
<div id="clickable-block"></div>

CSS

div {
    width: 10em;
    height: 10em;
    background: #F1C40F;
    position: absolute;
}
div:hover { cursor: pointer; }

JavaScript

var xyFromEvent = function(v) {
    console.log('xyFromEvent');
    
    return {
        x: v.clientX,
        y: v.clientY
    };
}

var getDelta = function (t) {
    console.log('getDelta');
    var a = t[1];
    var b = t[0];
    return {
        x: a.x - b.x,
        y: a.y - b.y
    };
}

var add = function (p1, p2) {
    console.log('add');
    return {
        x: p1.x + p2.x,
        y: p1.y + p2.y
    };
}

$().ready(function(){
    var block = $("#clickable-block");
    var html = $("html");
    
    var startDrag = block.asEventStream('mousedown');
    var endDrag = block.asEventStream('mouseup');
    
    var draggingDeltas = startDrag.flatMap(function(){
        return html.asEventStream('mousemove')
            .map(xyFromEvent)
            .slidingWindow(2, 2)
            .map(getDelta)
            .takeUntil(endDrag);
    });
    
    var blockPosition = draggingDeltas.scan({
        x: 0,
        y: 0
    }, add);
    
    blockPosition.onValue(function(pos){
        console.log(pos);
        block.css({
            top: pos.y + "px",
            left: pos.x + "px"
        });
    });
});