Skip to content
This repository has been archived by the owner on Apr 14, 2022. It is now read-only.

Restore position when returning to articles list. #43

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Restore position when returning to articles list. #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
45bf995
Use document element (base is deprecated).
Feb 19, 2016
0b2888d
Group posts by feed name. Step #1 of getting collapsing feeds so it's
Jan 29, 2017
124f6ac
Make collapsing feed article lists
Jan 29, 2017
ef96c04
Allow for successive growing of "unread_articles".
Jan 29, 2017
d3f2337
With change in article numbering, need way to tie article
Jan 29, 2017
cc41a55
Have next/prev honor grouped display of articles under feeds.
Feb 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions css/screen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,11 +204,11 @@ canvas {
.blue #list li { border-bottom: 1px solid #2980b9; }
.yellow #list li { border-bottom: 1px solid #f39c12; }

#list li:after {
#list li li:after {
content: "";
position: absolute;
right: 7px;
top: 0.1em;
top: -0.2em;
font-weight: 100;
font-size: 3em;
font-family: "Entypo";
Expand Down
173 changes: 126 additions & 47 deletions js/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ App.prototype.authenticate = function() {

App.prototype.after_login = function(backend) {

var request = window.navigator.mozApps.getSelf();
request.onsuccess = function() {
$("#version").innerHTML = request.result.manifest.version;
if (window.navigator.mozApps) {
var request = window.navigator.mozApps.getSelf();
request.onsuccess = function() {
$("#version").innerHTML = request.result.manifest.version;
}
}

var _this = this;
Expand All @@ -37,7 +39,7 @@ App.prototype.after_login = function(backend) {

var url = window.location.hash;

if(url == "#list") {
if (url == "#list") {
_this.setCurrentRead();
_this.changeToPage("#list");
} else if(url == "#reload") {
Expand Down Expand Up @@ -127,6 +129,7 @@ App.prototype.after_login = function(backend) {
App.prototype.logout = function() {
this.backend.logOut();
this.unread_articles = [];
this.next_articles = [];
this.populateList();
this.login.log_out();
};
Expand All @@ -135,18 +138,26 @@ App.prototype.changeToPage = function(page) {

// FIXME
var active = $(".active");
if(active.id == "list") {
this.saveScrollTop = document.body.scrollTop;
}

if(page == "#list") {
document.body.scrollTop = this.saveScrollTop;
} else {
window.scroll(0, 0);
// Save old position
if (active.id == "list") {
this.saveScrollTop = document.documentElement.scrollTop;
}

// Switch displays
active.removeClass("active");
$(page).addClass("active");

if (page == "#list") {
var elem = document.documentElement;
var posit = this.saveScrollTop;

// Restore old position, after display settles
setTimeout(function() { elem.scrollTop = posit; }, 500);
} else {
// Else top of page
window.scroll(0, 0);
}
};

App.prototype.setColor = function(color) {
Expand All @@ -158,6 +169,7 @@ App.prototype.setColor = function(color) {

App.prototype.reload = function() {
this.unread_articles = [];
this.next_articles = [];
$("#all-read").addClass('inactive');
var number=parseInt(localStorage.numArticles);
this.backend.reload(this.gotUnreadFeeds.bind(this),number);
Expand Down Expand Up @@ -217,17 +229,67 @@ App.prototype.validate = function(articles) {
return false;
};

// Utility function to toggle feed content visibility
function toggleFeed(feedid) {
var e = document.getElementById("feed" + feedid.toString());
if (e.style.display == "none") {
e.style.display = "";
} else {
e.style.display = "none";
}
}

App.prototype.populateList = function() {

var html_str = "";
for (var i = 0; i < this.unread_articles.length; i++) {
var article = this.unread_articles[i];
html_str += "<li"+ (article.unread ? " class='unread'" : "") +">";
html_str += "<a href='#full-"+i+"'>";
html_str += "<p class='title'>" + article.feed_title + "</p>";
// Tabulate all articles, grouped by feed.
// Note that this.unread_articles[] can be growing even
// as our user reads, so we have to leave it alone and
// just point to the appropriate articles in situ.
const ua = this.unread_articles, ual = ua.length;
const byfeed = {}, feeds = [];
for (let x = 0; x < ual; ++x) {
const article = ua[x];

// Add this article to an existing feed list, or
// or start one for this feed ID.
const fid = article.feed_id;
if (fid in byfeed) {
byfeed[fid].push(x);
} else {
byfeed[fid] = [x];
feeds.push( {"fid": fid, "name": article.feed_title} );
}
}

// Now build the article list; it's a <ul> of feeds,
// then sub-<ul> of articles in that feed
let html_str = "";
this.next_articles = [];
for (let x = 0; x < feeds.length; ++x) {
const xs = x.toString();
const f = feeds[x];
const feed = byfeed[f.fid];
html_str += '<li><span' +
' onclick="return(toggleFeed(' + xs + '));"' +
'>' + f.name + '</span>';
const feedid = '"feed' + xs + '"';
html_str += '<ul id=' + feedid + ' style="display: none;">'
for (let artidx of byfeed[f.fid]) {
this.next_articles.push(artidx);
const article = ua[artidx];
html_str += '<li' +
' id="art' + artidx.toString() + '"' +
(article.unread ? ' class="unread"' : '') +
'>';
html_str += "<a href='#full-" + artidx + "'>";
html_str += "<h2>" + article.title + "</h2>";
if(article.excerpt) html_str += "<p class='excerpt'>" + article.excerpt + "</p>";
if (article.excerpt) {
html_str += "<p class='excerpt'>" +
article.excerpt + "</p>";
}
html_str += "</a></li>";
}
html_str += "</ul></li>";
}

$("#list ul").innerHTML = html_str;
Expand All @@ -237,21 +299,25 @@ App.prototype.populateList = function() {

App.prototype.updateList = function() {
var unread = 0;
$$("#list ul li").forEach(function(o, i) {

if(!this.unread_articles[i].unread) {
o.removeClass("unread");
}
else {
unread++;
o.addClass("unread");
}
}, this);
const ua = this.unread_articles, ual = ua.length;

// Walk "unread" articles, keep count of those still
// unread and update display.
for (let i = 0; i < ual; ++i) {
const art = ua[i];
const e = document.getElementById("art" + i.toString());
if (art.unread) {
e.addClass("unread");
unread++;
} else {
e.removeClass("unread");
}
}

if(unread > 0) {
$("#all-read").addClass('inactive');
if (unread > 0) {
$("#all-read").addClass('inactive');
} else {
$("#all-read").removeClass('inactive');
$("#all-read").removeClass('inactive');
}

this.updatePieChart();
Expand Down Expand Up @@ -356,25 +422,38 @@ App.prototype.showFull = function(article, slide_back) {
};

App.prototype.showNext = function() {
this.setCurrentRead();

if(this.currentIndex >= this.unread_articles.length - 1) {
this.goToList();
} else {
this.currentIndex++;
this.showFull(this.unread_articles[this.currentIndex], false);
}
this.setCurrentRead();

const na = this.next_articles;
let curidx = na.indexOf(this.currentIndex);

// Huh, not listed?
if (curidx < 0) {
this.goToList();
return;
}

curidx += 1;
if (curidx >= na.length) {
this.goToList();
} else {
this.currentIndex = na[curidx];
this.showFull(this.unread_articles[this.currentIndex], false);
}
};

App.prototype.showPrevious = function() {
this.setCurrentRead();

if(this.currentIndex <= 0) {
this.goToList();
} else {
this.currentIndex--;
this.showFull(this.unread_articles[this.currentIndex], true);
}
this.setCurrentRead();

const na = this.next_articles;
const curidx = na.indexOf(this.currentIndex)-1;
if (curidx < 0) {
// This handles not found, and also no previous article
this.goToList();
return;
}
this.currentIndex = na[curidx];
this.showFull(this.unread_articles[this.currentIndex], true);
};

App.prototype.setCurrentRead = function() {
Expand Down