User:Inductiveload/LibParamUi.js
Jump to navigation
Jump to search
Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Cmd-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (Cmd-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
For details and instructions about other browsers, see Wikipedia:Bypass your cache.
Code that you insert on this page could contain malicious content capable of compromising your account. If you are unsure whether code you are adding to this page is safe, you can ask at the central discussion page, Scriptorium. The code will be executed when previewing this page under some skins, including Monobook. You can in the interim if you wish to refresh the content sooner under another skin. |
Documentation for this script can be added at User:Inductiveload/LibParamUi. This script seems to have an accompanying .css page at User:Inductiveload/LibParamUi.css. |
/*
* Simple UI for setting a set of parameters
*/
// For when loaded without ResourceLoader support
mw.loader.using(
[ 'mediawiki.util', 'oojs-ui-core', 'oojs-ui-windows', 'oojs-ui-widgets' ]
).done( function () {
'strict';
var ILUI;
var debugSuffix = '';
var addGlobalLibrary = function ( key ) {
if ( !window[ key ] ) {
window[ key ] = {};
}
return window[ key ];
};
/* debug-replace: debugSuffix = '.debug'; */
ILUI = addGlobalLibrary( 'iltools.ui' + debugSuffix );
/* ======================================================================== */
/*
* Add a dropdown menu with the given ID to the left or right navigation
* bar in the Vector skin.
*
* If the dropdown exists, the existing one is returned.
*
* @param menuType: "dropdown" or "tabs"
* @param leftSide: true to append to left, false for right
*
* @return The UL thatThethe user can append entries to
*/
ILUI.addVectorMenu = function ( id, title, menuType, leftSide ) {
var $portlet = $( '#' + id ),
$nav,
$linkList;
if ( $portlet.length === 0 ) {
$nav = $( '<nav>' )
.addClass( 'mw-portlet mw-portlet-views vector-menu' )
.addClass( ( menuType === 'dropdown' ) ? 'vector-menu-dropdown vector-menu-dropdown-noicon' : 'vector-menu-tabs' )
.attr( { role: 'navigation', id: id } );
if ( mw.config.get( 'skin' ) === 'vector-2022' || mw.config.get( 'skin' ) === 'vector' ) {
$( '<input>' )
.attr( {
type: 'checkbox'
} )
.addClass( 'vector-menu-checkbox' )
.appendTo( $nav );
}
$('<label>')
.addClass('vector-menu-heading')
.append(
$('<span>')
.addClass('vector-menu-heading-label')
.text(title)
)
.appendTo($nav);
$linkList = $( '<ul>' )
.addClass( 'vector-menu-content-list' );
$( '<div>' )
.addClass( 'vector-menu-content' )
.appendTo( $nav )
.append( $linkList );
$( leftSide ? '#left-navigation' : '#right-navigation' )
.append( $nav );
return $linkList;
}
return $portlet.find( 'ul' );
};
/* ===========================================================================
* GeneralParamsDialog: this is general dialog designed to make it easy to ask
* the user for some parameters.
*
* Basically, you pass in a list of "needs" and the dialog makes you a list of
* suitable input widgets and returns them to the callback you set on close.
*/
ILUI.GeneralParamsDialog = function ( config ) {
ILUI.GeneralParamsDialog.super.call( this, config );
// mixin constructors
// PrimaryActionOnEnterMixin.call(this);
};
OO.inheritClass( ILUI.GeneralParamsDialog, OO.ui.ProcessDialog );
// OO.mixinClass(dialogs.GeneralParamsDialog, PrimaryActionOnEnterMixin);
// Specify a name for .addWindows()
ILUI.GeneralParamsDialog.static.name = 'GeneralParamsDialog';
// Specify a title statically (or, alternatively, with data passed to the opening() method).
// GeneralParamsDialog.static.title = 'Set parameters';
ILUI.GeneralParamsDialog.static.actions = [
{
action: 'save',
label: 'Done',
flags: [ 'primary' ]
},
{
label: 'Cancel',
flags: [ 'safe' ]
}
];
ILUI.GeneralParamsDialog.prototype.addFieldFromNeed = function ( need ) {
var input, fl,
// most widgets can use this default
valuefunc = function ( i ) {
return i.getValue();
};
switch ( need.type ) {
case 'int':
input = new OO.ui.NumberInputWidget( {
value: need.value,
step: 1
} );
valuefunc = function ( i ) {
return i.getNumericValue();
};
break;
case 'bool':
input = new OO.ui.CheckboxInputWidget( {
selected: need.value
} );
valuefunc = function ( i ) {
return i.isSelected();
};
break;
// case 'page':
// input = new PageLookupTextInputWidget( {
// namespaces: need.namespaces,
// user: mw.config.get( 'wgUserName' )
// // placeholder: "Index:Filename.djvu"
// } );
// break;
case 'text':
input = new OO.ui.TextInputWidget();
break;
case 'choice':
input = new OO.ui.DropdownWidget( {
label: need.label,
menu: {
items: need.options.map( function ( c ) {
return new OO.ui.MenuOptionWidget( {
data: c.data,
label: c.label
} );
} )
}
} );
valuefunc = function ( i ) {
return i.getMenu().findSelectedItem().getData();
};
break;
// case 'contrib':
// input = new ContribLookupTextInputWidget( {
// user: need.user
// } );
// break;
default:
mw.notify( 'Unknown type: ' + need.type, { type: 'error' } );
}
if ( input ) {
this.inputs.push( {
widget: input,
valuefunc: valuefunc
} );
fl = new OO.ui.FieldLayout( input, {
label: need.label,
help: need.help,
helpInline: false,
align: 'right'
} );
// disable help tabbing, which gets in the way a LOT
fl.$element.find( '.oo-ui-fieldLayout-help a' )
.attr( 'tabindex', '-1' );
this.paramFieldset.addItems( [ fl ] );
}
};
// Customize the initialize() function: This is where to add content to
// the dialog body and set up event handlers.
ILUI.GeneralParamsDialog.prototype.initialize = function () {
// Call the parent method.
ILUI.GeneralParamsDialog.super.prototype.initialize.call( this );
this.inputs = [];
this.paramFieldset = new OO.ui.FieldsetLayout( {
// label: 'GeneralParamsDialog Parameters',
classes: [ 'userjs-il_dialog_fs' ]
} );
this.$body.append( this.paramFieldset.$element );
};
ILUI.GeneralParamsDialog.prototype.getSetupProcess = function ( data ) {
data = data || {};
return ILUI.GeneralParamsDialog.super.prototype.getSetupProcess.call( this, data )
.next( function () {
var dialog = this,
need, i;
// if ( data.title ) {
// dialog.title = "Foo";
// }
// Set up contents based on data
for ( i = 0; i < data.needs.length; ++i ) {
need = data.needs[ i ];
dialog.addFieldFromNeed( need );
}
dialog.saveCallback = data.saveCallback;
dialog.cancelCallback = data.cancelCallback;
}, this );
};
ILUI.GeneralParamsDialog.prototype.getActionProcess = function ( action ) {
var dialog = this;
if ( action === 'save' ) {
return new OO.ui.Process( function () {
var params = [],
i, acceptedPromise;
for ( i = 0; i < dialog.inputs.length; ++i ) {
params.push( dialog.inputs[ i ].valuefunc( dialog.inputs[ i ].widget ) );
}
// dialog.actions.setMode( 'executing' );
acceptedPromise = dialog.saveCallback( params );
// close the dialog if the save callback accepted the parameters
acceptedPromise
.then( function () {
// console.log( 'Accepted' );
dialog.close();
}, function () {
// console.log( 'Not accepted/failed' );
// save callback failed somehow
// alert( 'Cant save parameters, idk lol' );
// dialog.actions.setMode( 'can_execute' );
} );
} );
} else {
// just close the dialog
return new OO.ui.Process( function () {
if ( dialog.cancelCallback ) {
dialog.cancelCallback();
}
dialog.close();
} );
}
};
/* ======================================================================== */
} );