diff options
-rw-r--r-- | newspipe/static/js/articles.js | 48 | ||||
-rw-r--r-- | newspipe/templates/article.html | 8 | ||||
-rw-r--r-- | newspipe/templates/home.html | 6 | ||||
-rw-r--r-- | 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 %} -<div class="container" data-article="{{ article.id }}"> - <div class="row"> +<div class="container"> + <div class="row" data-article="{{ article.id }}" id="filters" data-filter="{{ filter_ }}"> <div class="col"> <h2><a href="{{ article.link }}" target="_blank">{{ article.title|safe }}</a></h2> <h3>{{ _('from') }} <a href="/feed/{{ article.source.id }}">{{ article.source.title }}</a></h3> @@ -12,9 +12,9 @@ <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a> {% endif %} {% if article.readed %} - <a href="#"><i class="fa fa-square-o readed" title="{{ _('Mark this article as unread') }}"></i></a> + <a href="#"><i class="fa fa-square-o readed-article-page" title="{{ _('Mark this article as unread') }}"></i></a> {% else %} - <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a> + <a href="#"><i class="fa fa-check-square-o readed-article-page" aria-hidden="true" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a> {% endif %} <h6>{{ article.date | datetime }}</h6> </div> 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 @@ <a class="nav-link {% if filter_ == 'unread' %}active{% endif %}" href="{{ gen_url(filter_='unread') }}">{{ _('Unread') }}</a> </li> <li id="tab-unread" class="px-5 nav-item"> - <a class="nav-link {% if liked %}active{% endif %}" href="{{ gen_url(liked=not liked) }}"><i class="fa fa-heart" aria-hidden="true"></i> {{ _('Liked') }}</a> + <a class="nav-link {% if liked %}active{% endif %}" href="{{ gen_url(liked=not liked) }}"><i class="fa fa-star" aria-hidden="true"></i> {{ _('Liked') }}</a> </li> <li id="tab-nbdisplay" class="px-5 nav-item d-none d-lg-block"> <div id="nbdisplay"> @@ -166,9 +166,9 @@ <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a> {% endif %} {% if article.like %} - <a href="#"><i class="fa fa-heart like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a> + <a href="#"><i class="fa fa-star like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a> {% else %} - <a href="#"><i class="fa fa-heart-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a> + <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a> {% endif %} </th> {% if not feed_id %} diff --git a/package-lock.json b/package-lock.json index 6794a810..9d5ea6db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,56 @@ { "name": "newspipe", "version": "9.1.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "version": "9.1.0", + "hasInstallScript": true, + "license": "AGPL-3.0", + "dependencies": { + "@popperjs/core": "^2.9.1", + "bootstrap": "^5.0.0-beta3", + "bootstrap-select": "^1.14.0-beta2", + "fork-awesome": "^1.1.7", + "moment": "^2.29.1" + }, + "engines": { + "yarn": ">= 1.0.0" + } + }, + "node_modules/@popperjs/core": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz", + "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA==" + }, + "node_modules/bootstrap": { + "version": "5.0.0-beta3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz", + "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==" + }, + "node_modules/bootstrap-select": { + "version": "1.14.0-beta2", + "resolved": "https://registry.npmjs.org/bootstrap-select/-/bootstrap-select-1.14.0-beta2.tgz", + "integrity": "sha512-Q63QUbConUwA+/Te7tCJcv0nE3SI/J+rNI5A1mdX1KxP6lW0pFQy+4KVP6VwgZEcwkoPfrwjvAo6WT7fdl+Sdg==" + }, + "node_modules/fork-awesome": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/fork-awesome/-/fork-awesome-1.1.7.tgz", + "integrity": "sha512-IHI7XCSXrKfUIWslse8c/PaaVDT1oBaYge+ju40ihL2ooiQeBpTr4wvIXhgTd2NuhntlvX+M5jYHAPTzNlmv0g==", + "engines": { + "node": ">=0.10.3" + } + }, + "node_modules/moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "engines": { + "node": "*" + } + } + }, "dependencies": { "@popperjs/core": { "version": "2.9.1", |