User:MSchottlender-WMF/oouiExamples/basicWidgets.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.

$( document ).ready( function () {

	mw.loader.using(['oojs-ui-core', 'oojs-ui-widgets', 'oojs-ui-windows']).done( function () {
		// For this demo, only show it on "Special:BlankPage"
		if ( mw.config.get('wgNamespaceNumber') !== -1 || mw.config.get('wgPageName') !== 'Special:BlankPage' ) {
			return;
		}
		var widgets = {},
			$content = $( '#mw-content-text' ).empty();

		// Create some basic widgets
		widgets.button = new OO.ui.ButtonWidget( { label: 'OO.ui.ButtonWidget' } );
		widgets.textInput = new OO.ui.TextInputWidget( { placeholder: 'OO.ui.TextInputWidget' } );
		
		// Append to DOM
		$content.append(
			widgets.button.$element,
			widgets.textInput.$element
		);

		// DEMO PURPOSES ONLY!!!
		// expose this so we can reference widgets in the console
		mw.oouiDemo = widgets;
	} );
	
} );































// Things to try out in the console:

/*
mw.oouiDemo.button.setLabel( 'Click me!' );

mw.oouiDemo.button.on( 'click', function () { OO.ui.alert( 'I was clicked!' ); } );

mw.oouiDemo.textInput.setValue( 'Foo' )

mw.oouiDemo.textInput.getValue()

mw.oouiDemo.textInput.setValidation( function ( str ) { return str === 'foo'; } ); 

mw.oouiDemo.textInput.setIcon( 'search' )

mw.oouiDemo.button.setFlags( { progressive: true, primary: true } );

mw.oouiDemo.textInput.on( 'change', function ( newValue ) { OO.ui.alert( 'Value changed: ' + newValue ) } );

mw.oouiDemo.textInput.off( 'change' )

mw.oouiDemo.textInput.on( 'change', function( newValue ) { mw.oouiDemo.button.setLabel( newValue ); } );

// add TagMultiselectWidget with allowArbitrary
counter = 1;
widget = new OO.ui.TagMultiselectWidget( { allowArbitrary: true } );
$( '#mw-content-text' ).append( widget.$element );
mw.oouiDemo.button.on( 'click', function () { widget.addTag( 'Tag #' + counter ); } );
*/