Add ajax loading

src/assets/css/app.css

@@ -276,6 +276,10 @@ nav .active a {
     font-size: 70%;
 }
 
+.items p a {
+    color: #aaa;
+}
+
 
 /* item */
 .item {

src/assets/js/app.js

@@ -0,0 +1,141 @@
+(function() {
+
+    var feeds = [];
+    var queue = [];
+    var queue_length = 5;
+
+
+    function show_refresh_icon(feed_id)
+    {
+        var container = document.getElementById("loading-feed-" + feed_id);
+
+        if (container) {
+
+            var img = document.createElement("img");
+            img.src = "./assets/img/refresh.gif";
+
+            container.appendChild(img);
+        }
+    }
+
+
+    function hide_refresh_icon(feed_id)
+    {
+        var container = document.getElementById("loading-feed-" + feed_id);
+
+        if (container) {
+
+            container.innerHTML = "";
+        }
+    }
+
+
+    function refresh_feed(feed_id, callback)
+    {
+        if (! feed_id) {
+
+            return false;
+        }
+
+        show_refresh_icon(feed_id);
+
+        var request = new XMLHttpRequest();
+
+        request.onload = function() {
+
+            hide_refresh_icon(feed_id);
+
+            try {
+
+                var response = JSON.parse(this.responseText);
+
+                if (callback) {
+
+                    callback(response);
+                }
+
+                if (! response.result) {
+
+                    window.alert('Unable to refresh this feed: ' + feed_id);
+                }
+            }
+            catch (e) {}
+        };
+
+        request.open("GET", "?action=ajax-refresh-feed&feed_id=" + feed_id, true);
+        request.send();
+
+        return true;
+    }
+
+
+    function get_feeds()
+    {
+        var links = document.getElementsByTagName("a");
+
+        for (var i = 0, ilen = links.length; i < ilen; i++) {
+
+            var feed_id = links[i].getAttribute('data-feed-id');
+
+            if (feed_id) {
+
+                feeds.push(parseInt(feed_id));
+            }
+        }
+    }
+
+
+    function refresh_all()
+    {
+        get_feeds();
+
+        var interval = setInterval(function() {
+
+            while (feeds.length > 0 && queue.length < queue_length) {
+
+                var feed_id = feeds.shift();
+
+                queue.push(feed_id);
+
+                refresh_feed(feed_id, function(response) {
+
+                    var index = queue.indexOf(response.feed_id);
+
+                    if (index >= 0) {
+
+                        queue.splice(index, 1);
+                    }
+
+                    if (feeds.length == 0 && queue.length == 0) {
+
+                        clearInterval(interval);
+                        window.location.href = "?action=unread";
+                    }
+                });
+            }
+
+        }, 100);
+    }
+
+
+    document.onclick = function(e) {
+
+        var action = e.target.getAttribute("data-action");
+
+        if (action) {
+
+            e.preventDefault();
+
+            switch (action) {
+                case 'refresh-all':
+                    refresh_all();
+                    break;
+                case 'refresh-feed':
+                    var feed_id = e.target.getAttribute("data-feed-id");
+                    refresh_feed(feed_id);
+                    break;
+            }
+        }
+    };
+
+})();

src/index.php

@@ -108,7 +108,7 @@ Router\get_action('remove', function() {
 });
 
 
-Router\get_action('refresh', function() {
+Router\get_action('refresh-feed', function() {
 
     $id = Request\int_param('feed_id');
 
@@ -121,6 +121,19 @@ Router\get_action('refresh', function() {
 });
 
 
+Router\get_action('ajax-refresh-feed', function() {
+
+    $id = Request\int_param('feed_id');
+
+    if ($id) {
+
+        Response\json(array('feed_id' => $id, 'result' => Model\update_feed($id)));
+    }
+
+    Response\json(array('feed_id' => 0, 'result' => false));
+});
+
+
 Router\get_action('flush-unread', function() {
 
     Model\flush_unread();

src/model.php

@@ -129,7 +129,7 @@ function get_unread_items()
 {
     return \PicoTools\singleton('db')
         ->table('items')
-        ->columns('items.id', 'items.title', 'items.updated', 'feeds.site_url')
+        ->columns('items.id', 'items.title', 'items.updated', 'items.url', 'feeds.site_url')
         ->join('feeds', 'id', 'feed_id')
         ->eq('status', 'unread')
         ->desc('updated')
@@ -141,7 +141,7 @@ function get_read_items()
 {
     return \PicoTools\singleton('db')
         ->table('items')
-        ->columns('items.id', 'items.title', 'items.updated', 'feeds.site_url')
+        ->columns('items.id', 'items.title', 'items.updated', 'items.url', 'feeds.site_url')
         ->join('feeds', 'id', 'feed_id')
         ->eq('status', 'read')
         ->desc('updated')
@@ -197,6 +197,11 @@ function update_feeds()
 
             update_items($feed['id'], $parser->execute()->items);
         }
+        else {
+
+            print_r($feed);
+            die;
+        }
     }
 }
 
@@ -212,7 +217,10 @@ function update_feed($feed_id)
     if ($parser !== false) {
 
         update_items($feed['id'], $parser->execute()->items);
+        return true;
     }
+
+    return false;
 }
 
 

src/templates/add.php

@@ -1,6 +1,10 @@
 <div class="page-header">
     <h2>New subscription</h2>
-    <?php include __DIR__.'/feed_menu.php' ?>
+    <ul>
+        <li><a href="?action=feeds">feeds</a></li>
+        <li><a href="?action=import">import</a></li>
+        <li><a href="?action=export">export</a></li>
+    </ul>
 </div>
 
 <form method="post" action="?action=add">

src/templates/app_header.php

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>miniflux</title>
         <link href="./assets/css/app.css?v1" rel="stylesheet" media="screen">
+        <script type="text/javascript" src="./assets/js/app.js" defer></script>
     </head>
     <body>
         <header>

src/templates/feed_menu.php

@@ -1,7 +0,0 @@
-<ul>
-    <li><a href="?action=feeds">feeds</a></li>
-    <li><a href="?action=add">add</a></li>
-    <li><a href="?action=import">import</a></li>
-    <li><a href="?action=export">export</a></li>
-    <li><a href="?action=refresh-all">refresh all</a></li>
-</ul>

src/templates/feeds.php

@@ -1,22 +1,30 @@
 <div class="page-header">
     <h2>Subscriptions</h2>
-    <?php include __DIR__.'/feed_menu.php' ?>
+    <ul>
+        <li><a href="?action=add">add</a></li>
+        <li><a href="?action=import">import</a></li>
+        <li><a href="?action=export">export</a></li>
+        <li><a href="?action=refresh-all" data-action="refresh-all">refresh all</a></li>
+    </ul>
 </div>
 
 <?php if (empty($feeds)): ?>
 
-    <p class="alert alert-info">No subscriptions.</p>
+    <p class="alert alert-info">No subscription.</p>
 
 <?php else: ?>
 
     <section class="items">
     <?php foreach ($feeds as $feed): ?>
         <article>
-            <h2><a href="<?= $feed['site_url'] ?>" traget="_blank"><?= Helper\escape($feed['title']) ?></a></h2>
+            <h2>
+                <span id="loading-feed-<?= $feed['id'] ?>"></span>
+                <a href="<?= $feed['site_url'] ?>" rel="noreferrer" target="_blank"><?= Helper\escape($feed['title']) ?></a>
+            </h2>
             <p>
-                <?= Helper\escape(parse_url($feed['site_url'], PHP_URL_HOST)) ?> |
+                <?= Helper\get_host_from_url($feed['site_url']) ?> |
                 <a href="?action=remove&amp;feed_id=<?= $feed['id'] ?>">remove</a> |
-                <a href="?action=refresh&amp;feed_id=<?= $feed['id'] ?>">refresh</a>
+                <a href="?action=refresh-feed&amp;feed_id=<?= $feed['id'] ?>" data-feed-id="<?= $feed['id'] ?>" data-action="refresh-feed">refresh</a>
             </p>
         </article>
     <?php endforeach ?>

src/templates/import.php

@@ -1,6 +1,10 @@
 <div class="page-header">
     <h2>OPML Import</h2>
-    <?php include __DIR__.'/feed_menu.php' ?>
+    <ul>
+        <li><a href="?action=feeds">feeds</a></li>
+        <li><a href="?action=add">add</a></li>
+        <li><a href="?action=export">export</a></li>
+    </ul>
 </div>
 
 <form method="post" action="?action=import" enctype="multipart/form-data">

src/templates/read_item.php

@@ -6,12 +6,12 @@
 
     <article class="item">
         <h1>
-            <a href="<?= $item['url'] ?>" target="_blank"><?= Helper\escape($item['title']) ?></a>
+            <a href="<?= $item['url'] ?>" rel="noreferrer" target="_blank"><?= Helper\escape($item['title']) ?></a>
         </h1>
 
         <p class="infos">
-            <?= Helper\escape(parse_url($item['url'], PHP_URL_HOST)) ?> |
+            <?= Helper\get_host_from_url($item['url']) ?> |
-            <?= date('l, j F Y H:i T', $item['updated']) ?>
+            <?= date('l, j F Y H:i', $item['updated']) ?>
         </p>
 
         <?= $item['content'] ?>

src/templates/read_items.php

@@ -16,8 +16,9 @@
         <article>
             <h2><a href="?action=read&amp;id=<?= urlencode($item['id']) ?>"><?= Helper\escape($item['title']) ?></a></h2>
             <p>
-                <?= Helper\escape(parse_url($item['site_url'], PHP_URL_HOST)) ?> |
+                <?= Helper\get_host_from_url($item['url']) ?> |
-                <?= date('l, j F Y H:i T', $item['updated']) ?>
+                <?= date('l, j F Y H:i', $item['updated']) ?> |
+                <a href="<?= $item['url'] ?>" rel="noreferrer" target="_blank">direct link</a>
             </p>
         </article>
     <?php endforeach ?>

src/templates/unread_items.php

@@ -16,7 +16,8 @@
         <article>
             <h2><a href="?action=read&amp;id=<?= urlencode($item['id']) ?>"><?= Helper\escape($item['title']) ?></a></h2>
             <p>
-                <?= Helper\escape(parse_url($item['site_url'], PHP_URL_HOST)) ?>
+                <?= Helper\get_host_from_url($item['url']) ?> |
+                <a href="<?= $item['url'] ?>" rel="noreferrer" target="_blank">direct link</a>
             </p>
         </article>
     <?php endforeach ?>