From: Andrew Dolgov <fox@madoka.volgo-balt.ru>
Date: Thu, 1 Sep 2011 12:46:50 +0000 (+0400)
Subject: rework digest mode
X-Git-Tag: 1.5.6~30
X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=bb674f94936e8930d9ac6fa1bcc38c064e67529e;p=tt-rss.git

rework digest mode
---

diff --git a/digest.css b/digest.css
index c3f10da2..7669152f 100644
--- a/digest.css
+++ b/digest.css
@@ -1,8 +1,9 @@
 body#ttrssDigest {
-	background : #f0f0f0;
+	background : #fafafa;
 	color : black;
 	font-family : sans-serif;
 	font-size : 12px;
+	margin : 0px;
 }
 
 a {
@@ -23,12 +24,21 @@ a:hover {
 }
 
 #header {
-	font-weight : bold;
-	font-size : 14px;
+	font-size : 13px;
 	font-family : "Segoe UI", Tahoma, sans-serif;
-	margin-left : 1em;
-	margin-right : 1em;
+	padding : 5px 5px 5px 1.5em;
 	color : gray;
+	position : absolute;
+	top : 0px;
+	height : 30px;
+	left : 0px;
+	right : 0px;
+	color : #a0a0a0;
+}
+
+#header span.title {
+	font-weight : bold;
+	font-style : italic;
 }
 
 #header div.links {
@@ -42,44 +52,111 @@ a:hover {
 
 }
 
+#title {
+}
+
+#latest {
+	padding : 5px;
+}
+
 #content {
-	border : 1px solid #e0e0e0;
+	position : absolute;
+	left : 0px;
+	top : 30px;
+	right : 0px;
+	bottom : 0px;
+	-webkit-transition: left 0.2s linear, right 0.2s linear;
+	-moz-transition: left 0.2s linear, right 0.2s linear;
+	transition: left 0.2s linear, right 0.2s linear;
+}
+
+#article {
+	position : absolute;
+	right : 0px;
+	width : 60%;
+	bottom : 0px;
+	top : 30px;
 	background : white;
-	padding : 0.8em;
-	margin : 0.5em;
+	border-width : 0px 0px 0px 2px;
+	border-color : #e0e0e0;
+	border-style : solid;
+	z-index : -1;
+	opacity : 0;
+	-webkit-transition: opacity 0.2s linear;
+	-moz-transition: opacity 0.2s linear;
+	transition: opacity 0.2s linear;
 }
 
-#footer {
-	font-size : 12px;
-	text-align : center;
-	color : gray;
+#article.visible {
+	opacity : 1;
 }
 
-#content h1 {
-	margin : 0px 0px 20px 0px;
+#article #article-content h1 {
+	margin : 0px 0px 10px 0px;
+	padding : 0px 0px 5px 0px;
 	font-family : "Segoe UI", Tahoma, sans-serif;
-	font-size : 18px;
-	letter-spacing : 1px;
-	color : #684C99;
+	font-size : 21px;
+	font-weight : bold;
+	border-width : 0px 0px 3px 0px;
+	border-style : solid;
+	border-color : #e0e0e0;
+	color : gray;
 }
 
-#title {
+#article #article-content #toolbar {
+	border-width : 0px 0px 1px 0px;
+	border-color : #e0e0e0;
+	border-style : solid;
+	background : #fafafa;
+	font-size : 14px;
+	font-weight : bold;
+	padding : 5px 10px 5px 10px;
+	margin : 0px 0px 0px 0px;
 }
 
-#latest {
-	padding : 5px;
+#article #article-content {
+	padding : 0px;
+	font-height : 16px;
 }
 
-#feeds {
+#article #article-content #tags {
+	color : #a0a0a0;
+}
+
+#article #article-content #ops {
 	float : right;
-	width : 30%;
-	min-width : 300px;
-	padding : 5px;
-	font-size : 14px;
 }
 
-#feeds h1 {
-	text-align : right;
+#article #article-content #ops img {
+	cursor : pointer;
+	margin-right : 0px;
+	margin-left : 10px;
+}
+
+#article #article-content #inner {
+	padding : 20px;
+}
+
+#article #article-content img {
+	max-width : 90%;
+}
+
+#content.move {
+	left : -300px;
+	right : 60%
+}
+
+#feeds {
+	position : absolute;
+	left : 0px;
+	width : 300px;
+	top : 0px;
+	bottom : 0px;
+	font-size : 14px;
+	overflow : auto;
+	border-width : 0px 4px 0px 0px;
+	border-color : #e0e0e0;
+	border-style : solid;
 }
 
 #feeds ul#feeds-content img {
@@ -89,85 +166,62 @@ a:hover {
 	margin-right : 5px;
 }
 
-#feeds ul#feeds-content div.unread-ctr img.dismiss {
-	margin-right : 0px;
-	cursor : pointer;
-}
-
 #feeds ul#feeds-content div.unread-ctr {
-	color : gray;
-	float : right;
+	color : #d0d0d0;
+	padding-left : 10px;
+	display : inline;
 }
 
 #feeds ul#feeds-content li {
-	margin : 0px 0px 2px 0px;
-	padding : 2px;
+	padding : 10px;
 	clear : both;
+	cursor : pointer;
+	border-width : 1px 0px 1px 0px;
+	border-color : transparent;
+	border-style : solid;
+	color : gray;
+	white-space : nowrap;
 }
 
 #feeds ul#feeds-content li.selected {
-	background : #f0f0f0;
-}
-
-#feeds ul#feeds-content li.selected a {
-	color : #404040;
-}
-
-#feeds ul#feeds-content li.selected a:hover {
-	color : #659a4c;
+	background : white;
+	border-color : #e0e0e0;
+	border-style : solid;
 }
 
 #feeds ul#feeds-content {
 	list-style-type : none;
 	font-weight : bold;
-	color : #659a4c;
-	margin : 0px;
+	margin : 10px 10px 10px 10px;
 	padding : 0px;
 }
 
-#feeds ul#feeds-content li a {
-	color : #659a4c;
-}
-
-#feeds ul#feeds-content li a:hover {
-	color : gray;
-}
-
 #headlines {
-	padding : 5px;
 	font-size : 14px;
-	max-width : 65%;
+	position : absolute;
+	left : 302px;
+	top : 0px;
+	bottom : 0px;
+	right : 0px;
+	overflow : auto;
 }
 
 #headlines h1 a {
 	color : #684C99;
 }
 
-#headlines h1 a:hover {
-	color : gray;
-}
-
-#headlines h1 #headlines-title {
-	color : gray;
-}
-
-#headlines ul#headlines-content div.digest-check {
-	float : right;	
-}
-
-#headlines ul#headlines-content div.digest-check img {
-	cursor : pointer;
-	margin-right : 0px;
-	margin-left : 5px;
+#headlines ul#headlines-content .cb {
+	vertical-align : middle;
+	margin-right : 5px;
+	float : left;
 }
 
-
 #headlines ul#headlines-content img.icon {
 	width : 16px;
 	height : 16px;
 	vertical-align : middle;
 	margin-right : 5px;
-	float : left;
+	float : right;
 }
 
 #headlines ul#headlines-content {
@@ -178,16 +232,22 @@ a:hover {
 }
 
 #headlines ul#headlines-content li {
-	margin : 0px 0px 10px 0px;
-	color : #909090;
+	margin : 0px 0px 0px 2px;
+	padding : 10px;
+	color : gray;
 	clear : left;
+	background : #eeeeee;
+	border-width : 0px 0px 1px 0px;
+	border-style : solid;
+	border-color : #e0e0e0;
 }
 
 #headlines ul#headlines-content a.title {
-	font-size : 18px;
+	font-size : 14px;
 	font-weight : bold;
 	display : block;
-	padding-left : 21px;
+	margin-left : 21px;
+	position : relative;
 }
 
 #headlines ul#headlines-content li.fresh a.title {
@@ -195,14 +255,22 @@ a:hover {
 }
 
 #headlines ul#headlines-content li.unread a.title {
+	color : black;
+	/* color : #8DB1D6; */
 }
 
 #headlines ul#headlines-content li.read a.title {
-	color : #8DB1D6;
+	color : gray;
 }
 
-#headlines ul#headlines-content li.read a.title:hover {
-	color : gray;
+#headlines ul#headlines-content li.unread,
+#headlines ul#headlines-content li.fresh {
+	background-color : white;
+}
+
+#headlines ul#headlines-content li.selected {
+	background-color : #fff7d5;
+	border-color : white white #e0e0e0;
 }
 
 #headlines ul#headlines-content img#H-LOADING-IMG {
@@ -236,20 +304,6 @@ a:hover {
 	color : gray;
 }
 
-#headlines ul#headlines-content span.tags {
-	font-size : 11px;
-	margin-bottom : 2px;
-}
-
-#headlines ul#headlines-content span.tags a {
-	color : #684C99;
-}
-
-#headlines ul#headlines-content div.info a:hover, 
-#headlines ul#headlines-content span.tags a:hover {
-	color : #659a4c;
-}
-
 #overlay {
 	background : white;
 	left : 0;
@@ -281,3 +335,5 @@ div.fatalError textarea {
 div.insensitive {
 	color : gray;
 }
+
+
diff --git a/digest.js b/digest.js
index a85b7bda..ee76c735 100644
--- a/digest.js
+++ b/digest.js
@@ -2,7 +2,6 @@ var last_feeds = [];
 var init_params = {};
 
 var _active_feed_id = false;
-var _active_feed_offset = false;
 var _update_timeout = false;
 var _view_update_timeout = false;
 var _feedlist_expanded = false;
@@ -103,6 +102,29 @@ function catchup_article(article_id, callback) {
 	}
 }
 
+function set_selected_article(article_id) {
+	try {
+		$$("#headlines-content > li[id*=A-]").each(function(article) {
+				var id = article.id.replace("A-", "");
+
+				var cb = article.getElementsByTagName("INPUT")[0];
+
+				if (id == article_id) {
+					article.addClassName("selected");
+					cb.checked = true;
+				} else {
+					article.removeClassName("selected");
+					cb.checked = false;
+				}
+
+		});
+
+	} catch (e) {
+		exception_error("mark_selected_feed", e);
+	}
+}
+
+
 function set_selected_feed(feed_id) {
 	try {
 		var feeds = $("feeds-content").getElementsByTagName("LI");
@@ -121,58 +143,15 @@ function set_selected_feed(feed_id) {
 	}
 }
 
-function zoom(elem, article_id) {
-	try {
-		//alert(elem + "/" + article_id);
-
-		elem.innerHTML = "<img src='images/indicator_tiny.gif'> " +
-			__("Loading, please wait...");
-
-		new Ajax.Request("backend.php",	{
-			parameters: "?op=rpc&subop=digest-get-contents&article_id=" +
-				article_id,
-			onComplete: function(transport) {
-				fatal_error_check(transport);
-
-				var reply = JSON.parse(transport.responseText);
-
-				if (reply) {
-					var article = reply['article'];
-
-					elem.innerHTML = article.content;
-
-					new Effect.BlindDown(elem, {duration : 0.5});
-
-					elem.onclick = false;
-					elem.style.cursor = "auto";
-
-					catchup_article(article_id,
-						function() {
-							window.clearTimeout(_view_update_timeout);
-							_view_update_timeout = window.setTimeout("view_update()", 500);
-							$("A-" + article_id).className = "read";
-					});
-
-
-				} else {
-					elem.innerHTML = __("Error: unable to load article.");
-				}
-
-				} });
-
-
-	} catch (e) {
-		exception_error("zoom", e);
-	}
-}
-
 function load_more() {
 	try {
 		var pr = $("H-LOADING-IMG");
 
 		if (pr) Element.show(pr);
 
-		viewfeed(_active_feed_id, _active_feed_offset + 10, false, false, true,
+		var offset = $$("#headlines-content > li[id*=A-][class*=fresh],li[id*=A-][class*=unread]").length;
+
+		viewfeed(false, offset, false, false, true,
 			function() {
 				var pr = $("H-LOADING-IMG");
 
@@ -227,37 +206,115 @@ function view_update() {
 	}
 }
 
-function view(article_id, dismiss_only) {
+function view(article_id) {
 	try {
-		remove_headline_entry(article_id);
+		$("content").addClassName("move");
 
-		catchup_article(article_id,
-			function() {
-				window.clearTimeout(_view_update_timeout);
-				_view_update_timeout = window.setTimeout("view_update()", 500);
-			});
+		var a = $("A-" + article_id);
+		var h = $("headlines");
+
+		setTimeout(function() {
+			// below or above viewport, reposition headline
+			if (a.offsetTop > h.scrollTop + h.offsetHeight || a.offsetTop+a.offsetHeight < h.scrollTop+a.offsetHeight)
+				h.scrollTop = a.offsetTop - (h.offsetHeight/2 - a.offsetHeight/2);
+			}, 500);
+
+		new Ajax.Request("backend.php",	{
+			parameters: "?op=rpc&subop=digest-get-contents&article_id=" +
+				article_id,
+			onComplete: function(transport) {
+				fatal_error_check(transport);
+
+				var reply = JSON.parse(transport.responseText);
+
+				if (reply) {
+					var article = reply['article'];
+
+					var mark_part = "";
+					var publ_part = "";
+
+					var tags_part = "";
+
+					if (article.tags.length > 0) {
+						tags_part = " " + __("in") + " ";
 
-		return dismiss_only != true;
+						for (var i = 0; i < Math.min(5, article.tags.length); i++) {
+							//tags_part += "<a href=\"#\" onclick=\"viewfeed('" +
+							//		article.tags[i] + "')\">" +
+							//	article.tags[i] + "</a>, ";
+
+							tags_part += article.tags[i] + ", ";
+						}
+
+						tags_part = tags_part.replace(/, $/, "");
+						tags_part = "<span class=\"tags\">" + tags_part + "</span>";
+
+					}
+
+					if (article.marked)
+						mark_part = "<img title='"+ __("Unstar article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_set.png'>";
+					else
+						mark_part =	"<img title='"+__("Star article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_unset.png'>";
+
+					if (article.published)
+						publ_part = "<img title='"+__("Unpublish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_set.png'>";
+					else
+						publ_part =	"<img title='"+__("Publish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_unset.png'>";
+
+					var tmp = "<div id=\"toolbar\">" +
+						"<a target=\"_blank\" href=\""+article.url+"\">" + __("Original article") + "</a>" +
+						"<div style=\"float : right\"><a href=\"#\" onclick=\"close_article()\">" +
+						__("Close this panel") + "</a></div></div>" +
+						"<div id=\"inner\">" +
+						"<div id=\"ops\">" +
+						mark_part +
+						publ_part +
+						"</div>" +
+						"<h1>" + article.title + "</h1>" +
+						"<div id=\"tags\">" +
+						tags_part +
+						"</div>" +
+						article.content + "</div>";
+
+					$("article-content").innerHTML = tmp;
+					$("article").addClassName("visible");
+
+					set_selected_article(article.id);
+
+					catchup_article(article_id,
+						function() {
+							$("A-" + article_id).addClassName("read");
+					});
+
+				} else {
+					elem.innerHTML = __("Error: unable to load article.");
+				}
+			}
+		});
+
+
+		return false;
 	} catch (e) {
 		exception_error("view", e);
 	}
 }
 
+function close_article() {
+	$("content").removeClassName("move");
+	$("article").removeClassName("visible");
+}
+
 function viewfeed(feed_id, offset, replace, no_effects, no_indicator, callback) {
 	try {
 
 		if (!feed_id) feed_id = _active_feed_id;
-
-		if (!offset) {
-			offset = 0;
-		} else {
-			offset = _active_feed_offset + offset;
-		}
-
+		if (offset == undefined) offset = 0;
 		if (replace == undefined) replace = (offset == 0);
 
 		_update_seq = _update_seq + 1;
 
+		if (!offset) $("headlines").scrollTop = 0;
+
 		var query = "backend.php?op=rpc&subop=digest-update&feed_id=" +
 				param_escape(feed_id) +	"&offset=" + offset +
 				"&seq=" + _update_seq;
@@ -356,20 +413,14 @@ function add_feed_entry(feed) {
 
 		icon_part = "<img src='" + get_feed_icon(feed) + "'/>";
 
-		var tmp_html = "<li id=\"F-"+feed.id+"\" " +
-				"onmouseover=\"feed_mi(this)\" onmouseout=\"feed_mo(this)\">" +
-			icon_part +
-			"<a href=\"#\" onclick=\"viewfeed("+feed.id+")\">" + feed.title + "</a>" +
-			"<div class='unread-ctr'>" +
-				"<img onclick=\"catchup_feed("+feed.id+")\" title=\"" +
-					__("Mark as read") +
-					"\" class=\"dismiss\" style='display : none' src=\"images/digest_checkbox.png\">" +
-				"<span class=\"unread\">" + feed.unread + "</span>" +
-			"</div>" +
-			"</li>";
+		var tmp_html = "<li id=\"F-"+feed.id+"\" onclick=\"viewfeed("+feed.id+")\">" +
+			icon_part + feed.title +
+			"<div class='unread-ctr'>" + "<span class=\"unread\">" + feed.unread + "</span>" +
+			"</div>" + "</li>";
 
 		$("feeds-content").innerHTML += tmp_html;
 
+
 	} catch (e) {
 		exception_error("add_feed_entry", e);
 	}
@@ -382,38 +433,10 @@ function add_headline_entry(article, feed, no_effects) {
 
 		icon_part = "<img class='icon' src='" + get_feed_icon(feed) + "'/>";
 
-		var mark_part = "";
-		var publ_part = "";
-
-		var tags_part = "";
-
-		if (article.tags.length > 0) {
-
-			tags_part = " " + __("in") + " ";
-
-			for (var i = 0; i < Math.min(5, article.tags.length); i++) {
-				tags_part += "<a href=\"#\" onclick=\"viewfeed('" +
-						article.tags[i] + "')\">" +
-					article.tags[i] + "</a>, ";
-			}
-
-			tags_part = tags_part.replace(/, $/, "");
-			tags_part = "<span class=\"tags\">" + tags_part + "</span>";
-		}
-
-		if (article.marked)
-			mark_part = "<img title='"+ __("Unstar article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_set.png'>";
-		else
-			mark_part =	"<img title='"+__("Star article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_unset.png'>";
-
-		if (article.published)
-			publ_part = "<img title='"+__("Unpublish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_set.png'>";
-		else
-			publ_part =	"<img title='"+__("Publish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_unset.png'>";
 
 		var style = "";
 
-		if (!no_effects) style = "style=\"display : none\"";
+		//if (!no_effects) style = "style=\"display : none\"";
 
 		if (article.excerpt.trim() == "")
 			article.excerpt = __("Click to expand article.");
@@ -426,24 +449,31 @@ function add_headline_entry(article, feed, no_effects) {
 		if (d.getTime() / 1000 - article.updated < fresh_max)
 			li_class = "fresh";
 
+		//"<img title='" + __("Share on Twitter") + "' onclick=\"tweet_article("+article.id+", true)\" src='images/art-tweet.png'>" +
+
+		//"<img title='" + __("Mark as read") + "' onclick=\"view("+article.id+", true)\" src='images/digest_checkbox.png'>" +
+
+		var checkbox_part = "<input type=\"checkbox\" class=\"cb\" onclick=\"toggle_select_article(this)\"/>";
+
+		var date = new Date(article.updated * 1000);
+
+		var date_part = date.toString().substring(0,21);
+
 		var tmp_html = "<li id=\"A-"+article.id+"\" "+style+" class=\""+li_class+"\">" +
+			checkbox_part +
 			icon_part +
-
-			"<div class='digest-check'>" +
-				mark_part +
-				publ_part +
-				"<img title='" + __("Share on Twitter") + "' onclick=\"tweet_article("+article.id+", true)\" src='images/art-tweet.png'>" +
-				"<img title='" + __("Mark as read") + "' onclick=\"view("+article.id+", true)\" src='images/digest_checkbox.png'>" +
-			"</div>" +
 			"<a target=\"_blank\" href=\""+article.link+"\""+
 		  		"onclick=\"return view("+article.id+")\" class='title'>" +
 				article.title + "</a>" +
 			"<div class='body'>" +
-			"<div title=\""+__("Click to expand article")+"\" onclick=\"zoom(this, "+article.id+")\" class='excerpt'>" +
+			"<div onclick=\"view("+article.id+")\" class='excerpt'>" +
 				article.excerpt + "</div>" +
-			"<div class='info'><a href=\#\" onclick=\"viewfeed("+feed.id+")\">" +
-				feed.title + "</a> " + tags_part + " @ " +
-				new Date(article.updated * 1000) + "</div>" +
+			"<div class='info'>";
+
+/*		tmp_html += "<a href=\#\" onclick=\"viewfeed("+feed.id+")\">" +
+					feed.title + "</a> " + " @ "; */
+
+		tmp_html += date_part + "</div>" +
 			"</div></li>";
 
 		$("headlines-content").innerHTML += tmp_html;
@@ -494,6 +524,9 @@ function redraw_feedlist(feeds) {
 					__("No unread feeds.") + "</div>";
 		}
 
+		if (_active_feed_id)
+			set_selected_feed(_active_feed_id);
+
 	} catch (e) {
 		exception_error("redraw_feedlist", e);
 	}
@@ -556,11 +589,9 @@ function parse_headlines(transport, replace, no_effects) {
 		var headlines_title = reply['headlines']['title'];
 
 		if (headlines && headlines_title) {
-			$("headlines-title").innerHTML = headlines_title
 
 			if (replace) {
 				$('headlines-content').innerHTML = '';
-				Element.hide('headlines-content');
 			}
 
 			var pr = $('H-MORE-PROMPT');
@@ -575,16 +606,17 @@ function parse_headlines(transport, replace, no_effects) {
 					add_headline_entry(headlines[i],
 							find_feed(last_feeds, headlines[i].feed_id), !no_effects);
 
-					inserted = $("A-" + headlines[i].id);
 				}
 			}
 
+			console.log(inserted.id);
+
 			var ids = get_visible_article_ids();
 
 			if (ids.length > 0) {
 				if (pr) {
 					$('headlines-content').appendChild(pr);
-					if (!no_effects && inserted) new Effect.ScrollTo(inserted);
+
 				} else {
 					$('headlines-content').innerHTML += "<li id='H-MORE-PROMPT'>" +
 						"<div class='body'>" +
@@ -600,8 +632,8 @@ function parse_headlines(transport, replace, no_effects) {
 				// FIXME : display some kind of "nothing to see here" prompt here
 			}
 
-			if (replace && !no_effects)
-				new Effect.Appear('headlines-content', {duration : 0.3});
+//			if (replace && !no_effects)
+//				new Effect.Appear('headlines-content', {duration : 0.3});
 
 			//new Effect.Appear('headlines-content');
 		}
@@ -617,6 +649,8 @@ function init_second_stage() {
 			parameters: "backend.php?op=rpc&subop=digest-init",
 			onComplete: function(transport) {
 				parse_feeds(transport);
+				Element.hide("overlay");
+
 				window.setTimeout('viewfeed(-4)', 100);
 				_update_timeout = window.setTimeout('update()', 5*1000);
 				} });
@@ -747,47 +781,6 @@ function fatal_error_check(transport) {
 	return true;
 }
 
-function feed_mi(elem) {
-	try {
-		var imgs = elem.getElementsByTagName('IMG');
-		var spans = elem.getElementsByTagName('SPAN');
-
-		for (var i = 0; i < imgs.length; i++) {
-			if (imgs[i].className == "dismiss")
-				Element.show(imgs[i]);
-		}
-
-		for (var i = 0; i < spans.length; i++) {
-			if (spans[i].className == "unread")
-				Element.hide(spans[i]);
-		}
-
-
-	} catch (e) {
-		exception_error("feed_mi", e);
-	}
-}
-
-function feed_mo(elem) {
-	try {
-		var imgs = elem.getElementsByTagName('IMG');
-		var spans = elem.getElementsByTagName('SPAN');
-
-		for (var i = 0; i < imgs.length; i++) {
-			if (imgs[i].className == "dismiss")
-				Element.hide(imgs[i]);
-		}
-
-		for (var i = 0; i < spans.length; i++) {
-			if (spans[i].className == "unread")
-				Element.show(spans[i]);
-		}
-
-	} catch (e) {
-		exception_error("feed_mo", e);
-	}
-}
-
 function update_title(unread) {
 	try {
 		document.title = "Tiny Tiny RSS";
@@ -830,3 +823,17 @@ function tweet_article(id) {
 		exception_error("tweet_article", e);
 	}
 }
+
+function toggle_select_article(elem) {
+	try {
+		var article = elem.parentNode;
+
+		if (article.hasClassName("selected"))
+			article.removeClassName("selected");
+		else
+			article.addClassName("selected");
+
+	} catch (e) {
+		exception_error("toggle_select_article", e);
+	}
+}
diff --git a/digest.php b/digest.php
index 63da7762..a2c350af 100644
--- a/digest.php
+++ b/digest.php
@@ -65,68 +65,29 @@
 	<div id="header">
 
 	<div class="links">
-
 	<?php if (!SINGLE_USER_MODE) { ?>
 			<?php echo __('Hello,') ?> <b><?php echo $_SESSION["name"] ?></b> |
 	<?php } ?>
-
 	<?php if (!SINGLE_USER_MODE) { ?>
 			<a href="backend.php?op=logout"><?php echo __('Logout') ?></a>
 	<?php } ?>
-
 	</div>
 
-	Tiny Tiny RSS
+	<span class="title">Tiny Tiny RSS</span>
 
 	</div>
-	<div id="content">
-		<!-- <div id="title">
-			<div id="search">
-				<input name="search" type="search"></input>
-				<button>Search</button>
-			</div>
 
-		</div>
+	<div id="article"><div id="article-content">&nbsp;</div></div>
 
-		<div id="latest">
-			<h1>latest articles</h1>
-
-			<em>TODO</em>
-
-			<div id="latest-content"> </div>
-		</div> -->
+	<div id="content">
 
 		<div id="feeds">
-			<h1><?php echo __('feeds') ?></h1>
-
 			<ul id="feeds-content"> </ul>
 		</div>
 
 		<div id="headlines">
-			<h1><a href="#" onclick="viewfeed(-4)"><?php echo __('headlines') ?></a>:
-				<span id="headlines-title"></span></h1>
-
 			<ul id="headlines-content"> </ul>
 		</div>
-
-		<br clear="both">
-
 	</div>
 
-	<div id="footer">
-
-	<a href="http://tt-rss.org/">Tiny Tiny RSS</a>
-	<?php if (!defined('HIDE_VERSION')) { ?>
-		 v<?php echo VERSION ?>
-	<?php } ?>
-	&copy; 2005&ndash;<?php echo date('Y') ?>
-	<a href="http://fakecake.org/">Andrew Dolgov</a>
-
-	<br/>
-
-	<a href="tt-rss.php">
-		<?php echo __("You are viewing the digest page. Click to open full version.") ?></a>
-
-</div>
-
 </body>
diff --git a/modules/backend-rpc.php b/modules/backend-rpc.php
index 6c0abf71..6eea33df 100644
--- a/modules/backend-rpc.php
+++ b/modules/backend-rpc.php
@@ -604,14 +604,22 @@
 		if ($subop == "digest-get-contents") {
 			$article_id = db_escape_string($_REQUEST['article_id']);
 
-			$result = db_query($link, "SELECT content
+			$result = db_query($link, "SELECT content,title,link,marked,published
 				FROM ttrss_entries, ttrss_user_entries
 				WHERE id = '$article_id' AND ref_id = id AND owner_uid = ".$_SESSION['uid']);
 
 			$content = sanitize_rss($link, db_fetch_result($result, 0, "content"));
+			$title = strip_tags(db_fetch_result($result, 0, "title"));
+			$article_url = htmlspecialchars(db_fetch_result($result, 0, "link"));
+			$marked = sql_bool_to_bool(db_fetch_result($result, 0, "marked"));
+			$published = sql_bool_to_bool(db_fetch_result($result, 0, "published"));
+
 
 			print json_encode(array("article" =>
-				array("id" => $id, "content" => $content)));
+				array("id" => $article_id, "url" => $article_url,
+					"tags" => get_article_tags($link, $article_id),
+					"marked" => $marked, "published" => $published,
+					"title" => $title, "content" => $content)));
 			return;
 		}
 
@@ -627,7 +635,7 @@
 
 			$reply['seq'] = $seq;
 
-			$headlines = api_get_headlines($link, $feed_id, 10, $offset,
+			$headlines = api_get_headlines($link, $feed_id, 30, $offset,
 				'', ($feed_id == -4), true, false, "unread", "updated DESC");
 
 			//function api_get_headlines($link, $feed_id, $limit, $offset,
@@ -642,7 +650,7 @@
 		}
 
 		if ($subop == "digest-init") {
-			$tmp_feeds = api_get_feeds($link, -3, true, false, 0);
+			$tmp_feeds = api_get_feeds($link, -4, true, false, 0);
 
 			$feeds = array();
 
diff --git a/viewfeed.js b/viewfeed.js
index 1718c810..b70b64bf 100644
--- a/viewfeed.js
+++ b/viewfeed.js
@@ -995,7 +995,7 @@ function editArticleTags(id) {
 						var data = JSON.parse(transport.responseText);
 
 						if (data) {
-							var tags_str = data.tags_str;
+							var tags_str = article.tags;
 							var id = tags_str.id;
 
 							var tags = $("ATSTR-" + id);