Realtime Preview: Refactor event handler for easier re-use

Instead of exposing a way of adding event listeners, just expose
the event handler and let consumers (i.e. CodeMirror) add it
to whatever events it wants.

Bug: T303767
Follow-Up: I8c8c25fe56be55a61f4b8d1d2ef8cf74483aa241
Change-Id: Iee4c885f92dd9ec985a3f9fd92a2fafc00f2e9ff
This commit is contained in:
Sam Wilson 2022-04-04 13:30:05 +08:00
parent 76d17a750e
commit 981a9c762a

View file

@ -115,8 +115,12 @@ RealtimePreview.prototype.toggle = function () {
this.twoPaneLayout.$element.css( 'height', $uiText.height() + 'px' );
$uiText.css( 'height', '100%' );
// Enable realtime previewing.
this.addPreviewListener( $textarea );
// Load the preview when enabling,
this.doRealtimePreview();
// and also on keyup, change, paste etc.
$textarea
.off( this.eventNames )
.on( this.eventNames, this.getEventHandler() );
// Let other things happen after enabling.
mw.hook( 'ext.WikiEditor.realtimepreview.enable' ).fire( this );
@ -130,18 +134,13 @@ RealtimePreview.prototype.toggle = function () {
/**
* @public
* @param {jQuery} $editor The element to listen to changes on.
* @return {Function}
*/
RealtimePreview.prototype.addPreviewListener = function ( $editor ) {
// Get preview when enabling.
this.doRealtimePreview();
// Also get preview on keyup, change, paste etc.
$editor
.off( this.eventNames )
.on( this.eventNames, mw.util.debounce(
this.doRealtimePreview.bind( this ),
this.configData.realtimeDebounce
) );
RealtimePreview.prototype.getEventHandler = function () {
return mw.util.debounce(
this.doRealtimePreview.bind( this ),
this.configData.realtimeDebounce
);
};
/**