As I explained in T155473#2944504
For example when someone wants to make a dialog box in OOUI:
function MyDialog( config ) { MyDialog.super.call( this, config ); } OO.inheritClass( MyDialog, OO.ui.Dialog ); MyDialog.static.title = 'Simple dialog'; MyDialog.prototype.initialize = function () { MyDialog.super.prototype.initialize.call( this ); this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); this.content.$element.append( '<p>A simple dialog window. Press \'Esc\' to close. </p>' ); this.$body.append( this.content.$element ); }; MyDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; var myDialog = new MyDialog( { size: 'medium' } ); var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); windowManager.addWindows( [ myDialog ] ); windowManager.openWindow( myDialog );
(Copied from here).
What I would love to see is some sort of form factory in JavaScript. Like HTMLFormFactory in PHP. So we only build an array of form descriptors and call it, then bam! the form is there. Something like:
windowManager.openWindow(
{
name: 'MyDialog',
title: 'Simple dialog',
size: 'medium',
elements: [
{
id: 'panel1',
type: 'Panel',
attr: { padded: true, expanded: false }
},
{
tag: 'p',
text: 'A simple dialog window. Press \'Esc\' to close.',
parent: 'panel1'
}
]
}
);And/or something like jQuery (which can consume existing HTML divs as the source of the dialogue:
<div id="MyDialog" title="Simple dialog"> <p>A simple dialog window. Press \'Esc\' to close.</p> </div>
$( function() {
$( '#MyDialog' ).dialog();
} );