Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
oojs-ui - npm Package Compare versions
Comparing version 0.7.0 to 0.8.0
@@ -35,2 +35,3 @@ /** | ||
| this.graphicsSelect = new OO.ui.ButtonSelectWidget().addItems( [ | ||
| new OO.ui.ButtonOptionWidget( { data: 'mixed', label: 'Mixed' } ), | ||
| new OO.ui.ButtonOptionWidget( { data: 'vector', label: 'Vector' } ), | ||
@@ -119,4 +120,5 @@ new OO.ui.ButtonOptionWidget( { data: 'raster', label: 'Raster' } ) | ||
| OO.ui.Demo.static.graphics = { | ||
| vector: { fileSuffix: '.svg' }, | ||
| raster: { fileSuffix: '' } | ||
| mixed: { fileSuffix: '' }, | ||
| vector: { fileSuffix: '.vector' }, | ||
| raster: { fileSuffix: '.raster' } | ||
| }; | ||
@@ -123,0 +125,0 @@ |
| OO.ui.Demo.static.pages.widgets = function ( demo ) { | ||
| var styles, states, buttonStyleShowcaseWidget, fieldsets, | ||
| var styles, states, buttonStyleShowcaseWidget, horizontalAlignmentWidget, fieldsets, | ||
| $demo = demo.$element; | ||
@@ -185,2 +185,24 @@ | ||
| 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.ButtonWidget( { label: 'A' } ), | ||
| new OO.ui.ButtonWidget( { 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 = [ | ||
@@ -414,2 +436,14 @@ new OO.ui.FieldsetLayout( { | ||
| } | ||
| ), | ||
| new OO.ui.FieldLayout( | ||
| new OO.ui.ButtonWidget( { | ||
| framed: false, | ||
| icon: 'picture', | ||
| indicator: 'down', | ||
| label: 'Labeled' | ||
| } ), | ||
| { | ||
| label: 'ButtonWidget (frameless, indicator)\u200E', | ||
| align: 'top' | ||
| } | ||
| ) | ||
@@ -958,2 +992,15 @@ ] | ||
| 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', | ||
@@ -1062,2 +1109,21 @@ items: [ | ||
| 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.PopupButtonWidget( { | ||
@@ -1064,0 +1130,0 @@ icon: 'info', |
| /*! | ||
| * OOjs UI v0.7.0 | ||
| * OOjs UI v0.8.0 | ||
| * https://www.mediawiki.org/wiki/OOjs_UI | ||
@@ -9,3 +9,3 @@ * | ||
| * | ||
| * Date: 2015-02-12T00:04:43Z | ||
| * Date: 2015-02-19T01:33:11Z | ||
| */ | ||
@@ -12,0 +12,0 @@ /** |
@@ -1,3 +0,3 @@ | ||
| /*! OOjs UI v0.7.0 | http://oojs.mit-license.org */ | ||
| /*! OOjs UI v0.8.0 | http://oojs.mit-license.org */ | ||
| OO.ui.ApexTheme=function(){OO.ui.ApexTheme["super"].call(this)},OO.inheritClass(OO.ui.ApexTheme,OO.ui.Theme),OO.ui.theme=new OO.ui.ApexTheme; | ||
| //# sourceMappingURL=oojs-ui-apex.min.js.map |
| /*! | ||
| * OOjs UI v0.7.0 | ||
| * OOjs UI v0.8.0 | ||
| * https://www.mediawiki.org/wiki/OOjs_UI | ||
@@ -9,3 +9,3 @@ * | ||
| * | ||
| * Date: 2015-02-12T00:04:43Z | ||
| * Date: 2015-02-19T01:33:11Z | ||
| */ | ||
@@ -45,3 +45,3 @@ /** | ||
| if ( element.supports( [ 'isFramed', 'isDisabled', 'hasFlag' ] ) ) { | ||
| if ( !element.isDisabled() && element.isFramed() && element.hasFlag( 'primary' ) ) { | ||
| if ( element.isFramed() && ( element.isDisabled() || element.hasFlag( 'primary' ) ) ) { | ||
| variants.invert = true; | ||
@@ -48,0 +48,0 @@ } else { |
@@ -1,3 +0,3 @@ | ||
| /*! OOjs UI v0.7.0 | http://oojs.mit-license.org */ | ||
| OO.ui.MediaWikiTheme=function(){OO.ui.MediaWikiTheme["super"].call(this)},OO.inheritClass(OO.ui.MediaWikiTheme,OO.ui.Theme),OO.ui.MediaWikiTheme.prototype.getElementClasses=function(a){var b,c={invert:!1,progressive:!1,constructive:!1,destructive:!1},d=OO.ui.MediaWikiTheme["super"].prototype.getElementClasses.call(this,a);a.supports(["isFramed","isDisabled","hasFlag"])&&(!a.isDisabled()&&a.isFramed()&&a.hasFlag("primary")?c.invert=!0:(c.progressive=a.hasFlag("progressive"),c.constructive=a.hasFlag("constructive"),c.destructive=a.hasFlag("destructive")));for(b in c)d[c[b]?"on":"off"].push("oo-ui-image-"+b);return d},OO.ui.theme=new OO.ui.MediaWikiTheme; | ||
| /*! OOjs UI v0.8.0 | http://oojs.mit-license.org */ | ||
| OO.ui.MediaWikiTheme=function(){OO.ui.MediaWikiTheme["super"].call(this)},OO.inheritClass(OO.ui.MediaWikiTheme,OO.ui.Theme),OO.ui.MediaWikiTheme.prototype.getElementClasses=function(a){var b,c={invert:!1,progressive:!1,constructive:!1,destructive:!1},d=OO.ui.MediaWikiTheme["super"].prototype.getElementClasses.call(this,a);a.supports(["isFramed","isDisabled","hasFlag"])&&(a.isFramed()&&(a.isDisabled()||a.hasFlag("primary"))?c.invert=!0:(c.progressive=a.hasFlag("progressive"),c.constructive=a.hasFlag("constructive"),c.destructive=a.hasFlag("destructive")));for(b in c)d[c[b]?"on":"off"].push("oo-ui-image-"+b);return d},OO.ui.theme=new OO.ui.MediaWikiTheme; | ||
| //# sourceMappingURL=oojs-ui-mediawiki.min.js.map |
@@ -30,4 +30,5 @@ /*! | ||
| lessFiles = { | ||
| default: {}, | ||
| svg: {} | ||
| raster: {}, | ||
| vector: {}, | ||
| mixed: {} | ||
| }, | ||
@@ -49,5 +50,3 @@ originalLessFiles = {}, | ||
| for ( target in lessFiles ) { | ||
| distFile = target === 'default' ? | ||
| 'dist/' + module + '.css' : | ||
| 'dist/' + module + '.' + target + '.css'; | ||
| distFile = 'dist/' + module + ( target !== 'mixed' ? '.' + target : '' ) + '.css'; | ||
@@ -143,3 +142,3 @@ originalLessFiles[ distFile ] = styleTargets[ module ]; | ||
| less: { | ||
| distDefault: { | ||
| distRaster: { | ||
| options: { | ||
@@ -149,8 +148,9 @@ ieCompat: true, | ||
| modifyVars: { | ||
| 'oo-ui-distribution': 'raster', | ||
| 'oo-ui-default-image-ext': 'png' | ||
| } | ||
| }, | ||
| files: lessFiles.default | ||
| files: lessFiles.raster | ||
| }, | ||
| distSvg: { | ||
| distVector: { | ||
| options: { | ||
@@ -160,6 +160,18 @@ ieCompat: false, | ||
| modifyVars: { | ||
| 'oo-ui-distribution': 'vector', | ||
| 'oo-ui-default-image-ext': 'svg' | ||
| } | ||
| }, | ||
| files: lessFiles.svg | ||
| files: lessFiles.vector | ||
| }, | ||
| distMixed: { | ||
| options: { | ||
| ieCompat: false, | ||
| report: 'gzip', | ||
| modifyVars: { | ||
| 'oo-ui-distribution': 'mixed', | ||
| 'oo-ui-default-image-ext': 'png' | ||
| } | ||
| }, | ||
| files: lessFiles.mixed | ||
| } | ||
@@ -357,3 +369,3 @@ }, | ||
| 'concat:js', | ||
| 'copy:lessTemp', 'colorizeSvg', 'less:distSvg', 'copy:svg', | ||
| 'copy:lessTemp', 'colorizeSvg', 'less:distVector', 'copy:svg', | ||
| 'copy:imagesApex', 'copy:imagesMediaWiki', | ||
@@ -360,0 +372,0 @@ 'build-i18n' |
| # OOjs UI Release History | ||
| ## v0.8.0 / 2015-02-18 | ||
| * [BREAKING CHANGE] Make default distribution provide SVG with PNG fallback (Bartosz Dziewoński) | ||
| * DEPRECATION: TextInputWidget: Deprecate 'icon' and 'indicator' events (Bartosz Dziewoński) | ||
| * ButtonElement: add protected to event handlers (Kirsten Menger-Anderson) | ||
| * docs: Make @example documentation tag work (Roan Kattouw) | ||
| * TextInputWidget: Hide mixin components when unused (Ed Sanders) | ||
| * DropdownWidget: Simplify redundant code (Bartosz Dziewoński) | ||
| * Update PHP widgets for accessibility-related changes in JS widgets (Bartosz Dziewoński) | ||
| * TabIndexedElement: Allow tabIndex property to be null (C. Scott Ananian) | ||
| * ButtonElement: Add description (Kirsten Menger-Anderson) | ||
| * Add missing ButtonInputWidget.less and corresponding mixin (Bartosz Dziewoński) | ||
| * Various fixes to the PHP implementation (C. Scott Ananian) | ||
| * Use Array.isArray instead of $.isArray (C. Scott Ananian) | ||
| * TextInputWidget: Use margins for moving the label (Ed Sanders) | ||
| * DraggableGroupElement: Add description (Kirsten Menger-Anderson) | ||
| * demo: Add horizontal alignment test (Bartosz Dziewoński) | ||
| * build: Pass RuboCop, customize settings (Bartosz Dziewoński) | ||
| * Widget: Add description (Kirsten Menger-Anderson) | ||
| * ButtonInputWidget: Add description and example (Kirsten Menger-Anderson) | ||
| * Dialog: Add description and example (Kirsten Menger-Anderson) | ||
| * DraggableElement: Add description (Kirsten Menger-Anderson) | ||
| * docparser: Add support for 'protected' methods (Bartosz Dziewoński) | ||
| * testsuitegenerator: Only test every pair of config options rather than every triple (Bartosz Dziewoński) | ||
| * TextInputWidget: Don't add label position classes when there's no label (Bartosz Dziewoński) | ||
| * Update JS/PHP comparison test suite (Bartosz Dziewoński) | ||
| * tests: Fix the check for properties (Bartosz Dziewoński) | ||
| * TextInputWidget: Add missing LabelElement mixin documentation (Ed Sanders) | ||
| * Follow-up c762da42: fix ProcessDialog error handling (Roan Kattouw) | ||
| * MediaWiki Theme: Add focus state for frameless button (Prateek Saxena) | ||
| * TextInputWidget: Allow maxLength of 0 in JS (matching PHP) (Bartosz Dziewoński) | ||
| * TextInputWidget: Only put $label in the DOM if needed (Bartosz Dziewoński) | ||
| * MediaWiki Theme: Use white icons for disabled buttons (Bartosz Dziewoński) | ||
| * Follow-up 6a6bb90ab: Update CSS file path in eg-iframe.html (Roan Kattouw) | ||
| * Element: Add description (Kirsten Menger-Anderson) | ||
| * PHP: Remove redundant documentation for getInputElement() (Bartosz Dziewoński) | ||
| * Some documentation tweaks (Bartosz Dziewoński) | ||
| * FieldLayout: Add description (Kirsten Menger-Anderson) | ||
| * FieldLayout: Clean up and remove lies (Bartosz Dziewoński) | ||
| * FlaggedElement: Add description (Kirsten Menger-Anderson) | ||
| * PHP demo: Correct path to CSS files (Bartosz Dziewoński) | ||
| * MediaWikiTheme: Resynchronize PHP with JS (Bartosz Dziewoński) | ||
| * ButtonWidget: Rename nofollow config option to noFollow (C. Scott Ananian) | ||
| * GroupElement: Add description (Kirsten Menger-Anderson) | ||
| * IconElement: Add description (Kirsten Menger-Anderson) | ||
| * IconWidget: Add description and example (Kirsten Menger-Anderson) | ||
| * IndicatorElement: Add description (Kirsten Menger-Anderson) | ||
| * InputWidget: Add description (Kirsten Menger-Anderson) | ||
| * SelectWidget: Add description (Kirsten Menger-Anderson) | ||
| * MediaWiki Theme: Fix border width for frameless buttons' focus state (Prateek Saxena) | ||
| * Window: Add description (Kirsten Menger-Anderson) | ||
| * WindowManager: Add description (Kirsten Menger-Anderson) | ||
| * ButtonGroupWidget: Add description and example (Kirsten Menger-Anderson) | ||
| * DropdownWidget: Add @private to private methods (Kirsten Menger-Anderson) | ||
| * Refactor keyboard accessibility of SelectWidgets (Bartosz Dziewoński) | ||
| * ActionSet: Add description and example (Kirsten Menger-Anderson) | ||
| * ActionSet: Add @private to onActionChange method (Kirsten Menger-Anderson) | ||
| * ActionWidget: Add description (Kirsten Menger-Anderson) | ||
| * ActionSet: Add description for specialFlags property (Kirsten Menger-Anderson) | ||
| * DropdownWidget: Add description and example (Kirsten Menger-Anderson) | ||
| * ButtonWidget: Add example and link (Kirsten Menger-Anderson) | ||
| * IconElement: Add description and fix display of static properties (Kirsten Menger-Anderson) | ||
| ## v0.7.0 / 2015-02-11 | ||
@@ -4,0 +69,0 @@ * [BREAKING CHANGE] Remove window isolation (Trevor Parscal) |
@@ -6,2 +6,3 @@ { | ||
| "--categories": "./jsduck.categories.json", | ||
| "--eg-iframe": "./eg-iframe.html", | ||
| "--warnings-exit-nonzero": true, | ||
@@ -8,0 +9,0 @@ "--builtin-classes": true, |
| { | ||
| "name": "oojs-ui", | ||
| "version": "0.7.0", | ||
| "version": "0.8.0", | ||
| "description": "User interface classes built on the OOjs framework.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
| /** | ||
| * List of actions. | ||
| * ActionSets manage the behavior of the {@link OO.ui.ActionWidget Action widgets} that comprise them. | ||
| * Actions can be made available for specific contexts (modes) and circumstances | ||
| * (abilities). Please see the [OOjs UI documentation on MediaWiki][1] for more information. | ||
| * | ||
| * @example | ||
| * // Example: An action set used in a process dialog | ||
| * function ProcessDialog( config ) { | ||
| * ProcessDialog.super.call( this, config ); | ||
| * } | ||
| * OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); | ||
| * ProcessDialog.static.title = 'An action set in a process dialog'; | ||
| * // An action set that uses modes ('edit' and 'help' mode, in this example). | ||
| * ProcessDialog.static.actions = [ | ||
| * { action: 'continue', modes: 'edit', label: 'Continue', flags: [ 'primary', 'constructive' ] }, | ||
| * { action: 'help', modes: 'edit', label: 'Help' }, | ||
| * { modes: 'edit', label: 'Cancel', flags: 'safe' }, | ||
| * { action: 'back', modes: 'help', label: 'Back', flags: 'safe' } | ||
| * ]; | ||
| * | ||
| * ProcessDialog.prototype.initialize = function () { | ||
| * ProcessDialog.super.prototype.initialize.apply( this, arguments ); | ||
| * this.panel1 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); | ||
| * this.panel1.$element.append( '<p>This dialog uses an action set (continue, help, cancel, back) configured with modes. This is edit mode. Click \'help\' to see help mode. </p>' ); | ||
| * this.panel2 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); | ||
| * this.panel2.$element.append( '<p>This is help mode. Only the \'back\' action widget is configured to be visible here. Click \'back\' to return to \'edit\' mode</p>' ); | ||
| * this.stackLayout= new OO.ui.StackLayout( { | ||
| * items: [ this.panel1, this.panel2 ] | ||
| * }); | ||
| * this.$body.append( this.stackLayout.$element ); | ||
| * }; | ||
| * ProcessDialog.prototype.getSetupProcess = function ( data ) { | ||
| * return ProcessDialog.super.prototype.getSetupProcess.call( this, data ) | ||
| * .next( function () { | ||
| * this.actions.setMode('edit'); | ||
| * }, this ); | ||
| * }; | ||
| * ProcessDialog.prototype.getActionProcess = function ( action ) { | ||
| * if ( action === 'help' ) { | ||
| * this.actions.setMode( 'help' ); | ||
| * this.stackLayout.setItem( this.panel2 ); | ||
| * } else if ( action === 'back' ) { | ||
| * this.actions.setMode( 'edit' ); | ||
| * this.stackLayout.setItem( this.panel1 ); | ||
| * } else if ( action === 'continue' ) { | ||
| * var dialog = this; | ||
| * return new OO.ui.Process( function () { | ||
| * dialog.close(); | ||
| * } ); | ||
| * } | ||
| * return ProcessDialog.super.prototype.getActionProcess.call( this, action ); | ||
| * }; | ||
| * ProcessDialog.prototype.getBodyHeight = function () { | ||
| * return this.panel1.$element.outerHeight( true ); | ||
| * }; | ||
| * var windowManager = new OO.ui.WindowManager(); | ||
| * $( 'body' ).append( windowManager.$element ); | ||
| * var processDialog = new ProcessDialog({ | ||
| * size: 'medium'}); | ||
| * windowManager.addWindows( [ processDialog ] ); | ||
| * windowManager.openWindow( processDialog ); | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs#Action_sets | ||
| * | ||
| * @abstract | ||
@@ -40,4 +101,8 @@ * @class | ||
| /** | ||
| * Symbolic name of dialog. | ||
| * Symbolic name of the flags used to identify special actions. Special actions are displayed in the | ||
| * header of a {@link OO.ui.ProcessDialog process dialog}. | ||
| * See the [OOjs UI documentation on MediaWiki][2] for more information and examples. | ||
| * | ||
| * [2]:https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs | ||
| * | ||
| * @abstract | ||
@@ -81,2 +146,3 @@ * @static | ||
| * | ||
| * @private | ||
| * @fires change | ||
@@ -83,0 +149,0 @@ */ |
| /** | ||
| * Base class for all dialogs. | ||
| * The Dialog class serves as the base class for the other types of dialogs. | ||
| * Unless extended to include controls, the rendered dialog box is a simple window | ||
| * that users can close by hitting the ‘Esc’ key. Dialog windows are used with OO.ui.WindowManager, | ||
| * which opens, closes, and controls the presentation of the window. See the | ||
| * [OOjs UI documentation on MediaWiki] [1] for more information. | ||
| * | ||
| * Logic: | ||
| * - Manage the window (open and close, etc.). | ||
| * - Store the internal name and display title. | ||
| * - A stack to track one or more pending actions. | ||
| * - Manage a set of actions that can be performed. | ||
| * - Configure and create action widgets. | ||
| * @example | ||
| * // A simple dialog window. | ||
| * function MyDialog( config ) { | ||
| * MyDialog.super.call( this, config ); | ||
| * } | ||
| * OO.inheritClass( MyDialog, OO.ui.Dialog ); | ||
| * MyDialog.prototype.initialize = function () { | ||
| * MyDialog.super.prototype.initialize.call( this ); | ||
| * this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); | ||
| * this.content.$element.append( '<p>A simple dialog window. Press \'Esc\' to close.</p>' ); | ||
| * this.$body.append( this.content.$element ); | ||
| * }; | ||
| * MyDialog.prototype.getBodyHeight = function () { | ||
| * return this.content.$element.outerHeight( true ); | ||
| * }; | ||
| * var myDialog = new MyDialog( { | ||
| * size: 'medium' | ||
| * } ); | ||
| * // Create and append a window manager, which opens and closes the window. | ||
| * var windowManager = new OO.ui.WindowManager(); | ||
| * $( 'body' ).append( windowManager.$element ); | ||
| * windowManager.addWindows( [ myDialog ] ); | ||
| * // Open the window! | ||
| * windowManager.openWindow( myDialog ); | ||
| * | ||
| * User interface: | ||
| * - Close the dialog with Escape key. | ||
| * - Visually lock the dialog while an action is in | ||
| * progress (aka "pending"). | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Dialogs | ||
| * | ||
| * Subclass responsibilities: | ||
| * - Display the title somewhere. | ||
| * - Add content to the dialog. | ||
| * - Provide a UI to close the dialog. | ||
| * - Display the action widgets somewhere. | ||
| * | ||
| * @abstract | ||
@@ -23,0 +36,0 @@ * @class |
@@ -106,3 +106,3 @@ /** | ||
| this.$errors | ||
| .addClass( 'oo-ui-processDialog-errors' ) | ||
| .addClass( 'oo-ui-processDialog-errors oo-ui-element-hidden' ) | ||
| .append( this.$errorsTitle, this.dismissButton.$element, this.retryButton.$element ); | ||
@@ -209,3 +209,3 @@ this.$content | ||
| this.$errorsTitle.after( this.$errorItems ); | ||
| this.$errors.removeClass( 'oo-ui-widget-hidden' ).scrollTop( 0 ); | ||
| this.$errors.removeClass( 'oo-ui-element-hidden' ).scrollTop( 0 ); | ||
| }; | ||
@@ -217,5 +217,5 @@ | ||
| OO.ui.ProcessDialog.prototype.hideErrors = function () { | ||
| this.$errors.addClass( 'oo-ui-widget-hidden' ); | ||
| this.$errors.addClass( 'oo-ui-element-hidden' ); | ||
| this.$errorItems.remove(); | ||
| this.$errorItems = null; | ||
| }; |
| /** | ||
| * DOM element abstraction. | ||
| * Each Element represents a rendering in the DOM—a button or an icon, for example, or anything | ||
| * that is visible to a user. Unlike {@link OO.ui.Widget widgets}, plain elements usually do not have events | ||
| * connected to them and can't be interacted with. | ||
| * | ||
@@ -28,3 +30,3 @@ * @abstract | ||
| // Initialization | ||
| if ( $.isArray( config.classes ) ) { | ||
| if ( Array.isArray( config.classes ) ) { | ||
| this.$element.addClass( config.classes.join( ' ' ) ); | ||
@@ -491,3 +493,3 @@ } | ||
| methods = $.isArray( methods ) ? methods : [ methods ]; | ||
| methods = Array.isArray( methods ) ? methods : [ methods ]; | ||
| for ( i = 0, len = methods.length; i < len; i++ ) { | ||
@@ -494,0 +496,0 @@ if ( $.isFunction( this[ methods[ i ] ] ) ) { |
| /** | ||
| * Element with a button. | ||
| * ButtonElement is often mixed into other classes to generate a button, which is a clickable | ||
| * interface element that can be configured with access keys for accessibility. | ||
| * See the [OOjs UI documentation on MediaWiki] [1] for examples. | ||
| * | ||
| * Buttons are used for controls which can be clicked. They can be configured to use tab indexing | ||
| * and access keys for accessibility purposes. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#Buttons | ||
| * @abstract | ||
@@ -96,2 +96,3 @@ * @class | ||
| * | ||
| * @protected | ||
| * @param {jQuery.Event} e Mouse down event | ||
@@ -116,2 +117,3 @@ */ | ||
| * | ||
| * @protected | ||
| * @param {jQuery.Event} e Mouse up event | ||
@@ -131,2 +133,3 @@ */ | ||
| * | ||
| * @protected | ||
| * @param {jQuery.Event} e Mouse click event | ||
@@ -145,2 +148,3 @@ * @fires click | ||
| * | ||
| * @protected | ||
| * @param {jQuery.Event} e Key down event | ||
@@ -161,2 +165,3 @@ */ | ||
| * | ||
| * @protected | ||
| * @param {jQuery.Event} e Key up event | ||
@@ -176,2 +181,3 @@ */ | ||
| * | ||
| * @protected | ||
| * @param {jQuery.Event} e Key press event | ||
@@ -178,0 +184,0 @@ * @fires click |
| /** | ||
| * A mixin for an element that can be dragged and dropped. | ||
| * Use in conjunction with DragGroupWidget | ||
| * DraggableElement is a mixin class used to create elements that can be clicked | ||
| * and dragged by a mouse to a new position within a group. This class must be used | ||
| * in conjunction with OO.ui.DraggableGroupElement, which provides a container for | ||
| * the draggable elements. | ||
| * | ||
@@ -5,0 +7,0 @@ * @abstract |
| /** | ||
| * Element containing a sequence of child elements that can be dragged | ||
| * and dropped. | ||
| * DraggableGroupElement is a mixin class used to create a group element to | ||
| * contain draggable elements, which are items that can be clicked and dragged by a mouse. | ||
| * The class is used with OO.ui.DraggableElement. | ||
| * | ||
@@ -44,3 +45,3 @@ * @abstract | ||
| // Initialize | ||
| if ( $.isArray( config.items ) ) { | ||
| if ( Array.isArray( config.items ) ) { | ||
| this.addItems( config.items ); | ||
@@ -47,0 +48,0 @@ } |
| /** | ||
| * Element with named flags that can be added, removed, listed and checked. | ||
| * The FlaggedElement class is an attribute mixin, meaning that it is used to add | ||
| * additional functionality to an element created by another class. The class provides | ||
| * a ‘flags’ property assigned the name (or an array of names) of styling flags, | ||
| * which are used to customize the look and feel of a widget to better describe its | ||
| * importance and functionality. | ||
| * | ||
| * A flag, when set, adds a CSS class on the `$element` by combining `oo-ui-flaggedElement-` with | ||
| * the flag name. Flags are primarily useful for styling. | ||
| * The library currently contains the following styling flags for general use: | ||
| * | ||
| * - **progressive**: Progressive styling is applied to convey that the widget will move the user forward in a process. | ||
| * - **destructive**: Destructive styling is applied to convey that the widget will remove something. | ||
| * - **constructive**: Constructive styling is applied to convey that the widget will create something. | ||
| * | ||
| * {@link OO.ui.ActionWidget ActionWidgets}, which are a special kind of button that execute an action, use these flags: **primary** and **safe**. | ||
| * Please see the [OOjs UI documentation on MediaWiki] [1] for more information. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Elements/Flagged | ||
| * | ||
| * @abstract | ||
@@ -128,3 +140,3 @@ * @class | ||
| } | ||
| } else if ( $.isArray( flags ) ) { | ||
| } else if ( Array.isArray( flags ) ) { | ||
| for ( i = 0, len = flags.length; i < len; i++ ) { | ||
@@ -131,0 +143,0 @@ flag = flags[ i ]; |
| /** | ||
| * Element containing a sequence of child elements. | ||
| * Any OOjs UI widget that contains other widgets (such as {@link OO.ui.ButtonWidget buttons} or | ||
| * {@link OO.ui.OptionWidget options}) mixes in GroupElement. Adding, removing, and clearing | ||
| * items from the group is done through the interface the class provides. | ||
| * For more information, please see the [OOjs UI documentation on MediaWiki] [1]. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Elements/Groups | ||
| * | ||
| * @abstract | ||
@@ -5,0 +10,0 @@ * @class |
| /** | ||
| * Element containing an icon. | ||
| * IconElement is often mixed into other classes to generate an icon. | ||
| * Icons are graphics, about the size of normal text. They are used to aid the user | ||
| * in locating a control or to convey information in a space-efficient way. See the | ||
| * [OOjs UI documentation on MediaWiki] [1] for a list of icons | ||
| * included in the library. | ||
| * | ||
| * Icons are graphics, about the size of normal text. They can be used to aid the user in locating | ||
| * a control or convey information in a more space efficient way. Icons should rarely be used | ||
| * without labels; such as in a toolbar where space is at a premium or within a context where the | ||
| * meaning is very clear to the user. | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Icons | ||
| * | ||
@@ -42,17 +43,15 @@ * @abstract | ||
| /** | ||
| * Icon. | ||
| * The symbolic name of the icon (e.g., ‘remove’ or ‘menu’), or a map of symbolic names. A map is used | ||
| * for i18n purposes and contains a `default` icon name and additional names keyed by | ||
| * language code. The `default` name is used when no icon is keyed by the user's language. | ||
| * | ||
| * Value should be the unique portion of an icon CSS class name, such as 'up' for 'oo-ui-icon-up'. | ||
| * Example of an i18n map: | ||
| * | ||
| * For i18n purposes, this property can be an object containing a `default` icon name property and | ||
| * additional icon names keyed by language code. | ||
| * | ||
| * Example of i18n icon definition: | ||
| * { default: 'bold-a', en: 'bold-b', de: 'bold-f' } | ||
| * | ||
| * Note: the static property will be overridden if the #icon configuration is used. | ||
| * | ||
| * @static | ||
| * @inheritable | ||
| * @property {Object|string} Symbolic icon name, or map of icon names keyed by language ID; | ||
| * use the 'default' key to specify the icon to be used when there is no icon in the user's | ||
| * language | ||
| * @property {Object|string} | ||
| */ | ||
@@ -62,8 +61,10 @@ OO.ui.IconElement.static.icon = null; | ||
| /** | ||
| * Icon title. | ||
| * The icon title, displayed when users move the mouse over the icon. The value can be text, a | ||
| * function that returns title text, or `null` for no title. | ||
| * | ||
| * The static property will be overridden if the #iconTitle configuration is used. | ||
| * | ||
| * @static | ||
| * @inheritable | ||
| * @property {string|Function|null} Icon title text, a function that returns text or null for no | ||
| * icon title | ||
| * @property {string|Function|null} | ||
| */ | ||
@@ -70,0 +71,0 @@ OO.ui.IconElement.static.iconTitle = null; |
| /** | ||
| * Element containing an indicator. | ||
| * IndicatorElement is often mixed into other classes to generate an indicator. | ||
| * Indicators are small graphics that are generally used in two ways: | ||
| * | ||
| * Indicators are graphics, smaller than normal text. They can be used to describe unique status or | ||
| * behavior. Indicators should only be used in exceptional cases; such as a button that opens a menu | ||
| * instead of performing an action directly, or an item in a list which has errors that need to be | ||
| * resolved. | ||
| * - To draw attention to the status of an item. For example, an indicator might be | ||
| * used to show that an item in a list has errors that need to be resolved. | ||
| * - To clarify the function of a control that acts in an exceptional way (a button | ||
| * that opens a menu instead of performing an action directly, for example). | ||
| * | ||
| * For a list of indicators included in the library, please see the | ||
| * [OOjs UI documentation on MediaWiki] [1]. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Indicators | ||
| * | ||
| * @abstract | ||
@@ -10,0 +16,0 @@ * @class |
@@ -23,2 +23,4 @@ /** | ||
| this.lookupMenu = new OO.ui.TextInputMenuSelectWidget( this, { | ||
| widget: this, | ||
| input: this, | ||
| $container: config.$container | ||
@@ -25,0 +27,0 @@ } ); |
@@ -10,8 +10,8 @@ /** | ||
| * @cfg {jQuery} [$tabIndexed] tabIndexed node, assigned to #$tabIndexed, omit to use #$element | ||
| * @cfg {number|Function} [tabIndex=0] Tab index value. Use 0 to use default ordering, use -1 to | ||
| * prevent tab focusing. (default: 0) | ||
| * @cfg {number|null} [tabIndex=0] Tab index value. Use 0 to use default ordering, use -1 to | ||
| * prevent tab focusing, use null to suppress the `tabindex` attribute. | ||
| */ | ||
| OO.ui.TabIndexedElement = function OoUiTabIndexedElement( config ) { | ||
| // Configuration initialization | ||
| config = config || {}; | ||
| config = $.extend( { tabIndex: 0 }, config ); | ||
@@ -26,3 +26,3 @@ // Properties | ||
| // Initialization | ||
| this.setTabIndex( config.tabIndex || 0 ); | ||
| this.setTabIndex( config.tabIndex ); | ||
| this.setTabIndexedElement( config.$tabIndexed || this.$element ); | ||
@@ -38,3 +38,3 @@ }; | ||
| /** | ||
| * Set the element with 'tabindex' attribute. | ||
| * Set the element with `tabindex` attribute. | ||
| * | ||
@@ -44,17 +44,12 @@ * If an element is already set, it will be cleaned up before setting up the new element. | ||
| * @param {jQuery} $tabIndexed Element to set tab index on | ||
| * @chainable | ||
| */ | ||
| OO.ui.TabIndexedElement.prototype.setTabIndexedElement = function ( $tabIndexed ) { | ||
| if ( this.$tabIndexed ) { | ||
| this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); | ||
| } | ||
| var tabIndex = this.tabIndex; | ||
| // Remove attributes from old $tabIndexed | ||
| this.setTabIndex( null ); | ||
| // Force update of new $tabIndexed | ||
| this.$tabIndexed = $tabIndexed; | ||
| if ( this.tabIndex !== null ) { | ||
| this.$tabIndexed.attr( { | ||
| // Do not index over disabled elements | ||
| tabindex: this.isDisabled() ? -1 : this.tabIndex, | ||
| // ChromeVox and NVDA do not seem to inherit this from parent elements | ||
| 'aria-disabled': this.isDisabled().toString() | ||
| } ); | ||
| } | ||
| this.tabIndex = tabIndex; | ||
| return this.updateTabIndex(); | ||
| }; | ||
@@ -65,3 +60,3 @@ | ||
| * | ||
| * @param {number|null} tabIndex Tab index value or null for no tabIndex | ||
| * @param {number|null} tabIndex Tab index value or null for no tab index | ||
| * @chainable | ||
@@ -73,15 +68,4 @@ */ | ||
| if ( this.tabIndex !== tabIndex ) { | ||
| if ( this.$tabIndexed ) { | ||
| if ( tabIndex !== null ) { | ||
| this.$tabIndexed.attr( { | ||
| // Do not index over disabled elements | ||
| tabindex: this.isDisabled() ? -1 : tabIndex, | ||
| // ChromeVox and NVDA do not seem to inherit this from parent elements | ||
| 'aria-disabled': this.isDisabled().toString() | ||
| } ); | ||
| } else { | ||
| this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); | ||
| } | ||
| } | ||
| this.tabIndex = tabIndex; | ||
| this.updateTabIndex(); | ||
| } | ||
@@ -93,21 +77,36 @@ | ||
| /** | ||
| * Handle disable events. | ||
| * Update the `tabindex` attribute, in case of changes to tab index or | ||
| * disabled state. | ||
| * | ||
| * @param {boolean} disabled Element is disabled | ||
| * @chainable | ||
| */ | ||
| OO.ui.TabIndexedElement.prototype.onDisable = function ( disabled ) { | ||
| if ( this.$tabIndexed && this.tabIndex !== null ) { | ||
| this.$tabIndexed.attr( { | ||
| OO.ui.TabIndexedElement.prototype.updateTabIndex = function () { | ||
| if ( this.$tabIndexed ) { | ||
| if ( this.tabIndex !== null ) { | ||
| // Do not index over disabled elements | ||
| tabindex: disabled ? -1 : this.tabIndex, | ||
| // ChromeVox and NVDA do not seem to inherit this from parent elements | ||
| 'aria-disabled': disabled.toString() | ||
| } ); | ||
| this.$tabIndexed.attr( { | ||
| tabindex: this.isDisabled() ? -1 : this.tabIndex, | ||
| // ChromeVox and NVDA do not seem to inherit this from parent elements | ||
| 'aria-disabled': this.isDisabled().toString() | ||
| } ); | ||
| } else { | ||
| this.$tabIndexed.removeAttr( 'tabindex aria-disabled' ); | ||
| } | ||
| } | ||
| return this; | ||
| }; | ||
| /** | ||
| * Handle disable events. | ||
| * | ||
| * @param {boolean} disabled Element is disabled | ||
| */ | ||
| OO.ui.TabIndexedElement.prototype.onDisable = function () { | ||
| this.updateTabIndex(); | ||
| }; | ||
| /** | ||
| * Get tab index value. | ||
| * | ||
| * @return {number} Tab index value | ||
| * @return {number|null} Tab index value | ||
| */ | ||
@@ -114,0 +113,0 @@ OO.ui.TabIndexedElement.prototype.getTabIndex = function () { |
@@ -18,6 +18,2 @@ /** | ||
| // Properties (must be set before parent constructor, which calls #getTagName) | ||
| this.fieldWidget = fieldWidget; | ||
| this.buttonWidget = buttonWidget; | ||
| // Parent constructor | ||
@@ -30,10 +26,10 @@ OO.ui.ActionFieldLayout.super.call( this, fieldWidget, config ); | ||
| // Properties | ||
| this.fieldWidget = fieldWidget; | ||
| this.buttonWidget = buttonWidget; | ||
| this.$button = $( '<div>' ) | ||
| .addClass( 'oo-ui-actionFieldLayout-button' ) | ||
| .append( this.buttonWidget.$element ); | ||
| this.$input = $( '<div>' ) | ||
| .addClass( 'oo-ui-actionFieldLayout-input' ) | ||
| .append( this.fieldWidget.$element ); | ||
| this.$field | ||
@@ -40,0 +36,0 @@ .addClass( 'oo-ui-actionFieldLayout' ) |
| /** | ||
| * Layout made of a field and optional label. | ||
| * FieldLayouts are used with OO.ui.FieldsetLayout. Each FieldLayout requires a field-widget, | ||
| * which is a widget that is specified by reference before any optional configuration settings. | ||
| * | ||
| * Available label alignment modes include: | ||
| * - left: Label is before the field and aligned away from it, best for when the user will be | ||
| * scanning for a specific label in a form with many fields | ||
| * - right: Label is before the field and aligned toward it, best for forms the user is very | ||
| * familiar with and will tab through field checking quickly to verify which field they are in | ||
| * - top: Label is before the field and above it, best for when the user will need to fill out all | ||
| * fields from top to bottom in a form with few fields | ||
| * - inline: Label is after the field and aligned toward it, best for small boolean fields like | ||
| * checkboxes or radio buttons | ||
| * Field layouts can be configured with help text and/or labels. Labels are aligned in one of four ways: | ||
| * | ||
| * - **left**: The label is placed before the field-widget and aligned with the left margin. | ||
| * A left-alignment is used for forms with many fields. | ||
| * - **right**: The label is placed before the field-widget and aligned to the right margin. | ||
| * A right-alignment is used for long but familiar forms which users tab through, | ||
| * verifying the current field with a quick glance at the label. | ||
| * - **top**: The label is placed above the field-widget. A top-alignment is used for brief forms | ||
| * that users fill out from top to bottom. | ||
| * - **inline**: The label is placed after the field-widget and aligned to the left. | ||
| An inline-alignment is best used with checkboxes or radio buttons. | ||
| * | ||
| * Help text is accessed via a help icon that appears in the upper right corner of the rendered field layout. | ||
| * Please see the [OOjs UI documentation on MediaWiki] [1] for examples and more information. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Layouts/Fields_and_Fieldsets | ||
| * @class | ||
@@ -30,5 +37,2 @@ * @extends OO.ui.Layout | ||
| // Properties (must be set before parent constructor, which calls #getTagName) | ||
| this.fieldWidget = fieldWidget; | ||
| // Parent constructor | ||
@@ -41,2 +45,3 @@ OO.ui.FieldLayout.super.call( this, config ); | ||
| // Properties | ||
| this.fieldWidget = fieldWidget; | ||
| this.$field = $( '<div>' ); | ||
@@ -43,0 +48,0 @@ this.$body = $( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' ); |
@@ -49,3 +49,3 @@ /** | ||
| .prepend( this.$help, this.$icon, this.$label, this.$group ); | ||
| if ( $.isArray( config.items ) ) { | ||
| if ( Array.isArray( config.items ) ) { | ||
| this.addItems( config.items ); | ||
@@ -52,0 +52,0 @@ } |
@@ -32,3 +32,3 @@ /** | ||
| } | ||
| if ( $.isArray( config.items ) ) { | ||
| if ( Array.isArray( config.items ) ) { | ||
| this.addItems( config.items ); | ||
@@ -35,0 +35,0 @@ } |
@@ -73,3 +73,3 @@ /** | ||
| } | ||
| if ( $.isArray( result ) && result.length && result[ 0 ] instanceof OO.ui.Error ) { | ||
| if ( Array.isArray( result ) && result.length && result[ 0 ] instanceof OO.ui.Error ) { | ||
| // Use rejected promise for list of errors | ||
@@ -76,0 +76,0 @@ return $.Deferred().reject( result ).promise(); |
@@ -34,3 +34,3 @@ /** | ||
| if ( element.supports( [ 'isFramed', 'isDisabled', 'hasFlag' ] ) ) { | ||
| if ( !element.isDisabled() && element.isFramed() && element.hasFlag( 'primary' ) ) { | ||
| if ( element.isFramed() && ( element.isDisabled() || element.hasFlag( 'primary' ) ) ) { | ||
| variants.invert = true; | ||
@@ -37,0 +37,0 @@ } else { |
@@ -84,3 +84,3 @@ /** | ||
| } | ||
| } else if ( $.isArray( collection ) ) { | ||
| } else if ( Array.isArray( collection ) ) { | ||
| for ( i = 0, len = collection.length; i < len; i++ ) { | ||
@@ -87,0 +87,0 @@ item = collection[ i ]; |
| /** | ||
| * User interface control. | ||
| * Widgets are compositions of one or more OOjs UI elements that users can both view | ||
| * and interact with. All widgets can be configured and modified via a standard API, | ||
| * and their state can change dynamically according to a model. | ||
| * | ||
@@ -4,0 +6,0 @@ * @abstract |
| /** | ||
| * Button widget that executes an action and is managed by an OO.ui.ActionSet. | ||
| * An ActionWidget is a {@link OO.ui.ButtonWidget button widget} that executes an action. | ||
| * Action widgets are used with OO.ui.ActionSet, which manages the behavior and availability | ||
| * of the actions. Please see the [OOjs UI documentation on MediaWiki] [1] for more information | ||
| * and examples. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Process_Dialogs#Action_sets | ||
| * | ||
| * @class | ||
@@ -5,0 +10,0 @@ * @extends OO.ui.ButtonWidget |
| /** | ||
| * Group widget for multiple related buttons. | ||
| * A ButtonGroupWidget groups related buttons and is used together with OO.ui.ButtonWidget and | ||
| * its subclasses. Each button in a group is addressed by a unique reference. Buttons can be added, | ||
| * removed, and cleared from the group. | ||
| * | ||
| * Use together with OO.ui.ButtonWidget. | ||
| * @example | ||
| * // Example: A ButtonGroupWidget with two buttons | ||
| * var button1 = new OO.ui.PopupButtonWidget( { | ||
| * label : 'Select a category', | ||
| * icon : 'menu', | ||
| * popup : { | ||
| * $content: $( '<p>List of categories...</p>' ), | ||
| * padded: true, | ||
| * align: 'left' | ||
| * } | ||
| * } ); | ||
| * var button2 = new OO.ui.ButtonWidget( { | ||
| * label : 'Add item' | ||
| * }); | ||
| * var buttonGroup = new OO.ui.ButtonGroupWidget( { | ||
| * items: [button1, button2] | ||
| * } ); | ||
| * $('body').append(buttonGroup.$element); | ||
| * | ||
@@ -26,3 +45,3 @@ * @class | ||
| this.$element.addClass( 'oo-ui-buttonGroupWidget' ); | ||
| if ( $.isArray( config.items ) ) { | ||
| if ( Array.isArray( config.items ) ) { | ||
| this.addItems( config.items ); | ||
@@ -29,0 +48,0 @@ } |
| /** | ||
| * A button that is an input widget. Intended to be used within a OO.ui.FormLayout. | ||
| * ButtonInputWidget is used to submit HTML forms and is intended to be used within | ||
| * a OO.ui.FormLayout. If you do not need the button to work with HTML forms, you probably | ||
| * want to use OO.ui.ButtonWidget instead. Button input widgets can be rendered as either an | ||
| * HTML `<button/>` (the default) or an HTML `<input/>` tags. See the | ||
| * [OOjs UI documentation on MediaWiki] [1] for more information. | ||
| * | ||
| * @example | ||
| * // A ButtonInputWidget rendered as an HTML button, the default. | ||
| * var button = new OO.ui.ButtonInputWidget( { | ||
| * label: 'Input button', | ||
| * icon: 'check', | ||
| * value: 'check' | ||
| * } ); | ||
| * $( 'body' ).append( button.$element ); | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs#Button_inputs | ||
| * | ||
| * @class | ||
@@ -5,0 +20,0 @@ * @extends OO.ui.InputWidget |
@@ -15,2 +15,5 @@ /** | ||
| OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( config ) { | ||
| // Configuration initialization | ||
| config = $.extend( { tabIndex: -1 }, config ); | ||
| // Parent constructor | ||
@@ -40,2 +43,4 @@ OO.ui.ButtonOptionWidget.super.call( this, config ); | ||
| OO.ui.ButtonOptionWidget.static.highlightable = false; | ||
| /* Methods */ | ||
@@ -42,0 +47,0 @@ |
@@ -8,2 +8,3 @@ /** | ||
| * @extends OO.ui.SelectWidget | ||
| * @mixins OO.ui.TabIndexedElement | ||
| * | ||
@@ -17,2 +18,11 @@ * @constructor | ||
| // Mixin constructors | ||
| OO.ui.TabIndexedElement.call( this, config ); | ||
| // Events | ||
| this.$element.on( { | ||
| focus: this.bindKeyDownListener.bind( this ), | ||
| blur: this.unbindKeyDownListener.bind( this ) | ||
| } ); | ||
| // Initialization | ||
@@ -25,1 +35,2 @@ this.$element.addClass( 'oo-ui-buttonSelectWidget' ); | ||
| OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget ); | ||
| OO.mixinClass( OO.ui.ButtonSelectWidget, OO.ui.TabIndexedElement ); |
| /** | ||
| * ButtonWidget is a generic widget for buttons. A wide variety of looks, | ||
| * feels, and functionality can be customized via the class’s configuration options | ||
| * and methods. Please see the OOjs UI documentation on MediaWiki for more information | ||
| * and methods. Please see the [OOjs UI documentation on MediaWiki] [1] for more information | ||
| * and examples. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches | ||
| * | ||
| * @example | ||
| * // A button widget | ||
| * var button = new OO.ui.ButtonWidget( { | ||
| * label : 'Button with Icon', | ||
| * icon : 'remove', | ||
| * iconTitle : 'Remove' | ||
| * } ); | ||
| * $( 'body' ).append( button.$element ); | ||
| * | ||
| * NOTE: HTML form buttons should use the OO.ui.ButtonInputWidget class. | ||
@@ -21,9 +32,10 @@ * | ||
| * @param {Object} [config] Configuration options | ||
| * @cfg {string} [href] Hyperlink to visit when clicked | ||
| * @cfg {string} [target] Target to open hyperlink in | ||
| * @cfg {boolean} [nofollow] Search engine traversal hint (default: true) | ||
| * @cfg {string} [href] Hyperlink to visit when the button is clicked. | ||
| * @cfg {string} [target] The frame or window in which to open the hyperlink. | ||
| * @cfg {boolean} [noFollow] Search engine traversal hint (default: true) | ||
| */ | ||
| OO.ui.ButtonWidget = function OoUiButtonWidget( config ) { | ||
| // Configuration initialization | ||
| config = config || {}; | ||
| // FIXME: The `nofollow` alias is deprecated and will be removed (T89767) | ||
| config = $.extend( { noFollow: config && config.nofollow }, config ); | ||
@@ -45,3 +57,3 @@ // Parent constructor | ||
| this.target = null; | ||
| this.nofollow = false; | ||
| this.noFollow = false; | ||
| this.isHyperlink = false; | ||
@@ -56,3 +68,3 @@ | ||
| this.setTarget( config.target ); | ||
| this.setNoFollow( config.nofollow ); | ||
| this.setNoFollow( config.noFollow ); | ||
| }; | ||
@@ -143,3 +155,3 @@ | ||
| OO.ui.ButtonWidget.prototype.getNoFollow = function () { | ||
| return this.nofollow; | ||
| return this.noFollow; | ||
| }; | ||
@@ -192,10 +204,10 @@ | ||
| * | ||
| * @param {boolean} nofollow True if search engines should avoid traversing this hyperlink | ||
| * @param {boolean} noFollow True if search engines should avoid traversing this hyperlink | ||
| */ | ||
| OO.ui.ButtonWidget.prototype.setNoFollow = function ( nofollow ) { | ||
| nofollow = typeof nofollow === 'boolean' ? nofollow : true; | ||
| OO.ui.ButtonWidget.prototype.setNoFollow = function ( noFollow ) { | ||
| noFollow = typeof noFollow === 'boolean' ? noFollow : true; | ||
| if ( nofollow !== this.nofollow ) { | ||
| this.nofollow = nofollow; | ||
| if ( nofollow ) { | ||
| if ( noFollow !== this.noFollow ) { | ||
| this.noFollow = noFollow; | ||
| if ( noFollow ) { | ||
| this.$button.attr( 'rel', 'nofollow' ); | ||
@@ -202,0 +214,0 @@ } else { |
@@ -91,2 +91,5 @@ /** | ||
| this.menu.selectItem( match ); | ||
| if ( this.menu.getHighlightedItem() ) { | ||
| this.menu.highlightItem( match ); | ||
| } | ||
@@ -150,2 +153,5 @@ if ( !this.isDisabled() ) { | ||
| this.menu.selectItem( match ); | ||
| if ( this.menu.getHighlightedItem() ) { | ||
| this.menu.highlightItem( match ); | ||
| } | ||
| this.$element.toggleClass( 'oo-ui-comboBoxWidget-empty', this.menu.isEmpty() ); | ||
@@ -152,0 +158,0 @@ }; |
| /** | ||
| * Dropdown menu of options. | ||
| * DropdownWidgets are not menus themselves, rather they contain a menu of options created with | ||
| * OO.ui.MenuOptionWidget. The DropdownWidget takes care of opening and displaying the menu so that | ||
| * users can interact with it. | ||
| * | ||
| * Dropdown menus provide a control for accessing a menu and compose a menu within the widget, which | ||
| * can be accessed using the #getMenu method. | ||
| * @example | ||
| * // Example: A DropdownWidget with a menu that contains three options | ||
| * var dropDown=new OO.ui.DropdownWidget( { | ||
| * label: 'Dropdown menu: Select a menu option', | ||
| * 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' | ||
| * } ) | ||
| * ] | ||
| * } | ||
| * } ); | ||
| * | ||
| * Use with OO.ui.MenuOptionWidget. | ||
| * $('body').append(dropDown.$element); | ||
| * | ||
| * For more information, please see the [OOjs UI documentation on MediaWiki] [1]. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options | ||
| * | ||
| * @class | ||
@@ -80,2 +105,3 @@ * @extends OO.ui.Widget | ||
| * | ||
| * @private | ||
| * @param {OO.ui.MenuOptionWidget} item Selected menu item | ||
@@ -103,2 +129,3 @@ */ | ||
| * | ||
| * @private | ||
| * @param {jQuery.Event} e Mouse click event | ||
@@ -108,7 +135,3 @@ */ | ||
| if ( !this.isDisabled() && e.which === 1 ) { | ||
| if ( this.menu.isVisible() ) { | ||
| this.menu.toggle( false ); | ||
| } else { | ||
| this.menu.toggle( true ); | ||
| } | ||
| this.menu.toggle(); | ||
| } | ||
@@ -121,2 +144,3 @@ return false; | ||
| * | ||
| * @private | ||
| * @param {jQuery.Event} e Key press event | ||
@@ -126,9 +150,5 @@ */ | ||
| if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) { | ||
| if ( this.menu.isVisible() ) { | ||
| this.menu.toggle( false ); | ||
| } else { | ||
| this.menu.toggle( true ); | ||
| } | ||
| this.menu.toggle(); | ||
| } | ||
| return false; | ||
| }; |
| /** | ||
| * Icon widget. | ||
| * IconWidget is a generic widget for {@link OO.ui.IconElement icons}. In general, IconWidgets should be used with OO.ui.LabelWidget, | ||
| * which creates a label that identifies the icon’s function. See the [OOjs UI documentation on MediaWiki] [1] | ||
| * for a list of icons included in the library. | ||
| * | ||
| * See OO.ui.IconElement for more information. | ||
| * @example | ||
| * // An icon widget with a label | ||
| * var myIcon = new OO.ui.IconWidget({ | ||
| * icon: 'help', | ||
| * iconTitle: 'Help' | ||
| * }); | ||
| * // Create a label. | ||
| * var iconLabel = new OO.ui.LabelWidget({ | ||
| * label: 'Help' | ||
| * }); | ||
| * $('body').append(myIcon.$element, iconLabel.$element); | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Icons | ||
| * | ||
| * @class | ||
@@ -7,0 +21,0 @@ * @extends OO.ui.Widget |
| /** | ||
| * Base class for input widgets. | ||
| * InputWidget is the base class for all input widgets, which | ||
| * include {@link OO.ui.TextInputWidget text inputs}, {@link OO.ui.CheckboxInputWidget checkbox inputs}, | ||
| * {@link OO.ui.RadioInputWidget radio inputs}, and {@link OO.ui.ButtonInputWidget button inputs}. | ||
| * See the [OOjs UI documentation on MediaWiki] [1] for more information and examples. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs | ||
| * | ||
| * @abstract | ||
@@ -5,0 +10,0 @@ * @class |
@@ -15,3 +15,3 @@ /** | ||
| * @param {Object} [config] Configuration options | ||
| * @cfg {OO.ui.InputWidget} [input] Input to bind keyboard handlers to | ||
| * @cfg {OO.ui.TextInputWidget} [input] Input to bind keyboard handlers to | ||
| * @cfg {OO.ui.Widget} [widget] Widget to bind mouse handlers to | ||
@@ -35,3 +35,2 @@ * @cfg {boolean} [autoHide=true] Hide the menu when the mouse is pressed outside the menu | ||
| this.$widget = config.widget ? config.widget.$element : null; | ||
| this.onKeyDownHandler = this.onKeyDown.bind( this ); | ||
| this.onDocumentMouseDownHandler = this.onDocumentMouseDown.bind( this ); | ||
@@ -73,49 +72,32 @@ | ||
| /** | ||
| * Handles key down events. | ||
| * | ||
| * @param {jQuery.Event} e Key down event | ||
| * @inheritdoc | ||
| */ | ||
| OO.ui.MenuSelectWidget.prototype.onKeyDown = function ( e ) { | ||
| var nextItem, | ||
| handled = false, | ||
| highlightItem = this.getHighlightedItem(); | ||
| var currentItem = this.getHighlightedItem() || this.getSelectedItem(); | ||
| if ( !this.isDisabled() && this.isVisible() ) { | ||
| if ( !highlightItem ) { | ||
| highlightItem = this.getSelectedItem(); | ||
| } | ||
| switch ( e.keyCode ) { | ||
| case OO.ui.Keys.ENTER: | ||
| this.chooseItem( highlightItem ); | ||
| handled = true; | ||
| case OO.ui.Keys.LEFT: | ||
| case OO.ui.Keys.RIGHT: | ||
| // Do nothing if a text field is associated, arrow keys will be handled natively | ||
| if ( !this.$input ) { | ||
| OO.ui.MenuSelectWidget.super.prototype.onKeyDown.call( this, e ); | ||
| } | ||
| break; | ||
| case OO.ui.Keys.UP: | ||
| nextItem = this.getRelativeSelectableItem( highlightItem, -1 ); | ||
| handled = true; | ||
| break; | ||
| case OO.ui.Keys.DOWN: | ||
| nextItem = this.getRelativeSelectableItem( highlightItem, 1 ); | ||
| handled = true; | ||
| break; | ||
| case OO.ui.Keys.ESCAPE: | ||
| case OO.ui.Keys.TAB: | ||
| if ( highlightItem ) { | ||
| highlightItem.setHighlighted( false ); | ||
| if ( currentItem ) { | ||
| currentItem.setHighlighted( false ); | ||
| } | ||
| this.toggle( false ); | ||
| // Don't prevent tabbing away | ||
| handled = ( e.keyCode === OO.ui.Keys.ESCAPE ); | ||
| // Don't prevent tabbing away, prevent defocusing | ||
| if ( e.keyCode === OO.ui.Keys.ESCAPE ) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| } | ||
| break; | ||
| default: | ||
| OO.ui.MenuSelectWidget.super.prototype.onKeyDown.call( this, e ); | ||
| return; | ||
| } | ||
| if ( nextItem ) { | ||
| this.highlightItem( nextItem ); | ||
| nextItem.scrollElementIntoView(); | ||
| } | ||
| if ( handled ) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| return false; | ||
| } | ||
| } | ||
@@ -125,3 +107,3 @@ }; | ||
| /** | ||
| * Bind key down listener. | ||
| * @inheritdoc | ||
| */ | ||
@@ -132,4 +114,3 @@ OO.ui.MenuSelectWidget.prototype.bindKeyDownListener = function () { | ||
| } else { | ||
| // Capture menu navigation keys | ||
| this.getElementWindow().addEventListener( 'keydown', this.onKeyDownHandler, true ); | ||
| OO.ui.MenuSelectWidget.super.prototype.bindKeyDownListener.call( this ); | ||
| } | ||
@@ -139,3 +120,3 @@ }; | ||
| /** | ||
| * Unbind key down listener. | ||
| * @inheritdoc | ||
| */ | ||
@@ -146,3 +127,3 @@ OO.ui.MenuSelectWidget.prototype.unbindKeyDownListener = function () { | ||
| } else { | ||
| this.getElementWindow().removeEventListener( 'keydown', this.onKeyDownHandler, true ); | ||
| OO.ui.MenuSelectWidget.super.prototype.unbindKeyDownListener.call( this ); | ||
| } | ||
@@ -149,0 +130,0 @@ }; |
@@ -8,2 +8,3 @@ /** | ||
| * @extends OO.ui.SelectWidget | ||
| * @mixins OO.ui.TabIndexedElement | ||
| * | ||
@@ -14,8 +15,14 @@ * @constructor | ||
| OO.ui.OutlineSelectWidget = function OoUiOutlineSelectWidget( config ) { | ||
| // Configuration initialization | ||
| config = config || {}; | ||
| // Parent constructor | ||
| OO.ui.OutlineSelectWidget.super.call( this, config ); | ||
| // Mixin constructors | ||
| OO.ui.TabIndexedElement.call( this, config ); | ||
| // Events | ||
| this.$element.on( { | ||
| focus: this.bindKeyDownListener.bind( this ), | ||
| blur: this.unbindKeyDownListener.bind( this ) | ||
| } ); | ||
| // Initialization | ||
@@ -28,1 +35,2 @@ this.$element.addClass( 'oo-ui-outlineSelectWidget' ); | ||
| OO.inheritClass( OO.ui.OutlineSelectWidget, OO.ui.SelectWidget ); | ||
| OO.mixinClass( OO.ui.OutlineSelectWidget, OO.ui.TabIndexedElement ); |
@@ -17,3 +17,3 @@ /** | ||
| // Properties | ||
| this.radio = new OO.ui.RadioInputWidget( { value: config.data } ); | ||
| this.radio = new OO.ui.RadioInputWidget( { value: config.data, tabIndex: -1 } ); | ||
@@ -20,0 +20,0 @@ // Initialization |
@@ -8,2 +8,3 @@ /** | ||
| * @extends OO.ui.SelectWidget | ||
| * @mixins OO.ui.TabIndexedElement | ||
| * | ||
@@ -17,2 +18,11 @@ * @constructor | ||
| // Mixin constructors | ||
| OO.ui.TabIndexedElement.call( this, config ); | ||
| // Events | ||
| this.$element.on( { | ||
| focus: this.bindKeyDownListener.bind( this ), | ||
| blur: this.unbindKeyDownListener.bind( this ) | ||
| } ); | ||
| // Initialization | ||
@@ -25,1 +35,2 @@ this.$element.addClass( 'oo-ui-radioSelectWidget' ); | ||
| OO.inheritClass( OO.ui.RadioSelectWidget, OO.ui.SelectWidget ); | ||
| OO.mixinClass( OO.ui.RadioSelectWidget, OO.ui.TabIndexedElement ); |
| /** | ||
| * Generic selection of options. | ||
| * A SelectWidget is of a generic selection of options. The OOjs UI library contains several types of | ||
| * select widgets, including {@link OO.ui.ButtonSelectWidget button selects}, | ||
| * {@link OO.ui.RadioSelectWidget radio selects}, and {@link OO.ui.MenuSelectWidget | ||
| * menu selects}. | ||
| * | ||
| * Items can contain any rendering. Any widget that provides options, from which the user must | ||
| * choose one, should be built on this class. | ||
| * This class should be used together with OO.ui.OptionWidget. | ||
| * | ||
| * Use together with OO.ui.OptionWidget. | ||
| * For more information, please see the [OOjs UI documentation on MediaWiki][1]. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options | ||
| * | ||
| * @class | ||
@@ -32,2 +36,3 @@ * @extends OO.ui.Widget | ||
| this.onMouseMoveHandler = this.onMouseMove.bind( this ); | ||
| this.onKeyDownHandler = this.onKeyDown.bind( this ); | ||
@@ -45,3 +50,3 @@ // Events | ||
| .attr( 'role', 'listbox' ); | ||
| if ( $.isArray( config.items ) ) { | ||
| if ( Array.isArray( config.items ) ) { | ||
| this.addItems( config.items ); | ||
@@ -209,2 +214,73 @@ } | ||
| /** | ||
| * Handle key down events. | ||
| * | ||
| * @param {jQuery.Event} e Key down event | ||
| */ | ||
| OO.ui.SelectWidget.prototype.onKeyDown = function ( e ) { | ||
| var nextItem, | ||
| handled = false, | ||
| currentItem = this.getHighlightedItem() || this.getSelectedItem(); | ||
| if ( !this.isDisabled() && this.isVisible() ) { | ||
| switch ( e.keyCode ) { | ||
| case OO.ui.Keys.ENTER: | ||
| if ( currentItem && currentItem.constructor.static.highlightable ) { | ||
| // Was only highlighted, now let's select it. No-op if already selected. | ||
| this.chooseItem( currentItem ); | ||
| handled = true; | ||
| } | ||
| break; | ||
| case OO.ui.Keys.UP: | ||
| case OO.ui.Keys.LEFT: | ||
| nextItem = this.getRelativeSelectableItem( currentItem, -1 ); | ||
| handled = true; | ||
| break; | ||
| case OO.ui.Keys.DOWN: | ||
| case OO.ui.Keys.RIGHT: | ||
| nextItem = this.getRelativeSelectableItem( currentItem, 1 ); | ||
| handled = true; | ||
| break; | ||
| case OO.ui.Keys.ESCAPE: | ||
| case OO.ui.Keys.TAB: | ||
| if ( currentItem && currentItem.constructor.static.highlightable ) { | ||
| currentItem.setHighlighted( false ); | ||
| } | ||
| this.unbindKeyDownListener(); | ||
| // Don't prevent tabbing away / defocusing | ||
| handled = false; | ||
| break; | ||
| } | ||
| if ( nextItem ) { | ||
| if ( nextItem.constructor.static.highlightable ) { | ||
| this.highlightItem( nextItem ); | ||
| } else { | ||
| this.chooseItem( nextItem ); | ||
| } | ||
| nextItem.scrollElementIntoView(); | ||
| } | ||
| if ( handled ) { | ||
| // Can't just return false, because e is not always a jQuery event | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| } | ||
| } | ||
| }; | ||
| /** | ||
| * Bind key down listener. | ||
| */ | ||
| OO.ui.SelectWidget.prototype.bindKeyDownListener = function () { | ||
| this.getElementWindow().addEventListener( 'keydown', this.onKeyDownHandler, true ); | ||
| }; | ||
| /** | ||
| * Unbind key down listener. | ||
| */ | ||
| OO.ui.SelectWidget.prototype.unbindKeyDownListener = function () { | ||
| this.getElementWindow().removeEventListener( 'keydown', this.onKeyDownHandler, true ); | ||
| }; | ||
| /** | ||
| * Get the closest item to a jQuery.Event. | ||
@@ -211,0 +287,0 @@ * |
@@ -9,2 +9,3 @@ /** | ||
| * @mixins OO.ui.PendingElement | ||
| * @mixins OO.ui.LabelElement | ||
| * | ||
@@ -76,3 +77,3 @@ * @constructor | ||
| .addClass( 'oo-ui-textInputWidget' ) | ||
| .append( this.$icon, this.$indicator, this.$label ); | ||
| .append( this.$icon, this.$indicator ); | ||
| this.setReadOnly( !!config.readOnly ); | ||
@@ -82,3 +83,3 @@ if ( config.placeholder ) { | ||
| } | ||
| if ( config.maxLength ) { | ||
| if ( config.maxLength !== undefined ) { | ||
| this.$input.attr( 'maxlength', config.maxLength ); | ||
@@ -122,2 +123,4 @@ } | ||
| * | ||
| * @deprecated Fundamentally not accessible. Make the icon focusable, associate a label or tooltip, | ||
| * and handle click/keypress events on it manually. | ||
| * @event icon | ||
@@ -129,2 +132,4 @@ */ | ||
| * | ||
| * @deprecated Fundamentally not accessible. Make the indicator focusable, associate a label or | ||
| * tooltip, and handle click/keypress events on it manually. | ||
| * @event indicator | ||
@@ -375,4 +380,4 @@ */ | ||
| this.$element | ||
| .toggleClass( 'oo-ui-textInputWidget-labelPosition-after', this.label && after ) | ||
| .toggleClass( 'oo-ui-textInputWidget-labelPosition-before', this.label && !after ); | ||
| .toggleClass( 'oo-ui-textInputWidget-labelPosition-after', !!this.label && after ) | ||
| .toggleClass( 'oo-ui-textInputWidget-labelPosition-before', !!this.label && !after ); | ||
@@ -400,3 +405,6 @@ if ( this.label ) { | ||
| if ( !this.$label.text() ) { | ||
| if ( this.label ) { | ||
| this.$element.append( this.$label ); | ||
| } else { | ||
| this.$label.detach(); | ||
| return; | ||
@@ -409,5 +417,5 @@ } | ||
| this.$input.css( property, this.$label.outerWidth() ); | ||
| this.$input.css( property, this.$label.outerWidth( true ) ); | ||
| return this; | ||
| }; |
| /** | ||
| * Encapsulation of an user interface. | ||
| * A window is a container for elements that are in a child frame. They are used with | ||
| * a window manager (OO.ui.WindowManager), which is used to open and close the window and control | ||
| * its presentation. The size of a window is specified using a symbolic name (e.g., ‘small’, ‘medium’, | ||
| * ‘large’), which is interpreted by the window manager. If the requested size is not recognized, | ||
| * the window manager will choose a sensible fallback. | ||
| * | ||
| * Use together with OO.ui.WindowManager. | ||
| * The lifecycle of a window has three primary stages (opening, opened, and closing) in which | ||
| * different processes are executed: | ||
| * | ||
| * @abstract | ||
| * @class | ||
| * @extends OO.ui.Element | ||
| * @mixins OO.EventEmitter | ||
| * **opening**: The opening stage begins when the window manager's {@link OO.ui.WindowManager#openWindow | ||
| * openWindow} or the window's {@link #open open} methods are used, and the window manager begins to open | ||
| * the window. | ||
| * | ||
| * When a window is opened, the setup and ready processes are executed. Similarly, the hold and | ||
| * teardown processes are executed when the window is closed. | ||
| * | ||
| * - {@link OO.ui.WindowManager#openWindow} or {@link #open} methods are used to start opening | ||
| * - Window manager begins opening window | ||
| * - {@link #getSetupProcess} method is called and its result executed | ||
| * - {@link #getReadyProcess} method is called and its result executed | ||
| * - Window is now open | ||
| * | ||
| * - {@link OO.ui.WindowManager#closeWindow} or {@link #close} methods are used to start closing | ||
| * - Window manager begins closing window | ||
| * **opened**: The window is now open | ||
| * | ||
| * **closing**: The closing stage begins when the window manager's | ||
| * {@link OO.ui.WindowManager#closeWindow closeWindow} | ||
| * or the window's {@link #close} methods are used, and the window manager begins to close the window. | ||
| * | ||
| * - {@link #getHoldProcess} method is called and its result executed | ||
| * - {@link #getTeardownProcess} method is called and its result executed | ||
| * - Window is now closed | ||
| * - {@link #getTeardownProcess} method is called and its result executed. The window is now closed | ||
| * | ||
| * Each process (setup, ready, hold and teardown) can be extended in subclasses by overriding | ||
| * {@link #getSetupProcess}, {@link #getReadyProcess}, {@link #getHoldProcess} and | ||
| * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchronous | ||
| * processing can complete. Always assume window processes are executed asynchronously. See | ||
| * OO.ui.Process for more details about how to work with processes. Some events, as well as the | ||
| * #open and #close methods, provide promises which are resolved when the window enters a new state. | ||
| * Each of the window's processes (setup, ready, hold, and teardown) can be extended in subclasses | ||
| * by overriding the window's #getSetupProcess, #getReadyProcess, #getHoldProcess and #getTeardownProcess | ||
| * methods. Note that each {@link OO.ui.Process process} is executed in series, so asynchronous | ||
| * processing can complete. Always assume window processes are executed asynchronously. | ||
| * | ||
| * Sizing of windows is specified using symbolic names which are interpreted by the window manager. | ||
| * If the requested size is not recognized, the window manager will choose a sensible fallback. | ||
| * For more information, please see the [OOjs UI documentation on MediaWiki] [1]. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows | ||
| * | ||
| * @abstract | ||
| * @class | ||
| * @extends OO.ui.Element | ||
| * @mixins OO.EventEmitter | ||
| * | ||
| * @constructor | ||
@@ -37,0 +42,0 @@ * @param {Object} [config] Configuration options |
| /** | ||
| * Collection of windows. | ||
| * Window managers are used to open and close {@link OO.ui.Window windows} and control their presentation. | ||
| * Managed windows are mutually exclusive. If a new window is opened while a current window is opening | ||
| * or is opened, the current window will be closed and any ongoing {@link OO.ui.Process process} will be cancelled. Windows | ||
| * themselves are persistent and—rather than being torn down when closed—can be repopulated with the | ||
| * pertinent data and reused. | ||
| * | ||
| * @class | ||
| * @extends OO.ui.Element | ||
| * @mixins OO.EventEmitter | ||
| * Over the lifecycle of a window, the window manager makes available three promises: `opening`, | ||
| * `opened`, and `closing`, which represent the primary stages of the cycle: | ||
| * | ||
| * Managed windows are mutually exclusive. If a window is opened while there is a current window | ||
| * already opening or opened, the current window will be closed without data. Empty closing data | ||
| * should always result in the window being closed without causing constructive or destructive | ||
| * action. | ||
| * **Opening**: the opening stage begins when the window manager’s #openWindow or a window’s | ||
| * {@link OO.ui.Window#open open} method is used, and the window manager begins to open the window. | ||
| * | ||
| * As a window is opened and closed, it passes through several stages and the manager emits several | ||
| * corresponding events. | ||
| * - an `opening` event is emitted with an `opening` promise | ||
| * - the #getSetupDelay method is called and the returned value is used to time a pause in execution before | ||
| * the window’s {@link OO.ui.Window#getSetupProcess getSetupProcess} method is called on the | ||
| * window and its result executed | ||
| * - a `setup` progress notification is emitted from the `opening` promise | ||
| * - the #getReadyDelay method is called the returned value is used to time a pause in execution before | ||
| * the window’s {@link OO.ui.Window#getReadyProcess getReadyProcess} method is called on the | ||
| * window and its result executed | ||
| * - a `ready` progress notification is emitted from the `opening` promise | ||
| * - the `opening` promise is resolved with an `opened` promise | ||
| * | ||
| * - {@link #openWindow} or {@link OO.ui.Window#open} methods are used to start opening | ||
| * - {@link #event-opening} is emitted with `opening` promise | ||
| * - {@link #getSetupDelay} is called the returned value is used to time a pause in execution | ||
| * - {@link OO.ui.Window#getSetupProcess} method is called on the window and its result executed | ||
| * - `setup` progress notification is emitted from opening promise | ||
| * - {@link #getReadyDelay} is called the returned value is used to time a pause in execution | ||
| * - {@link OO.ui.Window#getReadyProcess} method is called on the window and its result executed | ||
| * - `ready` progress notification is emitted from opening promise | ||
| * - `opening` promise is resolved with `opened` promise | ||
| * - Window is now open | ||
| * **Opened**: the window is now open. | ||
| * | ||
| * - {@link #closeWindow} or {@link OO.ui.Window#close} methods are used to start closing | ||
| * - `opened` promise is resolved with `closing` promise | ||
| * - {@link #event-closing} is emitted with `closing` promise | ||
| * - {@link #getHoldDelay} is called the returned value is used to time a pause in execution | ||
| * - {@link OO.ui.Window#getHoldProcess} method is called on the window and its result executed | ||
| * - `hold` progress notification is emitted from opening promise | ||
| * - {@link #getTeardownDelay} is called the returned value is used to time a pause in execution | ||
| * - {@link OO.ui.Window#getTeardownProcess} method is called on the window and its result executed | ||
| * - `teardown` progress notification is emitted from opening promise | ||
| * - Closing promise is resolved | ||
| * - Window is now closed | ||
| * **Closing**: the closing stage begins when the window manager's #closeWindow or the | ||
| * window's {@link OO.ui.Window#close close} methods is used, and the window manager begins | ||
| * to close the window. | ||
| * | ||
| * - the `opened` promise is resolved with `closing` promise and a `closing` event is emitted | ||
| * - the #getHoldDelay method is called and the returned value is used to time a pause in execution before | ||
| * the window's {@link OO.ui.Window#getHoldProcess getHoldProces} method is called on the | ||
| * window and its result executed | ||
| * - a `hold` progress notification is emitted from the `closing` promise | ||
| * - the #getTeardownDelay() method is called and the returned value is used to time a pause in execution before | ||
| * the window's {@link OO.ui.Window#getTeardownProcess getTeardownProcess} method is called on the | ||
| * window and its result executed | ||
| * - a `teardown` progress notification is emitted from the `closing` promise | ||
| * - the `closing` promise is resolved. The window is now closed | ||
| * | ||
| * See the [OOjs UI documentation on MediaWiki][1] for more information. | ||
| * | ||
| * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Windows/Window_managers | ||
| * | ||
| * @class | ||
| * @extends OO.ui.Element | ||
| * @mixins OO.EventEmitter | ||
| * | ||
| * @constructor | ||
@@ -461,3 +472,3 @@ * @param {Object} [config] Configuration options | ||
| if ( $.isArray( windows ) ) { | ||
| if ( Array.isArray( windows ) ) { | ||
| // Convert to map of windows by looking up symbolic names from static configuration | ||
@@ -464,0 +475,0 @@ list = {}; |
@@ -54,15 +54,15 @@ /*! | ||
| // Take note of casing differences. | ||
| if ( element.hasOwnProperty( 'value' ) ) { | ||
| if ( element.value !== undefined ) { | ||
| summary.attributes.value = element.value; | ||
| } | ||
| if ( element.hasOwnProperty( 'readOnly' ) ) { | ||
| if ( element.readOnly !== undefined ) { | ||
| summary.attributes.readonly = element.readOnly; | ||
| } | ||
| if ( element.hasOwnProperty( 'checked' ) ) { | ||
| if ( element.checked !== undefined ) { | ||
| summary.attributes.checked = element.checked; | ||
| } | ||
| if ( element.hasOwnProperty( 'disabled' ) ) { | ||
| if ( element.disabled !== undefined ) { | ||
| summary.attributes.disabled = element.disabled; | ||
| } | ||
| if ( element.hasOwnProperty( 'tabIndex' ) ) { | ||
| if ( element.tabIndex !== undefined ) { | ||
| summary.attributes.tabindex = element.tabIndex; | ||
@@ -69,0 +69,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by12.09%
4403216
- Number of package files
- increased by1.05%
865
Worsened metrics
- Lines of code
- decreased by-7.46%
80555
No dependency changes