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 = $( '<div id="agora-buttons">\
			<h5>Sample Agora buttons</h5>\
			<p>Mouseover, mousedown, and click each button</p>\
		' ),
		i, j,
		extraStyle;

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

		$row = $( '<tr>' );
		// 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( '<th width='+ width + '%>&nbsp;</th>' );
		for ( te in types ) {
			$row.append( '<th width='+ width + '%>' + te + '</th>' );
		}
		$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 = $( '<tr />' );
				$row.append( '\
					<td>' + se + '</td>' );
				// XXX Ordering not guaranteed.
				for ( var te in types ) {
					// Have to use <button>, I can't disable a div.
					$btn = $( '<button>' )
						// 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;
					
					}
					$( '<td>' ).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(  '<h6>' + kinds[j] +
				( extraStyle ? ' with ' + extraStyle : '' ) +
				'</h6>',
				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 = $( '\
	<small><div id="agora-panel"> \
		<h5 tabindex="6">Agora styling</h5> \
		<button id="agora-make-buttons">Insert Agora buttons</button> \
		<ul> \
		</ul> \
	</div></small> \
	' );

$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( '<li>' + module + ' <em>unknown</em></li>' );
	} else {
		$el = $( '<li><label><input type="checkbox"> ' + modules[i] + '</input></label></li>' );
		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 );