summaryrefslogtreecommitdiff
path: root/vendor/oojs/oojs-ui/demos/pages/dialogs.js
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/oojs/oojs-ui/demos/pages/dialogs.js')
-rw-r--r--vendor/oojs/oojs-ui/demos/pages/dialogs.js318
1 files changed, 239 insertions, 79 deletions
diff --git a/vendor/oojs/oojs-ui/demos/pages/dialogs.js b/vendor/oojs/oojs-ui/demos/pages/dialogs.js
index 6e9da3f8..ff3b0bbd 100644
--- a/vendor/oojs/oojs-ui/demos/pages/dialogs.js
+++ b/vendor/oojs/oojs-ui/demos/pages/dialogs.js
@@ -6,7 +6,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
windowManager = new OO.ui.WindowManager();
function SimpleDialog( config ) {
- SimpleDialog.super.call( this, config );
+ SimpleDialog.parent.call( this, config );
}
OO.inheritClass( SimpleDialog, OO.ui.Dialog );
SimpleDialog.static.title = 'Simple dialog';
@@ -14,7 +14,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
var closeButton,
dialog = this;
- SimpleDialog.super.prototype.initialize.apply( this, arguments );
+ SimpleDialog.parent.prototype.initialize.apply( this, arguments );
this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
this.content.$element.append( '<p>Dialog content</p>' );
@@ -33,16 +33,17 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
};
function ProcessDialog( config ) {
- ProcessDialog.super.call( this, 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: 'cancel', label: 'Cancel', flags: 'safe' },
+ { action: 'other', label: 'Other', flags: 'other' }
];
ProcessDialog.prototype.initialize = function () {
- ProcessDialog.super.prototype.initialize.apply( this, arguments );
+ ProcessDialog.parent.prototype.initialize.apply( this, arguments );
this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
this.content.$element.append( '<p>Dialog content</p>' );
this.$body.append( this.content.$element );
@@ -54,23 +55,32 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
dialog.close( { action: action } );
} );
}
- return ProcessDialog.super.prototype.getActionProcess.call( this, 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.super.call( this, 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 () {
- SearchWidgetDialog.super.prototype.initialize.apply( this, arguments );
- var i,
- items = [],
- searchWidget = new OO.ui.SearchWidget();
+ 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 } ) );
}
@@ -92,7 +102,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
};
function BrokenDialog( config ) {
- BrokenDialog.super.call( this, config );
+ BrokenDialog.parent.call( this, config );
this.broken = false;
}
OO.inheritClass( BrokenDialog, OO.ui.ProcessDialog );
@@ -106,7 +116,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
return 250;
};
BrokenDialog.prototype.initialize = function () {
- BrokenDialog.super.prototype.initialize.apply( this, arguments );
+ 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'
@@ -120,13 +130,13 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
this.$body.append( this.content.$element );
};
BrokenDialog.prototype.getSetupProcess = function ( data ) {
- return BrokenDialog.super.prototype.getSetupProcess.call( this, data )
+ return BrokenDialog.parent.prototype.getSetupProcess.call( this, data )
.next( function () {
this.broken = true;
}, this );
};
BrokenDialog.prototype.getActionProcess = function ( action ) {
- return BrokenDialog.super.prototype.getActionProcess.call( this, action )
+ return BrokenDialog.parent.prototype.getActionProcess.call( this, action )
.next( function () {
return 1000;
}, this )
@@ -147,20 +157,22 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
// Return a promise to remaing pending while closing
return closing;
}
- return BrokenDialog.super.prototype.getActionProcess.call( this, action );
+ return BrokenDialog.parent.prototype.getActionProcess.call( this, action );
}, this );
};
function SamplePage( name, config ) {
- config = $.extend( { label: 'Sample page', icon: 'Sample icon' }, config );
+ config = $.extend( { label: 'Sample page' }, config );
OO.ui.PageLayout.call( this, name, config );
this.label = config.label;
this.icon = config.icon;
- this.$element.text( this.label );
+ if ( this.$element.is( ':empty' ) ) {
+ this.$element.text( this.label );
+ }
}
OO.inheritClass( SamplePage, OO.ui.PageLayout );
SamplePage.prototype.setupOutlineItem = function ( outlineItem ) {
- SamplePage.super.prototype.setupOutlineItem.call( this, outlineItem );
+ SamplePage.parent.prototype.setupOutlineItem.call( this, outlineItem );
this.outlineItem
.setMovable( true )
.setRemovable( true )
@@ -169,7 +181,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
};
function BookletDialog( config ) {
- BookletDialog.super.call( this, config );
+ BookletDialog.parent.call( this, config );
}
OO.inheritClass( BookletDialog, OO.ui.ProcessDialog );
BookletDialog.static.title = 'Booklet dialog';
@@ -181,9 +193,10 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
return 250;
};
BookletDialog.prototype.initialize = function () {
- BookletDialog.super.prototype.initialize.apply( this, arguments );
+ var dialog;
+ BookletDialog.parent.prototype.initialize.apply( this, arguments );
- var dialog = this;
+ dialog = this;
function changePage( direction ) {
var pageIndex = dialog.pages.indexOf( dialog.bookletLayout.getCurrentPage() );
@@ -232,14 +245,14 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
this.close( { action: action } );
}, this );
}
- return BookletDialog.super.prototype.getActionProcess.call( this, action );
+ return BookletDialog.parent.prototype.getActionProcess.call( this, action );
};
BookletDialog.prototype.onBookletLayoutSet = function ( page ) {
page.$element.append( this.navigationField.$element );
};
function OutlinedBookletDialog( config ) {
- OutlinedBookletDialog.super.call( this, config );
+ OutlinedBookletDialog.parent.call( this, config );
}
OO.inheritClass( OutlinedBookletDialog, OO.ui.ProcessDialog );
OutlinedBookletDialog.static.title = 'Booklet dialog';
@@ -251,7 +264,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
return 250;
};
OutlinedBookletDialog.prototype.initialize = function () {
- OutlinedBookletDialog.super.prototype.initialize.apply( this, arguments );
+ OutlinedBookletDialog.parent.prototype.initialize.apply( this, arguments );
this.bookletLayout = new OO.ui.BookletLayout( {
outlined: true
} );
@@ -273,32 +286,26 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
this.close( { action: action } );
}, this );
}
- return OutlinedBookletDialog.super.prototype.getActionProcess.call( this, action );
+ return OutlinedBookletDialog.parent.prototype.getActionProcess.call( this, action );
};
OutlinedBookletDialog.prototype.onBookletLayoutSet = function ( page ) {
this.setSize( page.getName() );
};
OutlinedBookletDialog.prototype.getSetupProcess = function ( data ) {
- return OutlinedBookletDialog.super.prototype.getSetupProcess.call( this, data )
+ return OutlinedBookletDialog.parent.prototype.getSetupProcess.call( this, data )
.next( function () {
this.bookletLayout.setPage( this.getSize() );
}, this );
};
function SampleCard( name, config ) {
- config = $.extend( { label: 'Sample card' }, config );
OO.ui.CardLayout.call( this, name, config );
- this.label = config.label;
this.$element.text( this.label );
}
OO.inheritClass( SampleCard, OO.ui.CardLayout );
- SampleCard.prototype.setupTabItem = function ( tabItem ) {
- SampleCard.super.prototype.setupTabItem.call( this, tabItem );
- this.tabItem.setLabel( this.label );
- };
function IndexedDialog( config ) {
- IndexedDialog.super.call( this, config );
+ IndexedDialog.parent.call( this, config );
}
OO.inheritClass( IndexedDialog, OO.ui.ProcessDialog );
IndexedDialog.static.title = 'Index dialog';
@@ -310,7 +317,7 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
return 250;
};
IndexedDialog.prototype.initialize = function () {
- IndexedDialog.super.prototype.initialize.apply( this, arguments );
+ IndexedDialog.parent.prototype.initialize.apply( this, arguments );
this.indexLayout = new OO.ui.IndexLayout();
this.cards = [
new SampleCard( 'first', { label: 'One' } ),
@@ -330,11 +337,11 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
this.close( { action: action } );
}, this );
}
- return IndexedDialog.super.prototype.getActionProcess.call( this, action );
+ return IndexedDialog.parent.prototype.getActionProcess.call( this, action );
};
function MenuDialog( config ) {
- MenuDialog.super.call( this, config );
+ MenuDialog.parent.call( this, config );
}
OO.inheritClass( MenuDialog, OO.ui.ProcessDialog );
MenuDialog.static.title = 'Menu dialog';
@@ -346,47 +353,49 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
return 350;
};
MenuDialog.prototype.initialize = function () {
- MenuDialog.super.prototype.initialize.apply( this, arguments );
- var 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 } );
+ 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' )
@@ -406,7 +415,144 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
this.close( { action: action } );
}, this );
}
- return MenuDialog.super.prototype.getActionProcess.call( this, action );
+ 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 = $( '<div>' ).height( 150 );
+ DialogWithDropdowns.parent.prototype.initialize.apply( this, arguments );
+ this.bookletLayout = new OO.ui.BookletLayout( {
+ outlined: true
+ } );
+ this.pages = [
+ new SamplePage( 'info', {
+ label: 'Information',
+ icon: 'info',
+ content: [
+ 'This is a test of various kinds of dropdown menus and their $overlay config option. ',
+ 'Entries without any icon use a correctly set $overlay and their menus should be able to extend outside of this small dialog. ',
+ 'Entries with the ', new OO.ui.IconWidget( { icon: 'alert' } ), ' icon do not, and their menus should be clipped to the dialog\'s boundaries. ',
+ 'All dropdown menus should stick to the widget proper, even when scrolling while the menu is open.'
+ ]
+ } ),
+ new SamplePage( 'dropdown', {
+ label: 'DropdownWidget',
+ content: [ $spacer.clone(), new OO.ui.DropdownWidget( {
+ $overlay: this.$overlay,
+ menu: {
+ items: this.makeItems()
+ }
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'dropdown2', {
+ label: 'DropdownWidget',
+ icon: 'alert',
+ content: [ $spacer.clone(), new OO.ui.DropdownWidget( {
+ menu: {
+ items: this.makeItems()
+ }
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'combobox', {
+ label: 'ComboBoxWidget',
+ content: [ $spacer.clone(), new OO.ui.ComboBoxWidget( {
+ $overlay: this.$overlay,
+ menu: {
+ items: this.makeItems()
+ }
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'combobox2', {
+ label: 'ComboBoxWidget',
+ icon: 'alert',
+ content: [ $spacer.clone(), new OO.ui.ComboBoxWidget( {
+ menu: {
+ items: this.makeItems()
+ }
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'lookup', {
+ label: 'LookupElement',
+ content: [ $spacer.clone(), new ExampleLookupTextInputWidget( {
+ $overlay: this.$overlay,
+ items: this.makeItems()
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'lookup2', {
+ label: 'LookupElement',
+ icon: 'alert',
+ content: [ $spacer.clone(), new ExampleLookupTextInputWidget( {
+ items: this.makeItems()
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'capsule', {
+ label: 'CapsuleMultiSelectWidget',
+ content: [ $spacer.clone(), new OO.ui.CapsuleMultiSelectWidget( {
+ $overlay: this.$overlay,
+ menu: {
+ items: this.makeItems()
+ }
+ } ), $spacer.clone() ]
+ } ),
+ new SamplePage( 'capsule2', {
+ label: 'CapsuleMultiSelectWidget',
+ icon: 'alert',
+ content: [ $spacer.clone(), new OO.ui.CapsuleMultiSelectWidget( {
+ menu: {
+ items: this.makeItems()
+ }
+ } ), $spacer.clone() ]
+ } )
+ ];
+ this.bookletLayout.addPages( this.pages );
+ this.$body.append( this.bookletLayout.$element );
+ };
+ DialogWithDropdowns.prototype.makeItems = function () {
+ return [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ].map( function ( val ) {
+ return new OO.ui.MenuOptionWidget( {
+ data: val,
+ label: String( val )
+ } );
+ } );
+ };
+
+ DialogWithDropdowns.prototype.getActionProcess = function ( action ) {
+ if ( action ) {
+ return new OO.ui.Process( function () {
+ this.close( { action: action } );
+ }, this );
+ }
+ return DialogWithDropdowns.parent.prototype.getActionProcess.call( this, action );
};
config = [
@@ -451,6 +597,13 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
}
},
{
+ name: 'Process dialog (frameless buttons)',
+ dialogClass: FramelessProcessDialog,
+ config: {
+ size: 'medium'
+ }
+ },
+ {
name: 'Process dialog (full)',
dialogClass: ProcessDialog,
config: {
@@ -500,6 +653,13 @@ OO.ui.Demo.static.pages.dialogs = function ( demo ) {
}
},
{
+ name: 'Dialog with dropdowns ($overlay test)',
+ dialogClass: DialogWithDropdowns,
+ config: {
+ size: 'large'
+ }
+ },
+ {
name: 'Message dialog (generic)',
dialogClass: OO.ui.MessageDialog,
data: {