wikimedia/mediawiki-extensions-DiscussionTools
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools synced 2024-12-18 02:51:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move highlightPublishedComment to highlighter.js

Browse source 
Bug: T302805
Change-Id: I429148b16f790e1d1f5cbbd84fc35139727b4402
This commit is contained in:
Ed Sanders 2022-03-01 14:44:21 +00:00
parent ecbe75c453
commit f5d4df12a9
2 changed files with 80 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
modules/controller.js
View file

@ -604,34 +604,14 @@ function init( $container, state ) {
$.Deferred().resolve().promise(); $.Deferred().resolve().promise();
promise.then( function () { promise.then( function () {
var $highlight; if ( state.repliedTo ) {
lastHighlightComment = highlighter.highlightPublishedComment( result, state.repliedTo );
if ( state.repliedTo === utils.NEW_TOPIC_COMMENT_ID ) { 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 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( { mw.hook( 'postEdit' ).fire( {
message: mw.msg( 'discussiontools-postedit-confirmation-topicadded', mw.user ) message: mw.msg( 'discussiontools-postedit-confirmation-topicadded', mw.user )
} ); } );
} else {
} 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() ) { if ( OO.ui.isMobile() ) {
mw.notify( mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) ); mw.notify( mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) );
} else { } else {
@ -641,35 +621,6 @@ function init( $container, state ) {
} ); } );
} }
} }
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 `<dd>` 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 );
} );
} }
// Check topic subscription states if the user has automatic subscriptions enabled // Check topic subscription states if the user has automatic subscriptions enabled

68
modules/highlighter.js
View file

@ -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. * 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 `<dd>` 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 * Highlight the new comments on the page associated with the query string
* *
@ -221,5 +286,6 @@ function clearHighlightTargetComment( threadItemSet ) {
module.exports = { module.exports = {
highlight: highlight, highlight: highlight,
highlightTargetComment: highlightTargetComment, highlightTargetComment: highlightTargetComment,
highlightPublishedComment: highlightPublishedComment,
clearHighlightTargetComment: clearHighlightTargetComment clearHighlightTargetComment: clearHighlightTargetComment
}; };