Right now, the way to create an OOUI dialog requires extending the base classes. While that will always be true when the product needs an advanced dialog (and is true for any advanced widget) it's also true that there are cases where a product needs a straight forward ProcessDialog with one or two pages, and it would be helpful to enable that.
The existence of a simple dialog class that can be instantiated outright without being extended will also be very useful for gadget developers, and help with T155567: Make OOUI easier to use for gadgets
Please see the patch for enabling this: https://gerrit.wikimedia.org/r/c/oojs/ui/+/365504
The implementation creates a wrapper widget for a process dialog with teh assumption that it can have small amount of screens ("pages") and a straight-forward set of callbacks for dialog actions.
There's a demo added, with the following example usage to quickly instantiate a dialog with three screens and "forward" / "backwards" buttons:
simpleDialogWidget = new OO.ui.SimpleDialogWidget(
'demo',
'Demo simple dialog',
{
pages: [
new OO.ui.PageLayout( 'page1', {
title: 'Page 1',
$content: new OO.ui.LabelWidget( { label: 'The content of page 1' } ).$element
} ),
new OO.ui.PageLayout( 'page2', {
title: 'Page 2',
$content: new OO.ui.LabelWidget( { label: 'The content of page 2' } ).$element
} ),
new OO.ui.PageLayout( 'page3', {
title: 'Page 3',
$content: $( '<div>' ).append(
$( '<div>' ).append(
new OO.ui.LabelWidget( { label: 'The content of page 3' } ).$element
),
$( '<div>' ).css( { clear: 'both', display: 'block' } ),
$( '<div>' ).append(
simppleDialogInnerButton.$element
)
)
} )
],
actions: [
{ label: 'Cancel', modes: [ 'page1', 'page2', 'page3' ], flags: 'safe' },
{
action: 'backwards',
modes: [ 'page2', 'page3' ],
label: 'Previous page',
callback: function () {
// The context in this function is the instance of the SimpleDialog
return this.previousPage();
}
},
{
action: 'forward',
modes: [ 'page1', 'page2' ],
label: 'Next page',
callback: function () {
// The context in this function is the instance of the SimpleDialog
return this.nextPage();
}
}
],
$overlay: $overlay
}
);
// Example binding internal button to quickly move to a requested screen/page
simppleDialogInnerButton.on( 'click', function () {
this.setCurrentPage( 'page1' );
}.bind( simpleDialogWidget ) );And to trigger the dialog:
simpleDialogButton.on( 'click', function () {
simpleDialogWidget.open();
} );(Instead of having to call the window manager, etc)