From 5c145bde7a14ed6fe0bdde773925e92c381c620a Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <andersk@mit.edu>
Date: Fri, 30 Jan 2015 21:58:44 -0500
Subject: [PATCH] Make the floating title transition smoother
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 index.php      |  2 +-
 js/viewfeed.js | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/index.php b/index.php
index 4f2a9a860..058e7d8e3 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 c319a8ed0..f236e1f7c 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;