mediawiki-extensions-Discus.../modules/CommentController.js
Ed Sanders 434e11df87 Enable new comment notifications on mobile
Since writing this feature we added the ability to update
the page dynamically on mobile, so this shoud just work now.

Bug: T301929
Change-Id: Iceb5d8c90a892807745ba7133b7dd389293d3327
2022-07-31 00:07:14 +01:00

725 lines
23 KiB
JavaScript

var
controller = require( './controller.js' ),
modifier = require( './modifier.js' ),
logger = require( './logger.js' ),
dtConf = require( './config.json' ),
CommentItem = require( './CommentItem.js' ),
scrollPadding = { top: 10, bottom: 10 },
defaultEditMode = mw.user.options.get( 'discussiontools-editmode' ) || mw.config.get( 'wgDiscussionToolsFallbackEditMode' ),
defaultVisual = defaultEditMode === 'visual',
featuresEnabled = mw.config.get( 'wgDiscussionToolsFeaturesEnabled' ) || {},
enable2017Wikitext = featuresEnabled.sourcemodetoolbar,
conf = mw.config.get( 'wgVisualEditorConfig' ),
visualModules = [ 'ext.discussionTools.ReplyWidgetVisual' ]
.concat( conf.pluginModules.filter( mw.loader.getState ) ),
plainModules = [ 'ext.discussionTools.ReplyWidgetPlain' ];
if ( OO.ui.isMobile() ) {
visualModules = [
'ext.visualEditor.core.mobile',
'ext.visualEditor.mwextensions'
].concat( visualModules );
} else {
visualModules = [
'ext.visualEditor.core.desktop',
'ext.visualEditor.desktopTarget',
'ext.visualEditor.mwextensions.desktop'
].concat( visualModules );
}
// Start loading reply widget code
if ( defaultVisual || enable2017Wikitext ) {
mw.loader.using( visualModules );
} else {
mw.loader.using( plainModules );
}
/**
* Handles setup, save and teardown of commenting widgets
*
* @param {jQuery} $pageContainer Page container
* @param {ThreadItem} threadItem Thread item to attach new comment to
* @param {ThreadItemSet} threadItemSet
*/
function CommentController( $pageContainer, threadItem, threadItemSet ) {
// Mixin constructors
OO.EventEmitter.call( this );
this.$pageContainer = $pageContainer;
this.threadItem = threadItem;
this.threadItemSet = threadItemSet;
this.newListItem = null;
this.replyWidgetPromise = null;
this.newComments = [];
this.parentRemoved = false;
this.oldId = mw.config.get( 'wgRevisionId' );
this.pollTimeout = null;
this.onVisibilityChangeHandler = this.onVisibilityChange.bind( this );
}
OO.initClass( CommentController );
OO.mixinClass( CommentController, OO.EventEmitter );
/* CommentController private utilities */
/**
* Get the latest revision ID of the page.
*
* @param {string} pageName
* @return {jQuery.Promise}
*/
function getLatestRevId( pageName ) {
return controller.getApi().get( {
action: 'query',
prop: 'revisions',
rvprop: 'ids',
rvlimit: 1,
titles: pageName
} ).then( function ( resp ) {
return resp.query.pages[ 0 ].revisions[ 0 ].revid;
} );
}
/**
* Like #checkThreadItemOnPage, but assumes the comment was found on the current page,
* and then follows transclusions to determine the source page where it is written.
*
* @return {jQuery.Promise} Promise which resolves with a CommentDetails object, or rejects with an error
*/
CommentController.prototype.getTranscludedFromSource = function () {
var pageName = mw.config.get( 'wgRelevantPageName' ),
oldId = mw.config.get( 'wgCurRevisionId' ),
threadItem = this.getThreadItem();
function followTransclusion( recursionLimit, code, data ) {
var errorData;
if ( recursionLimit > 0 && code === 'comment-is-transcluded' ) {
errorData = data.errors[ 0 ].data;
if ( errorData.follow && typeof errorData.transcludedFrom === 'string' ) {
return getLatestRevId( errorData.transcludedFrom ).then( function ( latestRevId ) {
// Fetch the transcluded page, until we cross the recursion limit
return controller.checkThreadItemOnPage( errorData.transcludedFrom, latestRevId, threadItem )
.catch( followTransclusion.bind( null, recursionLimit - 1 ) );
} );
}
}
return $.Deferred().reject( code, data );
}
// Arbitrary limit of 10 steps, which should be more than anyone could ever need
// (there are reasonable use cases for at least 2)
var promise = controller.checkThreadItemOnPage( pageName, oldId, threadItem )
.catch( followTransclusion.bind( null, 10 ) );
return promise;
};
/* Static properties */
CommentController.static.initType = 'page';
/* Methods */
/**
* Create and setup the reply widget
*
* @param {string} [mode] Optionally force a mode, 'visual' or 'source'
* @param {boolean} [hideErrors] Suppress errors, e.g. when restoring auto-save
* @param {boolean} [suppressNotifications] Don't notify the user if recovering auto-save
*/
CommentController.prototype.setup = function ( mode, hideErrors, suppressNotifications ) {
var threadItem = this.getThreadItem(),
commentController = this;
if ( mode === undefined ) {
mode = mw.user.options.get( 'discussiontools-editmode' ) ||
( defaultVisual ? 'visual' : 'source' );
}
logger( {
action: 'init',
type: this.constructor.static.initType || 'page',
mechanism: 'click',
// eslint-disable-next-line camelcase
editor_interface: mode === 'visual' ? 'visualeditor' :
( enable2017Wikitext ? 'wikitext-2017' : 'wikitext' )
} );
if ( !this.replyWidgetPromise ) {
this.replyWidgetPromise = this.getTranscludedFromSource().then( function ( commentDetails ) {
return commentController.createReplyWidget( commentDetails, { mode: mode } );
}, function ( code, data ) {
commentController.teardown();
if ( !hideErrors ) {
OO.ui.alert(
code instanceof Error ? code.toString() : controller.getApi().getErrorMessage( data ),
{ size: 'medium' }
);
}
logger( {
action: 'abort',
type: 'preinit'
} );
commentController.replyWidgetPromise = null;
return $.Deferred().reject();
} );
// On first load, add a placeholder list item
commentController.newListItem = modifier.addListItem( threadItem, dtConf.replyIndentation );
if ( commentController.newListItem.tagName.toLowerCase() === 'li' ) {
// When using bullet syntax, hide the marker. (T259864#7634107)
$( commentController.newListItem ).addClass( 'ext-discussiontools-init-noMarker' );
}
$( commentController.newListItem ).append(
// Microsoft Edge's built-in translation feature replaces the entire element when it finishes
// translating it, which often happens after our interface has loaded, clobbering it, unless
// we wrap this loading message in another element.
$( '<span>' ).text( mw.msg( 'discussiontools-replywidget-loading' ) )
);
}
if (
this.threadItem instanceof CommentItem &&
this.threadItem.getSubscribableHeading()
) {
// Use the revision ID of the content on the page, not wgCurRevisionId
// This means you will more likely get a refresh warning when deliberately
// viewing old revisions, which is helpful.
this.startPoll();
$( document ).on( 'visibilitychange', this.onVisibilityChangeHandler );
}
this.replyWidgetPromise.then( function ( replyWidget ) {
if ( !commentController.newListItem ) {
// On subsequent loads, there's no list item yet, so create one now
commentController.newListItem = modifier.addListItem( threadItem, dtConf.replyIndentation );
if ( commentController.newListItem.tagName.toLowerCase() === 'li' ) {
// When using bullet syntax, hide the marker. (T259864#7634107)
$( commentController.newListItem ).addClass( 'ext-discussiontools-init-noMarker' );
}
}
$( commentController.newListItem ).empty().append( replyWidget.$element );
commentController.setupReplyWidget( replyWidget, {}, suppressNotifications );
commentController.showAndFocus();
logger( { action: 'ready' } );
logger( { action: 'loaded' } );
} );
};
/**
* Handle document visibilitychange events
*
* This allows us to pause polling when the user switches to another tab
*/
CommentController.prototype.onVisibilityChange = function () {
if ( document.hidden ) {
this.stopPoll();
} else if ( !this.pollTimeout ) {
this.pollTimeout = setTimeout( this.startPoll.bind( this ), 5000 );
}
};
CommentController.prototype.startPoll = function () {
var threadItemId = this.threadItem.id;
var subscribableHeadingId = this.threadItem.getSubscribableHeading().id;
var commentController = this;
this.pollApiRequest = controller.getApi().get( {
action: 'discussiontoolscompare',
fromrev: this.oldId,
totitle: mw.config.get( 'wgRelevantPageName' )
} );
this.pollApiRequest.then( function ( response ) {
function relevantCommentFilter( cmt ) {
return cmt.subscribableHeadingId === subscribableHeadingId &&
// Ignore posts by yourself, if logged in
cmt.author !== mw.user.getName();
}
var result = OO.getProp( response, 'discussiontoolscompare' ) || {};
var addedComments = result.addedcomments.filter( relevantCommentFilter );
var removedComments = result.removedcomments.filter( relevantCommentFilter );
if ( addedComments.length || removedComments.length ) {
commentController.updateNewCommentsWarning( addedComments, removedComments );
}
// Parent comment was deleted
var isParentRemoved = result.removedcomments.some( function ( cmt ) {
return cmt.id === threadItemId;
} );
// Parent comment was deleted then added back (e.g. reverted vandalism)
var isParentAdded = result.addedcomments.some( function ( cmt ) {
return cmt.id === threadItemId;
} );
if ( isParentAdded ) {
commentController.setParentRemoved( false );
} else if ( isParentRemoved ) {
commentController.setParentRemoved( true );
}
commentController.oldId = result.torevid;
} ).always( function () {
commentController.pollTimeout = setTimeout( commentController.startPoll.bind( commentController ), 5000 );
} );
};
CommentController.prototype.stopPoll = function () {
if ( this.pollTimeout ) {
clearTimeout( this.pollTimeout );
this.pollTimeout = null;
}
if ( this.pollApiRequest ) {
this.pollApiRequest.abort();
this.pollApiRequest = null;
}
};
/**
* Get thread item this controller is attached to
*
* @return {ThreadItem} Thread item
*/
CommentController.prototype.getThreadItem = function () {
return this.threadItem;
};
/**
* Get the reply widget class to use in this controller
*
* @param {boolean} visual Prefer the VE-based class
* @return {jQuery.Promise} Promise which resolves with a Function: the reply widget class
*/
CommentController.prototype.getReplyWidgetClass = function ( visual ) {
// If 2017WTE mode is enabled, always use ReplyWidgetVisual.
visual = visual || enable2017Wikitext;
return mw.loader.using( visual ? visualModules : plainModules ).then( function () {
return require( visual ? 'ext.discussionTools.ReplyWidgetVisual' : 'ext.discussionTools.ReplyWidgetPlain' );
} );
};
/**
* Create a reply widget
*
* @param {CommentDetails} commentDetails
* @param {Object} config
* @return {jQuery.Promise} Promise resolved with a ReplyWidget
*/
CommentController.prototype.createReplyWidget = function ( commentDetails, config ) {
var commentController = this;
return this.getReplyWidgetClass( config.mode === 'visual' ).then( function ( ReplyWidget ) {
return new ReplyWidget( commentController, commentDetails, config );
} );
};
CommentController.prototype.setupReplyWidget = function ( replyWidget, data, suppressNotifications ) {
replyWidget.connect( this, {
teardown: 'teardown',
reloadPage: this.emit.bind( this, 'reloadPage' )
} );
replyWidget.setup( data, suppressNotifications );
replyWidget.updateNewCommentsWarning( this.newComments );
replyWidget.updateParentRemovedError( this.parentRemoved );
this.replyWidget = replyWidget;
};
/**
* Focus the first input field inside the controller.
*/
CommentController.prototype.focus = function () {
this.replyWidget.focus();
};
CommentController.prototype.showAndFocus = function () {
var commentController = this;
this.replyWidget.scrollElementIntoView( { padding: scrollPadding } )
.then( function () {
commentController.focus();
} );
};
CommentController.prototype.teardown = function ( mode ) {
if ( mode === 'refresh' ) {
$( this.newListItem ).empty().append(
$( '<span>' ).text( mw.msg( 'discussiontools-replywidget-loading' ) )
);
} else {
modifier.removeAddedListItem( this.newListItem );
this.newListItem = null;
}
this.stopPoll();
$( document ).off( 'visibilitychange', this.onVisibilityChangeHandler );
this.emit( 'teardown', mode );
};
/**
* Get the parameters of the API query that can be used to post this comment.
*
* @param {string} pageName Title of the page to post on
* @param {Object} checkboxes Value of the promise returned by controller#getCheckboxesPromise
* @return {Object.<string,string>} API query data
*/
CommentController.prototype.getApiQuery = function ( pageName, checkboxes ) {
var threadItem = this.getThreadItem();
var replyWidget = this.replyWidget;
var sameNameComments = this.threadItemSet.findCommentsByName( threadItem.name );
var mode = replyWidget.getMode();
var tags = [
'discussiontools',
'discussiontools-reply',
'discussiontools-' + mode
];
if ( mode === 'source' && enable2017Wikitext ) {
tags.push( 'discussiontools-source-enhanced' );
}
var data = {
action: 'discussiontoolsedit',
paction: 'addcomment',
page: pageName,
commentname: threadItem.name,
// Only specify this if necessary to disambiguate, to avoid errors if the parent changes
commentid: sameNameComments.length > 1 ? threadItem.id : undefined,
summary: replyWidget.getEditSummary(),
formtoken: replyWidget.getFormToken(),
assert: mw.user.isAnon() ? 'anon' : 'user',
assertuser: mw.user.getName() || undefined,
uselang: mw.config.get( 'wgUserLanguage' ),
// HACK: Always display reply links afterwards, ignoring preferences etc., in case this was
// a page view with reply links forced with ?dtenable=1 or otherwise
dtenable: '1',
dttags: tags.join( ',' ),
editingStatsId: logger.getSessionId()
};
if ( replyWidget.getMode() === 'source' ) {
data.wikitext = replyWidget.getValue();
} else {
data.html = replyWidget.getValue();
}
var captchaInput = replyWidget.captchaInput;
if ( captchaInput ) {
data.captchaid = captchaInput.getCaptchaId();
data.captchaword = captchaInput.getCaptchaWord();
}
if ( checkboxes.checkboxesByName.wpWatchthis ) {
data.watchlist = checkboxes.checkboxesByName.wpWatchthis.isSelected() ?
'watch' :
'unwatch';
}
return data;
};
/**
* Save the comment in the comment controller
*
* @param {string} pageName Page title
* @return {jQuery.Promise} Promise which resolves when the save is complete
*/
CommentController.prototype.save = function ( pageName ) {
var replyWidget = this.replyWidget,
commentController = this,
threadItem = this.getThreadItem();
return this.replyWidget.checkboxesPromise.then( function ( checkboxes ) {
var data = commentController.getApiQuery( pageName, checkboxes );
// No timeout. Huge talk pages can take a long time to save, and falsely reporting an error
// could result in duplicate messages if the user retries. (T249071)
var defaults = OO.copy( controller.getApi().defaults );
defaults.ajax.timeout = 0;
var noTimeoutApi = new mw.Api( defaults );
return mw.libs.ve.targetSaver.postContent(
data, { api: noTimeoutApi }
).catch( function ( code, responseData ) {
// Better user-facing error messages
if ( code === 'editconflict' ) {
return $.Deferred().reject( code, { errors: [ {
code: code,
html: mw.message( 'discussiontools-error-comment-conflict' ).parse()
} ] } ).promise();
}
if (
code === 'discussiontools-commentid-notfound' ||
code === 'discussiontools-commentname-ambiguous' ||
code === 'discussiontools-commentname-notfound'
) {
return $.Deferred().reject( code, { errors: [ {
code: code,
html: mw.message( 'discussiontools-error-comment-disappeared' ).parse()
} ] } ).promise();
}
return $.Deferred().reject( code, responseData ).promise();
} ).then( function ( responseData ) {
controller.update( responseData, threadItem, pageName, replyWidget );
} );
} );
};
/**
* Add a list of comment objects that are new on the page since it was last refreshed
*
* @param {Object[]} addedComments Array of JSON-serialized CommentItem's
* @param {Object[]} removedComments Array of JSON-serialized CommentItem's
*/
CommentController.prototype.updateNewCommentsWarning = function ( addedComments, removedComments ) {
var commentController = this;
// Add new comments
this.newComments.push.apply( this.newComments, addedComments );
// Delete any comments which have since been deleted (e.g. posted then reverted)
var removedCommentIds = removedComments.filter( function ( cmt ) {
return cmt.id;
} );
this.newComments = this.newComments.filter( function ( cmt ) {
// If comment ID is not in removedCommentIds, keep it
return removedCommentIds.indexOf( cmt.id ) === -1;
} );
this.replyWidgetPromise.then( function ( replyWidget ) {
replyWidget.updateNewCommentsWarning( commentController.newComments );
} );
};
/**
* Record whether the parent thread item has been removed
*
* @param {boolean} parentRemoved
*/
CommentController.prototype.setParentRemoved = function ( parentRemoved ) {
var commentController = this;
this.parentRemoved = parentRemoved;
this.replyWidgetPromise.then( function ( replyWidget ) {
replyWidget.updateParentRemovedError( commentController.parentRemoved );
} );
};
/**
* Switch reply widget to wikitext input
*
* @return {jQuery.Promise} Promise which resolves when switch is complete
*/
CommentController.prototype.switchToWikitext = function () {
var oldWidget = this.replyWidget,
target = oldWidget.replyBodyWidget.target,
oldShowAdvanced = oldWidget.showAdvanced,
oldEditSummary = oldWidget.getEditSummary(),
previewDeferred = $.Deferred(),
commentController = this;
// TODO: We may need to pass oldid/etag when editing is supported
var wikitextPromise = target.getWikitextFragment( target.getSurface().getModel().getDocument() );
this.replyWidgetPromise = this.createReplyWidget(
oldWidget.commentDetails,
{ mode: 'source' }
);
return $.when( wikitextPromise, this.replyWidgetPromise ).then( function ( wikitext, replyWidget ) {
// To prevent the "Reply" / "Cancel" buttons from shifting when the preview loads,
// wait for the preview (but no longer than 500 ms) before swithing the editors.
replyWidget.preparePreview( wikitext ).then( previewDeferred.resolve );
setTimeout( previewDeferred.resolve, 500 );
return previewDeferred.then( function () {
// Teardown the old widget
oldWidget.disconnect( commentController );
oldWidget.teardown();
// Swap out the DOM nodes
oldWidget.$element.replaceWith( replyWidget.$element );
commentController.setupReplyWidget( replyWidget, {
value: wikitext,
showAdvanced: oldShowAdvanced,
editSummary: oldEditSummary
} );
// Focus the editor
replyWidget.focus();
} );
} );
};
/**
* Remove empty lines and add indent characters to convert the paragraphs in given wikitext to
* definition list items, as customary in discussions.
*
* @param {string} wikitext
* @param {string} indent Indent character, ':' or '*'
* @return {string}
*/
CommentController.prototype.doIndentReplacements = function ( wikitext, indent ) {
wikitext = modifier.sanitizeWikitextLinebreaks( wikitext );
wikitext = wikitext.split( '\n' ).map( function ( line ) {
return indent + line;
} ).join( '\n' );
return wikitext;
};
/**
* Turn definition list items, customary in discussions, back into normal paragraphs, suitable for
* the editing interface.
*
* @param {Node} rootNode Node potentially containing definition lists (modified in-place)
*/
CommentController.prototype.undoIndentReplacements = function ( rootNode ) {
var children = Array.prototype.slice.call( rootNode.childNodes );
// There may be multiple lists when some lines are template generated
children.forEach( function ( child ) {
if ( child.nodeType === Node.ELEMENT_NODE ) {
// Unwrap list
modifier.unwrapList( child );
}
} );
};
/**
* Get the list of selectors that match nodes that can't be inserted in the comment. (We disallow
* things that generate wikitext syntax that may conflict with list item syntax.)
*
* @return {Object.<string,string>} Map of type used for error messages (string) to CSS selector (string)
*/
CommentController.prototype.getUnsupportedNodeSelectors = function () {
return {
// Tables are almost always multi-line
table: 'table',
// Headings are converted to plain text before we can detect them:
// `:==h2==` -> `<p>==h2==</p>`
// heading: 'h1, h2, h3, h4, h5, h6',
// Templates can be multiline
template: '[typeof*="mw:Transclusion"]',
// Extensions (includes references) can be multiline, could be supported later (T251633)
extension: '[typeof*="mw:Extension"]'
// Images are probably fine unless a multi-line caption was used (rare)
// image: 'figure, figure-inline'
};
};
/**
* Switch reply widget to visual input
*
* @return {jQuery.Promise} Promise which resolves when switch is complete
*/
CommentController.prototype.switchToVisual = function () {
var oldWidget = this.replyWidget,
oldShowAdvanced = oldWidget.showAdvanced,
oldEditSummary = oldWidget.getEditSummary(),
wikitext = oldWidget.getValue(),
commentController = this;
// Replace wikitext signatures with a special marker recognized by DtDmMWSignatureNode
// to render them as signature nodes in visual mode.
wikitext = wikitext.replace(
// Replace ~~~~ (four tildes), but not ~~~~~ (five tildes)
/([^~]|^)~~~~([^~]|$)/g,
'$1<span data-dtsignatureforswitching="1"></span>$2'
);
var parsePromise;
if ( wikitext ) {
wikitext = this.doIndentReplacements( wikitext, dtConf.replyIndentation === 'invisible' ? ':' : '*' );
// Based on ve.init.mw.Target#parseWikitextFragment
parsePromise = controller.getApi().post( {
action: 'visualeditor',
paction: 'parsefragment',
page: oldWidget.pageName,
wikitext: wikitext,
pst: true
} ).then( function ( response ) {
return response && response.visualeditor.content;
} );
} else {
parsePromise = $.Deferred().resolve( '' ).promise();
}
this.replyWidgetPromise = this.createReplyWidget(
oldWidget.commentDetails,
{ mode: 'visual' }
);
return $.when( parsePromise, this.replyWidgetPromise ).then( function ( html, replyWidget ) {
var unsupportedSelectors = commentController.getUnsupportedNodeSelectors();
var doc;
if ( html ) {
doc = replyWidget.replyBodyWidget.target.parseDocument( html );
// Remove RESTBase IDs (T253584)
mw.libs.ve.stripRestbaseIds( doc );
// Check for tables, headings, images, templates
for ( var type in unsupportedSelectors ) {
if ( doc.querySelector( unsupportedSelectors[ type ] ) ) {
var $msg = $( '<div>' ).html(
mw.message(
'discussiontools-error-noswitchtove',
// The following messages are used here:
// * discussiontools-error-noswitchtove-extension
// * discussiontools-error-noswitchtove-table
// * discussiontools-error-noswitchtove-template
mw.msg( 'discussiontools-error-noswitchtove-' + type )
).parse()
);
$msg.find( 'a' ).attr( {
target: '_blank',
rel: 'noopener'
} );
OO.ui.alert(
$msg.contents(),
{
title: mw.msg( 'discussiontools-error-noswitchtove-title' ),
size: 'medium'
}
);
mw.track( 'dt.schemaVisualEditorFeatureUse', {
feature: 'editor-switch',
action: 'dialog-prevent-show'
} );
return $.Deferred().reject().promise();
}
}
commentController.undoIndentReplacements( doc.body );
}
// Teardown the old widget
oldWidget.disconnect( commentController );
oldWidget.teardown();
// Swap out the DOM nodes
oldWidget.$element.replaceWith( replyWidget.$element );
commentController.setupReplyWidget( replyWidget, {
value: doc,
showAdvanced: oldShowAdvanced,
editSummary: oldEditSummary
} );
// Focus the editor
replyWidget.focus();
} );
};
module.exports = CommentController;