Add experimental infinite scroll
This commit is contained in:
parent
2e97c1c98f
commit
2c6d2897ae
|
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
|
@ -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()
|
||||||
|
|
|
@ -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"
|
||||||
|
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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 =
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue