User:SPage (WMF)/agoraPanel.js

/*jshint multistr:true */ // Insert control panel to MW page that loads UI modules and adds sample Agora // buttons to page ( function ( $, mw ) { mw.addAgoraButtons = function {	/* Want to create a table of buttons	 * foreach kind of button, output a table    *               neutral destructive progressive constructive primary     *   normal     *   :hover     *   click     *   disabled     *   post-click	 *	 * Trick is one button's states are a column, not a row, but row is innermost HTML.	 */

var kinds = ['quiet', 'CTA'], extraStyles = [null, 'mw-ui-big'], // type is key, value is button text. types = { 'neutral':     'Other actions', 'destructive': 'Discard Changes', 'progressive': 'Next', 'constructive': 'Save Changes', 'primary':     'Reset password' // Old class. },		// XXX don't know how to do :hover, and click // post-click coming, some day states = ['', 'disabled'], $out = $( ' \			 Sample Agora buttons \			 Mouseover, mousedown, and click each button \		' ), i, j,		extraStyle;

function btnTable( kind, extraStyle ) { var $table = $( ' ' ), $row, width, te, numCols, kindClass;

$row = $( ' ' ); // Make a column across the top identifying the types, first column blank. numCols = 1; for (te in types) { if ( types.hasOwnProperty( te ) ) { numCols++; }		}		width = Math.floor( 100 / numCols ); $row.append( ' ' ); for ( te in types ) { $row.append( '' + te + ' ' ); }		$table.append( $row );

kindClass = 'mw-ui-button'; if ( kind === 'quiet' ) { kindClass += ' mw-ui-quiet mw-ui-text';	// XXX FIXME should be mw-ui-quiet. }		// Go across states.forEach(			function( se ) {				var $row, $btn;				// Make a row for each state				$row = $( ' ' );				$row.append( '\ ' + se + ' ' );				// XXX Ordering not guaranteed.				for ( var te in types ) {					// Have to use, I can't disable a div.					$btn = $( ' ' )						// class="mw-ui-button mw-ui-progressive"						.addClass( kindClass + ( types !== 'neutral' ? ( ' mw-ui-' + te ) : '' ) )						.text( types[ te ] );					if ( extraStyle ) {						$btn.addClass( extraStyle );					}					switch ( se ) {						// TODO: FIXME, how to fake these pseudo-classes and otherwise?						case 'post-click' :							$btn.addClass( types[te] );							break;						case 'disabled' :							$btn.prop( 'disabled', true );							break;

default: break; }					$( ' ' ).append( $btn, "\n" ).appendTo( $row ); }				$table.append( $row, "\n\n" ); }		);		return $table;	}

for ( i = 0; i < extraStyles.length; i++ ) { extraStyle = extraStyles[i]; for ( j = 0; j < kinds.length; j++ ){ $out.append( ' ' + kinds[j] +				( extraStyle ? ' with ' + extraStyle : '' ) +				' ',				btnTable( kinds[j], extraStyle ) ); }	}

// Append doesn't work too well with Flow's infinite auto-scroll :o)	$( '#content' ).prepend( $out ); };

function checkModule( module ) { if ( mw.loader.getState( module ) === 'ready' ) { return true; }	return false; }

function addModule( eventObject ) { var module = eventObject.data; mw.loader.load( module ); // At this point the module is in 'loading' state! // XXX Dang, have to set up a callback to later check if it's loaded. if ( checkModule( module ) ) { $( this ).find( 'input' ) .attr( 'disabled', true ); } }

$cpanel = $( '\	 \		 Agora styling \		Insert Agora buttons \		 \		 \	 \	' );

$cpanel.find( '#agora-make-buttons' ) .click( function( eventObject) {		mw.addAgoraButtons;		$( '#agora-buttons' )[0].scrollIntoView( true );		// Only add it once.		$( this ).prop( 'disabled', true );	} );

// Add checkboxes to load each style's module. var $ul = $cpanel.find( 'ul' ), modules = ['mediawiki.ui', 'mediawiki.ui.button', 'ext.flow.base', 'jquery.ui' ], $el; for ( var i = 0; i < modules.length; i++ ) { var module = modules[i], state = mw.loader.getState( module ); if ( state === null ) { $ul.append( '' + module + ' unknown ' ); } else { $el = $( ' ' + modules[i] + '  ' ); if ( state === 'ready' ) { $el.find( 'input' ) .attr( 'checked', true ) .attr( 'disabled', true ); } else { $el.click( module, addModule ); }		$ul.append( $el ); } }

$( '#p-tb' ).after(	$cpanel );

window.console.log( 'mw.addAgoraButtons defined' ); } )( jQuery, mediaWiki );