Add slider events

Author: rreusser

src/components/sliders/draw.js

@@ -361,18 +361,28 @@ function handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, doTransiti
     var quantizedPosition = Math.round(normalizedPosition * (sliderOpts.steps.length - 1));
 
     if(quantizedPosition !== sliderOpts.active) {
+        var ret = {previousActive: sliderOpts.active};
+
         setActive(gd, sliderGroup, sliderOpts, quantizedPosition, true, doTransition);
+
+        return ret;
     }
 }
 
 function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition) {
+    var previousActive = sliderOpts.active;
     sliderOpts._input.active = sliderOpts.active = index;
 
     var step = sliderOpts.steps[sliderOpts.active];
 
     sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), doTransition);
     sliderGroup.call(drawCurrentValue, sliderOpts);
 
+    gd.emit('plotly_sliderchange', {
+        slider: sliderOpts,
+        previousActive: previousActive
+    });
+
     if(step && step.method && doCallback) {
         if(sliderGroup._nextMethod) {
             // If we've already queued up an update, just overwrite it with the most recent:
@@ -405,20 +415,31 @@ function attachGripEvents(item, gd, sliderGroup, sliderOpts) {
         d3.event.preventDefault();
         grip.call(Color.fill, sliderOpts.activebgcolor);
 
+        gd.emit('plotly_sliderdragstart', {slider: sliderOpts});
+
         var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
         handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, true);
         sliderOpts._dragging = true;
 
         $gd.on('mousemove', function() {
             var normalizedPosition = positionToNormalizedValue(sliderOpts, d3.mouse(node)[0]);
-            handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
+            var changes = handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, false);
+
+            if(changes) {
+                gd.emit('plotly_sliderdragmove', {
+                    slider: sliderOpts,
+                    previousActive: changes.previousActive
+                });
+            }
         });
 
         $gd.on('mouseup', function() {
             sliderOpts._dragging = false;
             grip.call(Color.fill, sliderOpts.bgcolor);
             $gd.on('mouseup', null);
             $gd.on('mousemove', null);
+
+            gd.emit('plotly_sliderdragend', {slider: sliderOpts});
         });
     });
 }

test/jasmine/tests/sliders_test.js

@@ -319,6 +319,62 @@ describe('sliders interactions', function() {
         }, 100);
     });
 
+    it('should issue events on interaction', function(done) {
+        var cntStart = 0;
+        var cntMove = 0;
+        var cntEnd = 0;
+        var cntChange = 0;
+
+        gd.on('plotly_sliderdragstart', function() { cntStart++; });
+        gd.on('plotly_sliderdragmove', function() { cntMove++; });
+        gd.on('plotly_sliderdragend', function() { cntEnd++; });
+        gd.on('plotly_sliderchange', function() { cntChange++; });
+
+        function assertEventCounts(starts, moves, ends, changes) {
+            expect(cntStart).toEqual(starts);
+            expect(cntMove).toEqual(moves);
+            expect(cntEnd).toEqual(ends);
+            expect(cntChange).toEqual(changes);
+        }
+
+        assertEventCounts(0, 0, 0, 0);
+
+        var firstGroup = gd._fullLayout._infolayer.select('.' + constants.railTouchRectClass);
+        var railNode = firstGroup.node();
+        var touchRect = railNode.getBoundingClientRect();
+
+        // Dispatch a click on the right side of the bar:
+        railNode.dispatchEvent(new MouseEvent('mousedown', {
+            clientY: touchRect.top + 5,
+            clientX: touchRect.left + touchRect.width - 5,
+        }));
+
+        setTimeout(function() {
+            // One slider received a mousedown, two linked sliders have received a change:
+            assertEventCounts(1, 0, 0, 2);
+
+            setTimeout(function() {
+                // Drag to the left side:
+                gd.dispatchEvent(new MouseEvent('mousemove', {
+                    clientY: touchRect.top + 5,
+                    clientX: touchRect.left + 5,
+                }));
+
+                setTimeout(function() {
+                    // On move, now two linked sliders have received two changes each:
+                    assertEventCounts(1, 1, 0, 4);
+
+                    gd.dispatchEvent(new MouseEvent('mouseup'));
+
+                    // Now all have been receivd:
+                    assertEventCounts(1, 1, 1, 4);
+
+                    done();
+                }, 10);
+            }, 10);
+        }, 10);
+    });
+
     function assertNodeCount(query, cnt) {
         expect(d3.selectAll(query).size()).toEqual(cnt);
     }