mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools
synced 2024-12-18 02:51:26 +00:00
Move highlightPublishedComment to highlighter.js
Bug: T302805 Change-Id: I429148b16f790e1d1f5cbbd84fc35139727b4402
This commit is contained in:
Ed Sanders
parent
ecbe75c453
commit
f5d4df12a9
|
|
@ -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 `<dd>` 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
|
||||
|
|
|
|||
|
|
@ -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 `<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
|
||||
*
|
||||
|
|
@ -221,5 +286,6 @@ function clearHighlightTargetComment( threadItemSet ) {
|
|||
module.exports = {
|
||||
highlight: highlight,
|
||||
highlightTargetComment: highlightTargetComment,
|
||||
highlightPublishedComment: highlightPublishedComment,
|
||||
clearHighlightTargetComment: clearHighlightTargetComment
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue