diff --git a/css/screen.css b/css/screen.css index 6ea4412..eab0c37 100644 --- a/css/screen.css +++ b/css/screen.css @@ -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; diff --git a/index.html b/index.html index 24795ac..0d6b3e3 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,20 @@
⚙ + ⚙ + 🔄 + ✓ + +
+
+ +
+
+ +
+
+ ⚙ + ⚙ 🔄 ✓ diff --git a/js/App.js b/js/App.js index be3383c..df35f05 100644 --- a/js/App.js +++ b/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 += "
  • "; + html_str += "

    " + category.title + "

    "; + html_str += "
    • "; + } + + $("#categories ul").innerHTML = html_str; +}; + App.prototype.updatePieChart = function() { if(!this.unread_articles) return; // happens on loginpage diff --git a/js/TinyTinyRSS.js b/js/TinyTinyRSS.js index 2644d02..7dc8c9c 100644 --- a/js/TinyTinyRSS.js +++ b/js/TinyTinyRSS.js @@ -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];