MediaWiki:Gadget-DiffDialog.js

$( function () {
	'use strict';
	$( '.mw-changeslist' ).on( 'mouseover', '.mw-changeslist-diff', function( e ) {
		var rev = $( e.target ).closest( 'li' ).attr( 'data-mw-revid' );
		if ( rev ) {
			( new mw.Api() ).get( {
				action: 'compare',
				fromrev: rev,
				torelative: 'prev',
				formatversion: 2
			} ).done( function( data ) {
				var compare = data.compare;
				var body;
				var title;
				var str;
				// Creating and opening a simple dialog window.

				// Subclass Dialog class. Note that the OOjs inheritClass() method extends the parent constructor's prototype and static methods and properties to the child constructor.

				function MyDialog( config ) {
					MyDialog.super.call( this, config );
				}
				var myDialog;
				if ( compare ) {
					body = compare.body;
					if ( compare.fromtitle && compare.totitle ) {
						if ( compare.fromtitle === compare.totitle ) {
							title = compare.fromtitle;
						}
					}
					if ( body ) {
						str = '<table class="diff">';
						if ( title ) {
							str += '<caption>' + mw.html.escape( title ) + '</caption>';
						}
						str += '<tbody>' + body + '</tbody></table>';
						OO.inheritClass( MyDialog, OO.ui.Dialog );

						// Specify a title statically (or, alternatively, with data passed to the opening() method).
						MyDialog.static.name = 'gadgetdiffdialogdialog';
						MyDialog.static.title = 'Simple dialog';

						// Customize the initialize() function: This is where to add content to the dialog body and set up event handlers.
						MyDialog.prototype.initialize = function () {
							// Call the parent method
							MyDialog.super.prototype.initialize.call( this );
							// Create and append a layout and some content.
							this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
							this.content.$element.append( str );
							this.$body.append( this.content.$element );
							$( '.oo-ui-windowManager' ).click( function( e ) {
								if ( !$( e.target ).parents().filter( '.oo-ui-window' ).length ) {
									myDialog.close();
								}
							} );
						};

						// Use the getTeardownProcess() method to perform actions whenever the dialog is closed.
						// This method provides access to data passed into the window's close() method
						// or the window manager's closeWindow() method.
						MyDialog.prototype.getTeardownProcess = function ( data ) {
							return MyDialog.super.prototype.getTeardownProcess.call( this, data )
							.first( function () {
								// Perform any cleanup as needed
								$( '.oo-ui-windowManager' ).remove();
								$( 'body' ).attr( 'style', '' );
							}, this );
						};

						// Make the window.
						myDialog = new MyDialog();

						// Create and append a window manager, which will open and close the window.
						var windowManager = new OO.ui.WindowManager();
						$( 'body' ).append( windowManager.$element );

						// Add the window to the window manager using the addWindows() method.
						windowManager.addWindows( [ myDialog ] );

						// Open the window!
						windowManager.openWindow( myDialog );
					}
				}
			} );
		}
	} );
} );