Merge "Fix opening/closing widgets multiple times"

This commit is contained in:
jenkins-bot 2019-11-22 19:30:23 +00:00 committed by Gerrit Code Review
commit 3e709fea84
3 changed files with 55 additions and 27 deletions

View file

@ -45,6 +45,7 @@
"packageFiles": [ "packageFiles": [
"dt.init.js" "dt.init.js"
], ],
"styles": "dt.init.less",
"dependencies": [ "dependencies": [
"mediawiki.Uri", "mediawiki.Uri",
"ext.discussionTools.parser", "ext.discussionTools.parser",

View file

@ -1,5 +1,7 @@
var pageComments, pageThreads, parsoidPromise, parsoidComments, parsoidDoc, var pageComments, pageThreads, parsoidPromise, parsoidComments, parsoidDoc,
replyWidgetPromise = mw.loader.using( 'ext.discussionTools.ReplyWidget' ); replyWidgetPromise = mw.loader.using( 'ext.discussionTools.ReplyWidget' ),
// eslint-disable-next-line no-jquery/no-global-selector
$pageContainer = $( '#mw-content-text' );
/** /**
* @class mw.discussionTools * @class mw.discussionTools
@ -13,48 +15,64 @@ mw.dt = {
}; };
function setupComment( comment ) { function setupComment( comment ) {
var $tsNode = $( comment.range.endContainer ); var $replyLink, widgetPromise, newList, newListItem,
$tsNode = $( comment.range.endContainer );
// Is it possible to have a heading nested in a thread? // Is it possible to have a heading nested in a thread?
if ( comment.type !== 'comment' ) { if ( comment.type !== 'comment' ) {
return; return;
} }
$tsNode.after( $replyLink = $( '<a>' )
' ', .addClass( 'dt-init-replylink' )
// TODO: i18n // TODO: i18n
$( '<a>' ).text( 'Reply' ).on( 'click', function () { .text( 'Reply' )
var newList, newListItem, .on( 'click', function () {
$link = $( this ); var $link = $( this );
$link.hide(); $link.hide();
// TODO: Allow users to use multiple reply widgets simlutaneously
// Currently as all widgets share the same Parsoid doc, this could
// cause problems.
$pageContainer.addClass( 'dt-init-replylink-open' );
newList = mw.dt.modifier.addListAtComment( comment ); if ( !widgetPromise ) {
newListItem = mw.dt.modifier.addListItem( newList ); newList = mw.dt.modifier.addListAtComment( comment );
// TODO: i18n newListItem = mw.dt.modifier.addListItem( newList );
$( newListItem ).text( 'Loading...' ); // TODO: i18n
$( newListItem ).text( 'Loading...' );
widgetPromise = replyWidgetPromise.then( function () {
var replyWidget = new mw.dt.ui.ReplyWidget(
comment,
parsoidDoc,
{
// TODO: Remove placeholder
doc: '<p>Reply to ' + comment.author + '</p>',
defaultMode: 'source'
}
);
replyWidgetPromise.then( function () { replyWidget.on( 'cancel', function () {
var replyWidget = new mw.dt.ui.ReplyWidget( $link.show();
comment, $pageContainer.removeClass( 'dt-init-replylink-open' );
parsoidDoc, $( newListItem ).hide();
{ } );
// TODO: Remove placeholder
doc: '<p>Reply to ' + comment.author + '</p>',
defaultMode: 'source'
}
);
replyWidget.on( 'cancel', function () { $( newListItem ).empty().append( replyWidget.$element );
return replyWidget;
}, function () {
$link.show(); $link.show();
replyWidget.$element.hide(); $pageContainer.removeClass( 'dt-init-replylink-open' );
} ); } );
}
$( newListItem ).empty().append( replyWidget.$element ); widgetPromise.then( function ( replyWidget ) {
$( newListItem ).show();
replyWidget.focus(); replyWidget.focus();
} ); } );
} ) } );
);
$tsNode.after( $replyLink );
} }
function traverseNode( parent ) { function traverseNode( parent ) {
@ -67,7 +85,7 @@ function traverseNode( parent ) {
if ( new mw.Uri().query.dtdebug ) { if ( new mw.Uri().query.dtdebug ) {
mw.loader.load( 'ext.discussionTools.debug' ); mw.loader.load( 'ext.discussionTools.debug' );
} else { } else {
pageComments = mw.dt.parser.getComments( document.getElementById( 'mw-content-text' ) ); pageComments = mw.dt.parser.getComments( $pageContainer[ 0 ] );
pageThreads = mw.dt.parser.groupThreads( pageComments ); pageThreads = mw.dt.parser.groupThreads( pageComments );
pageThreads.forEach( traverseNode ); pageThreads.forEach( traverseNode );

9
modules/dt.init.less Normal file
View file

@ -0,0 +1,9 @@
.dt-init-replylink {
user-select: none;
margin-left: 0.25em;
.dt-init-replylink-open & {
color: #72777d;
pointer-events: none;
}
}