Minecraft Wiki Polska - Wkład użytkownika [pl]

MediaWiki:Gadget-spriteEditLoader.js

2018-11-16T02:03:26Z

Majr: Don't remember this being an issue before

$( function() {
'use strict';

/**
* Add an edit button which loads the sprite editor
*
* If spriteaction=edit is in the URL, the editor will be loaded
* immediately, otherwise it will wait for the button to be clicked.
*/
var editPage = $( '#sprite-editor-message' ).data( 'page' ) || null;
if ( !$( '#spritedoc' ).length && !editPage ) {
return;
}

var $editTab = $( '#ca-edit' );
if ( !$editTab.length ) {
$editTab = $( '#ca-viewsource' );
}
var $spriteEditLink = $( '<a>' ).text( 'Edit sprite' ).attr( 'href',
mw.util.getUrl( editPage, { spriteaction: 'edit' } )
);
var $spriteEditTab = $( '<li>' ).attr( 'id', 'ca-spriteedit' ).append(
$( '<span>' ).append( $spriteEditLink )
);
$spriteEditTab.insertAfter( $editTab );

// Page to sprite edit is not here, so no need to bind events
if ( editPage ) {
return;
}

var loadSpriteEditor = function() {
$spriteEditTab.add( '#ca-view' ).toggleClass( 'selected' );

return mw.loader.using( 'ext.gadget.spriteEdit' );
};
if ( location.search.match( '[?&]spriteaction=edit' ) ) {
loadSpriteEditor();
return;
}

var $win = $( window );
$spriteEditLink.one( 'click.spriteEditLoader', function( e ) {
// Initially add the history so it is not delayed waiting
// for the editor to load. The editor will handle it from now.
history.pushState( {}, '', this.href );

loadSpriteEditor().then( function() {
$win.off( '.spriteEditLoader' );
} );

e.preventDefault();
} );

// If the page is reloaded while the editor isn't loaded, navigating
// back to the editor won't work, so an initial navigation check is
// necessary to load the editor, where it will then monitor navigation
$win.on( 'popstate.spriteEditLoader', function() {
if (
location.search.match( '[?&]spriteaction=edit' ) &&
!$( 'html' ).hasClass( 'spriteedit-loaded' )
) {
loadSpriteEditor().then( function() {
$win.off( '.spriteEditLoader' );
} );
}
} );

} );

MediaWiki:Gadget-spriteEdit.js

2018-11-16T01:52:19Z

Majr:

( 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',
luaKeyId: 'id',
luaKeyIds: 'ids',
luaKeyName: 'name',
luaKeyPos: 'pos',
luaKeySection: 'section',
luaKeySections: 'sections',
luaKeySettings: 'settings',
luaKeySettingsHeight: 'height',
luaKeySettingsPos: 'pos',
luaKeySettingsSize: 'size',
luaKeySettingsSpacing: 'spacing',
luaKeySettingsUrl: 'url',
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: 'Help: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',
toolbarTools: 'Tools',
toolbarUndo: 'Undo',
};
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 = $( '<h3>' ).html(
$( '<span>' )
.addClass( 'mw-headline spriteedit-new' )
.attr( 'data-placeholder', i18n.sectionPlaceholder )
);
var $boxTemplate = $( '<li>' ).addClass( 'spritedoc-box spriteedit-new' ).append(
$( '<div>' ).addClass( 'spritedoc-image' ),
$( '<ul>' ).addClass( 'spritedoc-names' ).append(
$( '<li>' ).addClass( 'spritedoc-name' ).html( '<code>' )
)
);
addControls( $headingTemplate, 'heading' );
addControls( $boxTemplate, 'box' );

// 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: $( '<i>' ).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 = $( '<p>' ).text( i18n.blockedNotice );
var blockText;
if ( info.blockreason ) {
blockText = retryableRequest( function() {
return parseApi.get( { summary: info.blockreason } );
} ).done( function( parseData ) {
$blockNotice.append( '<br>', i18n.blockedReason.replace( /\$1/g,
$( '<span>' ).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] || spriteSettings[i18n.luaKeySettingsSize] || 16;
settings.imageHeight = spriteSettings[i18n.luaKeySettingsHeight] || settings.imageWidth || 16;
settings.spacing = spriteSettings[i18n.luaKeySettingsSpacing] || 0;
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 = $sprite.css( 'background-image' )
.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(
$( '<div>' ).addClass( 'spriteedit-autoscroll spriteedit-autoscroll-up' ),
$( '<div>' ).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 = $( '<div>' ).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 );
toolboxSelect.getMenu().addItems( [ deprecateOption ] );

var $barContainer = $( '<div>' ).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: $( '<div>' ).addClass( 'spritedoc-section' ).prepend(
$newHeading,
$( '<ul>' ).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;
}

$( '<input type="file">' )
.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;
}
} );
// 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, but only
// if there's more than one. If there's only one, it's clearly been
// incorrectly marked as a duplicate
if ( $doc.find( '.spriteedit-dupe' ).length > 1 ) {
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' ) );
$( '<div>' )
.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: [
$( '<div>' ).addClass( 'spriteedit-sheet-changes' ),
$( '<div>' ).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(
$( '<div>' ).text( i18n.panelChangesSheetTitle ),
$( '<div>' ).addClass( 'spriteedit-sheet-diff' ).append(
$( '<span>' ).addClass( 'spriteedit-old-sheet' ).append( spritesheet ),
$( '<span>' ).addClass( 'spriteedit-new-sheet' ).append( newSpritesheet )
)
);

sheetChanges.resolve();
};
sheetUrl = URL.createObjectURL( sheetBlob );
newSpritesheet.src = sheetUrl;
}
if ( diff ) {
$changesText.find( '.spriteedit-id-changes' ).append(
$( '<div>' ).text( i18n.panelChangesIdTitle ),
$( '<div>' ).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 = $( '<li>' ).addClass( 'spritedoc-name' );
var $name = $( '<code>' ).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' );

// Can't make a change if we don't know what the original text was
// This can happen when Edge calls the blur event on elements that
// that aren't focused, which it does when moving the highlight
// when using the find in browser feature
if ( origText === undefined ) {
return;
}

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( e ) {
var text = ( e.originalEvent.clipboardData || window.clipboardData ).getData( 'Text' );
text = text.replace( /\n/g, ' ' ).trim();
window.document.execCommand( 'insertText', false, text );

e.preventDefault();
} );
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() !== $( '<i>' ).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() {
$( '<input type="file">' )
.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 = $( '<a>' ).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: $( '<p>' ).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 $( '<table>' ).addClass( 'diff' ).append(
$( '<col>' ).addClass( 'diff-marker' ),
$( '<col>' ).addClass( 'diff-content' ),
$( '<col>' ).addClass( 'diff-marker' ),
$( '<col>' ).addClass( 'diff-content' ),
$( '<tbody>' ).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' ),
} );
} );
} );
} );
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;
}
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] ) {
var url = $doc.data( 'original-url' ).split( '?' );
// Update the version parameter if the sheet was modified
// or if there's no version parameter
if ( sheet.modified || !url[1] ) {
url[1] = 'version=' + Date.now();
$doc.data( 'url', url.join( '?' ) );
}

obj[i18n.luaKeySettings][i18n.luaKeySettingsUrl] =
luaTable.func( $doc.data( 'urlfunc' ).replace( /\$1/, 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] ) {
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 ) {
// 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() {
return names.save( summary, conflict );
} ).then( function( data ) {
if ( sheet.modified ) {
if ( spriteSettings[i18n.luaKeySettingsUrl] ) {
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: $( '<i>' ).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: $( '<p>' ).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: $( '<div>' ).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 = $( '<div>' ).append(
$( '<p>' ).text( i18n.panelConflictCurText ),
curEditbox.$element
);
var $oldText = $( '<div>' ).append(
$( '<p>' ).text( i18n.panelConflictYourText ),
oldEditbox.$element
);

conflictPanel.$text.append(
$( '<div>' ).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 = $( '<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 = $( '<div>' ).addClass( 'spriteedit-dialog-overlay' ).css( 'display', 'none' );
$dialog = $( '<div>' ).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 = $( '<div>' )
.prop( 'id', 'spriteedit-dialog-' + id )
.addClass( 'spriteedit-dialog-panel' );

var $title = $( '<div>' ).addClass( 'spriteedit-dialog-title' ).text( config.title ).appendTo( $panel );

var $text = $( '<div>' ).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 = $( '<div>' ).addClass( 'spriteedit-dialog-actions' ).appendTo( $panel );
var $leftActions = $( '<span>' ).appendTo( $actions );
var $rightActions = $( '<span>' ).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 = $( '<div>' ).addClass( 'spriteedit-tooltip' ).append(
$( '<div>' ).addClass( 'spriteedit-tooltip-text' ).append( content ),
$( '<div>' ).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;

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;
}
}

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( $( '<span>' ).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(
$( '<span>' ).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' );

}() );

MediaWiki:Gadget-sound.js

2018-05-11T08:30:40Z

Majr: Add jshint definitions

// jshint jquery:true, esversion:5
/* globals require, module, mediaWiki, mw, OO */
'use strict';

mw.hook( 'wikipage.content' ).add( function( $content ) {
var i18n = {
playTitle: 'Click to play',
stopTitle: 'Click to stop',
};
$content.find('.sound' ).prop( 'title', i18n.playTitle ).on( 'click', function( e ) {
// Ignore links
if ( e.target.tagName === 'A' ) {
return;
}

var audio = $( this ).find( '.sound-audio' )[0];
if ( audio ) {
audio.paused ? audio.play() : audio.pause();
}
} ).find( '.sound-audio' ).on( 'play', function() {
// Stop any already playing sounds
var playing = $( '.sound-playing .sound-audio' )[0];
playing && playing.pause();

$( this ).closest( '.sound' )
.addClass( 'sound-playing' ).prop( 'title', i18n.stopTitle );
} ).on( 'pause', function() {
// Reset back to the start
this.currentTime = 0;

$( this ).closest( '.sound' )
.removeClass( 'sound-playing' ).prop( 'title', i18n.playTitle );
} );

} );

MediaWiki:Gadget-sound

2018-05-05T10:21:27Z

Majr: Created page with "Show the inline sound playing button for Template:Sound."

Show the inline sound playing button for [[Template:Sound]].

MediaWiki:Gadget-spriteEditMCW.css

2018-04-08T15:59:50Z

Majr: Rather than have the MCW colours as part of the generic module

.spriteedit-toolbar {
background-color: #80b640;
border-bottom-color: #3c6a02;
}

MediaWiki:Gadget-spriteEditLoader.js

2018-04-08T15:55:05Z

Majr: https://github.com/Majr-/SpriteEdit/compare/111b3b2...3e70656

( function() {
'use strict';

/**
* Add an edit button which loads the sprite editor
*
* If spriteaction=edit is in the URL, the editor will be loaded
* immediately, otherwise it will wait for the button to be clicked.
*/
var editPage = $( '#sprite-editor-message' ).data( 'page' ) || null;
if ( !$( '#spritedoc' ).length && !editPage ) {
return;
}

var $editTab = $( '#ca-edit' );
if ( !$editTab.length ) {
$editTab = $( '#ca-viewsource' );
}
var $spriteEditLink = $( '<a>' ).text( 'Edit sprite' ).attr( 'href',
mw.util.getUrl( editPage, { spriteaction: 'edit' } )
);
var $spriteEditTab = $( '<li>' ).attr( 'id', 'ca-spriteedit' ).append(
$( '<span>' ).append( $spriteEditLink )
);
$spriteEditTab.insertAfter( $editTab );

// Page to sprite edit is not here, so no need to bind events
if ( editPage ) {
return;
}

var loadSpriteEditor = function() {
$spriteEditTab.add( '#ca-view' ).toggleClass( 'selected' );

return mw.loader.using( 'ext.gadget.spriteEdit' );
};
if ( location.search.match( '[?&]spriteaction=edit' ) ) {
loadSpriteEditor();
return;
}

var $win = $( window );
$spriteEditLink.one( 'click.spriteEditLoader', function( e ) {
// Initially add the history so it is not delayed waiting
// for the editor to load. The editor will handle it from now.
history.pushState( {}, '', this.href );

loadSpriteEditor().then( function() {
$win.off( '.spriteEditLoader' );
} );

e.preventDefault();
} );

// If the page is reloaded while the editor isn't loaded, navigating
// back to the editor won't work, so an initial navigation check is
// necessary to load the editor, where it will then monitor navigation
$win.on( 'popstate.spriteEditLoader', function() {
if (
location.search.match( '[?&]spriteaction=edit' ) &&
!$( 'html' ).hasClass( 'spriteedit-loaded' )
) {
loadSpriteEditor().then( function() {
$win.off( '.spriteEditLoader' );
} );
}
} );

}() );

MediaWiki:Gadget-spriteEdit.css

2018-04-08T15:53:15Z

Majr: https://github.com/Majr-/SpriteEdit/compare/111b3b2...3e70656

#spritedoc {
position: relative;
}

#spritedoc canvas {
display: none;
}

.spriteedit-enabled {
overflow-y: scroll;
}

.spriteedit-smoothscroll {
scroll-behavior: smooth;
}

.spriteedit-sorting * {
cursor: move !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}

.spriteedit-elastic {
-webkit-transition-timing-function: cubic-bezier(0.46, 0, 0.19, 1.44) !important;
transition-timing-function: cubic-bezier(0.46, 0, 0.19, 1.44) !important;
}

.spriteedit-droptarget {
outline: 1px dashed #000;
}

.spriteedit-autoscroll {
visibility: hidden;
position: fixed;
left: 0;
right: 0;
height: 50px;
z-index: 999;
}
.spriteedit-autoscroll-up {
top: 0;
}
.spriteedit-autoscroll-down {
bottom: 0;
}
.spriteedit-sorting .spriteedit-autoscroll,
.spriteedit-dragging .spriteedit-autoscroll {
visibility: visible;
}

.spriteedit-toolbar-container {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 91;
}
.spriteedit-toolbar {
position: relative;
background-color: #FFF;
border-bottom: 4px solid #c8ccd1;
padding: 0.5em 0;
overflow: hidden;
-webkit-transition: height 200ms;
transition: height 200ms;
z-index: 91;
}
.spriteedit-toolbar-fixed {
position: fixed;
top: 0;
right: 0;
margin: 0 !important;
}
#spriteedit-toolbox {
font-weight: bold;
vertical-align: middle;
width: 10em;
}
#spritedoc .oo-ui-menuSelectWidget {
z-index: 92;
}
.spriteedit-tool-deprecate .spritedoc-name > code {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
#spriteedit-save {
position: absolute;
right: 0;
bottom: 0.5em;
margin-right: 0;
}
#spriteedit-saveform {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
margin-top: 0.5em;
}
#spriteedit-summary {
margin-right: 0.5em;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
max-width: none;
}
/* XXX: Missing padding, probably fixed in a new version */
#spriteedit-summary .oo-ui-labelElement-label {
padding-right: 0.9375em;
}
#spriteedit-review-button {
margin-right: 0.5em;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}

#spritedoc .mw-headline {
display: inline-block;
}

.spriteedit-handle {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
background: #AAA;
background: -webkit-linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 0 0, -webkit-linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 2px 2px;
background: linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 0 0, linear-gradient(#AAA, #AAA 50%, #FFF 50%, #FFF) 2px 2px;
background-repeat: repeat-y;
background-size: 2px 4px;
padding-right: 4px;
margin-right: 0.3em;
cursor: move;
cursor: -webkit-grab;
cursor: grab;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 200ms 300ms, visibility 0s linear 500ms;
transition: opacity 200ms 300ms, visibility 0s linear 500ms;
}
.spritedoc-box > .spriteedit-handle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}

.spriteedit-imageeditingenabled .spritedoc-image {
cursor: pointer;
}

.sprite.spriteedit-replaced-image {
display: none;
}

.spriteedit-add-name {
position: absolute;
right: -3px;
bottom: -3px;
margin-right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 200ms 300ms, visibility 0s linear 500ms;
transition: opacity 200ms 300ms, visibility 0s linear 500ms;
z-index: 9;
}

.spriteedit-hidecontrols .spriteedit-handle,
.spriteedit-hidecontrols .spriteedit-add-name {
visibility: hidden !important;
opacity: 0 !important;
-webkit-transition: visibility, opacity !important;
transition: visibility, opacity !important;
}
#spritedoc h3:hover > .spriteedit-handle,
.spritedoc-box:hover .spriteedit-handle,
.spritedoc-box:hover > .spriteedit-add-name {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}

#spritedoc [contentEditable]:empty:after {
content: "\A0"; /* Non-breaking space */
}
#spritedoc [contentEditable][data-placeholder]:empty:after {
content: attr(data-placeholder);
opacity: 0.54;
font-style: italic;
}

.spriteedit-dupe {
background-color: #FFC7CE !important;
}

.spriteedit-ghost {
position: fixed !important;
z-index: 999;
opacity: 0.8;
pointer-events: none;
}
.spriteedit-placeholder {
opacity: 0.5;
outline: 1px dashed #000;
}

.spriteedit-processing {
background-size: 1em 1em;
background-image: -webkit-linear-gradient(
45deg,
rgba(204, 204, 204, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(204, 204, 204, 0.4) 50%,
rgba(204, 204, 204, 0.4) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(204, 204, 204, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(204, 204, 204, 0.4) 50%,
rgba(204, 204, 204, 0.4) 75%,
transparent 75%,
transparent
);
-webkit-animation: spriteedit-processing 1s infinite linear;
animation: spriteedit-processing 1s infinite linear;
}
@-webkit-keyframes spriteedit-processing {
0% { background-position: 0 0; }
100% { background-position: 1em 0; }
}
@keyframes spriteedit-processing {
0% { background-position: 0 0; }
100% { background-position: 1em 0; }
}

.spriteedit-tooltip {
position: absolute;
margin-left: -19px;
padding: 9px;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 19px bottom;
transform-origin: 19px bottom;
-webkit-transition: opacity 350ms, -webkit-transform 350ms;
transition: opacity 350ms, -webkit-transform 350ms;
transition: transform 350ms, opacity 350ms;
z-index: 121;
white-space: nowrap;
line-height: 1.6;
font-size: 0.875em;
}
.spriteedit-tooltip-horizontal {
margin-left: 0;
margin-top: -19px;
-webkit-transform-origin: right 19px;
transform-origin: right 19px;
}
.spriteedit-tooltip-text,
.spriteedit-tooltip-arrow:before {
border: 1px solid #CCC;
background-color: #FFF;
}
.spriteedit-tooltip-arrow {
position: absolute;
bottom: 1px;
left: 9px;
height: 9px;
width: 20px;
overflow: hidden;
}
.spriteedit-tooltip-horizontal .spriteedit-tooltip-arrow {
top: 14px;
right: -4px;
bottom: auto;
left: auto;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.spriteedit-tooltip-arrow:before {
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
height: 10px;
width: 10px;
left: 4px;
top: -6px;
padding: 0;
}

.spriteedit-tooltip-controls .oo-ui-buttonInputWidget,
.spriteedit-tooltip-controls .oo-ui-buttonInputWidget .oo-ui-buttonElement-button {
display: block;
width: 100%;
text-align: left;
margin-right: 0;
}

.spriteedit-dialog-overlay {
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
z-index: 9000
}
.spriteedit-dialog {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
background-color: #FFF;
max-width: 90%;
max-height: 90%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: width, height, -webkit-transform;
transition-property: width, height, -webkit-transform;
transition-property: transform, width, height;
-webkit-transition-duration: 400ms, 350ms, 350ms;
transition-duration: 400ms, 350ms, 350ms;
margin: auto;
border-radius: 3px;
overflow: hidden;
line-height: 1.6;
font-size: 0.875em;
}
#spriteedit-dialog-close {
position: absolute;
top: 0;
right: 0;
margin-right: 0;
}
#spriteedit-dialog-close .oo-ui-buttonElement-button {
border: 0;
border-radius: 0;
border-left: 1px solid #CCC;
width: 42px;
height: 42px;
}
.spriteedit-dialog-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.spriteedit-dialog-title {
text-align: center;
font-size: 120%;
white-space: nowrap;
padding: 0.45em 42px;
}
.spriteedit-dialog-text {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: solid #CCC;
border-width: 1px 0;
padding: 0.5em;
overflow: auto;
}

.spriteedit-dialog-actions {
padding: 0.5em;
}

.spriteedit-sheet-diff {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.spriteedit-sheet-diff img {
width: 100%;
}
.spriteedit-old-sheet,
.spriteedit-new-sheet {
display: inline-block;
padding: 1em;
}
.spriteedit-new-sheet {
background-color: #D8ECFF;
}
.spriteedit-old-sheet {
background-color: #FEEEC8;
}

.spriteedit-ec-editboxes {
display: flex;
flex-wrap: wrap;
}
.spriteedit-ec-editboxes > div {
flex-grow: 1;
margin: 0 1em;
}
.spriteedit-ec-editboxes .oo-ui-textInputWidget {
min-width: 30em;
max-width: none;
}
.spriteedit-ec-editboxes .oo-ui-textInputWidget > .oo-ui-inputWidget-input {
min-height: 20em;
height: 200em;
}

MediaWiki:Gadget-spriteEditLoader.js

2017-08-10T08:09:37Z

Majr: Make sure this doesn't get loaded too soon.

$( function() {
'use strict';
/**
* Add an edit button which loads the sprite editor
*
* If spriteaction=edit is in the URL, the editor will be loaded
* immediately, otherwise it will wait for the button to be clicked.
* Uses the History API where supported to update the URL, otherwise
* the URL isn't updated.
*/
if ( !$( '#spritedoc' ).length ) {
return;
}

var $editTab = $( '#ca-edit' );
if ( !$editTab.length ) {
$editTab = $( '#ca-viewsource' );
}
var $spriteEditLink = $( '<a>' ).text( 'Edit sprite' ).attr( 'href',
mw.util.getUrl( null, { spriteaction: 'edit' } )
);
var $spriteEditTab = $( '<li>' ).attr( 'id', 'ca-spriteedit' ).append(
$( '<span>' ).append( $spriteEditLink )
);
$spriteEditTab.insertAfter( $editTab );

var loadSpriteEditor = function() {
$spriteEditTab.add( '#ca-view' ).toggleClass( 'selected' );

mw.loader.load( 'ext.gadget.spriteEdit' );
};
if ( location.search.match( 'spriteaction=edit' ) ) {
loadSpriteEditor();
} else {
var $win = $( window );
$spriteEditLink.one( 'click', function( e ) {
if ( window.history && history.pushState ) {
// Initially add the history so it is not delayed waiting
// for the editor to load. The editor will handle it from now.
history.pushState( {}, '', this.href );
}

loadSpriteEditor();
$win.off( '.spriteEditLoader' );

e.preventDefault();
} );

if ( window.history && history.pushState ) {
// If the page is reloaded while the editor isn't loaded, navigating
// back to the editor won't work, so an initial navigation check is
// necessary to load the editor, where it will then monitor navigation
$win.on( 'popstate.spriteEditLoader', function() {
if (
location.search.match( 'spriteaction=edit' ) &&
!$( 'html' ).hasClass( 'spriteedit-loaded' )
) {
loadSpriteEditor();
$win.off( '.spriteEditLoader' );
}
} );
}
}

} );

Użytkownik:Majr/hydra.css

2016-09-08T01:31:38Z

Majr:

@import "//minecraft.gamepedia.com/index.php?title=User:Majr/hydra.css&action=raw&ctype=text/css";

Użytkownik:Majr/hydra.js

2016-09-08T01:29:38Z

Majr:

mw.loader.load( '//minecraft.gamepedia.com/index.php?title=User:Majr/hydra.js&action=raw&ctype=text/javascript' );

Szablon:YouTube

2016-09-03T02:39:58Z

Majr:

<includeonly>{{#ev:youtube|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}|{{{align|}}}}}</includeonly><noinclude>
{{documentation}}

MediaWiki:Common.css

2016-07-29T08:59:28Z

Majr:

/*** Temp fixing any images missing from CDN ***/
/* Redirect arrow */
.redirectMsg {
padding-left: 40px;
background: url("http://hydra-media.cursecdn.com/minecraft-pl.gamepedia.com/b/b5/Redirectltr.png") no-repeat left center;
}
.redirectMsg img {
display: none;
}

/** Template stylings **/
/* [[Template:Grid]] */
.grid {
display: inline-block;
position: relative;
text-align: left !important;
background-color: #8B8B8B;
height: 32px;
width: 32px;
padding: 2px;
vertical-align: bottom;
}
.grid.output {
height: 48px;
width: 48px;
}

.grid img,
.pixel-image img {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}

.grid .border {
display: block;
margin: -2px 0 0 -2px;
border-style: solid none none solid;
border-width: 2px;
border-color: #373737;
height: 100%;
}
.grid .border > span {
display: block;
margin-right: -2px;
border-style: none solid solid none;
border-width: 2px;
border-color: #FFFFFF;
height: 100%;
}

.grid .image,
.grid .default-image {
position: absolute;
line-height: 16px;
top: 2px;
width: 32px;
height: 32px;
}
.grid.output .image {
top: 10px;
left: 10px;
}
.grid .image > a.new {
background-image: url("http://hydra-media.cursecdn.com/minecraft-pl.gamepedia.com/3/35/Grid_Unknown.png");
display: block;
width: 32px;
height: 32px;
outline: none;
text-indent: -99999px;
}

.grid .number {
position: absolute;
right: -2px;
bottom: -2px;
text-align: right;
font-family: Minecraft;
font-size: 16px;
color: #FFF;
pointer-events: none;
z-index: 6;
text-shadow: 2px 2px 0px #3F3F3F;
filter: dropshadow(color=#3F3F3F, offx=2, offy=2);
}
.grid .number a {
color: #FFF;
text-decoration: none;
}
.grid .number .selflink {
font-weight: normal;
}
.grid .image a.new + .number {
display: none;
}

.grid-Crafting_Table,
.grid-Furnace,
.grid-Brewing_Stand table,
.grid-generic {
background: #C6C6C6;
border: outset 2px #999;
padding: 6px;
text-align: left !important;
}
.grid-Crafting_Table td,
.grid-Furnace td,
.grid-Brewing_Stand td,
.grid-generic td {
border: none;
padding: 0;
}

/* [[Template:Grid/Crafting Table]] */
.grid-Crafting_Table .arrow,
.grid-Crafting_Table .shapeless {
text-align: center;
vertical-align: bottom;
}

.grid-Crafting_Table .arrow {
width: 40px;
padding-bottom: 5px;
}

.grid-Crafting_Table .shapeless span {
cursor: help;
}

/* [[Template:Grid/Furnace]] */
.grid-Furnace {
padding-left: 24px;
padding-right: 24px;
}

.grid-Furnace .arrow,
.grid-Furnace .output {
text-align: center;
vertical-align: middle;
}

.grid-Furnace .arrow {
padding-right: 18px !important;
padding-left: 14px !important;
}

/* [[Template:Grid/Brewing Stand]] */
.grid-Brewing_Stand {
position: relative;
width: 144px;
}

.grid-Brewing_Stand .bubbles {
text-align: right;
}

.grid-Brewing_Stand .input {
padding: 3px 0 !important;
vertical-align: top;
}
.grid-Brewing_Stand .output1 {
padding: 4px 10px 14px 0 !important;
}
.grid-Brewing_Stand .output2 {
padding-top: 18px !important;
}
.grid-Brewing_Stand .output3 {
padding: 4px 0 14px 10px !important;
}

.grid-Brewing_Stand .paths {
position: absolute;
bottom: 42px;
left: 42px;
z-index: 5;
}

/* [[Template:Grid/Hotbar]] */
.grid-Hotbar {
display: inline-block;
position: relative;
}
.grid-Hotbar > .selector {
position: absolute;
top: -2px;
margin-left: -2px;
}
.grid-Hotbar > .slots {
position: absolute;
top: 0;
left: 0;
margin: 2px;
}
.grid-Hotbar .grid {
margin: 2px;
background-color: transparent;
}
.grid-Hotbar .grid > .border,
.grid-Hotbar .grid > .border > span {
border: 0;
margin: 0;
}

/* [[Template:Infobox common]] */
.infobox {
clear: right;
margin: 3px 0px 3px 3px;
width: 300px;
font-size: 90%;
background: #FFFFFF;
float: right;
border: 1px solid #CCCCCC;
padding: 2px;
}

.infobox-title {
font-weight: bold;
text-align: center;
font-size: 120%;
}

.infobox-imagearea {
text-align: center;
padding: 4px;
}

.infobox table {
width: 100%;
}

.infobox p {
margin: 0;
}

.infobox audio {
width: 184px;
}

.infobox dl:last-child {
margin-bottom: 0.2em;
}

.infobox-footer {
text-align: center;
}

/* Merge adjacent dls in the infobox (since they're usually supposed to be one, but the wiki screws up sometimes) */
.infobox dl + dl {
margin-top: -0.4em;
}

/* What is this? */
.infobox.atfmrec {
border: none !important;
}

/* [[Template:Infobox row]] */
.infobox-row {
white-space: nowrap;
font-weight: bold;
}

/* [[Template:Navbox]] */
.navbox {
background: #FFF;
border: 1px solid #CCC;
margin: 1em auto 0;
clear: both;
width: 100%;
}

.navbox table {
background: #FFF;
margin-left: -4px;
margin-right: -2px;
}
.navbox table:first-child {
margin-top: -2px;
}
.navbox table:last-child {
margin-bottom: -2px;
}

.navbox-top {
white-space: nowrap;
background-color: #CCC;
padding: 0 3px;
}

.navbox-navbar,
.navbox-navbar-mini {
float: left;
font-size: 80%;
}

.navbox-title {
padding: 0 10px;
font-size: 110%;
}

.navbox-group {
background-color: #EEE;
padding: 0 10px;
white-space: nowrap;
text-align: right;
}

.navbox-list {
width: 100%;
padding: 0 0 0 2px;
}

/* [[Template:LoadBox]] with navbox */
.loadbox-navbox {
padding: 2px !important;
margin: 1em 0 0 !important;
clear: both;
}
.loadbox-navbox > p {
background-color: #CCC;
text-align: center;
margin: 0;
padding: 0 3px;
}
.loadbox-navbox > p > b {
font-size: 110%;
}

.loadbox-navbox .navbox {
margin: 0 -2px -2px;
border: 0;
}
.loadbox-navbox .navbox > tbody > tr:first-child {
display: none;
}

/* [[Template:History2]] */
.history2 td > pre,
.history2 td > ol {
display: none;
}

.history2 ul {
margin-top: 0;
}

.history2 .toggleHistDetails {
float: right;
text-align: right;
width: 150px;
}
.history2 > tbody > tr:first-child > th {
padding-left: 152px;
}

/* [[Template:Sprite]] */
.sprite {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
height: 16px;
width: 16px;
}
.sprite > span {
position: absolute;
height: 256px;
width: 256px;
}

/* [[Template:Sprite/Preview]] */
.sprite-preview:hover div {
opacity: 0.7 !important;
}

/* [[Template:Schematic]] */
.schematic img {
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
table.schematic {
background-color: white;
border-collapse: collapse;
line-height: 0;
}
table.schematic td,
span.schematic {
border: 1px solid #AAAAAA !important;
padding: 0;
}
table.schematic span,
span.schematic {
display: inline-block;
overflow: hidden;
position: relative;
}
table.schematic span span,
span.schematic span {
color: black;
font-weight: bold;
left: 0;
line-height: 1.5em;
position: absolute;
text-align: center;
text-shadow: 0 0 2px #FFF;
top: 0;
}

/** Misc stuff **/
/* Prevent page jump from the toolbar loading, doesn't affect people with the toolbar disabled */
#toolbar {
height: 22px;
}

/* Remove the header from the main page */
body.page-Minecraft_Wiki.action-view h1.firstHeading {
display: none;
}

/* Collapsible Tables ([[MediaWiki:Common.js]]) */
table.collapsed tr.collapsible {
display: none;
}

.collapsible-button {
float: right;
font-weight: normal;
text-align: right;

/* Other languages: Change this to a bit wider (~4px) than your collapse/expand button text */
width: 3.5em;
}

.collapsible.collapse-button-left > tr > th .collapsible-button,
.collapsible.collapse-button-left > * > tr > th .collapsible-button {
float: left;
text-align: left;
}

.collapsible.collapse-button-none > tr > th .collapsible-button,
.collapsible.collapse-button-none > * > tr > th .collapsible-button {
float: none;
}

/* Alternating cell background, primarily used with [[Template:Infobox row]] */
.alternatecells:nth-child(odd) {
background-color: #F9F9F9;
}
/* Alternating table rows */
.alternaterows tr:nth-child(even) {
background-color: #F9F9F9;
}

/* The blue header used throughout the wiki */
.mcwiki-header,
#curse-panel .block_header {
background: #729FCF;
border: 1px solid #ccc;
border-bottom: 4px groove #999999;
border-right: 4px groove #999999;
padding: 5px;
}

/* Make transparency visible on image pages */
.filehistory a img,
#file img:hover {
background: url("http://hydra-media.cursecdn.com/minecraft=pl.gamepedia.com/5/5d/Checker-16x16.png");
}
#file button img {
background: none !important;
}

/* Scale file page image to the width of the page */
#file img {
max-width: 100%;
height: auto;
}

/* Remove margin from file page table */
#mw-imagepage-section-filehistory .filehistory {
margin-right: 0;
}

/* Highlight clicked reference in blue to help navigation */
ol.references li:target,
sup.reference:target,
span.citation:target {
background-color: #C1DAF2;
}

/* Style the sitenotice and fix up its awful spacing (why is it even a table!?) */
#siteNotice #localNotice,
.page-MediaWiki_Sitenotice .mw-content-ltr > div
{
background-color: #FFFFFF;
/* border: 1px solid #D3D3D3;*/
margin-bottom: 12px;
text-align: center;
}
#siteNotice #mw-dismissable-notice #localNotice {
/* Note to other languages: Change this to the same width as the "dismiss" button in your language, this makes the sitenotice centred better */
margin-left: 55px;
}

#siteNotice td:first-child {
width: 100%;
}

#localNotice div p {
padding: 0.4em 0 0.5em;
margin: 0;
}

/* Minecraft font */
@font-face {
font-family: Minecraft;
src: url("http://hydra-media.cursecdn.com/minecraft.gamepedia.com/fonts/minecraft.eot?#iefix"),
url("http://hydra-media.cursecdn.com/minecraft.gamepedia.com/fonts/minecraft.woff") format('woff'),
url("http://hydra-media.cursecdn.com/minecraft.gamepedia.com/fonts/minecraft.ttf") format('truetype');
}

/* Allow parts of toc to be hidden */
/* Section levels */
.toc-hidelevel2 .toclevel-1 ul,
.toc-hidelevel3 .toclevel-2 ul,
.toc-hidelevel4 .toclevel-2 ul,
/* Numbers */
.toc-nonumbers .tocnumber {
display: none;
}

/* Pre-collapse collapsed tables, so there is no page jump when JS kicks in */
.collapsible.collapsed > tr,
.collapsible.collapsed > tbody > tr {
display: none;
}
.collapsible.collapsed > tr:first-child,
.collapsible.collapsed > tbody > tr:first-child {
display: table-row;
}
.collapsible.collapsed > thead + tbody > tr:first-child {
display: none;
}

/* Turn a list into a tree view style (See [[.minecraft]]) */
.treeview {
margin-top: 0.3em;
}

.treeview ul,
.treeview li {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}

.treeview li {
display: table;
}

.treeview li li {
position: relative;
padding-left: 13px;
margin-left: 7px;
border-left: 1px solid #636363;
}
.treeview li li:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
border-bottom: 1px solid #636363;
}

.treeview li li.first:before {
border-color: #636363;
border-style: solid;
border-width: 1px 0 0 1px;
height: 100%;
margin-top: 11px;
width: 10px;
}
.treeview li li.first,
.treeview li li:last-child {
border: 0;
padding-left: 14px;
}
.treeview li li:last-child:before {
border-left: 1px solid #636363;
width: 10px;
}

/* Move suggestions back into place (netbar moved them) */
.suggestions {
margin-top: -29px !important;
}

/* Simulate link styling for JS only links */
.jslink {
color: #0645AD;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.jslink:hover {
text-decoration: underline;
cursor: pointer;
}
.jslink:active {
color: #FAA700;
}

/* Improve styling of sub-categories */
#mw-subcategories ul {
list-style-type: none;
margin-left: 10px;
}

/* Use text arrows for enhanced rc instead of outdated (and broken) images */
td.mw-enhanced-rc {
padding-left: 13px !important;
}
td + td.mw-enhanced-rc {
padding-left: 0 !important;
}

.mw-enhanced-rc img {
display: none;
}

.mw-rc-openarrow:after {
content: "►";
}
.mw-rc-closearrow:after {
content: "▼";
}

table.mw-enhanced-rc .mw-collapsible-toggle {
cursor: pointer;
color: #0645AD;
}

/* Horizontal list */
.hlist ul {
display: inline;
margin: 0;
}

.hlist li {
display: inline-block;
white-space: nowrap;
margin: 0;
}
.hlist li:after {
content: " •";
}
.hlist li:last-child:after,
.hlist li.last-child:after {
content: "";
}

.hlist li > ul li:first-child:before {
content: "(";
}
.hlist li > ul li:last-child:after,
.hlist li > ul li.last-child:after {
content: ")";
}

.hlist li li li {
font-size: x-small;
}

/* Generic styling for animation class */
.animated > *:not(.active):not(.skip),
.paused > *:not(.active):not(.skip) {
display: none;
}

.nowrap {
white-space: nowrap;
}

/* Hide noscript only elements */
.noscript {
display: none;
}

/* Cite text needs to be a block element, but should display inline */
.references > li {
white-space: nowrap;
}
div.cite-reference-text {
display: inline-block;
vertical-align: top;
white-space: normal;
}

/* Add icon to known MC dev userlinks */
.mw-userlink[title="User:Jeb"],
.mw-userlink[title="User:Dinnerbone"],
.mw-userlink[title="User:EvilSeph"],
.mw-userlink[title="User:MarcWatson"],
.mw-userlink[title="User:Tahg"] {
padding-left: 17px;
background: url("http://hydra-media.cursecdn.com/minecraft.gamepedia.com/thumb/a/ad/Mojang_logo.svg/14px-Mojang_logo.svg.png") no-repeat left center;
}

/* Mark internal links as plain */
#content a.external[href^="http://minecraft.gamepedia.com"] {
background: none;
padding-right: 0;
}
#content a.external[href^="http://minecraft-pl.gamepedia.com"] {
background: none;
padding-right: 0;
}
/* Make tabs the correct size */
* {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
.new-navbox tr td li {
display: inline-block;
padding-right: 5px;
}
.new-navbox tr td li:last-child {
padding-right: 0px;
}
.new-navbox tr td li:last-child::after {
content: "";
}
.new-navbox tr td ul {
display: inline-block;
margin: 0px;
}
.new-navbox tr td li ul {
font-size: 90%;
}
.new-navbox tr td li ul::before {
content: " (";
}
.new-navbox tr td li ul::after {
content: ") ";
}
.new-navbox tr td li::after {
content: " • ";
}

/* START NOTIFICATIONS */
div.alert-message {
display: block;
padding: 13px 12px 12px;
font-weight: bold !important;
font-size: 14px;
color: white;
background-color: #2ba6cb;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
position: relative;
}
div.alert-message a {
color: white !important;
text-decoration: underline !important;
}
div.alert-message .box-icon {
display: block;
float: left;
background-image: url('/images/a/a6/NoticeIcon.png');
width: 30px;
height: 25px;
margin-top: -2px;
background-position: -8px -8px;
}
div.alert-message p {
margin: 0px !important;
}
div.alert-message.success {
background-color: #5da423;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.success .box-icon {
background-position: -48px -8px;
}
div.alert-message.warning {
background-color: #e3b000;
color: #fff;
text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.61);
}
div.alert-message.warning .box-icon {
background-position: -88px -8px;
}
div.alert-message.error {
background-color: #c60f13;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.error .box-icon {
background-position: -128px -8px;
}

/* linki zewnętrzne do wewnątrz jako plaintext */
#content a.external[href^="http://prisonwiki.pl"] {
background: none;
padding-right: 0;
}
#content a.external[href^="http://devwiki.introversion.co.uk"] {
background: none;
padding-right: 0;
}
.plainlink a {
background: none !important;
padding-right: 0 !important;
}

/* tooltips*/
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
min-width: 160px;
max-width: 300px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* END NOTIFICATIONS */

MediaWiki:Gadget-spriteEditLoader.js

2016-07-12T12:22:42Z

Majr: Created page with "( function() { 'use strict'; /** * Add an edit button which loads the sprite editor * * If spriteaction=edit is in the URL, the editor will be loaded * immediately, otherw..."

( function() {
'use strict';
/**
* Add an edit button which loads the sprite editor
*
* If spriteaction=edit is in the URL, the editor will be loaded
* immediately, otherwise it will wait for the button to be clicked.
* Uses the History API where supported to update the URL, otherwise
* the URL isn't updated.
*/
if ( !$( '#spritedoc' ).length ) {
return;
}

var $editTab = $( '#ca-edit' );
if ( !$editTab.length ) {
$editTab = $( '#ca-viewsource' );
}
var $spriteEditLink = $( '<a>' ).text( 'Edit sprite' ).attr( 'href',
mw.util.getUrl( null, { spriteaction: 'edit' } )
);
var $spriteEditTab = $( '<li>' ).attr( 'id', 'ca-spriteedit' ).append(
$( '<span>' ).append( $spriteEditLink )
);
$spriteEditTab.insertAfter( $editTab );

var loadSpriteEditor = function() {
$spriteEditTab.add( '#ca-view' ).toggleClass( 'selected' );

mw.loader.load( 'ext.gadget.spriteEdit' );
};
if ( location.search.match( 'spriteaction=edit' ) ) {
loadSpriteEditor();
} else {
var $win = $( window );
$spriteEditLink.one( 'click', function( e ) {
if ( window.history && history.pushState ) {
// Initially add the history so it is not delayed waiting
// for the editor to load. The editor will handle it from now.
history.pushState( {}, '', this.href );
}

loadSpriteEditor();
$win.off( '.spriteEditLoader' );

e.preventDefault();
} );

if ( window.history && history.pushState ) {
// If the page is reloaded while the editor isn't loaded, navigating
// back to the editor won't work, so an initial navigation check is
// necessary to load the editor, where it will then monitor navigation
$win.on( 'popstate.spriteEditLoader', function() {
if (
location.search.match( 'spriteaction=edit' ) &&
!$( 'html' ).hasClass( 'spriteedit-loaded' )
) {
loadSpriteEditor();
$win.off( '.spriteEditLoader' );
}
} );
}
}

}() );

MediaWiki:Gadget-refTooltip.js

2016-06-07T08:21:08Z

Majr: Allow specifying references section name so options button works on other languages

$( function() {
'use strict';

var i18n = {
cancelButton: 'Cancel',
doneButton: 'Done',
enableLabel: 'Enable reference tooltips',
optionsButtonTitle: 'Change reference tooltip options',
referencesSectionName: 'References',
saveFailedStorageFull: "Is your browser's localStorage full?",
saveFailedTitle: 'Saving options failed'
};

var $win = $( window );
var $body = $( '.mw-body' );
var $content = $( '#mw-content-text' );
var $tooltip = $();
var $tooltipText = $();
var tooltipRect, tooltipInnerWidth, tooltipOffset, $anchor, anchorRect;
var showTimer, hideTimer;
var loggedIn = !!mw.config.get( 'wgUserId' );
var options = {
enabled: true
};
if ( !loggedIn ) {
try {
options = JSON.parse( localStorage.refTooltip );
} catch ( e ) {}
}

var createTooltip = function( $anchor, content, showOptions ) {
// Get rid of any existing tooltip
$tooltip.remove();

// Create the tooltip
$tooltip = $( '<div>' ).addClass( 'ref-tooltip' ).data( {
anchor: $anchor,
fresh: true,
} ).hover( function() {
// Callback to the ref's hover functions when the tooltip is hovered over
$anchor.mouseenter();
}, function() {
$anchor.mouseleave();
} );

$tooltipText = $( '<div>' ).addClass( 'ref-tooltip-text' )
.append( content ).appendTo( $tooltip );
if ( showOptions ) {
$tooltipText.prepend(
$( '<button>' ).addClass( 'pixel-image ref-tooltip-options-button' )
.attr( 'title', i18n.optionsButtonTitle )
);
}
$( '<div>' ).addClass( 'ref-tooltip-arrow' ).appendTo( $tooltip );
$tooltip.appendTo( 'body' );
// Set width to content size
$tooltipText.width( $tooltipText.width() + 1 );

setPos( true );

// Data prevents tooltips being immediately closed if opened via a click
setTimeout( function() {
$tooltip.removeData( 'fresh' );
}, 0 );
};
var removeTooltip = function() {
$tooltip.trigger( 'refTooltip-close' );

$tooltip.remove();
$tooltip = $();
};
var getRefText = function( $ref ) {
var refId = $ref.find( 'a' ).attr( 'href' ).split( '#' )[1];
var $refText = $( document.getElementById( refId ) ).clone();
$refText.find( '.mw-cite-backlink' ).remove();

return $refText.html();
};
var setPos = function( initial ) {
if ( !$tooltip.length ) {
return;
}

if ( initial ) {
tooltipRect = $tooltipText[0].getBoundingClientRect();
tooltipInnerWidth = $tooltipText.width();
tooltipOffset = {
top: parseFloat( $tooltipText.css( 'margin-top' ) ),
left: parseFloat( $tooltipText.css( 'margin-left' ) )
};
$anchor = $tooltip.data( 'anchor' );
anchorRect = $anchor[0].getBoundingClientRect();
} else {
$tooltip.removeClass( 'ref-tooltip-flipped' );
$tooltipText.css( 'margin-left', '' );
}

// Position the tooltip
var tooltipPos = {
top: $win.scrollTop(),
left: $win.scrollLeft()
};
if ( anchorRect.top + tooltipOffset.top < tooltipRect.height ) {
$tooltip.addClass( 'ref-tooltip-flipped' );
tooltipPos.top += anchorRect.bottom;
} else {
tooltipPos.top += anchorRect.top - tooltipRect.height;
}
tooltipPos.left += anchorRect.left + anchorRect.width / 2;

// Stop it going off the side of the page
var contentPadding = parseFloat( $body.css( 'padding-right' ) );
var contentBoundary = $body[0].getBoundingClientRect().right - contentPadding / 2;
var overlap = anchorRect.left + tooltipOffset.left + tooltipRect.width - contentBoundary;
if ( overlap > 0 ) {
$tooltipText.css(
'margin-left',
Math.max( tooltipOffset.left - overlap, -tooltipInnerWidth )
);
}
$tooltip.css( tooltipPos );
};
var bindRefHandlers = function() {
$content.on( {
'mouseenter.refTooltip': function() {
var $this = $( this );

clearTimeout( hideTimer );

// Current tooltip, do nothing
if ( $tooltip.length && (
$this.is( $tooltip.data( 'anchor' ) ) || $.contains( $tooltip[0], this )
) ) {
return;
}

// Create the tooltip if timeout succeeds
showTimer = setTimeout( function() {
createTooltip( $this, getRefText( $this ), true );
}, 200 );
},
'mouseleave.refTooltip': function() {
clearTimeout( showTimer );

// Remove the tooltip if timeout succeeds
hideTimer = setTimeout( function() {
removeTooltip();
}, 300 );
}
}, '.reference' );
};

// When anywhere but the tooltip or anchor is clicked, remove it immediately
$( window ).on( 'click.refTooltip', function( e ) {
if ( $tooltip.length && !$tooltip.data( 'fresh' ) && !$.contains( $tooltip[0], e.target ) ) {
clearTimeout( showTimer );
removeTooltip();
}
} );

// TODO: Replace with mw.util.escapeId on MW 1.27
var escapeId = function( id ) {
return mw.util.rawurlencode( String( id ).replace( / /g, '_' ) )
.replace( /%3A/g, ':' )
.replace( /%/g, '.' );
};
$( document.getElementById( escapeId( i18n.referencesSectionName ) ) ).before(
$( '<button>' ).addClass( 'pixel-image ref-tooltip-options-button' )
.attr( 'title', i18n.optionsButtonTitle )
);
$( 'body' ).on( 'click.refTooltip', '.ref-tooltip-options-button', function( e ) {
// Just close the tooltip if it is already open
if ( $tooltip.length && $tooltip.data( 'anchor' ).is( e.target ) ) {
return;
}

// Disable ref handlers while options are open
$content.off( 'mouseenter.refTooltip mouseleave.refTooltip' );
$tooltip.on( 'refTooltip-close', function() {
if ( options.enabled ) {
bindRefHandlers();
}
} );

var $anchor = $( this );

$anchor.addClass( 'ref-tooltip-loading' );

// Replace current tooltip if clicking the options button within a tooltip
if ( $tooltip.length && $.contains( $tooltip[0], $anchor[0] ) ) {
$anchor = $tooltip.data( 'anchor' );
}

mw.loader.using( [ 'mediawiki.api', 'mediawiki.ui.button', 'mediawiki.ui.checkbox' ], function() {
$anchor.removeClass( 'ref-tooltip-loading' );

var $optionsText = $( '<div>' ).addClass( 'ref-tooltip-options' ).append(
$( '<div>' ).addClass( 'mw-ui-checkbox' ).append(
$( '<input>' ).attr( {
type: 'checkbox',
id: 'ref-tooltip-options-enabled',
checked: options.enabled
} ),
$( '<label>' ).attr( 'for', 'ref-tooltip-options-enabled' ).text( i18n.enableLabel )
),
$( '<div>' ).addClass( 'ref-tooltip-actions' ).append(
$( '<button>' ).addClass( 'mw-ui-button mw-ui-quiet' ).text( i18n.cancelButton )
.on( 'click.refTooltip', function() {
removeTooltip();
} ),
$( '<button>' ).addClass( 'mw-ui-button mw-ui-progressive' ).text( i18n.doneButton )
.on( 'click.refTooltip', function() {
options.enabled = $( '#ref-tooltip-options-enabled' ).prop( 'checked' );
var saveOptions = $.Deferred();
if ( loggedIn ) {
saveOptions = new mw.Api().postWithToken( 'edit', {
action: 'options',
optionname: 'gadget-refTooltip',
optionvalue: options.enabled ? undefined : 0
} );
} else {
try {
localStorage.refTooltip = JSON.stringify( options );
saveOptions.resolve();
} catch ( e ) {
saveOptions.reject( 'storage' );
}
}

saveOptions.then( function() {
removeTooltip();
}, function( code, error ) {
mw.notify(
code === 'storage' ? i18n.saveFailedStorageFull : error,
{ title: i18n.saveFailedTitle }
);
} );
} )
)
);

createTooltip( $anchor, $optionsText, false );
$tooltip.on( 'refTooltip-close', function() {
if ( options.enabled ) {
bindRefHandlers();
}
} );
} );
} );

// Finally, enable tooltips
if ( options.enabled ) {
bindRefHandlers();
}
} );

// Add width and height to Element.getBoundingClientRect() in IE8
// TODO: Remove on 1.27
if ( window.TextRectangle && !TextRectangle.prototype.width ) {
Object.defineProperty( TextRectangle.prototype, 'width', {
get: function() { return this.right - this.left; }
} );
Object.defineProperty( TextRectangle.prototype, 'height', {
get: function() { return this.bottom - this.top; }
} );
}

MediaWiki:Gadget-refTooltip.css

2016-05-12T12:58:14Z

Majr: Use protocol relative URL

.ref-tooltip {
position: absolute;
margin-top: -29px;
font-size: 0.875em;
z-index: 99;
}

.ref-tooltip-text {
border: 1px solid #AAA;
border-radius: 2px;
background-color: #FFF;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
margin-top: -14px;
margin-left: -21px;
padding: 0.5em 0.8em;
font-size: smaller;
min-width: 20px;
max-width: 300px;
word-wrap: break-word;
}
.ref-tooltip-flipped > .ref-tooltip-text {
margin-top: 13px;
}
.ref-tooltip-text > p:first-child {
margin-top: 0;
}
.ref-tooltip-text > p:last-child {
margin-bottom: 0;
}

.ref-tooltip-arrow,
.ref-tooltip-arrow:before,
.ref-tooltip-arrow:after {
content: "";
position: absolute;
bottom: -9px;
left: -9px;
border: 10px solid;
border-color: #888 transparent;
border-bottom-style: none;
width: 0;
height: 0;
}
.ref-tooltip-arrow:before {
bottom: -3px;
left: -10px;
border-color: rgba(0, 0, 0, 0.15) transparent;
}
.ref-tooltip-arrow:after {
bottom: 1px;
left: -9px;
border-color: #FFF transparent;
border-width: 9px;
}
.ref-tooltip-flipped > .ref-tooltip-arrow,
.ref-tooltip-flipped > .ref-tooltip-arrow:after {
bottom: auto;
border-top-style: none;
border-bottom-style: solid;
}
.ref-tooltip-flipped > .ref-tooltip-arrow {
top: 4px;
}
.ref-tooltip-flipped > .ref-tooltip-arrow:before {
content: none;
}
.ref-tooltip-flipped > .ref-tooltip-arrow:after {
top: 1px;
}

.ref-tooltip-options-button {
display: inline-block;
font: inherit;
float: right;
-webkit-appearance: none;
border: none;
outline: none;
background: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/e/e0/Reference_options.png) no-repeat;
margin: 0.3em 0 0 0.5em;
width: 16px;
height: 16px;
cursor: pointer;
}
.ref-tooltip-options-button::-moz-focus-inner {
border: none;
}
.ref-tooltip-options-button.ref-tooltip-loading {
animation: 1s linear infinite rotate;
}
.ref-tooltip-text .ref-tooltip-options-button {
margin-top: -0.1em;
margin-right: -0.3em;
}
.ref-tooltip-options {
padding: 0.3em 0;
}
.ref-tooltip-actions {
margin-top: 0.8em;
text-align: right;
}

MediaWiki:Gadget-editableRollback.css

2016-05-12T12:57:57Z

Majr: Use protocol relative URL

.edit-rollback {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 2px;
background: url(//hydra-media.cursecdn.com/minecraft.gamepedia.com/6/6c/Edit_pencil.png) no-repeat;
cursor: pointer;
}
#rollback-summary {
display: flex;
align-items: center;
position: absolute;
left: 1em;
right: 1em;
padding: 0.8em;
border: 1px solid #CCC;
background-color: #F9F9F9;
z-index: 99;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#rollback-summary > *:first-child {
flex: auto;
margin-right: 1em;
}
#rollback-summary > .rollback-submit-button {
flex: none;
}

MediaWiki:Gadget-editableRollback

2016-05-09T06:31:21Z

Majr: Created page with "Allow editing rollback summary"

Allow editing rollback summary

MediaWiki:Gadget-editableRollback.js

2016-05-09T06:30:16Z

Majr: Majr moved page User:Majr/editableRollback.js to MediaWiki:Gadget-editableRollback.js

$( function() {
'use strict';

$( '.mw-rollback-link > a' ).after( $( '<span>' ).addClass( 'edit-rollback' ).prop( 'title', 'Edit rollback summary' ) );
$( '#mw-content-text' ).on( 'click', '.edit-rollback', function() {
var $rollback = $( '#rollback-summary' );

if ( $( this ).parent().is( $rollback.parent() ) ) {
$rollback.toggle();
} else {
$rollback.remove();

var name = decodeURIComponent( $( this ).prev().prop( 'href' ).match( /&from=(.+)&token/ )[1].replace( /\+/g, ' ' ) );
$rollback = $( '<div id="rollback-summary">' ).append(
$( '<input type="text">' ).addClass( 'mw-ui-input rollback-text' ).prop( { maxlength: 250, spellcheck: true } ).val(
'Revert consecutive edits by [[Special:Contribs/' + name + '|' + name + ']] ([[User talk:' + name + '|talk]])'
),
$( '<input type="button">' ).addClass( 'mw-ui-button mw-ui-constructive rollback-submit-button' ).val( 'Rollback' )
).insertAfter( this );
}

// This puts the cursor at the end of the text
var $text = $rollback.find( '.rollback-text' );
var summary = $text.val();
$text.focus().val( '' ).val( summary );
} );

$( '#mw-content-text' ).on( 'click', '.rollback-submit-button', function() {
var $link = $( this ).closest( '.mw-rollback-link' );
window.location = $link.find( 'a' ).prop( 'href' ) + '&summary=' + encodeURIComponent( $link.find( '.rollback-text' ).val() );
} );

// Allow rollback to be submitted by pressing enter while focused on the input field
$( '#mw-content-text' ).on( 'keypress', '.rollback-text', function( e ) {
if ( e.which !== 13 ) {
return;
}
e.preventDefault();
$( '.rollback-submit-button' ).click();
} );

// Close rollback if clicked anywhere else
$( window ).click( function( e ) {
if ( !$( e.target ).is( '#rollback-summary, .edit-rollback' ) && !$( '#rollback-summary' ).has( e.target ).length ) {
$( '#rollback-summary' ).hide();
}
} );

} );

MediaWiki:Gadget-refTooltip

2016-05-08T04:50:49Z

Majr: Created page with "Show reference content in a tooltip when hovered over"

Show reference content in a tooltip when hovered over

Użytkownik:Majr

2015-05-08T11:43:16Z

Majr: Utworzono nową stronę "<div class="redirectMsg"><span style="font-size:200%;font-weight:bold;margin-right:.5em">↳</span><span class="redirectText">:en:User:Majr</span></div>"

Szablon:Załaduj

2014-10-06T01:55:23Z

Majr: Update formatting

<includeonly><div class="load-page" data-page="{{{1}}}">
<{{{3|h2}}}>{{#if: {{{2|}}} | {{{2}}} | {{{1}}} }}</{{{3|h2}}}>
<div class="load-page-content noscript">{{main|{{{1}}}}}<span class="mw-editsection" title="Редактировать: {{{1}}}">[<nowiki/>[{{fullurl: {{{1}}} | action=edit }} {{int:editlink}}]<nowiki/>]</span></div>
</div></includeonly><noinclude>{{Док}}[[Category:Шаблоны]]</noinclude>

Plik:Wiki.png

2014-10-01T05:39:51Z

Majr: Majr przesłano nową wersję pliku „Plik:Wiki.png“

MsUpload

Plik:Achievement background.png

2014-10-01T05:15:59Z

Majr: Zabezpieczył(a) „Plik:Achievement background.png”: Style image ([edytowanie=Dozwolone tylko dla administratorów] (na zawsze) [przenoszenie=Dozwolone tylko dla administratorów] (na zawsze) [przesyłanie=Dozwolone tylko dla administratorów] (na

== Licencja ==
{{License Mojang}}

Plik:Achievement background.png

2014-10-01T05:14:56Z

Majr:

== Licencja ==
{{License Mojang}}

Użytkownik:Majr/hydra.css

2014-09-29T13:18:08Z

Majr: Utworzono nową stronę "@import "http://minecraft.gamepedia.com/index.php?title=User:Majr/hydra.css&action=raw&ctype=text/css";"

@import "http://minecraft.gamepedia.com/index.php?title=User:Majr/hydra.css&action=raw&ctype=text/css";

Użytkownik:Majr/hydra.js

2014-09-29T13:12:37Z

Majr: Utworzono nową stronę "importScriptURI( 'http://minecraft.gamepedia.com/index.php?title=User:Majr/hydra.js&action=raw&ctype=text/javascript' );"

importScriptURI( 'http://minecraft.gamepedia.com/index.php?title=User:Majr/hydra.js&action=raw&ctype=text/javascript' );

Szablon:YouTube

2014-09-11T04:54:39Z

Majr:

<includeonly>{{#ev:youtube|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}}</includeonly><noinclude>
{{documentation}}

Szablon:YouTube

2014-01-31T08:39:54Z

Majr:

<includeonly>{{#if: {{{sd|}}}
| {{#ev:youtube|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}}
| {{#ev:youtubehd|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}}
}}</includeonly><noinclude>
{{documentation}}

Szablon:Zwinięty film

2013-03-14T09:23:58Z

Majr: Use collapsible tables instead of links.

<includeonly>{| class="collapsible collapsed collapse-button-none"
|-
! style="text-align:left" | {{#if: {{{2|}}} | {{{2}}} | YouTube }} Video ([http://www.youtube.com/watch?v={{{1}}} view on YouTube])
|-
| {{YouTube|{{{1}}}}} 
|}</includeonly><noinclude>
{{/doc}}

[[Category:Formatting templates]]
</noinclude>

Szablon:Zwinięty film

2013-03-14T09:18:18Z

Majr: moved Template:Yt to Template:CollapsedVideo

<includeonly>{{#if: {{{2|}}} |[}}http://www.youtube.com/watch?v={{{1}}} {{#if: {{{2|}}} |{{{2}}}]}}</includeonly><noinclude>
{{/doc}}

[[Category:Formatting templates]]
</noinclude>

Szablon:YouTube

2013-03-14T09:07:29Z

Majr: Created page with "<includeonly>{{#if: {{{sd|}}} | {{#ev:youtube|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}} | {{#ev:youtubehd|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}} }}</includeonly><noin..."

<includeonly>{{#if: {{{sd|}}}
| {{#ev:youtube|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}}
| {{#ev:youtubehd|{{{1}}}|{{#if: {{{2|}}} | {{{2}}} | 425 }}}}
}}</includeonly><noinclude>
{{doc}}

Szablon:Fraction

2011-04-05T07:26:22Z

Majr: moved Template:Frac to Template:Fraction

{{#if:{{{3|}}} | {{{1}}} <sup>{{{2}}}</sup>&frasl;<sub>{{{3}}} | <sup>{{{1}}}</sup>&frasl;<sub>{{{2}}} }}</sub><noinclude>
{{/doc}}

[[Category:Templates]]</noinclude>

Szablon:Frac

2011-04-05T07:26:22Z

Majr: moved Template:Frac to Template:Fraction

#REDIRECT [[Template:Fraction]]

Szablon:Fraction

2011-04-05T07:18:17Z

Majr: Oops

{{#if:{{{3|}}} | {{{1}}} <sup>{{{2}}}</sup>&frasl;<sub>{{{3}}} | <sup>{{{1}}}</sup>&frasl;<sub>{{{2}}} }}</sub><noinclude>
{{/doc}}

[[Category:Templates]]</noinclude>

Szablon:Fraction

2011-04-05T07:16:36Z

Majr: This template smells like a wikipedia carbon copy

{{#if:{{{2|}}} | {{{1}}} <sup>{{{2}}}</sup>&frasl;<sub>{{{3}}} | <sup>{{{1}}}</sup>&frasl;<sub>{{{2}}} }}</sub><noinclude>
{{/doc}}

[[Category:Templates]]</noinclude>