summaryrefslogtreecommitdiff
path: root/vendor/oojs/oojs-ui/demos/pages
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/oojs/oojs-ui/demos/pages')
-rw-r--r--vendor/oojs/oojs-ui/demos/pages/dialogs.js318
-rw-r--r--vendor/oojs/oojs-ui/demos/pages/icons.js16
-rw-r--r--vendor/oojs/oojs-ui/demos/pages/toolbars.js27
-rw-r--r--vendor/oojs/oojs-ui/demos/pages/widgets.js470
4 files changed, 694 insertions, 137 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: {
diff --git a/vendor/oojs/oojs-ui/demos/pages/icons.js b/vendor/oojs/oojs-ui/demos/pages/icons.js
index aec2204c..ffc5112e 100644
--- a/vendor/oojs/oojs-ui/demos/pages/icons.js
+++ b/vendor/oojs/oojs-ui/demos/pages/icons.js
@@ -19,6 +19,7 @@ OO.ui.Demo.static.pages.icons = function ( demo ) {
'info',
'menu',
'next',
+ 'notice',
'picture',
'previous',
'redo',
@@ -88,6 +89,7 @@ OO.ui.Demo.static.pages.icons = function ( demo ) {
'flag',
'flagUndo',
'lock',
+ 'ongoingConversation',
'star',
'trash',
'trashUndo',
@@ -126,6 +128,7 @@ OO.ui.Demo.static.pages.icons = function ( demo ) {
'alignCentre',
'alignLeft',
'alignRight',
+ 'calendar',
'find',
'insert',
'layout',
@@ -176,7 +179,15 @@ OO.ui.Demo.static.pages.icons = function ( demo ) {
'stripeSummary',
'stripeToC',
'viewCompact',
- 'viewDetails',
+ 'viewDetails'
+ ],
+ accessibility: [
+ 'bright',
+ 'halfBright',
+ 'notBright',
+ 'moon',
+ 'largerText',
+ 'smallerText',
'visionSimulator'
],
wikimedia: [
@@ -187,6 +198,7 @@ OO.ui.Demo.static.pages.icons = function ( demo ) {
},
indicators = [
'alert',
+ 'clear',
'down',
'next',
'previous',
@@ -290,6 +302,6 @@ OO.ui.Demo.static.pages.icons = function ( demo ) {
.append(
selector.$element,
indicatorsFieldset.$element,
- iconsFieldsets.map( function ( item ) { return item.$element[0]; } )
+ iconsFieldsets.map( function ( item ) { return item.$element[ 0 ]; } )
) );
};
diff --git a/vendor/oojs/oojs-ui/demos/pages/toolbars.js b/vendor/oojs/oojs-ui/demos/pages/toolbars.js
index 550d8128..b729e364 100644
--- a/vendor/oojs/oojs-ui/demos/pages/toolbars.js
+++ b/vendor/oojs/oojs-ui/demos/pages/toolbars.js
@@ -1,5 +1,6 @@
OO.ui.Demo.static.pages.toolbars = function ( demo ) {
- var i, toolGroups, saveButton, actionButton, actionButtonDisabled, PopupTool, ToolGroupTool,
+ var i, toolGroups, saveButton, deleteButton, actionButton, actionButtonDisabled, PopupTool, ToolGroupTool,
+ setDisabled = function () { this.setDisabled( true ); },
$demo = demo.$element,
$containers = $(),
toolFactories = [],
@@ -26,7 +27,7 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
function createTool( toolbar, group, name, icon, title, init, onSelect, displayBothIconAndLabel ) {
var Tool = function () {
- Tool.super.apply( this, arguments );
+ Tool.parent.apply( this, arguments );
this.toggled = false;
if ( init ) {
init.call( this );
@@ -64,7 +65,7 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
function createDisabledToolGroup( parent, name ) {
var DisabledToolGroup = function () {
- DisabledToolGroup.super.apply( this, arguments );
+ DisabledToolGroup.parent.apply( this, arguments );
this.setDisabled( true );
};
@@ -210,6 +211,10 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
include: [ { group: 'cite' } ]
},
{
+ type: 'bar',
+ include: [ { group: 'citeDisabled' } ]
+ },
+ {
type: 'list',
indicator: 'down',
label: 'Insert',
@@ -218,13 +223,14 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
] );
saveButton = new OO.ui.ButtonWidget( { label: 'Save', flags: [ 'progressive', 'primary' ] } );
+ deleteButton = new OO.ui.ButtonWidget( { label: 'Delete', flags: [ 'destructive' ] } );
actionButton = new OO.ui.ButtonWidget( { label: 'Action' } );
actionButtonDisabled = new OO.ui.ButtonWidget( { label: 'Disabled', disabled: true } );
toolbars[ 1 ].$actions
.append( actionButton.$element, actionButtonDisabled.$element );
toolbars[ 3 ].$actions
- .append( toolbars[ 2 ].$element, saveButton.$element );
+ .append( toolbars[ 2 ].$element, deleteButton.$element, saveButton.$element );
for ( i = 0; i < toolbars.length; i++ ) {
toolbars[ i ].emit( 'updateState' );
@@ -233,7 +239,7 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
toolGroups = {
barTools: [
[ 'barTool', 'picture', 'Basic tool in bar' ],
- [ 'disabledBarTool', 'picture', 'Basic tool in bar disabled', function () { this.setDisabled( true ); } ]
+ [ 'disabledBarTool', 'picture', 'Basic tool in bar disabled', setDisabled ]
],
disabledBarTools: [
@@ -243,7 +249,7 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
listTools: [
[ 'listTool', 'picture', 'First basic tool in list' ],
[ 'listTool1', 'picture', 'Basic tool in list' ],
- [ 'listTool3', 'picture', 'Basic disabled tool in list', function () { this.setDisabled( true ); } ],
+ [ 'listTool3', 'picture', 'Basic disabled tool in list', setDisabled ],
[ 'listTool6', 'picture', 'A final tool' ]
],
@@ -262,12 +268,12 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
],
autoDisableListTools: [
- [ 'autoDisableListTool', 'picture', 'Click to disable this tool', null, function () { this.setDisabled( true ); } ]
+ [ 'autoDisableListTool', 'picture', 'Click to disable this tool', null, setDisabled ]
],
menuTools: [
[ 'menuTool', 'picture', 'Basic tool' ],
- [ 'disabledMenuTool', 'picture', 'Basic tool disabled', function () { this.setDisabled( true ); } ]
+ [ 'disabledMenuTool', 'picture', 'Basic tool disabled', setDisabled ]
],
disabledMenuTools: [
@@ -290,6 +296,10 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
cite: [
[ 'citeTool', 'citeArticle', 'Cite', null, null, true ]
+ ],
+
+ citeDisabled: [
+ [ 'citeToolDisabled', 'citeArticle', 'Cite', setDisabled, null, true ]
]
};
@@ -306,6 +316,7 @@ OO.ui.Demo.static.pages.toolbars = function ( demo ) {
createToolGroup( 3, 'history' );
createToolGroup( 3, 'link' );
createToolGroup( 3, 'cite' );
+ createToolGroup( 3, 'citeDisabled' );
createToolGroup( 3, 'menuTools' );
createToolGroup( 3, 'listTools' );
createToolGroup( 3, 'moreListTools' );
diff --git a/vendor/oojs/oojs-ui/demos/pages/widgets.js b/vendor/oojs/oojs-ui/demos/pages/widgets.js
index 52c6ee87..dd4be8c4 100644
--- a/vendor/oojs/oojs-ui/demos/pages/widgets.js
+++ b/vendor/oojs/oojs-ui/demos/pages/widgets.js
@@ -1,5 +1,6 @@
OO.ui.Demo.static.pages.widgets = function ( demo ) {
- var styles, states, buttonStyleShowcaseWidget, horizontalAlignmentWidget, fieldsets,
+ var styles, states, buttonStyleShowcaseWidget, fieldsets,
+ capsuleWithPopup, capsulePopupWidget,
$demo = demo.$element;
/**
@@ -11,21 +12,21 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
config = config || {};
// Parent constructor
- DragDropGroupWidget.super.call( this, config );
+ DragDropGroupWidget.parent.call( this, config );
// Mixin constructors
- OO.ui.DraggableGroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) );
+ OO.ui.mixin.DraggableGroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) );
// Respond to reorder event
this.connect( this, { reorder: 'onReorder' } );
}
/* Setup */
OO.inheritClass( DragDropGroupWidget, OO.ui.Widget );
- OO.mixinClass( DragDropGroupWidget, OO.ui.DraggableGroupElement );
+ OO.mixinClass( DragDropGroupWidget, OO.ui.mixin.DraggableGroupElement );
/**
* Respond to order event
- * @param {OO.ui.DraggableElement} item Reordered item
+ * @param {OO.ui.mixin.DraggableElement} item Reordered item
* @param {number} newIndex New index
*/
DragDropGroupWidget.prototype.onReorder = function ( item, newIndex ) {
@@ -41,28 +42,28 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
config = config || {};
// Parent constructor
- DragDropItemWidget.super.call( this, config );
+ DragDropItemWidget.parent.call( this, config );
// Mixin constructors
- OO.ui.DraggableElement.call( this, config );
+ OO.ui.mixin.DraggableElement.call( this, config );
}
/* Setup */
OO.inheritClass( DragDropItemWidget, OO.ui.OptionWidget );
- OO.mixinClass( DragDropItemWidget, OO.ui.DraggableElement );
+ OO.mixinClass( DragDropItemWidget, OO.ui.mixin.DraggableElement );
/**
* Demo for LookupElement.
* @extends OO.ui.TextInputWidget
- * @mixins OO.ui.LookupElement
+ * @mixins OO.ui.mixin.LookupElement
*/
function NumberLookupTextInputWidget() {
// Parent constructor
OO.ui.TextInputWidget.call( this, { validate: 'integer' } );
// Mixin constructors
- OO.ui.LookupElement.call( this );
+ OO.ui.mixin.LookupElement.call( this );
}
OO.inheritClass( NumberLookupTextInputWidget, OO.ui.TextInputWidget );
- OO.mixinClass( NumberLookupTextInputWidget, OO.ui.LookupElement );
+ OO.mixinClass( NumberLookupTextInputWidget, OO.ui.mixin.LookupElement );
/**
* @inheritdoc
@@ -113,6 +114,33 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
return items;
};
+ function UnsupportedSelectFileWidget() {
+ // Parent constructor
+ UnsupportedSelectFileWidget.parent.apply( this, arguments );
+ }
+ OO.inheritClass( UnsupportedSelectFileWidget, OO.ui.SelectFileWidget );
+ UnsupportedSelectFileWidget.static.isSupported = function () {
+ return false;
+ };
+
+ capsulePopupWidget = new OO.ui.NumberInputWidget( {
+ isInteger: true
+ } );
+ capsulePopupWidget.connect( capsulePopupWidget, {
+ enter: function () {
+ if ( !isNaN( this.getNumericValue() ) ) {
+ capsuleWithPopup.addItemsFromData( [ this.getNumericValue() ] );
+ this.setValue( '' );
+ }
+ return false;
+ }
+ } );
+ capsulePopupWidget.$element.css( 'vertical-align', 'middle' );
+ capsuleWithPopup = new OO.ui.CapsuleMultiSelectWidget( {
+ allowArbitrary: true,
+ popup: { $content: capsulePopupWidget.$element }
+ } );
+
styles = [
{},
{
@@ -182,28 +210,6 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
buttonStyleShowcaseWidget.$element.append( $( '<br>' ) );
} );
- horizontalAlignmentWidget = new OO.ui.Widget( {
- classes: [ 'oo-ui-demo-horizontal-alignment' ]
- } );
- horizontalAlignmentWidget.$element.append(
- new OO.ui.ButtonWidget( { label: 'Button' } ).$element,
- new OO.ui.ButtonGroupWidget( { items: [
- new OO.ui.ToggleButtonWidget( { label: 'A' } ),
- new OO.ui.ToggleButtonWidget( { label: 'B' } )
- ] } ).$element,
- new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } ).$element,
- new OO.ui.TextInputWidget( { value: 'TextInput' } ).$element,
- new OO.ui.DropdownInputWidget( { options: [
- {
- label: 'DropdownInput',
- data: null
- }
- ] } ).$element,
- new OO.ui.CheckboxInputWidget( { selected: true } ).$element,
- new OO.ui.RadioInputWidget( { selected: true } ).$element,
- new OO.ui.LabelWidget( { label: 'Label' } ).$element
- );
-
fieldsets = [
new OO.ui.FieldsetLayout( {
label: 'Simple buttons',
@@ -487,6 +493,16 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
label: 'ButtonWidget (frameless, indicator)\u200E',
align: 'top'
}
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'AccessKeyed',
+ accessKey: 'k'
+ } ),
+ {
+ label: 'ButtonWidget (with accesskey k)\u200E',
+ align: 'top'
+ }
)
]
} ),
@@ -656,15 +672,15 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
new OO.ui.RadioSelectWidget( {
items: [
new OO.ui.RadioOptionWidget( {
- data: 'Cat',
+ data: 'cat',
label: 'Cat'
} ),
new OO.ui.RadioOptionWidget( {
- data: 'Dog',
+ data: 'dog',
label: 'Dog'
} ),
new OO.ui.RadioOptionWidget( {
- data: 'Goldfish',
+ data: 'goldfish',
label: 'Goldfish',
disabled: true
} )
@@ -676,6 +692,50 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.FieldLayout(
+ new OO.ui.RadioSelectInputWidget( {
+ value: 'dog',
+ options: [
+ {
+ data: 'cat',
+ label: 'Cat'
+ },
+ {
+ data: 'dog',
+ label: 'Dog'
+ },
+ {
+ data: 'goldfish',
+ label: 'Goldfish'
+ }
+ ]
+ } ),
+ {
+ align: 'top',
+ label: 'RadioSelectInputWidget'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.NumberInputWidget(),
+ {
+ label: 'NumberInputWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.NumberInputWidget( { min: 1, max: 5, isInteger: true } ),
+ {
+ label: 'NumberInputWidget (1–5, ints only)',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.NumberInputWidget( { min: 0, max: 1, step: 0.1, pageStep: 0.25 } ),
+ {
+ label: 'NumberInputWidget (0–1, step by .1, page by .25)',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.ToggleSwitchWidget(),
{
label: 'ToggleSwitchWidget',
@@ -733,12 +793,11 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
),
new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
- indicator: 'required',
required: true,
validate: 'non-empty'
} ),
{
- label: 'TextInputWidget (indicator, required)\u200E',
+ label: 'TextInputWidget (required)\u200E',
align: 'top'
}
),
@@ -761,6 +820,13 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( { type: 'search' } ),
+ {
+ label: 'TextInputWidget (type=search)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
value: 'Readonly',
readOnly: true
@@ -783,6 +849,17 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
multiline: true,
+ rows: 15,
+ value: 'Multiline\nMultiline'
+ } ),
+ {
+ label: 'TextInputWidget (multiline, rows=15)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ multiline: true,
autosize: true,
value: 'Autosize\nAutosize\nAutosize\nAutosize'
} ),
@@ -793,6 +870,18 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
),
new OO.ui.FieldLayout(
new OO.ui.TextInputWidget( {
+ multiline: true,
+ rows: 10,
+ autosize: true,
+ value: 'Autosize\nAutosize\nAutosize\nAutosize'
+ } ),
+ {
+ label: 'TextInputWidget (autosize, rows=10)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
icon: 'tag',
indicator: 'alert',
value: 'Text input with label',
@@ -817,6 +906,94 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Title attribute',
+ title: 'Title attribute with more information about me.'
+ } ),
+ {
+ label: 'TextInputWidget (with title)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Accesskey A',
+ accessKey: 'a'
+ } ),
+ {
+ label: 'TextInputWidget (with Accesskey)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( {} ),
+ {
+ label: 'SelectFileWidget\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( { accept: [ 'image/png', 'image/jpeg' ] } ),
+ {
+ label: 'SelectFileWidget (accept PNG and JPEG)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( {
+ icon: 'tag',
+ indicator: 'required'
+ } ),
+ {
+ label: 'SelectFileWidget (icon, indicator)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( {
+ icon: 'tag',
+ indicator: 'required',
+ disabled: true
+ } ),
+ {
+ label: 'SelectFileWidget (disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new UnsupportedSelectFileWidget(),
+ {
+ label: 'SelectFileWidget (no browser support)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( { showDropTarget: true } ),
+ {
+ label: 'SelectFileWidget (with drop target)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.SelectFileWidget( {
+ showDropTarget: true,
+ disabled: true
+ } ),
+ {
+ label: 'SelectFileWidget (with drop target, disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new UnsupportedSelectFileWidget( {
+ showDropTarget: true
+ } ),
+ {
+ label: 'SelectFileWidget (with drop target, no browser support)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.DropdownWidget( {
label: 'Select one',
menu: {
@@ -933,7 +1110,8 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
label: 'Third'
}
],
- value: 'b'
+ value: 'b',
+ title: 'Select an item'
} ),
{
label: 'DropdownInputWidget',
@@ -983,6 +1161,89 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.FieldLayout(
+ new OO.ui.CapsuleMultiSelectWidget( {
+ menu: {
+ items: [
+ new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ),
+ new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+ ]
+ }
+ } ),
+ {
+ label: 'CapsuleMultiSelectWidget',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.CapsuleMultiSelectWidget( {
+ allowArbitrary: true,
+ icon: 'tag',
+ indicator: 'required',
+ menu: {
+ items: [
+ new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ),
+ new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+ ]
+ }
+ } ),
+ {
+ label: 'CapsuleMultiSelectWidget (icon, indicator, arbitrary values allowed)',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.CapsuleMultiSelectWidget( {
+ disabled: true,
+ icon: 'tag',
+ indicator: 'required',
+ values: [ 'jkl', 'zxc' ],
+ menu: {
+ items: [
+ new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jjj', label: 'Label for jjj' } ),
+ new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } )
+ ]
+ }
+ } ),
+ {
+ label: 'CapsuleMultiSelectWidget (disabled)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.CapsuleMultiSelectWidget( {
+ menu: {
+ items: [
+ new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
+ new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } )
+ ]
+ }
+ } ).addItemsFromData( [ 'abc', 'asd' ] ),
+ {
+ label: 'CapsuleMultiSelectWidget (initially selected)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ capsuleWithPopup,
+ {
+ label: 'CapsuleMultiSelectWidget with NumberInputWidget popup\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
new OO.ui.ButtonInputWidget( {
label: 'Submit the form',
type: 'submit'
@@ -1002,14 +1263,58 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
align: 'top',
label: 'ButtonInputWidget (using <input/>)\u200E'
}
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonInputWidget( {
+ framed: false,
+ label: 'Submit the form',
+ type: 'submit'
+ } ),
+ {
+ align: 'top',
+ label: 'ButtonInputWidget (frameless)\u200E'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonInputWidget( {
+ framed: false,
+ label: 'Submit the form',
+ type: 'submit',
+ useInputTag: true
+ } ),
+ {
+ align: 'top',
+ label: 'ButtonInputWidget (frameless, using <input/>)\u200E'
+ }
)
]
} ),
new OO.ui.FieldsetLayout( {
- label: 'Horizontal alignment',
+ label: 'HorizontalLayout',
items: [
new OO.ui.FieldLayout(
- horizontalAlignmentWidget,
+ new OO.ui.Widget( {
+ content: [ new OO.ui.HorizontalLayout( {
+ items: [
+ new OO.ui.ButtonWidget( { label: 'Button' } ),
+ new OO.ui.ButtonGroupWidget( { items: [
+ new OO.ui.ToggleButtonWidget( { label: 'A' } ),
+ new OO.ui.ToggleButtonWidget( { label: 'B' } )
+ ] } ),
+ new OO.ui.ButtonInputWidget( { label: 'ButtonInput' } ),
+ new OO.ui.TextInputWidget( { value: 'TextInput' } ),
+ new OO.ui.DropdownInputWidget( { options: [
+ {
+ label: 'DropdownInput',
+ data: null
+ }
+ ] } ),
+ new OO.ui.CheckboxInputWidget( { selected: true } ),
+ new OO.ui.RadioInputWidget( { selected: true } ),
+ new OO.ui.LabelWidget( { label: 'Label' } )
+ ]
+ } ) ]
+ } ),
{
label: 'Multiple widgets shown as a single line, ' +
'as used in compact forms or in parts of a bigger widget.',
@@ -1230,6 +1535,24 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
),
new OO.ui.FieldLayout(
new OO.ui.PopupButtonWidget( {
+ icon: 'info',
+ framed: false,
+ popup: {
+ head: true,
+ label: 'More information',
+ $content: $( '<p>Extra information here.</p><ul><li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li></ul><p>Even more information here which might well be clipped off the visible area.</p>' ),
+ $footer: $( '<p>And maybe a footer whilst we\'re at it?</p>' ),
+ padded: true,
+ align: 'forwards'
+ }
+ } ),
+ {
+ label: 'PopupButtonWidget (frameless, with popup head and footer, align: forwards)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.PopupButtonWidget( {
icon: 'menu',
label: 'Options',
popup: {
@@ -1286,8 +1609,28 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
align: 'top'
}
),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'FieldLayout with HTML help',
+ help: new OO.ui.HtmlSnippet( '<b>Bold text</b> is helpful!' ),
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ButtonWidget( {
+ label: 'Button'
+ } ),
+ {
+ label: 'FieldLayout with title',
+ title: 'Field title text',
+ align: 'top'
+ }
+ ),
new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
+ new OO.ui.TextInputWidget(),
new OO.ui.ButtonWidget( {
label: 'Button'
} ),
@@ -1297,7 +1640,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
+ new OO.ui.TextInputWidget(),
new OO.ui.ButtonWidget( {
label: 'Button'
} ),
@@ -1307,7 +1650,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
+ new OO.ui.TextInputWidget(),
new OO.ui.ButtonWidget( {
label: 'Button'
} ),
@@ -1317,7 +1660,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
+ new OO.ui.TextInputWidget(),
new OO.ui.ButtonWidget( {
label: 'Button'
} ),
@@ -1327,7 +1670,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
+ new OO.ui.TextInputWidget(),
new OO.ui.ButtonWidget( {
label: 'Button'
} ),
@@ -1339,7 +1682,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
}
),
new OO.ui.ActionFieldLayout(
- new OO.ui.TextInputWidget( {} ),
+ new OO.ui.TextInputWidget(),
new OO.ui.ButtonWidget( {
label: 'Button'
} ),
@@ -1347,6 +1690,37 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
label: $( '<i>' ).text( 'ActionFieldLayout aligned top with rich text label' ),
align: 'top'
}
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: ''
+ } ),
+ {
+ label: 'FieldLayout with notice',
+ notices: [ 'Please input a number.' ],
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Foo'
+ } ),
+ {
+ label: 'FieldLayout with error message',
+ errors: [ 'The value must be a number.' ],
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.TextInputWidget( {
+ value: 'Foo'
+ } ),
+ {
+ label: 'FieldLayout with notice and error message',
+ notices: [ 'Please input a number.' ],
+ errors: [ 'The value must be a number.' ],
+ align: 'top'
+ }
)
]
} ),
@@ -1408,7 +1782,7 @@ OO.ui.Demo.static.pages.widgets = function ( demo ) {
$.each( fieldsets, function ( i, fieldsetLayout ) {
$.each( fieldsetLayout.getItems(), function ( j, fieldLayout ) {
fieldLayout.$element.append(
- demo.buildConsole( fieldLayout.fieldWidget, 'widget' )
+ demo.buildConsole( fieldLayout, 'layout', 'widget' )
);
} );
} );
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-10-14 13:10:02 +0000