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

Fix highlighting and expanding of new topics on mobile

Browse source 
Set the location hash to that of the new topic, then wait
for the section to expand before drawing the highlight.

Bug: T306399
Bug: T301840
Change-Id: I8bc78b49f359e10279584c16269fcb78a087eae0
This commit is contained in:
Ed Sanders 2022-04-19 15:40:41 +01:00 committed by Bartosz Dziewoński
parent a3a5815927
commit 89a1efc9d8
1 changed files with 35 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
modules/highlighter.js
View file

@ -172,6 +172,12 @@ function highlightPublishedComment( threadItemSet, threadItemId ) {
) {
highlightComments.push( lastComment.parent );
lastHighlightedPublishedComment = lastComment.parent;
var $collapsibleHeading = $( lastHighlightedPublishedComment.range.startContainer ).closest( '.collapsible-heading' );
// Expand collapsed section on mobile
if ( $collapsibleHeading.length ) {
var id = utils.getHeadlineNodeAndOffset( $collapsibleHeading[ 0 ] ).node.id;
location.hash = '#' + id;
}
}
} else {
// Find the comment we replied to, then highlight the last reply
@ -179,34 +185,38 @@ function highlightPublishedComment( threadItemSet, threadItemId ) {
highlightComments.push( repliedToComment.replies[ repliedToComment.replies.length - 1 ] );
lastHighlightedPublishedComment = highlightComments[ 0 ];
}
var highlight = new Highlight( highlightComments );
highlight.$element.addClass( 'ext-discussiontools-init-publishedcomment' );
// We may have changed the location hash on mobile, so wait for that to cause
// the section to expand before drawing the highlight.
setTimeout( function () {
var highlight = new Highlight( highlightComments );
highlight.$element.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.topmostElement,
{
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.topmostElement )
}
).then( function () {
highlight.$element.addClass( 'ext-discussiontools-init-highlight-fadein' );
setTimeout( function () {
highlight.$element.addClass( 'ext-discussiontools-init-highlight-fadeout' );
// 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.topmostElement,
{
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.topmostElement )
}
).then( function () {
highlight.$element.addClass( 'ext-discussiontools-init-highlight-fadein' );
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.destroy();
}, 250 );
}, 3000 );
highlight.$element.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.destroy();
}, 250 );
}, 3000 );
} );
} );
}