mark all as read button. close [#28]

earthreader/web/static/css/master.css

@@ -265,6 +265,10 @@ input:not([type=button]):not([type=submit]):focus, textarea:focus {
 	padding: 1.5em 2em;
 }
 
+[role=main] > header a {
+    margin: 0 1em;
+}
+
 [role=main] article .entry-content {
 	padding: 1em 3em;
 	line-height: 1.4;

earthreader/web/static/js/master.js

@@ -386,6 +386,7 @@ function getEntries(feed_url, filter) {
 		var header = $('<header>');
 		var h2 = $('<h2>');
 		var refresh = $('<a>');
+                var mark_all = $('<a>');
 
 		main.html(null);
 
@@ -398,6 +399,11 @@ function getEntries(feed_url, filter) {
 		refresh.text('crawl now');
 		header.append(refresh);
 
+                mark_all.addClass('mark_all');
+                mark_all.attr('href', obj.read_url);
+                mark_all.text('mark all as read');
+                header.append(mark_all);
+
 		main.append(header);
 
 		if (entries.length === 0) {
@@ -620,6 +626,18 @@ function refreshFeed() {
 		});
 }
 
+function markAllRead() {
+    var target = $('[role=main] .mark_all');
+    var url = target.attr('href');
+
+    target.addClass('requesting');
+    $.ajax(url, {'type': 'PUT'})
+        .done(function() {
+            target.removeClass('requesting');
+            $('.entry-title').addClass('read');
+        });
+}
+
 function clickLink(event) {
 	var target = event.target;
 
@@ -822,6 +840,7 @@ $(function () {
 	main.on('click', '.entry-title', clickEntry);
 	main.on('click', '.nextPage', loadNextPage);
 	main.on('click', '.refresh', refreshFeed);
+        main.on('click', '.mark_all', markAllRead);
 
 	var side = $('[role=complementary]');
 	side.on('click', '[data-action]', clickComplementaryMenu);