From e84adbba37cad8c06de8917f736ed8b3d14733dd Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Sat, 1 Dec 2018 09:33:09 +0300 Subject: [PATCH] rate-limit headlinesScrollHandler via timeout instead of distance scrolled minor floating title cleanup --- index.php | 4 +-- js/feedlist.js | 1 - js/tt-rss.js | 20 ++++++------- js/viewfeed.js | 79 ++++++++++++++++++++------------------------------ 4 files changed, 42 insertions(+), 62 deletions(-) diff --git a/index.php b/index.php index 3b0962f02..48bd559f8 100644 --- a/index.php +++ b/index.php @@ -274,10 +274,10 @@
- +
+ region="center">
diff --git a/js/feedlist.js b/js/feedlist.js index 41916d5c6..8ba13aea8 100644 --- a/js/feedlist.js +++ b/js/feedlist.js @@ -85,7 +85,6 @@ function viewfeed(params) { _infscroll_disable = 0; cleanup_memory("headlines-frame"); - _headlines_scroll_offset = 0; } if (infscroll_req) { diff --git a/js/tt-rss.js b/js/tt-rss.js index 567203623..57aff9bab 100644 --- a/js/tt-rss.js +++ b/js/tt-rss.js @@ -6,6 +6,7 @@ let _rpc_seq = 0; let _active_feed_id = 0; let _active_feed_is_cat = false; let hotkey_actions = {}; +let _headlines_scroll_timeout = false; function next_seq() { _rpc_seq += 1; @@ -567,20 +568,17 @@ function init_second_stage() { if ('sessionStorage' in window && window['sessionStorage'] !== null) sessionStorage.clear(); - /*const hotkeys = getInitParam("hotkeys"); - const tmp = []; - - for (const sequence in hotkeys[1]) { - const filtered = sequence.replace(/\|.*$/, ""); - tmp[filtered] = hotkeys[1][sequence]; - } - - hotkeys[1] = tmp; - setInitParam("hotkeys", hotkeys);*/ - _widescreen_mode = getInitParam("widescreen"); switchPanelMode(_widescreen_mode); + $("headlines-frame").onscroll = (event) => { + clearTimeout(_headlines_scroll_timeout); + _headlines_scroll_timeout = window.setTimeout(function() { + //console.log('done scrolling', event); + headlinesScrollHandler(event); + }, 250); + } + console.log("second stage ok"); if (getInitParam("simple_update")) { diff --git a/js/viewfeed.js b/js/viewfeed.js index faed860e8..a2aac43d0 100755 --- a/js/viewfeed.js +++ b/js/viewfeed.js @@ -13,7 +13,6 @@ let catchup_id_batch = []; //let cids_requested = []; let loaded_article_ids = []; let _last_headlines_update = 0; -let _headlines_scroll_offset = 0; let current_first_id = 0; let last_search_query; @@ -45,7 +44,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) { if (infscroll_req == false) { $("headlines-frame").scrollTop = 0; - $("floatingTitle").style.visibility = "hidden"; + Element.hide("floatingTitle"); $("floatingTitle").setAttribute("data-article-id", 0); $("floatingTitle").innerHTML = ""; } @@ -1026,6 +1025,8 @@ function cdmScrollToArticleId(id, force) { // article is selected manually, set it read toggleUnread(id, 0); */ + + Element.hide("floatingTitle"); } } @@ -1116,16 +1117,8 @@ function unpackVisibleHeadlines() { } } -function headlines_scroll_handler(e) { +function headlinesScrollHandler(e) { try { - - // rate-limit in case of smooth scrolling and similar abominations - if (Math.max(e.scrollTop, _headlines_scroll_offset) - Math.min(e.scrollTop, _headlines_scroll_offset) < 25) { - return; - } - - _headlines_scroll_offset = e.scrollTop; - unpackVisibleHeadlines(); // set topmost child in the buffer as active @@ -1140,17 +1133,7 @@ function headlines_scroll_handler(e) { row.offsetTop - $("headlines-frame").scrollTop < 100 && row.getAttribute("data-article-id") != getActiveArticleId()) { - /* if (_active_article_id) { - const row = $("RROW-" + _active_article_id); - if (row) row.removeClassName("active"); - } - - _active_article_id = row.getAttribute("data-article-id"); - showArticleInHeadlines(_active_article_id, true); - updateSelectedPrompt(); */ - setActiveArticleId(row.getAttribute("data-article-id")); - break; } } @@ -1180,7 +1163,7 @@ function headlines_scroll_handler(e) { for (let i = 0; i < rows.length; i++) { const row = rows[i]; - + if ($("headlines-frame").scrollTop > (row.offsetTop + row.offsetHeight/2)) { const id = row.getAttribute("data-article-id") @@ -1188,7 +1171,6 @@ function headlines_scroll_handler(e) { if (catchup_id_batch.indexOf(id) == -1) catchup_id_batch.push(id); - //console.log("auto_catchup_batch: " + catchup_id_batch.toString()); } else { break; } @@ -1198,7 +1180,7 @@ function headlines_scroll_handler(e) { const row = $$("#headlines-frame div[id*=RROW]").last(); if (row && $("headlines-frame").scrollTop > - (row.offsetTop + row.offsetHeight - 50)) { + (row.offsetTop + row.offsetHeight - 50)) { console.log("we seem to be at an end"); @@ -1208,9 +1190,8 @@ function headlines_scroll_handler(e) { } } } - } catch (e) { - console.warn("headlines_scroll_handler: " + e); + console.warn("headlinesScrollHandler", e); } } @@ -1840,59 +1821,61 @@ function displayArticleUrl(id) { } // floatingTitle goto button uses this -function scrollToRowId(id) { +/* function scrollToRowId(id) { const row = $(id); if (row) $("headlines-frame").scrollTop = row.offsetTop - 4; -} +} */ function updateFloatingTitle(unread_only) { if (!isCombinedMode() || !getInitParam("cdm_expanded")) return; const hf = $("headlines-frame"); const elems = $$("#headlines-frame > div[id*=RROW]"); + const ft = $("floatingTitle"); for (let i = 0; i < elems.length; i++) { + const row = elems[i]; - const child = elems[i]; + if (row && row.offsetTop + row.offsetHeight > hf.scrollTop) { - if (child && child.offsetTop + child.offsetHeight > hf.scrollTop) { + const header = row.select(".header")[0]; + var id = row.getAttribute("data-article-id"); - const header = child.select(".header")[0]; + if (unread_only || id != ft.getAttribute("data-article-id")) { + if (id != ft.getAttribute("data-article-id")) { - if (unread_only || child.getAttribute("data-article-id") != $("floatingTitle").getAttribute("data-article-id")) { - if (child.getAttribute("data-article-id") != $("floatingTitle").getAttribute("data-article-id")) { - - $("floatingTitle").setAttribute("data-article-id", child.getAttribute("data-article-id")); - $("floatingTitle").innerHTML = header.innerHTML; - $("floatingTitle").firstChild.innerHTML = "" + $("floatingTitle").firstChild.innerHTML; + ft.setAttribute("data-article-id", id); + ft.innerHTML = header.innerHTML; + ft.firstChild.innerHTML = "" + ft.firstChild.innerHTML; initFloatingMenu(); - const cb = $$("#floatingTitle .dijitCheckBox")[0]; + const cb = ft.select(".rchk")[0]; if (cb) cb.parentNode.removeChild(cb); } - if (child.hasClassName("Unread")) - $("floatingTitle").addClassName("Unread"); + if (row.hasClassName("Unread")) + ft.addClassName("Unread"); else - $("floatingTitle").removeClassName("Unread"); + ft.removeClassName("Unread"); - PluginHost.run(PluginHost.HOOK_FLOATING_TITLE, child); + PluginHost.run(PluginHost.HOOK_FLOATING_TITLE, row); } - $("floatingTitle").style.marginRight = hf.offsetWidth - child.offsetWidth + "px"; - if (header.offsetTop + header.offsetHeight < hf.scrollTop + $("floatingTitle").offsetHeight - 5 && - child.offsetTop + child.offsetHeight >= hf.scrollTop + $("floatingTitle").offsetHeight - 5) - $("floatingTitle").style.visibility = "visible"; + ft.style.marginRight = hf.offsetWidth - row.offsetWidth + "px"; + + if (header.offsetTop + header.offsetHeight < hf.scrollTop + ft.offsetHeight - 5 && + row.offsetTop + row.offsetHeight >= hf.scrollTop + ft.offsetHeight - 5) + new Effect.Appear(ft, {duration: 0.3}); else - $("floatingTitle").style.visibility = "hidden"; + Element.hide(ft); return; - } } }