WIP: connecting hover object to grid subclasses.

lib/morris.bar.coffee

@@ -5,10 +5,6 @@ class Morris.Bar extends Morris.Grid
 
   init: ->
     @cumulative = @options.stacked
-    @hoverConfigure @options.hoverOptions
-
-  postInit: ->
-    @hoverInit()
 
   # Default configuration
   #
@@ -30,7 +26,6 @@ class Morris.Bar extends Morris.Grid
   # @private
   calc: ->
     @calcBars()
-    @hoverCalculateMargins()
 
   # calculate series data bars coordinates and sizes
   #
@@ -114,7 +109,3 @@ class Morris.Bar extends Morris.Grid
       @options.barColors.call(@, r, s, type)
     else
       @options.barColors[sidx % @options.barColors.length]
-
-  hoverGetPosition: (index) ->
-    [x, y] = super(index)
-    [x, (@top + @bottom)/2 - @hoverHeight/2]

lib/morris.grid.coffee

@@ -36,6 +36,12 @@ class Morris.Grid extends Morris.EventEmitter
     # load data
     @setData @options.data
 
+    # hover
+    unless @options.hideHover is 'always'
+      @hover = new Morris.Hover
+        parent: @el
+      @initHover()
+
     @postInit() if @postInit
 
   # Default options
@@ -46,6 +52,7 @@ class Morris.Grid extends Morris.EventEmitter
     gridStrokeWidth: 0.5
     gridTextColor: '#888'
     gridTextSize: 12
+    hideHover: false
     numLines: 5
     padding: 25
     parseTime: true
@@ -261,119 +268,29 @@ class Morris.Grid extends Morris.EventEmitter
   # Hover stuff
   #
   #
-  hoverConfigure: (options) ->
+  initHover: ->
-    @hoverOptions = $.extend {}, @hoverDefaults, options ? {}
+    if @hover?
+      @el.bind 'mousemove', (evt) =>
+        @updateHover evt.pageX, evt.pageY
 
-  hoverInit: ->
+      if @options.hideHover
-    if @hoverOptions.enableHover
+        @el.bind 'mouseout', (evt) =>
-      @hover = @hoverBuild()
-      @hoverBindEvents()
-      @hoverShow(if @hoverOptions.hideHover then null else @data.length - 1)
-
-  hoverDefaults:
-    enableHover: true
-    popupClass: "morris-popup"
-    hideHover: false
-    allowOverflow: false
-    pointMargin: 10
-    hoverFill: (index, row) -> @hoverFill(index, row)
-
-  hoverBindEvents: ->
-    @el.mousemove (evt) =>
-      @hoverUpdate evt.pageX
-    if @hoverOptions.hideHover
-      @el.mouseout (evt) =>
-        @hoverShow null
-    touchHandler = (evt) =>
-      touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
-      @hoverUpdate touch.pageX
-      return touch
-    @el.bind 'touchstart', touchHandler
-    @el.bind 'touchmove', touchHandler
-    @el.bind 'touchend', touchHandler
-
-    @hover.mousemove (evt) -> evt.stopPropagation()
-    @hover.mouseout (evt) -> evt.stopPropagation()
-    @hover.bind 'touchstart', (evt) -> evt.stopPropagation()
-    @hover.bind 'touchmove', (evt) -> evt.stopPropagation()
-    @hover.bind 'touchend', (evt) -> evt.stopPropagation()
-
-  hoverCalculateMargins: ->
-    @hoverMargins = for i in [1...@data.length]
-      @left + i * @width / @data.length
-
-  hoverBuild: ->
-    hover = $ "<div/>"
-    hover.addClass "#{@hoverOptions.popupClass} js-morris-popup"
-    hover.appendTo @el
-    hover.hide()
-    hover
-
-  hoverUpdate: (x) ->
-    x -= @el.offset().left
-    for hoverIndex in [0...@hoverMargins.length]
-      break if @hoverMargins[hoverIndex] > x
-    @hoverShow hoverIndex
-
-  hoverShow: (index) ->
-    if index isnt null
-      @hover.html("")
-      @hoverOptions.hoverFill.call(@, index, @data[index])
-      @hoverPosition(index)
-      @fire "hover.show", index
-      @hover.show()
-    if not index?
-      @hoverHide()
-
-  hoverHide: ->
           @hover.hide()
 
-  colorFor: (row, i, type) -> "inherit"
+      @el.bind 'touchstart touchmove touchend', (evt) =>
-  yLabelFormat: (label) -> Morris.commas(label)
+        touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
+        @updateHover touch.pageX, touch.pageY
+        return touch
 
-  hoverPosition: (index) ->
+  hitTest: (x, y) -> null
-    [x, y] = @hoverGetPosition index
-
-    @hover.css
-      top: "#{@el.offset().top + y}px"
-      left: "#{@el.offset().left + x}px"
-
-  hoverGetPosition: (index) ->
-    row = @data[index]
-
-    @hoverWidth = @hover.outerWidth(true)
-    @hoverHeight = @hover.outerHeight(true)
-
-    miny = y = Math.min.apply(null, (y for y in row._y when y isnt null).concat(@bottom))
-
-    x = row._x - @hoverWidth/2
-    y = miny
-    y = y - @hoverHeight - @hoverOptions.pointMargin
-
-    unless @hoverOptions.allowOverflow
-      if x < @left
-        x = row._x + @hoverOptions.pointMargin
-      else if x > @right - @hoverWidth
-        x = row._x - @hoverWidth - @hoverOptions.pointMargin
-
-      y = Math.max y, @top
-      y = Math.min y, (@bottom - @hoverHeight - @hoverOptions.pointMargin)
-
-      if y - miny < @hoverWidth + @hoverOptions.pointMargin
-        y = miny + @hoverOptions.pointMargin
-
-    [x, y]
-
-  hoverFill: (index, row) ->
-    xLabel = $ "<h4/>"
-    xLabel.text row.label
-    xLabel.appendTo @hover
-    for y, i in row.y
-      yLabel = $ "<p/>"
-      yLabel.css "color", @colorFor(row, i, "hover")
-      yLabel.text "#{@options.labels[i]}: #{@yLabelFormat(y)}"
-      yLabel.appendTo @hover
 
+  updateHover: (x, y) ->
+    offset = @el.offset()
+    x -= offset.left
+    y -= offset.top
+    hit = hitTest(x, y)
+    if hit?
+      @hover.update(hit...)
 
 # Parse a date into a javascript timestamp
 #

lib/morris.hover.coffee

@@ -9,17 +9,16 @@ class Morris.Hover
     @el = $ "<div class='#{@options.class}'></div>"
     @el.hide()
     @options.parent.append(@el)
+    @el.bind 'mousemove mouseout touchstart touchmove touchend', (evt) ->
+      evt.stopPropagation()
 
-  update: (x, y, data) ->
+  update: (html, x, y) ->
-    @render(data)
+    @html(html)
     @show()
     @moveTo(x, y)
 
-  render: (data) ->
+  html: (content) ->
-    if typeof @options.content is 'function'
+    @el.html(content)
-      @el.html @options.content(data)
-    else
-      @el.html @options.content
 
   moveTo: (x, y) ->
     parentWidth  = @options.parent.innerWidth()

lib/morris.line.coffee

@@ -10,8 +10,6 @@ class Morris.Line extends Morris.Grid
     @pointGrow = Raphael.animation r: @options.pointSize + 3, 25, 'linear'
     @pointShrink = Raphael.animation r: @options.pointSize, 25, 'linear'
 
-    @hoverConfigure @options.hoverOptions
-
     # column hilight events
     if @options.hilight
       @prevHilight = null
@@ -28,9 +26,6 @@ class Morris.Line extends Morris.Grid
       @el.bind 'touchmove', touchHandler
       @el.bind 'touchend', touchHandler
 
-  postInit: ->
-    @hoverInit()
-
   # Default configuration
   #
   defaults:
@@ -60,7 +55,6 @@ class Morris.Line extends Morris.Grid
   # @private
   calc: ->
     @calcPoints()
-    @hoverCalculateMargins()
     @generatePaths()
     @calcHilightMargins()
 
@@ -79,9 +73,6 @@ class Morris.Line extends Morris.Grid
   calcHilightMargins: ->
     @hilightMargins = ((r._x + @data[i]._x) / 2 for r, i in @data.slice(1))
 
-  hoverCalculateMargins: ->
-    @hoverMargins = ((r._x + @data[i]._x) / 2 for r, i in @data.slice(1))
-
   # generate paths for series lines
   #
   # @private

morris.js

@@ -91,6 +91,12 @@
         this.init();
       }
       this.setData(this.options.data);
+      if (this.options.hideHover !== 'always') {
+        this.hover = new Morris.Hover({
+          parent: this.el
+        });
+        this.initHover();
+      }
       if (this.postInit) {
         this.postInit();
       }
@@ -102,6 +108,7 @@
       gridStrokeWidth: 0.5,
       gridTextColor: '#888',
       gridTextSize: 12,
+      hideHover: false,
       numLines: 5,
       padding: 25,
       parseTime: true,
@@ -362,182 +369,39 @@
       return "" + this.options.preUnits + (Morris.commas(label)) + this.options.postUnits;
     };
 
-    Grid.prototype.hoverConfigure = function(options) {
+    Grid.prototype.initHover = function() {
-      return this.hoverOptions = $.extend({}, this.hoverDefaults, options != null ? options : {});
+      var _this = this;
-    };
+      if (this.hover != null) {
-
+        this.el.bind('mousemove', function(evt) {
-    Grid.prototype.hoverInit = function() {
+          return _this.updateHover(evt.pageX, evt.pageY);
-      if (this.hoverOptions.enableHover) {
-        this.hover = this.hoverBuild();
-        this.hoverBindEvents();
-        return this.hoverShow(this.hoverOptions.hideHover ? null : this.data.length - 1);
-      }
-    };
-
-    Grid.prototype.hoverDefaults = {
-      enableHover: true,
-      popupClass: "morris-popup",
-      hideHover: false,
-      allowOverflow: false,
-      pointMargin: 10,
-      hoverFill: function(index, row) {
-        return this.hoverFill(index, row);
-      }
-    };
-
-    Grid.prototype.hoverBindEvents = function() {
-      var touchHandler,
-        _this = this;
-      this.el.mousemove(function(evt) {
-        return _this.hoverUpdate(evt.pageX);
         });
-      if (this.hoverOptions.hideHover) {
+        if (this.options.hideHover) {
-        this.el.mouseout(function(evt) {
+          this.el.bind('mouseout', function(evt) {
-          return _this.hoverShow(null);
+            return _this.hover.hide();
           });
         }
-      touchHandler = function(evt) {
+        return this.el.bind('touchstart touchmove touchend', function(evt) {
           var touch;
           touch = evt.originalEvent.touches[0] || evt.originalEvent.changedTouches[0];
-        _this.hoverUpdate(touch.pageX);
+          _this.updateHover(touch.pageX, touch.pageY);
           return touch;
-      };
-      this.el.bind('touchstart', touchHandler);
-      this.el.bind('touchmove', touchHandler);
-      this.el.bind('touchend', touchHandler);
-      this.hover.mousemove(function(evt) {
-        return evt.stopPropagation();
         });
-      this.hover.mouseout(function(evt) {
-        return evt.stopPropagation();
-      });
-      this.hover.bind('touchstart', function(evt) {
-        return evt.stopPropagation();
-      });
-      this.hover.bind('touchmove', function(evt) {
-        return evt.stopPropagation();
-      });
-      return this.hover.bind('touchend', function(evt) {
-        return evt.stopPropagation();
-      });
-    };
-
-    Grid.prototype.hoverCalculateMargins = function() {
-      var i;
-      return this.hoverMargins = (function() {
-        var _i, _ref, _results;
-        _results = [];
-        for (i = _i = 1, _ref = this.data.length; 1 <= _ref ? _i < _ref : _i > _ref; i = 1 <= _ref ? ++_i : --_i) {
-          _results.push(this.left + i * this.width / this.data.length);
-        }
-        return _results;
-      }).call(this);
-    };
-
-    Grid.prototype.hoverBuild = function() {
-      var hover;
-      hover = $("<div/>");
-      hover.addClass("" + this.hoverOptions.popupClass + " js-morris-popup");
-      hover.appendTo(this.el);
-      hover.hide();
-      return hover;
-    };
-
-    Grid.prototype.hoverUpdate = function(x) {
-      var hoverIndex, _i, _ref;
-      x -= this.el.offset().left;
-      for (hoverIndex = _i = 0, _ref = this.hoverMargins.length; 0 <= _ref ? _i < _ref : _i > _ref; hoverIndex = 0 <= _ref ? ++_i : --_i) {
-        if (this.hoverMargins[hoverIndex] > x) {
-          break;
-        }
-      }
-      return this.hoverShow(hoverIndex);
-    };
-
-    Grid.prototype.hoverShow = function(index) {
-      if (index !== null) {
-        this.hover.html("");
-        this.hoverOptions.hoverFill.call(this, index, this.data[index]);
-        this.hoverPosition(index);
-        this.fire("hover.show", index);
-        this.hover.show();
-      }
-      if (!(index != null)) {
-        return this.hoverHide();
       }
     };
 
-    Grid.prototype.hoverHide = function() {
+    Grid.prototype.hitTest = function(x, y) {
-      return this.hover.hide();
+      return null;
     };
 
-    Grid.prototype.colorFor = function(row, i, type) {
+    Grid.prototype.updateHover = function(x, y) {
-      return "inherit";
+      var hit, offset, _ref;
-    };
+      offset = this.el.offset();
-
+      x -= offset.left;
-    Grid.prototype.yLabelFormat = function(label) {
+      y -= offset.top;
-      return Morris.commas(label);
+      hit = hitTest(x, y);
-    };
+      if (hit != null) {
-
+        return (_ref = this.hover).update.apply(_ref, hit);
-    Grid.prototype.hoverPosition = function(index) {
-      var x, y, _ref;
-      _ref = this.hoverGetPosition(index), x = _ref[0], y = _ref[1];
-      return this.hover.css({
-        top: "" + (this.el.offset().top + y) + "px",
-        left: "" + (this.el.offset().left + x) + "px"
-      });
-    };
-
-    Grid.prototype.hoverGetPosition = function(index) {
-      var miny, row, x, y;
-      row = this.data[index];
-      this.hoverWidth = this.hover.outerWidth(true);
-      this.hoverHeight = this.hover.outerHeight(true);
-      miny = y = Math.min.apply(null, ((function() {
-        var _i, _len, _ref, _results;
-        _ref = row._y;
-        _results = [];
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          y = _ref[_i];
-          if (y !== null) {
-            _results.push(y);
       }
-        }
-        return _results;
-      })()).concat(this.bottom));
-      x = row._x - this.hoverWidth / 2;
-      y = miny;
-      y = y - this.hoverHeight - this.hoverOptions.pointMargin;
-      if (!this.hoverOptions.allowOverflow) {
-        if (x < this.left) {
-          x = row._x + this.hoverOptions.pointMargin;
-        } else if (x > this.right - this.hoverWidth) {
-          x = row._x - this.hoverWidth - this.hoverOptions.pointMargin;
-        }
-        y = Math.max(y, this.top);
-        y = Math.min(y, this.bottom - this.hoverHeight - this.hoverOptions.pointMargin);
-        if (y - miny < this.hoverWidth + this.hoverOptions.pointMargin) {
-          y = miny + this.hoverOptions.pointMargin;
-        }
-      }
-      return [x, y];
-    };
-
-    Grid.prototype.hoverFill = function(index, row) {
-      var i, xLabel, y, yLabel, _i, _len, _ref, _results;
-      xLabel = $("<h4/>");
-      xLabel.text(row.label);
-      xLabel.appendTo(this.hover);
-      _ref = row.y;
-      _results = [];
-      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
-        y = _ref[i];
-        yLabel = $("<p/>");
-        yLabel.css("color", this.colorFor(row, i, "hover"));
-        yLabel.text("" + this.options.labels[i] + ": " + (this.yLabelFormat(y)));
-        _results.push(yLabel.appendTo(this.hover));
-      }
-      return _results;
     };
 
     return Grid;
@@ -615,20 +479,19 @@
       this.el = $("<div class='" + this.options["class"] + "'></div>");
       this.el.hide();
       this.options.parent.append(this.el);
+      this.el.bind('mousemove mouseout touchstart touchmove touchend', function(evt) {
+        return evt.stopPropagation();
+      });
     }
 
-    Hover.prototype.update = function(x, y, data) {
+    Hover.prototype.update = function(html, x, y) {
-      this.render(data);
+      this.html(html);
       this.show();
       return this.moveTo(x, y);
     };
 
-    Hover.prototype.render = function(data) {
+    Hover.prototype.html = function(content) {
-      if (typeof this.options.content === 'function') {
+      return this.el.html(content);
-        return this.el.html(this.options.content(data));
-      } else {
-        return this.el.html(this.options.content);
-      }
     };
 
     Hover.prototype.moveTo = function(x, y) {
@@ -690,7 +553,6 @@
       this.pointShrink = Raphael.animation({
         r: this.options.pointSize
       }, 25, 'linear');
-      this.hoverConfigure(this.options.hoverOptions);
       if (this.options.hilight) {
         this.prevHilight = null;
         this.el.mousemove(function(evt) {
@@ -713,10 +575,6 @@
       }
     };
 
-    Line.prototype.postInit = function() {
-      return this.hoverInit();
-    };
-
     Line.prototype.defaults = {
       lineWidth: 3,
       pointSize: 4,
@@ -734,7 +592,6 @@
 
     Line.prototype.calc = function() {
       this.calcPoints();
-      this.hoverCalculateMargins();
       this.generatePaths();
       return this.calcHilightMargins();
     };
@@ -778,20 +635,6 @@
       }).call(this);
     };
 
-    Line.prototype.hoverCalculateMargins = function() {
-      var i, r;
-      return this.hoverMargins = (function() {
-        var _i, _len, _ref, _results;
-        _ref = this.data.slice(1);
-        _results = [];
-        for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
-          r = _ref[i];
-          _results.push((r._x + this.data[i]._x) / 2);
-        }
-        return _results;
-      }).call(this);
-    };
-
     Line.prototype.generatePaths = function() {
       var c, coords, i, r, smooth;
       return this.paths = (function() {
@@ -1244,12 +1087,7 @@
     }
 
     Bar.prototype.init = function() {
-      this.cumulative = this.options.stacked;
+      return this.cumulative = this.options.stacked;
-      return this.hoverConfigure(this.options.hoverOptions);
-    };
-
-    Bar.prototype.postInit = function() {
-      return this.hoverInit();
     };
 
     Bar.prototype.defaults = {
@@ -1259,8 +1097,7 @@
     };
 
     Bar.prototype.calc = function() {
-      this.calcBars();
+      return this.calcBars();
-      return this.hoverCalculateMargins();
     };
 
     Bar.prototype.calcBars = function() {
@@ -1380,12 +1217,6 @@
       }
     };
 
-    Bar.prototype.hoverGetPosition = function(index) {
-      var x, y, _ref;
-      _ref = Bar.__super__.hoverGetPosition.call(this, index), x = _ref[0], y = _ref[1];
-      return [x, (this.top + this.bottom) / 2 - this.hoverHeight / 2];
-    };
-
     return Bar;
 
   })(Morris.Grid);

spec/lib/hover_spec.coffee

@@ -3,11 +3,9 @@ describe "Morris.Hover", ->
   describe "with dummy content", ->
 
     beforeEach ->
-      @parent = $('<div style="width:200px;height:180px"></div>')
+      parent = $('<div style="width:200px;height:180px"></div>')
         .appendTo($('#test'))
-      @hover = new Morris.Hover(
+      @hover = new Morris.Hover(parent:  parent)
-        parent:  @parent,
-        content: '<div style="width:84px;height:84px"></div>')
       @element = $('#test .morris-popup')
 
     it "should initialise a hidden, empty popup", ->
@@ -26,8 +24,14 @@ describe "Morris.Hover", ->
         @hover.hide()
         @element.should.be.hidden
 
+    describe "#html", ->
+      it "should replace the contents of the element", ->
+        @hover.html('<div>Foobarbaz</div>')
+        @element.should.have.html('<div>Foobarbaz</div>')
+
     describe "#moveTo", ->
-      beforeEach -> @hover.render()
+      beforeEach ->
+        @hover.html('<div style="width:84px;height:84px"></div>')
 
       it "should place the popup directly above the given point", ->
         @hover.moveTo(100, 150)
@@ -49,23 +53,11 @@ describe "Morris.Hover", ->
         @element.should.have.css('left', '50px')
         @element.should.have.css('top', '40px')
 
-  describe "#render", ->
-    it "should take content from a string", ->
-      hover = new Morris.Hover(parent: $('#test'), content: 'Hello, World!')
-      hover.render()
-      $('#test .morris-popup').html().should.equal 'Hello, World!'
-
-    it "should take content from a method", ->
-      hover = new Morris.Hover(parent: $('#test'), content: (x) -> "Hello, #{x}!")
-      hover.render('Tester')
-      $('#test .morris-popup').html().should.equal 'Hello, Tester!'
-
   describe "#update", ->
     it "should update content, show and reposition the popup", ->
-      hover = new Morris.Hover
+      hover = new Morris.Hover(parent: $('#test'))
-        parent:  $('#test')
+      html = "<div style='width:84px;height:84px'>Hello, Everyone!</div>"
-        content: (x) -> "<div style='width:84px;height:84px'>Hello, #{x}!</div>"
+      hover.update(html, 150, 200)
-      hover.update(150, 200, 'Everyone')
       el = $('#test .morris-popup')
       el.should.have.css('left', '100px')
       el.should.have.css('top', '90px')