Update OOjs UI to v0.22.3
[lhc/web/wiklou.git] / resources / lib / oojs-ui / oojs-ui-widgets.js
index bc17047..e69cae2 100644 (file)
@@ -1,12 +1,12 @@
 /*!
- * OOjs UI v0.21.3
+ * OOjs UI v0.22.3
  * https://www.mediawiki.org/wiki/OOjs_UI
  *
  * Copyright 2011–2017 OOjs UI Team and other contributors.
  * Released under the MIT license
  * http://oojs.mit-license.org
  *
- * Date: 2017-05-10T00:55:40Z
+ * Date: 2017-07-11T22:12:33Z
  */
 ( function ( OO ) {
 
@@ -1117,7 +1117,7 @@ OO.ui.TabPanelLayout.prototype.setActive = function ( active ) {
  * @extends OO.ui.TabPanelLayout
  *
  * @constructor
- * @deprecated since v0.22.0
+ * @deprecated since v0.21.3
  */
 OO.ui.CardLayout = function OoUiCardLayout() {
        OO.ui.warnDeprecation( 'CardLayout has been renamed to TabPanel layout. Use that instead. See T155152' );
@@ -1976,10 +1976,19 @@ OO.ui.BookletLayout.prototype.isOutlineVisible = function () {
  * @chainable
  */
 OO.ui.BookletLayout.prototype.toggleOutline = function ( show ) {
+       var booklet = this;
+
        if ( this.outlined ) {
                show = show === undefined ? !this.outlineVisible : !!show;
                this.outlineVisible = show;
                this.toggleMenu( show );
+               if ( show && this.editable ) {
+                       // HACK: When the sidebar stops animating, kill dumb scrollbars (T161798). Only necessary when
+                       // outline controls are present, The delay matches transition on `.oo-ui-menuLayout-menu`.
+                       setTimeout( function () {
+                               OO.ui.Element.static.reconsiderScrollbars( booklet.outlinePanel.$element[ 0 ] );
+                       }, 200 );
+               }
        }
 
        return this;
@@ -2281,7 +2290,7 @@ OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
  *
  *     var index = new OO.ui.IndexLayout();
  *
- *     index.addTabPanelss ( [ tabPanel1, tabPanel2 ] );
+ *     index.addTabPanels ( [ tabPanel1, tabPanel2 ] );
  *     $( 'body' ).append( index.$element );
  *
  * @class
@@ -2517,7 +2526,7 @@ OO.ui.IndexLayout.prototype.getClosestTabPanel = function ( tabPanel ) {
  *
  * @param {OO.ui.TabPanelLayout} tabPanel Tab panel to use as a reference point
  * @return {OO.ui.TabPanelLayout|null} Tab panel closest to the specified
- * @deprecated since v0.22.0, use `getClosestTabPanel` instead
+ * @deprecated since v0.21.3, use `getClosestTabPanel` instead
  */
 OO.ui.IndexLayout.prototype.getClosestCard = function ( tabPanel ) {
        OO.ui.warnDeprecation( 'IndexLayout\'s getClosestCard method is deprecated. Use getClosestTabPanel instead. See T155152' );
@@ -2548,7 +2557,7 @@ OO.ui.IndexLayout.prototype.getTabPanel = function ( name ) {
  *
  * @param {string} name Symbolic name of tab panel
  * @return {OO.ui.TabPanelLayout|undefined} Tab panel, if found
- * @deprecated since v0.22.0, use `getTabPanel` instead
+ * @deprecated since v0.21.3, use `getTabPanel` instead
  */
 OO.ui.IndexLayout.prototype.getCard = function ( name ) {
        OO.ui.warnDeprecation( 'IndexLayout\'s getCard method is deprecated. Use getTabPanel instead. See T155152' );
@@ -2569,7 +2578,7 @@ OO.ui.IndexLayout.prototype.getCurrentTabPanel = function () {
  * Get the current tab panel.
  *
  * @return {OO.ui.TabPanelLayout|undefined} Current tab panel, if found
- * @deprecated since v0.22.0, use `getCurrentTabPanel` instead
+ * @deprecated since v0.21.3, use `getCurrentTabPanel` instead
  */
 OO.ui.IndexLayout.prototype.getCurrentCard = function () {
        OO.ui.warnDeprecation( 'IndexLayout\'s getCurrentCard method is deprecated. Use getCurrentTabPanel instead. See T155152' );
@@ -2589,7 +2598,7 @@ OO.ui.IndexLayout.prototype.getCurrentTabPanelName = function () {
  * Get the symbolic name of the current tab panel.
  *
  * @return {string|null} Symbolic name of the current tab panel
- * @deprecated since v0.22.0, use `getCurrentTabPanelName` instead
+ * @deprecated since v0.21.3, use `getCurrentTabPanelName` instead
  */
 OO.ui.IndexLayout.prototype.getCurrentCardName = function () {
        OO.ui.warnDeprecation( 'IndexLayout\'s getCurrentCardName method is deprecated. Use getCurrentTabPanelName instead. See T155152' );
@@ -2661,7 +2670,7 @@ OO.ui.IndexLayout.prototype.addTabPanels = function ( tabPanels, index ) {
  * @param {number} index Index of the insertion point
  * @fires add
  * @chainable
- * @deprecated since v0.22.0, use `addTabPanels` instead
+ * @deprecated since v0.21.3, use `addTabPanels` instead
  */
 OO.ui.IndexLayout.prototype.addCards = function ( tabPanels, index ) {
        OO.ui.warnDeprecation( 'IndexLayout\'s addCards method is deprecated. Use addTabPanels instead. See T155152' );
@@ -2706,7 +2715,7 @@ OO.ui.IndexLayout.prototype.removeTabPanels = function ( tabPanels ) {
  * @param {OO.ui.TabPanelLayout[]} tabPanels An array of tab panels to remove
  * @fires remove
  * @chainable
- * @deprecated since v0.22.0, use `removeTabPanels` instead
+ * @deprecated since v0.21.3, use `removeTabPanels` instead
  */
 OO.ui.IndexLayout.prototype.removeCards = function ( tabPanels ) {
        OO.ui.warnDeprecation( 'IndexLayout\'s removeCards method is deprecated. Use removeTabPanels instead. See T155152.' );
@@ -2745,7 +2754,7 @@ OO.ui.IndexLayout.prototype.clearTabPanels = function () {
  *
  * @fires remove
  * @chainable
- * @deprecated since v0.22.0, use `clearTabPanels` instead
+ * @deprecated since v0.21.3, use `clearTabPanels` instead
  */
 OO.ui.IndexLayout.prototype.clearCards = function () {
        OO.ui.warnDeprecation( 'IndexLayout\'s clearCards method is deprecated. Use clearTabPanels instead. See T155152.' );
@@ -2809,7 +2818,7 @@ OO.ui.IndexLayout.prototype.setTabPanel = function ( name ) {
  *
  * @fires set
  * @param {string} name Symbolic name of tab panel
- * @deprecated since v0.22.0, use `setTabPanel` instead
+ * @deprecated since v0.21.3, use `setTabPanel` instead
  */
 OO.ui.IndexLayout.prototype.setCard = function ( name ) {
        OO.ui.warnDeprecation( 'IndexLayout\'s setCard method is deprecated. Use setTabPanel instead. See T155152.' );
@@ -2833,7 +2842,7 @@ OO.ui.IndexLayout.prototype.selectFirstSelectableTabPanel = function () {
  * Select the first selectable tab panel.
  *
  * @chainable
- * @deprecated since v0.22.0, use `selectFirstSelectableTabPanel` instead
+ * @deprecated since v0.21.3, use `selectFirstSelectableTabPanel` instead
  */
 OO.ui.IndexLayout.prototype.selectFirstSelectableCard = function () {
        OO.ui.warnDeprecation( 'IndexLayout\'s selectFirstSelectableCard method is deprecated. Use selectFirestSelectableTabPanel instead. See T155152.' );
@@ -3136,6 +3145,16 @@ OO.ui.ToggleSwitchWidget.prototype.setValue = function ( value ) {
        return this;
 };
 
+/**
+ * @inheritdoc
+ */
+OO.ui.ToggleSwitchWidget.prototype.simulateLabelClick = function () {
+       if ( !this.isDisabled() ) {
+               this.setValue( !this.value );
+       }
+       this.focus();
+};
+
 /**
  * OutlineControlsWidget is a set of controls for an {@link OO.ui.OutlineSelectWidget outline select widget}.
  * Controls include moving items up and down, removing items, and adding different kinds of items.
@@ -3186,7 +3205,7 @@ OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, confi
        } );
        this.removeButton = new OO.ui.ButtonWidget( {
                framed: false,
-               icon: 'remove',
+               icon: 'trash',
                title: OO.ui.msg( 'ooui-outline-control-remove' )
        } );
        this.abilities = { move: true, remove: true };
@@ -3732,7 +3751,7 @@ OO.ui.CapsuleItemWidget = function OoUiCapsuleItemWidget( config ) {
        // Events
        this.closeButton = new OO.ui.ButtonWidget( {
                framed: false,
-               indicator: 'clear',
+               icon: 'close',
                tabIndex: -1
        } ).on( 'click', this.onCloseClick.bind( this ) );
 
@@ -3805,13 +3824,6 @@ OO.ui.CapsuleItemWidget.prototype.onKeyDown = function ( e ) {
        }
 };
 
-/**
- * Focuses the capsule
- */
-OO.ui.CapsuleItemWidget.prototype.focus = function () {
-       this.$element.focus();
-};
-
 /**
  * CapsuleMultiselectWidgets are something like a {@link OO.ui.ComboBoxInputWidget combo box widget}
  * that allows for selecting multiple values.
@@ -4018,10 +4030,6 @@ OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.TabIndexedElement );
 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.IndicatorElement );
 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.IconElement );
 
-/* Static Properties */
-
-OO.ui.CapsuleMultiselectWidget.static.supportsSimpleLabel = true;
-
 /* Events */
 
 /**
@@ -4058,23 +4066,13 @@ OO.ui.CapsuleMultiselectWidget.prototype.createItemWidget = function ( data, lab
 };
 
 /**
- * Get the widget's input's id, or generate one, if it has an input.
- *
- * @return {string}
+ * @inheritdoc
  */
 OO.ui.CapsuleMultiselectWidget.prototype.getInputId = function () {
-       var id;
        if ( !this.$input ) {
-               return false;
-       }
-
-       id = this.$input.attr( 'id' );
-       if ( id === undefined ) {
-               id = OO.ui.generateElementId();
-               this.$input.attr( 'id', id );
+               return null;
        }
-
-       return id;
+       return OO.ui.mixin.TabIndexedElement.prototype.getInputId.call( this );
 };
 
 /**
@@ -4359,6 +4357,7 @@ OO.ui.CapsuleMultiselectWidget.prototype.getMenu = function () {
  */
 OO.ui.CapsuleMultiselectWidget.prototype.onInputFocus = function () {
        if ( !this.isDisabled() ) {
+               this.updateInputSize();
                this.menu.toggle( true );
        }
 };
@@ -4627,7 +4626,6 @@ OO.ui.CapsuleMultiselectWidget.prototype.setDisabled = function ( disabled ) {
  * Focus the widget
  *
  * @chainable
- * @return {OO.ui.CapsuleMultiselectWidget}
  */
 OO.ui.CapsuleMultiselectWidget.prototype.focus = function () {
        if ( !this.isDisabled() ) {
@@ -4636,9 +4634,7 @@ OO.ui.CapsuleMultiselectWidget.prototype.focus = function () {
                        this.popup.toggle( true );
                        OO.ui.findFocusable( this.popup.$element ).focus();
                } else {
-                       this.updateInputSize();
-                       this.menu.toggle( true );
-                       this.$input.focus();
+                       OO.ui.mixin.TabIndexedElement.prototype.focus.call( this );
                }
        }
        return this;
@@ -4677,7 +4673,7 @@ OO.ui.TagItemWidget = function OoUiTagItemWidget( config ) {
 
        this.closeButton = new OO.ui.ButtonWidget( {
                framed: false,
-               indicator: 'clear',
+               icon: 'close',
                tabIndex: -1
        } );
        this.closeButton.setDisabled( this.isDisabled() );
@@ -4813,15 +4809,6 @@ OO.ui.TagItemWidget.prototype.onKeyDown = function ( e ) {
        }
 };
 
-/**
- * Focuses the capsule
- */
-OO.ui.TagItemWidget.prototype.focus = function () {
-       if ( !this.isDisabled() ) {
-               this.$element.focus();
-       }
-};
-
 /**
  * Select this item
  *
@@ -5188,7 +5175,7 @@ OO.ui.TagMultiselectWidget.prototype.doInputEnter = function () {
  * a meta key like 'ctrl'
  * @return {boolean} Whether to prevent defaults
  */
-OO.ui.TagMultiselectWidget.prototype.doInputBackspace = function () {
+OO.ui.TagMultiselectWidget.prototype.doInputBackspace = function ( e, withMetaKey ) {
        var items, item;
 
        if (
@@ -5199,8 +5186,12 @@ OO.ui.TagMultiselectWidget.prototype.doInputBackspace = function () {
                // Delete the last item
                items = this.getItems();
                item = items[ items.length - 1 ];
-               this.input.setValue( item.getData() );
                this.removeItems( [ item ] );
+               // If Ctrl/Cmd was pressed, delete item entirely.
+               // Otherwise put it into the text field for editing.
+               if ( !withMetaKey ) {
+                       this.input.setValue( item.getData() );
+               }
 
                return false;
        }
@@ -5353,10 +5344,6 @@ OO.ui.TagMultiselectWidget.prototype.isDuplicateData = function ( data ) {
  * @return {boolean} Value is allowed
  */
 OO.ui.TagMultiselectWidget.prototype.isAllowedData = function ( data ) {
-       if ( this.allowArbitrary ) {
-               return true;
-       }
-
        if (
                !this.allowDuplicates &&
                this.isDuplicateData( data )
@@ -5364,6 +5351,10 @@ OO.ui.TagMultiselectWidget.prototype.isAllowedData = function ( data ) {
                return false;
        }
 
+       if ( this.allowArbitrary ) {
+               return true;
+       }
+
        // Check with allowed values
        if (
                this.getAllowedValues().some( function ( value ) {
@@ -5396,15 +5387,6 @@ OO.ui.TagMultiselectWidget.prototype.addAllowedValue = function ( value ) {
        }
 };
 
-/**
- * Focus the widget
- */
-OO.ui.TagMultiselectWidget.prototype.focus = function () {
-       if ( this.hasInput ) {
-               this.input.focus();
-       }
-};
-
 /**
  * Get the datas of the currently selected items
  *
@@ -5563,6 +5545,12 @@ OO.ui.TagMultiselectWidget.prototype.getPreviousItem = function ( item ) {
 OO.ui.TagMultiselectWidget.prototype.updateInputSize = function () {
        var $lastItem, direction, contentWidth, currentWidth, bestWidth;
        if ( this.inputPosition === 'inline' && !this.isDisabled() ) {
+               if ( this.input.$input[ 0 ].scrollWidth === 0 ) {
+                       // Input appears to be attached but not visible.
+                       // Don't attempt to adjust its size, because our measurements
+                       // are going to fail anyway.
+                       return;
+               }
                this.input.$input.css( 'width', '1em' );
                $lastItem = this.$group.children().last();
                direction = OO.ui.Element.static.getDir( this.$handle );
@@ -5758,7 +5746,7 @@ OO.ui.PopupTagMultiselectWidget = function OoUiPopupTagMultiselectWidget( config
        this.on( 'resize', this.popup.updateDimensions.bind( this.popup ) );
        this.popup.connect( this, { toggle: 'onPopupToggle' } );
        this.$tabIndexed
-               .on( 'focus', this.focus.bind( this ) );
+               .on( 'focus', this.onFocus.bind( this ) );
 
        // Initialize
        this.$element
@@ -5774,17 +5762,11 @@ OO.mixinClass( OO.ui.PopupTagMultiselectWidget, OO.ui.mixin.PopupElement );
 /* Methods */
 
 /**
- * @inheritdoc
+ * Focus event handler.
+ *
+ * @private
  */
-OO.ui.PopupTagMultiselectWidget.prototype.focus = function () {
-       // Since the parent deals with input focus, only
-       // call the parent method if our input isn't in the
-       // popup
-       if ( !this.popupInput ) {
-               // Parent method
-               OO.ui.PopupTagMultiselectWidget.parent.prototype.focus.call( this );
-       }
-
+OO.ui.PopupTagMultiselectWidget.prototype.onFocus = function () {
        this.popup.toggle( true );
 };
 
@@ -5906,6 +5888,11 @@ OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config )
                .append( this.menu.$element );
        this.$element
                .addClass( 'oo-ui-menuTagMultiselectWidget' );
+       // TagMultiselectWidget already does this, but it doesn't work right because this.menu is not yet
+       // set up while the parent constructor runs, and #getAllowedValues rejects everything.
+       if ( config.selected ) {
+               this.setValue( config.selected );
+       }
 };
 
 /* Initialization */
@@ -5982,6 +5969,7 @@ OO.ui.MenuTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
  */
 OO.ui.MenuTagMultiselectWidget.prototype.addTagFromInput = function () {
        var inputValue = this.input.getValue(),
+               validated = false,
                highlightedItem = this.menu.getHighlightedItem(),
                item = this.menu.getItemFromData( inputValue );
 
@@ -5990,14 +5978,19 @@ OO.ui.MenuTagMultiselectWidget.prototype.addTagFromInput = function () {
 
        // Look for a highlighted item first
        if ( highlightedItem ) {
-               this.addTag( highlightedItem.getData(), highlightedItem.getLabel() );
+               validated = this.addTag( highlightedItem.getData(), highlightedItem.getLabel() );
        } else if ( item ) {
                // Look for the element that fits the data
-               this.addTag( item.getData(), item.getLabel() );
+               validated = this.addTag( item.getData(), item.getLabel() );
        } else {
                // Otherwise, add the tag - the method will only add if the
                // tag is valid or if invalid tags are allowed
-               this.addTag( inputValue );
+               validated = this.addTag( inputValue );
+       }
+
+       if ( validated ) {
+               this.clearInput();
+               this.focus();
        }
 };
 
@@ -6068,22 +6061,14 @@ OO.ui.MenuTagMultiselectWidget.prototype.getMenu = function () {
  * @return {string[]} Allowed data values
  */
 OO.ui.MenuTagMultiselectWidget.prototype.getAllowedValues = function () {
-       var menuDatas = this.menu.getItems().map( function ( menuItem ) {
-               return menuItem.getData();
-       } );
-       return this.allowedValues.concat( menuDatas );
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.MenuTagMultiselectWidget.prototype.focus = function () {
-       // Parent method
-       OO.ui.MenuTagMultiselectWidget.parent.prototype.focus.call( this );
-
-       if ( !this.isDisabled() ) {
-               this.menu.toggle( true );
+       var menuDatas = [];
+       if ( this.menu ) {
+               // If the parent constructor is calling us, we're not ready yet, this.menu is not set up.
+               menuDatas = this.menu.getItems().map( function ( menuItem ) {
+                       return menuItem.getData();
+               } );
        }
+       return this.allowedValues.concat( menuDatas );
 };
 
 /**
@@ -6284,10 +6269,27 @@ OO.ui.SelectFileWidget.prototype.setValue = function ( file ) {
  * @chainable
  */
 OO.ui.SelectFileWidget.prototype.focus = function () {
-       this.selectButton.$button[ 0 ].focus();
+       this.selectButton.focus();
        return this;
 };
 
+/**
+ * Blur the widget.
+ *
+ * @chainable
+ */
+OO.ui.SelectFileWidget.prototype.blur = function () {
+       this.selectButton.blur();
+       return this;
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.SelectFileWidget.prototype.simulateLabelClick = function () {
+       this.focus();
+};
+
 /**
  * Update the user interface when a file is selected or unselected
  *
@@ -6779,7 +6781,7 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
                                disabled: this.isDisabled(),
                                tabIndex: -1,
                                classes: [ 'oo-ui-numberInputWidget-minusButton' ],
-                               label: '−'
+                               icon: 'subtract'
                        },
                        config.minusButton
                ) );
@@ -6788,7 +6790,7 @@ OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
                                disabled: this.isDisabled(),
                                tabIndex: -1,
                                classes: [ 'oo-ui-numberInputWidget-plusButton' ],
-                               label: '+'
+                               icon: 'add'
                        },
                        config.plusButton
                ) );