From 0019410c8ebe5ac0c34a7b041d79ac9b9bd7b25c Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Thu, 24 May 2012 17:32:01 -0700 Subject: [PATCH] Backboneifying story titles and stories in the Feed view. Feed view needs completion, then both need to get fully hooked up. --- media/css/reader.css | 52 +++---- media/js/newsblur/common/assetmodel.js | 27 +--- media/js/newsblur/models/feeds.js | 17 +++ media/js/newsblur/models/stories.js | 20 +++ media/js/newsblur/reader/reader.js | 105 ++------------ media/js/newsblur/reader/reader_utils.js | 44 ++---- media/js/newsblur/views/feed_view.js | 4 + media/js/newsblur/views/story_list_view.js | 26 ++++ media/js/newsblur/views/story_title_view.js | 77 ++++++++++ media/js/newsblur/views/story_titles_view.js | 26 ++++ media/js/newsblur/views/story_view.js | 140 +++++++++++++++++++ templates/reader/feeds.xhtml | 5 +- 12 files changed, 365 insertions(+), 178 deletions(-) create mode 100644 media/js/newsblur/views/story_list_view.js create mode 100644 media/js/newsblur/views/story_titles_view.js diff --git a/media/css/reader.css b/media/css/reader.css index 1dbdf38d8..0df3cb194 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -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; diff --git a/media/js/newsblur/common/assetmodel.js b/media/js/newsblur/common/assetmodel.js index d6c90f355..66f3440d0 100644 --- a/media/js/newsblur/common/assetmodel.js +++ b/media/js/newsblur/common/assetmodel.js @@ -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) { diff --git a/media/js/newsblur/models/feeds.js b/media/js/newsblur/models/feeds.js index 9601acd40..b13f712c5 100644 --- a/media/js/newsblur/models/feeds.js +++ b/media/js/newsblur/models/feeds.js @@ -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; } }); diff --git a/media/js/newsblur/models/stories.js b/media/js/newsblur/models/stories.js index 3a9fc885f..87e40d4e5 100644 --- a/media/js/newsblur/models/stories.js +++ b/media/js/newsblur/models/stories.js @@ -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 }); \ No newline at end of file diff --git a/media/js/newsblur/reader/reader.js b/media/js/newsblur/reader/reader.js index 24e4f23d1..2f383e983 100644 --- a/media/js/newsblur/reader/reader.js +++ b/media/js/newsblur/reader/reader.js @@ -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)), diff --git a/media/js/newsblur/reader/reader_utils.js b/media/js/newsblur/reader/reader_utils.js index 4b9b052af..83a0e3e69 100644 --- a/media/js/newsblur/reader/reader_utils.js +++ b/media/js/newsblur/reader/reader_utils.js @@ -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:'); }, diff --git a/media/js/newsblur/views/feed_view.js b/media/js/newsblur/views/feed_view.js index 7d6222e4a..3b5c5caa0 100644 --- a/media/js/newsblur/views/feed_view.js +++ b/media/js/newsblur/views/feed_view.js @@ -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; }, diff --git a/media/js/newsblur/views/story_list_view.js b/media/js/newsblur/views/story_list_view.js new file mode 100644 index 000000000..2599fb50c --- /dev/null +++ b/media/js/newsblur/views/story_list_view.js @@ -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); + } + +}); \ No newline at end of file diff --git a/media/js/newsblur/views/story_title_view.js b/media/js/newsblur/views/story_title_view.js index e69de29bb..0e2a2bc86 100644 --- a/media/js/newsblur/views/story_title_view.js +++ b/media/js/newsblur/views/story_title_view.js @@ -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('\ +
\ + " class="story_title">\ + <% if (options.river_stories && feed) { %>\ +
\ + \ + <%= feed.get("feed_title") %>\ +
\ + <% } %>\ +
\ +
\ + <%= story.get("story_title") %>\ + <%= story.get("story_authors") %>\ + <% if (tag) { %>\ + \ + <%= tag %>\ + \ + <% } %>\ + \ + <%= story.get("short_parsed_date") %>\ +
\ + ', { + 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')); + } + +}); \ No newline at end of file diff --git a/media/js/newsblur/views/story_titles_view.js b/media/js/newsblur/views/story_titles_view.js new file mode 100644 index 000000000..931b1d440 --- /dev/null +++ b/media/js/newsblur/views/story_titles_view.js @@ -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); + } + +}); \ No newline at end of file diff --git a/media/js/newsblur/views/story_view.js b/media/js/newsblur/views/story_view.js index e69de29bb..ff565f97e 100644 --- a/media/js/newsblur/views/story_view.js +++ b/media/js/newsblur/views/story_view.js @@ -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('\ +
\ +
\ + <% if (feed) { %>\ +
\ + \ + <%= feed.get("feed_title") %>\ +
\ + <% } %>\ +
\ +
\ + <% if (story.get("story_authors")) { %>\ +
\ + <%= story.get("story_authors") %>\ +
\ + <% } %>\ + <% if (story.get("story_tags", []).length) { %>\ +
\ + <% _.each(story.get("story_tags"), function(tag) { %>\ +
\ + <%= tag %>\ +
\ + <% }) %>\ +
\ + <% } %>\ +
\ +
\ +
\ + "><%= title %>\ +
\ +
\ +
\ + " class="story_title">\ + <% if (options.river_stories && feed) { %>\ +
\ + \ + <%= feed.get("feed_title") %>\ +
\ + <% } %>\ +
\ +
\ + <%= story.get("story_title") %>\ + <%= story.get("story_authors") %>\ + <% if (tag) { %>\ + \ + <%= tag %>\ + \ + <% } %>\ + \ + <%= story.get("short_parsed_date") %>\ +
\ + ', { + 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, ''+title_classifier+''); + } + }); + + return title; + } + + +}); \ No newline at end of file diff --git a/templates/reader/feeds.xhtml b/templates/reader/feeds.xhtml index 38f94d6be..5533d8fa2 100644 --- a/templates/reader/feeds.xhtml +++ b/templates/reader/feeds.xhtml @@ -533,7 +533,10 @@
-
+
+
+
+