MediaWiki:Gadget-Teckenstorlek.js

if ( window.Storage ) {
	$( function () {
		'use strict';
		var storage;
		// ensure localStorage available
		try {
    		localStorage.setItem('MediaWiki:Gadget-Teckenstorlek.js', '1');
    		localStorage.removeItem('MediaWiki:Gadget-Teckenstorlek.js');
    		storage = localStorage;
    	} catch (e) {
    		return;
    	}
		if ( mw.config.get( 'wgUserName' ) === null ) {
			storage = sessionStorage;
		}
		var textbox = $( '#wpTextbox1' );
		var summarylabel = $( '#wpSummaryLabel' );
		var key = 'gadget-teckenstorlek';
		var savedvalue = storage.getItem( key );
		var title = 'Set the font size for the edit window';
		var text = 'Font size';
		var message = 'Set the font size in pixels:';
		var savetext = 'Save';
		var savetitle = 'Save the input and close the dialog';
		var closetext = 'Close';
		var closetitle = 'Close the dialog without saving';
		var resettext = 'Reset';
		var resettitle = 'Remove the saved value and close the dialog';
		function setValue( val ) {
			if ( val ) {
				val = val.trim();
				if ( val ) {
					if ( /^\d+$/.test( val ) ) {
						textbox.css( 'font-size', val + 'px' );
					} else {
						textbox.css( 'font-size', val );
					}
				}
			}
		}
		if ( mw.config.get( 'wgUserLanguage' ) === 'sv' ) {
			title = 'Bestäm teckenstorlek för redigeringsrutan';
			text = 'Teckenstorlek';
			message = 'Ange teckenstorlek i antal pixlar:';
			savetext = 'Spara';
			savetitle = 'Spara inmatningen och stäng dialogrutan';
			closetext = 'Stäng';
			closetitle = 'Stäng dialogrutan utan att spara';
			resettext = 'Återställ';
			resettitle = 'Ta bort det sparade värdet och stäng dialogrutan';
		}
		if ( textbox.length && summarylabel.length ) {
			setValue( savedvalue );
			summarylabel.after( '<button type="button" id="gadget-teckenstorlek-button" title="' + title + '">' + text + '</button>' );
			$( '#gadget-teckenstorlek-button' ).click( function ( e ) {
				e.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 );
				}
				if ( $( '.oo-ui-window-active' ).length === 0 ) {
					OO.inheritClass( MyDialog, OO.ui.Dialog );

					// Specify a title statically (or, alternatively, with data passed to the opening() method).
					MyDialog.static.name = 'gadgetteckenstorlekdialog';
					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 () {
						var current = textbox.css( 'font-size' );
						var str = '<div id="gadget-teckenstorlek-container">';
						str += '<p>' + message + '</p>';
						str += '<input id="gadget-teckenstorlek-input" value="' + current + '">';
						str += '<button id="gadget-teckenstorlek-save" title="' + savetitle + '">' + savetext + '</button>';
						str += '<button id="gadget-teckenstorlek-close" title="' + closetitle + '">' + closetext + '</button>';
						if ( storage.getItem( key ) !== null ) {
							str += '<button id="gadget-teckenstorlek-reset" title="' + resettitle + '">' + resettext + '</button>';
						}
						str += '</div>';
						// 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 );
					};

					// Set up the ready mode of the window. 
					MyDialog.prototype.getReadyProcess = function ( data ) {
						return MyDialog.super.prototype.getReadyProcess.call( this, data )
						.next( function () {
							$( '#gadget-teckenstorlek-input' ).select();
						}, this );
					};

					// 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.
					var 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 );
					$( '#gadget-teckenstorlek-save' ).click( function() {
						var value = $( '#gadget-teckenstorlek-input' ).val();
						setValue( value );
						storage.setItem( key, value );
						myDialog.close();
					} );
					$( '#gadget-teckenstorlek-close' ).click( function() {
						myDialog.close();
					} );
					$( '#gadget-teckenstorlek-reset' ).click( function() {
						storage.removeItem( key );
						myDialog.close();
					} );
					$( '#gadget-teckenstorlek-container' ).keyup( function( e ) {
						if ( e.which === 13 ) {
							$( '#gadget-teckenstorlek-save' ).trigger( 'click' );
						}
					} );
				}
			} );
		}
	} );
}