Added category screen
For the moment only a category list is displayed, there is no logic of any type
This commit is contained in:
parent
d1c7059751
commit
6b0d08f28d
4 changed files with 120 additions and 2 deletions
|
@ -171,7 +171,7 @@ canvas {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#list ul {
|
||||
#list ul , #categories ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -189,7 +189,7 @@ canvas {
|
|||
opacity: .6;
|
||||
}
|
||||
|
||||
#list h2 {
|
||||
#list h2{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
|
@ -231,6 +231,52 @@ canvas {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
#categories ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#categories p {
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#categories li {
|
||||
position: relative;
|
||||
padding: 0 0 0 7px;
|
||||
}
|
||||
|
||||
.red #categories li { border-bottom: 1px solid #c0392b; }
|
||||
.white #categories li { border-bottom: 1px solid #bdc3c7; }
|
||||
.blue #categories li { border-bottom: 1px solid #2980b9; }
|
||||
.yellow #categories li { border-bottom: 1px solid #f39c12; }
|
||||
|
||||
#categories li:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: 7px;
|
||||
font-weight: 100;
|
||||
font-size: 3em;
|
||||
font-family: "Entypo";
|
||||
}
|
||||
|
||||
.red #categories li:after { color: #c0392b; }
|
||||
.white #categories li:after { color: #bdc3c7; }
|
||||
.blue #categories li:after { color: #2980b9; }
|
||||
.yellow #categories li:after { color: #f39c12; }
|
||||
|
||||
#categories li > a {
|
||||
display: block;
|
||||
padding: 5px 25px 5px 10px;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#full.active {
|
||||
min-height: 100%;
|
||||
display: -moz-box;
|
||||
|
|
14
index.html
14
index.html
|
@ -22,6 +22,20 @@
|
|||
<section id="list" class="active">
|
||||
<header class="bar">
|
||||
<a class="button icon settings" href="#settings">⚙</a>
|
||||
<a class="button icon categories" href="#categories">⚙</a>
|
||||
<a class="button icon reload" href="#reload">🔄</a>
|
||||
<a class="button icon all-read inactive" href="#all-read" id="all-read">✓</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
</header>
|
||||
<article>
|
||||
<ul></ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="categories">
|
||||
<header class="bar">
|
||||
<a class="button icon settings" href="#settings">⚙</a>
|
||||
<a class="button icon list" href="#list">⚙</a>
|
||||
<a class="button icon reload" href="#reload">🔄</a>
|
||||
<a class="button icon all-read inactive" href="#all-read" id="all-read">✓</a>
|
||||
<canvas width="40" height="40"></canvas>
|
||||
|
|
49
js/App.js
49
js/App.js
|
@ -44,6 +44,9 @@ App.prototype.after_login = function(backend) {
|
|||
_this.reload();
|
||||
} else if(url == "#settings") {
|
||||
_this.changeToPage("#settings");
|
||||
} else if(url == "#categories") {
|
||||
_this.changeToPage("#categories");
|
||||
_this.loadCategories();
|
||||
} else if(url.indexOf("#color-") == 0) {
|
||||
var color = url.replace("#color-", "");
|
||||
_this.setColor(color);
|
||||
|
@ -163,6 +166,14 @@ App.prototype.reload = function() {
|
|||
this.backend.reload(this.gotUnreadFeeds.bind(this),number);
|
||||
};
|
||||
|
||||
App.prototype.loadCategories = function () {
|
||||
if (this.categories) {
|
||||
populateCategoryList();
|
||||
} else {
|
||||
this.backend.getCategories(this.gotCategories.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
App.prototype.gotUnreadFeeds = function(new_articles) {
|
||||
|
||||
if(new_articles == null || !this.validate(new_articles)) {
|
||||
|
@ -208,6 +219,32 @@ App.prototype.gotUnreadFeeds = function(new_articles) {
|
|||
}
|
||||
};
|
||||
|
||||
App.prototype.gotCategories = function (categories) {
|
||||
if (!categories) {
|
||||
//FIXME this is repeated code, so create a function for it
|
||||
// Check if we did not get a NOT_LOGGED_IN error, and ask the
|
||||
// user to login again if it is the case.
|
||||
// This can happen with TT-RSS backend
|
||||
if (new_articles.error && new_articles.error === "NOT_LOGGED_IN") {
|
||||
alert("Your TinyTinyRSS session has expired. Please login again");
|
||||
this.login.fillLoginFormFromLocalStorage();
|
||||
this.login.log_in();
|
||||
}
|
||||
} else {
|
||||
this.categories = categories;
|
||||
if(categories.length > 0) {
|
||||
try {
|
||||
//To check if when it fails it is the same
|
||||
localStorage.categories = JSON.stringify(this.categories);
|
||||
}
|
||||
catch (e) {
|
||||
alert("Reached maximum memory by app " + e.name + " " + e.message + ". We will keep working in anycase with: " + localStorage.categories.length);
|
||||
}
|
||||
this.populateCategoryList();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
App.prototype.validate = function(articles) {
|
||||
|
||||
if(articles.length == 0) return true;
|
||||
|
@ -259,6 +296,18 @@ App.prototype.updateList = function() {
|
|||
this.updatePieChart();
|
||||
};
|
||||
|
||||
App.prototype.populateCategoryList = function () {
|
||||
var html_str = "";
|
||||
for (var i = 0; i < this.categories.length; i++) {
|
||||
var category = this.categories[i];
|
||||
html_str += "<li>";
|
||||
html_str += "<p class='title'>" + category.title + "</p>";
|
||||
html_str += "</li>";
|
||||
}
|
||||
|
||||
$("#categories ul").innerHTML = html_str;
|
||||
};
|
||||
|
||||
App.prototype.updatePieChart = function() {
|
||||
|
||||
if(!this.unread_articles) return; // happens on loginpage
|
||||
|
|
|
@ -187,6 +187,15 @@ TinyTinyRSS.prototype.setArticleUnpublished = function(article, callback) {
|
|||
this.setArticlesUnpublished([article], callback);
|
||||
};
|
||||
|
||||
TinyTinyRSS.prototype.getCategories = function (callback) {
|
||||
var options = {
|
||||
unread_only: true,
|
||||
enable_nested: false,
|
||||
include_empty: false
|
||||
};
|
||||
this.doOperation("getCategories", options, callback);
|
||||
}
|
||||
|
||||
TinyTinyRSS.prototype.append = function(key, array) {
|
||||
var tmp = localStorage[key];
|
||||
|
||||
|
|
Reference in a new issue