Merge branch 'event-handling' of https://github.com/tiraeth/morris.js

Conflicts:
	morris.min.js

examples/area.html

@@ -25,6 +25,8 @@ Morris.Area({
   xkey: 'x',
   ykeys: ['y', 'z'],
   labels: ['Y', 'Z']
+}).on('click', function(i, row){
+  console.log(i, row);
 });
 </pre>
 </body>

examples/bar.html

@@ -25,6 +25,8 @@ Morris.Bar({
   xkey: 'x',
   ykeys: ['y', 'z', 'a'],
   labels: ['Y', 'Z', 'A']
+}).on('click', function(i, row){
+  console.log(i, row);
 });
 </pre>
 </body>

examples/donut.html

@@ -22,6 +22,8 @@ Morris.Donut({
     {value: 5, label: 'A really really long label'}
   ],
   formatter: function (x) { return x + "%"}
+}).on('click', function(i, row){
+  console.log(i, row);
 });
 </pre>
 </body>

lib/morris.bar.coffee

@@ -10,6 +10,7 @@ class Morris.Bar extends Morris.Grid
       @hover = new Morris.Hover(parent: @el)
       @on('hovermove', @onHoverMove)
       @on('hoverout', @onHoverOut)
+      @on('gridclick', @onGridClick)
 
   # Default configuration
   #
@@ -121,6 +122,13 @@ class Morris.Bar extends Morris.Grid
     Math.min(@data.length - 1,
       Math.floor((x - @left) / (@width / @data.length)))
 
+  # click on grid event handler
+  #
+  # @private
+  onGridClick: (x, y) =>
+    index = @hitTest(x, y)
+    @fire 'click', index, @options.data[index], x, y
+
   # hover movement event handler
   #
   # @private

lib/morris.donut.coffee

@@ -8,7 +8,7 @@
 #       { label: 'yang', value: 50 }
 #     ]
 #   });
-class Morris.Donut
+class Morris.Donut extends Morris.EventEmitter
   defaults:
     colors: [
       '#0B62A4'
@@ -72,15 +72,16 @@ class Morris.Donut
     last = 0
     idx = 0
     @segments = []
-    for value in @values
+    for value, i in @values
       next = last + min + C * (value / total)
       seg = new Morris.DonutSegment(
         cx, cy, w*2, w, last, next,
         @options.colors[idx % @options.colors.length],
-        @options.backgroundColor, idx, @raphael)
+        @options.backgroundColor, @data[i], idx, @raphael)
       seg.render()
       @segments.push seg
       seg.on 'hover', @select
+      seg.on 'click', @click
       last = next
       idx += 1
 
@@ -95,6 +96,11 @@ class Morris.Donut
         break
       idx += 1
 
+  # @private
+  click: (idx) =>
+    if typeof idx is 'number' then segment = @segments[idx] else segment = idx
+    @fire 'click', segment.idx, segment.data
+
   # Select the segment at the given index.
   select: (idx) =>
     s.deselect() for s in @segments
@@ -130,7 +136,7 @@ class Morris.Donut
 #
 # @private
 class Morris.DonutSegment extends Morris.EventEmitter
-  constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @backgroundColor, @index, @raphael) ->
+  constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @backgroundColor, @data, @index, @raphael) ->
     @sin_p0 = Math.sin(p0)
     @cos_p0 = Math.cos(p0)
     @sin_p1 = Math.sin(p1)
@@ -165,16 +171,23 @@ class Morris.DonutSegment extends Morris.EventEmitter
 
   render: ->
     @arc = @drawDonutArc(@hilight, @color)
-    @seg = @drawDonutSegment(@path, @color, @backgroundColor, => @fire('hover', @index))
+    @seg = @drawDonutSegment(
+      @path, 
+      @color, 
+      @backgroundColor, 
+      => @fire('hover', @index),
+      => @fire('click', @index)
+    )
 
   drawDonutArc: (path, color) ->
     @raphael.path(path)
       .attr(stroke: color, 'stroke-width': 2, opacity: 0)
 
-  drawDonutSegment: (path, fillColor, strokeColor, hoverFunction) ->
+  drawDonutSegment: (path, fillColor, strokeColor, hoverFunction, clickFunction) ->
     @raphael.path(path)
       .attr(fill: fillColor, stroke: strokeColor, 'stroke-width': 3)
       .hover(hoverFunction)
+      .click(clickFunction)
 
   select: =>
     unless @selected

lib/morris.grid.coffee

@@ -49,6 +49,10 @@ class Morris.Grid extends Morris.EventEmitter
       @fire 'hover', touch.pageX - offset.left, touch.pageY - offset.top
       touch
 
+    @el.bind 'click', (evt) =>
+      offset = @el.offset()
+      @fire 'gridclick', evt.pageX - offset.left, evt.pageY - offset.top
+
     @postInit() if @postInit
 
   # Default options

lib/morris.line.coffee

@@ -14,6 +14,7 @@ class Morris.Line extends Morris.Grid
       @hover = new Morris.Hover(parent: @el)
       @on('hovermove', @onHoverMove)
       @on('hoverout', @onHoverOut)
+      @on('gridclick', @onGridClick)
 
   # Default configuration
   #
@@ -65,6 +66,13 @@ class Morris.Line extends Morris.Grid
       break if x < (r._x + @data[index]._x) / 2
     index
 
+  # click on grid event handler
+  #
+  # @private
+  onGridClick: (x, y) =>
+    index = @hitTest(x, y)
+    @fire 'click', index, @options.data[index], x, y
+
   # hover movement event handler
   #
   # @private

morris.js

@@ -107,6 +107,11 @@
         _this.fire('hover', touch.pageX - offset.left, touch.pageY - offset.top);
         return touch;
       });
+      this.el.bind('click', function(evt) {
+        var offset;
+        offset = _this.el.offset();
+        return _this.fire('gridclick', evt.pageX - offset.left, evt.pageY - offset.top);
+      });
       if (this.postInit) {
         this.postInit();
       }
@@ -611,6 +616,8 @@
       this.onHoverOut = __bind(this.onHoverOut, this);
 
       this.onHoverMove = __bind(this.onHoverMove, this);
+
+      this.onGridClick = __bind(this.onGridClick, this);
       if (!(this instanceof Morris.Line)) {
         return new Morris.Line(options);
       }
@@ -629,7 +636,8 @@
           parent: this.el
         });
         this.on('hovermove', this.onHoverMove);
-        return this.on('hoverout', this.onHoverOut);
+        this.on('hoverout', this.onHoverOut);
+        return this.on('gridclick', this.onGridClick);
       }
     };
 
@@ -705,6 +713,12 @@
       return index;
     };
 
+    Line.prototype.onGridClick = function(x, y) {
+      var index;
+      index = this.hitTest(x, y);
+      return this.fire('click', index, this.options.data[index], x, y);
+    };
+
     Line.prototype.onHoverMove = function(x, y) {
       var index;
       index = this.hitTest(x, y);
@@ -1235,6 +1249,8 @@
       this.onHoverOut = __bind(this.onHoverOut, this);
 
       this.onHoverMove = __bind(this.onHoverMove, this);
+
+      this.onGridClick = __bind(this.onGridClick, this);
       if (!(this instanceof Morris.Bar)) {
         return new Morris.Bar(options);
       }
@@ -1250,7 +1266,8 @@
           parent: this.el
         });
         this.on('hovermove', this.onHoverMove);
-        return this.on('hoverout', this.onHoverOut);
+        this.on('hoverout', this.onHoverOut);
+        return this.on('gridclick', this.onGridClick);
       }
     };
 
@@ -1395,6 +1412,12 @@
       return Math.min(this.data.length - 1, Math.floor((x - this.left) / (this.width / this.data.length)));
     };
 
+    Bar.prototype.onGridClick = function(x, y) {
+      var index;
+      index = this.hitTest(x, y);
+      return this.fire('click', index, this.options.data[index], x, y);
+    };
+
     Bar.prototype.onHoverMove = function(x, y) {
       var index, _ref;
       index = this.hitTest(x, y);
@@ -1437,7 +1460,9 @@
 
   })(Morris.Grid);
 
-  Morris.Donut = (function() {
+  Morris.Donut = (function(_super) {
+
+    __extends(Donut, _super);
 
     Donut.prototype.defaults = {
       colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
@@ -1449,6 +1474,8 @@
     function Donut(options) {
       this.select = __bind(this.select, this);
 
+      this.click = __bind(this.click, this);
+
       var row;
       if (!(this instanceof Morris.Donut)) {
         return new Morris.Donut(options);
@@ -1480,7 +1507,7 @@
     }
 
     Donut.prototype.redraw = function() {
-      var C, cx, cy, idx, last, max_value, min, next, seg, total, value, w, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
+      var C, cx, cy, i, idx, last, max_value, min, next, seg, total, value, w, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
       this.el.empty();
       this.raphael = new Raphael(this.el[0]);
       cx = this.el.width() / 2;
@@ -1498,13 +1525,14 @@
       idx = 0;
       this.segments = [];
       _ref1 = this.values;
-      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-        value = _ref1[_j];
+      for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
+        value = _ref1[i];
         next = last + min + C * (value / total);
-        seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], this.options.backgroundColor, idx, this.raphael);
+        seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], this.options.backgroundColor, this.data[i], idx, this.raphael);
         seg.render();
         this.segments.push(seg);
         seg.on('hover', this.select);
+        seg.on('click', this.click);
         last = next;
         idx += 1;
       }
@@ -1534,6 +1562,16 @@
       return _results;
     };
 
+    Donut.prototype.click = function(idx) {
+      var segment;
+      if (typeof idx === 'number') {
+        segment = this.segments[idx];
+      } else {
+        segment = idx;
+      }
+      return this.fire('click', segment.idx, segment.data);
+    };
+
     Donut.prototype.select = function(idx) {
       var row, s, segment, _i, _len, _ref;
       _ref = this.segments;
@@ -1584,19 +1622,20 @@
 
     return Donut;
 
-  })();
+  })(Morris.EventEmitter);
 
   Morris.DonutSegment = (function(_super) {
 
     __extends(DonutSegment, _super);
 
-    function DonutSegment(cx, cy, inner, outer, p0, p1, color, backgroundColor, index, raphael) {
+    function DonutSegment(cx, cy, inner, outer, p0, p1, color, backgroundColor, data, index, raphael) {
       this.cx = cx;
       this.cy = cy;
       this.inner = inner;
       this.outer = outer;
       this.color = color;
       this.backgroundColor = backgroundColor;
+      this.data = data;
       this.index = index;
       this.raphael = raphael;
       this.deselect = __bind(this.deselect, this);
@@ -1635,6 +1674,8 @@
       this.arc = this.drawDonutArc(this.hilight, this.color);
       return this.seg = this.drawDonutSegment(this.path, this.color, this.backgroundColor, function() {
         return _this.fire('hover', _this.index);
+      }, function() {
+        return _this.fire('click', _this.index);
       });
     };
 
@@ -1646,12 +1687,12 @@
       });
     };
 
-    DonutSegment.prototype.drawDonutSegment = function(path, fillColor, strokeColor, hoverFunction) {
+    DonutSegment.prototype.drawDonutSegment = function(path, fillColor, strokeColor, hoverFunction, clickFunction) {
       return this.raphael.path(path).attr({
         fill: fillColor,
         stroke: strokeColor,
         'stroke-width': 3
-      }).hover(hoverFunction);
+      }).hover(hoverFunction).click(clickFunction);
     };
 
     DonutSegment.prototype.select = function() {