diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/demos')
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/demo.js | 55 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/index.html | 11 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/infusion.js | 58 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/dialogs.js | 318 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/icons.js | 16 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/toolbars.js | 27 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/widgets.js | 470 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/styles/demo.css | 12 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/widgets.php | 309 |
9 files changed, 999 insertions, 277 deletions
diff --git a/vendor/oojs/oojs-ui/demos/demo.js b/vendor/oojs/oojs-ui/demos/demo.js index a1d39314..b0ff06d2 100644 --- a/vendor/oojs/oojs-ui/demos/demo.js +++ b/vendor/oojs/oojs-ui/demos/demo.js @@ -6,13 +6,12 @@ */ OO.ui.Demo = function OoUiDemo() { // Parent - OO.ui.Demo.super.call( this ); + OO.ui.Demo.parent.call( this ); // Normalization this.normalizeHash(); // Properties - this.stylesheetLinks = this.getStylesheetLinks(); this.mode = this.getCurrentMode(); this.$menu = $( '<div>' ); this.pageDropdown = new OO.ui.DropdownWidget( { @@ -40,6 +39,16 @@ OO.ui.Demo = function OoUiDemo() { new OO.ui.ButtonOptionWidget( { data: 'ltr', label: 'LTR' } ), new OO.ui.ButtonOptionWidget( { data: 'rtl', label: 'RTL' } ) ] ); + this.jsPhpSelect = new OO.ui.ButtonGroupWidget().addItems( [ + new OO.ui.ButtonWidget( { label: 'JS' } ).setActive( true ), + new OO.ui.ButtonWidget( { + label: 'PHP', + href: 'widgets.php' + + '?theme=' + this.mode.theme + + '&graphic=' + this.mode.graphics + + '&direction=' + this.mode.direction + } ) + ] ); // Events this.pageMenu.on( 'choose', OO.ui.bind( this.onModeChange, this ) ); @@ -58,7 +67,8 @@ OO.ui.Demo = function OoUiDemo() { this.pageDropdown.$element, this.themeSelect.$element, this.graphicsSelect.$element, - this.directionSelect.$element + this.directionSelect.$element, + this.jsPhpSelect.$element ); this.$element .addClass( 'oo-ui-demo' ) @@ -66,7 +76,7 @@ OO.ui.Demo = function OoUiDemo() { $( 'body' ).addClass( 'oo-ui-' + this.mode.direction ); // Correctly apply direction to the <html> tags as well $( 'html' ).attr( 'dir', this.mode.direction ); - $( 'head' ).append( this.stylesheetLinks ); + this.stylesheetLinks = this.addStylesheetLinks( $( 'head' ) ); OO.ui.theme = new ( this.constructor.static.themes[ this.mode.theme ].theme )(); }; @@ -113,6 +123,7 @@ OO.ui.Demo.static.themes = { '-icons-location', '-icons-user', '-icons-layout', + '-icons-accessibility', '-icons-wikimedia' ], theme: OO.ui.MediaWikiTheme @@ -188,7 +199,7 @@ OO.ui.Demo.static.defaultTheme = 'mediawiki'; * @static * @property {string} */ -OO.ui.Demo.static.defaultGraphics = 'vector'; +OO.ui.Demo.static.defaultGraphics = 'mixed'; /** * Default page. @@ -207,8 +218,8 @@ OO.ui.Demo.static.defaultDirection = 'ltr'; */ OO.ui.Demo.prototype.initialize = function () { var demo = this, - promises = $( this.stylesheetLinks ).map( function () { - return $( this ).data( 'load-promise' ); + promises = this.stylesheetLinks.map( function ( el ) { + return $( el ).data( 'load-promise' ); } ); $.when.apply( $, promises ) .done( function () { @@ -309,11 +320,12 @@ OO.ui.Demo.prototype.getCurrentMode = function () { }; /** - * Get link elements for the current mode. + * Get and insert link elements for the current mode. * + * @param {jQuery} $where Node to insert the links into * @return {HTMLElement[]} List of link elements */ -OO.ui.Demo.prototype.getStylesheetLinks = function () { +OO.ui.Demo.prototype.addStylesheetLinks = function ( $where ) { var i, len, links, fragments, factors = this.getFactors(), theme = this.getCurrentFactorValues()[ 1 ], @@ -326,9 +338,9 @@ OO.ui.Demo.prototype.getStylesheetLinks = function () { } ); // Theme styles - urls.push( '../dist/oojs-ui' + fragments.slice( 1 ).join( '' ) + '.css' ); + urls.push( 'dist/oojs-ui' + fragments.slice( 1 ).join( '' ) + '.css' ); for ( i = 0, len = suffixes.length; i < len; i++ ) { - urls.push( '../dist/oojs-ui' + fragments[1] + suffixes[i] + fragments.slice( 2 ).join( '' ) + '.css' ); + urls.push( 'dist/oojs-ui' + fragments[ 1 ] + suffixes[ i ] + fragments.slice( 2 ).join( '' ) + '.css' ); } // Demo styles @@ -345,6 +357,8 @@ OO.ui.Demo.prototype.getStylesheetLinks = function () { load: deferred.resolve, error: deferred.reject } ); + // Insert into DOM before setting 'href' for IE 8 compatibility + $where.append( $link ); link.rel = 'stylesheet'; link.href = url; return link; @@ -383,12 +397,12 @@ OO.ui.Demo.prototype.destroy = function () { /** * Build a console for interacting with an element. * - * @param {OO.ui.Element} item - * @param {string} key Variable name for item - * @param {string} [item.label=""] + * @param {OO.ui.Layout} item + * @param {string} layout Variable name for layout + * @param {string} widget Variable name for layout's field widget * @return {jQuery} Console interface element */ -OO.ui.Demo.prototype.buildConsole = function ( item, key ) { +OO.ui.Demo.prototype.buildConsole = function ( item, layout, widget ) { var $toggle, $log, $label, $input, $submit, $console, $form, console = window.console; @@ -399,8 +413,8 @@ OO.ui.Demo.prototype.buildConsole = function ( item, key ) { str = 'return ' + str; } try { - func = new Function( key, 'item', str ); - ret = { value: func( item, item ) }; + func = new Function( layout, widget, 'item', str ); + ret = { value: func( item, item.fieldWidget, item.fieldWidget ) }; } catch ( error ) { ret = { value: undefined, @@ -460,8 +474,9 @@ OO.ui.Demo.prototype.buildConsole = function ( item, key ) { if ( $input.is( ':visible' ) ) { $input[ 0 ].focus(); if ( console && console.log ) { - window[ key ] = item; - console.log( '[demo]', 'Global ' + key + ' has been set' ); + window[ layout ] = item; + window[ widget ] = item.fieldWidget; + console.log( '[demo]', 'Globals ' + layout + ', ' + widget + ' have been set' ); console.log( '[demo]', item ); } } @@ -475,7 +490,7 @@ OO.ui.Demo.prototype.buildConsole = function ( item, key ) { $input = $( '<input>' ) .addClass( 'oo-ui-demo-console-input' ) - .prop( 'placeholder', '... (predefined: ' + key + ')' ); + .prop( 'placeholder', '... (predefined: ' + layout + ', ' + widget + ')' ); $submit = $( '<div>' ) .addClass( 'oo-ui-demo-console-submit' ) diff --git a/vendor/oojs/oojs-ui/demos/index.html b/vendor/oojs/oojs-ui/demos/index.html index 35ccc69a..13f8d48e 100644 --- a/vendor/oojs/oojs-ui/demos/index.html +++ b/vendor/oojs/oojs-ui/demos/index.html @@ -7,11 +7,12 @@ <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <body> - <script src="../node_modules/jquery/dist/jquery.js"></script> - <script src="../node_modules/oojs/dist/oojs.jquery.js"></script> - <script src="../dist/oojs-ui.js"></script> - <script src="../dist/oojs-ui-apex.js"></script> - <script src="../dist/oojs-ui-mediawiki.js"></script> + <script src="node_modules/jquery/dist/jquery.js"></script> + <script src="node_modules/es5-shim/es5-shim.js"></script> + <script src="node_modules/oojs/dist/oojs.jquery.js"></script> + <script src="dist/oojs-ui.js"></script> + <script src="dist/oojs-ui-apex.js"></script> + <script src="dist/oojs-ui-mediawiki.js"></script> <script src="demo.js"></script> <script src="pages/dialogs.js"></script> <script src="pages/icons.js"></script> diff --git a/vendor/oojs/oojs-ui/demos/infusion.js b/vendor/oojs/oojs-ui/demos/infusion.js index 4fa0f64a..ea927ea5 100644 --- a/vendor/oojs/oojs-ui/demos/infusion.js +++ b/vendor/oojs/oojs-ui/demos/infusion.js @@ -1,19 +1,19 @@ // Demonstrate JavaScript 'infusion' of PHP-generated widgets. // Used by widgets.php. -var $menu, themeButtons, themes; +var infuseButton; // Helper function to get high resolution profiling data, where available. function now() { - /* global performance */ + /*global performance */ return ( typeof performance !== 'undefined' ) ? performance.now() : Date.now ? Date.now() : new Date().getTime(); } // Add a button to infuse everything! -// (You wouldn't typically do this: you'd only infuse those objects which -// you needed to attach client-side behaviors to. But our theme-setting -// code needs a list of all widgets, and it's a good overall test.) +// (You wouldn't typically do this: you'd only infuse those objects which you needed to attach +// client-side behaviors to, or where the JS implementation provides additional features over PHP, +// like DropdownInputWidget. We do it here because it's a good overall test.) function infuseAll() { var start, end, all; start = now(); @@ -22,45 +22,13 @@ function infuseAll() { } ); end = now(); window.console.log( 'Infusion time: ' + ( end - start ) ); - return all; + infuseButton.setDisabled( true ); } -$menu = $( '.oo-ui-demo-menu' ); -$menu.append( - new OO.ui.ButtonGroupWidget().addItems( [ - new OO.ui.ButtonWidget( { label: 'Infuse' } ) - .on( 'click', infuseAll ) - ] ).$element ); -// Hook up the theme switch buttons. -// This is more like a typical use case: we are just infusing specific -// named UI elements. -themeButtons = [ - // If you're lazy, you can just use OO.ui.infuse. But if you name the - // Element type you're expecting, you can get some type checking. - OO.ui.ButtonWidget.static.infuse( 'theme-mediawiki' ), - OO.ui.ButtonWidget.static.infuse( 'theme-apex' ) -]; -themes = { - mediawiki: new OO.ui.MediaWikiTheme(), - apex: new OO.ui.ApexTheme() -}; -function updateTheme( theme ) { - OO.ui.theme = themes[theme]; - $.each( infuseAll(), function ( _, el ) { - // FIXME: this isn't really supported, but it makes a neat demo. - OO.ui.theme.updateElementClasses( el ); - } ); - // A bit of a hack, but it will do for a demo. - $( 'link[rel="stylesheet"][title="theme"]' ).attr( - 'href', - '../dist/oojs-ui-' + theme + '.vector.css' - ); -} -// This is another more typical usage: we take the existing server-side -// buttons and replace the href with a JS click handler. -$.each( themeButtons, function ( _, b ) { - // Get rid of the old server-side click handling. - b.setHref( null ); - // Add new client-side click handling. - b.on( 'click', function () { updateTheme( b.getData() ); } ); -} ); +// More typical usage: we take the existing server-side +// button group and do things to it, here adding a new button. +infuseButton = new OO.ui.ButtonWidget( { label: 'Infuse' } ) + .on( 'click', infuseAll ); + +OO.ui.ButtonGroupWidget.static.infuse( 'oo-ui-demo-menu-infuse' ) + .addItems( [ infuseButton ] ); 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' ) ); } ); } ); diff --git a/vendor/oojs/oojs-ui/demos/styles/demo.css b/vendor/oojs/oojs-ui/demos/styles/demo.css index 1c8d6139..9d6bad42 100644 --- a/vendor/oojs/oojs-ui/demos/styles/demo.css +++ b/vendor/oojs/oojs-ui/demos/styles/demo.css @@ -91,16 +91,8 @@ body { /* Widgets demo */ -.oo-ui-demo-horizontal-alignment > .oo-ui-checkboxInputWidget, -.oo-ui-demo-horizontal-alignment > .oo-ui-radioInputWidget, -.oo-ui-demo-horizontal-alignment > .oo-ui-buttonInputWidget, -.oo-ui-demo-horizontal-alignment > .oo-ui-textInputWidget, -.oo-ui-demo-horizontal-alignment > .oo-ui-dropdownInputWidget { - display: inline-block; -} - -.oo-ui-demo-horizontal-alignment > .oo-ui-textInputWidget, -.oo-ui-demo-horizontal-alignment > .oo-ui-dropdownInputWidget { +.oo-ui-horizontalLayout > .oo-ui-textInputWidget, +.oo-ui-horizontalLayout > .oo-ui-dropdownInputWidget { max-width: 10em; } diff --git a/vendor/oojs/oojs-ui/demos/widgets.php b/vendor/oojs/oojs-ui/demos/widgets.php index 494a7ac1..191e1def 100644 --- a/vendor/oojs/oojs-ui/demos/widgets.php +++ b/vendor/oojs/oojs-ui/demos/widgets.php @@ -1,5 +1,5 @@ <?php - $autoload = '../vendor/autoload.php'; + $autoload = __DIR__ . '/vendor/autoload.php'; if ( !file_exists( $autoload ) ) { echo '<h1>Did you forget to run <code>composer install</code>?</h1>'; exit(); @@ -16,7 +16,7 @@ 'raster' => '.raster', ); $graphic = ( isset( $_GET['graphic'] ) && isset( $graphicSuffixMap[ $_GET['graphic'] ] ) ) - ? $_GET['graphic'] : 'vector'; + ? $_GET['graphic'] : 'mixed'; $graphicSuffix = $graphicSuffixMap[ $graphic ]; $direction = ( isset( $_GET['direction'] ) && $_GET['direction'] === 'rtl' ) ? 'rtl' : 'ltr'; @@ -35,7 +35,7 @@ <head> <meta charset="UTF-8"> <title>OOjs UI Widget Demo</title> - <link rel="stylesheet" href="../dist/<?php echo $styleFileName; ?>" title="theme"> + <link rel="stylesheet" href="dist/<?php echo $styleFileName; ?>"> <link rel="stylesheet" href="styles/demo<?php echo $directionSuffix; ?>.css"> </head> <body class="oo-ui-<?php echo $direction; ?>"> @@ -46,15 +46,11 @@ 'infusable' => true, 'items' => array( new OOUI\ButtonWidget( array( - 'id' => 'theme-mediawiki', 'label' => 'MediaWiki', - 'data' => 'mediawiki', 'href' => '?' . http_build_query( array_merge( $query, array( 'theme' => 'mediawiki' ) ) ), ) ), new OOUI\ButtonWidget( array( - 'id' => 'theme-apex', 'label' => 'Apex', - 'data' => 'apex', 'href' => '?' . http_build_query( array_merge( $query, array( 'theme' => 'apex' ) ) ), ) ), ) @@ -89,6 +85,20 @@ ) ), ) ) ); + echo new OOUI\ButtonGroupWidget( array( + 'infusable' => true, + 'id' => 'oo-ui-demo-menu-infuse', + 'items' => array( + new OOUI\ButtonWidget( array( + 'label' => 'JS', + 'href' => ".#widgets-$theme-$graphic-$direction", + ) ), + new OOUI\ButtonWidget( array( + 'label' => 'PHP', + 'href' => '?' . http_build_query( $query ), + ) ), + ) + ) ); ?> </div> <?php @@ -168,30 +178,6 @@ $buttonStyleShowcaseWidget->appendContent( new OOUI\HtmlSnippet( '<br />' ) ); } - $horizontalAlignmentWidget = new OOUI\Widget( array( - 'classes' => array( 'oo-ui-demo-horizontal-alignment' ) - ) ); - # Adding content after the fact does not play well with - # infusability. We should be using a proper Layout here. - $horizontalAlignmentWidget->appendContent( - new OOUI\ButtonWidget( array( 'label' => 'Button' ) ), - new OOUI\ButtonGroupWidget( array( 'items' => array( - new OOUI\ButtonWidget( array( 'label' => 'A' ) ), - new OOUI\ButtonWidget( array( 'label' => 'B' ) ) - ) ) ), - new OOUI\ButtonInputWidget( array( 'label' => 'ButtonInput' ) ), - new OOUI\TextInputWidget( array( 'value' => 'TextInput' ) ), - new OOUI\DropdownInputWidget( array( 'options' => array( - array( - 'label' => 'DropdownInput', - 'data' => null - ) - ) ) ), - new OOUI\CheckboxInputWidget( array( 'selected' => true ) ), - new OOUI\RadioInputWidget( array( 'selected' => true ) ), - new OOUI\LabelWidget( array( 'label' => 'Label' ) ) - ); - $demoContainer->appendContent( new OOUI\FieldsetLayout( array( 'infusable' => true, 'label' => 'Simple buttons', @@ -420,6 +406,16 @@ 'label' => "ButtonWidget (frameless, constructive, disabled)\xE2\x80\x8E", 'align' => 'top' ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'AccessKeyed', + 'accessKey' => 'k', + ) ), + array( + 'label' => "ButtonWidget (with accesskey k)\xE2\x80\x8E", + 'align' => 'top' + ) ) ) ) ) ); @@ -525,6 +521,29 @@ ) ), new OOUI\FieldLayout( + new OOUI\RadioSelectInputWidget( array( + 'value' => 'dog', + 'options' => array( + array( + 'data' => 'cat', + 'label' => 'Cat' + ), + array( + 'data' => 'dog', + 'label' => 'Dog' + ), + array( + 'data' => 'goldfish', + 'label' => 'Goldfish' + ), + ) + ) ), + array( + 'align' => 'top', + 'label' => 'RadioSelectInputWidget', + ) + ), + new OOUI\FieldLayout( new OOUI\TextInputWidget( array( 'value' => 'Text input' ) ), array( 'label' => "TextInputWidget\xE2\x80\x8E", @@ -540,11 +559,10 @@ ), new OOUI\FieldLayout( new OOUI\TextInputWidget( array( - 'indicator' => 'required', 'required' => true ) ), array( - 'label' => "TextInputWidget (indicator, required)\xE2\x80\x8E", + 'label' => "TextInputWidget (required)\xE2\x80\x8E", 'align' => 'top' ) ), @@ -556,6 +574,13 @@ ) ), new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( 'type' => 'search' ) ), + array( + 'label' => "TextInputWidget (type=search)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( new OOUI\TextInputWidget( array( 'value' => 'Readonly', 'readOnly' => true @@ -577,6 +602,26 @@ ), new OOUI\FieldLayout( new OOUI\TextInputWidget( array( + 'value' => 'Accesskey A', + 'accessKey' => 'a' + ) ), + array( + 'label' => "TextInputWidget (with Accesskey)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'value' => 'Title attribute', + 'title' => 'Title attribute with more information about me.' + ) ), + array( + 'label' => "TextInputWidget (with title)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( 'multiline' => true, 'value' => "Multiline\nMultiline" ) ), @@ -586,6 +631,17 @@ ) ), new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'multiline' => true, + 'rows' => 15, + 'value' => "Multiline\nMultiline" + ) ), + array( + 'label' => "TextInputWidget (multiline, rows=15)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( new OOUI\DropdownInputWidget( array( 'options' => array( array( @@ -601,7 +657,8 @@ 'label' => 'Third' ) ), - 'value' => 'b' + 'value' => 'b', + 'title' => 'Select an item' ) ), array( 'label' => 'DropdownInputWidget', @@ -631,26 +688,44 @@ ) ) ) ) ); - # Again, $horizontalAlignmentWidget is not infusable because - # it manually added content after creation. If we embed it - # in an infusable FieldsetLayout, it will (recursively) be made - # infusable. So protect the widget by wrapping it in a - # <div> Tag. - $wrappedFieldLayout = new OOUI\Tag( 'div' ); - $wrappedFieldLayout->appendContent( - new OOUI\FieldLayout( - $horizontalAlignmentWidget, - array( - 'label' => 'Multiple widgets shown as a single line, ' . - 'as used in compact forms or in parts of a bigger widget.', - 'align' => 'top' - ) - ) - ); + // We can't make the outer FieldsetLayout infusable, because the Widget in its FieldLayout + // is added with 'content', which is not preserved after infusion. But we need the Widget + // to wrap the HorizontalLayout. Need to think about this at some point. $demoContainer->appendContent( new OOUI\FieldsetLayout( array( - 'infusable' => true, - 'label' => 'Horizontal alignment', - 'items' => array( $wrappedFieldLayout ), + 'infusable' => false, + 'label' => 'HorizontalLayout', + 'items' => array( + new OOUI\FieldLayout( + new OOUI\Widget( array( + 'content' => new OOUI\HorizontalLayout( array( + 'infusable' => true, + 'items' => array( + new OOUI\ButtonWidget( array( 'label' => 'Button' ) ), + new OOUI\ButtonGroupWidget( array( 'items' => array( + new OOUI\ButtonWidget( array( 'label' => 'A' ) ), + new OOUI\ButtonWidget( array( 'label' => 'B' ) ) + ) ) ), + new OOUI\ButtonInputWidget( array( 'label' => 'ButtonInput' ) ), + new OOUI\TextInputWidget( array( 'value' => 'TextInput' ) ), + new OOUI\DropdownInputWidget( array( 'options' => array( + array( + 'label' => 'DropdownInput', + 'data' => null + ) + ) ) ), + new OOUI\CheckboxInputWidget( array( 'selected' => true ) ), + new OOUI\RadioInputWidget( array( 'selected' => true ) ), + new OOUI\LabelWidget( array( 'label' => 'Label' ) ) + ), + ) ), + ) ), + array( + 'label' => 'Multiple widgets shown as a single line, ' . + 'as used in compact forms or in parts of a bigger widget.', + 'align' => 'top' + ) + ), + ), ) ) ); $demoContainer->appendContent( new OOUI\FieldsetLayout( array( 'infusable' => true, @@ -755,7 +830,121 @@ "in, duo ex inimicus perpetua complectitur, mel periculis similique at.\xE2\x80\x8E", 'align' => 'top' ) - ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'FieldLayout with HTML help', + 'help' => new OOUI\HtmlSnippet( '<b>Bold text</b> is helpful!' ), + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'FieldLayout with title', + 'title' => 'Field title text', + 'align' => 'top' + ) + ), + new OOUI\ActionFieldLayout( + new OOUI\TextInputWidget(), + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'ActionFieldLayout aligned left', + 'align' => 'left' + ) + ), + new OOUI\ActionFieldLayout( + new OOUI\TextInputWidget(), + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'ActionFieldLayout aligned inline', + 'align' => 'inline' + ) + ), + new OOUI\ActionFieldLayout( + new OOUI\TextInputWidget(), + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'ActionFieldLayout aligned right', + 'align' => 'right' + ) + ), + new OOUI\ActionFieldLayout( + new OOUI\TextInputWidget(), + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'ActionFieldLayout aligned top', + 'align' => 'top' + ) + ), + new OOUI\ActionFieldLayout( + new OOUI\TextInputWidget(), + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'ActionFieldLayout aligned top with help', + 'help' => 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' . + "in, duo ex inimicus perpetua complectitur, mel periculis similique at.\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\ActionFieldLayout( + new OOUI\TextInputWidget(), + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => + new OOUI\HtmlSnippet( '<i>ActionFieldLayout aligned top with rich text label</i>' ), + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'value' => '' + ) ), + array( + 'label' => 'FieldLayout with notice', + 'notices' => array( 'Please input a number.' ), + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'value' => 'Foo' + ) ), + array( + 'label' => 'FieldLayout with error message', + 'errors' => array( 'The value must be a number.' ), + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'value' => 'Foo' + ) ), + array( + 'label' => 'FieldLayout with notice and error message', + 'notices' => array( 'Please input a number.' ), + 'errors' => array( 'The value must be a number.' ), + 'align' => 'top' + ) + ), ) ) ) ); @@ -820,11 +1009,11 @@ </div> <!-- Demonstrate JavaScript "infusion" of PHP widgets --> - <script src="../node_modules/jquery/dist/jquery.js"></script> - <script src="../node_modules/oojs/dist/oojs.jquery.js"></script> - <script src="../dist/oojs-ui.js"></script> - <script src="../dist/oojs-ui-apex.js"></script> - <script src="../dist/oojs-ui-mediawiki.js"></script> - <script src="./infusion.js"></script> + <script src="node_modules/jquery/dist/jquery.js"></script> + <script src="node_modules/es5-shim/es5-shim.js"></script> + <script src="node_modules/oojs/dist/oojs.jquery.js"></script> + <script src="dist/oojs-ui.js"></script> + <script src="dist/oojs-ui-<?php echo $theme; ?>.js"></script> + <script src="infusion.js"></script> </body> </html> |