inputify buttons, store view modes in session cookies, disable headline toolbar initially

19 years ago · ac43eba1ab
parent 5f89f7803b
commit ac43eba1ab
5 changed files with 130 additions and 47 deletions
--- a/backend.php
+++ b/backend.php
@ -214,7 +214,7 @@

 			print "<table class=\"postTable\" width=\"100%\" cellspacing=\"0\" 
 				cellpadding=\"0\">";
-/*				
+				
 			print "<tr class=\"titleTop\"><td align=\"right\"><b>Title:</b></td>
 				<td width=\"100%\">".$line["title"]."</td>
 				<td>&nbsp;</td></tr>";
@ -225,19 +225,15 @@
 			
 			print "<tr class=\"titleBottom\"><td align=\"right\"><b>Link:</b></td>
 				<td><a href=\"".$line["link"]."\">".$line["link"]."</a> $comments_prompt</td>
-				<td>&nbsp;</td></tr>"; */
+				<td>&nbsp;</td></tr>"; 
 			print "<tr><td valign=\"top\" class=\"post\" 
-				colspan=\"2\">" . $line["content"] . "</td>
+				colspan=\"2\" width=\"100%\">" . $line["content"] . "</td>
 				<td valign=\"top\">$feed_icon</td>
 			</tr>";
 			print "</table>";	 

 		}

-/*		print "<script type=\"text/javascript\">
-			p_notify(''); -- FLICKER
-		</script>"; */
-
 		if ($addheader) {
 			print "</body></html>";
 		}
@ -258,7 +254,7 @@

 		if ($addheader) {
 			print "<html><head>
-				<title>Tiny Tiny RSS : Article $id</title>
+				<title>Tiny Tiny RSS : Feed $feed</title>
 				<link rel=\"stylesheet\" href=\"tt-rss.css\" type=\"text/css\">
 				<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
 				<script type=\"text/javascript\" src=\"functions.js\"></script>
@ -310,6 +306,10 @@
 			$view_query_part = " marked = true AND ";
 		}

+		if ($view_mode == "Unread") {
+			$view_query_part = " unread = true AND ";
+		}
+
 		$result = pg_query("SELECT count(id) AS total_entries 
 			FROM ttrss_entries WHERE 
 			$search_query_part
@ -317,12 +317,23 @@

 		$total_entries = pg_fetch_result($result, 0, "total_entries");

+		$result = pg_query("SELECT count(id) AS unread_entries 
+			FROM ttrss_entries WHERE 
+			$search_query_part
+			unread = true AND
+			feed_id = '$feed'");
+
+		$unread_entries = pg_fetch_result($result, 0, "unread_entries");
+
+/*		if ($limit < $unread_entries) 
+			$limit = $unread_entries;
+
 		if ($limit != "All") {
 			$limit_query_part = "LIMIT " . $limit;
-		}
+		} */

 		$result = pg_query("SELECT 
-				id,title,updated,unread,feed_id,marked,
+				id,title,updated,unread,feed_id,marked,link,
 				EXTRACT(EPOCH FROM last_read) AS last_read_ts,
 				EXTRACT(EPOCH FROM updated) AS updated_ts
 			FROM
@ -364,7 +375,7 @@
 					alt=\"Set mark\" onclick='javascript:toggleMark($id, true)'>";
 			}

-			$content_link = "<a href=\"javascript:view($id,$feed_id);\">" .
+			$content_link = "<a id=\"FTITLE-$id\" href=\"javascript:view($id,$feed_id);\">" .
 				$line["title"] . "</a>";
 				
 			print "<tr class='$class' id='RROW-$id'";
@ -380,6 +391,8 @@
 				<a href=\"javascript:view($id,$feed_id);\">".$line["updated"]."</a></td>";
 			print "<td class='headlineTitle'>$content_link</td>";

+			print "<td class=\"invisible\" id=\"FLINK-$id\">".$line["link"]."</td>";
+
 			print "</tr>";

 			++$lnum;
--- a/functions.js
+++ b/functions.js
@ -196,4 +196,51 @@ function getFeedIds() {
 	return rows;
 }

+function setCookie(name, value, expires, path, domain, secure) {
+	document.cookie= name + "=" + escape(value) +
+		((expires) ? "; expires=" + expires.toGMTString() : "") +
+		((path) ? "; path=" + path : "") +
+		((domain) ? "; domain=" + domain : "") +
+		((secure) ? "; secure" : "");
+}
+
+function getCookie(name) {
+
+	var dc = document.cookie;
+	var prefix = name + "=";
+	var begin = dc.indexOf("; " + prefix);
+	if (begin == -1) {
+	    begin = dc.indexOf(prefix);
+	    if (begin != 0) return null;
+	}
+	else {
+	    begin += 2;
+	}
+	var end = document.cookie.indexOf(";", begin);
+	if (end == -1) {
+	    end = dc.length;
+	}
+	return unescape(dc.substring(begin + prefix.length, end));
+}
+
+function disableContainerChildren(id, disable) {
+	var container = document.getElementById(id);
+
+	for (var i = 0; i < container.childNodes.length; i++) {
+		var child = container.childNodes[i];
+
+		child.disabled = disable;
+
+		if (disable) {
+			if (child.className && child.className.match("button")) {
+				child.className = "disabledButton";
+			}
+		} else {
+			if (child.className && child.className.match("disabledButton")) {
+				child.className = "button";
+			}
+		}
+	}
+
+}

--- a/tt-rss.css
+++ b/tt-rss.css
@ -281,16 +281,16 @@ table.prefFeedList tr.title td, table.prefFilterList tr.title td,
 	background-color : #e0e0ff;
 }

-a.disabledButton {
+.disabledButton {
 	font-family : tahoma, sans-serif;
 	border : 1px solid #d0d0d0;
-	background-color : white;
+	background : white;
 	color : #909090;	
-	padding : 2px 10px 2px 10px;
+	padding : 1px 10px 1px 10px;
 	font-size : small;
 }

-a.disabledButton:hover {
+.disabledButton:hover {
 	background : white;
 	text-decoration : none;
 	color : #909090;
@ -304,16 +304,20 @@ a.disabledButton:hover {
 	background-repeat : repeat-x;
 	background-color : white;
 	color : black;	
-	padding : 2px 10px 2px 10px;
-	font-size : small;
+	padding : 1px 10px 1px 10px;
 }

-.button:hover {
+/* .button:hover {
 	background : white;
 	text-decoration : none;
 	color : black;
+} */
+
+a.button {
+	padding : 2px 10px 2px 10px;
 }

+
 .buttonWarn {
 	font-family : tahoma, sans-serif;
 	border : 1px solid #d0d0d0;
@ -344,7 +348,7 @@ div.errorBox {
 	background : #f0f0f0;
 }

-tr.titleTop, tr.titleBottom {
+tr.titleTop, tr.titleBottom, tr.titleTopBottom {
 	background : #f0f0f0;
 }

@ -363,7 +367,13 @@ tr.titleBottom td {
 	border-width : 0px 0px 1px 0px;
 	border-color : #d0d0d0;
 	border-style : solid;
+}

+tr.titleTopBottom td {
+	padding : 3px 10px 5px 10px;
+	border-width : 1px 0px 1px 0px;
+	border-color : #d0d0d0;
+	border-style : solid;
 }

 td.post {
--- a/tt-rss.js
+++ b/tt-rss.js
@ -202,7 +202,7 @@ function catchupAllFeeds() {
 }

 function viewCurrentFeed(skip, subop) {
-	if (active_feed_id) {
+	if (active_feed_id ) {
 		viewfeed(active_feed_id, skip, subop);
 	}
 }
@ -231,12 +231,15 @@ function viewfeed(feed, skip, subop) {
 		view_mode = "All Posts";
 	}

+	setCookie("ttrss_vf_vmode", view_mode);
+
 	var limitbox = document.getElementById("limitbox");

 	var limit;

 	if (limitbox) {
 		limit = limitbox.value;
+		setCookie("ttrss_vf_limit", limit);
 	} else {
 		limit = "All";
 	}
@ -257,6 +260,8 @@ function viewfeed(feed, skip, subop) {
 	active_feed_id = feed;
 	active_offset = skip;

+	setCookie("ttrss_vf_actfeed", feed);
+
 	if (subop == "MarkAllRead") {

 		var feedr = document.getElementById("FEEDR-" + feed);
@ -286,12 +291,9 @@ function viewfeed(feed, skip, subop) {

 	cleanSelected("feedsList");
 	feedr.className = feedr.className + "Selected";
-
-	var ftitle_d = document.getElementById("headlinesTitle");
-	var ftitle_s = document.getElementById("FEEDN-" + feed);
-
-	ftitle_d.innerHTML = ftitle_s.innerHTML;
 	
+	disableContainerChildren("headlinesToolbar", false);
+
 //	notify("");

 }
@ -303,7 +305,9 @@ function timeout() {

 function resetSearch() {
 	document.getElementById("searchbox").value = "";
-	viewfeed(active_feed_id, 0, "");
+	if (active_feed_id) {
+		viewfeed(active_feed_id, 0, "");
+	}
 }

 function search() {
@ -392,6 +396,8 @@ function localHotkeyHandler(keycode) {

 function init() {

+	disableContainerChildren("headlinesToolbar", true);
+
 	// IE kludge

 	if (xmlhttp && !xmlhttp_rpc) {
@ -411,4 +417,16 @@ function init() {
 	setTimeout("timeout()", 1800*1000);

 	var content = document.getElementById("content");
+
+//	active_feed_id = getCookie("ttrss_vf_actfeed");
+
+	var limitbox = document.getElementById("limitbox");
+
+	if (getCookie("ttrss_vf_vmode")) {
+		var viewbox = document.getElementById("viewbox");
+		viewbox.value = getCookie("ttrss_vf_vmode");
+	}
+		
 }
+
+
--- a/tt-rss.php
+++ b/tt-rss.php
@ -38,45 +38,48 @@
 	
 		<p align="center">All feeds:
 		
-		<a class="button" 
-				href="javascript:scheduleFeedUpdate(true)">Update</a>
-
-		<a class="button" 
-				href="javascript:catchupAllFeeds()">Mark as read</a></p>
+		<input class="button" type="submit"	
+			onclick="javascript:scheduleFeedUpdate(true)" value="Update">
+				
+		<input class="button" type="submit"	
+			onclick="javascript:catchupAllFeeds()" value="Mark as read"> 

 	</td>
 	<td valign="top" class="headlinesToolbarBox">
 		<table width="100%">
+		
 		<!-- <tr><td id="headlinesTitle" class="headlinesTitle">
 			&nbsp;
 		</td></tr> -->
-		<tr><td class="headlinesToolbar">
+		<tr><td class="headlinesToolbar" id="headlinesToolbar">
 			Search: <input id="searchbox"
 			onblur="javascript:enableHotkeys()" onfocus="javascript:disableHotkeys()"
 			onchange="javascript:search()">
-		<a class="button" href="javascript:resetSearch()">Reset</a>
+		<input type="submit" 
+			class="button" onclick="javascript:resetSearch()" value="Reset">

 		&nbsp;View: 
 		
 		<select id="viewbox" onchange="javascript:viewCurrentFeed(0, '')">
 			<option>All Posts</option>
 			<option>Starred</option>
+			<option selected>Unread</option>
 		</select>

 		&nbsp;Limit:

 		<select id="limitbox" onchange="javascript:viewCurrentFeed(0, '')">
 			<option>15</option>
-			<option>30</option>
+			<option selected>30</option>
 			<option>60</option>
 			<option>All</option>
 		</select>

-		&nbsp;Feed: <a class="button" 
-			href="javascript:viewCurrentFeed(0, 'ForceUpdate')">Update</a>
+		&nbsp;Feed: <input class="button" type="submit"
+			onclick="javascript:viewCurrentFeed(0, 'ForceUpdate')" value="Update">

-		<a class="button" 
-			href="javascript:viewCurrentFeed(0, 'MarkAllRead')">Mark as read</a>
+		<input class="button" type="submit"
+			onclick="javascript:viewCurrentFeed(0, 'MarkAllRead')" value="Mark as read">

 		</td></tr>
 		</table>
@ -88,15 +91,7 @@
 	</td>
 </tr><tr>
 	<td class="content" id="content" valign="top">
-		<table width="100%" height="100%" cellspacing="0" cellpadding="0">
-		<tr>
-		<tr class="titleTop"><td align="right"><b>Title:</b></td>
-			<td width="100%">-FIXME-</td></tr>
-		<tr class="titleBottom"><td align="right"><b>Link:</b></td>
-			<td>-FIXME-</td></tr>
-		<tr><td height="100%" colspan="2">
-			<iframe name="content-frame" id="content-frame" class="contentFrame"> </iframe>
-		</td></tr></table>
+		<iframe name="content-frame" id="content-frame" class="contentFrame"> </iframe>
 	</td>
 </tr>
 <tr>