User:Inductiveload/LibParamUi.js

/*
 * 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();
			} );
		}
	};

	/* ======================================================================== */

} );