mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-08-31 21:41:33 +00:00
Backboneifying story titles and stories in the Feed view. Feed view needs completion, then both need to get fully hooked up.
This commit is contained in:
Samuel Clay
parent
d10b1d48c8
commit
0019410c8e
12 changed files with 365 additions and 178 deletions
|
|
@ -978,15 +978,13 @@ background: transparent;
|
|||
background: #dadada url('/media/css/jquery-ui/images/dadada_40x100_textures_03_highlight_soft_75.png') 0 50% repeat-x;
|
||||
border-bottom: 2px solid #404040;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.NB-story-pane-west #story_titles .NB-feedbar {
|
||||
padding-right: 4px;
|
||||
}
|
||||
#story_titles .NB-feedbar .feed {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .feed_favicon {
|
||||
#story_titles .NB-feedbar.feed .feed_favicon {
|
||||
margin: 2px 4px 0 2px;
|
||||
vertical-align: top;
|
||||
float: left;
|
||||
|
|
@ -994,7 +992,7 @@ background: transparent;
|
|||
height: 16px;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .feed_title {
|
||||
#story_titles .NB-feedbar.feed .feed_title {
|
||||
/* float: left;*/
|
||||
display: block;
|
||||
margin-left: 24px;
|
||||
|
|
@ -1067,17 +1065,17 @@ background: transparent;
|
|||
margin-left: 26px;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar.NB-feedbar-hover .NB-feedbar-manage-feed,
|
||||
#story_titles .NB-feedbar.NB-feedbar-hover .NB-feedbar-statistics {
|
||||
#story_titles .NB-feedbar:hover .NB-feedbar-manage-feed,
|
||||
#story_titles .NB-feedbar:hover .NB-feedbar-statistics {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/*.NB-view-river #story_titles .NB-feedbar .NB-feedbar-mark-feed-read,*/
|
||||
#story_titles .NB-feedbar.NB-feedbar-hover .NB-feedbar-mark-feed-read {
|
||||
#story_titles .NB-feedbar:hover .NB-feedbar-mark-feed-read {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar.NB-feedbar-hover .NB-feedbar-last-updated {
|
||||
#story_titles .NB-feedbar:hover .NB-feedbar-last-updated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -1085,7 +1083,7 @@ background: transparent;
|
|||
background-color: #00609f;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .NB-feedlist-manage-icon {
|
||||
#story_titles .NB-feedbar.feed .NB-feedlist-manage-icon {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -1097,27 +1095,27 @@ background: transparent;
|
|||
background: transparent url('/media/embed/icons/silk/bullet_arrow_right.png') no-repeat 3px 4px;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed:hover .NB-feedlist-manage-icon {
|
||||
#story_titles .NB-feedbar.feed:hover .NB-feedlist-manage-icon {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed:hover .feed_favicon {
|
||||
#story_titles .NB-feedbar.feed:hover .feed_favicon {
|
||||
display: none;
|
||||
}
|
||||
#story_titles .NB-feedbar .folder_title .NB-feedlist-manage-icon {
|
||||
#story_titles .NB-feedbar.folder_title .NB-feedlist-manage-icon {
|
||||
background-position: 3px 5px;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .NB-feedlist-manage-icon:hover {
|
||||
#story_titles .NB-feedbar.feed .NB-feedlist-manage-icon:hover {
|
||||
background: transparent url('/media/embed/icons/silk/bullet_arrow_down.png') no-repeat 3px 4px;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed.NB-hover-inverse .NB-feedlist-manage-icon:hover {
|
||||
#story_titles .NB-feedbar.feed.NB-hover-inverse .NB-feedlist-manage-icon:hover {
|
||||
background: transparent url('/media/embed/icons/silk/bullet_arrow_up.png') no-repeat 3px 4px;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .feed_counts {
|
||||
#story_titles .NB-feedbar.feed .feed_counts {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
|
|
@ -1125,11 +1123,11 @@ background: transparent;
|
|||
display: none;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .feed_counts .feed_counts_floater {
|
||||
#story_titles .NB-feedbar.feed .feed_counts .feed_counts_floater {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed .feed_counts .unread_count {
|
||||
#story_titles .NB-feedbar.feed .feed_counts .unread_count {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -1148,10 +1146,6 @@ background: transparent;
|
|||
float: right;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .feed_id {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .NB-feed-sentiment {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
|
|
@ -1161,21 +1155,10 @@ background: transparent;
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar.NB-feedbar-hover .NB-feed-sentiment {
|
||||
#story_titles .NB-feedbar:hover .NB-feed-sentiment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#story_titles .NB-feedbar .NB-feed-like {
|
||||
right: 24px;
|
||||
background: transparent url('/media/embed/reader/thumbs_up.png') no-repeat 0 0;
|
||||
}
|
||||
|
||||
#story_titles .NB-feedbar .NB-feed-dislike {
|
||||
right: 4px;
|
||||
background: transparent url('/media/embed/reader/thumbs_down.png') no-repeat 0 -4px;
|
||||
}
|
||||
|
||||
#story_titles .feed .unread_count.unread_count_full {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1400,6 +1383,7 @@ background: transparent;
|
|||
color: #9D9A95;
|
||||
text-shadow: 0 1px 0 #F3F3F3;
|
||||
background-color: #E9E9E9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#story_titles .story .NB-story-feed {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@ NEWSBLUR.AssetModel = Backbone.Router.extend({
|
|||
this.social_feeds = new NEWSBLUR.Collections.SocialSubscriptions();
|
||||
this.folders = new NEWSBLUR.Collections.Folders([]);
|
||||
this.favicons = {};
|
||||
this.stories = {};
|
||||
this.story_keys = {};
|
||||
this.stories = new NEWSBLUR.Collections.Stories();
|
||||
this.queued_read_stories = {};
|
||||
this.classifiers = {};
|
||||
this.friends = {};
|
||||
|
|
@ -365,7 +364,6 @@ NEWSBLUR.AssetModel = Backbone.Router.extend({
|
|||
this.feeds.add(data.feeds);
|
||||
}
|
||||
if (data && first_load) {
|
||||
this.stories = data.stories;
|
||||
this.feed_tags = data.feed_tags || {};
|
||||
this.feed_authors = data.feed_authors || {};
|
||||
this.active_feed = this.get_feed(feed_id);
|
||||
|
|
@ -380,24 +378,16 @@ NEWSBLUR.AssetModel = Backbone.Router.extend({
|
|||
}
|
||||
}
|
||||
this.feed_id = feed_id;
|
||||
console.log(["classifiers", data.classifiers, feed_id, this.classifiers]);
|
||||
if (_.string.include(feed_id, ':')) {
|
||||
_.extend(this.classifiers, data.classifiers);
|
||||
} else {
|
||||
this.classifiers[feed_id] = _.extend({}, this.defaults['classifiers'], data.classifiers);
|
||||
}
|
||||
this.starred_stories = data.starred_stories;
|
||||
this.story_keys = {};
|
||||
for (var s in data.stories) {
|
||||
this.story_keys[data.stories[s].id] = true;
|
||||
}
|
||||
this.stories.reset(data.stories);
|
||||
} else if (data) {
|
||||
data.stories = _.select(data.stories, function(story) {
|
||||
if (!self.story_keys[story.id]) {
|
||||
self.stories.push(story);
|
||||
self.story_keys[story.id] = true;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
this.stories.add(data.stories);
|
||||
}
|
||||
if (data.user_profiles) {
|
||||
var profiles = _.reject(data.user_profiles, _.bind(function(profile) {
|
||||
|
|
@ -668,14 +658,9 @@ NEWSBLUR.AssetModel = Backbone.Router.extend({
|
|||
return this.feed_authors;
|
||||
},
|
||||
|
||||
get_story: function(story_id, callback) {
|
||||
get_story: function(story_id) {
|
||||
var self = this;
|
||||
for (s in this.stories) {
|
||||
if (this.stories[s].id == story_id) {
|
||||
return this.stories[s];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
return this.stories.get(story_id);
|
||||
},
|
||||
|
||||
get_user: function(user_id) {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,23 @@ NEWSBLUR.Models.Feed = Backbone.Model.extend({
|
|||
|
||||
is_feed: function() {
|
||||
return true;
|
||||
},
|
||||
|
||||
is_light: function() {
|
||||
var is_light = this.is_light;
|
||||
if (!_.isUndefined(is_light)) {
|
||||
return is_light;
|
||||
}
|
||||
var color = this.get('favicon_color');
|
||||
if (!color) return false;
|
||||
|
||||
var r = parseInt(color.substr(0, 2), 16) / 255.0;
|
||||
var g = parseInt(color.substr(2, 2), 16) / 255.0;
|
||||
var b = parseInt(color.substr(4, 2), 16) / 255.0;
|
||||
|
||||
is_light = $.textColor({r: r, g: g, b: b}) != 'white';
|
||||
this.is_light = is_light;
|
||||
return is_light;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,25 @@
|
|||
NEWSBLUR.Models.Story = Backbone.Model.extend({
|
||||
|
||||
score: function() {
|
||||
if (NEWSBLUR.reader.active_feed == 'starred') {
|
||||
return 1;
|
||||
} else {
|
||||
return NEWSBLUR.utils.compute_story_score(this);
|
||||
}
|
||||
},
|
||||
|
||||
score_name: function(score) {
|
||||
score = !_.isUndefined(score) ? score : this.score();
|
||||
var score_name = 'neutral';
|
||||
if (score > 0) score_name = 'positive';
|
||||
if (score < 0) score_name = 'negative';
|
||||
return score_name;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
NEWSBLUR.Collections.Stories = Backbone.Collection.extend({
|
||||
|
||||
model: NEWSBLUR.Models.Story
|
||||
|
||||
});
|
||||
|
|
@ -106,11 +106,11 @@
|
|||
this.add_body_classes();
|
||||
if (NEWSBLUR.Flags['start_import_from_google_reader']) {
|
||||
this.start_import_from_google_reader();
|
||||
} else {
|
||||
NEWSBLUR.app.feed_list_header = new NEWSBLUR.Views.FeedListHeader({collection: NEWSBLUR.assets.feeds});
|
||||
NEWSBLUR.app.feed_list = new NEWSBLUR.Views.FeedList();
|
||||
|
||||
}
|
||||
NEWSBLUR.app.feed_list_header = new NEWSBLUR.Views.FeedListHeader({collection: NEWSBLUR.assets.feeds});
|
||||
NEWSBLUR.app.feed_list = new NEWSBLUR.Views.FeedList();
|
||||
NEWSBLUR.app.story_titles = new NEWSBLUR.Views.StoryTitlesView({collection: NEWSBLUR.assets.stories});
|
||||
NEWSBLUR.app.story_list = new NEWSBLUR.Views.StoryListView({collection: NEWSBLUR.assets.stories});
|
||||
this.cornerize_buttons();
|
||||
this.setup_feed_page_iframe_load();
|
||||
this.load_intelligence_slider();
|
||||
|
|
@ -699,14 +699,6 @@
|
|||
return $story;
|
||||
},
|
||||
|
||||
compute_story_score: function(story) {
|
||||
if (this.active_feed == 'starred') {
|
||||
return 1;
|
||||
} else {
|
||||
return NEWSBLUR.utils.compute_story_score(story);
|
||||
}
|
||||
},
|
||||
|
||||
// ==============
|
||||
// = Navigation =
|
||||
// ==============
|
||||
|
|
@ -1435,9 +1427,6 @@
|
|||
'show_story_in_feed': 0
|
||||
});
|
||||
|
||||
this.$s.$story_titles.data('feed_id', null);
|
||||
this.$s.$feed_stories.empty();
|
||||
this.$s.$story_titles.empty();
|
||||
this.$s.$feed_stories.scrollTop(0);
|
||||
this.$s.$starred_header.removeClass('NB-selected');
|
||||
this.$s.$river_header.removeClass('NB-selected');
|
||||
|
|
@ -1479,7 +1468,6 @@
|
|||
this.flags['opening_feed'] = true;
|
||||
|
||||
if (options.try_feed || feed) {
|
||||
$story_titles.empty().scrollTop(0);
|
||||
this.reset_feed();
|
||||
this.hide_splash_page();
|
||||
if (options.story_id) {
|
||||
|
|
@ -1494,7 +1482,6 @@
|
|||
NEWSBLUR.app.story_unread_counter.remove();
|
||||
}
|
||||
// this.show_stories_progress_bar();
|
||||
$story_titles.data('feed_id', feed.id);
|
||||
this.iframe_scroll = null;
|
||||
this.set_correct_story_view_for_feed(feed.id);
|
||||
this.make_feed_title_in_stories(feed.id);
|
||||
|
|
@ -1551,12 +1538,12 @@
|
|||
this.flags['feed_view_positions_calculated'] = false;
|
||||
this.counts['feed_view_positions_timer'] = 0;
|
||||
this.story_titles_clear_loading_endbar();
|
||||
this.create_story_titles(stories);
|
||||
this.make_story_feed_entries(stories, first_load);
|
||||
// this.create_story_titles(stories);
|
||||
// this.make_story_feed_entries(stories, first_load);
|
||||
this.find_story_with_action_preference_on_open_feed();
|
||||
this.show_feed_hidden_story_title_indicator(true);
|
||||
this.show_story_titles_above_intelligence_level({'animate': false});
|
||||
this.scroll_story_titles_to_show_selected_story_title();
|
||||
// this.show_story_titles_above_intelligence_level({'animate': false});
|
||||
// this.scroll_story_titles_to_show_selected_story_title();
|
||||
this.fill_out_story_titles();
|
||||
if (this.counts['find_next_unread_on_page_of_feed_stories_load']) {
|
||||
this.show_next_unread_story(true);
|
||||
|
|
@ -1691,7 +1678,6 @@
|
|||
options = options || {};
|
||||
var $story_titles = this.$s.$story_titles;
|
||||
|
||||
$story_titles.empty().scrollTop('0px');
|
||||
this.reset_feed();
|
||||
this.hide_splash_page();
|
||||
this.active_feed = 'starred';
|
||||
|
|
@ -1699,7 +1685,6 @@
|
|||
this.flags['show_story_in_feed'] = options.story_id;
|
||||
}
|
||||
|
||||
$story_titles.data('feed_id', null);
|
||||
this.iframe_scroll = null;
|
||||
this.show_correct_feed_in_feed_title_floater();
|
||||
this.$s.$starred_header.addClass('NB-selected');
|
||||
|
|
@ -1749,7 +1734,6 @@
|
|||
$folder = $folder || this.$s.$feed_list;
|
||||
var folder_view = NEWSBLUR.assets.folders.get_view($folder);
|
||||
|
||||
$story_titles.empty().scrollTop('0px');
|
||||
this.reset_feed();
|
||||
this.hide_splash_page();
|
||||
if (!folder_title) {
|
||||
|
|
@ -1760,7 +1744,6 @@
|
|||
folder_view.model.set('selected', true);
|
||||
}
|
||||
|
||||
$story_titles.data('feed_id', null);
|
||||
this.iframe_scroll = null;
|
||||
this.flags['opening_feed'] = true;
|
||||
this.show_correct_feed_in_feed_title_floater();
|
||||
|
|
@ -1864,7 +1847,6 @@
|
|||
var $story_titles = this.$s.$story_titles;
|
||||
var $social_feed = this.find_social_feed_with_feed_id(feed_id);
|
||||
|
||||
$story_titles.empty().scrollTop('0px');
|
||||
this.reset_feed();
|
||||
this.hide_splash_page();
|
||||
|
||||
|
|
@ -1875,7 +1857,6 @@
|
|||
this.flags['show_story_in_feed'] = options.story_id;
|
||||
}
|
||||
|
||||
$story_titles.data('feed_id', feed.id);
|
||||
$story_titles.data('user_id', feed.get('user_id'));
|
||||
this.iframe_scroll = null;
|
||||
this.flags['opening_feed'] = true;
|
||||
|
|
@ -2932,56 +2913,6 @@
|
|||
},
|
||||
|
||||
make_story_title: function(story, options) {
|
||||
var unread_view = this.model.preference('unread_view');
|
||||
var read = story.read_status
|
||||
? ' read '
|
||||
: '';
|
||||
var score = this.compute_story_score(story);
|
||||
var score_color = 'neutral';
|
||||
var starred = story.starred ? ' NB-story-starred ' : '';
|
||||
var shared = story.shared ? ' NB-story-shared ' : '';
|
||||
if (options.river_stories) {
|
||||
var feed = this.model.get_feed(story.story_feed_id);
|
||||
}
|
||||
if (score > 0) score_color = 'positive';
|
||||
if (score < 0) score_color = 'negative';
|
||||
var $story_tags = $.make('span', { className: 'NB-storytitles-tags'});
|
||||
|
||||
for (var t in story.story_tags) {
|
||||
var tag = story.story_tags[t];
|
||||
var $tag = $.make('span', { className: 'NB-storytitles-tag'}, tag).corner('4px');
|
||||
$story_tags.append($tag);
|
||||
break;
|
||||
}
|
||||
var $story_title = $.make('div', { className: 'story ' + read + starred + shared + 'NB-story-' + score_color }, [
|
||||
$.make('div', { className: 'NB-storytitles-sentiment'}),
|
||||
$.make('a', { href: story.story_permalink, className: 'story_title' }, [
|
||||
(options['river_stories'] && feed &&
|
||||
$.make('div', { className: 'NB-story-feed' }, [
|
||||
$.make('img', { className: 'feed_favicon', src: $.favicon(feed) }),
|
||||
$.make('span', { className: 'feed_title' }, feed.get('feed_title'))
|
||||
])),
|
||||
$.make('div', { className: 'NB-storytitles-star'}),
|
||||
$.make('div', { className: 'NB-storytitles-share'}),
|
||||
$.make('span', { className: 'NB-storytitles-title' }, story.story_title),
|
||||
$.make('span', { className: 'NB-storytitles-author' }, story.story_authors),
|
||||
$story_tags
|
||||
]),
|
||||
$.make('span', { className: 'story_date' }, story.short_parsed_date),
|
||||
$.make('span', { className: 'story_id' }, story.id),
|
||||
$.make('div', { className: 'NB-story-manage-icon' })
|
||||
]).data('story_id', story.id).data('feed_id', story.story_feed_id);
|
||||
|
||||
if (unread_view > score) {
|
||||
$story_title.css({'display': 'none'});
|
||||
}
|
||||
|
||||
if (this.model.preference('show_tooltips')) {
|
||||
$('.NB-story-sentiment', $story_title).tipsy({
|
||||
delayIn: 375,
|
||||
gravity: 's'
|
||||
});
|
||||
}
|
||||
|
||||
return $story_title;
|
||||
},
|
||||
|
|
@ -3346,27 +3277,17 @@
|
|||
var feed = this.model.get_feed(feed_id);
|
||||
if (!feed) return;
|
||||
|
||||
var feed_title_view = new NEWSBLUR.Views.Feed({model: feed, type: 'story'});
|
||||
var feed_title_view = new NEWSBLUR.Views.Feed({model: feed, type: 'story', el: '.NB-feedbar'}).render();
|
||||
this.cache.feed_title_view = feed_title_view;
|
||||
|
||||
var $feedbar = $.make('div', { className: 'NB-feedbar' }, [
|
||||
feed_title_view.render().el
|
||||
]).hover(function() {
|
||||
$(this).addClass('NB-feedbar-hover');
|
||||
},function() {
|
||||
$(this).removeClass('NB-feedbar-hover');
|
||||
});
|
||||
|
||||
|
||||
if (this.model.preference('show_tooltips')) {
|
||||
$('.NB-feedbar-train-feed, .NB-feedbar-statistics', $feedbar).tipsy({
|
||||
$('.NB-feedbar-train-feed, .NB-feedbar-statistics', feed_title_view.$el).tipsy({
|
||||
gravity: 's',
|
||||
delayIn: 375
|
||||
});
|
||||
}
|
||||
|
||||
$('.NB-feedbar', $story_titles).remove();
|
||||
$story_titles.prepend($feedbar);
|
||||
$('.NB-feedbar-last-updated-date').text(feed.get('updated') ? feed.get('updated') + ' ago' : 'Loading...');
|
||||
$('.NB-feedbar-last-updated-date', feed_title_view.$el).text(feed.get('updated') ? feed.get('updated') + ' ago' : 'Loading...');
|
||||
},
|
||||
|
||||
show_feed_hidden_story_title_indicator: function(is_feed_load) {
|
||||
|
|
@ -3656,7 +3577,7 @@
|
|||
.css('borderBottom', NEWSBLUR.utils.generate_gradient(feed, 'border'))
|
||||
.css('borderTop', NEWSBLUR.utils.generate_gradient(feed, 'border'))
|
||||
.css('textShadow', '0 1px 0 ' + NEWSBLUR.utils.generate_gradient(feed, 'shadow'))
|
||||
.toggleClass('NB-inverse', NEWSBLUR.utils.is_feed_floater_gradient_light(feed)),
|
||||
.toggleClass('NB-inverse', feed.is_light()),
|
||||
$.make('div', { className: 'NB-feed-story-header-info' }, [
|
||||
(story.story_authors &&
|
||||
this.make_story_feed_author(story)),
|
||||
|
|
|
|||
|
|
@ -2,21 +2,22 @@ NEWSBLUR.utils = {
|
|||
|
||||
compute_story_score: function(story) {
|
||||
var score = 0;
|
||||
var score_max = Math.max(story.intelligence['title'],
|
||||
story.intelligence['author'],
|
||||
story.intelligence['tags']);
|
||||
var score_min = Math.min(story.intelligence['title'],
|
||||
story.intelligence['author'],
|
||||
story.intelligence['tags']);
|
||||
var intelligence = story.get('intelligence');
|
||||
var score_max = Math.max(intelligence['title'],
|
||||
intelligence['author'],
|
||||
intelligence['tags']);
|
||||
var score_min = Math.min(intelligence['title'],
|
||||
intelligence['author'],
|
||||
intelligence['tags']);
|
||||
if (score_max > 0) score = score_max;
|
||||
else if (score_min < 0) score = score_min;
|
||||
|
||||
if (score == 0) score = story.intelligence['feed'];
|
||||
if (score == 0) score = intelligence['feed'];
|
||||
|
||||
return score;
|
||||
},
|
||||
|
||||
generate_gradient: function(feed, type) {
|
||||
|
||||
generate_gradient: _.memoize(function(feed, type) {
|
||||
if (!feed) return '';
|
||||
var color = feed.get('favicon_color');
|
||||
if (!color) return '';
|
||||
|
|
@ -25,7 +26,7 @@ NEWSBLUR.utils = {
|
|||
var g = parseInt(color.substr(2, 2), 16);
|
||||
var b = parseInt(color.substr(4, 2), 16);
|
||||
|
||||
if (type == 'border' || (type == 'shadow' && !this.is_feed_floater_gradient_light(feed))) {
|
||||
if (type == 'border' || (type == 'shadow' && !feed.is_light())) {
|
||||
return [
|
||||
(type == 'border' ? '1px solid ' : '') + 'rgb(',
|
||||
[
|
||||
|
|
@ -84,27 +85,10 @@ NEWSBLUR.utils = {
|
|||
') 100%)'
|
||||
].join('');
|
||||
}
|
||||
},
|
||||
}, function(feed, type) {
|
||||
return "" + feed.id + '-' + type;
|
||||
}),
|
||||
|
||||
is_feed_floater_gradient_light: function(feed) {
|
||||
if (!feed) return false;
|
||||
var is_light = feed.is_light;
|
||||
if (!_.isUndefined(is_light)) {
|
||||
return is_light;
|
||||
}
|
||||
var color = feed.get('favicon_color');
|
||||
if (!color) return false;
|
||||
|
||||
var r = parseInt(color.substr(0, 2), 16) / 255.0;
|
||||
var g = parseInt(color.substr(2, 2), 16) / 255.0;
|
||||
var b = parseInt(color.substr(4, 2), 16) / 255.0;
|
||||
|
||||
is_light = $.textColor({r: r, g: g, b: b}) != 'white';
|
||||
feed.is_light = is_light;
|
||||
|
||||
return is_light;
|
||||
},
|
||||
|
||||
is_feed_social: function(feed_id) {
|
||||
return _.string.include(feed_id, 'social:');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ NEWSBLUR.Views.Feed = Backbone.View.extend({
|
|||
extra_classes += ' NB-feed-inactive';
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.type == 'story') {
|
||||
extra_classes += ' NB-feedbar';
|
||||
}
|
||||
return extra_classes;
|
||||
},
|
||||
|
||||
|
|
|
|||
26
media/js/newsblur/views/story_list_view.js
Normal file
26
media/js/newsblur/views/story_list_view.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
NEWSBLUR.Views.StoryListView = Backbone.View.extend({
|
||||
|
||||
el: '.NB-feed-stories',
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render');
|
||||
this.collection.bind('reset', this.render);
|
||||
this.collection.bind('add', this.add);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var $stories = this.collection.map(function(story) {
|
||||
return new NEWSBLUR.Views.StoryView({model: story}).render().el;
|
||||
});
|
||||
this.$el.html($stories);
|
||||
},
|
||||
|
||||
add: function() {
|
||||
console.log(["story list add", arguments]);
|
||||
var $stories = this.collection.map(function(story) {
|
||||
return new NEWSBLUR.Views.StoryView({model: story}).render().el;
|
||||
});
|
||||
this.$el.append($stories);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
NEWSBLUR.Views.StoryTitleView = Backbone.View.extend({
|
||||
|
||||
className: 'story NB-story-title',
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'toggle_read_status', 'toggle_classes');
|
||||
this.model.bind('change', this.toggle_classes);
|
||||
this.model.bind('change:read_status', this.toggle_read_status);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.html(this.render_to_string());
|
||||
this.toggle_classes();
|
||||
this.toggle_read_status();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
render_to_string: function() {
|
||||
var $story_title = _.template('\
|
||||
<div class="NB-storytitles-sentiment"></div>\
|
||||
<a href="<%= story.get("story_permalink") %>" class="story_title">\
|
||||
<% if (options.river_stories && feed) { %>\
|
||||
<div class="NB-story-feed">\
|
||||
<img class="feed_favicon" src="<%= $.favicon(feed) %>">\
|
||||
<span class="feed_title"><%= feed.get("feed_title") %></span>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<div class="NB-storytitles-star"></div>\
|
||||
<div class="NB-storytitles-share"></div>\
|
||||
<span class="NB-storytitles-title"><%= story.get("story_title") %></span>\
|
||||
<span class="NB-storytitles-author"><%= story.get("story_authors") %></span>\
|
||||
<% if (tag) { %>\
|
||||
<span class="NB-storytitles-tags">\
|
||||
<span class="NB-storytitles-tag"><%= tag %></span>\
|
||||
</span>\
|
||||
<% } %>\
|
||||
</a>\
|
||||
<span class="story_date"><%= story.get("short_parsed_date") %></span>\
|
||||
<div class="NB-story-manage-icon"></div>\
|
||||
', {
|
||||
story : this.model,
|
||||
feed : this.options.river_stories && NEWSBLUR.assets.get_feed(this.model.get('story_feed_id')),
|
||||
tag : _.first(this.model.get("story_tags")),
|
||||
options : this.options
|
||||
});
|
||||
|
||||
return $story_title;
|
||||
},
|
||||
|
||||
toggle_classes: function() {
|
||||
var story = this.model;
|
||||
var unread_view = NEWSBLUR.assets.preference('unread_view');
|
||||
var score = story.score();
|
||||
|
||||
this.$el.toggleClass('NB-story-starred', !!story.get('starred'));
|
||||
this.$el.toggleClass('NB-story-shared', !!story.get('shared'));
|
||||
this.$el.removeClass('NB-story-negative NB-story-neutral NB-story-postiive')
|
||||
.addClass('NB-story-'+story.score_name(score));
|
||||
|
||||
if (unread_view > score) {
|
||||
this.$el.css('display', 'none');
|
||||
}
|
||||
|
||||
if (NEWSBLUR.assets.preference('show_tooltips')) {
|
||||
this.$('.NB-story-sentiment').tipsy({
|
||||
delayIn: 375,
|
||||
gravity: 's'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
toggle_read_status: function() {
|
||||
this.$el.toggleClass('read', !!this.model.get('read_status'));
|
||||
}
|
||||
|
||||
});
|
||||
26
media/js/newsblur/views/story_titles_view.js
Normal file
26
media/js/newsblur/views/story_titles_view.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
NEWSBLUR.Views.StoryTitlesView = Backbone.View.extend({
|
||||
|
||||
el: '.NB-story-titles',
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render');
|
||||
this.collection.bind('reset', this.render);
|
||||
this.collection.bind('add', this.add);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var $stories = this.collection.map(function(story) {
|
||||
return new NEWSBLUR.Views.StoryTitleView({model: story}).render().el;
|
||||
});
|
||||
this.$el.html($stories);
|
||||
},
|
||||
|
||||
add: function() {
|
||||
console.log(["add titles", arguments]);
|
||||
var $stories = this.collection.map(function(story) {
|
||||
return new NEWSBLUR.Views.StoryTitleView({model: story}).render().el;
|
||||
});
|
||||
this.$el.append($stories);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
NEWSBLUR.Views.StoryView = Backbone.View.extend({
|
||||
|
||||
className: 'NB-feed-story',
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'toggle_read_status', 'toggle_classes');
|
||||
this.model.bind('change', this.toggle_classes);
|
||||
this.model.bind('change:read_status', this.toggle_read_status);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.feed = NEWSBLUR.assets.get_feed(this.model.get('story_feed_id'));
|
||||
this.classifiers = NEWSBLUR.assets.classifiers[this.model.get('story_feed_id')];
|
||||
|
||||
this.$el.html(this.render_to_string());
|
||||
this.toggle_classes();
|
||||
this.toggle_read_status();
|
||||
this.generate_gradients();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
render_to_string: function() {
|
||||
var $story_title = _.template('\
|
||||
<div class="NB-feed-story-header">\
|
||||
<div class="NB-feed-story-header-feed">\
|
||||
<% if (feed) { %>\
|
||||
<div class="NB-feed-story-feed">\
|
||||
<img class="feed_favicon" src="<%= $.favicon(feed) %>">\
|
||||
<span class="NB-feed-story-header-title"><%= feed.get("feed_title") %></span>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
</div>\
|
||||
<div class="NB-feed-story-header-info">\
|
||||
<% if (story.get("story_authors")) { %>\
|
||||
<div class="NB-feed-story-author <% if (authors_score) { %>NB-score-<%= authors_score %><% } %>">\
|
||||
<%= story.get("story_authors") %>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<% if (story.get("story_tags", []).length) { %>\
|
||||
<div class="NB-feed-story-tags">\
|
||||
<% _.each(story.get("story_tags"), function(tag) { %>\
|
||||
<div class="NB-feed-story-tag <% if (tags_score[tag]) { %>NB-score-<%= tags_score[tag] %><% } %>">\
|
||||
<%= tag %>\
|
||||
</div>\
|
||||
<% }) %>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<div class="NB-feed-story-title-container">\
|
||||
<div class="NB-feed-story-sentiment"></div>\
|
||||
<div class="NB-feed-story-manage-icon"></div>\
|
||||
<a class="NB-feed-story-title" href="<%= story.get("story_permalink") %>"><%= title %></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a href="<%= story.get("story_permalink") %>" class="story_title">\
|
||||
<% if (options.river_stories && feed) { %>\
|
||||
<div class="NB-story-feed">\
|
||||
<img class="feed_favicon" src="<%= $.favicon(feed) %>">\
|
||||
<span class="feed_title"><%= feed.get("feed_title") %></span>\
|
||||
</div>\
|
||||
<% } %>\
|
||||
<div class="NB-storytitles-star"></div>\
|
||||
<div class="NB-storytitles-share"></div>\
|
||||
<span class="NB-storytitles-title"><%= story.get("story_title") %></span>\
|
||||
<span class="NB-storytitles-author"><%= story.get("story_authors") %></span>\
|
||||
<% if (tag) { %>\
|
||||
<span class="NB-storytitles-tags">\
|
||||
<span class="NB-storytitles-tag"><%= tag %></span>\
|
||||
</span>\
|
||||
<% } %>\
|
||||
</a>\
|
||||
<span class="story_date"><%= story.get("short_parsed_date") %></span>\
|
||||
<div class="NB-story-manage-icon"></div>\
|
||||
', {
|
||||
story : this.model,
|
||||
feed : this.options.river_stories && this.feed,
|
||||
tag : _.first(this.model.get("story_tags")),
|
||||
title : this.make_story_title(),
|
||||
authors_score : this.classifiers.authors[this.model.get('story_authors')],
|
||||
tags_score : this.classifiers.tags,
|
||||
options : this.options
|
||||
});
|
||||
|
||||
return $story_title;
|
||||
},
|
||||
|
||||
toggle_classes: function() {
|
||||
var story = this.model;
|
||||
var unread_view = NEWSBLUR.assets.preference('unread_view');
|
||||
var score = story.score();
|
||||
|
||||
this.$el.toggleClass('NB-inverse', this.feed.is_light());
|
||||
this.$el.toggleClass('NB-story-starred', !!story.get('starred'));
|
||||
this.$el.toggleClass('NB-story-shared', !!story.get('shared'));
|
||||
this.$el.removeClass('NB-story-negative NB-story-neutral NB-story-postiive')
|
||||
.addClass('NB-story-'+story.score_name(score));
|
||||
|
||||
if (unread_view > score) {
|
||||
this.$el.css('display', 'none');
|
||||
}
|
||||
|
||||
if (NEWSBLUR.assets.preference('show_tooltips')) {
|
||||
this.$('.NB-story-sentiment').tipsy({
|
||||
delayIn: 375,
|
||||
gravity: 's'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
toggle_read_status: function() {
|
||||
this.$el.toggleClass('read', !!this.model.get('read_status'));
|
||||
},
|
||||
|
||||
generate_gradients: function() {
|
||||
var $header = this.$('.NB-feed-story-header-feed');
|
||||
|
||||
$header.css('background-image', NEWSBLUR.utils.generate_gradient(this.feed, 'webkit'));
|
||||
$header.css('background-image', NEWSBLUR.utils.generate_gradient(this.feed, 'moz'));
|
||||
$header.css('borderTop', NEWSBLUR.utils.generate_gradient(this.feed, 'border'));
|
||||
$header.css('borderBottom', NEWSBLUR.utils.generate_gradient(this.feed, 'border'));
|
||||
$header.css('textShadow', '0 1px 0 ' + NEWSBLUR.utils.generate_gradient(this.feed, 'shadow'));
|
||||
},
|
||||
|
||||
make_story_title: function() {
|
||||
var title = this.model.get('story_title');
|
||||
var classifiers = NEWSBLUR.assets.classifiers[this.model.get('story_feed_id')];
|
||||
var feed_titles = classifiers && classifiers.titles || [];
|
||||
|
||||
_.each(feed_titles, function(score, title_classifier) {
|
||||
if (title.indexOf(title_classifier) != -1) {
|
||||
title = title.replace(title_classifier, '<span class="NB-score-'+score+'">'+title_classifier+'</span>');
|
||||
}
|
||||
});
|
||||
|
||||
return title;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -533,7 +533,10 @@
|
|||
|
||||
<div class="right-pane">
|
||||
|
||||
<div id="story_titles" class="right-north"></div>
|
||||
<div id="story_titles" class="right-north">
|
||||
<div class="NB-feedbar"></div>
|
||||
<div class="NB-story-titles"></div>
|
||||
</div>
|
||||
<div class="content-pane">
|
||||
<div id="story_taskbar" class="NB-taskbar-container content-north">
|
||||
<div class="NB-taskbar">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue