Gergő Tisza has uploaded a new change for review. https://gerrit.wikimedia.org/r/172550
Change subject: Make all truncatable text clickable when some text is untruncated ...................................................................... Make all truncatable text clickable when some text is untruncated ...and re-truncate and close the panel on click. Also fixes a minor unrelated style bug which made truncate/untruncate more jarring than it had to be when the title was short. Change-Id: Ie0b3afb3833102b6a9812cb7fe2df78ec5eb8396 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/983 --- M resources/mmv/ui/mmv.ui.metadataPanel.js M resources/mmv/ui/mmv.ui.metadataPanel.less M resources/mmv/ui/mmv.ui.metadataPanelScroller.js 3 files changed, 38 insertions(+), 13 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/50/172550/1 diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index 57ca9ab..154f37a 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -62,9 +62,13 @@ .add( this.title.$ellipsis ) .add( this.creditField.$ellipsis ) .on( 'click.mmv-mp', function ( e ) { + var clickTargetIsLink = $( e.target ).is( 'a' ), + clickTargetIsTruncated = !!$( e.target ).closest( '.mw-mmv-ttf-truncated' ).length, + someTextisExpanded = !!$( e.target ).closest( '.mw-mmv-untruncated' ).length; + if ( - $( e.target ).is( 'a' ) // ignore clicks to external links - || !$( e.target ).closest( '.mw-mmv-ttf-truncated' ).length // text is not truncated + clickTargetIsLink || // don't interfere with clicks on links in the text + !clickTargetIsTruncated && !someTextisExpanded // don't expand when non-truncated text is clicked ) { return; } @@ -74,7 +78,7 @@ $( this.$container ).on( 'mmv-metadata-open', function () { panel.revealTruncatedText( true ); } ).on( 'mmv-metadata-close', function () { - panel.hideTruncatedText(); + panel.hideTruncatedText( true ); } ); this.handleEvent( 'jq-fullscreen-change.lip', function() { @@ -718,9 +722,11 @@ }; /** - * Undoes changes made by revealTruncatedText(). + * Undoes changes made by revealTruncatedText() and closes the panel. + * @param {boolean} noScroll if set, do not scroll the panel (because the function was triggered from a + * scroll event in the first place) */ - MPP.hideTruncatedText = function () { + MPP.hideTruncatedText = function ( noScroll ) { if ( !this.$container.hasClass( 'mw-mmv-untruncated' ) ) { // avoid double-triggering return; @@ -728,6 +734,9 @@ this.title.shrink(); this.creditField.shrink(); this.$container.removeClass( 'mw-mmv-untruncated' ); + if ( this.scroller.panelIsOpen() && !noScroll ) { + this.scroller.toggle( 'down' ); + } }; /** diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index 125c767..306b38f 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -30,7 +30,7 @@ .mw-mmv-title-para { @height: @metadatabar-above-fold-inner-height - 2 * @vertical-padding; // needs explicit height for text truncation logic - margin: 0 0 @horizontal-padding; // use margin instead of padding for bottom so text is not visible + margin: 0 0 @vertical-padding; // use margin instead of padding for bottom so text is not visible padding: @vertical-padding @horizontal-padding 0 @horizontal-padding; height: @height; line-height: @height; @@ -64,6 +64,10 @@ .fade-out-horizontal(@panel-above-fold-background-color); } } + + .mw-mmv-untruncated & { + cursor: pointer; + } } .mw-mmv-credit { @@ -90,6 +94,10 @@ .fade-out-horizontal(@panel-below-fold-background-color); } } + + .mw-mmv-untruncated & { + cursor: pointer; + } } .mw-mmv-title { diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js index 140029d..5db09d9 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js +++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js @@ -35,8 +35,8 @@ /** @property {Object} localStorage the window.localStorage object */ this.localStorage = localStorage; - /** @property {boolean} panelIsOpen state flag which will be used to detect open <-> closed transitions */ - this.panelIsOpen = null; + /** @property {boolean} panelWasOpen state flag which will be used to detect open <-> closed transitions */ + this.panelWasOpen = null; /** * Whether this user has ever opened the metadata panel. @@ -95,7 +95,7 @@ // need to remove this to avoid animating again when reopening lightbox on same page this.$container.removeClass( 'invite' ); - this.panelIsOpen = !!$.scrollTo().scrollTop(); + this.panelWasOpen = this.panelIsOpen(); }; MPSP.initialize = function () { @@ -186,21 +186,29 @@ }; /** + * Returns whether the metadata panel is open. (Partially open is considered to be open.) + * @return {boolean} + */ + MPSP.panelIsOpen = function () { + return $.scrollTo().scrollTop() > 0; + }; + + /** * Receives the window's scroll events and and turns them into business logic events * @fires mmv-metadata-open * @fires mmv-metadata-close */ MPSP.scroll = function () { - var panelIsOpen = $.scrollTo().scrollTop() > 0; + var panelIsOpen = this.panelIsOpen(); this.$container.toggleClass( 'panel-open', panelIsOpen ); - if ( panelIsOpen && !this.panelIsOpen ) { // just opened + if ( panelIsOpen && !this.panelWasOpen ) { // just opened this.$container.trigger( 'mmv-metadata-open' ); - } else if ( !panelIsOpen && this.panelIsOpen ) { // just closed + } else if ( !panelIsOpen && this.panelWasOpen ) { // just closed this.$container.trigger( 'mmv-metadata-close' ); } - this.panelIsOpen = panelIsOpen; + this.panelWasOpen = panelIsOpen; }; mw.mmv.ui.MetadataPanelScroller = MetadataPanelScroller; -- To view, visit https://gerrit.wikimedia.org/r/172550 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ie0b3afb3833102b6a9812cb7fe2df78ec5eb8396 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <gti...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
