jenkins-bot has submitted this change and it was merged. Change subject: Preserve panel position when content is replaced ......................................................................
Preserve panel position when content is replaced Change-Id: I0735f54a8fb4aa743fb529f1dfa3515a9353402b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/982 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/986 --- M resources/mmv/mmv.lightboxinterface.less M resources/mmv/ui/mmv.ui.metadataPanel.js M resources/mmv/ui/mmv.ui.metadataPanelScroller.js 3 files changed, 36 insertions(+), 1 deletion(-) Approvals: Gilles: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less index 34081c1..e330faa 100644 --- a/resources/mmv/mmv.lightboxinterface.less +++ b/resources/mmv/mmv.lightboxinterface.less @@ -70,6 +70,7 @@ min-height: @metadatabar-above-fold-inner-height; position: relative; // make sure there is no content in the part which is overlapped by the revealed part of the below-fold content + // also used in Javascript for the height calculations padding-bottom: @metadatabar-below-fold-pushup-height; .mw-mmv-untruncated & { diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index 57ca9ab..793a6ff 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -94,6 +94,7 @@ }; MPP.empty = function () { + this.scroller.freezeHeight(); this.scroller.empty(); this.buttons.empty(); @@ -648,6 +649,8 @@ if ( user ) { this.setUserPageLink( repoData, imageData.lastUploader, user.gender ); } + + this.scroller.unfreezeHeight(); }; /** diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js index 140029d..57fbf5b 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js +++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js @@ -98,6 +98,37 @@ this.panelIsOpen = !!$.scrollTo().scrollTop(); }; + /** + * Returns scroll top position when the panel is fully open. + * (In other words, the height of the area that is outside the screen, in pixels.) + * @return {number} + */ + MPSP.getScrollTopWhenOpen = function () { + return this.$container.outerHeight() - parseInt( this.$aboveFold.css( 'min-height' ), 10 ) + - parseInt( this.$aboveFold.css( 'padding-bottom' ), 10 ); + }; + + /** + * Makes sure the panel does not contract when it is emptied and thus keeps its position as much as possible. + * This should be called when switching images, before the panel is emptied, and should be undone with + * unfreezeHeight after the panel has been populeted with the new metadata. + */ + MPSP.freezeHeight = function () { + var scrollTop = $.scrollTo().scrollTop(), + scrollTopWhenOpen = this.getScrollTopWhenOpen(); + + this.panelWasFullyOpen = ( scrollTop === scrollTopWhenOpen ); + this.$container.css( 'min-height', this.$container.height() ); + }; + + MPSP.unfreezeHeight = function () { + this.$container.css( 'min-height', '' ); + if ( this.panelWasFullyOpen ) { + $.scrollTo( this.getScrollTopWhenOpen() ); + } + }; + + MPSP.initialize = function () { this.hasOpenedMetadata = !this.localStorage || this.localStorage.getItem( 'mmv.hasOpenedMetadata' ); }; @@ -121,7 +152,7 @@ */ MPSP.toggle = function ( forceDirection ) { var deferred = $.Deferred(), - scrollTopWhenOpen = this.$container.outerHeight() - parseInt( this.$aboveFold.css( 'min-height' ), 10 ), + scrollTopWhenOpen = this.getScrollTopWhenOpen(), scrollTopWhenClosed = 0, scrollTop = $.scrollTo().scrollTop(), panelIsOpen = scrollTop > scrollTopWhenClosed, -- To view, visit https://gerrit.wikimedia.org/r/172660 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I0735f54a8fb4aa743fb529f1dfa3515a9353402b Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> Gerrit-Reviewer: Gilles <[email protected]> Gerrit-Reviewer: Pginer <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
