User:SPage (WMF)/agoraPanel.js
Appearance
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*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 + '%> </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 );