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).

This commit is contained in:
Samuel Clay 2013-12-06 13:56:28 -08:00
parent 91943594f7
commit dca95f3a89
3 changed files with 37 additions and 17 deletions

View file

@ -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;

View file

@ -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--;
}

View file

@ -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');