WIP: HTML hover refactor.

- Morris.Hover now encapsulates the hover object, with no graph-specific
  code.
- Tests for Morris.Hover.
- Add chai-jquery to test suite.

less/morris.core.less

@@ -1,19 +1,9 @@
-div.morris-popup {
-    border-radius: 10px;
-    position: absolute;
-    z-index: 1000;
-    padding: 6px;
-    font: normal 13px/16px Arial, sans-serif;
-    color: #666;
-    background: rgba(255,255,255,.8);
-    border: solid 2px rgba(230,230,230,.8);
-    
-    h4, p {
-        font: normal 13px/16px Arial, sans-serif;
-        text-align: center;
-        color: #666;
-        margin: 0;
-    }
-    
-    h4 { font-weight: bold; }
-}
+.morris-popup {
+  border-radius: 10px;
+  position: absolute;
+  z-index: 1000;
+  padding: 6px;
+  color: #666;
+  background: rgba(255, 255, 255, 0.8);
+  border: solid 2px rgba(230, 230, 230, 0.8);
+}

lib/morris.hover.coffee

@@ -1,22 +1,33 @@
 class Morris.Hover
   # Displays contextual information in a floating HTML div.
-  #
+
+  @defaults:
+    class: 'morris-popup'
+
   constructor: (options = {}) ->
     @options = $.extend {}, Morris.Hover.defaults, options
     @el = $ "<div class='#{@options.class}'></div>"
     @el.hide()
+    @options.parent.append(@el)
 
-  @defaults:
-    class: 'morris-popup'
-    allowOverflow: false
+  update: (x, y, data) ->
+    @render(data)
+    @show()
+    @moveTo(x, y)
 
-  show: (x, y, data) ->
+  render: (data) ->
     if typeof @options.content is 'function'
       @el.html @options.content(data)
     else
       @el.html @options.content
+
+  moveTo: (x, y) ->
+    @el.css(
+      left: (x - @el.outerWidth() / 2) + "px"
+      top:  (y - @el.outerHeight() - 10) + "px")
+
+  show: ->
     @el.show()
 
   hide: ->
     @el.hide()
-

morris.css

@@ -1,2 +1 @@
-div.morris-popup{border-radius:10px;position:absolute;z-index:1000;padding:6px;font:normal 13px/16px Arial,sans-serif;color:#666;background:rgba(255, 255, 255, 0.8);border:solid 2px rgba(230, 230, 230, 0.8);}div.morris-popup h4,div.morris-popup p{font:normal 13px/16px Arial,sans-serif;text-align:center;color:#666;margin:0;}
-div.morris-popup h4{font-weight:bold;}
+.morris-popup{border-radius:10px;position:absolute;z-index:1000;padding:6px;color:#666;background:rgba(255, 255, 255, 0.8);border:solid 2px rgba(230, 230, 230, 0.8);}

morris.js

@@ -603,6 +603,10 @@
 
   Morris.Hover = (function() {
 
+    Hover.defaults = {
+      "class": 'morris-popup'
+    };
+
     function Hover(options) {
       if (options == null) {
         options = {};
@@ -610,19 +614,31 @@
       this.options = $.extend({}, Morris.Hover.defaults, options);
       this.el = $("<div class='" + this.options["class"] + "'></div>");
       this.el.hide();
+      this.options.parent.append(this.el);
     }
 
-    Hover.defaults = {
-      "class": 'morris-popup',
-      allowOverflow: false
+    Hover.prototype.update = function(x, y, data) {
+      this.render(data);
+      this.show();
+      return this.moveTo(x, y);
     };
 
-    Hover.prototype.show = function(x, y, data) {
+    Hover.prototype.render = function(data) {
       if (typeof this.options.content === 'function') {
-        this.el.html(this.options.content(data));
+        return this.el.html(this.options.content(data));
       } else {
-        this.el.html(this.options.content);
+        return this.el.html(this.options.content);
       }
+    };
+
+    Hover.prototype.moveTo = function(x, y) {
+      return this.el.css({
+        left: (x - this.el.outerWidth() / 2) + "px",
+        top: (y - this.el.outerHeight() - 10) + "px"
+      });
+    };
+
+    Hover.prototype.show = function() {
       return this.el.show();
     };
 

spec/lib/hover_spec.coffee

@@ -0,0 +1,54 @@
+describe "Morris.Hover", ->
+
+  describe "with dummy content", ->
+
+    beforeEach ->
+      @hover = new Morris.Hover(
+        parent:  $('#test'),
+        content: '<div style="width:84px;height:84px"></div>')
+      @element = $('#test .morris-popup')
+
+    it "should initialise a hidden, empty popup", ->
+      @element.should.exist
+      @element.should.be.hidden
+      @element.should.be.empty
+
+    describe "#show", ->
+      it "should show the popup", ->
+        @hover.show()
+        @element.should.be.visible
+
+    describe "#hide", ->
+      it "should hide the popup", ->
+        @hover.show()
+        @hover.hide()
+        @element.should.be.hidden
+
+    describe "#moveTo", ->
+      it "should hover the popup directly above the given point", ->
+        @hover.render()
+        @hover.moveTo(100, 150)
+        @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
+        parent:  $('#test')
+        content: (x) -> "<div style='width:84px;height:84px'>Hello, #{x}!</div>"
+      hover.update(150, 200, 'Everyone')
+      el = $('#test .morris-popup')
+      el.should.have.css('left', '100px')
+      el.should.have.css('top', '90px')
+      el.should.have.text('Hello, Everyone!')

spec/specs.html

@@ -3,6 +3,7 @@
   <meta charset="utf-8">
   <title>morris.js tests</title>
   <link rel="stylesheet" href="vendor/mocha-1.6.0.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="../morris.css" type="text/css" media="screen" />
   <script src="vendor/jquery-1.8.2.min.js"></script>
   <script type="text/javascript" src="vendor/raphael-2.1.0.min.js"></script>
 </head>
@@ -15,6 +16,7 @@
   </script>
 
   <script type="text/javascript" src="vendor/chai-1.3.0.js"></script>
+  <script type="text/javascript" src="vendor/chai-jquery-1.1.0.js"></script>
   <script type="text/javascript" src="vendor/sinon-1.5.0.js"></script>
   <script type="text/javascript" src="vendor/sinon-chai-2.1.2.js"></script>
   <script>
@@ -23,7 +25,7 @@
 
   <script type="text/javascript" src="../morris.js"></script>
   <script type="text/javascript" src="../build/spec.js"></script>
-  <div id="test" style="visibility: hidden"></div>
+  <div id="test" style="width: 400px; height: 200px;"></div>
   <script>
     if (navigator.userAgent.indexOf('PhantomJS') < 0) {
       mocha.run();

spec/vendor/chai-jquery-1.1.0.js

@@ -0,0 +1,232 @@
+(function (chaiJquery) {
+  // Module systems magic dance.
+  if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
+    // NodeJS
+    module.exports = chaiJquery;
+  } else if (typeof define === "function" && define.amd) {
+    // AMD
+    define(function () {
+      return chaiJquery;
+    });
+  } else {
+    // Other environment (usually <script> tag): plug in to global chai instance directly.
+    chai.use(chaiJquery);
+  }
+}(function (chai, utils) {
+  var inspect = utils.inspect,
+      flag = utils.flag;
+
+  jQuery.fn.inspect = function (depth) {
+    var el = jQuery('<div />').append(this.clone());
+    if (depth) {
+      var children = el.children();
+      while (depth-- > 0)
+        children = children.children();
+      children.html('...');
+    }
+    return el.html();
+  };
+
+  var props = {attr: 'attribute', css: 'CSS property'};
+  for (var prop in props) {
+    (function (prop, description) {
+      chai.Assertion.addMethod(prop, function (name, val) {
+        var actual = flag(this, 'object')[prop](name);
+
+        if (!flag(this, 'negate') || undefined === val) {
+          this.assert(
+              undefined !== actual
+            , 'expected #{this} to have a #{exp} ' + description
+            , 'expected #{this} not to have a #{exp} ' + description
+            , name
+          );
+        }
+
+        if (undefined !== val) {
+          this.assert(
+              val === actual
+            , 'expected #{this} to have a ' + inspect(name) + ' ' + description + ' with the value #{exp}, but the value was #{act}'
+            , 'expected #{this} not to have a ' + inspect(name) + ' ' + description + ' with the value #{act}'
+            , val
+            , actual
+          );
+        }
+
+        flag(this, 'object', actual);
+      });
+    })(prop, props[prop]);
+  }
+
+  chai.Assertion.addMethod('data', function (name, val) {
+    // Work around a chai bug (https://github.com/logicalparadox/chai/issues/16)
+    if (flag(this, 'negate') && undefined !== val && undefined === flag(this, 'object').data(name)) {
+      return;
+    }
+
+    var assertion = new chai.Assertion(flag(this, 'object').data());
+    if (flag(this, 'negate'))
+      assertion = assertion.not;
+    return assertion.property(name, val);
+  });
+
+  chai.Assertion.addMethod('class', function (className) {
+    this.assert(
+        flag(this, 'object').hasClass(className)
+      , 'expected #{this} to have class #{exp}'
+      , 'expected #{this} not to have class #{exp}'
+      , className
+    );
+  });
+
+  chai.Assertion.addMethod('id', function (id) {
+    this.assert(
+        flag(this, 'object').attr('id') === id
+      , 'expected #{this} to have id #{exp}'
+      , 'expected #{this} not to have id #{exp}'
+      , id
+    );
+  });
+
+  chai.Assertion.addMethod('html', function (html) {
+    this.assert(
+        flag(this, 'object').html() === html
+      , 'expected #{this} to have HTML #{exp}'
+      , 'expected #{this} not to have HTML #{exp}'
+      , html
+    );
+  });
+
+  chai.Assertion.addMethod('text', function (text) {
+    this.assert(
+        flag(this, 'object').text() === text
+      , 'expected #{this} to have text #{exp}'
+      , 'expected #{this} not to have text #{exp}'
+      , text
+    );
+  });
+
+  chai.Assertion.addMethod('value', function (value) {
+    this.assert(
+        flag(this, 'object').val() === value
+      , 'expected #{this} to have value #{exp}'
+      , 'expected #{this} not to have value #{exp}'
+      , value
+    );
+  });
+
+  jQuery.each(['visible', 'hidden', 'selected', 'checked', 'disabled'], function (i, attr) {
+    chai.Assertion.addProperty(attr, function () {
+      this.assert(
+          flag(this, 'object').is(':' + attr)
+        , 'expected #{this} to be ' + attr
+        , 'expected #{this} not to be ' + attr);
+    });
+  });
+
+  chai.Assertion.overwriteProperty('exist', function (_super) {
+    return function () {
+      var obj = flag(this, 'object');
+      if (obj instanceof jQuery) {
+        this.assert(
+            obj.length > 0
+          , 'expected ' + inspect(obj.selector) + ' to exist'
+          , 'expected ' + inspect(obj.selector) + ' not to exist');
+      } else {
+        _super.apply(this, arguments);
+      }
+    };
+  });
+
+  chai.Assertion.overwriteProperty('empty', function (_super) {
+    return function () {
+      var obj = flag(this, 'object');
+      if (obj instanceof jQuery) {
+        this.assert(
+          obj.is(':empty')
+          , 'expected #{this} to be empty'
+          , 'expected #{this} not to be empty');
+      } else {
+        _super.apply(this, arguments);
+      }
+    };
+  });
+
+  chai.Assertion.overwriteProperty('be', function (_super) {
+    return function () {
+      var be = function (selector) {
+        var obj = flag(this, 'object');
+        if (obj instanceof jQuery) {
+          this.assert(
+              obj.is(selector)
+            , 'expected #{this} to be #{exp}'
+            , 'expected #{this} not to be #{exp}'
+            , selector
+          );
+        } else {
+          _super.apply(this, arguments);
+        }
+      };
+      be.__proto__ = this;
+      return be;
+    }
+  });
+
+  chai.Assertion.overwriteMethod('match', function (_super) {
+    return function (selector) {
+      var obj = flag(this, 'object');
+      if (obj instanceof jQuery) {
+        this.assert(
+            obj.is(selector)
+          , 'expected #{this} to match #{exp}'
+          , 'expected #{this} not to match #{exp}'
+          , selector
+        );
+      } else {
+        _super.apply(this, arguments);
+      }
+    }
+  });
+
+  chai.Assertion.overwriteProperty('contain', function (_super) {
+    return function () {
+      _super.call(this);
+      var contain = function (text) {
+        var obj = flag(this, 'object');
+        if (obj instanceof jQuery) {
+          this.assert(
+              obj.is(':contains(\'' + text + '\')')
+            , 'expected #{this} to contain #{exp}'
+            , 'expected #{this} not to contain #{exp}'
+            , text
+          );
+        } else {
+          Function.prototype.apply.call(_super.call(this), this, arguments);
+        }
+      };
+      contain.__proto__ = this;
+      return contain;
+    }
+  });
+
+  chai.Assertion.overwriteProperty('have', function (_super) {
+    return function () {
+      var obj = flag(this, 'object');
+      if (obj instanceof jQuery) {
+        var have = function (selector) {
+          this.assert(
+              // Using find() rather than has() to work around a jQuery bug:
+              //   http://bugs.jquery.com/ticket/11706
+              obj.find(selector).length > 0
+            , 'expected #{this} to have #{exp}'
+            , 'expected #{this} not to have #{exp}'
+            , selector
+          );
+        };
+        have.__proto__ = this;
+        return have;
+      } else {
+        _super.call(this);
+      }
+    }
+  });
+}));