MediaWiki:Gadget-Form.js

/**
 * This gadget interacts with [[Module:Form]] to produce forms that inject content into other pages
 */
window.TemplateForm = {

	init: function () {
		$( '.template-form-error' ).hide();
		$( '.template-form-send' ).click( TemplateForm.submit );
		TemplateForm.initFields();
	},

	submit: function () {
		var button = $( this );
		var form = button.closest( '.template-form' );
		var error = form.find( '.template-form-error' );
		var message = form.find( '.template-form-message' );

		// Validation
		try {
			if ( mw.config.get( 'wgNamespaceNumber' ) === 10 ) {
				throw 'namespace';
			}

			var values = form.find( '.template-form-input' ).text();
			if ( ! values ) {
				throw 'empty';
			}

			form.find( '.template-form-field' ).each( function () {
				var field = $( this );
				var required = field.data( 'required' );
				var input = field.find( '.template-form-input' );
				var value = input.text();
				if ( required && ! value ) {
					var name = field.data( 'name' );
					input.css( 'border-color', 'red' );
					throw 'required';
				}
			} );
		} catch ( exception ) {
			var text = error.data( exception );
			error.text( text ).show();
			return;
		}

		// Signal success
		error.hide();
		button.hide();
		var sending = message.data( 'sending' );
		message.text( sending ).show();

		// Build the wikitext
		var template = form.data( 'template' );
		var wikitext = '{{' + template;
		form.find( '.template-form-field' ).each( function () {
			var field = $( this );
			var name = field.data( 'name' );
			var value = field.find( '.template-form-input' ).text();
			wikitext += '\n| ' + name + ' = ' + value;
		} );
		wikitext += '\n}}';

		// Figure out the page and section where to post
		var page = form.data( 'page' );
		if ( ! page ) {
			page = mw.config.get( 'wgPageName' );
		}
		var section = form.data( 'section' );

		// Append the wikitext to the page
		TemplateForm.post( wikitext, page, section ).always( function () {
			var sent = message.data( 'sent' );
			message.text( sent );
		} );
	},

	post: function ( wikitext, page, section ) {
		var api = new mw.Api();
		return api.get( {
			action: 'parse',
			page: page,
			prop: 'text',
		    formatversion: 2
		} ).always( function ( data ) {
			// Figure out if the section already exists and its number
			var sectionNumber, sectionTitle;
			if ( section ) {
				sectionNumber = 'new';
				sectionTitle = section;
				if ( data !== 'missingtitle' ) {
					var html = $.parseHTML( data.parse.text );
					var header = $( ':header:contains(' + sectionTitle + ')', html );
					if ( header.length ) {
						sectionNumber = 1 + header.prevAll( ':header' ).length;
						sectionTitle = null;
						wikitext = '\n\n' + wikitext;
					}
				}
			} else if ( data !== 'missingtitle' ) {
				wikitext = '\n\n' + wikitext;
			}
			var params = {
				action: 'edit',
				title: page,
				section: sectionNumber
			};
			if ( sectionNumber === 'new' ) {
				params.sectiontitle = sectionTitle;
				params.text = wikitext;
			} else {
				params.appendtext = wikitext;
			}
			return api.postWithEditToken( params );
		} );
	},

	initFields: function () {
		$( '.template-form-input' ).each( function () {
			$( this ).attr( 'contenteditable', true );
		} );
		TemplateForm.initRadioFields();
		TemplateForm.initStarFields();
	},

	initRadioFields: function () {
		$( '.template-form-field[data-type="radio"]' ).each( function () {
			var field = $( this );
			var input = field.find( '.template-form-input' );
			field.find( '.template-form-radio' ).off().click( function () {
				var radio = $( this );
				var value = radio.text();
				input.text( value );
				radio.addClass( 'selected' ).siblings().removeClass( 'selected' );
			} );
		} );
	},

	initStarFields: function () {
		var fullStar = '//upload.wikimedia.org/wikipedia/commons/5/51/Star_full.svg';
		var emptyStar = '//upload.wikimedia.org/wikipedia/commons/4/49/Star_empty.svg';
		$( '.template-form-field[data-type="stars"]' ).each( function () {
			var field = $( this );
			field.find( '.template-form-stars img' ).off().hover( function () {
				var star = $( this );
				star.attr( 'src', fullStar );
				star.prevAll( 'img' ).attr( 'src', fullStar );
				star.nextAll( 'img' ).attr( 'src', emptyStar );
			} ).click( function () {
				var star = $( this );
				var value = star.index() + 1;
				field.find( '.template-form-input' ).text( value );
			} );
			field.off().mouseout( function () {
				var field = $( this );
				var value = field.find( '.template-form-input' ).text();
				if ( !value ) {
					value = 0;
				}
				field.find( '.template-form-stars img' ).slice( 0, value ).attr( 'src', fullStar );
				field.find( '.template-form-stars img' ).slice( value ).attr( 'src', emptyStar );
			} );
		} );
	}
};

$( TemplateForm.init );