use css-based layout in normal mode

cdm.css

@@ -15,13 +15,13 @@ div.cdmHeader input {
 	margin-right : 5px;
 }
 
-div.updPic {
+div.cdmHeader div.updPic {
 	width : 25px;
 	display : inline-block;
 	text-align : center;
 }
 
-div.updPic img {
+div.cdmHeader div.updPic img {
 	vertical-align : middle;
 }
 
@@ -67,3 +67,12 @@ div.cdmContent div.postEnclosures {
 	color : gray;
 }
 
+div.cdmFeedTitle {
+	border-color : #a0a0a0;
+	border-width : 0px 0px 1px 0px;
+	border-style : solid;
+	padding : 5px 3px 5px 5px;
+	background : url("images/toolbar.png") bottom left;
+	background-repeat : repeat-x;
+}
+

feedlist.js

@@ -222,11 +222,6 @@ function viewfeed(feed, subop, is_cat, offset) {
 
 		var container = $("headlinesInnerContainer");
 
-/*		if (container && page_offset == 0 && !isCdmMode()) {
-			new Effect.Fade(container, {duration: 1, to: 0.01,
-				queue: { position:'end', scope: 'FEEDL-' + feed, limit: 1 } } );
-		} */
-
 		var unread_ctr = -1;
 		
 		if (!is_cat) unread_ctr = get_feed_unread(feed);

functions.js

@@ -205,22 +205,6 @@ function cleanSelected(element) {
 	}
 }
 
-function getVisibleUnreadHeadlines() {
-	var content = $("headlinesList");
-
-	var rows = new Array();
-
-	if (!content) return rows;
-
-	for (i = 0; i < content.rows.length; i++) {
-		var row_id = content.rows[i].id.replace("RROW-", "");
-		if (row_id.length > 0 && content.rows[i].className.match("Unread")) {
-				rows.push(row_id);	
-		}
-	}
-	return rows;
-}
-
 function setCookie(name, value, lifetime, path, domain, secure) {
 	
 	var d = false;

functions.php

@@ -3131,10 +3131,6 @@
 		return ((!defined('TTRSS_SESSION_NAME')) ? "ttrss_sid" : TTRSS_SESSION_NAME);
 	}
 
-	function make_init_param($param, $value) {
-		return array("param" => $param, "value" => $value);
-	}
-
 	function make_init_params($link) {
 		$params = array();
 
@@ -3150,7 +3146,7 @@
 		foreach (array("ON_CATCHUP_SHOW_NEXT_FEED", "HIDE_READ_FEEDS",
 			"ENABLE_FEED_CATS", "FEEDS_SORT_BY_UNREAD", "CONFIRM_FEED_CATCHUP",
 			"CDM_AUTO_CATCHUP", "FRESH_ARTICLE_MAX_AGE", 
-			"HIDE_READ_SHOWS_SPECIAL", "HIDE_FEEDLIST") as $param) {
+			"HIDE_READ_SHOWS_SPECIAL", "HIDE_FEEDLIST", "COMBINED_DISPLAY_MODE") as $param) {
 
 				 $params[strtolower($param)] = (int) get_pref($link, $param);
 		 }
@@ -5077,13 +5073,6 @@
 
 		if (db_num_rows($result) > 0) {
 
-#			print "\{$offset}";
-
-			if (!get_pref($link, 'COMBINED_DISPLAY_MODE') && !$offset) {
-				print "<table class=\"headlinesList\" id=\"headlinesList\" 
-					cellspacing=\"0\">";
-			}
-
 			$lnum = $limit*$offset;
 
 			$num_unread = 0;
@@ -5222,34 +5211,36 @@
 
 							$vf_catchup_link = "(<a onclick='javascript:catchupFeedInGroup($feed_id);' href='#'>".__('mark as read')."</a>)";
 
-							print "<tr class='feedTitle'><td colspan='7'>".
+							print "<div class='cdmFeedTitle'>".
 								"<div style=\"float : right\">$feed_icon_img</div>".
 								"<a href=\"#\" onclick=\"viewfeed($feed_id)\">".
-								$line["feed_title"]."</a> $vf_catchup_link</td></tr>";
+								$line["feed_title"]."</a> $vf_catchup_link</div>";
+
 						}
 					}
 
 					$mouseover_attrs = "onmouseover='postMouseIn($id)' 
 						onmouseout='postMouseOut($id)'";
 
-					print "<tr class='$class' id='RROW-$id' $mouseover_attrs>";
+					print "<div class='$class' id='RROW-$id' $mouseover_attrs>";
-		
+
-					print "<td class='hlUpdPic'>$update_pic</td>";
+					print "<div class='hlUpdPic'>$update_pic</div>";
-		
+
-					print "<td class='hlSelectRow'>
+					print "<div class='hlLeft'>";
-						<input type=\"checkbox\" onclick=\"tSR(this)\"
+
-							id=\"RCHK-$id\">
+					print "<input type=\"checkbox\" onclick=\"tSR(this)\"
-						</td>";
+							id=\"RCHK-$id\">";
 		
-					print "<td class='hlMarkedPic'>$marked_pic</td>";
+					print "$marked_pic";
-					print "<td class='hlMarkedPic'>$published_pic</td>";
+					print "$published_pic";
 
-					print "<td onclick='return hlClicked(event,$id)' 
+					print "</div>";
-						class='hlContent$hlc_suffix' valign='middle' id='HLC-$id'>";
 
+					print "<div onclick='return hlClicked(event, $id)' 
+						class=\"hlTitle\"><span class='hlContent$hlc_suffix'>";
 					print "<a id=\"RTITLE-$id\" 
 						href=\"" . htmlspecialchars($line["link"]) . "\"
-						onclick=\"return false\">" .
+						onclick=\"return false;\">" .
 						$line["title"];
 
 					if (get_pref($link, 'SHOW_CONTENT_PREVIEW')) {
@@ -5258,7 +5249,7 @@
 						}
 					}
 
-					print "</a>";
+					print "</a></span>";
 
 					print $labels_str;
 
@@ -5271,22 +5262,21 @@
 						}
 					} */
 
-					print "</td>";
+					print "</div>";
 
-		
+					print "<div class=\"hlRight\">";					
-					print "<td class=\"hlUpdated\" 
+					print "<span class=\"hlUpdated\">$updated_fmt</span>";
-						onclick='return hlClicked(event,$id)'><nobr>$updated_fmt&nbsp;
+					print $score_pic;
-					</nobr></td>";
 
-					print "<td class='hlMarkedPic'>$score_pic</td>";
+					if ($line["feed_title"] && !get_pref($link, 'VFEED_GROUP_BY_FEED')) {
 
-					if (@$line["feed_title"] && !get_pref($link, 'VFEED_GROUP_BY_FEED')) {
+						print "<span onclick=\"viewfeed($feed_id)\" 
-						print "<td onclick=\"viewfeed($feed_id)\" 
+							title=\"".htmlspecialchars($line['feed_title'])."\">
-							title=\"".htmlspecialchars($line['feed_title'])."\"
+							$feed_icon_img<span>";
-							class=\"hlFeedIcon\">$feed_icon_img</td>";
 					}
 
-					print "</tr>";
+					print "</div>";
+					print "</div>";
 
 				} else {
 
@@ -5497,10 +5487,6 @@
 				++$lnum;
 			} 
 
-			if (!get_pref($link, 'COMBINED_DISPLAY_MODE') && !$offset) {			
-				print "</table>";
-			}
-
 		} else {
 			$message = "";
 

tt-rss.css

@@ -719,11 +719,7 @@ span.contentPreview:hover {
 	color : #4684ff;
 }
 
-table.headlinesList {
+span.hlLabelRef {
-	width : 100%;
-}
-
-table.headlinesList span.hlLabelRef, div.cdmHeader span.hlLabelRef {
 	background-color : #fff7d5;	
 	font-height : 8px;
 	color : #063064;
@@ -733,43 +729,11 @@ table.headlinesList span.hlLabelRef, div.cdmHeader span.hlLabelRef {
 	white-space: nowrap;
 }
 
-table.headlinesList img.hlLoading {
-	margin-left : 5px;
-	vertical-align : middle;
-}
-
-table.headlinesList td.hlFeedIcon {
-	width : 25px;
-	text-align : center;
-	cursor : pointer;
-}
-
-
-table.headlinesList td.hlMarkedPic {
-	width : 25px;
-	text-align : center;
-}
-
-table.headlinesList td.hlfeed {
-	text-align : right;
-}
-
 td.hlSelectRow, td.hlUpdPic {
 	width : 25px;
 	text-align : center;
 }
 
-table.headlinesList td.hlUpdated {
-	color : gray;
-	text-align : right;
-	width : 100px;
-	cursor : pointer;
-}
-
-table.headlinesList tr td {
-	padding : 2px 0px 2px 0px;
-}
-
 div.postHeader div.postDate {
 	text-align : right;
 	color : gray;
@@ -1393,48 +1357,11 @@ a.visibleLinkB:hover {
 	background-color : #ecf4ff;
 }
 
-table.headlinesList tr.feedTitle td a, div.cdmFeedTitle a {
+.hlContentH a, .hlContentH span {
-	color : #4684ff;
-}
-
-div.cdmFeedTitle {
-	border-color : #a0a0a0;
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	padding : 5px 3px 5px 5px;
-	background : url("images/toolbar.png") bottom left;
-	background-repeat : repeat-x;
-}
-
-table.headlinesList tr, table.headlinesList td {
-	border-collapse : collapse;
-	margin : 0px;
-}
-
-table.headlinesList tr.feedTitle td {
-/*	text-align : right;
-	margin-top : 10px; */
-	/*padding-left : 5px;*/
-
-	background : url("images/toolbar.png") bottom left;
-	background-repeat : repeat-x;
-
-	border-color : #c0c0c0;
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	padding : 5px 3px 5px 5px;
-
-}
-
-td.hlContent, td.hlContentL, td.hlContentH {
-	cursor : pointer;
-}
-
-td.hlContentH a, td.hlContentH span {
 	color : #00cc00;
 }
 
-td.hlContentL a, td.hlContentL span {
+.hlContentL a, .hlContentL span {
 	color : #909090;
 	text-decoration : line-through;
 }
@@ -1773,48 +1700,53 @@ div#auxDlg a {
 	color : #4684ff;
 }
 
-/*
+div.hlTitle {
-button:active {
+	display : table-cell;
-	background-image : url("images/button_pressed.png");
+	cursor : pointer;
+	width : 100%;
+	vertical-align : middle;
+	padding-top : 4px;
+	padding-bottom : 4px;
 }
 
-button, select {
+div.hlLeft {
-	background-color : transparent;
+	display : table-cell;
-	background-repeat : repeat-x;
+	vertical-align : middle;
-	background-position : top left;
+	white-space: nowrap;
-	background-image : url("images/button.png");
-	border : 1px solid #bebebe;
-	font-family : "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
-	font-size : 100%;
-	text-decoration : none;
-	color : #303030;
-	cursor : pointer;
-	padding : 1px 5px 1px 5px;
-	margin : 0px;
 }
 
-select {
+div.hlRight {
-	background : #ffffff;
+	display : table-cell;
-	padding : 1px 0px 1px 3px;
+	white-space: nowrap;
+	text-align : right;
+	vertical-align : middle;
 }
 
-input {
+span.hlUpdated {
-	background : white;
+	color : gray;
-	border : 1px solid #bebebe;
+	font-weight : medium;
-	font-size : 100%;
+	width : 100px;
-	padding : 1px 3px 1px 3px;
+	display : inline-block;
 }
 
-button:hover {
+div.hlLeft input {
-	background-color : #f9faff;
+	margin-left : 4px;
-	border : 1px solid #88b0f0;
+	margin-right : 4px;
-	color : #336699;
 }
 
-button[disabled] {
+div.hlLeft img, div.hlRight img {
-	background : #f0f0f0;
+	margin : 0px 4px 0px 4px;
-	color : #dedede;
+
-	border : 1px solid #dedede;
+}
-} */
 
+div.hlUpdPic {
+	display : table-cell;
+	padding-right : 4px;
+	padding-left : 4px;
+	text-align : center;
+	vertical-align : middle;
+}
 
+div.hlUpdPic img {
+	max-width : 16px;
+}

viewfeed.js

@@ -147,11 +147,7 @@ function headlines_callback2(transport, feed_cur_page) {
 					if (headlines_count > 0) {
 						console.log("adding some more headlines...");
 	
-						var c = $("headlinesList");
+						c = $("headlinesInnerContainer");
-		
-						if (!c) {
-							c = $("headlinesInnerContainer");
-						}
 
 						var ids = getSelectedArticleIds2();
 	
@@ -199,7 +195,7 @@ function headlines_callback2(transport, feed_cur_page) {
 	
 
 		if (_cdm_wd_timeout) window.clearTimeout(_cdm_wd_timeout);
-	
+
 		if (isCdmMode() && 
 				getActiveFeedId() != -3 &&
 				getInitParam("cdm_auto_catchup") == 1) {
@@ -248,8 +244,8 @@ function showArticleInHeadlines(id) {
 
 	try {
 
-		cleanSelected("headlinesList");
+		selectArticles("none");
-	
+
 		var crow = $("RROW-" + id);
 
 		if (!crow) return;
@@ -547,12 +543,8 @@ function toggleMark(id, client_only, no_effects) {
 			mark_img.alt = __("Please wait...");
 			query = query + "&mark=0";
 	
-			if (!isCdmMode() && !no_effects) {
+			mark_img.src = mark_img.src.replace("mark_set", "mark_unset");
-				Effect.Puff(mark_img, {duration : 0.25, afterFinish: tMark_afh_off});
+			mark_img.alt = __("Star article");
-			} else { 
-				mark_img.src = mark_img.src.replace("mark_set", "mark_unset");
-				mark_img.alt = __("Star article");
-			}
 
 			if (db) {
 				db.execute("UPDATE articles SET marked = 0 WHERE id = ?", [id]);
@@ -614,12 +606,9 @@ function togglePub(id, client_only, no_effects, note) {
 			mark_img.alt = __("Please wait...");
 			query = query + "&pub=0";
 	
-			if (!isCdmMode() && !no_effects) {
+			mark_img.src = mark_img.src.replace("pub_set", "pub_unset");
-				Effect.Puff(mark_img, {duration : 0.25, afterFinish: tPub_afh_off});
+			mark_img.alt = __("Publish article");
-			} else { 
+
-				mark_img.src = mark_img.src.replace("pub_set", "pub_unset");
-				mark_img.alt = __("Publish article");
-			}
 		}
 
 		if (!client_only) {
@@ -657,38 +646,6 @@ function togglePub(id, client_only, no_effects, note) {
 	}
 }
 
-function correctHeadlinesOffset(id) {
-	
-	try {
-
-		var hlist = $("headlinesList");
-		var container = $("headlinesInnerContainer");
-		var row = $("RROW-" + id);
-	
-		var viewport = container.offsetHeight;
-	
-		var rel_offset_top = row.offsetTop - container.scrollTop;
-		var rel_offset_bottom = row.offsetTop + row.offsetHeight - container.scrollTop;
-	
-		console.log("Rtop: " + rel_offset_top + " Rbtm: " + rel_offset_bottom);
-		console.log("Vport: " + viewport);
-
-		if (rel_offset_top <= 0 || rel_offset_top > viewport) {
-			container.scrollTop = row.offsetTop;
-		} else if (rel_offset_bottom > viewport) {
-
-			/* doesn't properly work with Opera in some cases because
-				Opera fucks up element scrolling */
-
-			container.scrollTop = row.offsetTop + row.offsetHeight - viewport;		
-		} 
-
-	} catch (e) {
-		exception_error("correctHeadlinesOffset", e);
-	}
-
-}
-
 function moveToPost(mode) {
 
 	try {
@@ -1109,10 +1066,7 @@ function getSelectedArticleIds2() {
 
 	var children;
 	
-	if (isCdmMode())
+	var children = $("headlinesInnerContainer").childNodes;
-		var children = $("headlinesInnerContainer").childNodes;
-	else
-		var children = $("headlinesList").rows;
 
 	for (i = 0; i < children.length; i++) {
 		var child = children[i];
@@ -1129,10 +1083,7 @@ function getSelectedArticleIds2() {
 function getLoadedArticleIds() {
 	var sel_articles = new Array();
 
-	if (isCdmMode())
+	var children = $("headlinesInnerContainer").childNodes;
-		var children = $("headlinesInnerContainer").childNodes;
-	else
-		var children = $("headlinesList").rows;
 
 	if (!children) return sel_articles;
 
@@ -1154,10 +1105,7 @@ function selectArticles(mode) {
 
 		var children;
 	
-		if (isCdmMode())
+		var children = $("headlinesInnerContainer").childNodes;
-			var children = $("headlinesInnerContainer").childNodes;
-		else
-			var children = $("headlinesList").rows;
 
 		for (i = 0; i < children.length; i++) {
 			var child = children[i];
@@ -1329,11 +1277,7 @@ function catchupSelection() {
 			return;
 		}
 	
-		if ($("headlinesList")) {
+		selectionToggleUnread(false, 'viewCurrentFeed()', true)
-			selectionToggleUnread(false, 'viewCurrentFeed()', true);
-		} else {
-			selectionToggleUnread(false, 'viewCurrentFeed()', true)
-		}
 
 	} catch (e) {
 		exception_error("catchupSelection", e);
@@ -2071,45 +2015,6 @@ function fixHeadlinesOrder(ids) {
 	}
 }
 
-function invertHeadlineSelection() {
-	try {
-		var rows = new Array();
-		var r = false;
-		
-		if (!isCdmMode()) {		
-			r = document.getElementsByTagName("TR");
-		} else {
-			r = document.getElementsByTagName("DIV");
-		}
-
-		for (var i = 0; i < r.length; i++) {
-			if (r[i].id && r[i].id.match("RROW-")) {
-				rows.push(r[i]);
-			}
-		}
-		
-		for (var i = 0; i < rows.length; i++) {
-			var nc = rows[i].className;
-			var id = rows[i].id.replace("RROW-", "");
-			var cb = $("RCHK-" + id);
-
-			if (!rows[i].className.match("Selected")) {
-				nc = nc + "Selected";
-				cb.checked = true;
-			} else {
-				nc = nc.replace("Selected", "");
-				cb.checked = false;
-			}
-
-			rows[i].className = nc;
-
-		}
-
-	} catch (e) {
-		exception_error("invertHeadlineSelection", e);
-	}
-}
-
 function getArticleUnderPointer() {
 	return post_under_pointer;
 }
@@ -2409,7 +2314,6 @@ function cdmClicked(event, id) {
 
 function hlClicked(event, id) {
 	try {
-		var shift_key = event.shiftKey;
 
 		if (!event.ctrlKey) {
 			view(id);
@@ -2437,41 +2341,6 @@ function getLastVisibleHeadlineId() {
 	return rows[rows.length-1];
 }
 
-// this only searches loaded headlines list, not in CDM
-function getRelativePostIds(id, limit) {
-
-	if (!limit) limit = 3;
-
-	//console.log("getRelativePostIds: " + id + " limit=" + limit);
-
-	var ids = new Array();
-	var container = $("headlinesList");
-
-	if (container) {
-		var rows = container.rows;
-
-		for (var i = 0; i < rows.length; i++) {
-			var r_id = rows[i].id.replace("RROW-", "");
-
-			if (r_id == id) {
-				for (var k = 1; k <= limit; k++) {
-					var nid = false;
-
-					if (i > k-1) var nid = rows[i-k].id.replace("RROW-", "");
-					if (nid) ids.push(nid);
-
-					if (i < rows.length-k) nid = rows[i+k].id.replace("RROW-", "");
-					if (nid) ids.push(nid);
-				}
-
-				return ids;
-			}
-		}
-	}
-
-	return false;
-}
-
 function openArticleInNewWindow(id) {
 	try {
 		console.log("openArticleInNewWindow: " + id);
@@ -2506,9 +2375,7 @@ function openArticleInNewWindow(id) {
 		
 						if (id) {
 							id = id.firstChild.nodeValue;
-							if (!$("headlinesList")) {
+							window.setTimeout("toggleUnread(" + id + ", 0)", 100);
-								window.setTimeout("toggleUnread(" + id + ", 0)", 100);
-							}
 						}
 					} else {
 						notify_error("Can't open article: received invalid article link");
@@ -2521,7 +2388,7 @@ function openArticleInNewWindow(id) {
 }
 
 function isCdmMode() {
-	return !$("headlinesList");
+	return getInitParam("combined_display_mode");
 }
 
 function markHeadline(id) {
@@ -2551,4 +2418,62 @@ function markHeadline(id) {
 	}
 }
 
+function getRelativePostIds(id, limit) {
+
+	var tmp = [];
+
+	try {
+
+		if (!limit) limit = 3;
+	
+		var ids = getVisibleArticleIds();
+	
+		for (var i = 0; i < ids.length; i++) {
+			if (ids[i] == id) {
+				for (var k = 1; k <= limit; k++) {
+					if (i > k-1) tmp.push(ids[i-k]);
+					if (i < ids.length-k) tmp.push(ids[i+k]);
+				}
+				break;
+			}
+		}
+
+	} catch (e) {
+		exception_error("getRelativePostIds", e);
+	}
+
+	return tmp;
+}
+
+function correctHeadlinesOffset(id) {
+	
+	try {
+
+		var container = $("headlinesInnerContainer");
+		var row = $("RROW-" + id);
+	
+		var viewport = container.offsetHeight;
+	
+		var rel_offset_top = row.offsetTop - container.scrollTop;
+		var rel_offset_bottom = row.offsetTop + row.offsetHeight - container.scrollTop;
+	
+		//console.log("Rtop: " + rel_offset_top + " Rbtm: " + rel_offset_bottom);
+		//console.log("Vport: " + viewport);
+
+		if (rel_offset_top <= 0 || rel_offset_top > viewport) {
+			container.scrollTop = row.offsetTop;
+		} else if (rel_offset_bottom > viewport) {
+
+			/* doesn't properly work with Opera in some cases because
+				Opera fucks up element scrolling */
+
+			container.scrollTop = row.offsetTop + row.offsetHeight - viewport;		
+		} 
+
+	} catch (e) {
+		exception_error("correctHeadlinesOffset", e);
+	}
+
+}
+