mediawiki-extensions-Discus.../modules/dt.ui.ReplyWidget.js
Bartosz Dziewoński da668b72d5 Identify comments by username+timestamp+seq
Possible use cases:
* Matching comments between PHP and Parsoid HTML [implemented here]
* Finding the same comment in a different revision of a page
  (e.g. while resolving an edit conflict, or to allow resuming
  composition of autosaved comments) [implemented for highlighting
  user's own posted comment only]
* Permanent links to comments [future]

The reasoning for this form of ID is:
* _Timestamp_ by itself is a nearly unique identifier, so it's a good
  thing to start with
* Users may post multiple comments in one edit (or in many edits in
  one minute), so we need the _sequential number_ to distinguish them
* _Username_ is probably not required, but it may reduce the need
  for sequential numbers, and will help with human-readability if we
  add permanent links

The ID remains stable when a new comment is added anywhere by anyone
(excepts comments within the same minute by the same user), or when a
section is renamed.

It's not always stable when a comment is moved or when an entire
section is moved or deleted (archived), but you can't have everything.

Change-Id: Idaae6427d659d12b82e37f1791bd03833632c7c0
2019-12-09 13:45:31 +00:00

107 lines
2.9 KiB
JavaScript

/**
* DiscussionTools ReplyWidget class
*
* @class
* @extends OO.ui.Widget
* @constructor
* @param {Object} comment Parsed comment object
* @param {Object} [config] Configuration options
*/
mw.dt.ui.ReplyWidget = function ( comment, config ) {
// Parent constructor
mw.dt.ui.ReplyWidget.super.call( this, config );
this.comment = comment;
this.textWidget = new OO.ui.MultilineTextInputWidget( $.extend( {
rows: 3,
autosize: true,
// The following classes can be used here:
// * mw-editfont-monospace
// * mw-editfont-sans-serif
// * mw-editfont-serif
classes: [ 'mw-editfont-' + mw.user.options.get( 'editfont' ) ]
}, config ) );
this.replyButton = new OO.ui.ButtonWidget( {
flags: [ 'primary', 'progressive' ],
label: mw.msg( 'discussiontools-replywidget-reply' )
} );
this.cancelButton = new OO.ui.ButtonWidget( {
flags: [ 'destructive' ],
label: mw.msg( 'discussiontools-replywidget-cancel' )
} );
// Events
this.replyButton.connect( this, { click: 'onReplyClick' } );
this.cancelButton.connect( this, { click: [ 'emit', 'cancel' ] } );
this.$element.on( 'keydown', this.onKeyDown.bind( this ) );
// Initialization
this.$element.addClass( 'dt-ui-replyWidget' ).append(
this.textWidget.$element,
$( '<div>' ).addClass( 'dt-ui-replyWidget-actions' ).append(
this.cancelButton.$element,
this.replyButton.$element
)
);
};
/* Inheritance */
OO.inheritClass( mw.dt.ui.ReplyWidget, OO.ui.Widget );
/* Methods */
mw.dt.ui.ReplyWidget.prototype.focus = function () {
this.textWidget.focus();
};
mw.dt.ui.ReplyWidget.prototype.onKeyDown = function ( e ) {
if ( e.which === OO.ui.Keys.ESCAPE ) {
this.emit( 'cancel' );
return false;
}
if ( e.which === OO.ui.Keys.ENTER && ( e.ctrlKey || e.metaKey ) ) {
this.onReplyClick();
return false;
}
};
mw.dt.ui.ReplyWidget.prototype.onReplyClick = function () {
var repliedTo,
widget = this;
this.textWidget.pushPending();
this.textWidget.setDisabled( true );
this.comment.parsoidPromise.then( function ( parsoidData ) {
repliedTo = parsoidData.comment.id;
return mw.dt.controller.postReply( widget, parsoidData );
} ).then( function ( data ) {
// eslint-disable-next-line no-jquery/no-global-selector
var $container = $( '#mw-content-text' );
// Update page state
$container.html( data.content );
mw.config.set( {
wgCurRevisionId: data.newrevid,
wgRevisionId: data.newrevid
} );
mw.config.set( data.jsconfigvars );
mw.loader.load( data.modules );
// TODO update categories, lastmodified
// (see ve.init.mw.DesktopArticleTarget.prototype.replacePageContent)
// Re-initialize
mw.dt.controller.init( $container, {
repliedTo: repliedTo
} );
mw.hook( 'wikipage.content' ).fire( $container );
// TODO: Tell controller to teardown all previous widgets
} ).always( function () {
widget.textWidget.popPending();
widget.textWidget.setDisabled( false );
} );
};