add experimental floating title when scrolling long articles in combined mode
This commit is contained in:
parent
a1495542fc
commit
08820be70b
5 changed files with 101 additions and 3 deletions
|
@ -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"]) {
|
||||
|
|
32
css/cdm.css
32
css/cdm.css
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -1109,3 +1109,4 @@ body#ttrssPrefs hr {
|
|||
.dijitTreeRowSelected .dijitTreeLabel {
|
||||
text-shadow : 1px 1px 2px #fff;
|
||||
}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue