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();
UI.dx = e.clientX - rect.left;
UI.dy = e.clientY - rect.top;
UI.width = d.body.clientWidth - el.offsetWidth;
return UI.height = d.body.clientHeight - el.offsetHeight;
UI.width = d.documentElement.clientWidth - rect.width;
return UI.height = d.documentElement.clientHeight - rect.height;
},
drag: function(e) {
var bottom, left, right, style, top;
var left, style, top;
left = e.clientX - UI.dx;
top = e.clientY - UI.dy;
left = left < 10 ? 0 : UI.width - left < 10 ? null : left;
top = top < 10 ? 0 : UI.height - top < 10 ? null : top;
right = left === null ? 0 : null;
bottom = top === null ? 0 : null;
left = left < 10 ? '0px' : UI.width - left < 10 ? null : left + 'px';
top = top < 10 ? '0px' : UI.height - top < 10 ? null : top + 'px';
style = UI.el.style;
$.log(left, top);
style.left = left;
style.top = top;
style.right = right;
style.bottom = bottom;
return style.left = left;
style.right = left === null ? '0px' : null;
return style.bottom = top === null ? '0px' : null;
},
dragend: function() {
var el;
@ -242,20 +241,19 @@
return d.removeEventListener('mouseup', UI.dragend, false);
},
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;
el = UI.el;
style = el.style;
_ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
height = el.offsetHeight;
style = UI.el.style;
_ref = d.documentElement, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
height = UI.el.offsetHeight;
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) {
style.left = clientX + 45;
style.left = clientX + 45 + 'px';
return style.right = null;
} else {
style.left = null;
return style.right = clientWidth - clientX + 45;
return style.right = clientWidth - clientX + 45 + 'px';
}
},
hoverend: function() {
@ -1286,7 +1284,7 @@
td.className = 'reply';
td.removeAttribute('tabindex');
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);
if (!next) {
td.className = 'replyhl';
@ -1298,7 +1296,7 @@
return;
}
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.className = 'replyhl';
@ -1314,7 +1312,7 @@
for (_i = 0, _len = replies.length; _i < _len; _i++) {
reply = replies[_i];
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.tabIndex = 0;
reply.focus();
@ -2561,7 +2559,7 @@
nodes.push(reply);
}
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']) {
Updater.count.textContent = "+" + count;
Updater.count.className = count ? 'new' : null;
@ -3883,7 +3881,7 @@
return $.prepend($.id('delform'), controls);
},
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
#distance from pointer to el edge is constant; calculate it here.
# XXX opera reports el.offsetLeft / el.offsetTop as 0
rect = el.getBoundingClientRect()
UI.dx = e.clientX - rect.left
UI.dy = e.clientY - rect.top
#factor out el from document dimensions
UI.width = d.body.clientWidth - el.offsetWidth
UI.height = d.body.clientHeight - el.offsetHeight
rect = el.getBoundingClientRect()
UI.dx = e.clientX - rect.left
UI.dy = e.clientY - rect.top
UI.width = d.documentElement.clientWidth - rect.width
UI.height = d.documentElement.clientHeight - rect.height
drag: (e) ->
left = e.clientX - UI.dx
top = e.clientY - UI.dy
top = e.clientY - UI.dy
left =
if left < 10 then 0
if left < 10 then '0px'
else if UI.width - left < 10 then null
else left
else left + 'px'
top =
if top < 10 then 0
if top < 10 then '0px'
else if UI.height - top < 10 then null
else top
right = if left is null then 0 else null
bottom = if top is null then 0 else null
else top + 'px'
#using null instead of '' is 4% faster
#these 4 statements are 40% faster than 1 style.cssText
{style} = UI.el
style.top = top
style.right = right
style.bottom = bottom
$.log left, top
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: ->
#$ coffee -bpe '{a} = {b} = c'
#var a, b;
@ -211,26 +209,25 @@ UI =
d.removeEventListener 'mouseup', UI.dragend, false
hover: (e) ->
{clientX, clientY} = e
{el} = UI
{style} = el
{clientHeight, clientWidth} = d.body
height = el.offsetHeight
{style} = UI.el
{clientHeight, clientWidth} = d.documentElement
height = UI.el.offsetHeight
top = clientY - 120
style.top =
if clientHeight <= height or top <= 0
0
'0px'
else if top + height >= clientHeight
clientHeight - height
clientHeight - height + 'px'
else
top
top + 'px'
if clientX <= clientWidth - 400
style.left = clientX + 45
style.left = clientX + 45 + 'px'
style.right = null
else
style.left = null
style.right = clientWidth - clientX + 45
style.right = clientWidth - clientX + 45 + 'px'
hoverend: ->
$.rm UI.el
@ -969,7 +966,7 @@ Keybinds =
td.className = 'reply'
td.removeAttribute 'tabindex'
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 =
if delta is +1
$.x 'following::td[@class="reply"]', td
@ -982,7 +979,7 @@ Keybinds =
return
return unless g.REPLY or $.x('ancestor::div[@class="thread"]', next) is thread
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.className = 'replyhl'
next.tabIndex = 0
@ -993,7 +990,7 @@ Keybinds =
replies.reverse() if delta is -1
for reply in replies
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.tabIndex = 0
reply.focus()
@ -2037,7 +2034,7 @@ Updater =
count = nodes.length
scroll = Conf['Scrolling'] && Updater.scrollBG() && count &&
lastPost.getBoundingClientRect().bottom - d.body.clientHeight < 25
lastPost.getBoundingClientRect().bottom - d.documentElement.clientHeight < 25
if Conf['Verbose']
Updater.count.textContent = "+#{count}"
Updater.count.className = if count then 'new' else null
@ -2967,7 +2964,7 @@ ImageExpand =
$.prepend $.id('delform'), controls
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 =
init: ->