User:Novusistic/TUT quickChangeLog.js

/** * Quick Recent Changes or Changelog * * A user script which adds a "Quick Changelog" link to the page skin's * toolbox, and when clicked it pops up a dialog with up to 25 recent edits. * * Demonstrates: * - Use of the API * - Use of jQuery * - Use of ResourceLoader and some of the default modules that come with it * * Original user script: https://www.mediawiki.org/w/index.php?title=MediaWiki:Tutorial-QuickRC.js * * Modifications: Replaced the jQuery dialog box with OOUI message dialog box. */

// Import the required modules before starting the script mw.loader.using( [ 'mediawiki.util', 'oojs-ui-core', 'oojs-ui-windows' ] ).done( function {

function renderQuickRCDialog( pageLinks ) {

// Creating OOUI message dialog to show the recent changes in formatted manner // OOUI is to be discusses later. var messageDialog = new OO.ui.MessageDialog, // Creating a window manager. windowManager = new OO.ui.WindowManager;

// Appending the window manager. $( 'body' ).append( windowManager.$element );

// Add the dialog to the window manager. windowManager.addWindows( [ messageDialog ] ); messageDialog.$element.css( { zIndex: '100000010' } );

// Configure the message dialog when it is opened with the window manager's openWindow method. windowManager.openWindow( messageDialog, {			title: 'Hello there.',			message: $( ' ' )				.html( ' ' +                   ' Welcome, ' + mw.user.getName + ' ' +                   '! The following pages have been recently modified:' + ' ' + pageLinks.join( ' ' ) + '' ),			size: 'large',			actions: [ {				action: 'accept',				label: 'OK',				flags: 'primary'			} ]		} ); }

function quickRC { var myPageLinks = []; var myTitles = [];

// Fetch recent changes from the API by one of jQuery's AJAX functions jQuery.getJSON(			mw.util.wikiScript( 'api' ),			{				format: 'json',				action: 'query',				list: 'recentchanges',				rclimit: 25			},			function ( data ) {				var recentChanges = data.query.recentchanges;

// Build a unique array of links, using the mw.html library to format them. $.each( recentChanges, function ( index, rc ) {

// Don't link to this title if we've seen this title already if ( $.inArray( rc.title, myTitles ) === -1 ) { myPageLinks.push(							mw.html.element( 'a', { href: mw.util.getUrl( rc.title ) }, rc.title )						);					}					myTitles.push( rc.title ); } );

renderQuickRCDialog( myPageLinks ); }		);	}

$( function {

// Add a link to the toolbox var link = mw.util.addPortletLink(			'p-tb',			'#',			'QUICK CHANGELOG',			't-prettylinkwidget',			'Show a list of recent changes',			'/',			'#t-whatlinkshere'		);

// Create a jQuery object for this link so that we get // to use jQuery awesomeness like .click for binding functions to events // and methods like e.preventDefault; $( link ).on( 'click', function ( e ) {			// Avoid the browser going to '#'			e.preventDefault;

// Initiate quickRC! quickRC; } );

} );

} );