From: Anders Kaseorg <andersk@mit.edu>
Date: Sat, 31 Jan 2015 02:58:44 +0000 (-0500)
Subject: Make the floating title transition smoother
X-Git-Tag: 16.3~371^2
X-Git-Url: https://git.wh0rd.org/?p=tt-rss.git;a=commitdiff_plain;h=5c145bde7a14ed6fe0bdde773925e92c381c620a

Make the floating title transition smoother

Previously the floating title would not appear until the real title
scrolled entirely out of view, which was visually distracting.  Now it
appears at the point when its bottom lines up with the real title’s
bottom.  This isn’t perfect yet due to small differences between the
two titles’ layouts, but it’s much closer.

We now need to use visibility: visible|hidden instead of display:
block|none to show and hide the floating title, in order to be able to
retrieve its height while it’s hidden.  It’s important to use that
height because occasionally line wrapping differences make the
floating title shorter than the real title, and we don’t want the real
title to poke out from underneath.

Also fix scrollToRowId to offset by the 4 pixel top margin (like
cdmScrollToArticleId already does), so that it goes back to a point
when the floating title was hidden; and set the right margin on the
floating title so that it’s the same width as the real title and
doesn’t overlap the scroll bar.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
---

diff --git a/index.php b/index.php
index 4f2a9a86..058e7d8e 100644
--- a/index.php
+++ b/index.php
@@ -265,7 +265,7 @@
 
 	<div id="headlines-wrap-inner" dojoType="dijit.layout.BorderContainer" region="center">
 
-		<div id="floatingTitle" style="display : none"></div>
+		<div id="floatingTitle" style="visibility : hidden"></div>
 
 		<div id="headlines-frame" dojoType="dijit.layout.ContentPane"
 				onscroll="headlines_scroll_handler(this)" region="center">
diff --git a/js/viewfeed.js b/js/viewfeed.js
index c319a8ed..f236e1f7 100644
--- a/js/viewfeed.js
+++ b/js/viewfeed.js
@@ -56,7 +56,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
 				if (infscroll_req == false) {
 					$("headlines-frame").scrollTop = 0;
 
-					Element.hide("floatingTitle");
+					$("floatingTitle").style.visibility = "hidden";
 					$("floatingTitle").setAttribute("rowid", 0);
 					$("floatingTitle").innerHTML = "";
 				}
@@ -1532,7 +1532,7 @@ function cdmCollapseArticle(event, id, unmark) {
 			if (row.offsetTop < $("headlines-frame").scrollTop)
 				scrollToRowId(row.id);
 
-			Element.hide("floatingTitle");
+			$("floatingTitle").style.visibility = "hidden";
 			$("floatingTitle").setAttribute("rowid", false);
 		}
 
@@ -2357,7 +2357,7 @@ function scrollToRowId(id) {
 		var row = $(id);
 
 		if (row)
-			$("headlines-frame").scrollTop = row.offsetTop;
+			$("headlines-frame").scrollTop = row.offsetTop - 4;
 
 	} catch (e) {
 		exception_error("scrollToRowId", e);
@@ -2402,11 +2402,12 @@ function updateFloatingTitle(unread_only) {
 					PluginHost.run(PluginHost.HOOK_FLOATING_TITLE, child);
 				}
 
-				if (child.offsetTop < hf.scrollTop - header.offsetHeight &&
-						child.offsetTop + child.offsetHeight - hf.scrollTop > header.offsetHeight)
-					Element.show("floatingTitle");
+				$("floatingTitle").style.marginRight = hf.offsetWidth - child.offsetWidth + "px";
+				if (header.offsetTop + header.offsetHeight < hf.scrollTop + $("floatingTitle").offsetHeight - 5 &&
+				    child.offsetTop + child.offsetHeight >= hf.scrollTop + $("floatingTitle").offsetHeight - 5)
+					$("floatingTitle").style.visibility = "visible";
 				else
-					Element.hide("floatingTitle");
+					$("floatingTitle").style.visibility = "hidden";
 
 				return;