Add experimental infinite scroll

This commit is contained in:
Zed 2020-01-07 03:00:16 +01:00
parent 2e97c1c98f
commit 2c6d2897ae
6 changed files with 82 additions and 11 deletions

View file

@ -0,0 +1,54 @@
function insertBeforeLast(node, elem) {
node.insertBefore(elem, node.childNodes[node.childNodes.length - 2]);
}
function getLoadMore(doc) {
return doc.querySelector('.show-more:not(.timeline-item)');
}
window.onload = function() {
const isTweet = window.location.pathname.indexOf("/status/") !== -1;
const containerClass = isTweet ? ".replies" : ".timeline";
const itemClass = isTweet ? ".thread-line" : ".timeline-item";
var html = document.querySelector("html");
var container = document.querySelector(containerClass);
var loading = false;
window.addEventListener('scroll', function() {
if (loading) return;
if (html.scrollTop + html.clientHeight >= html.scrollHeight - 3000) {
loading = true;
var topRef = document.querySelector('.top-ref');
var loadMore = getLoadMore(document);
if (loadMore == null) return;
loadMore.children[0].text = "Loading...";
var url = new URL(loadMore.children[0].href);
window.history.pushState('', '', url.toString());
url.searchParams.append('scroll', 'true');
fetch(url.toString()).then(function (response) {
return response.text();
}).then(function (html) {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
loadMore.remove();
for (var item of doc.querySelectorAll(itemClass)) {
if (item.className == "timeline-item show-more") continue;
if (isTweet) container.appendChild(item);
else insertBeforeLast(container, item);
}
if (isTweet) container.appendChild(getLoadMore(doc));
else insertBeforeLast(container, getLoadMore(doc));
loading = false;
}).catch(function (err) {
console.warn('Something went wrong.', err);
loading = true;
});
}
});
};

View file

@ -18,6 +18,7 @@ withDb:
Prefs.theme.safeAddColumn Prefs.theme.safeAddColumn
Prefs.hidePins.safeAddColumn Prefs.hidePins.safeAddColumn
Prefs.hideReplies.safeAddColumn Prefs.hideReplies.safeAddColumn
Prefs.infiniteScroll.safeAddColumn
proc getDefaultPrefs(cfg: Config): Prefs = proc getDefaultPrefs(cfg: Config): Prefs =
result = genDefaultPrefs() result = genDefaultPrefs()

View file

@ -73,6 +73,9 @@ genPrefs:
theme(select, "Nitter"): theme(select, "Nitter"):
"Theme" "Theme"
infiniteScroll(checkbox, false):
"Infinite scrolling (requires JavaScript, experimental!)"
stickyProfile(checkbox, true): stickyProfile(checkbox, true):
"Make profile sidebar stick to top" "Make profile sidebar stick to top"

View file

@ -1,10 +1,11 @@
import asyncdispatch, strutils, sequtils, uri, options import asyncdispatch, strutils, sequtils, uri, options
import jester import jester, karax/vdom
import router_utils import router_utils
import ".."/[api, types, cache, formatters, agents, query] import ".."/[api, types, cache, formatters, agents, query]
import ../views/[general, profile, timeline, status, search] import ../views/[general, profile, timeline, status, search]
export vdom
export uri, sequtils export uri, sequtils
export router_utils export router_utils
export api, cache, formatters, query, agents export api, cache, formatters, query, agents
@ -55,13 +56,10 @@ proc fetchMultiTimeline*(names: seq[string]; after, agent: string; query: Query;
proc get*(req: Request; key: string): string = proc get*(req: Request; key: string): string =
params(req).getOrDefault(key) params(req).getOrDefault(key)
proc showTimeline*(request: Request; query: Query; cfg: Config; rss: string): Future[string] {.async.} = proc showTimeline*(request: Request; query: Query; cfg: Config; prefs: Prefs;
let rss, after: string): Future[string] {.async.} =
agent = getAgent() let agent = getAgent()
prefs = cookiePrefs() let names = getNames(request.get("name"))
name = request.get("name")
after = request.get("max_position")
names = getNames(name)
if names.len != 1: if names.len != 1:
let timeline = await fetchMultiTimeline(names, after, agent, query) let timeline = await fetchMultiTimeline(names, after, agent, query)
@ -82,6 +80,10 @@ template respTimeline*(timeline: typed) =
resp Http404, showError("User \"" & @"name" & "\" not found", cfg) resp Http404, showError("User \"" & @"name" & "\" not found", cfg)
resp timeline resp timeline
template respScroll*(timeline: typed) =
timeline.beginning = true # don't render "load newest"
resp $renderTimelineTweets(timeline, prefs, getPath())
proc createTimelineRouter*(cfg: Config) = proc createTimelineRouter*(cfg: Config) =
setProfileCacheTime(cfg.profileCacheTime) setProfileCacheTime(cfg.profileCacheTime)
@ -89,10 +91,18 @@ proc createTimelineRouter*(cfg: Config) =
get "/@name/?@tab?": get "/@name/?@tab?":
cond '.' notin @"name" cond '.' notin @"name"
cond @"tab" in ["with_replies", "media", "search", ""] cond @"tab" in ["with_replies", "media", "search", ""]
let query = request.getQuery(@"tab", @"name") let
prefs = cookiePrefs()
after = @"max_position"
query = request.getQuery(@"tab", @"name")
if @"scroll".len > 0:
respScroll(await fetchTimeline(@"name", after, getAgent(), query))
var rss = "/$1/$2/rss" % [@"name", @"tab"] var rss = "/$1/$2/rss" % [@"name", @"tab"]
if @"tab".len == 0: if @"tab".len == 0:
rss = "/$1/rss" % @"name" rss = "/$1/rss" % @"name"
elif @"tab" == "search": elif @"tab" == "search":
rss &= "?" & genQueryUrl(query) rss &= "?" & genQueryUrl(query)
respTimeline(await showTimeline(request, query, cfg, rss))
respTimeline(await showTimeline(request, query, cfg, prefs, rss, after))

View file

@ -41,7 +41,7 @@ proc cleanFilename*(filename: string): string =
result &= ".png" result &= ".png"
proc filterParams*(params: Table): seq[(string, string)] = proc filterParams*(params: Table): seq[(string, string)] =
let filter = ["name", "id", "list", "referer"] let filter = ["name", "id", "list", "referer", "scroll"]
toSeq(params.pairs()).filterIt(it[0] notin filter and it[1].len > 0) toSeq(params.pairs()).filterIt(it[0] notin filter and it[1].len > 0)
proc isTwitterUrl*(url: string): bool = proc isTwitterUrl*(url: string): bool =

View file

@ -56,6 +56,9 @@ proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
script(src="/js/hls.light.min.js") script(src="/js/hls.light.min.js")
script(src="/js/hlsPlayback.js") script(src="/js/hlsPlayback.js")
if prefs.infiniteScroll:
script(src="/js/infiniteScroll.js")
title: title:
if titleText.len > 0: if titleText.len > 0:
text titleText & " | " & cfg.title text titleText & " | " & cfg.title