From 6b0d08f28d72bb0be3562b58a4bbb8b89e5fcfa7 Mon Sep 17 00:00:00 2001 From: Markel Arizaga Date: Sun, 26 Oct 2014 13:34:22 +0100 Subject: [PATCH 1/3] Added category screen For the moment only a category list is displayed, there is no logic of any type --- css/screen.css | 50 +++++++++++++++++++++++++++++++++++++++++++++-- index.html | 14 +++++++++++++ js/App.js | 49 ++++++++++++++++++++++++++++++++++++++++++++++ js/TinyTinyRSS.js | 9 +++++++++ 4 files changed, 120 insertions(+), 2 deletions(-) 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]; From e81bd87919aea173cd8bde9832588991a42740be Mon Sep 17 00:00:00 2001 From: Markel Arizaga Date: Sun, 26 Oct 2014 19:49:50 +0100 Subject: [PATCH 2/3] App is now based on categories Now the entry point of the app is the categories page and user can browse them until the articles --- css/screen.css | 2 +- index.html | 8 +++--- js/App.js | 68 +++++++++++++++++++++++++++++++---------------- js/TinyTinyRSS.js | 18 ++++++++++--- 4 files changed, 64 insertions(+), 32 deletions(-) diff --git a/css/screen.css b/css/screen.css index eab0c37..3cc7065 100644 --- a/css/screen.css +++ b/css/screen.css @@ -258,7 +258,7 @@ canvas { #categories li:after { content: ""; position: absolute; - top: -18px; + top: 0px; right: 7px; font-weight: 100; font-size: 3em; diff --git a/index.html b/index.html index 0d6b3e3..5d811d7 100644 --- a/index.html +++ b/index.html @@ -19,10 +19,10 @@ -
    +
    ⚙ - ⚙ + ⚙ 🔄 ✓ @@ -32,10 +32,10 @@
    -
    +
    ⚙ - ⚙ + ⚙ 🔄 ✓ diff --git a/js/App.js b/js/App.js index df35f05..9134dd1 100644 --- a/js/App.js +++ b/js/App.js @@ -40,13 +40,21 @@ App.prototype.after_login = function(backend) { if(url == "#list") { _this.setCurrentRead(); _this.changeToPage("#list"); + } if(url.indexOf("#list-") == 0) { + var feedId = parseInt(url.replace("#list-", ""), 10); + _this.reload(feedId); + _this.changeToPage("#list"); } else if(url == "#reload") { _this.reload(); } else if(url == "#settings") { _this.changeToPage("#settings"); - } else if(url == "#categories") { + } else if(url == "#categories" || url == "#categories-back") { _this.changeToPage("#categories"); - _this.loadCategories(); + var isComingBack = (url == "#categories-back") ? true : false; + _this.loadCategories(isComingBack); + } else if (url.indexOf("#categories-") == 0) { + var categoryId = parseInt(url.replace("#categories-", ""), 10); + _this.loadCategoryFeeds(categoryId); } else if(url.indexOf("#color-") == 0) { var color = url.replace("#color-", ""); _this.setColor(color); @@ -106,8 +114,6 @@ App.prototype.after_login = function(backend) { hammertime.on("swipeleft", function(ev){ _this.showNext(); ev.gesture.preventDefault(); }); hammertime.on("swiperight", function(ev){ _this.showPrevious(); ev.gesture.preventDefault(); }); - this.changeToPage("#list"); - if(backend == "OwnCloud") { this.backend = new OwnCloud(this, localStorage.server_url, localStorage.session_id); } else if (backend == "Pond") { @@ -117,6 +123,9 @@ App.prototype.after_login = function(backend) { $("#setpublished").removeClass("invisible"); } + this.changeToPage("#categories"); + this.loadCategories(); + var numArticles = localStorage.numArticles; if(!numArticles) numArticles = 50; this.numArticles(numArticles); @@ -159,21 +168,25 @@ App.prototype.setColor = function(color) { this.updatePieChart(); }; -App.prototype.reload = function() { +App.prototype.reload = function(feedId) { this.unread_articles = []; $("#all-read").addClass('inactive'); var number=parseInt(localStorage.numArticles); - this.backend.reload(this.gotUnreadFeeds.bind(this),number); + this.backend.reload(this.gotUnreadFeeds.bind(this),number, feedId); }; -App.prototype.loadCategories = function () { - if (this.categories) { +App.prototype.loadCategories = function (isComingBack) { + if (this.categories && isComingBack != true) { populateCategoryList(); } else { this.backend.getCategories(this.gotCategories.bind(this)); } } +App.prototype.loadCategoryFeeds = function (categoryId) { + this.backend.getFeedsByCategory(categoryId, this.gotCategoryFeeds.bind(this)); +} + App.prototype.gotUnreadFeeds = function(new_articles) { if(new_articles == null || !this.validate(new_articles)) { @@ -193,6 +206,7 @@ App.prototype.gotUnreadFeeds = function(new_articles) { this.unread_articles = JSON.parse(old_articles); } this.populateList(); + this.isShowingFeeds = true; } } else { @@ -200,21 +214,8 @@ App.prototype.gotUnreadFeeds = function(new_articles) { this.unread_articles = this.unread_articles.concat(new_articles); if(new_articles.length > 0) { - try { - //To check if when it fails it is the same - localStorage.unread_articles = JSON.stringify(this.unread_articles); - var size = parseInt(localStorage.maxDownload); - if(localStorage.unread_articles.length < size) { - var num = parseInt(localStorage.numArticles); - this.backend.getUnreadFeeds(this.gotUnreadFeeds.bind(this), this.unread_articles,num); - } else { - alert("Limit size reached: Downloaded: " + this.unread_articles.length + " articles. Reached: " + localStorage.unread_articles.length +" bytes"); - } - } - catch (e) { - alert("Reached maximum memory by app " + e.name + " " + e.message + ". We will keep working in anycase with: " + localStorage.unread_articles.length); - } - this.populateList(); + this.populateList(); + this.isShowingFeeds = true; } } }; @@ -245,6 +246,11 @@ App.prototype.gotCategories = function (categories) { } }; +App.prototype.gotCategoryFeeds = function (feeds) { + this.feeds = feeds; + this.populateFeedList(); +}; + App.prototype.validate = function(articles) { if(articles.length == 0) return true; @@ -301,7 +307,23 @@ App.prototype.populateCategoryList = function () { for (var i = 0; i < this.categories.length; i++) { var category = this.categories[i]; html_str += "
  • "; + html_str += ""; html_str += "

    " + category.title + "

    "; + html_str += "    "; + html_str += "
    • "; + } + + $("#categories ul").innerHTML = html_str; +}; + +App.prototype.populateFeedList = function () { + var html_str = ""; + for (var i = 0; i < this.feeds.length; i++) { + var feed = this.feeds[i]; + html_str += "
  • "; + html_str += ""; + html_str += "

    " + feed.title + "

    "; + html_str += "    "; html_str += "
    • "; } diff --git a/js/TinyTinyRSS.js b/js/TinyTinyRSS.js index 7dc8c9c..998870b 100644 --- a/js/TinyTinyRSS.js +++ b/js/TinyTinyRSS.js @@ -54,17 +54,17 @@ TinyTinyRSS.prototype.doOperation = function(operation, new_options, callback) { xhr.send(JSON.stringify(options)); } -TinyTinyRSS.prototype.reload = function(callback,limit) { - this.getUnreadFeeds(callback, 0, limit); +TinyTinyRSS.prototype.reload = function(callback,limit, feedId) { + this.getUnreadFeeds(callback, 0, limit, feedId); }; -TinyTinyRSS.prototype.getUnreadFeeds = function(callback, skip, limit) { +TinyTinyRSS.prototype.getUnreadFeeds = function(callback, skip, limit, feedId) { skip = skip.length; var options = { show_excerpt: false, view_mode: "unread", show_content: true, - feed_id: -4, + feed_id: feedId || -4, limit: limit || 0, skip: skip || 0 }; @@ -72,6 +72,16 @@ TinyTinyRSS.prototype.getUnreadFeeds = function(callback, skip, limit) { this.doOperation("getHeadlines", options, callback); } +TinyTinyRSS.prototype.getFeedsByCategory = function (categoryId, callback) { + var options = { + cat_id: categoryId, + unread_only: true, + include_nested: false + }; + + this.doOperation("getFeeds", options, callback); +}; + TinyTinyRSS.prototype.setArticlesRead = function(articles, callback) { var options = { From d27ba8691a2c49623d3002ff1ee7247054e02991 Mon Sep 17 00:00:00 2001 From: Markel Arizaga Date: Sun, 26 Oct 2014 20:01:14 +0100 Subject: [PATCH 3/3] Settings exit to categories and new icons The back icon has been added and now when exiting from settings page, categories page will be loaded --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 5d811d7..0b62f44 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@
    ⚙ - ⚙ + « 🔄 ✓ @@ -35,7 +35,7 @@
    ⚙ - ⚙ + « 🔄 ✓ @@ -47,7 +47,7 @@
    - +