From dca95f3a8911b4fc4b9b278506e5bf31dddc9d76 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Fri, 6 Dec 2013 13:56:28 -0800 Subject: [PATCH] Refactoring image loading on story detail views to allow for an observer. Adding observer for saved story tags expanding story container when too short (but also recognizing when an image grows to switch the story from too small to big enough). --- media/js/newsblur/views/story_detail_view.js | 10 ++++++++ media/js/newsblur/views/story_list_view.js | 26 +++++++++++--------- media/js/newsblur/views/story_save_view.js | 18 ++++++++++---- 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/media/js/newsblur/views/story_detail_view.js b/media/js/newsblur/views/story_detail_view.js index 5a0aaa615..ae8ba4353 100644 --- a/media/js/newsblur/views/story_detail_view.js +++ b/media/js/newsblur/views/story_detail_view.js @@ -101,6 +101,12 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ } }, + resize_starred_tags: function() { + if (this.model.get('starred')) { + this.save_view.reset_height(); + } + }, + render_header: function(model, value, options) { var params = this.get_render_params(); this.$('.NB-feed-story-header').replaceWith($(this.story_header_template(params))); @@ -416,6 +422,10 @@ NEWSBLUR.Views.StoryDetailView = Backbone.View.extend({ }, watch_images_for_story_height: function() { + this.model.on('change:images_loaded', _.bind(function() { + this.resize_starred_tags(); + }, this)); + if (!this.is_truncatable()) return; this.truncate_delay = 100; diff --git a/media/js/newsblur/views/story_list_view.js b/media/js/newsblur/views/story_list_view.js index 0dc0b5b03..7f284bb34 100644 --- a/media/js/newsblur/views/story_list_view.js +++ b/media/js/newsblur/views/story_list_view.js @@ -34,7 +34,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ feed_view_story_positions_keys: [] }; this.flags = { - feed_view_images_loaded: {}, mousemove_timeout: false }; this.counts = { @@ -420,14 +419,17 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ // ============= is_feed_loaded_for_location_fetch: function() { - var images_begun = _.keys(this.flags.feed_view_images_loaded).length; + var images_begun = NEWSBLUR.assets.stories.any(function(s) { + return !_.isUndefined(s.get('images_loaded')); + }); if (images_begun) { - var images_loaded = _.keys(this.flags.feed_view_images_loaded).length && - _.all(_.values(this.flags.feed_view_images_loaded), _.identity); - return !!images_loaded; + var images_loaded = NEWSBLUR.assets.stories.all(function(s) { + return s.get('images_loaded'); + }); + return images_loaded; } - return !!images_begun; + return images_begun; }, prefetch_story_locations_in_feed_view: function() { @@ -435,7 +437,7 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ var stories = NEWSBLUR.assets.stories; if (!_.contains(['split', 'full'], NEWSBLUR.assets.preference('story_layout'))) return; - // NEWSBLUR.log(['Prefetching Feed', this.flags['feed_view_positions_calculated'], this.flags.feed_view_images_loaded, (_.keys(this.flags.feed_view_images_loaded).length > 0 || this.cache.feed_view_story_positions_keys.length > 0), _.keys(this.flags.feed_view_images_loaded).length, _.values(this.flags.feed_view_images_loaded), this.is_feed_loaded_for_location_fetch()]); + // NEWSBLUR.log(['Prefetching Feed', this.flags['feed_view_positions_calculated'], this.is_feed_loaded_for_location_fetch()]); if (!NEWSBLUR.assets.stories.size()) return; @@ -466,7 +468,7 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ if (this.is_feed_loaded_for_location_fetch()) { this.fetch_story_locations_in_feed_view({'reset_timer': true}); } else { - // NEWSBLUR.log(['Still loading feed view...', _.keys(this.flags.feed_view_images_loaded).length, this.cache.feed_view_story_positions_keys.length, this.flags.feed_view_images_loaded]); + // NEWSBLUR.log(['Still loading feed view...', this.cache.feed_view_story_positions_keys.length]); } }, @@ -555,17 +557,17 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ var image_count = story.story_view.$('.NB-feed-story-content img').length; if (!image_count) { // NEWSBLUR.log(["No images", story.get('story_title')]); - this.flags.feed_view_images_loaded[story.id] = true; - } else if (!this.flags.feed_view_images_loaded[story.id]) { + story.set('images_loaded', true); + } else if (!story.get('images_loaded')) { // Progressively load the images in each story, so that when one story // loads, the position is calculated and the next story can calculate // its position (after its own images are loaded). - this.flags.feed_view_images_loaded[story.id] = false; + story.set('images_loaded', false); (function(story, image_count) { story.story_view.$('.NB-feed-story-content img').load(function() { // NEWSBLUR.log(['Loaded image', story.get('story_title'), image_count]); if (image_count <= 1) { - NEWSBLUR.app.story_list.flags.feed_view_images_loaded[story.id] = true; + story.set('images_loaded', true); } else { image_count--; } diff --git a/media/js/newsblur/views/story_save_view.js b/media/js/newsblur/views/story_save_view.js index f480aab6f..5db5df7bb 100644 --- a/media/js/newsblur/views/story_save_view.js +++ b/media/js/newsblur/views/story_save_view.js @@ -62,7 +62,6 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({ var feed_id = this.model.get('story_feed_id'); var $sideoption = this.$('.NB-sideoption.NB-feed-story-save'); var $save_wrapper = this.$('.NB-sideoption-save-wrapper'); - var $story_content = this.$('.NB-feed-story-content,.NB-story-content'); var $tag_input = this.$('.NB-sideoption-save-tag'); if (options.close || !this.model.get('starred')) { @@ -178,11 +177,10 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({ var comments_height = $story_comments.height(); var left_height = content_height + comments_height; var original_height = $story_content.data('original_height') || content_height; - if (!NEWSBLUR.reader.flags.narrow_content && - !options.close && new_sideoptions_height >= original_height) { + !options.close && !options.force && new_sideoptions_height >= original_height) { // Sideoptions too big, embiggen left side - $story_content.animate({ + $story_content.stop(true, true).animate({ 'height': new_sideoptions_height }, { 'duration': 350, @@ -200,7 +198,7 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({ } else if (!NEWSBLUR.reader.flags.narrow_content) { // Content is bigger, move content back to normal if ($story_content.data('original_height') && !this.sideoptions_view.share_view.is_open) { - $story_content.animate({ + $story_content.stop(true, true).animate({ 'height': $story_content.data('original_height') }, { 'duration': 300, @@ -222,6 +220,16 @@ NEWSBLUR.Views.StorySaveView = Backbone.View.extend({ } }, + reset_height: function() { + var $story_content = this.$('.NB-feed-story-content,.NB-story-content'); + + // Reset story content height to get an accurate height measurement. + $story_content.stop(true, true).css('height', 'auto'); + $story_content.removeData('original_height'); + + this.resize(); + }, + save_tags: function() { var $tag_input = this.$('.NB-sideoption-save-tag');