MediaWiki:Gadget-lib-toolbar.js

/*
 * @author: [[:pl:User:Beau]]
 */

var toolbarModule, toolbarSelector, $wpTextbox1,
	tbgHook = mw.hook( 'toolbarGadget.ready' );

window.toolbarGadget = {
	/** Version of the gadget */
	version: 10,
	/** Indicates wheter the user has enabled the new toolbar */
	wikieditor: null,
	/** An array of buttons, which were added before a toolbar was constructed */
	buttons: []
};

function addButtonWikiEditor( $toolbar ) {
	var $image, $link, $section, $group,
		title = this.title || '',
		groupName = this.group || 'custom';

	// FIXME: rewrite it using a toolbar api
	$image = $( '<img>' )
		.addClass( 'tool tool-button' )
		.css( {
			height: '18px',
			paddingTop: '4px'
		} )
		.attr( {
			alt: this.alt || title,
			title: title,
			id: this.id,
			src: this.newIcon || this.icon
		} );

	if ( this.add_style ) {
		$image.attr( 'style', $image.attr( 'style' ) + this.add_style );
	}

	$link = $( '<a>' )
		.attr( 'href', this.href )
		.append( $image )
		.on( 'click', $.proxy( this.onclick, null, $wpTextbox1 ) );

	// A section of the button
	if ( this.section ) {
		$section = $toolbar.find( 'div.section-' + this.section ).eq( 0 );
	}

	// A group of the button
	$group = ( $section || $toolbar ).find( 'div.group-' + groupName ).eq( 0 );

	if ( !$group.length ) {
		// If the section does not exist, place the button in main section
		if ( !$section ) {
			$section = $toolbar.find( 'div.section-main' ).eq( 0 );
		}

		$group = $( '<div>' )
			.addClass( 'group group-' + groupName )
			.attr( 'rel', groupName )
			.appendTo( $section );
	}

	$group.append( $link );

	if ( this.oncreate ) {
		this.oncreate( $image.get( 0 ) );
	}
}

function addButtonOldToolbar( $toolbar ) {
	var $image,
		title = this.title || '';

	$image = $( '<img>' )
		.addClass( 'mw-toolbar-editbutton' )
		.attr( {
			alt: this.alt || title,
			title: title,
			id: this.id,
			src: this.oldIcon || this.icon
		} )
		.on( 'click', $.proxy( this.onclick, null, $wpTextbox1 ) );

	if ( this.href ) {
		$( '<a>' )
			.attr( 'href', this.href )
			.append( $image )
			.appendTo( $toolbar );
	} else {
		$toolbar.append( $image );
	}

	if ( this.oncreate ) {
		this.oncreate( $image.get( 0 ) );
	}
}

/**
 * Adds a button to the toolbar
 * @param button An object describing the button, its values:
 * title - a title of the button
 * alt - an alternative text displayed when image is not loaded
 * id - an identifier of the button (img)
 * href - a link
 * onclick - a callback
 * icon - an icon of the button
 * oldIcon - an icon for the old toolbar (by default icon parameter is used)
 * newIcon - an icon for the new toolbar (by default icon parameter is used)
 * section - a name of a section to which the button should be added
 * group - a name of a group to which the button should be added (it will be created if not exists)
 * oncreate - a callback invoked after the button has been created
 * oldtoolbar - a boolean, add the button to either the old or the new toolbar, only
 */
toolbarGadget.addButton = function ( button ) {
	var proxy;

	if ( button.oldtoolbar !== undefined && toolbarGadget.wikieditor === button.oldtoolbar ) {
		return;
	}

	proxy = toolbarGadget.wikieditor ? addButtonWikiEditor : addButtonOldToolbar;
	toolbarGadget.buttons.push( button );
	tbgHook.add( $.proxy( proxy, button ) );
};

if ( [ 'edit', 'submit' ].indexOf( mw.config.get( 'wgAction' ) ) !== -1 ) {
	if ( !!Number( mw.user.options.get( 'usebetatoolbar' ) ) ) {
		toolbarGadget.wikieditor = true;
		toolbarModule = 'ext.wikiEditor';
		toolbarSelector = '#wikiEditor-ui-toolbar';
	} else if ( !!Number( mw.user.options.get( 'gadget-mw-toolbar' ) ) ) {
		toolbarGadget.wikieditor = false;
		toolbarModule = 'ext.gadget.mw-toolbar';
		toolbarSelector = '#toolbar';
	}

	if ( toolbarModule ) {
		mw.loader.using( toolbarModule ).done( function () {
			$( function () {
				$wpTextbox1 = $( '#wpTextbox1' );
				toolbarGadget.buttons.length = 0; // http://stackoverflow.com/q/1232040
				tbgHook.fire( $( toolbarSelector ) );
			} );
		} );
	}
}