]> git.wh0rd.org - tt-rss.git/blobdiff - js/viewfeed.js
scroll handler: performance improvements
[tt-rss.git] / js / viewfeed.js
index e23c357ff58c6380984e1475b4035953d3733514..6ae9cdd8a503fe42cd51c65775de293d81e41d2c 100755 (executable)
@@ -1,9 +1,11 @@
+/* global dijit, __ */
+
 let _active_article_id = 0;
 
 let vgroup_last_feed = false;
 let post_under_pointer = false;
 
-let last_requested_article = false;
+let last_requested_article = 0;
 
 let catchup_id_batch = [];
 let catchup_timeout_id = false;
@@ -20,20 +22,15 @@ let _catchup_request_sent = false;
 let has_storage = 'sessionStorage' in window && window['sessionStorage'] !== null;
 
 function headlines_callback2(transport, offset, background, infscroll_req) {
-       handle_rpc_json(transport);
+       const reply = handle_rpc_json(transport);
 
        console.log("headlines_callback2 [offset=" + offset + "] B:" + background + " I:" + infscroll_req);
 
-       let is_cat = false;
-       let feed_id = false;
+       if (background)
+               return;
 
-       let reply = false;
-
-       try {
-               reply = JSON.parse(transport.responseText);
-       } catch (e) {
-               console.error(e);
-       }
+       var is_cat = false;
+       var feed_id = false;
 
        if (reply) {
 
@@ -41,20 +38,9 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                feed_id = reply['headlines']['id'];
                last_search_query = reply['headlines']['search_query'];
 
-               if (background) {
-                       let content = reply['headlines']['content'];
-
-                       content = content + "<div id='headlines-spacer'></div>";
-                       return;
-               }
-
                if (feed_id != -7 && (feed_id != getActiveFeedId() || is_cat != activeFeedIsCat()))
                        return;
 
-               /* dijit.getEnclosingWidget(
-                       document.forms["main_toolbar_form"].update).attr('disabled',
-                               is_cat || feed_id <= 0); */
-
                try {
                        if (infscroll_req == false) {
                                $("headlines-frame").scrollTop = 0;
@@ -83,7 +69,6 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                current_first_id = reply['headlines']['first_id'];
                const counters = reply['counters'];
                const articles = reply['articles'];
-               //var runtime_info = reply['runtime-info'];
 
                if (infscroll_req == false) {
                        loaded_article_ids = [];
@@ -92,17 +77,9 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                                        reply['headlines']['toolbar'],
                                        {parseContent: true});
 
-                       /*dojo.html.set($("headlines-frame"),
-                               reply['headlines']['content'],
-                               {parseContent: true});
-
-                       $$("#headlines-frame div[id*='RROW']").each(function(row) {
-                               loaded_article_ids.push(row.id);
-                       });*/
-
                        $("headlines-frame").innerHTML = '';
 
-                       var tmp = new Element("div");
+                       let tmp = document.createElement("div");
                        tmp.innerHTML = reply['headlines']['content'];
                        dojo.parser.parse(tmp);
 
@@ -116,7 +93,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                                }
                        }
 
-                       var hsp = $("headlines-spacer");
+                       let hsp = $("headlines-spacer");
                        if (!hsp) hsp = new Element("DIV", {"id": "headlines-spacer"});
                        dijit.byId('headlines-frame').domNode.appendChild(hsp);
 
@@ -138,17 +115,17 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                                const c = dijit.byId("headlines-frame");
                                const ids = getSelectedArticleIds2();
 
-                               var hsp = $("headlines-spacer");
+                               let hsp = $("headlines-spacer");
 
                                if (hsp)
                                        c.domNode.removeChild(hsp);
 
-                               var tmp = new Element("div");
+                               let tmp = document.createElement("div");
                                tmp.innerHTML = reply['headlines']['content'];
                                dojo.parser.parse(tmp);
 
                                while (tmp.hasChildNodes()) {
-                                       var row = tmp.removeChild(tmp.firstChild);
+                                       let row = tmp.removeChild(tmp.firstChild);
 
                                        if (loaded_article_ids.indexOf(row.id) == -1 || row.hasClassName("cdmFeedTitle")) {
                                                dijit.byId("headlines-frame").domNode.appendChild(row);
@@ -164,7 +141,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
 
                                console.log("restore selected ids: " + ids);
 
-                               for (var i = 0; i < ids.length; i++) {
+                               for (let i = 0; i < ids.length; i++) {
                                        markHeadline(ids[i]);
                                }
 
@@ -181,7 +158,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                                const first_id_changed = reply['headlines']['first_id_changed'];
                                console.log("first id changed:" + first_id_changed);
 
-                               var hsp = $("headlines-spacer");
+                               let hsp = $("headlines-spacer");
 
                                if (hsp) {
                                        if (first_id_changed) {
@@ -197,7 +174,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
                        }
 
                if (articles) {
-                       for (var i = 0; i < articles.length; i++) {
+                       for (let i = 0; i < articles.length; i++) {
                                const a_id = articles[i]['id'];
                                cache_set("article:" + a_id, articles[i]['content']);
                        }
@@ -274,15 +251,7 @@ function showArticleInHeadlines(id, noexpand) {
 function article_callback2(transport, id) {
        console.log("article_callback2 " + id);
 
-       handle_rpc_json(transport);
-
-       let reply = false;
-
-       try {
-               reply = JSON.parse(transport.responseText);
-       } catch (e) {
-               console.error(e);
-       }
+       const reply = handle_rpc_json(transport);
 
        if (reply) {
 
@@ -295,11 +264,6 @@ function article_callback2(transport, id) {
                        cache_set("article:" + article['id'], article['content']);
                });
 
-//                     if (id != last_requested_article) {
-//                             console.log("requested article id is out of sequence, aborting");
-//                             return;
-//                     }
-
        } else {
                console.error("Invalid object received: " + transport.responseText);
 
@@ -307,7 +271,7 @@ function article_callback2(transport, id) {
                                __('Could not display article (invalid object received - see error console for details)') + "</div>");
        }
 
-       const unread_in_buffer = $$("#headlines-frame > div[id*=RROW][class*=Unread]").length
+       const unread_in_buffer = $$("#headlines-frame > div[id*=RROW][class*=Unread]").length;
        request_counters(unread_in_buffer == 0);
 
        notify("");
@@ -332,7 +296,7 @@ function view(id, activefeed, noexpand) {
 
        console.log("cache check result: " + (cached_article != false));
 
-       let query = "?op=article&method=view&id=" + param_escape(id);
+       const query = {op: "article", method: "view", id: id};
 
        const neighbor_ids = getRelativePostIds(id);
 
@@ -350,7 +314,7 @@ function view(id, activefeed, noexpand) {
 
        console.log("additional ids: " + cids_to_request.toString());
 
-       query = query + "&cids=" + cids_to_request.toString();
+       query.cids = cids_to_request.toString();
 
        const article_is_unread = crow.hasClassName("Unread");
 
@@ -358,14 +322,10 @@ function view(id, activefeed, noexpand) {
        showArticleInHeadlines(id);
 
        if (cached_article && article_is_unread) {
-
-               query = query + "&mode=prefetch";
-
+               query.mode = "prefetch";
                render_article(cached_article);
-
        } else if (cached_article) {
-
-               query = query + "&mode=prefetch_old";
+        query.mode = "prefetch_old";
                render_article(cached_article);
 
                // if we don't need to request any relative ids, we might as well skip
@@ -383,18 +343,16 @@ function view(id, activefeed, noexpand) {
                decrementFeedCounter(getActiveFeedId(), activeFeedIsCat());
        }
 
-       new Ajax.Request("backend.php", {
-               parameters: query,
-               onComplete: function(transport) {
-                       article_callback2(transport, id);
-               } });
+       xhrPost("backend.php", query, (transport) => {
+        article_callback2(transport, id);
+       })
 
        return false;
 
 }
 
 function toggleMark(id, client_only) {
-       let query = "?op=rpc&id=" + id + "&method=mark";
+       const query = { op: "rpc", id: id, method: "mark" };
 
        const row = $("RROW-" + id);
        if (!row) return;
@@ -403,7 +361,7 @@ function toggleMark(id, client_only) {
 
        const row_imgs = row.getElementsByClassName("markedPic");
 
-       for (var i = 0; i < row_imgs.length; i++)
+       for (let i = 0; i < row_imgs.length; i++)
                imgs.push(row_imgs[i]);
 
        const ft = $("floatingTitle");
@@ -420,32 +378,28 @@ function toggleMark(id, client_only) {
 
                if (!row.hasClassName("marked")) {
                        img.src = img.src.replace("mark_unset", "mark_set");
-                       query = query + "&mark=1";
+                       query.mark = 1;
                } else {
                        img.src = img.src.replace("mark_set", "mark_unset");
-                       query = query + "&mark=0";
+                       query.mark = 0;
                }
        }
 
        row.toggleClassName("marked");
 
-       if (!client_only) {
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function (transport) {
-                               handle_rpc_json(transport);
-                       }
+       if (!client_only)
+               xhrPost("backend.php", query, (transport) => {
+                       handle_rpc_json(transport);
                });
        }
-}
 
 function togglePub(id, client_only, no_effects, note) {
-       let query = "?op=rpc&id=" + id + "&method=publ";
+    const query = { op: "rpc", id: id, method: "publ" };
 
        if (note != undefined) {
-               query = query + "&note=" + param_escape(note);
+               query.note = note;
        } else {
-               query = query + "&note=undefined";
+               query.note = "undefined";
        }
 
        const row = $("RROW-" + id);
@@ -455,7 +409,7 @@ function togglePub(id, client_only, no_effects, note) {
 
        const row_imgs = row.getElementsByClassName("pubPic");
 
-       for (var i = 0; i < row_imgs.length; i++)
+       for (let i = 0; i < row_imgs.length; i++)
                imgs.push(row_imgs[i]);
 
        const ft = $("floatingTitle");
@@ -463,19 +417,19 @@ function togglePub(id, client_only, no_effects, note) {
        if (ft && ft.getAttribute("data-article-id") == id) {
                const fte = ft.getElementsByClassName("pubPic");
 
-               for (var i = 0; i < fte.length; i++)
+               for (let i = 0; i < fte.length; i++)
                        imgs.push(fte[i]);
        }
 
-       for (var i = 0; i < imgs.length; i++) {
+       for (let i = 0; i < imgs.length; i++) {
                const img = imgs[i];
 
                if (!row.hasClassName("published") || note != undefined) {
                        img.src = img.src.replace("pub_unset", "pub_set");
-                       query = query + "&pub=1";
+                       query.pub = 1;
                } else {
                        img.src = img.src.replace("pub_set", "pub_unset");
-                       query = query + "&pub=0";
+                       query.pub = 0;
                }
        }
 
@@ -484,14 +438,10 @@ function togglePub(id, client_only, no_effects, note) {
        else
                row.toggleClassName("published");
 
-       if (!client_only) {
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function(transport) {
+       if (!client_only)
+               xhrPost("backend.php", query, (transport) => {
                                handle_rpc_json(transport);
-                       } });
-       }
-
+               });
 }
 
 function moveToPost(mode, noscroll, noexpand) {
@@ -540,7 +490,6 @@ function moveToPost(mode, noscroll, noexpand) {
                                        scrollArticle(ctr.offsetHeight/4);
 
                                } else if (next_id) {
-                                       cdmExpandArticle(next_id, noexpand);
                                        cdmScrollToArticleId(next_id, true);
                                }
 
@@ -559,24 +508,14 @@ function moveToPost(mode, noscroll, noexpand) {
                                const prev_article = $("RROW-" + prev_id);
                                var ctr = $("headlines-frame");
 
-                               if (!getInitParam("cdm_expanded")) {
-
-                                       if (!noscroll && article && article.offsetTop < ctr.scrollTop) {
-                                               scrollArticle(-ctr.offsetHeight/4);
-                                       } else {
-                                               cdmExpandArticle(prev_id, noexpand);
-                                               cdmScrollToArticleId(prev_id, true);
-                                       }
-                               } else if (!noscroll && article && article.offsetTop < ctr.scrollTop) {
-                                               scrollArticle(-ctr.offsetHeight/3);
-                                       } else if (!noscroll && prev_article &&
-                                                       prev_article.offsetTop < ctr.scrollTop) {
-                                               cdmExpandArticle(prev_id, noexpand);
-                                               scrollArticle(-ctr.offsetHeight/4);
-                                       } else if (prev_id) {
-                                               cdmExpandArticle(prev_id, noexpand);
-                                               cdmScrollToArticleId(prev_id, noscroll);
-                                       }
+                               if (!noscroll && article && article.offsetTop < ctr.scrollTop) {
+                                       scrollArticle(-ctr.offsetHeight/3);
+                               } else if (!noscroll && prev_article &&
+                                               prev_article.offsetTop < ctr.scrollTop) {
+                                       scrollArticle(-ctr.offsetHeight/4);
+                               } else if (prev_id) {
+                                       cdmScrollToArticleId(prev_id, noscroll);
+                               }
 
                        } else if (prev_id) {
                                correctHeadlinesOffset(prev_id);
@@ -607,7 +546,7 @@ function toggleSelected(id, force_on) {
 }
 
 function updateSelectedPrompt() {
-       const count = getSelectedArticleIds2().size();
+       const count = getSelectedArticleIds2().length;
        const elem = $("selected_prompt");
 
        if (elem) {
@@ -622,7 +561,7 @@ function updateSelectedPrompt() {
 
 }
 
-function toggleUnread(id, cmode, effect) {
+function toggleUnread(id, cmode) {
        const row = $("RROW-" + id);
        if (row) {
                const tmpClassName = row.className;
@@ -643,22 +582,17 @@ function toggleUnread(id, cmode, effect) {
                        row.addClassName("Unread");
                }
 
-               if (cmode == undefined) cmode = 2;
-
-               const query = "?op=rpc&method=catchupSelected" +
-                       "&cmode=" + param_escape(cmode) + "&ids=" + param_escape(id);
+               if (tmpClassName != row.className) {
+            if (cmode == undefined) cmode = 2;
 
-//                     notify_progress("Loading, please wait...");
+            const query = {op: "rpc", method: "catchupSelected",
+                cmode: cmode, ids: id};
 
-               if (tmpClassName != row.className) {
-                       new Ajax.Request("backend.php", {
-                               parameters: query,
-                               onComplete: function (transport) {
+            xhrPost("backend.php", query, (transport) => {
                                        handle_rpc_json(transport);
-                               }
+
                        });
                }
-
        }
 }
 
@@ -670,18 +604,13 @@ function selectionRemoveLabel(id, ids) {
                return;
        }
 
-       const query = "?op=article&method=removeFromLabel&ids=" +
-               param_escape(ids.toString()) + "&lid=" + param_escape(id);
-
-       console.log(query);
-
-       new Ajax.Request("backend.php", {
-               parameters: query,
-               onComplete: function(transport) {
-                       handle_rpc_json(transport);
-                       show_labels_in_headlines(transport);
-               } });
+       const query = { op: "article", method: "removeFromLabel",
+               ids: ids.toString(), lid: id };
 
+       xhrPost("backend.php", query, (transport) => {
+        handle_rpc_json(transport);
+        show_labels_in_headlines(transport);
+       });
 }
 
 function selectionAssignLabel(id, ids) {
@@ -692,17 +621,13 @@ function selectionAssignLabel(id, ids) {
                return;
        }
 
-       const query = "?op=article&method=assignToLabel&ids=" +
-               param_escape(ids.toString()) + "&lid=" + param_escape(id);
+       const query = { op: "article", method: "assignToLabel",
+               ids: ids.toString(), lid: id };
 
-       console.log(query);
-
-       new Ajax.Request("backend.php", {
-               parameters: query,
-               onComplete: function(transport) {
-                       handle_rpc_json(transport);
-                       show_labels_in_headlines(transport);
-               } });
+    xhrPost("backend.php", query, (transport) => {
+        handle_rpc_json(transport);
+        show_labels_in_headlines(transport);
+    });
 }
 
 function selectionToggleUnread(set_state, callback, no_error, ids) {
@@ -748,17 +673,15 @@ function selectionToggleUnread(set_state, callback, no_error, ids) {
                        cmode = "0";
                }
 
-               const query = "?op=rpc&method=catchupSelected" +
-                       "&cmode=" + cmode + "&ids=" + param_escape(rows.toString());
+               const query = {op: "rpc", method: "catchupSelected",
+                       cmode: cmode, ids: rows.toString() };
 
                notify_progress("Loading, please wait...");
 
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function(transport) {
-                               handle_rpc_json(transport);
-                               if (callback) callback(transport);
-                       } });
+        xhrPost("backend.php", query, (transport) => {
+            handle_rpc_json(transport);
+            if (callback) callback(transport);
+        });
 
        }
 }
@@ -777,17 +700,13 @@ function selectionToggleMarked(sel_state, callback, no_error, ids) {
        }
 
        if (rows.length > 0) {
+               const query = { op: "rpc", method: "markSelected",
+                       ids:  rows.toString(), cmode: 2 };
 
-               const query = "?op=rpc&method=markSelected&ids=" +
-                       param_escape(rows.toString()) + "&cmode=2";
-
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function(transport) {
-                               handle_rpc_json(transport);
-                               if (callback) callback(transport);
-                       } });
-
+        xhrPost("backend.php", query, (transport) => {
+            handle_rpc_json(transport);
+            if (callback) callback(transport);
+        });
        }
 }
 
@@ -805,16 +724,13 @@ function selectionTogglePublished(sel_state, callback, no_error, ids) {
        }
 
        if (rows.length > 0) {
+        const query = { op: "rpc", method: "publishSelected",
+            ids:  rows.toString(), cmode: 2 };
 
-               const query = "?op=rpc&method=publishSelected&ids=" +
-                       param_escape(rows.toString()) + "&cmode=2";
-
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function(transport) {
-                               handle_rpc_json(transport);
-                       } });
-
+        xhrPost("backend.php", query, (transport) => {
+            handle_rpc_json(transport);
+            if (callback) callback(transport);
+        });
        }
 }
 
@@ -852,7 +768,7 @@ function selectArticles(mode, query) {
        const children = $$(query);
 
        children.each(function(child) {
-               const id = child.getAttribute("data-article-id");
+               //const id = child.getAttribute("data-article-id");
 
                const cb = dijit.getEnclosingWidget(
                                child.getElementsByClassName("rchk")[0]);
@@ -928,65 +844,55 @@ function deleteSelection() {
                return;
        }
 
-       const query = "?op=rpc&method=delete&ids=" + param_escape(rows);
-
-       console.log(query);
+       const query = { op: "rpc", method: "delete", ids: rows.toString() };
 
-       new Ajax.Request("backend.php", {
-               parameters: query,
-               onComplete: function (transport) {
-                       handle_rpc_json(transport);
-                       viewCurrentFeed();
-               }
+       xhrPost("backend.php", query, (transport) => {
+        handle_rpc_json(transport);
+        viewCurrentFeed();
        });
 }
 
 function archiveSelection() {
 
-       const rows = getSelectedArticleIds2();
-
-       if (rows.length == 0) {
-               alert(__("No articles are selected."));
-               return;
-       }
-
-       const fn = getFeedName(getActiveFeedId(), activeFeedIsCat());
-       let str;
-       let op;
+    const rows = getSelectedArticleIds2();
 
-       if (getActiveFeedId() != 0) {
-               str = ngettext("Archive %d selected article in %s?", "Archive %d selected articles in %s?", rows.length);
-               op = "archive";
-       } else {
-               str = ngettext("Move %d archived article back?", "Move %d archived articles back?", rows.length);
+    if (rows.length == 0) {
+        alert(__("No articles are selected."));
+        return;
+    }
 
-               str += " " + __("Please note that unstarred articles might get purged on next feed update.");
+    const fn = getFeedName(getActiveFeedId(), activeFeedIsCat());
+    let str;
+    let op;
 
-               op = "unarchive";
-       }
+    if (getActiveFeedId() != 0) {
+        str = ngettext("Archive %d selected article in %s?", "Archive %d selected articles in %s?", rows.length);
+        op = "archive";
+    } else {
+        str = ngettext("Move %d archived article back?", "Move %d archived articles back?", rows.length);
 
-       str = str.replace("%d", rows.length);
-       str = str.replace("%s", fn);
+        str += " " + __("Please note that unstarred articles might get purged on next feed update.");
 
-       if (getInitParam("confirm_feed_catchup") == 1 && !confirm(str)) {
-               return;
-       }
+        op = "unarchive";
+    }
 
-       const query = "?op=rpc&method="+op+"&ids=" + param_escape(rows);
+    str = str.replace("%d", rows.length);
+    str = str.replace("%s", fn);
 
-       console.log(query);
+    if (getInitParam("confirm_feed_catchup") == 1 && !confirm(str)) {
+        return;
+    }
 
-       for (let i = 0; i < rows.length; i++) {
-               cache_delete("article:" + rows[i]);
-       }
+    for (let i = 0; i < rows.length; i++) {
+        cache_delete("article:" + rows[i]);
+    }
 
-       new Ajax.Request("backend.php", {
-               parameters: query,
-               onComplete: function(transport) {
-                               handle_rpc_json(transport);
-                               viewCurrentFeed();
-                       } });
+    const query = {op: "rpc", method: op, ids: rows.toString()};
 
+    xhrPost("backend.php", query, (transport) => {
+        handle_rpc_json(transport);
+        viewCurrentFeed();
+    });
 }
 
 function catchupSelection() {
@@ -1018,7 +924,7 @@ function editArticleTags(id) {
        if (dijit.byId("editTagsDlg"))
                dijit.byId("editTagsDlg").destroyRecursive();
 
-       var dialog = new dijit.Dialog({
+       const dialog = new dijit.Dialog({
                id: "editTagsDlg",
                title: __("Edit article Tags"),
                style: "width: 600px",
@@ -1028,31 +934,26 @@ function editArticleTags(id) {
 
                                notify_progress("Saving article tags...", true);
 
-                               new Ajax.Request("backend.php", {
-                               parameters: query,
-                               onComplete: function(transport) {
-                                       try {
-                                               notify('');
-                                               dialog.hide();
-
-                                               const data = JSON.parse(transport.responseText);
+                               xhrPost("backend.php", this.attr('value'), (transport) => {
+                    try {
+                        notify('');
+                        dialog.hide();
 
-                                               if (data) {
-                                                       const id = data.id;
+                        const data = JSON.parse(transport.responseText);
 
-                                                       console.log(id);
+                        if (data) {
+                            const id = data.id;
 
-                                                       const tags = $("ATSTR-" + id);
-                                                       const tooltip = dijit.byId("ATSTRTIP-" + id);
+                            const tags = $("ATSTR-" + id);
+                            const tooltip = dijit.byId("ATSTRTIP-" + id);
 
-                                                       if (tags) tags.innerHTML = data.content;
-                                                       if (tooltip) tooltip.attr('label', data.content_full);
-                                               }
-                                       } catch (e) {
-                                               exception_error(e);
-                                       }
-
-                               }});
+                            if (tags) tags.innerHTML = data.content;
+                            if (tooltip) tooltip.attr('label', data.content_full);
+                        }
+                    } catch (e) {
+                        exception_error(e);
+                    }
+                               });
                        }
                },
                href: query
@@ -1104,26 +1005,26 @@ function postMouseOut(id) {
 }
 
 function unpackVisibleHeadlines() {
-       if (!isCdmMode() || !getInitParam("cdm_expanded")) return;
+       if (!isCdmMode()) return;
 
-       $$("#headlines-frame span.cencw[id]").each(
-               function (child) {
-                       const row = $("RROW-" + child.id.replace("CENCW-", ""));
+    const rows = $$("#headlines-frame div[id*=RROW][data-content]");
 
-                       if (row && row.offsetTop <= $("headlines-frame").scrollTop +
-                               $("headlines-frame").offsetHeight) {
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
 
-                               //console.log("unpacking: " + child.id);
+        if (row.offsetTop <= $("headlines-frame").scrollTop + $("headlines-frame").offsetHeight) {
+            console.log("unpacking: " + row.id);
 
-                               child.innerHTML = htmlspecialchars_decode(child.innerHTML);
-                               child.removeAttribute('id');
+            const content = row.getAttribute("data-content");
 
-                               PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
+            row.select(".cdmContentInner")[0].innerHTML = content;
+            row.removeAttribute("data-content");
 
-                               Element.show(child);
-                       }
-               }
-       );
+            PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
+        } else {
+            break;
+        }
+    }
 }
 
 function headlines_scroll_handler(e) {
@@ -1136,30 +1037,27 @@ function headlines_scroll_handler(e) {
 
                _headlines_scroll_offset = e.scrollTop;
 
-               const hsp = $("headlines-spacer");
-
                unpackVisibleHeadlines();
 
                // set topmost child in the buffer as active
                if (isCdmMode() && getInitParam("cdm_auto_catchup") == 1 &&
-                               getSelectedArticleIds2().length <= 1 &&
-                               getInitParam("cdm_expanded")) {
+                               getSelectedArticleIds2().length <= 1) {
 
                        const rows = $$("#headlines-frame > div[id*=RROW]");
 
                        for (let i = 0; i < rows.length; i++) {
-                               var child = rows[i];
+                               const row = rows[i];
 
-                               if ($("headlines-frame").scrollTop <= child.offsetTop &&
-                                       child.offsetTop - $("headlines-frame").scrollTop < 100 &&
-                                       child.getAttribute("data-article-id") != _active_article_id) {
+                               if ($("headlines-frame").scrollTop <= row.offsetTop &&
+                                       row.offsetTop - $("headlines-frame").scrollTop < 100 &&
+                                       row.getAttribute("data-article-id") != _active_article_id) {
 
                                        if (_active_article_id) {
                                                const row = $("RROW-" + _active_article_id);
                                                if (row) row.removeClassName("active");
                                        }
 
-                                       _active_article_id = child.getAttribute("data-article-id");
+                                       _active_article_id = row.getAttribute("data-article-id");
                                        showArticleInHeadlines(_active_article_id, true);
                                        updateSelectedPrompt();
                                        break;
@@ -1168,6 +1066,8 @@ function headlines_scroll_handler(e) {
                }
 
                if (!_infscroll_disable) {
+            const hsp = $("headlines-spacer");
+
                        if (hsp && hsp.offsetTop - 250 <= e.scrollTop + e.offsetHeight) {
 
                                hsp.innerHTML = "<span class='loading'><img src='images/indicator_tiny.gif'> " +
@@ -1183,34 +1083,31 @@ function headlines_scroll_handler(e) {
                        updateFloatingTitle();
                }
 
-               catchupCurrentBatchIfNeeded();
-
                if (getInitParam("cdm_auto_catchup") == 1) {
 
-                       // let's get DOM some time to settle down
-                       const ts = new Date().getTime();
-                       if (ts - _last_headlines_update < 100) return;
-
-                       $$("#headlines-frame > div[id*=RROW][class*=Unread]").each(
-                               function(child) {
-                                       if (child.hasClassName("Unread") && $("headlines-frame").scrollTop >
-                                                       (child.offsetTop + child.offsetHeight/2)) {
+                       let rows = $$("#headlines-frame > div[id*=RROW][class*=Unread]");
 
-                                               const id = child.getAttribute("data-article-id")
+                       for (let i = 0; i < rows.length; i++) {
+                const row = rows[i];
+                               
+                               if ($("headlines-frame").scrollTop > (row.offsetTop + row.offsetHeight/2)) {
 
-                                               if (catchup_id_batch.indexOf(id) == -1)
-                                                       catchup_id_batch.push(id);
+                    const id = row.getAttribute("data-article-id")
 
-                                               //console.log("auto_catchup_batch: " + catchup_id_batch.toString());
-                                       }
+                    if (catchup_id_batch.indexOf(id) == -1)
+                        catchup_id_batch.push(id);
 
-                               });
+                    //console.log("auto_catchup_batch: " + catchup_id_batch.toString());
+                } else {
+                                       break;
+                               }
+            }
 
                        if (_infscroll_disable) {
-                               var child = $$("#headlines-frame div[id*=RROW]").last();
+                               const row = $$("#headlines-frame div[id*=RROW]").last();
 
-                               if (child && $("headlines-frame").scrollTop >
-                                               (child.offsetTop + child.offsetHeight - 50)) {
+                               if (row && $("headlines-frame").scrollTop >
+                                               (row.offsetTop + row.offsetHeight - 50)) {
 
                                        console.log("we seem to be at an end");
 
@@ -1235,37 +1132,31 @@ function openNextUnreadFeed() {
 function catchupBatchedArticles() {
        if (catchup_id_batch.length > 0 && !_infscroll_request_sent && !_catchup_request_sent) {
 
-               console.log("catchupBatchedArticles: working");
+               console.log("catchupBatchedArticles, size=", catchup_id_batch.length);
 
                // make a copy of the array
                const batch = catchup_id_batch.slice();
-               const query = "?op=rpc&method=catchupSelected" +
-                       "&cmode=0&ids=" + param_escape(batch.toString());
-
-               console.log(query);
+               const query = { op: "rpc", method: "catchupSelected",
+                       cmode: 0, ids: batch.toString() };
 
                _catchup_request_sent = true;
 
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function (transport) {
-                               handle_rpc_json(transport);
+               xhrPost("backend.php", query, (transport) => {
+            const reply = handle_rpc_json(transport);
 
-                               _catchup_request_sent = false;
+            _catchup_request_sent = false;
 
-                               const reply = JSON.parse(transport.responseText);
-                               const batch = reply.ids;
+            if (reply) {
+                const batch = reply.ids;
 
-                               batch.each(function (id) {
-                                       console.log(id);
-                                       const elem = $("RROW-" + id);
-                                       if (elem) elem.removeClassName("Unread");
-                                       catchup_id_batch.remove(id);
-                               });
-
-                               updateFloatingTitle(true);
+                batch.each(function (id) {
+                    const elem = $("RROW-" + id);
+                    if (elem) elem.removeClassName("Unread");
+                    catchup_id_batch.remove(id);
+                });
+            }
 
-                       }
+            updateFloatingTitle(true);
                });
        }
 }
@@ -1281,7 +1172,7 @@ function catchupRelativeToArticle(below, id) {
 
        const visible_ids = getLoadedArticleIds();
 
-       const ids_to_mark = new Array();
+       const ids_to_mark = [];
 
        if (!below) {
                for (var i = 0; i < visible_ids.length; i++) {
@@ -1321,125 +1212,16 @@ function catchupRelativeToArticle(below, id) {
                                e.removeClassName("Unread");
                        }
 
-                       const query = "?op=rpc&method=catchupSelected" +
-                               "&cmode=0" + "&ids=" + param_escape(ids_to_mark.toString());
+                       const query = { op: "rpc", method: "catchupSelected",
+                               cmode: 0, ids: ids_to_mark.toString() };
 
-                       new Ajax.Request("backend.php", {
-                               parameters: query,
-                               onComplete: function (transport) {
-                                       handle_rpc_json(transport);
-                               }
+                       xhrPost("backend.php", query, (transport) => {
+                handle_rpc_json(transport);
                        });
-
-               }
-       }
-}
-
-function cdmCollapseArticle(event, id, unmark) {
-       if (unmark == undefined) unmark = true;
-
-       const row = $("RROW-" + id);
-       const elem = $("CICD-" + id);
-
-       if (elem && row) {
-               const collapse = row.select("span[class='collapseBtn']")[0];
-
-               Element.hide(elem);
-               Element.show("CEXC-" + id);
-               Element.hide(collapse);
-
-               if (unmark) {
-                       row.removeClassName("active");
-
-                       markHeadline(id, false);
-
-                       if (id == getActiveArticleId()) {
-                               setActiveArticleId(0);
-                       }
-
-                       updateSelectedPrompt();
                }
-
-               if (event) Event.stop(event);
-
-               PluginHost.run(PluginHost.HOOK_ARTICLE_COLLAPSED, id);
-
-               if (row.offsetTop < $("headlines-frame").scrollTop)
-                       scrollToRowId(row.id);
-
-               $("floatingTitle").style.visibility = "hidden";
-               $("floatingTitle").setAttribute("data-article-id", 0);
        }
 }
 
-function cdmExpandArticle(id, noexpand) {
-       console.log("cdmExpandArticle " + id);
-
-       const row = $("RROW-" + id);
-
-       if (!row) return false;
-
-       const oldrow = $("RROW-" + getActiveArticleId());
-
-       let elem = $("CICD-" + getActiveArticleId());
-
-       if (id == getActiveArticleId() && Element.visible(elem))
-               return true;
-
-       selectArticles("none");
-
-       const old_offset = row.offsetTop;
-
-       if (getActiveArticleId() && elem && !getInitParam("cdm_expanded")) {
-               var collapse = oldrow.select("span[class='collapseBtn']")[0];
-
-               Element.hide(elem);
-               Element.show("CEXC-" + getActiveArticleId());
-               Element.hide(collapse);
-       }
-
-       if (oldrow) oldrow.removeClassName("active");
-
-       setActiveArticleId(id);
-
-       elem = $("CICD-" + id);
-
-       var collapse = row.select("span[class='collapseBtn']")[0];
-
-       const cencw = $("CENCW-" + id);
-
-       if (!Element.visible(elem) && !noexpand) {
-               if (cencw) {
-                       cencw.innerHTML = htmlspecialchars_decode(cencw.innerHTML);
-                       cencw.setAttribute('id', '');
-                       Element.show(cencw);
-               }
-
-               Element.show(elem);
-               Element.hide("CEXC-" + id);
-               Element.show(collapse);
-       }
-
-       const new_offset = row.offsetTop;
-
-       if (old_offset > new_offset)
-               $("headlines-frame").scrollTop -= (old_offset - new_offset);
-
-       if (!noexpand) {
-               if (catchup_id_batch.indexOf(id) == -1)
-                       catchup_id_batch.push(id);
-
-               catchupCurrentBatchIfNeeded();
-       }
-
-       toggleSelected(id);
-       row.addClassName("active");
-
-       PluginHost.run(PluginHost.HOOK_ARTICLE_EXPANDED, id);
-
-       return false;
-}
-
 function getArticleUnderPointer() {
        return post_under_pointer;
 }
@@ -1476,49 +1258,43 @@ function cdmClicked(event, id, in_body) {
 
        if (!event.ctrlKey && !event.metaKey) {
 
-               if (!getInitParam("cdm_expanded")) {
-                       return cdmExpandArticle(id);
-               } else {
-
-                       var elem = $("RROW-" + getActiveArticleId());
+               let elem = $("RROW-" + getActiveArticleId());
 
-                       if (elem) elem.removeClassName("active");
+               if (elem) elem.removeClassName("active");
 
-                       selectArticles("none");
-                       toggleSelected(id);
+               selectArticles("none");
+               toggleSelected(id);
 
-                       var elem = $("RROW-" + id);
-                       var article_is_unread = elem.hasClassName("Unread");
+               elem = $("RROW-" + id);
+               const article_is_unread = elem.hasClassName("Unread");
 
-                       elem.removeClassName("Unread");
-                       elem.addClassName("active");
+               elem.removeClassName("Unread");
+               elem.addClassName("active");
 
-                       setActiveArticleId(id);
+               setActiveArticleId(id);
 
-                       if (article_is_unread) {
-                               decrementFeedCounter(getActiveFeedId(), activeFeedIsCat());
-                               updateFloatingTitle(true);
-                       }
+               if (article_is_unread) {
+                       decrementFeedCounter(getActiveFeedId(), activeFeedIsCat());
+                       updateFloatingTitle(true);
 
-                       const query = "?op=rpc&method=catchupSelected" +
-                               "&cmode=0&ids=" + param_escape(id);
+                       const query = {
+                               op: "rpc", method: "catchupSelected",
+                               cmode: 0, ids: id
+                       };
 
-                       new Ajax.Request("backend.php", {
-                               parameters: query,
-                               onComplete: function (transport) {
-                                       handle_rpc_json(transport);
-                               }
+                       xhrPost("backend.php", query, (transport) => {
+                               handle_rpc_json(transport);
                        });
-
-                       return !event.shiftKey;
                }
 
+               return !event.shiftKey;
+
        } else if (!in_body) {
 
                toggleSelected(id, true);
 
-               var elem = $("RROW-" + id);
-               var article_is_unread = elem.hasClassName("Unread");
+               let elem = $("RROW-" + id);
+               const article_is_unread = elem.hasClassName("Unread");
 
                if (article_is_unread) {
                        decrementFeedCounter(getActiveFeedId(), activeFeedIsCat());
@@ -1674,12 +1450,12 @@ function headlinesMenuCommon(menu) {
 
        menu.addChild(new dijit.MenuItem({
                label: __("Toggle unread"),
-               onClick: function (event) {
+               onClick: function () {
 
                        let ids = getSelectedArticleIds2();
                        // cast to string
                        const id = (this.getParent().currentTarget.getAttribute("data-article-id")) + "";
-                       ids = ids.size() != 0 && ids.indexOf(id) != -1 ? ids : [id];
+                       ids = ids.length != 0 && ids.indexOf(id) != -1 ? ids : [id];
 
                        selectionToggleUnread(undefined, false, true, ids);
                }
@@ -1687,11 +1463,11 @@ function headlinesMenuCommon(menu) {
 
        menu.addChild(new dijit.MenuItem({
                label: __("Toggle starred"),
-               onClick: function (event) {
+               onClick: function () {
                        let ids = getSelectedArticleIds2();
                        // cast to string
                        const id = (this.getParent().currentTarget.getAttribute("data-article-id")) + "";
-                       ids = ids.size() != 0 && ids.indexOf(id) != -1 ? ids : [id];
+                       ids = ids.length != 0 && ids.indexOf(id) != -1 ? ids : [id];
 
                        selectionToggleMarked(undefined, false, true, ids);
                }
@@ -1699,11 +1475,11 @@ function headlinesMenuCommon(menu) {
 
        menu.addChild(new dijit.MenuItem({
                label: __("Toggle published"),
-               onClick: function (event) {
+               onClick: function () {
                        let ids = getSelectedArticleIds2();
                        // cast to string
                        const id = (this.getParent().currentTarget.getAttribute("data-article-id")) + "";
-                       ids = ids.size() != 0 && ids.indexOf(id) != -1 ? ids : [id];
+                       ids = ids.length != 0 && ids.indexOf(id) != -1 ? ids : [id];
 
                        selectionTogglePublished(undefined, false, true, ids);
                }
@@ -1713,14 +1489,14 @@ function headlinesMenuCommon(menu) {
 
        menu.addChild(new dijit.MenuItem({
                label: __("Mark above as read"),
-               onClick: function (event) {
+               onClick: function () {
                        catchupRelativeToArticle(0, this.getParent().currentTarget.getAttribute("data-article-id"));
                }
        }));
 
        menu.addChild(new dijit.MenuItem({
                label: __("Mark below as read"),
-               onClick: function (event) {
+               onClick: function () {
                        catchupRelativeToArticle(1, this.getParent().currentTarget.getAttribute("data-article-id"));
                }
        }));
@@ -1742,13 +1518,13 @@ function headlinesMenuCommon(menu) {
                        labelAddMenu.addChild(new dijit.MenuItem({
                                label: name,
                                labelId: bare_id,
-                               onClick: function (event) {
+                               onClick: function () {
 
                                        let ids = getSelectedArticleIds2();
                                        // cast to string
                                        const id = (this.getParent().ownerMenu.currentTarget.getAttribute("data-article-id")) + "";
 
-                                       ids = ids.size() != 0 && ids.indexOf(id) != -1 ? ids : [id];
+                                       ids = ids.length != 0 && ids.indexOf(id) != -1 ? ids : [id];
 
                                        selectionAssignLabel(this.labelId, ids);
                                }
@@ -1757,12 +1533,12 @@ function headlinesMenuCommon(menu) {
                        labelDelMenu.addChild(new dijit.MenuItem({
                                label: name,
                                labelId: bare_id,
-                               onClick: function (event) {
+                               onClick: function () {
                                        let ids = getSelectedArticleIds2();
                                        // cast to string
                                        const id = (this.getParent().ownerMenu.currentTarget.getAttribute("data-article-id")) + "";
 
-                                       ids = ids.size() != 0 && ids.indexOf(id) != -1 ? ids : [id];
+                                       ids = ids.length != 0 && ids.indexOf(id) != -1 ? ids : [id];
 
                                        selectionRemoveLabel(this.labelId, ids);
                                }
@@ -1786,7 +1562,7 @@ function headlinesMenuCommon(menu) {
 function initHeadlinesMenu() {
        if (!dijit.byId("headlinesMenu")) {
 
-               var menu = new dijit.Menu({
+               const menu = new dijit.Menu({
                        id: "headlinesMenu",
                        targetNodeIds: ["headlines-frame"],
                        selector: ".hlMenuAttach"
@@ -1801,7 +1577,7 @@ function initHeadlinesMenu() {
 
        if (!dijit.byId("headlinesFeedTitleMenu")) {
 
-               var menu = new dijit.Menu({
+               const menu = new dijit.Menu({
                        id: "headlinesFeedTitleMenu",
                        targetNodeIds: ["headlines-frame"],
                        selector: "div.cdmFeedTitle"
@@ -1819,7 +1595,7 @@ function initHeadlinesMenu() {
 
                menu.addChild(new dijit.MenuItem({
                        label: __("Mark group as read"),
-                       onClick: function (event) {
+                       onClick: function () {
                                selectArticles("none");
                                selectArticles("all",
                                        "#headlines-frame > div[id*=RROW]" +
@@ -1831,14 +1607,14 @@ function initHeadlinesMenu() {
 
                menu.addChild(new dijit.MenuItem({
                        label: __("Mark feed as read"),
-                       onClick: function (event) {
+                       onClick: function () {
                                catchupFeedInGroup(this.getParent().currentTarget.getAttribute("data-feed-id"));
                        }
                }));
 
                menu.addChild(new dijit.MenuItem({
                        label: __("Edit feed"),
-                       onClick: function (event) {
+                       onClick: function () {
                                editFeed(this.getParent().currentTarget.getAttribute("data-feed-id"));
                        }
                }));
@@ -1883,34 +1659,28 @@ function setSelectionScore() {
        if (ids.length > 0) {
                console.log(ids);
 
-               var score = prompt(__("Please enter new score for selected articles:"), score);
+               const score = prompt(__("Please enter new score for selected articles:"));
 
                if (score != undefined) {
-                       const query = "op=article&method=setScore&id=" + param_escape(ids.toString()) +
-                               "&score=" + param_escape(score);
-
-                       new Ajax.Request("backend.php", {
-                               parameters: query,
-                               onComplete: function (transport) {
-                                       const reply = JSON.parse(transport.responseText);
-                                       if (reply) {
-                                               console.log(ids);
-
-                                               ids.each(function (id) {
-                                                       const row = $("RROW-" + id);
-
-                                                       if (row) {
-                                                               const pic = row.getElementsByClassName("hlScorePic")[0];
-
-                                                               if (pic) {
-                                                                       pic.src = pic.src.replace(/score_.*?\.png/,
-                                                                               reply["score_pic"]);
-                                                                       pic.setAttribute("score", score);
-                                                               }
-                                                       }
-                                               });
-                                       }
-                               }
+                       const query = { op: "article", method: "setScore", id: ids.toString(),
+                               score: score };
+
+                       xhrJson("backend.php", query, (reply) => {
+                               if (reply) {
+                    reply.id.each((id) => {
+                        const row = $("RROW-" + id);
+
+                        if (row) {
+                            const pic = row.getElementsByClassName("hlScorePic")[0];
+
+                            if (pic) {
+                                pic.src = pic.src.replace(/score_.*?\.png/,
+                                    reply["score_pic"]);
+                                pic.setAttribute("score", reply["score"]);
+                            }
+                        }
+                    });
+                }
                        });
                }
 
@@ -1919,6 +1689,7 @@ function setSelectionScore() {
        }
 }
 
+/*
 function updateScore(id) {
        const pic = $$("#RROW-" + id + " .hlScorePic")[0];
 
@@ -1941,7 +1712,7 @@ function updateScore(id) {
                        }
                });
        }
-}
+} */
 
 function changeScore(id, pic) {
        const score = pic.getAttribute("score");
@@ -1949,38 +1720,27 @@ function changeScore(id, pic) {
        const new_score = prompt(__("Please enter new score for this article:"), score);
 
        if (new_score != undefined) {
-
-               const query = "op=article&method=setScore&id=" + param_escape(id) +
-                       "&score=" + param_escape(new_score);
-
-               new Ajax.Request("backend.php", {
-                       parameters: query,
-                       onComplete: function (transport) {
-                               const reply = JSON.parse(transport.responseText);
-
-                               if (reply) {
-                                       pic.src = pic.src.replace(/score_.*?\.png/, reply["score_pic"]);
-                                       pic.setAttribute("score", new_score);
-                                       pic.setAttribute("title", new_score);
-                               }
-                       }
+               const query = { op: "article", method: "setScore", id: id, score: new_score };
+
+               xhrJson("backend.php", query, (reply) => {
+            if (reply) {
+                pic.src = pic.src.replace(/score_.*?\.png/, reply["score_pic"]);
+                pic.setAttribute("score", new_score);
+                pic.setAttribute("title", new_score);
+            }
                });
        }
 }
 
 function displayArticleUrl(id) {
-       const query = "op=rpc&method=getlinktitlebyid&id=" + param_escape(id);
+       const query = { op: "rpc", method: "getlinktitlebyid", id: id };
 
-       new Ajax.Request("backend.php", {
-               parameters: query,
-               onComplete: function (transport) {
-                       const reply = JSON.parse(transport.responseText);
-
-                       if (reply && reply.link) {
-                               prompt(__("Article URL:"), reply.link);
-                       }
-               }
+       xhrJson("backend.php", query, (reply) => {
+        if (reply && reply.link) {
+            prompt(__("Article URL:"), reply.link);
+        }
        });
+
 }
 
 function scrollToRowId(id) {
@@ -2040,18 +1800,3 @@ function updateFloatingTitle(unread_only) {
                }
        }
 }
-
-function catchupCurrentBatchIfNeeded() {
-       if (catchup_id_batch.length > 0) {
-               window.clearTimeout(catchup_timeout_id);
-               catchup_timeout_id = window.setTimeout(catchupBatchedArticles, 1000);
-
-               if (catchup_id_batch.length >= 10) {
-                       catchupBatchedArticles();
-               }
-       }
-}
-
-function cdmFooterClick(event) {
-       event.stopPropagation();
-}