From 2a1f482e66d0c1325fc03fb69ebb1a1eb7f72dd2 Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Tue, 17 Jan 2012 23:39:38 -0600 Subject: [PATCH 1/8] Fix scroll offset when contracting images --- 4chan_x.user.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 6f59cf6ff..71db82528 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2960,7 +2960,7 @@ _results2 = []; for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { thumb = _ref2[_j]; - _results2.push(imgExpand.contract(thumb)); + _results2.push(imgExpand.contract(thumb, false)); } return _results2; } @@ -2994,13 +2994,23 @@ var thumb; thumb = a.firstChild; if (thumb.hidden) { - return imgExpand.contract(thumb); + return imgExpand.contract(thumb, true); } else { return imgExpand.expand(thumb); } }, - contract: function(thumb) { + contract: function(thumb, bScroll) { thumb.hidden = false; + if (bScroll) { + var el, top; + el = thumb.parentNode.parentNode; + top = el.offsetTop; + while (el.offsetParent) { + el = el.offsetParent; + top += el.offsetTop; + } + if (top < window.scrollY) window.scroll(window.scrollX, top); + } return $.rm(thumb.nextSibling); }, expand: function(thumb, url) { @@ -3021,7 +3031,7 @@ error: function() { var req, src, thumb, url; thumb = this.previousSibling; - imgExpand.contract(thumb); + imgExpand.contract(thumb, true); src = this.src.split('/'); if (url = redirect.image(src[3], src[5])) { return imgExpand.expand(thumb, url); From 7a2343f6c53674cdb70f6ce0e443a1b2f946bd6a Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Wed, 18 Jan 2012 16:16:01 -0600 Subject: [PATCH 2/8] Changed offset fix for only images that are larger than the viewport --- 4chan_x.user.js | 28 +++++++++++++--------------- script.coffee | 6 ++++++ 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 71db82528..8a990db59 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2960,7 +2960,7 @@ _results2 = []; for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { thumb = _ref2[_j]; - _results2.push(imgExpand.contract(thumb, false)); + _results2.push(imgExpand.contract(thumb)); } return _results2; } @@ -2991,26 +2991,24 @@ } }, toggle: function(a) { - var thumb; + var el, thumb, top; thumb = a.firstChild; if (thumb.hidden) { - return imgExpand.contract(thumb, true); + if (thumb.nextSibling.offsetHeight > window.innerHeight) { + el = thumb.nextSibling; + top = el.offsetTop; + while (el = el.offsetParent) { + top += el.offsetTop; + } + if (top < window.scrollY) window.scroll(window.scrollX, top); + } + return imgExpand.contract(thumb); } else { return imgExpand.expand(thumb); } }, - contract: function(thumb, bScroll) { + contract: function(thumb) { thumb.hidden = false; - if (bScroll) { - var el, top; - el = thumb.parentNode.parentNode; - top = el.offsetTop; - while (el.offsetParent) { - el = el.offsetParent; - top += el.offsetTop; - } - if (top < window.scrollY) window.scroll(window.scrollX, top); - } return $.rm(thumb.nextSibling); }, expand: function(thumb, url) { @@ -3031,7 +3029,7 @@ error: function() { var req, src, thumb, url; thumb = this.previousSibling; - imgExpand.contract(thumb, true); + imgExpand.contract(thumb); src = this.src.split('/'); if (url = redirect.image(src[3], src[5])) { return imgExpand.expand(thumb, url); diff --git a/script.coffee b/script.coffee index 0b00eb3bd..7f789239c 100644 --- a/script.coffee +++ b/script.coffee @@ -2316,6 +2316,12 @@ imgExpand = toggle: (a) -> thumb = a.firstChild if thumb.hidden + if thumb.nextSibling.offsetHeight > window.innerHeight + el = thumb.nextSibling + top = el.offsetTop + while el = el.offsetParent + top += el.offsetTop + window.scroll window.scrollX, top if top < window.scrollY imgExpand.contract thumb else imgExpand.expand thumb From 9baddbc771269d3efc152d6aa4035572bd09c5f3 Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Wed, 18 Jan 2012 19:09:37 -0600 Subject: [PATCH 3/8] Use getBoundingClientRect and body.clientHeight for offset fix --- 4chan_x.user.js | 11 +++-------- script.coffee | 8 ++------ 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 8a990db59..e49f56285 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2991,16 +2991,11 @@ } }, toggle: function(a) { - var el, thumb, top; + var thumb, top; thumb = a.firstChild; if (thumb.hidden) { - if (thumb.nextSibling.offsetHeight > window.innerHeight) { - el = thumb.nextSibling; - top = el.offsetTop; - while (el = el.offsetParent) { - top += el.offsetTop; - } - if (top < window.scrollY) window.scroll(window.scrollX, top); + if (thumb.nextSibling.offsetHeight > d.body.clientHeight && (top = a.getBoundingClientRect().top) < 0) { + window.scroll(window.scrollX, window.scrollY + top); } return imgExpand.contract(thumb); } else { diff --git a/script.coffee b/script.coffee index 7f789239c..d4c4aabae 100644 --- a/script.coffee +++ b/script.coffee @@ -2316,12 +2316,8 @@ imgExpand = toggle: (a) -> thumb = a.firstChild if thumb.hidden - if thumb.nextSibling.offsetHeight > window.innerHeight - el = thumb.nextSibling - top = el.offsetTop - while el = el.offsetParent - top += el.offsetTop - window.scroll window.scrollX, top if top < window.scrollY + if thumb.nextSibling.offsetHeight > d.body.clientHeight and (top = a.getBoundingClientRect().top) < 0 + window.scroll window.scrollX, window.scrollY + top imgExpand.contract thumb else imgExpand.expand thumb From 3d1de50d152f6604cdb6a80032298804e4003efd Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Wed, 18 Jan 2012 21:00:54 -0600 Subject: [PATCH 4/8] Scroll to the same position on the thumbnail as was being viewed before contracting --- script.coffee | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/script.coffee b/script.coffee index d4c4aabae..b21c55485 100644 --- a/script.coffee +++ b/script.coffee @@ -2316,8 +2316,9 @@ imgExpand = toggle: (a) -> thumb = a.firstChild if thumb.hidden - if thumb.nextSibling.offsetHeight > d.body.clientHeight and (top = a.getBoundingClientRect().top) < 0 - window.scroll window.scrollX, window.scrollY + top + rect = a.getBoundingClientRect() + d.body.scrollTop += if rect.top < 0 then rect.top + thumb.height / (rect.height / rect.top * -1) else 0 + d.body.scrollLeft += if rect.left < 0 then rect.left + thumb.width / (rect.width / rect.left * -1) else 0 imgExpand.contract thumb else imgExpand.expand thumb From 791c3fcd789b7cee1338abe18797efa42d989967 Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Wed, 18 Jan 2012 21:01:44 -0600 Subject: [PATCH 5/8] Build --- 4chan_x.user.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index e49f56285..053ea029c 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2991,12 +2991,12 @@ } }, toggle: function(a) { - var thumb, top; + var rect, thumb; thumb = a.firstChild; if (thumb.hidden) { - if (thumb.nextSibling.offsetHeight > d.body.clientHeight && (top = a.getBoundingClientRect().top) < 0) { - window.scroll(window.scrollX, window.scrollY + top); - } + rect = a.getBoundingClientRect(); + d.body.scrollTop += rect.top < 0 ? rect.top + thumb.height / (rect.height / rect.top * -1) : 0; + d.body.scrollLeft += rect.left < 0 ? rect.left + thumb.width / (rect.width / rect.left * -1) : 0; return imgExpand.contract(thumb); } else { return imgExpand.expand(thumb); From 8f29d8eac9421bf26fc1ce127b783760ecaeb2a8 Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Wed, 18 Jan 2012 22:55:16 -0600 Subject: [PATCH 6/8] Replace ternary operator with simple if --- 4chan_x.user.js | 8 ++++++-- script.coffee | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 053ea029c..fa37d7b68 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2995,8 +2995,12 @@ thumb = a.firstChild; if (thumb.hidden) { rect = a.getBoundingClientRect(); - d.body.scrollTop += rect.top < 0 ? rect.top + thumb.height / (rect.height / rect.top * -1) : 0; - d.body.scrollLeft += rect.left < 0 ? rect.left + thumb.width / (rect.width / rect.left * -1) : 0; + if (rect.top < 0) { + d.body.scrollTop += rect.top + thumb.height / (rect.height / rect.top * -1); + } + if (rect.left < 0) { + d.body.scrollLeft += rect.left + thumb.width / (rect.width / rect.left * -1); + } return imgExpand.contract(thumb); } else { return imgExpand.expand(thumb); diff --git a/script.coffee b/script.coffee index b21c55485..25be94ca4 100644 --- a/script.coffee +++ b/script.coffee @@ -2317,8 +2317,8 @@ imgExpand = thumb = a.firstChild if thumb.hidden rect = a.getBoundingClientRect() - d.body.scrollTop += if rect.top < 0 then rect.top + thumb.height / (rect.height / rect.top * -1) else 0 - d.body.scrollLeft += if rect.left < 0 then rect.left + thumb.width / (rect.width / rect.left * -1) else 0 + d.body.scrollTop += rect.top + thumb.height / (rect.height / rect.top * -1) if rect.top < 0 + d.body.scrollLeft += rect.left + thumb.width / (rect.width / rect.left * -1) if rect.left < 0 imgExpand.contract thumb else imgExpand.expand thumb From efc557cb1dd6fa3d9fad97bf50c316e441d0759e Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Thu, 19 Jan 2012 10:15:07 -0600 Subject: [PATCH 7/8] Scroll to top of thumbnail when contracting expanded image --- 4chan_x.user.js | 8 ++------ script.coffee | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index fa37d7b68..cf7704076 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2995,12 +2995,8 @@ thumb = a.firstChild; if (thumb.hidden) { rect = a.getBoundingClientRect(); - if (rect.top < 0) { - d.body.scrollTop += rect.top + thumb.height / (rect.height / rect.top * -1); - } - if (rect.left < 0) { - d.body.scrollLeft += rect.left + thumb.width / (rect.width / rect.left * -1); - } + if (rect.top < 0) d.body.scrollTop += rect.top; + if (rect.left < 0) d.body.scrollLeft += rect.left; return imgExpand.contract(thumb); } else { return imgExpand.expand(thumb); diff --git a/script.coffee b/script.coffee index 25be94ca4..c5e22e0bf 100644 --- a/script.coffee +++ b/script.coffee @@ -2317,8 +2317,8 @@ imgExpand = thumb = a.firstChild if thumb.hidden rect = a.getBoundingClientRect() - d.body.scrollTop += rect.top + thumb.height / (rect.height / rect.top * -1) if rect.top < 0 - d.body.scrollLeft += rect.left + thumb.width / (rect.width / rect.left * -1) if rect.left < 0 + d.body.scrollTop += rect.top if rect.top < 0 + d.body.scrollLeft += rect.left if rect.left < 0 imgExpand.contract thumb else imgExpand.expand thumb From 8cc25cd32ad3940dec8dfb69109b1024b6ccf0ca Mon Sep 17 00:00:00 2001 From: ahodesuka Date: Thu, 19 Jan 2012 21:20:41 -0600 Subject: [PATCH 8/8] Scroll to top of reply instead of anchor --- 4chan_x.user.js | 2 +- script.coffee | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index cf7704076..f0619043f 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -2994,7 +2994,7 @@ var rect, thumb; thumb = a.firstChild; if (thumb.hidden) { - rect = a.getBoundingClientRect(); + rect = a.parentNode.getBoundingClientRect(); if (rect.top < 0) d.body.scrollTop += rect.top; if (rect.left < 0) d.body.scrollLeft += rect.left; return imgExpand.contract(thumb); diff --git a/script.coffee b/script.coffee index c5e22e0bf..813abb1ed 100644 --- a/script.coffee +++ b/script.coffee @@ -2316,7 +2316,7 @@ imgExpand = toggle: (a) -> thumb = a.firstChild if thumb.hidden - rect = a.getBoundingClientRect() + rect = a.parentNode.getBoundingClientRect() d.body.scrollTop += rect.top if rect.top < 0 d.body.scrollLeft += rect.left if rect.left < 0 imgExpand.contract thumb