/*!
- * OOUI v0.29.5
+ * OOUI v0.30.2
* https://www.mediawiki.org/wiki/OOUI
*
- * Copyright 2011–2018 OOUI Team and other contributors.
+ * Copyright 2011–2019 OOUI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2018-11-08T22:38:07Z
+ * Date: 2019-01-23T01:14:20Z
*/
( function ( OO ) {
* ],
* continuous: true
* } );
- * $( 'body' ).append( myStack.$element );
+ * $( document.body ).append( myStack.$element );
*
* @class
* @extends OO.ui.PanelLayout
*/
OO.ui.StackLayout = function OoUiStackLayout( config ) {
// Configuration initialization
- config = $.extend( { scrollable: true }, config );
+ // Make the layout scrollable in continuous mode, otherwise each
+ // panel is responsible for its own scrolling.
+ config = $.extend( { scrollable: !!( config && config.continuous ) }, config );
// Parent constructor
OO.ui.StackLayout.parent.call( this, config );
* menuLayout.$content.append(
* contentPanel.$element.append( '<b>Content panel</b>', '<p>Note that the menu is positioned relative to the content panel: top, bottom, after, before.</p>')
* );
- * $( 'body' ).append( menuLayout.$element );
+ * $( document.body ).append( menuLayout.$element );
*
* If menu size needs to be overridden, it can be accomplished using CSS similar to the snippet
* below. MenuLayout's CSS will override the appropriate values with 'auto' or '0' to display the
* } );
*
* booklet.addPages( [ page1, page2 ] );
- * $( 'body' ).append( booklet.$element );
+ * $( document.body ).append( booklet.$element );
*
* @class
* @extends OO.ui.MenuLayout
// outline controls are present, delay matches transition on `.oo-ui-menuLayout-menu`.
setTimeout( function () {
OO.ui.Element.static.reconsiderScrollbars( booklet.outlinePanel.$element[ 0 ] );
- }, 200 );
+ }, OO.ui.theme.getDialogTransitionDuration() );
}
}
) {
$focused = previousPage.$element.find( ':focus' );
if ( $focused.length ) {
+ // eslint-disable-next-line jquery/no-event-shorthand
$focused[ 0 ].blur();
}
}
// blurred when it was hidden, but browsers are not very consistent about this.
$focused = previousPage.$element.find( ':focus' );
if ( $focused.length ) {
+ // eslint-disable-next-line jquery/no-event-shorthand
$focused[ 0 ].blur();
}
}
* var index = new OO.ui.IndexLayout();
*
* index.addTabPanels( [ tabPanel1, tabPanel2 ] );
- * $( 'body' ).append( index.$element );
+ * $( document.body ).append( index.$element );
*
* @class
* @extends OO.ui.MenuLayout
) {
$focused = previousTabPanel.$element.find( ':focus' );
if ( $focused.length ) {
+ // eslint-disable-next-line jquery/no-event-shorthand
$focused[ 0 ].blur();
}
}
// blurred when it was hidden, but browsers are not very consistent about this.
$focused = previousTabPanel.$element.find( ':focus' );
if ( $focused.length ) {
+ // eslint-disable-next-line jquery/no-event-shorthand
$focused[ 0 ].blur();
}
}
* @abstract
* @class
* @extends OO.ui.Widget
+ * @mixins OO.ui.mixin.TitledElement
*
* @constructor
* @param {Object} [config] Configuration options
// Parent constructor
OO.ui.ToggleWidget.parent.call( this, config );
+ // Mixin constructor
+ OO.ui.mixin.TitledElement.call( this, config );
+
// Properties
this.value = null;
/* Setup */
OO.inheritClass( OO.ui.ToggleWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.ToggleWidget, OO.ui.mixin.TitledElement );
/* Events */
* @example
* // Toggle buttons in the 'off' and 'on' state.
* var toggleButton1 = new OO.ui.ToggleButtonWidget( {
- * label: 'Toggle Button off'
- * } );
- * var toggleButton2 = new OO.ui.ToggleButtonWidget( {
- * label: 'Toggle Button on',
- * value: true
- * } );
+ * label: 'Toggle Button off'
+ * } ),
+ * toggleButton2 = new OO.ui.ToggleButtonWidget( {
+ * label: 'Toggle Button on',
+ * value: true
+ * } );
* // Append the buttons to the DOM.
- * $( 'body' ).append( toggleButton1.$element, toggleButton2.$element );
+ * $( document.body ).append( toggleButton1.$element, toggleButton2.$element );
*
* [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Buttons_and_Switches#Toggle_buttons
*
* @mixins OO.ui.mixin.IconElement
* @mixins OO.ui.mixin.IndicatorElement
* @mixins OO.ui.mixin.LabelElement
- * @mixins OO.ui.mixin.TitledElement
* @mixins OO.ui.mixin.FlaggedElement
* @mixins OO.ui.mixin.TabIndexedElement
*
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.LabelElement.call( this, config );
- OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled: this.$button } ) );
OO.ui.mixin.FlaggedElement.call( this, config );
OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, { $tabIndexed: this.$button } ) );
this.$element
.addClass( 'oo-ui-toggleButtonWidget' )
.append( this.$button );
+ this.setTitledElement( this.$button );
};
/* Setup */
OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.IconElement );
OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.LabelElement );
-OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.TitledElement );
OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.FlaggedElement );
OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.TabIndexedElement );
*
* @example
* // Toggle switches in the 'off' and 'on' position.
- * var toggleSwitch1 = new OO.ui.ToggleSwitchWidget();
- * var toggleSwitch2 = new OO.ui.ToggleSwitchWidget( {
- * value: true
- * } );
- *
- * // Create a FieldsetLayout to layout and label switches
- * var fieldset = new OO.ui.FieldsetLayout( {
- * label: 'Toggle switches'
- * } );
+ * var toggleSwitch1 = new OO.ui.ToggleSwitchWidget(),
+ * toggleSwitch2 = new OO.ui.ToggleSwitchWidget( {
+ * value: true
+ * } );
+ * // Create a FieldsetLayout to layout and label switches.
+ * fieldset = new OO.ui.FieldsetLayout( {
+ * label: 'Toggle switches'
+ * } );
* fieldset.addItems( [
- * new OO.ui.FieldLayout( toggleSwitch1, { label: 'Off', align: 'top' } ),
- * new OO.ui.FieldLayout( toggleSwitch2, { label: 'On', align: 'top' } )
+ * new OO.ui.FieldLayout( toggleSwitch1, {
+ * label: 'Off',
+ * align: 'top'
+ * } ),
+ * new OO.ui.FieldLayout( toggleSwitch2, {
+ * label: 'On',
+ * align: 'top'
+ * } )
* ] );
- * $( 'body' ).append( fieldset.$element );
+ * $( document.body ).append( fieldset.$element );
*
* @class
* @extends OO.ui.ToggleWidget
* @mixins OO.ui.mixin.ButtonElement
* @mixins OO.ui.mixin.IconElement
* @mixins OO.ui.mixin.IndicatorElement
- * @mixins OO.ui.mixin.TitledElement
*
* @constructor
* @param {Object} [config] Configuration options
OO.ui.mixin.ButtonElement.call( this, config );
OO.ui.mixin.IconElement.call( this, config );
OO.ui.mixin.IndicatorElement.call( this, config );
- OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled: this.$button } ) );
// Initialization
this.$element.addClass( 'oo-ui-buttonOptionWidget' );
this.$button.append( this.$icon, this.$label, this.$indicator );
this.$element.append( this.$button );
+ this.setTitledElement( this.$button );
};
/* Setup */
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.ButtonElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IconElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IndicatorElement );
-OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TitledElement );
/* Static Properties */
* the [OOUI documentation on MediaWiki] [1] for more information.
*
* @example
- * // Example: A ButtonSelectWidget that contains three ButtonOptionWidgets
+ * // A ButtonSelectWidget that contains three ButtonOptionWidgets.
* var option1 = new OO.ui.ButtonOptionWidget( {
- * data: 1,
- * label: 'Option 1',
- * title: 'Button option 1'
- * } );
- *
- * var option2 = new OO.ui.ButtonOptionWidget( {
- * data: 2,
- * label: 'Option 2',
- * title: 'Button option 2'
- * } );
- *
- * var option3 = new OO.ui.ButtonOptionWidget( {
- * data: 3,
- * label: 'Option 3',
- * title: 'Button option 3'
- * } );
- *
- * var buttonSelect=new OO.ui.ButtonSelectWidget( {
- * items: [ option1, option2, option3 ]
- * } );
- * $( 'body' ).append( buttonSelect.$element );
+ * data: 1,
+ * label: 'Option 1',
+ * title: 'Button option 1'
+ * } ),
+ * option2 = new OO.ui.ButtonOptionWidget( {
+ * data: 2,
+ * label: 'Option 2',
+ * title: 'Button option 2'
+ * } ),
+ * option3 = new OO.ui.ButtonOptionWidget( {
+ * data: 3,
+ * label: 'Option 3',
+ * title: 'Button option 3'
+ * } ),
+ * buttonSelect = new OO.ui.ButtonSelectWidget( {
+ * items: [ option1, option2, option3 ]
+ * } );
+ * $( document.body ).append( buttonSelect.$element );
*
* [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options
*
OO.ui.TagItemWidget.prototype.onKeyDown = function ( e ) {
var movement;
- if ( !this.isDisabled() && !this.isFixed() && e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) {
+ if ( !this.isDisabled() && !this.isFixed() && ( e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) ) {
this.remove();
return false;
} else if ( e.keyCode === OO.ui.Keys.ENTER ) {
* a menu and a popup respectively.
*
* @example
- * // Example: A basic TagMultiselectWidget.
+ * // A TagMultiselectWidget.
* var widget = new OO.ui.TagMultiselectWidget( {
* inputPosition: 'outline',
* allowedValues: [ 'Option 1', 'Option 2', 'Option 3' ],
* selected: [ 'Option 1' ]
* } );
- * $( 'body' ).append( widget.$element );
+ * $( document.body ).append( widget.$element );
*
* @class
* @extends OO.ui.Widget
* @mixins OO.ui.mixin.IconElement
* @mixins OO.ui.mixin.TabIndexedElement
* @mixins OO.ui.mixin.FlaggedElement
+ * @mixins OO.ui.mixin.TitledElement
*
* @constructor
* @param {Object} config Configuration object
* replace the input widget used in the TagMultiselectWidget. If not given,
* TagMultiselectWidget creates its own.
* @cfg {boolean} [inputPosition='inline'] Position of the input. Options are:
- * - inline: The input is invisible, but exists inside the tag list, so
- * the user types into the tag groups to add tags.
- * - outline: The input is underneath the tag area.
- * - none: No input supplied
+ * - inline: The input is invisible, but exists inside the tag list, so
+ * the user types into the tag groups to add tags.
+ * - outline: The input is underneath the tag area.
+ * - none: No input supplied
* @cfg {boolean} [allowEditTags=true] Allow editing of the tags by clicking them
* @cfg {boolean} [allowArbitrary=false] Allow data items to be added even if
* not present in the menu.
OO.ui.mixin.TabIndexedElement.call( this, config );
OO.ui.mixin.FlaggedElement.call( this, config );
OO.ui.mixin.DraggableGroupElement.call( this, config );
+ OO.ui.mixin.TitledElement.call( this, config );
this.toggleDraggable(
config.allowReordering === undefined ?
OO.mixinClass( OO.ui.TagMultiselectWidget, OO.ui.mixin.IconElement );
OO.mixinClass( OO.ui.TagMultiselectWidget, OO.ui.mixin.TabIndexedElement );
OO.mixinClass( OO.ui.TagMultiselectWidget, OO.ui.mixin.FlaggedElement );
+OO.mixinClass( OO.ui.TagMultiselectWidget, OO.ui.mixin.TitledElement );
/* Static properties */
OO.ui.TagMultiselectWidget.parent.prototype.setDisabled.call( this, isDisabled );
if ( this.hasInput && this.input ) {
+ if ( !isDisabled ) {
+ this.updateInputSize();
+ }
this.input.setDisabled( !!isDisabled && !this.isUnderLimit() );
}
* This object must contain at least a data key. Example:
* { data: 'foo', label: 'Foo item' }
* For multiple items, use an array of objects. For example:
- * [
- * { data: 'foo', label: 'Foo item' },
- * { data: 'bar', label: 'Bar item' }
- * ]
+ * [
+ * { data: 'foo', label: 'Foo item' },
+ * { data: 'bar', label: 'Bar item' }
+ * ]
* Value can also be added with plaintext array, for example:
* [ 'foo', 'bar', 'bla' ] or a single string, like 'foo'
*/
* to use a popup. The popup can be configured to have a default input to insert values into the widget.
*
* @example
- * // Example: A basic PopupTagMultiselectWidget.
+ * // A PopupTagMultiselectWidget.
* var widget = new OO.ui.PopupTagMultiselectWidget();
- * $( 'body' ).append( widget.$element );
+ * $( document.body ).append( widget.$element );
*
* // Example: A PopupTagMultiselectWidget with an external popup.
* var popupInput = new OO.ui.TextInputWidget(),
* $content: popupInput.$element
* }
* } );
- * $( 'body' ).append( widget.$element );
+ * $( document.body ).append( widget.$element );
*
* @class
* @extends OO.ui.TagMultiselectWidget
* @cfg {OO.ui.InputWidget} [popupInput] An input widget inside the popup that will be
* focused when the popup is opened and will be used as replacement for the
* general input in the widget.
+ * @deprecated
*/
OO.ui.PopupTagMultiselectWidget = function OoUiPopupTagMultiselectWidget( config ) {
var defaultInput,
this.$element
.append( this.popup.$element )
.addClass( 'oo-ui-popupTagMultiselectWidget' );
+
+ // Deprecation warning
+ OO.ui.warnDeprecation( 'PopupTagMultiselectWidget: Deprecated widget. Use MenuTagMultiselectWidget instead. See T208821.' );
};
/* Initialization */
* to use a menu of selectable options.
*
* @example
- * // Example: A basic MenuTagMultiselectWidget.
+ * // A basic MenuTagMultiselectWidget.
* var widget = new OO.ui.MenuTagMultiselectWidget( {
* inputPosition: 'outline',
* options: [
* ],
* selected: [ 'option1', 'option2' ]
* } );
- * $( 'body' ).append( widget.$element );
+ * $( document.body ).append( widget.$element );
*
* @class
* @extends OO.ui.TagMultiselectWidget
.append( this.menu.$element );
this.$element
.addClass( 'oo-ui-menuTagMultiselectWidget' );
+ // Remove MenuSelectWidget's generic focus owner ARIA attribute
+ // TODO: Should this widget have a `role` that is compatible with this attribute?
+ this.menu.$focusOwner.removeAttr( 'aria-expanded' );
// 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 ) {
* @param {OO.ui.OptionWidget} menuItem Chosen menu item
*/
OO.ui.MenuTagMultiselectWidget.prototype.onMenuChoose = function ( menuItem ) {
- // Add tag
- this.addTag( menuItem.getData(), menuItem.getLabel() );
if ( this.hasInput && this.clearInputOnChoose ) {
this.input.setValue( '' );
}
+ // Add tag
+ this.addTag( menuItem.getData(), menuItem.getLabel() );
};
/**
} else {
this.initializeMenuSelection();
}
+ setTimeout( function () {
+ // Remove MenuSelectWidget's generic focus owner ARIA attribute
+ // TODO: Should this widget have a `role` that is compatible with this attribute?
+ this.menu.$focusOwner.removeAttr( 'aria-expanded' );
+ }.bind( this ) );
};
/**
*/
OO.ui.MenuTagMultiselectWidget.prototype.initializeMenuSelection = function () {
if ( !this.menu.findSelectedItem() ) {
- this.menu.highlightItem( this.menu.findFirstSelectableItem() );
+ this.menu.highlightItem(
+ this.allowArbitrary ?
+ null :
+ this.menu.findFirstSelectableItem()
+ );
}
};
/**
* SelectFileWidgets allow for selecting files, using the HTML5 File API. These
- * widgets can be configured with {@link OO.ui.mixin.IconElement icons} and {@link
- * OO.ui.mixin.IndicatorElement indicators}.
+ * widgets can be configured with {@link OO.ui.mixin.IconElement icons}, {@link
+ * OO.ui.mixin.IndicatorElement indicators} and {@link OO.ui.mixin.TitledElement titles}.
* Please see the [OOUI documentation on MediaWiki] [1] for more information and examples.
*
* @example
- * // Example of a file select widget
+ * // A file select widget.
* var selectFile = new OO.ui.SelectFileWidget();
- * $( 'body' ).append( selectFile.$element );
+ * $( document.body ).append( selectFile.$element );
*
* [1]: https://www.mediawiki.org/wiki/OOUI/Widgets
*
* @mixins OO.ui.mixin.IndicatorElement
* @mixins OO.ui.mixin.PendingElement
* @mixins OO.ui.mixin.LabelElement
+ * @mixins OO.ui.mixin.TitledElement
*
* @constructor
* @param {Object} [config] Configuration options
OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.PendingElement.call( this, $.extend( {}, config, { $pending: this.$info } ) );
OO.ui.mixin.LabelElement.call( this, config );
+ OO.ui.mixin.TitledElement.call( this, config );
// Properties
this.$info = $( '<span>' );
this.clearButton = new OO.ui.ButtonWidget( {
classes: [ 'oo-ui-selectFileWidget-clearButton' ],
framed: false,
- icon: 'close',
+ icon: 'clear',
disabled: this.disabled
} );
OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.PendingElement );
OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.LabelElement );
+OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.TitledElement );
/* Static Properties */
dépôts / lhc / web / wiklou.git / blobdiff