Source: mobile.talk.overlays/AddTopicForm.js

const
	mfExtend = require( '../mobile.startup/mfExtend' ),
	View = require( '../mobile.startup/View' ),
	util = require( '../mobile.startup/util' );

/**
 * Create a panel with a child
 *
 * @param {jQuery.Object} $child
 * @return {Panel}
 */
function makePanel( $child ) {
	const panel = new View( { className: 'panel' } );
	panel.$el.append( $child );
	return panel;
}

/**
 * Form for adding a talk section
 *
 * @class AddTopicForm
 * @extends View
 *
 * @param {Object} options Configuration options
 * @param {string} options.licenseMsg license text (HTML strings accepted)
 * @param {Function} options.onTextInput callback for when text changes
 * @param {string} options.subject to prefill form with
 * @param {string} options.body to prefill form with
 * @param {boolean} options.disabled to mark the form inputs as disabled
 */
function AddTopicForm( options ) {
	View.call( this,
		util.extend( options, {
			// Template properties
			topicTitlePlaceHolder: mw.msg( 'mobile-frontend-talk-add-overlay-subject-placeholder' ),
			topicContentPlaceHolder: mw.msg( 'mobile-frontend-talk-add-overlay-content-placeholder' ),

			// Additional data
			className: 'add-topic-form',
			events: {
				'input .wikitext-editor, input': 'onTextInput',
				'change .wikitext-editor, input': 'onTextInput'
			}
		} )
	);
}

mfExtend( AddTopicForm, View, {
	/**
	 * @inheritdoc
	 * @memberof AddTopicForm
	 * @instance
	 */
	postRender: function () {
		const options = this.options,
			disabled = options.disabled,
			$subject = util.parseHTML( '<input>' ).attr( {
				class: 'mw-ui-input',
				type: 'text',
				disabled,
				value: options.subject,
				placeholder: options.topicTitlePlaceHolder
			} ),
			$body = util.parseHTML( '<textarea>' ).attr( {
				class: 'wikitext-editor mw-ui-input',
				cols: 40,
				rows: 10,
				disabled,
				placeholder: options.topicContentPlaceHolder
			} ).val( options.body ),
			panels = [
				makePanel( util.parseHTML( '<p>' ).addClass( 'license' ).html( options.licenseMsg ) ),
				makePanel( $subject ),
				makePanel( $body )
			];

		this.$el.append(
			panels.map( function ( panel ) {
				return panel.$el;
			} )
		);
		this.$subject = $subject;
		this.$messageBody = $body;
		View.prototype.postRender.apply( this, arguments );
	},
	/**
	 * Handles an input into a textarea and enables or disables the submit button
	 *
	 * @memberof AddTopicForm
	 * @instance
	 */
	onTextInput: function () {
		if ( this.options.onTextInput ) {
			this.options.onTextInput( this.$subject.val().trim(), this.$messageBody.val().trim() );
		}
	}
} );

AddTopicForm.test = {
	makePanel
};

module.exports = AddTopicForm;