From 75f16947a35cca82feccba233e8a754e26c766d8 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Tue, 16 Aug 2016 19:37:42 -0300 Subject: [PATCH 1/3] Issue #37 : On editing a post, scroll partial to top of preview. Editing a post field will trigger a refresh of its partial. In the refresh() method, define and call scrollPartialToTopOfPage. Some themes have a margin-top of the #page element, like 2016. And this scrolling would hide part of the partial. So also calculate the offsetTop of #page, to prevent this. If this isn't a concern, this commit could be much simpler. --- js/customize-deferred-partial.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/js/customize-deferred-partial.js b/js/customize-deferred-partial.js index 669f897..8a95dac 100644 --- a/js/customize-deferred-partial.js +++ b/js/customize-deferred-partial.js @@ -66,12 +66,34 @@ * @return {jQuery.Promise} Refresh promise. */ refresh: function() { - var partial = this, refreshPromise; + var partial = this, refreshPromise, scrollPartialToTopOfPage; refreshPromise = api.selectiveRefresh.Partial.prototype.refresh.call( partial ); + /** + * Scroll the partial element to the top of the Customizer preview. + * + * The #page sometimes has a margin-top, like in Twenty Sixteen. + * That would make this scrolling hide part of the partial element. + * So get the offsetTop of #page, to account for the margin-top. + * And subtract that from the scrolling value. + * + * @returns {void} + */ + scrollPartialToTopOfPage = function() { + var $partialElement, partialElementPositionY, pageElementOffsetTop; + + $partialElement = document.querySelector( partial.params.selector ); + if ( $partialElement ) { + partialElementPositionY = $partialElement.getBoundingClientRect().top; + pageElementOffsetTop = document.querySelector( '#page' ) ? document.querySelector( '#page' ).offsetTop : 0; + window.scrollBy( 0, ( partialElementPositionY - pageElementOffsetTop ) ); + } + }; + refreshPromise.done( function() { var hasInvalidSettings = false; + _.each( partial.settings(), function( settingId ) { var validityState = api.settingValidities( settingId ); if ( validityState && true !== validityState.get() ) { @@ -88,6 +110,9 @@ partial.preparePlacement( placement ); } ); } + + scrollPartialToTopOfPage(); + } ); return refreshPromise; From 9861a39de3350d8b48c5180939abc1fba4829c2c Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 17 Aug 2016 02:40:25 -0300 Subject: [PATCH 2/3] Issue #37 : Remove extra parentheses to avoid linting error. --- js/customize-deferred-partial.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/customize-deferred-partial.js b/js/customize-deferred-partial.js index 8a95dac..d8ce990 100644 --- a/js/customize-deferred-partial.js +++ b/js/customize-deferred-partial.js @@ -87,7 +87,7 @@ if ( $partialElement ) { partialElementPositionY = $partialElement.getBoundingClientRect().top; pageElementOffsetTop = document.querySelector( '#page' ) ? document.querySelector( '#page' ).offsetTop : 0; - window.scrollBy( 0, ( partialElementPositionY - pageElementOffsetTop ) ); + window.scrollBy( 0, partialElementPositionY - pageElementOffsetTop ); } }; From da67beb874ddfa9bb4f659098fbcf57f9cdec2ea Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 17 Aug 2016 14:15:57 -0300 Subject: [PATCH 3/3] Issue #37 : Revert previous 2 commits to take different approach. Revert 9861a39 and 75f1694. --- js/customize-deferred-partial.js | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/js/customize-deferred-partial.js b/js/customize-deferred-partial.js index d8ce990..669f897 100644 --- a/js/customize-deferred-partial.js +++ b/js/customize-deferred-partial.js @@ -66,34 +66,12 @@ * @return {jQuery.Promise} Refresh promise. */ refresh: function() { - var partial = this, refreshPromise, scrollPartialToTopOfPage; + var partial = this, refreshPromise; refreshPromise = api.selectiveRefresh.Partial.prototype.refresh.call( partial ); - /** - * Scroll the partial element to the top of the Customizer preview. - * - * The #page sometimes has a margin-top, like in Twenty Sixteen. - * That would make this scrolling hide part of the partial element. - * So get the offsetTop of #page, to account for the margin-top. - * And subtract that from the scrolling value. - * - * @returns {void} - */ - scrollPartialToTopOfPage = function() { - var $partialElement, partialElementPositionY, pageElementOffsetTop; - - $partialElement = document.querySelector( partial.params.selector ); - if ( $partialElement ) { - partialElementPositionY = $partialElement.getBoundingClientRect().top; - pageElementOffsetTop = document.querySelector( '#page' ) ? document.querySelector( '#page' ).offsetTop : 0; - window.scrollBy( 0, partialElementPositionY - pageElementOffsetTop ); - } - }; - refreshPromise.done( function() { var hasInvalidSettings = false; - _.each( partial.settings(), function( settingId ) { var validityState = api.settingValidities( settingId ); if ( validityState && true !== validityState.get() ) { @@ -110,9 +88,6 @@ partial.preparePlacement( placement ); } ); } - - scrollPartialToTopOfPage(); - } ); return refreshPromise;