User:Prtksxna/block.js

// 1. Find your common.js //       https://mediawiki.org/wiki/Special:MyPage/common.js

// 2. Add the following code to it: //       mw.loader.load('/w/index.php?title=User:Prtksxna/block.js&action=raw&ctype=text/javascript', 'text/javascript'); //       mw.loader.load('/w/index.php?title=User:Prtksxna/block.css&action=raw&ctype=text/css', 'text/css');

// 3. Go to Special:BlankPage (that is where we'll load the form) //       https://www.mediawiki.org/wiki/Special:BlankPage

// 4. ???

// 5. PROFIT!

mw.loader.using( 	[		'oojs', 		'oojs-ui-core', 		'oojs-ui-widgets', 		'oojs-ui.styles.icons-editing-core',		'moment',		'mediawiki.widgets.datetime',		'mediawiki.widgets.UserInputWidget',		'mediawiki.widgets.SelectWithInputWidget',		'mediawiki.widgets.expiry'	],	function {		if ( window.location.pathname === "/wiki/Special:BlankPage") {			updateTitle;			makeForm;		}	} );

function updateTitle { $('#firstHeading').text( 'Block user' ); }

function makeForm { var $c = $('#mw-content-text'); $c.empty.addClass('specialblock'); $c.append( 'This is a test, it is not the real block page.  '); var user = new mw.widgets.UserInputWidget({		required: true	}); var create = new OO.ui.ButtonWidget( {		label: 'Create block',		flags: [		'primary',		'progressive'		]	} ); // Need this for the enabling/disabling functions var radio = getRadio; var r = radio[1]; var pages = multi( 'Pages', getPages, 'shift2 multipg', 'Some help text' ); var pg = pages[1]; pg.setDisabled( true ); var namespaces = multi( 'Namespaces', getNamespaces, 'shift2 multins', 'Some help text' ); var ns = namespaces[1]; ns.setDisabled( true ); var upload = check( 'Uploading files', false, 'shift2' ); var up = upload[1]; up.setDisabled( true ); var move = check( 'Moving pages', false, 'shift2' ); var mo = move[1]; mo.setDisabled( true ); var reason = getReason; var expiry = getExpiry;

$c.append( 		$(' ').text('Username or IP address').addClass( 'block' ).addClass( 'bold' ),		user.$element,		$(' ').text('Actions to block:').addClass( 'block' ).addClass( 'bold' ),		check( 'Editing' )[0],		radio[0],		pages[0],		namespaces[0],		upload[0],		move[0],		check( 'Account creation' )[0],		check( 'Sending email' )[0],		check( 'Editing their own talk page' )[0],		$(' ').text('Expiration:').addClass( 'block' ).addClass( 'bold' ),		expiry.$element,		$(' ').text('Reason:').addClass( 'block' ).addClass( 'bold' ),		reason.$element,		$(' ').text('Additional options:').addClass( 'block' ).addClass( 'bold' ),		check('Automatically block the last IP address used by this user, and any subsequent IP addresses they try to edit from', false, 'left-col')[0],		check('Watch this user‘s user and talk pages')[0],		'  ',		create.$element	); r.on('choose', function (v) {		var disabled = ( v.data === 's' ) // Disable on sitewide option		pg.setDisabled( disabled );		ns.setDisabled( disabled );		up.setDisabled( disabled );		mo.setDisabled( disabled );	} ); }

function wrap( $element, className ) { return $( ' ' ).addClass('wrap').addClass( className ).append( $element ); }

function getRadio { var option1 = new OO.ui.RadioOptionWidget( {   	data: 's',    	label: 'Sitewide'	} ); var helpEl1 = new OO.ui.PopupButtonWidget( {			icon: 'info',			framed: false,			popup: {				head: true,				$content: $( 'Some help text' ),				padded: true,				align: 'force-right'			}		} ).$element;

var option2 = new OO.ui.RadioOptionWidget( {   	data: 'p',    	label: 'Partial'	} ); var helpEl2 = new OO.ui.PopupButtonWidget( {			icon: 'info',			framed: false,			popup: {				head: true,				$content: $( 'Some help text' ),				padded: true,				align: 'force-right'			}		} ).$element;

var radioSelect=new OO.ui.RadioSelectWidget( {   	items: [ option1, option2 ]	} ); radioSelect.$element.addClass( 'shift' ); return [ radioSelect.$element, radioSelect ]; }

function check( label, radio, className, help ) { var el, labelEl, helpEl; if ( radio ) { el = new OO.ui.RadioInputWidget; } else { el = new OO.ui.CheckboxInputWidget; }	if ( help ) { helpEl = new OO.ui.PopupButtonWidget( {			icon: 'info',			framed: false,			popup: {				head: true,				label: help,				$content: $( help ),				padded: true,				align: 'force-right'			}		} ).$element; }	labelEl = $( ' ' ).text( label ); return [ wrap( [ el.$element, labelEl, helpEl ], className ), el ]; }

function multi( label, options, className, help ) { var el = new OO.ui.MenuTagMultiselectWidget( {		options: options	} ); var labelEl = $( ' ' ).text( label ); var helpEl = new OO.ui.PopupButtonWidget( {			icon: 'info',			framed: false,			popup: {				head: true,				label: help,				$content: $( help ),				padded: true,				align: 'force-right'			}		} ).$element; return [wrap( [ labelEl, helpEl, el.$element ], className ), el]; } function getNamespaces { var namespaces = Object.keys(mw.config.get( 'wgNamespaceIds' )); namespaces = namespaces.filter( function (n) {		return n !== '';	} ); return namespaces.map( function ( n ) {		var name = toTitleCase( n.split( '_' ).join( ' ' ) );		return { data: name, label: name }	}); } function getPages { var pages = [ 'Main page', 'Get MediaWiki', 'Get extensions', 'Tech blog', 'Contribute', 'User help', 'FAQ', 'Technical manual', 'Support desk', 'Communication', 'Bug tracker', 'Code repository', 'Code docs', 'Statistics', 'Wikimedia technology', 'Wikimedia audiences', 'Community portal', 'Current issues' ];	return pages.map( function ( p ) {		return { data: p, name: p }	}); }

function getReason { return new mw.widgets.SelectWithInputWidget( {   	or: true,    	dropdowninput: {    	options: [	        { data: 'other', label: 'Other' },        	{ data: 'a', label: 'Inserting false information' },        	{ data: 'b', label: 'Removing content from pages' },        	{ data: 'c', label: 'Spammings links to external sites' },        	{ data: 'c', label: 'Inserting nonsense/gibberish into pages' },        	{ data: 'c', label: 'Intimidating behavior/harassment' },        	{ data: 'c', label: 'Abusing multiple accounts' },        	{ data: 'c', label: 'Unacceptable username' }    	]    	},    	textinput: {    	}	} ); }

function getExpiry { return new mw.widgets.ExpiryWidget({		noDatePicker: false,		RelativeInputClass: mw.widgets.SelectWithInputWidget,		relativeInput: {			or: true,			dropdowninput: {				options: [					{ data: 'c', label: '2 hours' },					{ data: 'c', label: '1 day' },					{ data: 'c', label: '3 days' },					{ data: 'c', label: '1 week' },					{ data: 'c', label: '2 weeks' },					{ data: 'c', label: '1 month' },					{ data: 'c', label: '3 months' },					{ data: 'c', label: '6 months' },					{ data: 'c', label: '1 year' },					{ data: 'c', label: 'Indefinite' },					{ data: 'other', label: 'Other time:' }				]			},			textinput: {				required: true			}		}	}); }

function toTitleCase(str) { return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase + txt.substr(1).toLowerCase;}); }