User:Soumi150/OOUI-Demo.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

// User script to change title of page by taking input.

$( document ).ready( function () {
	mw.loader.using( 'oojs-ui-core' ).done( function () {
		var changeTitle = function ( config ) {
			// Configuration object
			config = config || {};
			// Calling super constructor
			changeTitle.super.call( this, config );

			this.input = new OO.ui.TextInputWidget( {
				placeholder: 'Text here...'
			} );

			this.button = new OO.ui.ButtonWidget( {
				label: ' Add Title ',
				flags: [ 'primary', 'progressive' ]

			} );

			this.input.connect( this, { enter: 'onClick' } );
			this.button.connect( this, { click: 'onClick' } );

			this.$element.append(
				this.input.$element.css( {
					width: '65%',
					display: 'inline-block'
				} ),
				this.button.$element.css( {
					float: 'right'
				} )
			);
		};

		OO.inheritClass( changeTitle, OO.ui.Widget );

		changeTitle.prototype.onClick = function () {
			$( '#firstHeading' ).text( this.input.getValue() ).css( { color: 'blue' } );
		};

		// This creates an object of changeTitle class
		var inputWidget = new changeTitle(),

		 beginButton = new OO.ui.PopupButtonWidget( {
				label: 'Begin Here',
				flags: [ 'primary', 'progressive' ],
				popup: {
					$content: inputWidget.$element,
					padded: true
				}
			} );

		$( '#mw-content-text' )
			.append( beginButton.$element );

	} );
} );