mirror of
https://github.com/ancsemi/Haven.git
synced 2026-11-05 05:23:18 +00:00
Pictures, link previews, video embeds and decrypted images grow after a message is drawn. The list has the browser's own scroll anchoring turned off (it fought the history loader's corrections), and only pictures had their own fix, so the rest pushed the feed under the reader, and at the bottom a picture loading moved the view for a few frames before a delayed snap back. A new app-feed-anchor.js watches every message's height: at the bottom it stays at the bottom, otherwise the message at the top of the view stays where it is, corrected before the frame is painted. Measured in a browser with pictures and previews held back 1.5 s: the bottom moved 120 px for 3 frames and a reader up the history up to 130 px before; 0 px after.
27 lines
1.1 KiB
JavaScript
27 lines
1.1 KiB
JavaScript
'use strict';
|
|
|
|
// The chat feed keeps the reader's place while messages change height. The
|
|
// behaviour itself was checked in a real browser; this guards the wiring.
|
|
|
|
const assert = require('node:assert/strict');
|
|
const fs = require('node:fs');
|
|
const path = require('node:path');
|
|
const test = require('node:test');
|
|
|
|
const read = (p) => fs.readFileSync(path.join(__dirname, '..', p), 'utf8');
|
|
|
|
test('the feed anchor is loaded and started with the app', () => {
|
|
const app = read('public/js/app.js');
|
|
assert.match(app, /import FeedAnchorMethods from '\.\/modules\/app-feed-anchor\.js\?v=[0-9.]+';/);
|
|
assert.match(app, /^\s*FeedAnchorMethods,$/m);
|
|
assert.match(app, /this\._setupFeedAnchor\(\);/);
|
|
});
|
|
|
|
test('it follows the bottom, holds the reader otherwise, and leaves history loading alone', () => {
|
|
const src = read('public/js/modules/app-feed-anchor.js');
|
|
assert.match(src, /new ResizeObserver/);
|
|
assert.match(src, /if \(this\._suppressCoupleCheck\) return;/);
|
|
assert.match(src, /this\._coupledToBottom && this\._noMoreFuture !== false/);
|
|
assert.match(src, /sc\.scrollTop \+= drift;/);
|
|
});
|