User:MSchottlender-WMF/oouiExamples/basicWidgets.js

$( 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 ); } );