Snippets/Edittools as buttons

How to use Snippets
List of Snippets

Edittools as buttons
Language(s):	JavaScript
Compatible with:	MediaWiki 1.17+

Description

Convert the edittools links into buttons. These come from MediaWiki:Edittools as part of Extension:CharInsert, and are by default text area on the source edit page.

Code

/*
 * Change [[MediaWiki:Edittools]] into true buttons.
 *
 * @source mediawiki.org/wiki/Snippets/Edittools_as_buttons
 * @revision 3
 */

$( document ).ready( function( $ ) {
	var $sb = $( '#specialchars' ).find( '.specialbasic' ), bl = $sb.length, $sel, ci = 0;

	if ( bl > 1 ) {
		ci = Number( $.cookie('mw-charinsert') ) || 0;
		if ( ci > bl ) {
			$.cookie( 'mw-charinsert', 0, { expires: 30, path: '/' } );
			ci = 0;
		}
		$sel = $( '<select>' ).change( function(e) {
			var	$this = $( this ),
				i = Number( $this.val() ),
				last = Number( $.cookie('mw-charinsert') ) || 0;

			if ( last !== i ) {
				$sb.eq( last ).css( 'display', 'none' );
				$sb.eq( i ).css( 'display', 'inline' );
				$.cookie( 'mw-charinsert', i, { expires: 30, path: '/' } );
			}
		});
	}

	$sb.each( function( i ) {
		var id = $( this )
			.css( 'display', i !== ci ? 'none' : 'inline' )
			.find( 'a' ).replaceWith( function() {
				var $this = $( this ), onclick = $this.attr( 'onclick' );
				return $( '<button>', { type: 'button', text: $this.text() } )
					.blur()
					.click( $.isFunction( onclick ) ? onclick : Function( onclick ) );
			})
			.end()
			.attr( 'id' )
			.replace( /\.([0-9A-F]{2})/g, '%$1' )
			.replace( /_/g, ' ' );
 
		if ( bl > 1 ) {
			$sel.append(
				'<option value="' + i + '"' + (i === ci ? ' selected="selected"' : '') + '>'
				+ decodeURIComponent( id )
				+ '</option>'
			);
		}
	}).end().prepend( $sel );

	ci = null;
});