OO.ui.Demo.static.pages.dialogs = function ( demo ) { var i, l, name, openButton, DialogClass, config, $demo = demo.$element, fieldset = new OO.ui.FieldsetLayout( { label: 'Dialogs' } ), windows = {}, windowManager = new OO.ui.WindowManager(); function SimpleDialog( config ) { SimpleDialog.parent.call( this, config ); } OO.inheritClass( SimpleDialog, OO.ui.Dialog ); SimpleDialog.static.title = 'Simple dialog'; SimpleDialog.prototype.initialize = function () { var closeButton, dialog = this; SimpleDialog.parent.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); this.content.$element.append( '
Dialog content
' ); closeButton = new OO.ui.ButtonWidget( { label: OO.ui.msg( 'ooui-dialog-process-dismiss' ) } ); closeButton.on( 'click', function () { dialog.close(); } ); this.content.$element.append( closeButton.$element ); this.$body.append( this.content.$element ); }; SimpleDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; function ProcessDialog( config ) { ProcessDialog.parent.call( this, config ); } OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); ProcessDialog.static.title = 'Process dialog'; ProcessDialog.static.actions = [ { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, { action: 'cancel', label: 'Cancel', flags: 'safe' }, { action: 'other', label: 'Other', flags: 'other' } ]; ProcessDialog.prototype.initialize = function () { ProcessDialog.parent.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); this.content.$element.append( 'Dialog content
' ); this.$body.append( this.content.$element ); }; ProcessDialog.prototype.getActionProcess = function ( action ) { var dialog = this; if ( action ) { return new OO.ui.Process( function () { dialog.close( { action: action } ); } ); } return ProcessDialog.parent.prototype.getActionProcess.call( this, action ); }; ProcessDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; function FramelessProcessDialog( config ) { FramelessProcessDialog.parent.call( this, config ); } OO.inheritClass( FramelessProcessDialog, ProcessDialog ); FramelessProcessDialog.static.actions = OO.copy( FramelessProcessDialog.static.actions ); FramelessProcessDialog.static.actions.forEach( function ( action ) { action.framed = false; } ); function SearchWidgetDialog( config ) { SearchWidgetDialog.parent.call( this, config ); this.broken = false; } OO.inheritClass( SearchWidgetDialog, OO.ui.ProcessDialog ); SearchWidgetDialog.static.title = 'Search widget dialog'; SearchWidgetDialog.prototype.initialize = function () { var i, items, searchWidget; SearchWidgetDialog.parent.prototype.initialize.apply( this, arguments ); items = []; searchWidget = new OO.ui.SearchWidget(); for ( i = 1; i <= 20; i++ ) { items.push( new OO.ui.OptionWidget( { data: i, label: 'Item ' + i } ) ); } searchWidget.results.addItems( items ); searchWidget.onQueryChange = function () {}; this.$body.append( searchWidget.$element ); }; SearchWidgetDialog.prototype.getBodyHeight = function () { return 300; }; SearchWidgetDialog.static.actions = [ { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; SearchWidgetDialog.prototype.getActionProcess = function ( action ) { var dialog = this; return new OO.ui.Process( function () { dialog.close( { action: action } ); } ); }; function BrokenDialog( config ) { BrokenDialog.parent.call( this, config ); this.broken = false; } OO.inheritClass( BrokenDialog, OO.ui.ProcessDialog ); BrokenDialog.static.title = 'Broken dialog'; BrokenDialog.static.actions = [ { action: 'save', label: 'Save', flags: [ 'primary', 'constructive' ] }, { action: 'delete', label: 'Delete', flags: 'destructive' }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; BrokenDialog.prototype.getBodyHeight = function () { return 250; }; BrokenDialog.prototype.initialize = function () { BrokenDialog.parent.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { padded: true } ); this.fieldset = new OO.ui.FieldsetLayout( { label: 'Dialog with error handling', icon: 'alert' } ); this.description = new OO.ui.LabelWidget( { label: 'Deleting will fail and will not be recoverable. ' + 'Saving will fail the first time, but succeed the second time.' } ); this.fieldset.addItems( [ this.description ] ); this.content.$element.append( this.fieldset.$element ); this.$body.append( this.content.$element ); }; BrokenDialog.prototype.getSetupProcess = function ( data ) { return BrokenDialog.parent.prototype.getSetupProcess.call( this, data ) .next( function () { this.broken = true; }, this ); }; BrokenDialog.prototype.getActionProcess = function ( action ) { return BrokenDialog.parent.prototype.getActionProcess.call( this, action ) .next( function () { return 1000; }, this ) .next( function () { var closing; if ( action === 'save' ) { if ( this.broken ) { this.broken = false; return new OO.ui.Error( 'Server did not respond' ); } } else if ( action === 'delete' ) { return new OO.ui.Error( 'Permission denied', { recoverable: false } ); } closing = this.close( { action: action } ); if ( action === 'save' ) { // Return a promise to remaing pending while closing return closing; } return BrokenDialog.parent.prototype.getActionProcess.call( this, action ); }, this ); }; function SamplePage( name, config ) { config = $.extend( { label: 'Sample page' }, config ); OO.ui.PageLayout.call( this, name, config ); this.label = config.label; this.icon = config.icon; if ( this.$element.is( ':empty' ) ) { this.$element.text( this.label ); } } OO.inheritClass( SamplePage, OO.ui.PageLayout ); SamplePage.prototype.setupOutlineItem = function ( outlineItem ) { SamplePage.parent.prototype.setupOutlineItem.call( this, outlineItem ); this.outlineItem .setMovable( true ) .setRemovable( true ) .setIcon( this.icon ) .setLabel( this.label ); }; function BookletDialog( config ) { BookletDialog.parent.call( this, config ); } OO.inheritClass( BookletDialog, OO.ui.ProcessDialog ); BookletDialog.static.title = 'Booklet dialog'; BookletDialog.static.actions = [ { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; BookletDialog.prototype.getBodyHeight = function () { return 250; }; BookletDialog.prototype.initialize = function () { var dialog; BookletDialog.parent.prototype.initialize.apply( this, arguments ); dialog = this; function changePage( direction ) { var pageIndex = dialog.pages.indexOf( dialog.bookletLayout.getCurrentPage() ); pageIndex = ( dialog.pages.length + pageIndex + direction ) % dialog.pages.length; dialog.bookletLayout.setPage( dialog.pages[ pageIndex ].getName() ); } this.navigationField = new OO.ui.FieldLayout( new OO.ui.ButtonGroupWidget( { items: [ new OO.ui.ButtonWidget( { data: 'previous', icon: 'previous' } ).on( 'click', function () { changePage( -1 ); } ), new OO.ui.ButtonWidget( { data: 'next', icon: 'next' } ).on( 'click', function () { changePage( 1 ); } ) ] } ), { label: 'Change page', align: 'top' } ); this.bookletLayout = new OO.ui.BookletLayout(); this.pages = [ new SamplePage( 'page-1', { label: 'Page 1', icon: 'window' } ), new SamplePage( 'page-2', { label: 'Page 2', icon: 'window' } ), new SamplePage( 'page-3', { label: 'Page 3', icon: 'window' } ) ]; this.bookletLayout.addPages( this.pages ); this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } ); this.bookletLayout.setPage( 'page-1' ); this.$body.append( this.bookletLayout.$element ); }; BookletDialog.prototype.getActionProcess = function ( action ) { if ( action ) { return new OO.ui.Process( function () { this.close( { action: action } ); }, this ); } return BookletDialog.parent.prototype.getActionProcess.call( this, action ); }; BookletDialog.prototype.onBookletLayoutSet = function ( page ) { page.$element.append( this.navigationField.$element ); }; function OutlinedBookletDialog( config ) { OutlinedBookletDialog.parent.call( this, config ); } OO.inheritClass( OutlinedBookletDialog, OO.ui.ProcessDialog ); OutlinedBookletDialog.static.title = 'Booklet dialog'; OutlinedBookletDialog.static.actions = [ { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; OutlinedBookletDialog.prototype.getBodyHeight = function () { return 250; }; OutlinedBookletDialog.prototype.initialize = function () { OutlinedBookletDialog.parent.prototype.initialize.apply( this, arguments ); this.bookletLayout = new OO.ui.BookletLayout( { outlined: true } ); this.pages = [ new SamplePage( 'small', { label: 'Small', icon: 'window' } ), new SamplePage( 'medium', { label: 'Medium', icon: 'window' } ), new SamplePage( 'large', { label: 'Large', icon: 'window' } ), new SamplePage( 'larger', { label: 'Larger', icon: 'window' } ), new SamplePage( 'full', { label: 'Full', icon: 'window' } ) ]; this.bookletLayout.addPages( this.pages ); this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } ); this.$body.append( this.bookletLayout.$element ); }; OutlinedBookletDialog.prototype.getActionProcess = function ( action ) { if ( action ) { return new OO.ui.Process( function () { this.close( { action: action } ); }, this ); } return OutlinedBookletDialog.parent.prototype.getActionProcess.call( this, action ); }; OutlinedBookletDialog.prototype.onBookletLayoutSet = function ( page ) { this.setSize( page.getName() ); }; OutlinedBookletDialog.prototype.getSetupProcess = function ( data ) { return OutlinedBookletDialog.parent.prototype.getSetupProcess.call( this, data ) .next( function () { this.bookletLayout.setPage( this.getSize() ); }, this ); }; function SampleCard( name, config ) { OO.ui.CardLayout.call( this, name, config ); this.$element.text( this.label ); } OO.inheritClass( SampleCard, OO.ui.CardLayout ); function IndexedDialog( config ) { IndexedDialog.parent.call( this, config ); } OO.inheritClass( IndexedDialog, OO.ui.ProcessDialog ); IndexedDialog.static.title = 'Index dialog'; IndexedDialog.static.actions = [ { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; IndexedDialog.prototype.getBodyHeight = function () { return 250; }; IndexedDialog.prototype.initialize = function () { IndexedDialog.parent.prototype.initialize.apply( this, arguments ); this.indexLayout = new OO.ui.IndexLayout(); this.cards = [ new SampleCard( 'first', { label: 'One' } ), new SampleCard( 'second', { label: 'Two' } ), new SampleCard( 'third', { label: 'Three' } ), new SampleCard( 'fourth', { label: 'Four' } ) ]; this.indexLayout.addCards( this.cards ); this.$body.append( this.indexLayout.$element ); this.indexLayout.getTabs().getItemFromData( 'fourth' ).setDisabled( true ); }; IndexedDialog.prototype.getActionProcess = function ( action ) { if ( action ) { return new OO.ui.Process( function () { this.close( { action: action } ); }, this ); } return IndexedDialog.parent.prototype.getActionProcess.call( this, action ); }; function MenuDialog( config ) { MenuDialog.parent.call( this, config ); } OO.inheritClass( MenuDialog, OO.ui.ProcessDialog ); MenuDialog.static.title = 'Menu dialog'; MenuDialog.static.actions = [ { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; MenuDialog.prototype.getBodyHeight = function () { return 350; }; MenuDialog.prototype.initialize = function () { var menuLayout, positionField, showField, menuPanel, contentPanel; MenuDialog.parent.prototype.initialize.apply( this, arguments ); menuLayout = new OO.ui.MenuLayout(); positionField = new OO.ui.FieldLayout( new OO.ui.ButtonSelectWidget( { items: [ new OO.ui.ButtonOptionWidget( { data: 'before', label: 'Before' } ), new OO.ui.ButtonOptionWidget( { data: 'after', label: 'After' } ), new OO.ui.ButtonOptionWidget( { data: 'top', label: 'Top' } ), new OO.ui.ButtonOptionWidget( { data: 'bottom', label: 'Bottom' } ) ] } ).on( 'select', function ( item ) { menuLayout.setMenuPosition( item.getData() ); } ), { label: 'Menu position', align: 'top' } ); showField = new OO.ui.FieldLayout( new OO.ui.ToggleSwitchWidget( { value: true } ).on( 'change', function ( value ) { menuLayout.toggleMenu( value ); } ), { label: 'Show menu', align: 'top' } ); menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ); contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ); menuLayout.$menu.append( menuPanel.$element.append( 'Menu panel' ) ); menuLayout.$content.append( contentPanel.$element.append( positionField.$element, showField.$element ) ); this.$body.append( menuLayout.$element ); }; MenuDialog.prototype.getActionProcess = function ( action ) { if ( action ) { return new OO.ui.Process( function () { this.close( { action: action } ); }, this ); } return MenuDialog.parent.prototype.getActionProcess.call( this, action ); }; function ExampleLookupTextInputWidget( config ) { config = config || {}; this.items = config.items || []; OO.ui.TextInputWidget.call( this, config ); OO.ui.mixin.LookupElement.call( this, config ); } OO.inheritClass( ExampleLookupTextInputWidget, OO.ui.TextInputWidget ); OO.mixinClass( ExampleLookupTextInputWidget, OO.ui.mixin.LookupElement ); ExampleLookupTextInputWidget.prototype.getLookupRequest = function () { return $.Deferred().resolve( [] ).promise( { abort: function () {} } ); }; ExampleLookupTextInputWidget.prototype.getLookupCacheDataFromResponse = function () { return []; }; ExampleLookupTextInputWidget.prototype.getLookupMenuOptionsFromData = function () { return this.items; }; function DialogWithDropdowns( config ) { DialogWithDropdowns.parent.call( this, config ); } OO.inheritClass( DialogWithDropdowns, OO.ui.ProcessDialog ); DialogWithDropdowns.static.title = 'Dialog with dropdowns ($overlay test)'; DialogWithDropdowns.static.actions = [ { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; DialogWithDropdowns.prototype.getBodyHeight = function () { return 250; }; DialogWithDropdowns.prototype.initialize = function () { var $spacer = $( '