add a simple appearing preview for unexpanded cdm and normal mode

6 files changed, 98 insertions, 4 deletions

diff --git a/cdm.css b/cdm.css
index 6bed55de1..60d460198 100644
--- a/cdm.css
+++ b/cdm.css
@@ -174,3 +174,23 @@ div.cdm.expanded div.cdmHeader a.title, div.cdm.active div.cdmHeader a.title {
 	font-size : 13px;
 }
 
+div#small_article_preview {
+	width : 300px;
+	max-height : 350px;
+	overflow : hidden;
+	border : 1px solid #c0c0c0;
+	background : white;
+	position : absolute;
+	box-shadow : 2px 2px 4px #c0c0c0;
+	z-index : 2;
+}
+
+div#small_article_preview div.content {
+	padding : 5px;
+	font-size : 12px;
+	color : gray;
+}
+
+div#small_article_preview div.content img {
+	max-width : 290px;
+}
diff --git a/classes/feeds.php b/classes/feeds.php
index 3657a0564..89ebd4a0a 100644
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -413,7 +413,7 @@ class Feeds extends Handler_Protected {
 						}
 					}
 
-					$mouseover_attrs = "onmouseover='postMouseIn($id)'
+					$mouseover_attrs = "onmouseover='postMouseIn(event, $id)'
 						onmouseout='postMouseOut($id)'";
 
 					$reply['content'] .= "<div class='$class' id='RROW-$id' $label_row_style $mouseover_attrs>";
@@ -512,7 +512,7 @@ class Feeds extends Handler_Protected {
 						}
 					}
 
-					$mouseover_attrs = "onmouseover='postMouseIn($id)'
+					$mouseover_attrs = "onmouseover='postMouseIn(event, $id)'
 						onmouseout='postMouseOut($id)'";
 
 					$expanded_class = $expand_cdm ? "expanded" : "";
@@ -537,7 +537,6 @@ class Feeds extends Handler_Protected {
 						onclick=\"return cdmClicked(event, $id);\"
 						class=\"titleWrap$hlc_suffix\">
 						<a class=\"title\"
-						title=\"".htmlspecialchars($line['title'])."\"
 						target=\"_blank\" href=\"".
 						htmlspecialchars($line["link"])."\">".
 						$line["title"] .
diff --git a/classes/rpc.php b/classes/rpc.php
index ea139935e..eb241591b 100644
--- a/classes/rpc.php
+++ b/classes/rpc.php
@@ -843,5 +843,32 @@ class RPC extends Handler_Protected {
 		}
 	}
 
+	function cdmArticlePreview() {
+		$id = db_escape_string($this->link, $_REQUEST['id']);
+
+		$result = db_query($this->link, "SELECT link,
+			ttrss_entries.title, content, feed_url
+			FROM
+			ttrss_entries, ttrss_user_entries
+				LEFT JOIN ttrss_feeds ON (ttrss_user_entries.feed_id = ttrss_feeds.id)
+			WHERE ref_id = '$id' AND ref_id = ttrss_entries.id AND
+				ttrss_user_entries.owner_uid = ". $_SESSION["uid"]);
+
+		if (db_num_rows($result) != 0) {
+			$link = db_fetch_result($result, 0, "link");
+			$title = db_fetch_result($result, 0, "title");
+			$feed_url = db_fetch_result($result, 0, "feed_url");
+
+			$content = sanitize($this->link,
+				db_fetch_result($result, 0, "content"), false, false, $feed_url);
+
+			print "<div class='content'>".$content."</content>";
+
+		} else {
+			print "Article not found.";
+		}
+
+	}
+
 }
 ?>
diff --git a/index.php b/index.php
index f2b035d47..5c5f706d1 100644
--- a/index.php
+++ b/index.php
@@ -123,6 +123,8 @@
 	</div>
 </div>
 
+<div style="display : none" onclick="Element.hide(this)" id="small_article_preview"></div>
+
 <div id="header">
 	<img id="net-alert" style="display : none"
 		title="<?php echo __("Communication problem with server.") ?>"
diff --git a/js/viewfeed.js b/js/viewfeed.js
index a5d0947bd..0e2e9e3fa 100644
--- a/js/viewfeed.js
+++ b/js/viewfeed.js
@@ -13,6 +13,8 @@ var catchup_timeout_id = false;
 var cids_requested = [];
 var loaded_article_ids = [];
 
+var _post_preview_timeout = false;
+
 var has_storage = 'sessionStorage' in window && window['sessionStorage'] !== null;
 
 function headlines_callback2(transport, offset, background, infscroll_req) {
@@ -1166,12 +1168,54 @@ function getActiveArticleId() {
 	return _active_article_id;
 }
 
-function postMouseIn(id) {
+function postMouseIn(e, id) {
 	post_under_pointer = id;
+
+	if (_post_preview_timeout) window.clearTimeout(_post_preview_timeout);
+
+	if (!getInitParam("cdm_expanded")) {
+		_post_preview_timeout = window.setTimeout(function() {
+			displaySmallArticlePreview(e, id);
+		}, 1000);
+	}
+}
+
+function displaySmallArticlePreview(e, id) {
+	try {
+		var query = "?op=rpc&method=cdmarticlepreview&id=" + id;
+
+		new Ajax.Request("backend.php", {
+			parameters: query,
+			onComplete: function(transport) {
+				cexc = $("CEXC-" + id);
+				preview = $("small_article_preview");
+				row = $("RROW-" + id);
+
+				if (id != getActiveArticleId() && (!isCdmMode() || (cexc && Element.visible(cexc))) && row && preview) {
+					preview.innerHTML = transport.responseText;
+					new Effect.Appear(preview, {duration:0.2});
+
+					preview.setStyle({
+						left: (e.clientX + 20) + 'px',
+						top: (Element.cumulativeOffset(row)[1] + row.offsetHeight + 10) + 'px' });
+
+				}
+
+			} });
+
+
+	} catch (e) {
+		exception_error("displaySmallArticlePreview", e);
+	}
 }
 
 function postMouseOut(id) {
 	post_under_pointer = false;
+
+	if (_post_preview_timeout) window.clearTimeout(_post_preview_timeout);
+
+	if (Element.visible("small_article_preview"))
+		Element.hide("small_article_preview");
 }
 
 function unpackVisibleHeadlines() {
diff --git a/tt-rss.css b/tt-rss.css
index 715de1f6e..cd79aa5a8 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -1220,3 +1220,5 @@ body#ttrssZoom div.footer {
 	margin-top : 1em;
 	text-align : center;
 }
+
+