MediaWiki:Gadget-UserDefinedComments.js

$( function() {
	'use strict';
	var text = 'Comments';
	var title = 'View and edit user-defined edit comments';
	var label = 'Enter your edit comments here (separate with newline)';
	var close = 'Close';
	var closetitle = 'Close the dialog window without inserting any edit comment';
	var key = 'gadget-userdefinedcomments-key';
	function getComments() {
		var commentsoutput = localStorage.getItem( key );
		if ( commentsoutput ) {
			commentsoutput = commentsoutput.trim();
			if ( commentsoutput ) {
				return commentsoutput.split( '\n' );
			}
		}
		return [];
	}
	if ( mw.config.get( 'wgUserLanguage' ) === 'sv' ) {
		text = 'Kommentarer';
		title = 'Visa och redigera användardefinierade redigeringskommentarer';
		label = 'Lägg in dina redigeringskommentarer här (separara med radbrytning)';
		close = 'Stäng';
		closetitle = 'Stäng dialogrutan utan att infoga någon redigeringskommentar';
	}
	$( '#wpSummary' ).after( '<button id="gadget-userdefinedcomments" title="' + title + '" type="button">' + text + '</button>' );
	$( '#gadget-userdefinedcomments' ).click( function( ev ) {
		ev.preventDefault();
		// 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 );
		}

		// Declare early for use in MyDialog.prototype methods
		var myDialog;
		var windowManager;

		OO.inheritClass( MyDialog, OO.ui.Dialog );

		// Specify a title statically (or, alternatively, with data passed to the opening() method).
		MyDialog.static.name = 'gadgetuserdefinedcommentsdialog';
		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 } );
			var comments = getComments();
			var str = '';
			comments.forEach( function( comment ) {
				str += '<button class="gadget-userdefinedcomments-comment">' + mw.html.escape( comment ) + '</button>';
			} );
			str += '<label for="gadget-userdefinedcomments-textarea">' + label + '</label>';
			str += '<textarea id="gadget-userdefinedcomments-textarea"></textarea>';
			str += '<button id="gadget-userdefinedcomments-close" title="' + closetitle + '">' + close + '</button>';
			this.content.$element.append( str );
			this.$body.append( this.content.$element );
			$( '.gadget-userdefinedcomments-comment' ).click( function( ev ) {
				$( '#wpSummary' ).val( function( i, v ) {
					return v + $( ev.currentTarget ).text();
				} );
				myDialog.close();
			} );
			$( '#gadget-userdefinedcomments-textarea' ).change( function( ev ) {
				var commentsinput = $( ev.currentTarget ).val().trim();
				if ( commentsinput ) {
					localStorage.setItem( key, commentsinput );
				} else {
					localStorage.removeItem( key );
				}
			} );
			$( '#gadget-userdefinedcomments-textarea' ).val( comments.join( '\n' ) );
			$( '#gadget-userdefinedcomments-close' ).click( function() {
				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();
			}, this );
		};

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

		// Create and append a window manager, which will open and close the window.
		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 );
	} );
} );