MediaWiki:Gadget-AutoSave.js

if ( window.Storage ) {
	$( function() {
		'use strict';
		var text = 'Saved wikitext';
		var tooltip = 'View and copy saved wikitext on your computer';
		var selecttext = 'Select the wikitext';
		var selecttitle = 'Select the wikitext for easy copying';
		var settingstext = 'Settings';
		var settingstitle = 'Settings for auto save';
		var closetext = 'Close';
		var closetitle = 'Close the dialog window';
		var typeofoptions = 'Choose type of options';
		var lengthbuttontext = 'Minimum length';
		var lengthbuttontitle = 'Set the minimum length to be saved';
		var timebuttontext = 'Time interval';
		var timebuttontitle = 'Set the time interval between the saves';
		var settingsdescriptionlength = 'Set the minimum length (in number of characters) to be saved';
		var settingsdescriptiontime = 'Set the time interval (in number of milliseconds) between the saves';
		var savetext = 'Save';
		var savetitle = 'Save the input and close the dialog';
		var removelocalstoragetext = 'Remove saved wikitext';
		var removelocalstoragetitle = 'Remove wikitext saved on the computer';
		var removesavedlengthtext = 'Reset minimum length';
		var removesavedlengthtitle = 'Remove saved custom minimum length to save';
		var removesavedtimetext = 'Reset time interval';
		var removesavedtimetitle = 'Remove saved custom time interval between the saves';
		if ( mw.config.get('wgUserLanguage') === 'sv' ) {
			text = 'Sparad wikitext';
			tooltip = 'Visa och kopiera sparad wikitext som finns på din dator';
			selecttext = 'Markera wikitexten';
			selecttitle = 'Markera wikitexten för att enkelt kunna kopiera den';
			settingstext = 'Inställningar';
			settingstitle = 'Inställningar för autospar';
			closetext = 'Stäng';
			closetitle = 'Stäng dialogrutan';
			typeofoptions = 'Välj typ av inställningar';
			lengthbuttontext = 'Minimilängd';
			lengthbuttontitle = 'Bestäm hur lång texten måste vara för att få sparas';
			timebuttontext = 'Tidsintervall';
			timebuttontitle = 'Bestäm tidsintervallet mellan sparningarna';
			settingsdescriptionlength = 'Bestäm hur lång texten måste vara (i antal tecken) för att få sparas';
			settingsdescriptiontime = 'Bestäm tidsintervallet (i antal millisekunder) mellan sparningarna';
			savetext = 'Spara';
			savetitle = 'Spara inställningar och stäng dialogrutan';
			removelocalstoragetext = 'Ta bort sparad wikitext';
			removelocalstoragetitle = 'Ta bort sparad wikitext från datorn';
			removesavedlengthtext = 'Återställ minimilängd';
			removesavedlengthtitle = 'Ta bort sparad anpassad minimilängd som får sparas';
			removesavedtimetext = 'Återställ tidsintervall';
			removesavedtimetitle = 'Ta bort sparat anpassat tidsintervall för sparningarna';
		}
		function getMinimumLength() {
			if ( localStorage.getItem( 'gadget-autosave-length' ) ) {
				return localStorage.getItem( 'gadget-autosave-length' );
			} else {
				return 10;
			}
		}
		function getTimeInterval() {
			if ( mw.storage.get( 'gadget-autosave-time' ) ) {
				return mw.storage.get( 'gadget-autosave-time' );
			} else {
				return 1000 * 60;
			}
		}
		function save() {
			if ( $( '#wpTextbox1' ).val().length >= Number( getMinimumLength() ) ) {
				localStorage.setItem( 'svwikigadgetautosave', $( '#wpTextbox1' ).val() );
			}
		}
		if ( $( '#wpTextbox1' ).length ) {
			setInterval( function() {
				save();
			}, Number( getTimeInterval() ) );
			$( '#wpSave' ).click( function( ev ) {
				ev.preventDefault();
				save();
				$( '#wpSave' ).off();
				$( '#wpSave' ).click();
			} );
		}
		mw.util.addPortletLink(
			'p-tb',
			'#',
			text,
			'gadget-autosave',
			tooltip
		);
		$( '#gadget-autosave' ).find( 'a' ).click( function( e ) {
			e.preventDefault();
			var dialog;
			// 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 = 'gadgetautosavedialog';
				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 str = '<div id="gadget-autosave-dialog">';
					str += '<textarea id="gadget-autosave-textarea" readonly></textarea>';
					str += '<button id="gadget-autosave-select" title="' + selecttitle + '">' + selecttext + '</button>';
					str += '<button id="gadget-autosave-settings" title="' + settingstitle + '">' + settingstext + '</button>';
					str += '<button id="gadget-autosave-close" title="' + closetitle + '">' + closetext + '</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 );
					dialog = $( '#gadget-autosave-dialog' );
					$( '#gadget-autosave-dialog' ).on( 'keyup', 'input', function( e ) {
						if ( e.which === 13 ) {
							$( '#gadget-autosave-dialog button' ).click();
						}
					} );
					$( '#gadget-autosave-textarea' ).val( localStorage.getItem( 'svwikigadgetautosave' ) );
				};

				// 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-autosave-select' ).click( function() {
					$( '#gadget-autosave-textarea' ).select();
				} );
				$( '#gadget-autosave-settings' ).click( function( e ) {
					$( e.currentTarget ).closest( '.oo-ui-window-content' ).focus();
					dialog.html(
						'<p>' + typeofoptions + '</p>' +
						'<button id="gadget-autosave-settings-length" title="' + lengthbuttontitle + '">' + lengthbuttontext + '</button>' +
						'<button id="gadget-autosave-settings-time" title="' + timebuttontitle + '">' + timebuttontext + '</button>'
					);
					$( '#gadget-autosave-settings-length' ).click( function() {
						dialog.html(
							'<p>' + settingsdescriptionlength + '</p>' +
							'<input type="number">' +
							'<button id="gadget-autosave-settings-length-save" title="' + savetitle + '">' + savetext + '</button>' +
							'<button id="gadget-autosave-close" title="' + closetitle + '">' + closetext + '</button>'
						);
						$( '#gadget-autosave-dialog input' ).attr( 'value', String( getMinimumLength() ) );
						$( '#gadget-autosave-dialog input' ).focus();
						$( '#gadget-autosave-settings-length-save' ).click( function() {
							var input = $( '#gadget-autosave-dialog input' ).val();
							if ( /\d/.test( input ) ) {
								localStorage.setItem( 'gadget-autosave-length', input );
								myDialog.close();
							}
						} );
					} );
					$( '#gadget-autosave-settings-time' ).click( function() {
						dialog.html(
							'<p>' + settingsdescriptiontime + '</p>' +
							'<input type="number">' +
							'<button id="gadget-autosave-settings-time-save" title="' + savetitle + '">' + savetext + '</button>' +
							'<button id="gadget-autosave-close" title="' + closetitle + '">' + closetext + '</button>'
						);
						$( '#gadget-autosave-dialog input' ).attr( 'value', String( getTimeInterval() ) );
						$( '#gadget-autosave-dialog input' ).focus();
						$( '#gadget-autosave-settings-time-save' ).click( function() {
							var input = $( '#gadget-autosave-dialog input' ).val();
							if ( /\d/.test( input ) ) {
								mw.storage.set( 'gadget-autosave-time', input );
								myDialog.close();
							}
						} );
					} );
					if ( localStorage.getItem( 'svwikigadgetautosave' ) ) {
						dialog.append(
							'<button id="gadget-autosave-removelocalstorage" title="' + removelocalstoragetitle + '">' + removelocalstoragetext + '</button>'
						);
						$( '#gadget-autosave-removelocalstorage' ).click( function() {
							localStorage.removeItem( 'svwikigadgetautosave' );
							myDialog.close();
						} );
					}
					if ( localStorage.getItem( 'gadget-autosave-length' ) ) {
						dialog.append(
							'<button id="gadget-autosave-removesavedlength" title="' + removesavedlengthtitle + '">' + removesavedlengthtext + '</button>'
						);
						$( '#gadget-autosave-removesavedlength' ).click( function() {
							localStorage.removeItem( 'gadget-autosave-length' );
							myDialog.close();
						} );
					}
					if ( mw.storage.get( 'gadget-autosave-time' ) ) {
						dialog.append(
							'<button id="gadget-autosave-removesavedtime" title="' + removesavedtimetitle + '">' + removesavedtimetext + '</button>'
						);
						$( '#gadget-autosave-removesavedtime' ).click( function() {
							mw.storage.remove( 'gadget-autosave-time' );
							myDialog.close();
						} );
					}
					dialog.append( '<button id="gadget-autosave-close" title="' + closetitle + '">' + closetext + '</button>' );
				} );
				dialog.on( 'click', '#gadget-autosave-close', function() {
					myDialog.close();
				} );
			}
		} );
	} );
}