add experimental floating title when scrolling long articles in combined mode

This commit is contained in:
Andrew Dolgov 2013-06-05 22:19:33 +04:00
parent a1495542fc
commit 08820be70b
5 changed files with 101 additions and 3 deletions

View File

@ -593,7 +593,7 @@ class Feeds extends Handler_Protected {
$reply['content'] .= "<span class='updated' title='$date_entered_fmt'>
$updated_fmt</span>";
$reply['content'] .= "<div style=\"vertical-align : middle\">";
$reply['content'] .= "<div class='scoreWrap' style=\"vertical-align : middle\">";
$reply['content'] .= "$score_pic";
if (!get_pref("VFEED_GROUP_BY_FEED") && $line["feed_title"]) {

View File

@ -215,3 +215,35 @@ div.cdmHeader span.author {
}
div#floatingTitle {
position : absolute;
z-index : 5;
top : 30px;
right : 20px;
border : 1px solid #ccc;
background : white;
border-radius : 3px;
box-shadow : 0px 0px 3px 0px rgba(0,0,0,0.1);
color : #555;
font-size : 10px;
padding : 3px;
}
div#floatingTitle > * {
display : table-cell;
white-space : nowrap;
vertical-align : middle;
}
div#floatingTitle img {
padding-right : 3px;
}
div#floatingTitle .dijit,
div#floatingTitle span.updated,
div#floatingTitle div.scoreWrap,
div#floatingTitle div.hlFeed,
div#floatingTitle span.author,
div#floatingTitle img.tinyFeedIcon {
display : none;
}

View File

@ -1109,3 +1109,4 @@ body#ttrssPrefs hr {
.dijitTreeRowSelected .dijitTreeLabel {
text-shadow : 1px 1px 2px #fff;
}

View File

@ -260,6 +260,8 @@
<div id="headlines-toolbar" dojoType="dijit.layout.ContentPane" region="top">
</div>
<div id="floatingTitle" style="display : none"></div>
<div id="headlines-frame" dojoType="dijit.layout.ContentPane"
onscroll="headlines_scroll_handler(this)" region="center">
<div id="headlinesInnerContainer">

View File

@ -444,7 +444,21 @@ function toggleMark(id, client_only) {
var row = $("RROW-" + id);
if (!row) return;
var imgs = row.getElementsByClassName("markedPic");
var imgs = [];
var row_imgs = row.getElementsByClassName("markedPic");
for (var i = 0; i < row_imgs.length; i++)
imgs.push(row_imgs[i]);
var ft = $("floatingTitle");
if (ft && ft.getAttribute("rowid") == "RROW-" + id) {
var fte = ft.getElementsByClassName("markedPic");
for (var i = 0; i < fte.length; i++)
imgs.push(fte[i]);
}
for (i = 0; i < imgs.length; i++) {
var img = imgs[i];
@ -488,7 +502,21 @@ function togglePub(id, client_only, no_effects, note) {
var row = $("RROW-" + id);
if (!row) return;
var imgs = row.getElementsByClassName("pubPic");
var imgs = [];
var row_imgs = row.getElementsByClassName("pubPic");
for (var i = 0; i < row_imgs.length; i++)
imgs.push(row_imgs[i]);
var ft = $("floatingTitle");
if (ft && ft.getAttribute("rowid") == "RROW-" + id) {
var fte = ft.getElementsByClassName("pubPic");
for (var i = 0; i < fte.length; i++)
imgs.push(fte[i]);
}
for (i = 0; i < imgs.length; i++) {
var img = imgs[i];
@ -1280,6 +1308,10 @@ function headlines_scroll_handler(e) {
if (hsp) hsp.innerHTML = "";
}
if (getInitParam("cdm_expanded") && isCdmMode()) {
updateFloatingTitle();
}
if (getInitParam("cdm_auto_catchup") == 1) {
// let's get DOM some time to settle down
@ -2157,3 +2189,34 @@ function openSelectedAttachment(elem) {
exception_error("openSelectedAttachment", e);
}
}
function updateFloatingTitle() {
try {
var hf = $("headlines-frame");
var elems = $$("#headlines-frame > div[id*=RROW]");
for (var i = 0; i < elems.length; i++) {
var child = elems[i];
if (child.offsetTop + child.offsetHeight > hf.scrollTop) {
var header = child.getElementsByClassName("cdmHeader")[0];
$("floatingTitle").setAttribute("rowid", child.id);
$("floatingTitle").innerHTML =
header.innerHTML;
if (child.offsetTop < hf.scrollTop - header.offsetHeight - 100 &&
child.offsetTop + child.offsetHeight - hf.scrollTop > 100)
Element.show("floatingTitle");
else
Element.hide("floatingTitle");
break;
}
}
} catch (e) {
exception_error("updateFloatingTitle", e);
}
}