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

- RIP smooth scrolling and associated hacks 

- attempt to make Headlines.move() / Article.cdmMoveToId() behave a bit more intuitively
This commit is contained in:
Andrew Dolgov 2020-05-22 21:48:03 +03:00
parent c8cc845d5b
commit 409ba0db2d
15 changed files with 59 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/AppBase.js
View File

@ -8,29 +8,17 @@ define(["dojo/_base/declare"], function (declare) {
hotkey_prefix_pressed: false,
hotkey_prefix_timeout: 0,
Scrollable: {
scrollByPages: function (elem, page_offset, event) {
scrollByPages: function (elem, page_offset) {
if (!elem) return;
/* keep a line or so from the previous page */
const offset = (elem.offsetHeight - (page_offset > 0 ? 50 : -50)) * page_offset;
this.scroll(elem, offset, event);
this.scroll(elem, offset);
},
scroll: function(elem, offset, event) {
scroll: function(elem, offset) {
if (!elem) return;
if (event && event.repeat) {
elem.addClassName("forbid-smooth-scroll");
window.clearTimeout(this._scroll_reset_timeout);
this._scroll_reset_timeout = window.setTimeout(() => {
if (elem) elem.removeClassName("forbid-smooth-scroll");
}, 250)
} else {
elem.removeClassName("forbid-smooth-scroll");
}
elem.scrollTop += offset;
},
isChildVisible: function(elem, ctr) {
@ -45,6 +33,12 @@ define(["dojo/_base/declare"], function (declare) {
return etop >= ctop && ebottom <= cbottom ||
etop < ctop && ebottom > ctop || ebottom > cbottom && etop < cbottom;
},
fitsInContainer: function (elem, ctr) {
if (!elem) return;
return elem.offsetTop + elem.offsetHeight <= ctr.scrollTop + ctr.offsetHeight &&
elem.offsetTop >= ctr.scrollTop;
}
},
constructor: function() {
window.onerror = this.Error.onWindowError;

39
js/Article.js
View File

@ -196,11 +196,11 @@ define(["dojo/_base/declare"], function (declare) {
row.querySelector(".content-inner").innerHTML = "&nbsp;";
}
},
view: function (id, noexpand) {
view: function (id, no_expand) {
this.setActive(id);
Headlines.scrollToArticleId(id);
if (!noexpand) {
if (!no_expand) {
const hl = Headlines.objectById(id);
if (hl) {
@ -294,32 +294,15 @@ define(["dojo/_base/declare"], function (declare) {
cdmMoveToId: function (id, params) {
params = params || {};
const force = params.force || true;
const event = params.event || null;
const noscroll = params.noscroll || false;
const force_to_top = params.force_to_top || false;
const ctr = $("headlines-frame");
const e = $("RROW-" + id);
const is_expanded = App.getInitParam("cdm_expanded");
const row = $("RROW-" + id);
if (!e || !ctr) return;
if (!row || !ctr) return;
if (force || is_expanded || e.offsetTop + e.offsetHeight > (ctr.scrollTop + ctr.offsetHeight) ||
e.offsetTop < ctr.scrollTop) {
if (noscroll || event && event.repeat || !is_expanded) {
ctr.addClassName("forbid-smooth-scroll");
window.clearTimeout(this._scroll_reset_timeout);
this._scroll_reset_timeout = window.setTimeout(() => {
if (ctr) ctr.removeClassName("forbid-smooth-scroll");
}, 250)
} else {
ctr.removeClassName("forbid-smooth-scroll");
}
ctr.scrollTop = e.offsetTop;
if (force_to_top || !App.Scrollable.fitsInContainer(row, ctr)) {
ctr.scrollTop = row.offsetTop;
}
},
setActive: function (id) {
@ -351,11 +334,11 @@ define(["dojo/_base/declare"], function (declare) {
else
return 0;
},
scrollByPages: function (page_offset, event) {
App.Scrollable.scrollByPages($("content-insert"), page_offset, event);
scrollByPages: function (page_offset) {
App.Scrollable.scrollByPages($("content-insert"), page_offset);
},
scroll: function (offset, event) {
App.Scrollable.scroll($("content-insert"), offset, event);
scroll: function (offset) {
App.Scrollable.scroll($("content-insert"), offset);
},
mouseIn: function (id) {
this.post_under_pointer = id;

38
js/Headlines.js
View File

@ -204,14 +204,23 @@ define(["dojo/_base/declare"], function (declare) {
} else if (Article.getActive() != id) {
Headlines.select('none');
const scroll_position_A = $("RROW-" + id).offsetTop - $("headlines-frame").scrollTop;
Article.setActive(id);
if (App.getInitParam("cdm_expanded")) {
if (!in_body)
Article.openInNewWindow(id);
Headlines.toggleUnread(id, 0);
} else {
const scroll_position_B = $("RROW-" + id).offsetTop - $("headlines-frame").scrollTop;
// this would only work if there's enough space
$("headlines-frame").scrollTop -= scroll_position_A-scroll_position_B;
Article.cdmMoveToId(id);
}
@ -794,10 +803,9 @@ define(["dojo/_base/declare"], function (declare) {
move: function (mode, params) {
params = params || {};
const noscroll = params.noscroll || false;
const noexpand = params.noexpand || false;
const no_expand = params.no_expand || false;
const force_previous = params.force_previous || false;
const event = params.event;
const force_to_top = params.force_to_top || false;
let prev_id = false;
let next_id = false;
@ -835,10 +843,10 @@ define(["dojo/_base/declare"], function (declare) {
if (App.isCombinedMode()) {
window.requestAnimationFrame(() => {
Article.setActive(next_id);
Article.cdmMoveToId(next_id, {event: event, noscroll: noscroll});
Article.cdmMoveToId(next_id, {force_to_top: force_to_top});
});
} else {
Article.view(next_id, noexpand);
Article.view(next_id, no_expand);
}
}
} else if (mode === "prev") {
@ -847,18 +855,20 @@ define(["dojo/_base/declare"], function (declare) {
window.requestAnimationFrame(() => {
const row = $("RROW-" + current_id);
const ctr = $("headlines-frame");
const delta_px = Math.max(row.offsetTop, ctr.scrollTop) - Math.min(row.offsetTop, ctr.scrollTop);
const delta_px = Math.round(row.offsetTop) - Math.round(ctr.scrollTop);
if (!force_previous && row && delta_px > 16) {
console.log('moving back, delta_px', delta_px);
if (!force_previous && row && delta_px < -8) {
Article.setActive(current_id);
Article.cdmMoveToId(current_id, {force: noscroll, event: event});
Article.cdmMoveToId(current_id, {force_to_top: force_to_top});
} else if (prev_id) {
Article.setActive(prev_id);
Article.cdmMoveToId(prev_id, {force: noscroll, event: event, noscroll: noscroll});
Article.cdmMoveToId(prev_id, {force_to_top: force_to_top});
}
});
} else if (prev_id) {
Article.view(prev_id, noexpand);
Article.view(prev_id, no_expand);
}
}
}
@ -1343,11 +1353,11 @@ define(["dojo/_base/declare"], function (declare) {
}
},
scrollByPages: function (page_offset, event) {
App.Scrollable.scrollByPages($("headlines-frame"), page_offset, event);
scrollByPages: function (page_offset) {
App.Scrollable.scrollByPages($("headlines-frame"), page_offset);
},
scroll: function (offset, event) {
App.Scrollable.scroll($("headlines-frame"), offset, event);
scroll: function (offset) {
App.Scrollable.scroll($("headlines-frame"), offset);
},
initHeadlinesMenu: function () {
if (!dijit.byId("headlinesMenu")) {

20
js/tt-rss.js
View File

@ -288,25 +288,25 @@ require(["dojo/_base/kernel",
if (App.isCombinedMode())
Headlines.scroll(Headlines.line_scroll_offset, event);
else
Headlines.move('next', {event: event});
Headlines.move('next');
};
this.hotkey_actions["prev_article_or_scroll"] = function (event) {
if (App.isCombinedMode())
Headlines.scroll(-Headlines.line_scroll_offset, event);
else
Headlines.move('prev', {event: event});
Headlines.move('prev');
};
this.hotkey_actions["next_article_noscroll"] = function (event) {
Headlines.move('next', {noscroll: true, event: event});
this.hotkey_actions["next_article_noscroll"] = function () {
Headlines.move('next');
};
this.hotkey_actions["prev_article_noscroll"] = function (event) {
Headlines.move('prev', {noscroll: true, event: event});
this.hotkey_actions["prev_article_noscroll"] = function () {
Headlines.move('prev');
};
this.hotkey_actions["next_article_noexpand"] = function (event) {
Headlines.move('next', {noscroll: true, noexpand: true, event: event});
this.hotkey_actions["next_article_noexpand"] = function () {
Headlines.move('next', {no_expand: true});
};
this.hotkey_actions["prev_article_noexpand"] = function (event) {
Headlines.move('prev', {noscroll: true, noexpand: true, event: event});
this.hotkey_actions["prev_article_noexpand"] = function () {
Headlines.move('prev', {no_expand: true});
};
this.hotkey_actions["search_dialog"] = function () {
Feeds.search();

11
themes/compact.css
View File

@ -668,16 +668,6 @@ body.ttrss_main #headlines-frame div.feed-title a {
body.ttrss_main #headlines-frame div.feed-title a:hover {
color: #257aa7;
}
body.ttrss_main #headlines-frame.smooth-scroll {
scroll-behavior: smooth;
}
body.ttrss_main #headlines-frame.forbid-smooth-scroll,
body.ttrss_main #content-insert.forbid-smooth-scroll {
scroll-behavior: auto;
}
body.ttrss_main #toolbar-frame_splitter {
display: none;
}
body.ttrss_main #toolbar-frame {
padding: 0px;
margin: 0px;
@ -761,7 +751,6 @@ body.ttrss_main #content-insert {
line-height: 1.5;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body.ttrss_main img.feed-icon,
body.ttrss_main img.icon {

2
themes/compact.css.map
View File

File diff suppressed because one or more lines are too long

11
themes/compact_night.css
View File

@ -668,16 +668,6 @@ body.ttrss_main #headlines-frame div.feed-title a {
body.ttrss_main #headlines-frame div.feed-title a:hover {
color: #b87d2c;
}
body.ttrss_main #headlines-frame.smooth-scroll {
scroll-behavior: smooth;
}
body.ttrss_main #headlines-frame.forbid-smooth-scroll,
body.ttrss_main #content-insert.forbid-smooth-scroll {
scroll-behavior: auto;
}
body.ttrss_main #toolbar-frame_splitter {
display: none;
}
body.ttrss_main #toolbar-frame {
padding: 0px;
margin: 0px;
@ -761,7 +751,6 @@ body.ttrss_main #content-insert {
line-height: 1.5;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body.ttrss_main img.feed-icon,
body.ttrss_main img.icon {

2
themes/compact_night.css.map
View File

File diff suppressed because one or more lines are too long

11
themes/light.css
View File

@ -668,16 +668,6 @@ body.ttrss_main #headlines-frame div.feed-title a {
body.ttrss_main #headlines-frame div.feed-title a:hover {
color: #257aa7;
}
body.ttrss_main #headlines-frame.smooth-scroll {
scroll-behavior: smooth;
}
body.ttrss_main #headlines-frame.forbid-smooth-scroll,
body.ttrss_main #content-insert.forbid-smooth-scroll {
scroll-behavior: auto;
}
body.ttrss_main #toolbar-frame_splitter {
display: none;
}
body.ttrss_main #toolbar-frame {
padding: 0px;
margin: 0px;
@ -761,7 +751,6 @@ body.ttrss_main #content-insert {
line-height: 1.5;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body.ttrss_main img.feed-icon,
body.ttrss_main img.icon {

2
themes/light.css.map
View File

File diff suppressed because one or more lines are too long

14
themes/light/tt-rss.less
View File

@ -784,19 +784,6 @@ body.ttrss_main {
}
}
#headlines-frame.smooth-scroll {
scroll-behavior: smooth;
}
#headlines-frame.forbid-smooth-scroll,
#content-insert.forbid-smooth-scroll {
scroll-behavior : auto;
}
#toolbar-frame_splitter {
display : none;
}
#toolbar-frame {
padding : 0px;
margin : 0px;
@ -892,7 +879,6 @@ body.ttrss_main {
line-height: 1.5;
overflow : auto;
-webkit-overflow-scrolling : touch;
scroll-behavior: smooth;
}
img.feed-icon, img.icon {

11
themes/night.css
View File

@ -669,16 +669,6 @@ body.ttrss_main #headlines-frame div.feed-title a {
body.ttrss_main #headlines-frame div.feed-title a:hover {
color: #b87d2c;
}
body.ttrss_main #headlines-frame.smooth-scroll {
scroll-behavior: smooth;
}
body.ttrss_main #headlines-frame.forbid-smooth-scroll,
body.ttrss_main #content-insert.forbid-smooth-scroll {
scroll-behavior: auto;
}
body.ttrss_main #toolbar-frame_splitter {
display: none;
}
body.ttrss_main #toolbar-frame {
padding: 0px;
margin: 0px;
@ -762,7 +752,6 @@ body.ttrss_main #content-insert {
line-height: 1.5;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body.ttrss_main img.feed-icon,
body.ttrss_main img.icon {

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long

11
themes/night_blue.css
View File

@ -669,16 +669,6 @@ body.ttrss_main #headlines-frame div.feed-title a {
body.ttrss_main #headlines-frame div.feed-title a:hover {
color: #257aa7;
}
body.ttrss_main #headlines-frame.smooth-scroll {
scroll-behavior: smooth;
}
body.ttrss_main #headlines-frame.forbid-smooth-scroll,
body.ttrss_main #content-insert.forbid-smooth-scroll {
scroll-behavior: auto;
}
body.ttrss_main #toolbar-frame_splitter {
display: none;
}
body.ttrss_main #toolbar-frame {
padding: 0px;
margin: 0px;
@ -762,7 +752,6 @@ body.ttrss_main #content-insert {
line-height: 1.5;
overflow: auto;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body.ttrss_main img.feed-icon,
body.ttrss_main img.icon {

2
themes/night_blue.css.map
View File

File diff suppressed because one or more lines are too long