X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=blobdiff_plain;f=resources%2Flib%2Foojs-ui%2Foojs-ui-widgets.js;h=851ab789248c538a7293b97ed9efe1a9e93e416f;hp=bf282e6eeee0d8ca8afaacafd2b83f557b44c3c1;hb=69fac50dc26f642346ce38c79a7654cc409be7b2;hpb=35b9d17334941d8b77d811a1e5be56684566f273 diff --git a/resources/lib/oojs-ui/oojs-ui-widgets.js b/resources/lib/oojs-ui/oojs-ui-widgets.js index bf282e6eee..851ab78924 100644 --- a/resources/lib/oojs-ui/oojs-ui-widgets.js +++ b/resources/lib/oojs-ui/oojs-ui-widgets.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.25.0 - * https://www.mediawiki.org/wiki/OOjs_UI + * OOUI v0.26.1 + * https://www.mediawiki.org/wiki/OOUI * - * Copyright 2011–2018 OOjs UI Team and other contributors. + * Copyright 2011–2018 OOUI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2018-01-10T00:26:02Z + * Date: 2018-03-23T23:42:32Z */ ( function ( OO ) { @@ -154,7 +154,7 @@ OO.ui.mixin.DraggableElement.prototype.onDragStart = function ( e ) { // We must set up a dataTransfer data property or Firefox seems to // ignore the fact the element is draggable. try { - dataTransfer.setData( 'application-x/OOjs-UI-draggable', this.getIndex() ); + dataTransfer.setData( 'application-x/OOUI-draggable', this.getIndex() ); } catch ( err ) { // The above is only for Firefox. Move on if it fails. } @@ -618,9 +618,9 @@ OO.ui.mixin.RequestManager.prototype.getRequestCacheDataFromResponse = null; * not the desired behavior, disable lookup menus with the #setLookupsDisabled method, then set the value, then * re-enable lookups. * - * See the [OOjs UI demos][1] for an example. + * See the [OOUI demos][1] for an example. * - * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/index.html#widgets-apex-vector-ltr + * [1]: https://doc.wikimedia.org/oojs-ui/master/demos/#LookupElement-try-inputting-an-integer * * @class * @abstract @@ -629,7 +629,7 @@ OO.ui.mixin.RequestManager.prototype.getRequestCacheDataFromResponse = null; * @constructor * @param {Object} [config] Configuration options * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning. - * See . + * See . * @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element. * @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty. * By default, the lookup menu is not generated and displayed until the user begins to type. @@ -858,7 +858,7 @@ OO.ui.mixin.LookupElement.prototype.populateLookupMenu = function () { * @chainable */ OO.ui.mixin.LookupElement.prototype.initializeLookupMenuSelection = function () { - if ( this.lookupHighlightFirstItem && !this.lookupMenu.getSelectedItem() ) { + if ( this.lookupHighlightFirstItem && !this.lookupMenu.findSelectedItem() ) { this.lookupMenu.highlightItem( this.lookupMenu.findFirstSelectableItem() ); } }; @@ -2219,7 +2219,7 @@ OO.ui.BookletLayout.prototype.setPage = function ( name ) { if ( name !== this.currentPageName ) { if ( this.outlined ) { - selectedItem = this.outlineSelectWidget.getSelectedItem(); + selectedItem = this.outlineSelectWidget.findSelectedItem(); if ( selectedItem && selectedItem.getData() !== name ) { this.outlineSelectWidget.selectItemByData( name ); } @@ -2265,7 +2265,7 @@ OO.ui.BookletLayout.prototype.setPage = function ( name ) { * @chainable */ OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () { - if ( !this.outlineSelectWidget.getSelectedItem() ) { + if ( !this.outlineSelectWidget.findSelectedItem() ) { this.outlineSelectWidget.selectItem( this.outlineSelectWidget.findFirstSelectableItem() ); } @@ -2665,7 +2665,7 @@ OO.ui.IndexLayout.prototype.setTabPanel = function ( name ) { previousTabPanel = this.currentTabPanelName && this.tabPanels[ this.currentTabPanelName ]; if ( name !== this.currentTabPanelName ) { - selectedItem = this.tabSelectWidget.getSelectedItem(); + selectedItem = this.tabSelectWidget.findSelectedItem(); if ( selectedItem && selectedItem.getData() !== name ) { this.tabSelectWidget.selectItemByData( name ); } @@ -2710,7 +2710,7 @@ OO.ui.IndexLayout.prototype.setTabPanel = function ( name ) { * @chainable */ OO.ui.IndexLayout.prototype.selectFirstSelectableTabPanel = function () { - if ( !this.tabSelectWidget.getSelectedItem() ) { + if ( !this.tabSelectWidget.findSelectedItem() ) { this.tabSelectWidget.selectItem( this.tabSelectWidget.findFirstSelectableItem() ); } @@ -2794,7 +2794,7 @@ OO.ui.ToggleWidget.prototype.setValue = function ( value ) { * configured with {@link OO.ui.mixin.IconElement icons}, {@link OO.ui.mixin.IndicatorElement indicators}, * {@link OO.ui.mixin.TitledElement titles}, {@link OO.ui.mixin.FlaggedElement styling flags}, * and {@link OO.ui.mixin.LabelElement labels}. Please see - * the [OOjs UI documentation][1] on MediaWiki for more information. + * the [OOUI documentation][1] on MediaWiki for more information. * * @example * // Toggle buttons in the 'off' and 'on' state. @@ -2808,7 +2808,7 @@ OO.ui.ToggleWidget.prototype.setValue = function ( value ) { * // Append the buttons to the DOM. * $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); * - * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#Toggle_buttons + * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Buttons_and_Switches#Toggle_buttons * * @class * @extends OO.ui.ToggleWidget @@ -3144,7 +3144,7 @@ OO.ui.OutlineControlsWidget.prototype.setAbilities = function ( abilities ) { OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () { var i, len, firstMovable, lastMovable, items = this.outline.getItems(), - selectedItem = this.outline.getSelectedItem(), + selectedItem = this.outline.findSelectedItem(), movable = this.abilities.move && selectedItem && selectedItem.isMovable(), removable = this.abilities.remove && selectedItem && selectedItem.isRemovable(); @@ -3272,11 +3272,6 @@ OO.ui.OutlineOptionWidget.prototype.getLevel = function () { */ OO.ui.OutlineOptionWidget.prototype.setPressed = function ( state ) { OO.ui.OutlineOptionWidget.parent.prototype.setPressed.call( this, state ); - if ( this.pressed ) { - this.setFlags( { progressive: true } ); - } else if ( !this.selected ) { - this.setFlags( { progressive: false } ); - } return this; }; @@ -3313,11 +3308,6 @@ OO.ui.OutlineOptionWidget.prototype.setRemovable = function ( removable ) { */ OO.ui.OutlineOptionWidget.prototype.setSelected = function ( state ) { OO.ui.OutlineOptionWidget.parent.prototype.setSelected.call( this, state ); - if ( this.selected ) { - this.setFlags( { progressive: true } ); - } else { - this.setFlags( { progressive: false } ); - } return this; }; @@ -3384,9 +3374,9 @@ OO.mixinClass( OO.ui.OutlineSelectWidget, OO.ui.mixin.TabIndexedElement ); * ButtonOptionWidget is a special type of {@link OO.ui.mixin.ButtonElement button element} that * can be selected and configured with data. The class is * used with OO.ui.ButtonSelectWidget to create a selection of button options. Please see the - * [OOjs UI documentation on MediaWiki] [1] for more information. + * [OOUI documentation on MediaWiki] [1] for more information. * - * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Button_selects_and_options + * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Button_selects_and_options * * @class * @extends OO.ui.OptionWidget @@ -3461,7 +3451,7 @@ OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) { * button options and is used together with * OO.ui.ButtonOptionWidget. The ButtonSelectWidget provides an interface for * highlighting, choosing, and selecting mutually exclusive options. Please see - * the [OOjs UI documentation on MediaWiki] [1] for more information. + * the [OOUI documentation on MediaWiki] [1] for more information. * * @example * // Example: A ButtonSelectWidget that contains three ButtonOptionWidgets @@ -3488,7 +3478,7 @@ OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) { * } ); * $( 'body' ).append( buttonSelect.$element ); * - * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options + * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options * * @class * @extends OO.ui.SelectWidget @@ -3697,7 +3687,7 @@ OO.ui.CapsuleItemWidget.prototype.onKeyDown = function ( e ) { * CapsuleMultiselectWidgets are something like a {@link OO.ui.ComboBoxInputWidget combo box widget} * that allows for selecting multiple values. * - * For more information about menus and options, please see the [OOjs UI documentation on MediaWiki][1]. + * For more information about menus and options, please see the [OOUI documentation on MediaWiki][1]. * * @example * // Example: A CapsuleMultiselectWidget. @@ -3731,7 +3721,7 @@ OO.ui.CapsuleItemWidget.prototype.onKeyDown = function ( e ) { * } ); * $( 'body' ).append( capsule.$element ); * - * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options + * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Selects_and_Options#Menu_selects_and_options * * @class * @extends OO.ui.Widget @@ -3759,7 +3749,7 @@ OO.ui.CapsuleItemWidget.prototype.onKeyDown = function ( e ) { * its containing `
`. The specified overlay layer is usually on top of * the containing `
` and has a larger area. By default, the menu uses * relative positioning. - * See . + * See . */ OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) { var $tabFocus; @@ -4606,10 +4596,18 @@ OO.mixinClass( OO.ui.TagItemWidget, OO.ui.mixin.DraggableElement ); * Item validity has changed */ +/** + * @event disabled + * @param {boolean} isDisabled Item is disabled + * + * Item disabled state has changed + */ + /* Methods */ /** * @inheritdoc + * @fires disabled */ OO.ui.TagItemWidget.prototype.setDisabled = function ( state ) { // Parent method @@ -4618,6 +4616,8 @@ OO.ui.TagItemWidget.prototype.setDisabled = function ( state ) { if ( this.closeButton ) { this.closeButton.setDisabled( state ); } + + this.emit( 'disabled', this.isDisabled() ); return this; }; @@ -4648,7 +4648,7 @@ OO.ui.TagItemWidget.prototype.remove = function () { OO.ui.TagItemWidget.prototype.onKeyDown = function ( e ) { var movement; - if ( e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) { + if ( !this.isDisabled() && e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) { this.remove(); return false; } else if ( e.keyCode === OO.ui.Keys.ENTER ) { @@ -4823,11 +4823,13 @@ OO.ui.TagMultiselectWidget = function OoUiTagMultiselectWidget( config ) { this.aggregate( { remove: 'itemRemove', navigate: 'itemNavigate', - select: 'itemSelect' + select: 'itemSelect', + disabled: 'itemDisabled' } ); this.connect( this, { itemRemove: 'onTagRemove', itemSelect: 'onTagSelect', + itemDisabled: 'onTagDisabled', itemNavigate: 'onTagNavigate', change: 'onChangeTags' } ); @@ -4938,7 +4940,11 @@ OO.ui.TagMultiselectWidget.static.allowedInputPositions = [ 'inline', 'outline', * @return {boolean} False to prevent defaults */ OO.ui.TagMultiselectWidget.prototype.onMouseDown = function ( e ) { - if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) { + if ( + !this.isDisabled() && + ( !this.hasInput || e.target !== this.input.$input[ 0 ] ) && + e.which === OO.ui.MouseButtons.LEFT + ) { this.focus(); return false; } @@ -5052,11 +5058,14 @@ OO.ui.TagMultiselectWidget.prototype.doInputBackspace = function ( e, withMetaKe // Delete the last item items = this.getItems(); item = items[ items.length - 1 ]; - 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() ); + + if ( !item.isDisabled() ) { + 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; @@ -5116,6 +5125,18 @@ OO.ui.TagMultiselectWidget.prototype.onTagSelect = function ( item ) { } }; +/** + * Respond to item disabled state change + * + * @param {OO.ui.TagItemWidget} item Selected item + * @param {boolean} isDisabled Item is disabled + */ +OO.ui.TagMultiselectWidget.prototype.onTagDisabled = function ( item, isDisabled ) { + if ( isDisabled ) { + // Move item to start if it is disabled + this.addItems( item, 0 ); + } +}; /** * Respond to change event, where items were added, removed, or cleared. */ @@ -5551,7 +5572,7 @@ OO.ui.TagMultiselectWidget.prototype.isValid = function () { * * @param {Object} config Configuration object * @cfg {jQuery} [$overlay] An overlay for the popup. - * See . + * See . * @cfg {Object} [popup] Configuration options for the popup * @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 @@ -5704,9 +5725,10 @@ OO.ui.PopupTagMultiselectWidget.prototype.addTagByPopupValue = function ( data, * * @constructor * @param {Object} [config] Configuration object + * @cfg {boolean} [clearInputOnChoose=true] Clear the text input value when a menu option is chosen * @cfg {Object} [menu] Configuration object for the menu widget * @cfg {jQuery} [$overlay] An overlay for the menu. - * See . + * See . * @cfg {Object[]} [options=[]] Array of menu options in the format `{ data: …, label: … }` */ OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) { @@ -5716,7 +5738,7 @@ OO.ui.MenuTagMultiselectWidget = function OoUiMenuTagMultiselectWidget( config ) OO.ui.MenuTagMultiselectWidget.parent.call( this, config ); this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay() : config.$overlay ) || this.$element; - + this.clearInputOnChoose = config.clearInputOnChoose === undefined || !!config.clearInputOnChoose; this.menu = this.createMenuWidget( $.extend( { widget: this, input: this.hasInput ? this.input : null, @@ -5782,6 +5804,7 @@ OO.ui.MenuTagMultiselectWidget.prototype.onInputFocus = function () { */ OO.ui.MenuTagMultiselectWidget.prototype.onInputChange = function () { this.menu.toggle( true ); + this.initializeMenuSelection(); }; /** @@ -5792,6 +5815,9 @@ OO.ui.MenuTagMultiselectWidget.prototype.onInputChange = function () { OO.ui.MenuTagMultiselectWidget.prototype.onMenuChoose = function ( menuItem ) { // Add tag this.addTag( menuItem.getData(), menuItem.getLabel() ); + if ( this.hasInput && this.clearInputOnChoose ) { + this.input.setValue( '' ); + } }; /** @@ -5803,6 +5829,8 @@ OO.ui.MenuTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) { if ( !isVisible ) { this.menu.selectItem( null ); this.menu.highlightItem( null ); + } else { + this.initializeMenuSelection(); } }; @@ -5827,6 +5855,18 @@ OO.ui.MenuTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) { this.focus(); }; +/** + * Highlight the first selectable item in the menu, if configured. + * + * @private + * @chainable + */ +OO.ui.MenuTagMultiselectWidget.prototype.initializeMenuSelection = function () { + if ( !this.menu.findSelectedItem() ) { + this.menu.highlightItem( this.menu.findFirstSelectableItem() ); + } +}; + /** * @inheritdoc */ @@ -5836,6 +5876,10 @@ OO.ui.MenuTagMultiselectWidget.prototype.addTagFromInput = function () { highlightedItem = this.menu.findHighlightedItem(), item = this.menu.findItemFromData( inputValue ); + if ( !inputValue ) { + return; + } + // Override the parent method so we add from the menu // rather than directly from the input @@ -5938,14 +5982,14 @@ OO.ui.MenuTagMultiselectWidget.prototype.getAllowedValues = function () { * 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}. - * Please see the [OOjs UI documentation on MediaWiki] [1] for more information and examples. + * Please see the [OOUI documentation on MediaWiki] [1] for more information and examples. * * @example * // Example of a file select widget * var selectFile = new OO.ui.SelectFileWidget(); * $( 'body' ).append( selectFile.$element ); * - * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets + * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets * * @class * @extends OO.ui.Widget @@ -6465,9 +6509,9 @@ OO.ui.SelectFileWidget.prototype.setDisabled = function ( disabled ) { * In general, search widgets are used inside a separate {@link OO.ui.Dialog dialog} window. * * Each time the query is changed, the search result menu is cleared and repopulated. Please see - * the [OOjs UI demos][1] for an example. + * the [OOUI demos][1] for an example. * - * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/#dialogs-mediawiki-vector-ltr + * [1]: https://doc.wikimedia.org/oojs-ui/master/demos/#SearchInputWidget-type-search * * @class * @extends OO.ui.Widget @@ -6532,7 +6576,7 @@ OO.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) { if ( dir ) { highlightedItem = this.results.findHighlightedItem(); if ( !highlightedItem ) { - highlightedItem = this.results.getSelectedItem(); + highlightedItem = this.results.findSelectedItem(); } nextItem = this.results.findRelativeSelectableItem( highlightedItem, dir ); this.results.highlightItem( nextItem );