valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

combined mode n/p behavior changes: 

1. instead of jumping/scrolling sometimes, always scroll by a constant viewport offset unless moving to next/prev article directly
2. when going up and current article is partially above the viewport, move to its top first instead of directly to a previous one
3. instead of previous marking active logic, on scroll in combined mode track first (partially or otherwise) visible article as active
This commit is contained in:
Andrew Dolgov 2019-12-10 07:47:09 +03:00
parent 44ef447c0f
commit dad3d1c7a9
1 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
js/Headlines.js
View File

@ -213,7 +213,7 @@ define(["dojo/_base/declare"], function (declare) {
clearTimeout(this._headlines_scroll_timeout); clearTimeout(this._headlines_scroll_timeout);
this._headlines_scroll_timeout = window.setTimeout(function () { this._headlines_scroll_timeout = window.setTimeout(function () {
//console.log('done scrolling', event); //console.log('done scrolling', event);
Headlines.scrollHandler(); Headlines.scrollHandler(event);
}, 50); }, 50);
} }
}, },
@ -245,27 +245,39 @@ define(["dojo/_base/declare"], function (declare) {
Feeds.open({feed: Feeds.getActive(), is_cat: Feeds.activeIsCat(), offset: offset, append: true}); Feeds.open({feed: Feeds.getActive(), is_cat: Feeds.activeIsCat(), offset: offset, append: true});
}, },
scrollHandler: function () { isChildVisible: function (elem, ctr) {
const ctop = ctr.scrollTop;
const cbottom = ctop + ctr.offsetHeight;
const etop = elem.offsetTop;
const ebottom = etop + elem.offsetHeight;
return etop >= ctop && ebottom <= cbottom ||
etop < ctop && ebottom > ctop || ebottom > cbottom && etop < cbottom
},
scrollHandler: function (/*event*/) {
try { try {
Headlines.unpackVisible(); Headlines.unpackVisible();
if (App.isCombinedMode()) { if (App.isCombinedMode()) {
Headlines.updateFloatingTitle(); Headlines.updateFloatingTitle();
// set topmost child in the buffer as active, but not if we're at the beginning (to prevent auto marking const ctr = $("headlines-frame");
// set first visible child in the buffer as active, but not if we're at the beginning (to prevent auto marking
// first article as read all the time) // first article as read all the time)
if ($("headlines-frame").scrollTop != 0 && if (ctr.scrollTop > 0 && App.getInitParam("cdm_expanded") /*&& App.getInitParam("cdm_auto_catchup") == 1*/) {
App.getInitParam("cdm_expanded") && App.getInitParam("cdm_auto_catchup") == 1) {
const rows = $$("#headlines-frame > div[id*=RROW]"); const rows = $$("#headlines-frame > div[id*=RROW]");
for (let i = 0; i < rows.length; i++) { for (let i = 0; i < rows.length; i++) {
const row = rows[i]; const row = rows[i];
if ($("headlines-frame").scrollTop <= row.offsetTop && /*console.log(row.getAttribute("data-article-title"), row.offsetTop, row.offsetHeight, ctr.scrollTop, ctr.offsetHeight,
row.offsetTop - $("headlines-frame").scrollTop < 100 && this.isChildVisible(row, ctr));*/
row.getAttribute("data-article-id") != Article.getActive()) {
if (this.isChildVisible(row, ctr)) {
Article.setActive(row.getAttribute("data-article-id")); Article.setActive(row.getAttribute("data-article-id"));
break; break;
} }
@ -443,7 +455,7 @@ define(["dojo/_base/declare"], function (declare) {
const originally_from = Article.formatOriginallyFrom(hl); const originally_from = Article.formatOriginallyFrom(hl);
row = `<div class="cdm ${row_class} ${Article.getScoreClass(hl.score)}" id="RROW-${hl.id}" data-article-id="${hl.id}" data-orig-feed-id="${hl.feed_id}" row = `<div class="cdm ${row_class} ${Article.getScoreClass(hl.score)}" id="RROW-${hl.id}" data-article-id="${hl.id}" data-orig-feed-id="${hl.feed_id}"
data-content="${escapeHtml(hl.content)}" data-score="${hl.score}" data-content="${escapeHtml(hl.content)}" data-score="${hl.score}" data-article-title="${hl.title}"
onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})"> onmouseover="Article.mouseIn(${hl.id})" onmouseout="Article.mouseOut(${hl.id})">
<div class="header"> <div class="header">
@ -845,18 +857,15 @@ define(["dojo/_base/declare"], function (declare) {
console.log("cur: " + Article.getActive() + " next: " + next_id); console.log("cur: " + Article.getActive() + " next: " + next_id);
if (mode == "next") { if (mode === "next") {
if (next_id || Article.getActive()) { if (next_id || Article.getActive()) {
if (App.isCombinedMode()) { if (App.isCombinedMode()) {
const article = $("RROW-" + Article.getActive()); //const row = $("RROW-" + Article.getActive());
const ctr = $("headlines-frame"); const ctr = $("headlines-frame");
if (!noscroll && article && article.offsetTop + article.offsetHeight > if (!noscroll) {
ctr.scrollTop + ctr.offsetHeight) { Article.scroll(ctr.offsetHeight / 2, event);
Article.scroll(ctr.offsetHeight / 4, event);
} else if (next_id) { } else if (next_id) {
Article.setActive(next_id); Article.setActive(next_id);
Article.cdmScrollToId(next_id, true); Article.cdmScrollToId(next_id, true);
@ -869,22 +878,23 @@ define(["dojo/_base/declare"], function (declare) {
} }
} }
if (mode == "prev") { if (mode === "prev") {
if (prev_id || Article.getActive()) { if (prev_id || Article.getActive()) {
if (App.isCombinedMode()) { if (App.isCombinedMode()) {
const article = $("RROW-" + Article.getActive()); const row = $("RROW-" + Article.getActive());
const prev_article = $("RROW-" + prev_id); //const prev_row = $("RROW-" + prev_id);
const ctr = $("headlines-frame"); const ctr = $("headlines-frame");
if (!noscroll && article && article.offsetTop < ctr.scrollTop) { if (!noscroll) {
Article.scroll(-ctr.offsetHeight / 3, event); Article.scroll(-ctr.offsetHeight / 2, event);
} else if (!noscroll && prev_article && } else {
prev_article.offsetTop < ctr.scrollTop) { if (row.offsetTop < ctr.scrollTop) {
Article.scroll(-ctr.offsetHeight / 4, event); Article.cdmScrollToId(Article.getActive(), noscroll);
} else if (prev_id) { } else if (prev_id) {
Article.setActive(prev_id); Article.setActive(prev_id);
Article.cdmScrollToId(prev_id, noscroll); Article.cdmScrollToId(prev_id, noscroll);
}
} }
} else if (prev_id) { } else if (prev_id) {
@ -909,8 +919,6 @@ define(["dojo/_base/declare"], function (declare) {
const row = $("RROW-" + id); const row = $("RROW-" + id);
if (row) { if (row) {
//const origClassName = row.className;
if (cmode == undefined) cmode = 2; if (cmode == undefined) cmode = 2;
switch (cmode) { switch (cmode) {