From a1ac24f8585cf70ec4409567e0eae56467cb6591 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Mon, 11 Jun 2012 18:23:59 -0700 Subject: [PATCH] Handling complicated interactions during scrolling, mousemove, and switching panes. --- media/js/newsblur/reader/reader.js | 20 ++---- media/js/newsblur/views/original_view.js | 83 ++++++++++++---------- media/js/newsblur/views/story_list_view.js | 14 ++-- media/js/newsblur/views/story_view.js | 3 +- 4 files changed, 61 insertions(+), 59 deletions(-) diff --git a/media/js/newsblur/reader/reader.js b/media/js/newsblur/reader/reader.js index cfb85680f..a10051be0 100644 --- a/media/js/newsblur/reader/reader.js +++ b/media/js/newsblur/reader/reader.js @@ -1019,7 +1019,6 @@ 'feed_view_images_loaded': {}, 'feed_view_positions_calculated': false, 'scrolling_by_selecting_story_title': false, - 'switching_to_feed_view': false, 'page_view_showing_feed_view': false, 'feed_view_showing_story_view': false, 'story_titles_loaded': false, @@ -2395,11 +2394,11 @@ this.story_view = view; } - // this.flags.scrolling_by_selecting_story_title = true; - // clearInterval(this.locks.scrolling); - // this.locks.scrolling = setTimeout(function() { - // self.flags.scrolling_by_selecting_story_title = false; - // }, 1000); + this.flags.scrolling_by_selecting_story_title = true; + clearInterval(this.locks.scrolling); + this.locks.scrolling = setTimeout(function() { + self.flags.scrolling_by_selecting_story_title = false; + }, 550); if (view == 'page') { if (this.flags['iframe_prevented_from_loading']) { NEWSBLUR.app.original_view.load_feed_iframe(); @@ -2414,9 +2413,7 @@ 'queue': false }); } else if (view == 'feed') { - if (this.active_story) { - NEWSBLUR.app.story_list.scroll_to_selected_story(this.active_story.story_view, {immediate: true}); - } + NEWSBLUR.app.story_list.scroll_to_selected_story(this.active_story, {immediate: true}); $story_pane.animate({ 'left': -1 * $feed_iframe.width() @@ -2426,11 +2423,6 @@ 'queue': false }); - this.flags['switching_to_feed_view'] = true; - setTimeout(function() { - self.flags['switching_to_feed_view'] = false; - }, 100); - this.show_stories_preference_in_feed_view(); if (!this.flags['feed_view_positions_calculated']) { // this.prefetch_story_locations_in_feed_view(); diff --git a/media/js/newsblur/views/original_view.js b/media/js/newsblur/views/original_view.js index 284f8e133..6bd3f4d80 100644 --- a/media/js/newsblur/views/original_view.js +++ b/media/js/newsblur/views/original_view.js @@ -168,35 +168,37 @@ NEWSBLUR.Views.OriginalView = Backbone.View.extend({ var $story = this.find_story_in_feed_iframe(story); options = options || {}; + if (!story) return; + if (!NEWSBLUR.assets.preference('animations') || NEWSBLUR.reader.story_view == 'feed' || NEWSBLUR.reader.story_view == 'story' || NEWSBLUR.reader.flags['page_view_showing_feed_view']) options.immediate = true; + + // console.log(["Scroll in Original", story.get('story_title'), options]); if ($story && $story.length) { - NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] = true; - clearTimeout(NEWSBLUR.reader.locks.scrolling); - - if (options.immediate || NEWSBLUR.reader.story_view != 'page') { - $iframe.scrollTo($story, { duration: 0, axis: 'y', offset: -24 }); // Do this at story_view switch - NEWSBLUR.reader.locks.scrolling = setTimeout(function() { - NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] = false; - }, 100); - } else if (NEWSBLUR.reader.story_view == 'page') { - $iframe.scrollable().stop(); - $iframe.scrollTo($story, { - duration: 380, - axis: 'y', - easing: 'easeInOutQuint', - offset: -24, - queue: false, - onAfter: function() { - NEWSBLUR.reader.locks.scrolling = setTimeout(function() { - NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] = false; - }, 100); - } - }); + if (!options.immediate) { + clearTimeout(NEWSBLUR.reader.locks.scrolling); + NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] = true; } + + $iframe.scrollable().stop(); + $iframe.scrollTo($story, { + duration: options.immediate ? 0 : 380, + axis: 'y', + easing: 'easeInOutQuint', + offset: -24, + queue: false, + onAfter: function() { + if (options.immediate) return; + + NEWSBLUR.reader.locks.scrolling = setTimeout(function() { + NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] = false; + }, 100); + } + }); + var parent_scroll = $story.parents('.NB-feed-story-view').scrollTop(); var story_offset = $story.offset().top; @@ -531,11 +533,11 @@ NEWSBLUR.Views.OriginalView = Backbone.View.extend({ var positions = this.cache.iframe_story_positions_keys; var closest = $.closest(from_top, positions); var story = this.cache.iframe_story_positions[positions[closest]]; - // NEWSBLUR.log(['Scroll iframe', from_top, closest, positions[closest], this.cache.iframe_story_positions[positions[closest]]]); if (!story) return; + // console.log(['Scroll iframe', from_top, closest, positions[closest], this.cache.iframe_story_positions[positions[closest]]]); // if (!story.get('selected')) { - story.set('selected', true, {selected_in_original: true, immediate: true}); + story.set('selected', true, {selected_in_original: true, scroll: true, immediate: true}); // } if (!this.flags.iframe_scroll_snap_back_prepared) { this.iframe_scroll = from_top - NEWSBLUR.reader.cache.mouse_position_y; @@ -553,27 +555,30 @@ NEWSBLUR.Views.OriginalView = Backbone.View.extend({ } var scroll_top = this.$el.contents().scrollTop(); - // console.log(["mousemove", scroll_top, e.pageY]); + // console.log(["mousemove", e, scroll_top, e.pageY]); NEWSBLUR.reader.cache.mouse_position_y = e.pageY - scroll_top; NEWSBLUR.reader.$s.$mouse_indicator.css('top', NEWSBLUR.reader.cache.mouse_position_y - 8); // setTimeout(_.bind(function() { // this.flags['mousemove_timeout'] = false; // }, this), 40); - if (!this.flags['mousemove_timeout'] - && !NEWSBLUR.reader.flags.scrolling_by_selecting_story_title) { - var from_top = NEWSBLUR.reader.cache.mouse_position_y + scroll_top; - var positions = this.cache.iframe_story_positions_keys; - var closest = $.closest(from_top, positions); - var story = this.cache.iframe_story_positions[positions[closest]]; - // console.log(["mousemove", story, from_top, positions[closest], this.cache.iframe_story_positions]); - // this.flags['mousemove_timeout'] = true; - if (!story) return; - - if (!story.get('selected')) { - story.set('selected', true, {selected_in_original: true, immediate: true}); - // this.flags['mousemove_timeout'] = false; - } + + if (this.flags['mousemove_timeout'] || + NEWSBLUR.reader.flags['scrolling_by_selecting_story_title']) { + return; + } + + var from_top = NEWSBLUR.reader.cache.mouse_position_y + scroll_top; + var positions = this.cache.iframe_story_positions_keys; + var closest = $.closest(from_top, positions); + var story = this.cache.iframe_story_positions[positions[closest]]; + // console.log(["mousemove", story, from_top, positions[closest], this.cache.iframe_story_positions]); + // this.flags['mousemove_timeout'] = true; + if (!story) return; + + if (!story.get('selected')) { + story.set('selected', true, {selected_in_original: true, mouse: true, immediate: true}); + // this.flags['mousemove_timeout'] = false; } }, diff --git a/media/js/newsblur/views/story_list_view.js b/media/js/newsblur/views/story_list_view.js index 532d72976..3ef0261a6 100644 --- a/media/js/newsblur/views/story_list_view.js +++ b/media/js/newsblur/views/story_list_view.js @@ -52,9 +52,14 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ scroll_to_selected_story: function(story, options) { options = options || {}; if (!story || !story.story_view) return; - - NEWSBLUR.reader.flags.scrolling_by_selecting_story_title = true; - clearTimeout(NEWSBLUR.reader.locks.scrolling); + + // console.log(["Scroll in Feed", story.get('story_title'), options]); + + if (!options.immediate) { + clearTimeout(NEWSBLUR.reader.locks.scrolling); + NEWSBLUR.reader.flags.scrolling_by_selecting_story_title = true; + } + this.$el.scrollable().stop(); this.$el.scrollTo(story.story_view.$el, { duration: options.immediate ? 0 : 340, @@ -63,6 +68,8 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ offset: 0, // scroll_offset, queue: false, onAfter: function() { + if (options.immediate) return; + NEWSBLUR.reader.locks.scrolling = setTimeout(function() { NEWSBLUR.reader.flags.scrolling_by_selecting_story_title = false; }, 100); @@ -213,7 +220,6 @@ NEWSBLUR.Views.StoryListView = Backbone.View.extend({ // NEWSBLUR.log(['handle_scroll_feed_view', this.story_view, this.flags['switching_to_feed_view'], this.flags['scrolling_by_selecting_story_title']]); if ((this.story_view == 'feed' || (this.story_view == 'page' && this.flags['page_view_showing_feed_view'])) && - !this.flags['switching_to_feed_view'] && !this.flags['scrolling_by_selecting_story_title'] && !NEWSBLUR.assets.preference('feed_view_single_story')) { var from_top = this.cache.mouse_position_y + this.$s.$feed_stories.scrollTop(); diff --git a/media/js/newsblur/views/story_view.js b/media/js/newsblur/views/story_view.js index 9f9f2ddba..d57e54b44 100644 --- a/media/js/newsblur/views/story_view.js +++ b/media/js/newsblur/views/story_view.js @@ -299,8 +299,7 @@ NEWSBLUR.Views.StoryView = Backbone.View.extend({ mouseenter: function() { if (this.model.get('selected')) return; - if (NEWSBLUR.reader.flags['switching_to_feed_view'] || - NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] || + if (NEWSBLUR.reader.flags['scrolling_by_selecting_story_title'] || NEWSBLUR.assets.preference('feed_view_single_story')) { return; }