- 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
parent
c8cc845d5b
commit
409ba0db2d
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -196,11 +196,11 @@ define(["dojo/_base/declare"], function (declare) {
|
|||
row.querySelector(".content-inner").innerHTML = " ";
|
||||
}
|
||||
},
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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
20
js/tt-rss.js
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue