EverQuest Legends Wiki - User contributions [en]

MediaWiki:BlueprintLoader.js

2026-08-10T08:27:19Z

Maintenance script: Refresh Icon Finder static-cache client

/**
* EQL Wiki - Editor Tools / Dynamic Blueprint Loader
*
* Source-editor behavior:
* - On a new, truly empty page: show the Help:Contents Blueprint selector.
* - On every source edit page: show the Icon Finder button.
* - Heavy Icon Finder logic is lazy-loaded only when opened.
*/
( function ( mw, $ ) {
'use strict';

var BLUEPRINT_PAGE = 'Help:Contents';
var TOOLS_ID = 'eql-editor-tools';
var ICON_FINDER_PAGE = 'MediaWiki:IconFinder.js';

function htmlToText( html ) {
var div = document.createElement( 'div' );
div.innerHTML = String( html || '' );
return ( div.textContent || div.innerText || '' ).trim();
}

function makeLabel( heading ) {
return heading
.replace( /\s+Blueprints?\s*$/i, '' )
.trim() + ' Blueprint';
}

function getEditorContents( $textarea ) {
try {
return String( $textarea.textSelection( 'getContents' ) || '' );
} catch ( e ) {
return String( $textarea.val() || '' );
}
}

function setEditorContents( $textarea, text ) {
try {
$textarea.textSelection( 'setContents', text );
} catch ( e ) {
$textarea.val( text );
}

$textarea.trigger( 'input' );
$textarea.trigger( 'change' );
$textarea.trigger( 'focus' );
}

function extractBlueprint( sectionText ) {
var match;
var blueprint;

sectionText = String( sectionText || '' );

match = sectionText.match(
/<pre(?:\s[^>]*)?>([\s\S]*?)<\/pre>/i
);

if ( !match ) {
return null;
}

blueprint = match[ 1 ];

blueprint = blueprint.replace(
/^\s*<nowiki>([\s\S]*?)<\/nowiki>\s*$/i,
'$1'
);

blueprint = blueprint
.replace( /^\s*\n/, '' )
.replace( /\s+$/, '' );

return blueprint + '\n';
}

function fetchBlueprintSections( api ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'tocdata',
formatversion: 2
} ).then( function ( data ) {
var tocdata =
data &&
data.parse &&
data.parse.tocdata;

var sections =
tocdata &&
Array.isArray( tocdata.sections )
? tocdata.sections
: [];

if ( sections.length ) {
return sections;
}

return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'sections',
formatversion: 2
} ).then( function ( fallbackData ) {
return (
fallbackData &&
fallbackData.parse &&
Array.isArray( fallbackData.parse.sections )
)
? fallbackData.parse.sections
: [];
} );
} );
}

function normalizeBlueprintSections( sections ) {
return sections
.map( function ( section ) {
var heading = htmlToText( section.line || '' );

return {
heading: heading,
label: makeLabel( heading ),
index: String( section.index || '' ),
anchor:
section.linkAnchor ||
section.anchor ||
''
};
} )
.filter( function ( section ) {
return (
section.index &&
/\bBlueprints?\s*$/i.test( section.heading )
);
} );
}

function fetchBlueprintWikitext( api, sectionIndex ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'wikitext',
section: sectionIndex,
formatversion: 2
} ).then( function ( data ) {
var wikitext =
data &&
data.parse
? data.parse.wikitext
: '';

if (
wikitext &&
typeof wikitext === 'object' &&
Object.prototype.hasOwnProperty.call( wikitext, '*' )
) {
wikitext = wikitext[ '*' ];
}

return String( wikitext || '' );
} );
}

function addStyles() {
if ( document.getElementById( 'eql-editor-tools-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-editor-tools-styles',
text:
'#' + TOOLS_ID + '{' +
'box-sizing:border-box;' +
'margin:0 0 1rem 0;' +
'padding:1rem 1.1rem;' +
'background:linear-gradient(180deg,rgba(16,21,29,.97),rgba(9,13,19,.98));' +
'border:1px solid rgba(216,183,92,.38);' +
'border-left:5px solid rgba(216,183,92,.82);' +
'border-radius:8px;' +
'box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);' +
'}' +

'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'display:grid;' +
'grid-template-columns:minmax(0,1fr) auto;' +
'gap:1rem;' +
'align-items:end;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-title,' +
'#' + TOOLS_ID + ' .eql-iconfinder-title{' +
'margin:0 0 .35rem 0;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'letter-spacing:.035em;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-description{' +
'margin:0 0 .7rem 0;' +
'color:#aeb8c7;' +
'font-size:.9rem;' +
'line-height:1.35;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-controls{' +
'display:flex;' +
'flex-wrap:wrap;' +
'align-items:center;' +
'gap:.65rem;' +
'}' +

'#' + TOOLS_ID + ' select{' +
'box-sizing:border-box;' +
'min-width:260px;' +
'max-width:100%;' +
'min-height:2.35rem;' +
'padding:.35rem .55rem;' +
'background:#0b1017;' +
'border:1px solid rgba(216,183,92,.36);' +
'border-radius:5px;' +
'color:#e2e2cf;' +
'}' +

'#' + TOOLS_ID + ' button{' +
'min-height:2.35rem;' +
'padding:.35rem .85rem;' +
'background:linear-gradient(180deg,#806d32,#594817);' +
'border:1px solid #b69c4b;' +
'border-radius:5px;' +
'color:#fff5cc;' +
'font-weight:700;' +
'cursor:pointer;' +
'}' +

'#' + TOOLS_ID + ' button:hover:not(:disabled){' +
'filter:brightness(1.08);' +
'}' +

'#' + TOOLS_ID + ' button:disabled{' +
'cursor:default;' +
'opacity:.55;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-source{' +
'color:#b9c8ff;' +
'font-size:.9rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-status{' +
'display:block;' +
'margin-top:.55rem;' +
'min-height:1.2em;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'display:flex;' +
'flex-direction:column;' +
'align-items:stretch;' +
'justify-content:flex-end;' +
'min-width:150px;' +
'}' +

'#eql-icon-finder-toggle{' +
'white-space:nowrap;' +
'}' +

'#eql-icon-finder-host{' +
'margin-top:1rem;' +
'padding-top:1rem;' +
'border-top:1px solid rgba(216,183,92,.22);' +
'}' +

'#eql-icon-finder-host[hidden]{display:none!important;}' +

'@media(max-width:760px){' +
'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'grid-template-columns:1fr;' +
'}' +
'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'min-width:0;' +
'}' +
'#' + TOOLS_ID + ' select{' +
'width:100%;' +
'min-width:0;' +
'}' +
'}'
} ).appendTo( document.head );
}

function loadIconFinderScript() {
if ( window.EQLIconFinder ) {
return Promise.resolve( window.EQLIconFinder );
}

if ( window.eqlIconFinderLoadingPromise ) {
return window.eqlIconFinderLoadingPromise;
}

window.eqlIconFinderLoadingPromise = new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );

script.src = mw.util.getUrl( ICON_FINDER_PAGE, {
action: 'raw',
ctype: 'text/javascript',
v: '9'
} );

script.async = true;

script.onload = function () {
if ( window.EQLIconFinder ) {
resolve( window.EQLIconFinder );
} else {
reject( new Error( 'IconFinder.js loaded without exposing EQLIconFinder.' ) );
}
};

script.onerror = function () {
reject( new Error( 'Could not load IconFinder.js.' ) );
};

document.head.appendChild( script );
} );

return window.eqlIconFinderLoadingPromise;
}

function buildIconFinderLaunch( $row, $tools ) {
var $launch = $( '<div>', {
class: 'eql-iconfinder-launch'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-iconfinder-title',
text: 'ICON FINDER'
} ).appendTo( $launch );

var $button = $( '<button>', {
id: 'eql-icon-finder-toggle',
type: 'button',
text: 'Icon Finder',
'aria-expanded': 'false'
} ).appendTo( $launch );

var $host = $( '<div>', {
id: 'eql-icon-finder-host',
hidden: true
} ).appendTo( $tools );

$button.on( 'click', function () {
var opening = $host.prop( 'hidden' );

if ( !opening ) {
$host.prop( 'hidden', true );
$button.attr( 'aria-expanded', 'false' );
return;
}

$button.prop( 'disabled', true );
$button.text( 'Loading…' );

loadIconFinderScript()
.then( function ( finder ) {
return finder.init( $host[ 0 ] );
} )
.then( function () {
$host.prop( 'hidden', false );
$button.attr( 'aria-expanded', 'true' );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

$host
.prop( 'hidden', false )
.text( 'Icon Finder could not be loaded.' );

$button.attr( 'aria-expanded', 'true' );
} )
.then( function () {
$button.prop( 'disabled', false );
$button.text( 'Icon Finder' );
} );
} );
}

function buildBlueprintArea( $row, $textarea, api ) {
var $area = $( '<div>', {
class: 'eql-blueprint-area'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-blueprint-title',
text: 'CREATE FROM A BLUEPRINT'
} ).appendTo( $area );

$( '<div>', {
class: 'eql-blueprint-description',
text:
'Load a standard page skeleton from Help:Contents, ' +
'or continue editing the current source below.'
} ).appendTo( $area );

var $controls = $( '<div>', {
class: 'eql-blueprint-controls'
} ).appendTo( $area );

var $select = $( '<select>', {
'aria-label': 'Select page blueprint',
disabled: true
} ).appendTo( $controls );

$( '<option>', {
value: '',
text: 'Loading blueprints...'
} ).appendTo( $select );

var $button = $( '<button>', {
type: 'button',
text: 'Load Blueprint',
disabled: true
} ).appendTo( $controls );

var $sourceLink = $( '<a>', {
class: 'eql-blueprint-source',
href: mw.util.getUrl( BLUEPRINT_PAGE ),
text: 'View Blueprints',
target: '_blank',
rel: 'noopener'
} ).appendTo( $controls );

var $status = $( '<span>', {
class: 'eql-blueprint-status',
'aria-live': 'polite'
} ).appendTo( $area );

fetchBlueprintSections( api )
.then( function ( sections ) {
var blueprints = normalizeBlueprintSections( sections );

$select.empty();

$( '<option>', {
value: '',
text: blueprints.length ?
'Select a blueprint...' :
'No blueprints found'
} ).appendTo( $select );

blueprints.forEach( function ( blueprint ) {
$( '<option>', {
value: blueprint.index,
text: blueprint.label
} )
.attr( 'data-anchor', blueprint.anchor )
.appendTo( $select );
} );

$select.prop( 'disabled', !blueprints.length );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$select.empty().append(
$( '<option>', {
value: '',
text: 'Could not load blueprints'
} )
);

$status.text(
'Could not read Blueprint headings from Help:Contents.'
);
} );

$select.on( 'change', function () {
var $option = $select.find( 'option:selected' );
var anchor = $option.attr( 'data-anchor' ) || '';

$button.prop( 'disabled', !$select.val() );

if ( anchor ) {
$sourceLink.attr(
'href',
mw.util.getUrl( BLUEPRINT_PAGE ) + '#' + anchor
);
$sourceLink.text( 'View This Blueprint' );
} else {
$sourceLink.attr( 'href', mw.util.getUrl( BLUEPRINT_PAGE ) );
$sourceLink.text( 'View Blueprints' );
}

$status.text( '' );
} );

$button.on( 'click', function () {
var sectionIndex = $select.val();
var existing;

if ( !sectionIndex ) {
return;
}

existing = getEditorContents( $textarea );

if (
existing.trim() &&
!window.confirm(
'The editor already contains text. Replace it with the selected blueprint?'
)
) {
return;
}

$button.prop( 'disabled', true );
$select.prop( 'disabled', true );
$status.text( 'Loading current blueprint from Help:Contents...' );

fetchBlueprintWikitext( api, sectionIndex )
.then( function ( sectionText ) {
var blueprint = extractBlueprint( sectionText );

if ( blueprint === null ) {
throw new Error( 'No <pre> block found.' );
}

setEditorContents( $textarea, blueprint );

$status.text(
'Blueprint loaded. Edit the fields below, then publish normally.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$status.text(
'Could not load this blueprint. Check Help:Contents and make sure the section contains a <pre> block.'
);
} )
.then( function () {
$select.prop( 'disabled', false );
$button.prop( 'disabled', !$select.val() );
} );
} );
}

function init() {
var action = mw.config.get( 'wgAction' );
var $textarea;
var $tools;
var $row;
var $editorHost;
var api;

if ( [ 'edit', 'submit' ].indexOf( action ) === -1 ) {
return;
}

$textarea = $( '#wpTextbox1' );

if ( !$textarea.length ) {
return;
}

if ( document.getElementById( TOOLS_ID ) ) {
return;
}

api = new mw.Api();

addStyles();

$tools = $( '<div>', {
id: TOOLS_ID
} );

$row = $( '<div>', {
class: 'eql-editor-tools-row'
} ).appendTo( $tools );

buildBlueprintArea( $row, $textarea, api );

buildIconFinderLaunch( $row, $tools );

$editorHost = $textarea.closest( '.wikiEditor-ui' );

if ( !$editorHost.length ) {
$editorHost = $textarea;
}

$tools.insertBefore( $editorHost );
}

mw.loader.using( [
'mediawiki.api',
'mediawiki.util',
'jquery.textSelection'
] ).then( function () {
$( init );
} );

}( mediaWiki, jQuery ) );

MediaWiki:IconFinder.js

2026-08-10T08:27:19Z

Maintenance script: Use static server cache for Icon Finder

/**
* EQL Wiki - Icon Finder
*
* Lazy-loaded from MediaWiki:BlueprintLoader.js.
*
* Matching workflow:
* 1. User pastes a screen capture containing JUST the icon.
* 2. Read the current image list from [[Icon List]].
* 3. Resolve only existing uploaded files through imageinfo.
* 4. Build compact perceptual fingerprints in the browser.
* 5. Cache that fingerprint index in IndexedDB keyed to the Icon List revision.
* 6. Rank possible matches by perceptual/pixel similarity.
*
* No icon-catalog requests or image downloads happen until the user actually
* pastes an image into the Icon Finder.
*/
( function ( mw, $ ) {
'use strict';

var ICON_LIST_PAGE = 'Icon List';
var DB_NAME = 'eql-icon-finder';
var DB_VERSION = 1;
var STORE_NAME = 'indexes';
var ALGO_VERSION = 6;
var COLOR_GRID = 16;
var IMAGEINFO_BATCH = 50;
var DOWNLOAD_CONCURRENCY = 8;
var RESULT_COUNT = 10;

var initializedHost = null;
var memoryIndex = null;
var currentPreviewUrl = null;

function addStyles() {
if ( document.getElementById( 'eql-icon-finder-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-icon-finder-styles',
text:
'.eql-iconfinder-shell{' +
'display:grid;' +
'grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);' +
'gap:1rem;' +
'align-items:start;' +
'}' +

'.eql-iconfinder-paste{' +
'min-height:160px;' +
'display:flex;' +
'flex-direction:column;' +
'align-items:center;' +
'justify-content:center;' +
'gap:.45rem;' +
'padding:1rem;' +
'background:#080d13;' +
'border:2px dashed rgba(216,183,92,.45);' +
'border-radius:8px;' +
'color:#dfe7ef;' +
'text-align:center;' +
'cursor:paste;' +
'outline:none;' +
'}' +

'.eql-iconfinder-paste:focus{' +
'border-color:#d8b75c;' +
'box-shadow:0 0 0 2px rgba(216,183,92,.13);' +
'}' +

'.eql-iconfinder-instruction{' +
'color:#fff0b5;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-subinstruction{' +
'color:#9faaba;' +
'font-size:.88rem;' +
'line-height:1.35;' +
'}' +

'.eql-iconfinder-preview{' +
'display:none;' +
'width:72px;' +
'height:72px;' +
'object-fit:contain;' +
'image-rendering:auto;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.14);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-preview.is-visible{display:block;}' +

'.eql-iconfinder-status{' +
'margin-top:.65rem;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'line-height:1.4;' +
'}' +

'.eql-iconfinder-results-title{' +
'margin:0 0 .55rem;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-results-empty{' +
'padding:.9rem;' +
'background:rgba(255,255,255,.025);' +
'border:1px solid rgba(255,255,255,.08);' +
'border-radius:7px;' +
'color:#96a2b2;' +
'font-size:.9rem;' +
'}' +

'.eql-iconfinder-results-grid{' +
'display:grid;' +
'grid-template-columns:repeat(auto-fill,minmax(185px,1fr));' +
'gap:.65rem;' +
'}' +

'.eql-iconfinder-result{' +
'display:grid;' +
'grid-template-columns:54px minmax(0,1fr);' +
'gap:.65rem;' +
'align-items:center;' +
'padding:.65rem;' +
'background:rgba(255,255,255,.03);' +
'border:1px solid rgba(255,255,255,.09);' +
'border-radius:7px;' +
'}' +

'.eql-iconfinder-result img{' +
'width:52px;' +
'height:52px;' +
'object-fit:contain;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.1);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-result-name{' +
'display:block;' +
'margin-bottom:.18rem;' +
'color:#b9c8ff;' +
'font-size:.86rem;' +
'line-height:1.2;' +
'word-break:break-word;' +
'}' +

'.eql-iconfinder-result-score{' +
'display:block;' +
'margin-bottom:.28rem;' +
'color:#d8b75c;' +
'font-size:.8rem;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-result-meta{' +
'display:block;' +
'color:#8f9bac;' +
'font-size:.76rem;' +
'line-height:1.25;' +
'}' +

'.eql-iconfinder-result-id{' +
'display:block;' +
'margin:.2rem 0 .35rem;' +
'color:#fff0b5;' +
'font-size:1.05rem;' +
'font-weight:800;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-copy-row{' +
'display:flex;' +
'flex-wrap:wrap;' +
'gap:.3rem;' +
'margin-top:.38rem;' +
'}' +

'.eql-iconfinder-copy{' +
'min-height:1.8rem!important;' +
'padding:.15rem .45rem!important;' +
'font-size:.72rem!important;' +
'}' +

'.eql-iconfinder-note{' +
'margin-top:.7rem;' +
'color:#7f8b9b;' +
'font-size:.78rem;' +
'line-height:1.35;' +
'}' +

'@media(max-width:850px){' +
'.eql-iconfinder-shell{grid-template-columns:1fr;}' +
'}'
} ).appendTo( document.head );
}

function openDb() {
return new Promise( function ( resolve, reject ) {
var request;

if ( !window.indexedDB ) {
reject( new Error( 'IndexedDB unavailable.' ) );
return;
}

request = indexedDB.open( DB_NAME, DB_VERSION );

request.onupgradeneeded = function () {
var db = request.result;

if ( !db.objectStoreNames.contains( STORE_NAME ) ) {
db.createObjectStore( STORE_NAME, {
keyPath: 'key'
} );
}
};

request.onsuccess = function () {
resolve( request.result );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB open failed.' ) );
};
} );
}

function idbGet( key ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readonly' );
var store = tx.objectStore( STORE_NAME );
var request = store.get( key );

request.onsuccess = function () {
resolve( request.result || null );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB read failed.' ) );
};

tx.oncomplete = function () {
db.close();
};
} );
} );
}

function idbPutAndPrune( value ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readwrite' );
var store = tx.objectStore( STORE_NAME );
var cursorRequest;

store.put( value );

cursorRequest = store.openCursor();

cursorRequest.onsuccess = function () {
var cursor = cursorRequest.result;

if ( !cursor ) {
return;
}

if ( cursor.key !== value.key ) {
cursor.delete();
}

cursor.continue();
};

tx.oncomplete = function () {
db.close();
resolve();
};

tx.onerror = function () {
db.close();
reject( tx.error || new Error( 'IndexedDB write failed.' ) );
};
} );
} );
}

function normalizeFileTitle( title ) {
title = String( title || '' ).trim();

if ( !title ) {
return '';
}

return /^File:/i.test( title )
? title
: 'File:' + title;
}

function fetchCatalog( api ) {
return api.get( {
action: 'parse',
page: ICON_LIST_PAGE,
prop: 'images|revid',
formatversion: 2
} ).then( function ( data ) {
var parse = data && data.parse ? data.parse : {};
var titles = Array.isArray( parse.images ) ? parse.images : [];

titles = titles
.map( normalizeFileTitle )
.filter( Boolean )
.filter( function ( title, index, list ) {
return list.indexOf( title ) === index;
} );

return {
revid: Number( parse.revid ) || 0,
titles: titles
};
} );
}

function chunk( list, size ) {
var out = [];
var i;

for ( i = 0; i < list.length; i += size ) {
out.push( list.slice( i, i + size ) );
}

return out;
}

function fetchImageInfo( api, titles, setStatus ) {
var batches = chunk( titles, IMAGEINFO_BATCH );
var records = [];
var chain = Promise.resolve();

batches.forEach( function ( batch, batchIndex ) {
chain = chain.then( function () {
if ( setStatus ) {
setStatus(
'Reading uploaded icon files… ' +
Math.min( batchIndex * IMAGEINFO_BATCH, titles.length ) +
' / ' + titles.length
);
}

return api.get( {
action: 'query',
prop: 'imageinfo',
titles: batch.join( '|' ),
iiprop: 'url|size|sha1',
formatversion: 2
} ).then( function ( data ) {
var pages =
data &&
data.query &&
Array.isArray( data.query.pages )
? data.query.pages
: [];

pages.forEach( function ( page ) {
var info =
page &&
Array.isArray( page.imageinfo ) &&
page.imageinfo.length
? page.imageinfo[ 0 ]
: null;

if ( !info || !info.url ) {
return;
}

records.push( {
title: normalizeFileTitle( page.title ),
url: String( info.url ),
sha1: String( info.sha1 || '' ),
width: Number( info.width ) || 0,
height: Number( info.height ) || 0
} );
} );
} );
} );
} );

return chain.then( function () {
return records;
} );
}

function blobToDrawable( blob ) {
if ( window.createImageBitmap ) {
return createImageBitmap( blob );
}

return new Promise( function ( resolve, reject ) {
var url = URL.createObjectURL( blob );
var img = new Image();

img.onload = function () {
URL.revokeObjectURL( url );
resolve( img );
};

img.onerror = function () {
URL.revokeObjectURL( url );
reject( new Error( 'Image decode failed.' ) );
};

img.src = url;
} );
}

function fetchDrawable( url ) {
return fetch( url, {
credentials: 'same-origin',
cache: 'force-cache'
} )
.then( function ( response ) {
if ( !response.ok ) {
throw new Error( 'HTTP ' + response.status );
}

return response.blob();
} )
.then( blobToDrawable );
}

function closeDrawable( drawable ) {
if ( drawable && typeof drawable.close === 'function' ) {
drawable.close();
}
}

function drawScaled( drawable, width, height, cropFraction ) {
var sourceCanvas = document.createElement( 'canvas' );
var sourceWidth =
Number( drawable.width || drawable.naturalWidth ) || 1;
var sourceHeight =
Number( drawable.height || drawable.naturalHeight ) || 1;
var sourceCtx;
var sourceImage;
var sourceData;
var pixelCount = sourceWidth * sourceHeight;
var transparentCount = 0;
var mask = new Uint8Array( pixelCount );
var foregroundCount = 0;
var borderR = [];
var borderG = [];
var borderB = [];
var bgR = 0;
var bgG = 0;
var bgB = 0;
var bgLuma = 0;
var borderSpread = [];
var tolerance;
var darkCutoff;
var minX = sourceWidth;
var minY = sourceHeight;
var maxX = -1;
var maxY = -1;
var cleanCanvas;
var cleanCtx;
var cleanImage;
var targetCanvas;
var targetCtx;
var usableWidth;
var usableHeight;
var scale;
var drawWidth;
var drawHeight;
var drawX;
var drawY;
var i;
var p;
var x;
var y;
var r;
var g;
var b;
var a;
var luma;
var chroma;
var maxChannel;
var minChannel;
var colorDistance;

function median( values ) {
var sorted;

if ( !values.length ) {
return 0;
}

sorted = values.slice().sort(
function ( left, right ) {
return left - right;
}
);

return sorted[
Math.floor( sorted.length / 2 )
];
}

function addBorderPixel( px, py ) {
var index =
( py * sourceWidth + px ) * 4;

if ( sourceData[ index + 3 ] < 16 ) {
return;
}

borderR.push( sourceData[ index ] );
borderG.push( sourceData[ index + 1 ] );
borderB.push( sourceData[ index + 2 ] );
}

sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;

sourceCtx = sourceCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

/*
* Preserve real PNG transparency.
*/
sourceCtx.clearRect(
0,
0,
sourceWidth,
sourceHeight
);

sourceCtx.drawImage(
drawable,
0,
0
);

sourceImage = sourceCtx.getImageData(
0,
0,
sourceWidth,
sourceHeight
);

sourceData = sourceImage.data;

for ( i = 0; i < pixelCount; i++ ) {
if ( sourceData[ i * 4 + 3 ] < 245 ) {
transparentCount++;
}
}

if (
transparentCount >
Math.max( 4, pixelCount * 0.01 )
) {
/*
* Uploaded transparent PNG:
* alpha is already an excellent mask.
*/
for ( i = 0; i < pixelCount; i++ ) {
if (
sourceData[ i * 4 + 3 ] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
} else {
/*
* Pasted screenshot:
*
* Infer the UI background from a two-pixel
* border around the capture.
*/
for (
x = 0;
x < sourceWidth;
x++
) {
for (
y = 0;
y < Math.min(
2,
sourceHeight
);
y++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
x,
sourceHeight - 1 - y
);
}
}

for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < Math.min(
2,
sourceWidth
);
x++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
sourceWidth - 1 - x,
y
);
}
}

bgR = median( borderR );
bgG = median( borderG );
bgB = median( borderB );

bgLuma = luminance(
bgR,
bgG,
bgB
);

for (
i = 0;
i < borderR.length;
i++
) {
borderSpread.push(
Math.sqrt(
Math.pow(
borderR[ i ] - bgR,
2
) +
Math.pow(
borderG[ i ] - bgG,
2
) +
Math.pow(
borderB[ i ] - bgB,
2
)
)
);
}

/*
* The old crop variants blindly trimmed the
* image square.
*
* Now they instead make background removal
* slightly more aggressive.
*/
tolerance = Math.max(
20,
Math.min(
74,
18 +
median(
borderSpread
) * 2.5 +
cropFraction * 80
)
);

darkCutoff = Math.max(
36,
Math.min(
88,
bgLuma +
22 +
cropFraction * 100
)
);

for (
i = 0;
i < pixelCount;
i++
) {
p = i * 4;

r = sourceData[ p ];
g = sourceData[ p + 1 ];
b = sourceData[ p + 2 ];
a = sourceData[ p + 3 ];

if ( a < 16 ) {
continue;
}

maxChannel = Math.max(
r,
g,
b
);

minChannel = Math.min(
r,
g,
b
);

chroma =
maxChannel -
minChannel;

luma = luminance(
r,
g,
b
);

colorDistance =
Math.sqrt(
Math.pow(
r - bgR,
2
) +
Math.pow(
g - bgG,
2
) +
Math.pow(
b - bgB,
2
)
);

/*
* EQ's editor/game icon background is
* normally very dark.
*
* Discard dark neutral pixels, but allow
* strongly colored pixels to survive at
* lower brightness.
*/
if ( bgLuma < 95 ) {
if (
(
luma >=
darkCutoff &&
colorDistance >=
tolerance *
0.65
) ||
(
chroma >= 24 &&
luma >=
bgLuma +
7 +
cropFraction *
30 &&
colorDistance >=
tolerance *
0.55
)
) {
mask[ i ] = 1;
foregroundCount++;
}
} else if (
colorDistance >=
tolerance
) {
mask[ i ] = 1;
foregroundCount++;
}
}

/*
* Fail soft for an unusual image instead of
* producing an empty fingerprint.
*/
if (
foregroundCount < 6 ||
foregroundCount >
pixelCount * 0.90
) {
mask.fill( 0 );
foregroundCount = 0;

for (
i = 0;
i < pixelCount;
i++
) {
if (
sourceData[
i * 4 + 3
] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
}
}

/*
* Find the actual sprite bounds.
*/
for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < sourceWidth;
x++
) {
i =
y * sourceWidth +
x;

if ( !mask[ i ] ) {
continue;
}

minX = Math.min(
minX,
x
);

minY = Math.min(
minY,
y
);

maxX = Math.max(
maxX,
x
);

maxY = Math.max(
maxY,
y
);
}
}

if (
maxX < minX ||
maxY < minY
) {
minX = 0;
minY = 0;
maxX = sourceWidth - 1;
maxY = sourceHeight - 1;
}

/*
* Create a transparent copy containing only
* detected foreground pixels.
*/
cleanCanvas =
document.createElement(
'canvas'
);

cleanCanvas.width =
sourceWidth;

cleanCanvas.height =
sourceHeight;

cleanCtx =
cleanCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

cleanImage =
cleanCtx.createImageData(
sourceWidth,
sourceHeight
);

for (
i = 0;
i < pixelCount;
i++
) {
if ( !mask[ i ] ) {
continue;
}

p = i * 4;

cleanImage.data[ p ] =
sourceData[ p ];

cleanImage.data[ p + 1 ] =
sourceData[ p + 1 ];

cleanImage.data[ p + 2 ] =
sourceData[ p + 2 ];

cleanImage.data[ p + 3 ] =
255;
}

cleanCtx.putImageData(
cleanImage,
0,
0
);

/*
* Normalize the detected sprite to the requested
* comparison size.
*/
targetCanvas =
document.createElement(
'canvas'
);

targetCanvas.width = width;
targetCanvas.height = height;

targetCtx =
targetCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

targetCtx.fillStyle = '#000';

targetCtx.fillRect(
0,
0,
width,
height
);

targetCtx.imageSmoothingEnabled =
true;

if (
'imageSmoothingQuality' in
targetCtx
) {
targetCtx.imageSmoothingQuality =
'high';
}

usableWidth =
Math.max(
1,
width - 2
);

usableHeight =
Math.max(
1,
height - 2
);

scale = Math.min(
usableWidth /
Math.max(
1,
maxX - minX + 1
),
usableHeight /
Math.max(
1,
maxY - minY + 1
)
);

drawWidth = Math.max(
1,
Math.round(
(
maxX -
minX +
1
) * scale
)
);

drawHeight = Math.max(
1,
Math.round(
(
maxY -
minY +
1
) * scale
)
);

drawX = Math.floor(
(
width -
drawWidth
) / 2
);

drawY = Math.floor(
(
height -
drawHeight
) / 2
);

targetCtx.drawImage(
cleanCanvas,
minX,
minY,
maxX - minX + 1,
maxY - minY + 1,
drawX,
drawY,
drawWidth,
drawHeight
);

return targetCtx.getImageData(
0,
0,
width,
height
);
}
function luminance( r, g, b ) {
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function computeDHash( drawable, cropFraction ) {
var imageData = drawScaled( drawable, 9, 8, cropFraction );
var data = imageData.data;
var hi = 0;
var lo = 0;
var bit = 0;
var y;
var x;
var left;
var right;
var li;
var ri;

for ( y = 0; y < 8; y++ ) {
for ( x = 0; x < 8; x++ ) {
li = ( y * 9 + x ) * 4;
ri = ( y * 9 + x + 1 ) * 4;

left = luminance(
data[ li ],
data[ li + 1 ],
data[ li + 2 ]
);

right = luminance(
data[ ri ],
data[ ri + 1 ],
data[ ri + 2 ]
);

if ( left > right ) {
if ( bit < 32 ) {
lo = ( lo | ( 1 << bit ) ) >>> 0;
} else {
hi = ( hi | ( 1 << ( bit - 32 ) ) ) >>> 0;
}
}

bit++;
}
}

return {
hi: hi >>> 0,
lo: lo >>> 0
};
}

function computeColorGrid( drawable, cropFraction ) {
var imageData = drawScaled(
drawable,
COLOR_GRID,
COLOR_GRID,
cropFraction
);
var data = imageData.data;
var out = new Uint8Array( COLOR_GRID * COLOR_GRID * 3 );
var source = 0;
var target = 0;

while ( source < data.length ) {
out[ target++ ] = data[ source ];
out[ target++ ] = data[ source + 1 ];
out[ target++ ] = data[ source + 2 ];
source += 4;
}

return out;
}

function fingerprintDrawable( drawable, cropFraction ) {
var hash = computeDHash( drawable, cropFraction );

return {
hashHi: hash.hi,
hashLo: hash.lo,
rgb: computeColorGrid( drawable, cropFraction )
};
}

function popcount32( value ) {
value = value >>> 0;
value = value - ( ( value >>> 1 ) & 0x55555555 );
value = ( value & 0x33333333 ) + ( ( value >>> 2 ) & 0x33333333 );
return (
(
(
value + ( value >>> 4 )
) & 0x0F0F0F0F
) * 0x01010101
) >>> 24;
}

function fingerprintDistance( a, b ) {
var hashBits =
popcount32(
(
a.hashHi ^
b.hashHi
) >>> 0
) +
popcount32(
(
a.hashLo ^
b.hashLo
) >>> 0
);

var hashDistance =
hashBits / 64;

var length = Math.min(
a.rgb.length,
b.rgb.length
);

var histogramA =
new Uint16Array( 64 );

var histogramB =
new Uint16Array( 64 );

var foregroundA = 0;
var foregroundB = 0;
var intersection = 0;
var union = 0;
var colorSum = 0;
var i;
var ar;
var ag;
var ab;
var br;
var bg;
var bb;
var aForeground;
var bForeground;
var dr;
var dg;
var db;
var binA;
var binB;
var shapeDistance;
var colorDistance;
var histogramDistance = 0;

for (
i = 0;
i + 2 < length;
i += 3
) {
ar = a.rgb[ i ];
ag = a.rgb[ i + 1 ];
ab = a.rgb[ i + 2 ];

br = b.rgb[ i ];
bg = b.rgb[ i + 1 ];
bb = b.rgb[ i + 2 ];

/*
* Background is normalized to black by
* drawScaled().
*/
aForeground =
Math.max(
ar,
ag,
ab
) > 8;

bForeground =
Math.max(
br,
bg,
bb
) > 8;

if ( aForeground ) {
foregroundA++;

binA =
(
Math.min(
3,
ar >> 6
) << 4
) |
(
Math.min(
3,
ag >> 6
) << 2
) |
Math.min(
3,
ab >> 6
);

histogramA[ binA ]++;
}

if ( bForeground ) {
foregroundB++;

binB =
(
Math.min(
3,
br >> 6
) << 4
) |
(
Math.min(
3,
bg >> 6
) << 2
) |
Math.min(
3,
bb >> 6
);

histogramB[ binB ]++;
}

if (
aForeground ||
bForeground
) {
union++;
}

if (
!aForeground ||
!bForeground
) {
continue;
}

intersection++;

dr = ar - br;
dg = ag - bg;
db = ab - bb;

colorSum +=
Math.sqrt(
dr * dr +
dg * dg +
db * db
) /
441.67295593;
}

shapeDistance =
union
? 1 -
intersection /
union
: 1;

colorDistance =
intersection
? colorSum /
intersection
: 1;

for (
i = 0;
i < 64;
i++
) {
histogramDistance +=
Math.abs(
histogramA[ i ] /
Math.max(
1,
foregroundA
) -
histogramB[ i ] /
Math.max(
1,
foregroundB
)
);
}

/*
* Normalized histogram L1 range is 0..2.
*/
histogramDistance =
Math.min(
1,
histogramDistance / 2
);

/*
* Foreground color is deliberately the largest
* contributor now.
*/
return Math.min(
1,
0.50 * colorDistance +
0.25 * shapeDistance +
0.15 * histogramDistance +
0.10 * hashDistance
);
}
function mapLimit( list, limit, worker ) {
var nextIndex = 0;
var workers = [];
var i;

function runWorker() {
var index;

if ( nextIndex >= list.length ) {
return Promise.resolve();
}

index = nextIndex++;
return Promise.resolve( worker( list[ index ], index ) )
.then( runWorker );
}

for ( i = 0; i < Math.min( limit, list.length ); i++ ) {
workers.push( runWorker() );
}

return Promise.all( workers );
}

function buildFingerprintIndex( records, setStatus ) {
var complete = 0;
var successful = [];
var grouped = Object.create( null );
var groups = [];

/*
* If several icon filenames are byte-identical, imageinfo gives them
* the same SHA-1. Fingerprint that image only once and fan the result
* back out to every filename. This can substantially reduce the first
* build's static-file traffic without changing the visible results.
*/
records.forEach( function ( record ) {
var key = record.sha1 || record.url;

if ( !grouped[ key ] ) {
grouped[ key ] = {
key: key,
representative: record,
records: []
};
groups.push( grouped[ key ] );
}

grouped[ key ].records.push( record );
} );

return mapLimit(
groups,
DOWNLOAD_CONCURRENCY,
function ( group ) {
return fetchDrawable( group.representative.url )
.then( function ( drawable ) {
var fp = fingerprintDrawable( drawable, 0 );

closeDrawable( drawable );

group.records.forEach( function ( record ) {
successful.push( {
title: record.title,
url: record.url,
sha1: record.sha1,
width: record.width,
height: record.height,
hashHi: fp.hashHi,
hashLo: fp.hashLo,
rgb: fp.rgb
} );
} );
} )
.catch( function () {
/*
* A missing/corrupt/non-raster file should not prevent
* the rest of the icon index from becoming usable.
*/
} )
.then( function () {
complete++;

if (
setStatus &&
(
complete === groups.length ||
complete % 25 === 0
)
) {
setStatus(
'Building pixel index… ' +
complete + ' / ' + groups.length +
' unique images (' +
records.length + ' filenames)'
);
}
} );
}
).then( function () {
return successful;
} );
}

function cacheKey( revid ) {
return [
'icon-list',
ALGO_VERSION,
revid
].join( ':' );
}

function decodeServerRgb( base64 ) {
var binary = window.atob( String( base64 || '' ) );
var bytes = new Uint8Array( binary.length );
var i;

for ( i = 0; i < binary.length; i++ ) {
bytes[ i ] = binary.charCodeAt( i ) & 0xFF;
}

return bytes;
}

function decodeServerRecords( records ) {
return ( Array.isArray( records ) ? records : [] )
.map( function ( record ) {
return {
title: String( record.title || '' ),
url: String( record.url || '' ),
sha1: String( record.sha1 || '' ),
width: Number( record.width ) || 0,
height: Number( record.height ) || 0,
hashHi: Number( record.hashHi ) >>> 0,
hashLo: Number( record.hashLo ) >>> 0,
rgb: decodeServerRgb( record.rgb )
};
} )
.filter( function ( record ) {
return (
record.title &&
record.url &&
record.rgb.length
);
} );
}

function fetchServerIconIndexMeta( api ) {
return window.fetch(
'/static/eql-icon-index/meta.json?ts=' + Date.now(),
{
credentials: 'same-origin',
cache: 'no-store'
}
).then( function ( response ) {
if ( !response.ok ) {
return null;
}

return response.json();
} ).catch( function () {
return null;
} );
}

function fetchServerIconIndex( api, generation ) {
return window.fetch(
'/static/eql-icon-index/index-' +
encodeURIComponent( String( generation || '' ) ) +
'.json',
{
credentials: 'same-origin',
cache: 'force-cache'
}
).then( function ( response ) {
if ( !response.ok ) {
return null;
}

return response.json();
} ).catch( function () {
return null;
} );
}
function serverCacheKey( generation ) {
return [
'server',
ALGO_VERSION,
String( generation || '' )
].join( ':' );
}
function getOrBuildIndex( api, setStatus ) {
if ( memoryIndex ) {
return Promise.resolve( memoryIndex );
}

setStatus( 'Checking server icon index…' );

/*
* Preferred path:
* 1. Ask for tiny server metadata.
* 2. Reuse IndexedDB if this immutable generation is already local.
* 3. Otherwise download the precomputed server fingerprints once.
*
* Any server-cache error falls through to the original fully
* client-side builder, preserving continuity.
*/
return fetchServerIconIndexMeta( api )
.catch( function () {
return null;
} )
.then( function ( meta ) {
var key;

if (
!meta ||
!meta.ready ||
Number( meta.algorithm ) !== ALGO_VERSION ||
!meta.generation
) {
return null;
}

key = serverCacheKey( meta.generation );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;

setStatus(
'Icon index ready: ' +
memoryIndex.length +
' icons (server generation cached locally).'
);

return memoryIndex;
}

setStatus(
'Downloading precomputed server icon index…'
);

return fetchServerIconIndex(
api,
String( meta.generation )
).then( function ( payload ) {
var records;

if (
!payload ||
!payload.ready ||
String( payload.generation || '' ) !==
String( meta.generation )
) {
return null;
}

records = decodeServerRecords(
payload.records
);

if ( !records.length ) {
return null;
}

memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' icons (server cache).'
);

return idbPutAndPrune( {
key: key,
generation: String( meta.generation ),
revid: Number( meta.iconListRevision ) || 0,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/* Browser storage is optional. */
} )
.then( function () {
return records;
} );
} );
} );
} )
.then( function ( serverRecords ) {
if ( serverRecords && serverRecords.length ) {
return serverRecords;
}

/*
* Backwards-compatible fallback. If the extension is disabled,
* the job queue has not run yet, GD is unavailable, or the
* server cache is stale, the working browser implementation
* behaves exactly as it did before.
*/
setStatus(
'Server icon index unavailable; checking browser cache…'
);

return fetchCatalog( api ).then( function ( catalog ) {
var key = cacheKey( catalog.revid );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;
setStatus(
'Icon index ready: ' +
memoryIndex.length +
' uploaded icons (cached locally).'
);
return memoryIndex;
}

return fetchImageInfo(
api,
catalog.titles,
setStatus
).then( function ( imageRecords ) {
setStatus(
'Found ' + imageRecords.length +
' uploaded icons. Building pixel index…'
);

return buildFingerprintIndex(
imageRecords,
setStatus
);
} ).then( function ( records ) {
memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' uploaded icons.'
);

return idbPutAndPrune( {
key: key,
revid: catalog.revid,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/* Browser storage is optional. */
} )
.then( function () {
return records;
} );
} );
} );
} );
} );
}
function fingerprintPastedImage( drawable ) {
/*
* Small centered crop variants make the matcher forgiving of a
* 1-2 pixel screen-capture border while still preferring an exact crop.
*/
return [
fingerprintDrawable( drawable, 0 ),
fingerprintDrawable( drawable, 0.035 ),
fingerprintDrawable( drawable, 0.07 )
];
}

function rankMatches( targetFingerprints, records ) {
var ranked = records.map( function ( record ) {
var candidate = {
hashHi: record.hashHi,
hashLo: record.hashLo,
rgb: record.rgb
};

var distance = Infinity;

targetFingerprints.forEach( function ( target ) {
distance = Math.min(
distance,
fingerprintDistance( target, candidate )
);
} );

return {
record: record,
distance: distance,
similarity: Math.max(
0,
Math.min( 100, ( 1 - distance ) * 100 )
)
};
} );

ranked.sort( function ( a, b ) {
return a.distance - b.distance;
} );

return ranked.slice( 0, RESULT_COUNT );
}

function cleanDisplayTitle( title ) {
return String( title || '' ).replace( /^File:/i, '' );
}

function iconMetadata( title ) {
var clean = cleanDisplayTitle( title );
var itemMatch = clean.match( /^Item\s+(\d+)\.png$/i );
var spellMatch = clean.match( /^Spellicon_([^.]*)\.png$/i );
var id = '';
var kind = 'Icon file';
var parameter = '';

if ( itemMatch ) {
id = itemMatch[ 1 ];
kind = 'Item icon';
parameter = '|lucy_img_ID = ' + id;
} else if ( spellMatch ) {
id = spellMatch[ 1 ];
kind = 'Spell icon';
parameter = '|spellicon = ' + id;
}

return {
kind: kind,
id: id,
filename: clean,
parameter: parameter,
rawWiki: '[[File:' + clean + ']]',
staticWiki: '[[File:' + clean + '|32x32px]]',
scaledWiki: '[[File:' + clean + '|frameless|upright=1.5]]'
};
}

function copyText( text, button ) {
var original = button.textContent;

function done() {
button.textContent = 'Copied';
window.setTimeout( function () {
button.textContent = original;
}, 1000 );
}

if (
navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function'
) {
navigator.clipboard.writeText( text )
.then( done )
.catch( function () {
window.prompt( 'Copy:', text );
} );
return;
}

window.prompt( 'Copy:', text );
}

function makeCopyButton( label, value ) {
var button = document.createElement( 'button' );

button.className = 'eql-iconfinder-copy';
button.type = 'button';
button.textContent = label;

button.addEventListener( 'click', function () {
copyText( value, button );
} );

return button;
}

function renderMatches( container, matches ) {
container.innerHTML = '';

var grid = document.createElement( 'div' );
grid.className = 'eql-iconfinder-results-grid';
container.appendChild( grid );

matches.forEach( function ( match ) {
var record = match.record;
var meta = iconMetadata( record.title );
var card = document.createElement( 'div' );
var img = document.createElement( 'img' );
var textWrap = document.createElement( 'div' );
var link = document.createElement( 'a' );
var score = document.createElement( 'span' );
var iconId = document.createElement( 'span' );
var metadata = document.createElement( 'span' );
var copyRow = document.createElement( 'div' );

card.className = 'eql-iconfinder-result';

img.src = record.url;
img.alt = meta.filename;
img.loading = 'lazy';

link.className = 'eql-iconfinder-result-name';
link.href = mw.util.getUrl( record.title );
link.target = '_blank';
link.rel = 'noopener';
link.textContent = meta.filename;

score.className = 'eql-iconfinder-result-score';
score.textContent =
'Match score ' + match.similarity.toFixed( 1 );

iconId.className = 'eql-iconfinder-result-id';
iconId.textContent = meta.id
? 'Icon ' + meta.id
: meta.filename;

metadata.className = 'eql-iconfinder-result-meta';
metadata.textContent = meta.kind;

copyRow.className = 'eql-iconfinder-copy-row';

if ( meta.id ) {
copyRow.appendChild(
makeCopyButton( 'Copy ID', meta.id )
);
}

if ( meta.parameter ) {
copyRow.appendChild(
makeCopyButton( 'Copy Parameter', meta.parameter )
);
}

copyRow.appendChild(
makeCopyButton( 'Raw Wikicode', meta.rawWiki )
);

copyRow.appendChild(
makeCopyButton( '32×32', meta.staticWiki )
);

copyRow.appendChild(
makeCopyButton( 'Scaled', meta.scaledWiki )
);

textWrap.appendChild( link );
textWrap.appendChild( iconId );
textWrap.appendChild( score );
textWrap.appendChild( metadata );
textWrap.appendChild( copyRow );

card.appendChild( img );
card.appendChild( textWrap );
grid.appendChild( card );
} );

var note = document.createElement( 'div' );
note.className = 'eql-iconfinder-note';
note.textContent =
'The tool only identifies likely matches and copies values/wikicode to the clipboard; it never changes the editor. ' +
'For the best result, capture only the square icon with as little surrounding UI as possible.';
container.appendChild( note );
}

function imageFromClipboardEvent( event ) {
var clipboard = event.clipboardData;
var items;
var i;

if ( !clipboard || !clipboard.items ) {
return null;
}

items = clipboard.items;

for ( i = 0; i < items.length; i++ ) {
if (
items[ i ].kind === 'file' &&
/^image\//i.test( items[ i ].type )
) {
return items[ i ].getAsFile();
}
}

return null;
}

function setPreview( img, blob ) {
if ( currentPreviewUrl ) {
URL.revokeObjectURL( currentPreviewUrl );
}

currentPreviewUrl = URL.createObjectURL( blob );
img.src = currentPreviewUrl;
img.classList.add( 'is-visible' );
}

function processBlob( blob, preview, status, results, api ) {
var setStatus = function ( text ) {
status.textContent = text;
};

setPreview( preview, blob );
results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Analyzing pasted icon…' +
'</div>';

return blobToDrawable( blob )
.then( function ( drawable ) {
var targets = fingerprintPastedImage( drawable );
closeDrawable( drawable );

return getOrBuildIndex( api, setStatus )
.then( function ( index ) {
var matches;

if ( !index.length ) {
throw new Error( 'No uploaded icons were found.' );
}

setStatus(
'Comparing against ' +
index.length +
' uploaded icons…'
);

/*
* Yield once so the status message can paint before
* ranking several thousand in-memory fingerprints.
*/
return new Promise( function ( resolve ) {
window.setTimeout( function () {
matches = rankMatches( targets, index );
resolve( matches );
}, 0 );
} );
} );
} )
.then( function ( matches ) {
renderMatches( results, matches );

setStatus(
'Done. Showing the ' +
matches.length +
' closest matches.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'The icon could not be matched.' +
'</div>';

setStatus(
'Icon Finder error: ' +
( error && error.message ? error.message : 'Unknown error' )
);
} );
}

function buildUi( host ) {
var api = new mw.Api();

host.innerHTML = '';

var shell = document.createElement( 'div' );
shell.className = 'eql-iconfinder-shell';

var left = document.createElement( 'div' );
var paste = document.createElement( 'div' );
var instruction = document.createElement( 'div' );
var subinstruction = document.createElement( 'div' );
var preview = document.createElement( 'img' );
var status = document.createElement( 'div' );

paste.className = 'eql-iconfinder-paste';
paste.tabIndex = 0;
paste.setAttribute( 'role', 'button' );
paste.setAttribute(
'aria-label',
'Paste a screen capture of an EverQuest icon'
);

instruction.className = 'eql-iconfinder-instruction';
instruction.textContent =
'Screen capture and paste JUST the Icon';

subinstruction.className = 'eql-iconfinder-subinstruction';
subinstruction.textContent =
'Click this box, then press Ctrl+V. You can also drag an image here.';

preview.className = 'eql-iconfinder-preview';
preview.alt = 'Pasted icon preview';

status.className = 'eql-iconfinder-status';
status.setAttribute( 'aria-live', 'polite' );
status.textContent =
'Nothing is loaded from Icon List until you paste an image.';

paste.appendChild( instruction );
paste.appendChild( subinstruction );
paste.appendChild( preview );

left.appendChild( paste );
left.appendChild( status );

var right = document.createElement( 'div' );
var resultsTitle = document.createElement( 'div' );
var results = document.createElement( 'div' );

resultsTitle.className = 'eql-iconfinder-results-title';
resultsTitle.textContent = 'Possible Matches';

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Paste an icon to search the uploaded images on Icon List.' +
'</div>';

right.appendChild( resultsTitle );
right.appendChild( results );

shell.appendChild( left );
shell.appendChild( right );
host.appendChild( shell );

paste.addEventListener( 'click', function () {
paste.focus();
} );

paste.addEventListener( 'paste', function ( event ) {
var file = imageFromClipboardEvent( event );

if ( !file ) {
status.textContent =
'Clipboard does not contain an image. Screen capture the icon, then paste again.';
return;
}

event.preventDefault();

processBlob(
file,
preview,
status,
results,
api
);
} );

paste.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
} );

paste.addEventListener( 'drop', function ( event ) {
var files;

event.preventDefault();
files = event.dataTransfer && event.dataTransfer.files;

if (
!files ||
!files.length ||
!/^image\//i.test( files[ 0 ].type )
) {
status.textContent = 'Drop an image file here.';
return;
}

processBlob(
files[ 0 ],
preview,
status,
results,
api
);
} );

/*
* Focus the paste target immediately when the panel first opens so
* the normal workflow is: click Icon Finder -> Ctrl+V.
*/
window.setTimeout( function () {
paste.focus();
}, 0 );
}

window.EQLIconFinder = {
init: function ( host ) {
if ( !host ) {
return Promise.reject(
new Error( 'Icon Finder host element is missing.' )
);
}

addStyles();

if ( initializedHost !== host ) {
buildUi( host );
initializedHost = host;
} else {
var paste = host.querySelector( '.eql-iconfinder-paste' );

if ( paste ) {
window.setTimeout( function () {
paste.focus();
}, 0 );
}
}

return Promise.resolve();
}
};

}( mediaWiki, jQuery ) );

MediaWiki:BlueprintLoader.js

2026-08-10T06:28:54Z

Maintenance script: Refresh Icon Finder server-cache client

/**
* EQL Wiki - Editor Tools / Dynamic Blueprint Loader
*
* Source-editor behavior:
* - On a new, truly empty page: show the Help:Contents Blueprint selector.
* - On every source edit page: show the Icon Finder button.
* - Heavy Icon Finder logic is lazy-loaded only when opened.
*/
( function ( mw, $ ) {
'use strict';

var BLUEPRINT_PAGE = 'Help:Contents';
var TOOLS_ID = 'eql-editor-tools';
var ICON_FINDER_PAGE = 'MediaWiki:IconFinder.js';

function htmlToText( html ) {
var div = document.createElement( 'div' );
div.innerHTML = String( html || '' );
return ( div.textContent || div.innerText || '' ).trim();
}

function makeLabel( heading ) {
return heading
.replace( /\s+Blueprints?\s*$/i, '' )
.trim() + ' Blueprint';
}

function getEditorContents( $textarea ) {
try {
return String( $textarea.textSelection( 'getContents' ) || '' );
} catch ( e ) {
return String( $textarea.val() || '' );
}
}

function setEditorContents( $textarea, text ) {
try {
$textarea.textSelection( 'setContents', text );
} catch ( e ) {
$textarea.val( text );
}

$textarea.trigger( 'input' );
$textarea.trigger( 'change' );
$textarea.trigger( 'focus' );
}

function extractBlueprint( sectionText ) {
var match;
var blueprint;

sectionText = String( sectionText || '' );

match = sectionText.match(
/<pre(?:\s[^>]*)?>([\s\S]*?)<\/pre>/i
);

if ( !match ) {
return null;
}

blueprint = match[ 1 ];

blueprint = blueprint.replace(
/^\s*<nowiki>([\s\S]*?)<\/nowiki>\s*$/i,
'$1'
);

blueprint = blueprint
.replace( /^\s*\n/, '' )
.replace( /\s+$/, '' );

return blueprint + '\n';
}

function fetchBlueprintSections( api ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'tocdata',
formatversion: 2
} ).then( function ( data ) {
var tocdata =
data &&
data.parse &&
data.parse.tocdata;

var sections =
tocdata &&
Array.isArray( tocdata.sections )
? tocdata.sections
: [];

if ( sections.length ) {
return sections;
}

return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'sections',
formatversion: 2
} ).then( function ( fallbackData ) {
return (
fallbackData &&
fallbackData.parse &&
Array.isArray( fallbackData.parse.sections )
)
? fallbackData.parse.sections
: [];
} );
} );
}

function normalizeBlueprintSections( sections ) {
return sections
.map( function ( section ) {
var heading = htmlToText( section.line || '' );

return {
heading: heading,
label: makeLabel( heading ),
index: String( section.index || '' ),
anchor:
section.linkAnchor ||
section.anchor ||
''
};
} )
.filter( function ( section ) {
return (
section.index &&
/\bBlueprints?\s*$/i.test( section.heading )
);
} );
}

function fetchBlueprintWikitext( api, sectionIndex ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'wikitext',
section: sectionIndex,
formatversion: 2
} ).then( function ( data ) {
var wikitext =
data &&
data.parse
? data.parse.wikitext
: '';

if (
wikitext &&
typeof wikitext === 'object' &&
Object.prototype.hasOwnProperty.call( wikitext, '*' )
) {
wikitext = wikitext[ '*' ];
}

return String( wikitext || '' );
} );
}

function addStyles() {
if ( document.getElementById( 'eql-editor-tools-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-editor-tools-styles',
text:
'#' + TOOLS_ID + '{' +
'box-sizing:border-box;' +
'margin:0 0 1rem 0;' +
'padding:1rem 1.1rem;' +
'background:linear-gradient(180deg,rgba(16,21,29,.97),rgba(9,13,19,.98));' +
'border:1px solid rgba(216,183,92,.38);' +
'border-left:5px solid rgba(216,183,92,.82);' +
'border-radius:8px;' +
'box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);' +
'}' +

'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'display:grid;' +
'grid-template-columns:minmax(0,1fr) auto;' +
'gap:1rem;' +
'align-items:end;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-title,' +
'#' + TOOLS_ID + ' .eql-iconfinder-title{' +
'margin:0 0 .35rem 0;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'letter-spacing:.035em;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-description{' +
'margin:0 0 .7rem 0;' +
'color:#aeb8c7;' +
'font-size:.9rem;' +
'line-height:1.35;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-controls{' +
'display:flex;' +
'flex-wrap:wrap;' +
'align-items:center;' +
'gap:.65rem;' +
'}' +

'#' + TOOLS_ID + ' select{' +
'box-sizing:border-box;' +
'min-width:260px;' +
'max-width:100%;' +
'min-height:2.35rem;' +
'padding:.35rem .55rem;' +
'background:#0b1017;' +
'border:1px solid rgba(216,183,92,.36);' +
'border-radius:5px;' +
'color:#e2e2cf;' +
'}' +

'#' + TOOLS_ID + ' button{' +
'min-height:2.35rem;' +
'padding:.35rem .85rem;' +
'background:linear-gradient(180deg,#806d32,#594817);' +
'border:1px solid #b69c4b;' +
'border-radius:5px;' +
'color:#fff5cc;' +
'font-weight:700;' +
'cursor:pointer;' +
'}' +

'#' + TOOLS_ID + ' button:hover:not(:disabled){' +
'filter:brightness(1.08);' +
'}' +

'#' + TOOLS_ID + ' button:disabled{' +
'cursor:default;' +
'opacity:.55;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-source{' +
'color:#b9c8ff;' +
'font-size:.9rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-status{' +
'display:block;' +
'margin-top:.55rem;' +
'min-height:1.2em;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'display:flex;' +
'flex-direction:column;' +
'align-items:stretch;' +
'justify-content:flex-end;' +
'min-width:150px;' +
'}' +

'#eql-icon-finder-toggle{' +
'white-space:nowrap;' +
'}' +

'#eql-icon-finder-host{' +
'margin-top:1rem;' +
'padding-top:1rem;' +
'border-top:1px solid rgba(216,183,92,.22);' +
'}' +

'#eql-icon-finder-host[hidden]{display:none!important;}' +

'@media(max-width:760px){' +
'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'grid-template-columns:1fr;' +
'}' +
'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'min-width:0;' +
'}' +
'#' + TOOLS_ID + ' select{' +
'width:100%;' +
'min-width:0;' +
'}' +
'}'
} ).appendTo( document.head );
}

function loadIconFinderScript() {
if ( window.EQLIconFinder ) {
return Promise.resolve( window.EQLIconFinder );
}

if ( window.eqlIconFinderLoadingPromise ) {
return window.eqlIconFinderLoadingPromise;
}

window.eqlIconFinderLoadingPromise = new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );

script.src = mw.util.getUrl( ICON_FINDER_PAGE, {
action: 'raw',
ctype: 'text/javascript',
v: '8'
} );

script.async = true;

script.onload = function () {
if ( window.EQLIconFinder ) {
resolve( window.EQLIconFinder );
} else {
reject( new Error( 'IconFinder.js loaded without exposing EQLIconFinder.' ) );
}
};

script.onerror = function () {
reject( new Error( 'Could not load IconFinder.js.' ) );
};

document.head.appendChild( script );
} );

return window.eqlIconFinderLoadingPromise;
}

function buildIconFinderLaunch( $row, $tools ) {
var $launch = $( '<div>', {
class: 'eql-iconfinder-launch'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-iconfinder-title',
text: 'ICON FINDER'
} ).appendTo( $launch );

var $button = $( '<button>', {
id: 'eql-icon-finder-toggle',
type: 'button',
text: 'Icon Finder',
'aria-expanded': 'false'
} ).appendTo( $launch );

var $host = $( '<div>', {
id: 'eql-icon-finder-host',
hidden: true
} ).appendTo( $tools );

$button.on( 'click', function () {
var opening = $host.prop( 'hidden' );

if ( !opening ) {
$host.prop( 'hidden', true );
$button.attr( 'aria-expanded', 'false' );
return;
}

$button.prop( 'disabled', true );
$button.text( 'Loading…' );

loadIconFinderScript()
.then( function ( finder ) {
return finder.init( $host[ 0 ] );
} )
.then( function () {
$host.prop( 'hidden', false );
$button.attr( 'aria-expanded', 'true' );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

$host
.prop( 'hidden', false )
.text( 'Icon Finder could not be loaded.' );

$button.attr( 'aria-expanded', 'true' );
} )
.then( function () {
$button.prop( 'disabled', false );
$button.text( 'Icon Finder' );
} );
} );
}

function buildBlueprintArea( $row, $textarea, api ) {
var $area = $( '<div>', {
class: 'eql-blueprint-area'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-blueprint-title',
text: 'CREATE FROM A BLUEPRINT'
} ).appendTo( $area );

$( '<div>', {
class: 'eql-blueprint-description',
text:
'Load a standard page skeleton from Help:Contents, ' +
'or continue editing the current source below.'
} ).appendTo( $area );

var $controls = $( '<div>', {
class: 'eql-blueprint-controls'
} ).appendTo( $area );

var $select = $( '<select>', {
'aria-label': 'Select page blueprint',
disabled: true
} ).appendTo( $controls );

$( '<option>', {
value: '',
text: 'Loading blueprints...'
} ).appendTo( $select );

var $button = $( '<button>', {
type: 'button',
text: 'Load Blueprint',
disabled: true
} ).appendTo( $controls );

var $sourceLink = $( '<a>', {
class: 'eql-blueprint-source',
href: mw.util.getUrl( BLUEPRINT_PAGE ),
text: 'View Blueprints',
target: '_blank',
rel: 'noopener'
} ).appendTo( $controls );

var $status = $( '<span>', {
class: 'eql-blueprint-status',
'aria-live': 'polite'
} ).appendTo( $area );

fetchBlueprintSections( api )
.then( function ( sections ) {
var blueprints = normalizeBlueprintSections( sections );

$select.empty();

$( '<option>', {
value: '',
text: blueprints.length ?
'Select a blueprint...' :
'No blueprints found'
} ).appendTo( $select );

blueprints.forEach( function ( blueprint ) {
$( '<option>', {
value: blueprint.index,
text: blueprint.label
} )
.attr( 'data-anchor', blueprint.anchor )
.appendTo( $select );
} );

$select.prop( 'disabled', !blueprints.length );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$select.empty().append(
$( '<option>', {
value: '',
text: 'Could not load blueprints'
} )
);

$status.text(
'Could not read Blueprint headings from Help:Contents.'
);
} );

$select.on( 'change', function () {
var $option = $select.find( 'option:selected' );
var anchor = $option.attr( 'data-anchor' ) || '';

$button.prop( 'disabled', !$select.val() );

if ( anchor ) {
$sourceLink.attr(
'href',
mw.util.getUrl( BLUEPRINT_PAGE ) + '#' + anchor
);
$sourceLink.text( 'View This Blueprint' );
} else {
$sourceLink.attr( 'href', mw.util.getUrl( BLUEPRINT_PAGE ) );
$sourceLink.text( 'View Blueprints' );
}

$status.text( '' );
} );

$button.on( 'click', function () {
var sectionIndex = $select.val();
var existing;

if ( !sectionIndex ) {
return;
}

existing = getEditorContents( $textarea );

if (
existing.trim() &&
!window.confirm(
'The editor already contains text. Replace it with the selected blueprint?'
)
) {
return;
}

$button.prop( 'disabled', true );
$select.prop( 'disabled', true );
$status.text( 'Loading current blueprint from Help:Contents...' );

fetchBlueprintWikitext( api, sectionIndex )
.then( function ( sectionText ) {
var blueprint = extractBlueprint( sectionText );

if ( blueprint === null ) {
throw new Error( 'No <pre> block found.' );
}

setEditorContents( $textarea, blueprint );

$status.text(
'Blueprint loaded. Edit the fields below, then publish normally.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$status.text(
'Could not load this blueprint. Check Help:Contents and make sure the section contains a <pre> block.'
);
} )
.then( function () {
$select.prop( 'disabled', false );
$button.prop( 'disabled', !$select.val() );
} );
} );
}

function init() {
var action = mw.config.get( 'wgAction' );
var $textarea;
var $tools;
var $row;
var $editorHost;
var api;

if ( [ 'edit', 'submit' ].indexOf( action ) === -1 ) {
return;
}

$textarea = $( '#wpTextbox1' );

if ( !$textarea.length ) {
return;
}

if ( document.getElementById( TOOLS_ID ) ) {
return;
}

api = new mw.Api();

addStyles();

$tools = $( '<div>', {
id: TOOLS_ID
} );

$row = $( '<div>', {
class: 'eql-editor-tools-row'
} ).appendTo( $tools );

buildBlueprintArea( $row, $textarea, api );

buildIconFinderLaunch( $row, $tools );

$editorHost = $textarea.closest( '.wikiEditor-ui' );

if ( !$editorHost.length ) {
$editorHost = $textarea;
}

$tools.insertBefore( $editorHost );
}

mw.loader.using( [
'mediawiki.api',
'mediawiki.util',
'jquery.textSelection'
] ).then( function () {
$( init );
} );

}( mediaWiki, jQuery ) );

MediaWiki:IconFinder.js

2026-08-10T06:28:54Z

Maintenance script: Use EQLIconIndex server cache with browser fallback

/**
* EQL Wiki - Icon Finder
*
* Lazy-loaded from MediaWiki:BlueprintLoader.js.
*
* Matching workflow:
* 1. User pastes a screen capture containing JUST the icon.
* 2. Read the current image list from [[Icon List]].
* 3. Resolve only existing uploaded files through imageinfo.
* 4. Build compact perceptual fingerprints in the browser.
* 5. Cache that fingerprint index in IndexedDB keyed to the Icon List revision.
* 6. Rank possible matches by perceptual/pixel similarity.
*
* No icon-catalog requests or image downloads happen until the user actually
* pastes an image into the Icon Finder.
*/
( function ( mw, $ ) {
'use strict';

var ICON_LIST_PAGE = 'Icon List';
var DB_NAME = 'eql-icon-finder';
var DB_VERSION = 1;
var STORE_NAME = 'indexes';
var ALGO_VERSION = 6;
var COLOR_GRID = 16;
var IMAGEINFO_BATCH = 50;
var DOWNLOAD_CONCURRENCY = 8;
var RESULT_COUNT = 10;

var initializedHost = null;
var memoryIndex = null;
var currentPreviewUrl = null;

function addStyles() {
if ( document.getElementById( 'eql-icon-finder-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-icon-finder-styles',
text:
'.eql-iconfinder-shell{' +
'display:grid;' +
'grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);' +
'gap:1rem;' +
'align-items:start;' +
'}' +

'.eql-iconfinder-paste{' +
'min-height:160px;' +
'display:flex;' +
'flex-direction:column;' +
'align-items:center;' +
'justify-content:center;' +
'gap:.45rem;' +
'padding:1rem;' +
'background:#080d13;' +
'border:2px dashed rgba(216,183,92,.45);' +
'border-radius:8px;' +
'color:#dfe7ef;' +
'text-align:center;' +
'cursor:paste;' +
'outline:none;' +
'}' +

'.eql-iconfinder-paste:focus{' +
'border-color:#d8b75c;' +
'box-shadow:0 0 0 2px rgba(216,183,92,.13);' +
'}' +

'.eql-iconfinder-instruction{' +
'color:#fff0b5;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-subinstruction{' +
'color:#9faaba;' +
'font-size:.88rem;' +
'line-height:1.35;' +
'}' +

'.eql-iconfinder-preview{' +
'display:none;' +
'width:72px;' +
'height:72px;' +
'object-fit:contain;' +
'image-rendering:auto;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.14);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-preview.is-visible{display:block;}' +

'.eql-iconfinder-status{' +
'margin-top:.65rem;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'line-height:1.4;' +
'}' +

'.eql-iconfinder-results-title{' +
'margin:0 0 .55rem;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-results-empty{' +
'padding:.9rem;' +
'background:rgba(255,255,255,.025);' +
'border:1px solid rgba(255,255,255,.08);' +
'border-radius:7px;' +
'color:#96a2b2;' +
'font-size:.9rem;' +
'}' +

'.eql-iconfinder-results-grid{' +
'display:grid;' +
'grid-template-columns:repeat(auto-fill,minmax(185px,1fr));' +
'gap:.65rem;' +
'}' +

'.eql-iconfinder-result{' +
'display:grid;' +
'grid-template-columns:54px minmax(0,1fr);' +
'gap:.65rem;' +
'align-items:center;' +
'padding:.65rem;' +
'background:rgba(255,255,255,.03);' +
'border:1px solid rgba(255,255,255,.09);' +
'border-radius:7px;' +
'}' +

'.eql-iconfinder-result img{' +
'width:52px;' +
'height:52px;' +
'object-fit:contain;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.1);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-result-name{' +
'display:block;' +
'margin-bottom:.18rem;' +
'color:#b9c8ff;' +
'font-size:.86rem;' +
'line-height:1.2;' +
'word-break:break-word;' +
'}' +

'.eql-iconfinder-result-score{' +
'display:block;' +
'margin-bottom:.28rem;' +
'color:#d8b75c;' +
'font-size:.8rem;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-result-meta{' +
'display:block;' +
'color:#8f9bac;' +
'font-size:.76rem;' +
'line-height:1.25;' +
'}' +

'.eql-iconfinder-result-id{' +
'display:block;' +
'margin:.2rem 0 .35rem;' +
'color:#fff0b5;' +
'font-size:1.05rem;' +
'font-weight:800;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-copy-row{' +
'display:flex;' +
'flex-wrap:wrap;' +
'gap:.3rem;' +
'margin-top:.38rem;' +
'}' +

'.eql-iconfinder-copy{' +
'min-height:1.8rem!important;' +
'padding:.15rem .45rem!important;' +
'font-size:.72rem!important;' +
'}' +

'.eql-iconfinder-note{' +
'margin-top:.7rem;' +
'color:#7f8b9b;' +
'font-size:.78rem;' +
'line-height:1.35;' +
'}' +

'@media(max-width:850px){' +
'.eql-iconfinder-shell{grid-template-columns:1fr;}' +
'}'
} ).appendTo( document.head );
}

function openDb() {
return new Promise( function ( resolve, reject ) {
var request;

if ( !window.indexedDB ) {
reject( new Error( 'IndexedDB unavailable.' ) );
return;
}

request = indexedDB.open( DB_NAME, DB_VERSION );

request.onupgradeneeded = function () {
var db = request.result;

if ( !db.objectStoreNames.contains( STORE_NAME ) ) {
db.createObjectStore( STORE_NAME, {
keyPath: 'key'
} );
}
};

request.onsuccess = function () {
resolve( request.result );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB open failed.' ) );
};
} );
}

function idbGet( key ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readonly' );
var store = tx.objectStore( STORE_NAME );
var request = store.get( key );

request.onsuccess = function () {
resolve( request.result || null );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB read failed.' ) );
};

tx.oncomplete = function () {
db.close();
};
} );
} );
}

function idbPutAndPrune( value ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readwrite' );
var store = tx.objectStore( STORE_NAME );
var cursorRequest;

store.put( value );

cursorRequest = store.openCursor();

cursorRequest.onsuccess = function () {
var cursor = cursorRequest.result;

if ( !cursor ) {
return;
}

if ( cursor.key !== value.key ) {
cursor.delete();
}

cursor.continue();
};

tx.oncomplete = function () {
db.close();
resolve();
};

tx.onerror = function () {
db.close();
reject( tx.error || new Error( 'IndexedDB write failed.' ) );
};
} );
} );
}

function normalizeFileTitle( title ) {
title = String( title || '' ).trim();

if ( !title ) {
return '';
}

return /^File:/i.test( title )
? title
: 'File:' + title;
}

function fetchCatalog( api ) {
return api.get( {
action: 'parse',
page: ICON_LIST_PAGE,
prop: 'images|revid',
formatversion: 2
} ).then( function ( data ) {
var parse = data && data.parse ? data.parse : {};
var titles = Array.isArray( parse.images ) ? parse.images : [];

titles = titles
.map( normalizeFileTitle )
.filter( Boolean )
.filter( function ( title, index, list ) {
return list.indexOf( title ) === index;
} );

return {
revid: Number( parse.revid ) || 0,
titles: titles
};
} );
}

function chunk( list, size ) {
var out = [];
var i;

for ( i = 0; i < list.length; i += size ) {
out.push( list.slice( i, i + size ) );
}

return out;
}

function fetchImageInfo( api, titles, setStatus ) {
var batches = chunk( titles, IMAGEINFO_BATCH );
var records = [];
var chain = Promise.resolve();

batches.forEach( function ( batch, batchIndex ) {
chain = chain.then( function () {
if ( setStatus ) {
setStatus(
'Reading uploaded icon files… ' +
Math.min( batchIndex * IMAGEINFO_BATCH, titles.length ) +
' / ' + titles.length
);
}

return api.get( {
action: 'query',
prop: 'imageinfo',
titles: batch.join( '|' ),
iiprop: 'url|size|sha1',
formatversion: 2
} ).then( function ( data ) {
var pages =
data &&
data.query &&
Array.isArray( data.query.pages )
? data.query.pages
: [];

pages.forEach( function ( page ) {
var info =
page &&
Array.isArray( page.imageinfo ) &&
page.imageinfo.length
? page.imageinfo[ 0 ]
: null;

if ( !info || !info.url ) {
return;
}

records.push( {
title: normalizeFileTitle( page.title ),
url: String( info.url ),
sha1: String( info.sha1 || '' ),
width: Number( info.width ) || 0,
height: Number( info.height ) || 0
} );
} );
} );
} );
} );

return chain.then( function () {
return records;
} );
}

function blobToDrawable( blob ) {
if ( window.createImageBitmap ) {
return createImageBitmap( blob );
}

return new Promise( function ( resolve, reject ) {
var url = URL.createObjectURL( blob );
var img = new Image();

img.onload = function () {
URL.revokeObjectURL( url );
resolve( img );
};

img.onerror = function () {
URL.revokeObjectURL( url );
reject( new Error( 'Image decode failed.' ) );
};

img.src = url;
} );
}

function fetchDrawable( url ) {
return fetch( url, {
credentials: 'same-origin',
cache: 'force-cache'
} )
.then( function ( response ) {
if ( !response.ok ) {
throw new Error( 'HTTP ' + response.status );
}

return response.blob();
} )
.then( blobToDrawable );
}

function closeDrawable( drawable ) {
if ( drawable && typeof drawable.close === 'function' ) {
drawable.close();
}
}

function drawScaled( drawable, width, height, cropFraction ) {
var sourceCanvas = document.createElement( 'canvas' );
var sourceWidth =
Number( drawable.width || drawable.naturalWidth ) || 1;
var sourceHeight =
Number( drawable.height || drawable.naturalHeight ) || 1;
var sourceCtx;
var sourceImage;
var sourceData;
var pixelCount = sourceWidth * sourceHeight;
var transparentCount = 0;
var mask = new Uint8Array( pixelCount );
var foregroundCount = 0;
var borderR = [];
var borderG = [];
var borderB = [];
var bgR = 0;
var bgG = 0;
var bgB = 0;
var bgLuma = 0;
var borderSpread = [];
var tolerance;
var darkCutoff;
var minX = sourceWidth;
var minY = sourceHeight;
var maxX = -1;
var maxY = -1;
var cleanCanvas;
var cleanCtx;
var cleanImage;
var targetCanvas;
var targetCtx;
var usableWidth;
var usableHeight;
var scale;
var drawWidth;
var drawHeight;
var drawX;
var drawY;
var i;
var p;
var x;
var y;
var r;
var g;
var b;
var a;
var luma;
var chroma;
var maxChannel;
var minChannel;
var colorDistance;

function median( values ) {
var sorted;

if ( !values.length ) {
return 0;
}

sorted = values.slice().sort(
function ( left, right ) {
return left - right;
}
);

return sorted[
Math.floor( sorted.length / 2 )
];
}

function addBorderPixel( px, py ) {
var index =
( py * sourceWidth + px ) * 4;

if ( sourceData[ index + 3 ] < 16 ) {
return;
}

borderR.push( sourceData[ index ] );
borderG.push( sourceData[ index + 1 ] );
borderB.push( sourceData[ index + 2 ] );
}

sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;

sourceCtx = sourceCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

/*
* Preserve real PNG transparency.
*/
sourceCtx.clearRect(
0,
0,
sourceWidth,
sourceHeight
);

sourceCtx.drawImage(
drawable,
0,
0
);

sourceImage = sourceCtx.getImageData(
0,
0,
sourceWidth,
sourceHeight
);

sourceData = sourceImage.data;

for ( i = 0; i < pixelCount; i++ ) {
if ( sourceData[ i * 4 + 3 ] < 245 ) {
transparentCount++;
}
}

if (
transparentCount >
Math.max( 4, pixelCount * 0.01 )
) {
/*
* Uploaded transparent PNG:
* alpha is already an excellent mask.
*/
for ( i = 0; i < pixelCount; i++ ) {
if (
sourceData[ i * 4 + 3 ] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
} else {
/*
* Pasted screenshot:
*
* Infer the UI background from a two-pixel
* border around the capture.
*/
for (
x = 0;
x < sourceWidth;
x++
) {
for (
y = 0;
y < Math.min(
2,
sourceHeight
);
y++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
x,
sourceHeight - 1 - y
);
}
}

for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < Math.min(
2,
sourceWidth
);
x++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
sourceWidth - 1 - x,
y
);
}
}

bgR = median( borderR );
bgG = median( borderG );
bgB = median( borderB );

bgLuma = luminance(
bgR,
bgG,
bgB
);

for (
i = 0;
i < borderR.length;
i++
) {
borderSpread.push(
Math.sqrt(
Math.pow(
borderR[ i ] - bgR,
2
) +
Math.pow(
borderG[ i ] - bgG,
2
) +
Math.pow(
borderB[ i ] - bgB,
2
)
)
);
}

/*
* The old crop variants blindly trimmed the
* image square.
*
* Now they instead make background removal
* slightly more aggressive.
*/
tolerance = Math.max(
20,
Math.min(
74,
18 +
median(
borderSpread
) * 2.5 +
cropFraction * 80
)
);

darkCutoff = Math.max(
36,
Math.min(
88,
bgLuma +
22 +
cropFraction * 100
)
);

for (
i = 0;
i < pixelCount;
i++
) {
p = i * 4;

r = sourceData[ p ];
g = sourceData[ p + 1 ];
b = sourceData[ p + 2 ];
a = sourceData[ p + 3 ];

if ( a < 16 ) {
continue;
}

maxChannel = Math.max(
r,
g,
b
);

minChannel = Math.min(
r,
g,
b
);

chroma =
maxChannel -
minChannel;

luma = luminance(
r,
g,
b
);

colorDistance =
Math.sqrt(
Math.pow(
r - bgR,
2
) +
Math.pow(
g - bgG,
2
) +
Math.pow(
b - bgB,
2
)
);

/*
* EQ's editor/game icon background is
* normally very dark.
*
* Discard dark neutral pixels, but allow
* strongly colored pixels to survive at
* lower brightness.
*/
if ( bgLuma < 95 ) {
if (
(
luma >=
darkCutoff &&
colorDistance >=
tolerance *
0.65
) ||
(
chroma >= 24 &&
luma >=
bgLuma +
7 +
cropFraction *
30 &&
colorDistance >=
tolerance *
0.55
)
) {
mask[ i ] = 1;
foregroundCount++;
}
} else if (
colorDistance >=
tolerance
) {
mask[ i ] = 1;
foregroundCount++;
}
}

/*
* Fail soft for an unusual image instead of
* producing an empty fingerprint.
*/
if (
foregroundCount < 6 ||
foregroundCount >
pixelCount * 0.90
) {
mask.fill( 0 );
foregroundCount = 0;

for (
i = 0;
i < pixelCount;
i++
) {
if (
sourceData[
i * 4 + 3
] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
}
}

/*
* Find the actual sprite bounds.
*/
for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < sourceWidth;
x++
) {
i =
y * sourceWidth +
x;

if ( !mask[ i ] ) {
continue;
}

minX = Math.min(
minX,
x
);

minY = Math.min(
minY,
y
);

maxX = Math.max(
maxX,
x
);

maxY = Math.max(
maxY,
y
);
}
}

if (
maxX < minX ||
maxY < minY
) {
minX = 0;
minY = 0;
maxX = sourceWidth - 1;
maxY = sourceHeight - 1;
}

/*
* Create a transparent copy containing only
* detected foreground pixels.
*/
cleanCanvas =
document.createElement(
'canvas'
);

cleanCanvas.width =
sourceWidth;

cleanCanvas.height =
sourceHeight;

cleanCtx =
cleanCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

cleanImage =
cleanCtx.createImageData(
sourceWidth,
sourceHeight
);

for (
i = 0;
i < pixelCount;
i++
) {
if ( !mask[ i ] ) {
continue;
}

p = i * 4;

cleanImage.data[ p ] =
sourceData[ p ];

cleanImage.data[ p + 1 ] =
sourceData[ p + 1 ];

cleanImage.data[ p + 2 ] =
sourceData[ p + 2 ];

cleanImage.data[ p + 3 ] =
255;
}

cleanCtx.putImageData(
cleanImage,
0,
0
);

/*
* Normalize the detected sprite to the requested
* comparison size.
*/
targetCanvas =
document.createElement(
'canvas'
);

targetCanvas.width = width;
targetCanvas.height = height;

targetCtx =
targetCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

targetCtx.fillStyle = '#000';

targetCtx.fillRect(
0,
0,
width,
height
);

targetCtx.imageSmoothingEnabled =
true;

if (
'imageSmoothingQuality' in
targetCtx
) {
targetCtx.imageSmoothingQuality =
'high';
}

usableWidth =
Math.max(
1,
width - 2
);

usableHeight =
Math.max(
1,
height - 2
);

scale = Math.min(
usableWidth /
Math.max(
1,
maxX - minX + 1
),
usableHeight /
Math.max(
1,
maxY - minY + 1
)
);

drawWidth = Math.max(
1,
Math.round(
(
maxX -
minX +
1
) * scale
)
);

drawHeight = Math.max(
1,
Math.round(
(
maxY -
minY +
1
) * scale
)
);

drawX = Math.floor(
(
width -
drawWidth
) / 2
);

drawY = Math.floor(
(
height -
drawHeight
) / 2
);

targetCtx.drawImage(
cleanCanvas,
minX,
minY,
maxX - minX + 1,
maxY - minY + 1,
drawX,
drawY,
drawWidth,
drawHeight
);

return targetCtx.getImageData(
0,
0,
width,
height
);
}
function luminance( r, g, b ) {
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function computeDHash( drawable, cropFraction ) {
var imageData = drawScaled( drawable, 9, 8, cropFraction );
var data = imageData.data;
var hi = 0;
var lo = 0;
var bit = 0;
var y;
var x;
var left;
var right;
var li;
var ri;

for ( y = 0; y < 8; y++ ) {
for ( x = 0; x < 8; x++ ) {
li = ( y * 9 + x ) * 4;
ri = ( y * 9 + x + 1 ) * 4;

left = luminance(
data[ li ],
data[ li + 1 ],
data[ li + 2 ]
);

right = luminance(
data[ ri ],
data[ ri + 1 ],
data[ ri + 2 ]
);

if ( left > right ) {
if ( bit < 32 ) {
lo = ( lo | ( 1 << bit ) ) >>> 0;
} else {
hi = ( hi | ( 1 << ( bit - 32 ) ) ) >>> 0;
}
}

bit++;
}
}

return {
hi: hi >>> 0,
lo: lo >>> 0
};
}

function computeColorGrid( drawable, cropFraction ) {
var imageData = drawScaled(
drawable,
COLOR_GRID,
COLOR_GRID,
cropFraction
);
var data = imageData.data;
var out = new Uint8Array( COLOR_GRID * COLOR_GRID * 3 );
var source = 0;
var target = 0;

while ( source < data.length ) {
out[ target++ ] = data[ source ];
out[ target++ ] = data[ source + 1 ];
out[ target++ ] = data[ source + 2 ];
source += 4;
}

return out;
}

function fingerprintDrawable( drawable, cropFraction ) {
var hash = computeDHash( drawable, cropFraction );

return {
hashHi: hash.hi,
hashLo: hash.lo,
rgb: computeColorGrid( drawable, cropFraction )
};
}

function popcount32( value ) {
value = value >>> 0;
value = value - ( ( value >>> 1 ) & 0x55555555 );
value = ( value & 0x33333333 ) + ( ( value >>> 2 ) & 0x33333333 );
return (
(
(
value + ( value >>> 4 )
) & 0x0F0F0F0F
) * 0x01010101
) >>> 24;
}

function fingerprintDistance( a, b ) {
var hashBits =
popcount32(
(
a.hashHi ^
b.hashHi
) >>> 0
) +
popcount32(
(
a.hashLo ^
b.hashLo
) >>> 0
);

var hashDistance =
hashBits / 64;

var length = Math.min(
a.rgb.length,
b.rgb.length
);

var histogramA =
new Uint16Array( 64 );

var histogramB =
new Uint16Array( 64 );

var foregroundA = 0;
var foregroundB = 0;
var intersection = 0;
var union = 0;
var colorSum = 0;
var i;
var ar;
var ag;
var ab;
var br;
var bg;
var bb;
var aForeground;
var bForeground;
var dr;
var dg;
var db;
var binA;
var binB;
var shapeDistance;
var colorDistance;
var histogramDistance = 0;

for (
i = 0;
i + 2 < length;
i += 3
) {
ar = a.rgb[ i ];
ag = a.rgb[ i + 1 ];
ab = a.rgb[ i + 2 ];

br = b.rgb[ i ];
bg = b.rgb[ i + 1 ];
bb = b.rgb[ i + 2 ];

/*
* Background is normalized to black by
* drawScaled().
*/
aForeground =
Math.max(
ar,
ag,
ab
) > 8;

bForeground =
Math.max(
br,
bg,
bb
) > 8;

if ( aForeground ) {
foregroundA++;

binA =
(
Math.min(
3,
ar >> 6
) << 4
) |
(
Math.min(
3,
ag >> 6
) << 2
) |
Math.min(
3,
ab >> 6
);

histogramA[ binA ]++;
}

if ( bForeground ) {
foregroundB++;

binB =
(
Math.min(
3,
br >> 6
) << 4
) |
(
Math.min(
3,
bg >> 6
) << 2
) |
Math.min(
3,
bb >> 6
);

histogramB[ binB ]++;
}

if (
aForeground ||
bForeground
) {
union++;
}

if (
!aForeground ||
!bForeground
) {
continue;
}

intersection++;

dr = ar - br;
dg = ag - bg;
db = ab - bb;

colorSum +=
Math.sqrt(
dr * dr +
dg * dg +
db * db
) /
441.67295593;
}

shapeDistance =
union
? 1 -
intersection /
union
: 1;

colorDistance =
intersection
? colorSum /
intersection
: 1;

for (
i = 0;
i < 64;
i++
) {
histogramDistance +=
Math.abs(
histogramA[ i ] /
Math.max(
1,
foregroundA
) -
histogramB[ i ] /
Math.max(
1,
foregroundB
)
);
}

/*
* Normalized histogram L1 range is 0..2.
*/
histogramDistance =
Math.min(
1,
histogramDistance / 2
);

/*
* Foreground color is deliberately the largest
* contributor now.
*/
return Math.min(
1,
0.50 * colorDistance +
0.25 * shapeDistance +
0.15 * histogramDistance +
0.10 * hashDistance
);
}
function mapLimit( list, limit, worker ) {
var nextIndex = 0;
var workers = [];
var i;

function runWorker() {
var index;

if ( nextIndex >= list.length ) {
return Promise.resolve();
}

index = nextIndex++;
return Promise.resolve( worker( list[ index ], index ) )
.then( runWorker );
}

for ( i = 0; i < Math.min( limit, list.length ); i++ ) {
workers.push( runWorker() );
}

return Promise.all( workers );
}

function buildFingerprintIndex( records, setStatus ) {
var complete = 0;
var successful = [];
var grouped = Object.create( null );
var groups = [];

/*
* If several icon filenames are byte-identical, imageinfo gives them
* the same SHA-1. Fingerprint that image only once and fan the result
* back out to every filename. This can substantially reduce the first
* build's static-file traffic without changing the visible results.
*/
records.forEach( function ( record ) {
var key = record.sha1 || record.url;

if ( !grouped[ key ] ) {
grouped[ key ] = {
key: key,
representative: record,
records: []
};
groups.push( grouped[ key ] );
}

grouped[ key ].records.push( record );
} );

return mapLimit(
groups,
DOWNLOAD_CONCURRENCY,
function ( group ) {
return fetchDrawable( group.representative.url )
.then( function ( drawable ) {
var fp = fingerprintDrawable( drawable, 0 );

closeDrawable( drawable );

group.records.forEach( function ( record ) {
successful.push( {
title: record.title,
url: record.url,
sha1: record.sha1,
width: record.width,
height: record.height,
hashHi: fp.hashHi,
hashLo: fp.hashLo,
rgb: fp.rgb
} );
} );
} )
.catch( function () {
/*
* A missing/corrupt/non-raster file should not prevent
* the rest of the icon index from becoming usable.
*/
} )
.then( function () {
complete++;

if (
setStatus &&
(
complete === groups.length ||
complete % 25 === 0
)
) {
setStatus(
'Building pixel index… ' +
complete + ' / ' + groups.length +
' unique images (' +
records.length + ' filenames)'
);
}
} );
}
).then( function () {
return successful;
} );
}

function cacheKey( revid ) {
return [
'icon-list',
ALGO_VERSION,
revid
].join( ':' );
}

function decodeServerRgb( base64 ) {
var binary = window.atob( String( base64 || '' ) );
var bytes = new Uint8Array( binary.length );
var i;

for ( i = 0; i < binary.length; i++ ) {
bytes[ i ] = binary.charCodeAt( i ) & 0xFF;
}

return bytes;
}

function decodeServerRecords( records ) {
return ( Array.isArray( records ) ? records : [] )
.map( function ( record ) {
return {
title: String( record.title || '' ),
url: String( record.url || '' ),
sha1: String( record.sha1 || '' ),
width: Number( record.width ) || 0,
height: Number( record.height ) || 0,
hashHi: Number( record.hashHi ) >>> 0,
hashLo: Number( record.hashLo ) >>> 0,
rgb: decodeServerRgb( record.rgb )
};
} )
.filter( function ( record ) {
return (
record.title &&
record.url &&
record.rgb.length
);
} );
}

function fetchServerIconIndexMeta( api ) {
return api.get( {
action: 'eqliconindex',
meta: 1,
formatversion: 2
} ).then( function ( data ) {
return (
data &&
data.eqliconindex
)
? data.eqliconindex
: null;
} );
}

function fetchServerIconIndex( api, generation ) {
return api.get( {
action: 'eqliconindex',
generation: generation,
formatversion: 2
} ).then( function ( data ) {
return (
data &&
data.eqliconindex
)
? data.eqliconindex
: null;
} );
}

function serverCacheKey( generation ) {
return [
'server',
ALGO_VERSION,
String( generation || '' )
].join( ':' );
}
function getOrBuildIndex( api, setStatus ) {
if ( memoryIndex ) {
return Promise.resolve( memoryIndex );
}

setStatus( 'Checking server icon index…' );

/*
* Preferred path:
* 1. Ask for tiny server metadata.
* 2. Reuse IndexedDB if this immutable generation is already local.
* 3. Otherwise download the precomputed server fingerprints once.
*
* Any server-cache error falls through to the original fully
* client-side builder, preserving continuity.
*/
return fetchServerIconIndexMeta( api )
.catch( function () {
return null;
} )
.then( function ( meta ) {
var key;

if (
!meta ||
!meta.ready ||
Number( meta.algorithm ) !== ALGO_VERSION ||
!meta.generation
) {
return null;
}

key = serverCacheKey( meta.generation );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;

setStatus(
'Icon index ready: ' +
memoryIndex.length +
' icons (server generation cached locally).'
);

return memoryIndex;
}

setStatus(
'Downloading precomputed server icon index…'
);

return fetchServerIconIndex(
api,
String( meta.generation )
).then( function ( payload ) {
var records;

if (
!payload ||
!payload.ready ||
String( payload.generation || '' ) !==
String( meta.generation )
) {
return null;
}

records = decodeServerRecords(
payload.records
);

if ( !records.length ) {
return null;
}

memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' icons (server cache).'
);

return idbPutAndPrune( {
key: key,
generation: String( meta.generation ),
revid: Number( meta.iconListRevision ) || 0,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/* Browser storage is optional. */
} )
.then( function () {
return records;
} );
} );
} );
} )
.then( function ( serverRecords ) {
if ( serverRecords && serverRecords.length ) {
return serverRecords;
}

/*
* Backwards-compatible fallback. If the extension is disabled,
* the job queue has not run yet, GD is unavailable, or the
* server cache is stale, the working browser implementation
* behaves exactly as it did before.
*/
setStatus(
'Server icon index unavailable; checking browser cache…'
);

return fetchCatalog( api ).then( function ( catalog ) {
var key = cacheKey( catalog.revid );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;
setStatus(
'Icon index ready: ' +
memoryIndex.length +
' uploaded icons (cached locally).'
);
return memoryIndex;
}

return fetchImageInfo(
api,
catalog.titles,
setStatus
).then( function ( imageRecords ) {
setStatus(
'Found ' + imageRecords.length +
' uploaded icons. Building pixel index…'
);

return buildFingerprintIndex(
imageRecords,
setStatus
);
} ).then( function ( records ) {
memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' uploaded icons.'
);

return idbPutAndPrune( {
key: key,
revid: catalog.revid,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/* Browser storage is optional. */
} )
.then( function () {
return records;
} );
} );
} );
} );
} );
}
function fingerprintPastedImage( drawable ) {
/*
* Small centered crop variants make the matcher forgiving of a
* 1-2 pixel screen-capture border while still preferring an exact crop.
*/
return [
fingerprintDrawable( drawable, 0 ),
fingerprintDrawable( drawable, 0.035 ),
fingerprintDrawable( drawable, 0.07 )
];
}

function rankMatches( targetFingerprints, records ) {
var ranked = records.map( function ( record ) {
var candidate = {
hashHi: record.hashHi,
hashLo: record.hashLo,
rgb: record.rgb
};

var distance = Infinity;

targetFingerprints.forEach( function ( target ) {
distance = Math.min(
distance,
fingerprintDistance( target, candidate )
);
} );

return {
record: record,
distance: distance,
similarity: Math.max(
0,
Math.min( 100, ( 1 - distance ) * 100 )
)
};
} );

ranked.sort( function ( a, b ) {
return a.distance - b.distance;
} );

return ranked.slice( 0, RESULT_COUNT );
}

function cleanDisplayTitle( title ) {
return String( title || '' ).replace( /^File:/i, '' );
}

function iconMetadata( title ) {
var clean = cleanDisplayTitle( title );
var itemMatch = clean.match( /^Item\s+(\d+)\.png$/i );
var spellMatch = clean.match( /^Spellicon_([^.]*)\.png$/i );
var id = '';
var kind = 'Icon file';
var parameter = '';

if ( itemMatch ) {
id = itemMatch[ 1 ];
kind = 'Item icon';
parameter = '|lucy_img_ID = ' + id;
} else if ( spellMatch ) {
id = spellMatch[ 1 ];
kind = 'Spell icon';
parameter = '|spellicon = ' + id;
}

return {
kind: kind,
id: id,
filename: clean,
parameter: parameter,
rawWiki: '[[File:' + clean + ']]',
staticWiki: '[[File:' + clean + '|32x32px]]',
scaledWiki: '[[File:' + clean + '|frameless|upright=1.5]]'
};
}

function copyText( text, button ) {
var original = button.textContent;

function done() {
button.textContent = 'Copied';
window.setTimeout( function () {
button.textContent = original;
}, 1000 );
}

if (
navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function'
) {
navigator.clipboard.writeText( text )
.then( done )
.catch( function () {
window.prompt( 'Copy:', text );
} );
return;
}

window.prompt( 'Copy:', text );
}

function makeCopyButton( label, value ) {
var button = document.createElement( 'button' );

button.className = 'eql-iconfinder-copy';
button.type = 'button';
button.textContent = label;

button.addEventListener( 'click', function () {
copyText( value, button );
} );

return button;
}

function renderMatches( container, matches ) {
container.innerHTML = '';

var grid = document.createElement( 'div' );
grid.className = 'eql-iconfinder-results-grid';
container.appendChild( grid );

matches.forEach( function ( match ) {
var record = match.record;
var meta = iconMetadata( record.title );
var card = document.createElement( 'div' );
var img = document.createElement( 'img' );
var textWrap = document.createElement( 'div' );
var link = document.createElement( 'a' );
var score = document.createElement( 'span' );
var iconId = document.createElement( 'span' );
var metadata = document.createElement( 'span' );
var copyRow = document.createElement( 'div' );

card.className = 'eql-iconfinder-result';

img.src = record.url;
img.alt = meta.filename;
img.loading = 'lazy';

link.className = 'eql-iconfinder-result-name';
link.href = mw.util.getUrl( record.title );
link.target = '_blank';
link.rel = 'noopener';
link.textContent = meta.filename;

score.className = 'eql-iconfinder-result-score';
score.textContent =
'Match score ' + match.similarity.toFixed( 1 );

iconId.className = 'eql-iconfinder-result-id';
iconId.textContent = meta.id
? 'Icon ' + meta.id
: meta.filename;

metadata.className = 'eql-iconfinder-result-meta';
metadata.textContent = meta.kind;

copyRow.className = 'eql-iconfinder-copy-row';

if ( meta.id ) {
copyRow.appendChild(
makeCopyButton( 'Copy ID', meta.id )
);
}

if ( meta.parameter ) {
copyRow.appendChild(
makeCopyButton( 'Copy Parameter', meta.parameter )
);
}

copyRow.appendChild(
makeCopyButton( 'Raw Wikicode', meta.rawWiki )
);

copyRow.appendChild(
makeCopyButton( '32×32', meta.staticWiki )
);

copyRow.appendChild(
makeCopyButton( 'Scaled', meta.scaledWiki )
);

textWrap.appendChild( link );
textWrap.appendChild( iconId );
textWrap.appendChild( score );
textWrap.appendChild( metadata );
textWrap.appendChild( copyRow );

card.appendChild( img );
card.appendChild( textWrap );
grid.appendChild( card );
} );

var note = document.createElement( 'div' );
note.className = 'eql-iconfinder-note';
note.textContent =
'The tool only identifies likely matches and copies values/wikicode to the clipboard; it never changes the editor. ' +
'For the best result, capture only the square icon with as little surrounding UI as possible.';
container.appendChild( note );
}

function imageFromClipboardEvent( event ) {
var clipboard = event.clipboardData;
var items;
var i;

if ( !clipboard || !clipboard.items ) {
return null;
}

items = clipboard.items;

for ( i = 0; i < items.length; i++ ) {
if (
items[ i ].kind === 'file' &&
/^image\//i.test( items[ i ].type )
) {
return items[ i ].getAsFile();
}
}

return null;
}

function setPreview( img, blob ) {
if ( currentPreviewUrl ) {
URL.revokeObjectURL( currentPreviewUrl );
}

currentPreviewUrl = URL.createObjectURL( blob );
img.src = currentPreviewUrl;
img.classList.add( 'is-visible' );
}

function processBlob( blob, preview, status, results, api ) {
var setStatus = function ( text ) {
status.textContent = text;
};

setPreview( preview, blob );
results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Analyzing pasted icon…' +
'</div>';

return blobToDrawable( blob )
.then( function ( drawable ) {
var targets = fingerprintPastedImage( drawable );
closeDrawable( drawable );

return getOrBuildIndex( api, setStatus )
.then( function ( index ) {
var matches;

if ( !index.length ) {
throw new Error( 'No uploaded icons were found.' );
}

setStatus(
'Comparing against ' +
index.length +
' uploaded icons…'
);

/*
* Yield once so the status message can paint before
* ranking several thousand in-memory fingerprints.
*/
return new Promise( function ( resolve ) {
window.setTimeout( function () {
matches = rankMatches( targets, index );
resolve( matches );
}, 0 );
} );
} );
} )
.then( function ( matches ) {
renderMatches( results, matches );

setStatus(
'Done. Showing the ' +
matches.length +
' closest matches.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'The icon could not be matched.' +
'</div>';

setStatus(
'Icon Finder error: ' +
( error && error.message ? error.message : 'Unknown error' )
);
} );
}

function buildUi( host ) {
var api = new mw.Api();

host.innerHTML = '';

var shell = document.createElement( 'div' );
shell.className = 'eql-iconfinder-shell';

var left = document.createElement( 'div' );
var paste = document.createElement( 'div' );
var instruction = document.createElement( 'div' );
var subinstruction = document.createElement( 'div' );
var preview = document.createElement( 'img' );
var status = document.createElement( 'div' );

paste.className = 'eql-iconfinder-paste';
paste.tabIndex = 0;
paste.setAttribute( 'role', 'button' );
paste.setAttribute(
'aria-label',
'Paste a screen capture of an EverQuest icon'
);

instruction.className = 'eql-iconfinder-instruction';
instruction.textContent =
'Screen capture and paste JUST the Icon';

subinstruction.className = 'eql-iconfinder-subinstruction';
subinstruction.textContent =
'Click this box, then press Ctrl+V. You can also drag an image here.';

preview.className = 'eql-iconfinder-preview';
preview.alt = 'Pasted icon preview';

status.className = 'eql-iconfinder-status';
status.setAttribute( 'aria-live', 'polite' );
status.textContent =
'Nothing is loaded from Icon List until you paste an image.';

paste.appendChild( instruction );
paste.appendChild( subinstruction );
paste.appendChild( preview );

left.appendChild( paste );
left.appendChild( status );

var right = document.createElement( 'div' );
var resultsTitle = document.createElement( 'div' );
var results = document.createElement( 'div' );

resultsTitle.className = 'eql-iconfinder-results-title';
resultsTitle.textContent = 'Possible Matches';

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Paste an icon to search the uploaded images on Icon List.' +
'</div>';

right.appendChild( resultsTitle );
right.appendChild( results );

shell.appendChild( left );
shell.appendChild( right );
host.appendChild( shell );

paste.addEventListener( 'click', function () {
paste.focus();
} );

paste.addEventListener( 'paste', function ( event ) {
var file = imageFromClipboardEvent( event );

if ( !file ) {
status.textContent =
'Clipboard does not contain an image. Screen capture the icon, then paste again.';
return;
}

event.preventDefault();

processBlob(
file,
preview,
status,
results,
api
);
} );

paste.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
} );

paste.addEventListener( 'drop', function ( event ) {
var files;

event.preventDefault();
files = event.dataTransfer && event.dataTransfer.files;

if (
!files ||
!files.length ||
!/^image\//i.test( files[ 0 ].type )
) {
status.textContent = 'Drop an image file here.';
return;
}

processBlob(
files[ 0 ],
preview,
status,
results,
api
);
} );

/*
* Focus the paste target immediately when the panel first opens so
* the normal workflow is: click Icon Finder -> Ctrl+V.
*/
window.setTimeout( function () {
paste.focus();
}, 0 );
}

window.EQLIconFinder = {
init: function ( host ) {
if ( !host ) {
return Promise.reject(
new Error( 'Icon Finder host element is missing.' )
);
}

addStyles();

if ( initializedHost !== host ) {
buildUi( host );
initializedHost = host;
} else {
var paste = host.querySelector( '.eql-iconfinder-paste' );

if ( paste ) {
window.setTimeout( function () {
paste.focus();
}, 0 );
}
}

return Promise.resolve();
}
};

}( mediaWiki, jQuery ) );

MediaWiki:BlueprintLoader.js

2026-08-10T06:01:08Z

Maintenance script: Refresh Icon Finder UI script

/**
* EQL Wiki - Editor Tools / Dynamic Blueprint Loader
*
* Source-editor behavior:
* - On a new, truly empty page: show the Help:Contents Blueprint selector.
* - On every source edit page: show the Icon Finder button.
* - Heavy Icon Finder logic is lazy-loaded only when opened.
*/
( function ( mw, $ ) {
'use strict';

var BLUEPRINT_PAGE = 'Help:Contents';
var TOOLS_ID = 'eql-editor-tools';
var ICON_FINDER_PAGE = 'MediaWiki:IconFinder.js';

function htmlToText( html ) {
var div = document.createElement( 'div' );
div.innerHTML = String( html || '' );
return ( div.textContent || div.innerText || '' ).trim();
}

function makeLabel( heading ) {
return heading
.replace( /\s+Blueprints?\s*$/i, '' )
.trim() + ' Blueprint';
}

function getEditorContents( $textarea ) {
try {
return String( $textarea.textSelection( 'getContents' ) || '' );
} catch ( e ) {
return String( $textarea.val() || '' );
}
}

function setEditorContents( $textarea, text ) {
try {
$textarea.textSelection( 'setContents', text );
} catch ( e ) {
$textarea.val( text );
}

$textarea.trigger( 'input' );
$textarea.trigger( 'change' );
$textarea.trigger( 'focus' );
}

function extractBlueprint( sectionText ) {
var match;
var blueprint;

sectionText = String( sectionText || '' );

match = sectionText.match(
/<pre(?:\s[^>]*)?>([\s\S]*?)<\/pre>/i
);

if ( !match ) {
return null;
}

blueprint = match[ 1 ];

blueprint = blueprint.replace(
/^\s*<nowiki>([\s\S]*?)<\/nowiki>\s*$/i,
'$1'
);

blueprint = blueprint
.replace( /^\s*\n/, '' )
.replace( /\s+$/, '' );

return blueprint + '\n';
}

function fetchBlueprintSections( api ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'tocdata',
formatversion: 2
} ).then( function ( data ) {
var tocdata =
data &&
data.parse &&
data.parse.tocdata;

var sections =
tocdata &&
Array.isArray( tocdata.sections )
? tocdata.sections
: [];

if ( sections.length ) {
return sections;
}

return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'sections',
formatversion: 2
} ).then( function ( fallbackData ) {
return (
fallbackData &&
fallbackData.parse &&
Array.isArray( fallbackData.parse.sections )
)
? fallbackData.parse.sections
: [];
} );
} );
}

function normalizeBlueprintSections( sections ) {
return sections
.map( function ( section ) {
var heading = htmlToText( section.line || '' );

return {
heading: heading,
label: makeLabel( heading ),
index: String( section.index || '' ),
anchor:
section.linkAnchor ||
section.anchor ||
''
};
} )
.filter( function ( section ) {
return (
section.index &&
/\bBlueprints?\s*$/i.test( section.heading )
);
} );
}

function fetchBlueprintWikitext( api, sectionIndex ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'wikitext',
section: sectionIndex,
formatversion: 2
} ).then( function ( data ) {
var wikitext =
data &&
data.parse
? data.parse.wikitext
: '';

if (
wikitext &&
typeof wikitext === 'object' &&
Object.prototype.hasOwnProperty.call( wikitext, '*' )
) {
wikitext = wikitext[ '*' ];
}

return String( wikitext || '' );
} );
}

function addStyles() {
if ( document.getElementById( 'eql-editor-tools-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-editor-tools-styles',
text:
'#' + TOOLS_ID + '{' +
'box-sizing:border-box;' +
'margin:0 0 1rem 0;' +
'padding:1rem 1.1rem;' +
'background:linear-gradient(180deg,rgba(16,21,29,.97),rgba(9,13,19,.98));' +
'border:1px solid rgba(216,183,92,.38);' +
'border-left:5px solid rgba(216,183,92,.82);' +
'border-radius:8px;' +
'box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);' +
'}' +

'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'display:grid;' +
'grid-template-columns:minmax(0,1fr) auto;' +
'gap:1rem;' +
'align-items:end;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-title,' +
'#' + TOOLS_ID + ' .eql-iconfinder-title{' +
'margin:0 0 .35rem 0;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'letter-spacing:.035em;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-description{' +
'margin:0 0 .7rem 0;' +
'color:#aeb8c7;' +
'font-size:.9rem;' +
'line-height:1.35;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-controls{' +
'display:flex;' +
'flex-wrap:wrap;' +
'align-items:center;' +
'gap:.65rem;' +
'}' +

'#' + TOOLS_ID + ' select{' +
'box-sizing:border-box;' +
'min-width:260px;' +
'max-width:100%;' +
'min-height:2.35rem;' +
'padding:.35rem .55rem;' +
'background:#0b1017;' +
'border:1px solid rgba(216,183,92,.36);' +
'border-radius:5px;' +
'color:#e2e2cf;' +
'}' +

'#' + TOOLS_ID + ' button{' +
'min-height:2.35rem;' +
'padding:.35rem .85rem;' +
'background:linear-gradient(180deg,#806d32,#594817);' +
'border:1px solid #b69c4b;' +
'border-radius:5px;' +
'color:#fff5cc;' +
'font-weight:700;' +
'cursor:pointer;' +
'}' +

'#' + TOOLS_ID + ' button:hover:not(:disabled){' +
'filter:brightness(1.08);' +
'}' +

'#' + TOOLS_ID + ' button:disabled{' +
'cursor:default;' +
'opacity:.55;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-source{' +
'color:#b9c8ff;' +
'font-size:.9rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-status{' +
'display:block;' +
'margin-top:.55rem;' +
'min-height:1.2em;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'display:flex;' +
'flex-direction:column;' +
'align-items:stretch;' +
'justify-content:flex-end;' +
'min-width:150px;' +
'}' +

'#eql-icon-finder-toggle{' +
'white-space:nowrap;' +
'}' +

'#eql-icon-finder-host{' +
'margin-top:1rem;' +
'padding-top:1rem;' +
'border-top:1px solid rgba(216,183,92,.22);' +
'}' +

'#eql-icon-finder-host[hidden]{display:none!important;}' +

'@media(max-width:760px){' +
'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'grid-template-columns:1fr;' +
'}' +
'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'min-width:0;' +
'}' +
'#' + TOOLS_ID + ' select{' +
'width:100%;' +
'min-width:0;' +
'}' +
'}'
} ).appendTo( document.head );
}

function loadIconFinderScript() {
if ( window.EQLIconFinder ) {
return Promise.resolve( window.EQLIconFinder );
}

if ( window.eqlIconFinderLoadingPromise ) {
return window.eqlIconFinderLoadingPromise;
}

window.eqlIconFinderLoadingPromise = new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );

script.src = mw.util.getUrl( ICON_FINDER_PAGE, {
action: 'raw',
ctype: 'text/javascript',
v: '7'
} );

script.async = true;

script.onload = function () {
if ( window.EQLIconFinder ) {
resolve( window.EQLIconFinder );
} else {
reject( new Error( 'IconFinder.js loaded without exposing EQLIconFinder.' ) );
}
};

script.onerror = function () {
reject( new Error( 'Could not load IconFinder.js.' ) );
};

document.head.appendChild( script );
} );

return window.eqlIconFinderLoadingPromise;
}

function buildIconFinderLaunch( $row, $tools ) {
var $launch = $( '<div>', {
class: 'eql-iconfinder-launch'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-iconfinder-title',
text: 'ICON FINDER'
} ).appendTo( $launch );

var $button = $( '<button>', {
id: 'eql-icon-finder-toggle',
type: 'button',
text: 'Icon Finder',
'aria-expanded': 'false'
} ).appendTo( $launch );

var $host = $( '<div>', {
id: 'eql-icon-finder-host',
hidden: true
} ).appendTo( $tools );

$button.on( 'click', function () {
var opening = $host.prop( 'hidden' );

if ( !opening ) {
$host.prop( 'hidden', true );
$button.attr( 'aria-expanded', 'false' );
return;
}

$button.prop( 'disabled', true );
$button.text( 'Loading…' );

loadIconFinderScript()
.then( function ( finder ) {
return finder.init( $host[ 0 ] );
} )
.then( function () {
$host.prop( 'hidden', false );
$button.attr( 'aria-expanded', 'true' );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

$host
.prop( 'hidden', false )
.text( 'Icon Finder could not be loaded.' );

$button.attr( 'aria-expanded', 'true' );
} )
.then( function () {
$button.prop( 'disabled', false );
$button.text( 'Icon Finder' );
} );
} );
}

function buildBlueprintArea( $row, $textarea, api ) {
var $area = $( '<div>', {
class: 'eql-blueprint-area'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-blueprint-title',
text: 'CREATE FROM A BLUEPRINT'
} ).appendTo( $area );

$( '<div>', {
class: 'eql-blueprint-description',
text:
'Load a standard page skeleton from Help:Contents, ' +
'or continue editing the current source below.'
} ).appendTo( $area );

var $controls = $( '<div>', {
class: 'eql-blueprint-controls'
} ).appendTo( $area );

var $select = $( '<select>', {
'aria-label': 'Select page blueprint',
disabled: true
} ).appendTo( $controls );

$( '<option>', {
value: '',
text: 'Loading blueprints...'
} ).appendTo( $select );

var $button = $( '<button>', {
type: 'button',
text: 'Load Blueprint',
disabled: true
} ).appendTo( $controls );

var $sourceLink = $( '<a>', {
class: 'eql-blueprint-source',
href: mw.util.getUrl( BLUEPRINT_PAGE ),
text: 'View Blueprints',
target: '_blank',
rel: 'noopener'
} ).appendTo( $controls );

var $status = $( '<span>', {
class: 'eql-blueprint-status',
'aria-live': 'polite'
} ).appendTo( $area );

fetchBlueprintSections( api )
.then( function ( sections ) {
var blueprints = normalizeBlueprintSections( sections );

$select.empty();

$( '<option>', {
value: '',
text: blueprints.length ?
'Select a blueprint...' :
'No blueprints found'
} ).appendTo( $select );

blueprints.forEach( function ( blueprint ) {
$( '<option>', {
value: blueprint.index,
text: blueprint.label
} )
.attr( 'data-anchor', blueprint.anchor )
.appendTo( $select );
} );

$select.prop( 'disabled', !blueprints.length );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$select.empty().append(
$( '<option>', {
value: '',
text: 'Could not load blueprints'
} )
);

$status.text(
'Could not read Blueprint headings from Help:Contents.'
);
} );

$select.on( 'change', function () {
var $option = $select.find( 'option:selected' );
var anchor = $option.attr( 'data-anchor' ) || '';

$button.prop( 'disabled', !$select.val() );

if ( anchor ) {
$sourceLink.attr(
'href',
mw.util.getUrl( BLUEPRINT_PAGE ) + '#' + anchor
);
$sourceLink.text( 'View This Blueprint' );
} else {
$sourceLink.attr( 'href', mw.util.getUrl( BLUEPRINT_PAGE ) );
$sourceLink.text( 'View Blueprints' );
}

$status.text( '' );
} );

$button.on( 'click', function () {
var sectionIndex = $select.val();
var existing;

if ( !sectionIndex ) {
return;
}

existing = getEditorContents( $textarea );

if (
existing.trim() &&
!window.confirm(
'The editor already contains text. Replace it with the selected blueprint?'
)
) {
return;
}

$button.prop( 'disabled', true );
$select.prop( 'disabled', true );
$status.text( 'Loading current blueprint from Help:Contents...' );

fetchBlueprintWikitext( api, sectionIndex )
.then( function ( sectionText ) {
var blueprint = extractBlueprint( sectionText );

if ( blueprint === null ) {
throw new Error( 'No <pre> block found.' );
}

setEditorContents( $textarea, blueprint );

$status.text(
'Blueprint loaded. Edit the fields below, then publish normally.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$status.text(
'Could not load this blueprint. Check Help:Contents and make sure the section contains a <pre> block.'
);
} )
.then( function () {
$select.prop( 'disabled', false );
$button.prop( 'disabled', !$select.val() );
} );
} );
}

function init() {
var action = mw.config.get( 'wgAction' );
var $textarea;
var $tools;
var $row;
var $editorHost;
var api;

if ( [ 'edit', 'submit' ].indexOf( action ) === -1 ) {
return;
}

$textarea = $( '#wpTextbox1' );

if ( !$textarea.length ) {
return;
}

if ( document.getElementById( TOOLS_ID ) ) {
return;
}

api = new mw.Api();

addStyles();

$tools = $( '<div>', {
id: TOOLS_ID
} );

$row = $( '<div>', {
class: 'eql-editor-tools-row'
} ).appendTo( $tools );

buildBlueprintArea( $row, $textarea, api );

buildIconFinderLaunch( $row, $tools );

$editorHost = $textarea.closest( '.wikiEditor-ui' );

if ( !$editorHost.length ) {
$editorHost = $textarea;
}

$tools.insertBefore( $editorHost );
}

mw.loader.using( [
'mediawiki.api',
'mediawiki.util',
'jquery.textSelection'
] ).then( function () {
$( init );
} );

}( mediaWiki, jQuery ) );

MediaWiki:IconFinder.js

2026-08-10T06:01:07Z

Maintenance script: Remove duplicate Icon Finder results heading

/**
* EQL Wiki - Icon Finder
*
* Lazy-loaded from MediaWiki:BlueprintLoader.js.
*
* Matching workflow:
* 1. User pastes a screen capture containing JUST the icon.
* 2. Read the current image list from [[Icon List]].
* 3. Resolve only existing uploaded files through imageinfo.
* 4. Build compact perceptual fingerprints in the browser.
* 5. Cache that fingerprint index in IndexedDB keyed to the Icon List revision.
* 6. Rank possible matches by perceptual/pixel similarity.
*
* No icon-catalog requests or image downloads happen until the user actually
* pastes an image into the Icon Finder.
*/
( function ( mw, $ ) {
'use strict';

var ICON_LIST_PAGE = 'Icon List';
var DB_NAME = 'eql-icon-finder';
var DB_VERSION = 1;
var STORE_NAME = 'indexes';
var ALGO_VERSION = 6;
var COLOR_GRID = 16;
var IMAGEINFO_BATCH = 50;
var DOWNLOAD_CONCURRENCY = 8;
var RESULT_COUNT = 10;

var initializedHost = null;
var memoryIndex = null;
var currentPreviewUrl = null;

function addStyles() {
if ( document.getElementById( 'eql-icon-finder-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-icon-finder-styles',
text:
'.eql-iconfinder-shell{' +
'display:grid;' +
'grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);' +
'gap:1rem;' +
'align-items:start;' +
'}' +

'.eql-iconfinder-paste{' +
'min-height:160px;' +
'display:flex;' +
'flex-direction:column;' +
'align-items:center;' +
'justify-content:center;' +
'gap:.45rem;' +
'padding:1rem;' +
'background:#080d13;' +
'border:2px dashed rgba(216,183,92,.45);' +
'border-radius:8px;' +
'color:#dfe7ef;' +
'text-align:center;' +
'cursor:paste;' +
'outline:none;' +
'}' +

'.eql-iconfinder-paste:focus{' +
'border-color:#d8b75c;' +
'box-shadow:0 0 0 2px rgba(216,183,92,.13);' +
'}' +

'.eql-iconfinder-instruction{' +
'color:#fff0b5;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-subinstruction{' +
'color:#9faaba;' +
'font-size:.88rem;' +
'line-height:1.35;' +
'}' +

'.eql-iconfinder-preview{' +
'display:none;' +
'width:72px;' +
'height:72px;' +
'object-fit:contain;' +
'image-rendering:auto;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.14);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-preview.is-visible{display:block;}' +

'.eql-iconfinder-status{' +
'margin-top:.65rem;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'line-height:1.4;' +
'}' +

'.eql-iconfinder-results-title{' +
'margin:0 0 .55rem;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-results-empty{' +
'padding:.9rem;' +
'background:rgba(255,255,255,.025);' +
'border:1px solid rgba(255,255,255,.08);' +
'border-radius:7px;' +
'color:#96a2b2;' +
'font-size:.9rem;' +
'}' +

'.eql-iconfinder-results-grid{' +
'display:grid;' +
'grid-template-columns:repeat(auto-fill,minmax(185px,1fr));' +
'gap:.65rem;' +
'}' +

'.eql-iconfinder-result{' +
'display:grid;' +
'grid-template-columns:54px minmax(0,1fr);' +
'gap:.65rem;' +
'align-items:center;' +
'padding:.65rem;' +
'background:rgba(255,255,255,.03);' +
'border:1px solid rgba(255,255,255,.09);' +
'border-radius:7px;' +
'}' +

'.eql-iconfinder-result img{' +
'width:52px;' +
'height:52px;' +
'object-fit:contain;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.1);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-result-name{' +
'display:block;' +
'margin-bottom:.18rem;' +
'color:#b9c8ff;' +
'font-size:.86rem;' +
'line-height:1.2;' +
'word-break:break-word;' +
'}' +

'.eql-iconfinder-result-score{' +
'display:block;' +
'margin-bottom:.28rem;' +
'color:#d8b75c;' +
'font-size:.8rem;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-result-meta{' +
'display:block;' +
'color:#8f9bac;' +
'font-size:.76rem;' +
'line-height:1.25;' +
'}' +

'.eql-iconfinder-result-id{' +
'display:block;' +
'margin:.2rem 0 .35rem;' +
'color:#fff0b5;' +
'font-size:1.05rem;' +
'font-weight:800;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-copy-row{' +
'display:flex;' +
'flex-wrap:wrap;' +
'gap:.3rem;' +
'margin-top:.38rem;' +
'}' +

'.eql-iconfinder-copy{' +
'min-height:1.8rem!important;' +
'padding:.15rem .45rem!important;' +
'font-size:.72rem!important;' +
'}' +

'.eql-iconfinder-note{' +
'margin-top:.7rem;' +
'color:#7f8b9b;' +
'font-size:.78rem;' +
'line-height:1.35;' +
'}' +

'@media(max-width:850px){' +
'.eql-iconfinder-shell{grid-template-columns:1fr;}' +
'}'
} ).appendTo( document.head );
}

function openDb() {
return new Promise( function ( resolve, reject ) {
var request;

if ( !window.indexedDB ) {
reject( new Error( 'IndexedDB unavailable.' ) );
return;
}

request = indexedDB.open( DB_NAME, DB_VERSION );

request.onupgradeneeded = function () {
var db = request.result;

if ( !db.objectStoreNames.contains( STORE_NAME ) ) {
db.createObjectStore( STORE_NAME, {
keyPath: 'key'
} );
}
};

request.onsuccess = function () {
resolve( request.result );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB open failed.' ) );
};
} );
}

function idbGet( key ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readonly' );
var store = tx.objectStore( STORE_NAME );
var request = store.get( key );

request.onsuccess = function () {
resolve( request.result || null );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB read failed.' ) );
};

tx.oncomplete = function () {
db.close();
};
} );
} );
}

function idbPutAndPrune( value ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readwrite' );
var store = tx.objectStore( STORE_NAME );
var cursorRequest;

store.put( value );

cursorRequest = store.openCursor();

cursorRequest.onsuccess = function () {
var cursor = cursorRequest.result;

if ( !cursor ) {
return;
}

if ( cursor.key !== value.key ) {
cursor.delete();
}

cursor.continue();
};

tx.oncomplete = function () {
db.close();
resolve();
};

tx.onerror = function () {
db.close();
reject( tx.error || new Error( 'IndexedDB write failed.' ) );
};
} );
} );
}

function normalizeFileTitle( title ) {
title = String( title || '' ).trim();

if ( !title ) {
return '';
}

return /^File:/i.test( title )
? title
: 'File:' + title;
}

function fetchCatalog( api ) {
return api.get( {
action: 'parse',
page: ICON_LIST_PAGE,
prop: 'images|revid',
formatversion: 2
} ).then( function ( data ) {
var parse = data && data.parse ? data.parse : {};
var titles = Array.isArray( parse.images ) ? parse.images : [];

titles = titles
.map( normalizeFileTitle )
.filter( Boolean )
.filter( function ( title, index, list ) {
return list.indexOf( title ) === index;
} );

return {
revid: Number( parse.revid ) || 0,
titles: titles
};
} );
}

function chunk( list, size ) {
var out = [];
var i;

for ( i = 0; i < list.length; i += size ) {
out.push( list.slice( i, i + size ) );
}

return out;
}

function fetchImageInfo( api, titles, setStatus ) {
var batches = chunk( titles, IMAGEINFO_BATCH );
var records = [];
var chain = Promise.resolve();

batches.forEach( function ( batch, batchIndex ) {
chain = chain.then( function () {
if ( setStatus ) {
setStatus(
'Reading uploaded icon files… ' +
Math.min( batchIndex * IMAGEINFO_BATCH, titles.length ) +
' / ' + titles.length
);
}

return api.get( {
action: 'query',
prop: 'imageinfo',
titles: batch.join( '|' ),
iiprop: 'url|size|sha1',
formatversion: 2
} ).then( function ( data ) {
var pages =
data &&
data.query &&
Array.isArray( data.query.pages )
? data.query.pages
: [];

pages.forEach( function ( page ) {
var info =
page &&
Array.isArray( page.imageinfo ) &&
page.imageinfo.length
? page.imageinfo[ 0 ]
: null;

if ( !info || !info.url ) {
return;
}

records.push( {
title: normalizeFileTitle( page.title ),
url: String( info.url ),
sha1: String( info.sha1 || '' ),
width: Number( info.width ) || 0,
height: Number( info.height ) || 0
} );
} );
} );
} );
} );

return chain.then( function () {
return records;
} );
}

function blobToDrawable( blob ) {
if ( window.createImageBitmap ) {
return createImageBitmap( blob );
}

return new Promise( function ( resolve, reject ) {
var url = URL.createObjectURL( blob );
var img = new Image();

img.onload = function () {
URL.revokeObjectURL( url );
resolve( img );
};

img.onerror = function () {
URL.revokeObjectURL( url );
reject( new Error( 'Image decode failed.' ) );
};

img.src = url;
} );
}

function fetchDrawable( url ) {
return fetch( url, {
credentials: 'same-origin',
cache: 'force-cache'
} )
.then( function ( response ) {
if ( !response.ok ) {
throw new Error( 'HTTP ' + response.status );
}

return response.blob();
} )
.then( blobToDrawable );
}

function closeDrawable( drawable ) {
if ( drawable && typeof drawable.close === 'function' ) {
drawable.close();
}
}

function drawScaled( drawable, width, height, cropFraction ) {
var sourceCanvas = document.createElement( 'canvas' );
var sourceWidth =
Number( drawable.width || drawable.naturalWidth ) || 1;
var sourceHeight =
Number( drawable.height || drawable.naturalHeight ) || 1;
var sourceCtx;
var sourceImage;
var sourceData;
var pixelCount = sourceWidth * sourceHeight;
var transparentCount = 0;
var mask = new Uint8Array( pixelCount );
var foregroundCount = 0;
var borderR = [];
var borderG = [];
var borderB = [];
var bgR = 0;
var bgG = 0;
var bgB = 0;
var bgLuma = 0;
var borderSpread = [];
var tolerance;
var darkCutoff;
var minX = sourceWidth;
var minY = sourceHeight;
var maxX = -1;
var maxY = -1;
var cleanCanvas;
var cleanCtx;
var cleanImage;
var targetCanvas;
var targetCtx;
var usableWidth;
var usableHeight;
var scale;
var drawWidth;
var drawHeight;
var drawX;
var drawY;
var i;
var p;
var x;
var y;
var r;
var g;
var b;
var a;
var luma;
var chroma;
var maxChannel;
var minChannel;
var colorDistance;

function median( values ) {
var sorted;

if ( !values.length ) {
return 0;
}

sorted = values.slice().sort(
function ( left, right ) {
return left - right;
}
);

return sorted[
Math.floor( sorted.length / 2 )
];
}

function addBorderPixel( px, py ) {
var index =
( py * sourceWidth + px ) * 4;

if ( sourceData[ index + 3 ] < 16 ) {
return;
}

borderR.push( sourceData[ index ] );
borderG.push( sourceData[ index + 1 ] );
borderB.push( sourceData[ index + 2 ] );
}

sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;

sourceCtx = sourceCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

/*
* Preserve real PNG transparency.
*/
sourceCtx.clearRect(
0,
0,
sourceWidth,
sourceHeight
);

sourceCtx.drawImage(
drawable,
0,
0
);

sourceImage = sourceCtx.getImageData(
0,
0,
sourceWidth,
sourceHeight
);

sourceData = sourceImage.data;

for ( i = 0; i < pixelCount; i++ ) {
if ( sourceData[ i * 4 + 3 ] < 245 ) {
transparentCount++;
}
}

if (
transparentCount >
Math.max( 4, pixelCount * 0.01 )
) {
/*
* Uploaded transparent PNG:
* alpha is already an excellent mask.
*/
for ( i = 0; i < pixelCount; i++ ) {
if (
sourceData[ i * 4 + 3 ] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
} else {
/*
* Pasted screenshot:
*
* Infer the UI background from a two-pixel
* border around the capture.
*/
for (
x = 0;
x < sourceWidth;
x++
) {
for (
y = 0;
y < Math.min(
2,
sourceHeight
);
y++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
x,
sourceHeight - 1 - y
);
}
}

for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < Math.min(
2,
sourceWidth
);
x++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
sourceWidth - 1 - x,
y
);
}
}

bgR = median( borderR );
bgG = median( borderG );
bgB = median( borderB );

bgLuma = luminance(
bgR,
bgG,
bgB
);

for (
i = 0;
i < borderR.length;
i++
) {
borderSpread.push(
Math.sqrt(
Math.pow(
borderR[ i ] - bgR,
2
) +
Math.pow(
borderG[ i ] - bgG,
2
) +
Math.pow(
borderB[ i ] - bgB,
2
)
)
);
}

/*
* The old crop variants blindly trimmed the
* image square.
*
* Now they instead make background removal
* slightly more aggressive.
*/
tolerance = Math.max(
20,
Math.min(
74,
18 +
median(
borderSpread
) * 2.5 +
cropFraction * 80
)
);

darkCutoff = Math.max(
36,
Math.min(
88,
bgLuma +
22 +
cropFraction * 100
)
);

for (
i = 0;
i < pixelCount;
i++
) {
p = i * 4;

r = sourceData[ p ];
g = sourceData[ p + 1 ];
b = sourceData[ p + 2 ];
a = sourceData[ p + 3 ];

if ( a < 16 ) {
continue;
}

maxChannel = Math.max(
r,
g,
b
);

minChannel = Math.min(
r,
g,
b
);

chroma =
maxChannel -
minChannel;

luma = luminance(
r,
g,
b
);

colorDistance =
Math.sqrt(
Math.pow(
r - bgR,
2
) +
Math.pow(
g - bgG,
2
) +
Math.pow(
b - bgB,
2
)
);

/*
* EQ's editor/game icon background is
* normally very dark.
*
* Discard dark neutral pixels, but allow
* strongly colored pixels to survive at
* lower brightness.
*/
if ( bgLuma < 95 ) {
if (
(
luma >=
darkCutoff &&
colorDistance >=
tolerance *
0.65
) ||
(
chroma >= 24 &&
luma >=
bgLuma +
7 +
cropFraction *
30 &&
colorDistance >=
tolerance *
0.55
)
) {
mask[ i ] = 1;
foregroundCount++;
}
} else if (
colorDistance >=
tolerance
) {
mask[ i ] = 1;
foregroundCount++;
}
}

/*
* Fail soft for an unusual image instead of
* producing an empty fingerprint.
*/
if (
foregroundCount < 6 ||
foregroundCount >
pixelCount * 0.90
) {
mask.fill( 0 );
foregroundCount = 0;

for (
i = 0;
i < pixelCount;
i++
) {
if (
sourceData[
i * 4 + 3
] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
}
}

/*
* Find the actual sprite bounds.
*/
for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < sourceWidth;
x++
) {
i =
y * sourceWidth +
x;

if ( !mask[ i ] ) {
continue;
}

minX = Math.min(
minX,
x
);

minY = Math.min(
minY,
y
);

maxX = Math.max(
maxX,
x
);

maxY = Math.max(
maxY,
y
);
}
}

if (
maxX < minX ||
maxY < minY
) {
minX = 0;
minY = 0;
maxX = sourceWidth - 1;
maxY = sourceHeight - 1;
}

/*
* Create a transparent copy containing only
* detected foreground pixels.
*/
cleanCanvas =
document.createElement(
'canvas'
);

cleanCanvas.width =
sourceWidth;

cleanCanvas.height =
sourceHeight;

cleanCtx =
cleanCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

cleanImage =
cleanCtx.createImageData(
sourceWidth,
sourceHeight
);

for (
i = 0;
i < pixelCount;
i++
) {
if ( !mask[ i ] ) {
continue;
}

p = i * 4;

cleanImage.data[ p ] =
sourceData[ p ];

cleanImage.data[ p + 1 ] =
sourceData[ p + 1 ];

cleanImage.data[ p + 2 ] =
sourceData[ p + 2 ];

cleanImage.data[ p + 3 ] =
255;
}

cleanCtx.putImageData(
cleanImage,
0,
0
);

/*
* Normalize the detected sprite to the requested
* comparison size.
*/
targetCanvas =
document.createElement(
'canvas'
);

targetCanvas.width = width;
targetCanvas.height = height;

targetCtx =
targetCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

targetCtx.fillStyle = '#000';

targetCtx.fillRect(
0,
0,
width,
height
);

targetCtx.imageSmoothingEnabled =
true;

if (
'imageSmoothingQuality' in
targetCtx
) {
targetCtx.imageSmoothingQuality =
'high';
}

usableWidth =
Math.max(
1,
width - 2
);

usableHeight =
Math.max(
1,
height - 2
);

scale = Math.min(
usableWidth /
Math.max(
1,
maxX - minX + 1
),
usableHeight /
Math.max(
1,
maxY - minY + 1
)
);

drawWidth = Math.max(
1,
Math.round(
(
maxX -
minX +
1
) * scale
)
);

drawHeight = Math.max(
1,
Math.round(
(
maxY -
minY +
1
) * scale
)
);

drawX = Math.floor(
(
width -
drawWidth
) / 2
);

drawY = Math.floor(
(
height -
drawHeight
) / 2
);

targetCtx.drawImage(
cleanCanvas,
minX,
minY,
maxX - minX + 1,
maxY - minY + 1,
drawX,
drawY,
drawWidth,
drawHeight
);

return targetCtx.getImageData(
0,
0,
width,
height
);
}
function luminance( r, g, b ) {
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function computeDHash( drawable, cropFraction ) {
var imageData = drawScaled( drawable, 9, 8, cropFraction );
var data = imageData.data;
var hi = 0;
var lo = 0;
var bit = 0;
var y;
var x;
var left;
var right;
var li;
var ri;

for ( y = 0; y < 8; y++ ) {
for ( x = 0; x < 8; x++ ) {
li = ( y * 9 + x ) * 4;
ri = ( y * 9 + x + 1 ) * 4;

left = luminance(
data[ li ],
data[ li + 1 ],
data[ li + 2 ]
);

right = luminance(
data[ ri ],
data[ ri + 1 ],
data[ ri + 2 ]
);

if ( left > right ) {
if ( bit < 32 ) {
lo = ( lo | ( 1 << bit ) ) >>> 0;
} else {
hi = ( hi | ( 1 << ( bit - 32 ) ) ) >>> 0;
}
}

bit++;
}
}

return {
hi: hi >>> 0,
lo: lo >>> 0
};
}

function computeColorGrid( drawable, cropFraction ) {
var imageData = drawScaled(
drawable,
COLOR_GRID,
COLOR_GRID,
cropFraction
);
var data = imageData.data;
var out = new Uint8Array( COLOR_GRID * COLOR_GRID * 3 );
var source = 0;
var target = 0;

while ( source < data.length ) {
out[ target++ ] = data[ source ];
out[ target++ ] = data[ source + 1 ];
out[ target++ ] = data[ source + 2 ];
source += 4;
}

return out;
}

function fingerprintDrawable( drawable, cropFraction ) {
var hash = computeDHash( drawable, cropFraction );

return {
hashHi: hash.hi,
hashLo: hash.lo,
rgb: computeColorGrid( drawable, cropFraction )
};
}

function popcount32( value ) {
value = value >>> 0;
value = value - ( ( value >>> 1 ) & 0x55555555 );
value = ( value & 0x33333333 ) + ( ( value >>> 2 ) & 0x33333333 );
return (
(
(
value + ( value >>> 4 )
) & 0x0F0F0F0F
) * 0x01010101
) >>> 24;
}

function fingerprintDistance( a, b ) {
var hashBits =
popcount32(
(
a.hashHi ^
b.hashHi
) >>> 0
) +
popcount32(
(
a.hashLo ^
b.hashLo
) >>> 0
);

var hashDistance =
hashBits / 64;

var length = Math.min(
a.rgb.length,
b.rgb.length
);

var histogramA =
new Uint16Array( 64 );

var histogramB =
new Uint16Array( 64 );

var foregroundA = 0;
var foregroundB = 0;
var intersection = 0;
var union = 0;
var colorSum = 0;
var i;
var ar;
var ag;
var ab;
var br;
var bg;
var bb;
var aForeground;
var bForeground;
var dr;
var dg;
var db;
var binA;
var binB;
var shapeDistance;
var colorDistance;
var histogramDistance = 0;

for (
i = 0;
i + 2 < length;
i += 3
) {
ar = a.rgb[ i ];
ag = a.rgb[ i + 1 ];
ab = a.rgb[ i + 2 ];

br = b.rgb[ i ];
bg = b.rgb[ i + 1 ];
bb = b.rgb[ i + 2 ];

/*
* Background is normalized to black by
* drawScaled().
*/
aForeground =
Math.max(
ar,
ag,
ab
) > 8;

bForeground =
Math.max(
br,
bg,
bb
) > 8;

if ( aForeground ) {
foregroundA++;

binA =
(
Math.min(
3,
ar >> 6
) << 4
) |
(
Math.min(
3,
ag >> 6
) << 2
) |
Math.min(
3,
ab >> 6
);

histogramA[ binA ]++;
}

if ( bForeground ) {
foregroundB++;

binB =
(
Math.min(
3,
br >> 6
) << 4
) |
(
Math.min(
3,
bg >> 6
) << 2
) |
Math.min(
3,
bb >> 6
);

histogramB[ binB ]++;
}

if (
aForeground ||
bForeground
) {
union++;
}

if (
!aForeground ||
!bForeground
) {
continue;
}

intersection++;

dr = ar - br;
dg = ag - bg;
db = ab - bb;

colorSum +=
Math.sqrt(
dr * dr +
dg * dg +
db * db
) /
441.67295593;
}

shapeDistance =
union
? 1 -
intersection /
union
: 1;

colorDistance =
intersection
? colorSum /
intersection
: 1;

for (
i = 0;
i < 64;
i++
) {
histogramDistance +=
Math.abs(
histogramA[ i ] /
Math.max(
1,
foregroundA
) -
histogramB[ i ] /
Math.max(
1,
foregroundB
)
);
}

/*
* Normalized histogram L1 range is 0..2.
*/
histogramDistance =
Math.min(
1,
histogramDistance / 2
);

/*
* Foreground color is deliberately the largest
* contributor now.
*/
return Math.min(
1,
0.50 * colorDistance +
0.25 * shapeDistance +
0.15 * histogramDistance +
0.10 * hashDistance
);
}
function mapLimit( list, limit, worker ) {
var nextIndex = 0;
var workers = [];
var i;

function runWorker() {
var index;

if ( nextIndex >= list.length ) {
return Promise.resolve();
}

index = nextIndex++;
return Promise.resolve( worker( list[ index ], index ) )
.then( runWorker );
}

for ( i = 0; i < Math.min( limit, list.length ); i++ ) {
workers.push( runWorker() );
}

return Promise.all( workers );
}

function buildFingerprintIndex( records, setStatus ) {
var complete = 0;
var successful = [];
var grouped = Object.create( null );
var groups = [];

/*
* If several icon filenames are byte-identical, imageinfo gives them
* the same SHA-1. Fingerprint that image only once and fan the result
* back out to every filename. This can substantially reduce the first
* build's static-file traffic without changing the visible results.
*/
records.forEach( function ( record ) {
var key = record.sha1 || record.url;

if ( !grouped[ key ] ) {
grouped[ key ] = {
key: key,
representative: record,
records: []
};
groups.push( grouped[ key ] );
}

grouped[ key ].records.push( record );
} );

return mapLimit(
groups,
DOWNLOAD_CONCURRENCY,
function ( group ) {
return fetchDrawable( group.representative.url )
.then( function ( drawable ) {
var fp = fingerprintDrawable( drawable, 0 );

closeDrawable( drawable );

group.records.forEach( function ( record ) {
successful.push( {
title: record.title,
url: record.url,
sha1: record.sha1,
width: record.width,
height: record.height,
hashHi: fp.hashHi,
hashLo: fp.hashLo,
rgb: fp.rgb
} );
} );
} )
.catch( function () {
/*
* A missing/corrupt/non-raster file should not prevent
* the rest of the icon index from becoming usable.
*/
} )
.then( function () {
complete++;

if (
setStatus &&
(
complete === groups.length ||
complete % 25 === 0
)
) {
setStatus(
'Building pixel index… ' +
complete + ' / ' + groups.length +
' unique images (' +
records.length + ' filenames)'
);
}
} );
}
).then( function () {
return successful;
} );
}

function cacheKey( revid ) {
return [
'icon-list',
ALGO_VERSION,
revid
].join( ':' );
}

function getOrBuildIndex( api, setStatus ) {
if ( memoryIndex ) {
return Promise.resolve( memoryIndex );
}

setStatus( 'Reading Icon List…' );

return fetchCatalog( api ).then( function ( catalog ) {
var key = cacheKey( catalog.revid );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;
setStatus(
'Icon index ready: ' +
memoryIndex.length +
' uploaded icons (cached locally).'
);
return memoryIndex;
}

return fetchImageInfo(
api,
catalog.titles,
setStatus
).then( function ( imageRecords ) {
setStatus(
'Found ' + imageRecords.length +
' uploaded icons. Building pixel index…'
);

return buildFingerprintIndex(
imageRecords,
setStatus
);
} ).then( function ( records ) {
memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' uploaded icons.'
);

return idbPutAndPrune( {
key: key,
revid: catalog.revid,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/*
* Matching still works for this session even if
* the browser blocks persistent storage.
*/
} )
.then( function () {
return records;
} );
} );
} );
} );
}

function fingerprintPastedImage( drawable ) {
/*
* Small centered crop variants make the matcher forgiving of a
* 1-2 pixel screen-capture border while still preferring an exact crop.
*/
return [
fingerprintDrawable( drawable, 0 ),
fingerprintDrawable( drawable, 0.035 ),
fingerprintDrawable( drawable, 0.07 )
];
}

function rankMatches( targetFingerprints, records ) {
var ranked = records.map( function ( record ) {
var candidate = {
hashHi: record.hashHi,
hashLo: record.hashLo,
rgb: record.rgb
};

var distance = Infinity;

targetFingerprints.forEach( function ( target ) {
distance = Math.min(
distance,
fingerprintDistance( target, candidate )
);
} );

return {
record: record,
distance: distance,
similarity: Math.max(
0,
Math.min( 100, ( 1 - distance ) * 100 )
)
};
} );

ranked.sort( function ( a, b ) {
return a.distance - b.distance;
} );

return ranked.slice( 0, RESULT_COUNT );
}

function cleanDisplayTitle( title ) {
return String( title || '' ).replace( /^File:/i, '' );
}

function iconMetadata( title ) {
var clean = cleanDisplayTitle( title );
var itemMatch = clean.match( /^Item\s+(\d+)\.png$/i );
var spellMatch = clean.match( /^Spellicon_([^.]*)\.png$/i );
var id = '';
var kind = 'Icon file';
var parameter = '';

if ( itemMatch ) {
id = itemMatch[ 1 ];
kind = 'Item icon';
parameter = '|lucy_img_ID = ' + id;
} else if ( spellMatch ) {
id = spellMatch[ 1 ];
kind = 'Spell icon';
parameter = '|spellicon = ' + id;
}

return {
kind: kind,
id: id,
filename: clean,
parameter: parameter,
rawWiki: '[[File:' + clean + ']]',
staticWiki: '[[File:' + clean + '|32x32px]]',
scaledWiki: '[[File:' + clean + '|frameless|upright=1.5]]'
};
}

function copyText( text, button ) {
var original = button.textContent;

function done() {
button.textContent = 'Copied';
window.setTimeout( function () {
button.textContent = original;
}, 1000 );
}

if (
navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function'
) {
navigator.clipboard.writeText( text )
.then( done )
.catch( function () {
window.prompt( 'Copy:', text );
} );
return;
}

window.prompt( 'Copy:', text );
}

function makeCopyButton( label, value ) {
var button = document.createElement( 'button' );

button.className = 'eql-iconfinder-copy';
button.type = 'button';
button.textContent = label;

button.addEventListener( 'click', function () {
copyText( value, button );
} );

return button;
}

function renderMatches( container, matches ) {
container.innerHTML = '';

var grid = document.createElement( 'div' );
grid.className = 'eql-iconfinder-results-grid';
container.appendChild( grid );

matches.forEach( function ( match ) {
var record = match.record;
var meta = iconMetadata( record.title );
var card = document.createElement( 'div' );
var img = document.createElement( 'img' );
var textWrap = document.createElement( 'div' );
var link = document.createElement( 'a' );
var score = document.createElement( 'span' );
var iconId = document.createElement( 'span' );
var metadata = document.createElement( 'span' );
var copyRow = document.createElement( 'div' );

card.className = 'eql-iconfinder-result';

img.src = record.url;
img.alt = meta.filename;
img.loading = 'lazy';

link.className = 'eql-iconfinder-result-name';
link.href = mw.util.getUrl( record.title );
link.target = '_blank';
link.rel = 'noopener';
link.textContent = meta.filename;

score.className = 'eql-iconfinder-result-score';
score.textContent =
'Match score ' + match.similarity.toFixed( 1 );

iconId.className = 'eql-iconfinder-result-id';
iconId.textContent = meta.id
? 'Icon ' + meta.id
: meta.filename;

metadata.className = 'eql-iconfinder-result-meta';
metadata.textContent = meta.kind;

copyRow.className = 'eql-iconfinder-copy-row';

if ( meta.id ) {
copyRow.appendChild(
makeCopyButton( 'Copy ID', meta.id )
);
}

if ( meta.parameter ) {
copyRow.appendChild(
makeCopyButton( 'Copy Parameter', meta.parameter )
);
}

copyRow.appendChild(
makeCopyButton( 'Raw Wikicode', meta.rawWiki )
);

copyRow.appendChild(
makeCopyButton( '32×32', meta.staticWiki )
);

copyRow.appendChild(
makeCopyButton( 'Scaled', meta.scaledWiki )
);

textWrap.appendChild( link );
textWrap.appendChild( iconId );
textWrap.appendChild( score );
textWrap.appendChild( metadata );
textWrap.appendChild( copyRow );

card.appendChild( img );
card.appendChild( textWrap );
grid.appendChild( card );
} );

var note = document.createElement( 'div' );
note.className = 'eql-iconfinder-note';
note.textContent =
'The tool only identifies likely matches and copies values/wikicode to the clipboard; it never changes the editor. ' +
'For the best result, capture only the square icon with as little surrounding UI as possible.';
container.appendChild( note );
}

function imageFromClipboardEvent( event ) {
var clipboard = event.clipboardData;
var items;
var i;

if ( !clipboard || !clipboard.items ) {
return null;
}

items = clipboard.items;

for ( i = 0; i < items.length; i++ ) {
if (
items[ i ].kind === 'file' &&
/^image\//i.test( items[ i ].type )
) {
return items[ i ].getAsFile();
}
}

return null;
}

function setPreview( img, blob ) {
if ( currentPreviewUrl ) {
URL.revokeObjectURL( currentPreviewUrl );
}

currentPreviewUrl = URL.createObjectURL( blob );
img.src = currentPreviewUrl;
img.classList.add( 'is-visible' );
}

function processBlob( blob, preview, status, results, api ) {
var setStatus = function ( text ) {
status.textContent = text;
};

setPreview( preview, blob );
results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Analyzing pasted icon…' +
'</div>';

return blobToDrawable( blob )
.then( function ( drawable ) {
var targets = fingerprintPastedImage( drawable );
closeDrawable( drawable );

return getOrBuildIndex( api, setStatus )
.then( function ( index ) {
var matches;

if ( !index.length ) {
throw new Error( 'No uploaded icons were found.' );
}

setStatus(
'Comparing against ' +
index.length +
' uploaded icons…'
);

/*
* Yield once so the status message can paint before
* ranking several thousand in-memory fingerprints.
*/
return new Promise( function ( resolve ) {
window.setTimeout( function () {
matches = rankMatches( targets, index );
resolve( matches );
}, 0 );
} );
} );
} )
.then( function ( matches ) {
renderMatches( results, matches );

setStatus(
'Done. Showing the ' +
matches.length +
' closest matches.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'The icon could not be matched.' +
'</div>';

setStatus(
'Icon Finder error: ' +
( error && error.message ? error.message : 'Unknown error' )
);
} );
}

function buildUi( host ) {
var api = new mw.Api();

host.innerHTML = '';

var shell = document.createElement( 'div' );
shell.className = 'eql-iconfinder-shell';

var left = document.createElement( 'div' );
var paste = document.createElement( 'div' );
var instruction = document.createElement( 'div' );
var subinstruction = document.createElement( 'div' );
var preview = document.createElement( 'img' );
var status = document.createElement( 'div' );

paste.className = 'eql-iconfinder-paste';
paste.tabIndex = 0;
paste.setAttribute( 'role', 'button' );
paste.setAttribute(
'aria-label',
'Paste a screen capture of an EverQuest icon'
);

instruction.className = 'eql-iconfinder-instruction';
instruction.textContent =
'Screen capture and paste JUST the Icon';

subinstruction.className = 'eql-iconfinder-subinstruction';
subinstruction.textContent =
'Click this box, then press Ctrl+V. You can also drag an image here.';

preview.className = 'eql-iconfinder-preview';
preview.alt = 'Pasted icon preview';

status.className = 'eql-iconfinder-status';
status.setAttribute( 'aria-live', 'polite' );
status.textContent =
'Nothing is loaded from Icon List until you paste an image.';

paste.appendChild( instruction );
paste.appendChild( subinstruction );
paste.appendChild( preview );

left.appendChild( paste );
left.appendChild( status );

var right = document.createElement( 'div' );
var resultsTitle = document.createElement( 'div' );
var results = document.createElement( 'div' );

resultsTitle.className = 'eql-iconfinder-results-title';
resultsTitle.textContent = 'Possible Matches';

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Paste an icon to search the uploaded images on Icon List.' +
'</div>';

right.appendChild( resultsTitle );
right.appendChild( results );

shell.appendChild( left );
shell.appendChild( right );
host.appendChild( shell );

paste.addEventListener( 'click', function () {
paste.focus();
} );

paste.addEventListener( 'paste', function ( event ) {
var file = imageFromClipboardEvent( event );

if ( !file ) {
status.textContent =
'Clipboard does not contain an image. Screen capture the icon, then paste again.';
return;
}

event.preventDefault();

processBlob(
file,
preview,
status,
results,
api
);
} );

paste.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
} );

paste.addEventListener( 'drop', function ( event ) {
var files;

event.preventDefault();
files = event.dataTransfer && event.dataTransfer.files;

if (
!files ||
!files.length ||
!/^image\//i.test( files[ 0 ].type )
) {
status.textContent = 'Drop an image file here.';
return;
}

processBlob(
files[ 0 ],
preview,
status,
results,
api
);
} );

/*
* Focus the paste target immediately when the panel first opens so
* the normal workflow is: click Icon Finder -> Ctrl+V.
*/
window.setTimeout( function () {
paste.focus();
}, 0 );
}

window.EQLIconFinder = {
init: function ( host ) {
if ( !host ) {
return Promise.reject(
new Error( 'Icon Finder host element is missing.' )
);
}

addStyles();

if ( initializedHost !== host ) {
buildUi( host );
initializedHost = host;
} else {
var paste = host.querySelector( '.eql-iconfinder-paste' );

if ( paste ) {
window.setTimeout( function () {
paste.focus();
}, 0 );
}
}

return Promise.resolve();
}
};

}( mediaWiki, jQuery ) );

MediaWiki:BlueprintLoader.js

2026-08-10T05:58:59Z

Maintenance script: Force refresh of Icon Finder matcher v6

/**
* EQL Wiki - Editor Tools / Dynamic Blueprint Loader
*
* Source-editor behavior:
* - On a new, truly empty page: show the Help:Contents Blueprint selector.
* - On every source edit page: show the Icon Finder button.
* - Heavy Icon Finder logic is lazy-loaded only when opened.
*/
( function ( mw, $ ) {
'use strict';

var BLUEPRINT_PAGE = 'Help:Contents';
var TOOLS_ID = 'eql-editor-tools';
var ICON_FINDER_PAGE = 'MediaWiki:IconFinder.js';

function htmlToText( html ) {
var div = document.createElement( 'div' );
div.innerHTML = String( html || '' );
return ( div.textContent || div.innerText || '' ).trim();
}

function makeLabel( heading ) {
return heading
.replace( /\s+Blueprints?\s*$/i, '' )
.trim() + ' Blueprint';
}

function getEditorContents( $textarea ) {
try {
return String( $textarea.textSelection( 'getContents' ) || '' );
} catch ( e ) {
return String( $textarea.val() || '' );
}
}

function setEditorContents( $textarea, text ) {
try {
$textarea.textSelection( 'setContents', text );
} catch ( e ) {
$textarea.val( text );
}

$textarea.trigger( 'input' );
$textarea.trigger( 'change' );
$textarea.trigger( 'focus' );
}

function extractBlueprint( sectionText ) {
var match;
var blueprint;

sectionText = String( sectionText || '' );

match = sectionText.match(
/<pre(?:\s[^>]*)?>([\s\S]*?)<\/pre>/i
);

if ( !match ) {
return null;
}

blueprint = match[ 1 ];

blueprint = blueprint.replace(
/^\s*<nowiki>([\s\S]*?)<\/nowiki>\s*$/i,
'$1'
);

blueprint = blueprint
.replace( /^\s*\n/, '' )
.replace( /\s+$/, '' );

return blueprint + '\n';
}

function fetchBlueprintSections( api ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'tocdata',
formatversion: 2
} ).then( function ( data ) {
var tocdata =
data &&
data.parse &&
data.parse.tocdata;

var sections =
tocdata &&
Array.isArray( tocdata.sections )
? tocdata.sections
: [];

if ( sections.length ) {
return sections;
}

return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'sections',
formatversion: 2
} ).then( function ( fallbackData ) {
return (
fallbackData &&
fallbackData.parse &&
Array.isArray( fallbackData.parse.sections )
)
? fallbackData.parse.sections
: [];
} );
} );
}

function normalizeBlueprintSections( sections ) {
return sections
.map( function ( section ) {
var heading = htmlToText( section.line || '' );

return {
heading: heading,
label: makeLabel( heading ),
index: String( section.index || '' ),
anchor:
section.linkAnchor ||
section.anchor ||
''
};
} )
.filter( function ( section ) {
return (
section.index &&
/\bBlueprints?\s*$/i.test( section.heading )
);
} );
}

function fetchBlueprintWikitext( api, sectionIndex ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'wikitext',
section: sectionIndex,
formatversion: 2
} ).then( function ( data ) {
var wikitext =
data &&
data.parse
? data.parse.wikitext
: '';

if (
wikitext &&
typeof wikitext === 'object' &&
Object.prototype.hasOwnProperty.call( wikitext, '*' )
) {
wikitext = wikitext[ '*' ];
}

return String( wikitext || '' );
} );
}

function addStyles() {
if ( document.getElementById( 'eql-editor-tools-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-editor-tools-styles',
text:
'#' + TOOLS_ID + '{' +
'box-sizing:border-box;' +
'margin:0 0 1rem 0;' +
'padding:1rem 1.1rem;' +
'background:linear-gradient(180deg,rgba(16,21,29,.97),rgba(9,13,19,.98));' +
'border:1px solid rgba(216,183,92,.38);' +
'border-left:5px solid rgba(216,183,92,.82);' +
'border-radius:8px;' +
'box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);' +
'}' +

'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'display:grid;' +
'grid-template-columns:minmax(0,1fr) auto;' +
'gap:1rem;' +
'align-items:end;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-title,' +
'#' + TOOLS_ID + ' .eql-iconfinder-title{' +
'margin:0 0 .35rem 0;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'letter-spacing:.035em;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-description{' +
'margin:0 0 .7rem 0;' +
'color:#aeb8c7;' +
'font-size:.9rem;' +
'line-height:1.35;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-controls{' +
'display:flex;' +
'flex-wrap:wrap;' +
'align-items:center;' +
'gap:.65rem;' +
'}' +

'#' + TOOLS_ID + ' select{' +
'box-sizing:border-box;' +
'min-width:260px;' +
'max-width:100%;' +
'min-height:2.35rem;' +
'padding:.35rem .55rem;' +
'background:#0b1017;' +
'border:1px solid rgba(216,183,92,.36);' +
'border-radius:5px;' +
'color:#e2e2cf;' +
'}' +

'#' + TOOLS_ID + ' button{' +
'min-height:2.35rem;' +
'padding:.35rem .85rem;' +
'background:linear-gradient(180deg,#806d32,#594817);' +
'border:1px solid #b69c4b;' +
'border-radius:5px;' +
'color:#fff5cc;' +
'font-weight:700;' +
'cursor:pointer;' +
'}' +

'#' + TOOLS_ID + ' button:hover:not(:disabled){' +
'filter:brightness(1.08);' +
'}' +

'#' + TOOLS_ID + ' button:disabled{' +
'cursor:default;' +
'opacity:.55;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-source{' +
'color:#b9c8ff;' +
'font-size:.9rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-status{' +
'display:block;' +
'margin-top:.55rem;' +
'min-height:1.2em;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'display:flex;' +
'flex-direction:column;' +
'align-items:stretch;' +
'justify-content:flex-end;' +
'min-width:150px;' +
'}' +

'#eql-icon-finder-toggle{' +
'white-space:nowrap;' +
'}' +

'#eql-icon-finder-host{' +
'margin-top:1rem;' +
'padding-top:1rem;' +
'border-top:1px solid rgba(216,183,92,.22);' +
'}' +

'#eql-icon-finder-host[hidden]{display:none!important;}' +

'@media(max-width:760px){' +
'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'grid-template-columns:1fr;' +
'}' +
'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'min-width:0;' +
'}' +
'#' + TOOLS_ID + ' select{' +
'width:100%;' +
'min-width:0;' +
'}' +
'}'
} ).appendTo( document.head );
}

function loadIconFinderScript() {
if ( window.EQLIconFinder ) {
return Promise.resolve( window.EQLIconFinder );
}

if ( window.eqlIconFinderLoadingPromise ) {
return window.eqlIconFinderLoadingPromise;
}

window.eqlIconFinderLoadingPromise = new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );

script.src = mw.util.getUrl( ICON_FINDER_PAGE, {
action: 'raw',
ctype: 'text/javascript',
v: '6'
} );

script.async = true;

script.onload = function () {
if ( window.EQLIconFinder ) {
resolve( window.EQLIconFinder );
} else {
reject( new Error( 'IconFinder.js loaded without exposing EQLIconFinder.' ) );
}
};

script.onerror = function () {
reject( new Error( 'Could not load IconFinder.js.' ) );
};

document.head.appendChild( script );
} );

return window.eqlIconFinderLoadingPromise;
}

function buildIconFinderLaunch( $row, $tools ) {
var $launch = $( '<div>', {
class: 'eql-iconfinder-launch'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-iconfinder-title',
text: 'ICON FINDER'
} ).appendTo( $launch );

var $button = $( '<button>', {
id: 'eql-icon-finder-toggle',
type: 'button',
text: 'Icon Finder',
'aria-expanded': 'false'
} ).appendTo( $launch );

var $host = $( '<div>', {
id: 'eql-icon-finder-host',
hidden: true
} ).appendTo( $tools );

$button.on( 'click', function () {
var opening = $host.prop( 'hidden' );

if ( !opening ) {
$host.prop( 'hidden', true );
$button.attr( 'aria-expanded', 'false' );
return;
}

$button.prop( 'disabled', true );
$button.text( 'Loading…' );

loadIconFinderScript()
.then( function ( finder ) {
return finder.init( $host[ 0 ] );
} )
.then( function () {
$host.prop( 'hidden', false );
$button.attr( 'aria-expanded', 'true' );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

$host
.prop( 'hidden', false )
.text( 'Icon Finder could not be loaded.' );

$button.attr( 'aria-expanded', 'true' );
} )
.then( function () {
$button.prop( 'disabled', false );
$button.text( 'Icon Finder' );
} );
} );
}

function buildBlueprintArea( $row, $textarea, api ) {
var $area = $( '<div>', {
class: 'eql-blueprint-area'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-blueprint-title',
text: 'CREATE FROM A BLUEPRINT'
} ).appendTo( $area );

$( '<div>', {
class: 'eql-blueprint-description',
text:
'Load a standard page skeleton from Help:Contents, ' +
'or continue editing the current source below.'
} ).appendTo( $area );

var $controls = $( '<div>', {
class: 'eql-blueprint-controls'
} ).appendTo( $area );

var $select = $( '<select>', {
'aria-label': 'Select page blueprint',
disabled: true
} ).appendTo( $controls );

$( '<option>', {
value: '',
text: 'Loading blueprints...'
} ).appendTo( $select );

var $button = $( '<button>', {
type: 'button',
text: 'Load Blueprint',
disabled: true
} ).appendTo( $controls );

var $sourceLink = $( '<a>', {
class: 'eql-blueprint-source',
href: mw.util.getUrl( BLUEPRINT_PAGE ),
text: 'View Blueprints',
target: '_blank',
rel: 'noopener'
} ).appendTo( $controls );

var $status = $( '<span>', {
class: 'eql-blueprint-status',
'aria-live': 'polite'
} ).appendTo( $area );

fetchBlueprintSections( api )
.then( function ( sections ) {
var blueprints = normalizeBlueprintSections( sections );

$select.empty();

$( '<option>', {
value: '',
text: blueprints.length ?
'Select a blueprint...' :
'No blueprints found'
} ).appendTo( $select );

blueprints.forEach( function ( blueprint ) {
$( '<option>', {
value: blueprint.index,
text: blueprint.label
} )
.attr( 'data-anchor', blueprint.anchor )
.appendTo( $select );
} );

$select.prop( 'disabled', !blueprints.length );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$select.empty().append(
$( '<option>', {
value: '',
text: 'Could not load blueprints'
} )
);

$status.text(
'Could not read Blueprint headings from Help:Contents.'
);
} );

$select.on( 'change', function () {
var $option = $select.find( 'option:selected' );
var anchor = $option.attr( 'data-anchor' ) || '';

$button.prop( 'disabled', !$select.val() );

if ( anchor ) {
$sourceLink.attr(
'href',
mw.util.getUrl( BLUEPRINT_PAGE ) + '#' + anchor
);
$sourceLink.text( 'View This Blueprint' );
} else {
$sourceLink.attr( 'href', mw.util.getUrl( BLUEPRINT_PAGE ) );
$sourceLink.text( 'View Blueprints' );
}

$status.text( '' );
} );

$button.on( 'click', function () {
var sectionIndex = $select.val();
var existing;

if ( !sectionIndex ) {
return;
}

existing = getEditorContents( $textarea );

if (
existing.trim() &&
!window.confirm(
'The editor already contains text. Replace it with the selected blueprint?'
)
) {
return;
}

$button.prop( 'disabled', true );
$select.prop( 'disabled', true );
$status.text( 'Loading current blueprint from Help:Contents...' );

fetchBlueprintWikitext( api, sectionIndex )
.then( function ( sectionText ) {
var blueprint = extractBlueprint( sectionText );

if ( blueprint === null ) {
throw new Error( 'No <pre> block found.' );
}

setEditorContents( $textarea, blueprint );

$status.text(
'Blueprint loaded. Edit the fields below, then publish normally.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$status.text(
'Could not load this blueprint. Check Help:Contents and make sure the section contains a <pre> block.'
);
} )
.then( function () {
$select.prop( 'disabled', false );
$button.prop( 'disabled', !$select.val() );
} );
} );
}

function init() {
var action = mw.config.get( 'wgAction' );
var $textarea;
var $tools;
var $row;
var $editorHost;
var api;

if ( [ 'edit', 'submit' ].indexOf( action ) === -1 ) {
return;
}

$textarea = $( '#wpTextbox1' );

if ( !$textarea.length ) {
return;
}

if ( document.getElementById( TOOLS_ID ) ) {
return;
}

api = new mw.Api();

addStyles();

$tools = $( '<div>', {
id: TOOLS_ID
} );

$row = $( '<div>', {
class: 'eql-editor-tools-row'
} ).appendTo( $tools );

buildBlueprintArea( $row, $textarea, api );

buildIconFinderLaunch( $row, $tools );

$editorHost = $textarea.closest( '.wikiEditor-ui' );

if ( !$editorHost.length ) {
$editorHost = $textarea;
}

$tools.insertBefore( $editorHost );
}

mw.loader.using( [
'mediawiki.api',
'mediawiki.util',
'jquery.textSelection'
] ).then( function () {
$( init );
} );

}( mediaWiki, jQuery ) );

MediaWiki:IconFinder.js

2026-08-10T05:58:58Z

Maintenance script: Improve Icon Finder foreground and color matching

/**
* EQL Wiki - Icon Finder
*
* Lazy-loaded from MediaWiki:BlueprintLoader.js.
*
* Matching workflow:
* 1. User pastes a screen capture containing JUST the icon.
* 2. Read the current image list from [[Icon List]].
* 3. Resolve only existing uploaded files through imageinfo.
* 4. Build compact perceptual fingerprints in the browser.
* 5. Cache that fingerprint index in IndexedDB keyed to the Icon List revision.
* 6. Rank possible matches by perceptual/pixel similarity.
*
* No icon-catalog requests or image downloads happen until the user actually
* pastes an image into the Icon Finder.
*/
( function ( mw, $ ) {
'use strict';

var ICON_LIST_PAGE = 'Icon List';
var DB_NAME = 'eql-icon-finder';
var DB_VERSION = 1;
var STORE_NAME = 'indexes';
var ALGO_VERSION = 6;
var COLOR_GRID = 16;
var IMAGEINFO_BATCH = 50;
var DOWNLOAD_CONCURRENCY = 8;
var RESULT_COUNT = 10;

var initializedHost = null;
var memoryIndex = null;
var currentPreviewUrl = null;

function addStyles() {
if ( document.getElementById( 'eql-icon-finder-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-icon-finder-styles',
text:
'.eql-iconfinder-shell{' +
'display:grid;' +
'grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);' +
'gap:1rem;' +
'align-items:start;' +
'}' +

'.eql-iconfinder-paste{' +
'min-height:160px;' +
'display:flex;' +
'flex-direction:column;' +
'align-items:center;' +
'justify-content:center;' +
'gap:.45rem;' +
'padding:1rem;' +
'background:#080d13;' +
'border:2px dashed rgba(216,183,92,.45);' +
'border-radius:8px;' +
'color:#dfe7ef;' +
'text-align:center;' +
'cursor:paste;' +
'outline:none;' +
'}' +

'.eql-iconfinder-paste:focus{' +
'border-color:#d8b75c;' +
'box-shadow:0 0 0 2px rgba(216,183,92,.13);' +
'}' +

'.eql-iconfinder-instruction{' +
'color:#fff0b5;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-subinstruction{' +
'color:#9faaba;' +
'font-size:.88rem;' +
'line-height:1.35;' +
'}' +

'.eql-iconfinder-preview{' +
'display:none;' +
'width:72px;' +
'height:72px;' +
'object-fit:contain;' +
'image-rendering:auto;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.14);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-preview.is-visible{display:block;}' +

'.eql-iconfinder-status{' +
'margin-top:.65rem;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'line-height:1.4;' +
'}' +

'.eql-iconfinder-results-title{' +
'margin:0 0 .55rem;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-results-empty{' +
'padding:.9rem;' +
'background:rgba(255,255,255,.025);' +
'border:1px solid rgba(255,255,255,.08);' +
'border-radius:7px;' +
'color:#96a2b2;' +
'font-size:.9rem;' +
'}' +

'.eql-iconfinder-results-grid{' +
'display:grid;' +
'grid-template-columns:repeat(auto-fill,minmax(185px,1fr));' +
'gap:.65rem;' +
'}' +

'.eql-iconfinder-result{' +
'display:grid;' +
'grid-template-columns:54px minmax(0,1fr);' +
'gap:.65rem;' +
'align-items:center;' +
'padding:.65rem;' +
'background:rgba(255,255,255,.03);' +
'border:1px solid rgba(255,255,255,.09);' +
'border-radius:7px;' +
'}' +

'.eql-iconfinder-result img{' +
'width:52px;' +
'height:52px;' +
'object-fit:contain;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.1);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-result-name{' +
'display:block;' +
'margin-bottom:.18rem;' +
'color:#b9c8ff;' +
'font-size:.86rem;' +
'line-height:1.2;' +
'word-break:break-word;' +
'}' +

'.eql-iconfinder-result-score{' +
'display:block;' +
'margin-bottom:.28rem;' +
'color:#d8b75c;' +
'font-size:.8rem;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-result-meta{' +
'display:block;' +
'color:#8f9bac;' +
'font-size:.76rem;' +
'line-height:1.25;' +
'}' +

'.eql-iconfinder-result-id{' +
'display:block;' +
'margin:.2rem 0 .35rem;' +
'color:#fff0b5;' +
'font-size:1.05rem;' +
'font-weight:800;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-copy-row{' +
'display:flex;' +
'flex-wrap:wrap;' +
'gap:.3rem;' +
'margin-top:.38rem;' +
'}' +

'.eql-iconfinder-copy{' +
'min-height:1.8rem!important;' +
'padding:.15rem .45rem!important;' +
'font-size:.72rem!important;' +
'}' +

'.eql-iconfinder-note{' +
'margin-top:.7rem;' +
'color:#7f8b9b;' +
'font-size:.78rem;' +
'line-height:1.35;' +
'}' +

'@media(max-width:850px){' +
'.eql-iconfinder-shell{grid-template-columns:1fr;}' +
'}'
} ).appendTo( document.head );
}

function openDb() {
return new Promise( function ( resolve, reject ) {
var request;

if ( !window.indexedDB ) {
reject( new Error( 'IndexedDB unavailable.' ) );
return;
}

request = indexedDB.open( DB_NAME, DB_VERSION );

request.onupgradeneeded = function () {
var db = request.result;

if ( !db.objectStoreNames.contains( STORE_NAME ) ) {
db.createObjectStore( STORE_NAME, {
keyPath: 'key'
} );
}
};

request.onsuccess = function () {
resolve( request.result );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB open failed.' ) );
};
} );
}

function idbGet( key ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readonly' );
var store = tx.objectStore( STORE_NAME );
var request = store.get( key );

request.onsuccess = function () {
resolve( request.result || null );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB read failed.' ) );
};

tx.oncomplete = function () {
db.close();
};
} );
} );
}

function idbPutAndPrune( value ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readwrite' );
var store = tx.objectStore( STORE_NAME );
var cursorRequest;

store.put( value );

cursorRequest = store.openCursor();

cursorRequest.onsuccess = function () {
var cursor = cursorRequest.result;

if ( !cursor ) {
return;
}

if ( cursor.key !== value.key ) {
cursor.delete();
}

cursor.continue();
};

tx.oncomplete = function () {
db.close();
resolve();
};

tx.onerror = function () {
db.close();
reject( tx.error || new Error( 'IndexedDB write failed.' ) );
};
} );
} );
}

function normalizeFileTitle( title ) {
title = String( title || '' ).trim();

if ( !title ) {
return '';
}

return /^File:/i.test( title )
? title
: 'File:' + title;
}

function fetchCatalog( api ) {
return api.get( {
action: 'parse',
page: ICON_LIST_PAGE,
prop: 'images|revid',
formatversion: 2
} ).then( function ( data ) {
var parse = data && data.parse ? data.parse : {};
var titles = Array.isArray( parse.images ) ? parse.images : [];

titles = titles
.map( normalizeFileTitle )
.filter( Boolean )
.filter( function ( title, index, list ) {
return list.indexOf( title ) === index;
} );

return {
revid: Number( parse.revid ) || 0,
titles: titles
};
} );
}

function chunk( list, size ) {
var out = [];
var i;

for ( i = 0; i < list.length; i += size ) {
out.push( list.slice( i, i + size ) );
}

return out;
}

function fetchImageInfo( api, titles, setStatus ) {
var batches = chunk( titles, IMAGEINFO_BATCH );
var records = [];
var chain = Promise.resolve();

batches.forEach( function ( batch, batchIndex ) {
chain = chain.then( function () {
if ( setStatus ) {
setStatus(
'Reading uploaded icon files… ' +
Math.min( batchIndex * IMAGEINFO_BATCH, titles.length ) +
' / ' + titles.length
);
}

return api.get( {
action: 'query',
prop: 'imageinfo',
titles: batch.join( '|' ),
iiprop: 'url|size|sha1',
formatversion: 2
} ).then( function ( data ) {
var pages =
data &&
data.query &&
Array.isArray( data.query.pages )
? data.query.pages
: [];

pages.forEach( function ( page ) {
var info =
page &&
Array.isArray( page.imageinfo ) &&
page.imageinfo.length
? page.imageinfo[ 0 ]
: null;

if ( !info || !info.url ) {
return;
}

records.push( {
title: normalizeFileTitle( page.title ),
url: String( info.url ),
sha1: String( info.sha1 || '' ),
width: Number( info.width ) || 0,
height: Number( info.height ) || 0
} );
} );
} );
} );
} );

return chain.then( function () {
return records;
} );
}

function blobToDrawable( blob ) {
if ( window.createImageBitmap ) {
return createImageBitmap( blob );
}

return new Promise( function ( resolve, reject ) {
var url = URL.createObjectURL( blob );
var img = new Image();

img.onload = function () {
URL.revokeObjectURL( url );
resolve( img );
};

img.onerror = function () {
URL.revokeObjectURL( url );
reject( new Error( 'Image decode failed.' ) );
};

img.src = url;
} );
}

function fetchDrawable( url ) {
return fetch( url, {
credentials: 'same-origin',
cache: 'force-cache'
} )
.then( function ( response ) {
if ( !response.ok ) {
throw new Error( 'HTTP ' + response.status );
}

return response.blob();
} )
.then( blobToDrawable );
}

function closeDrawable( drawable ) {
if ( drawable && typeof drawable.close === 'function' ) {
drawable.close();
}
}

function drawScaled( drawable, width, height, cropFraction ) {
var sourceCanvas = document.createElement( 'canvas' );
var sourceWidth =
Number( drawable.width || drawable.naturalWidth ) || 1;
var sourceHeight =
Number( drawable.height || drawable.naturalHeight ) || 1;
var sourceCtx;
var sourceImage;
var sourceData;
var pixelCount = sourceWidth * sourceHeight;
var transparentCount = 0;
var mask = new Uint8Array( pixelCount );
var foregroundCount = 0;
var borderR = [];
var borderG = [];
var borderB = [];
var bgR = 0;
var bgG = 0;
var bgB = 0;
var bgLuma = 0;
var borderSpread = [];
var tolerance;
var darkCutoff;
var minX = sourceWidth;
var minY = sourceHeight;
var maxX = -1;
var maxY = -1;
var cleanCanvas;
var cleanCtx;
var cleanImage;
var targetCanvas;
var targetCtx;
var usableWidth;
var usableHeight;
var scale;
var drawWidth;
var drawHeight;
var drawX;
var drawY;
var i;
var p;
var x;
var y;
var r;
var g;
var b;
var a;
var luma;
var chroma;
var maxChannel;
var minChannel;
var colorDistance;

function median( values ) {
var sorted;

if ( !values.length ) {
return 0;
}

sorted = values.slice().sort(
function ( left, right ) {
return left - right;
}
);

return sorted[
Math.floor( sorted.length / 2 )
];
}

function addBorderPixel( px, py ) {
var index =
( py * sourceWidth + px ) * 4;

if ( sourceData[ index + 3 ] < 16 ) {
return;
}

borderR.push( sourceData[ index ] );
borderG.push( sourceData[ index + 1 ] );
borderB.push( sourceData[ index + 2 ] );
}

sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;

sourceCtx = sourceCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

/*
* Preserve real PNG transparency.
*/
sourceCtx.clearRect(
0,
0,
sourceWidth,
sourceHeight
);

sourceCtx.drawImage(
drawable,
0,
0
);

sourceImage = sourceCtx.getImageData(
0,
0,
sourceWidth,
sourceHeight
);

sourceData = sourceImage.data;

for ( i = 0; i < pixelCount; i++ ) {
if ( sourceData[ i * 4 + 3 ] < 245 ) {
transparentCount++;
}
}

if (
transparentCount >
Math.max( 4, pixelCount * 0.01 )
) {
/*
* Uploaded transparent PNG:
* alpha is already an excellent mask.
*/
for ( i = 0; i < pixelCount; i++ ) {
if (
sourceData[ i * 4 + 3 ] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
} else {
/*
* Pasted screenshot:
*
* Infer the UI background from a two-pixel
* border around the capture.
*/
for (
x = 0;
x < sourceWidth;
x++
) {
for (
y = 0;
y < Math.min(
2,
sourceHeight
);
y++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
x,
sourceHeight - 1 - y
);
}
}

for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < Math.min(
2,
sourceWidth
);
x++
) {
addBorderPixel(
x,
y
);

addBorderPixel(
sourceWidth - 1 - x,
y
);
}
}

bgR = median( borderR );
bgG = median( borderG );
bgB = median( borderB );

bgLuma = luminance(
bgR,
bgG,
bgB
);

for (
i = 0;
i < borderR.length;
i++
) {
borderSpread.push(
Math.sqrt(
Math.pow(
borderR[ i ] - bgR,
2
) +
Math.pow(
borderG[ i ] - bgG,
2
) +
Math.pow(
borderB[ i ] - bgB,
2
)
)
);
}

/*
* The old crop variants blindly trimmed the
* image square.
*
* Now they instead make background removal
* slightly more aggressive.
*/
tolerance = Math.max(
20,
Math.min(
74,
18 +
median(
borderSpread
) * 2.5 +
cropFraction * 80
)
);

darkCutoff = Math.max(
36,
Math.min(
88,
bgLuma +
22 +
cropFraction * 100
)
);

for (
i = 0;
i < pixelCount;
i++
) {
p = i * 4;

r = sourceData[ p ];
g = sourceData[ p + 1 ];
b = sourceData[ p + 2 ];
a = sourceData[ p + 3 ];

if ( a < 16 ) {
continue;
}

maxChannel = Math.max(
r,
g,
b
);

minChannel = Math.min(
r,
g,
b
);

chroma =
maxChannel -
minChannel;

luma = luminance(
r,
g,
b
);

colorDistance =
Math.sqrt(
Math.pow(
r - bgR,
2
) +
Math.pow(
g - bgG,
2
) +
Math.pow(
b - bgB,
2
)
);

/*
* EQ's editor/game icon background is
* normally very dark.
*
* Discard dark neutral pixels, but allow
* strongly colored pixels to survive at
* lower brightness.
*/
if ( bgLuma < 95 ) {
if (
(
luma >=
darkCutoff &&
colorDistance >=
tolerance *
0.65
) ||
(
chroma >= 24 &&
luma >=
bgLuma +
7 +
cropFraction *
30 &&
colorDistance >=
tolerance *
0.55
)
) {
mask[ i ] = 1;
foregroundCount++;
}
} else if (
colorDistance >=
tolerance
) {
mask[ i ] = 1;
foregroundCount++;
}
}

/*
* Fail soft for an unusual image instead of
* producing an empty fingerprint.
*/
if (
foregroundCount < 6 ||
foregroundCount >
pixelCount * 0.90
) {
mask.fill( 0 );
foregroundCount = 0;

for (
i = 0;
i < pixelCount;
i++
) {
if (
sourceData[
i * 4 + 3
] > 24
) {
mask[ i ] = 1;
foregroundCount++;
}
}
}
}

/*
* Find the actual sprite bounds.
*/
for (
y = 0;
y < sourceHeight;
y++
) {
for (
x = 0;
x < sourceWidth;
x++
) {
i =
y * sourceWidth +
x;

if ( !mask[ i ] ) {
continue;
}

minX = Math.min(
minX,
x
);

minY = Math.min(
minY,
y
);

maxX = Math.max(
maxX,
x
);

maxY = Math.max(
maxY,
y
);
}
}

if (
maxX < minX ||
maxY < minY
) {
minX = 0;
minY = 0;
maxX = sourceWidth - 1;
maxY = sourceHeight - 1;
}

/*
* Create a transparent copy containing only
* detected foreground pixels.
*/
cleanCanvas =
document.createElement(
'canvas'
);

cleanCanvas.width =
sourceWidth;

cleanCanvas.height =
sourceHeight;

cleanCtx =
cleanCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

cleanImage =
cleanCtx.createImageData(
sourceWidth,
sourceHeight
);

for (
i = 0;
i < pixelCount;
i++
) {
if ( !mask[ i ] ) {
continue;
}

p = i * 4;

cleanImage.data[ p ] =
sourceData[ p ];

cleanImage.data[ p + 1 ] =
sourceData[ p + 1 ];

cleanImage.data[ p + 2 ] =
sourceData[ p + 2 ];

cleanImage.data[ p + 3 ] =
255;
}

cleanCtx.putImageData(
cleanImage,
0,
0
);

/*
* Normalize the detected sprite to the requested
* comparison size.
*/
targetCanvas =
document.createElement(
'canvas'
);

targetCanvas.width = width;
targetCanvas.height = height;

targetCtx =
targetCanvas.getContext(
'2d',
{
willReadFrequently: true
}
);

targetCtx.fillStyle = '#000';

targetCtx.fillRect(
0,
0,
width,
height
);

targetCtx.imageSmoothingEnabled =
true;

if (
'imageSmoothingQuality' in
targetCtx
) {
targetCtx.imageSmoothingQuality =
'high';
}

usableWidth =
Math.max(
1,
width - 2
);

usableHeight =
Math.max(
1,
height - 2
);

scale = Math.min(
usableWidth /
Math.max(
1,
maxX - minX + 1
),
usableHeight /
Math.max(
1,
maxY - minY + 1
)
);

drawWidth = Math.max(
1,
Math.round(
(
maxX -
minX +
1
) * scale
)
);

drawHeight = Math.max(
1,
Math.round(
(
maxY -
minY +
1
) * scale
)
);

drawX = Math.floor(
(
width -
drawWidth
) / 2
);

drawY = Math.floor(
(
height -
drawHeight
) / 2
);

targetCtx.drawImage(
cleanCanvas,
minX,
minY,
maxX - minX + 1,
maxY - minY + 1,
drawX,
drawY,
drawWidth,
drawHeight
);

return targetCtx.getImageData(
0,
0,
width,
height
);
}
function luminance( r, g, b ) {
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function computeDHash( drawable, cropFraction ) {
var imageData = drawScaled( drawable, 9, 8, cropFraction );
var data = imageData.data;
var hi = 0;
var lo = 0;
var bit = 0;
var y;
var x;
var left;
var right;
var li;
var ri;

for ( y = 0; y < 8; y++ ) {
for ( x = 0; x < 8; x++ ) {
li = ( y * 9 + x ) * 4;
ri = ( y * 9 + x + 1 ) * 4;

left = luminance(
data[ li ],
data[ li + 1 ],
data[ li + 2 ]
);

right = luminance(
data[ ri ],
data[ ri + 1 ],
data[ ri + 2 ]
);

if ( left > right ) {
if ( bit < 32 ) {
lo = ( lo | ( 1 << bit ) ) >>> 0;
} else {
hi = ( hi | ( 1 << ( bit - 32 ) ) ) >>> 0;
}
}

bit++;
}
}

return {
hi: hi >>> 0,
lo: lo >>> 0
};
}

function computeColorGrid( drawable, cropFraction ) {
var imageData = drawScaled(
drawable,
COLOR_GRID,
COLOR_GRID,
cropFraction
);
var data = imageData.data;
var out = new Uint8Array( COLOR_GRID * COLOR_GRID * 3 );
var source = 0;
var target = 0;

while ( source < data.length ) {
out[ target++ ] = data[ source ];
out[ target++ ] = data[ source + 1 ];
out[ target++ ] = data[ source + 2 ];
source += 4;
}

return out;
}

function fingerprintDrawable( drawable, cropFraction ) {
var hash = computeDHash( drawable, cropFraction );

return {
hashHi: hash.hi,
hashLo: hash.lo,
rgb: computeColorGrid( drawable, cropFraction )
};
}

function popcount32( value ) {
value = value >>> 0;
value = value - ( ( value >>> 1 ) & 0x55555555 );
value = ( value & 0x33333333 ) + ( ( value >>> 2 ) & 0x33333333 );
return (
(
(
value + ( value >>> 4 )
) & 0x0F0F0F0F
) * 0x01010101
) >>> 24;
}

function fingerprintDistance( a, b ) {
var hashBits =
popcount32(
(
a.hashHi ^
b.hashHi
) >>> 0
) +
popcount32(
(
a.hashLo ^
b.hashLo
) >>> 0
);

var hashDistance =
hashBits / 64;

var length = Math.min(
a.rgb.length,
b.rgb.length
);

var histogramA =
new Uint16Array( 64 );

var histogramB =
new Uint16Array( 64 );

var foregroundA = 0;
var foregroundB = 0;
var intersection = 0;
var union = 0;
var colorSum = 0;
var i;
var ar;
var ag;
var ab;
var br;
var bg;
var bb;
var aForeground;
var bForeground;
var dr;
var dg;
var db;
var binA;
var binB;
var shapeDistance;
var colorDistance;
var histogramDistance = 0;

for (
i = 0;
i + 2 < length;
i += 3
) {
ar = a.rgb[ i ];
ag = a.rgb[ i + 1 ];
ab = a.rgb[ i + 2 ];

br = b.rgb[ i ];
bg = b.rgb[ i + 1 ];
bb = b.rgb[ i + 2 ];

/*
* Background is normalized to black by
* drawScaled().
*/
aForeground =
Math.max(
ar,
ag,
ab
) > 8;

bForeground =
Math.max(
br,
bg,
bb
) > 8;

if ( aForeground ) {
foregroundA++;

binA =
(
Math.min(
3,
ar >> 6
) << 4
) |
(
Math.min(
3,
ag >> 6
) << 2
) |
Math.min(
3,
ab >> 6
);

histogramA[ binA ]++;
}

if ( bForeground ) {
foregroundB++;

binB =
(
Math.min(
3,
br >> 6
) << 4
) |
(
Math.min(
3,
bg >> 6
) << 2
) |
Math.min(
3,
bb >> 6
);

histogramB[ binB ]++;
}

if (
aForeground ||
bForeground
) {
union++;
}

if (
!aForeground ||
!bForeground
) {
continue;
}

intersection++;

dr = ar - br;
dg = ag - bg;
db = ab - bb;

colorSum +=
Math.sqrt(
dr * dr +
dg * dg +
db * db
) /
441.67295593;
}

shapeDistance =
union
? 1 -
intersection /
union
: 1;

colorDistance =
intersection
? colorSum /
intersection
: 1;

for (
i = 0;
i < 64;
i++
) {
histogramDistance +=
Math.abs(
histogramA[ i ] /
Math.max(
1,
foregroundA
) -
histogramB[ i ] /
Math.max(
1,
foregroundB
)
);
}

/*
* Normalized histogram L1 range is 0..2.
*/
histogramDistance =
Math.min(
1,
histogramDistance / 2
);

/*
* Foreground color is deliberately the largest
* contributor now.
*/
return Math.min(
1,
0.50 * colorDistance +
0.25 * shapeDistance +
0.15 * histogramDistance +
0.10 * hashDistance
);
}
function mapLimit( list, limit, worker ) {
var nextIndex = 0;
var workers = [];
var i;

function runWorker() {
var index;

if ( nextIndex >= list.length ) {
return Promise.resolve();
}

index = nextIndex++;
return Promise.resolve( worker( list[ index ], index ) )
.then( runWorker );
}

for ( i = 0; i < Math.min( limit, list.length ); i++ ) {
workers.push( runWorker() );
}

return Promise.all( workers );
}

function buildFingerprintIndex( records, setStatus ) {
var complete = 0;
var successful = [];
var grouped = Object.create( null );
var groups = [];

/*
* If several icon filenames are byte-identical, imageinfo gives them
* the same SHA-1. Fingerprint that image only once and fan the result
* back out to every filename. This can substantially reduce the first
* build's static-file traffic without changing the visible results.
*/
records.forEach( function ( record ) {
var key = record.sha1 || record.url;

if ( !grouped[ key ] ) {
grouped[ key ] = {
key: key,
representative: record,
records: []
};
groups.push( grouped[ key ] );
}

grouped[ key ].records.push( record );
} );

return mapLimit(
groups,
DOWNLOAD_CONCURRENCY,
function ( group ) {
return fetchDrawable( group.representative.url )
.then( function ( drawable ) {
var fp = fingerprintDrawable( drawable, 0 );

closeDrawable( drawable );

group.records.forEach( function ( record ) {
successful.push( {
title: record.title,
url: record.url,
sha1: record.sha1,
width: record.width,
height: record.height,
hashHi: fp.hashHi,
hashLo: fp.hashLo,
rgb: fp.rgb
} );
} );
} )
.catch( function () {
/*
* A missing/corrupt/non-raster file should not prevent
* the rest of the icon index from becoming usable.
*/
} )
.then( function () {
complete++;

if (
setStatus &&
(
complete === groups.length ||
complete % 25 === 0
)
) {
setStatus(
'Building pixel index… ' +
complete + ' / ' + groups.length +
' unique images (' +
records.length + ' filenames)'
);
}
} );
}
).then( function () {
return successful;
} );
}

function cacheKey( revid ) {
return [
'icon-list',
ALGO_VERSION,
revid
].join( ':' );
}

function getOrBuildIndex( api, setStatus ) {
if ( memoryIndex ) {
return Promise.resolve( memoryIndex );
}

setStatus( 'Reading Icon List…' );

return fetchCatalog( api ).then( function ( catalog ) {
var key = cacheKey( catalog.revid );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;
setStatus(
'Icon index ready: ' +
memoryIndex.length +
' uploaded icons (cached locally).'
);
return memoryIndex;
}

return fetchImageInfo(
api,
catalog.titles,
setStatus
).then( function ( imageRecords ) {
setStatus(
'Found ' + imageRecords.length +
' uploaded icons. Building pixel index…'
);

return buildFingerprintIndex(
imageRecords,
setStatus
);
} ).then( function ( records ) {
memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' uploaded icons.'
);

return idbPutAndPrune( {
key: key,
revid: catalog.revid,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/*
* Matching still works for this session even if
* the browser blocks persistent storage.
*/
} )
.then( function () {
return records;
} );
} );
} );
} );
}

function fingerprintPastedImage( drawable ) {
/*
* Small centered crop variants make the matcher forgiving of a
* 1-2 pixel screen-capture border while still preferring an exact crop.
*/
return [
fingerprintDrawable( drawable, 0 ),
fingerprintDrawable( drawable, 0.035 ),
fingerprintDrawable( drawable, 0.07 )
];
}

function rankMatches( targetFingerprints, records ) {
var ranked = records.map( function ( record ) {
var candidate = {
hashHi: record.hashHi,
hashLo: record.hashLo,
rgb: record.rgb
};

var distance = Infinity;

targetFingerprints.forEach( function ( target ) {
distance = Math.min(
distance,
fingerprintDistance( target, candidate )
);
} );

return {
record: record,
distance: distance,
similarity: Math.max(
0,
Math.min( 100, ( 1 - distance ) * 100 )
)
};
} );

ranked.sort( function ( a, b ) {
return a.distance - b.distance;
} );

return ranked.slice( 0, RESULT_COUNT );
}

function cleanDisplayTitle( title ) {
return String( title || '' ).replace( /^File:/i, '' );
}

function iconMetadata( title ) {
var clean = cleanDisplayTitle( title );
var itemMatch = clean.match( /^Item\s+(\d+)\.png$/i );
var spellMatch = clean.match( /^Spellicon_([^.]*)\.png$/i );
var id = '';
var kind = 'Icon file';
var parameter = '';

if ( itemMatch ) {
id = itemMatch[ 1 ];
kind = 'Item icon';
parameter = '|lucy_img_ID = ' + id;
} else if ( spellMatch ) {
id = spellMatch[ 1 ];
kind = 'Spell icon';
parameter = '|spellicon = ' + id;
}

return {
kind: kind,
id: id,
filename: clean,
parameter: parameter,
rawWiki: '[[File:' + clean + ']]',
staticWiki: '[[File:' + clean + '|32x32px]]',
scaledWiki: '[[File:' + clean + '|frameless|upright=1.5]]'
};
}

function copyText( text, button ) {
var original = button.textContent;

function done() {
button.textContent = 'Copied';
window.setTimeout( function () {
button.textContent = original;
}, 1000 );
}

if (
navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function'
) {
navigator.clipboard.writeText( text )
.then( done )
.catch( function () {
window.prompt( 'Copy:', text );
} );
return;
}

window.prompt( 'Copy:', text );
}

function makeCopyButton( label, value ) {
var button = document.createElement( 'button' );

button.className = 'eql-iconfinder-copy';
button.type = 'button';
button.textContent = label;

button.addEventListener( 'click', function () {
copyText( value, button );
} );

return button;
}

function renderMatches( container, matches ) {
container.innerHTML = '';

var title = document.createElement( 'div' );
title.className = 'eql-iconfinder-results-title';
title.textContent = 'Possible Matches';
container.appendChild( title );

var grid = document.createElement( 'div' );
grid.className = 'eql-iconfinder-results-grid';
container.appendChild( grid );

matches.forEach( function ( match ) {
var record = match.record;
var meta = iconMetadata( record.title );
var card = document.createElement( 'div' );
var img = document.createElement( 'img' );
var textWrap = document.createElement( 'div' );
var link = document.createElement( 'a' );
var score = document.createElement( 'span' );
var iconId = document.createElement( 'span' );
var metadata = document.createElement( 'span' );
var copyRow = document.createElement( 'div' );

card.className = 'eql-iconfinder-result';

img.src = record.url;
img.alt = meta.filename;
img.loading = 'lazy';

link.className = 'eql-iconfinder-result-name';
link.href = mw.util.getUrl( record.title );
link.target = '_blank';
link.rel = 'noopener';
link.textContent = meta.filename;

score.className = 'eql-iconfinder-result-score';
score.textContent =
'Match score ' + match.similarity.toFixed( 1 );

iconId.className = 'eql-iconfinder-result-id';
iconId.textContent = meta.id
? 'Icon ' + meta.id
: meta.filename;

metadata.className = 'eql-iconfinder-result-meta';
metadata.textContent = meta.kind;

copyRow.className = 'eql-iconfinder-copy-row';

if ( meta.id ) {
copyRow.appendChild(
makeCopyButton( 'Copy ID', meta.id )
);
}

if ( meta.parameter ) {
copyRow.appendChild(
makeCopyButton( 'Copy Parameter', meta.parameter )
);
}

copyRow.appendChild(
makeCopyButton( 'Raw Wikicode', meta.rawWiki )
);

copyRow.appendChild(
makeCopyButton( '32×32', meta.staticWiki )
);

copyRow.appendChild(
makeCopyButton( 'Scaled', meta.scaledWiki )
);

textWrap.appendChild( link );
textWrap.appendChild( iconId );
textWrap.appendChild( score );
textWrap.appendChild( metadata );
textWrap.appendChild( copyRow );

card.appendChild( img );
card.appendChild( textWrap );
grid.appendChild( card );
} );

var note = document.createElement( 'div' );
note.className = 'eql-iconfinder-note';
note.textContent =
'The tool only identifies likely matches and copies values/wikicode to the clipboard; it never changes the editor. ' +
'For the best result, capture only the square icon with as little surrounding UI as possible.';
container.appendChild( note );
}

function imageFromClipboardEvent( event ) {
var clipboard = event.clipboardData;
var items;
var i;

if ( !clipboard || !clipboard.items ) {
return null;
}

items = clipboard.items;

for ( i = 0; i < items.length; i++ ) {
if (
items[ i ].kind === 'file' &&
/^image\//i.test( items[ i ].type )
) {
return items[ i ].getAsFile();
}
}

return null;
}

function setPreview( img, blob ) {
if ( currentPreviewUrl ) {
URL.revokeObjectURL( currentPreviewUrl );
}

currentPreviewUrl = URL.createObjectURL( blob );
img.src = currentPreviewUrl;
img.classList.add( 'is-visible' );
}

function processBlob( blob, preview, status, results, api ) {
var setStatus = function ( text ) {
status.textContent = text;
};

setPreview( preview, blob );
results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Analyzing pasted icon…' +
'</div>';

return blobToDrawable( blob )
.then( function ( drawable ) {
var targets = fingerprintPastedImage( drawable );
closeDrawable( drawable );

return getOrBuildIndex( api, setStatus )
.then( function ( index ) {
var matches;

if ( !index.length ) {
throw new Error( 'No uploaded icons were found.' );
}

setStatus(
'Comparing against ' +
index.length +
' uploaded icons…'
);

/*
* Yield once so the status message can paint before
* ranking several thousand in-memory fingerprints.
*/
return new Promise( function ( resolve ) {
window.setTimeout( function () {
matches = rankMatches( targets, index );
resolve( matches );
}, 0 );
} );
} );
} )
.then( function ( matches ) {
renderMatches( results, matches );

setStatus(
'Done. Showing the ' +
matches.length +
' closest matches.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'The icon could not be matched.' +
'</div>';

setStatus(
'Icon Finder error: ' +
( error && error.message ? error.message : 'Unknown error' )
);
} );
}

function buildUi( host ) {
var api = new mw.Api();

host.innerHTML = '';

var shell = document.createElement( 'div' );
shell.className = 'eql-iconfinder-shell';

var left = document.createElement( 'div' );
var paste = document.createElement( 'div' );
var instruction = document.createElement( 'div' );
var subinstruction = document.createElement( 'div' );
var preview = document.createElement( 'img' );
var status = document.createElement( 'div' );

paste.className = 'eql-iconfinder-paste';
paste.tabIndex = 0;
paste.setAttribute( 'role', 'button' );
paste.setAttribute(
'aria-label',
'Paste a screen capture of an EverQuest icon'
);

instruction.className = 'eql-iconfinder-instruction';
instruction.textContent =
'Screen capture and paste JUST the Icon';

subinstruction.className = 'eql-iconfinder-subinstruction';
subinstruction.textContent =
'Click this box, then press Ctrl+V. You can also drag an image here.';

preview.className = 'eql-iconfinder-preview';
preview.alt = 'Pasted icon preview';

status.className = 'eql-iconfinder-status';
status.setAttribute( 'aria-live', 'polite' );
status.textContent =
'Nothing is loaded from Icon List until you paste an image.';

paste.appendChild( instruction );
paste.appendChild( subinstruction );
paste.appendChild( preview );

left.appendChild( paste );
left.appendChild( status );

var right = document.createElement( 'div' );
var resultsTitle = document.createElement( 'div' );
var results = document.createElement( 'div' );

resultsTitle.className = 'eql-iconfinder-results-title';
resultsTitle.textContent = 'Possible Matches';

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Paste an icon to search the uploaded images on Icon List.' +
'</div>';

right.appendChild( resultsTitle );
right.appendChild( results );

shell.appendChild( left );
shell.appendChild( right );
host.appendChild( shell );

paste.addEventListener( 'click', function () {
paste.focus();
} );

paste.addEventListener( 'paste', function ( event ) {
var file = imageFromClipboardEvent( event );

if ( !file ) {
status.textContent =
'Clipboard does not contain an image. Screen capture the icon, then paste again.';
return;
}

event.preventDefault();

processBlob(
file,
preview,
status,
results,
api
);
} );

paste.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
} );

paste.addEventListener( 'drop', function ( event ) {
var files;

event.preventDefault();
files = event.dataTransfer && event.dataTransfer.files;

if (
!files ||
!files.length ||
!/^image\//i.test( files[ 0 ].type )
) {
status.textContent = 'Drop an image file here.';
return;
}

processBlob(
files[ 0 ],
preview,
status,
results,
api
);
} );

/*
* Focus the paste target immediately when the panel first opens so
* the normal workflow is: click Icon Finder -> Ctrl+V.
*/
window.setTimeout( function () {
paste.focus();
}, 0 );
}

window.EQLIconFinder = {
init: function ( host ) {
if ( !host ) {
return Promise.reject(
new Error( 'Icon Finder host element is missing.' )
);
}

addStyles();

if ( initializedHost !== host ) {
buildUi( host );
initializedHost = host;
} else {
var paste = host.querySelector( '.eql-iconfinder-paste' );

if ( paste ) {
window.setTimeout( function () {
paste.focus();
}, 0 );
}
}

return Promise.resolve();
}
};

}( mediaWiki, jQuery ) );

MediaWiki:BlueprintLoader.js

2026-08-10T05:56:10Z

Maintenance script: Show Blueprint selector on all source editors

/**
* EQL Wiki - Editor Tools / Dynamic Blueprint Loader
*
* Source-editor behavior:
* - On a new, truly empty page: show the Help:Contents Blueprint selector.
* - On every source edit page: show the Icon Finder button.
* - Heavy Icon Finder logic is lazy-loaded only when opened.
*/
( function ( mw, $ ) {
'use strict';

var BLUEPRINT_PAGE = 'Help:Contents';
var TOOLS_ID = 'eql-editor-tools';
var ICON_FINDER_PAGE = 'MediaWiki:IconFinder.js';

function htmlToText( html ) {
var div = document.createElement( 'div' );
div.innerHTML = String( html || '' );
return ( div.textContent || div.innerText || '' ).trim();
}

function makeLabel( heading ) {
return heading
.replace( /\s+Blueprints?\s*$/i, '' )
.trim() + ' Blueprint';
}

function getEditorContents( $textarea ) {
try {
return String( $textarea.textSelection( 'getContents' ) || '' );
} catch ( e ) {
return String( $textarea.val() || '' );
}
}

function setEditorContents( $textarea, text ) {
try {
$textarea.textSelection( 'setContents', text );
} catch ( e ) {
$textarea.val( text );
}

$textarea.trigger( 'input' );
$textarea.trigger( 'change' );
$textarea.trigger( 'focus' );
}

function extractBlueprint( sectionText ) {
var match;
var blueprint;

sectionText = String( sectionText || '' );

match = sectionText.match(
/<pre(?:\s[^>]*)?>([\s\S]*?)<\/pre>/i
);

if ( !match ) {
return null;
}

blueprint = match[ 1 ];

blueprint = blueprint.replace(
/^\s*<nowiki>([\s\S]*?)<\/nowiki>\s*$/i,
'$1'
);

blueprint = blueprint
.replace( /^\s*\n/, '' )
.replace( /\s+$/, '' );

return blueprint + '\n';
}

function fetchBlueprintSections( api ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'tocdata',
formatversion: 2
} ).then( function ( data ) {
var tocdata =
data &&
data.parse &&
data.parse.tocdata;

var sections =
tocdata &&
Array.isArray( tocdata.sections )
? tocdata.sections
: [];

if ( sections.length ) {
return sections;
}

return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'sections',
formatversion: 2
} ).then( function ( fallbackData ) {
return (
fallbackData &&
fallbackData.parse &&
Array.isArray( fallbackData.parse.sections )
)
? fallbackData.parse.sections
: [];
} );
} );
}

function normalizeBlueprintSections( sections ) {
return sections
.map( function ( section ) {
var heading = htmlToText( section.line || '' );

return {
heading: heading,
label: makeLabel( heading ),
index: String( section.index || '' ),
anchor:
section.linkAnchor ||
section.anchor ||
''
};
} )
.filter( function ( section ) {
return (
section.index &&
/\bBlueprints?\s*$/i.test( section.heading )
);
} );
}

function fetchBlueprintWikitext( api, sectionIndex ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'wikitext',
section: sectionIndex,
formatversion: 2
} ).then( function ( data ) {
var wikitext =
data &&
data.parse
? data.parse.wikitext
: '';

if (
wikitext &&
typeof wikitext === 'object' &&
Object.prototype.hasOwnProperty.call( wikitext, '*' )
) {
wikitext = wikitext[ '*' ];
}

return String( wikitext || '' );
} );
}

function addStyles() {
if ( document.getElementById( 'eql-editor-tools-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-editor-tools-styles',
text:
'#' + TOOLS_ID + '{' +
'box-sizing:border-box;' +
'margin:0 0 1rem 0;' +
'padding:1rem 1.1rem;' +
'background:linear-gradient(180deg,rgba(16,21,29,.97),rgba(9,13,19,.98));' +
'border:1px solid rgba(216,183,92,.38);' +
'border-left:5px solid rgba(216,183,92,.82);' +
'border-radius:8px;' +
'box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);' +
'}' +

'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'display:grid;' +
'grid-template-columns:minmax(0,1fr) auto;' +
'gap:1rem;' +
'align-items:end;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-title,' +
'#' + TOOLS_ID + ' .eql-iconfinder-title{' +
'margin:0 0 .35rem 0;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'letter-spacing:.035em;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-description{' +
'margin:0 0 .7rem 0;' +
'color:#aeb8c7;' +
'font-size:.9rem;' +
'line-height:1.35;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-controls{' +
'display:flex;' +
'flex-wrap:wrap;' +
'align-items:center;' +
'gap:.65rem;' +
'}' +

'#' + TOOLS_ID + ' select{' +
'box-sizing:border-box;' +
'min-width:260px;' +
'max-width:100%;' +
'min-height:2.35rem;' +
'padding:.35rem .55rem;' +
'background:#0b1017;' +
'border:1px solid rgba(216,183,92,.36);' +
'border-radius:5px;' +
'color:#e2e2cf;' +
'}' +

'#' + TOOLS_ID + ' button{' +
'min-height:2.35rem;' +
'padding:.35rem .85rem;' +
'background:linear-gradient(180deg,#806d32,#594817);' +
'border:1px solid #b69c4b;' +
'border-radius:5px;' +
'color:#fff5cc;' +
'font-weight:700;' +
'cursor:pointer;' +
'}' +

'#' + TOOLS_ID + ' button:hover:not(:disabled){' +
'filter:brightness(1.08);' +
'}' +

'#' + TOOLS_ID + ' button:disabled{' +
'cursor:default;' +
'opacity:.55;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-source{' +
'color:#b9c8ff;' +
'font-size:.9rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-status{' +
'display:block;' +
'margin-top:.55rem;' +
'min-height:1.2em;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'display:flex;' +
'flex-direction:column;' +
'align-items:stretch;' +
'justify-content:flex-end;' +
'min-width:150px;' +
'}' +

'#eql-icon-finder-toggle{' +
'white-space:nowrap;' +
'}' +

'#eql-icon-finder-host{' +
'margin-top:1rem;' +
'padding-top:1rem;' +
'border-top:1px solid rgba(216,183,92,.22);' +
'}' +

'#eql-icon-finder-host[hidden]{display:none!important;}' +

'@media(max-width:760px){' +
'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'grid-template-columns:1fr;' +
'}' +
'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'min-width:0;' +
'}' +
'#' + TOOLS_ID + ' select{' +
'width:100%;' +
'min-width:0;' +
'}' +
'}'
} ).appendTo( document.head );
}

function loadIconFinderScript() {
if ( window.EQLIconFinder ) {
return Promise.resolve( window.EQLIconFinder );
}

if ( window.eqlIconFinderLoadingPromise ) {
return window.eqlIconFinderLoadingPromise;
}

window.eqlIconFinderLoadingPromise = new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );

script.src = mw.util.getUrl( ICON_FINDER_PAGE, {
action: 'raw',
ctype: 'text/javascript'
} );

script.async = true;

script.onload = function () {
if ( window.EQLIconFinder ) {
resolve( window.EQLIconFinder );
} else {
reject( new Error( 'IconFinder.js loaded without exposing EQLIconFinder.' ) );
}
};

script.onerror = function () {
reject( new Error( 'Could not load IconFinder.js.' ) );
};

document.head.appendChild( script );
} );

return window.eqlIconFinderLoadingPromise;
}

function buildIconFinderLaunch( $row, $tools ) {
var $launch = $( '<div>', {
class: 'eql-iconfinder-launch'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-iconfinder-title',
text: 'ICON FINDER'
} ).appendTo( $launch );

var $button = $( '<button>', {
id: 'eql-icon-finder-toggle',
type: 'button',
text: 'Icon Finder',
'aria-expanded': 'false'
} ).appendTo( $launch );

var $host = $( '<div>', {
id: 'eql-icon-finder-host',
hidden: true
} ).appendTo( $tools );

$button.on( 'click', function () {
var opening = $host.prop( 'hidden' );

if ( !opening ) {
$host.prop( 'hidden', true );
$button.attr( 'aria-expanded', 'false' );
return;
}

$button.prop( 'disabled', true );
$button.text( 'Loading…' );

loadIconFinderScript()
.then( function ( finder ) {
return finder.init( $host[ 0 ] );
} )
.then( function () {
$host.prop( 'hidden', false );
$button.attr( 'aria-expanded', 'true' );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

$host
.prop( 'hidden', false )
.text( 'Icon Finder could not be loaded.' );

$button.attr( 'aria-expanded', 'true' );
} )
.then( function () {
$button.prop( 'disabled', false );
$button.text( 'Icon Finder' );
} );
} );
}

function buildBlueprintArea( $row, $textarea, api ) {
var $area = $( '<div>', {
class: 'eql-blueprint-area'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-blueprint-title',
text: 'CREATE FROM A BLUEPRINT'
} ).appendTo( $area );

$( '<div>', {
class: 'eql-blueprint-description',
text:
'Load a standard page skeleton from Help:Contents, ' +
'or continue editing the current source below.'
} ).appendTo( $area );

var $controls = $( '<div>', {
class: 'eql-blueprint-controls'
} ).appendTo( $area );

var $select = $( '<select>', {
'aria-label': 'Select page blueprint',
disabled: true
} ).appendTo( $controls );

$( '<option>', {
value: '',
text: 'Loading blueprints...'
} ).appendTo( $select );

var $button = $( '<button>', {
type: 'button',
text: 'Load Blueprint',
disabled: true
} ).appendTo( $controls );

var $sourceLink = $( '<a>', {
class: 'eql-blueprint-source',
href: mw.util.getUrl( BLUEPRINT_PAGE ),
text: 'View Blueprints',
target: '_blank',
rel: 'noopener'
} ).appendTo( $controls );

var $status = $( '<span>', {
class: 'eql-blueprint-status',
'aria-live': 'polite'
} ).appendTo( $area );

fetchBlueprintSections( api )
.then( function ( sections ) {
var blueprints = normalizeBlueprintSections( sections );

$select.empty();

$( '<option>', {
value: '',
text: blueprints.length ?
'Select a blueprint...' :
'No blueprints found'
} ).appendTo( $select );

blueprints.forEach( function ( blueprint ) {
$( '<option>', {
value: blueprint.index,
text: blueprint.label
} )
.attr( 'data-anchor', blueprint.anchor )
.appendTo( $select );
} );

$select.prop( 'disabled', !blueprints.length );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$select.empty().append(
$( '<option>', {
value: '',
text: 'Could not load blueprints'
} )
);

$status.text(
'Could not read Blueprint headings from Help:Contents.'
);
} );

$select.on( 'change', function () {
var $option = $select.find( 'option:selected' );
var anchor = $option.attr( 'data-anchor' ) || '';

$button.prop( 'disabled', !$select.val() );

if ( anchor ) {
$sourceLink.attr(
'href',
mw.util.getUrl( BLUEPRINT_PAGE ) + '#' + anchor
);
$sourceLink.text( 'View This Blueprint' );
} else {
$sourceLink.attr( 'href', mw.util.getUrl( BLUEPRINT_PAGE ) );
$sourceLink.text( 'View Blueprints' );
}

$status.text( '' );
} );

$button.on( 'click', function () {
var sectionIndex = $select.val();
var existing;

if ( !sectionIndex ) {
return;
}

existing = getEditorContents( $textarea );

if (
existing.trim() &&
!window.confirm(
'The editor already contains text. Replace it with the selected blueprint?'
)
) {
return;
}

$button.prop( 'disabled', true );
$select.prop( 'disabled', true );
$status.text( 'Loading current blueprint from Help:Contents...' );

fetchBlueprintWikitext( api, sectionIndex )
.then( function ( sectionText ) {
var blueprint = extractBlueprint( sectionText );

if ( blueprint === null ) {
throw new Error( 'No <pre> block found.' );
}

setEditorContents( $textarea, blueprint );

$status.text(
'Blueprint loaded. Edit the fields below, then publish normally.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$status.text(
'Could not load this blueprint. Check Help:Contents and make sure the section contains a <pre> block.'
);
} )
.then( function () {
$select.prop( 'disabled', false );
$button.prop( 'disabled', !$select.val() );
} );
} );
}

function init() {
var action = mw.config.get( 'wgAction' );
var $textarea;
var $tools;
var $row;
var $editorHost;
var api;

if ( [ 'edit', 'submit' ].indexOf( action ) === -1 ) {
return;
}

$textarea = $( '#wpTextbox1' );

if ( !$textarea.length ) {
return;
}

if ( document.getElementById( TOOLS_ID ) ) {
return;
}

api = new mw.Api();

addStyles();

$tools = $( '<div>', {
id: TOOLS_ID
} );

$row = $( '<div>', {
class: 'eql-editor-tools-row'
} ).appendTo( $tools );

buildBlueprintArea( $row, $textarea, api );

buildIconFinderLaunch( $row, $tools );

$editorHost = $textarea.closest( '.wikiEditor-ui' );

if ( !$editorHost.length ) {
$editorHost = $textarea;
}

$tools.insertBefore( $editorHost );
}

mw.loader.using( [
'mediawiki.api',
'mediawiki.util',
'jquery.textSelection'
] ).then( function () {
$( init );
} );

}( mediaWiki, jQuery ) );

MediaWiki:Common.js

2026-08-10T05:38:29Z

Maintenance script: Load Blueprint and Icon Finder tools on source editors

/* =========================================================
* Raid Instance View
*
* Pages containing a heading named "Raid Instance" receive a
* Normal View / Raid View toggle.
*
* Normal View:
* - Shows the regular article
* - Hides the complete Raid Instance section
*
* Raid View:
* - Shows only the Raid Instance section
* - Applies an ornate rose-gold raid theme
* - Adds ?raidview=1 to the URL for shareable raid links
* ========================================================= */

(function () {
'use strict';

if (mw.config.get('wgAction') !== 'view') {
return;
}

mw.loader.using('mediawiki.util').then(function () {
mw.util.addCSS(`
/* ---------- View switching ---------- */

.eql-raid-view-hidden {
display: none !important;
}

#eql-raid-view-toolbar {
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0 1.5rem;
min-height: 84px;
}

#eql-raid-view-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
min-height: 40px;
padding: 0.55rem 1.3rem;
border: 0;
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.055em;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
transition:
transform 150ms ease,
filter 150ms ease,
background 150ms ease,
border-color 150ms ease;
}

#eql-raid-view-toggle:hover {
transform: translateY(-2px);
}

#eql-raid-view-toggle:active {
transform: translateY(1px);
}

#eql-raid-view-toggle:focus-visible {
outline: 2px solid #fff2c2;
outline-offset: 4px;
}

.eql-raid-view-toggle-icon {
font-size: 1.15em;
line-height: 1;
}

/* Large, ornate Raid View button */
#eql-raid-view-toggle.eql-raid-view-toggle--raid {
box-sizing: border-box;
width: min(100%, 420px);
min-height: 80px;
padding: 1rem 3.5rem;
color: #ffe2dc;
background:
linear-gradient(
180deg,
#8f4747 0%,
#6e3036 48%,
#3b1c25 100%
);
clip-path: polygon(
0 50%,
10px 37%,
6px 17%,
26px 13%,
35px 0,
calc(100% - 35px) 0,
calc(100% - 26px) 13%,
calc(100% - 6px) 17%,
calc(100% - 10px) 37%,
100% 50%,
calc(100% - 10px) 63%,
calc(100% - 6px) 83%,
calc(100% - 26px) 87%,
calc(100% - 35px) 100%,
35px 100%,
26px 87%,
6px 83%,
10px 63%
);
font-size: 1.25rem;
letter-spacing: 0.09em;
filter:
drop-shadow(0 3px 3px rgba(0, 0, 0, 0.68))
drop-shadow(0 0 9px rgba(224, 96, 80, 0.34));
text-shadow:
0 1px 1px rgba(0, 0, 0, 0.9),
0 0 8px rgba(255, 182, 170, 0.28);
}

#eql-raid-view-toggle.eql-raid-view-toggle--raid:hover {
background:
linear-gradient(
180deg,
#a85651 0%,
#7c3439 48%,
#481f29 100%
);
filter:
drop-shadow(0 4px 4px rgba(0, 0, 0, 0.72))
drop-shadow(0 0 14px rgba(255, 122, 109, 0.5));
}

/* Restrained Normal View button */
#eql-raid-view-toggle.eql-raid-view-toggle--normal {
color: var(--eql-gold, #d8b75c);
border: 1px solid var(
--eql-border,
rgba(193, 151, 57, 0.36)
);
border-radius: 3px;
background:
linear-gradient(
180deg,
rgba(44, 48, 55, 0.94),
rgba(21, 25, 31, 0.96)
);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.045),
0 2px 5px rgba(0, 0, 0, 0.35);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

#eql-raid-view-toggle.eql-raid-view-toggle--normal:hover {
color: #f2df9b;
border-color: rgba(216, 183, 92, 0.6);
background:
linear-gradient(
180deg,
rgba(55, 59, 66, 0.96),
rgba(28, 32, 38, 0.98)
);
}

/* ---------- Ornate Raid View article ---------- */

html.eql-raid-view #mw-content-text > .mw-parser-output {
position: relative;
isolation: isolate;
box-sizing: border-box;
width: 100%;
max-width: 1120px;
margin: 1.8rem auto 2rem;
padding: clamp(1.4rem, 3vw, 2.4rem);
border: 1px solid rgba(224, 189, 159, 0.48);
border-top: 3px solid #e0bd9f;
border-bottom: 3px solid #783b40;
background-color: rgba(15, 13, 19, 0.94);
background-image:
linear-gradient(
135deg,
rgba(224, 96, 80, 0.045) 25%,
transparent 25%
),
linear-gradient(
225deg,
rgba(224, 96, 80, 0.045) 25%,
transparent 25%
),
radial-gradient(
circle at 50% 0,
rgba(143, 71, 71, 0.26),
transparent 48%
),
linear-gradient(
180deg,
rgba(44, 20, 29, 0.42),
rgba(10, 12, 18, 0.96) 42%,
rgba(18, 12, 18, 0.98)
);
background-position:
0 0,
18px 18px,
0 0,
0 0;
background-size:
36px 36px,
36px 36px,
auto,
auto;
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.52),
0 0 28px rgba(143, 71, 71, 0.12),
inset 0 0 45px rgba(126, 49, 55, 0.08);
}

html.eql-raid-view #mw-content-text > .mw-parser-output::before {
content: "◆ ✦ ◆";
position: absolute;
z-index: 2;
top: -1.15rem;
left: 50%;
min-width: 150px;
padding: 0.38rem 2rem;
color: #f3c1bd;
background:
linear-gradient(
180deg,
#683039,
#2a1821
);
clip-path: polygon(
0 50%,
14px 25%,
28px 25%,
36px 0,
calc(100% - 36px) 0,
calc(100% - 28px) 25%,
calc(100% - 14px) 25%,
100% 50%,
calc(100% - 14px) 75%,
calc(100% - 28px) 75%,
calc(100% - 36px) 100%,
36px 100%,
28px 75%,
14px 75%
);
font-size: 0.82rem;
letter-spacing: 0.45rem;
text-align: center;
text-indent: 0.45rem;
text-shadow: 0 0 8px rgba(255, 182, 170, 0.45);
filter:
drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8))
drop-shadow(0 0 7px rgba(224, 96, 80, 0.25));
transform: translateX(-50%);
pointer-events: none;
}

html.eql-raid-view #mw-content-text > .mw-parser-output::after {
content: "";
position: absolute;
right: 8%;
bottom: -9px;
left: 8%;
height: 15px;
background:
linear-gradient(
90deg,
transparent,
#783b40 18%,
#e0bd9f 50%,
#783b40 82%,
transparent
);
clip-path: polygon(
0 42%,
43% 42%,
46% 0,
50% 42%,
54% 0,
57% 42%,
100% 42%,
100% 58%,
57% 58%,
54% 100%,
50% 58%,
46% 100%,
43% 58%,
0 58%
);
opacity: 0.8;
pointer-events: none;
}

/* Raid Instance title */

html.eql-raid-view #Raid_Instance {
margin-top: 0.3rem;
margin-bottom: 1.35rem;
color: #ffe2dc;
font-variant: small-caps;
letter-spacing: 0.11em;
text-align: center;
text-transform: uppercase;
text-shadow:
0 2px 2px rgba(0, 0, 0, 0.95),
0 0 12px rgba(255, 122, 109, 0.32);
}

html.eql-raid-view #Raid_Instance::before,
html.eql-raid-view #Raid_Instance::after {
content: "◆";
display: inline-block;
margin: 0 0.65em;
color: #e0bd9f;
font-size: 0.55em;
vertical-align: 0.2em;
text-shadow: 0 0 8px rgba(216, 183, 92, 0.4);
}

/* Raid subsection headings */

html.eql-raid-view
#mw-content-text
.mw-parser-output
.mw-heading2 h2 {
color: #f3c1bd;
border-bottom-color: rgba(224, 189, 159, 0.42);
letter-spacing: 0.035em;
text-shadow:
0 1px 1px rgba(0, 0, 0, 0.9),
0 0 7px rgba(143, 71, 71, 0.28);
}

html.eql-raid-view
#mw-content-text
.mw-parser-output
.mw-heading2 h2::before {
content: "◆";
margin-right: 0.55em;
color: #a85651;
font-size: 0.55em;
vertical-align: 0.18em;
}

/* Raid tables and maps */

html.eql-raid-view
#mw-content-text
.mw-parser-output > table {
border-color: rgba(224, 189, 159, 0.42) !important;
background: rgba(9, 11, 17, 0.52);
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.28),
inset 0 0 22px rgba(143, 71, 71, 0.04);
}

html.eql-raid-view
#mw-content-text
.zoneTopTable {
border: 1px solid rgba(224, 189, 159, 0.28);
background: rgba(13, 15, 21, 0.58);
}

html.eql-raid-view
#mw-content-text
.zoneTopTable th {
color: #f3c1bd;
background: rgba(111, 47, 53, 0.16);
}

html.eql-raid-view
#mw-content-text
figure img {
border-color: rgba(224, 189, 159, 0.48);
box-shadow:
0 7px 18px rgba(0, 0, 0, 0.45),
0 0 12px rgba(143, 71, 71, 0.1);
}

/* ---------- Table of contents ---------- */

/* Normal View hides the Raid Instance TOC branch. */
html.eql-normal-view #toc-Raid_Instance {
display: none !important;
}

/* Raid View shows only the Raid Instance TOC branch. */
html.eql-raid-view
#mw-panel-toc-list > li:not(#toc-Raid_Instance) {
display: none !important;
}

html.eql-raid-view
#toc-Raid_Instance
.vector-toc-numb {
display: none;
}

html.eql-raid-view
#toc-Raid_Instance > .vector-toc-link {
color: #f3c1bd;
border-left-color: #a85651;
}

/* ---------- Responsive sizing ---------- */

@media (max-width: 720px) {
#eql-raid-view-toolbar {
justify-content: center;
min-height: 72px;
}

#eql-raid-view-toggle {
width: min(100%, 420px);
}

#eql-raid-view-toggle.eql-raid-view-toggle--raid {
min-height: 68px;
padding: 0.85rem 2.5rem;
font-size: 1.08rem;
}

html.eql-raid-view
#mw-content-text > .mw-parser-output {
margin-top: 1.6rem;
padding: 1.5rem 1rem;
}

html.eql-raid-view #Raid_Instance {
font-size: 1.7rem;
letter-spacing: 0.07em;
}

html.eql-raid-view #Raid_Instance::before,
html.eql-raid-view #Raid_Instance::after {
margin: 0 0.35em;
}
}

@media (prefers-reduced-motion: reduce) {
#eql-raid-view-toggle {
transition: none;
}
}
`);

function getHeadingLevel(element) {
var match;

if (!element || !element.tagName) {
return 0;
}

match = /^H([1-6])$/.exec(element.tagName);

return match ? parseInt(match[1], 10) : 0;
}

function findDirectHeading(element) {
var children;
var i;

if (getHeadingLevel(element)) {
return element;
}

children = element.children;

for (i = 0; i < children.length; i++) {
if (getHeadingLevel(children[i])) {
return children[i];
}
}

return null;
}

function getHashTarget() {
var id;

if (!window.location.hash) {
return null;
}

try {
id = decodeURIComponent(window.location.hash.slice(1));
} catch (error) {
id = window.location.hash.slice(1);
}

return document.getElementById(id);
}

function initializeRaidView($content) {
var hookRoot = $content && $content[0] ?
$content[0] :
document;

var parserOutput = hookRoot.matches &&
hookRoot.matches('.mw-parser-output') ?
hookRoot :
hookRoot.querySelector('.mw-parser-output');

var contentText;
var raidHeading;
var raidAnchor;
var headingCandidates;
var raidStart;
var raidLevel;
var allNodes;
var raidNodes = [];
var raidNodeSet;
var startIndex;
var i;
var nextHeading;
var toolbar;
var button;
var icon;
var label;
var existingToolbar;
var initialRaidView;
var requestedView;
var hashTarget;

if (!parserOutput) {
return;
}

existingToolbar = document.getElementById(
'eql-raid-view-toolbar'
);

if (existingToolbar) {
existingToolbar.remove();
}

document.documentElement.classList.remove(
'eql-normal-view',
'eql-raid-view'
);

/* Prefer the stable MediaWiki heading ID. */
raidAnchor = parserOutput.querySelector('#Raid_Instance');

if (raidAnchor) {
if (getHeadingLevel(raidAnchor)) {
raidHeading = raidAnchor;
} else {
raidHeading =
raidAnchor.closest('h1, h2, h3, h4, h5, h6') ||
raidAnchor.querySelector(
'h1, h2, h3, h4, h5, h6'
);
}
}

/* Fallback for unusual heading markup. */
if (!raidHeading) {
headingCandidates = parserOutput.querySelectorAll(
'h1, h2, h3, h4, h5, h6'
);

for (i = 0; i < headingCandidates.length; i++) {
if (
headingCandidates[i].textContent
.trim()
.toLowerCase() === 'raid instance'
) {
raidHeading = headingCandidates[i];
break;
}
}
}

/* Pages without the heading receive no button. */
if (!raidHeading) {
return;
}

raidLevel = getHeadingLevel(raidHeading);
raidStart = raidHeading;

/*
* MediaWiki 1.45 wraps headings in .mw-heading elements.
* Older versions may leave headings as direct children.
*/
while (
raidStart.parentElement &&
raidStart.parentElement !== parserOutput
) {
raidStart = raidStart.parentElement;
}

if (raidStart.parentElement !== parserOutput) {
return;
}

allNodes = Array.prototype.slice.call(
parserOutput.children
);

startIndex = allNodes.indexOf(raidStart);

if (startIndex === -1) {
return;
}

/*
* The raid section begins at "Raid Instance" and continues
* until the next heading of the same or a higher level.
*/
for (i = startIndex; i < allNodes.length; i++) {
if (i > startIndex) {
nextHeading = findDirectHeading(allNodes[i]);

if (
nextHeading &&
getHeadingLevel(nextHeading) <= raidLevel
) {
break;
}
}

raidNodes.push(allNodes[i]);
}

raidNodeSet = new Set(raidNodes);
contentText = document.getElementById('mw-content-text');

if (!contentText) {
return;
}

/* Build the toggle. */
toolbar = document.createElement('div');
toolbar.id = 'eql-raid-view-toolbar';

button = document.createElement('button');
button.id = 'eql-raid-view-toggle';
button.type = 'button';

icon = document.createElement('span');
icon.className = 'eql-raid-view-toggle-icon';
icon.setAttribute('aria-hidden', 'true');

label = document.createElement('span');
label.className = 'eql-raid-view-toggle-label';

button.appendChild(icon);
button.appendChild(label);
toolbar.appendChild(button);

contentText.parentNode.insertBefore(toolbar, contentText);

function targetIsInRaidSection(target) {
var j;

if (!target) {
return false;
}

for (j = 0; j < raidNodes.length; j++) {
if (
raidNodes[j] === target ||
raidNodes[j].contains(target)
) {
return true;
}
}

return false;
}

function updateUrl(isRaidView) {
var url;
var currentTarget;

try {
url = new URL(window.location.href);

if (isRaidView) {
url.searchParams.set('raidview', '1');
} else {
url.searchParams.delete('raidview');
}

/*
* Remove a fragment if it points to content hidden
* by the newly selected view.
*/
currentTarget = getHashTarget();

if (
currentTarget &&
targetIsInRaidSection(currentTarget) !==
isRaidView
) {
url.hash = '';
}

window.history.replaceState(
window.history.state,
document.title,
url.toString()
);
} catch (error) {
/* View switching still works without URL changes. */
}
}

function setRaidView(isRaidView, changeUrl) {
allNodes.forEach(function (node) {
var shouldHide = isRaidView ?
!raidNodeSet.has(node) :
raidNodeSet.has(node);

node.classList.toggle(
'eql-raid-view-hidden',
shouldHide
);
});

document.documentElement.classList.toggle(
'eql-raid-view',
isRaidView
);

document.documentElement.classList.toggle(
'eql-normal-view',
!isRaidView
);

if (isRaidView) {
icon.textContent = '◆';
label.textContent = 'Switch to Normal View';

button.className =
'eql-raid-view-toggle--normal';

button.setAttribute(
'aria-label',
'Switch to Normal View'
);

button.title = 'Show the normal zone article';
} else {
icon.textContent = '✦';
label.textContent = 'Switch to Raid View';

button.className =
'eql-raid-view-toggle--raid';

button.setAttribute(
'aria-label',
'Switch to Raid View'
);

button.title = 'Show the Raid Instance article';
}

if (changeUrl) {
updateUrl(isRaidView);
}
}

button.addEventListener('click', function () {
setRaidView(
!document.documentElement.classList.contains(
'eql-raid-view'
),
true
);
});

requestedView = new URL(
window.location.href
).searchParams.get('raidview');

hashTarget = getHashTarget();

/*
* ?raidview=1 explicitly requests Raid View.
* Direct links to headings within the raid section also
* select Raid View automatically.
*/
initialRaidView =
requestedView === '1' ||
targetIsInRaidSection(hashTarget);

setRaidView(initialRaidView, false);
}

mw.hook('wikipage.content').add(initializeRaidView);
});
}());
/* =====================================================
EQL editor tools
- Dynamic Blueprint selector on empty/new pages
- Icon Finder on every source-edit page
===================================================== */

( function () {
'use strict';

if (
[
'edit',
'submit'
].indexOf(
mw.config.get( 'wgAction' )
) === -1
) {
return;
}

mw.loader.load(
'/index.php?' +
'title=MediaWiki:BlueprintLoader.js' +
'&action=raw' +
'&ctype=text/javascript'
);
}() );

MediaWiki:IconFinder.js

2026-08-10T05:38:28Z

Maintenance script: Add editor Icon Finder

/**
* EQL Wiki - Icon Finder
*
* Lazy-loaded from MediaWiki:BlueprintLoader.js.
*
* Matching workflow:
* 1. User pastes a screen capture containing JUST the icon.
* 2. Read the current image list from [[Icon List]].
* 3. Resolve only existing uploaded files through imageinfo.
* 4. Build compact perceptual fingerprints in the browser.
* 5. Cache that fingerprint index in IndexedDB keyed to the Icon List revision.
* 6. Rank possible matches by perceptual/pixel similarity.
*
* No icon-catalog requests or image downloads happen until the user actually
* pastes an image into the Icon Finder.
*/
( function ( mw, $ ) {
'use strict';

var ICON_LIST_PAGE = 'Icon List';
var DB_NAME = 'eql-icon-finder';
var DB_VERSION = 1;
var STORE_NAME = 'indexes';
var ALGO_VERSION = 3;
var COLOR_GRID = 12;
var IMAGEINFO_BATCH = 50;
var DOWNLOAD_CONCURRENCY = 8;
var RESULT_COUNT = 10;

var initializedHost = null;
var memoryIndex = null;
var currentPreviewUrl = null;

function addStyles() {
if ( document.getElementById( 'eql-icon-finder-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-icon-finder-styles',
text:
'.eql-iconfinder-shell{' +
'display:grid;' +
'grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);' +
'gap:1rem;' +
'align-items:start;' +
'}' +

'.eql-iconfinder-paste{' +
'min-height:160px;' +
'display:flex;' +
'flex-direction:column;' +
'align-items:center;' +
'justify-content:center;' +
'gap:.45rem;' +
'padding:1rem;' +
'background:#080d13;' +
'border:2px dashed rgba(216,183,92,.45);' +
'border-radius:8px;' +
'color:#dfe7ef;' +
'text-align:center;' +
'cursor:paste;' +
'outline:none;' +
'}' +

'.eql-iconfinder-paste:focus{' +
'border-color:#d8b75c;' +
'box-shadow:0 0 0 2px rgba(216,183,92,.13);' +
'}' +

'.eql-iconfinder-instruction{' +
'color:#fff0b5;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-subinstruction{' +
'color:#9faaba;' +
'font-size:.88rem;' +
'line-height:1.35;' +
'}' +

'.eql-iconfinder-preview{' +
'display:none;' +
'width:72px;' +
'height:72px;' +
'object-fit:contain;' +
'image-rendering:auto;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.14);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-preview.is-visible{display:block;}' +

'.eql-iconfinder-status{' +
'margin-top:.65rem;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'line-height:1.4;' +
'}' +

'.eql-iconfinder-results-title{' +
'margin:0 0 .55rem;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1rem;' +
'font-weight:700;' +
'}' +

'.eql-iconfinder-results-empty{' +
'padding:.9rem;' +
'background:rgba(255,255,255,.025);' +
'border:1px solid rgba(255,255,255,.08);' +
'border-radius:7px;' +
'color:#96a2b2;' +
'font-size:.9rem;' +
'}' +

'.eql-iconfinder-results-grid{' +
'display:grid;' +
'grid-template-columns:repeat(auto-fill,minmax(185px,1fr));' +
'gap:.65rem;' +
'}' +

'.eql-iconfinder-result{' +
'display:grid;' +
'grid-template-columns:54px minmax(0,1fr);' +
'gap:.65rem;' +
'align-items:center;' +
'padding:.65rem;' +
'background:rgba(255,255,255,.03);' +
'border:1px solid rgba(255,255,255,.09);' +
'border-radius:7px;' +
'}' +

'.eql-iconfinder-result img{' +
'width:52px;' +
'height:52px;' +
'object-fit:contain;' +
'background:#000;' +
'border:1px solid rgba(255,255,255,.1);' +
'border-radius:4px;' +
'}' +

'.eql-iconfinder-result-name{' +
'display:block;' +
'margin-bottom:.18rem;' +
'color:#b9c8ff;' +
'font-size:.86rem;' +
'line-height:1.2;' +
'word-break:break-word;' +
'}' +

'.eql-iconfinder-result-score{' +
'display:block;' +
'margin-bottom:.28rem;' +
'color:#d8b75c;' +
'font-size:.8rem;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-result-meta{' +
'display:block;' +
'color:#8f9bac;' +
'font-size:.76rem;' +
'line-height:1.25;' +
'}' +

'.eql-iconfinder-result-id{' +
'display:block;' +
'margin:.2rem 0 .35rem;' +
'color:#fff0b5;' +
'font-size:1.05rem;' +
'font-weight:800;' +
'font-variant-numeric:tabular-nums;' +
'}' +

'.eql-iconfinder-copy-row{' +
'display:flex;' +
'flex-wrap:wrap;' +
'gap:.3rem;' +
'margin-top:.38rem;' +
'}' +

'.eql-iconfinder-copy{' +
'min-height:1.8rem!important;' +
'padding:.15rem .45rem!important;' +
'font-size:.72rem!important;' +
'}' +

'.eql-iconfinder-note{' +
'margin-top:.7rem;' +
'color:#7f8b9b;' +
'font-size:.78rem;' +
'line-height:1.35;' +
'}' +

'@media(max-width:850px){' +
'.eql-iconfinder-shell{grid-template-columns:1fr;}' +
'}'
} ).appendTo( document.head );
}

function openDb() {
return new Promise( function ( resolve, reject ) {
var request;

if ( !window.indexedDB ) {
reject( new Error( 'IndexedDB unavailable.' ) );
return;
}

request = indexedDB.open( DB_NAME, DB_VERSION );

request.onupgradeneeded = function () {
var db = request.result;

if ( !db.objectStoreNames.contains( STORE_NAME ) ) {
db.createObjectStore( STORE_NAME, {
keyPath: 'key'
} );
}
};

request.onsuccess = function () {
resolve( request.result );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB open failed.' ) );
};
} );
}

function idbGet( key ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readonly' );
var store = tx.objectStore( STORE_NAME );
var request = store.get( key );

request.onsuccess = function () {
resolve( request.result || null );
};

request.onerror = function () {
reject( request.error || new Error( 'IndexedDB read failed.' ) );
};

tx.oncomplete = function () {
db.close();
};
} );
} );
}

function idbPutAndPrune( value ) {
return openDb().then( function ( db ) {
return new Promise( function ( resolve, reject ) {
var tx = db.transaction( STORE_NAME, 'readwrite' );
var store = tx.objectStore( STORE_NAME );
var cursorRequest;

store.put( value );

cursorRequest = store.openCursor();

cursorRequest.onsuccess = function () {
var cursor = cursorRequest.result;

if ( !cursor ) {
return;
}

if ( cursor.key !== value.key ) {
cursor.delete();
}

cursor.continue();
};

tx.oncomplete = function () {
db.close();
resolve();
};

tx.onerror = function () {
db.close();
reject( tx.error || new Error( 'IndexedDB write failed.' ) );
};
} );
} );
}

function normalizeFileTitle( title ) {
title = String( title || '' ).trim();

if ( !title ) {
return '';
}

return /^File:/i.test( title )
? title
: 'File:' + title;
}

function fetchCatalog( api ) {
return api.get( {
action: 'parse',
page: ICON_LIST_PAGE,
prop: 'images|revid',
formatversion: 2
} ).then( function ( data ) {
var parse = data && data.parse ? data.parse : {};
var titles = Array.isArray( parse.images ) ? parse.images : [];

titles = titles
.map( normalizeFileTitle )
.filter( Boolean )
.filter( function ( title, index, list ) {
return list.indexOf( title ) === index;
} );

return {
revid: Number( parse.revid ) || 0,
titles: titles
};
} );
}

function chunk( list, size ) {
var out = [];
var i;

for ( i = 0; i < list.length; i += size ) {
out.push( list.slice( i, i + size ) );
}

return out;
}

function fetchImageInfo( api, titles, setStatus ) {
var batches = chunk( titles, IMAGEINFO_BATCH );
var records = [];
var chain = Promise.resolve();

batches.forEach( function ( batch, batchIndex ) {
chain = chain.then( function () {
if ( setStatus ) {
setStatus(
'Reading uploaded icon files… ' +
Math.min( batchIndex * IMAGEINFO_BATCH, titles.length ) +
' / ' + titles.length
);
}

return api.get( {
action: 'query',
prop: 'imageinfo',
titles: batch.join( '|' ),
iiprop: 'url|size|sha1',
formatversion: 2
} ).then( function ( data ) {
var pages =
data &&
data.query &&
Array.isArray( data.query.pages )
? data.query.pages
: [];

pages.forEach( function ( page ) {
var info =
page &&
Array.isArray( page.imageinfo ) &&
page.imageinfo.length
? page.imageinfo[ 0 ]
: null;

if ( !info || !info.url ) {
return;
}

records.push( {
title: normalizeFileTitle( page.title ),
url: String( info.url ),
sha1: String( info.sha1 || '' ),
width: Number( info.width ) || 0,
height: Number( info.height ) || 0
} );
} );
} );
} );
} );

return chain.then( function () {
return records;
} );
}

function blobToDrawable( blob ) {
if ( window.createImageBitmap ) {
return createImageBitmap( blob );
}

return new Promise( function ( resolve, reject ) {
var url = URL.createObjectURL( blob );
var img = new Image();

img.onload = function () {
URL.revokeObjectURL( url );
resolve( img );
};

img.onerror = function () {
URL.revokeObjectURL( url );
reject( new Error( 'Image decode failed.' ) );
};

img.src = url;
} );
}

function fetchDrawable( url ) {
return fetch( url, {
credentials: 'same-origin',
cache: 'force-cache'
} )
.then( function ( response ) {
if ( !response.ok ) {
throw new Error( 'HTTP ' + response.status );
}

return response.blob();
} )
.then( blobToDrawable );
}

function closeDrawable( drawable ) {
if ( drawable && typeof drawable.close === 'function' ) {
drawable.close();
}
}

function drawScaled( drawable, width, height, cropFraction ) {
var canvas = document.createElement( 'canvas' );
var ctx = canvas.getContext( '2d', {
willReadFrequently: true
} );
var sourceWidth = Number( drawable.width || drawable.naturalWidth ) || 1;
var sourceHeight = Number( drawable.height || drawable.naturalHeight ) || 1;
var cropX = Math.round( sourceWidth * cropFraction );
var cropY = Math.round( sourceHeight * cropFraction );
var cropW = Math.max( 1, sourceWidth - cropX * 2 );
var cropH = Math.max( 1, sourceHeight - cropY * 2 );

canvas.width = width;
canvas.height = height;

ctx.imageSmoothingEnabled = true;

if ( 'imageSmoothingQuality' in ctx ) {
ctx.imageSmoothingQuality = 'high';
}

/*
* Transparent pixels in uploaded PNG icons normally render over a dark
* game/UI background in screenshots. Normalizing them to black keeps
* the comparison stable.
*/
ctx.fillStyle = '#000';
ctx.fillRect( 0, 0, width, height );

ctx.drawImage(
drawable,
cropX,
cropY,
cropW,
cropH,
0,
0,
width,
height
);

return ctx.getImageData( 0, 0, width, height );
}

function luminance( r, g, b ) {
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function computeDHash( drawable, cropFraction ) {
var imageData = drawScaled( drawable, 9, 8, cropFraction );
var data = imageData.data;
var hi = 0;
var lo = 0;
var bit = 0;
var y;
var x;
var left;
var right;
var li;
var ri;

for ( y = 0; y < 8; y++ ) {
for ( x = 0; x < 8; x++ ) {
li = ( y * 9 + x ) * 4;
ri = ( y * 9 + x + 1 ) * 4;

left = luminance(
data[ li ],
data[ li + 1 ],
data[ li + 2 ]
);

right = luminance(
data[ ri ],
data[ ri + 1 ],
data[ ri + 2 ]
);

if ( left > right ) {
if ( bit < 32 ) {
lo = ( lo | ( 1 << bit ) ) >>> 0;
} else {
hi = ( hi | ( 1 << ( bit - 32 ) ) ) >>> 0;
}
}

bit++;
}
}

return {
hi: hi >>> 0,
lo: lo >>> 0
};
}

function computeColorGrid( drawable, cropFraction ) {
var imageData = drawScaled(
drawable,
COLOR_GRID,
COLOR_GRID,
cropFraction
);
var data = imageData.data;
var out = new Uint8Array( COLOR_GRID * COLOR_GRID * 3 );
var source = 0;
var target = 0;

while ( source < data.length ) {
out[ target++ ] = data[ source ];
out[ target++ ] = data[ source + 1 ];
out[ target++ ] = data[ source + 2 ];
source += 4;
}

return out;
}

function fingerprintDrawable( drawable, cropFraction ) {
var hash = computeDHash( drawable, cropFraction );

return {
hashHi: hash.hi,
hashLo: hash.lo,
rgb: computeColorGrid( drawable, cropFraction )
};
}

function popcount32( value ) {
value = value >>> 0;
value = value - ( ( value >>> 1 ) & 0x55555555 );
value = ( value & 0x33333333 ) + ( ( value >>> 2 ) & 0x33333333 );
return (
(
(
value + ( value >>> 4 )
) & 0x0F0F0F0F
) * 0x01010101
) >>> 24;
}

function fingerprintDistance( a, b ) {
var hashBits =
popcount32( ( a.hashHi ^ b.hashHi ) >>> 0 ) +
popcount32( ( a.hashLo ^ b.hashLo ) >>> 0 );

var hashDistance = hashBits / 64;
var length = Math.min( a.rgb.length, b.rgb.length );
var sum = 0;
var i;
var delta;
var colorDistance;

for ( i = 0; i < length; i++ ) {
delta = a.rgb[ i ] - b.rgb[ i ];
sum += delta * delta;
}

colorDistance = Math.sqrt(
sum / Math.max( 1, length )
) / 255;

/*
* dHash is resilient to light rescaling/compression.
* The small RGB grid breaks ties between similarly-shaped icons.
*/
return 0.58 * hashDistance + 0.42 * colorDistance;
}

function mapLimit( list, limit, worker ) {
var nextIndex = 0;
var workers = [];
var i;

function runWorker() {
var index;

if ( nextIndex >= list.length ) {
return Promise.resolve();
}

index = nextIndex++;
return Promise.resolve( worker( list[ index ], index ) )
.then( runWorker );
}

for ( i = 0; i < Math.min( limit, list.length ); i++ ) {
workers.push( runWorker() );
}

return Promise.all( workers );
}

function buildFingerprintIndex( records, setStatus ) {
var complete = 0;
var successful = [];
var grouped = Object.create( null );
var groups = [];

/*
* If several icon filenames are byte-identical, imageinfo gives them
* the same SHA-1. Fingerprint that image only once and fan the result
* back out to every filename. This can substantially reduce the first
* build's static-file traffic without changing the visible results.
*/
records.forEach( function ( record ) {
var key = record.sha1 || record.url;

if ( !grouped[ key ] ) {
grouped[ key ] = {
key: key,
representative: record,
records: []
};
groups.push( grouped[ key ] );
}

grouped[ key ].records.push( record );
} );

return mapLimit(
groups,
DOWNLOAD_CONCURRENCY,
function ( group ) {
return fetchDrawable( group.representative.url )
.then( function ( drawable ) {
var fp = fingerprintDrawable( drawable, 0 );

closeDrawable( drawable );

group.records.forEach( function ( record ) {
successful.push( {
title: record.title,
url: record.url,
sha1: record.sha1,
width: record.width,
height: record.height,
hashHi: fp.hashHi,
hashLo: fp.hashLo,
rgb: fp.rgb
} );
} );
} )
.catch( function () {
/*
* A missing/corrupt/non-raster file should not prevent
* the rest of the icon index from becoming usable.
*/
} )
.then( function () {
complete++;

if (
setStatus &&
(
complete === groups.length ||
complete % 25 === 0
)
) {
setStatus(
'Building pixel index… ' +
complete + ' / ' + groups.length +
' unique images (' +
records.length + ' filenames)'
);
}
} );
}
).then( function () {
return successful;
} );
}

function cacheKey( revid ) {
return [
'icon-list',
ALGO_VERSION,
revid
].join( ':' );
}

function getOrBuildIndex( api, setStatus ) {
if ( memoryIndex ) {
return Promise.resolve( memoryIndex );
}

setStatus( 'Reading Icon List…' );

return fetchCatalog( api ).then( function ( catalog ) {
var key = cacheKey( catalog.revid );

return idbGet( key )
.catch( function () {
return null;
} )
.then( function ( cached ) {
if (
cached &&
Array.isArray( cached.records ) &&
cached.records.length
) {
memoryIndex = cached.records;
setStatus(
'Icon index ready: ' +
memoryIndex.length +
' uploaded icons (cached locally).'
);
return memoryIndex;
}

return fetchImageInfo(
api,
catalog.titles,
setStatus
).then( function ( imageRecords ) {
setStatus(
'Found ' + imageRecords.length +
' uploaded icons. Building pixel index…'
);

return buildFingerprintIndex(
imageRecords,
setStatus
);
} ).then( function ( records ) {
memoryIndex = records;

setStatus(
'Icon index ready: ' +
records.length +
' uploaded icons.'
);

return idbPutAndPrune( {
key: key,
revid: catalog.revid,
algorithm: ALGO_VERSION,
builtAt: Date.now(),
records: records
} )
.catch( function () {
/*
* Matching still works for this session even if
* the browser blocks persistent storage.
*/
} )
.then( function () {
return records;
} );
} );
} );
} );
}

function fingerprintPastedImage( drawable ) {
/*
* Small centered crop variants make the matcher forgiving of a
* 1-2 pixel screen-capture border while still preferring an exact crop.
*/
return [
fingerprintDrawable( drawable, 0 ),
fingerprintDrawable( drawable, 0.035 ),
fingerprintDrawable( drawable, 0.07 )
];
}

function rankMatches( targetFingerprints, records ) {
var ranked = records.map( function ( record ) {
var candidate = {
hashHi: record.hashHi,
hashLo: record.hashLo,
rgb: record.rgb
};

var distance = Infinity;

targetFingerprints.forEach( function ( target ) {
distance = Math.min(
distance,
fingerprintDistance( target, candidate )
);
} );

return {
record: record,
distance: distance,
similarity: Math.max(
0,
Math.min( 100, ( 1 - distance ) * 100 )
)
};
} );

ranked.sort( function ( a, b ) {
return a.distance - b.distance;
} );

return ranked.slice( 0, RESULT_COUNT );
}

function cleanDisplayTitle( title ) {
return String( title || '' ).replace( /^File:/i, '' );
}

function iconMetadata( title ) {
var clean = cleanDisplayTitle( title );
var itemMatch = clean.match( /^Item\s+(\d+)\.png$/i );
var spellMatch = clean.match( /^Spellicon_([^.]*)\.png$/i );
var id = '';
var kind = 'Icon file';
var parameter = '';

if ( itemMatch ) {
id = itemMatch[ 1 ];
kind = 'Item icon';
parameter = '|lucy_img_ID = ' + id;
} else if ( spellMatch ) {
id = spellMatch[ 1 ];
kind = 'Spell icon';
parameter = '|spellicon = ' + id;
}

return {
kind: kind,
id: id,
filename: clean,
parameter: parameter,
rawWiki: '[[File:' + clean + ']]',
staticWiki: '[[File:' + clean + '|32x32px]]',
scaledWiki: '[[File:' + clean + '|frameless|upright=1.5]]'
};
}

function copyText( text, button ) {
var original = button.textContent;

function done() {
button.textContent = 'Copied';
window.setTimeout( function () {
button.textContent = original;
}, 1000 );
}

if (
navigator.clipboard &&
typeof navigator.clipboard.writeText === 'function'
) {
navigator.clipboard.writeText( text )
.then( done )
.catch( function () {
window.prompt( 'Copy:', text );
} );
return;
}

window.prompt( 'Copy:', text );
}

function makeCopyButton( label, value ) {
var button = document.createElement( 'button' );

button.className = 'eql-iconfinder-copy';
button.type = 'button';
button.textContent = label;

button.addEventListener( 'click', function () {
copyText( value, button );
} );

return button;
}

function renderMatches( container, matches ) {
container.innerHTML = '';

var title = document.createElement( 'div' );
title.className = 'eql-iconfinder-results-title';
title.textContent = 'Possible Matches';
container.appendChild( title );

var grid = document.createElement( 'div' );
grid.className = 'eql-iconfinder-results-grid';
container.appendChild( grid );

matches.forEach( function ( match ) {
var record = match.record;
var meta = iconMetadata( record.title );
var card = document.createElement( 'div' );
var img = document.createElement( 'img' );
var textWrap = document.createElement( 'div' );
var link = document.createElement( 'a' );
var score = document.createElement( 'span' );
var iconId = document.createElement( 'span' );
var metadata = document.createElement( 'span' );
var copyRow = document.createElement( 'div' );

card.className = 'eql-iconfinder-result';

img.src = record.url;
img.alt = meta.filename;
img.loading = 'lazy';

link.className = 'eql-iconfinder-result-name';
link.href = mw.util.getUrl( record.title );
link.target = '_blank';
link.rel = 'noopener';
link.textContent = meta.filename;

score.className = 'eql-iconfinder-result-score';
score.textContent =
match.similarity.toFixed( 1 ) + '% similarity';

iconId.className = 'eql-iconfinder-result-id';
iconId.textContent = meta.id
? 'Icon ' + meta.id
: meta.filename;

metadata.className = 'eql-iconfinder-result-meta';
metadata.textContent = meta.kind;

copyRow.className = 'eql-iconfinder-copy-row';

if ( meta.id ) {
copyRow.appendChild(
makeCopyButton( 'Copy ID', meta.id )
);
}

if ( meta.parameter ) {
copyRow.appendChild(
makeCopyButton( 'Copy Parameter', meta.parameter )
);
}

copyRow.appendChild(
makeCopyButton( 'Raw Wikicode', meta.rawWiki )
);

copyRow.appendChild(
makeCopyButton( '32×32', meta.staticWiki )
);

copyRow.appendChild(
makeCopyButton( 'Scaled', meta.scaledWiki )
);

textWrap.appendChild( link );
textWrap.appendChild( iconId );
textWrap.appendChild( score );
textWrap.appendChild( metadata );
textWrap.appendChild( copyRow );

card.appendChild( img );
card.appendChild( textWrap );
grid.appendChild( card );
} );

var note = document.createElement( 'div' );
note.className = 'eql-iconfinder-note';
note.textContent =
'The tool only identifies likely matches and copies values/wikicode to the clipboard; it never changes the editor. ' +
'For the best result, capture only the square icon with as little surrounding UI as possible.';
container.appendChild( note );
}

function imageFromClipboardEvent( event ) {
var clipboard = event.clipboardData;
var items;
var i;

if ( !clipboard || !clipboard.items ) {
return null;
}

items = clipboard.items;

for ( i = 0; i < items.length; i++ ) {
if (
items[ i ].kind === 'file' &&
/^image\//i.test( items[ i ].type )
) {
return items[ i ].getAsFile();
}
}

return null;
}

function setPreview( img, blob ) {
if ( currentPreviewUrl ) {
URL.revokeObjectURL( currentPreviewUrl );
}

currentPreviewUrl = URL.createObjectURL( blob );
img.src = currentPreviewUrl;
img.classList.add( 'is-visible' );
}

function processBlob( blob, preview, status, results, api ) {
var setStatus = function ( text ) {
status.textContent = text;
};

setPreview( preview, blob );
results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Analyzing pasted icon…' +
'</div>';

return blobToDrawable( blob )
.then( function ( drawable ) {
var targets = fingerprintPastedImage( drawable );
closeDrawable( drawable );

return getOrBuildIndex( api, setStatus )
.then( function ( index ) {
var matches;

if ( !index.length ) {
throw new Error( 'No uploaded icons were found.' );
}

setStatus(
'Comparing against ' +
index.length +
' uploaded icons…'
);

/*
* Yield once so the status message can paint before
* ranking several thousand in-memory fingerprints.
*/
return new Promise( function ( resolve ) {
window.setTimeout( function () {
matches = rankMatches( targets, index );
resolve( matches );
}, 0 );
} );
} );
} )
.then( function ( matches ) {
renderMatches( results, matches );

setStatus(
'Done. Showing the ' +
matches.length +
' closest matches.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'The icon could not be matched.' +
'</div>';

setStatus(
'Icon Finder error: ' +
( error && error.message ? error.message : 'Unknown error' )
);
} );
}

function buildUi( host ) {
var api = new mw.Api();

host.innerHTML = '';

var shell = document.createElement( 'div' );
shell.className = 'eql-iconfinder-shell';

var left = document.createElement( 'div' );
var paste = document.createElement( 'div' );
var instruction = document.createElement( 'div' );
var subinstruction = document.createElement( 'div' );
var preview = document.createElement( 'img' );
var status = document.createElement( 'div' );

paste.className = 'eql-iconfinder-paste';
paste.tabIndex = 0;
paste.setAttribute( 'role', 'button' );
paste.setAttribute(
'aria-label',
'Paste a screen capture of an EverQuest icon'
);

instruction.className = 'eql-iconfinder-instruction';
instruction.textContent =
'Screen capture and paste JUST the Icon';

subinstruction.className = 'eql-iconfinder-subinstruction';
subinstruction.textContent =
'Click this box, then press Ctrl+V. You can also drag an image here.';

preview.className = 'eql-iconfinder-preview';
preview.alt = 'Pasted icon preview';

status.className = 'eql-iconfinder-status';
status.setAttribute( 'aria-live', 'polite' );
status.textContent =
'Nothing is loaded from Icon List until you paste an image.';

paste.appendChild( instruction );
paste.appendChild( subinstruction );
paste.appendChild( preview );

left.appendChild( paste );
left.appendChild( status );

var right = document.createElement( 'div' );
var resultsTitle = document.createElement( 'div' );
var results = document.createElement( 'div' );

resultsTitle.className = 'eql-iconfinder-results-title';
resultsTitle.textContent = 'Possible Matches';

results.innerHTML =
'<div class="eql-iconfinder-results-empty">' +
'Paste an icon to search the uploaded images on Icon List.' +
'</div>';

right.appendChild( resultsTitle );
right.appendChild( results );

shell.appendChild( left );
shell.appendChild( right );
host.appendChild( shell );

paste.addEventListener( 'click', function () {
paste.focus();
} );

paste.addEventListener( 'paste', function ( event ) {
var file = imageFromClipboardEvent( event );

if ( !file ) {
status.textContent =
'Clipboard does not contain an image. Screen capture the icon, then paste again.';
return;
}

event.preventDefault();

processBlob(
file,
preview,
status,
results,
api
);
} );

paste.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
} );

paste.addEventListener( 'drop', function ( event ) {
var files;

event.preventDefault();
files = event.dataTransfer && event.dataTransfer.files;

if (
!files ||
!files.length ||
!/^image\//i.test( files[ 0 ].type )
) {
status.textContent = 'Drop an image file here.';
return;
}

processBlob(
files[ 0 ],
preview,
status,
results,
api
);
} );

/*
* Focus the paste target immediately when the panel first opens so
* the normal workflow is: click Icon Finder -> Ctrl+V.
*/
window.setTimeout( function () {
paste.focus();
}, 0 );
}

window.EQLIconFinder = {
init: function ( host ) {
if ( !host ) {
return Promise.reject(
new Error( 'Icon Finder host element is missing.' )
);
}

addStyles();

if ( initializedHost !== host ) {
buildUi( host );
initializedHost = host;
} else {
var paste = host.querySelector( '.eql-iconfinder-paste' );

if ( paste ) {
window.setTimeout( function () {
paste.focus();
}, 0 );
}
}

return Promise.resolve();
}
};

}( mediaWiki, jQuery ) );

MediaWiki:BlueprintLoader.js

2026-08-10T05:38:28Z

Maintenance script: Update dynamic Blueprint loader and editor tools

/**
* EQL Wiki - Editor Tools / Dynamic Blueprint Loader
*
* Source-editor behavior:
* - On a new, truly empty page: show the Help:Contents Blueprint selector.
* - On every source edit page: show the Icon Finder button.
* - Heavy Icon Finder logic is lazy-loaded only when opened.
*/
( function ( mw, $ ) {
'use strict';

var BLUEPRINT_PAGE = 'Help:Contents';
var TOOLS_ID = 'eql-editor-tools';
var ICON_FINDER_PAGE = 'MediaWiki:IconFinder.js';

function htmlToText( html ) {
var div = document.createElement( 'div' );
div.innerHTML = String( html || '' );
return ( div.textContent || div.innerText || '' ).trim();
}

function makeLabel( heading ) {
return heading
.replace( /\s+Blueprints?\s*$/i, '' )
.trim() + ' Blueprint';
}

function getEditorContents( $textarea ) {
try {
return String( $textarea.textSelection( 'getContents' ) || '' );
} catch ( e ) {
return String( $textarea.val() || '' );
}
}

function setEditorContents( $textarea, text ) {
try {
$textarea.textSelection( 'setContents', text );
} catch ( e ) {
$textarea.val( text );
}

$textarea.trigger( 'input' );
$textarea.trigger( 'change' );
$textarea.trigger( 'focus' );
}

function extractBlueprint( sectionText ) {
var match;
var blueprint;

sectionText = String( sectionText || '' );

match = sectionText.match(
/<pre(?:\s[^>]*)?>([\s\S]*?)<\/pre>/i
);

if ( !match ) {
return null;
}

blueprint = match[ 1 ];

blueprint = blueprint.replace(
/^\s*<nowiki>([\s\S]*?)<\/nowiki>\s*$/i,
'$1'
);

blueprint = blueprint
.replace( /^\s*\n/, '' )
.replace( /\s+$/, '' );

return blueprint + '\n';
}

function fetchBlueprintSections( api ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'tocdata',
formatversion: 2
} ).then( function ( data ) {
var tocdata =
data &&
data.parse &&
data.parse.tocdata;

var sections =
tocdata &&
Array.isArray( tocdata.sections )
? tocdata.sections
: [];

if ( sections.length ) {
return sections;
}

return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'sections',
formatversion: 2
} ).then( function ( fallbackData ) {
return (
fallbackData &&
fallbackData.parse &&
Array.isArray( fallbackData.parse.sections )
)
? fallbackData.parse.sections
: [];
} );
} );
}

function normalizeBlueprintSections( sections ) {
return sections
.map( function ( section ) {
var heading = htmlToText( section.line || '' );

return {
heading: heading,
label: makeLabel( heading ),
index: String( section.index || '' ),
anchor:
section.linkAnchor ||
section.anchor ||
''
};
} )
.filter( function ( section ) {
return (
section.index &&
/\bBlueprints?\s*$/i.test( section.heading )
);
} );
}

function fetchBlueprintWikitext( api, sectionIndex ) {
return api.get( {
action: 'parse',
page: BLUEPRINT_PAGE,
prop: 'wikitext',
section: sectionIndex,
formatversion: 2
} ).then( function ( data ) {
var wikitext =
data &&
data.parse
? data.parse.wikitext
: '';

if (
wikitext &&
typeof wikitext === 'object' &&
Object.prototype.hasOwnProperty.call( wikitext, '*' )
) {
wikitext = wikitext[ '*' ];
}

return String( wikitext || '' );
} );
}

function addStyles() {
if ( document.getElementById( 'eql-editor-tools-styles' ) ) {
return;
}

$( '<style>', {
id: 'eql-editor-tools-styles',
text:
'#' + TOOLS_ID + '{' +
'box-sizing:border-box;' +
'margin:0 0 1rem 0;' +
'padding:1rem 1.1rem;' +
'background:linear-gradient(180deg,rgba(16,21,29,.97),rgba(9,13,19,.98));' +
'border:1px solid rgba(216,183,92,.38);' +
'border-left:5px solid rgba(216,183,92,.82);' +
'border-radius:8px;' +
'box-shadow:0 9px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035);' +
'}' +

'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'display:grid;' +
'grid-template-columns:minmax(0,1fr) auto;' +
'gap:1rem;' +
'align-items:end;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-title,' +
'#' + TOOLS_ID + ' .eql-iconfinder-title{' +
'margin:0 0 .35rem 0;' +
'color:#d8b75c;' +
'font-family:Georgia,Times New Roman,serif;' +
'font-size:1.05rem;' +
'font-weight:700;' +
'letter-spacing:.035em;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-description{' +
'margin:0 0 .7rem 0;' +
'color:#aeb8c7;' +
'font-size:.9rem;' +
'line-height:1.35;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-controls{' +
'display:flex;' +
'flex-wrap:wrap;' +
'align-items:center;' +
'gap:.65rem;' +
'}' +

'#' + TOOLS_ID + ' select{' +
'box-sizing:border-box;' +
'min-width:260px;' +
'max-width:100%;' +
'min-height:2.35rem;' +
'padding:.35rem .55rem;' +
'background:#0b1017;' +
'border:1px solid rgba(216,183,92,.36);' +
'border-radius:5px;' +
'color:#e2e2cf;' +
'}' +

'#' + TOOLS_ID + ' button{' +
'min-height:2.35rem;' +
'padding:.35rem .85rem;' +
'background:linear-gradient(180deg,#806d32,#594817);' +
'border:1px solid #b69c4b;' +
'border-radius:5px;' +
'color:#fff5cc;' +
'font-weight:700;' +
'cursor:pointer;' +
'}' +

'#' + TOOLS_ID + ' button:hover:not(:disabled){' +
'filter:brightness(1.08);' +
'}' +

'#' + TOOLS_ID + ' button:disabled{' +
'cursor:default;' +
'opacity:.55;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-source{' +
'color:#b9c8ff;' +
'font-size:.9rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-blueprint-status{' +
'display:block;' +
'margin-top:.55rem;' +
'min-height:1.2em;' +
'color:#aeb8c7;' +
'font-size:.86rem;' +
'}' +

'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'display:flex;' +
'flex-direction:column;' +
'align-items:stretch;' +
'justify-content:flex-end;' +
'min-width:150px;' +
'}' +

'#eql-icon-finder-toggle{' +
'white-space:nowrap;' +
'}' +

'#eql-icon-finder-host{' +
'margin-top:1rem;' +
'padding-top:1rem;' +
'border-top:1px solid rgba(216,183,92,.22);' +
'}' +

'#eql-icon-finder-host[hidden]{display:none!important;}' +

'@media(max-width:760px){' +
'#' + TOOLS_ID + ' .eql-editor-tools-row{' +
'grid-template-columns:1fr;' +
'}' +
'#' + TOOLS_ID + ' .eql-iconfinder-launch{' +
'min-width:0;' +
'}' +
'#' + TOOLS_ID + ' select{' +
'width:100%;' +
'min-width:0;' +
'}' +
'}'
} ).appendTo( document.head );
}

function loadIconFinderScript() {
if ( window.EQLIconFinder ) {
return Promise.resolve( window.EQLIconFinder );
}

if ( window.eqlIconFinderLoadingPromise ) {
return window.eqlIconFinderLoadingPromise;
}

window.eqlIconFinderLoadingPromise = new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );

script.src = mw.util.getUrl( ICON_FINDER_PAGE, {
action: 'raw',
ctype: 'text/javascript'
} );

script.async = true;

script.onload = function () {
if ( window.EQLIconFinder ) {
resolve( window.EQLIconFinder );
} else {
reject( new Error( 'IconFinder.js loaded without exposing EQLIconFinder.' ) );
}
};

script.onerror = function () {
reject( new Error( 'Could not load IconFinder.js.' ) );
};

document.head.appendChild( script );
} );

return window.eqlIconFinderLoadingPromise;
}

function buildIconFinderLaunch( $row, $tools ) {
var $launch = $( '<div>', {
class: 'eql-iconfinder-launch'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-iconfinder-title',
text: 'ICON FINDER'
} ).appendTo( $launch );

var $button = $( '<button>', {
id: 'eql-icon-finder-toggle',
type: 'button',
text: 'Icon Finder',
'aria-expanded': 'false'
} ).appendTo( $launch );

var $host = $( '<div>', {
id: 'eql-icon-finder-host',
hidden: true
} ).appendTo( $tools );

$button.on( 'click', function () {
var opening = $host.prop( 'hidden' );

if ( !opening ) {
$host.prop( 'hidden', true );
$button.attr( 'aria-expanded', 'false' );
return;
}

$button.prop( 'disabled', true );
$button.text( 'Loading…' );

loadIconFinderScript()
.then( function ( finder ) {
return finder.init( $host[ 0 ] );
} )
.then( function () {
$host.prop( 'hidden', false );
$button.attr( 'aria-expanded', 'true' );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Icon Finder:', error );
}

$host
.prop( 'hidden', false )
.text( 'Icon Finder could not be loaded.' );

$button.attr( 'aria-expanded', 'true' );
} )
.then( function () {
$button.prop( 'disabled', false );
$button.text( 'Icon Finder' );
} );
} );
}

function buildBlueprintArea( $row, $textarea, api ) {
var $area = $( '<div>', {
class: 'eql-blueprint-area'
} ).appendTo( $row );

$( '<div>', {
class: 'eql-blueprint-title',
text: 'CREATE FROM A BLUEPRINT'
} ).appendTo( $area );

$( '<div>', {
class: 'eql-blueprint-description',
text:
'Load a standard page skeleton from Help:Contents, ' +
'or continue with the empty editor below.'
} ).appendTo( $area );

var $controls = $( '<div>', {
class: 'eql-blueprint-controls'
} ).appendTo( $area );

var $select = $( '<select>', {
'aria-label': 'Select page blueprint',
disabled: true
} ).appendTo( $controls );

$( '<option>', {
value: '',
text: 'Loading blueprints...'
} ).appendTo( $select );

var $button = $( '<button>', {
type: 'button',
text: 'Load Blueprint',
disabled: true
} ).appendTo( $controls );

var $sourceLink = $( '<a>', {
class: 'eql-blueprint-source',
href: mw.util.getUrl( BLUEPRINT_PAGE ),
text: 'View Blueprints',
target: '_blank',
rel: 'noopener'
} ).appendTo( $controls );

var $status = $( '<span>', {
class: 'eql-blueprint-status',
'aria-live': 'polite'
} ).appendTo( $area );

fetchBlueprintSections( api )
.then( function ( sections ) {
var blueprints = normalizeBlueprintSections( sections );

$select.empty();

$( '<option>', {
value: '',
text: blueprints.length ?
'Select a blueprint...' :
'No blueprints found'
} ).appendTo( $select );

blueprints.forEach( function ( blueprint ) {
$( '<option>', {
value: blueprint.index,
text: blueprint.label
} )
.attr( 'data-anchor', blueprint.anchor )
.appendTo( $select );
} );

$select.prop( 'disabled', !blueprints.length );
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$select.empty().append(
$( '<option>', {
value: '',
text: 'Could not load blueprints'
} )
);

$status.text(
'Could not read Blueprint headings from Help:Contents.'
);
} );

$select.on( 'change', function () {
var $option = $select.find( 'option:selected' );
var anchor = $option.attr( 'data-anchor' ) || '';

$button.prop( 'disabled', !$select.val() );

if ( anchor ) {
$sourceLink.attr(
'href',
mw.util.getUrl( BLUEPRINT_PAGE ) + '#' + anchor
);
$sourceLink.text( 'View This Blueprint' );
} else {
$sourceLink.attr( 'href', mw.util.getUrl( BLUEPRINT_PAGE ) );
$sourceLink.text( 'View Blueprints' );
}

$status.text( '' );
} );

$button.on( 'click', function () {
var sectionIndex = $select.val();
var existing;

if ( !sectionIndex ) {
return;
}

existing = getEditorContents( $textarea );

if (
existing.trim() &&
!window.confirm(
'The editor already contains text. Replace it with the selected blueprint?'
)
) {
return;
}

$button.prop( 'disabled', true );
$select.prop( 'disabled', true );
$status.text( 'Loading current blueprint from Help:Contents...' );

fetchBlueprintWikitext( api, sectionIndex )
.then( function ( sectionText ) {
var blueprint = extractBlueprint( sectionText );

if ( blueprint === null ) {
throw new Error( 'No <pre> block found.' );
}

setEditorContents( $textarea, blueprint );

$status.text(
'Blueprint loaded. Edit the fields below, then publish normally.'
);
} )
.catch( function ( error ) {
if ( window.console && console.error ) {
console.error( 'EQL Blueprint Loader:', error );
}

$status.text(
'Could not load this blueprint. Check Help:Contents and make sure the section contains a <pre> block.'
);
} )
.then( function () {
$select.prop( 'disabled', false );
$button.prop( 'disabled', !$select.val() );
} );
} );
}

function init() {
var action = mw.config.get( 'wgAction' );
var $textarea;
var $tools;
var $row;
var $editorHost;
var api;
var isNewPage;
var editorIsEmpty;

if ( [ 'edit', 'submit' ].indexOf( action ) === -1 ) {
return;
}

$textarea = $( '#wpTextbox1' );

if ( !$textarea.length ) {
return;
}

if ( document.getElementById( TOOLS_ID ) ) {
return;
}

api = new mw.Api();
isNewPage = Number( mw.config.get( 'wgArticleId' ) ) === 0;
editorIsEmpty = !getEditorContents( $textarea ).trim();

addStyles();

$tools = $( '<div>', {
id: TOOLS_ID
} );

$row = $( '<div>', {
class: 'eql-editor-tools-row'
} ).appendTo( $tools );

if ( isNewPage && editorIsEmpty ) {
buildBlueprintArea( $row, $textarea, api );
} else {
$( '<div>', {
class: 'eql-editor-tools-spacer'
} ).appendTo( $row );
}

buildIconFinderLaunch( $row, $tools );

$editorHost = $textarea.closest( '.wikiEditor-ui' );

if ( !$editorHost.length ) {
$editorHost = $textarea;
}

$tools.insertBefore( $editorHost );
}

mw.loader.using( [
'mediawiki.api',
'mediawiki.util',
'jquery.textSelection'
] ).then( function () {
$( init );
} );

}( mediaWiki, jQuery ) );

The Baron's Blade

2026-06-04T01:01:22Z