MediaWiki:Gadget-Create.js

const Create = {

	init: function ( $content ) {
		$templates = $content.find( 'template-create' );

		// Add datalist to DOM
		$templates.each( ( index, template ) => {
			const $template = $( template );
			const $datalist = $( '<datalist id="template-create-suggestions-' + index + '" class="template-create-suggestions"></datalist>' );
			$template.append( $datalist );
			$template.find( '.mw-inputbox-createbox' ).attr( 'list', 'template-create-suggestions-' + index );
		} );

		// Bind events
		$templates.find( 'form' ).submit( Create.exists );
		$templates.find( '.mw-inputbox-createbox' ).on( 'keyup', Create.suggest );

		// Focus on the first input that has autofocus
		$templates.filter( '[data-autofocus]' ).first().find( '.mw-inputbox-createbox' ).focus();
	},

	/**
	 * Check if the selected title exists
	 */
	exists: function () {
		const $form = $( this );
		if ( $form.data( 'valid' ) ) {
			const autocreate = $form.closest( '.template-create' ).data( 'autocreate' );
			if ( autocreate ) {
				return Create.create( $form );
			} else {
				return true;
			}
		}
		const title = $form.find( 'input[name="title"]' ).val().trim();
		const prefix = $form.find( 'input[name="prefix"]' ).val() ?? '';
		new mw.Api().get( {
			action: 'query',
			titles: prefix + title,
			prop: 'info',
			format: 'json',
			formatversion: 2
		} ).done( data => {
			const page = data.query.pages[0]; // Unwrap the data
			const Title = new mw.Title( page.title );
			if ( 'missing' in page ) {
				$form.data( 'valid', true ).submit();
			} else {
				const $template = $form.closest( '.template-create' );
				$template.find( '.error' ).remove();
				const href = Title.getUrl();
				const text = Title.getPrefixedText();
				const link = $( '<a>' ).attr( { href: href, target: '_blank' } ).text( page.title ).prop( 'outerHTML' );
				const error = link + ' already exists. Please choose another title or edit the page that already exists.';
				const $error = $( '<p class="error">' + error + '</p>' );
				$template.append( $error );
			}
		} );
		return false;
	},

	/**
	 * Create a page in the background and redirect to it
	 */
	create: function ( $form ) {
		const title = $form.find( 'input[name="title"]' ).val().trim();
		const prefix = $form.find( 'input[name="prefix"]' ).val() ?? '';
		const preload = $form.find( 'input[name="preload"]' ).val() ?? '';
		if ( preload ) {
			new mw.Api().get( {
				page: preload,
				action: 'parse',
				prop: 'wikitext',
				formatversion: 2,
			} ).done( data => {
				const preloadText = data.parse.wikitext;
				new mw.Api().create( prefix + title, {}, preloadText ).done( response => {
					var href = mw.util.getUrl( prefix + title );
					window.location.href = href;
				} );
			} );
		} else {
			new mw.Api().create( prefix + title, {}, '' ).done( response => {
				const href = mw.util.getUrl( prefix + title );
				window.location.href = href;
			} );
		}
		return false;
	},

	/**
	 * Suggest existing titles
	 */
	suggest: function ( event ) {
		const $input = $( this );
		const $template = $input.closest( '.template-create' );
		const $suggestions = $template.find( '.template-create-suggestions' );

		// Little trick to detect clicks on suggestions
		// See https://stackoverflow.com/a/65073572/809356
		if ( !event.key ) {
			$suggestions.empty();
			return;
		}
		const query = $input.val().trim();
		if ( !query ) {
			return;
		}
		new mw.Api().get( {
			action: 'opensearch',
			search: query
		} ).done( data => {
			$suggestions.empty();
			const titles = data.slice( 1, 2 )[0];
			if ( titles.length === 1 ) {
				return;
			}
			titles.forEach( title => {
				const $option = $( '<option>' + title + '</option>' );
				$suggestions.append( $option );
			} );
		} );
	}
};

mw.hook( 'wikipage.content' ).add( Create.init );