Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
4chan_x.user.js
View File

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

18
script.coffee
View File

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