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

Reload the page after posting a comment on mobile

Browse source 
MobileFrontend does not use the 'wikipage.content' hook, and its
interface will not re-initialize properly after we update the page
contents with the new comment. Reload the whole page instead.

Bug: T270536
Change-Id: I3f81e4d77faed367606e47678b8896051982359d
This commit is contained in:
Bartosz Dziewoński 2021-06-17 17:37:05 +02:00 committed by DLynch
parent 3104c94e9d
commit 4912a1bf5c
1 changed files with 72 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
modules/controller.js
View file

@ -527,58 +527,76 @@ function init( $container, state ) {
// For debugging (now unused in the code) // For debugging (now unused in the code)
mw.dt.pageThreads = pageThreads; mw.dt.pageThreads = pageThreads;
var $highlight; var promise = OO.ui.isMobile && mw.loader.getState( 'mobile.init' ) ?
if ( state.repliedTo === utils.NEW_TOPIC_COMMENT_ID ) { mw.loader.using( 'mobile.init' ) :
// Highlight the last comment on the page $.Deferred().resolve().promise();
var lastComment = threadItems[ threadItems.length - 1 ];
$highlight = highlight( lastComment );
// If it's the only comment under its heading, highlight the heading too. promise.then( function () {
// (It might not be if the new discussion topic was posted without a title: T272666.) var $highlight;
if ( if ( state.repliedTo === utils.NEW_TOPIC_COMMENT_ID ) {
lastComment.parent && // Highlight the last comment on the page
lastComment.parent.type === 'heading' && var lastComment = threadItems[ threadItems.length - 1 ];
lastComment.parent.replies.length === 1 $highlight = highlight( lastComment );
) {
$highlight = $highlight.add( highlight( lastComment.parent ) ); // 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 ) );
}
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 = threadItemsById[ state.repliedTo ];
$highlight = highlight( 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
mw.hook( 'postEdit' ).fire( {
message: mw.msg( 'discussiontools-postedit-confirmation-published', mw.user )
} );
}
} }
mw.hook( 'postEdit' ).fire( { if ( $highlight ) {
message: mw.msg( 'discussiontools-postedit-confirmation-topicadded', mw.user ) $highlight.addClass( 'ext-discussiontools-init-publishedcomment' );
} );
} else if ( state.repliedTo ) { // Show a highlight with the same timing as the post-edit message (mediawiki.action.view.postEdit):
// Find the comment we replied to, then highlight the last reply // show for 3000ms, fade out for 250ms (animation duration is defined in CSS).
var repliedToComment = threadItemsById[ state.repliedTo ]; OO.ui.Element.static.scrollIntoView(
$highlight = highlight( repliedToComment.replies[ repliedToComment.replies.length - 1 ] ); $highlight[ 0 ],
{
if ( OO.ui.isMobile() ) { padding: {
mw.notify( mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) ); top: 10,
} else { // Add padding on mobile to avoid overlapping the notification
// postEdit is currently desktop only bottom: 10 + ( OO.ui.isMobile() ? 75 : 0 )
mw.hook( 'postEdit' ).fire( { },
message: mw.msg( 'discussiontools-postedit-confirmation-published', mw.user ) // 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 );
} ); } );
} }
} } );
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: { top: 10, bottom: 10 } } ).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 );
} );
}
// Preload page metadata. // Preload page metadata.
// TODO: Isn't this too early to load it? We will only need it if the user tries replying... // TODO: Isn't this too early to load it? We will only need it if the user tries replying...
@ -624,6 +642,13 @@ function update( data, comment, pageName, replyWidget ) {
linksController = null; linksController = null;
// TODO: Tell controller to teardown all other open widgets // TODO: Tell controller to teardown all other open widgets
if ( OO.ui.isMobile() ) {
// MobileFrontend does not use the 'wikipage.content' hook, and its interface will not
// re-initialize properly (e.g. page sections won't be collapsible). Reload the whole page.
window.location = mw.util.getUrl( pageName, { dtrepliedto: comment.id } );
return;
}
// Update page state // Update page state
if ( pageName === mw.config.get( 'wgRelevantPageName' ) ) { if ( pageName === mw.config.get( 'wgRelevantPageName' ) ) {
// We can use the result from the VisualEditor API // We can use the result from the VisualEditor API
@ -674,7 +699,7 @@ function update( data, comment, pageName, replyWidget ) {
} ).catch( function () { } ).catch( function () {
// We saved the reply, but couldn't purge or fetch the updated page. Seems difficult to // We saved the reply, but couldn't purge or fetch the updated page. Seems difficult to
// explain this problem. Redirect to the page where the user can at least see their reply… // explain this problem. Redirect to the page where the user can at least see their reply…
window.location = mw.util.getUrl( pageName ); window.location = mw.util.getUrl( pageName, { dtrepliedto: comment.id } );
} ); } );
} }