FeedMonkey HTML5 RSS Feed Reader

Check-in [50e5705971]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Move to ES6 classes. Tidy some control flow. Use let/const where appropriate. Move to 4-space indentation. Normalize "if (...)" spacing.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | origin/clean | trunk | master
Files: files | file ages | folders
SHA3-256:50e5705971f52f01c502703bfd55b2fdef66adddfabcd250f9021e312356bab0
User & Date: vandys 2019-03-02 16:28:36
Context
2019-03-05
14:51
Add black theme check-in: 245d200092 user: vandys tags: origin/clean, trunk, master
2019-03-02
16:28
Move to ES6 classes. Tidy some control flow. Use let/const where appropriate. Move to 4-space indentation. Normalize "if (...)" spacing. check-in: 50e5705971 user: vandys tags: origin/clean, trunk, master
14:52
Streamline the login var references check-in: 0b9f3fb4e1 user: vandys tags: origin/clean, trunk, master
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to js/App.js.





1

2










3
4
5
6

7

8
9
10
11

12

13
14
15
16
17
18
19

20
21
22
23
24
25
26
27
28

29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77




78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

96

97

98

99
100
101
102
103

104
105

106
107

108
109
110
111
112

113

114
115

116

117
118
119
120
121

122
123
124
125
126
127
128
129

130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

156
157
158
159
160
161
162

163
164
165
166
167
168
169
170

171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

190
191
192
193
194
195
196
197
198
199
200
201
202

203

204

205
206
207



208
209
210
211
212
213
214
215
216

217

218
219


220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
...
284
285
286
287
288
289
290
291
292

293
294
295
296
297
298
299
300
301
...
310
311
312
313
314
315
316
317
318

319
320

321
322

323
324
325
326
327

328
329


330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346

347

348
349
350
351


352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369

370
371
372
373
374
375
376
377

378
379
380
381
382
383
384
385
386
387
388

389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417

418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437

438
439
440
441
442
443
444
445
446
447
448
449
450
451

452
453

454

455
456
457
458
459
460
461
462
463
464
465
466
467

468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486

487
488



489
490
491
492
493
494
495
496
497
498

499
500
501
502

503
504
505
506
507
508
509
510
511
512
513
514
515
516
517

518
519

520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535

536
537

538
539
540
541
542
543
544
545
546
547
548
549
550

551
552
553
554
555
556

557



558
559
560
561
562
563

564
565
566
567


568
569
570
571
572
573

574
575
576
577

578
579
580
581
582
583
584
585
586
587
588

589
590
591
592
593
594
595


596
597
598
599
600
601








function App() {










	this.login = new Login(this);
	this.currentIndex = -1;

	var color = localStorage.color;

	if(!color) color = "red";

	this.setColor(color);
	this.fontChange();

	var numArticles = localStorage.numArticles;

	if(!numArticles) numArticles = 50;

	this.numArticles(numArticles);
	var maxDownload = localStorage.maxDownload;
	if(!maxDownload) maxDownload = 500000;
	this.maxDownload(maxDownload);
};

App.prototype.authenticate = function() {

	
};

App.prototype.after_login = function(backend) {

	var _this = this;

	window.onhashchange = function(e) {


		// do not reload page
		e.preventDefault();
		e.stopPropagation();

		var url = window.location.hash;

		if (url == "#list") {
			_this.setCurrentRead();
			_this.changeToPage("#list");
		} else if(url == "#reload") {
			_this.reload();
		} else if(url == "#settings") {
			_this.changeToPage("#settings");
		} else if(url.indexOf("#color-") == 0) {
			var color = url.replace("#color-", "");
			_this.setColor(color);
		} else if(url.indexOf("#full-") == 0) {
			var i = parseInt(url.replace("#full-", ""), 10);
			_this.showFull(_this.unread_articles[i]);
		} else if(url == "#unread") {
			_this.toggleCurrentUnread();
		} else if(url == "#starred") {
			_this.toggleStarred();
		} else if(url == "#published") {
			_this.togglePublished();
		} else if(url == "#logout") {
			_this.logout();
		} else if(url == "#reset-info") {
			alert("Info bubbles will be shown again.")
			$$(".info").forEach(function(o) {
				o.removeClass("hidden");
			});
		} else if(url == "#next") {
			_this.showNext();
		} else if(url == "#previous") {
			_this.showPrevious();
		} else if(url == "#font-smaller") {
			_this.fontChange("smaller");
		} else if(url == "#font-bigger") {
			_this.fontChange("bigger");
		} else if(url == "#allRead") {
			_this.toggleAllRead();
		}

		// this is here so you can tap on a button more then once
		// and it will still call onhashchange
		window.location.hash = "#";
	}





	// FIXME move that code somewhere else
	$(".info.swipe").ontouchend = function(e) {
		localStorage.info_swipe = true;
		$(".info.swipe").addClass("hidden");
	};

	var supportsTouch = 'ontouchend' in document;

	if(!supportsTouch || localStorage.info_swipe) {
		$(".info.swipe").addClass("hidden");
	}

	// set up swiping
	var options = {
		dragLockToAxis: true,
		dragBlockHorizontal: true
	};
	var hammertime = new Hammer($("#full"), options);

	hammertime.on("dragleft", function(ev){ ev.gesture.preventDefault(); });

	hammertime.on("dragright", function(ev){ ev.gesture.preventDefault(); });

	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") {

		this.backend = new Pond(this, localStorage.server_url, localStorage.session_id)
	} else {

		this.backend = new TinyTinyRSS(this, localStorage.server_url, localStorage.session_id);
		setpublished.removeClass("hidden");
	}

	var numArticles = localStorage.numArticles;

	if(!numArticles) numArticles = 50;

	this.numArticles(numArticles);
	var maxDownload = localStorage.maxDownload;

	if(!maxDownload) maxDownload = 500000;

	this.maxDownload(maxDownload);

	this.reload();
};


App.prototype.logout = function() {
	this.backend.logOut();
	this.unread_articles = [];
	this.next_articles = [];
	this.populateList();
	this.login.log_out();
};


App.prototype.changeToPage = function(page) {

	// FIXME
	var active = $(".active");

	// 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) {
	localStorage.color = color;
	document.body.className = "";
	document.body.addClass(color);
	this.updatePieChart();
};


App.prototype.reload = function() {
	this.unread_articles = [];
	this.next_articles = [];
	allRead.addClass('inactive');
	var number=parseInt(localStorage.numArticles);
	this.backend.reload(this.gotUnreadFeeds.bind(this),number);
};


App.prototype.gotUnreadFeeds = function(new_articles) {

	if(new_articles == null || !this.validate(new_articles)) {
			
		// 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 {
			// On other errors, load the saved unread articles.
			var old_articles = localStorage.unread_articles;
			if(old_articles) {
					this.unread_articles = JSON.parse(old_articles);	
			}
			this.populateList();
		}

				
	} else {
			
		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();
		}
	}
};

App.prototype.validate = function(articles) {

	if(articles.length == 0) return true;



	for (var i = 0; i < articles.length; i++) {
		if(typeof articles[i].title != "undefined") return true;


	}

	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() {

	// 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 = [];
................................................................................
	    }
	    html_str += "</ul></li>";
	}
	
	$("#list ul").innerHTML = html_str;

	this.updatePieChart();
};


App.prototype.updateList = function() {
	var unread = 0;
	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 (unread > 0) {
	    allRead.addClass('inactive');
	} else {
	    allRead.removeClass('inactive');
	}

	this.updatePieChart();
};


App.prototype.updatePieChart = function() {


	if(!this.unread_articles) return; // happens on loginpage


	var all = this.unread_articles.length;
	var unread = 0;
	for (var i = 0; i < all; i++) {
		if(this.unread_articles[i].unread) unread++;
	};





	var a = 100 / all * unread;
	var b = 100 / all * (all - unread);

	var bg = window.getComputedStyle($("body"), null).backgroundColor;
	var fg = window.getComputedStyle($(".bar"), null).backgroundColor;
	var tx = window.getComputedStyle($(".bar"), null).color;

	var myColor = [bg, fg];

	var data = [a, b];

	$$("canvas").forEach(function(canvas) {
		var ctx = canvas.getContext("2d");
		var lastend = 0;
		var myTotal = 0;

		for(var e = 0; e < data.length; e++) myTotal += data[e];



		for (var i = 0; i < data.length; i++) {
			ctx.fillStyle = myColor[i];
			ctx.beginPath();
			ctx.moveTo(canvas.width/2, canvas.height/2);


			ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, lastend, lastend+(Math.PI*2*(data[i]/myTotal)), false);
			ctx.lineTo(canvas.width/2, canvas.height/2);
			ctx.fill();
			lastend += Math.PI*2*(data[i]/myTotal);
		}

		if(all > 0) {
			ctx.font =  "12px FeuraSans, sans-serif";
			ctx.fillStyle = tx;
			ctx.textAlign = "center";
			var text = unread + "/" + all;
			var x = canvas.width / 2;
			var y = canvas.height / 2 + 4;
			ctx.fillText(text, x, y, canvas.width-6);			
		}
	})
};


App.prototype.showFull = function(article, slide_back) {

	this.changeToPage("#full");

	this.currentIndex = this.unread_articles.indexOf(article);

	var page_id = "#full";


	$(page_id + " .date").innerHTML = (new Date(parseInt(article.updated, 10) * 1000)).toLocaleString();

	var title = $(page_id + " .title");
	title.innerHTML = article.title;
	title.href = article.link;

	$(page_id + " .feed_title").innerHTML = article.feed_title;

	$(page_id + " .author").innerHTML = "";
	if(article.author && article.author.length > 0)
		$(page_id + " .author").innerHTML = "&ndash; " + article.author; 


	$(page_id + " .article").innerHTML = article.content;

	// Open all links in browser
	$$(page_id + " .article a").forEach(function(o, i) {
		o.target = "_blank";
	});

	if(article.unread) {
		setunread.addClass('inactive');
	} else {
		setunread.removeClass('inactive');
	}

	if(!article.marked) {
		setstarred.addClass('inactive');
	} else {
		setstarred.removeClass('inactive');
	}

	if(!article.published) {
		setpublished.addClass('inactive');
	} else {
		setpublished.removeClass('inactive');
	}

};

App.prototype.showNext = function() {

    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();

    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() {
	var article = this.unread_articles[this.currentIndex];

	if(!article) return; // happens if we're not on a full article site

	if(!article.set_unread) {
		article.unread = false;
		this.updateList();
		this.backend.setArticleRead(article);
	}

	article.set_unread = false;

	setunread.removeClass('inactive');

	this.updatePieChart();
};


App.prototype.toggleCurrentUnread = function() {
	var article = this.unread_articles[this.currentIndex];
	if(article.unread) {
		article.unread = false;
		article.set_unread = false;
		setunread.removeClass('inactive');
	} else {
		article.unread = true;
		article.set_unread = true;
		setunread.addClass('inactive');
	}

	this.updateList();
	this.backend.setArticleUnread(article);
};

App.prototype.toggleAllRead = function() {

	if(allRead.hasClass('inactive')) { // set all read


		var articles = [];



		for (var i = 0; i < this.unread_articles.length; i++) {
			var article = this.unread_articles[i];
			article.unread = false;
			article.set_unread = false;
			articles.push(article);
		}
		allRead.removeClass('inactive');

		this.updateList();
		this.backend.setArticlesRead(articles);


	} else {

		var articles = [];

		for (var i = 0; i < this.unread_articles.length; i++) {
			var article = this.unread_articles[i];
			article.unread = true;
			article.set_unread = false;
			articles.push(article);
		}
		allRead.addClass('inactive');
		this.updateList();

		this.backend.setArticlesUnread(articles);
	}
};

App.prototype.toggleStarred = function() {
	var article = this.unread_articles[this.currentIndex];

	if(!article) return; // happens if we're not on a full article site
	

	if(!article.marked) {
		article.marked = true;
		this.updateList();
		this.backend.setArticleStarred(article);
		setstarred.removeClass('inactive');
	} else {
		article.marked = false;
		this.updateList();
		this.backend.setArticleUnstarred(article);
		setstarred.addClass('inactive');
	}

};

App.prototype.togglePublished = function() {
	var article = this.unread_articles[this.currentIndex];

	if(!article) return; // happens if we're not on a full article site
	

	if(!article.published) {
		article.published = true;
		this.backend.setArticlePublished(article);
		setpublished.removeClass('inactive');
	} else {
		article.published = false;
		this.backend.setArticleUnpublished(article);
		setpublished.addClass('inactive');
	}

};

App.prototype.goToList = function() {

	this.changeToPage("#list");
};

App.prototype.fontChange = function(size) {
	if(size == "bigger") {
		

		var i = localStorage.font_size;



		if(i < 5) {
			document.body.removeClass("f" + i);
			i++;
			document.body.addClass("f" + i);
			localStorage.font_size = i;
		}


	} else if(size == "smaller") {

		var i = localStorage.font_size;


		if(i > 1) {
			document.body.removeClass("f" + i);
			i--;
			document.body.addClass("f" + i);
			localStorage.font_size = i;
		}


	} else {

		var i = localStorage.font_size;

		if(typeof i == "undefined") {
			i = localStorage.font_size = 2;
		}

		document.body.addClass("f" + i);
	}

};

App.prototype.numArticles = function(askfor) {
	if(askfor < 200 && askfor > 0) {

		localStorage.numArticles=askfor;
	} else {
		localStorage.numArticles=100;
	}
};

App.prototype.maxDownload = function(maxdata) {


	if(maxdata < 5000000 && maxdata > 100000) {
		localStorage.maxDownload=maxdata;
	} else {
		localStorage.maxDownload=500000;
	}
};


>
>
>
>

>
|
>
>
>
>
>
>
>
>
>
>



|
>
|
>



|
>
|
>

|
|
|
<
|
<
>
|
<

|
|
<

<
<
>
|
|
|

|

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|

>
>
>
>


|
|


|


|



|
|
|

|
>
|
>
|
>
|
>
|



|
>
|

>
|

>
|
|


|
>
|
>

|
>
|
>



<
|
>
|





<
|
>
|


|



|







|
|

|
|

|
|

<
|
>
|




<
|
>
|



|
|
<
|
>
|

|

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>
|
<
|
|

|
|
|
|
|
|
|
|
>
|
>
|
>
|
|
|
>
>
>
|
|
|
|
<

|

|
>
|
>
|
|
>
>



<
|
<
<
<
<
<
<
<
|
<
<
|







 







<
|
>
|
|







 







<
|
>
|

>
|
|
>
|
|
|
|
<
>
|
|
>
>
|
|

|
|
|

|

|


|
|
|

|
>
|
>
|
|
|
|
>
>
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
<
|
>
|





|

>
|

|






|
|
>





|


|
|

|


|
|

|


|
|

|

|
<

<
>
|

|
|

|
|
|
|
|

|
|
|
|
|
|
|
<
|
>
|
|

|
|
|
|
|
|
|
|
|
<
|
>
|
|
>
|
>
|
|
|
|







<
|
>
|
|
|
|
|
|

|
|
|




<
|
<

<
>

|
>
>
>
|
|
|
|
|
|
|

|
|
>
|
<

<
>
|
|
|
|
|
|
|
|

|
|
<

|
|
>
|
|
>
|
|
|
|
|

|
|
|
|

|
<

|
|
>
|
|
>
|
|
|
|

|
|
|

|
<

<
>

<
|
<
<
|
>
|
>
>
>
|
|
|
|
|
|
>
|
<

<
>
>
|
|
|
|
|
|
>
|
<

<
>
|
|
|
<
|
|

<
<
<
|
>
|

|

<
|
<
>
>
|
|

|

<
>
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

36

37
38

39
40
41

42


43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

150
151
152
153
154
155
156
157

158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

184
185
186
187
188
189
190

191
192
193
194
195
196
197
198

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221

222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

248
249
250
251
252
253
254
255
256
257
258
259
260
261

262







263


264
265
266
267
268
269
270
271
...
313
314
315
316
317
318
319

320
321
322
323
324
325
326
327
328
329
330
...
339
340
341
342
343
344
345

346
347
348
349
350
351
352
353
354
355
356
357

358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404

405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453

454

455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473

474
475
476
477
478
479
480
481
482
483
484
485
486
487

488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505

506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521

522

523

524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541

542

543
544
545
546
547
548
549
550
551
552
553
554

555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573

574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590

591

592
593

594


595
596
597
598
599
600
601
602
603
604
605
606
607
608

609

610
611
612
613
614
615
616
617
618
619

620

621
622
623
624

625
626
627



628
629
630
631
632
633

634

635
636
637
638
639
640
641

642
643
//
// App.js
//	Core code for reading feeds
//

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

class App {
    constructor() {
	this.login = new Login(this);
	this.currentIndex = -1;

	let color = localStorage.color;
	if (!color) {
	    color = "red";
	}
	this.setColor(color);
	this.fontChange();

	let numArticles = localStorage.numArticles;
	if (!numArticles) {
	    numArticles = 50;
	}
	this.numArticles(numArticles);
	let maxDownload = localStorage.maxDownload;
	if (!maxDownload) {
	    maxDownload = 500000;

	}

	this.maxDownload(maxDownload);
    }


    authenticate() {
    }




    handle_hashchange(e) {
	// do not reload page
	e.preventDefault();
	e.stopPropagation();

	var url = window.location.hash;

	if (url == "#list") {
	    this.setCurrentRead();
	    this.changeToPage("#list");
	} else if(url == "#reload") {
	    this.reload();
	} else if(url == "#settings") {
	    this.changeToPage("#settings");
	} else if(url.indexOf("#color-") == 0) {
	    const color = url.replace("#color-", "");
	    this.setColor(color);
	} else if(url.indexOf("#full-") == 0) {
	    const i = parseInt(url.replace("#full-", ""), 10);
	    this.showFull(this.unread_articles[i]);
	} else if(url == "#unread") {
	    this.toggleCurrentUnread();
	} else if(url == "#starred") {
	    this.toggleStarred();
	} else if(url == "#published") {
	    this.togglePublished();
	} else if(url == "#logout") {
	    this.logout();
	} else if(url == "#reset-info") {
	    alert("Info bubbles will be shown again.")
	    $$(".info").forEach(function(o) {
		    o.removeClass("hidden");
	    });
	} else if(url == "#next") {
	    this.showNext();
	} else if(url == "#previous") {
	    this.showPrevious();
	} else if(url == "#font-smaller") {
	    this.fontChange("smaller");
	} else if(url == "#font-bigger") {
	    this.fontChange("bigger");
	} else if(url == "#allRead") {
	    this.toggleAllRead();
	}

	// this is here so you can tap on a button more then once
	// and it will still call onhashchange
	window.location.hash = "#";
    }

    after_login(backend) {

	window.onhashchange = this.handle_hashchange.bind(this);

	// FIXME move that code somewhere else
	$(".info.swipe").ontouchend = function(e) {
	    localStorage.info_swipe = true;
	    $(".info.swipe").addClass("hidden");
	};

	const supportsTouch = 'ontouchend' in document;

	if(!supportsTouch || localStorage.info_swipe) {
	    $(".info.swipe").addClass("hidden");
	}

	// set up swiping
	const options = {
	    dragLockToAxis: true,
	    dragBlockHorizontal: true
	};
	const hammertime = new Hammer($("#full"), options);
	hammertime.on("dragleft",
	 function(ev){ ev.gesture.preventDefault(); });
	hammertime.on("dragright",
	 function(ev){ ev.gesture.preventDefault(); });
	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") {
	    this.backend = new Pond(this,
	     localStorage.server_url, localStorage.session_id)
	} else {
	    this.backend = new TinyTinyRSS(this,
	     localStorage.server_url, localStorage.session_id);
	    setpublished.removeClass("hidden");
	}

	let numArticles = localStorage.numArticles;
	if (!numArticles) {
	    numArticles = 50;
	}
	this.numArticles(numArticles);
	let maxDownload = localStorage.maxDownload;
	if (!maxDownload) {
	    maxDownload = 500000;
	}
	this.maxDownload(maxDownload);

	this.reload();

    }

    logout() {
	this.backend.logOut();
	this.unread_articles = [];
	this.next_articles = [];
	this.populateList();
	this.login.log_out();

    }

    changeToPage(page) {

	// FIXME
	const active = $(".active");

	// Save old position
	if (active.id == "list") {
	    this.saveScrollTop = document.documentElement.scrollTop;
	}

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

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

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

    }

    setColor(color) {
	localStorage.color = color;
	document.body.className = "";
	document.body.addClass(color);
	this.updatePieChart();

    }

    reload() {
	this.unread_articles = [];
	this.next_articles = [];
	allRead.addClass('inactive');
	const number = parseInt(localStorage.numArticles);
	this.backend.reload(this.gotUnreadFeeds.bind(this), number);

    }

    gotUnreadFeeds(new_articles) {

	if (new_articles == null || !this.validate(new_articles)) {
			
	    // 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 {
		// On other errors, load the saved unread articles.
		const old_articles = localStorage.unread_articles;
		if (old_articles) {
		    this.unread_articles = JSON.parse(old_articles);	
		}
		this.populateList();
	    }
	    return;
	}

				
	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);
		const size = parseInt(localStorage.maxDownload);
		if (localStorage.unread_articles.length < size) {
		    const 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();
	}
    }


    validate(articles) {

	if (articles.length == 0) {
	    return true;
	}

	for (let i = 0; i < articles.length; i++) {
	    if (typeof articles[i].title != "undefined") {
		return true;
	    }
	}

	return false;

    }










    populateList() {

	// 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 = [];
................................................................................
	    }
	    html_str += "</ul></li>";
	}
	
	$("#list ul").innerHTML = html_str;

	this.updatePieChart();

    }

    updateList() {
	let unread = 0;
	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 (unread > 0) {
	    allRead.addClass('inactive');
	} else {
	    allRead.removeClass('inactive');
	}

	this.updatePieChart();

    }

    updatePieChart() {

	if (!this.unread_articles) {
	    return; // happens on loginpage
	}

	const all = this.unread_articles.length;
	let unread = 0;
	for (let i = 0; i < all; i++) {
	    if (this.unread_articles[i].unread) {

		unread++;
	    }
	}


	const a = 100 / all * unread;
	const b = 100 / all * (all - unread);

	const bg = window.getComputedStyle($("body"), null).backgroundColor;
	const fg = window.getComputedStyle($(".bar"), null).backgroundColor;
	const tx = window.getComputedStyle($(".bar"), null).color;

	const myColor = [bg, fg];

	const data = [a, b];

	$$("canvas").forEach(function(canvas) {
	    const ctx = canvas.getContext("2d");
	    let lastend = 0;
	    let myTotal = 0;

	    for (let e = 0; e < data.length; e++) {
		myTotal += data[e];
	    }

	    for (let i = 0; i < data.length; i++) {
		ctx.fillStyle = myColor[i];
		ctx.beginPath();
		ctx.moveTo(canvas.width/2, canvas.height/2);
		ctx.arc(canvas.width/2,
		 canvas.height/2, canvas.height/2, lastend,
		 lastend+(Math.PI*2*(data[i]/myTotal)), false);
		ctx.lineTo(canvas.width/2, canvas.height/2);
		ctx.fill();
		lastend += Math.PI*2*(data[i]/myTotal);
	    }

	    if (all > 0) {
		ctx.font =  "12px FeuraSans, sans-serif";
		ctx.fillStyle = tx;
		ctx.textAlign = "center";
		const text = unread + "/" + all;
		const x = canvas.width / 2;
		const y = canvas.height / 2 + 4;
		ctx.fillText(text, x, y, canvas.width-6);			
	    }
	});

    }

    showFull(article, slide_back) {

	this.changeToPage("#full");

	this.currentIndex = this.unread_articles.indexOf(article);

	const page_id = "#full";

	$(page_id + " .date").innerHTML =
	    (new Date(parseInt(article.updated, 10) * 1000)).toLocaleString();

	const title = $(page_id + " .title");
	title.innerHTML = article.title;
	title.href = article.link;

	$(page_id + " .feed_title").innerHTML = article.feed_title;

	$(page_id + " .author").innerHTML = "";
	if (article.author && article.author.length > 0) {
	    $(page_id + " .author").innerHTML = "&ndash; " + article.author; 
	}

	$(page_id + " .article").innerHTML = article.content;

	// Open all links in browser
	$$(page_id + " .article a").forEach(function(o, i) {
	    o.target = "_blank";
	});

	if (article.unread) {
	    setunread.addClass('inactive');
	} else {
	    setunread.removeClass('inactive');
	}

	if (!article.marked) {
	    setstarred.addClass('inactive');
	} else {
	    setstarred.removeClass('inactive');
	}

	if (!article.published) {
	    setpublished.addClass('inactive');
	} else {
	    setpublished.removeClass('inactive');
	}
    }



    showNext() {
	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);
	}

    }

    showPrevious() {
	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);

    }

    setCurrentRead() {
	const article = this.unread_articles[this.currentIndex];
	if (!article) {
	    return; // happens if we're not on a full article site
	}
	if (!article.set_unread) {
	    article.unread = false;
	    this.updateList();
	    this.backend.setArticleRead(article);
	}

	article.set_unread = false;

	setunread.removeClass('inactive');

	this.updatePieChart();

    }

    toggleCurrentUnread() {
	const article = this.unread_articles[this.currentIndex];
	if (article.unread) {
	    article.unread = false;
	    article.set_unread = false;
	    setunread.removeClass('inactive');
	} else {
	    article.unread = true;
	    article.set_unread = true;
	    setunread.addClass('inactive');
	}

	this.updateList();
	this.backend.setArticleUnread(article);

    }



    toggleAllRead() {

	const articles = [];

	if (allRead.hasClass('inactive')) {
	    // set all read
	    for (let i = 0; i < this.unread_articles.length; i++) {
		const article = this.unread_articles[i];
		article.unread = false;
		article.set_unread = false;
		articles.push(article);
	    }
	    allRead.removeClass('inactive');

	    this.updateList();
	    this.backend.setArticlesRead(articles);
	    return;
	}



	// Clear all read
	for (let i = 0; i < this.unread_articles.length; i++) {
		const article = this.unread_articles[i];
		article.unread = true;
		article.set_unread = false;
		articles.push(article);
	}
	allRead.addClass('inactive');
	this.updateList();

	this.backend.setArticlesUnread(articles);
    }


    toggleStarred() {
	const article = this.unread_articles[this.currentIndex];
	if (!article) {
	    return; // happens if we're not on a full article site
	}
	
	if (!article.marked) {
	    article.marked = true;
	    this.updateList();
	    this.backend.setArticleStarred(article);
	    setstarred.removeClass('inactive');
	} else {
	    article.marked = false;
	    this.updateList();
	    this.backend.setArticleUnstarred(article);
	    setstarred.addClass('inactive');
	}
    }


    togglePublished() {
	const article = this.unread_articles[this.currentIndex];
	if (!article) {
	    return; // happens if we're not on a full article site
	}
	
	if (!article.published) {
	    article.published = true;
	    this.backend.setArticlePublished(article);
	    setpublished.removeClass('inactive');
	} else {
	    article.published = false;
	    this.backend.setArticleUnpublished(article);
	    setpublished.addClass('inactive');
	}
    }



    goToList() {
	this.changeToPage("#list");

    }



    fontChange(size) {
	let i = localStorage.font_size;

	// Maybe grow
	if (size == "bigger") {
	    if (i < 5) {
		    document.body.removeClass("f" + i);
		    i++;
		    document.body.addClass("f" + i);
		    localStorage.font_size = i;
	    }
	    return;
	}



	// Maybe shrink
	if (size == "smaller") {
	    if (i > 1) {
		    document.body.removeClass("f" + i);
		    i--;
		    document.body.addClass("f" + i);
		    localStorage.font_size = i;
	    }
	    return;
	}



	// Pick a default
	if (typeof i == "undefined") {
		i = localStorage.font_size = 2;
	}

	document.body.addClass("f" + i);
    }




    numArticles(askfor) {
	if ((askfor < 200) && (askfor > 0)) {
	    localStorage.numArticles = askfor;
	} else {
	    localStorage.numArticles = 100;
	}

    }


    maxDownload(maxdata) {
	if ((maxdata < 5000000) && (maxdata > 100000)) {
	    localStorage.maxDownload = maxdata;
	} else {
	    localStorage.maxDownload = 500000;
	}

    }
}