1

So I have some event streams:

let mouseUps = $(window)
  .asEventStream('mouseup');

let mouseDowns = $(window)
  .asEventStream('mousedown');

let mouseMoves = $(window)
  .asEventStream('mousemoves');

let drags = mouseDowns
  .flatMapLatest(() => mouseMoves.takeUntil(mouseUps));

let clicks = $(window)
  .asEventStream('click')
  .onValue(() => doThing());

I'd like to ignore clicks that get triggered right after a drag ends. I feel like there has go to be a fairly simple way to do this, but I'm still struggling with some of the core concepts.

Cyril Silverman
  • 479
  • 4
  • 12

1 Answers1

3

The solution is to create a property using stream.awaiting() that can be used to filter out the click after dragging.

var btn = $('#btn');
var mouseUps = btn.asEventStream('mouseup');
var mouseDowns = btn.asEventStream('mousedown');
var mouseMoves = btn.asEventStream('mousemove');
var drags = mouseDowns.flatMapLatest(function () {
    return mouseMoves.takeUntil(mouseUps);
});

var clicks = btn.asEventStream('click');
var isDraggingStarted = drags.awaiting(mouseDowns);

clicks.filter(isDraggingStarted.not()).onValue(doThing);

An example can be found here: http://jsfiddle.net/a128jhxb/1/

JJuutila
  • 361
  • 1
  • 4
  • Thanks so much! This is so elegant and simple! It's clear that I've still got a bit to go before I fully wrap my head around this way of thinking. – Cyril Silverman May 11 '15 at 19:46