The initial refresh() ran before the mobile layout settled (media queries, fonts, async highlighting) and under-measured the content, leaving #jumpnav hidden on long pastes at 375x812 until a resize event. Re-check after a double rAF, on window load, after 300ms, and via a ResizeObserver on document.body for late content growth. Editor textarea scroller unchanged.
52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
/* #267: jump to top / bottom controls for long content.
|
|
Paste view scrolls the window; the /new editor scrolls its textarea.
|
|
The active scroller is chosen via data-jump-scroll on the script tag. */
|
|
(function () {
|
|
var nav = document.getElementById('jumpnav');
|
|
if (!nav) return;
|
|
var scroller = window;
|
|
var sel = nav.dataset.jumpScroll;
|
|
if (sel) scroller = document.querySelector(sel);
|
|
|
|
function el() {
|
|
return scroller === window ? document.scrollingElement : scroller;
|
|
}
|
|
function isLarge() {
|
|
var e = el();
|
|
if (!e) return false;
|
|
var visible = scroller === window ? window.innerHeight : e.clientHeight;
|
|
return e.scrollHeight > visible * 2;
|
|
}
|
|
function refresh() {
|
|
nav.classList.toggle('hidden', !isLarge());
|
|
}
|
|
function jump(toTop) {
|
|
var e = el();
|
|
if (!e) return;
|
|
if (scroller === window) {
|
|
window.scrollTo({ top: toTop ? 0 : e.scrollHeight });
|
|
} else {
|
|
e.scrollTop = toTop ? 0 : e.scrollHeight;
|
|
}
|
|
}
|
|
nav.addEventListener('click', function (ev) {
|
|
var b = ev.target.closest('[data-jump]');
|
|
if (!b) return;
|
|
ev.preventDefault();
|
|
jump(b.dataset.jump === 'top');
|
|
});
|
|
window.addEventListener('resize', refresh);
|
|
if (scroller !== window && scroller) scroller.addEventListener('input', refresh);
|
|
refresh();
|
|
/* #282: the first evaluation can run before the layout settles (media
|
|
queries, web fonts, async highlighting) and under-measure the content,
|
|
leaving the nav hidden on long pages. Re-check once a real layout exists
|
|
and after load; the ResizeObserver also catches late content growth. */
|
|
requestAnimationFrame(function () { requestAnimationFrame(refresh); });
|
|
window.addEventListener('load', refresh);
|
|
window.setTimeout(refresh, 300);
|
|
if (window.ResizeObserver && scroller === window && document.body) {
|
|
new ResizeObserver(refresh).observe(document.body);
|
|
}
|
|
})();
|