Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-11-10 21:36:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Smarter hover placement.

Browse Source
This commit is contained in:
Olly Smith 2012-12-11 18:25:18 +00:00
parent 6787fa7cff
commit e0691b93d3
4 changed files with 55 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
lib/morris.hover.coffee
View File

@ -22,9 +22,20 @@ class Morris.Hover
@el.html @options.content
moveTo: (x, y) ->
@el.css(
left: (x - @el.outerWidth() / 2) + "px"
top: (y - @el.outerHeight() - 10) + "px")
parentWidth = @options.parent.innerWidth()
parentHeight = @options.parent.innerHeight()
hoverWidth = @el.outerWidth()
hoverHeight = @el.outerHeight()
left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth)
if y?
top = y - hoverHeight - 10
if top < 0
top = y + 10
if top + hoverHeight > parentHeight
top = parentHeight / 2 - hoverHeight / 2
else
top = parentHeight / 2 - hoverHeight / 2
@el.css(left: left + "px", top: top + "px")
show: ->
@el.show()

21
morris.js
View File

@ -632,9 +632,26 @@
};
Hover.prototype.moveTo = function(x, y) {
var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
parentWidth = this.options.parent.innerWidth();
parentHeight = this.options.parent.innerHeight();
hoverWidth = this.el.outerWidth();
hoverHeight = this.el.outerHeight();
left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
if (y != null) {
top = y - hoverHeight - 10;
if (top < 0) {
top = y + 10;
if (top + hoverHeight > parentHeight) {
top = parentHeight / 2 - hoverHeight / 2;
}
}
} else {
top = parentHeight / 2 - hoverHeight / 2;
}
return this.el.css({
left: (x - this.el.outerWidth() / 2) + "px",
top: (y - this.el.outerHeight() - 10) + "px"
left: left + "px",
top: top + "px"
});
};

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
spec/lib/hover_spec.coffee
View File

@ -3,8 +3,10 @@ describe "Morris.Hover", ->
describe "with dummy content", ->
beforeEach ->
@parent = $('<div style="width:200px;height:180px"></div>')
.appendTo($('#test'))
@hover = new Morris.Hover(
parent: $('#test'),
parent: @parent,
content: '<div style="width:84px;height:84px"></div>')
@element = $('#test .morris-popup')
@ -25,12 +27,28 @@ describe "Morris.Hover", ->
@element.should.be.hidden
describe "#moveTo", ->
it "should hover the popup directly above the given point", ->
@hover.render()
beforeEach -> @hover.render()
it "should place the popup directly above the given point", ->
@hover.moveTo(100, 150)
@element.should.have.css('left', '50px')
@element.should.have.css('top', '40px')
it "should place the popup below the given point if it does not fit above", ->
@hover.moveTo(100, 50)
@element.should.have.css('left', '50px')
@element.should.have.css('top', '60px')
it "should center the popup vertically if it will not fit above or below", ->
@hover.moveTo(100, 100)
@element.should.have.css('left', '50px')
@element.should.have.css('top', '40px')
it "should center the popup vertically if no y value is supplied", ->
@hover.moveTo(100)
@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!')