From a3323de772fb6de09a9c8a04b907b912dc9dea2c Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Mon, 9 Feb 2015 17:47:05 -0800 Subject: [PATCH] Laying out web now only refreshes right side when changing views. Faster and smoother. --- media/js/newsblur/reader/reader.js | 138 +++++++++--------- .../newsblur/views/story_options_popover.js | 2 +- 2 files changed, 71 insertions(+), 69 deletions(-) diff --git a/media/js/newsblur/reader/reader.js b/media/js/newsblur/reader/reader.js index da13421e2..b76c1fe48 100644 --- a/media/js/newsblur/reader/reader.js +++ b/media/js/newsblur/reader/reader.js @@ -256,15 +256,16 @@ this.apply_tipsy_titles(); }, - apply_resizable_layout: function(refresh) { + apply_resizable_layout: function(options) { + options = options || {}; var story_anchor = this.model.preference('story_pane_anchor'); - if (refresh) { + if (options.right_side) { this.layout.contentLayout && this.layout.contentLayout.destroy(); this.layout.rightLayout && this.layout.rightLayout.destroy(); - this.layout.leftCenterLayout && this.layout.leftCenterLayout.destroy(); - this.layout.leftLayout && this.layout.leftLayout.destroy(); - this.layout.outerLayout && this.layout.outerLayout.destroy(); + // this.layout.leftCenterLayout && this.layout.leftCenterLayout.destroy(); + // this.layout.leftLayout && this.layout.leftLayout.destroy(); + // this.layout.outerLayout && this.layout.outerLayout.destroy(); var feed_stories_bin = $.make('div').append(this.$s.$feed_stories.children()); var story_titles_bin = $.make('div').append(this.$s.$story_titles.children()); @@ -276,69 +277,70 @@ .removeClass('NB-story-pane-hidden') .toggleClass('NB-story-pane-'+story_anchor, NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout') == 'split'); - - this.layout.outerLayout = this.$s.$layout.layout({ - zIndex: 2, - fxName: "slideOffscreen", - fxSettings: { duration: 560, easing: "easeInOutQuint" }, - center__paneSelector: ".right-pane", - west__paneSelector: ".left-pane", - west__size: this.model.preference('feed_pane_size'), - west__minSize: this.constants.MIN_FEED_LIST_SIZE, - west__onresize_end: $.rescope(this.save_feed_pane_size, this), - // west__initHidden: this.options.hide_sidebar, - west__spacing_open: this.options.hide_sidebar ? 1 : 1, - resizerDragOpacity: 0.6, - resizeWhileDragging: true, - enableCursorHotkey: false, - togglerLength_open: 0 - }); + if (!options.right_side) { + this.layout.outerLayout = this.$s.$layout.layout({ + zIndex: 2, + fxName: "slideOffscreen", + fxSettings: { duration: 560, easing: "easeInOutQuint" }, + center__paneSelector: ".right-pane", + west__paneSelector: ".left-pane", + west__size: this.model.preference('feed_pane_size'), + west__minSize: this.constants.MIN_FEED_LIST_SIZE, + west__onresize_end: $.rescope(this.save_feed_pane_size, this), + // west__initHidden: this.options.hide_sidebar, + west__spacing_open: this.options.hide_sidebar ? 1 : 1, + resizerDragOpacity: 0.6, + resizeWhileDragging: true, + enableCursorHotkey: false, + togglerLength_open: 0 + }); - if (this.model.preference('feed_pane_size') < 242) { - this.layout.outerLayout.resizeAll(); + if (this.model.preference('feed_pane_size') < 242) { + this.layout.outerLayout.resizeAll(); + } + + this.layout.leftLayout = $('.left-pane').layout({ + closable: false, + resizeWhileDragging: true, + fxName: "slideOffscreen", + fxSettings: { duration: 560, easing: "easeInOutQuint" }, + animatePaneSizing: true, + north__paneSelector: ".left-north", + north__size: 37, + north__resizeable: false, + north__spacing_open: 0, + center__paneSelector: ".left-center", + center__resizable: false, + south__paneSelector: ".left-south", + south__size: 31, + south__resizable: false, + enableCursorHotkey: false, + togglerLength_open: 0, + south__spacing_open: 0 + }); + + this.layout.leftCenterLayout = $('.left-center').layout({ + closable: false, + slidable: false, + resizeWhileDragging: true, + center__paneSelector: ".left-center-content", + center__resizable: false, + south__paneSelector: ".left-center-footer", + south__size: 'auto', + south__resizable: false, + south__slidable: true, + south__spacing_open: 0, + south__spacing_closed: 0, + south__closable: true, + south__initClosed: true, + fxName: "slideOffscreen", + fxSettings_close: { duration: 560, easing: "easeInOutQuint" }, + fxSettings_open: { duration: 0 }, + enableCursorHotkey: false, + togglerLength_open: 0 + }); } - - this.layout.leftLayout = $('.left-pane').layout({ - closable: false, - resizeWhileDragging: true, - fxName: "slideOffscreen", - fxSettings: { duration: 560, easing: "easeInOutQuint" }, - animatePaneSizing: true, - north__paneSelector: ".left-north", - north__size: 37, - north__resizeable: false, - north__spacing_open: 0, - center__paneSelector: ".left-center", - center__resizable: false, - south__paneSelector: ".left-south", - south__size: 31, - south__resizable: false, - enableCursorHotkey: false, - togglerLength_open: 0, - south__spacing_open: 0 - }); - - this.layout.leftCenterLayout = $('.left-center').layout({ - closable: false, - slidable: false, - resizeWhileDragging: true, - center__paneSelector: ".left-center-content", - center__resizable: false, - south__paneSelector: ".left-center-footer", - south__size: 'auto', - south__resizable: false, - south__slidable: true, - south__spacing_open: 0, - south__spacing_closed: 0, - south__closable: true, - south__initClosed: true, - fxName: "slideOffscreen", - fxSettings_close: { duration: 560, easing: "easeInOutQuint" }, - fxSettings_open: { duration: 0 }, - enableCursorHotkey: false, - togglerLength_open: 0 - }); - + if (_.contains(['split', 'full'], NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, 'layout'))) { var rightLayoutOptions = { @@ -414,7 +416,7 @@ this.flags['story_titles_closed'] = false; } - if (refresh) { + if (options.right_side) { this.$s.$feed_stories.append(feed_stories_bin.children()); this.$s.$story_titles.append(story_titles_bin.children()); this.resize_window(); @@ -1550,7 +1552,7 @@ NEWSBLUR.assets.view_setting(NEWSBLUR.reader.active_feed, {'layout': story_layout}); this.set_correct_story_view_for_feed(); - this.apply_resizable_layout(true); + this.apply_resizable_layout({right_side: true}); if (story_layout == 'list') { if (this.active_story) { diff --git a/media/js/newsblur/views/story_options_popover.js b/media/js/newsblur/views/story_options_popover.js index 1381286f4..02fe40f6b 100644 --- a/media/js/newsblur/views/story_options_popover.js +++ b/media/js/newsblur/views/story_options_popover.js @@ -313,7 +313,7 @@ NEWSBLUR.StoryOptionsPopover = NEWSBLUR.ReaderPopover.extend({ } NEWSBLUR.assets.preference('story_pane_anchor', setting); NEWSBLUR.assets.preference('story_titles_pane_size', pane_size); - NEWSBLUR.reader.apply_resizable_layout(true); + NEWSBLUR.reader.apply_resizable_layout({right_side: true}); }, change_single_story: function(e) {