diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/demos')
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/demo.js | 504 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/index.html | 39 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/infusion.js | 66 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/dialogs.js | 602 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/icons.js | 295 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/toolbars.js | 338 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/pages/widgets.js | 1428 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/styles/demo.css | 250 | ||||
| -rw-r--r-- | vendor/oojs/oojs-ui/demos/widgets.php | 830 |
9 files changed, 4352 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/demos/demo.js b/vendor/oojs/oojs-ui/demos/demo.js new file mode 100644 index 00000000..a1d39314 --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/demo.js @@ -0,0 +1,504 @@ +/** + * @class + * @extends {OO.ui.Element} + * + * @constructor + */ +OO.ui.Demo = function OoUiDemo() { + // Parent + OO.ui.Demo.super.call( this ); + + // Normalization + this.normalizeHash(); + + // Properties + this.stylesheetLinks = this.getStylesheetLinks(); + this.mode = this.getCurrentMode(); + this.$menu = $( '<div>' ); + this.pageDropdown = new OO.ui.DropdownWidget( { + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'dialogs', label: 'Dialogs' } ), + new OO.ui.MenuOptionWidget( { data: 'icons', label: 'Icons' } ), + new OO.ui.MenuOptionWidget( { data: 'toolbars', label: 'Toolbars' } ), + new OO.ui.MenuOptionWidget( { data: 'widgets', label: 'Widgets' } ) + ] + }, + classes: [ 'oo-ui-demo-pageDropdown' ] + } ); + this.pageMenu = this.pageDropdown.getMenu(); + this.themeSelect = new OO.ui.ButtonSelectWidget().addItems( [ + new OO.ui.ButtonOptionWidget( { data: 'mediawiki', label: 'MediaWiki' } ), + new OO.ui.ButtonOptionWidget( { data: 'apex', label: 'Apex' } ) + ] ); + this.graphicsSelect = new OO.ui.ButtonSelectWidget().addItems( [ + new OO.ui.ButtonOptionWidget( { data: 'mixed', label: 'Mixed' } ), + new OO.ui.ButtonOptionWidget( { data: 'vector', label: 'Vector' } ), + new OO.ui.ButtonOptionWidget( { data: 'raster', label: 'Raster' } ) + ] ); + this.directionSelect = new OO.ui.ButtonSelectWidget().addItems( [ + new OO.ui.ButtonOptionWidget( { data: 'ltr', label: 'LTR' } ), + new OO.ui.ButtonOptionWidget( { data: 'rtl', label: 'RTL' } ) + ] ); + + // Events + this.pageMenu.on( 'choose', OO.ui.bind( this.onModeChange, this ) ); + this.themeSelect.on( 'choose', OO.ui.bind( this.onModeChange, this ) ); + this.graphicsSelect.on( 'choose', OO.ui.bind( this.onModeChange, this ) ); + this.directionSelect.on( 'choose', OO.ui.bind( this.onModeChange, this ) ); + + // Initialization + this.pageMenu.selectItemByData( this.mode.page ); + this.themeSelect.selectItemByData( this.mode.theme ); + this.graphicsSelect.selectItemByData( this.mode.graphics ); + this.directionSelect.selectItemByData( this.mode.direction ); + this.$menu + .addClass( 'oo-ui-demo-menu' ) + .append( + this.pageDropdown.$element, + this.themeSelect.$element, + this.graphicsSelect.$element, + this.directionSelect.$element + ); + this.$element + .addClass( 'oo-ui-demo' ) + .append( this.$menu ); + $( '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 ); + OO.ui.theme = new ( this.constructor.static.themes[ this.mode.theme ].theme )(); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.Demo, OO.ui.Element ); + +/* Static Properties */ + +/** + * Available pages. + * + * Populated by each of the page scripts in the `pages` directory. + * + * @static + * @property {Object.<string,Function>} pages List of functions that render a page, keyed by + * symbolic page name + */ +OO.ui.Demo.static.pages = {}; + +/** + * Available themes. + * + * List of theme descriptions, each containing a `fileSuffix` property used for linking to the + * correct stylesheet file and a `theme` property containing a theme class + * + * @static + * @property {Object.<string,Object>} + */ +OO.ui.Demo.static.themes = { + mediawiki: { + fileSuffix: '-mediawiki', + additionalSuffixes: [ + '-icons-movement', + '-icons-content', + '-icons-alerts', + '-icons-interactions', + '-icons-moderation', + '-icons-editing-core', + '-icons-editing-styling', + '-icons-editing-list', + '-icons-editing-advanced', + '-icons-media', + '-icons-location', + '-icons-user', + '-icons-layout', + '-icons-wikimedia' + ], + theme: OO.ui.MediaWikiTheme + }, + apex: { + fileSuffix: '-apex', + additionalSuffixes: [ + '-icons-movement', + '-icons-moderation', + '-icons-editing-core', + '-icons-editing-styling', + '-icons-editing-list', + '-icons-editing-advanced' + ], + theme: OO.ui.ApexTheme + } +}; + +/** + * Available graphics formats. + * + * List of graphics format descriptions, each containing a `fileSuffix` property used for linking + * to the correct stylesheet file. + * + * @static + * @property {Object.<string,Object>} + */ +OO.ui.Demo.static.graphics = { + mixed: { fileSuffix: '' }, + vector: { fileSuffix: '.vector' }, + raster: { fileSuffix: '.raster' } +}; + +/** + * Available text directions. + * + * List of text direction descriptions, each containing a `fileSuffix` property used for linking to + * the correct stylesheet file. + * + * @static + * @property {Object.<string,Object>} + */ +OO.ui.Demo.static.directions = { + ltr: { fileSuffix: '' }, + rtl: { fileSuffix: '.rtl' } +}; + +/** + * Default page. + * + * Set by one of the page scripts in the `pages` directory. + * + * @static + * @property {string|null} + */ +OO.ui.Demo.static.defaultPage = null; + +/** + * Default page. + * + * Set by one of the page scripts in the `pages` directory. + * + * @static + * @property {string} + */ +OO.ui.Demo.static.defaultTheme = 'mediawiki'; + +/** + * Default page. + * + * Set by one of the page scripts in the `pages` directory. + * + * @static + * @property {string} + */ +OO.ui.Demo.static.defaultGraphics = 'vector'; + +/** + * Default page. + * + * Set by one of the page scripts in the `pages` directory. + * + * @static + * @property {string} + */ +OO.ui.Demo.static.defaultDirection = 'ltr'; + +/* Methods */ + +/** + * Load the demo page. Must be called after $element is attached. + */ +OO.ui.Demo.prototype.initialize = function () { + var demo = this, + promises = $( this.stylesheetLinks ).map( function () { + return $( this ).data( 'load-promise' ); + } ); + $.when.apply( $, promises ) + .done( function () { + demo.constructor.static.pages[ demo.mode.page ]( demo ); + } ) + .fail( function () { + demo.$element.append( $( '<p>' ).text( 'Demo styles failed to load.' ) ); + } ); +}; + +/** + * Handle mode change events. + * + * Will load a new page. + */ +OO.ui.Demo.prototype.onModeChange = function () { + var page = this.pageMenu.getSelectedItem().getData(), + theme = this.themeSelect.getSelectedItem().getData(), + direction = this.directionSelect.getSelectedItem().getData(), + graphics = this.graphicsSelect.getSelectedItem().getData(); + + location.hash = '#' + [ page, theme, graphics, direction ].join( '-' ); +}; + +/** + * Get a list of mode factors. + * + * Factors are a mapping between symbolic names used in the URL hash and internal information used + * to act on those symbolic names. + * + * Factor lists are in URL order: page, theme, graphics, direction. Page contains the symbolic + * page name, others contain file suffixes. + * + * @return {Object[]} List of mode factors, keyed by symbolic name + */ +OO.ui.Demo.prototype.getFactors = function () { + var key, + factors = [ {}, {}, {}, {} ]; + + for ( key in this.constructor.static.pages ) { + factors[ 0 ][ key ] = key; + } + for ( key in this.constructor.static.themes ) { + factors[ 1 ][ key ] = this.constructor.static.themes[ key ].fileSuffix; + } + for ( key in this.constructor.static.graphics ) { + factors[ 2 ][ key ] = this.constructor.static.graphics[ key ].fileSuffix; + } + for ( key in this.constructor.static.directions ) { + factors[ 3 ][ key ] = this.constructor.static.directions[ key ].fileSuffix; + } + + return factors; +}; + +/** + * Get a list of default factors. + * + * Factor defaults are in URL order: page, theme, graphics, direction. Each contains a symbolic + * factor name which should be used as a fallback when the URL hash is missing or invalid. + * + * @return {Object[]} List of default factors + */ +OO.ui.Demo.prototype.getDefaultFactorValues = function () { + return [ + this.constructor.static.defaultPage, + this.constructor.static.defaultTheme, + this.constructor.static.defaultGraphics, + this.constructor.static.defaultDirection + ]; +}; + +/** + * Parse the current URL hash into factor values. + * + * @return {string[]} Factor values in URL order: page, theme, graphics, direction + */ +OO.ui.Demo.prototype.getCurrentFactorValues = function () { + return location.hash.slice( 1 ).split( '-' ); +}; + +/** + * Get the current mode. + * + * Generated from parsed URL hash values. + * + * @return {Object} List of factor values keyed by factor name + */ +OO.ui.Demo.prototype.getCurrentMode = function () { + var factorValues = this.getCurrentFactorValues(); + + return { + page: factorValues[ 0 ], + theme: factorValues[ 1 ], + graphics: factorValues[ 2 ], + direction: factorValues[ 3 ] + }; +}; + +/** + * Get link elements for the current mode. + * + * @return {HTMLElement[]} List of link elements + */ +OO.ui.Demo.prototype.getStylesheetLinks = function () { + var i, len, links, fragments, + factors = this.getFactors(), + theme = this.getCurrentFactorValues()[ 1 ], + suffixes = this.constructor.static.themes[ theme ].additionalSuffixes || [], + urls = []; + + // Translate modes to filename fragments + fragments = this.getCurrentFactorValues().map( function ( val, index ) { + return factors[ index ][ val ]; + } ); + + // Theme styles + 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' ); + } + + // Demo styles + urls.push( 'styles/demo' + fragments[ 3 ] + '.css' ); + + // Add link tags + links = urls.map( function ( url ) { + var + link = document.createElement( 'link' ), + $link = $( link ), + deferred = $.Deferred(); + $link.data( 'load-promise', deferred.promise() ); + $link.on( { + load: deferred.resolve, + error: deferred.reject + } ); + link.rel = 'stylesheet'; + link.href = url; + return link; + } ); + + return links; +}; + +/** + * Normalize the URL hash. + */ +OO.ui.Demo.prototype.normalizeHash = function () { + var i, len, factorValues, + modes = [], + factors = this.getFactors(), + defaults = this.getDefaultFactorValues(); + + factorValues = this.getCurrentFactorValues(); + for ( i = 0, len = factors.length; i < len; i++ ) { + modes[ i ] = factors[ i ][ factorValues[ i ] ] !== undefined ? factorValues[ i ] : defaults[ i ]; + } + + // Update hash + location.hash = modes.join( '-' ); +}; + +/** + * Destroy demo. + */ +OO.ui.Demo.prototype.destroy = function () { + $( 'body' ).removeClass( 'oo-ui-ltr oo-ui-rtl' ); + $( this.stylesheetLinks ).remove(); + this.$element.remove(); +}; + +/** + * Build a console for interacting with an element. + * + * @param {OO.ui.Element} item + * @param {string} key Variable name for item + * @param {string} [item.label=""] + * @return {jQuery} Console interface element + */ +OO.ui.Demo.prototype.buildConsole = function ( item, key ) { + var $toggle, $log, $label, $input, $submit, $console, $form, + console = window.console; + + function exec( str ) { + var func, ret; + /*jshint evil:true */ + if ( str.indexOf( 'return' ) !== 0 ) { + str = 'return ' + str; + } + try { + func = new Function( key, 'item', str ); + ret = { value: func( item, item ) }; + } catch ( error ) { + ret = { + value: undefined, + error: error + }; + } + return ret; + } + + function submit() { + var val, result, logval; + + val = $input.val(); + $input.val( '' ); + $input[ 0 ].focus(); + result = exec( val ); + + logval = String( result.value ); + if ( logval === '' ) { + logval = '""'; + } + + $log.append( + $( '<div>' ) + .addClass( 'oo-ui-demo-console-log-line oo-ui-demo-console-log-line-input' ) + .text( val ), + $( '<div>' ) + .addClass( 'oo-ui-demo-console-log-line oo-ui-demo-console-log-line-return' ) + .text( logval || result.value ) + ); + + if ( result.error ) { + $log.append( $( '<div>' ).addClass( 'oo-ui-demo-console-log-line oo-ui-demo-console-log-line-error' ).text( result.error ) ); + } + + if ( console && console.log ) { + console.log( '[demo]', result.value ); + if ( result.error ) { + if ( console.error ) { + console.error( '[demo]', String( result.error ), result.error ); + } else { + console.log( '[demo] Error: ', result.error ); + } + } + } + + // Scrol to end + $log.prop( 'scrollTop', $log.prop( 'scrollHeight' ) ); + } + + $toggle = $( '<span>' ) + .addClass( 'oo-ui-demo-console-toggle' ) + .attr( 'title', 'Toggle console' ) + .on( 'click', function ( e ) { + e.preventDefault(); + $console.toggleClass( 'oo-ui-demo-console-collapsed oo-ui-demo-console-expanded' ); + if ( $input.is( ':visible' ) ) { + $input[ 0 ].focus(); + if ( console && console.log ) { + window[ key ] = item; + console.log( '[demo]', 'Global ' + key + ' has been set' ); + console.log( '[demo]', item ); + } + } + } ); + + $log = $( '<div>' ) + .addClass( 'oo-ui-demo-console-log' ); + + $label = $( '<label>' ) + .addClass( 'oo-ui-demo-console-label' ); + + $input = $( '<input>' ) + .addClass( 'oo-ui-demo-console-input' ) + .prop( 'placeholder', '... (predefined: ' + key + ')' ); + + $submit = $( '<div>' ) + .addClass( 'oo-ui-demo-console-submit' ) + .text( '↵' ) + .on( 'click', submit ); + + $form = $( '<form>' ).on( 'submit', function ( e ) { + e.preventDefault(); + submit(); + } ); + + $console = $( '<div>' ) + .addClass( 'oo-ui-demo-console oo-ui-demo-console-collapsed' ) + .append( + $toggle, + $log, + $form.append( + $label.append( + $input + ), + $submit + ) + ); + + return $console; +}; diff --git a/vendor/oojs/oojs-ui/demos/index.html b/vendor/oojs/oojs-ui/demos/index.html new file mode 100644 index 00000000..35ccc69a --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/index.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <meta charset="UTF-8"> + <title>OOjs UI Demos</title> + <!-- Prevent scaling on mobile devices which cause problems with dialog sizing --> + <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="demo.js"></script> + <script src="pages/dialogs.js"></script> + <script src="pages/icons.js"></script> + <script src="pages/widgets.js"></script> + <script src="pages/toolbars.js"></script> + <script> + $( function () { + var demo; + + function setup() { + if ( demo ) { + demo.destroy(); + } + demo = new OO.ui.Demo(); + $( 'body' ).append( demo.$element ); + demo.initialize(); + } + + setup(); + + $( window ).on( 'hashchange', setup ); + } ) + </script> +</body> +</html> diff --git a/vendor/oojs/oojs-ui/demos/infusion.js b/vendor/oojs/oojs-ui/demos/infusion.js new file mode 100644 index 00000000..4fa0f64a --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/infusion.js @@ -0,0 +1,66 @@ +// Demonstrate JavaScript 'infusion' of PHP-generated widgets. +// Used by widgets.php. + +var $menu, themeButtons, themes; + +// Helper function to get high resolution profiling data, where available. +function now() { + /* 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.) +function infuseAll() { + var start, end, all; + start = now(); + all = $( '*[data-ooui]' ).map( function ( _, e ) { + return OO.ui.infuse( e.id ); + } ); + end = now(); + window.console.log( 'Infusion time: ' + ( end - start ) ); + return all; +} +$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() ); } ); +} ); diff --git a/vendor/oojs/oojs-ui/demos/pages/dialogs.js b/vendor/oojs/oojs-ui/demos/pages/dialogs.js new file mode 100644 index 00000000..6e9da3f8 --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/pages/dialogs.js @@ -0,0 +1,602 @@ +OO.ui.Demo.static.pages.dialogs = function ( demo ) { + var i, l, name, openButton, DialogClass, config, + $demo = demo.$element, + fieldset = new OO.ui.FieldsetLayout( { label: 'Dialogs' } ), + windows = {}, + windowManager = new OO.ui.WindowManager(); + + function SimpleDialog( config ) { + SimpleDialog.super.call( this, config ); + } + OO.inheritClass( SimpleDialog, OO.ui.Dialog ); + SimpleDialog.static.title = 'Simple dialog'; + SimpleDialog.prototype.initialize = function () { + var closeButton, + dialog = this; + + SimpleDialog.super.prototype.initialize.apply( this, arguments ); + this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); + this.content.$element.append( '<p>Dialog content</p>' ); + + closeButton = new OO.ui.ButtonWidget( { + label: OO.ui.msg( 'ooui-dialog-process-dismiss' ) + } ); + closeButton.on( 'click', function () { + dialog.close(); + } ); + + this.content.$element.append( closeButton.$element ); + this.$body.append( this.content.$element ); + }; + SimpleDialog.prototype.getBodyHeight = function () { + return this.content.$element.outerHeight( true ); + }; + + function ProcessDialog( config ) { + ProcessDialog.super.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' } + ]; + ProcessDialog.prototype.initialize = function () { + ProcessDialog.super.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 ); + }; + ProcessDialog.prototype.getActionProcess = function ( action ) { + var dialog = this; + if ( action ) { + return new OO.ui.Process( function () { + dialog.close( { action: action } ); + } ); + } + return ProcessDialog.super.prototype.getActionProcess.call( this, action ); + }; + ProcessDialog.prototype.getBodyHeight = function () { + return this.content.$element.outerHeight( true ); + }; + + function SearchWidgetDialog( config ) { + SearchWidgetDialog.super.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(); + for ( i = 1; i <= 20; i++ ) { + items.push( new OO.ui.OptionWidget( { data: i, label: 'Item ' + i } ) ); + } + searchWidget.results.addItems( items ); + searchWidget.onQueryChange = function () {}; + this.$body.append( searchWidget.$element ); + }; + SearchWidgetDialog.prototype.getBodyHeight = function () { + return 300; + }; + SearchWidgetDialog.static.actions = [ + { action: 'cancel', label: 'Cancel', flags: 'safe' } + ]; + SearchWidgetDialog.prototype.getActionProcess = function ( action ) { + var dialog = this; + return new OO.ui.Process( function () { + dialog.close( { action: action } ); + } ); + }; + + function BrokenDialog( config ) { + BrokenDialog.super.call( this, config ); + this.broken = false; + } + OO.inheritClass( BrokenDialog, OO.ui.ProcessDialog ); + BrokenDialog.static.title = 'Broken dialog'; + BrokenDialog.static.actions = [ + { action: 'save', label: 'Save', flags: [ 'primary', 'constructive' ] }, + { action: 'delete', label: 'Delete', flags: 'destructive' }, + { action: 'cancel', label: 'Cancel', flags: 'safe' } + ]; + BrokenDialog.prototype.getBodyHeight = function () { + return 250; + }; + BrokenDialog.prototype.initialize = function () { + BrokenDialog.super.prototype.initialize.apply( this, arguments ); + this.content = new OO.ui.PanelLayout( { padded: true } ); + this.fieldset = new OO.ui.FieldsetLayout( { + label: 'Dialog with error handling', icon: 'alert' + } ); + this.description = new OO.ui.LabelWidget( { + label: 'Deleting will fail and will not be recoverable. ' + + 'Saving will fail the first time, but succeed the second time.' + } ); + this.fieldset.addItems( [ this.description ] ); + this.content.$element.append( this.fieldset.$element ); + this.$body.append( this.content.$element ); + }; + BrokenDialog.prototype.getSetupProcess = function ( data ) { + return BrokenDialog.super.prototype.getSetupProcess.call( this, data ) + .next( function () { + this.broken = true; + }, this ); + }; + BrokenDialog.prototype.getActionProcess = function ( action ) { + return BrokenDialog.super.prototype.getActionProcess.call( this, action ) + .next( function () { + return 1000; + }, this ) + .next( function () { + var closing; + + if ( action === 'save' ) { + if ( this.broken ) { + this.broken = false; + return new OO.ui.Error( 'Server did not respond' ); + } + } else if ( action === 'delete' ) { + return new OO.ui.Error( 'Permission denied', { recoverable: false } ); + } + + closing = this.close( { action: action } ); + if ( action === 'save' ) { + // Return a promise to remaing pending while closing + return closing; + } + return BrokenDialog.super.prototype.getActionProcess.call( this, action ); + }, this ); + }; + + function SamplePage( name, config ) { + config = $.extend( { label: 'Sample page', icon: 'Sample icon' }, config ); + OO.ui.PageLayout.call( this, name, config ); + this.label = config.label; + this.icon = config.icon; + this.$element.text( this.label ); + } + OO.inheritClass( SamplePage, OO.ui.PageLayout ); + SamplePage.prototype.setupOutlineItem = function ( outlineItem ) { + SamplePage.super.prototype.setupOutlineItem.call( this, outlineItem ); + this.outlineItem + .setMovable( true ) + .setRemovable( true ) + .setIcon( this.icon ) + .setLabel( this.label ); + }; + + function BookletDialog( config ) { + BookletDialog.super.call( this, config ); + } + OO.inheritClass( BookletDialog, OO.ui.ProcessDialog ); + BookletDialog.static.title = 'Booklet dialog'; + BookletDialog.static.actions = [ + { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, + { action: 'cancel', label: 'Cancel', flags: 'safe' } + ]; + BookletDialog.prototype.getBodyHeight = function () { + return 250; + }; + BookletDialog.prototype.initialize = function () { + BookletDialog.super.prototype.initialize.apply( this, arguments ); + + var dialog = this; + + function changePage( direction ) { + var pageIndex = dialog.pages.indexOf( dialog.bookletLayout.getCurrentPage() ); + pageIndex = ( dialog.pages.length + pageIndex + direction ) % dialog.pages.length; + dialog.bookletLayout.setPage( dialog.pages[ pageIndex ].getName() ); + } + + this.navigationField = new OO.ui.FieldLayout( + new OO.ui.ButtonGroupWidget( { + items: [ + new OO.ui.ButtonWidget( { + data: 'previous', + icon: 'previous' + } ).on( 'click', function () { + changePage( -1 ); + } ), + new OO.ui.ButtonWidget( { + data: 'next', + icon: 'next' + } ).on( 'click', function () { + changePage( 1 ); + } ) + ] + } ), + { + label: 'Change page', + align: 'top' + } + ); + + this.bookletLayout = new OO.ui.BookletLayout(); + this.pages = [ + new SamplePage( 'page-1', { label: 'Page 1', icon: 'window' } ), + new SamplePage( 'page-2', { label: 'Page 2', icon: 'window' } ), + new SamplePage( 'page-3', { label: 'Page 3', icon: 'window' } ) + ]; + this.bookletLayout.addPages( this.pages ); + this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } ); + this.bookletLayout.setPage( 'page-1' ); + + this.$body.append( this.bookletLayout.$element ); + }; + BookletDialog.prototype.getActionProcess = function ( action ) { + if ( action ) { + return new OO.ui.Process( function () { + this.close( { action: action } ); + }, this ); + } + return BookletDialog.super.prototype.getActionProcess.call( this, action ); + }; + BookletDialog.prototype.onBookletLayoutSet = function ( page ) { + page.$element.append( this.navigationField.$element ); + }; + + function OutlinedBookletDialog( config ) { + OutlinedBookletDialog.super.call( this, config ); + } + OO.inheritClass( OutlinedBookletDialog, OO.ui.ProcessDialog ); + OutlinedBookletDialog.static.title = 'Booklet dialog'; + OutlinedBookletDialog.static.actions = [ + { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, + { action: 'cancel', label: 'Cancel', flags: 'safe' } + ]; + OutlinedBookletDialog.prototype.getBodyHeight = function () { + return 250; + }; + OutlinedBookletDialog.prototype.initialize = function () { + OutlinedBookletDialog.super.prototype.initialize.apply( this, arguments ); + this.bookletLayout = new OO.ui.BookletLayout( { + outlined: true + } ); + this.pages = [ + new SamplePage( 'small', { label: 'Small', icon: 'window' } ), + new SamplePage( 'medium', { label: 'Medium', icon: 'window' } ), + new SamplePage( 'large', { label: 'Large', icon: 'window' } ), + new SamplePage( 'larger', { label: 'Larger', icon: 'window' } ), + new SamplePage( 'full', { label: 'Full', icon: 'window' } ) + ]; + + this.bookletLayout.addPages( this.pages ); + this.bookletLayout.connect( this, { set: 'onBookletLayoutSet' } ); + this.$body.append( this.bookletLayout.$element ); + }; + OutlinedBookletDialog.prototype.getActionProcess = function ( action ) { + if ( action ) { + return new OO.ui.Process( function () { + this.close( { action: action } ); + }, this ); + } + return OutlinedBookletDialog.super.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 ) + .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 ); + } + OO.inheritClass( IndexedDialog, OO.ui.ProcessDialog ); + IndexedDialog.static.title = 'Index dialog'; + IndexedDialog.static.actions = [ + { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, + { action: 'cancel', label: 'Cancel', flags: 'safe' } + ]; + IndexedDialog.prototype.getBodyHeight = function () { + return 250; + }; + IndexedDialog.prototype.initialize = function () { + IndexedDialog.super.prototype.initialize.apply( this, arguments ); + this.indexLayout = new OO.ui.IndexLayout(); + this.cards = [ + new SampleCard( 'first', { label: 'One' } ), + new SampleCard( 'second', { label: 'Two' } ), + new SampleCard( 'third', { label: 'Three' } ), + new SampleCard( 'fourth', { label: 'Four' } ) + ]; + + this.indexLayout.addCards( this.cards ); + this.$body.append( this.indexLayout.$element ); + + this.indexLayout.getTabs().getItemFromData( 'fourth' ).setDisabled( true ); + }; + IndexedDialog.prototype.getActionProcess = function ( action ) { + if ( action ) { + return new OO.ui.Process( function () { + this.close( { action: action } ); + }, this ); + } + return IndexedDialog.super.prototype.getActionProcess.call( this, action ); + }; + + function MenuDialog( config ) { + MenuDialog.super.call( this, config ); + } + OO.inheritClass( MenuDialog, OO.ui.ProcessDialog ); + MenuDialog.static.title = 'Menu dialog'; + MenuDialog.static.actions = [ + { action: 'save', label: 'Done', flags: [ 'primary', 'progressive' ] }, + { action: 'cancel', label: 'Cancel', flags: 'safe' } + ]; + MenuDialog.prototype.getBodyHeight = function () { + return 350; + }; + MenuDialog.prototype.initialize = function () { + 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 } ); + + menuLayout.$menu.append( + menuPanel.$element.append( 'Menu panel' ) + ); + menuLayout.$content.append( + contentPanel.$element.append( + positionField.$element, + showField.$element + ) + ); + + this.$body.append( menuLayout.$element ); + }; + MenuDialog.prototype.getActionProcess = function ( action ) { + if ( action ) { + return new OO.ui.Process( function () { + this.close( { action: action } ); + }, this ); + } + return MenuDialog.super.prototype.getActionProcess.call( this, action ); + }; + + config = [ + { + name: 'Simple dialog (small)', + config: { + size: 'small' + }, + data: { + title: 'Sample dialog with very long title that does not fit' + } + }, + { + name: 'Simple dialog (medium)', + config: { + size: 'medium' + } + }, + { + name: 'Simple dialog (large)', + config: { + size: 'large' + } + }, + { + name: 'Simple dialog (larger)', + config: { + size: 'larger' + } + }, + { + name: 'Simple dialog (full)', + config: { + size: 'full' + } + }, + { + name: 'Process dialog (medium)', + dialogClass: ProcessDialog, + config: { + size: 'medium' + } + }, + { + name: 'Process dialog (full)', + dialogClass: ProcessDialog, + config: { + size: 'full' + } + }, + { + name: 'Search widget dialog (medium)', + dialogClass: SearchWidgetDialog, + config: { + size: 'medium' + } + }, + { + name: 'Broken dialog (error handling)', + dialogClass: BrokenDialog, + config: { + size: 'medium' + } + }, + { + name: 'Booklet dialog', + dialogClass: BookletDialog, + config: { + size: 'medium' + } + }, + { + name: 'Outlined booklet dialog', + dialogClass: OutlinedBookletDialog, + config: { + size: 'medium' + } + }, + { + name: 'Indexed dialog', + dialogClass: IndexedDialog, + config: { + size: 'medium' + } + }, + { + name: 'Menu dialog', + dialogClass: MenuDialog, + config: { + size: 'medium' + } + }, + { + name: 'Message dialog (generic)', + dialogClass: OO.ui.MessageDialog, + data: { + title: 'Continue?', + message: 'It may be risky' + } + }, + { + name: 'Message dialog (verbose)', + dialogClass: OO.ui.MessageDialog, + data: { + title: 'Continue?', + message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis laoreet elit. Nam eu velit ullamcorper, volutpat elit sed, viverra massa. Aenean congue aliquam lorem, et laoreet risus condimentum vel. Praesent nec imperdiet mauris. Nunc eros magna, iaculis sit amet ante id, dapibus tristique lorem. Praesent in feugiat lorem, sit amet porttitor eros. Donec sapien turpis, pretium eget ligula id, scelerisque tincidunt diam. Pellentesque a venenatis tortor, at luctus nisl. Quisque vel urna a enim mattis rutrum. Morbi eget consequat nisl. Nam tristique molestie diam ac consequat. Nam varius adipiscing mattis. Praesent sodales volutpat nulla lobortis iaculis. Quisque vel odio eget diam posuere imperdiet. Fusce et iaculis odio. Donec in nibh ut dui accumsan vehicula quis et massa.', + verbose: true + } + }, + { + name: 'Message dialog (1 action)', + dialogClass: OO.ui.MessageDialog, + data: { + title: 'Storage limit reached', + message: 'You are out of disk space', + actions: [ + { + action: 'accept', + label: 'Dismiss', + flags: 'primary' + } + ] + } + }, + { + name: 'Message dialog (2 actions)', + dialogClass: OO.ui.MessageDialog, + data: { + title: 'Cannot save data', + message: 'The server is not responding', + actions: [ + { + action: 'reject', + label: 'Cancel', + flags: 'safe' + }, + { + action: 'repeat', + label: 'Try again', + flags: [ 'primary', 'constructive' ] + } + ] + } + }, + { + name: 'Message dialog (3 actions)', + dialogClass: OO.ui.MessageDialog, + data: { + title: 'Delete file?', + message: 'The file will be irreversably obliterated. Proceed with caution.', + actions: [ + { action: 'reject', label: 'Cancel', flags: 'safe' }, + { action: 'reject', label: 'Move file to trash' }, + { + action: 'accept', + label: 'Obliterate', + flags: [ 'primary', 'destructive' ] + } + ] + } + } + ]; + + function openDialog( name, data ) { + windowManager.openWindow( name, data ); + } + + for ( i = 0, l = config.length; i < l; i++ ) { + name = 'window_' + i; + DialogClass = config[ i ].dialogClass || SimpleDialog; + windows[ name ] = new DialogClass( config[ i ].config ); + openButton = new OO.ui.ButtonWidget( { + framed: false, + icon: 'window', + label: $( '<span dir="ltr"></span>' ).text( config[ i ].name ) + } ); + openButton.on( + 'click', OO.ui.bind( openDialog, this, name, config[ i ].data ) + ); + fieldset.addItems( [ new OO.ui.FieldLayout( openButton, { align: 'inline' } ) ] ); + } + windowManager.addWindows( windows ); + + $demo.append( + new OO.ui.PanelLayout( { + expanded: false, + framed: true + } ).$element + .addClass( 'oo-ui-demo-container' ) + .append( fieldset.$element ), + windowManager.$element + ); +}; diff --git a/vendor/oojs/oojs-ui/demos/pages/icons.js b/vendor/oojs/oojs-ui/demos/pages/icons.js new file mode 100644 index 00000000..aec2204c --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/pages/icons.js @@ -0,0 +1,295 @@ +OO.ui.Demo.static.pages.icons = function ( demo ) { + var i, len, iconSet, iconsFieldset, iconButton, selector, + icons = { + core: [ + 'add', + 'advanced', + 'alert', + 'cancel', + 'check', + 'circle', + 'close', + 'code', + 'collapse', + 'comment', + 'ellipsis', + 'expand', + 'help', + 'history', + 'info', + 'menu', + 'next', + 'picture', + 'previous', + 'redo', + 'remove', + 'search', + 'settings', + 'tag', + 'undo', + 'window' + ], + movement: [ + 'arrowLast', + 'arrowNext', + 'downTriangle', + 'upTriangle', + 'caretLast', + 'caretNext', + 'caretDown', + 'caretUp', + 'move' + ], + content: [ + 'article', + 'articleCheck', + 'articleSearch', + 'citeArticle', + 'book', + 'journal', + 'newspaper', + 'folderPlaceholder', + 'die', + 'download', + 'upload' + ], + alerts: [ + 'bell', + 'bellOn', + 'eye', + 'eyeClosed', + 'message', + 'signature', + 'speechBubble', + 'speechBubbleAdd', + 'speechBubbles' + ], + interactions: [ + 'beta', + 'betaLaunch', + 'bookmark', + 'browser', + 'clear', + 'clock', + 'funnel', + 'heart', + 'key', + 'keyboard', + 'logOut', + 'newWindow', + 'printer', + 'ribbonPrize', + 'sun', + 'watchlist' + ], + moderation: [ + 'block', + 'blockUndo', + 'flag', + 'flagUndo', + 'lock', + 'star', + 'trash', + 'trashUndo', + 'unStar', + 'unLock' + ], + 'editing-core': [ + 'edit', + 'editLock', + 'editUndo', + 'link', + 'linkExternal', + 'linkSecure' + ], + 'editing-styling': [ + 'bigger', + 'smaller', + 'subscript', + 'superscript', + 'bold', + 'italic', + 'strikethrough', + 'underline', + 'textLanguage', + 'textDirLTR', + 'textDirRTL', + 'textStyle' + ], + 'editing-list': [ + 'indent', + 'listBullet', + 'listNumbered', + 'outdent' + ], + 'editing-advanced': [ + 'alignCentre', + 'alignLeft', + 'alignRight', + 'find', + 'insert', + 'layout', + 'newline', + 'noWikiText', + 'outline', + 'puzzle', + 'quotes', + 'quotesAdd', + 'redirect', + 'searchCaseSensitive', + 'searchRegularExpression', + 'specialCharacter', + 'table', + 'tableAddColumnAfter', + 'tableAddColumnBefore', + 'tableAddRowAfter', + 'tableAddRowBefore', + 'tableCaption', + 'tableMergeCells', + 'templateAdd', + 'translation', + 'wikiText' + ], + media: [ + 'image', + 'imageAdd', + 'imageLock', + 'photoGallery', + 'play', + 'stop' + ], + location: [ + 'map', + 'mapPin', + 'mapPinAdd', + 'wikitrail' + ], + user: [ + 'userActive', + 'userAvatar', + 'userInactive', + 'userTalk' + ], + layout: [ + 'stripeFlow', + 'stripeSideMenu', + 'stripeSummary', + 'stripeToC', + 'viewCompact', + 'viewDetails', + 'visionSimulator' + ], + wikimedia: [ + 'logoCC', + 'logoWikimediaCommons', + 'logoWikipedia' + ] + }, + indicators = [ + 'alert', + 'down', + 'next', + 'previous', + 'required', + 'search', + 'up' + ], + iconsFieldsets = [], + iconsButtons = [], + indicatorsFieldset = new OO.ui.FieldsetLayout( { label: 'Indicators' } ); + + for ( i = 0, len = indicators.length; i < len; i++ ) { + indicatorsFieldset.addItems( [ + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + indicator: indicators[ i ], + framed: false, + label: indicators[ i ] + } ), + { align: 'top' } + ) + ] ); + } + for ( iconSet in icons ) { + iconsFieldset = new OO.ui.FieldsetLayout( { label: 'Icons – ' + iconSet } ); + iconsFieldsets.push( iconsFieldset ); + + for ( i = 0, len = icons[ iconSet ].length; i < len; i++ ) { + iconButton = new OO.ui.ButtonWidget( { + icon: icons[ iconSet ][ i ], + framed: false, + label: icons[ iconSet ][ i ] + } ); + iconsButtons.push( iconButton ); + iconsFieldset.addItems( [ + new OO.ui.FieldLayout( + iconButton, + { align: 'top' } + ) + ] ); + } + } + + selector = new OO.ui.ButtonSelectWidget( { + items: [ + new OO.ui.ButtonOptionWidget( { + label: 'None', + flags: [], + data: { + progressive: false, + constructive: false, + destructive: false + } + } ), + new OO.ui.ButtonOptionWidget( { + label: 'Progressive', + flags: [ 'progressive' ], + data: { + progressive: true, + constructive: false, + destructive: false + } + } ), + new OO.ui.ButtonOptionWidget( { + label: 'Constructive', + flags: [ 'constructive' ], + data: { + progressive: false, + constructive: true, + destructive: false + } + } ), + new OO.ui.ButtonOptionWidget( { + label: 'Destructive', + flags: [ 'destructive' ], + data: { + progressive: false, + constructive: false, + destructive: true + } + } ) + ] + } ) + .on( 'select', function ( selected ) { + iconsButtons.forEach( function ( iconButton ) { + iconButton.setFlags( selected.getData() ); + } ); + } ) + .selectItemByData( { + progressive: false, + constructive: false, + destructive: false + } ); + + demo.$element.append( + new OO.ui.PanelLayout( { + expanded: false, + framed: true + } ).$element + .addClass( 'oo-ui-demo-container oo-ui-demo-icons' ) + .append( + selector.$element, + indicatorsFieldset.$element, + 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 new file mode 100644 index 00000000..550d8128 --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/pages/toolbars.js @@ -0,0 +1,338 @@ +OO.ui.Demo.static.pages.toolbars = function ( demo ) { + var i, toolGroups, saveButton, actionButton, actionButtonDisabled, PopupTool, ToolGroupTool, + $demo = demo.$element, + $containers = $(), + toolFactories = [], + toolGroupFactories = [], + toolbars = []; + + // Show some random accelerator keys that don't actually work + function getToolAccelerator( name ) { + return { + listTool1: 'Ctrl+Shift+1', + listTool2: 'Ctrl+Alt+2', + listTool3: 'Cmd+Enter', + listTool5: 'Shift+Down', + menuTool: 'Ctrl+M' + }[ name ]; + } + + for ( i = 0; i < 4; i++ ) { + toolFactories.push( new OO.ui.ToolFactory() ); + toolGroupFactories.push( new OO.ui.ToolGroupFactory() ); + toolbars.push( new OO.ui.Toolbar( toolFactories[ i ], toolGroupFactories[ i ], { actions: true } ) ); + toolbars[ i ].getToolAccelerator = getToolAccelerator; + } + + function createTool( toolbar, group, name, icon, title, init, onSelect, displayBothIconAndLabel ) { + var Tool = function () { + Tool.super.apply( this, arguments ); + this.toggled = false; + if ( init ) { + init.call( this ); + } + }; + + OO.inheritClass( Tool, OO.ui.Tool ); + + Tool.prototype.onSelect = function () { + if ( onSelect ) { + onSelect.call( this ); + } else { + this.toggled = !this.toggled; + this.setActive( this.toggled ); + } + toolbars[ toolbar ].emit( 'updateState' ); + }; + Tool.prototype.onUpdateState = function () {}; + + Tool.static.name = name; + Tool.static.group = group; + Tool.static.icon = icon; + Tool.static.title = title; + Tool.static.displayBothIconAndLabel = !!displayBothIconAndLabel; + return Tool; + } + + function createToolGroup( toolbar, group ) { + $.each( toolGroups[ group ], function ( i, tool ) { + var args = tool.slice(); + args.splice( 0, 0, toolbar, group ); + toolFactories[ toolbar ].register( createTool.apply( null, args ) ); + } ); + } + + function createDisabledToolGroup( parent, name ) { + var DisabledToolGroup = function () { + DisabledToolGroup.super.apply( this, arguments ); + this.setDisabled( true ); + }; + + OO.inheritClass( DisabledToolGroup, parent ); + + DisabledToolGroup.static.name = name; + + DisabledToolGroup.prototype.onUpdateState = function () { + this.setLabel( 'Disabled' ); + }; + + return DisabledToolGroup; + } + + toolGroupFactories[ 0 ].register( createDisabledToolGroup( OO.ui.BarToolGroup, 'disabledBar' ) ); + toolGroupFactories[ 0 ].register( createDisabledToolGroup( OO.ui.ListToolGroup, 'disabledList' ) ); + toolGroupFactories[ 1 ].register( createDisabledToolGroup( OO.ui.MenuToolGroup, 'disabledMenu' ) ); + + PopupTool = function ( toolGroup, config ) { + // Parent constructor + OO.ui.PopupTool.call( this, toolGroup, $.extend( { popup: { + padded: true, + label: 'Popup head', + head: true + } }, config ) ); + + this.popup.$body.append( '<p>Popup contents</p>' ); + }; + + OO.inheritClass( PopupTool, OO.ui.PopupTool ); + + PopupTool.static.name = 'popupTool'; + PopupTool.static.group = 'popupTools'; + PopupTool.static.icon = 'help'; + + toolFactories[ 2 ].register( PopupTool ); + + ToolGroupTool = function ( toolGroup, config ) { + // Parent constructor + OO.ui.ToolGroupTool.call( this, toolGroup, config ); + }; + + OO.inheritClass( ToolGroupTool, OO.ui.ToolGroupTool ); + + ToolGroupTool.static.name = 'toolGroupTool'; + ToolGroupTool.static.group = 'barTools'; + ToolGroupTool.static.groupConfig = { + indicator: 'down', + include: [ { group: 'moreListTools' } ] + }; + + toolFactories[ 0 ].register( ToolGroupTool ); + toolFactories[ 3 ].register( ToolGroupTool ); + + // Toolbar + toolbars[ 0 ].setup( [ + { + type: 'bar', + include: [ { group: 'barTools' } ], + demote: [ 'toolGroupTool' ] + }, + { + type: 'disabledBar', + include: [ { group: 'disabledBarTools' } ] + }, + { + type: 'list', + indicator: 'down', + label: 'List', + icon: 'picture', + include: [ { group: 'listTools' } ], + allowCollapse: [ 'listTool1', 'listTool6' ] + }, + { + type: 'disabledList', + indicator: 'down', + label: 'List', + icon: 'picture', + include: [ { group: 'disabledListTools' } ] + }, + { + type: 'list', + indicator: 'down', + label: 'Auto-disabling list', + icon: 'picture', + include: [ { group: 'autoDisableListTools' } ] + }, + { + label: 'Catch-all', + include: '*' + } + ] ); + // Toolbar with action buttons + toolbars[ 1 ].setup( [ + { + type: 'menu', + indicator: 'down', + icon: 'picture', + include: [ { group: 'menuTools' } ] + }, + { + type: 'disabledMenu', + indicator: 'down', + icon: 'picture', + include: [ { group: 'disabledMenuTools' } ] + } + ] ); + // Fake toolbar to be injected into the first toolbar + // demonstrating right-aligned menus + toolbars[ 2 ].setup( [ + { + include: [ { group: 'popupTools' } ] + }, + { + type: 'list', + icon: 'menu', + include: [ { group: 'listTools' } ] + } + ] ); + toolbars[ 3 ].setup( [ + { + type: 'bar', + include: [ { group: 'history' } ] + }, + { + type: 'menu', + indicator: 'down', + include: [ { group: 'menuTools' } ] + }, + { + type: 'list', + indicator: 'down', + icon: 'comment', + include: [ { group: 'listTools' } ], + allowCollapse: [ 'listTool1', 'listTool6' ] + }, + { + type: 'bar', + include: [ { group: 'link' } ] + }, + { + type: 'bar', + include: [ { group: 'cite' } ] + }, + { + type: 'list', + indicator: 'down', + label: 'Insert', + include: [ { group: 'autoDisableListTools' }, { group: 'unusedStuff' } ] + } + ] ); + + saveButton = new OO.ui.ButtonWidget( { label: 'Save', flags: [ 'progressive', 'primary' ] } ); + 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 ); + + for ( i = 0; i < toolbars.length; i++ ) { + toolbars[ i ].emit( 'updateState' ); + } + + toolGroups = { + barTools: [ + [ 'barTool', 'picture', 'Basic tool in bar' ], + [ 'disabledBarTool', 'picture', 'Basic tool in bar disabled', function () { this.setDisabled( true ); } ] + ], + + disabledBarTools: [ + [ 'barToolInDisabled', 'picture', 'Basic tool in disabled bar' ] + ], + + 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 ); } ], + [ 'listTool6', 'picture', 'A final tool' ] + ], + + moreListTools: [ + [ 'listTool2', 'code', 'Another basic tool' ], + [ 'listTool4', 'picture', 'More basic tools' ], + [ 'listTool5', 'ellipsis', 'And even more' ] + ], + + popupTools: [ + [ 'popupTool' ] + ], + + disabledListTools: [ + [ 'listToolInDisabled', 'picture', 'Basic tool in disabled list' ] + ], + + autoDisableListTools: [ + [ 'autoDisableListTool', 'picture', 'Click to disable this tool', null, function () { this.setDisabled( true ); } ] + ], + + menuTools: [ + [ 'menuTool', 'picture', 'Basic tool' ], + [ 'disabledMenuTool', 'picture', 'Basic tool disabled', function () { this.setDisabled( true ); } ] + ], + + disabledMenuTools: [ + [ 'menuToolInDisabled', 'picture', 'Basic tool' ] + ], + + unusedStuff: [ + [ 'unusedTool', 'help', 'This tool is not explicitly used anywhere' ], + [ 'unusedTool1', 'help', 'And neither is this one' ] + ], + + history: [ + [ 'undoTool', 'undo', 'Undo' ], + [ 'redoTool', 'redo', 'Redo' ] + ], + + link: [ + [ 'linkTool', 'link', 'Link' ] + ], + + cite: [ + [ 'citeTool', 'citeArticle', 'Cite', null, null, true ] + ] + }; + + createToolGroup( 0, 'unusedStuff' ); + createToolGroup( 0, 'barTools' ); + createToolGroup( 0, 'disabledBarTools' ); + createToolGroup( 0, 'listTools' ); + createToolGroup( 0, 'moreListTools' ); + createToolGroup( 0, 'disabledListTools' ); + createToolGroup( 0, 'autoDisableListTools' ); + createToolGroup( 1, 'menuTools' ); + createToolGroup( 1, 'disabledMenuTools' ); + createToolGroup( 2, 'listTools' ); + createToolGroup( 3, 'history' ); + createToolGroup( 3, 'link' ); + createToolGroup( 3, 'cite' ); + createToolGroup( 3, 'menuTools' ); + createToolGroup( 3, 'listTools' ); + createToolGroup( 3, 'moreListTools' ); + createToolGroup( 3, 'autoDisableListTools' ); + createToolGroup( 3, 'unusedStuff' ); + + for ( i = 0; i < toolbars.length; i++ ) { + $containers = $containers.add( + new OO.ui.PanelLayout( { + expanded: false, + framed: true + } ).$element + .addClass( 'oo-ui-demo-container oo-ui-demo-toolbars' ) + ); + + if ( i === 2 ) { + continue; + } + $containers.eq( i ).append( toolbars[ i ].$element ); + } + $containers.append( '' ); + $demo.append( + $containers.eq( 0 ).append( '<div class="oo-ui-demo-toolbars-contents">Toolbar</div>' ), + $containers.eq( 1 ).append( '<div class="oo-ui-demo-toolbars-contents">Toolbar with action buttons</div>' ), + $containers.eq( 3 ).append( '<div class="oo-ui-demo-toolbars-contents">Word processor toolbar</div>' ) + ); + for ( i = 0; i < toolbars.length; i++ ) { + toolbars[ i ].initialize(); + } +}; diff --git a/vendor/oojs/oojs-ui/demos/pages/widgets.js b/vendor/oojs/oojs-ui/demos/pages/widgets.js new file mode 100644 index 00000000..52c6ee87 --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/pages/widgets.js @@ -0,0 +1,1428 @@ +OO.ui.Demo.static.pages.widgets = function ( demo ) { + var styles, states, buttonStyleShowcaseWidget, horizontalAlignmentWidget, fieldsets, + $demo = demo.$element; + + /** + * Draggable group widget containing drag/drop items + * @param {Object} [config] Configuration options + */ + function DragDropGroupWidget( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + DragDropGroupWidget.super.call( this, config ); + + // Mixin constructors + OO.ui.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 ); + + /** + * Respond to order event + * @param {OO.ui.DraggableElement} item Reordered item + * @param {number} newIndex New index + */ + DragDropGroupWidget.prototype.onReorder = function ( item, newIndex ) { + this.addItems( [ item ], newIndex ); + }; + + /** + * Drag/drop items + * @param {Object} [config] Configuration options + */ + function DragDropItemWidget( config ) { + // Configuration initialization + config = config || {}; + + // Parent constructor + DragDropItemWidget.super.call( this, config ); + + // Mixin constructors + OO.ui.DraggableElement.call( this, config ); + } + /* Setup */ + OO.inheritClass( DragDropItemWidget, OO.ui.OptionWidget ); + OO.mixinClass( DragDropItemWidget, OO.ui.DraggableElement ); + + /** + * Demo for LookupElement. + * @extends OO.ui.TextInputWidget + * @mixins OO.ui.LookupElement + */ + function NumberLookupTextInputWidget() { + // Parent constructor + OO.ui.TextInputWidget.call( this, { validate: 'integer' } ); + // Mixin constructors + OO.ui.LookupElement.call( this ); + } + OO.inheritClass( NumberLookupTextInputWidget, OO.ui.TextInputWidget ); + OO.mixinClass( NumberLookupTextInputWidget, OO.ui.LookupElement ); + + /** + * @inheritdoc + */ + NumberLookupTextInputWidget.prototype.getLookupRequest = function () { + var + value = this.getValue(), + deferred = $.Deferred(), + delay = 500 + Math.floor( Math.random() * 500 ); + + this.isValid().done( function ( valid ) { + if ( valid ) { + // Resolve with results after a faked delay + setTimeout( function () { + deferred.resolve( [ value * 1, value * 2, value * 3, value * 4, value * 5 ] ); + }, delay ); + } else { + // No results when the input contains invalid content + deferred.resolve( [] ); + } + } ); + + return deferred.promise( { abort: function () {} } ); + }; + + /** + * @inheritdoc + */ + NumberLookupTextInputWidget.prototype.getLookupCacheDataFromResponse = function ( response ) { + return response || []; + }; + + /** + * @inheritdoc + */ + NumberLookupTextInputWidget.prototype.getLookupMenuOptionsFromData = function ( data ) { + var + items = [], + i, number; + for ( i = 0; i < data.length; i++ ) { + number = String( data[ i ] ); + items.push( new OO.ui.MenuOptionWidget( { + data: number, + label: number + } ) ); + } + + return items; + }; + + styles = [ + {}, + { + flags: [ 'progressive' ] + }, + { + flags: [ 'constructive' ] + }, + { + flags: [ 'destructive' ] + }, + { + flags: [ 'primary', 'progressive' ] + }, + { + flags: [ 'primary', 'constructive' ] + }, + { + flags: [ 'primary', 'destructive' ] + } + ]; + states = [ + { + label: 'Button' + }, + { + label: 'Button', + icon: 'tag' + }, + { + label: 'Button', + icon: 'tag', + indicator: 'down' + }, + { + icon: 'tag', + title: 'Title text' + }, + { + indicator: 'down' + }, + { + icon: 'tag', + indicator: 'down' + }, + { + label: 'Button', + disabled: true + }, + { + icon: 'tag', + title: 'Title text', + disabled: true + }, + { + indicator: 'down', + disabled: true + } + ]; + buttonStyleShowcaseWidget = new OO.ui.Widget(); + $.each( styles, function ( i, style ) { + $.each( states, function ( j, state ) { + buttonStyleShowcaseWidget.$element.append( + new OO.ui.ButtonWidget( $.extend( {}, style, state ) ).$element + ); + } ); + 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', + items: [ + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { label: 'Normal' } ), + { + label: 'ButtonWidget (normal)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Progressive', + flags: [ 'progressive' ] + } ), + { + label: 'ButtonWidget (progressive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Constructive', + flags: [ 'constructive' ] + } ), + { + label: 'ButtonWidget (constructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Destructive', + flags: [ 'destructive' ] + } ), + { + label: 'ButtonWidget (destructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Primary progressive', + flags: [ 'primary', 'progressive' ] + } ), + { + label: 'ButtonWidget (primary, progressive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Primary constructive', + flags: [ 'primary', 'constructive' ] + } ), + { + label: 'ButtonWidget (primary, constructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Primary destructive', + flags: [ 'primary', 'destructive' ] + } ), + { + label: 'ButtonWidget (primary, destructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Disabled', + disabled: true + } ), + { + label: 'ButtonWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Constructive', + flags: [ 'constructive' ], + disabled: true + } ), + { + label: 'ButtonWidget (constructive, disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Constructive', + icon: 'tag', + flags: [ 'constructive' ], + disabled: true + } ), + { + label: 'ButtonWidget (constructive, icon, disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Icon', + icon: 'tag' + } ), + { + label: 'ButtonWidget (icon)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Icon', + icon: 'tag', + flags: [ 'progressive' ] + } ), + { + label: 'ButtonWidget (icon, progressive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Indicator', + indicator: 'down' + } ), + { + label: 'ButtonWidget (indicator)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Indicator', + indicator: 'down', + flags: [ 'constructive' ] + } ), + { + label: 'ButtonWidget (indicator, constructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + icon: 'help', + title: 'Icon only' + } ), + { + label: 'ButtonWidget (icon only)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + indicator: 'alert', + title: 'Indicator only' + } ), + { + label: 'ButtonWidget (indicator only)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + icon: 'help', + title: 'Icon only, framed' + } ), + { + label: 'ButtonWidget (icon only, framed)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + indicator: 'alert', + title: 'Indicator only, framed' + } ), + { + label: 'ButtonWidget (indicator only, framed)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + icon: 'tag', + label: 'Labeled' + } ), + { + label: 'ButtonWidget (frameless)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + flags: [ 'progressive' ], + icon: 'check', + label: 'Progressive' + } ), + { + label: 'ButtonWidget (frameless, progressive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + flags: [ 'warning' ], + icon: 'alert', + label: 'Warning' + } ), + { + label: 'ButtonWidget (frameless, warning)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + flags: [ 'destructive' ], + icon: 'remove', + label: 'Destructive' + } ), + { + label: 'ButtonWidget (frameless, destructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + flags: [ 'constructive' ], + icon: 'add', + label: 'Constructive' + } ), + { + label: 'ButtonWidget (frameless, constructive)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + icon: 'tag', + label: 'Disabled', + disabled: true + } ), + { + label: 'ButtonWidget (frameless, disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + flags: [ 'constructive' ], + icon: 'tag', + label: 'Constructive', + disabled: true + } ), + { + label: 'ButtonWidget (frameless, constructive, disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + framed: false, + icon: 'tag', + indicator: 'down', + label: 'Labeled' + } ), + { + label: 'ButtonWidget (frameless, indicator)\u200E', + align: 'top' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Button sets', + items: [ + new OO.ui.FieldLayout( + new OO.ui.ButtonGroupWidget( { + items: [ + new OO.ui.ButtonWidget( { + icon: 'tag', + label: 'One' + } ), + new OO.ui.ButtonWidget( { + label: 'Two' + } ), + new OO.ui.ButtonWidget( { + indicator: 'required', + label: 'Three' + } ) + ] + } ), + { + label: 'ButtonGroupWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonSelectWidget( { + items: [ + new OO.ui.ButtonOptionWidget( { + data: 'b', + icon: 'tag', + label: 'One' + } ), + new OO.ui.ButtonOptionWidget( { + data: 'c', + label: 'Two' + } ), + new OO.ui.ButtonOptionWidget( { + data: 'd', + indicator: 'required', + label: 'Three' + } ) + ] + } ), + { + label: 'ButtonSelectWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonSelectWidget( { + disabled: true, + items: [ + new OO.ui.ButtonOptionWidget( { + data: 'b', + icon: 'tag', + label: 'One' + } ), + new OO.ui.ButtonOptionWidget( { + data: 'c', + label: 'Two' + } ), + new OO.ui.ButtonOptionWidget( { + data: 'd', + indicator: 'required', + label: 'Three' + } ) + ] + } ), + { + label: 'ButtonSelectWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonSelectWidget( { + items: [ + new OO.ui.ButtonOptionWidget( { + data: 'b', + icon: 'tag', + label: 'One', + disabled: true + } ), + new OO.ui.ButtonOptionWidget( { + data: 'c', + label: 'Two' + } ), + new OO.ui.ButtonOptionWidget( { + data: 'd', + indicator: 'required', + label: 'Three' + } ) + ] + } ), + { + label: 'ButtonSelectWidget (disabled items)\u200E', + align: 'top' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Button style showcase', + items: [ + new OO.ui.FieldLayout( + buttonStyleShowcaseWidget, + { + align: 'top' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Form widgets', + items: [ + new OO.ui.FieldLayout( + new OO.ui.CheckboxInputWidget( { + selected: true + } ), + { + align: 'inline', + label: 'CheckboxInputWidget' + } + ), + new OO.ui.FieldLayout( + new OO.ui.CheckboxInputWidget( { + selected: true, + disabled: true + } ), + { + align: 'inline', + label: 'CheckboxInputWidget (disabled)\u200E' + } + ), + new OO.ui.FieldLayout( + new OO.ui.RadioInputWidget( { + name: 'oojs-ui-radio-demo' + } ), + { + align: 'inline', + label: 'Connected RadioInputWidget #1' + } + ), + new OO.ui.FieldLayout( + new OO.ui.RadioInputWidget( { + name: 'oojs-ui-radio-demo', + selected: true + } ), + { + align: 'inline', + label: 'Connected RadioInputWidget #2' + } + ), + new OO.ui.FieldLayout( + new OO.ui.RadioInputWidget( { + selected: true, + disabled: true + } ), + { + align: 'inline', + label: 'RadioInputWidget (disabled)\u200E' + } + ), + new OO.ui.FieldLayout( + new OO.ui.RadioSelectWidget( { + items: [ + new OO.ui.RadioOptionWidget( { + data: 'Cat', + label: 'Cat' + } ), + new OO.ui.RadioOptionWidget( { + data: 'Dog', + label: 'Dog' + } ), + new OO.ui.RadioOptionWidget( { + data: 'Goldfish', + label: 'Goldfish', + disabled: true + } ) + ] + } ), + { + align: 'top', + label: 'RadioSelectWidget' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ToggleSwitchWidget(), + { + label: 'ToggleSwitchWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ToggleSwitchWidget( { disabled: true } ), + { + label: 'ToggleSwitchWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ToggleSwitchWidget( { disabled: true, value: true } ), + { + label: 'ToggleSwitchWidget (disabled, checked)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ToggleButtonWidget( { label: 'Toggle' } ), + { + label: 'ToggleButtonWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ToggleButtonWidget( { label: 'Toggle', value: true } ), + { + label: 'ToggleButtonWidget (initially active)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ToggleButtonWidget( { icon: 'next' } ), + { + label: 'ToggleButtonWidget (icon only)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { value: 'Text input' } ), + { + label: 'TextInputWidget\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { icon: 'search' } ), + { + label: 'TextInputWidget (icon)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + indicator: 'required', + required: true, + validate: 'non-empty' + } ), + { + label: 'TextInputWidget (indicator, required)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + validate: function ( value ) { + return value.length % 2 === 0; + } + } ), + { + label: 'TextInputWidget (only allows even number of characters)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { placeholder: 'Placeholder' } ), + { + label: 'TextInputWidget (placeholder)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: 'Readonly', + readOnly: true + } ), + { + label: 'TextInputWidget (readonly)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + multiline: true, + value: 'Multiline\nMultiline' + } ), + { + label: 'TextInputWidget (multiline)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + multiline: true, + autosize: true, + value: 'Autosize\nAutosize\nAutosize\nAutosize' + } ), + { + label: 'TextInputWidget (autosize)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + icon: 'tag', + indicator: 'alert', + value: 'Text input with label', + label: 'Inline label' + } ), + { + label: 'TextInputWidget (label)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + value: 'Disabled', + icon: 'tag', + indicator: 'required', + label: 'Inline label', + disabled: true + } ), + { + label: 'TextInputWidget (icon, indicator, label, disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.DropdownWidget( { + label: 'Select one', + menu: { + items: [ + new OO.ui.MenuOptionWidget( { + data: 'a', + label: 'First' + } ), + new OO.ui.MenuOptionWidget( { + data: 'b', + label: 'Second', + indicator: 'required' + } ), + new OO.ui.MenuOptionWidget( { + data: 'c', + label: 'Third' + } ), + new OO.ui.MenuOptionWidget( { + data: 'c', + label: 'The fourth option has a long label' + } ), + new OO.ui.MenuOptionWidget( { + data: 'd', + label: 'Fifth' + } ) + ] + } + } ), + { + label: 'DropdownWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.DropdownWidget( { + label: 'Select one', + icon: 'tag', + menu: { + items: [ + new OO.ui.MenuOptionWidget( { + data: 'a', + label: 'First' + } ), + new OO.ui.MenuOptionWidget( { + data: 'b', + label: 'Disabled second option', + indicator: 'required', + disabled: true + } ), + new OO.ui.MenuOptionWidget( { + data: 'c', + label: 'Third' + } ), + new OO.ui.MenuOptionWidget( { + data: 'd', + label: 'Disabled fourth option with long label', + disabled: true + } ), + new OO.ui.MenuOptionWidget( { + data: 'c', + label: 'Third' + } ) + ] + } + } ), + { + label: 'DropdownWidget (disabled options)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.DropdownWidget( { + label: 'Select one', + disabled: true, + menu: { + items: [ + new OO.ui.MenuOptionWidget( { + data: 'a', + label: 'First' + } ), + new OO.ui.MenuOptionWidget( { + data: 'b', + label: 'Second' + } ), + new OO.ui.MenuOptionWidget( { + data: 'c', + label: 'Third' + } ), + new OO.ui.MenuOptionWidget( { + data: 'd', + label: 'Fourth' + } ) + ] + } + } ), + { + label: 'DropdownWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.DropdownInputWidget( { + options: [ + { + data: 'a', + label: 'First' + }, + { + data: 'b', + label: 'Second' + }, + { + data: 'c', + label: 'Third' + } + ], + value: 'b' + } ), + { + label: 'DropdownInputWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ComboBoxWidget( { + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ), + new OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ), + new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ), + new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ), + new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } ) + ] + } + } ), + { + label: 'ComboBoxWidget', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ComboBoxWidget( { + disabled: true, + menu: { + items: [ + new OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ), + new OO.ui.MenuOptionWidget( { data: 'fgh', label: 'Label for fgh' } ), + new OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } ), + new OO.ui.MenuOptionWidget( { data: 'zxc', label: 'Label for zxc' } ), + new OO.ui.MenuOptionWidget( { data: 'vbn', label: 'Label for vbn' } ) + ] + } + } ), + { + label: 'ComboBoxWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ComboBoxWidget(), + { + label: 'ComboBoxWidget (empty)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonInputWidget( { + label: 'Submit the form', + type: 'submit' + } ), + { + align: 'top', + label: 'ButtonInputWidget' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonInputWidget( { + label: 'Submit the form', + type: 'submit', + useInputTag: true + } ), + { + align: 'top', + label: 'ButtonInputWidget (using <input/>)\u200E' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Horizontal alignment', + items: [ + new OO.ui.FieldLayout( + horizontalAlignmentWidget, + { + label: 'Multiple widgets shown as a single line, ' + + 'as used in compact forms or in parts of a bigger widget.', + align: 'top' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Draggable', + items: [ + new OO.ui.FieldLayout( + new DragDropGroupWidget( { + orientation: 'horizontal', + items: [ + new DragDropItemWidget( { + data: 'item1', + label: 'Item 1' + } ), + new DragDropItemWidget( { + data: 'item2', + label: 'Item 2' + } ), + new DragDropItemWidget( { + data: 'item3', + label: 'Item 3' + } ), + new DragDropItemWidget( { + data: 'item4', + label: 'Item 4' + } ) + ] + } ), + { + label: 'DraggableGroupWidget (horizontal)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new DragDropGroupWidget( { + items: [ + new DragDropItemWidget( { + data: 'item1', + label: 'Item 1' + } ), + new DragDropItemWidget( { + data: 'item2', + label: 'Item 2' + } ), + new DragDropItemWidget( { + data: 'item3', + label: 'Item 3' + } ), + new DragDropItemWidget( { + data: 'item4', + label: 'Item 4' + } ) + ] + } ), + { + label: 'DraggableGroupWidget (vertical)\u200E', + align: 'top' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Other widgets', + items: [ + new OO.ui.FieldLayout( + new OO.ui.IconWidget( { + icon: 'picture', + title: 'Picture icon' + } ), + { + label: 'IconWidget (normal)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.IconWidget( { + icon: 'remove', + flags: 'destructive', + title: 'Remove icon' + } ), + { + label: 'IconWidget (flagged)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.IconWidget( { + icon: 'picture', + title: 'Picture icon', + disabled: true + } ), + { + label: 'IconWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.IndicatorWidget( { + indicator: 'required', + title: 'Required indicator' + } ), + { + label: 'IndicatorWidget (normal)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.IndicatorWidget( { + indicator: 'required', + title: 'Required indicator', + disabled: true + } ), + { + label: 'IndicatorWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.LabelWidget( { + label: 'Label' + } ), + { + label: 'LabelWidget (normal)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.LabelWidget( { + label: 'Label', + disabled: true + } ), + { + label: 'LabelWidget (disabled)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.LabelWidget( { + label: new OO.ui.HtmlSnippet( '<b>Fancy</b> <i>text</i> <u>formatting</u>!' ) + } ), + { + label: 'LabelWidget (with html)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.PopupButtonWidget( { + icon: 'info', + framed: false, + popup: { + head: true, + label: 'More information', + $content: $( '<p>Extra information here.</p>' ), + padded: true, + align: 'force-left' + } + } ), + { + label: 'PopupButtonWidget (frameless, with popup head, align: force-left)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.PopupButtonWidget( { + icon: 'info', + framed: false, + popup: { + head: true, + label: 'More information', + $content: $( '<p>Extra information here.</p>' ), + padded: true, + align: 'force-right' + } + } ), + { + label: 'PopupButtonWidget (frameless, with popup head align: force-right)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.PopupButtonWidget( { + icon: 'info', + framed: false, + popup: { + head: true, + label: 'More information', + $content: $( '<p>Extra information here.</p>' ), + padded: true, + align: 'backwards' + } + } ), + { + label: 'PopupButtonWidget (frameless, with popup head align: backwards)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.PopupButtonWidget( { + icon: 'info', + framed: false, + popup: { + head: true, + label: 'More information', + $content: $( '<p>Extra information here.</p>' ), + padded: true, + align: 'forwards' + } + } ), + { + label: 'PopupButtonWidget (frameless, with popup head align: forwards)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.PopupButtonWidget( { + icon: 'menu', + label: 'Options', + popup: { + $content: $( '<p>Additional options here.</p>' ), + padded: true, + align: 'left' + } + } ), + { + label: 'PopupButtonWidget (framed, no popup head)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new NumberLookupTextInputWidget(), + { + label: 'LookupElement (try inputting an integer)\u200E', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ProgressBarWidget( { + progress: 33 + } ), + { + label: 'Progress bar', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ProgressBarWidget( { + progress: false + } ), + { + label: 'Progress bar (indeterminate)\u200E', + align: 'top' + } + ) + ] + } ), + new OO.ui.FieldsetLayout( { + label: 'Field layouts', + help: 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo pri ' + + 'in, duo ex inimicus perpetua complectitur, mel periculis similique at.\u200E', + items: [ + new OO.ui.FieldLayout( + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'FieldLayout 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.\u200E', + align: 'top' + } + ), + new OO.ui.ActionFieldLayout( + new OO.ui.TextInputWidget( {} ), + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'ActionFieldLayout aligned left', + align: 'left' + } + ), + new OO.ui.ActionFieldLayout( + new OO.ui.TextInputWidget( {} ), + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'ActionFieldLayout aligned inline', + align: 'inline' + } + ), + new OO.ui.ActionFieldLayout( + new OO.ui.TextInputWidget( {} ), + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'ActionFieldLayout aligned right', + align: 'right' + } + ), + new OO.ui.ActionFieldLayout( + new OO.ui.TextInputWidget( {} ), + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: 'ActionFieldLayout aligned top', + align: 'top' + } + ), + new OO.ui.ActionFieldLayout( + new OO.ui.TextInputWidget( {} ), + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + 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.\u200E', + align: 'top' + } + ), + new OO.ui.ActionFieldLayout( + new OO.ui.TextInputWidget( {} ), + new OO.ui.ButtonWidget( { + label: 'Button' + } ), + { + label: $( '<i>' ).text( 'ActionFieldLayout aligned top with rich text label' ), + align: 'top' + } + ) + ] + } ), + new OO.ui.FormLayout( { + method: 'GET', + action: 'widgets.php', + items: [ + new OO.ui.FieldsetLayout( { + label: 'Form layout', + items: [ + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + name: 'username' + } ), + { + label: 'User name', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.TextInputWidget( { + name: 'password', + type: 'password' + } ), + { + label: 'Password', + align: 'top' + } + ), + new OO.ui.FieldLayout( + new OO.ui.CheckboxInputWidget( { + name: 'rememberme', + selected: true + } ), + { + label: 'Remember me', + align: 'inline' + } + ), + new OO.ui.FieldLayout( + new OO.ui.ButtonInputWidget( { + name: 'login', + label: 'Log in', + type: 'submit', + flags: [ 'primary', 'progressive' ], + icon: 'check' + } ), + { + label: null, + align: 'top' + } + ) + ] + } ) + ] + } ) + ]; + + $.each( fieldsets, function ( i, fieldsetLayout ) { + $.each( fieldsetLayout.getItems(), function ( j, fieldLayout ) { + fieldLayout.$element.append( + demo.buildConsole( fieldLayout.fieldWidget, 'widget' ) + ); + } ); + } ); + + $demo.append( + new OO.ui.PanelLayout( { + expanded: false, + framed: true + } ).$element + .addClass( 'oo-ui-demo-container' ) + .append( + $( fieldsets.map( function ( fieldset ) { return fieldset.$element[ 0 ]; } ) ) + ) + ); +}; + +OO.ui.Demo.static.defaultPage = 'widgets'; diff --git a/vendor/oojs/oojs-ui/demos/styles/demo.css b/vendor/oojs/oojs-ui/demos/styles/demo.css new file mode 100644 index 00000000..1c8d6139 --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/styles/demo.css @@ -0,0 +1,250 @@ +body { + font-size: 0.8em; + font-family: sans-serif; +} + +/* Layout */ + +.oo-ui-demo-menu > .oo-ui-widget { + display: inline-block; + vertical-align: middle; + margin-right: 1em; +} + +.oo-ui-demo-menu .oo-ui-demo-pageDropdown { + width: 10em; +} + +.oo-ui-demo { + max-width: 62.5em; + margin: 0 auto; +} + +.oo-ui-demo-container { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +@media (max-width: 750px) { + .oo-ui-demo-menu { + margin-bottom: 1em; + } + .oo-ui-demo-container { + padding: 1em 2em; + } +} + +@media (min-width: 751px) { + .oo-ui-demo-menu { + margin-bottom: 2em; + } + .oo-ui-demo-container { + padding: 2em 4em; + } +} + +/* Toolbars demo */ + +.oo-ui-demo-toolbars { + padding: 0; + margin-bottom: 2em; +} + +.oo-ui-demo-toolbars-contents { + padding: 2em; + min-height: 100px; +} + +/* Icons demo */ + +.oo-ui-demo-icons .oo-ui-buttonSelectWidget { + margin-bottom: 2em; +} + +.oo-ui-demo-icons .oo-ui-fieldLayout { + display: inline-block; + margin-bottom: 0; +} + +.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-labelElement-label { + display: none; +} + +.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button { + margin: 1em 1em 1em 0; + width: 12em; + opacity: 0.8; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button .oo-ui-labelElement-label { + text-transform: capitalize; + display: inline !important; +} + +.oo-ui-demo-icons .oo-ui-fieldLayout .oo-ui-buttonElement-button:hover { + opacity: 1; +} + +/* 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 { + max-width: 10em; +} + +/* Console */ + +.oo-ui-demo-console { + clear: both; + position: relative; + border: 1px solid transparent; + margin-bottom: -2px; + line-height: 1.4; +} + +.oo-ui-demo-console-expanded { + width: 100%; + border-color: #aaa; + margin: 0.5em 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.oo-ui-demo-console-toggle { + float: right; + margin-top: -2em; + margin-right: -2em; + cursor: pointer; +} + +.oo-ui-demo-console-expanded .oo-ui-demo-console-toggle { + margin-top: -2.5em; +} + +.oo-ui-demo-console-toggle::after { + position: relative; + display: inline-block; + width: 1.6em; + background: #f9f9f9; + border-radius: 50%; + line-height: 1.6em; + color: #999; + text-align: center; + content: "→"; +} + +.oo-ui-demo-console-toggle:hover::after, +.oo-ui-demo-console-expanded .oo-ui-demo-console-toggle::after { + background: #eee; + color: #333; +} + +.oo-ui-demo-console-expanded .oo-ui-demo-console-toggle::after { + content: "↑"; +} + +.oo-ui-demo-console-collapsed .oo-ui-demo-console-log, +.oo-ui-demo-console-collapsed .oo-ui-demo-console-label, +.oo-ui-demo-console-collapsed .oo-ui-demo-console-submit { + display: none; +} + +.oo-ui-demo-console-log { + border: 1px solid #eee; + border-width: 0 0 1px 0; + max-height: 5em; + overflow: auto; +} + +.oo-ui-demo-console-log-line { + position: relative; + padding-left: 20px; +} + +.oo-ui-demo-console-log-line-input { + font-style: italic; + color: #555; +} + +.oo-ui-demo-console-log-line-input::before { + display: block; + position: absolute; + top: 0; + left: 0; + width: 20px; + text-align: center; + bottom: 0; + content: "→"; +} + +.oo-ui-demo-console-log-line-error { + color: red; +} + +.oo-ui-demo-console-label { + position: relative; + display: inline-block; + width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-right: -20px; + cursor: pointer; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.oo-ui-demo-console-label::before { + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 20px; + text-align: center; + content: '→'; + color: blue; +} + +.oo-ui-demo-console-input { + margin: 0; + padding: 0; + border: 0; + width: 100%; +} + +.oo-ui-demo-console-input:focus { + outline: 0; +} + +.oo-ui-demo-console-submit { + display: inline-block; + width: 20px; + line-height: 1.6em; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: #f9f9f9; + color: #888; + cursor: pointer; +} + +.oo-ui-demo-console-submit:hover { + background: #eee; + color: #333; +} diff --git a/vendor/oojs/oojs-ui/demos/widgets.php b/vendor/oojs/oojs-ui/demos/widgets.php new file mode 100644 index 00000000..494a7ac1 --- /dev/null +++ b/vendor/oojs/oojs-ui/demos/widgets.php @@ -0,0 +1,830 @@ +<?php + $autoload = '../vendor/autoload.php'; + if ( !file_exists( $autoload ) ) { + echo '<h1>Did you forget to run <code>composer install</code>?</h1>'; + exit(); + } + require_once $autoload; + + $theme = ( isset( $_GET['theme'] ) && $_GET['theme'] === 'apex' ) ? 'apex' : 'mediawiki'; + $themeClass = 'OOUI\\' . ( $theme === 'apex' ? 'Apex' : 'MediaWiki' ) . 'Theme'; + OOUI\Theme::setSingleton( new $themeClass() ); + + $graphicSuffixMap = array( + 'mixed' => '', + 'vector' => '.vector', + 'raster' => '.raster', + ); + $graphic = ( isset( $_GET['graphic'] ) && isset( $graphicSuffixMap[ $_GET['graphic'] ] ) ) + ? $_GET['graphic'] : 'vector'; + $graphicSuffix = $graphicSuffixMap[ $graphic ]; + + $direction = ( isset( $_GET['direction'] ) && $_GET['direction'] === 'rtl' ) ? 'rtl' : 'ltr'; + $directionSuffix = $direction === 'rtl' ? '.rtl' : ''; + OOUI\Element::setDefaultDir( $direction ); + + $query = array( + 'theme' => $theme, + 'graphic' => $graphic, + 'direction' => $direction, + ); + $styleFileName = "oojs-ui-$theme$graphicSuffix$directionSuffix.css"; +?> +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<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="styles/demo<?php echo $directionSuffix; ?>.css"> +</head> +<body class="oo-ui-<?php echo $direction; ?>"> + <div class="oo-ui-demo"> + <div class="oo-ui-demo-menu"> + <?php + echo new OOUI\ButtonGroupWidget( array( + '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' ) ) ), + ) ), + ) + ) ); + echo new OOUI\ButtonGroupWidget( array( + 'infusable' => true, + 'items' => array( + new OOUI\ButtonWidget( array( + 'label' => 'Mixed', + 'href' => '?' . http_build_query( array_merge( $query, array( 'graphic' => 'mixed' ) ) ), + ) ), + new OOUI\ButtonWidget( array( + 'label' => 'Vector', + 'href' => '?' . http_build_query( array_merge( $query, array( 'graphic' => 'vector' ) ) ), + ) ), + new OOUI\ButtonWidget( array( + 'label' => 'Raster', + 'href' => '?' . http_build_query( array_merge( $query, array( 'graphic' => 'raster' ) ) ), + ) ), + ) + ) ); + echo new OOUI\ButtonGroupWidget( array( + 'infusable' => true, + 'items' => array( + new OOUI\ButtonWidget( array( + 'label' => 'LTR', + 'href' => '?' . http_build_query( array_merge( $query, array( 'direction' => 'ltr' ) ) ), + ) ), + new OOUI\ButtonWidget( array( + 'label' => 'RTL', + 'href' => '?' . http_build_query( array_merge( $query, array( 'direction' => 'rtl' ) ) ), + ) ), + ) + ) ); + ?> + </div> + <?php + $demoContainer = new OOUI\PanelLayout( array( + 'expanded' => false, + 'padded' => true, + 'framed' => true, + ) ); + $demoContainer->addClasses( array( 'oo-ui-demo-container' ) ); + + $styles = array( + array(), + array( + 'flags' => array( 'progressive' ), + ), + array( + 'flags' => array( 'constructive' ), + ), + array( + 'flags' => array( 'destructive' ), + ), + array( + 'flags' => array( 'primary', 'progressive' ), + ), + array( + 'flags' => array( 'primary', 'constructive' ), + ), + array( + 'flags' => array( 'primary', 'destructive' ), + ), + ); + $states = array( + array( + 'label' => 'Button', + ), + array( + 'label' => 'Button', + 'icon' => 'tag', + ), + array( + 'label' => 'Button', + 'icon' => 'tag', + 'indicator' => 'down', + ), + array( + 'icon' => 'tag', + 'title' => "Title text", + ), + array( + 'indicator' => 'down', + ), + array( + 'icon' => 'tag', + 'indicator' => 'down', + ), + array( + 'label' => 'Button', + 'disabled' => true, + ), + array( + 'icon' => 'tag', + 'title' => "Title text", + 'disabled' => true, + ), + array( + 'indicator' => 'down', + 'disabled' => true, + ), + ); + $buttonStyleShowcaseWidget = new OOUI\Widget(); + foreach ( $styles as $style ) { + foreach ( $states as $state ) { + $buttonStyleShowcaseWidget->appendContent( + new OOUI\ButtonWidget( array_merge( $style, $state, array( 'infusable' => true ) ) ) + ); + } + $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', + 'items' => array( + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( 'label' => 'Normal' ) ), + array( + 'label' => "ButtonWidget (normal)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Progressive', + 'flags' => array( 'progressive' ) + ) ), + array( + 'label' => "ButtonWidget (progressive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Constructive', + 'flags' => array( 'constructive' ) + ) ), + array( + 'label' => "ButtonWidget (constructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Destructive', + 'flags' => array( 'destructive' ) + ) ), + array( + 'label' => "ButtonWidget (destructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Primary progressive', + 'flags' => array( 'primary', 'progressive' ) + ) ), + array( + 'label' => "ButtonWidget (primary, progressive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Primary constructive', + 'flags' => array( 'primary', 'constructive' ) + ) ), + array( + 'label' => "ButtonWidget (primary, constructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Primary destructive', + 'flags' => array( 'primary', 'destructive' ) + ) ), + array( + 'label' => "ButtonWidget (primary, destructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Disabled', + 'disabled' => true + ) ), + array( + 'label' => "ButtonWidget (disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Constructive', + 'flags' => array( 'constructive' ), + 'disabled' => true + ) ), + array( + 'label' => "ButtonWidget (constructive, disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Constructive', + 'icon' => 'tag', + 'flags' => array( 'constructive' ), + 'disabled' => true + ) ), + array( + 'label' => "ButtonWidget (constructive, icon, disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Icon', + 'icon' => 'tag' + ) ), + array( + 'label' => "ButtonWidget (icon)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Icon', + 'icon' => 'tag', + 'flags' => array( 'progressive' ) + ) ), + array( + 'label' => "ButtonWidget (icon, progressive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Indicator', + 'indicator' => 'down' + ) ), + array( + 'label' => "ButtonWidget (indicator)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Indicator', + 'indicator' => 'down', + 'flags' => array( 'constructive' ) + ) ), + array( + 'label' => "ButtonWidget (indicator, constructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'icon' => 'help', + 'title' => 'Icon only' + ) ), + array( + 'label' => "ButtonWidget (icon only)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'icon' => 'tag', + 'label' => 'Labeled' + ) ), + array( + 'label' => "ButtonWidget (frameless)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'flags' => array( 'progressive' ), + 'icon' => 'check', + 'label' => 'Progressive' + ) ), + array( + 'label' => "ButtonWidget (frameless, progressive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'flags' => array( 'destructive' ), + 'icon' => 'remove', + 'label' => 'Destructive' + ) ), + array( + 'label' => "ButtonWidget (frameless, destructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'flags' => array( 'constructive' ), + 'icon' => 'add', + 'label' => 'Constructive' + ) ), + array( + 'label' => "ButtonWidget (frameless, constructive)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'icon' => 'tag', + 'label' => 'Disabled', + 'disabled' => true + ) ), + array( + 'label' => "ButtonWidget (frameless, disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'framed' => false, + 'flags' => array( 'constructive' ), + 'icon' => 'tag', + 'label' => 'Constructive', + 'disabled' => true + ) ), + array( + 'label' => "ButtonWidget (frameless, constructive, disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ) + ) + ) ) ); + $demoContainer->appendContent( new OOUI\FieldsetLayout( array( + 'infusable' => true, + 'label' => 'Button sets', + 'items' => array( + new OOUI\FieldLayout( + new OOUI\ButtonGroupWidget( array( + 'items' => array( + new OOUI\ButtonWidget( array( + 'icon' => 'tag', + 'label' => 'One' + ) ), + new OOUI\ButtonWidget( array( + 'label' => 'Two' + ) ), + new OOUI\ButtonWidget( array( + 'indicator' => 'required', + 'label' => 'Three' + ) ) + ) + ) ), + array( + 'label' => 'ButtonGroupWidget', + 'align' => 'top' + ) + ) + ) + ) ) ); + # Note that $buttonStyleShowcaseWidget is not infusable, + # because the contents would not be preserved -- we assume + # that widgets will manage their own contents by default, + # but here we've manually appended content to the widget. + # If we embed it in an infusable FieldsetLayout, it will be + # (recursively) made infusable. We protect the FieldLayout + # by wrapping it with a new <div> Tag, so that it won't get + # rebuilt during infusion. + $wrappedFieldLayout = new OOUI\Tag( 'div' ); + $wrappedFieldLayout->appendContent( + new OOUI\FieldLayout( + $buttonStyleShowcaseWidget, + array( + 'align' => 'top' + ) + ) + ); + $demoContainer->appendContent( new OOUI\FieldsetLayout( array( + 'infusable' => true, + 'label' => 'Button style showcase', + 'items' => array( $wrappedFieldLayout ), + ) ) ); + $demoContainer->appendContent( new OOUI\FieldsetLayout( array( + 'infusable' => true, + 'label' => 'Form widgets', + 'items' => array( + new OOUI\FieldLayout( + new OOUI\CheckboxInputWidget( array( + 'selected' => true + ) ), + array( + 'align' => 'inline', + 'label' => 'CheckboxInputWidget' + ) + ), + new OOUI\FieldLayout( + new OOUI\CheckboxInputWidget( array( + 'selected' => true, + 'disabled' => true + ) ), + array( + 'align' => 'inline', + 'label' => "CheckboxInputWidget (disabled)\xE2\x80\x8E" + ) + ), + new OOUI\FieldLayout( + new OOUI\RadioInputWidget( array( + 'name' => 'oojs-ui-radio-demo' + ) ), + array( + 'align' => 'inline', + 'label' => 'Connected RadioInputWidget #1' + ) + ), + new OOUI\FieldLayout( + new OOUI\RadioInputWidget( array( + 'name' => 'oojs-ui-radio-demo', + 'selected' => true + ) ), + array( + 'align' => 'inline', + 'label' => 'Connected RadioInputWidget #2' + ) + ), + new OOUI\FieldLayout( + new OOUI\RadioInputWidget( array( + 'selected' => true, + 'disabled' => true + ) ), + array( + 'align' => 'inline', + 'label' => "RadioInputWidget (disabled)\xE2\x80\x8E" + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( 'value' => 'Text input' ) ), + array( + 'label' => "TextInputWidget\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( 'icon' => 'search' ) ), + array( + 'label' => "TextInputWidget (icon)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'indicator' => 'required', + 'required' => true + ) ), + array( + 'label' => "TextInputWidget (indicator, required)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( 'placeholder' => 'Placeholder' ) ), + array( + 'label' => "TextInputWidget (placeholder)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'value' => 'Readonly', + 'readOnly' => true + ) ), + array( + 'label' => "TextInputWidget (readonly)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'value' => 'Disabled', + 'disabled' => true + ) ), + array( + 'label' => "TextInputWidget (disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'multiline' => true, + 'value' => "Multiline\nMultiline" + ) ), + array( + 'label' => "TextInputWidget (multiline)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\DropdownInputWidget( array( + 'options' => array( + array( + 'data' => 'a', + 'label' => 'First' + ), + array( + 'data' => 'b', + 'label' => 'Second' + ), + array( + 'data' => 'c', + 'label' => 'Third' + ) + ), + 'value' => 'b' + ) ), + array( + 'label' => 'DropdownInputWidget', + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonInputWidget( array( + 'label' => 'Submit the form', + 'type' => 'submit' + ) ), + array( + 'align' => 'top', + 'label' => "ButtonInputWidget\xE2\x80\x8E" + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonInputWidget( array( + 'label' => 'Submit the form', + 'type' => 'submit', + 'useInputTag' => true + ) ), + array( + 'align' => 'top', + 'label' => "ButtonInputWidget (using <input/>)\xE2\x80\x8E" + ) + ) + ) + ) ) ); + # 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' + ) + ) + ); + $demoContainer->appendContent( new OOUI\FieldsetLayout( array( + 'infusable' => true, + 'label' => 'Horizontal alignment', + 'items' => array( $wrappedFieldLayout ), + ) ) ); + $demoContainer->appendContent( new OOUI\FieldsetLayout( array( + 'infusable' => true, + 'label' => 'Other widgets', + 'items' => array( + new OOUI\FieldLayout( + new OOUI\IconWidget( array( + 'icon' => 'picture', + 'title' => 'Picture icon' + ) ), + array( + 'label' => "IconWidget (normal)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\IconWidget( array( + 'icon' => 'remove', + 'flags' => 'destructive', + 'title' => 'Remove icon' + ) ), + array( + 'label' => "IconWidget (flagged)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\IconWidget( array( + 'icon' => 'picture', + 'title' => 'Picture icon', + 'disabled' => true + ) ), + array( + 'label' => "IconWidget (disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\IndicatorWidget( array( + 'indicator' => 'required', + 'title' => 'Required indicator' + ) ), + array( + 'label' => "IndicatorWidget (normal)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\IndicatorWidget( array( + 'indicator' => 'required', + 'title' => 'Required indicator', + 'disabled' => true + ) ), + array( + 'label' => "IndicatorWidget (disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\LabelWidget( array( + 'label' => 'Label' + ) ), + array( + 'label' => "LabelWidget (normal)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\LabelWidget( array( + 'label' => 'Label', + 'disabled' => true, + ) ), + array( + 'label' => "LabelWidget (disabled)\xE2\x80\x8E", + 'align' => 'top' + ) + ), + new OOUI\FieldLayout( + new OOUI\LabelWidget( array( + 'label' => new OOUI\HtmlSnippet( '<b>Fancy</b> <i>text</i> <u>formatting</u>!' ), + ) ), + array( + 'label' => "LabelWidget (with html)\xE2\x80\x8E", + 'align' => 'top' + ) + ) + ) + ) ) ); + $demoContainer->appendContent( new OOUI\FieldsetLayout( array( + 'infusable' => true, + 'label' => 'Field layouts', + '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", + 'items' => array( + new OOUI\FieldLayout( + new OOUI\ButtonWidget( array( + 'label' => 'Button' + ) ), + array( + 'label' => 'FieldLayout 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' + ) + ) + ) + ) ) ); + + $demoContainer->appendContent( new OOUI\FormLayout( array( + 'infusable' => true, + 'method' => 'GET', + 'action' => 'widgets.php', + 'items' => array( + new OOUI\FieldsetLayout( array( + 'label' => 'Form layout', + 'items' => array( + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'name' => 'username', + ) ), + array( + 'label' => 'User name', + 'align' => 'top', + ) + ), + new OOUI\FieldLayout( + new OOUI\TextInputWidget( array( + 'name' => 'password', + 'type' => 'password', + ) ), + array( + 'label' => 'Password', + 'align' => 'top', + ) + ), + new OOUI\FieldLayout( + new OOUI\CheckboxInputWidget( array( + 'name' => 'rememberme', + 'selected' => true, + ) ), + array( + 'label' => 'Remember me', + 'align' => 'inline', + ) + ), + new OOUI\FieldLayout( + new OOUI\ButtonInputWidget( array( + 'name' => 'login', + 'label' => 'Log in', + 'type' => 'submit', + 'flags' => array( 'primary', 'progressive' ), + 'icon' => 'check', + ) ), + array( + 'label' => null, + 'align' => 'top', + ) + ), + ) + ) ) + ) + ) ) ); + + echo $demoContainer; + + ?> + </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> +</body> +</html> |