MediaWiki:Gadget-spriteEdit.js

//

// Author: Majr // imported from Minecraft wiki // some modifications made by RheingoldRiver

( function { 'use strict';

/** "Global" vars (preserved between editing sessions) **/ var i18n = { blockedNotice: 'You cannot edit this sprite as you are blocked.', blockedReason: 'Reason: $1', browserActionNotSupported: 'Not supported by your browser.', changesSavedNotice: 'Your changes were saved.', controlNewName: 'New name', ctxDeleteImage: 'Delete', ctxDownloadImage: 'Download', ctxReplaceImage: 'Replace', diffError: 'Failed to retrieve diff', diffErrorMissingPage: 'Failed to retrieve page', dupeName: 'This name already exists.', dupeNamesNotice: 'There are duplicate names which must be resolved prior to saving.', errorApi: 'API error', errorConnection: 'Connection error', errorConnectionText: 'Check your internet connection', errorGeneric: 'Error', errorHttp: 'HTTP error', genericError: 'Something went wrong', luaKeyDeprecated: 'deprecated', luaKeyNolink: 'nolink', luaKeyBlack: 'black', luaKeyDark: 'dark', luaKeyId: 'id', luaKeyIds: 'ids', luaKeyName: 'name', luaKeyPos: 'pos', luaKeySection: 'section', luaKeySections: 'sections', luaKeySettings: 'settings', luaKeySettingsHeight: 'height', luaKeySettingsPos: 'pos', luaKeySettingsSpacing: 'spacing', luaKeySettingsUrl: 'url', luaKeySettingsVersion: 'version', luaKeySettingsWidth: 'width', namePlaceholder: 'Type a name', noPermissionNotice: 'You do not have permission to edit this sprite.', panelChangesIdTitle: 'Data changes', panelChangesNoDiffFromCur: 'No changes from current revision.', panelChangesSheetTitle: 'Spritesheet changes', panelChangesTitle: 'Review your changes', panelCloseTip: 'Close', panelConflictCurText: 'Current text', panelConflictReview: 'Review changes', panelConflictSave: 'Save', panelConflictText: 'An edit conflict has occurred, and was not able to be resolved automatically.', panelConflictTitle: 'Edit conflict', panelConflictYourText: 'Your text', panelDiscardContinue: 'Keep editing', panelDiscardDiscard: 'Discard changes', panelDiscardText: 'Are you sure you wish to discard your changes?', panelDiscardTitle: 'Unsaved changes', panelEcchangesReturn: 'Return to edit conflict form', panelEcchangesTitle: 'Review your manual changes', sectionPlaceholder: 'Type a section name', sectionUncategorized: 'Uncategorized', titleEditing: 'Sprite editing $1', toolbarHelp: 'Help', toolbarHelpPage: 'gphelp:User:Majr/Sprite editor', toolbarNewImage: 'New image', toolbarNewSection: 'New section', toolbarRedo: 'Redo', toolbarReviewChanges: 'Review changes', toolbarSave: 'Save', toolbarSummaryLabelTip: 'The number of bytes remaining', toolbarSummaryPlaceholder: 'Summarize the changes you made', toolbarToolDeprecate: 'Deprecate', toolbarToolDeprecateTip: 'Toggle names as deprecated', toolbarToolNolink: 'Nolink', toolbarToolNolinkTip: 'Mark names to always not have a link when used', toolbarToolBlack: 'Black', toolbarToolBlackTip: 'Mark logos to be inverted to white in night mode', toolbarToolDark: 'Dark', toolbarToolDarkTip: 'Mark logos to have a white glow in night mode', toolbarTools: 'Tools', toolbarUndo: 'Undo', toolbarDataDeprecate: 'deprecate', toolbarDataNolink: 'nolink', toolbarDataBlack: 'black', toolbarDataDark: 'dark' };

var DROPDOWN_ACTIONS = ['Deprecate', 'Nolink', 'Black', 'Dark'];

var $root = $( document.documentElement ); var $win = $( window ); var $body = $( document.body ); var URL = window.URL || window.webkitURL; var imageEditingSupported = !!( window.FileList &&	window.ArrayBuffer &&	window.Blob &&	window.FormData &&	window.ProgressEvent &&	URL && URL.revokeObjectURL && URL.createObjectURL &&	document.createElement( 'canvas' ).getContext ); // HTML pointer-events is dumb and can't be tested for // Just check that we're not IE < 11, old Opera has too little usage to bother checking for var pointerEventsSupported = $.client.profile.name !== 'msie' || $.client.profile.versionBase > 10; var originalTitle = document.title;

// Start loading OOUI's icons in the background mw.loader.load( [	'oojs-ui.styles.icons-editing-core',	'oojs-ui.styles.icons-editing-styling',	'oojs-ui.styles.icons-media',	'oojs-ui.styles.icons-moderation',	'oojs-ui.styles.icons-interactions',	'oojs-ui.styles.icons-movement',	'oojs-ui.styles.icons-content', ] );

// Handle recreating the editor $( '#ca-spriteedit' ).find( 'a' ).click( function( e ) {	// Editor is already loaded, reload the page	if ( $root.hasClass( 'spriteedit-loaded' ) ) {		return;	}	create;	e.preventDefault; } ); $win.on( 'popstate', function {	if ( location.search.match( '[?&]spriteaction=edit' ) && !$root.hasClass( 'spriteedit-loaded' ) ) {		create( 'history' );	} } );

/** Functions **/ /** * Entry point for the editor * * Updates the page if it has been edited since being viewed * and creates the editor once ready * Is called right at the end of the script, once all other functions * are defined. * * "state" is what triggered the creation (e.g. from history navigation) */ var create = function( state ) { var $doc = $( '#spritedoc' ); var preventClose; var settings = {}; var mouse = { moved: false, x: 0, y: 0 };	var sorting = false; var oldHtml; var spritesheet; var spriteSettings = JSON.parse( $doc.attr( 'data-settings' ) ); var dataPage = $doc.data( 'datapage' ); var changes = []; var undoneChanges = []; var usedNames = {}; var loadingImages = []; var panels = {}; var canTag = null; // Update the title to say we're editing document.title = i18n.titleEditing.replace( /\$1/g, originalTitle ); var revisionsApi = new mw.Api( { parameters: {		action: 'query',		prop: 'revisions',		rvprop: 'content',		formatversion: 2,	} } ); var parseApi = new mw.Api( { parameters: {		action: 'parse',		prop: 'text',		disabletoc: true,		disablelimitreport: true,		formatversion: 2,	} } ); var $headingTemplate = $( ' ' ).html(		$( ' ' )			.addClass( 'mw-headline spriteedit-new' )			.attr( 'data-placeholder', i18n.sectionPlaceholder )	); var $boxTemplate = $( '' ).addClass( 'spritedoc-box spriteedit-new' ).append(		$( ' ' ).addClass( 'spritedoc-image' ),		$( '' ).addClass( 'spritedoc-names' ).append( $( '' ).addClass( 'spritedoc-name' ).html( ' ' ) )	);	addControls( $headingTemplate, 'heading' ); addControls( $boxTemplate, 'box' ); // Pre-load modules which will be needed later // Pre-load modules which will be needed later var saveModules = mw.loader.using( [		'mediawiki.widgets.visibleLengthLimit',		'mediawiki.diff.styles',	] ).fail( console.warn ); $root.addClass( 'spriteedit-loaded' ); if ( !state ) { history.pushState( {}, '', mw.util.getUrl( null, { spriteaction: 'edit' } ) ); }	if ( state !== 'initial' ) { $( '#ca-view' ).add( '#ca-spriteedit' ).toggleClass( 'selected' ); }	// Get some info about this wiki, the user's rights and // block status, and the last edit timestamp for the ids page var infoRequest = retryableRequest( function {		return revisionsApi.get( { rvprop: 'timestamp', titles: dataPage, meta: 'siteinfo|userinfo', uiprop: 'rights|blockinfo', } );	} ).done( function( data ) {		fixTimestamp.offset = data.query.general.timeoffset;	} ); // Check if the ids page has been edited since opening the // documentation page, and re-download it if necessary var contentRequest = infoRequest.then( function( data ) {		var currentTimestamp = fixTimestamp( data.query.pages[0].revisions[0].timestamp );		if ( currentTimestamp > $doc.data( 'datatimestamp' ) ) {			var newContent = retryableRequest( function { return parseApi.get( {					title: mw.config.get( 'wgPageName' ),					text: $( '' ).html( $.parseHTML( $doc.attr( 'data-refreshtext' ) ) ).html				} ); } ).done( function( parseData ) { oldHtml = parseData.parse.text; $doc.replaceWith( oldHtml ); $doc = $( '#spritedoc' ); spriteSettings = JSON.parse( $doc.attr( 'data-settings' ) ); dataPage = $doc.data( 'datapage' ); } );			return newContent;		} else {			oldHtml = $doc[0].outerHTML;		}	} ); // Check if we have permission to edit the IDs page, spritesheet // file, and use tags, and that the user isn't blocked var permissionsRequest = $.when( infoRequest, contentRequest ).then( function( data ) {		var info = data[0].query.userinfo;		var canEdit = true;		if ( info.blockid ) {			canEdit = false;			var $blockNotice = $( ' ' ).text( i18n.blockedNotice );			var blockText;			if ( info.blockreason ) {				blockText = retryableRequest( function { return parseApi.get( { summary: info.blockreason } ); } ).done( function( parseData ) { $blockNotice.append( ' ', i18n.blockedReason.replace( /\$1/g, $( ' ' ).addClass( 'comment' ).html( parseData.parse.parsedsummary ).html ) );				} );			}			$.when( blockText ).always( function { mw.notify( $blockNotice, { type: 'error', autoHide: false } ); } );		} else {			var rights = info.rights;			$.each( [ 'data', 'sprite' ], function { var requiredRights = $doc.data( this + 'protection' ).split( ',' ); $.each( requiredRights, function {					if ( rights.indexOf( this ) === -1 ) {						canEdit = false;						return false;					}				} ); return canEdit; } );			if ( !canEdit ) {				mw.notify( i18n.noPermissionNotice, { type: 'error', autoHide: false } );			}			/* User doesn't have the right to apply change tags */			if ( rights.indexOf( 'applychangetags' ) === -1 ) {				canTag = false;			}		}		if ( !canEdit ) {			sheetRequest && sheetRequest.abort;			contentRequest.abort && contentRequest.abort;			destroy( true );		}	} ); // Replace the spritesheet with a fresh uncached one to ensure // we don't save over it with an old version. var sheetRequest; if ( imageEditingSupported ) { sheetRequest = contentRequest.then( function {			var $sprite = $doc.find( '.sprite' ).first;			settings.imageWidth = spriteSettings[i18n.luaKeySettingsWidth];			settings.imageHeight = spriteSettings[i18n.luaKeySettingsHeight];			settings.spacing = spriteSettings[i18n.luaKeySettingsSpacing];			settings.sheet = $doc.data( 'original-url' );			if ( !settings.sheet ) {				// Get a capture of the whole URL, and of the URL minus the query string				var urlParts = $doc.data( 'urlpath' )					.match( /^url\(["']?(([^?"]+)(?:\?[^"]+)?)["']?\)$/ );				$doc.data( 'original-url', urlParts[1] );				settings.sheet = urlParts[2] + '?version=' + Date.now;				$doc.data( 'url', settings.sheet );			}			// XHR is used instead of a CORS Image so a blob URL can			// be used for the background image, rather than the real URL.			// This works around the image being downloaded twice, probably			// caused by the background image not reusing the CORS request. return retryableRequest( function {				var deferred = $.Deferred;				var requestTimeout;				var xhr = new XMLHttpRequest;				xhr.open( 'GET', settings.sheet, true );				xhr.responseType = 'blob';				xhr.onload = function {					clearTimeout( requestTimeout );					if ( this.status !== 200 ) {						deferred.reject( 'http', { textStatus: this.statusText ? this.status + ' ' + this.statusText : 'error' } );						return;					}					spritesheet = new Image;					spritesheet.onload = function {						settings.sheetWidth = this.width;						settings.sheetHeight = this.height;						overwriteSpritesheet( this.src );						deferred.resolve;					};					spritesheet.src = URL.createObjectURL( this.response );				};				requestTimeout = setTimeout( function { xhr.abort; deferred.reject( 'http', { textStatus: 'timeout' } ); }, 30 * 1000 );				xhr.onabort = xhr.onerror = function {					if ( deferred.state === 'pending' ) {						deferred.reject( 'http', { textStatus: 'error' } );					}				};				xhr.send;				return deferred.promise( { abort: function { deferred.reject( 'http', { textStatus: 'abort' } ); xhr.abort; } } );			} ).fail( handleError ); } );	}	$.when( contentRequest, permissionsRequest ).then( function { // Make sure the editor wasn't destroyed while we were waiting if ( $root.hasClass( 'spriteedit-loaded' ) ) { enable; }	}, function( code, error ) { // Fatal error, bail sheetRequest && sheetRequest.abort; infoRequest.abort; contentRequest.abort && contentRequest.abort; handleError( code, error ); destroy( true ); } );	// Handle closing the editor on navigation	$win.on( 'popstate.spriteEdit', function { if (			!location.search.match( '[?&]spriteaction=edit' ) &&			$root.hasClass( 'spriteedit-loaded' )		) { close( 'history' ); }	} );	/**	 * Create the editor interface	 *	 * Makes the necessary HTML changes to the documentation,	 * creates the extra interface elements, and binds the events.	 */	var enable = function {		var $content = $doc.closest( '.documentation' );		var $toolbar;		if ( !$content.length ) {			$content = $( '#content' );		}		$root.addClass( 'spriteedit-enabled' );		if ( imageEditingSupported ) {			$root.addClass( 'spriteedit-imageeditingenabled' );		}		$( '.mw-editsection' ).add( '.mw-editsection-like' ).css( 'display', 'none' );		// Store previous element and parent to re-attach to once done		// and the current scroll position		var $docPrev = $doc.prev;		var $docParent = $doc.parent;		var initialScroll = $win.scrollTop;		$doc.detach;		$doc.find( '#toc' ).remove;		$doc.append( $( ' ' ).addClass( 'spriteedit-autoscroll spriteedit-autoscroll-up' ), $( ' ' ).addClass( 'spriteedit-autoscroll spriteedit-autoscroll-down' ) );		var autoScroll = function( now ) {			autoScroll.delta = ( now - autoScroll.timeLast ) / ( 1000 / 60 );			autoScroll.timeLast = now;			if ( mouse.y !== autoScroll.lastMouseY ) {				var areaRect = autoScroll.area.getBoundingClientRect;				if ( autoScroll.dir === -1 ) {					autoScroll.speed = areaRect.bottom - mouse.y;				} else {					autoScroll.speed = mouse.y - areaRect.top + 1;				}				autoScroll.lastMouseY = mouse.y;			}			// Prevent overscroll			var scrollTop = $win.scrollTop;			if ( autoScroll.dir === -1 && scrollTop > autoScroll.topLimit || autoScroll.dir === 1 && scrollTop + $win.height < autoScroll.bottomLimit ) {				scrollBy( 0, autoScroll.dir * Math.round( autoScroll.speed / 2 ) * Math.round( autoScroll.delta ) );			}			autoScroll.id = requestAnimationFrame( autoScroll );		};		autoScroll.start = function( area ) {			if ( autoScroll.id ) {				autoScroll.stop;			}			var scrollTop = $win.scrollTop;			autoScroll.area = area;			autoScroll.dir = $( area ).hasClass( 'spriteedit-autoscroll-up' ) ? -1 : 1;			autoScroll.speed = 1;			autoScroll.timeLast = window.performance ? performance.now : Date.now;			autoScroll.topLimit = scrollTop + $doc[0].getBoundingClientRect.top;			autoScroll.bottomLimit = scrollTop + $doc.find( '.spritedoc-section' ).last[0].getBoundingClientRect.bottom + 50;			autoScroll.id = requestAnimationFrame( autoScroll );		};		autoScroll.stop = function {			cancelAnimationFrame( autoScroll.id );			autoScroll.id = 0;		};		$doc.find( '.spriteedit-autoscroll' )			.on( 'mouseenter.spriteEdit dragenter.spriteEdit', function { autoScroll.start( this ); } )			.on( 'mouseleave.spriteEdit dragleave.spriteEdit', autoScroll.stop );		addControls( $doc.find( 'h3' ), 'heading' );		var $boxes = $doc.find( '.spritedoc-box' );		$boxes.each( function { var $this = $( this ); var $names = $this.find( '.spritedoc-name' ); $this.attr( 'data-sort-key', $names.first.text ); $names.find( 'code' ).each( function {				var $code = $( this );				usedNames[$code.text] = [ $code ];			} ); } );		addControls( $boxes, 'box' );		// Collapses and expands boxes in each section when sorting		// sections or boxes, so it's easier to get to the right section		var collapseBoxes = function( placeholder ) {			var $this = $( this );			var isBox = $this.hasClass( 'spritedoc-box' );			var section = isBox ? $this.closest( '.spritedoc-section' )[0] : placeholder;			var origPos = this.getBoundingClientRect;			var origSectionPos = section.getBoundingClientRect;			var heights = [];			$doc.find( '.spritedoc-boxes' ).each( function { var child = this.firstElementChild; if ( child ) { if ( $( child ).hasClass( 'spriteedit-ghost' ) ) { child = child.nextElementSibling || child; }					heights.push( child.getBoundingClientRect.height ); } else { heights.push( 0 ); }			} ).each( function( i ) { // Set styling after get loop to avoid layout thrashing var height = heights[i]; if ( !height ) { return; }				$( this ).css( {					height: height,					overflow: 'hidden',				} ); } );			// First make sure the section is in the same place relative to the window			scroll( 0, $win.scrollTop + section.getBoundingClientRect.top - origSectionPos.top );			// Now if we're sorting boxes, make sure the box remains inside the section			if ( isBox ) {				var sectionPos = section.getBoundingClientRect;				if ( origPos.bottom > sectionPos.bottom ) {					scroll( 0, $win.scrollTop + sectionPos.bottom - origPos.bottom );				}			}		};		var expandBoxes = function {			var origPos = this.getBoundingClientRect;			$doc.find( '.spritedoc-boxes' ).css( { height: 'auto', overflow: 'visible', } );			// If we're sorting boxes, scroll so the box is near the cursor			var $this = $( this );			if ( $this.hasClass( 'spritedoc-box' ) ) {				var boxPos = this.getBoundingClientRect;				scroll( 0, $win.scrollTop + boxPos.top + boxPos.height / 2 - mouse.y );				// Flash the box so it is obvious where it was sorted to				$this.css( 'background-color', 'yellow' );				setTimeout( function { $this.css( 'background-color', '' ); }, 1000 );			} else {				// Otherwise make sure the section is in the same place relative to the window				scroll( 0, $win.scrollTop + this.getBoundingClientRect.top - origPos.top );			}		};		makeSortable( { selectors: '.spritedoc-section', handle: 'h3', vertical: true, sortStart: collapseBoxes, sortEnd: expandBoxes, } );		makeSortable( { selectors: { container: '.spritedoc-section', parent: '.spritedoc-boxes', elem: '.spritedoc-box', },			autoSort: true, sortStart: collapseBoxes, sortEnd: expandBoxes, } );		// Create toolbar		var contentPadding = {			left: $content.css( 'padding-left' ),			right: $content.css( 'padding-right' ),		};		$toolbar = $( ' ' ).addClass( 'spriteedit-toolbar' ).css( { paddingLeft: contentPadding.left, paddingRight: contentPadding.right, marginLeft: '-' + contentPadding.left, marginRight: '-' + contentPadding.right, } );		var undoButton = new OO.ui.ButtonInputWidget( { id: 'spriteedit-undo', icon: 'undo', label: i18n.toolbarUndo, disabled: true, } );		undoButton.$element.data( 'ooui-object', undoButton );		var redoButton = new OO.ui.ButtonInputWidget( { id: 'spriteedit-redo', icon: 'redo', label: i18n.toolbarRedo, disabled: true, } );		redoButton.$element.data( 'ooui-object', redoButton );		var newSectionButton = new OO.ui.ButtonInputWidget( { id: 'spriteedit-add-section', icon: 'textStyle', label: i18n.toolbarNewSection, } );		newSectionButton.$element.data( 'ooui-object', newSectionButton );		var newImageButton = new OO.ui.ButtonInputWidget( { id: 'spriteedit-add-image', icon: 'imageAdd', label: i18n.toolbarNewImage, } );		newImageButton.$element.data( 'ooui-object', newImageButton );		if ( !imageEditingSupported ) {			newImageButton.setDisabled( true ).$element				.prop( 'title', i18n.browserActionNotSupported )				.css( 'cursor', 'help' );		}		var saveButton = new OO.ui.ButtonInputWidget( { id: 'spriteedit-save', flags: [ 'progressive', 'primary' ], icon: 'expand', label: i18n.toolbarSave, disabled: true, } );		saveButton.$element.data( 'ooui-object', saveButton ).css( 'right', contentPadding.right );		var toolboxSelect = new OO.ui.DropdownWidget( { id: 'spriteedit-toolbox', label: i18n.toolbarTools, $overlay: $doc, } );		toolboxSelect.$element.data( 'ooui-object', toolboxSelect );		var helpButton = new OO.ui.ButtonWidget( { id: 'spriteedit-help', framed: false, icon: 'help', title: i18n.toolbarHelp, href: mw.util.getUrl( i18n.toolbarHelpPage ), target: '_blank', } );		$toolbar.append( new OO.ui.ButtonGroupWidget( {				items: [ undoButton, redoButton ],			} ).$element, new OO.ui.ButtonGroupWidget( {				items: [ newSectionButton, newImageButton ],			} ).$element, toolboxSelect.$element, saveButton.$element, helpButton.$element );		// Create tools		var $toolbox = $toolbar.find( '#spriteedit-toolbox' );		var deprecateOption = new OO.ui.MenuOptionWidget( { data: 'deprecate', label: i18n.toolbarToolDeprecate, icon: 'flag', } );		deprecateOption.$element.prop( 'title', i18n.toolbarToolDeprecateTip );		var nolinkOption = new OO.ui.MenuOptionWidget( { data: 'nolink', label: i18n.toolbarToolNolink, icon: 'flag', } );		nolinkOption.$element.prop( 'title', i18n.toolbarToolNolinkTip );		var blackOption = new OO.ui.MenuOptionWidget( { data: 'black', label: i18n.toolbarToolBlack, icon: 'flag', } );		blackOption.$element.prop( 'title', i18n.toolbarToolBlackTip );		var darkOption = new OO.ui.MenuOptionWidget( { data: 'dark', label: i18n.toolbarToolDark, icon: 'flag', } );		darkOption.$element.prop( 'title', i18n.toolbarToolDarkTip );		toolboxSelect.getMenu.addItems( [ deprecateOption, nolinkOption, blackOption, darkOption ] );		var $barContainer = $( ' ' ).addClass( 'spriteedit-toolbar-container' )			.append( $toolbar ).prependTo( $doc );		// Re-attach content and reset scroll position		if ( $docPrev.length ) {			$doc.insertAfter( $docPrev );		} else {			$doc.prependTo( $docParent );		}		if ( $win.scrollTop !== initialScroll ) {			scroll( 0, initialScroll );		}		// Set height now that everything is re-attached		var toolbarHeight = $toolbar[0].getBoundingClientRect.height;		$barContainer.height( toolbarHeight );		// Wait until everything else is done so the animation is smooth		requestAnimationFrame( function { var barTop = $barContainer[0].getBoundingClientRect.top; if ( barTop > 0 ) { $root.addClass( 'spriteedit-smoothscroll' ); scroll( 0, barTop + $win.scrollTop + 1 ); }		} );		// Check the editor's change tag exists		// Since the tag isn't important, we don't wait for the request to finish		// If it isn't done by the time we try to save, we assume we can't tag		if ( canTag !== false ) {			findChangeTag( 'spriteeditor' ).then( function( result ) { canTag = result; } );		}		/** Bind events **/		/* Outside interface events */		// Prevent accidentally closing window if changes have been made		preventClose = mw.confirmCloseWindow( { namespace: 'spriteEdit', test: function { return !saveButton.isDisabled; },		} );		$( '#ca-view' ).find( 'a' ).on( 'click.spriteEdit', function( e ) { close; e.preventDefault; } );		/* Toolbar events */		// Manually make the toolbar sticky if position:sticky isn't supported		if ( !supports( 'position', 'sticky' ) && !supports( 'position', '-webkit-sticky' ) ) {			var fixedClass = 'spriteedit-toolbar-fixed';			var contentOffset = $content.offset.left + 1;			$win.on( 'scroll.spriteEdit', $.throttle( 32, function {				var fixed = $toolbar.hasClass( fixedClass ),					scrollTop = $win.scrollTop,					offset = $barContainer.offset.top;				if ( !fixed && scrollTop >= offset ) {					$toolbar.addClass( fixedClass ).css( 'left', contentOffset );				} else if ( fixed && scrollTop < offset ) {					$toolbar.removeClass( fixedClass ).css( 'left', '' );				}			} ) );		}		$( '#spriteedit-undo' ).find( 'button' ).on( 'click.spriteEdit', function { $( this ).focus.blur; // We're not meant to be editing if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) { return; }			var hist = changes.pop; revert( hist ); undoneChanges.push( hist ); redoButton.setDisabled( false ); } );		$( '#spriteedit-redo' ).find( 'button' ).on( 'click.spriteEdit', function { $( this ).focus.blur; // We're not meant to be editing if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) { return; }			var hist = undoneChanges.pop; $.each( hist, function {				change( this.action, this.content, false, true );			} ); changes.push( hist ); if ( !undoneChanges.length ) { redoButton.setDisabled( true ); }			$.each( [				'#spriteedit-undo',				'#spriteedit-save',				'#spriteedit-summary',				'#spriteedit-review-button',			], function {				if ( $( this ).length ) {					$( this ).data( 'ooui-object' ).setDisabled( false );				}			} ); } );		$( '#spriteedit-add-section' ).find( 'button' ).on( 'click.spriteEdit', function { $( this ).focus.blur; // We're not meant to be editing if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) { return; }			var $newHeading = $headingTemplate.clone; change( 'insert', {				$elem: $( ' ' ).addClass( 'spritedoc-section' ).prepend( $newHeading, $( '' ).addClass( 'spritedoc-boxes' ) ),				index: $( nearestSection ).index - 1,				$parent: $doc,			}, true ); $newHeading.find( '.mw-headline' ).focus; } );		$( '#spriteedit-add-image' ).find( 'button' ).on( 'click.spriteEdit', function { $( this ).focus.blur; // We're not meant to be editing if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) { return; }			$( ' ' )				.attr( {					accept: 'image/*',					multiple: true,				} ) .one( 'change.spriteEdit', function {					insertSprites( this.files );				} ).click; } );		// Toolbox functions		// Modify click event to not open menu when we're not meant to be editing,		// or a tool is already selected		toolboxSelect.origOnClick = toolboxSelect.onClick;		toolboxSelect.onClick = function( e ) {			if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) {				this.$handle.blur;				return;			}			toolboxSelect.origOnClick.call( toolboxSelect, e );		};		toolboxSelect.$handle.off( 'click' ).on( 'click', toolboxSelect.onClick.bind( toolboxSelect ) );		toolboxSelect.on( 'labelChange', function { if ( !toolboxSelect.getLabel ) { toolboxSelect.setLabel( i18n.toolbarTools ); }		} );		var toolNamespace = '.spriteEdit.spriteEditTool.spriteEditTool';		var tool;		// Bind events for each tool's function		toolboxSelect.getMenu.on( 'choose', function( item ) { tool = item.getData; $root.addClass( 'spriteedit-hidecontrols spriteedit-tool spriteedit-tool-' + tool ); switch ( tool ) { case 'deprecate': $doc.on( 'click' + toolNamespace + 'Deprecate', '.spritedoc-name > code', function {						change( 'toggle deprecation', { $elem: $( this ) } );					} ); break; case 'nolink': $doc.on( 'click' + toolNamespace + 'Nolink', '.spritedoc-name > code', function {						change( 'toggle nolink', { $elem: $( this ) } );					} ); break; case 'black': $doc.on( 'click' + toolNamespace + 'Black', '.spritedoc-name > code', function {						change( 'toggle black', { $elem: $( this ) } );					} ); break; case 'dark': $doc.on( 'click' + toolNamespace + 'Darl', '.spritedoc-name > code', function {						change( 'toggle dark', { $elem: $( this ) } );					} ); break; }		} );		// Clear tool when clicking a toolbar button, the toolbox itself, or pressing escape		var clearTool = function( e ) {			if ( !$root.hasClass( 'spriteedit-tool' ) ) {				return;			}			toolboxSelect.getMenu.selectItem;			$doc.off( '.spriteEditTool' );			$root.removeClass( 'spriteedit-hidecontrols spriteedit-tool spriteedit-tool-' + tool );			tool = null;		};		$toolbar.on( 'mouseup.spriteEdit', 'button', function { clearTool; } );		$toolbox.on( 'click.spriteEdit', function { clearTool; } );		$( document ).on( 'keydown.spriteEdit', function( e ) { // Esc if ( e.keyCode === 27 ) { clearTool; }		} );		// Drag and drop functionality		if ( imageEditingSupported ) {			var dragTimeout, dragEnded;			var endDrag = function {				$root.removeClass( 'spriteedit-dragging' );				clearTimeout( dragTimeout );				clearTimeout( dropTimeout );				dragEnded = false;				dropEnded = false;			};			var isFile = function( e ) {				var types = e.originalEvent.dataTransfer.types;				return types.indexOf ?					types.indexOf( 'Files' ) > -1 || types.indexOf( 'application/x-moz-file' ) > -1 :					types.contains( 'Files' );			};			$win.on( 'dragenter.spriteEdit', function( e ) { if ( !isFile( e ) ) { return; }				$root.addClass( 'spriteedit-dragging' ); } ).on( 'dragover.spriteEdit', function { clearTimeout( dragTimeout ); dragEnded = false; } ).on( 'dragleave.spriteEdit', function( e ) { if ( !isFile( e ) ) { return; }				clearTimeout( dragTimeout ); dragEnded = true; dragTimeout = setTimeout( function {					if ( dragEnded ) {						endDrag;					}				}, 100 ); } );			var dropTimeout, dropEnded;			$doc.on( 'dragenter.spriteEdit', '.spritedoc-section', function( e ) { if ( !isFile( e ) ) { return; }				$doc.find( '.spriteedit-droptarget' ).not( this ).removeClass( 'spriteedit-droptarget' ); $( this ).addClass( 'spriteedit-droptarget' ); } ).on( 'dragover.spriteEdit', '.spritedoc-section', function( e ) { clearTimeout( dropTimeout ); dropEnded = false; e.originalEvent.dataTransfer.dropEffect = 'copy'; e.preventDefault; } ).on( 'dragleave.spriteEdit', '.spritedoc-section', function( e ) { if ( !isFile( e ) ) { return; }				clearTimeout( dropTimeout ); dropEnded = true; dropTimeout = setTimeout( function {					if ( dropEnded ) {						$doc.find( '.spriteedit-droptarget' ).removeClass( 'spriteedit-droptarget' );						dropEnded = false;					}				}, 100 ); } ).on( 'drop.spriteEdit', '.spritedoc-section', function( e ) { if ( !isFile( e ) ) { return; }				$doc.find( '.spriteedit-droptarget' ).removeClass( 'spriteedit-droptarget' ); insertSprites( e.originalEvent.dataTransfer.files, this ); endDrag; e.preventDefault; } );		}		$( '#spriteedit-save' ).find( 'button' ).on( 'click.spriteEdit', function { var $button = $( this ); $button.focus.blur; // Prevent saving and notify if there are duplicate names if ( $doc.find( '.spriteedit-dupe' ).length ) { mw.notify( i18n.dupeNamesNotice, { type: 'warn', autoHide: false } ); return; }			// Prevent saving if button already pressed and still processing if ( $button.hasClass( 'spriteedit-processing' ) ) { return; }			$button.addClass( 'spriteedit-processing' ); if ( $toolbar.hasClass( 'spriteedit-saveform-open' ) ) { // If we know changes weren't made (by performing a diff), // quit out, otherwise it's likely faster to just save and // assume changes were made, than wait for the diff to be ready. // It will just be a null edit if nothing was changed. if ( !names.modified && !sheet.modified ) { destroy( true ); return; }				saveChanges( $( '#spriteedit-summary' ).data( 'ooui-object' ).getValue ); return; }			saveModules.done( function {				$toolbar.addClass( 'spriteedit-saveform-open' );				$button					.removeClass( 'spriteedit-processing' )					// Prevent accidental double-click saving					.css( 'pointer-events', 'none' );				$button.parent.data( 'ooui-object' ).setIcon( 'check' );				if ( !$toolbar.find( '#spriteedit-saveform' ).length ) {					var summaryInput = new OO.ui.TextInputWidget( { id: 'spriteedit-summary', name: 'wpSummary', spellcheck: true, placeholder: i18n.toolbarSummaryPlaceholder, } );					summaryInput.$element.data( 'ooui-object', summaryInput );					mw.widgets.visibleByteLimit( summaryInput, mw.config.get( 'wgCommentByteLimit' ) );					$( ' ' )						.attr( 'id', 'spriteedit-saveform' )						.css( 'margin-right', $( '#spriteedit-save' )[0].getBoundingClientRect.width )						.append( summaryInput.$element, makeButton( i18n.toolbarReviewChanges, { id: 'spriteedit-review-button' } ) ).appendTo( $toolbar );				}				var openedToolbarHeight = $toolbar[0].getBoundingClientRect.height;				$toolbar					.outerHeight( toolbarHeight )					.redraw					.outerHeight( openedToolbarHeight )					.transitionEnd( function { $button.css( 'pointer-events', '' ); $barContainer.height( openedToolbarHeight ); $( '#spriteedit-summary' ).data( 'ooui-object' ).focus; // Do this after the transition so there is no stutter names.getDiff; sheet.stash; } );			} );		} );		$doc.on( 'keydown.spriteEdit', '#spriteedit-summary', function( e ) { // Anything but Enter if ( e.which !== 13 ) { return; }			$( this ).blur; $( '#spriteedit-save' ).find( 'button' ).click; e.preventDefault; } );		$doc.on( 'click.spriteEdit', '#spriteedit-review-button > button', function { var $button = $( this ); if ( $button.hasClass( 'spriteedit-processing' ) ) { return; }			$button.focus.blur.addClass( 'spriteedit-processing' ); var sheetUrl; var changesPanel = panels.changes || panel( 'changes', {				title: i18n.panelChangesTitle,				content: [					$( ' ' ).addClass( 'spriteedit-sheet-changes' ),					$( ' ' ).addClass( 'spriteedit-id-changes' ),				],				onClose: function {					URL.revokeObjectURL( sheetUrl );				},			} ); var $changesText = changesPanel.$text; $.when( names.getDiff, sheet.getData ).then( function( diff, sheetBlob ) {				var sheetChanges;				if ( !diff && !sheetBlob ) {					$changesText.text( i18n.panelChangesNoDiffFromCur );				} else {					if ( sheetBlob ) {						sheetChanges = $.Deferred;						var newSpritesheet = new Image;						newSpritesheet.onload = function {							newSpritesheet.onload = null;							$changesText.find( '.spriteedit-sheet-changes' ).append( $( ' ' ).text( i18n.panelChangesSheetTitle ), $( ' ' ).addClass( 'spriteedit-sheet-diff' ).append(									$( ' ' ).addClass( 'spriteedit-old-sheet' ).append( spritesheet ),									$( ' ' ).addClass( 'spriteedit-new-sheet' ).append( newSpritesheet )								) );							sheetChanges.resolve;						};						sheetUrl = URL.createObjectURL( sheetBlob );						newSpritesheet.src = sheetUrl;					}					if ( diff ) {						$changesText.find( '.spriteedit-id-changes' ).append( $( ' ' ).text( i18n.panelChangesIdTitle ), $( ' ' ).append( diff ) );					}				}				$.when( sheetChanges ).done( function { $button.removeClass( 'spriteedit-processing' ); changesPanel.show; } );			}, function( code, data ) {				$button.removeClass( 'spriteedit-processing' );				handleError( code, data );			} ); } );		/* Edit control events */		$doc.on( 'click.spriteEdit', '.spriteedit-add-name > button', function { var $names = $( this ).closest( '.spritedoc-box' ).find( '.spritedoc-name' ); var $item = $( '' ).addClass( 'spritedoc-name' ); var $name = $( ' ' ).addClass( 'spriteedit-new' ) .attr( 'data-placeholder', i18n.namePlaceholder ); addControls( $item.append( $name ), 'name' ); change( 'insert', {				$elem: $item,				index: $names.length - 1,				$parent: $names.first.parent,			}, true ); $name.focus; } );		$doc.on( 'focus.spriteEdit', '[contenteditable]', function { var $this = $( this ); if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) { $this.blur; return; }			var text = $this.text; $this.attr( 'data-original-text', text ); if ( !changes.length ) { $this.one( 'keypress.spriteEdit', function {					$.each( [ '#spriteedit-save', '#spriteedit-summary', '#spriteedit-review-button', ], function { if ( $( this ).length ) { $( this ).data( 'ooui-object' ).setDisabled( false ); }					} );				} );			}		} );		$doc.on( 'blur.spriteEdit', '[contenteditable]', function { if ( $root.hasClass( 'spriteedit-hidecontrols' ) ) { return; }			var $this = $( this ); var text = $this.text; var trimmedText = text.trim.replace( / +/g, ' ' ); var origText = $this.attr( 'data-original-text' ); $this.removeAttr( 'data-original-text' ).off( 'keypress.spriteEdit' ); if ( text !== trimmedText ) { text = trimmedText; $this.text( text ); }			if ( text === '' ) { var $remove, $parent; if ( $this.hasClass( 'mw-headline' ) ) { if ( $doc.find( '.spritedoc-section' ).length === 1 ) { text = i18n.sectionUncategorized; $this.text( text ); } else { $remove = $this.closest( '.spritedoc-section' ); $parent = $doc; }				} else { var $names = $this.closest( '.spritedoc-names' ); if ( $names.find( '.spritedoc-name' ).length > 1 ) { $remove = $this.parent; $parent = $names; } else { $remove = $names.parent; $parent = $remove.parent; }				}				if ( $remove ) { if ( $this.hasClass( 'spriteedit-new' ) ) { // Just pretend it never happened $remove.remove; change.discard; return; }					// Restore original text before deleting so undo works $this.text( origText ); change( 'delete', {						$elem: $remove,						index: $remove.index - 1,						$parent: $parent,					} ); return; }			}			if ( text === origText ) { if ( !changes.length ) { $.each( [						'#spriteedit-save',						'#spriteedit-summary',						'#spriteedit-review-button',					], function {						if ( $( this ).length ) {							$( this ).data( 'ooui-object' ).setDisabled( true );						}					} ); }				return; }			if ( usedNames[text] ) { // Wait until after edit change, as it may move the element // which the tooltip should be anchored to				requestAnimationFrame( function {					tooltip( $this, i18n.dupeName );				} ); }			change( 'edit', {				$elem: $this,				oldText: origText,				text: text,			} ); if ( $this.hasClass( 'spriteedit-new' ) ) { $this.removeClass( 'spriteedit-new' ).removeAttr( 'data-placeholder' ); }		} );		$doc.on( 'keypress.spriteEdit', '[contenteditable]', function( e ) { // Enter key if ( e.which === 13 ) { $( this ).blur; e.preventDefault; }		} );		// Make pastes plain text		$doc.on( 'paste.spriteEdit', '[contenteditable]', function { var $this = $( this ); var hasFocus = $this.has( ':focus' ); if ( !hasFocus ) { $this.focus; }			setTimeout( function {				var text = $this.text.replace( /\n/g, ' ' );				if ( $this.html !== $( '' ).text( text ).html ) {					$this.text( text );					if ( !hasFocus ) {						$this.blur;					}				}			}, 0 ); } );		var isText = function( e ) {			var types = e.originalEvent.dataTransfer.types;			return types.indexOf ? types.indexOf( 'text/plain' ) > -1 : types.contains( 'text/plain' );		};		$doc.on( 'dragenter.spriteEdit dragover.spriteEdit', '[contenteditable]', function( e ) { if ( !isText( e ) ) { return; }			e.preventDefault; } );		$doc.on( 'drop.spriteEdit', function( e ) { // Prevent default drop on anything but contenteditable // This prevents browsers dropping content into a nearby contenteditable, which doesn't			// trigger any kind of drop event on the contenteditable (because you didn't actually			// drop anything directly on it), thus making it impossible to handle it properly. if ( !$( e.target ).is( '[contenteditable]' ) ) { e.preventDefault; return; }			if ( !isText( e ) ) { return; }			var $this = $( e.target ); $this.focus; setTimeout( function {				var text = $this.text.replace( /\n/g, ' ' );				if ( $this.html !== $( '' ).text( text ).html ) {					$this.text( text );				}				$this.blur;			}, 0 ); } );		if ( imageEditingSupported ) {			$doc.on( 'click.spriteEdit', '.spritedoc-image', function { var $parent = $( this ); tooltip( $parent, [					makeButton( i18n.ctxReplaceImage, { type: [ 'progressive', 'primary' ], icon: 'imageGallery', action: function { $( ' ' )								.attr( 'accept', 'image/*' ) .one( 'change', function {									tooltip.hide;									scaleImage( this.files[0] ).done( function( $img ) { $img.addClass( 'spriteedit-replacing-image' ); change( 'replace image', {											$elem: $img,											$parent: $parent,											$oldImg: $parent.find( 'img' ),										} ); } );								} ).click; },					} ),					makeButton( i18n.ctxDownloadImage, { icon: 'download', action: function { var $button = $( this ); var data; var $box = $parent.parent; // Already an image, just pass on the object URL if ( $box.hasClass( 'spriteedit-new' ) ) { data = $parent.find( '> img' ).attr( 'src' ); } else { $button.addClass( 'spriteedit-processing' ); data = sheetRequest.then( function {									// Individual sprite needs to be extracted from the spritesheet									var width = settings.imageWidth;									var height = settings.imageHeight;									var posPx = posToPx( $box.data( 'pos' ) );									var imgCanv = getCanvas( 'image' );									imgCanv.clear;									imgCanv.ctx.drawImage( spritesheet, posPx.left, posPx.top, width, height, 0, 0, width, height );									var d = $.Deferred;									imgCanv.canvas.toBlob( d.resolve );									return d.promise;								} ); }							$.when( data ).then( function( blob ) {								$button.removeClass( 'spriteedit-processing' );								var name = $box.data( 'sort-key' ) + '.png';								// IE10+: (has Blob, but not a[download])								if ( navigator.msSaveBlob ) {									return navigator.msSaveBlob( blob, name );								}								var dlLink = $( '' ).attr( { href: URL.createObjectURL( blob ), download: name, } ).appendTo( 'body' );								dlLink[0].click;								dlLink.remove;							} ); },					} ),					makeButton( i18n.ctxDeleteImage, { type: [ 'destructive', 'primary' ], icon: 'trash', action: function { tooltip.hide( function {								var $box = $parent.parent;								change( 'delete', { $elem: $box, $parent: $box.parent, index: $box.index - 1, } );							} );						},					} ),				], { horizontal: true, class: 'spriteedit-tooltip-controls' } ); } );		}		/* Window events */		$win.on( 'resize.spriteEdit', $.throttle( 32, function {			var $conflict = $( '#spriteedit-dialog-conflict' );			if ( $conflict.length && $conflict.is( ':visible' ) ) {				var $textarea = $conflict.find( 'textarea' );				$textarea.css( 'max-height', (					$conflict.find( '.spriteedit-dialog-text' ).height - $textarea.parent[0].offsetTop				) + 'px' );			}		} ) );		var updateMouse = function( e ) {			mouse.moved = true;			mouse.x = e.clientX;			mouse.y = e.clientY;		};		// Only update mouse while sorting, dragging, or while over a handle		$doc.on( 'mouseenter.spriteEdit mousemove.spriteEdit', '.spriteedit-handle', function( e ) { if ( !sorting ) { updateMouse( e ); }		} );		$( document ).on( 'mousemove.spriteEdit', function( e ) { if ( sorting ) { updateMouse( e ); }		} ).on( 'dragover.spriteEdit', function( e ) { updateMouse( e.originalEvent ); } );		// Disable smooth scrolling once scrolling ends so it does not interfere with user scrolling.		$win.on( 'scroll.spriteEdit', $.debounce( 250, function {			$root.removeClass( 'spriteedit-smoothscroll' );		} ) );	};	/** Editor functions **/	/**	 * Closes the editor	 *	 * If there are no changes, destroys the editor immediately.	 * If there are changes, opens a panel asking for confirmation first.	 *	 * "state" is what triggered the editor to close (e.g. from history navigation)	 */	var close = function( state ) {		if ( !$root.hasClass( 'spriteedit-enabled' ) || $( '#spriteedit-save' ).data( 'ooui-object' ).isDisabled ) {			destroy( true, state === 'history' );		} else {			var discardPanel = panels.discard || panel( 'discard', { title: i18n.panelDiscardTitle, content: $( ' ' ).text( i18n.panelDiscardText ), actions: { right: [ { text: i18n.panelDiscardContinue, config: { action: function { discardPanel.hide; }					} },					{ text: i18n.panelDiscardDiscard, config: { type: [ 'destructive', 'primary' ], icon: 'trash', action: function { discardPanel.hide( function {								destroy( true, state === 'history' );							} ); }					} },				] },			} );			discardPanel.show;		}	};	/**	 * Construct a wiki diff from an API request	 *	 * "data" is the API response.	 * Returns a jQuery object containing the diff table, an error message	 * if something went wrong, or nothing if the diff is empty.	 */	var makeDiff = function( data ) {		if ( !data || !data.query || !data.query.pages ) {			return i18n.genericError;		}		var page = data.query.pages[0];		if ( !page ) {			return i18n.diffErrorMissingPage;		}		var diff = page.revisions[0].diff.body;		if ( diff === undefined ) {			return i18n.diffError;		}		if ( !diff.length ) {			return;		}		return $( ' ' ).addClass( 'diff' ).append( $( ' ' ).addClass( 'diff-marker' ), $( ' ' ).addClass( 'diff-content' ), $( ' ' ).addClass( 'diff-marker' ), $( ' ' ).addClass( 'diff-content' ), $( ' ' ).html( diff ) );	};	var names = ( function { var promises = {}; /**		 * Create a deferred object for the request type *		 * If a deferred of this type already exists, or names is not * modified, returns false. *		 * Otherwise, adds the deferred's promise to the list, and returns * the deferred. */		var makeDeferred = function( type ) { if ( promises[type] ) { return false; }			var deferred = $.Deferred; promises[type] = deferred.promise; if ( !names.modified ) { deferred.resolve; return false; }			return deferred; };		return { /**			 * Invalidates all promises and sets the modified state, if specified */			invalidate: function( modified ) { promises = {}; if ( modified !== undefined ) { names.modified = modified; }			},			/**			 * Returns the names object */			getObject: function { var deferred = makeDeferred( 'object' ); if ( !deferred ) { return promises.object; }				sheet.updatePositions.done( function {					var $sections = $doc.find( '.spritedoc-section' );					var sectionIds = [];					var getSectionId = ( function { var id = 0; return function { if ( id < sectionIds.length ) { sectionIds.sort( function( a, b ) {									return a - b;								} ); $.each( sectionIds, function( _, v ) {									if ( v - id > 1 ) {										return false;									}									id = v;								} ); }							id++; sectionIds.push( id ); return id; };					} );					$sections.each( function { var id = $( this ).data( 'section-id' ); if ( id !== undefined ) { sectionIds.push( id ); }					} );					var headingRows = [];					var ids = [];					$sections.each( function { var $section = $( this ); var sectionId = $section.data( 'section-id' ) || getSectionId; var sectionName = $section.find( '.mw-headline' ).text.replace( /\s+/g, ' ' ); var row = {}; row[i18n.luaKeyName] = sectionName; row[i18n.luaKeyId] = sectionId; headingRows.push( row ); $section.find( '.spritedoc-box' ).each( function {							var $box = $( this );							var pos = $box.data( 'pos' );							if ( pos === undefined ) {								pos = $box.data( 'new-pos' );							}							$box.find( '.spritedoc-name' ).find( 'code' ).each( function { var $this = $( this ); var id = $this.text.replace( /\s+/g, ' ' ); ids.push( {									sortKey: id.toLowerCase,									id: id,									pos: pos,									section: sectionId,									deprecated: $this.hasClass( 'spritedoc-deprecated' ),									nolink: $this.hasClass( 'spritedoc-nolink'),									black: $this.hasClass('spritedoc-black'),									dark: $this.hasClass('spritedoc-dark')								} ); } );						} );					} );					ids.sort( function( a, b ) { return a.sortKey > b.sortKey ? 1 : -1;					} );					var idsRows = {};					$.each( ids, function { var idData = {}; idData[i18n.luaKeyPos] = this.pos; idData[i18n.luaKeySection] = this.section; if ( this.deprecated ) { idData[i18n.luaKeyDeprecated] = this.deprecated; }						if (this.nolink) { idData[i18n.luaKeyNolink] = this.nolink; }						if (this.black) { idData[i18n.luaKeyBlack] = this.black; }						if (this.dark) { idData[i18n.luaKeyDark] = this.dark; }						idsRows[this.id] = idData; } );					// Sort the settings object so it doesn't change order					// everytime due to lua not supporting ordered tables					var sortedSettings = {};					Object.keys( spriteSettings ).sort.forEach( function( key ) { sortedSettings[key] = spriteSettings[key]; } );					var table = {};					table[i18n.luaKeySettings] = sortedSettings;					table[i18n.luaKeySections] = headingRows;					table[i18n.luaKeyIds] = idsRows;					deferred.resolve( table );				} ); return promises.object; },			/**			 * Returns the names Lua table * 			 * Updates the URL timestamp if URLs are being used and the sheet * has been modified. As such, this always generates a new table if * there isn't one already pending. */			getTable: function { if ( promises.table && promises.table.state === 'resolved' ) { promises.table = null; }				var deferred = makeDeferred( 'table' ); if ( !deferred ) { return promises.table; }				names.getObject.then( function( obj ) {					if ( spriteSettings[i18n.luaKeySettingsUrl] || spriteSettings[i18n.luaKeySettingsVersion] ) {						var url = $doc.data( 'original-url' ).split( '?' );						// Update the version parameter if the sheet was modified						if ( sheet.modified ) {							url[1] = 'version=' + Date.now;							$doc.data( 'url', url.join( '?' ) );						}						// let's not save the urlfunc anymore						// obj[i18n.luaKeySettings][i18n.luaKeySettingsUrl] =						// 	luaTable.func( $doc.data( 'urlfunc' ).replace( /\$1/, url[1] ) );						// save raw version parameter from url string						// this will allow us to call getUrl in the SpriteDoc						// by pulling settings.version that we saved here in isolation						// without having to save the entire urlfunc string						obj[i18n.luaKeySettings][i18n.luaKeySettingsVersion] = url[1];					}					deferred.resolve( 'return ' + luaTable.create( obj ) ); } );				return promises.table;			},			/**			 * Sets the names Lua table to the specified content			 */			setTable: function( table ) {				names.invalidate( true );				promises.table = $.Deferred.resolve( table ).promise;			},			/**			 * Requests a diff of the names Lua table against			 * the current revisions content			 */			getDiff: function {				var deferred = makeDeferred( 'diff' );				if ( !deferred ) {					return promises.diff;				}				names.getTable.then( function( table ) { return retryableRequest( function {						return new mw.Api( { ajax: { contentType: 'multipart/form-data' }, } ).post( { action: 'query', prop: 'revisions', titles: dataPage, rvprop: '', rvdifftotext: table, rvlimit: 1, formatversion: 2, } );					} );				} ).then( function( data ) { var diff = makeDiff( data ); names.modified = !!diff; deferred.resolve( diff ); }, function( code, data ) { deferred.reject( code, data ); promises.diff = null; } );				return promises.diff;			},			/**			 * Saves the names table			 *			 * "summary" is the edit summary for the edit.			 */			save: function( summary, conflict ) {				var deferred = makeDeferred( 'save' );				if ( !deferred ) {					return promises.save;				}				names.getTable.then( function( table ) { // TODO: Check if edit actually succeeded on failure or null edit return retryableRequest( function {						return new mw.Api( { ajax: { contentType: 'multipart/form-data' }, } ).postWithToken( 'csrf', { action: 'edit', nocreate: true, title: dataPage, text: table, // If there's already been an edit conflict, just allow the edit // through conflict-free, as it's already annoying enough to // deal with one conflict. basetimestamp: !conflict ? $doc.data( 'datatimestamp' ) : undefined, summary: summary, tags: canTag ? 'spriteeditor' : undefined, formatversion: 2, } );					} );				} ).then( deferred.resolve, function( code, data ) { deferred.reject( code, data ); promises.save = null; } );				return promises.save;			},		};	} ); var sheet = ( function {		var promises = {};		/**		 * Create a deferred object for the request type		 *		 * If a deferred of this type already exists, or the sheet is not		 * modified, returns false.		 *		 * Otherwise, adds the deferred's promise to the list, and returns		 * the deferred.		 */		var makeDeferred = function( type ) {			if ( promises[type] ) {				return false;			}			var deferred = $.Deferred;			promises[type] = deferred.promise;			if ( !sheet.modified ) {				deferred.resolve;				return false;			}			return deferred;		};		return {			/**			 * Invalidates all promises and sets the modified state, if specified			 */			invalidate: function( modified ) {				promises = {};				if ( modified !== undefined ) {					sheet.modified = modified;				}				if ( spriteSettings[i18n.luaKeySettingsUrl] || spriteSettings[i18n.luaKeySettingsVersion] ) {					names.invalidate( true );				}			}, /**			 * Invalidates just the stash's promise */			invalidateStash: function { promises.stash = null; },			/**			 * Updates the potential position information * for any new images, and resizes the canvas */			updatePositions: function { var deferred = makeDeferred( 'pos' ); if ( !deferred ) { return promises.pos; }				sheetRequest.then( function {					var lastPos = spriteSettings[i18n.luaKeySettingsPos] || 1;					var usedPos = {};					usedPos[lastPos] = true;					var newImgs = [];					$doc.find( '.spritedoc-box' ).each( function { var $box = $( this ); var pos = $box.data( 'pos' ); if ( pos === undefined ) { newImgs.push( $box ); } else { usedPos[pos] = true; if ( pos > lastPos ) { lastPos = pos; }						}					} );					if ( newImgs.length ) {						var unusedPos = [];						for ( var i = 1; i <= lastPos; i++ ) {							if ( !usedPos[i] ) {								unusedPos.push( i );							}						}						newImgs.forEach( function( $box ) { $box.data( 'new-pos', unusedPos.length ? unusedPos.shift : ++lastPos ); } );						if ( !unusedPos.length ) {							var imagesPerRow = ( settings.sheetWidth + settings.spacing ) / ( settings.imageWidth + settings.spacing );							settings.sheetHeight = Math.ceil( lastPos / imagesPerRow ) * ( settings.imageHeight + settings.spacing ) - settings.spacing;							getCanvas( 'sheet' ).resize;						}					}					deferred.resolve;				} ); return promises.pos; },			/**			 * Draws the new sheet and returns it as a data URL */			getData: function { var deferred = makeDeferred( 'sheet' ); if ( !deferred ) { return promises.sheet; }				$.when( sheet.updatePositions, $.when.apply( null, loadingImages ) ).then( function {					var sheetCanvas = getCanvas( 'sheet' );					sheetCanvas.clear;					sheetCanvas.ctx.drawImage( spritesheet, 0, 0 );					// TODO: Clear deleted images so when new images fill their place					// the original images don't show up while the old sheet is cached					// Insert new images into sheet					$doc.find( '.spriteedit-new' ).each( function { var $box = $( this ); var img = $box.find( 'img' )[0]; var pos = $box.data( 'pos' ); if ( pos === undefined ) { pos = $box.data( 'new-pos' ); }						var posPx = posToPx( pos ); // Clear previous image including spacing, just in-case // someone manually uploaded an image overlapping the spacing sheetCanvas.ctx.clearRect(							posPx.left - settings.spacing,							posPx.top - settings.spacing,							settings.imageWidth + settings.spacing * 2,							settings.imageHeight + settings.spacing * 2						); sheetCanvas.ctx.drawImage( img, posPx.left, posPx.top ); } );					sheetCanvas.canvas.toBlob( deferred.resolve );					loadingImages = [];				}, function {					deferred.reject;					promises.sheet = null;				} ); return promises.sheet; },			/**			 * Stashes the sheet to the server */			stash: function { var deferred = makeDeferred( 'stash' ); if ( !deferred ) { return promises.stash; }				sheet.getData.then( function( blob ) {					return retryableRequest( function { return new mw.Api( {							ajax: { contentType: 'multipart/form-data' },						} ).postWithToken( 'csrf', {							action: 'upload',							stash: true,							ignorewarnings: true,							filename: $doc.data( 'spritesheet' ),							file: blob,							formatversion: 2,						} ); } );				} ).then( function( data ) {					deferred.resolve( data.upload.filekey );				}, function( code, data ) {					deferred.reject( code, data );					promises.stash = null;				} ); return promises.stash; },			/**			 * Commits the stash to the server *			 * If the request fails, will re-stash the image and commit it, once. * 			 * "summary" is the edit summary for the upload. * "retried" is a boolean stating whether the upload has * already been retried. */			save: function( summary, retried ) { var deferred = makeDeferred( 'save' ); if ( !deferred ) { return promises.save; }				sheet.stash.then( function( key ) {					// TODO: Check if upload actually succeeded on failure					return retryableRequest( function { return new mw.Api.postWithToken( 'csrf', {							action: 'upload',							ignorewarnings: true,							comment: summary,							filename: $doc.data( 'spritesheet' ),							filekey: key,							tags: canTag ? 'spriteeditor' : undefined,							formatversion: 2,						} ); } );				} ).then( deferred.resolve, function( code, data ) {					promises.save = null;					if ( retried ) {						if ( code === 'stashedfilenotfound' ) {							sheet.invalidateStash;						}						deferred.reject( code, data );					} else {						sheet.invalidateStash;						sheet.save( summary, true );					}				} ); return promises.save; },		};	} );	/**	 * Performs a save of the ID changes and/or spritesheet changes	 *	 * If there are changes and everything works out, the editor closes, the current	 * page is purged, the timestamp is updated (for another edit in this session),	 * and a success message is displayed.	 * If there aren't changes, the editor will silently close, as if a null edit was performed	 * (which if the diff wasn't ready in time, there will have been).	 * In the event of an edit conflict, a manual resolution panel will be displayed.	 * Otherwise, whatever error occurred will be displayed.	 *	 * "summary" is the text from the summary field.	 * "refresh" is a boolean, which when true will cause the sprite documentation	 * to be reparsed after saving (e.g. in the event of an edit conflict).	 * "conflict" is a boolean which specifies if this is saving an edit conflict or not	 */	var saveChanges = function( summary, refresh, conflict ) { console.log('Saving...'); // No more editing $root.addClass( 'spriteedit-hidecontrols' ); // Have to refresh if a new image is added to get the sprite HTML if ( refresh !== false ) { refresh = !!$( '.spriteedit-new-image' ).length; }		sheet.save( summary ).then( function {			console.log('Saved file!');			return names.save( summary, conflict );		} ).then( function( data ) {			if ( sheet.modified ) {				console.log('Lua was modified');				if ( spriteSettings[i18n.luaKeySettingsUrl] || spriteSettings[i18n.luaKeySettingsVersion] ) {					var url = $doc.data( 'url' );					overwriteSpritesheet( url );					$doc.data( 'original-url', url );				} else {					sheet.getData.then( function( blob ) { overwriteSpritesheet( URL.createObjectURL( blob ) ); } );				}			}			// Prevent disabling, otherwise we'd end up with the old			// spritesheet if the editor was restarted and closed			overwriteSpritesheet.style = null;			// Null edit, nothing to do here			if ( !data || data.edit.nochange ) {				return;			}			$doc.data( 'datatimestamp', fixTimestamp( data.edit.newtimestamp ) );			// Purge this page so the changes show up immediately			retryableRequest( function { return new mw.Api.post( {					action: 'purge',					pageids: mw.config.get( 'wgArticleId' ),				} ); } );		} ).then( function {			var newContent;			if ( refresh ) {				newContent = retryableRequest( function { return parseApi.get( {						title: mw.config.get( 'wgPageName' ),						text: $( '' ).html( $.parseHTML( $doc.attr( 'data-refreshtext' ) ) ).html,					} ); } );			}			$.when( newContent ).done( function( data ) { if ( refresh ) { $doc.replaceWith( data.parse.text ); }			} ).always( function { destroy; mw.hook( 'postEdit' ).fire( { message: i18n.changesSavedNotice } ); } );		}, handleSaveError ); };	/**	 * Handles special case errors that occur when saving (AKA, handleError with edit conflicts) *	 * If there's an edit conflict, this will be display a barely human-usable edit conflict * panel, where the user may manually merge the raw lua table changes. Sprite edit conflict * merging is not supported (because image uploading doesn't implement edit conflicts, for one). * Otherwise, passes it on to handleError. *	 * "code" and "data" are the standard variables returned by a mw.Api promise rejection. */	var handleSaveError = function( code, data ) { // Allow editing again $root.removeClass( 'spriteedit-hidecontrols' ); $( '#spriteedit-save' ).find( 'button' ).removeClass( 'spriteedit-processing' ); if ( code !== 'editconflict' ) { handleError( code, data ); return; }		var conflictPanel = panels.conflict || panel( 'conflict', {			title: i18n.panelConflictTitle,			content: $( ' ' ).text( i18n.panelConflictText ),			actions: {				left: { text: i18n.panelConflictReview, config: {					id: 'review-conflict-changes',					action: function {						var $button = $( this );						if ( $button.hasClass( 'spriteedit-processing' ) ) {							return;						}						$button.blur.addClass( 'spriteedit-processing' );						var changesPanel = panels.ecchanges || panel( 'ecchanges', { title: i18n.panelEcchangesTitle, content: $( ' ' ).addClass( 'spriteedit-id-changes' ), actions: { right: { text: i18n.panelEcchangesReturn, config: { id: 'spriteedit-return-edit', type: [ 'progressive', 'primary' ], action: function { conflictPanel.show; },							} } },							onClose: function { names.invalidate( true ); },						} );						names.setTable( $( '#spriteedit-ec-curText' ).data( 'ooui-object' ).getValue );						names.getDiff.then( function( diff ) { changesPanel.clean; if ( !diff ) { diff = i18n.panelChangesNoDiffFromCur; }							changesPanel.$text.find( '.spriteedit-id-changes' ).append( diff ); changesPanel.show; }, function( code, data ) { $button.removeClass( 'spriteedit-processing' ); handleError( code, data ); } );					}				} },				right: { text: i18n.panelConflictSave, config: {					id: 'save-conflict',					type: [ 'progressive', 'primary' ],					action: function {						var $button = $( this );						if ( $button.hasClass( 'spriteedit-processing' ) ) {							return;						}						$button.blur.addClass( 'spriteedit-processing' );						names.setTable( $( '#spriteedit-ec-curText' ).data( 'ooui-object' ).getValue );						saveChanges( $( '#spriteedit-summary' ).data( 'ooui-object' ).getValue, true, true );					},				} },			},			onShow: function {				this.$actions.find( 'button' ).removeClass( 'spriteedit-processing' );				var $textarea = this.$text.find( 'textarea' );				$textarea.css( 'max-height', ( this.$text.height - $textarea.parent[0].offsetTop ) + 'px' );			},			onClose: function {				names.invalidate( true );			},		} ); $.when(			names.getTable,			names.getDiff,			retryableRequest( function { return revisionsApi.get( { titles: dataPage } ); } )		).then( function( table, diff, curTextData ) {			// TODO: Change to MultilineTextInputWidget on MW 1.30			var curEditbox = new OO.ui.TextInputWidget( { id: 'spriteedit-ec-curText', multiline: true, value: curTextData[0].query.pages[0].revisions[0].content, } );			curEditbox.$element.data( 'ooui-object', curEditbox );			var oldEditbox = new OO.ui.TextInputWidget( { id: 'spriteedit-ec-oldText', multiline: true, readOnly: true, value: table, } );			oldEditbox.$element.data( 'ooui-object', oldEditbox );			var $curText = $( ' ' ).append( $( ' ' ).text( i18n.panelConflictCurText ), curEditbox.$element );			var $oldText = $( ' ' ).append( $( ' ' ).text( i18n.panelConflictYourText ), oldEditbox.$element );			conflictPanel.$text.append( $( ' ' ).addClass( 'spriteedit-ec-editboxes' ).append(					$curText,					$oldText				), diff );			conflictPanel.show;		}, function( code, data ) {			$( '#spriteedit-save' ).find( 'button' ).removeClass( 'spriteedit-processing' );			handleError( code, data );		} ); };	/**	 * Converts a position to pixel co-ordinates on the sheet */	var posToPx = function( pos ) { settings.imagesPerRow = settings.imagesPerRow || ( settings.sheetWidth + settings.spacing ) / ( settings.imageWidth + settings.spacing ); pos -= 1; return { left: pos % settings.imagesPerRow * ( settings.imageWidth + settings.spacing ), top: Math.floor( pos / settings.imagesPerRow ) * ( settings.imageHeight + settings.spacing ), };	};	/**	 * Inserts new images into the editor *	 * A box is created for the new image, with the name set to the file's name (minus extension). * The box is inserted into the nearest section and then sorted to the correct location. * Any file that doesn't match the image/* mime type is ignored. *	 * "files" is a "FileList" (or an array of "File" objects) from a file input or drop. * "section" is an Element which is the section to place the sprites in. Defaults to	 * the nearestSection */	var insertSprites = function( files, section ) { var $parent = $( section || nearestSection ).find( '.spritedoc-boxes' ); $.each( files, function {			if ( !this.type.match( /^image\// ) ) {				return;			}			var $newBox = $boxTemplate.clone;			$newBox.find( 'code' ).text( this.name.trim.replace( /\.[^\.]+$/, '' ).replace( /_/g, ' ' ) );			scaleImage( this ).done( function( $img ) { $img.addClass( 'spriteedit-new-image' ); $newBox.find( '.spritedoc-image' ).html( $img ); } );			var name = $newBox.find( '.spritedoc-name' ).text;			$newBox.attr( 'data-sort-key', name );			var index = getAlphaIndex( name, undefined, $parent );			change( 'insert', { $elem: $newBox, index: index - 1, $parent: $parent, } );		} );	};	/**	 * Constructs (or retrieves) a canvas for a particular purpose *	 * Either for image scaling, or spritesheet creation. *	 * Returns an object containing the canvas, its context, * and some convenience functions for clearing the canvas * and for updating its dimensions. *	 * "type" is the canvas type ("image" or "sheet"). */	var getCanvas = ( function {		var canvases = {};		return function( type ) {			if ( canvases[type] ) {				return canvases[type];			}			var $canvas = $( ' ' ).attr( { width: settings[type + 'Width'], height: settings[type + 'Height'], } ).appendTo( $doc );			var canvas = $canvas[0];			var ctx = canvas.getContext( '2d' );			var funcs = {				canvas: canvas,				ctx: ctx,				resize: function {					$canvas.attr( { width: settings[type + 'Width'], height: settings[type + 'Height'], } );				},				clear: function {					ctx.clearRect( 0, 0, canvas.width, canvas.height );				},			};			canvases[type] = funcs;			return funcs;		};	} ); /**	 * Scales an image down to the correct size (if necessary) *	 * Performs only a basic low quality scaling, ignoring the original image's	 * aspect ratio. * Also performs a "scale" if the image isn't a png, in essence converting it to one. *	 * Returns a promise which will contain a jQuery object containing a new image element * the url of which is either a object URL or data URL of the scaled image. */	var scaleImage = ( function {		var scaler;		return function( file ) {			var deferred = $.Deferred;			var img = new Image;			img.onload = function {				if ( file.type === 'image/png' && img.width === settings.imageWidth && img.height === settings.imageHeight ) {					// No scaling necessary					deferred.resolve( $( img ) );					return;				}				if ( !scaler ) {					scaler = getCanvas( 'image' );				}				scaler.clear;				scaler.ctx.drawImage( img, 0, 0, settings.imageWidth, settings.imageHeight );				URL.revokeObjectURL( img.src );				var scaledImg = new Image;				scaledImg.onload = function {					deferred.resolve( $( scaledImg ) );				};				scaler.canvas.toBlob( function( blob ) { scaledImg.src = URL.createObjectURL( blob ); } );			};			img.src = URL.createObjectURL( file );			loadingImages.push( deferred.promise );			return deferred.promise;		};	} ); /**	 * Creates panels to display in a dialog window *	 * If this is the first panel, the dialog window is created. * Panels are stored in the "panels" object, which should be checked for * panel id prior to calling this function to create a new panel, * so duplicates are not made. * E.g: `var myPanel = panels.myPanel || panel( 'myPanel', ... );` *	 * "id" is the unique ID that identifies this panel * "config" is an object of config options for this panel * "title" is the string to use for the panel's title * "content" is HTML to use for the panel's text area, *  it can be in any format $.append takes (jQuery, nodes, HTML strings, array) *  The panel will reset to this HTML whenever the dialog box is closed *  (if "cached" isn't specified) * "actions" is an object to specify which buttons to place. *  It has a "left" and "right" key to specify which side of the *  dialog to place the buttons which accept an array of objects *  which are passed to `makeButton` * "onShow" is a callback which is called whenever the dialog is	 *   opened, or this panel is shown * "onHide" is a callback which is called whenever the dialog is	 *   closed, or this panel is hidden * "onClose" is a callback which is called whenever the dialog is	 *   closed, regardless of which panel is currently shown * "cached" is a boolean specifying if the panel's HTML should be	 *   retained after the dialog is closed, or should be reset to the *  value of "config.content" *	 * Returns the panel object for the new panel (or the currently displayed	 * panel if called with no arguments). * The panel object contains jQuery objects of the panel's parts, some of * the config options, and methods for controlling the panel/dialog window. * 	 * panel.show shows the panel, opening the dialog if it isn't already * It accepts a callback function which is called once the dialog/panel * opening animation is finished * panel.hide closes the dialog * It accepts a callback function which is called once the dialog closing * animation is finished * panel.clean deletes the panel's text and resets it to the initial * value specified in "config.content" */	var panel = function( id, config ) { var $overlay; var $dialog = $( '.spriteedit-dialog' ); if ( !id ) { return panels[$dialog.data( 'active-panel' )]; }		var thisPanel = panels[id]; if ( thisPanel ) { return thisPanel; }		if ( !$dialog.length ) { $overlay = $( ' ' ).addClass( 'spriteedit-dialog-overlay' ).css( 'display', 'none' ); $dialog = $( ' ' ).addClass( 'spriteedit-dialog' ).append(				makeButton( '', { id: 'spriteedit-dialog-close', icon: 'close', title: i18n.panelCloseTip, action: function { var closingPanel = panel; closingPanel.hide; if ( closingPanel.onClose ) { closingPanel.onClose.call( closingPanel ); }					},				} )			).appendTo( $overlay ); }		if ( config.content && !Array.isArray( config.content ) ) { config.content = [ config.content ]; }		var $panel = $( ' ' ) .prop( 'id', 'spriteedit-dialog-' + id ) .addClass( 'spriteedit-dialog-panel' ); var $title = $( ' ' ).addClass( 'spriteedit-dialog-title' ).text( config.title ).appendTo( $panel ); var $text = $( ' ' ).addClass( 'spriteedit-dialog-text' ).appendTo( $panel ); if ( config.content ) { $text.append( config.content ); // Keep content as the initial HTML for resetting config.content = $text.html; }		var $actions; if ( config.actions ) { $actions = $( ' ' ).addClass( 'spriteedit-dialog-actions' ).appendTo( $panel ); var $leftActions = $( ' ' ).appendTo( $actions ); var $rightActions = $( ' ' ).css( 'float', 'right' ).appendTo( $actions ); var addButtons = function( buttons, right ) { if ( !buttons ) { return; }				var $area = right ? $rightActions : $leftActions; if ( !Array.isArray( buttons ) ) { buttons = [ buttons ]; }				$.each( buttons, function {					$area.append( makeButton( this.text, this.config ) );				} ); };			addButtons( config.actions.left ); addButtons( config.actions.right, true ); }		$dialog.append( $panel ); if ( $overlay ) { $body.append( $overlay ); } else { $overlay = $dialog.parent; }		$overlay.show; if ( $overlay.css( 'opacity' ) === '0' ) { $overlay.hide; }		$panel.hide; thisPanel = panels[id] = { $panel: $panel, $title: $title, $text: $text, $actions: $actions, show: function( callback ) { $dialog.css( { transform: 'none', transition: 'none' } ); var prevPanel; if ( $overlay.css( 'opacity' ) === '1' ) { prevPanel = panel; // Remember to cleanup previous panel when the dialog is closed if ( prevPanel && !prevPanel.cached ) { prevPanel.cleanup = true; }					if ( prevPanel.onHide ) { prevPanel.onHide.call( prevPanel ); }				}				var oldRect; if ( prevPanel ) { oldRect = $dialog[0].getBoundingClientRect; prevPanel.$panel.hide; }				$overlay.css( 'display', '' ); $panel.css( 'display', '' ); if ( prevPanel ) { var newRect = $dialog[0].getBoundingClientRect; $dialog.css( 'transform', 'scale(1)' ).redraw.css( 'transition', '' ); if ( oldRect.width === newRect.width && oldRect.height === newRect.height ) { // No transition to be made $dialog.trigger( 'transitionend' ); } else { $panel.css( 'display', 'none' ); $dialog.css( {							width: oldRect.width,							height: oldRect.height,						} ).redraw.css( {							width: newRect.width,							height: newRect.height,						} ).transitionEnd( function {							panelShown = true;							$dialog.css( { width: , height:  } );							$panel.css( 'display', '' );						} ); // Make sure the panel gets displayed var panelShown; setTimeout( function {							if ( panelShown ) {								return;							}							$dialog.trigger( 'transitionend' );						}, 1000 ); }				} else { $dialog.css( 'transform',  ).redraw.css( 'transition',  ); $overlay.css( 'opacity', 1 ); $dialog .addClass( 'spriteedit-elastic' ) .css( 'transform', 'scale(1)' ) .transitionEnd( function {							$dialog.removeClass( 'spriteedit-elastic' );						} ); }				$dialog.data( 'active-panel', id ); if ( config.onShow ) { config.onShow.call( thisPanel ); }				if ( callback ) { callback.call( thisPanel ); }				return this; },			hide: function( callback ) { if ( !$overlay.is( ':visible' ) ) { return this; }				if ( config.onHide ) { config.onHide.call( thisPanel ); }				$dialog.css( 'transform', 'scale(0)' ); $overlay.css( 'opacity', 0 ).transitionEnd( function {					// Reset scrollbar BEFORE hiding					$text.scrollLeft( 0 );					$text.scrollTop( 0 );					$overlay.css( 'display', 'none' );					thisPanel.$panel.css( 'display', 'none' );					if ( !config.cached ) {						thisPanel.cleanup = true;					}					$.each( panels, function { if ( this.cleanup ) { this.clean; }					} );					if ( callback ) {						callback.call( thisPanel );					}				} ); return this; },			clean: function { $text.empty; if ( config.content ) { $text.append( config.content ); }				thisPanel.cleanup = false; },			onShow: config.onShow, onHide: config.onHide, onClose: config.onClose, cached: config.cached, };		return thisPanel; };	/**	 * Creates a simple tooltip *	 * Used to create a small tooltip anchored to an element. * Only a single tooltip can exist at a time (opening a new one will close the old) * and clicking anywhere but the tooltip itself will close it. *	 * In the main function: * "$elem" is a jQuery object which the tooltip should be anchored to. * "content" is the content to go in the tooltip, and can be in whatever format can * go into jQuery.append (jQuery objects, elements, HTML strings, etc.). * "config" contains key-value pairs of the following configuration options: *  "horizontal" is a boolean determining if the tooltip should open horizontally or vertically *  relative to its anchor. *  "callback" is a function called once the tooltip finishes its opening animation. *  "class" is a classname to add to the tooltip *	 * In the tooltip.hide function: * "callback" is a function called once the tooltip finishes its closing animation. */	var tooltip = ( function {		var $tooltip = $, $anchor = $;		$win.click( function( e ) { if (				e.which === 1 &&				$tooltip.length && !$tooltip.has( e.target ).length &&				$tooltip.css( 'opacity' ) === '1'			) { func.hide; }		} );		var func = function( $elem, content, config ) {			config = config || {};			if ( $tooltip.length ) {				if ( $elem.is( $anchor ) ) {					func.hide;					return;				}				func.hide;			}			$anchor = $elem;			$tooltip = $( ' ' ).addClass( 'spriteedit-tooltip' ).append( $( ' ' ).addClass( 'spriteedit-tooltip-text' ).append( content ), $( ' ' ).addClass( 'spriteedit-tooltip-arrow' ) ).appendTo( document.body );			if ( config.class ) {				$tooltip.addClass( config.class );			}			var anchorPos = $anchor.offset;			var bodyPos = $body.offset;			if ( config.horizontal ) {				$tooltip.addClass( 'spriteedit-tooltip-horizontal' ).css( { top: anchorPos.top - bodyPos.top + $anchor.outerHeight / 2, left: anchorPos.left - bodyPos.left - $tooltip.outerWidth, } );			} else {				$tooltip.css( { top: anchorPos.top - bodyPos.top - $tooltip.outerHeight, left: anchorPos.left - bodyPos.left + $anchor.outerWidth / 2, } );			}			$tooltip.addClass( 'spriteedit-elastic' ).css( { opacity: 1, transform: 'scale(1)', } ).transitionEnd( function { $( this ).removeClass( 'spriteedit-elastic' ); if ( config.callback ) { config.callback.call( this ); }			} );		};		func.hide = function( callback ) {			if ( !$tooltip.length ) {				return;			}			$tooltip.off( 'transitionend.spriteEdit' ).css( { opacity: 0, transform: 'scale(0)', } ).transitionEnd( function { $( this ).remove; if ( callback ) { callback.call( this ); }			} );			$tooltip = $anchor = $;		};		return func;	} ); /**	 * Makes a set of elements sortable by dragging them *	 * The elements can either be dragged around to be sorted within or between * each set manually or can be sorted in each set automatically, with dragging * only being used to move them between sets. *	 * The "options" object contains: * "selectors" is a string containing the selector of the set of elements to enable sorting, * or an object containing containing additional selections to define the sortable element's parent * and the sortable elements container (which elements can be sorted between). * "handle" is a string containing the selector to find the element which the handle is a child of, * in relation to the sortable element. Set if the handle is not a direct child of the sortable * element. * "vertical" is a boolean determining if the elements should only be able to be moved vertically. * "autoSort" is a boolean determining if the elements should be sorted within their container * automatically, only allowing elements to be manually moved between containers. * "sortStart" is a callback function called after the placeholder and ghost elements are created, * but prior to sorting actually beginning. "this" is set to the ghost element, and the first * argument is set to the placeholder element if there is one. * "sortEnd" is a callback function called after the element has been sorted, but prior to the * placeholder and ghost elements being destroyed. Variables are set the same as "sortStart". */	var makeSortable = function( options ) { var selectors = options.selectors; var handle = options.handle || ''; var vertical = options.vertical; var autoSort = options.autoSort; var selector = selectors; var $ghost = $, $placeholder = $, $hover = $, $hoverParent = $; if ( typeof selectors !== 'string' ) { selector = selectors.parent + ' > ' + selectors.elem; }		if ( pointerEventsSupported ) { if ( autoSort ) { $doc.on( 'mouseenter.spriteEdit', selectors.container, function {					if ( $ghost.length ) {						$hoverParent = $( this ).css( 'outline', '1px dashed #000' );					}				} ).on( 'mouseleave.spriteEdit', selectors.container, function {					if ( $ghost.length ) {						$hoverParent.css( 'outline', '' );						$hoverParent = $;					}				} ); } else { $doc.on( 'mouseenter.spriteEdit', selector, function {					if ( $ghost.length && !$( this ).is( $placeholder ) ) {						$hover = $( this );					}				} ).on( 'mouseleave.spriteEdit', selector, function {					if ( $ghost.length ) {						$hover = $;					}				} ); }		}		$doc.on( 'mousedown.spriteEdit', selector + ' ' + handle + ' > .spriteedit-handle', function( e ) {			if ( e.which !== 1 ) {				return;			}			if ( handle ) {				$ghost = $( this ).closest( selector );			} else {				$ghost = $( this ).parent;			}			if ( $ghost.find( '.spriteedit-new' ).length && $ghost.text.trim === '' ) {				$ghost = $;				return;			}			tooltip.hide;			// Keep the documentation from getting smaller to allow for overscroll			$doc.css( 'min-height', $doc[0].getBoundingClientRect.height );			var ghostElem = $ghost[0];			if ( !autoSort ) {				// We don't want to clone all the content, just the parent element				$placeholder = $( '<' + ghostElem.nodeName + '>' )					.addClass( ghostElem.className + ' spriteedit-placeholder' )					.insertAfter( $ghost );			}			// Calculate cursor offset percentage to apply			// after the ghost is resized to its correct size var ghostRect = ghostElem.getBoundingClientRect; var cursorOffset = { top: ( ghostRect.top - e.clientY ) / ghostRect.height, left: ( ghostRect.left - e.clientX ) / ghostRect.width, };			$ghost.addClass( 'spriteedit-ghost' ).css( {				top: e.clientY,				left: e.clientX,			} ); // Apply offsets var newGhostRect = ghostElem.getBoundingClientRect; $ghost.css( {				marginTop: newGhostRect.height * cursorOffset.top,				marginLeft: newGhostRect.width * cursorOffset.left,			} ); if ( options.sortStart ) { options.sortStart.call( ghostElem, $placeholder[0] ); }			// Must be set after callback for collapsing. if ( !autoSort ) { $placeholder.css( 'min-height', ghostElem.getBoundingClientRect.height ); }			$ghost.parent.mouseenter; sorting = true; $root.addClass( 'spriteedit-sorting spriteedit-hidecontrols' ); requestAnimationFrame( mouseMove ); e.preventDefault; } );		var mouseMove = function {			if ( !$ghost.length ) {				return;			}			requestAnimationFrame( mouseMove );			if ( !mouse.moved ) {				return;			}			mouse.moved = false;			var pos = { top: mouse.y };			if ( !vertical ) {				pos.left = mouse.x;			}			$ghost.css( pos );			if ( !pointerEventsSupported ) {				// Emulate pointer-events:none				$ghost.css( 'visibility', 'hidden' );				var $nearest = $( document.elementFromPoint( mouse.x, mouse.y ) );				if ( autoSort ) {					$hoverParent.css( 'outline',  );					$hoverParent = $nearest.closest( selectors.container );					$hoverParent.css( 'outline', '1px dashed #000' );				} else {					$hover = $nearest.closest( selector );				}				$ghost.css( 'visibility',  );			}			if ( $hover.length ) {				var side = 'Before';				if ( $hover.index > $placeholder.index ) {					side = 'After';				}				$placeholder['insert' + side]( $hover );				$hover = $; }		};		$( document ).on( 'mouseup.spriteEdit', function( e ) {			if ( e.which !== 1 || !$ghost.length ) {				return;			}			var index = -1;			if ( autoSort ) {				if ( $hoverParent.length && !$ghost.closest( selectors.container ).is( $hoverParent ) ) {					var text = $ghost.attr( 'data-sort-key' ) || $ghost.text;					index = getAlphaIndex( text, undefined, $hoverParent.find( selectors.parent ) );				}			} else {				index = $placeholder.index;			}			if ( index > -1 && (					index - 1 !== $ghost.index ||					autoSort && $hoverParent.length &&					!$ghost.closest( selectors.container ).is( $hoverParent )				) ) {				// If the last name is moved, delete its box				if ( $ghost.hasClass( 'spritedoc-name' ) && !$ghost.siblings.length ) {					var $box = $ghost.closest( selectors.container );					change( 'delete', { $elem: $box, index: $box.index - 1, $parent: $box.parent, }, true );				}				change( 'insert', { $elem: $ghost, oldIndex: $ghost.index - 1, $oldParent: $ghost.parent, index: index - 1, $parent: $hoverParent.length && $hoverParent.find( selectors.parent ) || $placeholder.parent, } );			}			$ghost.removeAttr( 'style' ).removeClass( 'spriteedit-ghost' );			$hoverParent.css( 'outline',  );			$doc.css( 'min-height',  );			if ( options.sortEnd ) {				options.sortEnd.call( $ghost[0], $placeholder[0] );			}			$placeholder.remove;			$ghost = $placeholder = $hover = $hoverParent = $;			sorting = false;			$root.removeClass( 'spriteedit-sorting spriteedit-hidecontrols' );		} ); };	/**	 * Allows repeatable changes to be performed, which can be undone and redone *	 * The main function performs a change of a particular type. * "action" is the type of change this is: * * "edit" is changes to text (anything contentEditable) * * "insert" is any element being inserted, either fresh from the aether or taken *  from somewhere else in the document. * * "delete" is any element being removed from the document. * * "replace image" is when an image is replaced with a new image. * * "reset image" is when an image is reset to the original image in the sprite sheet. * "content" is an object containing anything necessary to describe the change, including * details to revert the change. * "queueChange" is a boolean determining if the change should be queued rather than committed * to history immediately. This allows multiple changes to be grouped as one history event. Note * that making a change which isn't queued will commit any currently queued changes to history * along with itself. * "oldChange" is a boolean determining if this change shouldn't be queued. Intended mainly for * undoing/redoing. *	 * The change.commit function allows queued changes to be committed to history. * The change.discard function allows queued changes to be discarded, although the changes * are not reverted. */	var change = ( function {		var queue = [];		var func = function( action, content, queueChange, oldChange ) {			var isBox;			var $box;			var $code;			switch ( action ) {				case 'edit':					if ( oldChange ) {						content.$elem.text( content.text );					}					if ( content.$elem.parent.hasClass( 'spritedoc-name' ) ) {						updateName( content.oldText, content.text, content.$elem );					}					names.invalidate( true );				break;				case 'insert':					var moved = content.$elem.parent.length;					isBox = content.$elem.hasClass( 'spritedoc-box' );					var $oldBox = !isBox && content.$elem.closest( '.spritedoc-box' );					if ( content.index === -1 ) {						content.$parent.prepend( content.$elem );					} else {						content.$parent.children.eq( content.index ).after( content.$elem );					}					if ( !moved && ( isBox || content.$elem.hasClass( 'spritedoc-section' ) ) ) {						content.$elem.find( '.spritedoc-name' ).find( 'code' ).each( function { updateName( undefined, $( this ).text, $( this ) ); } );						if ( $doc.find( '.spriteedit-new' ).length ) {							sheet.invalidate( true );						}					} else if ( content.$elem.hasClass( 'spritedoc-name' ) ) {						if ( moved ) {							$box = content.$elem.closest( '.spritedoc-box' );							if ( !$box.is( $oldBox ) ) {								updateBoxSorting( $oldBox );							}							updateBoxSorting( $box );						} else {							$code = content.$elem.find( 'code' );							updateName( undefined, $code.text, $code );						}					}					requestAnimationFrame( function { scrollIntoView( content.$elem ); } );					names.invalidate( true );				break;				case 'delete':					isBox = content.$elem.hasClass( 'spritedoc-box' );					$box = !isBox && content.$elem.closest( '.spritedoc-box' );					content.$elem.detach;					if ( isBox || content.$elem.hasClass( 'spritedoc-section' ) ) {						content.$elem.find( '.spritedoc-name' ).find( 'code' ).each( function { updateName( $( this ).text, undefined, $( this ) ); } );						sheet.invalidate( !!$doc.find( '.spriteedit-new' ).length );					} else if ( content.$elem.hasClass( 'spritedoc-name' ) ) {						$code = content.$elem.find( 'code' );						updateName( $code.text, undefined, $code );						updateBoxSorting( $box );					}					names.invalidate( true );				break;				case 'replace image':					$box = content.$parent.parent;					if ( content.$oldImg && content.$oldImg.length ) {						content.$oldImg.detach;					} else {						$box.addClass( 'spriteedit-new' );						content.$parent.find( '.sprite' ).addClass( 'spriteedit-replaced-image' );					}					content.$parent.append( content.$elem );					sheet.invalidate( true );				break;				case 'reset image':					content.$elem.detach;					content.$parent.find( '.sprite' ).removeClass( 'spriteedit-replaced-image' );					content.$parent.parent.removeClass( 'spriteedit-new' );					if ( !$doc.find( '.spriteedit-new' ).length ) { sheet.invalidate( false ); }				break; case 'toggle deprecation': content.$elem.toggleClass( 'spritedoc-deprecated' ); names.invalidate( true ); break; case 'toggle nolink': content.$elem.toggleClass( 'spritedoc-nolink' ); names.invalidate( true ); break; case 'toggle black': content.$elem.toggleClass( 'spritedoc-black' ); names.invalidate( true ); break; case 'toggle dark': content.$elem.toggleClass( 'spritedoc-dark' ); names.invalidate( true ); break; default: console.error( 'Invalid action: `%s`', action ); break; }			var hist = { action: action, content: content }; if ( !oldChange ) { queue.push( hist ); if ( !queueChange ) { func.commit; }			}		};		func.commit = function { addHistory( queue ); queue = []; };		func.discard = function { queue = []; if ( !$doc.find( '.spriteedit-new' ).length ) { sheet.invalidate( false ); }			if ( !changes.length ) { names.invalidate( false ); $.each( [					'#spriteedit-save',					'#spriteedit-summary',					'#spriteedit-review-button',				], function {					if ( $( this ).length ) {						$( this ).data( 'ooui-object' ).setDisabled( true );					}				} ); }		};		return func; } );	/**	 * Adds a change to history	 *	 * Handles enabling the save and undo button, disabling the redo button,	 * releasing undone object URLs, and deleting the undone changes.	 */	var addHistory = function( actions ) {		changes.push( actions );		if ( undoneChanges.length ) {			// Release now unusable image URLs			$.each( undoneChanges, function { if ( this.action === 'replace image' ) { URL.revokeObjectURL( this.content.$elem.attr( 'src' ) ); }			} );			undoneChanges = [];			$( '#spriteedit-redo' ).data( 'ooui-object' ).setDisabled( true );		}		$.each( [ '#spriteedit-undo', '#spriteedit-save', '#spriteedit-summary', '#spriteedit-review-button', ], function { if ( $( this ).length ) { $( this ).data( 'ooui-object' ).setDisabled( false ); }		} );	};	/**	 * Reverts a change	 *	 * Takes a previously stored history entry and performs the necessary change	 * to revert it.	 */	var revert = function( hist ) {		// Invert the history entry's changes to revert it		var i = hist.length, histChange, content;		while ( i-- ) {			histChange = hist[i];			content = histChange.content;			switch( histChange.action ) {				case 'edit':					change( 'edit', { $elem: content.$elem, text: content.oldText, oldText: content.text, }, false, true );				break;				case 'insert':					if ( content.$oldParent ) {						change( 'insert', { $elem: content.$elem, index: content.oldIndex, $parent: content.$oldParent, }, false, true );					} else {						change( 'delete', { $elem: content.$elem, $parent: content.$parent, }, false, true );					}				break;				case 'delete':					change( 'insert', { $elem: content.$elem, index: content.index, $parent: content.$parent, }, false, true );				break;				case 'replace image':					if ( content.$oldImg.length ) {						change( 'replace image', { $elem: content.$oldImg, $parent: content.$parent, $oldImg: content.$elem, }, false, true );					} else {						change( 'reset image', content, false, true );					}				break;				case 'reset image':					change( 'replace image', content, false, true );				break;				case 'toggle deprecation':					change( 'toggle deprecation', content, false, true );				break;				case 'toggle nolink':					change( 'toggle nolink', content, false, true );				break;				case 'toggle black':					change( 'toggle black', content, false, true );				break;				case 'toggle dark':					change( 'toggle dark', content, false, true );				break;			}		}		if ( !$doc.find( '.spriteedit-new' ).length ) {			sheet.invalidate( false );		}		if ( !changes.length ) {			names.invalidate( false );			$.each( [ '#spriteedit-undo', '#spriteedit-save', '#spriteedit-summary', '#spriteedit-review-button', ], function { if ( $( this ).length ) { $( this ).data( 'ooui-object' ).setDisabled( true ); }			} );		}	};	/**	 * Updates the list of names for duplicate detection	 *	 * Also sorts the names and box if necessary.	 */	var updateName = function( oldText, newText, $elem ) {		if ( oldText ) {			var oldNames = usedNames[oldText];			if ( oldNames.length === 1 ) {				delete usedNames[oldText];			} else {				$.each( oldNames, function( i ) { if ( $elem.is( this ) ) { oldNames.splice( i, 1 ); return false; }				} );				if ( oldNames.length === 1 ) {					oldNames[0].removeClass( 'spriteedit-dupe' );				}			}		}		var $item = $elem.parent;		var oldIndex = $item.index;		if ( newText ) {			var newNames = usedNames[newText];			if ( !newNames ) {				newNames = usedNames[newText] = [];				$elem.removeClass( 'spriteedit-dupe' );			} else {				if ( newNames.length === 1 ) {					newNames[0].addClass( 'spriteedit-dupe' );				}				$elem.addClass( 'spriteedit-dupe' );			}			newNames.push( $elem );			var $parent = $item.parent;			var index = getAlphaIndex( newText, $item );			if ( index !== oldIndex ) {				change( 'insert', { $elem: $item, oldIndex: oldIndex - 1, $oldParent: $parent, index: index - 1, $parent: $parent, }, false, true );			} else if ( index === 0 ) {				updateBoxSorting( $item.closest( '.spritedoc-box' ) );			}		}	};	/**	 * Updates the box's sort key and sorts it.	 */	var updateBoxSorting = function( $box ) {		var name = $box.find( '.spritedoc-name' ).first.text;		var oldName = $box.attr( 'data-sort-key' );		if ( name === oldName ) {			return;		}		$box.attr( 'data-sort-key', name );		var $parent = $box.parent;		var oldIndex = $box.index;		var index = getAlphaIndex( name, $box );		if ( index !== oldIndex ) {			change( 'insert', { $elem: $box, oldIndex: oldIndex - 1, $oldParent: $parent, index: index - 1, $parent: $parent, }, false, true );		}	};	/**	 * Picks the section which is probably the section the user wants to put things	 *	 * Mainly based on the section closest to the top of the screen,	 * but prefers elements which are not at all going off the screen	 * (accounting for the space taken up by the toolbar).	 *	 * Returns the section element	 */	var nearestSection = function {		var offscreen, prox, elem;		$doc.find( '.spritedoc-section' ).each( function { var curPos = this.getBoundingClientRect.top - 35; var curProx = Math.abs( curPos ); if ( prox && curProx > prox ) { // Prefer on-screen section, even if it is further from the top if ( offscreen ) { elem = this; }				return false; }			offscreen = curPos < 0; prox = curProx; elem = this; } );		return elem;	};	/**	 * Destroys the editor	 *	 * Removes any controls, and unbinds all events in the spriteEdit namespace, and releases	 * object URLs.	 *	 * "restore" is a boolean determining if the documentation should be restored to how it was	 * prior to opening the editor.	 * "leaveUrl" is a boolean determining if a the page URL shouldn't be updated to remove the	 * spriteedit action. Used for when the editor is destroyed due to history navigation.	 */	var destroy = function( restore, leaveUrl ) {		document.title = originalTitle;		// Disable close confirm dialog		preventClose && preventClose.release;		$win.add( document ).off( '.spriteEdit' );		if ( !leaveUrl ) {			history.pushState( {}, '', mw.util.getUrl );		}		var enabled = $root.hasClass( 'spriteedit-enabled' );		$root.removeClass( 'spriteedit-loaded spriteedit-enabled spriteedit-imageeditingenabled spriteedit-hidecontrols' ); var $viewTab = $( '#ca-view' ); $viewTab.add( '#ca-spriteedit' ).toggleClass( 'selected' ); $doc.add( $viewTab.find( 'a' ) ).off( '.spriteEdit' ); if ( restore ) { overwriteSpritesheet.disable; }		// No further cleanup necessary if ( !enabled ) { return; }		$( '.mw-editsection' ).add( '.mw-editsection-like' ).css( 'display', '' ); // Release old image URL references if ( sheet.modified ) { $.each( changes, function {				if ( this.action === 'replace image' ) {					URL.revokeObjectURL( this.content.$oldImg.attr( 'src' ) );				}			} ); }		if ( restore ) { // Release current image URL references if ( sheet.modified ) { $doc.find( '.spritedoc-image' ).find( 'img' ).each( function {					URL.revokeObjectURL( this.src );				} ); }			$doc.replaceWith( oldHtml ); return; }		$doc.find( '.mw-headline' ).add( $doc.find( '.spritedoc-name' ).find( 'code' ) ) .removeAttr( 'contenteditable' ); $.each( [			'.spriteedit-toolbar-container',			'.spriteedit-handle',			'.spriteedit-add-name',			'.spriteedit-tooltip',			'.spriteedit-dialog-overlay',		], function {			$( this ).remove;		} ); $( '.spriteedit-new' ).removeClass( 'spriteedit-new' ).each( function {			var newPos = $( this ).data( 'new-pos' );			if ( newPos !== undefined ) {				$( this ).data( 'pos', newPos ).removeData( 'new-pos' );			}		} ); $doc.find( '.spriteedit-replaced-image' ).removeClass( 'spriteedit-replaced-image' ); $doc.find( '.spriteedit-replacing-image' ).remove; }; };

/** Utility functions **/ /** * Allows calling a function when a main transition ends * * This only listens to transitions that happen on the element this is * called on, ignoring transitions bubbling from its children. * Additionally, if the browser doesn't support transitions, the callback * will be called immediately. * * The callback is passed along the "this" and "event" object from the event. */ $.fn.transitionEnd = function( callback ) { if ( supports( 'transition' ) ) { this.on( 'transitionend.spriteEdit', function( e ) {			var $elem = $( this );			if ( !$elem.is( e.target ) ) {				return;			}			callback.call( this, e );			$elem.off( 'transitionend.spriteEdit' );		} ); } else { this.each( function {			callback.call( this );		} ); }	return this; };

/** * Forces the browser to redraw an element */ $.fn.redraw = function { this.each( function {		this.offsetWidth;	} ); return this; };

/** * Returns the index to move an element to to sort it alphabetically, ignoring case * * "text" is the string to sort by. * "$elem" is the jQuery object which is to be sorted * "$parent" is the jQuery object which is the parent of the elements which "text" will be sorted by. * * Use "$elem" when sorting an element by its siblings. * Use "$parent" when sorting an element in a different container. */ var getAlphaIndex = function( text, $elem, $parent ) { var index; var $items = $parent ? $parent.children : $elem.siblings; $items.each( function {		var $this = $( this );		var compare = $this.attr( 'data-sort-key' ) || $this.text;		if ( text.toLowerCase < compare.toLowerCase ) {			index = $this.index;			return false;		}	} ); if ( index === undefined ) { if ( $items.length ) { index = $items.length; if ( !$parent ) { index++; }		} else { index = 0; }	}	// Account for trying to sort the element after itself if ( !$parent && index - 1 === $elem.index ) { index--; }	return index; };

/** * Attempts to scroll an element into view * * Takes into account the portion of window obscured by the toolbar. * Flashes the element's background yellow for a moment to bring it to attention. * * "$elem" is the jQuery object to scroll to. * "instant" is a boolean determining if the scrolling should be instant, instead of smooth * (if the browser supports smooth scrolling in the first place, that is). */ var scrollIntoView = function( $elem, instant ) { var elemRect = $elem[0].getBoundingClientRect; var toolbarHeight = $( '.spriteedit-toolbar' )[0].getBoundingClientRect.height; var scrollPos; if ( elemRect.top - toolbarHeight < 10 ) { scrollPos = elemRect.top + $win.scrollTop - toolbarHeight - 10; } else { var winHeight = $win.height - 40; if ( elemRect.height > winHeight || elemRect.bottom < winHeight ) { return; }		scrollPos = elemRect.bottom + $win.scrollTop - winHeight; }	if ( !instant ) { $root.addClass( 'spriteedit-smoothscroll' ); }	scroll( 0, scrollPos ); $elem.css( 'background-color', 'yellow' ); setTimeout( function {		$elem.css( 'background-color', '' );	}, 1000 ); };

/** * Converts the extended ISO UTC timestamp returned by the API * into the MediaWiki format in the wiki's timezone * * YYYY-MM-DDTHH:MM:SSZ -> YYYYMMDDHHMMSS */ var fixTimestamp = function( timestamp ) { // Make UTC date var date = new Date( timestamp ); // Convert to wiki's timezone date.setTime( date.getTime + fixTimestamp.offset * 60 * 1000 ); // Return MW timestamp format return date.toISOString.replace( /[\-T:]|\.\d+Z/g, '' ); }; // This will be set when the editor is created and a siteinfo request is made fixTimestamp.offset = 0;

/** * Add various types of in-page controls to a set of elements * * "$elems" is a jQuery object containing the elements to add controls to. * "type" is the type of controls to add. */ var addControls = function( $elems, type ) { switch ( type ) { case 'heading': $elems.prepend( $( ' ' ).addClass( 'spriteedit-handle' ) ) .find( '.mw-headline' ).attr( 'contenteditable', true ); break; case 'box': $elems.each( function{				var addNameButton = new OO.ui.ButtonInputWidget( { classes: [ 'spriteedit-add-name' ], framed: false, icon: 'add', title: i18n.controlNewName, } );				addNameButton.$element.data( 'ooui-object', addNameButton );				$( this ).prepend( $( ' ' ).addClass( 'spriteedit-handle' ), addNameButton.$element );			} );			addControls( $elems.find( '.spritedoc-name' ), 'name' ); break; case 'name': $elems.find( 'code' ).attr( 'contenteditable', true ); break; } };

/** * Create an OOUI button widget * * "text" is the string displayed on the button. * "config" is an object defining various properties of the button: * * "type" is a string or array of strings defining the OOUI flags *  this button should use (e.g.: progressive, destructive, primary). * * "id" is the id attribute applied to the button. * * "icon" is the OOUI icon to use * * "action" is a function called when the button is clicked. */ var makeButton = function( text, config ) { var button = new OO.ui.ButtonInputWidget( {		flags: config.type,		id: config.id,		label: text,		icon: config.icon,		title: config.title,	} ); if ( config.action ) { button.$button.on( 'click.spriteEdit', function( e ) {			$( this ).focus.blur;			config.action.call( this, e );		} ); }	button.$element.data( 'ooui-object', button ); return button.$element; };

/** * Check if a CSS property or value is supported by the browser */ var supports = function( prop, val ) { if ( !val ) { return prop in $root[0].style; }	if ( window.CSS && CSS.supports ) { return CSS.supports( prop, val ); }	if ( window.supportsCSS ) { return supportsCSS( prop, val ); }	var camelProp = prop.replace( /-([a-z]|[0-9])/ig, function( _, chr ) {		return chr.toUpperCase;	} ); var elStyle = document.createElement( 'i' ).style; elStyle.cssText = prop + ':' + val; return elStyle[camelProp] !== ''; };

/** * Retries a request once if it fails * * Always returns an abortable promise, even if the request itself isn't abortable. * * "request" is a function which will run the request, * and should return the request's promise. * "delay" is the amount of milliseconds to wait before retrying. * "retries" is the amount of times to retry */ var retryableRequest = function( request, delay, retries ) { var deferred = $.Deferred; var curRequest; var timeout; retries = retries || 1; var attemptRequest = function( attempt ) { ( curRequest = request ).then( deferred.resolve, function( code, data ) {			if ( attempt <= retries ) {				timeout = setTimeout( function { attemptRequest( ++attempt ); }, delay || 1000 );			} else {				deferred.reject( code, data );			}		} ); };	attemptRequest( 1 ); return deferred.promise( { abort: function {		if ( curRequest.abort ) {			curRequest.abort;		}		clearTimeout( timeout );	} } ); };

/** * Handles generic API errors * * Just uselessly displays whatever error the API returns. * Hopefully the user can retry whatever they were doing. * * "code" and "data" are the standard variables returned by a mw.Api promise rejection. */ var handleError = function( code, data ) { var errorTitle = i18n.errorGeneric; var errorText; if ( code === 'http' ) { // Not an error if ( data.textStatus === 'abort' ) { return; }		if ( data.textStatus === 'error' || data.textStatus === 'timeout' ) { errorTitle = i18n.errorConnection; errorText = i18n.errorConnectionText; } else { errorTitle = i18n.errorHttp; errorText = data.textStatus; }	} else { errorTitle = i18n.errorApi; errorText = data.error.info; }	mw.notify( errorText, { title: errorTitle, type: 'error', autoHide: false } ); };

/** * Looks for the specified change tag * * Returns a promise which resolves to a boolean stating if the tag is active or not, * or null if the tag doesn't exist. * * "tag" is the tag to search for. * "options" is an object of additional values to add to the request. */ var findChangeTag = function( tag, options ) { return retryableRequest( function {		return new mw.Api.get( $.extend( {			action: 'query',			list: 'tags',			tgprop: 'active',			tglimit: 'max',			formatversion: 2,		}, options || {} ) );	} ).then( function( data ) {		var foundActive = null;		$.each( data.query.tags, function { if ( this.name === tag ) { foundActive = this.active; return false; }		} );		// XXX: MW JS requires ES5 support, but JavascriptMinifier doesn't		// support ES5, so these have to remain strings. See T96901		if ( foundActive === null && data['continue'] ) {			return findChangeTag( tag, data['continue'] );		}		return foundActive;	} ); };

/** * Replaces the spritesheet with the provided URL * * It's assumed the URL will be an object URL, which it handles revoking * if the spritesheet is replaced again or disabled. * * The current style element can be accessed from `overwriteSpritesheet.style`. */ var overwriteSpritesheet = function( url ) { overwriteSpritesheet.disable; overwriteSpritesheet.style = mw.util.addCSS(		'#spritedoc .sprite { background-image: url(' + url + ') !important }'	); overwriteSpritesheet.style.url = url; }; /** * Disables the current style so its styles don't apply * and revokes the object URL. */ overwriteSpritesheet.disable = function { var inlineStyle = overwriteSpritesheet.style; if ( inlineStyle ) { inlineStyle.disabled = true; URL.revokeObjectURL( inlineStyle.url ); } };

var luaTable = {}; /** Recursively creates a pretty printed lua table from an object * * Supports only the value which `luaTable.createValue` supports, and * only numbers and strings as keys. * * Objects with less than 4 keys and with no sub-objects will be * on a single line, otherwise will be one line per value. */ luaTable.create = function( obj, indent ) { indent = indent || 1; var out = [ '{' ]; var isArray = Array.isArray( obj ); var size = isArray ? obj.length : Object.keys( obj ).length; var containsObject; $.each( obj, function( k, v ) {		if ( typeof v === 'object' ) {			containsObject = true;			return false;		}	} ); var multiline = containsObject || size > 3; $.each( obj, function( k, v ) {		if ( v === null || v === undefined ) {			return;		}		var key = isArray ? '' : luaTable.createKey( k ) + ' = ';		out.push( '\t'.repeat( multiline * indent ) + key + luaTable.createValue( v, indent + 1 ) + ',' );	} ); // No trailing commas for single line objects if ( !multiline ) { out.push( out.pop.slice( 0, -1 ) ); }	out.push( '\t'.repeat( multiline * --indent ) + '}' ); return out.join( multiline ? '\n' : ' ' ); }; /** Allows creating a string that should be considered a lua function * * "funcStr" should be the exact value to be output as * in the table. * * Returns a function that will be converted back in to * the specified string when building the table. */ luaTable.func = function( funcStr ) { var f = function { return funcStr; };	f.luaFunc = true; return f; }; /** * List of reserved keywords in lua */ luaTable.keywords = [ 'and', 'break', 'do', 'else', 'elseif', 'end', 'false', 'for', 'function', 'if', 'in', 'local', 'nil', 'not', 'or', 'repeat', 'return', 'then', 'true', 'until', 'while', ]; /** * Returns a lua key with quotes and brackets if necessary * * Only supports numbers and strings. */ luaTable.createKey = function( key ) { if ( key.match( /^-?\d+(\.\d+)?$/ ) ) { return '[' + Number( key ) + ']'; }	if ( luaTable.keywords.indexOf( key ) < 0 && !key.match( /^[^a-z_]|\W/i ) ) { return key; }	return '[' + luaTable.createString( key ) + ']'; }; /** * Create a lua table value * * Only supports the types in the switch, and only functions created with * `luaTable.func` are supported. * Will recursively resolve object values. */ luaTable.createValue = function( val, indent ) { switch ( typeof val ) { case 'number': case 'boolean': return val; case 'string': return luaTable.createString( val ); case 'object': return luaTable.create( val, indent ); case 'function': // If the function is supposed to be a lua function, // execute it to get the lua function string and // return it directly, otherwise invalid type if ( val.luaFunc ) { return val; }		default: throw new TypeError( 'Lua table: Invalid value type: ' + typeof val ); } }; /** * Quote a string for lua table * * Uses either ' or " as the delimiter (depending on which is least used in the string), * then escapes \ and the chosen delimiter within the string. */ luaTable.createString = function( str ) {	if ( !str ) {		return "";	}	var delim, delimRegex;	var quotes = ( str.match( /"/g ) ||  ).length; var apostrophies = ( str.match( /'/g ) || '' ).length; if ( apostrophies > quotes ) { delim = '"';		delimRegex = /"/g; } else { delim = "'"; delimRegex = /'/g; }	return delim + str.replace( /\\/g, '\\\\' ).replace( delimRegex, '\\' + delim ) + delim; };

/** Polyfills **/ if ( !HTMLCanvasElement.prototype.toBlob ) { Object.defineProperty( HTMLCanvasElement.prototype, 'toBlob', {		value: function( callback, type, quality ) {			var canvas = this;			setTimeout( function { var binStr = atob( canvas.toDataURL( type, quality ).split( ',' )[1] ); var len = binStr.length; var arr = new Uint8Array( len ); for ( var i = 0; i < len; i++ ) { arr[i] = binStr.charCodeAt( i ); }				callback( new Blob( [arr], { type: type || 'image/png' } ) ); } );		},	} ); }

// Finally start the editor create( 'initial' );

} ); //