diff --git a/RELEASE-NOTES-1.35 b/RELEASE-NOTES-1.35 index 99c7a851a40..e7df33f952e 100644 --- a/RELEASE-NOTES-1.35 +++ b/RELEASE-NOTES-1.35 @@ -227,7 +227,7 @@ For notes on 1.34.x and older releases, see HISTORY. * pear/mail_mime was upgraded from 1.10.2 to 1.10.7. * wikimedia/less.php was upgraded from 1.8.0 to 3.0.0. * Updated oojs from 3.0.0 to 3.0.1. -* Updated OOUI from 0.35.1 to 0.38.0. +* Updated OOUI from 0.35.1 to 0.38.1. * zordius/lightncandy was upgraded from 0.23.0 to 1.2.5. * Updated nikic/php-parser from 3.1.5 to 4.4.0 (dev-only). * Updated jQuery from v3.3.1 to v3.4.1. diff --git a/composer.json b/composer.json index 3f23784a83f..8ab0d9d02c4 100644 --- a/composer.json +++ b/composer.json @@ -29,7 +29,7 @@ "ext-xml": "*", "guzzlehttp/guzzle": "6.5.2", "liuggio/statsd-php-client": "1.0.18", - "oojs/oojs-ui": "0.38.0", + "oojs/oojs-ui": "0.38.1", "pear/mail": "1.4.1", "pear/mail_mime": "1.10.7", "pear/net_smtp": "1.9.0", diff --git a/resources/lib/foreign-resources.yaml b/resources/lib/foreign-resources.yaml index 64966afdf45..6d26c35a36b 100644 --- a/resources/lib/foreign-resources.yaml +++ b/resources/lib/foreign-resources.yaml @@ -237,8 +237,8 @@ oojs-router: ooui: type: tar - src: https://registry.npmjs.org/oojs-ui/-/oojs-ui-0.38.0.tgz - integrity: sha384-Y1Fd0zOQ55bysq3pypiXRffveV1Y2kKYTmwCpmU5lBSknkdF9yD+JDy1CK68sOPF + src: https://registry.npmjs.org/oojs-ui/-/oojs-ui-0.38.1.tgz + integrity: sha384-MmVhSlmp1hFagV3bgXlPIgqWBmhF/IBC+kLfoUCWnlW/C5ihj/93UtRQSCfvg36N dest: # Main stuff diff --git a/resources/lib/ooui/History.md b/resources/lib/ooui/History.md index 4a63932396e..eadeeaf5523 100644 --- a/resources/lib/ooui/History.md +++ b/resources/lib/ooui/History.md @@ -1,4 +1,22 @@ # OOUI Release History +## v0.38.1 / 2020-05-01 +### Styles +* icons: Add 'articlesSearch' icon (Volker E.) +* icons: Unify 'referenceExisting' with other multi object ones (Volker E.) + +### Code +* Replace deprecate 'parent' with 'super' (Ed Sanders) +* Element: Simplify instanceof check in infusion (Ed Sanders) +* build: Bump phan to 0.10.2 (James D. Forrester) +* build: Upgrade eslint-config-wikimedia to 0.15.3 (James D. Forrester) +* build: Upgrade mediawiki-codesniffer from v29.0.0 to v30.0.0 (James D. Forrester) +* build: Upgrade stylelint-config-wikimedia to 0.10.1 (James D. Forrester) +* demos: Add 'invisibleLabel' to quiet ButtonMenuSelectWidget (Volker E.) +* demos: Fix demo display for narrow ButtonMenuSelectWidget (Thalia Chan) +* demos: Fix documentation for ButtonMenuSelect widget (Thalia Chan) +* tests: Use assertStringContainsString for string contains, to support PHPUnit 9 (James D. Forrester) + + ## v0.38.0 / 2020-04-14 ### Breaking changes * [BREAKING CHANGE] icons: Remove 'stripe*' icons, deprecated in v0.36.5 (Volker E.) diff --git a/resources/lib/ooui/i18n/nb.json b/resources/lib/ooui/i18n/nb.json index fd3ef451e91..f65bae71699 100644 --- a/resources/lib/ooui/i18n/nb.json +++ b/resources/lib/ooui/i18n/nb.json @@ -25,7 +25,7 @@ "ooui-dialog-process-dismiss": "Lukk", "ooui-dialog-process-retry": "Prøv igjen", "ooui-dialog-process-continue": "Fortsett", - "ooui-combobox-button-label": "Rullegardinliste for komboboks", + "ooui-combobox-button-label": "Vis/skjul valg", "ooui-selectfile-button-select": "Velg en fil", "ooui-selectfile-not-supported": "Filvalg er ikke støttet", "ooui-selectfile-placeholder": "Ingen fil er valgt", diff --git a/resources/lib/ooui/oojs-ui-apex.js b/resources/lib/ooui/oojs-ui-apex.js index 02cca416dc7..3d940f43e32 100644 --- a/resources/lib/ooui/oojs-ui-apex.js +++ b/resources/lib/ooui/oojs-ui-apex.js @@ -1,12 +1,12 @@ /*! - * OOUI v0.38.0 + * OOUI v0.38.1 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2020 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2020-04-15T01:28:08Z + * Date: 2020-05-01T20:01:46Z */ ( function ( OO ) { @@ -20,7 +20,7 @@ */ OO.ui.ApexTheme = function OoUiApexTheme() { // Parent constructor - OO.ui.ApexTheme.parent.call( this ); + OO.ui.ApexTheme.super.call( this ); }; /* Setup */ diff --git a/resources/lib/ooui/oojs-ui-apex.js.map.json b/resources/lib/ooui/oojs-ui-apex.js.map.json index f50934341c6..5115736f165 100644 --- a/resources/lib/ooui/oojs-ui-apex.js.map.json +++ b/resources/lib/ooui/oojs-ui-apex.js.map.json @@ -1 +1 @@ -{"version":3,"sources":["../src/intro.js.txt","../src/themes/apex/ApexTheme.js","../src/outro.js.txt"],"names":[],"mappings":";;;;;;;;;;AAAA,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACnB;AACA,CAAC,GAAG,CAAC,MAAM,EAAE;;ACFb,GAAG;AACH,CAAC,CAAC,CAAC,CAAC,KAAK;AACT,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK;AACvB,CAAC,CAAC;AACF,CAAC,CAAC,CAAC,CAAC,WAAW;AACf,CAAC,EAAE;AACH,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AAC5C,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW;AACtB,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE;AACrC,EAAE;AACF;AACA,EAAE,CAAC,KAAK,CAAC,EAAE;AACX;AACA,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;AAChD;AACA,EAAE,CAAC,OAAO,CAAC,EAAE;AACb;AACA,GAAG;AACH,CAAC,CAAC,CAAC,CAAC,UAAU;AACd,CAAC,EAAE;AACH,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AACrE,CAAC,MAAM,CAAC,GAAG,CAAC;AACZ,EAAE;AACF;AACA,EAAE,CAAC,aAAa,CAAC,EAAE;AACnB;AACA,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,GAAG;;AC1BpC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE","file":"oojs-ui-apex.js","sourcesContent":["( function ( OO ) {\n\n'use strict';\n","/**\n * @class\n * @extends OO.ui.Theme\n *\n * @constructor\n */\nOO.ui.ApexTheme = function OoUiApexTheme() {\n\t// Parent constructor\n\tOO.ui.ApexTheme.parent.call( this );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.ApexTheme, OO.ui.Theme );\n\n/* Methods */\n\n/**\n * @inheritdoc\n */\nOO.ui.ApexTheme.prototype.getDialogTransitionDuration = function () {\n\treturn 250;\n};\n\n/* Instantiation */\n\nOO.ui.theme = new OO.ui.ApexTheme();\n","}( OO ) );\n"]} \ No newline at end of file +{"version":3,"sources":["../src/intro.js.txt","../src/themes/apex/ApexTheme.js","../src/outro.js.txt"],"names":[],"mappings":";;;;;;;;;;AAAA,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACnB;AACA,CAAC,GAAG,CAAC,MAAM,EAAE;;ACFb,GAAG;AACH,CAAC,CAAC,CAAC,CAAC,KAAK;AACT,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK;AACvB,CAAC,CAAC;AACF,CAAC,CAAC,CAAC,CAAC,WAAW;AACf,CAAC,EAAE;AACH,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AAC5C,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW;AACtB,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE;AACpC,EAAE;AACF;AACA,EAAE,CAAC,KAAK,CAAC,EAAE;AACX;AACA,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE;AAChD;AACA,EAAE,CAAC,OAAO,CAAC,EAAE;AACb;AACA,GAAG;AACH,CAAC,CAAC,CAAC,CAAC,UAAU;AACd,CAAC,EAAE;AACH,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AACrE,CAAC,MAAM,CAAC,GAAG,CAAC;AACZ,EAAE;AACF;AACA,EAAE,CAAC,aAAa,CAAC,EAAE;AACnB;AACA,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,GAAG;;AC1BpC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE","file":"oojs-ui-apex.js","sourcesContent":["( function ( OO ) {\n\n'use strict';\n","/**\n * @class\n * @extends OO.ui.Theme\n *\n * @constructor\n */\nOO.ui.ApexTheme = function OoUiApexTheme() {\n\t// Parent constructor\n\tOO.ui.ApexTheme.super.call( this );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.ApexTheme, OO.ui.Theme );\n\n/* Methods */\n\n/**\n * @inheritdoc\n */\nOO.ui.ApexTheme.prototype.getDialogTransitionDuration = function () {\n\treturn 250;\n};\n\n/* Instantiation */\n\nOO.ui.theme = new OO.ui.ApexTheme();\n","}( OO ) );\n"]} \ No newline at end of file diff --git a/resources/lib/ooui/oojs-ui-core-apex.css b/resources/lib/ooui/oojs-ui-core-apex.css index 79ba4451b95..876d6a8be6f 100644 --- a/resources/lib/ooui/oojs-ui-core-apex.css +++ b/resources/lib/ooui/oojs-ui-core-apex.css @@ -1,12 +1,12 @@ /*! - * OOUI v0.38.0 + * OOUI v0.38.1 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2020 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2020-04-15T01:28:27Z + * Date: 2020-05-01T20:02:07Z */ .oo-ui-element-hidden { display: none !important; diff --git a/resources/lib/ooui/oojs-ui-core-wikimediaui.css b/resources/lib/ooui/oojs-ui-core-wikimediaui.css index 8f8d821c0d3..bf08abc115c 100644 --- a/resources/lib/ooui/oojs-ui-core-wikimediaui.css +++ b/resources/lib/ooui/oojs-ui-core-wikimediaui.css @@ -1,12 +1,12 @@ /*! - * OOUI v0.38.0 + * OOUI v0.38.1 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2020 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2020-04-15T01:28:27Z + * Date: 2020-05-01T20:02:07Z */ .oo-ui-element-hidden { display: none !important; diff --git a/resources/lib/ooui/oojs-ui-core.js b/resources/lib/ooui/oojs-ui-core.js index 3b2b549fbea..9ea8123bc29 100644 --- a/resources/lib/ooui/oojs-ui-core.js +++ b/resources/lib/ooui/oojs-ui-core.js @@ -1,12 +1,12 @@ /*! - * OOUI v0.38.0 + * OOUI v0.38.1 * https://www.mediawiki.org/wiki/OOUI * * Copyright 2011–2020 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2020-04-15T01:28:08Z + * Date: 2020-05-01T20:01:46Z */ ( function ( OO ) { @@ -697,7 +697,7 @@ OO.ui.Element.static.infuse = function ( node, config ) { */ OO.ui.Element.static.unsafeInfuse = function ( node, config, domPromise ) { // look for a cached result of a previous infusion. - var error, data, cls, parts, parent, obj, top, state, infusedChildren, + var error, data, cls, parts, obj, top, state, infusedChildren, $elem = $( node ), id = $elem.attr( 'id' ); @@ -752,23 +752,8 @@ OO.ui.Element.static.unsafeInfuse = function ( node, config, domPromise ) { } parts = data._.split( '.' ); cls = OO.getProp.apply( OO, [ window ].concat( parts ) ); - if ( cls === undefined ) { - throw new Error( 'Unknown widget type: id: ' + id + ', class: ' + data._ ); - } - // Verify that we're creating an OO.ui.Element instance - parent = cls.parent; - - while ( parent !== undefined ) { - if ( parent === OO.ui.Element ) { - // Safe - break; - } - - parent = parent.parent; - } - - if ( parent !== OO.ui.Element ) { + if ( !( cls && ( cls === OO.ui.Element || cls.prototype instanceof OO.ui.Element ) ) ) { throw new Error( 'Unknown widget type: id: ' + id + ', class: ' + data._ ); } @@ -1705,7 +1690,7 @@ OO.ui.Layout = function OoUiLayout( config ) { config = config || {}; // Parent constructor - OO.ui.Layout.parent.call( this, config ); + OO.ui.Layout.super.call( this, config ); // Mixin constructors OO.EventEmitter.call( this ); @@ -1754,7 +1739,7 @@ OO.ui.Widget = function OoUiWidget( config ) { config = $.extend( { disabled: false }, config ); // Parent constructor - OO.ui.Widget.parent.call( this, config ); + OO.ui.Widget.super.call( this, config ); // Mixin constructors OO.EventEmitter.call( this ); @@ -3815,7 +3800,7 @@ OO.ui.ButtonWidget = function OoUiButtonWidget( config ) { config = config || {}; // Parent constructor - OO.ui.ButtonWidget.parent.call( this, config ); + OO.ui.ButtonWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.ButtonElement.call( this, config ); @@ -4092,7 +4077,7 @@ OO.ui.ButtonGroupWidget = function OoUiButtonGroupWidget( config ) { config = config || {}; // Parent constructor - OO.ui.ButtonGroupWidget.parent.call( this, config ); + OO.ui.ButtonGroupWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.GroupElement.call( this, $.extend( { @@ -4180,7 +4165,7 @@ OO.ui.IconWidget = function OoUiIconWidget( config ) { config = config || {}; // Parent constructor - OO.ui.IconWidget.parent.call( this, config ); + OO.ui.IconWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.IconElement.call( this, $.extend( { @@ -4255,7 +4240,7 @@ OO.ui.IndicatorWidget = function OoUiIndicatorWidget( config ) { config = config || {}; // Parent constructor - OO.ui.IndicatorWidget.parent.call( this, config ); + OO.ui.IndicatorWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.IndicatorElement.call( this, $.extend( { @@ -4336,7 +4321,7 @@ OO.ui.LabelWidget = function OoUiLabelWidget( config ) { config = config || {}; // Parent constructor - OO.ui.LabelWidget.parent.call( this, config ); + OO.ui.LabelWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.LabelElement.call( this, $.extend( { @@ -4401,7 +4386,7 @@ OO.ui.MessageWidget = function OoUiMessageWidget( config ) { config = config || {}; // Parent constructor - OO.ui.MessageWidget.parent.call( this, config ); + OO.ui.MessageWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.IconElement.call( this, config ); @@ -4506,7 +4491,7 @@ OO.ui.MessageWidget.prototype.setType = function ( type ) { * * @example * function MessageDialog( config ) { - * MessageDialog.parent.call( this, config ); + * MessageDialog.super.call( this, config ); * } * OO.inheritClass( MessageDialog, OO.ui.MessageDialog ); * @@ -4517,7 +4502,7 @@ OO.ui.MessageWidget.prototype.setType = function ( type ) { * ]; * * MessageDialog.prototype.initialize = function () { - * MessageDialog.parent.prototype.initialize.apply( this, arguments ); + * MessageDialog.super.prototype.initialize.apply( this, arguments ); * this.content = new OO.ui.PanelLayout( { padded: true } ); * this.content.$element.append( '

Click the \'Done\' action widget to see its pending ' + * 'state. Note that action widgets can be marked pending in message dialogs but not ' + @@ -4537,7 +4522,7 @@ OO.ui.MessageWidget.prototype.setType = function ( type ) { * dialog.getActions().get({actions: 'save'})[0].popPending(); * } ); * } - * return MessageDialog.parent.prototype.getActionProcess.call( this, action ); + * return MessageDialog.super.prototype.getActionProcess.call( this, action ); * }; * * var windowManager = new OO.ui.WindowManager(); @@ -5537,7 +5522,7 @@ OO.ui.PopupWidget = function OoUiPopupWidget( config ) { config = config || {}; // Parent constructor - OO.ui.PopupWidget.parent.call( this, config ); + OO.ui.PopupWidget.super.call( this, config ); // Properties (must be set before ClippableElement constructor call) this.$body = $( '

' ); @@ -5801,7 +5786,7 @@ OO.ui.PopupWidget.prototype.toggle = function ( show ) { } // Parent method - OO.ui.PopupWidget.parent.prototype.toggle.call( this, show ); + OO.ui.PopupWidget.super.prototype.toggle.call( this, show ); if ( change ) { this.togglePositioning( show && !!this.$floatableContainer ); @@ -6257,7 +6242,7 @@ OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) { config = config || {}; // Parent constructor - OO.ui.PopupButtonWidget.parent.call( this, config ); + OO.ui.PopupButtonWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.PopupElement.call( this, config ); @@ -6420,7 +6405,7 @@ OO.ui.OptionWidget = function OoUiOptionWidget( config ) { config = config || {}; // Parent constructor - OO.ui.OptionWidget.parent.call( this, config ); + OO.ui.OptionWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.ItemWidget.call( this ); @@ -6676,7 +6661,7 @@ OO.ui.SelectWidget = function OoUiSelectWidget( config ) { config = config || {}; // Parent constructor - OO.ui.SelectWidget.parent.call( this, config ); + OO.ui.SelectWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.GroupWidget.call( this, $.extend( { @@ -7683,7 +7668,7 @@ OO.ui.SelectWidget.prototype.setFocusOwner = function ( $focusOwner ) { */ OO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( config ) { // Parent constructor - OO.ui.DecoratedOptionWidget.parent.call( this, config ); + OO.ui.DecoratedOptionWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.IconElement.call( this, config ); @@ -7717,7 +7702,7 @@ OO.mixinClass( OO.ui.DecoratedOptionWidget, OO.ui.mixin.IndicatorElement ); */ OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) { // Parent constructor - OO.ui.MenuOptionWidget.parent.call( this, config ); + OO.ui.MenuOptionWidget.super.call( this, config ); // Properties this.checkIcon = new OO.ui.IconWidget( { @@ -7783,7 +7768,7 @@ OO.ui.MenuOptionWidget.static.scrollIntoViewOnSelect = true; */ OO.ui.MenuSectionOptionWidget = function OoUiMenuSectionOptionWidget( config ) { // Parent constructor - OO.ui.MenuSectionOptionWidget.parent.call( this, config ); + OO.ui.MenuSectionOptionWidget.super.call( this, config ); // Initialization this.$element @@ -7868,7 +7853,7 @@ OO.ui.MenuSelectWidget = function OoUiMenuSelectWidget( config ) { config = config || {}; // Parent constructor - OO.ui.MenuSelectWidget.parent.call( this, config ); + OO.ui.MenuSelectWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.ClippableElement.call( this, $.extend( { $clippable: this.$group }, config ) ); @@ -7969,7 +7954,7 @@ OO.ui.MenuSelectWidget.prototype.onDocumentKeyDown = function ( e ) { 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.parent.prototype.onDocumentKeyDown.call( this, e ); + OO.ui.MenuSelectWidget.super.prototype.onDocumentKeyDown.call( this, e ); } break; case OO.ui.Keys.ESCAPE: @@ -7985,7 +7970,7 @@ OO.ui.MenuSelectWidget.prototype.onDocumentKeyDown = function ( e ) { } break; default: - OO.ui.MenuSelectWidget.parent.prototype.onDocumentKeyDown.call( this, e ); + OO.ui.MenuSelectWidget.super.prototype.onDocumentKeyDown.call( this, e ); return; } } @@ -8067,7 +8052,7 @@ OO.ui.MenuSelectWidget.prototype.bindDocumentKeyDownListener = function () { if ( this.$input ) { this.$input.on( 'keydown', this.onDocumentKeyDownHandler ); } else { - OO.ui.MenuSelectWidget.parent.prototype.bindDocumentKeyDownListener.call( this ); + OO.ui.MenuSelectWidget.super.prototype.bindDocumentKeyDownListener.call( this ); } }; @@ -8078,7 +8063,7 @@ OO.ui.MenuSelectWidget.prototype.unbindDocumentKeyDownListener = function () { if ( this.$input ) { this.$input.off( 'keydown', this.onDocumentKeyDownHandler ); } else { - OO.ui.MenuSelectWidget.parent.prototype.unbindDocumentKeyDownListener.call( this ); + OO.ui.MenuSelectWidget.super.prototype.unbindDocumentKeyDownListener.call( this ); } }; @@ -8095,7 +8080,7 @@ OO.ui.MenuSelectWidget.prototype.bindDocumentKeyPressListener = function () { this.updateItemVisibility(); } } else { - OO.ui.MenuSelectWidget.parent.prototype.bindDocumentKeyPressListener.call( this ); + OO.ui.MenuSelectWidget.super.prototype.bindDocumentKeyPressListener.call( this ); } }; @@ -8112,7 +8097,7 @@ OO.ui.MenuSelectWidget.prototype.unbindDocumentKeyPressListener = function () { this.updateItemVisibility(); } } else { - OO.ui.MenuSelectWidget.parent.prototype.unbindDocumentKeyPressListener.call( this ); + OO.ui.MenuSelectWidget.super.prototype.unbindDocumentKeyPressListener.call( this ); } }; @@ -8131,7 +8116,7 @@ OO.ui.MenuSelectWidget.prototype.unbindDocumentKeyPressListener = function () { * @return {OO.ui.Widget} The widget, for chaining */ OO.ui.MenuSelectWidget.prototype.chooseItem = function ( item ) { - OO.ui.MenuSelectWidget.parent.prototype.chooseItem.call( this, item ); + OO.ui.MenuSelectWidget.super.prototype.chooseItem.call( this, item ); if ( this.hideOnChoose ) { this.toggle( false ); } @@ -8143,7 +8128,7 @@ OO.ui.MenuSelectWidget.prototype.chooseItem = function ( item ) { */ OO.ui.MenuSelectWidget.prototype.addItems = function ( items, index ) { // Parent method - OO.ui.MenuSelectWidget.parent.prototype.addItems.call( this, items, index ); + OO.ui.MenuSelectWidget.super.prototype.addItems.call( this, items, index ); this.updateItemVisibility(); @@ -8155,7 +8140,7 @@ OO.ui.MenuSelectWidget.prototype.addItems = function ( items, index ) { */ OO.ui.MenuSelectWidget.prototype.removeItems = function ( items ) { // Parent method - OO.ui.MenuSelectWidget.parent.prototype.removeItems.call( this, items ); + OO.ui.MenuSelectWidget.super.prototype.removeItems.call( this, items ); this.updateItemVisibility(); @@ -8167,7 +8152,7 @@ OO.ui.MenuSelectWidget.prototype.removeItems = function ( items ) { */ OO.ui.MenuSelectWidget.prototype.clearItems = function () { // Parent method - OO.ui.MenuSelectWidget.parent.prototype.clearItems.call( this ); + OO.ui.MenuSelectWidget.super.prototype.clearItems.call( this ); this.updateItemVisibility(); @@ -8204,7 +8189,7 @@ OO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) { } // Parent method - OO.ui.MenuSelectWidget.parent.prototype.toggle.call( this, visible ); + OO.ui.MenuSelectWidget.super.prototype.toggle.call( this, visible ); if ( change ) { if ( visible ) { @@ -8352,7 +8337,7 @@ OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) { config = $.extend( { indicator: 'down' }, config ); // Parent constructor - OO.ui.DropdownWidget.parent.call( this, config ); + OO.ui.DropdownWidget.super.call( this, config ); // Properties (must be set before TabIndexedElement constructor call) this.$handle = $( '' ); @@ -8532,7 +8517,7 @@ OO.ui.RadioOptionWidget = function OoUiRadioOptionWidget( config ) { this.radio = new OO.ui.RadioInputWidget( { value: config.data, tabIndex: -1 } ); // Parent constructor - OO.ui.RadioOptionWidget.parent.call( this, config ); + OO.ui.RadioOptionWidget.super.call( this, config ); // Initialization // Remove implicit role, we're handling it ourselves @@ -8581,7 +8566,7 @@ OO.ui.RadioOptionWidget.static.tagName = 'label'; * @inheritdoc */ OO.ui.RadioOptionWidget.prototype.setSelected = function ( state ) { - OO.ui.RadioOptionWidget.parent.prototype.setSelected.call( this, state ); + OO.ui.RadioOptionWidget.super.prototype.setSelected.call( this, state ); this.radio.setSelected( state ); this.$element @@ -8595,7 +8580,7 @@ OO.ui.RadioOptionWidget.prototype.setSelected = function ( state ) { * @inheritdoc */ OO.ui.RadioOptionWidget.prototype.setDisabled = function ( disabled ) { - OO.ui.RadioOptionWidget.parent.prototype.setDisabled.call( this, disabled ); + OO.ui.RadioOptionWidget.super.prototype.setDisabled.call( this, disabled ); this.radio.setDisabled( this.isDisabled() ); @@ -8642,7 +8627,7 @@ OO.ui.RadioOptionWidget.prototype.setDisabled = function ( disabled ) { */ OO.ui.RadioSelectWidget = function OoUiRadioSelectWidget( config ) { // Parent constructor - OO.ui.RadioSelectWidget.parent.call( this, config ); + OO.ui.RadioSelectWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.TabIndexedElement.call( this, config ); @@ -8687,7 +8672,7 @@ OO.ui.MultioptionWidget = function OoUiMultioptionWidget( config ) { config = config || {}; // Parent constructor - OO.ui.MultioptionWidget.parent.call( this, config ); + OO.ui.MultioptionWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.ItemWidget.call( this ); @@ -8771,7 +8756,7 @@ OO.ui.MultioptionWidget.prototype.setSelected = function ( state ) { */ OO.ui.MultiselectWidget = function OoUiMultiselectWidget( config ) { // Parent constructor - OO.ui.MultiselectWidget.parent.call( this, config ); + OO.ui.MultiselectWidget.super.call( this, config ); // Configuration initialization config = config || {}; @@ -8896,7 +8881,7 @@ OO.ui.CheckboxMultioptionWidget = function OoUiCheckboxMultioptionWidget( config this.checkbox = new OO.ui.CheckboxInputWidget(); // Parent constructor - OO.ui.CheckboxMultioptionWidget.parent.call( this, config ); + OO.ui.CheckboxMultioptionWidget.super.call( this, config ); // Events this.checkbox.on( 'change', this.onCheckboxChange.bind( this ) ); @@ -8935,7 +8920,7 @@ OO.ui.CheckboxMultioptionWidget.prototype.onCheckboxChange = function () { * @inheritdoc */ OO.ui.CheckboxMultioptionWidget.prototype.setSelected = function ( state ) { - OO.ui.CheckboxMultioptionWidget.parent.prototype.setSelected.call( this, state ); + OO.ui.CheckboxMultioptionWidget.super.prototype.setSelected.call( this, state ); this.checkbox.setSelected( state ); return this; }; @@ -8944,7 +8929,7 @@ OO.ui.CheckboxMultioptionWidget.prototype.setSelected = function ( state ) { * @inheritdoc */ OO.ui.CheckboxMultioptionWidget.prototype.setDisabled = function ( disabled ) { - OO.ui.CheckboxMultioptionWidget.parent.prototype.setDisabled.call( this, disabled ); + OO.ui.CheckboxMultioptionWidget.super.prototype.setDisabled.call( this, disabled ); this.checkbox.setDisabled( this.isDisabled() ); return this; }; @@ -9014,7 +8999,7 @@ OO.ui.CheckboxMultioptionWidget.prototype.onKeyDown = function ( e ) { */ OO.ui.CheckboxMultiselectWidget = function OoUiCheckboxMultiselectWidget( config ) { // Parent constructor - OO.ui.CheckboxMultiselectWidget.parent.call( this, config ); + OO.ui.CheckboxMultiselectWidget.super.call( this, config ); // Properties this.$lastClicked = null; @@ -9189,7 +9174,7 @@ OO.ui.ProgressBarWidget = function OoUiProgressBarWidget( config ) { config = config || {}; // Parent constructor - OO.ui.ProgressBarWidget.parent.call( this, config ); + OO.ui.ProgressBarWidget.super.call( this, config ); // Properties this.$bar = $( '
' ); @@ -9280,7 +9265,7 @@ OO.ui.InputWidget = function OoUiInputWidget( config ) { config = config || {}; // Parent constructor - OO.ui.InputWidget.parent.call( this, config ); + OO.ui.InputWidget.super.call( this, config ); // Properties // See #reusePreInfuseDOM about config.$input @@ -9332,7 +9317,7 @@ OO.mixinClass( OO.ui.InputWidget, OO.ui.mixin.AccessKeyedElement ); * @inheritdoc */ OO.ui.InputWidget.static.reusePreInfuseDOM = function ( node, config ) { - config = OO.ui.InputWidget.parent.static.reusePreInfuseDOM( node, config ); + config = OO.ui.InputWidget.super.static.reusePreInfuseDOM( node, config ); // Reusing `$input` lets browsers preserve inputted values across page reloads, see T114134. config.$input = $( node ).find( '.oo-ui-inputWidget-input' ); return config; @@ -9342,7 +9327,7 @@ OO.ui.InputWidget.static.reusePreInfuseDOM = function ( node, config ) { * @inheritdoc */ OO.ui.InputWidget.static.gatherPreInfuseState = function ( node, config ) { - var state = OO.ui.InputWidget.parent.static.gatherPreInfuseState( node, config ); + var state = OO.ui.InputWidget.super.static.gatherPreInfuseState( node, config ); if ( config.$input && config.$input.length ) { state.value = config.$input.val(); // Might be better in TabIndexedElement, but it's awkward to do there because @@ -9473,7 +9458,7 @@ OO.ui.InputWidget.prototype.cleanUpValue = function ( value ) { * @inheritdoc */ OO.ui.InputWidget.prototype.setDisabled = function ( state ) { - OO.ui.InputWidget.parent.prototype.setDisabled.call( this, state ); + OO.ui.InputWidget.super.prototype.setDisabled.call( this, state ); if ( this.$input ) { this.$input.prop( 'disabled', this.isDisabled() ); } @@ -9496,7 +9481,7 @@ OO.ui.InputWidget.prototype.setInputId = function ( id ) { * @inheritdoc */ OO.ui.InputWidget.prototype.restorePreInfuseState = function ( state ) { - OO.ui.InputWidget.parent.prototype.restorePreInfuseState.call( this, state ); + OO.ui.InputWidget.super.prototype.restorePreInfuseState.call( this, state ); if ( state.value !== undefined && state.value !== this.getValue() ) { this.setValue( state.value ); } @@ -9521,7 +9506,7 @@ OO.ui.HiddenInputWidget = function OoUiHiddenInputWidget( config ) { config = $.extend( { value: '', name: '' }, config ); // Parent constructor - OO.ui.HiddenInputWidget.parent.call( this, config ); + OO.ui.HiddenInputWidget.super.call( this, config ); // Initialization this.$element.attr( { @@ -9593,7 +9578,7 @@ OO.ui.ButtonInputWidget = function OoUiButtonInputWidget( config ) { this.useInputTag = config.useInputTag; // Parent constructor - OO.ui.ButtonInputWidget.parent.call( this, config ); + OO.ui.ButtonInputWidget.super.call( this, config ); // Mixin constructors OO.ui.mixin.ButtonElement.call( this, $.extend( { @@ -9679,7 +9664,7 @@ OO.ui.ButtonInputWidget.prototype.setLabel = function ( label ) { */ OO.ui.ButtonInputWidget.prototype.setValue = function ( value ) { if ( !this.useInputTag ) { - OO.ui.ButtonInputWidget.parent.prototype.setValue.call( this, value ); + OO.ui.ButtonInputWidget.super.prototype.setValue.call( this, value ); } return this; }; @@ -9742,7 +9727,7 @@ OO.ui.CheckboxInputWidget = function OoUiCheckboxInputWidget( config ) { config = config || {}; // Parent constructor - OO.ui.CheckboxInputWidget.parent.call( this, config ); + OO.ui.CheckboxInputWidget.super.call( this, config ); // Properties this.checkIcon = new OO.ui.IconWidget( { @@ -9788,7 +9773,7 @@ OO.ui.CheckboxInputWidget.static.tagName = 'span'; * @inheritdoc */ OO.ui.CheckboxInputWidget.static.gatherPreInfuseState = function ( node, config ) { - var state = OO.ui.CheckboxInputWidget.parent.static.gatherPreInfuseState( node, config ); + var state = OO.ui.CheckboxInputWidget.super.static.gatherPreInfuseState( node, config ); state.checked = config.$input.prop( 'checked' ); return state; }; @@ -9910,7 +9895,7 @@ OO.ui.CheckboxInputWidget.prototype.simulateLabelClick = function () { * @inheritdoc */ OO.ui.CheckboxInputWidget.prototype.restorePreInfuseState = function ( state ) { - OO.ui.CheckboxInputWidget.parent.prototype.restorePreInfuseState.call( this, state ); + OO.ui.CheckboxInputWidget.super.prototype.restorePreInfuseState.call( this, state ); if ( state.checked !== undefined && state.checked !== this.isSelected() ) { this.setSelected( state.checked ); } @@ -9971,7 +9956,7 @@ OO.ui.DropdownInputWidget = function OoUiDropdownInputWidget( config ) { this.setOptionsData( config.options || [] ); // Parent constructor - OO.ui.DropdownInputWidget.parent.call( this, config ); + OO.ui.DropdownInputWidget.super.call( this, config ); // Events this.dropdownWidget.getMenu().connect( this, { @@ -10024,7 +10009,7 @@ OO.ui.DropdownInputWidget.prototype.setValue = function ( value ) { this.dropdownWidget.getMenu().findFirstSelectableItem(); this.dropdownWidget.getMenu().selectItem( selected ); value = selected ? selected.getData() : ''; - OO.ui.DropdownInputWidget.parent.prototype.setValue.call( this, value ); + OO.ui.DropdownInputWidget.super.prototype.setValue.call( this, value ); if ( this.optionsDirty ) { // We reached this from the constructor or from #setOptions. // We have to update the ` set delete config.$input; return config; @@ -10456,7 +10441,7 @@ OO.ui.RadioSelectInputWidget.prototype.setValue = function ( value ) { this.radioSelectWidget.findFirstSelectableItem(); this.radioSelectWidget.selectItem( selected ); value = selected ? selected.getData() : ''; - OO.ui.RadioSelectInputWidget.parent.prototype.setValue.call( this, value ); + OO.ui.RadioSelectInputWidget.super.prototype.setValue.call( this, value ); return this; }; @@ -10465,7 +10450,7 @@ OO.ui.RadioSelectInputWidget.prototype.setValue = function ( value ) { */ OO.ui.RadioSelectInputWidget.prototype.setDisabled = function ( state ) { this.radioSelectWidget.setDisabled( state ); - OO.ui.RadioSelectInputWidget.parent.prototype.setDisabled.call( this, state ); + OO.ui.RadioSelectInputWidget.super.prototype.setDisabled.call( this, state ); return this; }; @@ -10568,7 +10553,7 @@ OO.ui.CheckboxMultiselectInputWidget = function OoUiCheckboxMultiselectInputWidg this.setOptionsData( config.options || [] ); // Parent constructor - OO.ui.CheckboxMultiselectInputWidget.parent.call( this, config ); + OO.ui.CheckboxMultiselectInputWidget.super.call( this, config ); // Events this.checkboxMultiselectWidget.connect( this, { @@ -10593,7 +10578,7 @@ OO.inheritClass( OO.ui.CheckboxMultiselectInputWidget, OO.ui.InputWidget ); * @inheritdoc */ OO.ui.CheckboxMultiselectInputWidget.static.gatherPreInfuseState = function ( node, config ) { - var state = OO.ui.CheckboxMultiselectInputWidget.parent.static.gatherPreInfuseState( + var state = OO.ui.CheckboxMultiselectInputWidget.super.static.gatherPreInfuseState( node, config ); state.value = $( node ).find( '.oo-ui-checkboxInputWidget .oo-ui-inputWidget-input:checked' ) @@ -10605,7 +10590,7 @@ OO.ui.CheckboxMultiselectInputWidget.static.gatherPreInfuseState = function ( no * @inheritdoc */ OO.ui.CheckboxMultiselectInputWidget.static.reusePreInfuseDOM = function ( node, config ) { - config = OO.ui.CheckboxMultiselectInputWidget.parent.static.reusePreInfuseDOM( node, config ); + config = OO.ui.CheckboxMultiselectInputWidget.super.static.reusePreInfuseDOM( node, config ); // Cannot reuse the `` set delete config.$input; return config; @@ -10649,7 +10634,7 @@ OO.ui.CheckboxMultiselectInputWidget.prototype.getValue = function () { OO.ui.CheckboxMultiselectInputWidget.prototype.setValue = function ( value ) { value = this.cleanUpValue( value ); this.checkboxMultiselectWidget.selectItemsByData( value ); - OO.ui.CheckboxMultiselectInputWidget.parent.prototype.setValue.call( this, value ); + OO.ui.CheckboxMultiselectInputWidget.super.prototype.setValue.call( this, value ); if ( this.optionsDirty ) { // We reached this from the constructor or from #setOptions. // We have to update the `), `null` will allow that title to be\n * shown. Use empty string to suppress it.\n *\n * @static\n * @inheritable\n * @property {string|Function|null}\n */\nOO.ui.mixin.TitledElement.static.title = null;\n\n/* Methods */\n\n/**\n * Set the titled element.\n *\n * This method is used to retarget a TitledElement mixin so that its functionality applies to the\n * specified element.\n * If an element is already set, the mixin’s effect on that element is removed before the new\n * element is set up.\n *\n * @param {jQuery} $titled Element that should use the 'titled' functionality\n */\nOO.ui.mixin.TitledElement.prototype.setTitledElement = function ( $titled ) {\n\tif ( this.$titled ) {\n\t\tthis.$titled.removeAttr( 'title' );\n\t}\n\n\tthis.$titled = $titled;\n\tthis.updateTitle();\n};\n\n/**\n * Set title.\n *\n * @param {string|Function|null} title Title text, a function that returns text, or `null`\n * for no title\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.TitledElement.prototype.setTitle = function ( title ) {\n\ttitle = typeof title === 'function' ? OO.ui.resolveMsg( title ) : title;\n\ttitle = typeof title === 'string' ? title : null;\n\n\tif ( this.title !== title ) {\n\t\tthis.title = title;\n\t\tthis.updateTitle();\n\t}\n\n\treturn this;\n};\n\n/**\n * Update the title attribute, in case of changes to title or accessKey.\n *\n * @protected\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.TitledElement.prototype.updateTitle = function () {\n\tvar title = this.getTitle();\n\tif ( this.$titled ) {\n\t\tif ( title !== null ) {\n\t\t\t// Only if this is an AccessKeyedElement\n\t\t\tif ( this.formatTitleWithAccessKey ) {\n\t\t\t\ttitle = this.formatTitleWithAccessKey( title );\n\t\t\t}\n\t\t\tthis.$titled.attr( 'title', title );\n\t\t} else {\n\t\t\tthis.$titled.removeAttr( 'title' );\n\t\t}\n\t}\n\treturn this;\n};\n\n/**\n * Get title.\n *\n * @return {string} Title string\n */\nOO.ui.mixin.TitledElement.prototype.getTitle = function () {\n\treturn this.title;\n};\n","/**\n * AccessKeyedElement is mixed into other classes to provide an `accesskey` HTML attribute.\n * Access keys allow an user to go to a specific element by using\n * a shortcut combination of a browser specific keys + the key\n * set to the field.\n *\n * @example\n * // AccessKeyedElement provides an `accesskey` attribute to the\n * // ButtonWidget class.\n * var button = new OO.ui.ButtonWidget( {\n * label: 'Button with access key',\n * accessKey: 'k'\n * } );\n * $( document.body ).append( button.$element );\n *\n * @abstract\n * @class\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {jQuery} [$accessKeyed] The element to which the `accesskey` attribute is applied.\n * If this config is omitted, the access key functionality is applied to $element, the\n * element created by the class.\n * @cfg {string|Function} [accessKey] The key or a function that returns the key. If\n * this config is omitted, no access key will be added.\n */\nOO.ui.mixin.AccessKeyedElement = function OoUiMixinAccessKeyedElement( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties\n\tthis.$accessKeyed = null;\n\tthis.accessKey = null;\n\n\t// Initialization\n\tthis.setAccessKey( config.accessKey || null );\n\tthis.setAccessKeyedElement( config.$accessKeyed || this.$element );\n\n\t// If this is also a TitledElement and it initialized before we did, we may have\n\t// to update the title with the access key\n\tif ( this.updateTitle ) {\n\t\tthis.updateTitle();\n\t}\n};\n\n/* Setup */\n\nOO.initClass( OO.ui.mixin.AccessKeyedElement );\n\n/* Static Properties */\n\n/**\n * The access key, a function that returns a key, or `null` for no access key.\n *\n * @static\n * @inheritable\n * @property {string|Function|null}\n */\nOO.ui.mixin.AccessKeyedElement.static.accessKey = null;\n\n/* Methods */\n\n/**\n * Set the access keyed element.\n *\n * This method is used to retarget a AccessKeyedElement mixin so that its functionality applies to\n * the specified element.\n * If an element is already set, the mixin's effect on that element is removed before the new\n * element is set up.\n *\n * @param {jQuery} $accessKeyed Element that should use the 'access keyed' functionality\n */\nOO.ui.mixin.AccessKeyedElement.prototype.setAccessKeyedElement = function ( $accessKeyed ) {\n\tif ( this.$accessKeyed ) {\n\t\tthis.$accessKeyed.removeAttr( 'accesskey' );\n\t}\n\n\tthis.$accessKeyed = $accessKeyed;\n\tif ( this.accessKey ) {\n\t\tthis.$accessKeyed.attr( 'accesskey', this.accessKey );\n\t}\n};\n\n/**\n * Set access key.\n *\n * @param {string|Function|null} accessKey Key, a function that returns a key, or `null` for no\n * access key\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.AccessKeyedElement.prototype.setAccessKey = function ( accessKey ) {\n\taccessKey = typeof accessKey === 'string' ? OO.ui.resolveMsg( accessKey ) : null;\n\n\tif ( this.accessKey !== accessKey ) {\n\t\tif ( this.$accessKeyed ) {\n\t\t\tif ( accessKey !== null ) {\n\t\t\t\tthis.$accessKeyed.attr( 'accesskey', accessKey );\n\t\t\t} else {\n\t\t\t\tthis.$accessKeyed.removeAttr( 'accesskey' );\n\t\t\t}\n\t\t}\n\t\tthis.accessKey = accessKey;\n\n\t\t// Only if this is a TitledElement\n\t\tif ( this.updateTitle ) {\n\t\t\tthis.updateTitle();\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Get access key.\n *\n * @return {string} accessKey string\n */\nOO.ui.mixin.AccessKeyedElement.prototype.getAccessKey = function () {\n\treturn this.accessKey;\n};\n\n/**\n * Add information about the access key to the element's tooltip label.\n * (This is only public for hacky usage in FieldLayout.)\n *\n * @param {string} title Tooltip label for `title` attribute\n * @return {string}\n */\nOO.ui.mixin.AccessKeyedElement.prototype.formatTitleWithAccessKey = function ( title ) {\n\tvar accessKey;\n\n\tif ( !this.$accessKeyed ) {\n\t\t// Not initialized yet; the constructor will call updateTitle() which will rerun this\n\t\t// function.\n\t\treturn title;\n\t}\n\t// Use jquery.accessKeyLabel if available to show modifiers, otherwise just display the\n\t// single key.\n\tif ( $.fn.updateTooltipAccessKeys && $.fn.updateTooltipAccessKeys.getAccessKeyLabel ) {\n\t\taccessKey = $.fn.updateTooltipAccessKeys.getAccessKeyLabel( this.$accessKeyed[ 0 ] );\n\t} else {\n\t\taccessKey = this.getAccessKey();\n\t}\n\tif ( accessKey ) {\n\t\ttitle += ' [' + accessKey + ']';\n\t}\n\treturn title;\n};\n","/**\n * ButtonWidget is a generic widget for buttons. A wide variety of looks,\n * feels, and functionality can be customized via the class’s configuration options\n * and methods. Please see the [OOUI documentation on MediaWiki] [1] for more information\n * and examples.\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Buttons_and_Switches\n *\n * @example\n * // A button widget.\n * var button = new OO.ui.ButtonWidget( {\n * label: 'Button with Icon',\n * icon: 'trash',\n * title: 'Remove'\n * } );\n * $( document.body ).append( button.$element );\n *\n * NOTE: HTML form buttons should use the OO.ui.ButtonInputWidget class.\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.ButtonElement\n * @mixins OO.ui.mixin.IconElement\n * @mixins OO.ui.mixin.IndicatorElement\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.TitledElement\n * @mixins OO.ui.mixin.FlaggedElement\n * @mixins OO.ui.mixin.TabIndexedElement\n * @mixins OO.ui.mixin.AccessKeyedElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {boolean} [active=false] Whether button should be shown as active\n * @cfg {string} [href] Hyperlink to visit when the button is clicked.\n * @cfg {string} [target] The frame or window in which to open the hyperlink.\n * @cfg {boolean} [noFollow] Search engine traversal hint (default: true)\n * @cfg {string[]} [rel] Relationship attributes for the hyperlink\n */\nOO.ui.ButtonWidget = function OoUiButtonWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.ButtonWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.ButtonElement.call( this, config );\n\tOO.ui.mixin.IconElement.call( this, config );\n\tOO.ui.mixin.IndicatorElement.call( this, config );\n\tOO.ui.mixin.LabelElement.call( this, config );\n\tOO.ui.mixin.TitledElement.call( this, $.extend( {\n\t\t$titled: this.$button\n\t}, config ) );\n\tOO.ui.mixin.FlaggedElement.call( this, config );\n\tOO.ui.mixin.TabIndexedElement.call( this, $.extend( {\n\t\t$tabIndexed: this.$button\n\t}, config ) );\n\tOO.ui.mixin.AccessKeyedElement.call( this, $.extend( {\n\t\t$accessKeyed: this.$button\n\t}, config ) );\n\n\t// Properties\n\tthis.href = null;\n\tthis.target = null;\n\tthis.noFollow = false;\n\tthis.rel = [];\n\n\t// Events\n\tthis.connect( this, {\n\t\tdisable: 'onDisable'\n\t} );\n\n\t// Initialization\n\tthis.$button.append( this.$icon, this.$label, this.$indicator );\n\tthis.$element\n\t\t.addClass( 'oo-ui-buttonWidget' )\n\t\t.append( this.$button );\n\tthis.setActive( config.active );\n\tthis.setHref( config.href );\n\tthis.setTarget( config.target );\n\tif ( config.rel ) {\n\t\tthis.setRel( config.rel );\n\t} else {\n\t\tthis.setNoFollow( config.noFollow );\n\t}\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.ButtonWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.ButtonElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.IconElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.IndicatorElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.TitledElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.FlaggedElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.TabIndexedElement );\nOO.mixinClass( OO.ui.ButtonWidget, OO.ui.mixin.AccessKeyedElement );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.ButtonWidget.static.cancelButtonMouseDownEvents = false;\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.ButtonWidget.static.tagName = 'span';\n\n/* Methods */\n\n/**\n * Get hyperlink location.\n *\n * @return {string} Hyperlink location\n */\nOO.ui.ButtonWidget.prototype.getHref = function () {\n\treturn this.href;\n};\n\n/**\n * Get hyperlink target.\n *\n * @return {string} Hyperlink target\n */\nOO.ui.ButtonWidget.prototype.getTarget = function () {\n\treturn this.target;\n};\n\n/**\n * Get search engine traversal hint.\n *\n * @return {boolean} Whether search engines should avoid traversing this hyperlink\n */\nOO.ui.ButtonWidget.prototype.getNoFollow = function () {\n\treturn this.noFollow;\n};\n\n/**\n * Get the relationship attribute of the hyperlink.\n *\n * @return {string[]} Relationship attributes that apply to the hyperlink\n */\nOO.ui.ButtonWidget.prototype.getRel = function () {\n\treturn this.rel;\n};\n\n/**\n * Set hyperlink location.\n *\n * @param {string|null} href Hyperlink location, null to remove\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.ButtonWidget.prototype.setHref = function ( href ) {\n\thref = typeof href === 'string' ? href : null;\n\tif ( href !== null && !OO.ui.isSafeUrl( href ) ) {\n\t\thref = './' + href;\n\t}\n\n\tif ( href !== this.href ) {\n\t\tthis.href = href;\n\t\tthis.updateHref();\n\t}\n\n\treturn this;\n};\n\n/**\n * Update the `href` attribute, in case of changes to href or\n * disabled state.\n *\n * @private\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.ButtonWidget.prototype.updateHref = function () {\n\tif ( this.href !== null && !this.isDisabled() ) {\n\t\tthis.$button.attr( 'href', this.href );\n\t} else {\n\t\tthis.$button.removeAttr( 'href' );\n\t}\n\n\treturn this;\n};\n\n/**\n * Handle disable events.\n *\n * @private\n * @param {boolean} disabled Element is disabled\n */\nOO.ui.ButtonWidget.prototype.onDisable = function () {\n\tthis.updateHref();\n};\n\n/**\n * Set hyperlink target.\n *\n * @param {string|null} target Hyperlink target, null to remove\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.ButtonWidget.prototype.setTarget = function ( target ) {\n\ttarget = typeof target === 'string' ? target : null;\n\n\tif ( target !== this.target ) {\n\t\tthis.target = target;\n\t\tif ( target !== null ) {\n\t\t\tthis.$button.attr( 'target', target );\n\t\t} else {\n\t\t\tthis.$button.removeAttr( 'target' );\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Set search engine traversal hint.\n *\n * @param {boolean} noFollow True if search engines should avoid traversing this hyperlink\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.ButtonWidget.prototype.setNoFollow = function ( noFollow ) {\n\tvar rel;\n\n\tnoFollow = typeof noFollow === 'boolean' ? noFollow : true;\n\n\tif ( noFollow !== this.noFollow ) {\n\t\tif ( !noFollow ) {\n\t\t\trel = this.rel.concat();\n\t\t\trel.splice(\n\t\t\t\tthis.rel.indexOf( 'nofollow' ),\n\t\t\t\t1\n\t\t\t);\n\t\t\tthis.setRel( rel );\n\t\t} else {\n\t\t\tthis.setRel( this.rel.concat( [ 'nofollow' ] ) );\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Set the `rel` attribute of the the hyperlink.\n *\n * @param {string|string[]} rel Relationship attributes for the hyperlink\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.ButtonWidget.prototype.setRel = function ( rel ) {\n\trel = Array.isArray( rel ) ? rel : typeof rel === 'string' ? [ rel ] : [];\n\n\tif ( rel !== this.rel ) {\n\t\tthis.rel = rel;\n\t\t// For backwards compatibility.\n\t\tthis.noFollow = rel.indexOf( 'nofollow' ) !== -1;\n\n\t\tif ( rel.length > 0 ) {\n\t\t\tthis.$button.attr( 'rel', rel.join( ' ' ) );\n\t\t} else {\n\t\t\tthis.$button.removeAttr( 'rel' );\n\t\t}\n\t}\n\n\treturn this;\n};\n\n// Override method visibility hints from ButtonElement\n/**\n * @method setActive\n * @inheritdoc\n */\n/**\n * @method isActive\n * @inheritdoc\n */\n","/**\n * A ButtonGroupWidget groups related buttons and is used together with OO.ui.ButtonWidget and\n * its subclasses. Each button in a group is addressed by a unique reference. Buttons can be added,\n * removed, and cleared from the group.\n *\n * @example\n * // A ButtonGroupWidget with two buttons.\n * var button1 = new OO.ui.PopupButtonWidget( {\n * label: 'Select a category',\n * icon: 'menu',\n * popup: {\n * $content: $( '

List of categories…

' ),\n * padded: true,\n * align: 'left'\n * }\n * } ),\n * button2 = new OO.ui.ButtonWidget( {\n * label: 'Add item'\n * } ),\n * buttonGroup = new OO.ui.ButtonGroupWidget( {\n * items: [ button1, button2 ]\n * } );\n * $( document.body ).append( buttonGroup.$element );\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.GroupElement\n * @mixins OO.ui.mixin.TitledElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {OO.ui.ButtonWidget[]} [items] Buttons to add\n */\nOO.ui.ButtonGroupWidget = function OoUiButtonGroupWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.ButtonGroupWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.GroupElement.call( this, $.extend( {\n\t\t$group: this.$element\n\t}, config ) );\n\tOO.ui.mixin.TitledElement.call( this, config );\n\n\t// Initialization\n\tthis.$element.addClass( 'oo-ui-buttonGroupWidget' );\n\tif ( Array.isArray( config.items ) ) {\n\t\tthis.addItems( config.items );\n\t}\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.ButtonGroupWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.ButtonGroupWidget, OO.ui.mixin.GroupElement );\nOO.mixinClass( OO.ui.ButtonGroupWidget, OO.ui.mixin.TitledElement );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.ButtonGroupWidget.static.tagName = 'span';\n\n/* Methods */\n\n/**\n * Focus the widget\n *\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.ButtonGroupWidget.prototype.focus = function () {\n\tif ( !this.isDisabled() ) {\n\t\tif ( this.items[ 0 ] ) {\n\t\t\tthis.items[ 0 ].focus();\n\t\t}\n\t}\n\treturn this;\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.ButtonGroupWidget.prototype.simulateLabelClick = function () {\n\tthis.focus();\n};\n","/**\n * IconWidget is a generic widget for {@link OO.ui.mixin.IconElement icons}.\n * In general, IconWidgets should be used with OO.ui.LabelWidget, which creates a label that\n * identifies the icon’s function. See the [OOUI documentation on MediaWiki] [1]\n * for a list of icons included in the library.\n *\n * @example\n * // An IconWidget with a label via LabelWidget.\n * var myIcon = new OO.ui.IconWidget( {\n * icon: 'help',\n * title: 'Help'\n * } ),\n * // Create a label.\n * iconLabel = new OO.ui.LabelWidget( {\n * label: 'Help'\n * } );\n * $( document.body ).append( myIcon.$element, iconLabel.$element );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Icons,_Indicators,_and_Labels#Icons\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.IconElement\n * @mixins OO.ui.mixin.TitledElement\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.FlaggedElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.IconWidget = function OoUiIconWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.IconWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.IconElement.call( this, $.extend( {\n\t\t$icon: this.$element\n\t}, config ) );\n\tOO.ui.mixin.TitledElement.call( this, $.extend( {\n\t\t$titled: this.$element\n\t}, config ) );\n\tOO.ui.mixin.LabelElement.call( this, $.extend( {\n\t\t$label: this.$element,\n\t\tinvisibleLabel: true\n\t}, config ) );\n\tOO.ui.mixin.FlaggedElement.call( this, $.extend( {\n\t\t$flagged: this.$element\n\t}, config ) );\n\n\t// Initialization\n\tthis.$element.addClass( 'oo-ui-iconWidget' );\n\t// Remove class added by LabelElement initialization. It causes unexpected CSS to apply when\n\t// nested in other widgets, because this widget used to not mix in LabelElement.\n\tthis.$element.removeClass( 'oo-ui-labelElement-label' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.IconWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.IconWidget, OO.ui.mixin.IconElement );\nOO.mixinClass( OO.ui.IconWidget, OO.ui.mixin.TitledElement );\nOO.mixinClass( OO.ui.IconWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.IconWidget, OO.ui.mixin.FlaggedElement );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.IconWidget.static.tagName = 'span';\n","/**\n * IndicatorWidgets create indicators, which are small graphics that are generally used to draw\n * attention to the status of an item or to clarify the function within a control. For a list of\n * indicators included in the library, please see the [OOUI documentation on MediaWiki][1].\n *\n * @example\n * // An indicator widget.\n * var indicator1 = new OO.ui.IndicatorWidget( {\n * indicator: 'required'\n * } ),\n * // Create a fieldset layout to add a label.\n * fieldset = new OO.ui.FieldsetLayout();\n * fieldset.addItems( [\n * new OO.ui.FieldLayout( indicator1, {\n * label: 'A required indicator:'\n * } )\n * ] );\n * $( document.body ).append( fieldset.$element );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Icons,_Indicators,_and_Labels#Indicators\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.IndicatorElement\n * @mixins OO.ui.mixin.TitledElement\n * @mixins OO.ui.mixin.LabelElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.IndicatorWidget = function OoUiIndicatorWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.IndicatorWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.IndicatorElement.call( this, $.extend( {\n\t\t$indicator: this.$element\n\t}, config ) );\n\tOO.ui.mixin.TitledElement.call( this, $.extend( {\n\t\t$titled: this.$element\n\t}, config ) );\n\tOO.ui.mixin.LabelElement.call( this, $.extend( {\n\t\t$label: this.$element,\n\t\tinvisibleLabel: true\n\t}, config ) );\n\n\t// Initialization\n\tthis.$element.addClass( 'oo-ui-indicatorWidget' );\n\t// Remove class added by LabelElement initialization. It causes unexpected CSS to apply when\n\t// nested in other widgets, because this widget used to not mix in LabelElement.\n\tthis.$element.removeClass( 'oo-ui-labelElement-label' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.IndicatorWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.IndicatorWidget, OO.ui.mixin.IndicatorElement );\nOO.mixinClass( OO.ui.IndicatorWidget, OO.ui.mixin.TitledElement );\nOO.mixinClass( OO.ui.IndicatorWidget, OO.ui.mixin.LabelElement );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.IndicatorWidget.static.tagName = 'span';\n","/**\n * LabelWidgets help identify the function of interface elements. Each LabelWidget can\n * be configured with a `label` option that is set to a string, a label node, or a function:\n *\n * - String: a plaintext string\n * - jQuery selection: a jQuery selection, used for anything other than a plaintext label, e.g., a\n * label that includes a link or special styling, such as a gray color or additional\n * graphical elements.\n * - Function: a function that will produce a string in the future. Functions are used\n * in cases where the value of the label is not currently defined.\n *\n * In addition, the LabelWidget can be associated with an {@link OO.ui.InputWidget input widget},\n * which will come into focus when the label is clicked.\n *\n * @example\n * // Two LabelWidgets.\n * var label1 = new OO.ui.LabelWidget( {\n * label: 'plaintext label'\n * } ),\n * label2 = new OO.ui.LabelWidget( {\n * label: $( '' ).attr( 'href', 'default.html' ).text( 'jQuery label' )\n * } ),\n * // Create a fieldset layout with fields for each example.\n * fieldset = new OO.ui.FieldsetLayout();\n * fieldset.addItems( [\n * new OO.ui.FieldLayout( label1 ),\n * new OO.ui.FieldLayout( label2 )\n * ] );\n * $( document.body ).append( fieldset.$element );\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.TitledElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {OO.ui.InputWidget} [input] {@link OO.ui.InputWidget Input widget} that uses the label.\n * Clicking the label will focus the specified input field.\n */\nOO.ui.LabelWidget = function OoUiLabelWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.LabelWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.LabelElement.call( this, $.extend( {\n\t\t$label: this.$element\n\t}, config ) );\n\tOO.ui.mixin.TitledElement.call( this, config );\n\n\t// Properties\n\tthis.input = config.input;\n\n\t// Initialization\n\tif ( this.input ) {\n\t\tif ( this.input.getInputId() ) {\n\t\t\tthis.$element.attr( 'for', this.input.getInputId() );\n\t\t} else {\n\t\t\tthis.$label.on( 'click', function () {\n\t\t\t\tthis.input.simulateLabelClick();\n\t\t\t}.bind( this ) );\n\t\t}\n\t}\n\tthis.$element.addClass( 'oo-ui-labelWidget' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.LabelWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.LabelWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.LabelWidget, OO.ui.mixin.TitledElement );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.LabelWidget.static.tagName = 'label';\n","/**\n * MessageWidget produces a visual component for sending a notice to the user\n * with an icon and distinct design noting its purpose. The MessageWidget changes\n * its visual presentation based on the type chosen, which also denotes its UX\n * purpose.\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.IconElement\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.TitledElement\n * @mixins OO.ui.mixin.FlaggedElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {string} [type='notice'] The type of the notice widget. This will also\n * impact the flags that the widget receives (and hence its CSS design) as well\n * as the icon that appears. Available types:\n * 'notice', 'error', 'warning', 'success'\n * @cfg {boolean} [inline] Set the notice as an inline notice. The default\n * is not inline, or 'boxed' style.\n */\nOO.ui.MessageWidget = function OoUiMessageWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.MessageWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.IconElement.call( this, config );\n\tOO.ui.mixin.LabelElement.call( this, config );\n\tOO.ui.mixin.TitledElement.call( this, config );\n\tOO.ui.mixin.FlaggedElement.call( this, config );\n\n\t// Set type\n\tthis.setType( config.type );\n\tthis.setInline( config.inline );\n\n\t// Build the widget\n\tthis.$element\n\t\t.append( this.$icon, this.$label )\n\t\t.addClass( 'oo-ui-messageWidget' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.MessageWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.IconElement );\nOO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.TitledElement );\nOO.mixinClass( OO.ui.MessageWidget, OO.ui.mixin.FlaggedElement );\n\n/* Static Properties */\n\n/**\n * An object defining the icon name per defined type.\n *\n * @static\n * @property {Object}\n */\nOO.ui.MessageWidget.static.iconMap = {\n\tnotice: 'infoFilled',\n\terror: 'error',\n\twarning: 'alert',\n\tsuccess: 'check'\n};\n\n/* Methods */\n\n/**\n * Set the inline state of the widget.\n *\n * @param {boolean} inline Widget is inline\n */\nOO.ui.MessageWidget.prototype.setInline = function ( inline ) {\n\tinline = !!inline;\n\n\tif ( this.inline !== inline ) {\n\t\tthis.inline = inline;\n\t\tthis.$element\n\t\t\t.toggleClass( 'oo-ui-messageWidget-block', !this.inline );\n\t}\n};\n/**\n * Set the widget type. The given type must belong to the list of\n * legal types set by OO.ui.MessageWidget.static.iconMap\n *\n * @param {string} [type] Given type. Defaults to 'notice'\n */\nOO.ui.MessageWidget.prototype.setType = function ( type ) {\n\t// Validate type\n\tif ( Object.keys( this.constructor.static.iconMap ).indexOf( type ) === -1 ) {\n\t\ttype = 'notice'; // Default\n\t}\n\n\tif ( this.type !== type ) {\n\n\t\t// Flags\n\t\tthis.clearFlags();\n\t\tthis.setFlags( type );\n\n\t\t// Set the icon and its variant\n\t\tthis.setIcon( this.constructor.static.iconMap[ type ] );\n\t\tthis.$icon.removeClass( 'oo-ui-image-' + this.type );\n\t\tthis.$icon.addClass( 'oo-ui-image-' + type );\n\n\t\tif ( type === 'error' ) {\n\t\t\tthis.$element.attr( 'role', 'alert' );\n\t\t\tthis.$element.removeAttr( 'aria-live' );\n\t\t} else {\n\t\t\tthis.$element.removeAttr( 'role' );\n\t\t\tthis.$element.attr( 'aria-live', 'polite' );\n\t\t}\n\n\t\tthis.type = type;\n\t}\n};\n","/**\n * PendingElement is a mixin that is used to create elements that notify users that something is\n * happening and that they should wait before proceeding. The pending state is visually represented\n * with a pending texture that appears in the head of a pending\n * {@link OO.ui.ProcessDialog process dialog} or in the input field of a\n * {@link OO.ui.TextInputWidget text input widget}.\n *\n * Currently, {@link OO.ui.ActionWidget Action widgets}, which mix in this class, can also be marked\n * as pending, but only when used in {@link OO.ui.MessageDialog message dialogs}. The behavior is\n * not currently supported for action widgets used in process dialogs.\n *\n * @example\n * function MessageDialog( config ) {\n * MessageDialog.parent.call( this, config );\n * }\n * OO.inheritClass( MessageDialog, OO.ui.MessageDialog );\n *\n * MessageDialog.static.name = 'myMessageDialog';\n * MessageDialog.static.actions = [\n * { action: 'save', label: 'Done', flags: 'primary' },\n * { label: 'Cancel', flags: 'safe' }\n * ];\n *\n * MessageDialog.prototype.initialize = function () {\n * MessageDialog.parent.prototype.initialize.apply( this, arguments );\n * this.content = new OO.ui.PanelLayout( { padded: true } );\n * this.content.$element.append( '

Click the \\'Done\\' action widget to see its pending ' +\n * 'state. Note that action widgets can be marked pending in message dialogs but not ' +\n * 'process dialogs.

' );\n * this.$body.append( this.content.$element );\n * };\n * MessageDialog.prototype.getBodyHeight = function () {\n * return 100;\n * }\n * MessageDialog.prototype.getActionProcess = function ( action ) {\n * var dialog = this;\n * if ( action === 'save' ) {\n * dialog.getActions().get({actions: 'save'})[0].pushPending();\n * return new OO.ui.Process()\n * .next( 1000 )\n * .next( function () {\n * dialog.getActions().get({actions: 'save'})[0].popPending();\n * } );\n * }\n * return MessageDialog.parent.prototype.getActionProcess.call( this, action );\n * };\n *\n * var windowManager = new OO.ui.WindowManager();\n * $( document.body ).append( windowManager.$element );\n *\n * var dialog = new MessageDialog();\n * windowManager.addWindows( [ dialog ] );\n * windowManager.openWindow( dialog );\n *\n * @abstract\n * @class\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {jQuery} [$pending] Element to mark as pending, defaults to this.$element\n */\nOO.ui.mixin.PendingElement = function OoUiMixinPendingElement( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties\n\tthis.pending = 0;\n\tthis.$pending = null;\n\n\t// Initialisation\n\tthis.setPendingElement( config.$pending || this.$element );\n};\n\n/* Setup */\n\nOO.initClass( OO.ui.mixin.PendingElement );\n\n/* Methods */\n\n/**\n * Set the pending element (and clean up any existing one).\n *\n * @param {jQuery} $pending The element to set to pending.\n */\nOO.ui.mixin.PendingElement.prototype.setPendingElement = function ( $pending ) {\n\tif ( this.$pending ) {\n\t\tthis.$pending.removeClass( 'oo-ui-pendingElement-pending' );\n\t}\n\n\tthis.$pending = $pending;\n\tif ( this.pending > 0 ) {\n\t\tthis.$pending.addClass( 'oo-ui-pendingElement-pending' );\n\t}\n};\n\n/**\n * Check if an element is pending.\n *\n * @return {boolean} Element is pending\n */\nOO.ui.mixin.PendingElement.prototype.isPending = function () {\n\treturn !!this.pending;\n};\n\n/**\n * Increase the pending counter. The pending state will remain active until the counter is zero\n * (i.e., the number of calls to #pushPending and #popPending is the same).\n *\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.PendingElement.prototype.pushPending = function () {\n\tif ( this.pending === 0 ) {\n\t\tthis.$pending.addClass( 'oo-ui-pendingElement-pending' );\n\t\tthis.updateThemeClasses();\n\t}\n\tthis.pending++;\n\n\treturn this;\n};\n\n/**\n * Decrease the pending counter. The pending state will remain active until the counter is zero\n * (i.e., the number of calls to #pushPending and #popPending is the same).\n *\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.PendingElement.prototype.popPending = function () {\n\tif ( this.pending === 1 ) {\n\t\tthis.$pending.removeClass( 'oo-ui-pendingElement-pending' );\n\t\tthis.updateThemeClasses();\n\t}\n\tthis.pending = Math.max( 0, this.pending - 1 );\n\n\treturn this;\n};\n","/**\n * Element that will stick adjacent to a specified container, even when it is inserted elsewhere\n * in the document (for example, in an OO.ui.Window's $overlay).\n *\n * The elements's position is automatically calculated and maintained when window is resized or the\n * page is scrolled. If you reposition the container manually, you have to call #position to make\n * sure the element is still placed correctly.\n *\n * As positioning is only possible when both the element and the container are attached to the DOM\n * and visible, it's only done after you call #togglePositioning. You might want to do this inside\n * the #toggle method to display a floating popup, for example.\n *\n * @abstract\n * @class\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {jQuery} [$floatable] Node to position, assigned to #$floatable, omit to use #$element\n * @cfg {jQuery} [$floatableContainer] Node to position adjacent to\n * @cfg {string} [verticalPosition='below'] Where to position $floatable vertically:\n * 'below': Directly below $floatableContainer, aligning f's top edge with fC's bottom edge\n * 'above': Directly above $floatableContainer, aligning f's bottom edge with fC's top edge\n * 'top': Align the top edge with $floatableContainer's top edge\n * 'bottom': Align the bottom edge with $floatableContainer's bottom edge\n * 'center': Vertically align the center with $floatableContainer's center\n * @cfg {string} [horizontalPosition='start'] Where to position $floatable horizontally:\n * 'before': Directly before $floatableContainer, aligning f's end edge with fC's start edge\n * 'after': Directly after $floatableContainer, aligning f's start edge with fC's end edge\n * 'start': Align the start (left in LTR, right in RTL) edge with $floatableContainer's start edge\n * 'end': Align the end (right in LTR, left in RTL) edge with $floatableContainer's end edge\n * 'center': Horizontally align the center with $floatableContainer's center\n * @cfg {boolean} [hideWhenOutOfView=true] Whether to hide the floatable element if the container\n * is out of view\n */\nOO.ui.mixin.FloatableElement = function OoUiMixinFloatableElement( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties\n\tthis.$floatable = null;\n\tthis.$floatableContainer = null;\n\tthis.$floatableWindow = null;\n\tthis.$floatableClosestScrollable = null;\n\tthis.floatableOutOfView = false;\n\tthis.onFloatableScrollHandler = this.position.bind( this );\n\tthis.onFloatableWindowResizeHandler = this.position.bind( this );\n\n\t// Initialization\n\tthis.setFloatableContainer( config.$floatableContainer );\n\tthis.setFloatableElement( config.$floatable || this.$element );\n\tthis.setVerticalPosition( config.verticalPosition || 'below' );\n\tthis.setHorizontalPosition( config.horizontalPosition || 'start' );\n\tthis.hideWhenOutOfView = config.hideWhenOutOfView === undefined ?\n\t\ttrue : !!config.hideWhenOutOfView;\n};\n\n/* Methods */\n\n/**\n * Set floatable element.\n *\n * If an element is already set, it will be cleaned up before setting up the new element.\n *\n * @param {jQuery} $floatable Element to make floatable\n */\nOO.ui.mixin.FloatableElement.prototype.setFloatableElement = function ( $floatable ) {\n\tif ( this.$floatable ) {\n\t\tthis.$floatable.removeClass( 'oo-ui-floatableElement-floatable' );\n\t\tthis.$floatable.css( { left: '', top: '' } );\n\t}\n\n\tthis.$floatable = $floatable.addClass( 'oo-ui-floatableElement-floatable' );\n\tthis.position();\n};\n\n/**\n * Set floatable container.\n *\n * The element will be positioned relative to the specified container.\n *\n * @param {jQuery|null} $floatableContainer Container to keep visible, or null to unset\n */\nOO.ui.mixin.FloatableElement.prototype.setFloatableContainer = function ( $floatableContainer ) {\n\tthis.$floatableContainer = $floatableContainer;\n\tif ( this.$floatable ) {\n\t\tthis.position();\n\t}\n};\n\n/**\n * Change how the element is positioned vertically.\n *\n * @param {string} position 'below', 'above', 'top', 'bottom' or 'center'\n */\nOO.ui.mixin.FloatableElement.prototype.setVerticalPosition = function ( position ) {\n\tif ( [ 'below', 'above', 'top', 'bottom', 'center' ].indexOf( position ) === -1 ) {\n\t\tthrow new Error( 'Invalid value for vertical position: ' + position );\n\t}\n\tif ( this.verticalPosition !== position ) {\n\t\tthis.verticalPosition = position;\n\t\tif ( this.$floatable ) {\n\t\t\tthis.position();\n\t\t}\n\t}\n};\n\n/**\n * Change how the element is positioned horizontally.\n *\n * @param {string} position 'before', 'after', 'start', 'end' or 'center'\n */\nOO.ui.mixin.FloatableElement.prototype.setHorizontalPosition = function ( position ) {\n\tif ( [ 'before', 'after', 'start', 'end', 'center' ].indexOf( position ) === -1 ) {\n\t\tthrow new Error( 'Invalid value for horizontal position: ' + position );\n\t}\n\tif ( this.horizontalPosition !== position ) {\n\t\tthis.horizontalPosition = position;\n\t\tif ( this.$floatable ) {\n\t\t\tthis.position();\n\t\t}\n\t}\n};\n\n/**\n * Toggle positioning.\n *\n * Do not turn positioning on until after the element is attached to the DOM and visible.\n *\n * @param {boolean} [positioning] Enable positioning, omit to toggle\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.FloatableElement.prototype.togglePositioning = function ( positioning ) {\n\tvar closestScrollableOfContainer;\n\n\tif ( !this.$floatable || !this.$floatableContainer ) {\n\t\treturn this;\n\t}\n\n\tpositioning = positioning === undefined ? !this.positioning : !!positioning;\n\n\tif ( positioning && !this.warnedUnattached && !this.isElementAttached() ) {\n\t\tOO.ui.warnDeprecation( 'FloatableElement#togglePositioning: Before calling this method, the element must be attached to the DOM.' );\n\t\tthis.warnedUnattached = true;\n\t}\n\n\tif ( this.positioning !== positioning ) {\n\t\tthis.positioning = positioning;\n\n\t\tclosestScrollableOfContainer = OO.ui.Element.static.getClosestScrollableContainer(\n\t\t\tthis.$floatableContainer[ 0 ]\n\t\t);\n\t\t// If the scrollable is the root, we have to listen to scroll events\n\t\t// on the window because of browser inconsistencies.\n\t\tif ( $( closestScrollableOfContainer ).is( 'html, body' ) ) {\n\t\t\tclosestScrollableOfContainer = OO.ui.Element.static.getWindow(\n\t\t\t\tclosestScrollableOfContainer\n\t\t\t);\n\t\t}\n\n\t\tif ( positioning ) {\n\t\t\tthis.$floatableWindow = $( this.getElementWindow() );\n\t\t\tthis.$floatableWindow.on( 'resize', this.onFloatableWindowResizeHandler );\n\n\t\t\tthis.$floatableClosestScrollable = $( closestScrollableOfContainer );\n\t\t\tthis.$floatableClosestScrollable.on( 'scroll', this.onFloatableScrollHandler );\n\n\t\t\t// Initial position after visible\n\t\t\tthis.position();\n\t\t} else {\n\t\t\tif ( this.$floatableWindow ) {\n\t\t\t\tthis.$floatableWindow.off( 'resize', this.onFloatableWindowResizeHandler );\n\t\t\t\tthis.$floatableWindow = null;\n\t\t\t}\n\n\t\t\tif ( this.$floatableClosestScrollable ) {\n\t\t\t\tthis.$floatableClosestScrollable.off( 'scroll', this.onFloatableScrollHandler );\n\t\t\t\tthis.$floatableClosestScrollable = null;\n\t\t\t}\n\n\t\t\tthis.$floatable.css( { left: '', right: '', top: '' } );\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Check whether the bottom edge of the given element is within the viewport of the given\n * container.\n *\n * @private\n * @param {jQuery} $element\n * @param {jQuery} $container\n * @return {boolean}\n */\nOO.ui.mixin.FloatableElement.prototype.isElementInViewport = function ( $element, $container ) {\n\tvar elemRect, contRect, topEdgeInBounds, bottomEdgeInBounds, leftEdgeInBounds,\n\t\trightEdgeInBounds, startEdgeInBounds, endEdgeInBounds, viewportSpacing,\n\t\tdirection = $element.css( 'direction' );\n\n\telemRect = $element[ 0 ].getBoundingClientRect();\n\tif ( $container[ 0 ] === window ) {\n\t\tviewportSpacing = OO.ui.getViewportSpacing();\n\t\tcontRect = {\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t\tright: document.documentElement.clientWidth,\n\t\t\tbottom: document.documentElement.clientHeight\n\t\t};\n\t\tcontRect.top += viewportSpacing.top;\n\t\tcontRect.left += viewportSpacing.left;\n\t\tcontRect.right -= viewportSpacing.right;\n\t\tcontRect.bottom -= viewportSpacing.bottom;\n\t} else {\n\t\tcontRect = $container[ 0 ].getBoundingClientRect();\n\t}\n\n\ttopEdgeInBounds = elemRect.top >= contRect.top && elemRect.top <= contRect.bottom;\n\tbottomEdgeInBounds = elemRect.bottom >= contRect.top && elemRect.bottom <= contRect.bottom;\n\tleftEdgeInBounds = elemRect.left >= contRect.left && elemRect.left <= contRect.right;\n\trightEdgeInBounds = elemRect.right >= contRect.left && elemRect.right <= contRect.right;\n\tif ( direction === 'rtl' ) {\n\t\tstartEdgeInBounds = rightEdgeInBounds;\n\t\tendEdgeInBounds = leftEdgeInBounds;\n\t} else {\n\t\tstartEdgeInBounds = leftEdgeInBounds;\n\t\tendEdgeInBounds = rightEdgeInBounds;\n\t}\n\n\tif ( this.verticalPosition === 'below' && !bottomEdgeInBounds ) {\n\t\treturn false;\n\t}\n\tif ( this.verticalPosition === 'above' && !topEdgeInBounds ) {\n\t\treturn false;\n\t}\n\tif ( this.horizontalPosition === 'before' && !startEdgeInBounds ) {\n\t\treturn false;\n\t}\n\tif ( this.horizontalPosition === 'after' && !endEdgeInBounds ) {\n\t\treturn false;\n\t}\n\n\t// The other positioning values are all about being inside the container,\n\t// so in those cases all we care about is that any part of the container is visible.\n\treturn elemRect.top <= contRect.bottom && elemRect.bottom >= contRect.top &&\n\t\telemRect.left <= contRect.right && elemRect.right >= contRect.left;\n};\n\n/**\n * Check if the floatable is hidden to the user because it was offscreen.\n *\n * @return {boolean} Floatable is out of view\n */\nOO.ui.mixin.FloatableElement.prototype.isFloatableOutOfView = function () {\n\treturn this.floatableOutOfView;\n};\n\n/**\n * Position the floatable below its container.\n *\n * This should only be done when both of them are attached to the DOM and visible.\n *\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.FloatableElement.prototype.position = function () {\n\tif ( !this.positioning ) {\n\t\treturn this;\n\t}\n\n\tif ( !(\n\t\t// To continue, some things need to be true:\n\t\t// The element must actually be in the DOM\n\t\tthis.isElementAttached() && (\n\t\t\t// The closest scrollable is the current window\n\t\t\tthis.$floatableClosestScrollable[ 0 ] === this.getElementWindow() ||\n\t\t\t// OR is an element in the element's DOM\n\t\t\t$.contains( this.getElementDocument(), this.$floatableClosestScrollable[ 0 ] )\n\t\t)\n\t) ) {\n\t\t// Abort early if important parts of the widget are no longer attached to the DOM\n\t\treturn this;\n\t}\n\n\tthis.floatableOutOfView = this.hideWhenOutOfView &&\n\t\t!this.isElementInViewport( this.$floatableContainer, this.$floatableClosestScrollable );\n\tif ( this.floatableOutOfView ) {\n\t\tthis.$floatable.addClass( 'oo-ui-element-hidden' );\n\t\treturn this;\n\t} else {\n\t\tthis.$floatable.removeClass( 'oo-ui-element-hidden' );\n\t}\n\n\tthis.$floatable.css( this.computePosition() );\n\n\t// We updated the position, so re-evaluate the clipping state.\n\t// (ClippableElement does not listen to 'scroll' events on $floatableContainer's parent, and so\n\t// will not notice the need to update itself.)\n\t// TODO: This is terrible, we shouldn't need to know about ClippableElement at all here.\n\t// Why does it not listen to the right events in the right places?\n\tif ( this.clip ) {\n\t\tthis.clip();\n\t}\n\n\treturn this;\n};\n\n/**\n * Compute how #$floatable should be positioned based on the position of #$floatableContainer\n * and the positioning settings. This is a helper for #position that shouldn't be called directly,\n * but may be overridden by subclasses if they want to change or add to the positioning logic.\n *\n * @return {Object} New position to apply with .css(). Keys are 'top', 'left', 'bottom' and 'right'.\n */\nOO.ui.mixin.FloatableElement.prototype.computePosition = function () {\n\tvar isBody, scrollableX, scrollableY, containerPos,\n\t\thorizScrollbarHeight, vertScrollbarWidth, scrollTop, scrollLeft,\n\t\tnewPos = { top: '', left: '', bottom: '', right: '' },\n\t\tdirection = this.$floatableContainer.css( 'direction' ),\n\t\t$offsetParent = this.$floatable.offsetParent();\n\n\tif ( $offsetParent.is( 'html' ) ) {\n\t\t// The innerHeight/Width and clientHeight/Width calculations don't work well on the\n\t\t// element, but they do work on the \n\t\t$offsetParent = $( $offsetParent[ 0 ].ownerDocument.body );\n\t}\n\tisBody = $offsetParent.is( 'body' );\n\tscrollableX = $offsetParent.css( 'overflow-x' ) === 'scroll' ||\n\t\t$offsetParent.css( 'overflow-x' ) === 'auto';\n\tscrollableY = $offsetParent.css( 'overflow-y' ) === 'scroll' ||\n\t\t$offsetParent.css( 'overflow-y' ) === 'auto';\n\n\tvertScrollbarWidth = $offsetParent.innerWidth() - $offsetParent.prop( 'clientWidth' );\n\thorizScrollbarHeight = $offsetParent.innerHeight() - $offsetParent.prop( 'clientHeight' );\n\t// We don't need to compute and add scrollTop and scrollLeft if the scrollable container\n\t// is the body, or if it isn't scrollable\n\tscrollTop = scrollableY && !isBody ?\n\t\t$offsetParent.scrollTop() : 0;\n\tscrollLeft = scrollableX && !isBody ?\n\t\tOO.ui.Element.static.getScrollLeft( $offsetParent[ 0 ] ) : 0;\n\n\t// Avoid passing the to getRelativePosition(), because it won't return what we expect\n\t// if the has a margin\n\tcontainerPos = isBody ?\n\t\tthis.$floatableContainer.offset() :\n\t\tOO.ui.Element.static.getRelativePosition( this.$floatableContainer, $offsetParent );\n\tcontainerPos.bottom = containerPos.top + this.$floatableContainer.outerHeight();\n\tcontainerPos.right = containerPos.left + this.$floatableContainer.outerWidth();\n\tcontainerPos.start = direction === 'rtl' ? containerPos.right : containerPos.left;\n\tcontainerPos.end = direction === 'rtl' ? containerPos.left : containerPos.right;\n\n\tif ( this.verticalPosition === 'below' ) {\n\t\tnewPos.top = containerPos.bottom;\n\t} else if ( this.verticalPosition === 'above' ) {\n\t\tnewPos.bottom = $offsetParent.outerHeight() - containerPos.top;\n\t} else if ( this.verticalPosition === 'top' ) {\n\t\tnewPos.top = containerPos.top;\n\t} else if ( this.verticalPosition === 'bottom' ) {\n\t\tnewPos.bottom = $offsetParent.outerHeight() - containerPos.bottom;\n\t} else if ( this.verticalPosition === 'center' ) {\n\t\tnewPos.top = containerPos.top +\n\t\t\t( this.$floatableContainer.height() - this.$floatable.height() ) / 2;\n\t}\n\n\tif ( this.horizontalPosition === 'before' ) {\n\t\tnewPos.end = containerPos.start;\n\t} else if ( this.horizontalPosition === 'after' ) {\n\t\tnewPos.start = containerPos.end;\n\t} else if ( this.horizontalPosition === 'start' ) {\n\t\tnewPos.start = containerPos.start;\n\t} else if ( this.horizontalPosition === 'end' ) {\n\t\tnewPos.end = containerPos.end;\n\t} else if ( this.horizontalPosition === 'center' ) {\n\t\tnewPos.left = containerPos.left +\n\t\t\t( this.$floatableContainer.width() - this.$floatable.width() ) / 2;\n\t}\n\n\tif ( newPos.start !== undefined ) {\n\t\tif ( direction === 'rtl' ) {\n\t\t\tnewPos.right = ( isBody ? $( $offsetParent[ 0 ].ownerDocument.documentElement ) :\n\t\t\t\t$offsetParent ).outerWidth() - newPos.start;\n\t\t} else {\n\t\t\tnewPos.left = newPos.start;\n\t\t}\n\t\tdelete newPos.start;\n\t}\n\tif ( newPos.end !== undefined ) {\n\t\tif ( direction === 'rtl' ) {\n\t\t\tnewPos.left = newPos.end;\n\t\t} else {\n\t\t\tnewPos.right = ( isBody ? $( $offsetParent[ 0 ].ownerDocument.documentElement ) :\n\t\t\t\t$offsetParent ).outerWidth() - newPos.end;\n\t\t}\n\t\tdelete newPos.end;\n\t}\n\n\t// Account for scroll position\n\tif ( newPos.top !== '' ) {\n\t\tnewPos.top += scrollTop;\n\t}\n\tif ( newPos.bottom !== '' ) {\n\t\tnewPos.bottom -= scrollTop;\n\t}\n\tif ( newPos.left !== '' ) {\n\t\tnewPos.left += scrollLeft;\n\t}\n\tif ( newPos.right !== '' ) {\n\t\tnewPos.right -= scrollLeft;\n\t}\n\n\t// Account for scrollbar gutter\n\tif ( newPos.bottom !== '' ) {\n\t\tnewPos.bottom -= horizScrollbarHeight;\n\t}\n\tif ( direction === 'rtl' ) {\n\t\tif ( newPos.left !== '' ) {\n\t\t\tnewPos.left -= vertScrollbarWidth;\n\t\t}\n\t} else {\n\t\tif ( newPos.right !== '' ) {\n\t\t\tnewPos.right -= vertScrollbarWidth;\n\t\t}\n\t}\n\n\treturn newPos;\n};\n","/**\n * Element that can be automatically clipped to visible boundaries.\n *\n * Whenever the element's natural height changes, you have to call\n * {@link OO.ui.mixin.ClippableElement#clip} to make sure it's still\n * clipping correctly.\n *\n * The dimensions of #$clippableContainer will be compared to the boundaries of the\n * nearest scrollable container. If #$clippableContainer is too tall and/or too wide,\n * then #$clippable will be given a fixed reduced height and/or width and will be made\n * scrollable. By default, #$clippable and #$clippableContainer are the same element,\n * but you can build a static footer by setting #$clippableContainer to an element that contains\n * #$clippable and the footer.\n *\n * @abstract\n * @class\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {jQuery} [$clippable] Node to clip, assigned to #$clippable, omit to use #$element\n * @cfg {jQuery} [$clippableContainer] Node to keep visible, assigned to #$clippableContainer,\n * omit to use #$clippable\n */\nOO.ui.mixin.ClippableElement = function OoUiMixinClippableElement( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties\n\tthis.$clippable = null;\n\tthis.$clippableContainer = null;\n\tthis.clipping = false;\n\tthis.clippedHorizontally = false;\n\tthis.clippedVertically = false;\n\tthis.$clippableScrollableContainer = null;\n\tthis.$clippableScroller = null;\n\tthis.$clippableWindow = null;\n\tthis.idealWidth = null;\n\tthis.idealHeight = null;\n\tthis.onClippableScrollHandler = this.clip.bind( this );\n\tthis.onClippableWindowResizeHandler = this.clip.bind( this );\n\n\t// Initialization\n\tif ( config.$clippableContainer ) {\n\t\tthis.setClippableContainer( config.$clippableContainer );\n\t}\n\tthis.setClippableElement( config.$clippable || this.$element );\n};\n\n/* Methods */\n\n/**\n * Set clippable element.\n *\n * If an element is already set, it will be cleaned up before setting up the new element.\n *\n * @param {jQuery} $clippable Element to make clippable\n */\nOO.ui.mixin.ClippableElement.prototype.setClippableElement = function ( $clippable ) {\n\tif ( this.$clippable ) {\n\t\tthis.$clippable.removeClass( 'oo-ui-clippableElement-clippable' );\n\t\tthis.$clippable.css( { width: '', height: '', overflowX: '', overflowY: '' } );\n\t\tOO.ui.Element.static.reconsiderScrollbars( this.$clippable[ 0 ] );\n\t}\n\n\tthis.$clippable = $clippable.addClass( 'oo-ui-clippableElement-clippable' );\n\tthis.clip();\n};\n\n/**\n * Set clippable container.\n *\n * This is the container that will be measured when deciding whether to clip. When clipping,\n * #$clippable will be resized in order to keep the clippable container fully visible.\n *\n * If the clippable container is unset, #$clippable will be used.\n *\n * @param {jQuery|null} $clippableContainer Container to keep visible, or null to unset\n */\nOO.ui.mixin.ClippableElement.prototype.setClippableContainer = function ( $clippableContainer ) {\n\tthis.$clippableContainer = $clippableContainer;\n\tif ( this.$clippable ) {\n\t\tthis.clip();\n\t}\n};\n\n/**\n * Toggle clipping.\n *\n * Do not turn clipping on until after the element is attached to the DOM and visible.\n *\n * @param {boolean} [clipping] Enable clipping, omit to toggle\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.ClippableElement.prototype.toggleClipping = function ( clipping ) {\n\tclipping = clipping === undefined ? !this.clipping : !!clipping;\n\n\tif ( clipping && !this.warnedUnattached && !this.isElementAttached() ) {\n\t\tOO.ui.warnDeprecation( 'ClippableElement#toggleClipping: Before calling this method, the element must be attached to the DOM.' );\n\t\tthis.warnedUnattached = true;\n\t}\n\n\tif ( this.clipping !== clipping ) {\n\t\tthis.clipping = clipping;\n\t\tif ( clipping ) {\n\t\t\tthis.$clippableScrollableContainer = $( this.getClosestScrollableElementContainer() );\n\t\t\t// If the clippable container is the root, we have to listen to scroll events and check\n\t\t\t// jQuery.scrollTop on the window because of browser inconsistencies\n\t\t\tthis.$clippableScroller = this.$clippableScrollableContainer.is( 'html, body' ) ?\n\t\t\t\t$( OO.ui.Element.static.getWindow( this.$clippableScrollableContainer ) ) :\n\t\t\t\tthis.$clippableScrollableContainer;\n\t\t\tthis.$clippableScroller.on( 'scroll', this.onClippableScrollHandler );\n\t\t\tthis.$clippableWindow = $( this.getElementWindow() )\n\t\t\t\t.on( 'resize', this.onClippableWindowResizeHandler );\n\t\t\t// Initial clip after visible\n\t\t\tthis.clip();\n\t\t} else {\n\t\t\tthis.$clippable.css( {\n\t\t\t\twidth: '',\n\t\t\t\theight: '',\n\t\t\t\tmaxWidth: '',\n\t\t\t\tmaxHeight: '',\n\t\t\t\toverflowX: '',\n\t\t\t\toverflowY: ''\n\t\t\t} );\n\t\t\tOO.ui.Element.static.reconsiderScrollbars( this.$clippable[ 0 ] );\n\n\t\t\tthis.$clippableScrollableContainer = null;\n\t\t\tthis.$clippableScroller.off( 'scroll', this.onClippableScrollHandler );\n\t\t\tthis.$clippableScroller = null;\n\t\t\tthis.$clippableWindow.off( 'resize', this.onClippableWindowResizeHandler );\n\t\t\tthis.$clippableWindow = null;\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Check if the element will be clipped to fit the visible area of the nearest scrollable container.\n *\n * @return {boolean} Element will be clipped to the visible area\n */\nOO.ui.mixin.ClippableElement.prototype.isClipping = function () {\n\treturn this.clipping;\n};\n\n/**\n * Check if the bottom or right of the element is being clipped by the nearest scrollable container.\n *\n * @return {boolean} Part of the element is being clipped\n */\nOO.ui.mixin.ClippableElement.prototype.isClipped = function () {\n\treturn this.clippedHorizontally || this.clippedVertically;\n};\n\n/**\n * Check if the right of the element is being clipped by the nearest scrollable container.\n *\n * @return {boolean} Part of the element is being clipped\n */\nOO.ui.mixin.ClippableElement.prototype.isClippedHorizontally = function () {\n\treturn this.clippedHorizontally;\n};\n\n/**\n * Check if the bottom of the element is being clipped by the nearest scrollable container.\n *\n * @return {boolean} Part of the element is being clipped\n */\nOO.ui.mixin.ClippableElement.prototype.isClippedVertically = function () {\n\treturn this.clippedVertically;\n};\n\n/**\n * Set the ideal size. These are the dimensions #$clippable will have when it's not being clipped.\n *\n * @param {number|string} [width] Width as a number of pixels or CSS string with unit suffix\n * @param {number|string} [height] Height as a number of pixels or CSS string with unit suffix\n */\nOO.ui.mixin.ClippableElement.prototype.setIdealSize = function ( width, height ) {\n\tthis.idealWidth = width;\n\tthis.idealHeight = height;\n\n\tif ( !this.clipping ) {\n\t\t// Update dimensions\n\t\tthis.$clippable.css( { width: width, height: height } );\n\t}\n\t// While clipping, idealWidth and idealHeight are not considered\n};\n\n/**\n * Return the side of the clippable on which it is \"anchored\" (aligned to something else).\n * ClippableElement will clip the opposite side when reducing element's width.\n *\n * Classes that mix in ClippableElement should override this to return 'right' if their\n * clippable is absolutely positioned and using 'right: Npx' (and not using 'left').\n * If your class also mixes in FloatableElement, this is handled automatically.\n *\n * (This can't be guessed from the actual CSS because the computed values for 'left'/'right' are\n * always in pixels, even if they were unset or set to 'auto'.)\n *\n * When in doubt, 'left' (or 'right' in RTL) is a sane fallback.\n *\n * @return {string} 'left' or 'right'\n */\nOO.ui.mixin.ClippableElement.prototype.getHorizontalAnchorEdge = function () {\n\tif ( this.computePosition && this.positioning && this.computePosition().right !== '' ) {\n\t\treturn 'right';\n\t}\n\treturn 'left';\n};\n\n/**\n * Return the side of the clippable on which it is \"anchored\" (aligned to something else).\n * ClippableElement will clip the opposite side when reducing element's width.\n *\n * Classes that mix in ClippableElement should override this to return 'bottom' if their\n * clippable is absolutely positioned and using 'bottom: Npx' (and not using 'top').\n * If your class also mixes in FloatableElement, this is handled automatically.\n *\n * (This can't be guessed from the actual CSS because the computed values for 'left'/'right' are\n * always in pixels, even if they were unset or set to 'auto'.)\n *\n * When in doubt, 'top' is a sane fallback.\n *\n * @return {string} 'top' or 'bottom'\n */\nOO.ui.mixin.ClippableElement.prototype.getVerticalAnchorEdge = function () {\n\tif ( this.computePosition && this.positioning && this.computePosition().bottom !== '' ) {\n\t\treturn 'bottom';\n\t}\n\treturn 'top';\n};\n\n/**\n * Clip element to visible boundaries and allow scrolling when needed. You should call this method\n * when the element's natural height changes.\n *\n * Element will be clipped the bottom or right of the element is within 10px of the edge of, or\n * overlapped by, the visible area of the nearest scrollable container.\n *\n * Because calling clip() when the natural height changes isn't always possible, we also set\n * max-height when the element isn't being clipped. This means that if the element tries to grow\n * beyond the edge, something reasonable will happen before clip() is called.\n *\n * @chainable\n * @return {OO.ui.Element} The element, for chaining\n */\nOO.ui.mixin.ClippableElement.prototype.clip = function () {\n\tvar extraHeight, extraWidth, viewportSpacing,\n\t\tdesiredWidth, desiredHeight, allotedWidth, allotedHeight,\n\t\tnaturalWidth, naturalHeight, clipWidth, clipHeight,\n\t\t$item, itemRect, $viewport, viewportRect, availableRect,\n\t\tdirection, vertScrollbarWidth, horizScrollbarHeight,\n\t\t// Extra tolerance so that the sloppy code below doesn't result in results that are off\n\t\t// by one or two pixels. (And also so that we have space to display drop shadows.)\n\t\t// Chosen by fair dice roll.\n\t\tbuffer = 7;\n\n\tif ( !this.clipping ) {\n\t\t// this.$clippableScrollableContainer and this.$clippableWindow are null, so the below\n\t\t// will fail\n\t\treturn this;\n\t}\n\n\tfunction rectIntersection( a, b ) {\n\t\tvar out = {};\n\t\tout.top = Math.max( a.top, b.top );\n\t\tout.left = Math.max( a.left, b.left );\n\t\tout.bottom = Math.min( a.bottom, b.bottom );\n\t\tout.right = Math.min( a.right, b.right );\n\t\treturn out;\n\t}\n\n\tviewportSpacing = OO.ui.getViewportSpacing();\n\n\tif ( this.$clippableScrollableContainer.is( 'html, body' ) ) {\n\t\t$viewport = $( this.$clippableScrollableContainer[ 0 ].ownerDocument.body );\n\t\t// Dimensions of the browser window, rather than the element!\n\t\tviewportRect = {\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t\tright: document.documentElement.clientWidth,\n\t\t\tbottom: document.documentElement.clientHeight\n\t\t};\n\t\tviewportRect.top += viewportSpacing.top;\n\t\tviewportRect.left += viewportSpacing.left;\n\t\tviewportRect.right -= viewportSpacing.right;\n\t\tviewportRect.bottom -= viewportSpacing.bottom;\n\t} else {\n\t\t$viewport = this.$clippableScrollableContainer;\n\t\tviewportRect = $viewport[ 0 ].getBoundingClientRect();\n\t\t// Convert into a plain object\n\t\tviewportRect = $.extend( {}, viewportRect );\n\t}\n\n\t// Account for scrollbar gutter\n\tdirection = $viewport.css( 'direction' );\n\tvertScrollbarWidth = $viewport.innerWidth() - $viewport.prop( 'clientWidth' );\n\thorizScrollbarHeight = $viewport.innerHeight() - $viewport.prop( 'clientHeight' );\n\tviewportRect.bottom -= horizScrollbarHeight;\n\tif ( direction === 'rtl' ) {\n\t\tviewportRect.left += vertScrollbarWidth;\n\t} else {\n\t\tviewportRect.right -= vertScrollbarWidth;\n\t}\n\n\t// Add arbitrary tolerance\n\tviewportRect.top += buffer;\n\tviewportRect.left += buffer;\n\tviewportRect.right -= buffer;\n\tviewportRect.bottom -= buffer;\n\n\t$item = this.$clippableContainer || this.$clippable;\n\n\textraHeight = $item.outerHeight() - this.$clippable.outerHeight();\n\textraWidth = $item.outerWidth() - this.$clippable.outerWidth();\n\n\titemRect = $item[ 0 ].getBoundingClientRect();\n\t// Convert into a plain object\n\titemRect = $.extend( {}, itemRect );\n\n\t// Item might already be clipped, so we can't just use its dimensions (in case we might need to\n\t// make it larger than before). Extend the rectangle to the maximum size we are allowed to take.\n\tif ( this.getHorizontalAnchorEdge() === 'right' ) {\n\t\titemRect.left = viewportRect.left;\n\t} else {\n\t\titemRect.right = viewportRect.right;\n\t}\n\tif ( this.getVerticalAnchorEdge() === 'bottom' ) {\n\t\titemRect.top = viewportRect.top;\n\t} else {\n\t\titemRect.bottom = viewportRect.bottom;\n\t}\n\n\tavailableRect = rectIntersection( viewportRect, itemRect );\n\n\tdesiredWidth = Math.max( 0, availableRect.right - availableRect.left );\n\tdesiredHeight = Math.max( 0, availableRect.bottom - availableRect.top );\n\t// It should never be desirable to exceed the dimensions of the browser viewport... right?\n\tdesiredWidth = Math.min( desiredWidth,\n\t\tdocument.documentElement.clientWidth - viewportSpacing.left - viewportSpacing.right );\n\tdesiredHeight = Math.min( desiredHeight,\n\t\tdocument.documentElement.clientHeight - viewportSpacing.top - viewportSpacing.right );\n\tallotedWidth = Math.ceil( desiredWidth - extraWidth );\n\tallotedHeight = Math.ceil( desiredHeight - extraHeight );\n\tnaturalWidth = this.$clippable.prop( 'scrollWidth' );\n\tnaturalHeight = this.$clippable.prop( 'scrollHeight' );\n\tclipWidth = allotedWidth < naturalWidth;\n\tclipHeight = allotedHeight < naturalHeight;\n\n\tif ( clipWidth ) {\n\t\t// The order matters here. If overflow is not set first, Chrome displays bogus scrollbars.\n\t\t// See T157672.\n\t\t// Forcing a reflow is a smaller workaround than calling reconsiderScrollbars() for\n\t\t// this case.\n\t\tthis.$clippable.css( 'overflowX', 'scroll' );\n\t\t// eslint-disable-next-line no-void\n\t\tvoid this.$clippable[ 0 ].offsetHeight; // Force reflow\n\t\tthis.$clippable.css( {\n\t\t\twidth: Math.max( 0, allotedWidth ),\n\t\t\tmaxWidth: ''\n\t\t} );\n\t} else {\n\t\tthis.$clippable.css( {\n\t\t\toverflowX: '',\n\t\t\twidth: this.idealWidth || '',\n\t\t\tmaxWidth: Math.max( 0, allotedWidth )\n\t\t} );\n\t}\n\tif ( clipHeight ) {\n\t\t// The order matters here. If overflow is not set first, Chrome displays bogus scrollbars.\n\t\t// See T157672.\n\t\t// Forcing a reflow is a smaller workaround than calling reconsiderScrollbars() for\n\t\t// this case.\n\t\tthis.$clippable.css( 'overflowY', 'scroll' );\n\t\t// eslint-disable-next-line no-void\n\t\tvoid this.$clippable[ 0 ].offsetHeight; // Force reflow\n\t\tthis.$clippable.css( {\n\t\t\theight: Math.max( 0, allotedHeight ),\n\t\t\tmaxHeight: ''\n\t\t} );\n\t} else {\n\t\tthis.$clippable.css( {\n\t\t\toverflowY: '',\n\t\t\theight: this.idealHeight || '',\n\t\t\tmaxHeight: Math.max( 0, allotedHeight )\n\t\t} );\n\t}\n\n\t// If we stopped clipping in at least one of the dimensions\n\tif ( ( this.clippedHorizontally && !clipWidth ) || ( this.clippedVertically && !clipHeight ) ) {\n\t\tOO.ui.Element.static.reconsiderScrollbars( this.$clippable[ 0 ] );\n\t}\n\n\tthis.clippedHorizontally = clipWidth;\n\tthis.clippedVertically = clipHeight;\n\n\treturn this;\n};\n","/**\n * PopupWidget is a container for content. The popup is overlaid and positioned absolutely.\n * By default, each popup has an anchor that points toward its origin.\n * Please see the [OOUI documentation on MediaWiki.org] [1] for more information and examples.\n *\n * Unlike most widgets, PopupWidget is initially hidden and must be shown by calling #toggle.\n *\n * @example\n * // A PopupWidget.\n * var popup = new OO.ui.PopupWidget( {\n * $content: $( '

Hi there!

' ),\n * padded: true,\n * width: 300\n * } );\n *\n * $( document.body ).append( popup.$element );\n * // To display the popup, toggle the visibility to 'true'.\n * popup.toggle( true );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Popups\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.ClippableElement\n * @mixins OO.ui.mixin.FloatableElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {number|null} [width=320] Width of popup in pixels. Pass `null` to use automatic width.\n * @cfg {number|null} [height=null] Height of popup in pixels. Pass `null` to use automatic height.\n * @cfg {boolean} [anchor=true] Show anchor pointing to origin of popup\n * @cfg {string} [position='below'] Where to position the popup relative to $floatableContainer\n * 'above': Put popup above $floatableContainer; anchor points down to the horizontal center\n * of $floatableContainer\n * 'below': Put popup below $floatableContainer; anchor points up to the horizontal center\n * of $floatableContainer\n * 'before': Put popup to the left (LTR) / right (RTL) of $floatableContainer; anchor points\n * endwards (right/left) to the vertical center of $floatableContainer\n * 'after': Put popup to the right (LTR) / left (RTL) of $floatableContainer; anchor points\n * startwards (left/right) to the vertical center of $floatableContainer\n * @cfg {string} [align='center'] How to align the popup to $floatableContainer\n * 'forwards': If position is above/below, move the popup as far endwards (right in LTR, left in\n * RTL) as possible while still keeping the anchor within the popup; if position is before/after,\n * move the popup as far downwards as possible.\n * 'backwards': If position is above/below, move the popup as far startwards (left in LTR, right in\n * RTL) as possible while still keeping the anchor within the popup; if position is before/after,\n * move the popup as far upwards as possible.\n * 'center': Horizontally (if position is above/below) or vertically (before/after) align the\n * center of the popup with the center of $floatableContainer.\n * 'force-left': Alias for 'forwards' in LTR and 'backwards' in RTL\n * 'force-right': Alias for 'backwards' in RTL and 'forwards' in LTR\n * @cfg {boolean} [autoFlip=true] Whether to automatically switch the popup's position between\n * 'above' and 'below', or between 'before' and 'after', if there is not enough space in the\n * desired direction to display the popup without clipping\n * @cfg {jQuery} [$container] Constrain the popup to the boundaries of the specified container.\n * See the [OOUI docs on MediaWiki][3] for an example.\n * [3]: https://www.mediawiki.org/wiki/OOUI/Widgets/Popups#containerExample\n * @cfg {number} [containerPadding=10] Padding between the popup and its container, specified as a\n * number of pixels.\n * @cfg {jQuery} [$content] Content to append to the popup's body\n * @cfg {jQuery} [$footer] Content to append to the popup's footer\n * @cfg {boolean} [autoClose=false] Automatically close the popup when it loses focus.\n * @cfg {jQuery} [$autoCloseIgnore] Elements that will not close the popup when clicked.\n * This config option is only relevant if #autoClose is set to `true`. See the\n * [OOUI documentation on MediaWiki][2] for an example.\n * [2]: https://www.mediawiki.org/wiki/OOUI/Widgets/Popups#autocloseExample\n * @cfg {boolean} [head=false] Show a popup header that contains a #label (if specified) and close\n * button.\n * @cfg {boolean} [padded=false] Add padding to the popup's body\n */\nOO.ui.PopupWidget = function OoUiPopupWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.PopupWidget.parent.call( this, config );\n\n\t// Properties (must be set before ClippableElement constructor call)\n\tthis.$body = $( '
' );\n\tthis.$popup = $( '
' );\n\n\t// Mixin constructors\n\tOO.ui.mixin.LabelElement.call( this, config );\n\tOO.ui.mixin.ClippableElement.call( this, $.extend( {\n\t\t$clippable: this.$body,\n\t\t$clippableContainer: this.$popup\n\t}, config ) );\n\tOO.ui.mixin.FloatableElement.call( this, config );\n\n\t// Properties\n\tthis.$anchor = $( '
' );\n\t// If undefined, will be computed lazily in computePosition()\n\tthis.$container = config.$container;\n\tthis.containerPadding = config.containerPadding !== undefined ? config.containerPadding : 10;\n\tthis.autoClose = !!config.autoClose;\n\tthis.transitionTimeout = null;\n\tthis.anchored = false;\n\tthis.onDocumentMouseDownHandler = this.onDocumentMouseDown.bind( this );\n\tthis.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this );\n\n\t// Initialization\n\tthis.setSize( config.width, config.height );\n\tthis.toggleAnchor( config.anchor === undefined || config.anchor );\n\tthis.setAlignment( config.align || 'center' );\n\tthis.setPosition( config.position || 'below' );\n\tthis.setAutoFlip( config.autoFlip === undefined || config.autoFlip );\n\tthis.setAutoCloseIgnore( config.$autoCloseIgnore );\n\tthis.$body.addClass( 'oo-ui-popupWidget-body' );\n\tthis.$anchor.addClass( 'oo-ui-popupWidget-anchor' );\n\tthis.$popup\n\t\t.addClass( 'oo-ui-popupWidget-popup' )\n\t\t.append( this.$body );\n\tthis.$element\n\t\t.addClass( 'oo-ui-popupWidget' )\n\t\t.append( this.$popup, this.$anchor );\n\t// Move content, which was added to #$element by OO.ui.Widget, to the body\n\t// FIXME This is gross, we should use '$body' or something for the config\n\tif ( config.$content instanceof $ ) {\n\t\tthis.$body.append( config.$content );\n\t}\n\n\tif ( config.padded ) {\n\t\tthis.$body.addClass( 'oo-ui-popupWidget-body-padded' );\n\t}\n\n\tif ( config.head ) {\n\t\tthis.closeButton = new OO.ui.ButtonWidget( {\n\t\t\tframed: false,\n\t\t\ticon: 'close'\n\t\t} );\n\t\tthis.closeButton.connect( this, {\n\t\t\tclick: 'onCloseButtonClick'\n\t\t} );\n\t\tthis.$head = $( '
' )\n\t\t\t.addClass( 'oo-ui-popupWidget-head' )\n\t\t\t.append( this.$label, this.closeButton.$element );\n\t\tthis.$popup.prepend( this.$head );\n\t}\n\n\tif ( config.$footer ) {\n\t\tthis.$footer = $( '
' )\n\t\t\t.addClass( 'oo-ui-popupWidget-footer' )\n\t\t\t.append( config.$footer );\n\t\tthis.$popup.append( this.$footer );\n\t}\n\n\t// Initially hidden - using #toggle may cause errors if subclasses override toggle with methods\n\t// that reference properties not initialized at that time of parent class construction\n\t// TODO: Find a better way to handle post-constructor setup\n\tthis.visible = false;\n\tthis.$element.addClass( 'oo-ui-element-hidden' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.PopupWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.PopupWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.PopupWidget, OO.ui.mixin.ClippableElement );\nOO.mixinClass( OO.ui.PopupWidget, OO.ui.mixin.FloatableElement );\n\n/* Events */\n\n/**\n * @event ready\n *\n * The popup is ready: it is visible and has been positioned and clipped.\n */\n\n/* Methods */\n\n/**\n * Handles document mouse down events.\n *\n * @private\n * @param {MouseEvent} e Mouse down event\n */\nOO.ui.PopupWidget.prototype.onDocumentMouseDown = function ( e ) {\n\tif (\n\t\tthis.isVisible() &&\n\t\t!OO.ui.contains( this.$element.add( this.$autoCloseIgnore ).get(), e.target, true )\n\t) {\n\t\tthis.toggle( false );\n\t}\n};\n\n/**\n * Bind document mouse down listener.\n *\n * @private\n */\nOO.ui.PopupWidget.prototype.bindDocumentMouseDownListener = function () {\n\t// Capture clicks outside popup\n\tthis.getElementDocument().addEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );\n\t// We add 'click' event because iOS safari needs to respond to this event.\n\t// We can't use 'touchstart' (as is usually the equivalent to 'mousedown') because\n\t// then it will trigger when scrolling. While iOS Safari has some reported behavior\n\t// of occasionally not emitting 'click' properly, that event seems to be the standard\n\t// that it should be emitting, so we add it to this and will operate the event handler\n\t// on whichever of these events was triggered first\n\tthis.getElementDocument().addEventListener( 'click', this.onDocumentMouseDownHandler, true );\n};\n\n/**\n * Handles close button click events.\n *\n * @private\n */\nOO.ui.PopupWidget.prototype.onCloseButtonClick = function () {\n\tif ( this.isVisible() ) {\n\t\tthis.toggle( false );\n\t}\n};\n\n/**\n * Unbind document mouse down listener.\n *\n * @private\n */\nOO.ui.PopupWidget.prototype.unbindDocumentMouseDownListener = function () {\n\tthis.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );\n\tthis.getElementDocument().removeEventListener( 'click', this.onDocumentMouseDownHandler, true );\n};\n\n/**\n * Handles document key down events.\n *\n * @private\n * @param {KeyboardEvent} e Key down event\n */\nOO.ui.PopupWidget.prototype.onDocumentKeyDown = function ( e ) {\n\tif (\n\t\te.which === OO.ui.Keys.ESCAPE &&\n\t\tthis.isVisible()\n\t) {\n\t\tthis.toggle( false );\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t}\n};\n\n/**\n * Bind document key down listener.\n *\n * @private\n */\nOO.ui.PopupWidget.prototype.bindDocumentKeyDownListener = function () {\n\tthis.getElementDocument().addEventListener( 'keydown', this.onDocumentKeyDownHandler, true );\n};\n\n/**\n * Unbind document key down listener.\n *\n * @private\n */\nOO.ui.PopupWidget.prototype.unbindDocumentKeyDownListener = function () {\n\tthis.getElementDocument().removeEventListener( 'keydown', this.onDocumentKeyDownHandler, true );\n};\n\n/**\n * Show, hide, or toggle the visibility of the anchor.\n *\n * @param {boolean} [show] Show anchor, omit to toggle\n */\nOO.ui.PopupWidget.prototype.toggleAnchor = function ( show ) {\n\tshow = show === undefined ? !this.anchored : !!show;\n\n\tif ( this.anchored !== show ) {\n\t\tif ( show ) {\n\t\t\tthis.$element.addClass( 'oo-ui-popupWidget-anchored' );\n\t\t\tthis.$element.addClass( 'oo-ui-popupWidget-anchored-' + this.anchorEdge );\n\t\t} else {\n\t\t\tthis.$element.removeClass( 'oo-ui-popupWidget-anchored' );\n\t\t\tthis.$element.removeClass( 'oo-ui-popupWidget-anchored-' + this.anchorEdge );\n\t\t}\n\t\tthis.anchored = show;\n\t}\n};\n\n/**\n * Change which edge the anchor appears on.\n *\n * @param {string} edge 'top', 'bottom', 'start' or 'end'\n */\nOO.ui.PopupWidget.prototype.setAnchorEdge = function ( edge ) {\n\tif ( [ 'top', 'bottom', 'start', 'end' ].indexOf( edge ) === -1 ) {\n\t\tthrow new Error( 'Invalid value for edge: ' + edge );\n\t}\n\tif ( this.anchorEdge !== null ) {\n\t\tthis.$element.removeClass( 'oo-ui-popupWidget-anchored-' + this.anchorEdge );\n\t}\n\tthis.anchorEdge = edge;\n\tif ( this.anchored ) {\n\t\tthis.$element.addClass( 'oo-ui-popupWidget-anchored-' + edge );\n\t}\n};\n\n/**\n * Check if the anchor is visible.\n *\n * @return {boolean} Anchor is visible\n */\nOO.ui.PopupWidget.prototype.hasAnchor = function () {\n\treturn this.anchored;\n};\n\n/**\n * Toggle visibility of the popup. The popup is initially hidden and must be shown by calling\n * `.toggle( true )` after its #$element is attached to the DOM.\n *\n * Do not show the popup while it is not attached to the DOM. The calculations required to display\n * it in the right place and with the right dimensions only work correctly while it is attached.\n * Side-effects may include broken interface and exceptions being thrown. This wasn't always\n * strictly enforced, so currently it only generates a warning in the browser console.\n *\n * @fires ready\n * @inheritdoc\n */\nOO.ui.PopupWidget.prototype.toggle = function ( show ) {\n\tvar change, normalHeight, oppositeHeight, normalWidth, oppositeWidth;\n\tshow = show === undefined ? !this.isVisible() : !!show;\n\n\tchange = show !== this.isVisible();\n\n\tif ( show && !this.warnedUnattached && !this.isElementAttached() ) {\n\t\tOO.ui.warnDeprecation( 'PopupWidget#toggle: Before calling this method, the popup must be attached to the DOM.' );\n\t\tthis.warnedUnattached = true;\n\t}\n\tif ( show && !this.$floatableContainer && this.isElementAttached() ) {\n\t\t// Fall back to the parent node if the floatableContainer is not set\n\t\tthis.setFloatableContainer( this.$element.parent() );\n\t}\n\n\tif ( change && show && this.autoFlip ) {\n\t\t// Reset auto-flipping before showing the popup again. It's possible we no longer need to\n\t\t// flip (e.g. if the user scrolled).\n\t\tthis.isAutoFlipped = false;\n\t}\n\n\t// Parent method\n\tOO.ui.PopupWidget.parent.prototype.toggle.call( this, show );\n\n\tif ( change ) {\n\t\tthis.togglePositioning( show && !!this.$floatableContainer );\n\n\t\tif ( show ) {\n\t\t\tif ( this.autoClose ) {\n\t\t\t\tthis.bindDocumentMouseDownListener();\n\t\t\t\tthis.bindDocumentKeyDownListener();\n\t\t\t}\n\t\t\tthis.updateDimensions();\n\t\t\tthis.toggleClipping( true );\n\n\t\t\tif ( this.autoFlip ) {\n\t\t\t\tif ( this.popupPosition === 'above' || this.popupPosition === 'below' ) {\n\t\t\t\t\tif ( this.isClippedVertically() || this.isFloatableOutOfView() ) {\n\t\t\t\t\t\t// If opening the popup in the normal direction causes it to be clipped,\n\t\t\t\t\t\t// open in the opposite one instead\n\t\t\t\t\t\tnormalHeight = this.$element.height();\n\t\t\t\t\t\tthis.isAutoFlipped = !this.isAutoFlipped;\n\t\t\t\t\t\tthis.position();\n\t\t\t\t\t\tif ( this.isClippedVertically() || this.isFloatableOutOfView() ) {\n\t\t\t\t\t\t\t// If that also causes it to be clipped, open in whichever direction\n\t\t\t\t\t\t\t// we have more space\n\t\t\t\t\t\t\toppositeHeight = this.$element.height();\n\t\t\t\t\t\t\tif ( oppositeHeight < normalHeight ) {\n\t\t\t\t\t\t\t\tthis.isAutoFlipped = !this.isAutoFlipped;\n\t\t\t\t\t\t\t\tthis.position();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif ( this.popupPosition === 'before' || this.popupPosition === 'after' ) {\n\t\t\t\t\tif ( this.isClippedHorizontally() || this.isFloatableOutOfView() ) {\n\t\t\t\t\t\t// If opening the popup in the normal direction causes it to be clipped,\n\t\t\t\t\t\t// open in the opposite one instead\n\t\t\t\t\t\tnormalWidth = this.$element.width();\n\t\t\t\t\t\tthis.isAutoFlipped = !this.isAutoFlipped;\n\t\t\t\t\t\t// Due to T180173 horizontally clipped PopupWidgets have messed up\n\t\t\t\t\t\t// dimensions, which causes positioning to be off. Toggle clipping back and\n\t\t\t\t\t\t// forth to work around.\n\t\t\t\t\t\tthis.toggleClipping( false );\n\t\t\t\t\t\tthis.position();\n\t\t\t\t\t\tthis.toggleClipping( true );\n\t\t\t\t\t\tif ( this.isClippedHorizontally() || this.isFloatableOutOfView() ) {\n\t\t\t\t\t\t\t// If that also causes it to be clipped, open in whichever direction\n\t\t\t\t\t\t\t// we have more space\n\t\t\t\t\t\t\toppositeWidth = this.$element.width();\n\t\t\t\t\t\t\tif ( oppositeWidth < normalWidth ) {\n\t\t\t\t\t\t\t\tthis.isAutoFlipped = !this.isAutoFlipped;\n\t\t\t\t\t\t\t\t// Due to T180173, horizontally clipped PopupWidgets have messed up\n\t\t\t\t\t\t\t\t// dimensions, which causes positioning to be off. Toggle clipping\n\t\t\t\t\t\t\t\t// back and forth to work around.\n\t\t\t\t\t\t\t\tthis.toggleClipping( false );\n\t\t\t\t\t\t\t\tthis.position();\n\t\t\t\t\t\t\t\tthis.toggleClipping( true );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.emit( 'ready' );\n\t\t} else {\n\t\t\tthis.toggleClipping( false );\n\t\t\tif ( this.autoClose ) {\n\t\t\t\tthis.unbindDocumentMouseDownListener();\n\t\t\t\tthis.unbindDocumentKeyDownListener();\n\t\t\t}\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Set the size of the popup.\n *\n * Changing the size may also change the popup's position depending on the alignment.\n *\n * @param {number|null} [width=320] Width in pixels. Pass `null` to use automatic width.\n * @param {number|null} [height=null] Height in pixels. Pass `null` to use automatic height.\n * @param {boolean} [transition=false] Use a smooth transition\n * @chainable\n */\nOO.ui.PopupWidget.prototype.setSize = function ( width, height, transition ) {\n\tthis.width = width !== undefined ? width : 320;\n\tthis.height = height !== undefined ? height : null;\n\tif ( this.isVisible() ) {\n\t\tthis.updateDimensions( transition );\n\t}\n};\n\n/**\n * Update the size and position.\n *\n * Only use this to keep the popup properly anchored. Use #setSize to change the size, and this will\n * be called automatically.\n *\n * @param {boolean} [transition=false] Use a smooth transition\n * @chainable\n */\nOO.ui.PopupWidget.prototype.updateDimensions = function ( transition ) {\n\tvar widget = this;\n\n\t// Prevent transition from being interrupted\n\tclearTimeout( this.transitionTimeout );\n\tif ( transition ) {\n\t\t// Enable transition\n\t\tthis.$element.addClass( 'oo-ui-popupWidget-transitioning' );\n\t}\n\n\tthis.position();\n\n\tif ( transition ) {\n\t\t// Prevent transitioning after transition is complete\n\t\tthis.transitionTimeout = setTimeout( function () {\n\t\t\twidget.$element.removeClass( 'oo-ui-popupWidget-transitioning' );\n\t\t}, 200 );\n\t} else {\n\t\t// Prevent transitioning immediately\n\t\tthis.$element.removeClass( 'oo-ui-popupWidget-transitioning' );\n\t}\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.PopupWidget.prototype.computePosition = function () {\n\tvar direction, align, vertical, start, end, near, far, sizeProp, popupSize, anchorSize,\n\t\tanchorPos, anchorOffset, anchorMargin, parentPosition, positionProp, positionAdjustment,\n\t\tfloatablePos, offsetParentPos, containerPos, popupPosition, viewportSpacing,\n\t\tpopupPos = {},\n\t\tanchorCss = { left: '', right: '', top: '', bottom: '' },\n\t\tpopupPositionOppositeMap = {\n\t\t\tabove: 'below',\n\t\t\tbelow: 'above',\n\t\t\tbefore: 'after',\n\t\t\tafter: 'before'\n\t\t},\n\t\talignMap = {\n\t\t\tltr: {\n\t\t\t\t'force-left': 'backwards',\n\t\t\t\t'force-right': 'forwards'\n\t\t\t},\n\t\t\trtl: {\n\t\t\t\t'force-left': 'forwards',\n\t\t\t\t'force-right': 'backwards'\n\t\t\t}\n\t\t},\n\t\tanchorEdgeMap = {\n\t\t\tabove: 'bottom',\n\t\t\tbelow: 'top',\n\t\t\tbefore: 'end',\n\t\t\tafter: 'start'\n\t\t},\n\t\thPosMap = {\n\t\t\tforwards: 'start',\n\t\t\tcenter: 'center',\n\t\t\tbackwards: this.anchored ? 'before' : 'end'\n\t\t},\n\t\tvPosMap = {\n\t\t\tforwards: 'top',\n\t\t\tcenter: 'center',\n\t\t\tbackwards: 'bottom'\n\t\t};\n\n\tif ( !this.$container ) {\n\t\t// Lazy-initialize $container if not specified in constructor\n\t\tthis.$container = $( this.getClosestScrollableElementContainer() );\n\t}\n\tdirection = this.$container.css( 'direction' );\n\n\t// Set height and width before we do anything else, since it might cause our measurements\n\t// to change (e.g. due to scrollbars appearing or disappearing), and it also affects centering\n\tthis.$popup.css( {\n\t\twidth: this.width !== null ? this.width : 'auto',\n\t\theight: this.height !== null ? this.height : 'auto'\n\t} );\n\n\talign = alignMap[ direction ][ this.align ] || this.align;\n\tpopupPosition = this.popupPosition;\n\tif ( this.isAutoFlipped ) {\n\t\tpopupPosition = popupPositionOppositeMap[ popupPosition ];\n\t}\n\n\t// If the popup is positioned before or after, then the anchor positioning is vertical,\n\t// otherwise horizontal\n\tvertical = popupPosition === 'before' || popupPosition === 'after';\n\tstart = vertical ? 'top' : ( direction === 'rtl' ? 'right' : 'left' );\n\tend = vertical ? 'bottom' : ( direction === 'rtl' ? 'left' : 'right' );\n\tnear = vertical ? 'top' : 'left';\n\tfar = vertical ? 'bottom' : 'right';\n\tsizeProp = vertical ? 'Height' : 'Width';\n\tpopupSize = vertical ?\n\t\t( this.height || this.$popup.height() ) :\n\t\t( this.width || this.$popup.width() );\n\n\tthis.setAnchorEdge( anchorEdgeMap[ popupPosition ] );\n\tthis.horizontalPosition = vertical ? popupPosition : hPosMap[ align ];\n\tthis.verticalPosition = vertical ? vPosMap[ align ] : popupPosition;\n\n\t// Parent method\n\tparentPosition = OO.ui.mixin.FloatableElement.prototype.computePosition.call( this );\n\t// Find out which property FloatableElement used for positioning, and adjust that value\n\tpositionProp = vertical ?\n\t\t( parentPosition.top !== '' ? 'top' : 'bottom' ) :\n\t\t( parentPosition.left !== '' ? 'left' : 'right' );\n\n\t// Figure out where the near and far edges of the popup and $floatableContainer are\n\tfloatablePos = this.$floatableContainer.offset();\n\tfloatablePos[ far ] = floatablePos[ near ] + this.$floatableContainer[ 'outer' + sizeProp ]();\n\t// Measure where the offsetParent is and compute our position based on that and parentPosition\n\toffsetParentPos = this.$element.offsetParent()[ 0 ] === document.documentElement ?\n\t\t{ top: 0, left: 0 } :\n\t\tthis.$element.offsetParent().offset();\n\n\tif ( positionProp === near ) {\n\t\tpopupPos[ near ] = offsetParentPos[ near ] + parentPosition[ near ];\n\t\tpopupPos[ far ] = popupPos[ near ] + popupSize;\n\t} else {\n\t\tpopupPos[ far ] = offsetParentPos[ near ] +\n\t\t\tthis.$element.offsetParent()[ 'inner' + sizeProp ]() - parentPosition[ far ];\n\t\tpopupPos[ near ] = popupPos[ far ] - popupSize;\n\t}\n\n\tif ( this.anchored ) {\n\t\t// Position the anchor (which is positioned relative to the popup) to point to\n\t\t// $floatableContainer\n\t\tanchorPos = ( floatablePos[ start ] + floatablePos[ end ] ) / 2;\n\t\tanchorOffset = ( start === far ? -1 : 1 ) * ( anchorPos - popupPos[ start ] );\n\n\t\t// If the anchor is less than 2*anchorSize from either edge, move the popup to make more\n\t\t// space this.$anchor.width()/height() returns 0 because of the CSS trickery we use, so use\n\t\t// scrollWidth/Height\n\t\tanchorSize = this.$anchor[ 0 ][ 'scroll' + sizeProp ];\n\t\tanchorMargin = parseFloat( this.$anchor.css( 'margin-' + start ) );\n\t\tif ( anchorOffset + anchorMargin < 2 * anchorSize ) {\n\t\t\t// Not enough space for the anchor on the start side; pull the popup startwards\n\t\t\tpositionAdjustment = ( positionProp === start ? -1 : 1 ) *\n\t\t\t\t( 2 * anchorSize - ( anchorOffset + anchorMargin ) );\n\t\t} else if ( anchorOffset + anchorMargin > popupSize - 2 * anchorSize ) {\n\t\t\t// Not enough space for the anchor on the end side; pull the popup endwards\n\t\t\tpositionAdjustment = ( positionProp === end ? -1 : 1 ) *\n\t\t\t\t( anchorOffset + anchorMargin - ( popupSize - 2 * anchorSize ) );\n\t\t} else {\n\t\t\tpositionAdjustment = 0;\n\t\t}\n\t} else {\n\t\tpositionAdjustment = 0;\n\t}\n\n\t// Check if the popup will go beyond the edge of this.$container\n\tcontainerPos = this.$container[ 0 ] === document.documentElement ?\n\t\t{ top: 0, left: 0 } :\n\t\tthis.$container.offset();\n\tcontainerPos[ far ] = containerPos[ near ] + this.$container[ 'inner' + sizeProp ]();\n\tif ( this.$container[ 0 ] === document.documentElement ) {\n\t\tviewportSpacing = OO.ui.getViewportSpacing();\n\t\tcontainerPos[ near ] += viewportSpacing[ near ];\n\t\tcontainerPos[ far ] -= viewportSpacing[ far ];\n\t}\n\t// Take into account how much the popup will move because of the adjustments we're going to make\n\tpopupPos[ near ] += ( positionProp === near ? 1 : -1 ) * positionAdjustment;\n\tpopupPos[ far ] += ( positionProp === near ? 1 : -1 ) * positionAdjustment;\n\tif ( containerPos[ near ] + this.containerPadding > popupPos[ near ] ) {\n\t\t// Popup goes beyond the near (left/top) edge, move it to the right/bottom\n\t\tpositionAdjustment += ( positionProp === near ? 1 : -1 ) *\n\t\t\t( containerPos[ near ] + this.containerPadding - popupPos[ near ] );\n\t} else if ( containerPos[ far ] - this.containerPadding < popupPos[ far ] ) {\n\t\t// Popup goes beyond the far (right/bottom) edge, move it to the left/top\n\t\tpositionAdjustment += ( positionProp === far ? 1 : -1 ) *\n\t\t\t( popupPos[ far ] - ( containerPos[ far ] - this.containerPadding ) );\n\t}\n\n\tif ( this.anchored ) {\n\t\t// Adjust anchorOffset for positionAdjustment\n\t\tanchorOffset += ( positionProp === start ? -1 : 1 ) * positionAdjustment;\n\n\t\t// Position the anchor\n\t\tanchorCss[ start ] = anchorOffset;\n\t\tthis.$anchor.css( anchorCss );\n\t}\n\n\t// Move the popup if needed\n\tparentPosition[ positionProp ] += positionAdjustment;\n\n\treturn parentPosition;\n};\n\n/**\n * Set popup alignment\n *\n * @param {string} [align=center] Alignment of the popup, `center`, `force-left`, `force-right`,\n * `backwards` or `forwards`.\n */\nOO.ui.PopupWidget.prototype.setAlignment = function ( align ) {\n\t// Validate alignment\n\tif ( [ 'force-left', 'force-right', 'backwards', 'forwards', 'center' ].indexOf( align ) > -1 ) {\n\t\tthis.align = align;\n\t} else {\n\t\tthis.align = 'center';\n\t}\n\tthis.position();\n};\n\n/**\n * Get popup alignment\n *\n * @return {string} Alignment of the popup, `center`, `force-left`, `force-right`,\n * `backwards` or `forwards`.\n */\nOO.ui.PopupWidget.prototype.getAlignment = function () {\n\treturn this.align;\n};\n\n/**\n * Change the positioning of the popup.\n *\n * @param {string} position 'above', 'below', 'before' or 'after'\n */\nOO.ui.PopupWidget.prototype.setPosition = function ( position ) {\n\tif ( [ 'above', 'below', 'before', 'after' ].indexOf( position ) === -1 ) {\n\t\tposition = 'below';\n\t}\n\tthis.popupPosition = position;\n\tthis.position();\n};\n\n/**\n * Get popup positioning.\n *\n * @return {string} 'above', 'below', 'before' or 'after'\n */\nOO.ui.PopupWidget.prototype.getPosition = function () {\n\treturn this.popupPosition;\n};\n\n/**\n * Set popup auto-flipping.\n *\n * @param {boolean} autoFlip Whether to automatically switch the popup's position between\n * 'above' and 'below', or between 'before' and 'after', if there is not enough space in the\n * desired direction to display the popup without clipping\n */\nOO.ui.PopupWidget.prototype.setAutoFlip = function ( autoFlip ) {\n\tautoFlip = !!autoFlip;\n\n\tif ( this.autoFlip !== autoFlip ) {\n\t\tthis.autoFlip = autoFlip;\n\t}\n};\n\n/**\n * Set which elements will not close the popup when clicked.\n *\n * For auto-closing popups, clicks on these elements will not cause the popup to auto-close.\n *\n * @param {jQuery} $autoCloseIgnore Elements to ignore for auto-closing\n */\nOO.ui.PopupWidget.prototype.setAutoCloseIgnore = function ( $autoCloseIgnore ) {\n\tthis.$autoCloseIgnore = $autoCloseIgnore;\n};\n\n/**\n * Get an ID of the body element, this can be used as the\n * `aria-describedby` attribute for an input field.\n *\n * @return {string} The ID of the body element\n */\nOO.ui.PopupWidget.prototype.getBodyId = function () {\n\tvar id = this.$body.attr( 'id' );\n\tif ( id === undefined ) {\n\t\tid = OO.ui.generateElementId();\n\t\tthis.$body.attr( 'id', id );\n\t}\n\treturn id;\n};\n","/**\n * PopupElement is mixed into other classes to generate a {@link OO.ui.PopupWidget popup widget}.\n * A popup is a container for content. It is overlaid and positioned absolutely. By default, each\n * popup has an anchor, which is an arrow-like protrusion that points toward the popup’s origin.\n * See {@link OO.ui.PopupWidget PopupWidget} for an example.\n *\n * @abstract\n * @class\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {Object} [popup] Configuration to pass to popup\n * @cfg {boolean} [popup.autoClose=true] Popup auto-closes when it loses focus\n */\nOO.ui.mixin.PopupElement = function OoUiMixinPopupElement( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties\n\tthis.popup = new OO.ui.PopupWidget( $.extend(\n\t\t{\n\t\t\tautoClose: true,\n\t\t\t$floatableContainer: this.$element\n\t\t},\n\t\tconfig.popup,\n\t\t{\n\t\t\t$autoCloseIgnore: this.$element.add( config.popup && config.popup.$autoCloseIgnore )\n\t\t}\n\t) );\n};\n\n/* Methods */\n\n/**\n * Get popup.\n *\n * @return {OO.ui.PopupWidget} Popup widget\n */\nOO.ui.mixin.PopupElement.prototype.getPopup = function () {\n\treturn this.popup;\n};\n","/**\n * PopupButtonWidgets toggle the visibility of a contained {@link OO.ui.PopupWidget PopupWidget},\n * which is used to display additional information or options.\n *\n * @example\n * // A PopupButtonWidget.\n * var popupButton = new OO.ui.PopupButtonWidget( {\n * label: 'Popup button with options',\n * icon: 'menu',\n * popup: {\n * $content: $( '

Additional options here.

' ),\n * padded: true,\n * align: 'force-left'\n * }\n * } );\n * // Append the button to the DOM.\n * $( document.body ).append( popupButton.$element );\n *\n * @class\n * @extends OO.ui.ButtonWidget\n * @mixins OO.ui.mixin.PopupElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful\n * in cases where the expanded popup is larger than its containing `
`. The specified overlay\n * layer is usually on top of the containing `
` and has a larger area. By default, the popup\n * uses relative positioning.\n * See .\n */\nOO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.PopupButtonWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.PopupElement.call( this, config );\n\n\t// Properties\n\tthis.$overlay = ( config.$overlay === true ?\n\t\tOO.ui.getDefaultOverlay() : config.$overlay ) || this.$element;\n\n\t// Events\n\tthis.connect( this, {\n\t\tclick: 'onAction'\n\t} );\n\n\t// Initialization\n\tthis.$element.addClass( 'oo-ui-popupButtonWidget' );\n\tthis.popup.$element\n\t\t.addClass( 'oo-ui-popupButtonWidget-popup' )\n\t\t.toggleClass( 'oo-ui-popupButtonWidget-framed-popup', this.isFramed() )\n\t\t.toggleClass( 'oo-ui-popupButtonWidget-frameless-popup', !this.isFramed() );\n\tthis.$overlay.append( this.popup.$element );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.PopupButtonWidget, OO.ui.ButtonWidget );\nOO.mixinClass( OO.ui.PopupButtonWidget, OO.ui.mixin.PopupElement );\n\n/* Methods */\n\n/**\n * Handle the button action being triggered.\n *\n * @private\n */\nOO.ui.PopupButtonWidget.prototype.onAction = function () {\n\tthis.popup.toggle();\n};\n","/**\n * Mixin for OO.ui.Widget subclasses to provide OO.ui.mixin.GroupElement.\n *\n * Use together with OO.ui.mixin.ItemWidget to make disabled state inheritable.\n *\n * @private\n * @abstract\n * @class\n * @mixins OO.ui.mixin.GroupElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.mixin.GroupWidget = function OoUiMixinGroupWidget( config ) {\n\t// Mixin constructors\n\tOO.ui.mixin.GroupElement.call( this, config );\n};\n\n/* Setup */\n\nOO.mixinClass( OO.ui.mixin.GroupWidget, OO.ui.mixin.GroupElement );\n\n/* Methods */\n\n/**\n * Set the disabled state of the widget.\n *\n * This will also update the disabled state of child widgets.\n *\n * @param {boolean} disabled Disable widget\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.mixin.GroupWidget.prototype.setDisabled = function ( disabled ) {\n\tvar i, len;\n\n\t// Parent method\n\t// Note: Calling #setDisabled this way assumes this is mixed into an OO.ui.Widget\n\tOO.ui.Widget.prototype.setDisabled.call( this, disabled );\n\n\t// During construction, #setDisabled is called before the OO.ui.mixin.GroupElement constructor\n\tif ( this.items ) {\n\t\tfor ( i = 0, len = this.items.length; i < len; i++ ) {\n\t\t\tthis.items[ i ].updateDisabled();\n\t\t}\n\t}\n\n\treturn this;\n};\n","/**\n * Mixin for widgets used as items in widgets that mix in OO.ui.mixin.GroupWidget.\n *\n * Item widgets have a reference to a OO.ui.mixin.GroupWidget while they are attached to the group.\n * This allows bidirectional communication.\n *\n * Use together with OO.ui.mixin.GroupWidget to make disabled state inheritable.\n *\n * @private\n * @abstract\n * @class\n *\n * @constructor\n */\nOO.ui.mixin.ItemWidget = function OoUiMixinItemWidget() {\n\t//\n};\n\n/* Methods */\n\n/**\n * Check if widget is disabled.\n *\n * Checks parent if present, making disabled state inheritable.\n *\n * @return {boolean} Widget is disabled\n */\nOO.ui.mixin.ItemWidget.prototype.isDisabled = function () {\n\treturn this.disabled ||\n\t\t( this.elementGroup instanceof OO.ui.Widget && this.elementGroup.isDisabled() );\n};\n\n/**\n * Set group element is in.\n *\n * @param {OO.ui.mixin.GroupElement|null} group Group element, null if none\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.mixin.ItemWidget.prototype.setElementGroup = function ( group ) {\n\t// Parent method\n\t// Note: Calling #setElementGroup this way assumes this is mixed into an OO.ui.Element\n\tOO.ui.Element.prototype.setElementGroup.call( this, group );\n\n\t// Initialize item disabled states\n\tthis.updateDisabled();\n\n\treturn this;\n};\n","/**\n * OptionWidgets are special elements that can be selected and configured with data. The\n * data is often unique for each option, but it does not have to be. OptionWidgets are used\n * with OO.ui.SelectWidget to create a selection of mutually exclusive options. For more information\n * and examples, please see the [OOUI documentation on MediaWiki][1].\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.ItemWidget\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.FlaggedElement\n * @mixins OO.ui.mixin.AccessKeyedElement\n * @mixins OO.ui.mixin.TitledElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.OptionWidget = function OoUiOptionWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.OptionWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.ItemWidget.call( this );\n\tOO.ui.mixin.LabelElement.call( this, config );\n\tOO.ui.mixin.FlaggedElement.call( this, config );\n\tOO.ui.mixin.AccessKeyedElement.call( this, config );\n\tOO.ui.mixin.TitledElement.call( this, config );\n\n\t// Properties\n\tthis.highlighted = false;\n\tthis.pressed = false;\n\tthis.setSelected( !!config.selected );\n\n\t// Initialization\n\tthis.$element\n\t\t.data( 'oo-ui-optionWidget', this )\n\t\t// Allow programmatic focussing (and by access key), but not tabbing\n\t\t.attr( 'tabindex', '-1' )\n\t\t.attr( 'role', 'option' )\n\t\t.addClass( 'oo-ui-optionWidget' )\n\t\t.append( this.$label );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.OptionWidget, OO.ui.mixin.ItemWidget );\nOO.mixinClass( OO.ui.OptionWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.OptionWidget, OO.ui.mixin.FlaggedElement );\nOO.mixinClass( OO.ui.OptionWidget, OO.ui.mixin.AccessKeyedElement );\nOO.mixinClass( OO.ui.OptionWidget, OO.ui.mixin.TitledElement );\n\n/* Static Properties */\n\n/**\n * Whether this option can be selected. See #setSelected.\n *\n * @static\n * @inheritable\n * @property {boolean}\n */\nOO.ui.OptionWidget.static.selectable = true;\n\n/**\n * Whether this option can be highlighted. See #setHighlighted.\n *\n * @static\n * @inheritable\n * @property {boolean}\n */\nOO.ui.OptionWidget.static.highlightable = true;\n\n/**\n * Whether this option can be pressed. See #setPressed.\n *\n * @static\n * @inheritable\n * @property {boolean}\n */\nOO.ui.OptionWidget.static.pressable = true;\n\n/**\n * Whether this option will be scrolled into view when it is selected.\n *\n * @static\n * @inheritable\n * @property {boolean}\n */\nOO.ui.OptionWidget.static.scrollIntoViewOnSelect = false;\n\n/* Methods */\n\n/**\n * Check if the option can be selected.\n *\n * @return {boolean} Item is selectable\n */\nOO.ui.OptionWidget.prototype.isSelectable = function () {\n\treturn this.constructor.static.selectable && !this.disabled && this.isVisible();\n};\n\n/**\n * Check if the option can be highlighted. A highlight indicates that the option\n * may be selected when a user presses Enter key or clicks. Disabled items cannot\n * be highlighted.\n *\n * @return {boolean} Item is highlightable\n */\nOO.ui.OptionWidget.prototype.isHighlightable = function () {\n\treturn this.constructor.static.highlightable && !this.disabled && this.isVisible();\n};\n\n/**\n * Check if the option can be pressed. The pressed state occurs when a user mouses\n * down on an item, but has not yet let go of the mouse.\n *\n * @return {boolean} Item is pressable\n */\nOO.ui.OptionWidget.prototype.isPressable = function () {\n\treturn this.constructor.static.pressable && !this.disabled && this.isVisible();\n};\n\n/**\n * Check if the option is selected.\n *\n * @return {boolean} Item is selected\n */\nOO.ui.OptionWidget.prototype.isSelected = function () {\n\treturn this.selected;\n};\n\n/**\n * Check if the option is highlighted. A highlight indicates that the\n * item may be selected when a user presses Enter key or clicks.\n *\n * @return {boolean} Item is highlighted\n */\nOO.ui.OptionWidget.prototype.isHighlighted = function () {\n\treturn this.highlighted;\n};\n\n/**\n * Check if the option is pressed. The pressed state occurs when a user mouses\n * down on an item, but has not yet let go of the mouse. The item may appear\n * selected, but it will not be selected until the user releases the mouse.\n *\n * @return {boolean} Item is pressed\n */\nOO.ui.OptionWidget.prototype.isPressed = function () {\n\treturn this.pressed;\n};\n\n/**\n * Set the option’s selected state. In general, all modifications to the selection\n * should be handled by the SelectWidget’s\n * {@link OO.ui.SelectWidget#selectItem selectItem( [item] )} method instead of this method.\n *\n * @param {boolean} [state=false] Select option\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.OptionWidget.prototype.setSelected = function ( state ) {\n\tif ( this.constructor.static.selectable ) {\n\t\tthis.selected = !!state;\n\t\tthis.$element\n\t\t\t.toggleClass( 'oo-ui-optionWidget-selected', state )\n\t\t\t.attr( 'aria-selected', state.toString() );\n\t\tif ( state && this.constructor.static.scrollIntoViewOnSelect ) {\n\t\t\tthis.scrollElementIntoView();\n\t\t}\n\t\tthis.updateThemeClasses();\n\t}\n\treturn this;\n};\n\n/**\n * Set the option’s highlighted state. In general, all programmatic\n * modifications to the highlight should be handled by the\n * SelectWidget’s {@link OO.ui.SelectWidget#highlightItem highlightItem( [item] )}\n * method instead of this method.\n *\n * @param {boolean} [state=false] Highlight option\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.OptionWidget.prototype.setHighlighted = function ( state ) {\n\tif ( this.constructor.static.highlightable ) {\n\t\tthis.highlighted = !!state;\n\t\tthis.$element.toggleClass( 'oo-ui-optionWidget-highlighted', state );\n\t\tthis.updateThemeClasses();\n\t}\n\treturn this;\n};\n\n/**\n * Set the option’s pressed state. In general, all\n * programmatic modifications to the pressed state should be handled by the\n * SelectWidget’s {@link OO.ui.SelectWidget#pressItem pressItem( [item] )}\n * method instead of this method.\n *\n * @param {boolean} [state=false] Press option\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.OptionWidget.prototype.setPressed = function ( state ) {\n\tif ( this.constructor.static.pressable ) {\n\t\tthis.pressed = !!state;\n\t\tthis.$element.toggleClass( 'oo-ui-optionWidget-pressed', state );\n\t\tthis.updateThemeClasses();\n\t}\n\treturn this;\n};\n\n/**\n * Get text to match search strings against.\n *\n * The default implementation returns the label text, but subclasses\n * can override this to provide more complex behavior.\n *\n * @return {string|boolean} String to match search string against\n */\nOO.ui.OptionWidget.prototype.getMatchText = function () {\n\tvar label = this.getLabel();\n\treturn typeof label === 'string' ? label : this.$label.text();\n};\n","/**\n * A SelectWidget is of a generic selection of options. The OOUI library contains several types of\n * select widgets, including {@link OO.ui.ButtonSelectWidget button selects},\n * {@link OO.ui.RadioSelectWidget radio selects}, and {@link OO.ui.MenuSelectWidget\n * menu selects}.\n *\n * This class should be used together with OO.ui.OptionWidget or OO.ui.DecoratedOptionWidget. For\n * more information, please see the [OOUI documentation on MediaWiki][1].\n *\n * @example\n * // A select widget with three options.\n * var select = new OO.ui.SelectWidget( {\n * items: [\n * new OO.ui.OptionWidget( {\n * data: 'a',\n * label: 'Option One',\n * } ),\n * new OO.ui.OptionWidget( {\n * data: 'b',\n * label: 'Option Two',\n * } ),\n * new OO.ui.OptionWidget( {\n * data: 'c',\n * label: 'Option Three',\n * } )\n * ]\n * } );\n * $( document.body ).append( select.$element );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n *\n * @abstract\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.GroupWidget\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {OO.ui.OptionWidget[]} [items] An array of options to add to the select.\n * Options are created with {@link OO.ui.OptionWidget OptionWidget} classes. See\n * the [OOUI documentation on MediaWiki] [2] for examples.\n * [2]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n * @cfg {boolean} [multiselect] Allow for multiple selections\n */\nOO.ui.SelectWidget = function OoUiSelectWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.SelectWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.GroupWidget.call( this, $.extend( {\n\t\t$group: this.$element\n\t}, config ) );\n\n\t// Properties\n\tthis.pressed = false;\n\tthis.selecting = null;\n\tthis.multiselect = !!config.multiselect;\n\tthis.onDocumentMouseUpHandler = this.onDocumentMouseUp.bind( this );\n\tthis.onDocumentMouseMoveHandler = this.onDocumentMouseMove.bind( this );\n\tthis.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this );\n\tthis.onDocumentKeyPressHandler = this.onDocumentKeyPress.bind( this );\n\tthis.keyPressBuffer = '';\n\tthis.keyPressBufferTimer = null;\n\tthis.blockMouseOverEvents = 0;\n\n\t// Events\n\tthis.connect( this, {\n\t\ttoggle: 'onToggle'\n\t} );\n\tthis.$element.on( {\n\t\tfocusin: this.onFocus.bind( this ),\n\t\tmousedown: this.onMouseDown.bind( this ),\n\t\tmouseover: this.onMouseOver.bind( this ),\n\t\tmouseleave: this.onMouseLeave.bind( this )\n\t} );\n\n\t// Initialization\n\tthis.$element\n\t\t.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-unpressed' )\n\t\t.attr( 'role', 'listbox' );\n\tthis.setFocusOwner( this.$element );\n\tif ( Array.isArray( config.items ) ) {\n\t\tthis.addItems( config.items );\n\t}\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.SelectWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.SelectWidget, OO.ui.mixin.GroupWidget );\n\n/* Events */\n\n/**\n * @event highlight\n *\n * A `highlight` event is emitted when the highlight is changed with the #highlightItem method.\n *\n * @param {OO.ui.OptionWidget|null} item Highlighted item\n */\n\n/**\n * @event press\n *\n * A `press` event is emitted when the #pressItem method is used to programmatically modify the\n * pressed state of an option.\n *\n * @param {OO.ui.OptionWidget|null} item Pressed item\n */\n\n/**\n * @event select\n *\n * A `select` event is emitted when the selection is modified programmatically with the #selectItem\n * method.\n *\n * @param {OO.ui.OptionWidget[]|OO.ui.OptionWidget|null} items Currently selected items\n */\n\n/**\n * @event choose\n *\n * A `choose` event is emitted when an item is chosen with the #chooseItem method.\n *\n * @param {OO.ui.OptionWidget} item Chosen item\n * @param {boolean} selected Item is selected\n */\n\n/**\n * @event add\n *\n * An `add` event is emitted when options are added to the select with the #addItems method.\n *\n * @param {OO.ui.OptionWidget[]} items Added items\n * @param {number} index Index of insertion point\n */\n\n/**\n * @event remove\n *\n * A `remove` event is emitted when options are removed from the select with the #clearItems\n * or #removeItems methods.\n *\n * @param {OO.ui.OptionWidget[]} items Removed items\n */\n\n/* Static methods */\n\n/**\n * Normalize text for filter matching\n *\n * @param {string} text Text\n * @return {string} Normalized text\n */\nOO.ui.SelectWidget.static.normalizeForMatching = function ( text ) {\n\t// Replace trailing whitespace, normalize multiple spaces and make case insensitive\n\tvar normalized = text.trim().replace( /\\s+/, ' ' ).toLowerCase();\n\n\t// Normalize Unicode\n\t// eslint-disable-next-line no-restricted-properties\n\tif ( normalized.normalize ) {\n\t\t// eslint-disable-next-line no-restricted-properties\n\t\tnormalized = normalized.normalize();\n\t}\n\treturn normalized;\n};\n\n/* Methods */\n\n/**\n * Handle focus events\n *\n * @private\n * @param {jQuery.Event} event\n */\nOO.ui.SelectWidget.prototype.onFocus = function ( event ) {\n\tvar item;\n\tif ( event.target === this.$element[ 0 ] ) {\n\t\t// This widget was focussed, e.g. by the user tabbing to it.\n\t\t// The styles for focus state depend on one of the items being selected.\n\t\tif ( !this.findSelectedItem() ) {\n\t\t\titem = this.findFirstSelectableItem();\n\t\t}\n\t} else {\n\t\tif ( event.target.tabIndex === -1 ) {\n\t\t\t// One of the options got focussed (and the event bubbled up here).\n\t\t\t// They can't be tabbed to, but they can be activated using access keys.\n\t\t\t// OptionWidgets and focusable UI elements inside them have tabindex=\"-1\" set.\n\t\t\titem = this.findTargetItem( event );\n\t\t\tif ( !( item.isHighlightable() || item.isSelectable() ) ) {\n\t\t\t\t// The item is disabled (weirdly, disabled items can be focussed in Firefox and IE,\n\t\t\t\t// but not in Chrome). Do nothing (do not highlight or select anything).\n\t\t\t\treturn;\n\t\t\t}\n\t\t} else {\n\t\t\t// There is something actually user-focusable in one of the labels of the options, and\n\t\t\t// the user focussed it (e.g. by tabbing to it). Do nothing (especially, don't change\n\t\t\t// the focus).\n\t\t\treturn;\n\t\t}\n\t}\n\n\tif ( item ) {\n\t\tif ( item.constructor.static.highlightable ) {\n\t\t\tthis.highlightItem( item );\n\t\t} else {\n\t\t\tthis.selectItem( item );\n\t\t}\n\t}\n\n\tif ( event.target !== this.$element[ 0 ] ) {\n\t\tthis.$focusOwner.trigger( 'focus' );\n\t}\n};\n\n/**\n * Handle mouse down events.\n *\n * @private\n * @param {jQuery.Event} e Mouse down event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.SelectWidget.prototype.onMouseDown = function ( e ) {\n\tvar item;\n\n\tif ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {\n\t\tthis.togglePressed( true );\n\t\titem = this.findTargetItem( e );\n\t\tif ( item && item.isSelectable() ) {\n\t\t\tthis.pressItem( item );\n\t\t\tthis.selecting = item;\n\t\t\tthis.getElementDocument().addEventListener( 'mouseup', this.onDocumentMouseUpHandler, true );\n\t\t\tthis.getElementDocument().addEventListener( 'mousemove', this.onDocumentMouseMoveHandler, true );\n\t\t}\n\t}\n\treturn false;\n};\n\n/**\n * Handle document mouse up events.\n *\n * @private\n * @param {MouseEvent} e Mouse up event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.SelectWidget.prototype.onDocumentMouseUp = function ( e ) {\n\tvar item;\n\n\tthis.togglePressed( false );\n\tif ( !this.selecting ) {\n\t\titem = this.findTargetItem( e );\n\t\tif ( item && item.isSelectable() ) {\n\t\t\tthis.selecting = item;\n\t\t}\n\t}\n\tif ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT && this.selecting ) {\n\t\tthis.pressItem( null );\n\t\tthis.chooseItem( this.selecting );\n\t\tthis.selecting = null;\n\t}\n\n\tthis.getElementDocument().removeEventListener( 'mouseup', this.onDocumentMouseUpHandler, true );\n\tthis.getElementDocument().removeEventListener( 'mousemove', this.onDocumentMouseMoveHandler, true );\n\n\treturn false;\n};\n\n/**\n * Handle document mouse move events.\n *\n * @private\n * @param {MouseEvent} e Mouse move event\n */\nOO.ui.SelectWidget.prototype.onDocumentMouseMove = function ( e ) {\n\tvar item;\n\n\tif ( !this.isDisabled() && this.pressed ) {\n\t\titem = this.findTargetItem( e );\n\t\tif ( item && item !== this.selecting && item.isSelectable() ) {\n\t\t\tthis.pressItem( item );\n\t\t\tthis.selecting = item;\n\t\t}\n\t}\n};\n\n/**\n * Handle mouse over events.\n *\n * @private\n * @param {jQuery.Event} e Mouse over event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.SelectWidget.prototype.onMouseOver = function ( e ) {\n\tvar item;\n\tif ( this.blockMouseOverEvents ) {\n\t\treturn;\n\t}\n\tif ( !this.isDisabled() ) {\n\t\titem = this.findTargetItem( e );\n\t\tthis.highlightItem( item && item.isHighlightable() ? item : null );\n\t}\n\treturn false;\n};\n\n/**\n * Handle mouse leave events.\n *\n * @private\n * @param {jQuery.Event} e Mouse over event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.SelectWidget.prototype.onMouseLeave = function () {\n\tif ( !this.isDisabled() ) {\n\t\tthis.highlightItem( null );\n\t}\n\treturn false;\n};\n\n/**\n * Handle document key down events.\n *\n * @protected\n * @param {KeyboardEvent} e Key down event\n */\nOO.ui.SelectWidget.prototype.onDocumentKeyDown = function ( e ) {\n\tvar nextItem,\n\t\thandled = false,\n\t\tselected = this.findSelectedItems(),\n\t\tcurrentItem = this.findHighlightedItem() || (\n\t\t\tArray.isArray( selected ) ? selected[ 0 ] : selected\n\t\t),\n\t\tfirstItem = this.getItems()[ 0 ];\n\n\tif ( !this.isDisabled() && this.isVisible() ) {\n\t\tswitch ( e.keyCode ) {\n\t\t\tcase OO.ui.Keys.ENTER:\n\t\t\t\tif ( currentItem ) {\n\t\t\t\t\t// Was only highlighted, now let's select it. No-op if already selected.\n\t\t\t\t\tthis.chooseItem( currentItem );\n\t\t\t\t\thandled = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase OO.ui.Keys.UP:\n\t\t\tcase OO.ui.Keys.LEFT:\n\t\t\t\tthis.clearKeyPressBuffer();\n\t\t\t\tnextItem = currentItem ?\n\t\t\t\t\tthis.findRelativeSelectableItem( currentItem, -1 ) : firstItem;\n\t\t\t\thandled = true;\n\t\t\t\tbreak;\n\t\t\tcase OO.ui.Keys.DOWN:\n\t\t\tcase OO.ui.Keys.RIGHT:\n\t\t\t\tthis.clearKeyPressBuffer();\n\t\t\t\tnextItem = currentItem ?\n\t\t\t\t\tthis.findRelativeSelectableItem( currentItem, 1 ) : firstItem;\n\t\t\t\thandled = true;\n\t\t\t\tbreak;\n\t\t\tcase OO.ui.Keys.ESCAPE:\n\t\t\tcase OO.ui.Keys.TAB:\n\t\t\t\tif ( currentItem ) {\n\t\t\t\t\tcurrentItem.setHighlighted( false );\n\t\t\t\t}\n\t\t\t\tthis.unbindDocumentKeyDownListener();\n\t\t\t\tthis.unbindDocumentKeyPressListener();\n\t\t\t\t// Don't prevent tabbing away / defocusing\n\t\t\t\thandled = false;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( nextItem ) {\n\t\t\tif ( nextItem.constructor.static.highlightable ) {\n\t\t\t\tthis.highlightItem( nextItem );\n\t\t\t} else {\n\t\t\t\tthis.chooseItem( nextItem );\n\t\t\t}\n\t\t\tthis.scrollItemIntoView( nextItem );\n\t\t}\n\n\t\tif ( handled ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\t}\n};\n\n/**\n * Bind document key down listener.\n *\n * @protected\n */\nOO.ui.SelectWidget.prototype.bindDocumentKeyDownListener = function () {\n\tthis.getElementDocument().addEventListener( 'keydown', this.onDocumentKeyDownHandler, true );\n};\n\n/**\n * Unbind document key down listener.\n *\n * @protected\n */\nOO.ui.SelectWidget.prototype.unbindDocumentKeyDownListener = function () {\n\tthis.getElementDocument().removeEventListener( 'keydown', this.onDocumentKeyDownHandler, true );\n};\n\n/**\n * Scroll item into view, preventing spurious mouse highlight actions from happening.\n *\n * @param {OO.ui.OptionWidget} item Item to scroll into view\n */\nOO.ui.SelectWidget.prototype.scrollItemIntoView = function ( item ) {\n\tvar widget = this;\n\t// Chromium's Blink engine will generate spurious 'mouseover' events during programmatic\n\t// scrolling and around 100-150 ms after it is finished.\n\tthis.blockMouseOverEvents++;\n\titem.scrollElementIntoView().done( function () {\n\t\tsetTimeout( function () {\n\t\t\twidget.blockMouseOverEvents--;\n\t\t}, 200 );\n\t} );\n};\n\n/**\n * Clear the key-press buffer\n *\n * @protected\n */\nOO.ui.SelectWidget.prototype.clearKeyPressBuffer = function () {\n\tif ( this.keyPressBufferTimer ) {\n\t\tclearTimeout( this.keyPressBufferTimer );\n\t\tthis.keyPressBufferTimer = null;\n\t}\n\tthis.keyPressBuffer = '';\n};\n\n/**\n * Handle key press events.\n *\n * @protected\n * @param {KeyboardEvent} e Key press event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.SelectWidget.prototype.onDocumentKeyPress = function ( e ) {\n\tvar c, filter, item, selected;\n\n\tif ( !e.charCode ) {\n\t\tif ( e.keyCode === OO.ui.Keys.BACKSPACE && this.keyPressBuffer !== '' ) {\n\t\t\tthis.keyPressBuffer = this.keyPressBuffer.substr( 0, this.keyPressBuffer.length - 1 );\n\t\t\treturn false;\n\t\t}\n\t\treturn;\n\t}\n\t// eslint-disable-next-line no-restricted-properties\n\tif ( String.fromCodePoint ) {\n\t\t// eslint-disable-next-line no-restricted-properties\n\t\tc = String.fromCodePoint( e.charCode );\n\t} else {\n\t\tc = String.fromCharCode( e.charCode );\n\t}\n\n\tif ( this.keyPressBufferTimer ) {\n\t\tclearTimeout( this.keyPressBufferTimer );\n\t}\n\tthis.keyPressBufferTimer = setTimeout( this.clearKeyPressBuffer.bind( this ), 1500 );\n\n\tselected = this.findSelectedItems();\n\titem = this.findHighlightedItem() || (\n\t\tArray.isArray( selected ) ? selected[ 0 ] : selected\n\t);\n\n\tif ( this.keyPressBuffer === c ) {\n\t\t// Common (if weird) special case: typing \"xxxx\" will cycle through all\n\t\t// the items beginning with \"x\".\n\t\tif ( item ) {\n\t\t\titem = this.findRelativeSelectableItem( item, 1 );\n\t\t}\n\t} else {\n\t\tthis.keyPressBuffer += c;\n\t}\n\n\tfilter = this.getItemMatcher( this.keyPressBuffer, false );\n\tif ( !item || !filter( item ) ) {\n\t\titem = this.findRelativeSelectableItem( item, 1, filter );\n\t}\n\tif ( item ) {\n\t\tif ( this.isVisible() && item.constructor.static.highlightable ) {\n\t\t\tthis.highlightItem( item );\n\t\t} else {\n\t\t\tthis.chooseItem( item );\n\t\t}\n\t\tthis.scrollItemIntoView( item );\n\t}\n\n\te.preventDefault();\n\te.stopPropagation();\n};\n\n/**\n * Get a matcher for the specific string\n *\n * @protected\n * @param {string} query String to match against items\n * @param {string} [mode='prefix'] Matching mode: 'substring', 'prefix', or 'exact'\n * @return {Function} function ( OO.ui.OptionWidget ) => boolean\n */\nOO.ui.SelectWidget.prototype.getItemMatcher = function ( query, mode ) {\n\tvar normalizeForMatching = this.constructor.static.normalizeForMatching,\n\t\tnormalizedQuery = normalizeForMatching( query );\n\n\t// Support deprecated exact=true argument\n\tif ( mode === true ) {\n\t\tmode = 'exact';\n\t}\n\n\treturn function ( item ) {\n\t\tvar matchText = normalizeForMatching( item.getMatchText() );\n\n\t\tif ( normalizedQuery === '' ) {\n\t\t\t// Empty string matches all, except if we are in 'exact'\n\t\t\t// mode, where it doesn't match at all\n\t\t\treturn mode !== 'exact';\n\t\t}\n\n\t\tswitch ( mode ) {\n\t\t\tcase 'exact':\n\t\t\t\treturn matchText === normalizedQuery;\n\t\t\tcase 'substring':\n\t\t\t\treturn matchText.indexOf( normalizedQuery ) !== -1;\n\t\t\t// 'prefix'\n\t\t\tdefault:\n\t\t\t\treturn matchText.indexOf( normalizedQuery ) === 0;\n\t\t}\n\t};\n};\n\n/**\n * Bind document key press listener.\n *\n * @protected\n */\nOO.ui.SelectWidget.prototype.bindDocumentKeyPressListener = function () {\n\tthis.getElementDocument().addEventListener( 'keypress', this.onDocumentKeyPressHandler, true );\n};\n\n/**\n * Unbind document key down listener.\n *\n * If you override this, be sure to call this.clearKeyPressBuffer() from your\n * implementation.\n *\n * @protected\n */\nOO.ui.SelectWidget.prototype.unbindDocumentKeyPressListener = function () {\n\tthis.getElementDocument().removeEventListener( 'keypress', this.onDocumentKeyPressHandler, true );\n\tthis.clearKeyPressBuffer();\n};\n\n/**\n * Visibility change handler\n *\n * @protected\n * @param {boolean} visible\n */\nOO.ui.SelectWidget.prototype.onToggle = function ( visible ) {\n\tif ( !visible ) {\n\t\tthis.clearKeyPressBuffer();\n\t}\n};\n\n/**\n * Get the closest item to a jQuery.Event.\n *\n * @private\n * @param {jQuery.Event} e\n * @return {OO.ui.OptionWidget|null} Outline item widget, `null` if none was found\n */\nOO.ui.SelectWidget.prototype.findTargetItem = function ( e ) {\n\tvar $option = $( e.target ).closest( '.oo-ui-optionWidget' );\n\tif ( !$option.closest( '.oo-ui-selectWidget' ).is( this.$element ) ) {\n\t\treturn null;\n\t}\n\treturn $option.data( 'oo-ui-optionWidget' ) || null;\n};\n\n/**\n * Find all selected items, if there are any. If the widget allows for multiselect\n * it will return an array of selected options. If the widget doesn't allow for\n * multiselect, it will return the selected option or null if no item is selected.\n *\n * @return {OO.ui.OptionWidget[]|OO.ui.OptionWidget|null} If the widget is multiselect\n * then return an array of selected items (or empty array),\n * if the widget is not multiselect, return a single selected item, or `null`\n * if no item is selected\n */\nOO.ui.SelectWidget.prototype.findSelectedItems = function () {\n\tvar selected = this.items.filter( function ( item ) {\n\t\treturn item.isSelected();\n\t} );\n\n\treturn this.multiselect ?\n\t\tselected :\n\t\tselected[ 0 ] || null;\n};\n\n/**\n * Find selected item.\n *\n * @return {OO.ui.OptionWidget[]|OO.ui.OptionWidget|null} If the widget is multiselect\n * then return an array of selected items (or empty array),\n * if the widget is not multiselect, return a single selected item, or `null`\n * if no item is selected\n */\nOO.ui.SelectWidget.prototype.findSelectedItem = function () {\n\treturn this.findSelectedItems();\n};\n\n/**\n * Find highlighted item.\n *\n * @return {OO.ui.OptionWidget|null} Highlighted item, `null` if no item is highlighted\n */\nOO.ui.SelectWidget.prototype.findHighlightedItem = function () {\n\tvar i, len;\n\n\tfor ( i = 0, len = this.items.length; i < len; i++ ) {\n\t\tif ( this.items[ i ].isHighlighted() ) {\n\t\t\treturn this.items[ i ];\n\t\t}\n\t}\n\treturn null;\n};\n\n/**\n * Toggle pressed state.\n *\n * Press is a state that occurs when a user mouses down on an item, but\n * has not yet let go of the mouse. The item may appear selected, but it will not be selected\n * until the user releases the mouse.\n *\n * @param {boolean} pressed An option is being pressed\n */\nOO.ui.SelectWidget.prototype.togglePressed = function ( pressed ) {\n\tif ( pressed === undefined ) {\n\t\tpressed = !this.pressed;\n\t}\n\tif ( pressed !== this.pressed ) {\n\t\tthis.$element\n\t\t\t.toggleClass( 'oo-ui-selectWidget-pressed', pressed )\n\t\t\t.toggleClass( 'oo-ui-selectWidget-unpressed', !pressed );\n\t\tthis.pressed = pressed;\n\t}\n};\n\n/**\n * Highlight an option. If the `item` param is omitted, no options will be highlighted\n * and any existing highlight will be removed. The highlight is mutually exclusive.\n *\n * @param {OO.ui.OptionWidget} [item] Item to highlight, omit for no highlight\n * @fires highlight\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.highlightItem = function ( item ) {\n\tvar i, len, highlighted,\n\t\tchanged = false;\n\n\tfor ( i = 0, len = this.items.length; i < len; i++ ) {\n\t\thighlighted = this.items[ i ] === item;\n\t\tif ( this.items[ i ].isHighlighted() !== highlighted ) {\n\t\t\tthis.items[ i ].setHighlighted( highlighted );\n\t\t\tchanged = true;\n\t\t}\n\t}\n\tif ( changed ) {\n\t\tif ( item ) {\n\t\t\tthis.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );\n\t\t} else {\n\t\t\tthis.$focusOwner.removeAttr( 'aria-activedescendant' );\n\t\t}\n\t\tthis.emit( 'highlight', item );\n\t}\n\n\treturn this;\n};\n\n/**\n * Fetch an item by its label.\n *\n * @param {string} label Label of the item to select.\n * @param {boolean} [prefix=false] Allow a prefix match, if only a single item matches\n * @return {OO.ui.Element|null} Item with equivalent label, `null` if none exists\n */\nOO.ui.SelectWidget.prototype.getItemFromLabel = function ( label, prefix ) {\n\tvar i, item, found,\n\t\tlen = this.items.length,\n\t\tfilter = this.getItemMatcher( label, 'exact' );\n\n\tfor ( i = 0; i < len; i++ ) {\n\t\titem = this.items[ i ];\n\t\tif ( item instanceof OO.ui.OptionWidget && item.isSelectable() && filter( item ) ) {\n\t\t\treturn item;\n\t\t}\n\t}\n\n\tif ( prefix ) {\n\t\tfound = null;\n\t\tfilter = this.getItemMatcher( label, 'prefix' );\n\t\tfor ( i = 0; i < len; i++ ) {\n\t\t\titem = this.items[ i ];\n\t\t\tif ( item instanceof OO.ui.OptionWidget && item.isSelectable() && filter( item ) ) {\n\t\t\t\tif ( found ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tfound = item;\n\t\t\t}\n\t\t}\n\t\tif ( found ) {\n\t\t\treturn found;\n\t\t}\n\t}\n\n\treturn null;\n};\n\n/**\n * Programmatically select an option by its label. If the item does not exist,\n * all options will be deselected.\n *\n * @param {string} [label] Label of the item to select.\n * @param {boolean} [prefix=false] Allow a prefix match, if only a single item matches\n * @fires select\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.selectItemByLabel = function ( label, prefix ) {\n\tvar itemFromLabel = this.getItemFromLabel( label, !!prefix );\n\tif ( label === undefined || !itemFromLabel ) {\n\t\treturn this.selectItem();\n\t}\n\treturn this.selectItem( itemFromLabel );\n};\n\n/**\n * Programmatically select an option by its data. If the `data` parameter is omitted,\n * or if the item does not exist, all options will be deselected.\n *\n * @param {Object|string} [data] Value of the item to select, omit to deselect all\n * @fires select\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.selectItemByData = function ( data ) {\n\tvar itemFromData = this.findItemFromData( data );\n\tif ( data === undefined || !itemFromData ) {\n\t\treturn this.selectItem();\n\t}\n\treturn this.selectItem( itemFromData );\n};\n\n/**\n * Programmatically unselect an option by its reference. If the widget\n * allows for multiple selections, there may be other items still selected;\n * otherwise, no items will be selected.\n * If no item is given, all selected items will be unselected.\n *\n * @param {OO.ui.OptionWidget} [item] Item to unselect\n * @fires select\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.unselectItem = function ( item ) {\n\tif ( item ) {\n\t\titem.setSelected( false );\n\t} else {\n\t\tthis.items.forEach( function ( item ) {\n\t\t\tif ( item.isSelected() ) {\n\t\t\t\titem.setSelected( false );\n\t\t\t}\n\t\t} );\n\t}\n\n\tthis.emit( 'select', this.findSelectedItems() );\n\treturn this;\n};\n\n/**\n * Programmatically select an option by its reference. If the `item` parameter is omitted,\n * all options will be deselected.\n *\n * @param {OO.ui.OptionWidget} [item] Item to select, omit to deselect all\n * @fires select\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n*/\nOO.ui.SelectWidget.prototype.selectItem = function ( item ) {\n\tvar i, len, selected,\n\t\tchanged = false;\n\n\tif ( this.multiselect && item ) {\n\t\t// Select the item directly\n\t\titem.setSelected( true );\n\t} else {\n\t\tfor ( i = 0, len = this.items.length; i < len; i++ ) {\n\t\t\tselected = this.items[ i ] === item;\n\t\t\tif ( this.items[ i ].isSelected() !== selected ) {\n\t\t\t\tthis.items[ i ].setSelected( selected );\n\t\t\t\tchanged = true;\n\t\t\t}\n\t\t}\n\t}\n\tif ( changed ) {\n\t\t// TODO: When should a non-highlightable element be selected?\n\t\tif ( item && !item.constructor.static.highlightable ) {\n\t\t\tif ( item ) {\n\t\t\t\tthis.$focusOwner.attr( 'aria-activedescendant', item.getElementId() );\n\t\t\t} else {\n\t\t\t\tthis.$focusOwner.removeAttr( 'aria-activedescendant' );\n\t\t\t}\n\t\t}\n\t\tthis.emit( 'select', this.findSelectedItems() );\n\t}\n\n\treturn this;\n};\n\n/**\n * Press an item.\n *\n * Press is a state that occurs when a user mouses down on an item, but has not\n * yet let go of the mouse. The item may appear selected, but it will not be selected until the user\n * releases the mouse.\n *\n * @param {OO.ui.OptionWidget} [item] Item to press, omit to depress all\n * @fires press\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.pressItem = function ( item ) {\n\tvar i, len, pressed,\n\t\tchanged = false;\n\n\tfor ( i = 0, len = this.items.length; i < len; i++ ) {\n\t\tpressed = this.items[ i ] === item;\n\t\tif ( this.items[ i ].isPressed() !== pressed ) {\n\t\t\tthis.items[ i ].setPressed( pressed );\n\t\t\tchanged = true;\n\t\t}\n\t}\n\tif ( changed ) {\n\t\tthis.emit( 'press', item );\n\t}\n\n\treturn this;\n};\n\n/**\n * Choose an item.\n *\n * Note that ‘choose’ should never be modified programmatically. A user can choose\n * an option with the keyboard or mouse and it becomes selected. To select an item programmatically,\n * use the #selectItem method.\n *\n * This method is identical to #selectItem, but may vary in subclasses that take additional action\n * when users choose an item with the keyboard or mouse.\n *\n * @param {OO.ui.OptionWidget} item Item to choose\n * @fires choose\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.chooseItem = function ( item ) {\n\tif ( item ) {\n\t\tif ( this.multiselect && item.isSelected() ) {\n\t\t\tthis.unselectItem( item );\n\t\t} else {\n\t\t\tthis.selectItem( item );\n\t\t}\n\n\t\tthis.emit( 'choose', item, item.isSelected() );\n\t}\n\n\treturn this;\n};\n\n/**\n * Find an option by its position relative to the specified item (or to the start of the option\n * array, if item is `null`). The direction in which to search through the option array is specified\n * with a number: -1 for reverse (the default) or 1 for forward. The method will return an option,\n * or `null` if there are no options in the array.\n *\n * @param {OO.ui.OptionWidget|null} item Item to describe the start position, or `null` to start at\n * the beginning of the array.\n * @param {number} direction Direction to move in: -1 to move backward, 1 to move forward\n * @param {Function} [filter] Only consider items for which this function returns\n * true. Function takes an OO.ui.OptionWidget and returns a boolean.\n * @return {OO.ui.OptionWidget|null} Item at position, `null` if there are no items in the select\n */\nOO.ui.SelectWidget.prototype.findRelativeSelectableItem = function ( item, direction, filter ) {\n\tvar currentIndex, nextIndex, i,\n\t\tincrease = direction > 0 ? 1 : -1,\n\t\tlen = this.items.length;\n\n\tif ( item instanceof OO.ui.OptionWidget ) {\n\t\tcurrentIndex = this.items.indexOf( item );\n\t\tnextIndex = ( currentIndex + increase + len ) % len;\n\t} else {\n\t\t// If no item is selected and moving forward, start at the beginning.\n\t\t// If moving backward, start at the end.\n\t\tnextIndex = direction > 0 ? 0 : len - 1;\n\t}\n\n\tfor ( i = 0; i < len; i++ ) {\n\t\titem = this.items[ nextIndex ];\n\t\tif (\n\t\t\titem instanceof OO.ui.OptionWidget && item.isSelectable() &&\n\t\t\t( !filter || filter( item ) )\n\t\t) {\n\t\t\treturn item;\n\t\t}\n\t\tnextIndex = ( nextIndex + increase + len ) % len;\n\t}\n\treturn null;\n};\n\n/**\n * Find the next selectable item or `null` if there are no selectable items.\n * Disabled options and menu-section markers and breaks are not selectable.\n *\n * @return {OO.ui.OptionWidget|null} Item, `null` if there aren't any selectable items\n */\nOO.ui.SelectWidget.prototype.findFirstSelectableItem = function () {\n\treturn this.findRelativeSelectableItem( null, 1 );\n};\n\n/**\n * Add an array of options to the select. Optionally, an index number can be used to\n * specify an insertion point.\n *\n * @param {OO.ui.OptionWidget[]} items Items to add\n * @param {number} [index] Index to insert items after\n * @fires add\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.addItems = function ( items, index ) {\n\t// Mixin method\n\tOO.ui.mixin.GroupWidget.prototype.addItems.call( this, items, index );\n\n\t// Always provide an index, even if it was omitted\n\tthis.emit( 'add', items, index === undefined ? this.items.length - items.length - 1 : index );\n\n\treturn this;\n};\n\n/**\n * Remove the specified array of options from the select. Options will be detached\n * from the DOM, not removed, so they can be reused later. To remove all options from\n * the select, you may wish to use the #clearItems method instead.\n *\n * @param {OO.ui.OptionWidget[]} items Items to remove\n * @fires remove\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.removeItems = function ( items ) {\n\tvar i, len, item;\n\n\t// Deselect items being removed\n\tfor ( i = 0, len = items.length; i < len; i++ ) {\n\t\titem = items[ i ];\n\t\tif ( item.isSelected() ) {\n\t\t\tthis.selectItem( null );\n\t\t}\n\t}\n\n\t// Mixin method\n\tOO.ui.mixin.GroupWidget.prototype.removeItems.call( this, items );\n\n\tthis.emit( 'remove', items );\n\n\treturn this;\n};\n\n/**\n * Clear all options from the select. Options will be detached from the DOM, not removed,\n * so that they can be reused later. To remove a subset of options from the select, use\n * the #removeItems method.\n *\n * @fires remove\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.SelectWidget.prototype.clearItems = function () {\n\tvar items = this.items.slice();\n\n\t// Mixin method\n\tOO.ui.mixin.GroupWidget.prototype.clearItems.call( this );\n\n\t// Clear selection\n\tthis.selectItem( null );\n\n\tthis.emit( 'remove', items );\n\n\treturn this;\n};\n\n/**\n * Set the DOM element which has focus while the user is interacting with this SelectWidget.\n *\n * This is used to set `aria-activedescendant` and `aria-expanded` on it.\n *\n * @protected\n * @param {jQuery} $focusOwner\n */\nOO.ui.SelectWidget.prototype.setFocusOwner = function ( $focusOwner ) {\n\tthis.$focusOwner = $focusOwner;\n};\n","/**\n * DecoratedOptionWidgets are {@link OO.ui.OptionWidget options} that can be configured\n * with an {@link OO.ui.mixin.IconElement icon} and/or\n * {@link OO.ui.mixin.IndicatorElement indicator}.\n * This class is used with OO.ui.SelectWidget to create a selection of mutually exclusive\n * options. For more information about options and selects, please see the\n * [OOUI documentation on MediaWiki][1].\n *\n * @example\n * // Decorated options in a select widget.\n * var select = new OO.ui.SelectWidget( {\n * items: [\n * new OO.ui.DecoratedOptionWidget( {\n * data: 'a',\n * label: 'Option with icon',\n * icon: 'help'\n * } ),\n * new OO.ui.DecoratedOptionWidget( {\n * data: 'b',\n * label: 'Option with indicator',\n * indicator: 'next'\n * } )\n * ]\n * } );\n * $( document.body ).append( select.$element );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n *\n * @class\n * @extends OO.ui.OptionWidget\n * @mixins OO.ui.mixin.IconElement\n * @mixins OO.ui.mixin.IndicatorElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( config ) {\n\t// Parent constructor\n\tOO.ui.DecoratedOptionWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.IconElement.call( this, config );\n\tOO.ui.mixin.IndicatorElement.call( this, config );\n\n\t// Initialization\n\tthis.$element\n\t\t.addClass( 'oo-ui-decoratedOptionWidget' )\n\t\t.prepend( this.$icon )\n\t\t.append( this.$indicator );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.DecoratedOptionWidget, OO.ui.OptionWidget );\nOO.mixinClass( OO.ui.DecoratedOptionWidget, OO.ui.mixin.IconElement );\nOO.mixinClass( OO.ui.DecoratedOptionWidget, OO.ui.mixin.IndicatorElement );\n","/**\n * MenuOptionWidget is an option widget that looks like a menu item. The class is used with\n * OO.ui.MenuSelectWidget to create a menu of mutually exclusive options. Please see\n * the [OOUI documentation on MediaWiki] [1] for more information.\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Menu_selects_and_options\n *\n * @class\n * @extends OO.ui.DecoratedOptionWidget\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) {\n\t// Parent constructor\n\tOO.ui.MenuOptionWidget.parent.call( this, config );\n\n\t// Properties\n\tthis.checkIcon = new OO.ui.IconWidget( {\n\t\ticon: 'check',\n\t\tclasses: [ 'oo-ui-menuOptionWidget-checkIcon' ]\n\t} );\n\n\t// Initialization\n\tthis.$element\n\t\t.prepend( this.checkIcon.$element )\n\t\t.addClass( 'oo-ui-menuOptionWidget' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.MenuOptionWidget, OO.ui.DecoratedOptionWidget );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.MenuOptionWidget.static.scrollIntoViewOnSelect = true;\n","/**\n * MenuSectionOptionWidgets are used inside {@link OO.ui.MenuSelectWidget menu select widgets} to\n * group one or more related {@link OO.ui.MenuOptionWidget menu options}. MenuSectionOptionWidgets\n * cannot be highlighted or selected.\n *\n * @example\n * var dropdown = new OO.ui.DropdownWidget( {\n * menu: {\n * items: [\n * new OO.ui.MenuSectionOptionWidget( {\n * label: 'Dogs'\n * } ),\n * new OO.ui.MenuOptionWidget( {\n * data: 'corgi',\n * label: 'Welsh Corgi'\n * } ),\n * new OO.ui.MenuOptionWidget( {\n * data: 'poodle',\n * label: 'Standard Poodle'\n * } ),\n * new OO.ui.MenuSectionOptionWidget( {\n * label: 'Cats'\n * } ),\n * new OO.ui.MenuOptionWidget( {\n * data: 'lion',\n * label: 'Lion'\n * } )\n * ]\n * }\n * } );\n * $( document.body ).append( dropdown.$element );\n *\n * @class\n * @extends OO.ui.DecoratedOptionWidget\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.MenuSectionOptionWidget = function OoUiMenuSectionOptionWidget( config ) {\n\t// Parent constructor\n\tOO.ui.MenuSectionOptionWidget.parent.call( this, config );\n\n\t// Initialization\n\tthis.$element\n\t\t.addClass( 'oo-ui-menuSectionOptionWidget' )\n\t\t.removeAttr( 'role aria-selected' );\n\tthis.selected = false;\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.MenuSectionOptionWidget, OO.ui.DecoratedOptionWidget );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.MenuSectionOptionWidget.static.selectable = false;\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.MenuSectionOptionWidget.static.highlightable = false;\n","/**\n * MenuSelectWidget is a {@link OO.ui.SelectWidget select widget} that contains options and\n * is used together with OO.ui.MenuOptionWidget. It is designed be used as part of another widget.\n * See {@link OO.ui.DropdownWidget DropdownWidget},\n * {@link OO.ui.ComboBoxInputWidget ComboBoxInputWidget}, and\n * {@link OO.ui.mixin.LookupElement LookupElement} for examples of widgets that contain menus.\n * MenuSelectWidgets themselves are not instantiated directly, rather subclassed\n * and customized to be opened, closed, and displayed as needed.\n *\n * By default, menus are clipped to the visible viewport and are not visible when a user presses the\n * mouse outside the menu.\n *\n * Menus also have support for keyboard interaction:\n *\n * - Enter/Return key: choose and select a menu option\n * - Up-arrow key: highlight the previous menu option\n * - Down-arrow key: highlight the next menu option\n * - Escape key: hide the menu\n *\n * Unlike most widgets, MenuSelectWidget is initially hidden and must be shown by calling #toggle.\n *\n * Please see the [OOUI documentation on MediaWiki][1] for more information.\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n *\n * @class\n * @extends OO.ui.SelectWidget\n * @mixins OO.ui.mixin.ClippableElement\n * @mixins OO.ui.mixin.FloatableElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {OO.ui.TextInputWidget} [input] Text input used to implement option highlighting for menu\n * items that match the text the user types. This config is used by\n * {@link OO.ui.ComboBoxInputWidget ComboBoxInputWidget} and\n * {@link OO.ui.mixin.LookupElement LookupElement}\n * @cfg {jQuery} [$input] Text input used to implement option highlighting for menu items that match\n * the text the user types. This config is used by\n * {@link OO.ui.TagMultiselectWidget TagMultiselectWidget}\n * @cfg {OO.ui.Widget} [widget] Widget associated with the menu's active state. If the user clicks\n * the mouse anywhere on the page outside of this widget, the menu is hidden. For example, if\n * there is a button that toggles the menu's visibility on click, the menu will be hidden then\n * re-shown when the user clicks that button, unless the button (or its parent widget) is passed\n * in here.\n * @cfg {boolean} [autoHide=true] Hide the menu when the mouse is pressed outside the menu.\n * @cfg {jQuery} [$autoCloseIgnore] If these elements are clicked, don't auto-hide the menu.\n * @cfg {boolean} [hideOnChoose=true] Hide the menu when the user chooses an option.\n * @cfg {boolean} [filterFromInput=false] Filter the displayed options from the input\n * @cfg {boolean} [highlightOnFilter] Highlight the first result when filtering\n * @cfg {string} [filterMode='prefix'] The mode by which the menu filters the results.\n * Options are 'exact', 'prefix' or 'substring'. See `OO.ui.SelectWidget#getItemMatcher`\n * @cfg {number|string} [width] Width of the menu as a number of pixels or CSS string with unit\n * suffix, used by {@link OO.ui.mixin.ClippableElement ClippableElement}\n */\nOO.ui.MenuSelectWidget = function OoUiMenuSelectWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.MenuSelectWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.ClippableElement.call( this, $.extend( { $clippable: this.$group }, config ) );\n\tOO.ui.mixin.FloatableElement.call( this, config );\n\n\t// Initial vertical positions other than 'center' will result in\n\t// the menu being flipped if there is not enough space in the container.\n\t// Store the original position so we know what to reset to.\n\tthis.originalVerticalPosition = this.verticalPosition;\n\n\t// Properties\n\tthis.autoHide = config.autoHide === undefined || !!config.autoHide;\n\tthis.hideOnChoose = config.hideOnChoose === undefined || !!config.hideOnChoose;\n\tthis.filterFromInput = !!config.filterFromInput;\n\tthis.$input = config.$input ? config.$input : config.input ? config.input.$input : null;\n\tthis.$widget = config.widget ? config.widget.$element : null;\n\tthis.$autoCloseIgnore = config.$autoCloseIgnore || $( [] );\n\tthis.onDocumentMouseDownHandler = this.onDocumentMouseDown.bind( this );\n\tthis.onInputEditHandler = OO.ui.debounce( this.updateItemVisibility.bind( this ), 100 );\n\tthis.highlightOnFilter = !!config.highlightOnFilter;\n\tthis.lastHighlightedItem = null;\n\tthis.width = config.width;\n\tthis.filterMode = config.filterMode;\n\n\t// Initialization\n\tthis.$element.addClass( 'oo-ui-menuSelectWidget' );\n\tif ( config.widget ) {\n\t\tthis.setFocusOwner( config.widget.$tabIndexed );\n\t}\n\n\t// Initially hidden - using #toggle may cause errors if subclasses override toggle with methods\n\t// that reference properties not initialized at that time of parent class construction\n\t// TODO: Find a better way to handle post-constructor setup\n\tthis.visible = false;\n\tthis.$element.addClass( 'oo-ui-element-hidden' );\n\tthis.$focusOwner.attr( 'aria-expanded', 'false' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.MenuSelectWidget, OO.ui.SelectWidget );\nOO.mixinClass( OO.ui.MenuSelectWidget, OO.ui.mixin.ClippableElement );\nOO.mixinClass( OO.ui.MenuSelectWidget, OO.ui.mixin.FloatableElement );\n\n/* Events */\n\n/**\n * @event ready\n *\n * The menu is ready: it is visible and has been positioned and clipped.\n */\n\n/* Static properties */\n\n/**\n * Positions to flip to if there isn't room in the container for the\n * menu in a specific direction.\n *\n * @property {Object.}\n */\nOO.ui.MenuSelectWidget.static.flippedPositions = {\n\tbelow: 'above',\n\tabove: 'below',\n\ttop: 'bottom',\n\tbottom: 'top'\n};\n\n/* Methods */\n\n/**\n * Handles document mouse down events.\n *\n * @protected\n * @param {MouseEvent} e Mouse down event\n */\nOO.ui.MenuSelectWidget.prototype.onDocumentMouseDown = function ( e ) {\n\tif (\n\t\tthis.isVisible() &&\n\t\t!OO.ui.contains(\n\t\t\tthis.$element.add( this.$widget ).add( this.$autoCloseIgnore ).get(),\n\t\t\te.target,\n\t\t\ttrue\n\t\t)\n\t) {\n\t\tthis.toggle( false );\n\t}\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.onDocumentKeyDown = function ( e ) {\n\tvar currentItem = this.findHighlightedItem() || this.findSelectedItem();\n\n\tif ( !this.isDisabled() && this.isVisible() ) {\n\t\tswitch ( e.keyCode ) {\n\t\t\tcase OO.ui.Keys.LEFT:\n\t\t\tcase OO.ui.Keys.RIGHT:\n\t\t\t\t// Do nothing if a text field is associated, arrow keys will be handled natively\n\t\t\t\tif ( !this.$input ) {\n\t\t\t\t\tOO.ui.MenuSelectWidget.parent.prototype.onDocumentKeyDown.call( this, e );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase OO.ui.Keys.ESCAPE:\n\t\t\tcase OO.ui.Keys.TAB:\n\t\t\t\tif ( currentItem && !this.multiselect ) {\n\t\t\t\t\tcurrentItem.setHighlighted( false );\n\t\t\t\t}\n\t\t\t\tthis.toggle( false );\n\t\t\t\t// Don't prevent tabbing away, prevent defocusing\n\t\t\t\tif ( e.keyCode === OO.ui.Keys.ESCAPE ) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tOO.ui.MenuSelectWidget.parent.prototype.onDocumentKeyDown.call( this, e );\n\t\t\t\treturn;\n\t\t}\n\t}\n};\n\n/**\n * Update menu item visibility and clipping after input changes (if filterFromInput is enabled)\n * or after items were added/removed (always).\n *\n * @protected\n */\nOO.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {\n\tvar i, item, items, visible, section, sectionEmpty, filter, exactFilter,\n\t\tanyVisible = false,\n\t\tlen = this.items.length,\n\t\tshowAll = !this.isVisible(),\n\t\texactMatch = false;\n\n\tif ( this.$input && this.filterFromInput ) {\n\t\tfilter = showAll ? null : this.getItemMatcher( this.$input.val(), this.filterMode );\n\t\texactFilter = this.getItemMatcher( this.$input.val(), 'exact' );\n\t\t// Hide non-matching options, and also hide section headers if all options\n\t\t// in their section are hidden.\n\t\tfor ( i = 0; i < len; i++ ) {\n\t\t\titem = this.items[ i ];\n\t\t\tif ( item instanceof OO.ui.MenuSectionOptionWidget ) {\n\t\t\t\tif ( section ) {\n\t\t\t\t\t// If the previous section was empty, hide its header\n\t\t\t\t\tsection.toggle( showAll || !sectionEmpty );\n\t\t\t\t}\n\t\t\t\tsection = item;\n\t\t\t\tsectionEmpty = true;\n\t\t\t} else if ( item instanceof OO.ui.OptionWidget ) {\n\t\t\t\tvisible = showAll || filter( item );\n\t\t\t\texactMatch = exactMatch || exactFilter( item );\n\t\t\t\tanyVisible = anyVisible || visible;\n\t\t\t\tsectionEmpty = sectionEmpty && !visible;\n\t\t\t\titem.toggle( visible );\n\t\t\t}\n\t\t}\n\t\t// Process the final section\n\t\tif ( section ) {\n\t\t\tsection.toggle( showAll || !sectionEmpty );\n\t\t}\n\n\t\tif ( !anyVisible ) {\n\t\t\tthis.highlightItem( null );\n\t\t}\n\n\t\tthis.$element.toggleClass( 'oo-ui-menuSelectWidget-invisible', !anyVisible );\n\n\t\tif (\n\t\t\tthis.highlightOnFilter &&\n\t\t\t!( this.lastHighlightedItem && this.lastHighlightedItem.isVisible() ) &&\n\t\t\tthis.isVisible()\n\t\t) {\n\t\t\t// Highlight the first item on the list\n\t\t\titem = null;\n\t\t\titems = this.getItems();\n\t\t\tfor ( i = 0; i < items.length; i++ ) {\n\t\t\t\tif ( items[ i ].isVisible() ) {\n\t\t\t\t\titem = items[ i ];\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.highlightItem( item );\n\t\t\tthis.lastHighlightedItem = item;\n\t\t}\n\t}\n\n\t// Reevaluate clipping\n\tthis.clip();\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.bindDocumentKeyDownListener = function () {\n\tif ( this.$input ) {\n\t\tthis.$input.on( 'keydown', this.onDocumentKeyDownHandler );\n\t} else {\n\t\tOO.ui.MenuSelectWidget.parent.prototype.bindDocumentKeyDownListener.call( this );\n\t}\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.unbindDocumentKeyDownListener = function () {\n\tif ( this.$input ) {\n\t\tthis.$input.off( 'keydown', this.onDocumentKeyDownHandler );\n\t} else {\n\t\tOO.ui.MenuSelectWidget.parent.prototype.unbindDocumentKeyDownListener.call( this );\n\t}\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.bindDocumentKeyPressListener = function () {\n\tif ( this.$input ) {\n\t\tif ( this.filterFromInput ) {\n\t\t\tthis.$input.on(\n\t\t\t\t'keydown mouseup cut paste change input select',\n\t\t\t\tthis.onInputEditHandler\n\t\t\t);\n\t\t\tthis.updateItemVisibility();\n\t\t}\n\t} else {\n\t\tOO.ui.MenuSelectWidget.parent.prototype.bindDocumentKeyPressListener.call( this );\n\t}\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.unbindDocumentKeyPressListener = function () {\n\tif ( this.$input ) {\n\t\tif ( this.filterFromInput ) {\n\t\t\tthis.$input.off(\n\t\t\t\t'keydown mouseup cut paste change input select',\n\t\t\t\tthis.onInputEditHandler\n\t\t\t);\n\t\t\tthis.updateItemVisibility();\n\t\t}\n\t} else {\n\t\tOO.ui.MenuSelectWidget.parent.prototype.unbindDocumentKeyPressListener.call( this );\n\t}\n};\n\n/**\n * Choose an item.\n *\n * When a user chooses an item, the menu is closed, unless the hideOnChoose config option is\n * set to false.\n *\n * Note that ‘choose’ should never be modified programmatically. A user can choose an option with\n * the keyboard or mouse and it becomes selected. To select an item programmatically,\n * use the #selectItem method.\n *\n * @param {OO.ui.OptionWidget} item Item to choose\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.MenuSelectWidget.prototype.chooseItem = function ( item ) {\n\tOO.ui.MenuSelectWidget.parent.prototype.chooseItem.call( this, item );\n\tif ( this.hideOnChoose ) {\n\t\tthis.toggle( false );\n\t}\n\treturn this;\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.addItems = function ( items, index ) {\n\t// Parent method\n\tOO.ui.MenuSelectWidget.parent.prototype.addItems.call( this, items, index );\n\n\tthis.updateItemVisibility();\n\n\treturn this;\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.removeItems = function ( items ) {\n\t// Parent method\n\tOO.ui.MenuSelectWidget.parent.prototype.removeItems.call( this, items );\n\n\tthis.updateItemVisibility();\n\n\treturn this;\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.clearItems = function () {\n\t// Parent method\n\tOO.ui.MenuSelectWidget.parent.prototype.clearItems.call( this );\n\n\tthis.updateItemVisibility();\n\n\treturn this;\n};\n\n/**\n * Toggle visibility of the menu. The menu is initially hidden and must be shown by calling\n * `.toggle( true )` after its #$element is attached to the DOM.\n *\n * Do not show the menu while it is not attached to the DOM. The calculations required to display\n * it in the right place and with the right dimensions only work correctly while it is attached.\n * Side-effects may include broken interface and exceptions being thrown. This wasn't always\n * strictly enforced, so currently it only generates a warning in the browser console.\n *\n * @fires ready\n * @inheritdoc\n */\nOO.ui.MenuSelectWidget.prototype.toggle = function ( visible ) {\n\tvar change, originalHeight, flippedHeight, selectedItem;\n\n\tvisible = ( visible === undefined ? !this.visible : !!visible ) && !!this.items.length;\n\tchange = visible !== this.isVisible();\n\n\tif ( visible && !this.warnedUnattached && !this.isElementAttached() ) {\n\t\tOO.ui.warnDeprecation( 'MenuSelectWidget#toggle: Before calling this method, the menu must be attached to the DOM.' );\n\t\tthis.warnedUnattached = true;\n\t}\n\n\tif ( change && visible ) {\n\t\t// Reset position before showing the popup again. It's possible we no longer need to flip\n\t\t// (e.g. if the user scrolled).\n\t\tthis.setVerticalPosition( this.originalVerticalPosition );\n\t}\n\n\t// Parent method\n\tOO.ui.MenuSelectWidget.parent.prototype.toggle.call( this, visible );\n\n\tif ( change ) {\n\t\tif ( visible ) {\n\n\t\t\tif ( this.width ) {\n\t\t\t\tthis.setIdealSize( this.width );\n\t\t\t} else if ( this.$floatableContainer ) {\n\t\t\t\tthis.$clippable.css( 'width', 'auto' );\n\t\t\t\tthis.setIdealSize(\n\t\t\t\t\tthis.$floatableContainer[ 0 ].offsetWidth > this.$clippable[ 0 ].offsetWidth ?\n\t\t\t\t\t\t// Dropdown is smaller than handle so expand to width\n\t\t\t\t\t\tthis.$floatableContainer[ 0 ].offsetWidth :\n\t\t\t\t\t\t// Dropdown is larger than handle so auto size\n\t\t\t\t\t\t'auto'\n\t\t\t\t);\n\t\t\t\tthis.$clippable.css( 'width', '' );\n\t\t\t}\n\n\t\t\tthis.togglePositioning( !!this.$floatableContainer );\n\t\t\tthis.toggleClipping( true );\n\n\t\t\tthis.bindDocumentKeyDownListener();\n\t\t\tthis.bindDocumentKeyPressListener();\n\n\t\t\tif (\n\t\t\t\t( this.isClippedVertically() || this.isFloatableOutOfView() ) &&\n\t\t\t\tthis.originalVerticalPosition !== 'center'\n\t\t\t) {\n\t\t\t\t// If opening the menu in one direction causes it to be clipped, flip it\n\t\t\t\toriginalHeight = this.$element.height();\n\t\t\t\tthis.setVerticalPosition(\n\t\t\t\t\tthis.constructor.static.flippedPositions[ this.originalVerticalPosition ]\n\t\t\t\t);\n\t\t\t\tif ( this.isClippedVertically() || this.isFloatableOutOfView() ) {\n\t\t\t\t\t// If flipping also causes it to be clipped, open in whichever direction\n\t\t\t\t\t// we have more space\n\t\t\t\t\tflippedHeight = this.$element.height();\n\t\t\t\t\tif ( originalHeight > flippedHeight ) {\n\t\t\t\t\t\tthis.setVerticalPosition( this.originalVerticalPosition );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t// Note that we do not flip the menu's opening direction if the clipping changes\n\t\t\t// later (e.g. after the user scrolls), that seems like it would be annoying\n\n\t\t\tthis.$focusOwner.attr( 'aria-expanded', 'true' );\n\n\t\t\tselectedItem = this.findSelectedItem();\n\t\t\tif ( !this.multiselect && selectedItem ) {\n\t\t\t\t// TODO: Verify if this is even needed; This is already done on highlight changes\n\t\t\t\t// in SelectWidget#highlightItem, so we should just need to highlight the item\n\t\t\t\t// we need to highlight here and not bother with attr or checking selections.\n\t\t\t\tthis.$focusOwner.attr( 'aria-activedescendant', selectedItem.getElementId() );\n\t\t\t\tselectedItem.scrollElementIntoView( { duration: 0 } );\n\t\t\t}\n\n\t\t\t// Auto-hide\n\t\t\tif ( this.autoHide ) {\n\t\t\t\tthis.getElementDocument().addEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );\n\t\t\t}\n\n\t\t\tthis.emit( 'ready' );\n\t\t} else {\n\t\t\tthis.$focusOwner.removeAttr( 'aria-activedescendant' );\n\t\t\tthis.unbindDocumentKeyDownListener();\n\t\t\tthis.unbindDocumentKeyPressListener();\n\t\t\tthis.$focusOwner.attr( 'aria-expanded', 'false' );\n\t\t\tthis.getElementDocument().removeEventListener( 'mousedown', this.onDocumentMouseDownHandler, true );\n\t\t\tthis.togglePositioning( false );\n\t\t\tthis.toggleClipping( false );\n\t\t\tthis.lastHighlightedItem = null;\n\t\t}\n\t}\n\n\treturn this;\n};\n\n/**\n * Scroll to the top of the menu\n */\nOO.ui.MenuSelectWidget.prototype.scrollToTop = function () {\n\tthis.$element.scrollTop( 0 );\n};\n","/**\n * DropdownWidgets are not menus themselves, rather they contain a menu of options created with\n * OO.ui.MenuOptionWidget. The DropdownWidget takes care of opening and displaying the menu so that\n * users can interact with it.\n *\n * If you want to use this within an HTML form, such as a OO.ui.FormLayout, use\n * OO.ui.DropdownInputWidget instead.\n *\n * @example\n * // A DropdownWidget with a menu that contains three options.\n * var dropDown = new OO.ui.DropdownWidget( {\n * label: 'Dropdown menu: Select a menu option',\n * menu: {\n * items: [\n * new OO.ui.MenuOptionWidget( {\n * data: 'a',\n * label: 'First'\n * } ),\n * new OO.ui.MenuOptionWidget( {\n * data: 'b',\n * label: 'Second'\n * } ),\n * new OO.ui.MenuOptionWidget( {\n * data: 'c',\n * label: 'Third'\n * } )\n * ]\n * }\n * } );\n *\n * $( document.body ).append( dropDown.$element );\n *\n * dropDown.getMenu().selectItemByData( 'b' );\n *\n * dropDown.getMenu().findSelectedItem().getData(); // Returns 'b'.\n *\n * For more information, please see the [OOUI documentation on MediaWiki] [1].\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Menu_selects_and_options\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.IconElement\n * @mixins OO.ui.mixin.IndicatorElement\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.TitledElement\n * @mixins OO.ui.mixin.TabIndexedElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {Object} [menu] Configuration options to pass to\n * {@link OO.ui.MenuSelectWidget menu select widget}.\n * @cfg {jQuery|boolean} [$overlay] Render the menu into a separate layer. This configuration is\n * useful in cases where the expanded menu is larger than its containing `
`. The specified\n * overlay layer is usually on top of the containing `
` and has a larger area. By default,\n * the menu uses relative positioning. Pass 'true' to use the default overlay.\n * See .\n */\nOO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {\n\t// Configuration initialization\n\tconfig = $.extend( { indicator: 'down' }, config );\n\n\t// Parent constructor\n\tOO.ui.DropdownWidget.parent.call( this, config );\n\n\t// Properties (must be set before TabIndexedElement constructor call)\n\tthis.$handle = $( '' );\n\tthis.$overlay = ( config.$overlay === true ?\n\t\tOO.ui.getDefaultOverlay() : config.$overlay ) || this.$element;\n\n\t// Mixin constructors\n\tOO.ui.mixin.IconElement.call( this, config );\n\tOO.ui.mixin.IndicatorElement.call( this, config );\n\tOO.ui.mixin.LabelElement.call( this, config );\n\tOO.ui.mixin.TitledElement.call( this, $.extend( {\n\t\t$titled: this.$label\n\t}, config ) );\n\tOO.ui.mixin.TabIndexedElement.call( this, $.extend( {\n\t\t$tabIndexed: this.$handle\n\t}, config ) );\n\n\t// Properties\n\tthis.menu = new OO.ui.MenuSelectWidget( $.extend( {\n\t\twidget: this,\n\t\t$floatableContainer: this.$element\n\t}, config.menu ) );\n\n\t// Events\n\tthis.$handle.on( {\n\t\tclick: this.onClick.bind( this ),\n\t\tkeydown: this.onKeyDown.bind( this ),\n\t\t// Hack? Handle type-to-search when menu is not expanded and not handling its own events.\n\t\tkeypress: this.menu.onDocumentKeyPressHandler,\n\t\tblur: this.menu.clearKeyPressBuffer.bind( this.menu )\n\t} );\n\tthis.menu.connect( this, {\n\t\tselect: 'onMenuSelect',\n\t\ttoggle: 'onMenuToggle'\n\t} );\n\n\t// Initialization\n\tthis.$label\n\t\t.attr( {\n\t\t\trole: 'textbox',\n\t\t\t'aria-readonly': 'true'\n\t\t} );\n\tthis.$handle\n\t\t.addClass( 'oo-ui-dropdownWidget-handle' )\n\t\t.append( this.$icon, this.$label, this.$indicator )\n\t\t.attr( {\n\t\t\trole: 'combobox',\n\t\t\t'aria-autocomplete': 'list',\n\t\t\t'aria-expanded': 'false',\n\t\t\t'aria-haspopup': 'true',\n\t\t\t'aria-owns': this.menu.getElementId()\n\t\t} );\n\tthis.$element\n\t\t.addClass( 'oo-ui-dropdownWidget' )\n\t\t.append( this.$handle );\n\tthis.$overlay.append( this.menu.$element );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.DropdownWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.DropdownWidget, OO.ui.mixin.IconElement );\nOO.mixinClass( OO.ui.DropdownWidget, OO.ui.mixin.IndicatorElement );\nOO.mixinClass( OO.ui.DropdownWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.DropdownWidget, OO.ui.mixin.TitledElement );\nOO.mixinClass( OO.ui.DropdownWidget, OO.ui.mixin.TabIndexedElement );\n\n/* Methods */\n\n/**\n * Get the menu.\n *\n * @return {OO.ui.MenuSelectWidget} Menu of widget\n */\nOO.ui.DropdownWidget.prototype.getMenu = function () {\n\treturn this.menu;\n};\n\n/**\n * Handles menu select events.\n *\n * @private\n * @param {OO.ui.MenuOptionWidget} item Selected menu item\n */\nOO.ui.DropdownWidget.prototype.onMenuSelect = function ( item ) {\n\tvar selectedLabel;\n\n\tif ( !item ) {\n\t\tthis.setLabel( null );\n\t\treturn;\n\t}\n\n\tselectedLabel = item.getLabel();\n\n\t// If the label is a DOM element, clone it, because setLabel will append() it\n\tif ( selectedLabel instanceof $ ) {\n\t\tselectedLabel = selectedLabel.clone();\n\t}\n\n\tthis.setLabel( selectedLabel );\n};\n\n/**\n * Handle menu toggle events.\n *\n * @private\n * @param {boolean} isVisible Open state of the menu\n */\nOO.ui.DropdownWidget.prototype.onMenuToggle = function ( isVisible ) {\n\tthis.$element.toggleClass( 'oo-ui-dropdownWidget-open', isVisible );\n};\n\n/**\n * Handle mouse click events.\n *\n * @private\n * @param {jQuery.Event} e Mouse click event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.DropdownWidget.prototype.onClick = function ( e ) {\n\tif ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {\n\t\tthis.menu.toggle();\n\t}\n\treturn false;\n};\n\n/**\n * Handle key down events.\n *\n * @private\n * @param {jQuery.Event} e Key down event\n * @return {undefined|boolean} False to prevent default if event is handled\n */\nOO.ui.DropdownWidget.prototype.onKeyDown = function ( e ) {\n\tif (\n\t\t!this.isDisabled() &&\n\t\t(\n\t\t\te.which === OO.ui.Keys.ENTER ||\n\t\t\t(\n\t\t\t\te.which === OO.ui.Keys.SPACE &&\n\t\t\t\t// Avoid conflicts with type-to-search, see SelectWidget#onKeyPress.\n\t\t\t\t// Space only closes the menu is the user is not typing to search.\n\t\t\t\tthis.menu.keyPressBuffer === ''\n\t\t\t) ||\n\t\t\t(\n\t\t\t\t!this.menu.isVisible() &&\n\t\t\t\t(\n\t\t\t\t\te.which === OO.ui.Keys.UP ||\n\t\t\t\t\te.which === OO.ui.Keys.DOWN\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t) {\n\t\tthis.menu.toggle();\n\t\treturn false;\n\t}\n};\n","/**\n * RadioOptionWidget is an option widget that looks like a radio button.\n * The class is used with OO.ui.RadioSelectWidget to create a selection of radio options.\n * Please see the [OOUI documentation on MediaWiki] [1] for more information.\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Button_selects_and_option\n *\n * @class\n * @extends OO.ui.OptionWidget\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.RadioOptionWidget = function OoUiRadioOptionWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties (must be done before parent constructor which calls #setDisabled)\n\tthis.radio = new OO.ui.RadioInputWidget( { value: config.data, tabIndex: -1 } );\n\n\t// Parent constructor\n\tOO.ui.RadioOptionWidget.parent.call( this, config );\n\n\t// Initialization\n\t// Remove implicit role, we're handling it ourselves\n\tthis.radio.$input.attr( 'role', 'presentation' );\n\tthis.$element\n\t\t.addClass( 'oo-ui-radioOptionWidget' )\n\t\t.attr( 'role', 'radio' )\n\t\t.attr( 'aria-checked', 'false' )\n\t\t.removeAttr( 'aria-selected' )\n\t\t.prepend( this.radio.$element );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.RadioOptionWidget, OO.ui.OptionWidget );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.RadioOptionWidget.static.highlightable = false;\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.RadioOptionWidget.static.scrollIntoViewOnSelect = true;\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.RadioOptionWidget.static.pressable = false;\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.RadioOptionWidget.static.tagName = 'label';\n\n/* Methods */\n\n/**\n * @inheritdoc\n */\nOO.ui.RadioOptionWidget.prototype.setSelected = function ( state ) {\n\tOO.ui.RadioOptionWidget.parent.prototype.setSelected.call( this, state );\n\n\tthis.radio.setSelected( state );\n\tthis.$element\n\t\t.attr( 'aria-checked', state.toString() )\n\t\t.removeAttr( 'aria-selected' );\n\n\treturn this;\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.RadioOptionWidget.prototype.setDisabled = function ( disabled ) {\n\tOO.ui.RadioOptionWidget.parent.prototype.setDisabled.call( this, disabled );\n\n\tthis.radio.setDisabled( this.isDisabled() );\n\n\treturn this;\n};\n","/**\n * RadioSelectWidget is a {@link OO.ui.SelectWidget select widget} that contains radio\n * options and is used together with OO.ui.RadioOptionWidget. The RadioSelectWidget provides\n * an interface for adding, removing and selecting options.\n * Please see the [OOUI documentation on MediaWiki][1] for more information.\n *\n * If you want to use this within an HTML form, such as a OO.ui.FormLayout, use\n * OO.ui.RadioSelectInputWidget instead.\n *\n * @example\n * // A RadioSelectWidget with RadioOptions.\n * var option1 = new OO.ui.RadioOptionWidget( {\n * data: 'a',\n * label: 'Selected radio option'\n * } ),\n * option2 = new OO.ui.RadioOptionWidget( {\n * data: 'b',\n * label: 'Unselected radio option'\n * } );\n * radioSelect = new OO.ui.RadioSelectWidget( {\n * items: [ option1, option2 ]\n * } );\n *\n * // Select 'option 1' using the RadioSelectWidget's selectItem() method.\n * radioSelect.selectItem( option1 );\n *\n * $( document.body ).append( radioSelect.$element );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n\n *\n * @class\n * @extends OO.ui.SelectWidget\n * @mixins OO.ui.mixin.TabIndexedElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.RadioSelectWidget = function OoUiRadioSelectWidget( config ) {\n\t// Parent constructor\n\tOO.ui.RadioSelectWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.TabIndexedElement.call( this, config );\n\n\t// Events\n\tthis.$element.on( {\n\t\tfocus: this.bindDocumentKeyDownListener.bind( this ),\n\t\tblur: this.unbindDocumentKeyDownListener.bind( this )\n\t} );\n\n\t// Initialization\n\tthis.$element\n\t\t.addClass( 'oo-ui-radioSelectWidget' )\n\t\t.attr( 'role', 'radiogroup' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.RadioSelectWidget, OO.ui.SelectWidget );\nOO.mixinClass( OO.ui.RadioSelectWidget, OO.ui.mixin.TabIndexedElement );\n","/**\n * MultioptionWidgets are special elements that can be selected and configured with data. The\n * data is often unique for each option, but it does not have to be. MultioptionWidgets are used\n * with OO.ui.SelectWidget to create a selection of mutually exclusive options. For more information\n * and examples, please see the [OOUI documentation on MediaWiki][1].\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n *\n * @class\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.ItemWidget\n * @mixins OO.ui.mixin.LabelElement\n * @mixins OO.ui.mixin.TitledElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {boolean} [selected=false] Whether the option is initially selected\n */\nOO.ui.MultioptionWidget = function OoUiMultioptionWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Parent constructor\n\tOO.ui.MultioptionWidget.parent.call( this, config );\n\n\t// Mixin constructors\n\tOO.ui.mixin.ItemWidget.call( this );\n\tOO.ui.mixin.LabelElement.call( this, config );\n\tOO.ui.mixin.TitledElement.call( this, config );\n\n\t// Properties\n\tthis.selected = null;\n\n\t// Initialization\n\tthis.$element\n\t\t.addClass( 'oo-ui-multioptionWidget' )\n\t\t.append( this.$label );\n\tthis.setSelected( config.selected );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.MultioptionWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.MultioptionWidget, OO.ui.mixin.ItemWidget );\nOO.mixinClass( OO.ui.MultioptionWidget, OO.ui.mixin.LabelElement );\nOO.mixinClass( OO.ui.MultioptionWidget, OO.ui.mixin.TitledElement );\n\n/* Events */\n\n/**\n * @event change\n *\n * A change event is emitted when the selected state of the option changes.\n *\n * @param {boolean} selected Whether the option is now selected\n */\n\n/* Methods */\n\n/**\n * Check if the option is selected.\n *\n * @return {boolean} Item is selected\n */\nOO.ui.MultioptionWidget.prototype.isSelected = function () {\n\treturn this.selected;\n};\n\n/**\n * Set the option’s selected state. In general, all modifications to the selection\n * should be handled by the SelectWidget’s\n * {@link OO.ui.SelectWidget#selectItem selectItem( [item] )} method instead of this method.\n *\n * @param {boolean} [state=false] Select option\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.MultioptionWidget.prototype.setSelected = function ( state ) {\n\tstate = !!state;\n\tif ( this.selected !== state ) {\n\t\tthis.selected = state;\n\t\tthis.emit( 'change', state );\n\t\tthis.$element.toggleClass( 'oo-ui-multioptionWidget-selected', state );\n\t}\n\treturn this;\n};\n","/**\n * MultiselectWidget allows selecting multiple options from a list.\n *\n * For more information about menus and options, please see the [OOUI documentation\n * on MediaWiki][1].\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Menu_selects_and_options\n *\n * @class\n * @abstract\n * @extends OO.ui.Widget\n * @mixins OO.ui.mixin.GroupWidget\n * @mixins OO.ui.mixin.TitledElement\n *\n * @constructor\n * @param {Object} [config] Configuration options\n * @cfg {OO.ui.MultioptionWidget[]} [items] An array of options to add to the multiselect.\n */\nOO.ui.MultiselectWidget = function OoUiMultiselectWidget( config ) {\n\t// Parent constructor\n\tOO.ui.MultiselectWidget.parent.call( this, config );\n\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Mixin constructors\n\tOO.ui.mixin.GroupWidget.call( this, config );\n\tOO.ui.mixin.TitledElement.call( this, config );\n\n\t// Events\n\tthis.aggregate( {\n\t\tchange: 'select'\n\t} );\n\t// This is mostly for compatibility with TagMultiselectWidget... normally, 'change' is emitted\n\t// by GroupElement only when items are added/removed\n\tthis.connect( this, {\n\t\tselect: [ 'emit', 'change' ]\n\t} );\n\n\t// Initialization\n\tif ( config.items ) {\n\t\tthis.addItems( config.items );\n\t}\n\tthis.$group.addClass( 'oo-ui-multiselectWidget-group' );\n\tthis.$element.addClass( 'oo-ui-multiselectWidget' )\n\t\t.append( this.$group );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.MultiselectWidget, OO.ui.Widget );\nOO.mixinClass( OO.ui.MultiselectWidget, OO.ui.mixin.GroupWidget );\nOO.mixinClass( OO.ui.MultiselectWidget, OO.ui.mixin.TitledElement );\n\n/* Events */\n\n/**\n * @event change\n *\n * A change event is emitted when the set of items changes, or an item is selected or deselected.\n */\n\n/**\n * @event select\n *\n * A select event is emitted when an item is selected or deselected.\n */\n\n/* Methods */\n\n/**\n * Find options that are selected.\n *\n * @return {OO.ui.MultioptionWidget[]} Selected options\n */\nOO.ui.MultiselectWidget.prototype.findSelectedItems = function () {\n\treturn this.items.filter( function ( item ) {\n\t\treturn item.isSelected();\n\t} );\n};\n\n/**\n * Find the data of options that are selected.\n *\n * @return {Object[]|string[]} Values of selected options\n */\nOO.ui.MultiselectWidget.prototype.findSelectedItemsData = function () {\n\treturn this.findSelectedItems().map( function ( item ) {\n\t\treturn item.data;\n\t} );\n};\n\n/**\n * Select options by reference. Options not mentioned in the `items` array will be deselected.\n *\n * @param {OO.ui.MultioptionWidget[]} items Items to select\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.MultiselectWidget.prototype.selectItems = function ( items ) {\n\tthis.items.forEach( function ( item ) {\n\t\tvar selected = items.indexOf( item ) !== -1;\n\t\titem.setSelected( selected );\n\t} );\n\treturn this;\n};\n\n/**\n * Select items by their data. Options not mentioned in the `datas` array will be deselected.\n *\n * @param {Object[]|string[]} datas Values of items to select\n * @chainable\n * @return {OO.ui.Widget} The widget, for chaining\n */\nOO.ui.MultiselectWidget.prototype.selectItemsByData = function ( datas ) {\n\tvar items,\n\t\twidget = this;\n\titems = datas.map( function ( data ) {\n\t\treturn widget.findItemFromData( data );\n\t} );\n\tthis.selectItems( items );\n\treturn this;\n};\n","/**\n * CheckboxMultioptionWidget is an option widget that looks like a checkbox.\n * The class is used with OO.ui.CheckboxMultiselectWidget to create a selection of checkbox options.\n * Please see the [OOUI documentation on MediaWiki] [1] for more information.\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Button_selects_and_option\n *\n * @class\n * @extends OO.ui.MultioptionWidget\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.CheckboxMultioptionWidget = function OoUiCheckboxMultioptionWidget( config ) {\n\t// Configuration initialization\n\tconfig = config || {};\n\n\t// Properties (must be done before parent constructor which calls #setDisabled)\n\tthis.checkbox = new OO.ui.CheckboxInputWidget();\n\n\t// Parent constructor\n\tOO.ui.CheckboxMultioptionWidget.parent.call( this, config );\n\n\t// Events\n\tthis.checkbox.on( 'change', this.onCheckboxChange.bind( this ) );\n\tthis.$element.on( 'keydown', this.onKeyDown.bind( this ) );\n\n\t// Initialization\n\tthis.$element\n\t\t.addClass( 'oo-ui-checkboxMultioptionWidget' )\n\t\t.prepend( this.checkbox.$element );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.CheckboxMultioptionWidget, OO.ui.MultioptionWidget );\n\n/* Static Properties */\n\n/**\n * @static\n * @inheritdoc\n */\nOO.ui.CheckboxMultioptionWidget.static.tagName = 'label';\n\n/* Methods */\n\n/**\n * Handle checkbox selected state change.\n *\n * @private\n */\nOO.ui.CheckboxMultioptionWidget.prototype.onCheckboxChange = function () {\n\tthis.setSelected( this.checkbox.isSelected() );\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.CheckboxMultioptionWidget.prototype.setSelected = function ( state ) {\n\tOO.ui.CheckboxMultioptionWidget.parent.prototype.setSelected.call( this, state );\n\tthis.checkbox.setSelected( state );\n\treturn this;\n};\n\n/**\n * @inheritdoc\n */\nOO.ui.CheckboxMultioptionWidget.prototype.setDisabled = function ( disabled ) {\n\tOO.ui.CheckboxMultioptionWidget.parent.prototype.setDisabled.call( this, disabled );\n\tthis.checkbox.setDisabled( this.isDisabled() );\n\treturn this;\n};\n\n/**\n * Focus the widget.\n */\nOO.ui.CheckboxMultioptionWidget.prototype.focus = function () {\n\tthis.checkbox.focus();\n};\n\n/**\n * Handle key down events.\n *\n * @protected\n * @param {jQuery.Event} e\n */\nOO.ui.CheckboxMultioptionWidget.prototype.onKeyDown = function ( e ) {\n\tvar\n\t\telement = this.getElementGroup(),\n\t\tnextItem;\n\n\tif ( e.keyCode === OO.ui.Keys.LEFT || e.keyCode === OO.ui.Keys.UP ) {\n\t\tnextItem = element.getRelativeFocusableItem( this, -1 );\n\t} else if ( e.keyCode === OO.ui.Keys.RIGHT || e.keyCode === OO.ui.Keys.DOWN ) {\n\t\tnextItem = element.getRelativeFocusableItem( this, 1 );\n\t}\n\n\tif ( nextItem ) {\n\t\te.preventDefault();\n\t\tnextItem.focus();\n\t}\n};\n","/**\n * CheckboxMultiselectWidget is a {@link OO.ui.MultiselectWidget multiselect widget} that contains\n * checkboxes and is used together with OO.ui.CheckboxMultioptionWidget. The\n * CheckboxMultiselectWidget provides an interface for adding, removing and selecting options.\n * Please see the [OOUI documentation on MediaWiki][1] for more information.\n *\n * If you want to use this within an HTML form, such as a OO.ui.FormLayout, use\n * OO.ui.CheckboxMultiselectInputWidget instead.\n *\n * @example\n * // A CheckboxMultiselectWidget with CheckboxMultioptions.\n * var option1 = new OO.ui.CheckboxMultioptionWidget( {\n * data: 'a',\n * selected: true,\n * label: 'Selected checkbox'\n * } ),\n * option2 = new OO.ui.CheckboxMultioptionWidget( {\n * data: 'b',\n * label: 'Unselected checkbox'\n * } ),\n * multiselect = new OO.ui.CheckboxMultiselectWidget( {\n * items: [ option1, option2 ]\n * } );\n * $( document.body ).append( multiselect.$element );\n *\n * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options\n *\n * @class\n * @extends OO.ui.MultiselectWidget\n *\n * @constructor\n * @param {Object} [config] Configuration options\n */\nOO.ui.CheckboxMultiselectWidget = function OoUiCheckboxMultiselectWidget( config ) {\n\t// Parent constructor\n\tOO.ui.CheckboxMultiselectWidget.parent.call( this, config );\n\n\t// Properties\n\tthis.$lastClicked = null;\n\n\t// Events\n\tthis.$group.on( 'click', this.onClick.bind( this ) );\n\n\t// Initialization\n\tthis.$element.addClass( 'oo-ui-checkboxMultiselectWidget' );\n};\n\n/* Setup */\n\nOO.inheritClass( OO.ui.CheckboxMultiselectWidget, OO.ui.MultiselectWidget );\n\n/* Methods */\n\n/**\n * Get an option by its position relative to the specified item (or to the start of the\n * option array, if item is `null`). The direction in which to search through the option array\n * is specified with a number: -1 for reverse (the default) or 1 for forward. The method will\n * return an option, or `null` if there are no options in the array.\n *\n * @param {OO.ui.CheckboxMultioptionWidget|null} item Item to describe the start position, or\n * `null` to start at the beginning of the array.\n * @param {number} direction Direction to move in: -1 to move backward, 1 to move forward\n * @return {OO.ui.CheckboxMultioptionWidget|null} Item at position, `null` if there are no items\n * in the select.\n */\nOO.ui.CheckboxMultiselectWidget.prototype.getRelativeFocusableItem = function ( item, direction ) {\n\tvar currentIndex, nextIndex, i,\n\t\tincrease = direction > 0 ? 1 : -1,\n\t\tlen = this.items.length;\n\n\tif ( item ) {\n\t\tcurrentIndex = this.items.indexOf( item );\n\t\tnextIndex = ( currentIndex + increase + len ) % len;\n\t} else {\n\t\t// If no item is selected and moving forward, start at the beginning.\n\t\t// If moving backward, start at the end.\n\t\tnextIndex = direction > 0 ? 0 : len - 1;\n\t}\n\n\tfor ( i = 0; i < len; i++ ) {\n\t\titem = this.items[ nextIndex ];\n\t\tif ( item && !item.isDisabled() ) {\n\t\t\treturn item;\n\t\t}\n\t\tnextIndex = ( nextIndex + increase + len ) % len;\n\t}\n\treturn null;\n};\n\n/**\n * Handle click events on checkboxes.\n *\n * @param {jQuery.Event} e\n */\nOO.ui.CheckboxMultiselectWidget.prototype.onClick = function ( e ) {\n\tvar $options, lastClickedIndex, nowClickedIndex, i, direction, wasSelected, items,\n\t\t$lastClicked = this.$lastClicked,\n\t\t$nowClicked = $( e.target ).closest( '.oo-ui-checkboxMultioptionWidget' )\n\t\t\t.not( '.oo-ui-widget-disabled' );\n\n\t// Allow selecting multiple options at once by Shift-clicking them\n\tif ( $lastClicked && $nowClicked.length && e.shiftKey ) {\n\t\t$options = this.$group.find( '.oo-ui-checkboxMultioptionWidget' );\n\t\tlastClickedIndex = $options.index( $lastClicked );\n\t\tnowClickedIndex = $options.index( $nowClicked );\n\t\t// If it's the same item, either the user is being silly, or it's a fake event generated\n\t\t// by the browser. In either case we don't need custom handling.\n\t\tif ( nowClickedIndex !== lastClickedIndex ) {\n\t\t\titems = this.items;\n\t\t\twasSelected = items[ nowClickedIndex ].isSelected();\n\t\t\tdirection = nowClickedIndex > lastClickedIndex ? 1 : -1;\n\n\t\t\t// This depends on the DOM order of the items and the order of the .items array being\n\t\t\t// the same.\n\t\t\tfor ( i = lastClickedIndex; i !== nowClickedIndex; i += direction ) {\n\t\t\t\tif ( !items[ i ].isDisabled() ) {\n\t\t\t\t\titems[ i ].setSelected( !wasSelected );\n\t\t\t\t}\n\t\t\t}\n\t\t\t// For the now-clicked element, use immediate timeout to allow the browser to do its own\n\t\t\t// handling first, then set our value. The order in which events happen is different for\n\t\t\t// clicks on the and on the