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

Fix UI and other document visible dimension values.

Browse Source
This commit is contained in:
Nicolas Stepien 2012-05-02 03:04:17 +02:00
parent f2631c9de1
commit 8bbddc262e
2 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
4chan_x.user.js
View File

@ -217,22 +217,21 @@
rect = el.getBoundingClientRect(); rect = el.getBoundingClientRect();
UI.dx = e.clientX - rect.left; UI.dx = e.clientX - rect.left;
UI.dy = e.clientY - rect.top; UI.dy = e.clientY - rect.top;
UI.width = d.body.clientWidth - el.offsetWidth; UI.width = d.documentElement.clientWidth - rect.width;
return UI.height = d.body.clientHeight - el.offsetHeight; return UI.height = d.documentElement.clientHeight - rect.height;
}, },
drag: function(e) { drag: function(e) {
var bottom, left, right, style, top; var left, style, top;
left = e.clientX - UI.dx; left = e.clientX - UI.dx;
top = e.clientY - UI.dy; top = e.clientY - UI.dy;
left = left < 10 ? 0 : UI.width - left < 10 ? null : left; left = left < 10 ? '0px' : UI.width - left < 10 ? null : left + 'px';
top = top < 10 ? 0 : UI.height - top < 10 ? null : top; top = top < 10 ? '0px' : UI.height - top < 10 ? null : top + 'px';
right = left === null ? 0 : null;
bottom = top === null ? 0 : null;
style = UI.el.style; style = UI.el.style;
$.log(left, top);
style.left = left;
style.top = top; style.top = top;
style.right = right; style.right = left === null ? '0px' : null;
style.bottom = bottom; return style.bottom = top === null ? '0px' : null;
return style.left = left;
}, },
dragend: function() { dragend: function() {
var el; var el;
@ -242,20 +241,19 @@
return d.removeEventListener('mouseup', UI.dragend, false); return d.removeEventListener('mouseup', UI.dragend, false);
}, },
hover: function(e) { hover: function(e) {
var clientHeight, clientWidth, clientX, clientY, el, height, style, top, _ref; var clientHeight, clientWidth, clientX, clientY, height, style, top, _ref;
clientX = e.clientX, clientY = e.clientY; clientX = e.clientX, clientY = e.clientY;
el = UI.el; style = UI.el.style;
style = el.style; _ref = d.documentElement, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
_ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth; height = UI.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 ? '0px' : top + height >= clientHeight ? clientHeight - height + 'px' : top + 'px';
if (clientX <= clientWidth - 400) { if (clientX <= clientWidth - 400) {
style.left = clientX + 45; style.left = clientX + 45 + 'px';
return style.right = null; return style.right = null;
} else { } else {
style.left = null; style.left = null;
return style.right = clientWidth - clientX + 45; return style.right = clientWidth - clientX + 45 + 'px';
} }
}, },
hoverend: function() { hoverend: function() {
@ -1286,7 +1284,7 @@
td.className = 'reply'; td.className = 'reply';
td.removeAttribute('tabindex'); td.removeAttribute('tabindex');
rect = td.getBoundingClientRect(); rect = td.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top <= d.body.clientHeight) { if (rect.bottom >= 0 && rect.top <= d.documentElement.clientHeight) {
next = delta === +1 ? $.x('following::td[@class="reply"]', td) : $.x('preceding::td[@class="reply"]', td); next = delta === +1 ? $.x('following::td[@class="reply"]', td) : $.x('preceding::td[@class="reply"]', td);
if (!next) { if (!next) {
td.className = 'replyhl'; td.className = 'replyhl';
@ -1298,7 +1296,7 @@
return; return;
} }
rect = next.getBoundingClientRect(); rect = next.getBoundingClientRect();
if (rect.top < 0 || rect.bottom > d.body.clientHeight) { if (rect.top < 0 || rect.bottom > d.documentElement.clientHeight) {
next.scrollIntoView(delta === -1); next.scrollIntoView(delta === -1);
} }
next.className = 'replyhl'; next.className = 'replyhl';
@ -1314,7 +1312,7 @@
for (_i = 0, _len = replies.length; _i < _len; _i++) { for (_i = 0, _len = replies.length; _i < _len; _i++) {
reply = replies[_i]; reply = replies[_i];
rect = reply.getBoundingClientRect(); rect = reply.getBoundingClientRect();
if (delta === +1 && rect.top >= 0 || delta === -1 && rect.bottom <= d.body.clientHeight) { if (delta === +1 && rect.top >= 0 || delta === -1 && rect.bottom <= d.documentElement.clientHeight) {
reply.className = 'replyhl'; reply.className = 'replyhl';
reply.tabIndex = 0; reply.tabIndex = 0;
reply.focus(); reply.focus();
@ -2561,7 +2559,7 @@
nodes.push(reply); nodes.push(reply);
} }
count = nodes.length; count = nodes.length;
scroll = Conf['Scrolling'] && Updater.scrollBG() && count && lastPost.getBoundingClientRect().bottom - d.body.clientHeight < 25; scroll = Conf['Scrolling'] && Updater.scrollBG() && count && lastPost.getBoundingClientRect().bottom - d.documentElement.clientHeight < 25;
if (Conf['Verbose']) { if (Conf['Verbose']) {
Updater.count.textContent = "+" + count; Updater.count.textContent = "+" + count;
Updater.count.className = count ? 'new' : null; Updater.count.className = count ? 'new' : null;
@ -3883,7 +3881,7 @@
return $.prepend($.id('delform'), controls); return $.prepend($.id('delform'), controls);
}, },
resize: function() { resize: function() {
return ImageExpand.style.textContent = ".fitheight img[data-md5] + img {max-height:" + d.body.clientHeight + "px;}"; return ImageExpand.style.textContent = ".fitheight img[data-md5] + img {max-height:" + d.documentElement.clientHeight + "px;}";
} }
}; };

57
script.coffee
View File

@ -175,32 +175,30 @@ UI =
d.addEventListener 'mouseup', UI.dragend, false d.addEventListener 'mouseup', UI.dragend, false
#distance from pointer to el edge is constant; calculate it here. #distance from pointer to el edge is constant; calculate it here.
# XXX opera reports el.offsetLeft / el.offsetTop as 0 # XXX opera reports el.offsetLeft / el.offsetTop as 0
rect = el.getBoundingClientRect() rect = el.getBoundingClientRect()
UI.dx = e.clientX - rect.left UI.dx = e.clientX - rect.left
UI.dy = e.clientY - rect.top UI.dy = e.clientY - rect.top
#factor out el from document dimensions UI.width = d.documentElement.clientWidth - rect.width
UI.width = d.body.clientWidth - el.offsetWidth UI.height = d.documentElement.clientHeight - rect.height
UI.height = d.body.clientHeight - el.offsetHeight
drag: (e) -> drag: (e) ->
left = e.clientX - UI.dx left = e.clientX - UI.dx
top = e.clientY - UI.dy top = e.clientY - UI.dy
left = left =
if left < 10 then 0 if left < 10 then '0px'
else if UI.width - left < 10 then null else if UI.width - left < 10 then null
else left else left + 'px'
top = top =
if top < 10 then 0 if top < 10 then '0px'
else if UI.height - top < 10 then null else if UI.height - top < 10 then null
else top else top + 'px'
right = if left is null then 0 else null
bottom = if top is null then 0 else null
#using null instead of '' is 4% faster #using null instead of '' is 4% faster
#these 4 statements are 40% faster than 1 style.cssText #these 4 statements are 40% faster than 1 style.cssText
{style} = UI.el {style} = UI.el
style.top = top $.log left, top
style.right = right
style.bottom = bottom
style.left = left style.left = left
style.top = top
style.right = if left is null then '0px' else null
style.bottom = if top is null then '0px' else null
dragend: -> dragend: ->
#$ coffee -bpe '{a} = {b} = c' #$ coffee -bpe '{a} = {b} = c'
#var a, b; #var a, b;
@ -211,26 +209,25 @@ UI =
d.removeEventListener 'mouseup', UI.dragend, false d.removeEventListener 'mouseup', UI.dragend, false
hover: (e) -> hover: (e) ->
{clientX, clientY} = e {clientX, clientY} = e
{el} = UI {style} = UI.el
{style} = el {clientHeight, clientWidth} = d.documentElement
{clientHeight, clientWidth} = d.body height = UI.el.offsetHeight
height = el.offsetHeight
top = clientY - 120 top = clientY - 120
style.top = style.top =
if clientHeight <= height or top <= 0 if clientHeight <= height or top <= 0
0 '0px'
else if top + height >= clientHeight else if top + height >= clientHeight
clientHeight - height clientHeight - height + 'px'
else else
top top + 'px'
if clientX <= clientWidth - 400 if clientX <= clientWidth - 400
style.left = clientX + 45 style.left = clientX + 45 + 'px'
style.right = null style.right = null
else else
style.left = null style.left = null
style.right = clientWidth - clientX + 45 style.right = clientWidth - clientX + 45 + 'px'
hoverend: -> hoverend: ->
$.rm UI.el $.rm UI.el
@ -969,7 +966,7 @@ Keybinds =
td.className = 'reply' td.className = 'reply'
td.removeAttribute 'tabindex' td.removeAttribute 'tabindex'
rect = td.getBoundingClientRect() rect = td.getBoundingClientRect()
if rect.bottom >= 0 and rect.top <= d.body.clientHeight # We're at least partially visible if rect.bottom >= 0 and rect.top <= d.documentElement.clientHeight # We're at least partially visible
next = next =
if delta is +1 if delta is +1
$.x 'following::td[@class="reply"]', td $.x 'following::td[@class="reply"]', td
@ -982,7 +979,7 @@ Keybinds =
return return
return unless g.REPLY or $.x('ancestor::div[@class="thread"]', next) is thread return unless g.REPLY or $.x('ancestor::div[@class="thread"]', next) is thread
rect = next.getBoundingClientRect() rect = next.getBoundingClientRect()
if rect.top < 0 or rect.bottom > d.body.clientHeight if rect.top < 0 or rect.bottom > d.documentElement.clientHeight
next.scrollIntoView delta is -1 next.scrollIntoView delta is -1
next.className = 'replyhl' next.className = 'replyhl'
next.tabIndex = 0 next.tabIndex = 0
@ -993,7 +990,7 @@ Keybinds =
replies.reverse() if delta is -1 replies.reverse() if delta is -1
for reply in replies for reply in replies
rect = reply.getBoundingClientRect() rect = reply.getBoundingClientRect()
if delta is +1 and rect.top >= 0 or delta is -1 and rect.bottom <= d.body.clientHeight if delta is +1 and rect.top >= 0 or delta is -1 and rect.bottom <= d.documentElement.clientHeight
reply.className = 'replyhl' reply.className = 'replyhl'
reply.tabIndex = 0 reply.tabIndex = 0
reply.focus() reply.focus()
@ -2037,7 +2034,7 @@ Updater =
count = nodes.length count = nodes.length
scroll = Conf['Scrolling'] && Updater.scrollBG() && count && scroll = Conf['Scrolling'] && Updater.scrollBG() && count &&
lastPost.getBoundingClientRect().bottom - d.body.clientHeight < 25 lastPost.getBoundingClientRect().bottom - d.documentElement.clientHeight < 25
if Conf['Verbose'] if Conf['Verbose']
Updater.count.textContent = "+#{count}" Updater.count.textContent = "+#{count}"
Updater.count.className = if count then 'new' else null Updater.count.className = if count then 'new' else null
@ -2967,7 +2964,7 @@ ImageExpand =
$.prepend $.id('delform'), controls $.prepend $.id('delform'), controls
resize: -> resize: ->
ImageExpand.style.textContent = ".fitheight img[data-md5] + img {max-height:#{d.body.clientHeight}px;}" ImageExpand.style.textContent = ".fitheight img[data-md5] + img {max-height:#{d.documentElement.clientHeight}px;}"
Main = Main =
init: -> init: ->