From 052440af2ca02146889f8c063e6a34ec6b1f6881 Mon Sep 17 00:00:00 2001 From: Cédric Bonhomme Date: Thu, 10 Dec 2020 22:12:35 +0100 Subject: various fixes in the JavaScript functions to mark an article as read/unread and faved/unfaved. --- newspipe/static/js/articles.js | 48 ++++++++++++++++++++++++++++++++------- newspipe/templates/article.html | 8 +++---- newspipe/templates/home.html | 6 ++--- package-lock.json | 50 ++++++++++++++++++++++++++++++++++++++++- 4 files changed, 96 insertions(+), 16 deletions(-) diff --git a/newspipe/static/js/articles.js b/newspipe/static/js/articles.js index 1075a7ef..103074f4 100644 --- a/newspipe/static/js/articles.js +++ b/newspipe/static/js/articles.js @@ -22,8 +22,6 @@ API_ROOT = '/api/v2.0/' function change_unread_counter(feed_id, increment) { - console.log(document.getElementById("unread-"+feed_id)); - el = document.getElementById("unread-"+feed_id) if (el != null) { var new_value = parseInt(el.textContent) + increment; @@ -49,7 +47,7 @@ document.getElementsByClassName('open-article').onclick = function fun() { }; -// Mark an article as read or unread. +// Mark an article as read or unread from the home page var nodes = document.getElementsByClassName('readed'); Array.prototype.map.call(nodes, function(node) { node.onclick = function() { @@ -103,6 +101,40 @@ Array.prototype.map.call(nodes, function(node) { }); +// Mark an article as read or unread from the article page +var nodes = document.getElementsByClassName('readed-article-page'); +Array.prototype.map.call(nodes, function(node) { + node.onclick = function() { + var article_id = node.parentNode.parentNode.parentNode.getAttribute("data-article"); + + var data; + if (node.classList.contains('fa-square-o')) { + data = JSON.stringify({readed: false}) + node.classList.remove('fa-square-o'); + node.classList.add('fa-check-square-o'); + } + else { + data = JSON.stringify({readed: true}) + node.classList.remove('fa-check-square-o'); + node.classList.add('fa-square-o'); + } + + // sends the updates to the server + fetch(API_ROOT + "article/" + article_id, { + method: "PUT", + headers: { + 'Content-Type': 'application/json', + }, + body: data + }).then(res => { + console.log("Request complete! response:", res); + }).catch((error) => { + console.error('Error:', error); + });; + } +}); + + // Like or unlike an article var nodes = document.getElementsByClassName('like'); @@ -110,18 +142,18 @@ Array.prototype.map.call(nodes, function(node) { node.onclick = function() { var article_id = node.parentNode.parentNode.parentNode.getAttribute('data-article'); var data; - if (node.classList.contains("fa-heart")) { + if (node.classList.contains("fa-star")) { data = JSON.stringify({like: false}); - node.classList.remove('fa-heart'); - node.classList.add('fa-heart-o'); + node.classList.remove('fa-star'); + node.classList.add('fa-star-o'); if(window.location.pathname.indexOf('/favorites') != -1) { node.parentNode.parentNode.parentNode.remove(); } } else { data = JSON.stringify({like: true}) - node.classList.remove('fa-heart-o'); - node.classList.add('fa-heart'); + node.classList.remove('fa-star-o'); + node.classList.add('fa-star'); } // sends the updates to the server diff --git a/newspipe/templates/article.html b/newspipe/templates/article.html index 00ec3bde..5eff64e7 100644 --- a/newspipe/templates/article.html +++ b/newspipe/templates/article.html @@ -1,7 +1,7 @@ {% extends "layout.html" %} {% block content %} -
-
+
+

{{ article.title|safe }}

{{ _('from') }} {{ article.source.title }}

@@ -12,9 +12,9 @@ {% endif %} {% if article.readed %} - + {% else %} - + {% endif %}
{{ article.date | datetime }}
diff --git a/newspipe/templates/home.html b/newspipe/templates/home.html index ce9e39e8..46d96d0f 100644 --- a/newspipe/templates/home.html +++ b/newspipe/templates/home.html @@ -125,7 +125,7 @@ {{ _('Unread') }}