From bb674f94936e8930d9ac6fa1bcc38c064e67529e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Thu, 1 Sep 2011 16:46:50 +0400 Subject: [PATCH] rework digest mode --- digest.css | 248 ++++++++++++++++++------------ digest.js | 327 ++++++++++++++++++++-------------------- digest.php | 45 +----- modules/backend-rpc.php | 16 +- viewfeed.js | 2 +- 5 files changed, 335 insertions(+), 303 deletions(-) diff --git a/digest.css b/digest.css index c3f10da24..7669152ff 100644 --- a/digest.css +++ b/digest.css @@ -1,8 +1,9 @@ body#ttrssDigest { - background : #f0f0f0; + background : #fafafa; color : black; font-family : sans-serif; font-size : 12px; + margin : 0px; } a { @@ -23,12 +24,21 @@ a:hover { } #header { - font-weight : bold; - font-size : 14px; + font-size : 13px; font-family : "Segoe UI", Tahoma, sans-serif; - margin-left : 1em; - margin-right : 1em; + padding : 5px 5px 5px 1.5em; color : gray; + position : absolute; + top : 0px; + height : 30px; + left : 0px; + right : 0px; + color : #a0a0a0; +} + +#header span.title { + font-weight : bold; + font-style : italic; } #header div.links { @@ -42,44 +52,111 @@ a:hover { } +#title { +} + +#latest { + padding : 5px; +} + #content { - border : 1px solid #e0e0e0; + position : absolute; + left : 0px; + top : 30px; + right : 0px; + bottom : 0px; + -webkit-transition: left 0.2s linear, right 0.2s linear; + -moz-transition: left 0.2s linear, right 0.2s linear; + transition: left 0.2s linear, right 0.2s linear; +} + +#article { + position : absolute; + right : 0px; + width : 60%; + bottom : 0px; + top : 30px; background : white; - padding : 0.8em; - margin : 0.5em; + border-width : 0px 0px 0px 2px; + border-color : #e0e0e0; + border-style : solid; + z-index : -1; + opacity : 0; + -webkit-transition: opacity 0.2s linear; + -moz-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; } -#footer { - font-size : 12px; - text-align : center; - color : gray; +#article.visible { + opacity : 1; } -#content h1 { - margin : 0px 0px 20px 0px; +#article #article-content h1 { + margin : 0px 0px 10px 0px; + padding : 0px 0px 5px 0px; font-family : "Segoe UI", Tahoma, sans-serif; - font-size : 18px; - letter-spacing : 1px; - color : #684C99; + font-size : 21px; + font-weight : bold; + border-width : 0px 0px 3px 0px; + border-style : solid; + border-color : #e0e0e0; + color : gray; } -#title { +#article #article-content #toolbar { + border-width : 0px 0px 1px 0px; + border-color : #e0e0e0; + border-style : solid; + background : #fafafa; + font-size : 14px; + font-weight : bold; + padding : 5px 10px 5px 10px; + margin : 0px 0px 0px 0px; } -#latest { - padding : 5px; +#article #article-content { + padding : 0px; + font-height : 16px; } -#feeds { +#article #article-content #tags { + color : #a0a0a0; +} + +#article #article-content #ops { float : right; - width : 30%; - min-width : 300px; - padding : 5px; - font-size : 14px; } -#feeds h1 { - text-align : right; +#article #article-content #ops img { + cursor : pointer; + margin-right : 0px; + margin-left : 10px; +} + +#article #article-content #inner { + padding : 20px; +} + +#article #article-content img { + max-width : 90%; +} + +#content.move { + left : -300px; + right : 60% +} + +#feeds { + position : absolute; + left : 0px; + width : 300px; + top : 0px; + bottom : 0px; + font-size : 14px; + overflow : auto; + border-width : 0px 4px 0px 0px; + border-color : #e0e0e0; + border-style : solid; } #feeds ul#feeds-content img { @@ -89,85 +166,62 @@ a:hover { margin-right : 5px; } -#feeds ul#feeds-content div.unread-ctr img.dismiss { - margin-right : 0px; - cursor : pointer; -} - #feeds ul#feeds-content div.unread-ctr { - color : gray; - float : right; + color : #d0d0d0; + padding-left : 10px; + display : inline; } #feeds ul#feeds-content li { - margin : 0px 0px 2px 0px; - padding : 2px; + padding : 10px; clear : both; + cursor : pointer; + border-width : 1px 0px 1px 0px; + border-color : transparent; + border-style : solid; + color : gray; + white-space : nowrap; } #feeds ul#feeds-content li.selected { - background : #f0f0f0; -} - -#feeds ul#feeds-content li.selected a { - color : #404040; -} - -#feeds ul#feeds-content li.selected a:hover { - color : #659a4c; + background : white; + border-color : #e0e0e0; + border-style : solid; } #feeds ul#feeds-content { list-style-type : none; font-weight : bold; - color : #659a4c; - margin : 0px; + margin : 10px 10px 10px 10px; padding : 0px; } -#feeds ul#feeds-content li a { - color : #659a4c; -} - -#feeds ul#feeds-content li a:hover { - color : gray; -} - #headlines { - padding : 5px; font-size : 14px; - max-width : 65%; + position : absolute; + left : 302px; + top : 0px; + bottom : 0px; + right : 0px; + overflow : auto; } #headlines h1 a { color : #684C99; } -#headlines h1 a:hover { - color : gray; -} - -#headlines h1 #headlines-title { - color : gray; -} - -#headlines ul#headlines-content div.digest-check { - float : right; -} - -#headlines ul#headlines-content div.digest-check img { - cursor : pointer; - margin-right : 0px; - margin-left : 5px; +#headlines ul#headlines-content .cb { + vertical-align : middle; + margin-right : 5px; + float : left; } - #headlines ul#headlines-content img.icon { width : 16px; height : 16px; vertical-align : middle; margin-right : 5px; - float : left; + float : right; } #headlines ul#headlines-content { @@ -178,16 +232,22 @@ a:hover { } #headlines ul#headlines-content li { - margin : 0px 0px 10px 0px; - color : #909090; + margin : 0px 0px 0px 2px; + padding : 10px; + color : gray; clear : left; + background : #eeeeee; + border-width : 0px 0px 1px 0px; + border-style : solid; + border-color : #e0e0e0; } #headlines ul#headlines-content a.title { - font-size : 18px; + font-size : 14px; font-weight : bold; display : block; - padding-left : 21px; + margin-left : 21px; + position : relative; } #headlines ul#headlines-content li.fresh a.title { @@ -195,14 +255,22 @@ a:hover { } #headlines ul#headlines-content li.unread a.title { + color : black; + /* color : #8DB1D6; */ } #headlines ul#headlines-content li.read a.title { - color : #8DB1D6; + color : gray; } -#headlines ul#headlines-content li.read a.title:hover { - color : gray; +#headlines ul#headlines-content li.unread, +#headlines ul#headlines-content li.fresh { + background-color : white; +} + +#headlines ul#headlines-content li.selected { + background-color : #fff7d5; + border-color : white white #e0e0e0; } #headlines ul#headlines-content img#H-LOADING-IMG { @@ -236,20 +304,6 @@ a:hover { color : gray; } -#headlines ul#headlines-content span.tags { - font-size : 11px; - margin-bottom : 2px; -} - -#headlines ul#headlines-content span.tags a { - color : #684C99; -} - -#headlines ul#headlines-content div.info a:hover, -#headlines ul#headlines-content span.tags a:hover { - color : #659a4c; -} - #overlay { background : white; left : 0; @@ -281,3 +335,5 @@ div.fatalError textarea { div.insensitive { color : gray; } + + diff --git a/digest.js b/digest.js index a85b7bda1..ee76c735b 100644 --- a/digest.js +++ b/digest.js @@ -2,7 +2,6 @@ var last_feeds = []; var init_params = {}; var _active_feed_id = false; -var _active_feed_offset = false; var _update_timeout = false; var _view_update_timeout = false; var _feedlist_expanded = false; @@ -103,6 +102,29 @@ function catchup_article(article_id, callback) { } } +function set_selected_article(article_id) { + try { + $$("#headlines-content > li[id*=A-]").each(function(article) { + var id = article.id.replace("A-", ""); + + var cb = article.getElementsByTagName("INPUT")[0]; + + if (id == article_id) { + article.addClassName("selected"); + cb.checked = true; + } else { + article.removeClassName("selected"); + cb.checked = false; + } + + }); + + } catch (e) { + exception_error("mark_selected_feed", e); + } +} + + function set_selected_feed(feed_id) { try { var feeds = $("feeds-content").getElementsByTagName("LI"); @@ -121,58 +143,15 @@ function set_selected_feed(feed_id) { } } -function zoom(elem, article_id) { - try { - //alert(elem + "/" + article_id); - - elem.innerHTML = " " + - __("Loading, please wait..."); - - new Ajax.Request("backend.php", { - parameters: "?op=rpc&subop=digest-get-contents&article_id=" + - article_id, - onComplete: function(transport) { - fatal_error_check(transport); - - var reply = JSON.parse(transport.responseText); - - if (reply) { - var article = reply['article']; - - elem.innerHTML = article.content; - - new Effect.BlindDown(elem, {duration : 0.5}); - - elem.onclick = false; - elem.style.cursor = "auto"; - - catchup_article(article_id, - function() { - window.clearTimeout(_view_update_timeout); - _view_update_timeout = window.setTimeout("view_update()", 500); - $("A-" + article_id).className = "read"; - }); - - - } else { - elem.innerHTML = __("Error: unable to load article."); - } - - } }); - - - } catch (e) { - exception_error("zoom", e); - } -} - function load_more() { try { var pr = $("H-LOADING-IMG"); if (pr) Element.show(pr); - viewfeed(_active_feed_id, _active_feed_offset + 10, false, false, true, + var offset = $$("#headlines-content > li[id*=A-][class*=fresh],li[id*=A-][class*=unread]").length; + + viewfeed(false, offset, false, false, true, function() { var pr = $("H-LOADING-IMG"); @@ -227,37 +206,115 @@ function view_update() { } } -function view(article_id, dismiss_only) { +function view(article_id) { try { - remove_headline_entry(article_id); + $("content").addClassName("move"); - catchup_article(article_id, - function() { - window.clearTimeout(_view_update_timeout); - _view_update_timeout = window.setTimeout("view_update()", 500); - }); + var a = $("A-" + article_id); + var h = $("headlines"); + + setTimeout(function() { + // below or above viewport, reposition headline + if (a.offsetTop > h.scrollTop + h.offsetHeight || a.offsetTop+a.offsetHeight < h.scrollTop+a.offsetHeight) + h.scrollTop = a.offsetTop - (h.offsetHeight/2 - a.offsetHeight/2); + }, 500); + + new Ajax.Request("backend.php", { + parameters: "?op=rpc&subop=digest-get-contents&article_id=" + + article_id, + onComplete: function(transport) { + fatal_error_check(transport); + + var reply = JSON.parse(transport.responseText); + + if (reply) { + var article = reply['article']; + + var mark_part = ""; + var publ_part = ""; + + var tags_part = ""; + + if (article.tags.length > 0) { + tags_part = " " + __("in") + " "; - return dismiss_only != true; + for (var i = 0; i < Math.min(5, article.tags.length); i++) { + //tags_part += "" + + // article.tags[i] + ", "; + + tags_part += article.tags[i] + ", "; + } + + tags_part = tags_part.replace(/, $/, ""); + tags_part = "" + tags_part + ""; + + } + + if (article.marked) + mark_part = ""; + else + mark_part = ""; + + if (article.published) + publ_part = ""; + else + publ_part = ""; + + var tmp = "
" + + "" + __("Original article") + "" + + "
" + + __("Close this panel") + "
" + + "
" + + "
" + + mark_part + + publ_part + + "
" + + "

" + article.title + "

" + + "
" + + tags_part + + "
" + + article.content + "
"; + + $("article-content").innerHTML = tmp; + $("article").addClassName("visible"); + + set_selected_article(article.id); + + catchup_article(article_id, + function() { + $("A-" + article_id).addClassName("read"); + }); + + } else { + elem.innerHTML = __("Error: unable to load article."); + } + } + }); + + + return false; } catch (e) { exception_error("view", e); } } +function close_article() { + $("content").removeClassName("move"); + $("article").removeClassName("visible"); +} + function viewfeed(feed_id, offset, replace, no_effects, no_indicator, callback) { try { if (!feed_id) feed_id = _active_feed_id; - - if (!offset) { - offset = 0; - } else { - offset = _active_feed_offset + offset; - } - + if (offset == undefined) offset = 0; if (replace == undefined) replace = (offset == 0); _update_seq = _update_seq + 1; + if (!offset) $("headlines").scrollTop = 0; + var query = "backend.php?op=rpc&subop=digest-update&feed_id=" + param_escape(feed_id) + "&offset=" + offset + "&seq=" + _update_seq; @@ -356,20 +413,14 @@ function add_feed_entry(feed) { icon_part = ""; - var tmp_html = "
  • " + - icon_part + - "" + feed.title + "" + - "
    " + - "" + - "" + feed.unread + "" + - "
    " + - "
    • "; + var tmp_html = "
  • " + + icon_part + feed.title + + "
    " + "" + feed.unread + "" + + "
    " + "
    • "; $("feeds-content").innerHTML += tmp_html; + } catch (e) { exception_error("add_feed_entry", e); } @@ -382,38 +433,10 @@ function add_headline_entry(article, feed, no_effects) { icon_part = ""; - var mark_part = ""; - var publ_part = ""; - - var tags_part = ""; - - if (article.tags.length > 0) { - - tags_part = " " + __("in") + " "; - - for (var i = 0; i < Math.min(5, article.tags.length); i++) { - tags_part += "" + - article.tags[i] + ", "; - } - - tags_part = tags_part.replace(/, $/, ""); - tags_part = "" + tags_part + ""; - } - - if (article.marked) - mark_part = ""; - else - mark_part = ""; - - if (article.published) - publ_part = ""; - else - publ_part = ""; var style = ""; - if (!no_effects) style = "style=\"display : none\""; + //if (!no_effects) style = "style=\"display : none\""; if (article.excerpt.trim() == "") article.excerpt = __("Click to expand article."); @@ -426,24 +449,31 @@ function add_headline_entry(article, feed, no_effects) { if (d.getTime() / 1000 - article.updated < fresh_max) li_class = "fresh"; + //"" + + + //"" + + + var checkbox_part = ""; + + var date = new Date(article.updated * 1000); + + var date_part = date.toString().substring(0,21); + var tmp_html = "
  • " + + checkbox_part + icon_part + - - "
    " + - mark_part + - publ_part + - "" + - "" + - "
    " + "" + article.title + "" + "
    " + - "
    " + + "
    " + article.excerpt + "
    " + - "
    " + - feed.title + " " + tags_part + " @ " + - new Date(article.updated * 1000) + "
    " + + "
    "; + +/* tmp_html += "" + + feed.title + " " + " @ "; */ + + tmp_html += date_part + "
    " + "
    • "; $("headlines-content").innerHTML += tmp_html; @@ -494,6 +524,9 @@ function redraw_feedlist(feeds) { __("No unread feeds.") + ""; } + if (_active_feed_id) + set_selected_feed(_active_feed_id); + } catch (e) { exception_error("redraw_feedlist", e); } @@ -556,11 +589,9 @@ function parse_headlines(transport, replace, no_effects) { var headlines_title = reply['headlines']['title']; if (headlines && headlines_title) { - $("headlines-title").innerHTML = headlines_title if (replace) { $('headlines-content').innerHTML = ''; - Element.hide('headlines-content'); } var pr = $('H-MORE-PROMPT'); @@ -575,16 +606,17 @@ function parse_headlines(transport, replace, no_effects) { add_headline_entry(headlines[i], find_feed(last_feeds, headlines[i].feed_id), !no_effects); - inserted = $("A-" + headlines[i].id); } } + console.log(inserted.id); + var ids = get_visible_article_ids(); if (ids.length > 0) { if (pr) { $('headlines-content').appendChild(pr); - if (!no_effects && inserted) new Effect.ScrollTo(inserted); + } else { $('headlines-content').innerHTML += "
  • " + "
    " + @@ -600,8 +632,8 @@ function parse_headlines(transport, replace, no_effects) { // FIXME : display some kind of "nothing to see here" prompt here } - if (replace && !no_effects) - new Effect.Appear('headlines-content', {duration : 0.3}); +// if (replace && !no_effects) +// new Effect.Appear('headlines-content', {duration : 0.3}); //new Effect.Appear('headlines-content'); } @@ -617,6 +649,8 @@ function init_second_stage() { parameters: "backend.php?op=rpc&subop=digest-init", onComplete: function(transport) { parse_feeds(transport); + Element.hide("overlay"); + window.setTimeout('viewfeed(-4)', 100); _update_timeout = window.setTimeout('update()', 5*1000); } }); @@ -747,47 +781,6 @@ function fatal_error_check(transport) { return true; } -function feed_mi(elem) { - try { - var imgs = elem.getElementsByTagName('IMG'); - var spans = elem.getElementsByTagName('SPAN'); - - for (var i = 0; i < imgs.length; i++) { - if (imgs[i].className == "dismiss") - Element.show(imgs[i]); - } - - for (var i = 0; i < spans.length; i++) { - if (spans[i].className == "unread") - Element.hide(spans[i]); - } - - - } catch (e) { - exception_error("feed_mi", e); - } -} - -function feed_mo(elem) { - try { - var imgs = elem.getElementsByTagName('IMG'); - var spans = elem.getElementsByTagName('SPAN'); - - for (var i = 0; i < imgs.length; i++) { - if (imgs[i].className == "dismiss") - Element.hide(imgs[i]); - } - - for (var i = 0; i < spans.length; i++) { - if (spans[i].className == "unread") - Element.show(spans[i]); - } - - } catch (e) { - exception_error("feed_mo", e); - } -} - function update_title(unread) { try { document.title = "Tiny Tiny RSS"; @@ -830,3 +823,17 @@ function tweet_article(id) { exception_error("tweet_article", e); } } + +function toggle_select_article(elem) { + try { + var article = elem.parentNode; + + if (article.hasClassName("selected")) + article.removeClassName("selected"); + else + article.addClassName("selected"); + + } catch (e) { + exception_error("toggle_select_article", e); + } +} diff --git a/digest.php b/digest.php index 63da77620..a2c350afe 100644 --- a/digest.php +++ b/digest.php @@ -65,68 +65,29 @@ -
    - +
    -

    -
    -

    : -

    -
    - -
    -
    - - diff --git a/modules/backend-rpc.php b/modules/backend-rpc.php index 6c0abf715..6eea33df9 100644 --- a/modules/backend-rpc.php +++ b/modules/backend-rpc.php @@ -604,14 +604,22 @@ if ($subop == "digest-get-contents") { $article_id = db_escape_string($_REQUEST['article_id']); - $result = db_query($link, "SELECT content + $result = db_query($link, "SELECT content,title,link,marked,published FROM ttrss_entries, ttrss_user_entries WHERE id = '$article_id' AND ref_id = id AND owner_uid = ".$_SESSION['uid']); $content = sanitize_rss($link, db_fetch_result($result, 0, "content")); + $title = strip_tags(db_fetch_result($result, 0, "title")); + $article_url = htmlspecialchars(db_fetch_result($result, 0, "link")); + $marked = sql_bool_to_bool(db_fetch_result($result, 0, "marked")); + $published = sql_bool_to_bool(db_fetch_result($result, 0, "published")); + print json_encode(array("article" => - array("id" => $id, "content" => $content))); + array("id" => $article_id, "url" => $article_url, + "tags" => get_article_tags($link, $article_id), + "marked" => $marked, "published" => $published, + "title" => $title, "content" => $content))); return; } @@ -627,7 +635,7 @@ $reply['seq'] = $seq; - $headlines = api_get_headlines($link, $feed_id, 10, $offset, + $headlines = api_get_headlines($link, $feed_id, 30, $offset, '', ($feed_id == -4), true, false, "unread", "updated DESC"); //function api_get_headlines($link, $feed_id, $limit, $offset, @@ -642,7 +650,7 @@ } if ($subop == "digest-init") { - $tmp_feeds = api_get_feeds($link, -3, true, false, 0); + $tmp_feeds = api_get_feeds($link, -4, true, false, 0); $feeds = array(); diff --git a/viewfeed.js b/viewfeed.js index 1718c810a..b70b64bfc 100644 --- a/viewfeed.js +++ b/viewfeed.js @@ -995,7 +995,7 @@ function editArticleTags(id) { var data = JSON.parse(transport.responseText); if (data) { - var tags_str = data.tags_str; + var tags_str = article.tags; var id = tags_str.id; var tags = $("ATSTR-" + id);