add experimental floating title when scrolling long articles in combined mode

diff --git a/classes/feeds.php b/classes/feeds.php
index 12af76df0973aa563df811d38663a81b65ca1de2..83736925c8a7a58b75c45c0182567341e36e1b15 100644 (file)
--- a/classes/feeds.php
+++ b/classes/feeds.php
@@ -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"]) {

diff --git a/css/cdm.css b/css/cdm.css
index 900c83791c3dde37a62abe83276f02e251bc1905..8b9693c33cc44fe2d0ff855978db7c3c58ef6e0e 100644 (file)
--- a/css/cdm.css
+++ b/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;
+}

diff --git a/css/tt-rss.css b/css/tt-rss.css
index 10fec5a55e7094c61be865eeb7b0b83b943c0875..b1928bb489ab9b12c510fd7a7f83dde48234f2b3 100644 (file)
--- a/css/tt-rss.css
+++ b/css/tt-rss.css
@@ -1109,3 +1109,4 @@ body#ttrssPrefs hr {
 .dijitTreeRowSelected .dijitTreeLabel {
        text-shadow : 1px 1px 2px #fff;
 }
+

diff --git a/index.php b/index.php
index 8dae2831ffa037ad1d4f5d1dfeb8fc81003ecd10..db79629087315f1ba19a7c2f822c6090a1a23ed1 100644 (file)
--- a/index.php
+++ b/index.php
@@ -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">

diff --git a/js/viewfeed.js b/js/viewfeed.js
index b708accfd6d75ba5fd4642a74ba647ebfee4f2fe..eee6bf766980f4e651c6c2dd661edff8aa4495d0 100644 (file)
--- a/js/viewfeed.js
+++ b/js/viewfeed.js
@@ -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);
+       }
+}