MediaWiki:Gadget-insert-inflection.js

/*
 * @author: [[:pl:User:Beau]]
 */

var messages = {
		'inflection-insert-noun-subject': 'Wstaw temat',
		'inflection-noun-subject': 'Temat rzeczownika:',
		'inflection-insert-button-title': 'Wstaw odmianę',
		'inflection-insert-button-alt': 'Wstaw odmianę',
		'inflection-language': 'Język:',
		'inflection-template': 'Szablon:',
		'inflection-cancel-button': 'Anuluj',
		'inflection-insert-template': 'Wstaw szablon'
	},
	inflectionData = require( './insert-inflection-data.json' ),
	$panel = null,
	$languageSelector = null,
	$templateSelector = null,
	$formContainer = null,
	storageKey = 'ext.gadget.insert-inflection.selection',
	storage = mw.storage.getObject( storageKey ) || {
		language: '',
		template: ''
	};

function loadPanel() {
	$panel = $( '<div>' ).addClass( 'inflection-gadget-panel' );

	$languageSelector = $( '<select>' )
		.addClass( 'inflection-gadget-language-selector' )
		.on( 'change', selectLanguage );

	$templateSelector = $( '<select>' )
		.addClass( 'inflection-gadget-template-selector' )
		.on( 'change', selectTemplate );

	inflectionData.forEach( function ( entry, i ) {
		var $option = $( '<option>' )
			.val( i )
			.text( entry.title )
			.appendTo( $languageSelector );

		if ( entry.title === storage.language ) {
			$option.prop( 'selected', true );
		}
	} );

	// top line
	$( '<div>' )
		.append( [
			mw.msg( 'inflection-language' ),
			' ',
			$languageSelector,
			mw.msg( 'inflection-template' ),
			' ',
			$templateSelector
		] )
		.appendTo( $panel );
	
	$formContainer = $( '<div>' ).appendTo( $panel );

	// bottom line
	$( '<div>' )
		.append( [
			$( '<input>' )
				.attr( 'type', 'button' )
				.val( mw.msg( 'inflection-insert-template' ) )
				.on( 'click', insertTemplate )
				.on( 'click', mw.confirmCloseWindow( {
					test: function () {
						return $panel.find( 'input[type="text"]' ).get()
							.some( function ( input ) {
								return input.value !== '';
							} );
					},
					namespace: 'insert-inflection'
				} ).release ),
			' ',
			$( '<input>' )
				.attr( 'type', 'button' )
				.val( mw.msg( 'inflection-cancel-button' ) )
				.on( 'click', function ( evt ) {
					$panel.toggle();
				} )
		] )
		.appendTo( $panel );

	$( '.wikiEditor-ui-text, #wpTextbox1' ).first().before( $panel );

	selectLanguage( storage.template );
}

function selectLanguage( selectedTemplate ) {
	var language = inflectionData[ $languageSelector.val() ];

	mw.storage.setObject( storageKey, $.extend( storage, {
		language: $languageSelector.find( ':selected' ).text()
	} ) );

	$templateSelector.empty();

	language.templates.forEach( function ( template, i ) {
		var $option = $( '<option>' )
			.val( i )
			.text( template.title )
			.appendTo( $templateSelector );

		if ( template.title === selectedTemplate ) {
			$option.prop( 'selected', true );
		}
	} );

	selectTemplate();
}

function selectTemplate() {
	var $form, $table, elements, $row,
		language = inflectionData[ $languageSelector.val() ],
		template = language.templates[ $templateSelector.val() ];

	mw.storage.setObject( storageKey, $.extend( storage, {
		template: $templateSelector.find( ':selected' ).text()
	} ) );

	$templateSelector.data( 'selectedTemplate', template );
	$formContainer.children().hide();

	if ( template.$element ) {
		template.$element.show();
		return;
	}

	elements = [];

	template.fields.forEach( function ( field ) {
		var $input;
		
		if ( field.caption !== null ) {
			$input = $( '<input>' ).attr( 'type', 'text' );
			elements.push( field.caption, $input );
			field.$input = $input;
		}
	} );

	$table = $( '<table>' );

	while ( elements.length > 0 ) {
		$row = $( '<tr>' );
		$.each( elements.splice( 0, 4 ), function ( i, rowElement ) {
			$( '<td>' )
				.append( rowElement )
				.appendTo( $row );
		} );
		$table.append( $row );
	}
	
	$form = $( '<div>' );

	if ( template.title === 'rzeczownik' ) {
		$( '<div>' )
			.append( [
				mw.msg( 'inflection-noun-subject' ),
				' ',
				$( '<input>' ).attr( 'type', 'text' ),
				$( '<input>' )
					.attr( 'type', 'button' )
					.val( mw.msg( 'inflection-insert-noun-subject' ) )
					.on( 'click', function () {
						$form.find( 'input[type="text"]' )
							.val( $( this ).prev().val() );
					} )
			] )
			.prependTo( $form );
	}

	template.$element = $form
		.append( $table )
		.appendTo( $formContainer );
}

function insertTemplate() {
	var data = $templateSelector.data( 'selectedTemplate' ),
		text = mw.format( '{{$1\n', data.template ),
		fields = {};

	data.fields.forEach( function ( field ) {
		if ( field.$input ) {
			fields[ field.name ] = field.$input.val();
		} else {
			fields[ field.name ] = field.value;
		}
	} );

	Object.keys( fields ).forEach( function ( name ) {
		if ( name[ 0 ] >= '0' && name[ 0 ] <= '9' ) {
			text += mw.format( '|$1\n', fields[ name ] );
		} else {
			text += mw.format( '|$1 = $2\n', name, fields[ name ] );
		}
	} );

	text += '}}';

	$( '#wpTextbox1' ).focus().textSelection( 'encapsulateSelection', {
		pre: text
	} );
}

$( function () {
	mw.messages.set( messages );
	
	mw.libs.toolbarGadget.addButton( {
		icon: '//upload.wikimedia.org/wikipedia/commons/0/04/Button_array.png',
		title: mw.msg( 'inflection-insert-button-title' ),
		alt: mw.msg( 'inflection-insert-button-alt' ),
		id: 'insertInflectionButton',
		onclick: function () {
			if ( !$panel ) {
				loadPanel();
			} else {
				$panel.toggle();
			}
		}
	} );
} );