body#ttrssDigest {
- background : #f0f0f0;
+ background : #fafafa;
color : black;
font-family : sans-serif;
font-size : 12px;
+ margin : 0px;
}
a {
}
#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 {
}
+#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 {
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 {
}
#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 {
}
#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 {
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;
div.insensitive {
color : gray;
}
+
+
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;
}
}
+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");
}
}
-function zoom(elem, article_id) {
- try {
- //alert(elem + "/" + article_id);
-
- elem.innerHTML = "<img src='images/indicator_tiny.gif'> " +
- __("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");
}
}
-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 += "<a href=\"#\" onclick=\"viewfeed('" +
+ // article.tags[i] + "')\">" +
+ // article.tags[i] + "</a>, ";
+
+ tags_part += article.tags[i] + ", ";
+ }
+
+ tags_part = tags_part.replace(/, $/, "");
+ tags_part = "<span class=\"tags\">" + tags_part + "</span>";
+
+ }
+
+ if (article.marked)
+ mark_part = "<img title='"+ __("Unstar article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_set.png'>";
+ else
+ mark_part = "<img title='"+__("Star article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_unset.png'>";
+
+ if (article.published)
+ publ_part = "<img title='"+__("Unpublish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_set.png'>";
+ else
+ publ_part = "<img title='"+__("Publish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_unset.png'>";
+
+ var tmp = "<div id=\"toolbar\">" +
+ "<a target=\"_blank\" href=\""+article.url+"\">" + __("Original article") + "</a>" +
+ "<div style=\"float : right\"><a href=\"#\" onclick=\"close_article()\">" +
+ __("Close this panel") + "</a></div></div>" +
+ "<div id=\"inner\">" +
+ "<div id=\"ops\">" +
+ mark_part +
+ publ_part +
+ "</div>" +
+ "<h1>" + article.title + "</h1>" +
+ "<div id=\"tags\">" +
+ tags_part +
+ "</div>" +
+ article.content + "</div>";
+
+ $("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;
icon_part = "<img src='" + get_feed_icon(feed) + "'/>";
- var tmp_html = "<li id=\"F-"+feed.id+"\" " +
- "onmouseover=\"feed_mi(this)\" onmouseout=\"feed_mo(this)\">" +
- icon_part +
- "<a href=\"#\" onclick=\"viewfeed("+feed.id+")\">" + feed.title + "</a>" +
- "<div class='unread-ctr'>" +
- "<img onclick=\"catchup_feed("+feed.id+")\" title=\"" +
- __("Mark as read") +
- "\" class=\"dismiss\" style='display : none' src=\"images/digest_checkbox.png\">" +
- "<span class=\"unread\">" + feed.unread + "</span>" +
- "</div>" +
- "</li>";
+ var tmp_html = "<li id=\"F-"+feed.id+"\" onclick=\"viewfeed("+feed.id+")\">" +
+ icon_part + feed.title +
+ "<div class='unread-ctr'>" + "<span class=\"unread\">" + feed.unread + "</span>" +
+ "</div>" + "</li>";
$("feeds-content").innerHTML += tmp_html;
+
} catch (e) {
exception_error("add_feed_entry", e);
}
icon_part = "<img class='icon' src='" + get_feed_icon(feed) + "'/>";
- 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 += "<a href=\"#\" onclick=\"viewfeed('" +
- article.tags[i] + "')\">" +
- article.tags[i] + "</a>, ";
- }
-
- tags_part = tags_part.replace(/, $/, "");
- tags_part = "<span class=\"tags\">" + tags_part + "</span>";
- }
-
- if (article.marked)
- mark_part = "<img title='"+ __("Unstar article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_set.png'>";
- else
- mark_part = "<img title='"+__("Star article")+"' onclick=\"toggle_mark(this, "+article.id+")\" src='images/mark_unset.png'>";
-
- if (article.published)
- publ_part = "<img title='"+__("Unpublish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_set.png'>";
- else
- publ_part = "<img title='"+__("Publish article")+"' onclick=\"toggle_pub(this, "+article.id+")\" src='images/pub_unset.png'>";
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.");
if (d.getTime() / 1000 - article.updated < fresh_max)
li_class = "fresh";
+ //"<img title='" + __("Share on Twitter") + "' onclick=\"tweet_article("+article.id+", true)\" src='images/art-tweet.png'>" +
+
+ //"<img title='" + __("Mark as read") + "' onclick=\"view("+article.id+", true)\" src='images/digest_checkbox.png'>" +
+
+ var checkbox_part = "<input type=\"checkbox\" class=\"cb\" onclick=\"toggle_select_article(this)\"/>";
+
+ var date = new Date(article.updated * 1000);
+
+ var date_part = date.toString().substring(0,21);
+
var tmp_html = "<li id=\"A-"+article.id+"\" "+style+" class=\""+li_class+"\">" +
+ checkbox_part +
icon_part +
-
- "<div class='digest-check'>" +
- mark_part +
- publ_part +
- "<img title='" + __("Share on Twitter") + "' onclick=\"tweet_article("+article.id+", true)\" src='images/art-tweet.png'>" +
- "<img title='" + __("Mark as read") + "' onclick=\"view("+article.id+", true)\" src='images/digest_checkbox.png'>" +
- "</div>" +
"<a target=\"_blank\" href=\""+article.link+"\""+
"onclick=\"return view("+article.id+")\" class='title'>" +
article.title + "</a>" +
"<div class='body'>" +
- "<div title=\""+__("Click to expand article")+"\" onclick=\"zoom(this, "+article.id+")\" class='excerpt'>" +
+ "<div onclick=\"view("+article.id+")\" class='excerpt'>" +
article.excerpt + "</div>" +
- "<div class='info'><a href=\#\" onclick=\"viewfeed("+feed.id+")\">" +
- feed.title + "</a> " + tags_part + " @ " +
- new Date(article.updated * 1000) + "</div>" +
+ "<div class='info'>";
+
+/* tmp_html += "<a href=\#\" onclick=\"viewfeed("+feed.id+")\">" +
+ feed.title + "</a> " + " @ "; */
+
+ tmp_html += date_part + "</div>" +
"</div></li>";
$("headlines-content").innerHTML += tmp_html;
__("No unread feeds.") + "</div>";
}
+ if (_active_feed_id)
+ set_selected_feed(_active_feed_id);
+
} catch (e) {
exception_error("redraw_feedlist", e);
}
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');
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 += "<li id='H-MORE-PROMPT'>" +
"<div class='body'>" +
// 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');
}
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);
} });
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";
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);
+ }
+}
projects / tt-rss.git / commitdiff