Reposition image hovering once the image is loaded. Close #237.

This commit is contained in:
Nicolas Stepien 2012-02-18 20:53:46 +01:00
parent 24440ad0ad
commit 34402bb3d4
2 changed files with 28 additions and 10 deletions

View File

@ -273,8 +273,8 @@
_ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
height = el.offsetHeight;
top = clientY - 120;
style.top = clientHeight < height || top < 0 ? 0 : top + height > clientHeight ? clientHeight - height : top;
if (clientX < clientWidth - 400) {
style.top = clientHeight <= height || top <= 0 ? 0 : top + height >= clientHeight ? clientHeight - height : top;
if (clientX <= clientWidth - 400) {
style.left = clientX + 45;
return style.right = null;
} else {
@ -283,7 +283,8 @@
}
},
hoverend: function() {
return ui.el.parentNode.removeChild(ui.el);
$.rm(ui.el);
return delete ui.el;
}
};
@ -3320,9 +3321,18 @@
id: 'ihover',
src: this.parentNode.href
});
$.add(d.body, ui.el);
$.on(ui.el, 'load', imgHover.load);
$.on(this, 'mousemove', ui.hover);
$.on(this, 'mouseout', imgHover.mouseout);
return $.add(d.body, ui.el);
return $.on(this, 'mouseout', imgHover.mouseout);
},
load: function() {
var style;
style = this.style;
return ui.hover({
clientX: -45 + parseInt(style.left),
clientY: 120 + parseInt(style.top)
});
},
mouseout: function() {
ui.hoverend();

View File

@ -196,14 +196,14 @@ ui =
top = clientY - 120
style.top =
if clientHeight < height or top < 0
if clientHeight <= height or top <= 0
0
else if top + height > clientHeight
else if top + height >= clientHeight
clientHeight - height
else
top
if clientX < clientWidth - 400
if clientX <= clientWidth - 400
style.left = clientX + 45
style.right = null
else
@ -211,7 +211,8 @@ ui =
style.right = clientWidth - clientX + 45
hoverend: ->
ui.el.parentNode.removeChild ui.el
$.rm ui.el
delete ui.el
###
loosely follows the jquery api:
@ -2616,9 +2617,16 @@ imgHover =
ui.el = $.el 'img'
id: 'ihover'
src: @parentNode.href
$.add d.body, ui.el
$.on ui.el, 'load', imgHover.load
$.on @, 'mousemove', ui.hover
$.on @, 'mouseout', imgHover.mouseout
$.add d.body, ui.el
load: ->
# 'Fake' mousemove event by giving required values.
{style} = @
ui.hover
clientX: - 45 + parseInt style.left
clientY: 120 + parseInt style.top
mouseout: ->
ui.hoverend()
$.off @, 'mousemove', ui.hover