From f5d4df12a9a2ee6f4055ffa9d83ecd877207b490 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Tue, 1 Mar 2022 14:44:21 +0000 Subject: [PATCH] Move highlightPublishedComment to highlighter.js Bug: T302805 Change-Id: I429148b16f790e1d1f5cbbd84fc35139727b4402 --- modules/controller.js | 75 ++++++++---------------------------------- modules/highlighter.js | 68 +++++++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 63 deletions(-) diff --git a/modules/controller.js b/modules/controller.js index 28ffa8e1f..80f933bc5 100644 --- a/modules/controller.js +++ b/modules/controller.js @@ -604,72 +604,23 @@ function init( $container, state ) { $.Deferred().resolve().promise(); promise.then( function () { - var $highlight; - if ( state.repliedTo === utils.NEW_TOPIC_COMMENT_ID ) { - // Highlight the last comment on the page - var lastComment = result.threadItems[ result.threadItems.length - 1 ]; - $highlight = highlighter.highlight( lastComment ); - lastHighlightComment = lastComment; + if ( state.repliedTo ) { + lastHighlightComment = highlighter.highlightPublishedComment( result, state.repliedTo ); - // If it's the only comment under its heading, highlight the heading too. - // (It might not be if the new discussion topic was posted without a title: T272666.) - if ( - lastComment.parent && - lastComment.parent.type === 'heading' && - lastComment.parent.replies.length === 1 - ) { - $highlight = $highlight.add( highlighter.highlight( lastComment.parent ) ); - lastHighlightComment = lastComment.parent; - } - - mw.hook( 'postEdit' ).fire( { - message: mw.msg( 'discussiontools-postedit-confirmation-topicadded', mw.user ) - } ); - - } else if ( state.repliedTo ) { - // Find the comment we replied to, then highlight the last reply - var repliedToComment = result.threadItemsById[ state.repliedTo ]; - $highlight = highlighter.highlight( repliedToComment.replies[ repliedToComment.replies.length - 1 ] ); - lastHighlightComment = repliedToComment.replies[ repliedToComment.replies.length - 1 ]; - - if ( OO.ui.isMobile() ) { - mw.notify( mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) ); - } else { - // postEdit is currently desktop only + if ( state.repliedTo === utils.NEW_TOPIC_COMMENT_ID ) { mw.hook( 'postEdit' ).fire( { - message: mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) + message: mw.msg( 'discussiontools-postedit-confirmation-topicadded', mw.user ) } ); - } - } - - if ( $highlight ) { - $highlight.addClass( 'ext-discussiontools-init-publishedcomment' ); - - // Show a highlight with the same timing as the post-edit message (mediawiki.action.view.postEdit): - // show for 3000ms, fade out for 250ms (animation duration is defined in CSS). - OO.ui.Element.static.scrollIntoView( - $highlight[ 0 ], - { - padding: { - // Add padding to avoid overlapping the post-edit notification (above on desktop, below on mobile) - top: OO.ui.isMobile() ? 10 : 60, - bottom: OO.ui.isMobile() ? 85 : 10 - }, - // Specify scrollContainer for compatibility with MobileFrontend. - // Apparently it makes `
` elements scrollable and OOUI tried to scroll them instead of body. - scrollContainer: OO.ui.Element.static.getRootScrollableElement( $highlight[ 0 ] ) + } else { + if ( OO.ui.isMobile() ) { + mw.notify( mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) ); + } else { + // postEdit is currently desktop only + mw.hook( 'postEdit' ).fire( { + message: mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) + } ); } - ).then( function () { - $highlight.addClass( 'ext-discussiontools-init-highlight-fadein' ); - setTimeout( function () { - $highlight.addClass( 'ext-discussiontools-init-highlight-fadeout' ); - setTimeout( function () { - // Remove the node when no longer needed, because it's using CSS 'mix-blend-mode', which - // affects the text rendering of the whole page, disabling subpixel antialiasing on Windows - $highlight.remove(); - }, 250 ); - }, 3000 ); - } ); + } } // Check topic subscription states if the user has automatic subscriptions enabled diff --git a/modules/highlighter.js b/modules/highlighter.js index 4780410cb..16f99bbaf 100644 --- a/modules/highlighter.js +++ b/modules/highlighter.js @@ -1,4 +1,6 @@ -var CommentItem = require( './CommentItem.js' ); +var + CommentItem = require( './CommentItem.js' ), + utils = require( './utils.js' ); /** * Draw a semi-transparent rectangle on the page to highlight the given comment. @@ -93,6 +95,69 @@ function highlightTargetComment( threadItemSet, noScroll ) { } ); } +/** + * Highlight a just-published comment/topic + * + * @param {ThreadItemSet} threadItemSet Thread item set + * @param {string} threadItemId Thread item ID (NEW_TOPIC_COMMENT_ID for the a new topic) + * @return {ThreadItem} Highlighted thread item + */ +function highlightPublishedComment( threadItemSet, threadItemId ) { + var $highlight, highlightedThreadItem; + if ( threadItemId === utils.NEW_TOPIC_COMMENT_ID ) { + // Highlight the last comment on the page + var lastComment = threadItemSet.threadItems[ threadItemSet.threadItems.length - 1 ]; + $highlight = highlight( lastComment ); + highlightedThreadItem = lastComment; + + // If it's the only comment under its heading, highlight the heading too. + // (It might not be if the new discussion topic was posted without a title: T272666.) + if ( + lastComment.parent && + lastComment.parent.type === 'heading' && + lastComment.parent.replies.length === 1 + ) { + $highlight = $highlight.add( highlight( lastComment.parent ) ); + highlightedThreadItem = lastComment.parent; + } + } else { + // Find the comment we replied to, then highlight the last reply + var repliedToComment = threadItemSet.threadItemsById[ threadItemId ]; + $highlight = highlight( repliedToComment.replies[ repliedToComment.replies.length - 1 ] ); + highlightedThreadItem = repliedToComment.replies[ repliedToComment.replies.length - 1 ]; + } + + $highlight.addClass( 'ext-discussiontools-init-publishedcomment' ); + + // Show a highlight with the same timing as the post-edit message (mediawiki.action.view.postEdit): + // show for 3000ms, fade out for 250ms (animation duration is defined in CSS). + OO.ui.Element.static.scrollIntoView( + $highlight[ 0 ], + { + padding: { + // Add padding to avoid overlapping the post-edit notification (above on desktop, below on mobile) + top: OO.ui.isMobile() ? 10 : 60, + bottom: OO.ui.isMobile() ? 85 : 10 + }, + // Specify scrollContainer for compatibility with MobileFrontend. + // Apparently it makes `
` elements scrollable and OOUI tried to scroll them instead of body. + scrollContainer: OO.ui.Element.static.getRootScrollableElement( $highlight[ 0 ] ) + } + ).then( function () { + $highlight.addClass( 'ext-discussiontools-init-highlight-fadein' ); + setTimeout( function () { + $highlight.addClass( 'ext-discussiontools-init-highlight-fadeout' ); + setTimeout( function () { + // Remove the node when no longer needed, because it's using CSS 'mix-blend-mode', which + // affects the text rendering of the whole page, disabling subpixel antialiasing on Windows + $highlight.remove(); + }, 250 ); + }, 3000 ); + } ); + + return highlightedThreadItem; +} + /** * Highlight the new comments on the page associated with the query string * @@ -221,5 +286,6 @@ function clearHighlightTargetComment( threadItemSet ) { module.exports = { highlight: highlight, highlightTargetComment: highlightTargetComment, + highlightPublishedComment: highlightPublishedComment, clearHighlightTargetComment: clearHighlightTargetComment };