Move http functions to new javascript file http.js.

frontends/bringrss_flask/static/js/api.js

@@ -6,129 +6,161 @@ api.feeds = {};
 api.feeds.add_feed =
 function add_feed(rss_url, title, isolate_guids, callback)
 {
-    const url = "/feeds/add";
+    return http.post({
-    const data = {"rss_url": rss_url, "title": title, "isolate_guids": isolate_guids};
+        url: "/feeds/add",
-    return common.post(url, data, callback);
+        data: {"rss_url": rss_url, "title": title, "isolate_guids": isolate_guids},
+        callback: callback,
+    });
 }
 
 api.feeds.delete =
 function delete_feed(feed_id, callback)
 {
-    const url = `/feed/${feed_id}/delete`;
+    return http.post({
-    return common.post(url, null, callback);
+        url: `/feed/${feed_id}/delete`,
+        callback: callback,
+    });
 }
 
 api.feeds.get_feeds =
 function get_feeds(callback)
 {
-    const url = "/feeds.json";
+    return http.get({
-    return common.get(url, callback);
+        url: "/feeds.json",
+        callback: callback,
+    });
 }
 
 api.feeds.refresh =
 function refresh(feed_id, callback)
 {
-    const url = `/feed/${feed_id}/refresh`;
+    return http.post({
-    return common.post(url, null, callback);
+        url: `/feed/${feed_id}/refresh`,
+        callback: callback,
+    });
 }
 
 api.feeds.refresh_all =
 function refresh_all(callback)
 {
-    const url = "/feeds/refresh_all";
+    return http.post({
-    return common.post(url, null, callback);
+        url: "/feeds/refresh_all",
+        callback: callback,
+    });
 }
 
 api.feeds.set_autorefresh_interval =
 function set_autorefresh_interval(feed_id, interval, callback)
 {
-    const url = `/feed/${feed_id}/set_autorefresh_interval`;
+    return http.post({
-    const data = {"autorefresh_interval": interval};
+        url: `/feed/${feed_id}/set_autorefresh_interval`,
-    return common.post(url, data, callback);
+        data: {"autorefresh_interval": interval},
+        callback: callback,
+    });
 }
 
 api.feeds.set_filters =
 function set_filters(feed_id, filter_ids, callback)
 {
-    const url = `/feed/${feed_id}/set_filters`;
+    return http.post({
-    const data = {"filter_ids": filter_ids.join(",")};
+        url: `/feed/${feed_id}/set_filters`,
-    return common.post(url, data, callback);
+        data: {"filter_ids": filter_ids.join(",")},
+        callback: callback,
+    });
 }
 
 api.feeds.set_http_headers =
 function set_http_headers(feed_id, http_headers, callback)
 {
-    const url = `/feed/${feed_id}/set_http_headers`;
+    return http.post({
-    const data = {"http_headers": http_headers};
+        url: `/feed/${feed_id}/set_http_headers`,
-    return common.post(url, data, callback);
+        data: {"http_headers": http_headers},
+        callback: callback,
+    });
 }
 
 api.feeds.set_icon =
 function set_icon(feed_id, image_base64, callback)
 {
-    const url = `/feed/${feed_id}/set_icon`;
+    return http.post({
-    const data = {"image_base64": image_base64};
+        url: `/feed/${feed_id}/set_icon`,
-    return common.post(url, data, callback);
+        data: {"image_base64": image_base64},
+        callback: callback,
+    });
 }
 
 api.feeds.set_isolate_guids =
 function set_isolate_guids(feed_id, isolate_guids, callback)
 {
-    const url = `/feed/${feed_id}/set_isolate_guids`;
+    return http.post({
-    const data = {"isolate_guids": isolate_guids};
+        url: `/feed/${feed_id}/set_isolate_guids`,
-    return common.post(url, data, callback);
+        data: {"isolate_guids": isolate_guids},
+        callback: callback,
+    });
 }
 
 api.feeds.set_parent =
 function set_parent(feed_id, parent_id, ui_order_rank, callback)
 {
-    const url = `/feed/${feed_id}/set_parent`;
-    const data = {"parent_id": parent_id};
     if (ui_order_rank !== null)
     {
         data["ui_order_rank"] = ui_order_rank;
     }
-    return common.post(url, data, callback);
+    return http.post({
+        url: `/feed/${feed_id}/set_parent`,
+        data: {"parent_id": parent_id},
+        callback: callback,
+    });
 }
 
 api.feeds.set_refresh_with_others =
 function set_refresh_with_others(feed_id, refresh_with_others, callback)
 {
-    const url = `/feed/${feed_id}/set_refresh_with_others`;
+    return http.post({
-    const data = {"refresh_with_others": refresh_with_others};
+        url: `/feed/${feed_id}/set_refresh_with_others`,
-    return common.post(url, data, callback);
+        data: {"refresh_with_others": refresh_with_others},
+        callback: callback,
+    });
 }
 
 api.feeds.set_rss_url =
 function set_rss_url(feed_id, rss_url, callback)
 {
-    const url = `/feed/${feed_id}/set_rss_url`;
+    return http.post({
-    const data = {"rss_url": rss_url};
+        url: `/feed/${feed_id}/set_rss_url`,
-    return common.post(url, data, callback);
+        data: {"rss_url": rss_url},
+        callback: callback,
+    });
 }
 
 api.feeds.set_web_url =
 function set_web_url(feed_id, web_url, callback)
 {
-    const url = `/feed/${feed_id}/set_web_url`;
+    return http.post({
-    const data = {"web_url": web_url};
+        url: `/feed/${feed_id}/set_web_url`,
-    return common.post(url, data, callback);
+        data: {"web_url": web_url},
+        callback: callback,
+    });
 }
 
 api.feeds.set_title =
 function set_title(feed_id, title, callback)
 {
-    const url = `/feed/${feed_id}/set_title`;
+    return http.post({
-    const data = {"title": title};
+        url: `/feed/${feed_id}/set_title`,
-    return common.post(url, data, callback);
+        data: {"title": title},
+        callback: callback,
+    });
 }
 
 api.feeds.set_ui_order_rank =
 function set_ui_order_rank(feed_id, ui_order_rank, callback)
 {
-    const url = `/feed/${feed_id}/set_ui_order_rank`;
+    return http.post({
-    const data = {"ui_order_rank": ui_order_rank};
+        url: `/feed/${feed_id}/set_ui_order_rank`,
-    return common.post(url, data, callback);
+        data: {"ui_order_rank": ui_order_rank},
+        callback: callback,
+    });
 }
 
 /**************************************************************************************************/
@@ -137,67 +169,84 @@ api.filters = {};
 api.filters.add_filter =
 function add_filter(name, conditions, actions, callback)
 {
-    const url = "/filters/add";
+    return http.post({
-    const data = {"name": name, "conditions": conditions, "actions": actions};
+        url: "/filters/add",
-    return common.post(url, data, callback);
+        data: {"name": name, "conditions": conditions, "actions": actions},
+        callback: callback,
+    });
 }
 
 api.filters.delete_filter =
 function delete_filter(filter_id, callback)
 {
-    const url = `/filter/${filter_id}/delete`;
+    return http.post({
-    return common.post(url, null, callback);
+        url: `/filter/${filter_id}/delete`,
+        callback: callback,
+    });
 }
 
 api.filters.get_filters =
 function get_filters(callback)
 {
-    const url = "/filters.json";
+    return http.get({
-    return common.get(url, callback);
+        url: "/filters.json",
+        callback: callback,
+    });
 }
 
 api.filters.run_filter_now =
 function run_filter_now(filter_id, feed_id, callback)
 {
-    const url = `/filter/${filter_id}/run_filter`;
     const data = {};
     if (feed_id !== null)
     {
         data['feed_id'] = feed_id;
     }
-    return common.post(url, data, callback);
+    return http.post({
+        url: `/filter/${filter_id}/run_filter`,
+        data: data,
+        callback: callback,
+    });
 }
 
 api.filters.set_actions =
 function set_actions(filter_id, actions, callback)
 {
-    const url = `/filter/${filter_id}/set_actions`;
+    return http.post({
-    const data = {"actions": actions};
+        url: `/filter/${filter_id}/set_actions`,
-    return common.post(url, data, callback);
+        data: {"actions": actions},
+        callback: callback,
+    });
 }
 
 api.filters.set_conditions =
 function set_conditions(filter_id, conditions, callback)
 {
-    const url = `/filter/${filter_id}/set_conditions`;
+    return http.post({
-    const data = {"conditions": conditions};
+        url: `/filter/${filter_id}/set_conditions`,
-    return common.post(url, data, callback);
+        data: {"conditions": conditions},
+        callback: callback,
+    });
 }
 
 api.filters.set_name =
 function set_name(filter_id, name, callback)
 {
-    const url = `/filter/${filter_id}/set_name`;
+    return http.post({
-    const data = {"name": name};
+        url: `/filter/${filter_id}/set_name`,
-    return common.post(url, data, callback);
+        data: {"name": name},
+        callback: callback,
+    });
 }
 
 api.filters.update_filter =
 function update_filter(filter_id, name, conditions, actions, callback)
 {
-    const url = `/filter/${filter_id}/update`;
+    return http.post({
-    const data = {"name": name, "conditions": conditions, "actions": actions};
+        url: `/filter/${filter_id}/update`,
-    return common.post(url, data, callback);
+        data: {"name": name, "conditions": conditions, "actions": actions},
+        callback: callback,
+    });
 }
 
 /**************************************************************************************************/
@@ -206,9 +255,11 @@ api.news = {};
 api.news.get_and_set_read =
 function get_and_set_read(news_id, callback)
 {
-    const url = `/news/${news_id}.json`;
+    return http.post({
-    const data = {"set_read": true};
+        url: `/news/${news_id}.json`,
-    return common.post(url, data, callback);
+        data: {"set_read": true},
+        callback: callback,
+    });
 }
 
 api.news.get_newss =
@@ -230,38 +281,49 @@ function get_newss(feed_id, read, recycled, callback)
     }
     let url = (feed_id === null) ? "/news.json" : `/feed/${feed_id}/news.json`;
     url += parameters;
-    return common.get(url, callback);
+    return http.get({
+        url: url,
+        callback: callback, callback,
+    });
 
 }
 
 api.news.set_read =
 function set_read(news_id, read, callback)
 {
-    const url = `/news/${news_id}/set_read`;
+    return http.post({
-    const data = {"read": read};
+        url: `/news/${news_id}/set_read`,
-    return common.post(url, data, callback);
+        data: {"read": read},
+        callback: callback,
+    });
 }
 
 api.news.set_recycled =
 function set_recycled(news_id, recycled, callback)
 {
-    const url = `/news/${news_id}/set_recycled`;
+    return http.post({
-    const data = {"recycled": recycled};
+        url: `/news/${news_id}/set_recycled`,
-    return common.post(url, data, callback);
+        data: {"recycled": recycled},
+        callback: callback,
+    });
 }
 
 api.news.batch_set_read =
 function batch_set_read(news_ids, read, callback)
 {
-    const url = `/batch/news/set_read`;
+    return http.post({
-    const data = {"news_ids": news_ids.join(","), "read": read};
+        url: `/batch/news/set_read`,
-    return common.post(url, data, callback);
+        data: {"news_ids": news_ids.join(","), "read": read},
+        callback: callback,
+    });
 }
 
 api.news.batch_set_recycled =
 function batch_set_recycled(news_ids, recycled, callback)
 {
-    const url = `/batch/news/set_recycled`;
+    return http.post({
-    const data = {"news_ids": news_ids.join(","), "recycled": recycled};
+        url: `/batch/news/set_recycled`,
-    return common.post(url, data, callback);
+        data: {"news_ids": news_ids.join(","), "recycled": recycled},
+        callback: callback,
+    });
 }

frontends/bringrss_flask/static/js/common.js

@@ -34,6 +34,12 @@ function is_wide_mode()
     return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1";
 }
 
+common.go_to_root =
+function go_to_root()
+{
+    window.location.href = "/";
+}
+
 common.refresh =
 function refresh()
 {
@@ -51,146 +57,18 @@ function refresh_or_alert(response)
     window.location.reload();
 }
 
-////////////////////////////////////////////////////////////////////////////////////////////////////
-// HTTP ////////////////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////////////////////////
-
-common.formdata =
-function formdata(data)
-{
-    fd = new FormData();
-    for (let [key, value] of Object.entries(data))
-    {
-        if (value === undefined)
-        {
-            continue;
-        }
-        if (value === null)
-        {
-            value = '';
-        }
-        fd.append(key, value);
-    }
-    return fd;
-}
-
-common._request =
-function _request(method, url, callback)
-{
-    /*
-    Perform an HTTP request and call the `callback` with the response.
-
-    The response will have the following structure:
-    {
-        "meta": {
-            "completed": true / false,
-            "status": If the connection failed or request otherwise could not
-                complete, `status` will be 0. If the request completed,
-                `status` will be the HTTP response code.
-            "json_ok": If the server responded with parseable json, `json_ok`
-                will be true, and that data will be in `response.data`. If the
-                server response was not parseable json, `json_ok` will be false
-                and `response.data` will be undefined.
-            "request_url": The URL exactly as given to this call.
-        }
-        "data": {JSON parsed from server response if json_ok}.
-    }
-
-    So, from most lenient to most strict, error catching might look like:
-    if response.meta.completed
-    if response.meta.json_ok
-    if response.meta.status === 200
-    if response.meta.status === 200 and response.meta.json_ok
-    */
-    const request = new XMLHttpRequest();
-    const response = {
-        "meta": {
-            "completed": false,
-            "status": 0,
-            "json_ok": false,
-            "request_url": url,
-        },
-    };
-
-    request.onreadystatechange = function()
-    {
-        /*
-        readystate values:
-        0 UNSENT / ABORTED
-        1 OPENED
-        2 HEADERS_RECEIVED
-        3 LOADING
-        4 DONE
-        */
-        if (request.readyState != 4)
-            {return;}
-
-        if (callback == null)
-            {return;}
-
-        response.meta.status = request.status;
-
-        if (request.status != 0)
-        {
-            response.meta.completed = true;
-            try
-            {
-                response.data = JSON.parse(request.responseText);
-                response.meta.json_ok = true;
-            }
-            catch (exc)
-            {
-                response.meta.json_ok = false;
-            }
-        }
-        callback(response);
-    };
-    const asynchronous = true;
-    request.open(method, url, asynchronous);
-    return request;
-}
-
-common.get =
-function get(url, callback)
-{
-    request = common._request("GET", url, callback);
-    request.send();
-    return request;
-}
-
-common.post =
-function post(url, data, callback)
-{
-    /*
-    `data`:
-        a FormData object which you have already filled with values, or a
-        dictionary from which a FormData will be made, using common.formdata.
-    */
-    if (data instanceof FormData || data === null)
-    {
-        ;
-    }
-    else
-    {
-        data = common.formdata(data);
-    }
-    request = common._request("POST", url, callback);
-    request.send(data);
-    return request;
-}
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 // STRING TOOLS ////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
 common.join_and_trail =
-function join_and_trail(l, s)
+function join_and_trail(list, separator)
 {
-    if (l.length === 0)
+    if (list.length === 0)
     {
         return "";
     }
-    return l.join(s) + s
+    return list.join(separator) + separator
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////

frontends/bringrss_flask/static/js/http.js

@@ -0,0 +1,210 @@
+const http = {};
+
+http.HEADERS = {};
+
+http.requests_in_flight = 0;
+
+http.request_queue = {};
+http.request_queue.array = [];
+
+http.request_queue.push =
+function request_queue_push(func)
+{
+    http.request_queue.array.push(func)
+    if (http.requests_in_flight == 0)
+    {
+        http.request_queue_next();
+    }
+}
+
+http.request_queue.unshift =
+function request_queue_unshift(func)
+{
+    http.request_queue.array.unshift(func)
+    if (http.requests_in_flight == 0)
+    {
+        http.request_queue_next();
+    }
+}
+http.request_queue.pushleft = http.request_queue.unshift;
+
+http.request_queue_next =
+function request_queue_next()
+{
+    if (http.requests_in_flight > 0)
+    {
+        return;
+    }
+    if (http.request_queue.array.length === 0)
+    {
+        return;
+    }
+    const func = http.request_queue.array.shift();
+    func();
+}
+
+http.formdata =
+function formdata(data)
+{
+    const fd = new FormData();
+    for (let [key, value] of Object.entries(data))
+    {
+        if (value === undefined)
+        {
+            continue;
+        }
+        if (value === null)
+        {
+            value = '';
+        }
+        fd.append(key, value);
+    }
+    return fd;
+}
+
+http._request =
+function _request(kwargs)
+{
+    /*
+    Perform an HTTP request and call the `callback` with the response.
+
+    The response will have the following structure:
+    {
+        "meta": {
+            "request": the XMLHttpRequest object,
+            "completed": true / false,
+            "status": If the connection failed or request otherwise could not
+                complete, `status` will be 0. If the request completed,
+                `status` will be the HTTP response code.
+            "json_ok": If the server responded with parseable json, `json_ok`
+                will be true, and that data will be in `response.data`. If the
+                server response was not parseable json, `json_ok` will be false
+                and `response.data` will be undefined.
+            "kwargs": The kwargs exactly as given to this call.
+        }
+        "data": {JSON parsed from server response if json_ok},
+        "retry": function you can call to retry the request.
+    }
+
+    So, from most lenient to most strict, error catching might look like:
+    if response.meta.completed
+    if response.meta.json_ok
+    if response.meta.status === 200
+    if response.meta.status === 200 and response.meta.json_ok
+    */
+    const request = new XMLHttpRequest();
+    const response = {
+        "meta": {
+            "request": request,
+            "completed": false,
+            "status": 0,
+            "json_ok": false,
+            "kwargs": kwargs,
+        },
+        "retry": function(){http._request(kwargs)},
+    };
+
+    request.onreadystatechange = function()
+    {
+        /*
+        readystate values:
+        0 UNSENT / ABORTED
+        1 OPENED
+        2 HEADERS_RECEIVED
+        3 LOADING
+        4 DONE
+        */
+        if (request.readyState != 4)
+        {
+            return;
+        }
+
+        http.requests_in_flight -= 1;
+        setTimeout(http.request_queue_next, 0);
+
+        if (kwargs["callback"] == null)
+        {
+            return;
+        }
+
+        response.meta.status = request.status;
+
+        if (request.status != 0)
+        {
+            response.meta.completed = true;
+            try
+            {
+                response.data = JSON.parse(request.responseText);
+                response.meta.json_ok = true;
+            }
+            catch (exc)
+            {
+                response.meta.json_ok = false;
+            }
+        }
+        kwargs["callback"](response);
+    };
+
+    // Headers
+
+    const asynchronous = "asynchronous" in kwargs ? kwargs["asynchronous"] : true;
+    request.open(kwargs["method"], kwargs["url"], asynchronous);
+
+    for (const [header, value] of Object.entries(http.HEADERS))
+    {
+        request.setRequestHeader(header, value);
+    }
+
+    const more_headers = kwargs["headers"] || {};
+    for (const [header, value] of Object.entries(more_headers))
+    {
+        request.setRequestHeader(header, value);
+    }
+
+    if (kwargs["with_credentials"])
+    {
+        request.withCredentials = true;
+    }
+
+    // Send
+
+    let data = kwargs["data"];
+    if (data === undefined || data === null)
+    {
+        request.send();
+    }
+    else if (data instanceof FormData)
+    {
+        request.send(data);
+    }
+    else if (typeof(data) === "string" || data instanceof String)
+    {
+        request.send(data);
+    }
+    else
+    {
+        request.send(http.formdata(data));
+    }
+    http.requests_in_flight += 1;
+
+    return request;
+}
+
+http.get =
+function get(kwargs)
+{
+    kwargs["method"] = "GET";
+    return http._request(kwargs);
+}
+
+http.post =
+function post(kwargs)
+{
+    /*
+    `data`:
+        a FormData object which you have already filled with values, or a
+        dictionary from which a FormData will be made, using http.formdata.
+    */
+    kwargs["method"] = "POST";
+    return http._request(kwargs);
+}

frontends/bringrss_flask/templates/feed_settings.html

@@ -11,6 +11,7 @@
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/http.js"></script>
     <script src="/static/js/spinners.js"></script>
 
 <style>

frontends/bringrss_flask/templates/filters.html

@@ -11,6 +11,7 @@
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/http.js"></script>
     <script src="/static/js/spinners.js"></script>
 
 <style>

frontends/bringrss_flask/templates/root.html

@@ -11,6 +11,7 @@
     {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/http.js"></script>
     <script src="/static/js/contextmenus.js"></script>
     <script src="/static/js/hotkeys.js"></script>
     <script src="/static/js/spinners.js"></script>