resources/lib/oojs-ui/oojs-ui-widgets.js

   1 /*!
   2  * OOjs UI v0.18.0
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2016 OOjs UI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2016-11-09T00:52:37Z
  10  */
  11 ( function ( OO ) {
  12
  13 'use strict';
  14
  15 /**
  16  * DraggableElement is a mixin class used to create elements that can be clicked
  17  * and dragged by a mouse to a new position within a group. This class must be used
  18  * in conjunction with OO.ui.mixin.DraggableGroupElement, which provides a container for
  19  * the draggable elements.
  20  *
  21  * @abstract
  22  * @class
  23  *
  24  * @constructor
  25  * @param {Object} [config] Configuration options
  26  * @cfg {jQuery} [$handle] The part of the element which can be used for dragging, defaults to the whole element
  27  */
  28 OO.ui.mixin.DraggableElement = function OoUiMixinDraggableElement( config ) {
  29         config = config || {};
  30
  31         // Properties
  32         this.index = null;
  33         this.$handle = config.$handle || this.$element;
  34         this.wasHandleUsed = null;
  35
  36         // Initialize and events
  37         this.$element.addClass( 'oo-ui-draggableElement' )
  38                 // We make the entire element draggable, not just the handle, so that
  39                 // the whole element appears to move. wasHandleUsed prevents drags from
  40                 // starting outside the handle
  41                 .attr( 'draggable', true )
  42                 .on( {
  43                         mousedown: this.onDragMouseDown.bind( this ),
  44                         dragstart: this.onDragStart.bind( this ),
  45                         dragover: this.onDragOver.bind( this ),
  46                         dragend: this.onDragEnd.bind( this ),
  47                         drop: this.onDrop.bind( this )
  48                 } );
  49         this.$handle.addClass( 'oo-ui-draggableElement-handle' );
  50 };
  51
  52 OO.initClass( OO.ui.mixin.DraggableElement );
  53
  54 /* Events */
  55
  56 /**
  57  * @event dragstart
  58  *
  59  * A dragstart event is emitted when the user clicks and begins dragging an item.
  60  * @param {OO.ui.mixin.DraggableElement} item The item the user has clicked and is dragging with the mouse.
  61  */
  62
  63 /**
  64  * @event dragend
  65  * A dragend event is emitted when the user drags an item and releases the mouse,
  66  * thus terminating the drag operation.
  67  */
  68
  69 /**
  70  * @event drop
  71  * A drop event is emitted when the user drags an item and then releases the mouse button
  72  * over a valid target.
  73  */
  74
  75 /* Static Properties */
  76
  77 /**
  78  * @inheritdoc OO.ui.mixin.ButtonElement
  79  */
  80 OO.ui.mixin.DraggableElement.static.cancelButtonMouseDownEvents = false;
  81
  82 /* Methods */
  83
  84 /**
  85  * Respond to mousedown event.
  86  *
  87  * @private
  88  * @param {jQuery.Event} e Drag event
  89  */
  90 OO.ui.mixin.DraggableElement.prototype.onDragMouseDown = function ( e ) {
  91         this.wasHandleUsed =
  92                 // Optimization: if the handle is the whole element this is always true
  93                 this.$handle[ 0 ] === this.$element[ 0 ] ||
  94                 // Check the mousedown occurred inside the handle
  95                 OO.ui.contains( this.$handle[ 0 ], e.target, true );
  96 };
  97
  98 /**
  99  * Respond to dragstart event.
 100  *
 101  * @private
 102  * @param {jQuery.Event} e Drag event
 103  * @return {boolean} False if the event is cancelled
 104  * @fires dragstart
 105  */
 106 OO.ui.mixin.DraggableElement.prototype.onDragStart = function ( e ) {
 107         var element = this,
 108                 dataTransfer = e.originalEvent.dataTransfer;
 109
 110         if ( !this.wasHandleUsed ) {
 111                 return false;
 112         }
 113
 114         // Define drop effect
 115         dataTransfer.dropEffect = 'none';
 116         dataTransfer.effectAllowed = 'move';
 117         // Support: Firefox
 118         // We must set up a dataTransfer data property or Firefox seems to
 119         // ignore the fact the element is draggable.
 120         try {
 121                 dataTransfer.setData( 'application-x/OOjs-UI-draggable', this.getIndex() );
 122         } catch ( err ) {
 123                 // The above is only for Firefox. Move on if it fails.
 124         }
 125         // Briefly add a 'clone' class to style the browser's native drag image
 126         this.$element.addClass( 'oo-ui-draggableElement-clone' );
 127         // Add placeholder class after the browser has rendered the clone
 128         setTimeout( function () {
 129                 element.$element
 130                         .removeClass( 'oo-ui-draggableElement-clone' )
 131                         .addClass( 'oo-ui-draggableElement-placeholder' );
 132         } );
 133         // Emit event
 134         this.emit( 'dragstart', this );
 135         return true;
 136 };
 137
 138 /**
 139  * Respond to dragend event.
 140  *
 141  * @private
 142  * @fires dragend
 143  */
 144 OO.ui.mixin.DraggableElement.prototype.onDragEnd = function () {
 145         this.$element.removeClass( 'oo-ui-draggableElement-placeholder' );
 146         this.emit( 'dragend' );
 147 };
 148
 149 /**
 150  * Handle drop event.
 151  *
 152  * @private
 153  * @param {jQuery.Event} e Drop event
 154  * @fires drop
 155  */
 156 OO.ui.mixin.DraggableElement.prototype.onDrop = function ( e ) {
 157         e.preventDefault();
 158         this.emit( 'drop', e );
 159 };
 160
 161 /**
 162  * In order for drag/drop to work, the dragover event must
 163  * return false and stop propogation.
 164  *
 165  * @param {jQuery.Event} e Drag event
 166  * @private
 167  */
 168 OO.ui.mixin.DraggableElement.prototype.onDragOver = function ( e ) {
 169         e.preventDefault();
 170 };
 171
 172 /**
 173  * Set item index.
 174  * Store it in the DOM so we can access from the widget drag event
 175  *
 176  * @private
 177  * @param {number} index Item index
 178  */
 179 OO.ui.mixin.DraggableElement.prototype.setIndex = function ( index ) {
 180         if ( this.index !== index ) {
 181                 this.index = index;
 182                 this.$element.data( 'index', index );
 183         }
 184 };
 185
 186 /**
 187  * Get item index
 188  *
 189  * @private
 190  * @return {number} Item index
 191  */
 192 OO.ui.mixin.DraggableElement.prototype.getIndex = function () {
 193         return this.index;
 194 };
 195
 196 /**
 197  * DraggableGroupElement is a mixin class used to create a group element to
 198  * contain draggable elements, which are items that can be clicked and dragged by a mouse.
 199  * The class is used with OO.ui.mixin.DraggableElement.
 200  *
 201  * @abstract
 202  * @class
 203  * @mixins OO.ui.mixin.GroupElement
 204  *
 205  * @constructor
 206  * @param {Object} [config] Configuration options
 207  * @cfg {string} [orientation] Item orientation: 'horizontal' or 'vertical'. The orientation
 208  *  should match the layout of the items. Items displayed in a single row
 209  *  or in several rows should use horizontal orientation. The vertical orientation should only be
 210  *  used when the items are displayed in a single column. Defaults to 'vertical'
 211  */
 212 OO.ui.mixin.DraggableGroupElement = function OoUiMixinDraggableGroupElement( config ) {
 213         // Configuration initialization
 214         config = config || {};
 215
 216         // Parent constructor
 217         OO.ui.mixin.GroupElement.call( this, config );
 218
 219         // Properties
 220         this.orientation = config.orientation || 'vertical';
 221         this.dragItem = null;
 222         this.itemKeys = {};
 223         this.dir = null;
 224         this.itemsOrder = null;
 225
 226         // Events
 227         this.aggregate( {
 228                 dragstart: 'itemDragStart',
 229                 dragend: 'itemDragEnd',
 230                 drop: 'itemDrop'
 231         } );
 232         this.connect( this, {
 233                 itemDragStart: 'onItemDragStart',
 234                 itemDrop: 'onItemDropOrDragEnd',
 235                 itemDragEnd: 'onItemDropOrDragEnd'
 236         } );
 237
 238         // Initialize
 239         if ( Array.isArray( config.items ) ) {
 240                 this.addItems( config.items );
 241         }
 242         this.$element
 243                 .addClass( 'oo-ui-draggableGroupElement' )
 244                 .append( this.$status )
 245                 .toggleClass( 'oo-ui-draggableGroupElement-horizontal', this.orientation === 'horizontal' );
 246 };
 247
 248 /* Setup */
 249 OO.mixinClass( OO.ui.mixin.DraggableGroupElement, OO.ui.mixin.GroupElement );
 250
 251 /* Events */
 252
 253 /**
 254  * An item has been dragged to a new position, but not yet dropped.
 255  *
 256  * @event drag
 257  * @param {OO.ui.mixin.DraggableElement} item Dragged item
 258  * @param {number} [newIndex] New index for the item
 259  */
 260
 261 /**
 262  * And item has been dropped at a new position.
 263  *
 264  * @event reorder
 265  * @param {OO.ui.mixin.DraggableElement} item Reordered item
 266  * @param {number} [newIndex] New index for the item
 267  */
 268
 269 /* Methods */
 270
 271 /**
 272  * Respond to item drag start event
 273  *
 274  * @private
 275  * @param {OO.ui.mixin.DraggableElement} item Dragged item
 276  */
 277 OO.ui.mixin.DraggableGroupElement.prototype.onItemDragStart = function ( item ) {
 278         // Make a shallow copy of this.items so we can re-order it during previews
 279         // without affecting the original array.
 280         this.itemsOrder = this.items.slice();
 281         this.updateIndexes();
 282         if ( this.orientation === 'horizontal' ) {
 283                 // Calculate and cache directionality on drag start - it's a little
 284                 // expensive and it shouldn't change while dragging.
 285                 this.dir = this.$element.css( 'direction' );
 286         }
 287         this.setDragItem( item );
 288 };
 289
 290 /**
 291  * Update the index properties of the items
 292  */
 293 OO.ui.mixin.DraggableGroupElement.prototype.updateIndexes = function () {
 294         var i, len;
 295
 296         // Map the index of each object
 297         for ( i = 0, len = this.itemsOrder.length; i < len; i++ ) {
 298                 this.itemsOrder[ i ].setIndex( i );
 299         }
 300 };
 301
 302 /**
 303  * Handle drop or dragend event and switch the order of the items accordingly
 304  *
 305  * @private
 306  * @param {OO.ui.mixin.DraggableElement} item Dropped item
 307  */
 308 OO.ui.mixin.DraggableGroupElement.prototype.onItemDropOrDragEnd = function () {
 309         var targetIndex, originalIndex,
 310                 item = this.getDragItem();
 311
 312         // TODO: Figure out a way to configure a list of legally droppable
 313         // elements even if they are not yet in the list
 314         if ( item ) {
 315                 originalIndex = this.items.indexOf( item );
 316                 // If the item has moved forward, add one to the index to account for the left shift
 317                 targetIndex = item.getIndex() + ( item.getIndex() > originalIndex ? 1 : 0 );
 318                 if ( targetIndex !== originalIndex ) {
 319                         this.reorder( this.getDragItem(), targetIndex );
 320                         this.emit( 'reorder', this.getDragItem(), targetIndex );
 321                 }
 322                 this.updateIndexes();
 323         }
 324         this.unsetDragItem();
 325         // Return false to prevent propogation
 326         return false;
 327 };
 328
 329 /**
 330  * Respond to dragover event
 331  *
 332  * @private
 333  * @param {jQuery.Event} e Dragover event
 334  * @fires reorder
 335  */
 336 OO.ui.mixin.DraggableGroupElement.prototype.onDragOver = function ( e ) {
 337         var overIndex, targetIndex,
 338                 item = this.getDragItem(),
 339                 dragItemIndex = item.getIndex();
 340
 341         // Get the OptionWidget item we are dragging over
 342         overIndex = $( e.target ).closest( '.oo-ui-draggableElement' ).data( 'index' );
 343
 344         if ( overIndex !== undefined && overIndex !== dragItemIndex ) {
 345                 targetIndex = overIndex + ( overIndex > dragItemIndex ? 1 : 0 );
 346
 347                 if ( targetIndex > 0 ) {
 348                         this.$group.children().eq( targetIndex - 1 ).after( item.$element );
 349                 } else {
 350                         this.$group.prepend( item.$element );
 351                 }
 352                 // Move item in itemsOrder array
 353                 this.itemsOrder.splice( overIndex, 0,
 354                         this.itemsOrder.splice( dragItemIndex, 1 )[ 0 ]
 355                 );
 356                 this.updateIndexes();
 357                 this.emit( 'drag', item, targetIndex );
 358         }
 359         // Prevent default
 360         e.preventDefault();
 361 };
 362
 363 /**
 364  * Reorder the items in the group
 365  *
 366  * @param {OO.ui.mixin.DraggableElement} item Reordered item
 367  * @param {number} newIndex New index
 368  */
 369 OO.ui.mixin.DraggableGroupElement.prototype.reorder = function ( item, newIndex ) {
 370         this.addItems( [ item ], newIndex );
 371 };
 372
 373 /**
 374  * Set a dragged item
 375  *
 376  * @param {OO.ui.mixin.DraggableElement} item Dragged item
 377  */
 378 OO.ui.mixin.DraggableGroupElement.prototype.setDragItem = function ( item ) {
 379         if ( this.dragItem !== item ) {
 380                 this.dragItem = item;
 381                 this.$element.on( 'dragover', this.onDragOver.bind( this ) );
 382                 this.$element.addClass( 'oo-ui-draggableGroupElement-dragging' );
 383         }
 384 };
 385
 386 /**
 387  * Unset the current dragged item
 388  */
 389 OO.ui.mixin.DraggableGroupElement.prototype.unsetDragItem = function () {
 390         if ( this.dragItem ) {
 391                 this.dragItem = null;
 392                 this.$element.off( 'dragover' );
 393                 this.$element.removeClass( 'oo-ui-draggableGroupElement-dragging' );
 394         }
 395 };
 396
 397 /**
 398  * Get the item that is currently being dragged.
 399  *
 400  * @return {OO.ui.mixin.DraggableElement|null} The currently dragged item, or `null` if no item is being dragged
 401  */
 402 OO.ui.mixin.DraggableGroupElement.prototype.getDragItem = function () {
 403         return this.dragItem;
 404 };
 405
 406 /**
 407  * RequestManager is a mixin that manages the lifecycle of a promise-backed request for a widget, such as
 408  * the {@link OO.ui.mixin.LookupElement}.
 409  *
 410  * @class
 411  * @abstract
 412  *
 413  * @constructor
 414  */
 415 OO.ui.mixin.RequestManager = function OoUiMixinRequestManager() {
 416         this.requestCache = {};
 417         this.requestQuery = null;
 418         this.requestRequest = null;
 419 };
 420
 421 /* Setup */
 422
 423 OO.initClass( OO.ui.mixin.RequestManager );
 424
 425 /**
 426  * Get request results for the current query.
 427  *
 428  * @return {jQuery.Promise} Promise object which will be passed response data as the first argument of
 429  *   the done event. If the request was aborted to make way for a subsequent request, this promise
 430  *   may not be rejected, depending on what jQuery feels like doing.
 431  */
 432 OO.ui.mixin.RequestManager.prototype.getRequestData = function () {
 433         var widget = this,
 434                 value = this.getRequestQuery(),
 435                 deferred = $.Deferred(),
 436                 ourRequest;
 437
 438         this.abortRequest();
 439         if ( Object.prototype.hasOwnProperty.call( this.requestCache, value ) ) {
 440                 deferred.resolve( this.requestCache[ value ] );
 441         } else {
 442                 if ( this.pushPending ) {
 443                         this.pushPending();
 444                 }
 445                 this.requestQuery = value;
 446                 ourRequest = this.requestRequest = this.getRequest();
 447                 ourRequest
 448                         .always( function () {
 449                                 // We need to pop pending even if this is an old request, otherwise
 450                                 // the widget will remain pending forever.
 451                                 // TODO: this assumes that an aborted request will fail or succeed soon after
 452                                 // being aborted, or at least eventually. It would be nice if we could popPending()
 453                                 // at abort time, but only if we knew that we hadn't already called popPending()
 454                                 // for that request.
 455                                 if ( widget.popPending ) {
 456                                         widget.popPending();
 457                                 }
 458                         } )
 459                         .done( function ( response ) {
 460                                 // If this is an old request (and aborting it somehow caused it to still succeed),
 461                                 // ignore its success completely
 462                                 if ( ourRequest === widget.requestRequest ) {
 463                                         widget.requestQuery = null;
 464                                         widget.requestRequest = null;
 465                                         widget.requestCache[ value ] = widget.getRequestCacheDataFromResponse( response );
 466                                         deferred.resolve( widget.requestCache[ value ] );
 467                                 }
 468                         } )
 469                         .fail( function () {
 470                                 // If this is an old request (or a request failing because it's being aborted),
 471                                 // ignore its failure completely
 472                                 if ( ourRequest === widget.requestRequest ) {
 473                                         widget.requestQuery = null;
 474                                         widget.requestRequest = null;
 475                                         deferred.reject();
 476                                 }
 477                         } );
 478         }
 479         return deferred.promise();
 480 };
 481
 482 /**
 483  * Abort the currently pending request, if any.
 484  *
 485  * @private
 486  */
 487 OO.ui.mixin.RequestManager.prototype.abortRequest = function () {
 488         var oldRequest = this.requestRequest;
 489         if ( oldRequest ) {
 490                 // First unset this.requestRequest to the fail handler will notice
 491                 // that the request is no longer current
 492                 this.requestRequest = null;
 493                 this.requestQuery = null;
 494                 oldRequest.abort();
 495         }
 496 };
 497
 498 /**
 499  * Get the query to be made.
 500  *
 501  * @protected
 502  * @method
 503  * @abstract
 504  * @return {string} query to be used
 505  */
 506 OO.ui.mixin.RequestManager.prototype.getRequestQuery = null;
 507
 508 /**
 509  * Get a new request object of the current query value.
 510  *
 511  * @protected
 512  * @method
 513  * @abstract
 514  * @return {jQuery.Promise} jQuery AJAX object, or promise object with an .abort() method
 515  */
 516 OO.ui.mixin.RequestManager.prototype.getRequest = null;
 517
 518 /**
 519  * Pre-process data returned by the request from #getRequest.
 520  *
 521  * The return value of this function will be cached, and any further queries for the given value
 522  * will use the cache rather than doing API requests.
 523  *
 524  * @protected
 525  * @method
 526  * @abstract
 527  * @param {Mixed} response Response from server
 528  * @return {Mixed} Cached result data
 529  */
 530 OO.ui.mixin.RequestManager.prototype.getRequestCacheDataFromResponse = null;
 531
 532 /**
 533  * LookupElement is a mixin that creates a {@link OO.ui.FloatingMenuSelectWidget menu} of suggested values for
 534  * a {@link OO.ui.TextInputWidget text input widget}. Suggested values are based on the characters the user types
 535  * into the text input field and, in general, the menu is only displayed when the user types. If a suggested value is chosen
 536  * from the lookup menu, that value becomes the value of the input field.
 537  *
 538  * Note that a new menu of suggested items is displayed when a value is chosen from the lookup menu. If this is
 539  * not the desired behavior, disable lookup menus with the #setLookupsDisabled method, then set the value, then
 540  * re-enable lookups.
 541  *
 542  * See the [OOjs UI demos][1] for an example.
 543  *
 544  * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/index.html#widgets-apex-vector-ltr
 545  *
 546  * @class
 547  * @abstract
 548  * @mixins OO.ui.mixin.RequestManager
 549  *
 550  * @constructor
 551  * @param {Object} [config] Configuration options
 552  * @cfg {jQuery} [$overlay] Overlay for the lookup menu; defaults to relative positioning
 553  * @cfg {jQuery} [$container=this.$element] The container element. The lookup menu is rendered beneath the specified element.
 554  * @cfg {boolean} [allowSuggestionsWhenEmpty=false] Request and display a lookup menu when the text input is empty.
 555  *  By default, the lookup menu is not generated and displayed until the user begins to type.
 556  * @cfg {boolean} [highlightFirst=true] Whether the first lookup result should be highlighted (so, that the user can
 557  *  take it over into the input with simply pressing return) automatically or not.
 558  */
 559 OO.ui.mixin.LookupElement = function OoUiMixinLookupElement( config ) {
 560         // Configuration initialization
 561         config = $.extend( { highlightFirst: true }, config );
 562
 563         // Mixin constructors
 564         OO.ui.mixin.RequestManager.call( this, config );
 565
 566         // Properties
 567         this.$overlay = config.$overlay || this.$element;
 568         this.lookupMenu = new OO.ui.FloatingMenuSelectWidget( {
 569                 widget: this,
 570                 input: this,
 571                 $container: config.$container || this.$element
 572         } );
 573
 574         this.allowSuggestionsWhenEmpty = config.allowSuggestionsWhenEmpty || false;
 575
 576         this.lookupsDisabled = false;
 577         this.lookupInputFocused = false;
 578         this.lookupHighlightFirstItem = config.highlightFirst;
 579
 580         // Events
 581         this.$input.on( {
 582                 focus: this.onLookupInputFocus.bind( this ),
 583                 blur: this.onLookupInputBlur.bind( this ),
 584                 mousedown: this.onLookupInputMouseDown.bind( this )
 585         } );
 586         this.connect( this, { change: 'onLookupInputChange' } );
 587         this.lookupMenu.connect( this, {
 588                 toggle: 'onLookupMenuToggle',
 589                 choose: 'onLookupMenuItemChoose'
 590         } );
 591
 592         // Initialization
 593         this.$element.addClass( 'oo-ui-lookupElement' );
 594         this.lookupMenu.$element.addClass( 'oo-ui-lookupElement-menu' );
 595         this.$overlay.append( this.lookupMenu.$element );
 596 };
 597
 598 /* Setup */
 599
 600 OO.mixinClass( OO.ui.mixin.LookupElement, OO.ui.mixin.RequestManager );
 601
 602 /* Methods */
 603
 604 /**
 605  * Handle input focus event.
 606  *
 607  * @protected
 608  * @param {jQuery.Event} e Input focus event
 609  */
 610 OO.ui.mixin.LookupElement.prototype.onLookupInputFocus = function () {
 611         this.lookupInputFocused = true;
 612         this.populateLookupMenu();
 613 };
 614
 615 /**
 616  * Handle input blur event.
 617  *
 618  * @protected
 619  * @param {jQuery.Event} e Input blur event
 620  */
 621 OO.ui.mixin.LookupElement.prototype.onLookupInputBlur = function () {
 622         this.closeLookupMenu();
 623         this.lookupInputFocused = false;
 624 };
 625
 626 /**
 627  * Handle input mouse down event.
 628  *
 629  * @protected
 630  * @param {jQuery.Event} e Input mouse down event
 631  */
 632 OO.ui.mixin.LookupElement.prototype.onLookupInputMouseDown = function () {
 633         // Only open the menu if the input was already focused.
 634         // This way we allow the user to open the menu again after closing it with Esc
 635         // by clicking in the input. Opening (and populating) the menu when initially
 636         // clicking into the input is handled by the focus handler.
 637         if ( this.lookupInputFocused && !this.lookupMenu.isVisible() ) {
 638                 this.populateLookupMenu();
 639         }
 640 };
 641
 642 /**
 643  * Handle input change event.
 644  *
 645  * @protected
 646  * @param {string} value New input value
 647  */
 648 OO.ui.mixin.LookupElement.prototype.onLookupInputChange = function () {
 649         if ( this.lookupInputFocused ) {
 650                 this.populateLookupMenu();
 651         }
 652 };
 653
 654 /**
 655  * Handle the lookup menu being shown/hidden.
 656  *
 657  * @protected
 658  * @param {boolean} visible Whether the lookup menu is now visible.
 659  */
 660 OO.ui.mixin.LookupElement.prototype.onLookupMenuToggle = function ( visible ) {
 661         if ( !visible ) {
 662                 // When the menu is hidden, abort any active request and clear the menu.
 663                 // This has to be done here in addition to closeLookupMenu(), because
 664                 // MenuSelectWidget will close itself when the user presses Esc.
 665                 this.abortLookupRequest();
 666                 this.lookupMenu.clearItems();
 667         }
 668 };
 669
 670 /**
 671  * Handle menu item 'choose' event, updating the text input value to the value of the clicked item.
 672  *
 673  * @protected
 674  * @param {OO.ui.MenuOptionWidget} item Selected item
 675  */
 676 OO.ui.mixin.LookupElement.prototype.onLookupMenuItemChoose = function ( item ) {
 677         this.setValue( item.getData() );
 678 };
 679
 680 /**
 681  * Get lookup menu.
 682  *
 683  * @private
 684  * @return {OO.ui.FloatingMenuSelectWidget}
 685  */
 686 OO.ui.mixin.LookupElement.prototype.getLookupMenu = function () {
 687         return this.lookupMenu;
 688 };
 689
 690 /**
 691  * Disable or re-enable lookups.
 692  *
 693  * When lookups are disabled, calls to #populateLookupMenu will be ignored.
 694  *
 695  * @param {boolean} disabled Disable lookups
 696  */
 697 OO.ui.mixin.LookupElement.prototype.setLookupsDisabled = function ( disabled ) {
 698         this.lookupsDisabled = !!disabled;
 699 };
 700
 701 /**
 702  * Open the menu. If there are no entries in the menu, this does nothing.
 703  *
 704  * @private
 705  * @chainable
 706  */
 707 OO.ui.mixin.LookupElement.prototype.openLookupMenu = function () {
 708         if ( !this.lookupMenu.isEmpty() ) {
 709                 this.lookupMenu.toggle( true );
 710         }
 711         return this;
 712 };
 713
 714 /**
 715  * Close the menu, empty it, and abort any pending request.
 716  *
 717  * @private
 718  * @chainable
 719  */
 720 OO.ui.mixin.LookupElement.prototype.closeLookupMenu = function () {
 721         this.lookupMenu.toggle( false );
 722         this.abortLookupRequest();
 723         this.lookupMenu.clearItems();
 724         return this;
 725 };
 726
 727 /**
 728  * Request menu items based on the input's current value, and when they arrive,
 729  * populate the menu with these items and show the menu.
 730  *
 731  * If lookups have been disabled with #setLookupsDisabled, this function does nothing.
 732  *
 733  * @private
 734  * @chainable
 735  */
 736 OO.ui.mixin.LookupElement.prototype.populateLookupMenu = function () {
 737         var widget = this,
 738                 value = this.getValue();
 739
 740         if ( this.lookupsDisabled || this.isReadOnly() ) {
 741                 return;
 742         }
 743
 744         // If the input is empty, clear the menu, unless suggestions when empty are allowed.
 745         if ( !this.allowSuggestionsWhenEmpty && value === '' ) {
 746                 this.closeLookupMenu();
 747         // Skip population if there is already a request pending for the current value
 748         } else if ( value !== this.lookupQuery ) {
 749                 this.getLookupMenuItems()
 750                         .done( function ( items ) {
 751                                 widget.lookupMenu.clearItems();
 752                                 if ( items.length ) {
 753                                         widget.lookupMenu
 754                                                 .addItems( items )
 755                                                 .toggle( true );
 756                                         widget.initializeLookupMenuSelection();
 757                                 } else {
 758                                         widget.lookupMenu.toggle( false );
 759                                 }
 760                         } )
 761                         .fail( function () {
 762                                 widget.lookupMenu.clearItems();
 763                         } );
 764         }
 765
 766         return this;
 767 };
 768
 769 /**
 770  * Highlight the first selectable item in the menu, if configured.
 771  *
 772  * @private
 773  * @chainable
 774  */
 775 OO.ui.mixin.LookupElement.prototype.initializeLookupMenuSelection = function () {
 776         if ( this.lookupHighlightFirstItem && !this.lookupMenu.getSelectedItem() ) {
 777                 this.lookupMenu.highlightItem( this.lookupMenu.getFirstSelectableItem() );
 778         }
 779 };
 780
 781 /**
 782  * Get lookup menu items for the current query.
 783  *
 784  * @private
 785  * @return {jQuery.Promise} Promise object which will be passed menu items as the first argument of
 786  *   the done event. If the request was aborted to make way for a subsequent request, this promise
 787  *   will not be rejected: it will remain pending forever.
 788  */
 789 OO.ui.mixin.LookupElement.prototype.getLookupMenuItems = function () {
 790         return this.getRequestData().then( function ( data ) {
 791                 return this.getLookupMenuOptionsFromData( data );
 792         }.bind( this ) );
 793 };
 794
 795 /**
 796  * Abort the currently pending lookup request, if any.
 797  *
 798  * @private
 799  */
 800 OO.ui.mixin.LookupElement.prototype.abortLookupRequest = function () {
 801         this.abortRequest();
 802 };
 803
 804 /**
 805  * Get a new request object of the current lookup query value.
 806  *
 807  * @protected
 808  * @method
 809  * @abstract
 810  * @return {jQuery.Promise} jQuery AJAX object, or promise object with an .abort() method
 811  */
 812 OO.ui.mixin.LookupElement.prototype.getLookupRequest = null;
 813
 814 /**
 815  * Pre-process data returned by the request from #getLookupRequest.
 816  *
 817  * The return value of this function will be cached, and any further queries for the given value
 818  * will use the cache rather than doing API requests.
 819  *
 820  * @protected
 821  * @method
 822  * @abstract
 823  * @param {Mixed} response Response from server
 824  * @return {Mixed} Cached result data
 825  */
 826 OO.ui.mixin.LookupElement.prototype.getLookupCacheDataFromResponse = null;
 827
 828 /**
 829  * Get a list of menu option widgets from the (possibly cached) data returned by
 830  * #getLookupCacheDataFromResponse.
 831  *
 832  * @protected
 833  * @method
 834  * @abstract
 835  * @param {Mixed} data Cached result data, usually an array
 836  * @return {OO.ui.MenuOptionWidget[]} Menu items
 837  */
 838 OO.ui.mixin.LookupElement.prototype.getLookupMenuOptionsFromData = null;
 839
 840 /**
 841  * Set the read-only state of the widget.
 842  *
 843  * This will also disable/enable the lookups functionality.
 844  *
 845  * @param {boolean} readOnly Make input read-only
 846  * @chainable
 847  */
 848 OO.ui.mixin.LookupElement.prototype.setReadOnly = function ( readOnly ) {
 849         // Parent method
 850         // Note: Calling #setReadOnly this way assumes this is mixed into an OO.ui.TextInputWidget
 851         OO.ui.TextInputWidget.prototype.setReadOnly.call( this, readOnly );
 852
 853         // During construction, #setReadOnly is called before the OO.ui.mixin.LookupElement constructor
 854         if ( this.isReadOnly() && this.lookupMenu ) {
 855                 this.closeLookupMenu();
 856         }
 857
 858         return this;
 859 };
 860
 861 /**
 862  * @inheritdoc OO.ui.mixin.RequestManager
 863  */
 864 OO.ui.mixin.LookupElement.prototype.getRequestQuery = function () {
 865         return this.getValue();
 866 };
 867
 868 /**
 869  * @inheritdoc OO.ui.mixin.RequestManager
 870  */
 871 OO.ui.mixin.LookupElement.prototype.getRequest = function () {
 872         return this.getLookupRequest();
 873 };
 874
 875 /**
 876  * @inheritdoc OO.ui.mixin.RequestManager
 877  */
 878 OO.ui.mixin.LookupElement.prototype.getRequestCacheDataFromResponse = function ( response ) {
 879         return this.getLookupCacheDataFromResponse( response );
 880 };
 881
 882 /**
 883  * CardLayouts are used within {@link OO.ui.IndexLayout index layouts} to create cards that users can select and display
 884  * from the index's optional {@link OO.ui.TabSelectWidget tab} navigation. Cards are usually not instantiated directly,
 885  * rather extended to include the required content and functionality.
 886  *
 887  * Each card must have a unique symbolic name, which is passed to the constructor. In addition, the card's tab
 888  * item is customized (with a label) using the #setupTabItem method. See
 889  * {@link OO.ui.IndexLayout IndexLayout} for an example.
 890  *
 891  * @class
 892  * @extends OO.ui.PanelLayout
 893  *
 894  * @constructor
 895  * @param {string} name Unique symbolic name of card
 896  * @param {Object} [config] Configuration options
 897  * @cfg {jQuery|string|Function|OO.ui.HtmlSnippet} [label] Label for card's tab
 898  */
 899 OO.ui.CardLayout = function OoUiCardLayout( name, config ) {
 900         // Allow passing positional parameters inside the config object
 901         if ( OO.isPlainObject( name ) && config === undefined ) {
 902                 config = name;
 903                 name = config.name;
 904         }
 905
 906         // Configuration initialization
 907         config = $.extend( { scrollable: true }, config );
 908
 909         // Parent constructor
 910         OO.ui.CardLayout.parent.call( this, config );
 911
 912         // Properties
 913         this.name = name;
 914         this.label = config.label;
 915         this.tabItem = null;
 916         this.active = false;
 917
 918         // Initialization
 919         this.$element.addClass( 'oo-ui-cardLayout' );
 920 };
 921
 922 /* Setup */
 923
 924 OO.inheritClass( OO.ui.CardLayout, OO.ui.PanelLayout );
 925
 926 /* Events */
 927
 928 /**
 929  * An 'active' event is emitted when the card becomes active. Cards become active when they are
 930  * shown in a index layout that is configured to display only one card at a time.
 931  *
 932  * @event active
 933  * @param {boolean} active Card is active
 934  */
 935
 936 /* Methods */
 937
 938 /**
 939  * Get the symbolic name of the card.
 940  *
 941  * @return {string} Symbolic name of card
 942  */
 943 OO.ui.CardLayout.prototype.getName = function () {
 944         return this.name;
 945 };
 946
 947 /**
 948  * Check if card is active.
 949  *
 950  * Cards become active when they are shown in a {@link OO.ui.IndexLayout index layout} that is configured to display
 951  * only one card at a time. Additional CSS is applied to the card's tab item to reflect the active state.
 952  *
 953  * @return {boolean} Card is active
 954  */
 955 OO.ui.CardLayout.prototype.isActive = function () {
 956         return this.active;
 957 };
 958
 959 /**
 960  * Get tab item.
 961  *
 962  * The tab item allows users to access the card from the index's tab
 963  * navigation. The tab item itself can be customized (with a label, level, etc.) using the #setupTabItem method.
 964  *
 965  * @return {OO.ui.TabOptionWidget|null} Tab option widget
 966  */
 967 OO.ui.CardLayout.prototype.getTabItem = function () {
 968         return this.tabItem;
 969 };
 970
 971 /**
 972  * Set or unset the tab item.
 973  *
 974  * Specify a {@link OO.ui.TabOptionWidget tab option} to set it,
 975  * or `null` to clear the tab item. To customize the tab item itself (e.g., to set a label or tab
 976  * level), use #setupTabItem instead of this method.
 977  *
 978  * @param {OO.ui.TabOptionWidget|null} tabItem Tab option widget, null to clear
 979  * @chainable
 980  */
 981 OO.ui.CardLayout.prototype.setTabItem = function ( tabItem ) {
 982         this.tabItem = tabItem || null;
 983         if ( tabItem ) {
 984                 this.setupTabItem();
 985         }
 986         return this;
 987 };
 988
 989 /**
 990  * Set up the tab item.
 991  *
 992  * Use this method to customize the tab item (e.g., to add a label or tab level). To set or unset
 993  * the tab item itself (with a {@link OO.ui.TabOptionWidget tab option} or `null`), use
 994  * the #setTabItem method instead.
 995  *
 996  * @param {OO.ui.TabOptionWidget} tabItem Tab option widget to set up
 997  * @chainable
 998  */
 999 OO.ui.CardLayout.prototype.setupTabItem = function () {
1000         if ( this.label ) {
1001                 this.tabItem.setLabel( this.label );
1002         }
1003         return this;
1004 };
1005
1006 /**
1007  * Set the card to its 'active' state.
1008  *
1009  * Cards become active when they are shown in a index layout that is configured to display only one card at a time. Additional
1010  * CSS is applied to the tab item to reflect the card's active state. Outside of the index
1011  * context, setting the active state on a card does nothing.
1012  *
1013  * @param {boolean} active Card is active
1014  * @fires active
1015  */
1016 OO.ui.CardLayout.prototype.setActive = function ( active ) {
1017         active = !!active;
1018
1019         if ( active !== this.active ) {
1020                 this.active = active;
1021                 this.$element.toggleClass( 'oo-ui-cardLayout-active', this.active );
1022                 this.emit( 'active', this.active );
1023         }
1024 };
1025
1026 /**
1027  * PageLayouts are used within {@link OO.ui.BookletLayout booklet layouts} to create pages that users can select and display
1028  * from the booklet's optional {@link OO.ui.OutlineSelectWidget outline} navigation. Pages are usually not instantiated directly,
1029  * rather extended to include the required content and functionality.
1030  *
1031  * Each page must have a unique symbolic name, which is passed to the constructor. In addition, the page's outline
1032  * item is customized (with a label, outline level, etc.) using the #setupOutlineItem method. See
1033  * {@link OO.ui.BookletLayout BookletLayout} for an example.
1034  *
1035  * @class
1036  * @extends OO.ui.PanelLayout
1037  *
1038  * @constructor
1039  * @param {string} name Unique symbolic name of page
1040  * @param {Object} [config] Configuration options
1041  */
1042 OO.ui.PageLayout = function OoUiPageLayout( name, config ) {
1043         // Allow passing positional parameters inside the config object
1044         if ( OO.isPlainObject( name ) && config === undefined ) {
1045                 config = name;
1046                 name = config.name;
1047         }
1048
1049         // Configuration initialization
1050         config = $.extend( { scrollable: true }, config );
1051
1052         // Parent constructor
1053         OO.ui.PageLayout.parent.call( this, config );
1054
1055         // Properties
1056         this.name = name;
1057         this.outlineItem = null;
1058         this.active = false;
1059
1060         // Initialization
1061         this.$element.addClass( 'oo-ui-pageLayout' );
1062 };
1063
1064 /* Setup */
1065
1066 OO.inheritClass( OO.ui.PageLayout, OO.ui.PanelLayout );
1067
1068 /* Events */
1069
1070 /**
1071  * An 'active' event is emitted when the page becomes active. Pages become active when they are
1072  * shown in a booklet layout that is configured to display only one page at a time.
1073  *
1074  * @event active
1075  * @param {boolean} active Page is active
1076  */
1077
1078 /* Methods */
1079
1080 /**
1081  * Get the symbolic name of the page.
1082  *
1083  * @return {string} Symbolic name of page
1084  */
1085 OO.ui.PageLayout.prototype.getName = function () {
1086         return this.name;
1087 };
1088
1089 /**
1090  * Check if page is active.
1091  *
1092  * Pages become active when they are shown in a {@link OO.ui.BookletLayout booklet layout} that is configured to display
1093  * only one page at a time. Additional CSS is applied to the page's outline item to reflect the active state.
1094  *
1095  * @return {boolean} Page is active
1096  */
1097 OO.ui.PageLayout.prototype.isActive = function () {
1098         return this.active;
1099 };
1100
1101 /**
1102  * Get outline item.
1103  *
1104  * The outline item allows users to access the page from the booklet's outline
1105  * navigation. The outline item itself can be customized (with a label, level, etc.) using the #setupOutlineItem method.
1106  *
1107  * @return {OO.ui.OutlineOptionWidget|null} Outline option widget
1108  */
1109 OO.ui.PageLayout.prototype.getOutlineItem = function () {
1110         return this.outlineItem;
1111 };
1112
1113 /**
1114  * Set or unset the outline item.
1115  *
1116  * Specify an {@link OO.ui.OutlineOptionWidget outline option} to set it,
1117  * or `null` to clear the outline item. To customize the outline item itself (e.g., to set a label or outline
1118  * level), use #setupOutlineItem instead of this method.
1119  *
1120  * @param {OO.ui.OutlineOptionWidget|null} outlineItem Outline option widget, null to clear
1121  * @chainable
1122  */
1123 OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
1124         this.outlineItem = outlineItem || null;
1125         if ( outlineItem ) {
1126                 this.setupOutlineItem();
1127         }
1128         return this;
1129 };
1130
1131 /**
1132  * Set up the outline item.
1133  *
1134  * Use this method to customize the outline item (e.g., to add a label or outline level). To set or unset
1135  * the outline item itself (with an {@link OO.ui.OutlineOptionWidget outline option} or `null`), use
1136  * the #setOutlineItem method instead.
1137  *
1138  * @param {OO.ui.OutlineOptionWidget} outlineItem Outline option widget to set up
1139  * @chainable
1140  */
1141 OO.ui.PageLayout.prototype.setupOutlineItem = function () {
1142         return this;
1143 };
1144
1145 /**
1146  * Set the page to its 'active' state.
1147  *
1148  * Pages become active when they are shown in a booklet layout that is configured to display only one page at a time. Additional
1149  * CSS is applied to the outline item to reflect the page's active state. Outside of the booklet
1150  * context, setting the active state on a page does nothing.
1151  *
1152  * @param {boolean} active Page is active
1153  * @fires active
1154  */
1155 OO.ui.PageLayout.prototype.setActive = function ( active ) {
1156         active = !!active;
1157
1158         if ( active !== this.active ) {
1159                 this.active = active;
1160                 this.$element.toggleClass( 'oo-ui-pageLayout-active', active );
1161                 this.emit( 'active', this.active );
1162         }
1163 };
1164
1165 /**
1166  * StackLayouts contain a series of {@link OO.ui.PanelLayout panel layouts}. By default, only one panel is displayed
1167  * at a time, though the stack layout can also be configured to show all contained panels, one after another,
1168  * by setting the #continuous option to 'true'.
1169  *
1170  *     @example
1171  *     // A stack layout with two panels, configured to be displayed continously
1172  *     var myStack = new OO.ui.StackLayout( {
1173  *         items: [
1174  *             new OO.ui.PanelLayout( {
1175  *                 $content: $( '<p>Panel One</p>' ),
1176  *                 padded: true,
1177  *                 framed: true
1178  *             } ),
1179  *             new OO.ui.PanelLayout( {
1180  *                 $content: $( '<p>Panel Two</p>' ),
1181  *                 padded: true,
1182  *                 framed: true
1183  *             } )
1184  *         ],
1185  *         continuous: true
1186  *     } );
1187  *     $( 'body' ).append( myStack.$element );
1188  *
1189  * @class
1190  * @extends OO.ui.PanelLayout
1191  * @mixins OO.ui.mixin.GroupElement
1192  *
1193  * @constructor
1194  * @param {Object} [config] Configuration options
1195  * @cfg {boolean} [continuous=false] Show all panels, one after another. By default, only one panel is displayed at a time.
1196  * @cfg {OO.ui.Layout[]} [items] Panel layouts to add to the stack layout.
1197  */
1198 OO.ui.StackLayout = function OoUiStackLayout( config ) {
1199         // Configuration initialization
1200         config = $.extend( { scrollable: true }, config );
1201
1202         // Parent constructor
1203         OO.ui.StackLayout.parent.call( this, config );
1204
1205         // Mixin constructors
1206         OO.ui.mixin.GroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) );
1207
1208         // Properties
1209         this.currentItem = null;
1210         this.continuous = !!config.continuous;
1211
1212         // Initialization
1213         this.$element.addClass( 'oo-ui-stackLayout' );
1214         if ( this.continuous ) {
1215                 this.$element.addClass( 'oo-ui-stackLayout-continuous' );
1216                 this.$element.on( 'scroll', OO.ui.debounce( this.onScroll.bind( this ), 250 ) );
1217         }
1218         if ( Array.isArray( config.items ) ) {
1219                 this.addItems( config.items );
1220         }
1221 };
1222
1223 /* Setup */
1224
1225 OO.inheritClass( OO.ui.StackLayout, OO.ui.PanelLayout );
1226 OO.mixinClass( OO.ui.StackLayout, OO.ui.mixin.GroupElement );
1227
1228 /* Events */
1229
1230 /**
1231  * A 'set' event is emitted when panels are {@link #addItems added}, {@link #removeItems removed},
1232  * {@link #clearItems cleared} or {@link #setItem displayed}.
1233  *
1234  * @event set
1235  * @param {OO.ui.Layout|null} item Current panel or `null` if no panel is shown
1236  */
1237
1238 /**
1239  * When used in continuous mode, this event is emitted when the user scrolls down
1240  * far enough such that currentItem is no longer visible.
1241  *
1242  * @event visibleItemChange
1243  * @param {OO.ui.PanelLayout} panel The next visible item in the layout
1244  */
1245
1246 /* Methods */
1247
1248 /**
1249  * Handle scroll events from the layout element
1250  *
1251  * @param {jQuery.Event} e
1252  * @fires visibleItemChange
1253  */
1254 OO.ui.StackLayout.prototype.onScroll = function () {
1255         var currentRect,
1256                 len = this.items.length,
1257                 currentIndex = this.items.indexOf( this.currentItem ),
1258                 newIndex = currentIndex,
1259                 containerRect = this.$element[ 0 ].getBoundingClientRect();
1260
1261         if ( !containerRect || ( !containerRect.top && !containerRect.bottom ) ) {
1262                 // Can't get bounding rect, possibly not attached.
1263                 return;
1264         }
1265
1266         function getRect( item ) {
1267                 return item.$element[ 0 ].getBoundingClientRect();
1268         }
1269
1270         function isVisible( item ) {
1271                 var rect = getRect( item );
1272                 return rect.bottom > containerRect.top && rect.top < containerRect.bottom;
1273         }
1274
1275         currentRect = getRect( this.currentItem );
1276
1277         if ( currentRect.bottom < containerRect.top ) {
1278                 // Scrolled down past current item
1279                 while ( ++newIndex < len ) {
1280                         if ( isVisible( this.items[ newIndex ] ) ) {
1281                                 break;
1282                         }
1283                 }
1284         } else if ( currentRect.top > containerRect.bottom ) {
1285                 // Scrolled up past current item
1286                 while ( --newIndex >= 0 ) {
1287                         if ( isVisible( this.items[ newIndex ] ) ) {
1288                                 break;
1289                         }
1290                 }
1291         }
1292
1293         if ( newIndex !== currentIndex ) {
1294                 this.emit( 'visibleItemChange', this.items[ newIndex ] );
1295         }
1296 };
1297
1298 /**
1299  * Get the current panel.
1300  *
1301  * @return {OO.ui.Layout|null}
1302  */
1303 OO.ui.StackLayout.prototype.getCurrentItem = function () {
1304         return this.currentItem;
1305 };
1306
1307 /**
1308  * Unset the current item.
1309  *
1310  * @private
1311  * @param {OO.ui.StackLayout} layout
1312  * @fires set
1313  */
1314 OO.ui.StackLayout.prototype.unsetCurrentItem = function () {
1315         var prevItem = this.currentItem;
1316         if ( prevItem === null ) {
1317                 return;
1318         }
1319
1320         this.currentItem = null;
1321         this.emit( 'set', null );
1322 };
1323
1324 /**
1325  * Add panel layouts to the stack layout.
1326  *
1327  * Panels will be added to the end of the stack layout array unless the optional index parameter specifies a different
1328  * insertion point. Adding a panel that is already in the stack will move it to the end of the array or the point specified
1329  * by the index.
1330  *
1331  * @param {OO.ui.Layout[]} items Panels to add
1332  * @param {number} [index] Index of the insertion point
1333  * @chainable
1334  */
1335 OO.ui.StackLayout.prototype.addItems = function ( items, index ) {
1336         // Update the visibility
1337         this.updateHiddenState( items, this.currentItem );
1338
1339         // Mixin method
1340         OO.ui.mixin.GroupElement.prototype.addItems.call( this, items, index );
1341
1342         if ( !this.currentItem && items.length ) {
1343                 this.setItem( items[ 0 ] );
1344         }
1345
1346         return this;
1347 };
1348
1349 /**
1350  * Remove the specified panels from the stack layout.
1351  *
1352  * Removed panels are detached from the DOM, not removed, so that they may be reused. To remove all panels,
1353  * you may wish to use the #clearItems method instead.
1354  *
1355  * @param {OO.ui.Layout[]} items Panels to remove
1356  * @chainable
1357  * @fires set
1358  */
1359 OO.ui.StackLayout.prototype.removeItems = function ( items ) {
1360         // Mixin method
1361         OO.ui.mixin.GroupElement.prototype.removeItems.call( this, items );
1362
1363         if ( items.indexOf( this.currentItem ) !== -1 ) {
1364                 if ( this.items.length ) {
1365                         this.setItem( this.items[ 0 ] );
1366                 } else {
1367                         this.unsetCurrentItem();
1368                 }
1369         }
1370
1371         return this;
1372 };
1373
1374 /**
1375  * Clear all panels from the stack layout.
1376  *
1377  * Cleared panels are detached from the DOM, not removed, so that they may be reused. To remove only
1378  * a subset of panels, use the #removeItems method.
1379  *
1380  * @chainable
1381  * @fires set
1382  */
1383 OO.ui.StackLayout.prototype.clearItems = function () {
1384         this.unsetCurrentItem();
1385         OO.ui.mixin.GroupElement.prototype.clearItems.call( this );
1386
1387         return this;
1388 };
1389
1390 /**
1391  * Show the specified panel.
1392  *
1393  * If another panel is currently displayed, it will be hidden.
1394  *
1395  * @param {OO.ui.Layout} item Panel to show
1396  * @chainable
1397  * @fires set
1398  */
1399 OO.ui.StackLayout.prototype.setItem = function ( item ) {
1400         if ( item !== this.currentItem ) {
1401                 this.updateHiddenState( this.items, item );
1402
1403                 if ( this.items.indexOf( item ) !== -1 ) {
1404                         this.currentItem = item;
1405                         this.emit( 'set', item );
1406                 } else {
1407                         this.unsetCurrentItem();
1408                 }
1409         }
1410
1411         return this;
1412 };
1413
1414 /**
1415  * Update the visibility of all items in case of non-continuous view.
1416  *
1417  * Ensure all items are hidden except for the selected one.
1418  * This method does nothing when the stack is continuous.
1419  *
1420  * @private
1421  * @param {OO.ui.Layout[]} items Item list iterate over
1422  * @param {OO.ui.Layout} [selectedItem] Selected item to show
1423  */
1424 OO.ui.StackLayout.prototype.updateHiddenState = function ( items, selectedItem ) {
1425         var i, len;
1426
1427         if ( !this.continuous ) {
1428                 for ( i = 0, len = items.length; i < len; i++ ) {
1429                         if ( !selectedItem || selectedItem !== items[ i ] ) {
1430                                 items[ i ].$element.addClass( 'oo-ui-element-hidden' );
1431                                 items[ i ].$element.attr( 'aria-hidden', 'true' );
1432                         }
1433                 }
1434                 if ( selectedItem ) {
1435                         selectedItem.$element.removeClass( 'oo-ui-element-hidden' );
1436                         selectedItem.$element.removeAttr( 'aria-hidden' );
1437                 }
1438         }
1439 };
1440
1441 /**
1442  * MenuLayouts combine a menu and a content {@link OO.ui.PanelLayout panel}. The menu is positioned relative to the content (after, before, top, or bottom)
1443  * and its size is customized with the #menuSize config. The content area will fill all remaining space.
1444  *
1445  *     @example
1446  *     var menuLayout = new OO.ui.MenuLayout( {
1447  *         position: 'top'
1448  *     } ),
1449  *         menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
1450  *         contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ),
1451  *         select = new OO.ui.SelectWidget( {
1452  *             items: [
1453  *                 new OO.ui.OptionWidget( {
1454  *                     data: 'before',
1455  *                     label: 'Before',
1456  *                 } ),
1457  *                 new OO.ui.OptionWidget( {
1458  *                     data: 'after',
1459  *                     label: 'After',
1460  *                 } ),
1461  *                 new OO.ui.OptionWidget( {
1462  *                     data: 'top',
1463  *                     label: 'Top',
1464  *                 } ),
1465  *                 new OO.ui.OptionWidget( {
1466  *                     data: 'bottom',
1467  *                     label: 'Bottom',
1468  *                 } )
1469  *              ]
1470  *         } ).on( 'select', function ( item ) {
1471  *            menuLayout.setMenuPosition( item.getData() );
1472  *         } );
1473  *
1474  *     menuLayout.$menu.append(
1475  *         menuPanel.$element.append( '<b>Menu panel</b>', select.$element )
1476  *     );
1477  *     menuLayout.$content.append(
1478  *         contentPanel.$element.append( '<b>Content panel</b>', '<p>Note that the menu is positioned relative to the content panel: top, bottom, after, before.</p>')
1479  *     );
1480  *     $( 'body' ).append( menuLayout.$element );
1481  *
1482  * If menu size needs to be overridden, it can be accomplished using CSS similar to the snippet
1483  * below. MenuLayout's CSS will override the appropriate values with 'auto' or '0' to display the
1484  * menu correctly. If `menuPosition` is known beforehand, CSS rules corresponding to other positions
1485  * may be omitted.
1486  *
1487  *     .oo-ui-menuLayout-menu {
1488  *         height: 200px;
1489  *         width: 200px;
1490  *     }
1491  *     .oo-ui-menuLayout-content {
1492  *         top: 200px;
1493  *         left: 200px;
1494  *         right: 200px;
1495  *         bottom: 200px;
1496  *     }
1497  *
1498  * @class
1499  * @extends OO.ui.Layout
1500  *
1501  * @constructor
1502  * @param {Object} [config] Configuration options
1503  * @cfg {boolean} [showMenu=true] Show menu
1504  * @cfg {string} [menuPosition='before'] Position of menu: `top`, `after`, `bottom` or `before`
1505  */
1506 OO.ui.MenuLayout = function OoUiMenuLayout( config ) {
1507         // Configuration initialization
1508         config = $.extend( {
1509                 showMenu: true,
1510                 menuPosition: 'before'
1511         }, config );
1512
1513         // Parent constructor
1514         OO.ui.MenuLayout.parent.call( this, config );
1515
1516         /**
1517          * Menu DOM node
1518          *
1519          * @property {jQuery}
1520          */
1521         this.$menu = $( '<div>' );
1522         /**
1523          * Content DOM node
1524          *
1525          * @property {jQuery}
1526          */
1527         this.$content = $( '<div>' );
1528
1529         // Initialization
1530         this.$menu
1531                 .addClass( 'oo-ui-menuLayout-menu' );
1532         this.$content.addClass( 'oo-ui-menuLayout-content' );
1533         this.$element
1534                 .addClass( 'oo-ui-menuLayout' )
1535                 .append( this.$content, this.$menu );
1536         this.setMenuPosition( config.menuPosition );
1537         this.toggleMenu( config.showMenu );
1538 };
1539
1540 /* Setup */
1541
1542 OO.inheritClass( OO.ui.MenuLayout, OO.ui.Layout );
1543
1544 /* Methods */
1545
1546 /**
1547  * Toggle menu.
1548  *
1549  * @param {boolean} showMenu Show menu, omit to toggle
1550  * @chainable
1551  */
1552 OO.ui.MenuLayout.prototype.toggleMenu = function ( showMenu ) {
1553         showMenu = showMenu === undefined ? !this.showMenu : !!showMenu;
1554
1555         if ( this.showMenu !== showMenu ) {
1556                 this.showMenu = showMenu;
1557                 this.$element
1558                         .toggleClass( 'oo-ui-menuLayout-showMenu', this.showMenu )
1559                         .toggleClass( 'oo-ui-menuLayout-hideMenu', !this.showMenu );
1560                 this.$menu.attr( 'aria-hidden', this.showMenu ? 'false' : 'true' );
1561         }
1562
1563         return this;
1564 };
1565
1566 /**
1567  * Check if menu is visible
1568  *
1569  * @return {boolean} Menu is visible
1570  */
1571 OO.ui.MenuLayout.prototype.isMenuVisible = function () {
1572         return this.showMenu;
1573 };
1574
1575 /**
1576  * Set menu position.
1577  *
1578  * @param {string} position Position of menu, either `top`, `after`, `bottom` or `before`
1579  * @throws {Error} If position value is not supported
1580  * @chainable
1581  */
1582 OO.ui.MenuLayout.prototype.setMenuPosition = function ( position ) {
1583         this.$element.removeClass( 'oo-ui-menuLayout-' + this.menuPosition );
1584         this.menuPosition = position;
1585         this.$element.addClass( 'oo-ui-menuLayout-' + position );
1586
1587         return this;
1588 };
1589
1590 /**
1591  * Get menu position.
1592  *
1593  * @return {string} Menu position
1594  */
1595 OO.ui.MenuLayout.prototype.getMenuPosition = function () {
1596         return this.menuPosition;
1597 };
1598
1599 /**
1600  * BookletLayouts contain {@link OO.ui.PageLayout page layouts} as well as
1601  * an {@link OO.ui.OutlineSelectWidget outline} that allows users to easily navigate
1602  * through the pages and select which one to display. By default, only one page is
1603  * displayed at a time and the outline is hidden. When a user navigates to a new page,
1604  * the booklet layout automatically focuses on the first focusable element, unless the
1605  * default setting is changed. Optionally, booklets can be configured to show
1606  * {@link OO.ui.OutlineControlsWidget controls} for adding, moving, and removing items.
1607  *
1608  *     @example
1609  *     // Example of a BookletLayout that contains two PageLayouts.
1610  *
1611  *     function PageOneLayout( name, config ) {
1612  *         PageOneLayout.parent.call( this, name, config );
1613  *         this.$element.append( '<p>First page</p><p>(This booklet has an outline, displayed on the left)</p>' );
1614  *     }
1615  *     OO.inheritClass( PageOneLayout, OO.ui.PageLayout );
1616  *     PageOneLayout.prototype.setupOutlineItem = function () {
1617  *         this.outlineItem.setLabel( 'Page One' );
1618  *     };
1619  *
1620  *     function PageTwoLayout( name, config ) {
1621  *         PageTwoLayout.parent.call( this, name, config );
1622  *         this.$element.append( '<p>Second page</p>' );
1623  *     }
1624  *     OO.inheritClass( PageTwoLayout, OO.ui.PageLayout );
1625  *     PageTwoLayout.prototype.setupOutlineItem = function () {
1626  *         this.outlineItem.setLabel( 'Page Two' );
1627  *     };
1628  *
1629  *     var page1 = new PageOneLayout( 'one' ),
1630  *         page2 = new PageTwoLayout( 'two' );
1631  *
1632  *     var booklet = new OO.ui.BookletLayout( {
1633  *         outlined: true
1634  *     } );
1635  *
1636  *     booklet.addPages ( [ page1, page2 ] );
1637  *     $( 'body' ).append( booklet.$element );
1638  *
1639  * @class
1640  * @extends OO.ui.MenuLayout
1641  *
1642  * @constructor
1643  * @param {Object} [config] Configuration options
1644  * @cfg {boolean} [continuous=false] Show all pages, one after another
1645  * @cfg {boolean} [autoFocus=true] Focus on the first focusable element when a new page is displayed.
1646  * @cfg {boolean} [outlined=false] Show the outline. The outline is used to navigate through the pages of the booklet.
1647  * @cfg {boolean} [editable=false] Show controls for adding, removing and reordering pages
1648  */
1649 OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
1650         // Configuration initialization
1651         config = config || {};
1652
1653         // Parent constructor
1654         OO.ui.BookletLayout.parent.call( this, config );
1655
1656         // Properties
1657         this.currentPageName = null;
1658         this.pages = {};
1659         this.ignoreFocus = false;
1660         this.stackLayout = new OO.ui.StackLayout( { continuous: !!config.continuous } );
1661         this.$content.append( this.stackLayout.$element );
1662         this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
1663         this.outlineVisible = false;
1664         this.outlined = !!config.outlined;
1665         if ( this.outlined ) {
1666                 this.editable = !!config.editable;
1667                 this.outlineControlsWidget = null;
1668                 this.outlineSelectWidget = new OO.ui.OutlineSelectWidget();
1669                 this.outlinePanel = new OO.ui.PanelLayout( { scrollable: true } );
1670                 this.$menu.append( this.outlinePanel.$element );
1671                 this.outlineVisible = true;
1672                 if ( this.editable ) {
1673                         this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
1674                                 this.outlineSelectWidget
1675                         );
1676                 }
1677         }
1678         this.toggleMenu( this.outlined );
1679
1680         // Events
1681         this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
1682         if ( this.outlined ) {
1683                 this.outlineSelectWidget.connect( this, { select: 'onOutlineSelectWidgetSelect' } );
1684                 this.scrolling = false;
1685                 this.stackLayout.connect( this, { visibleItemChange: 'onStackLayoutVisibleItemChange' } );
1686         }
1687         if ( this.autoFocus ) {
1688                 // Event 'focus' does not bubble, but 'focusin' does
1689                 this.stackLayout.$element.on( 'focusin', this.onStackLayoutFocus.bind( this ) );
1690         }
1691
1692         // Initialization
1693         this.$element.addClass( 'oo-ui-bookletLayout' );
1694         this.stackLayout.$element.addClass( 'oo-ui-bookletLayout-stackLayout' );
1695         if ( this.outlined ) {
1696                 this.outlinePanel.$element
1697                         .addClass( 'oo-ui-bookletLayout-outlinePanel' )
1698                         .append( this.outlineSelectWidget.$element );
1699                 if ( this.editable ) {
1700                         this.outlinePanel.$element
1701                                 .addClass( 'oo-ui-bookletLayout-outlinePanel-editable' )
1702                                 .append( this.outlineControlsWidget.$element );
1703                 }
1704         }
1705 };
1706
1707 /* Setup */
1708
1709 OO.inheritClass( OO.ui.BookletLayout, OO.ui.MenuLayout );
1710
1711 /* Events */
1712
1713 /**
1714  * A 'set' event is emitted when a page is {@link #setPage set} to be displayed by the booklet layout.
1715  * @event set
1716  * @param {OO.ui.PageLayout} page Current page
1717  */
1718
1719 /**
1720  * An 'add' event is emitted when pages are {@link #addPages added} to the booklet layout.
1721  *
1722  * @event add
1723  * @param {OO.ui.PageLayout[]} page Added pages
1724  * @param {number} index Index pages were added at
1725  */
1726
1727 /**
1728  * A 'remove' event is emitted when pages are {@link #clearPages cleared} or
1729  * {@link #removePages removed} from the booklet.
1730  *
1731  * @event remove
1732  * @param {OO.ui.PageLayout[]} pages Removed pages
1733  */
1734
1735 /* Methods */
1736
1737 /**
1738  * Handle stack layout focus.
1739  *
1740  * @private
1741  * @param {jQuery.Event} e Focusin event
1742  */
1743 OO.ui.BookletLayout.prototype.onStackLayoutFocus = function ( e ) {
1744         var name, $target;
1745
1746         // Find the page that an element was focused within
1747         $target = $( e.target ).closest( '.oo-ui-pageLayout' );
1748         for ( name in this.pages ) {
1749                 // Check for page match, exclude current page to find only page changes
1750                 if ( this.pages[ name ].$element[ 0 ] === $target[ 0 ] && name !== this.currentPageName ) {
1751                         this.setPage( name );
1752                         break;
1753                 }
1754         }
1755 };
1756
1757 /**
1758  * Handle visibleItemChange events from the stackLayout
1759  *
1760  * The next visible page is set as the current page by selecting it
1761  * in the outline
1762  *
1763  * @param {OO.ui.PageLayout} page The next visible page in the layout
1764  */
1765 OO.ui.BookletLayout.prototype.onStackLayoutVisibleItemChange = function ( page ) {
1766         // Set a flag to so that the resulting call to #onStackLayoutSet doesn't
1767         // try and scroll the item into view again.
1768         this.scrolling = true;
1769         this.outlineSelectWidget.selectItemByData( page.getName() );
1770         this.scrolling = false;
1771 };
1772
1773 /**
1774  * Handle stack layout set events.
1775  *
1776  * @private
1777  * @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
1778  */
1779 OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
1780         var layout = this;
1781         if ( !this.scrolling && page ) {
1782                 page.scrollElementIntoView( {
1783                         complete: function () {
1784                                 if ( layout.autoFocus ) {
1785                                         layout.focus();
1786                                 }
1787                         }
1788                 } );
1789         }
1790 };
1791
1792 /**
1793  * Focus the first input in the current page.
1794  *
1795  * If no page is selected, the first selectable page will be selected.
1796  * If the focus is already in an element on the current page, nothing will happen.
1797  *
1798  * @param {number} [itemIndex] A specific item to focus on
1799  */
1800 OO.ui.BookletLayout.prototype.focus = function ( itemIndex ) {
1801         var page,
1802                 items = this.stackLayout.getItems();
1803
1804         if ( itemIndex !== undefined && items[ itemIndex ] ) {
1805                 page = items[ itemIndex ];
1806         } else {
1807                 page = this.stackLayout.getCurrentItem();
1808         }
1809
1810         if ( !page && this.outlined ) {
1811                 this.selectFirstSelectablePage();
1812                 page = this.stackLayout.getCurrentItem();
1813         }
1814         if ( !page ) {
1815                 return;
1816         }
1817         // Only change the focus if is not already in the current page
1818         if ( !OO.ui.contains( page.$element[ 0 ], this.getElementDocument().activeElement, true ) ) {
1819                 page.focus();
1820         }
1821 };
1822
1823 /**
1824  * Find the first focusable input in the booklet layout and focus
1825  * on it.
1826  */
1827 OO.ui.BookletLayout.prototype.focusFirstFocusable = function () {
1828         OO.ui.findFocusable( this.stackLayout.$element ).focus();
1829 };
1830
1831 /**
1832  * Handle outline widget select events.
1833  *
1834  * @private
1835  * @param {OO.ui.OptionWidget|null} item Selected item
1836  */
1837 OO.ui.BookletLayout.prototype.onOutlineSelectWidgetSelect = function ( item ) {
1838         if ( item ) {
1839                 this.setPage( item.getData() );
1840         }
1841 };
1842
1843 /**
1844  * Check if booklet has an outline.
1845  *
1846  * @return {boolean} Booklet has an outline
1847  */
1848 OO.ui.BookletLayout.prototype.isOutlined = function () {
1849         return this.outlined;
1850 };
1851
1852 /**
1853  * Check if booklet has editing controls.
1854  *
1855  * @return {boolean} Booklet is editable
1856  */
1857 OO.ui.BookletLayout.prototype.isEditable = function () {
1858         return this.editable;
1859 };
1860
1861 /**
1862  * Check if booklet has a visible outline.
1863  *
1864  * @return {boolean} Outline is visible
1865  */
1866 OO.ui.BookletLayout.prototype.isOutlineVisible = function () {
1867         return this.outlined && this.outlineVisible;
1868 };
1869
1870 /**
1871  * Hide or show the outline.
1872  *
1873  * @param {boolean} [show] Show outline, omit to invert current state
1874  * @chainable
1875  */
1876 OO.ui.BookletLayout.prototype.toggleOutline = function ( show ) {
1877         if ( this.outlined ) {
1878                 show = show === undefined ? !this.outlineVisible : !!show;
1879                 this.outlineVisible = show;
1880                 this.toggleMenu( show );
1881         }
1882
1883         return this;
1884 };
1885
1886 /**
1887  * Get the page closest to the specified page.
1888  *
1889  * @param {OO.ui.PageLayout} page Page to use as a reference point
1890  * @return {OO.ui.PageLayout|null} Page closest to the specified page
1891  */
1892 OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
1893         var next, prev, level,
1894                 pages = this.stackLayout.getItems(),
1895                 index = pages.indexOf( page );
1896
1897         if ( index !== -1 ) {
1898                 next = pages[ index + 1 ];
1899                 prev = pages[ index - 1 ];
1900                 // Prefer adjacent pages at the same level
1901                 if ( this.outlined ) {
1902                         level = this.outlineSelectWidget.getItemFromData( page.getName() ).getLevel();
1903                         if (
1904                                 prev &&
1905                                 level === this.outlineSelectWidget.getItemFromData( prev.getName() ).getLevel()
1906                         ) {
1907                                 return prev;
1908                         }
1909                         if (
1910                                 next &&
1911                                 level === this.outlineSelectWidget.getItemFromData( next.getName() ).getLevel()
1912                         ) {
1913                                 return next;
1914                         }
1915                 }
1916         }
1917         return prev || next || null;
1918 };
1919
1920 /**
1921  * Get the outline widget.
1922  *
1923  * If the booklet is not outlined, the method will return `null`.
1924  *
1925  * @return {OO.ui.OutlineSelectWidget|null} Outline widget, or null if the booklet is not outlined
1926  */
1927 OO.ui.BookletLayout.prototype.getOutline = function () {
1928         return this.outlineSelectWidget;
1929 };
1930
1931 /**
1932  * Get the outline controls widget.
1933  *
1934  * If the outline is not editable, the method will return `null`.
1935  *
1936  * @return {OO.ui.OutlineControlsWidget|null} The outline controls widget.
1937  */
1938 OO.ui.BookletLayout.prototype.getOutlineControls = function () {
1939         return this.outlineControlsWidget;
1940 };
1941
1942 /**
1943  * Get a page by its symbolic name.
1944  *
1945  * @param {string} name Symbolic name of page
1946  * @return {OO.ui.PageLayout|undefined} Page, if found
1947  */
1948 OO.ui.BookletLayout.prototype.getPage = function ( name ) {
1949         return this.pages[ name ];
1950 };
1951
1952 /**
1953  * Get the current page.
1954  *
1955  * @return {OO.ui.PageLayout|undefined} Current page, if found
1956  */
1957 OO.ui.BookletLayout.prototype.getCurrentPage = function () {
1958         var name = this.getCurrentPageName();
1959         return name ? this.getPage( name ) : undefined;
1960 };
1961
1962 /**
1963  * Get the symbolic name of the current page.
1964  *
1965  * @return {string|null} Symbolic name of the current page
1966  */
1967 OO.ui.BookletLayout.prototype.getCurrentPageName = function () {
1968         return this.currentPageName;
1969 };
1970
1971 /**
1972  * Add pages to the booklet layout
1973  *
1974  * When pages are added with the same names as existing pages, the existing pages will be
1975  * automatically removed before the new pages are added.
1976  *
1977  * @param {OO.ui.PageLayout[]} pages Pages to add
1978  * @param {number} index Index of the insertion point
1979  * @fires add
1980  * @chainable
1981  */
1982 OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) {
1983         var i, len, name, page, item, currentIndex,
1984                 stackLayoutPages = this.stackLayout.getItems(),
1985                 remove = [],
1986                 items = [];
1987
1988         // Remove pages with same names
1989         for ( i = 0, len = pages.length; i < len; i++ ) {
1990                 page = pages[ i ];
1991                 name = page.getName();
1992
1993                 if ( Object.prototype.hasOwnProperty.call( this.pages, name ) ) {
1994                         // Correct the insertion index
1995                         currentIndex = stackLayoutPages.indexOf( this.pages[ name ] );
1996                         if ( currentIndex !== -1 && currentIndex + 1 < index ) {
1997                                 index--;
1998                         }
1999                         remove.push( this.pages[ name ] );
2000                 }
2001         }
2002         if ( remove.length ) {
2003                 this.removePages( remove );
2004         }
2005
2006         // Add new pages
2007         for ( i = 0, len = pages.length; i < len; i++ ) {
2008                 page = pages[ i ];
2009                 name = page.getName();
2010                 this.pages[ page.getName() ] = page;
2011                 if ( this.outlined ) {
2012                         item = new OO.ui.OutlineOptionWidget( { data: name } );
2013                         page.setOutlineItem( item );
2014                         items.push( item );
2015                 }
2016         }
2017
2018         if ( this.outlined && items.length ) {
2019                 this.outlineSelectWidget.addItems( items, index );
2020                 this.selectFirstSelectablePage();
2021         }
2022         this.stackLayout.addItems( pages, index );
2023         this.emit( 'add', pages, index );
2024
2025         return this;
2026 };
2027
2028 /**
2029  * Remove the specified pages from the booklet layout.
2030  *
2031  * To remove all pages from the booklet, you may wish to use the #clearPages method instead.
2032  *
2033  * @param {OO.ui.PageLayout[]} pages An array of pages to remove
2034  * @fires remove
2035  * @chainable
2036  */
2037 OO.ui.BookletLayout.prototype.removePages = function ( pages ) {
2038         var i, len, name, page,
2039                 items = [];
2040
2041         for ( i = 0, len = pages.length; i < len; i++ ) {
2042                 page = pages[ i ];
2043                 name = page.getName();
2044                 delete this.pages[ name ];
2045                 if ( this.outlined ) {
2046                         items.push( this.outlineSelectWidget.getItemFromData( name ) );
2047                         page.setOutlineItem( null );
2048                 }
2049         }
2050         if ( this.outlined && items.length ) {
2051                 this.outlineSelectWidget.removeItems( items );
2052                 this.selectFirstSelectablePage();
2053         }
2054         this.stackLayout.removeItems( pages );
2055         this.emit( 'remove', pages );
2056
2057         return this;
2058 };
2059
2060 /**
2061  * Clear all pages from the booklet layout.
2062  *
2063  * To remove only a subset of pages from the booklet, use the #removePages method.
2064  *
2065  * @fires remove
2066  * @chainable
2067  */
2068 OO.ui.BookletLayout.prototype.clearPages = function () {
2069         var i, len,
2070                 pages = this.stackLayout.getItems();
2071
2072         this.pages = {};
2073         this.currentPageName = null;
2074         if ( this.outlined ) {
2075                 this.outlineSelectWidget.clearItems();
2076                 for ( i = 0, len = pages.length; i < len; i++ ) {
2077                         pages[ i ].setOutlineItem( null );
2078                 }
2079         }
2080         this.stackLayout.clearItems();
2081
2082         this.emit( 'remove', pages );
2083
2084         return this;
2085 };
2086
2087 /**
2088  * Set the current page by symbolic name.
2089  *
2090  * @fires set
2091  * @param {string} name Symbolic name of page
2092  */
2093 OO.ui.BookletLayout.prototype.setPage = function ( name ) {
2094         var selectedItem,
2095                 $focused,
2096                 page = this.pages[ name ],
2097                 previousPage = this.currentPageName && this.pages[ this.currentPageName ];
2098
2099         if ( name !== this.currentPageName ) {
2100                 if ( this.outlined ) {
2101                         selectedItem = this.outlineSelectWidget.getSelectedItem();
2102                         if ( selectedItem && selectedItem.getData() !== name ) {
2103                                 this.outlineSelectWidget.selectItemByData( name );
2104                         }
2105                 }
2106                 if ( page ) {
2107                         if ( previousPage ) {
2108                                 previousPage.setActive( false );
2109                                 // Blur anything focused if the next page doesn't have anything focusable.
2110                                 // This is not needed if the next page has something focusable (because once it is focused
2111                                 // this blur happens automatically). If the layout is non-continuous, this check is
2112                                 // meaningless because the next page is not visible yet and thus can't hold focus.
2113                                 if (
2114                                         this.autoFocus &&
2115                                         this.stackLayout.continuous &&
2116                                         OO.ui.findFocusable( page.$element ).length !== 0
2117                                 ) {
2118                                         $focused = previousPage.$element.find( ':focus' );
2119                                         if ( $focused.length ) {
2120                                                 $focused[ 0 ].blur();
2121                                         }
2122                                 }
2123                         }
2124                         this.currentPageName = name;
2125                         page.setActive( true );
2126                         this.stackLayout.setItem( page );
2127                         if ( !this.stackLayout.continuous && previousPage ) {
2128                                 // This should not be necessary, since any inputs on the previous page should have been
2129                                 // blurred when it was hidden, but browsers are not very consistent about this.
2130                                 $focused = previousPage.$element.find( ':focus' );
2131                                 if ( $focused.length ) {
2132                                         $focused[ 0 ].blur();
2133                                 }
2134                         }
2135                         this.emit( 'set', page );
2136                 }
2137         }
2138 };
2139
2140 /**
2141  * Select the first selectable page.
2142  *
2143  * @chainable
2144  */
2145 OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
2146         if ( !this.outlineSelectWidget.getSelectedItem() ) {
2147                 this.outlineSelectWidget.selectItem( this.outlineSelectWidget.getFirstSelectableItem() );
2148         }
2149
2150         return this;
2151 };
2152
2153 /**
2154  * IndexLayouts contain {@link OO.ui.CardLayout card layouts} as well as
2155  * {@link OO.ui.TabSelectWidget tabs} that allow users to easily navigate through the cards and
2156  * select which one to display. By default, only one card is displayed at a time. When a user
2157  * navigates to a new card, the index layout automatically focuses on the first focusable element,
2158  * unless the default setting is changed.
2159  *
2160  * TODO: This class is similar to BookletLayout, we may want to refactor to reduce duplication
2161  *
2162  *     @example
2163  *     // Example of a IndexLayout that contains two CardLayouts.
2164  *
2165  *     function CardOneLayout( name, config ) {
2166  *         CardOneLayout.parent.call( this, name, config );
2167  *         this.$element.append( '<p>First card</p>' );
2168  *     }
2169  *     OO.inheritClass( CardOneLayout, OO.ui.CardLayout );
2170  *     CardOneLayout.prototype.setupTabItem = function () {
2171  *         this.tabItem.setLabel( 'Card one' );
2172  *     };
2173  *
2174  *     var card1 = new CardOneLayout( 'one' ),
2175  *         card2 = new OO.ui.CardLayout( 'two', { label: 'Card two' } );
2176  *
2177  *     card2.$element.append( '<p>Second card</p>' );
2178  *
2179  *     var index = new OO.ui.IndexLayout();
2180  *
2181  *     index.addCards ( [ card1, card2 ] );
2182  *     $( 'body' ).append( index.$element );
2183  *
2184  * @class
2185  * @extends OO.ui.MenuLayout
2186  *
2187  * @constructor
2188  * @param {Object} [config] Configuration options
2189  * @cfg {boolean} [continuous=false] Show all cards, one after another
2190  * @cfg {boolean} [expanded=true] Expand the content panel to fill the entire parent element.
2191  * @cfg {boolean} [autoFocus=true] Focus on the first focusable element when a new card is displayed.
2192  */
2193 OO.ui.IndexLayout = function OoUiIndexLayout( config ) {
2194         // Configuration initialization
2195         config = $.extend( {}, config, { menuPosition: 'top' } );
2196
2197         // Parent constructor
2198         OO.ui.IndexLayout.parent.call( this, config );
2199
2200         // Properties
2201         this.currentCardName = null;
2202         this.cards = {};
2203         this.ignoreFocus = false;
2204         this.stackLayout = new OO.ui.StackLayout( {
2205                 continuous: !!config.continuous,
2206                 expanded: config.expanded
2207         } );
2208         this.$content.append( this.stackLayout.$element );
2209         this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
2210
2211         this.tabSelectWidget = new OO.ui.TabSelectWidget();
2212         this.tabPanel = new OO.ui.PanelLayout();
2213         this.$menu.append( this.tabPanel.$element );
2214
2215         this.toggleMenu( true );
2216
2217         // Events
2218         this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
2219         this.tabSelectWidget.connect( this, { select: 'onTabSelectWidgetSelect' } );
2220         if ( this.autoFocus ) {
2221                 // Event 'focus' does not bubble, but 'focusin' does
2222                 this.stackLayout.$element.on( 'focusin', this.onStackLayoutFocus.bind( this ) );
2223         }
2224
2225         // Initialization
2226         this.$element.addClass( 'oo-ui-indexLayout' );
2227         this.stackLayout.$element.addClass( 'oo-ui-indexLayout-stackLayout' );
2228         this.tabPanel.$element
2229                 .addClass( 'oo-ui-indexLayout-tabPanel' )
2230                 .append( this.tabSelectWidget.$element );
2231 };
2232
2233 /* Setup */
2234
2235 OO.inheritClass( OO.ui.IndexLayout, OO.ui.MenuLayout );
2236
2237 /* Events */
2238
2239 /**
2240  * A 'set' event is emitted when a card is {@link #setCard set} to be displayed by the index layout.
2241  * @event set
2242  * @param {OO.ui.CardLayout} card Current card
2243  */
2244
2245 /**
2246  * An 'add' event is emitted when cards are {@link #addCards added} to the index layout.
2247  *
2248  * @event add
2249  * @param {OO.ui.CardLayout[]} card Added cards
2250  * @param {number} index Index cards were added at
2251  */
2252
2253 /**
2254  * A 'remove' event is emitted when cards are {@link #clearCards cleared} or
2255  * {@link #removeCards removed} from the index.
2256  *
2257  * @event remove
2258  * @param {OO.ui.CardLayout[]} cards Removed cards
2259  */
2260
2261 /* Methods */
2262
2263 /**
2264  * Handle stack layout focus.
2265  *
2266  * @private
2267  * @param {jQuery.Event} e Focusin event
2268  */
2269 OO.ui.IndexLayout.prototype.onStackLayoutFocus = function ( e ) {
2270         var name, $target;
2271
2272         // Find the card that an element was focused within
2273         $target = $( e.target ).closest( '.oo-ui-cardLayout' );
2274         for ( name in this.cards ) {
2275                 // Check for card match, exclude current card to find only card changes
2276                 if ( this.cards[ name ].$element[ 0 ] === $target[ 0 ] && name !== this.currentCardName ) {
2277                         this.setCard( name );
2278                         break;
2279                 }
2280         }
2281 };
2282
2283 /**
2284  * Handle stack layout set events.
2285  *
2286  * @private
2287  * @param {OO.ui.PanelLayout|null} card The card panel that is now the current panel
2288  */
2289 OO.ui.IndexLayout.prototype.onStackLayoutSet = function ( card ) {
2290         var layout = this;
2291         if ( card ) {
2292                 card.scrollElementIntoView( {
2293                         complete: function () {
2294                                 if ( layout.autoFocus ) {
2295                                         layout.focus();
2296                                 }
2297                         }
2298                 } );
2299         }
2300 };
2301
2302 /**
2303  * Focus the first input in the current card.
2304  *
2305  * If no card is selected, the first selectable card will be selected.
2306  * If the focus is already in an element on the current card, nothing will happen.
2307  *
2308  * @param {number} [itemIndex] A specific item to focus on
2309  */
2310 OO.ui.IndexLayout.prototype.focus = function ( itemIndex ) {
2311         var card,
2312                 items = this.stackLayout.getItems();
2313
2314         if ( itemIndex !== undefined && items[ itemIndex ] ) {
2315                 card = items[ itemIndex ];
2316         } else {
2317                 card = this.stackLayout.getCurrentItem();
2318         }
2319
2320         if ( !card ) {
2321                 this.selectFirstSelectableCard();
2322                 card = this.stackLayout.getCurrentItem();
2323         }
2324         if ( !card ) {
2325                 return;
2326         }
2327         // Only change the focus if is not already in the current page
2328         if ( !OO.ui.contains( card.$element[ 0 ], this.getElementDocument().activeElement, true ) ) {
2329                 card.focus();
2330         }
2331 };
2332
2333 /**
2334  * Find the first focusable input in the index layout and focus
2335  * on it.
2336  */
2337 OO.ui.IndexLayout.prototype.focusFirstFocusable = function () {
2338         OO.ui.findFocusable( this.stackLayout.$element ).focus();
2339 };
2340
2341 /**
2342  * Handle tab widget select events.
2343  *
2344  * @private
2345  * @param {OO.ui.OptionWidget|null} item Selected item
2346  */
2347 OO.ui.IndexLayout.prototype.onTabSelectWidgetSelect = function ( item ) {
2348         if ( item ) {
2349                 this.setCard( item.getData() );
2350         }
2351 };
2352
2353 /**
2354  * Get the card closest to the specified card.
2355  *
2356  * @param {OO.ui.CardLayout} card Card to use as a reference point
2357  * @return {OO.ui.CardLayout|null} Card closest to the specified card
2358  */
2359 OO.ui.IndexLayout.prototype.getClosestCard = function ( card ) {
2360         var next, prev, level,
2361                 cards = this.stackLayout.getItems(),
2362                 index = cards.indexOf( card );
2363
2364         if ( index !== -1 ) {
2365                 next = cards[ index + 1 ];
2366                 prev = cards[ index - 1 ];
2367                 // Prefer adjacent cards at the same level
2368                 level = this.tabSelectWidget.getItemFromData( card.getName() ).getLevel();
2369                 if (
2370                         prev &&
2371                         level === this.tabSelectWidget.getItemFromData( prev.getName() ).getLevel()
2372                 ) {
2373                         return prev;
2374                 }
2375                 if (
2376                         next &&
2377                         level === this.tabSelectWidget.getItemFromData( next.getName() ).getLevel()
2378                 ) {
2379                         return next;
2380                 }
2381         }
2382         return prev || next || null;
2383 };
2384
2385 /**
2386  * Get the tabs widget.
2387  *
2388  * @return {OO.ui.TabSelectWidget} Tabs widget
2389  */
2390 OO.ui.IndexLayout.prototype.getTabs = function () {
2391         return this.tabSelectWidget;
2392 };
2393
2394 /**
2395  * Get a card by its symbolic name.
2396  *
2397  * @param {string} name Symbolic name of card
2398  * @return {OO.ui.CardLayout|undefined} Card, if found
2399  */
2400 OO.ui.IndexLayout.prototype.getCard = function ( name ) {
2401         return this.cards[ name ];
2402 };
2403
2404 /**
2405  * Get the current card.
2406  *
2407  * @return {OO.ui.CardLayout|undefined} Current card, if found
2408  */
2409 OO.ui.IndexLayout.prototype.getCurrentCard = function () {
2410         var name = this.getCurrentCardName();
2411         return name ? this.getCard( name ) : undefined;
2412 };
2413
2414 /**
2415  * Get the symbolic name of the current card.
2416  *
2417  * @return {string|null} Symbolic name of the current card
2418  */
2419 OO.ui.IndexLayout.prototype.getCurrentCardName = function () {
2420         return this.currentCardName;
2421 };
2422
2423 /**
2424  * Add cards to the index layout
2425  *
2426  * When cards are added with the same names as existing cards, the existing cards will be
2427  * automatically removed before the new cards are added.
2428  *
2429  * @param {OO.ui.CardLayout[]} cards Cards to add
2430  * @param {number} index Index of the insertion point
2431  * @fires add
2432  * @chainable
2433  */
2434 OO.ui.IndexLayout.prototype.addCards = function ( cards, index ) {
2435         var i, len, name, card, item, currentIndex,
2436                 stackLayoutCards = this.stackLayout.getItems(),
2437                 remove = [],
2438                 items = [];
2439
2440         // Remove cards with same names
2441         for ( i = 0, len = cards.length; i < len; i++ ) {
2442                 card = cards[ i ];
2443                 name = card.getName();
2444
2445                 if ( Object.prototype.hasOwnProperty.call( this.cards, name ) ) {
2446                         // Correct the insertion index
2447                         currentIndex = stackLayoutCards.indexOf( this.cards[ name ] );
2448                         if ( currentIndex !== -1 && currentIndex + 1 < index ) {
2449                                 index--;
2450                         }
2451                         remove.push( this.cards[ name ] );
2452                 }
2453         }
2454         if ( remove.length ) {
2455                 this.removeCards( remove );
2456         }
2457
2458         // Add new cards
2459         for ( i = 0, len = cards.length; i < len; i++ ) {
2460                 card = cards[ i ];
2461                 name = card.getName();
2462                 this.cards[ card.getName() ] = card;
2463                 item = new OO.ui.TabOptionWidget( { data: name } );
2464                 card.setTabItem( item );
2465                 items.push( item );
2466         }
2467
2468         if ( items.length ) {
2469                 this.tabSelectWidget.addItems( items, index );
2470                 this.selectFirstSelectableCard();
2471         }
2472         this.stackLayout.addItems( cards, index );
2473         this.emit( 'add', cards, index );
2474
2475         return this;
2476 };
2477
2478 /**
2479  * Remove the specified cards from the index layout.
2480  *
2481  * To remove all cards from the index, you may wish to use the #clearCards method instead.
2482  *
2483  * @param {OO.ui.CardLayout[]} cards An array of cards to remove
2484  * @fires remove
2485  * @chainable
2486  */
2487 OO.ui.IndexLayout.prototype.removeCards = function ( cards ) {
2488         var i, len, name, card,
2489                 items = [];
2490
2491         for ( i = 0, len = cards.length; i < len; i++ ) {
2492                 card = cards[ i ];
2493                 name = card.getName();
2494                 delete this.cards[ name ];
2495                 items.push( this.tabSelectWidget.getItemFromData( name ) );
2496                 card.setTabItem( null );
2497         }
2498         if ( items.length ) {
2499                 this.tabSelectWidget.removeItems( items );
2500                 this.selectFirstSelectableCard();
2501         }
2502         this.stackLayout.removeItems( cards );
2503         this.emit( 'remove', cards );
2504
2505         return this;
2506 };
2507
2508 /**
2509  * Clear all cards from the index layout.
2510  *
2511  * To remove only a subset of cards from the index, use the #removeCards method.
2512  *
2513  * @fires remove
2514  * @chainable
2515  */
2516 OO.ui.IndexLayout.prototype.clearCards = function () {
2517         var i, len,
2518                 cards = this.stackLayout.getItems();
2519
2520         this.cards = {};
2521         this.currentCardName = null;
2522         this.tabSelectWidget.clearItems();
2523         for ( i = 0, len = cards.length; i < len; i++ ) {
2524                 cards[ i ].setTabItem( null );
2525         }
2526         this.stackLayout.clearItems();
2527
2528         this.emit( 'remove', cards );
2529
2530         return this;
2531 };
2532
2533 /**
2534  * Set the current card by symbolic name.
2535  *
2536  * @fires set
2537  * @param {string} name Symbolic name of card
2538  */
2539 OO.ui.IndexLayout.prototype.setCard = function ( name ) {
2540         var selectedItem,
2541                 $focused,
2542                 card = this.cards[ name ],
2543                 previousCard = this.currentCardName && this.cards[ this.currentCardName ];
2544
2545         if ( name !== this.currentCardName ) {
2546                 selectedItem = this.tabSelectWidget.getSelectedItem();
2547                 if ( selectedItem && selectedItem.getData() !== name ) {
2548                         this.tabSelectWidget.selectItemByData( name );
2549                 }
2550                 if ( card ) {
2551                         if ( previousCard ) {
2552                                 previousCard.setActive( false );
2553                                 // Blur anything focused if the next card doesn't have anything focusable.
2554                                 // This is not needed if the next card has something focusable (because once it is focused
2555                                 // this blur happens automatically). If the layout is non-continuous, this check is
2556                                 // meaningless because the next card is not visible yet and thus can't hold focus.
2557                                 if (
2558                                         this.autoFocus &&
2559                                         this.stackLayout.continuous &&
2560                                         OO.ui.findFocusable( card.$element ).length !== 0
2561                                 ) {
2562                                         $focused = previousCard.$element.find( ':focus' );
2563                                         if ( $focused.length ) {
2564                                                 $focused[ 0 ].blur();
2565                                         }
2566                                 }
2567                         }
2568                         this.currentCardName = name;
2569                         card.setActive( true );
2570                         this.stackLayout.setItem( card );
2571                         if ( !this.stackLayout.continuous && previousCard ) {
2572                                 // This should not be necessary, since any inputs on the previous card should have been
2573                                 // blurred when it was hidden, but browsers are not very consistent about this.
2574                                 $focused = previousCard.$element.find( ':focus' );
2575                                 if ( $focused.length ) {
2576                                         $focused[ 0 ].blur();
2577                                 }
2578                         }
2579                         this.emit( 'set', card );
2580                 }
2581         }
2582 };
2583
2584 /**
2585  * Select the first selectable card.
2586  *
2587  * @chainable
2588  */
2589 OO.ui.IndexLayout.prototype.selectFirstSelectableCard = function () {
2590         if ( !this.tabSelectWidget.getSelectedItem() ) {
2591                 this.tabSelectWidget.selectItem( this.tabSelectWidget.getFirstSelectableItem() );
2592         }
2593
2594         return this;
2595 };
2596
2597 /**
2598  * ToggleWidget implements basic behavior of widgets with an on/off state.
2599  * Please see OO.ui.ToggleButtonWidget and OO.ui.ToggleSwitchWidget for examples.
2600  *
2601  * @abstract
2602  * @class
2603  * @extends OO.ui.Widget
2604  *
2605  * @constructor
2606  * @param {Object} [config] Configuration options
2607  * @cfg {boolean} [value=false] The toggle’s initial on/off state.
2608  *  By default, the toggle is in the 'off' state.
2609  */
2610 OO.ui.ToggleWidget = function OoUiToggleWidget( config ) {
2611         // Configuration initialization
2612         config = config || {};
2613
2614         // Parent constructor
2615         OO.ui.ToggleWidget.parent.call( this, config );
2616
2617         // Properties
2618         this.value = null;
2619
2620         // Initialization
2621         this.$element.addClass( 'oo-ui-toggleWidget' );
2622         this.setValue( !!config.value );
2623 };
2624
2625 /* Setup */
2626
2627 OO.inheritClass( OO.ui.ToggleWidget, OO.ui.Widget );
2628
2629 /* Events */
2630
2631 /**
2632  * @event change
2633  *
2634  * A change event is emitted when the on/off state of the toggle changes.
2635  *
2636  * @param {boolean} value Value representing the new state of the toggle
2637  */
2638
2639 /* Methods */
2640
2641 /**
2642  * Get the value representing the toggle’s state.
2643  *
2644  * @return {boolean} The on/off state of the toggle
2645  */
2646 OO.ui.ToggleWidget.prototype.getValue = function () {
2647         return this.value;
2648 };
2649
2650 /**
2651  * Set the state of the toggle: `true` for 'on', `false' for 'off'.
2652  *
2653  * @param {boolean} value The state of the toggle
2654  * @fires change
2655  * @chainable
2656  */
2657 OO.ui.ToggleWidget.prototype.setValue = function ( value ) {
2658         value = !!value;
2659         if ( this.value !== value ) {
2660                 this.value = value;
2661                 this.emit( 'change', value );
2662                 this.$element.toggleClass( 'oo-ui-toggleWidget-on', value );
2663                 this.$element.toggleClass( 'oo-ui-toggleWidget-off', !value );
2664                 this.$element.attr( 'aria-checked', value.toString() );
2665         }
2666         return this;
2667 };
2668
2669 /**
2670  * ToggleButtons are buttons that have a state (‘on’ or ‘off’) that is represented by a
2671  * Boolean value. Like other {@link OO.ui.ButtonWidget buttons}, toggle buttons can be
2672  * configured with {@link OO.ui.mixin.IconElement icons}, {@link OO.ui.mixin.IndicatorElement indicators},
2673  * {@link OO.ui.mixin.TitledElement titles}, {@link OO.ui.mixin.FlaggedElement styling flags},
2674  * and {@link OO.ui.mixin.LabelElement labels}. Please see
2675  * the [OOjs UI documentation][1] on MediaWiki for more information.
2676  *
2677  *     @example
2678  *     // Toggle buttons in the 'off' and 'on' state.
2679  *     var toggleButton1 = new OO.ui.ToggleButtonWidget( {
2680  *         label: 'Toggle Button off'
2681  *     } );
2682  *     var toggleButton2 = new OO.ui.ToggleButtonWidget( {
2683  *         label: 'Toggle Button on',
2684  *         value: true
2685  *     } );
2686  *     // Append the buttons to the DOM.
2687  *     $( 'body' ).append( toggleButton1.$element, toggleButton2.$element );
2688  *
2689  * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Buttons_and_Switches#Toggle_buttons
2690  *
2691  * @class
2692  * @extends OO.ui.ToggleWidget
2693  * @mixins OO.ui.mixin.ButtonElement
2694  * @mixins OO.ui.mixin.IconElement
2695  * @mixins OO.ui.mixin.IndicatorElement
2696  * @mixins OO.ui.mixin.LabelElement
2697  * @mixins OO.ui.mixin.TitledElement
2698  * @mixins OO.ui.mixin.FlaggedElement
2699  * @mixins OO.ui.mixin.TabIndexedElement
2700  *
2701  * @constructor
2702  * @param {Object} [config] Configuration options
2703  * @cfg {boolean} [value=false] The toggle button’s initial on/off
2704  *  state. By default, the button is in the 'off' state.
2705  */
2706 OO.ui.ToggleButtonWidget = function OoUiToggleButtonWidget( config ) {
2707         // Configuration initialization
2708         config = config || {};
2709
2710         // Parent constructor
2711         OO.ui.ToggleButtonWidget.parent.call( this, config );
2712
2713         // Mixin constructors
2714         OO.ui.mixin.ButtonElement.call( this, $.extend( {}, config, { active: this.active } ) );
2715         OO.ui.mixin.IconElement.call( this, config );
2716         OO.ui.mixin.IndicatorElement.call( this, config );
2717         OO.ui.mixin.LabelElement.call( this, config );
2718         OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled: this.$button } ) );
2719         OO.ui.mixin.FlaggedElement.call( this, config );
2720         OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, { $tabIndexed: this.$button } ) );
2721
2722         // Events
2723         this.connect( this, { click: 'onAction' } );
2724
2725         // Initialization
2726         this.$button.append( this.$icon, this.$label, this.$indicator );
2727         this.$element
2728                 .addClass( 'oo-ui-toggleButtonWidget' )
2729                 .append( this.$button );
2730 };
2731
2732 /* Setup */
2733
2734 OO.inheritClass( OO.ui.ToggleButtonWidget, OO.ui.ToggleWidget );
2735 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.ButtonElement );
2736 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.IconElement );
2737 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.IndicatorElement );
2738 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.LabelElement );
2739 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.TitledElement );
2740 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.FlaggedElement );
2741 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.mixin.TabIndexedElement );
2742
2743 /* Methods */
2744
2745 /**
2746  * Handle the button action being triggered.
2747  *
2748  * @private
2749  */
2750 OO.ui.ToggleButtonWidget.prototype.onAction = function () {
2751         this.setValue( !this.value );
2752 };
2753
2754 /**
2755  * @inheritdoc
2756  */
2757 OO.ui.ToggleButtonWidget.prototype.setValue = function ( value ) {
2758         value = !!value;
2759         if ( value !== this.value ) {
2760                 // Might be called from parent constructor before ButtonElement constructor
2761                 if ( this.$button ) {
2762                         this.$button.attr( 'aria-pressed', value.toString() );
2763                 }
2764                 this.setActive( value );
2765         }
2766
2767         // Parent method
2768         OO.ui.ToggleButtonWidget.parent.prototype.setValue.call( this, value );
2769
2770         return this;
2771 };
2772
2773 /**
2774  * @inheritdoc
2775  */
2776 OO.ui.ToggleButtonWidget.prototype.setButtonElement = function ( $button ) {
2777         if ( this.$button ) {
2778                 this.$button.removeAttr( 'aria-pressed' );
2779         }
2780         OO.ui.mixin.ButtonElement.prototype.setButtonElement.call( this, $button );
2781         this.$button.attr( 'aria-pressed', this.value.toString() );
2782 };
2783
2784 /**
2785  * ToggleSwitches are switches that slide on and off. Their state is represented by a Boolean
2786  * value (`true` for ‘on’, and `false` otherwise, the default). The ‘off’ state is represented
2787  * visually by a slider in the leftmost position.
2788  *
2789  *     @example
2790  *     // Toggle switches in the 'off' and 'on' position.
2791  *     var toggleSwitch1 = new OO.ui.ToggleSwitchWidget();
2792  *     var toggleSwitch2 = new OO.ui.ToggleSwitchWidget( {
2793  *         value: true
2794  *     } );
2795  *
2796  *     // Create a FieldsetLayout to layout and label switches
2797  *     var fieldset = new OO.ui.FieldsetLayout( {
2798  *        label: 'Toggle switches'
2799  *     } );
2800  *     fieldset.addItems( [
2801  *         new OO.ui.FieldLayout( toggleSwitch1, { label: 'Off', align: 'top' } ),
2802  *         new OO.ui.FieldLayout( toggleSwitch2, { label: 'On', align: 'top' } )
2803  *     ] );
2804  *     $( 'body' ).append( fieldset.$element );
2805  *
2806  * @class
2807  * @extends OO.ui.ToggleWidget
2808  * @mixins OO.ui.mixin.TabIndexedElement
2809  *
2810  * @constructor
2811  * @param {Object} [config] Configuration options
2812  * @cfg {boolean} [value=false] The toggle switch’s initial on/off state.
2813  *  By default, the toggle switch is in the 'off' position.
2814  */
2815 OO.ui.ToggleSwitchWidget = function OoUiToggleSwitchWidget( config ) {
2816         // Parent constructor
2817         OO.ui.ToggleSwitchWidget.parent.call( this, config );
2818
2819         // Mixin constructors
2820         OO.ui.mixin.TabIndexedElement.call( this, config );
2821
2822         // Properties
2823         this.dragging = false;
2824         this.dragStart = null;
2825         this.sliding = false;
2826         this.$glow = $( '<span>' );
2827         this.$grip = $( '<span>' );
2828
2829         // Events
2830         this.$element.on( {
2831                 click: this.onClick.bind( this ),
2832                 keypress: this.onKeyPress.bind( this )
2833         } );
2834
2835         // Initialization
2836         this.$glow.addClass( 'oo-ui-toggleSwitchWidget-glow' );
2837         this.$grip.addClass( 'oo-ui-toggleSwitchWidget-grip' );
2838         this.$element
2839                 .addClass( 'oo-ui-toggleSwitchWidget' )
2840                 .attr( 'role', 'checkbox' )
2841                 .append( this.$glow, this.$grip );
2842 };
2843
2844 /* Setup */
2845
2846 OO.inheritClass( OO.ui.ToggleSwitchWidget, OO.ui.ToggleWidget );
2847 OO.mixinClass( OO.ui.ToggleSwitchWidget, OO.ui.mixin.TabIndexedElement );
2848
2849 /* Methods */
2850
2851 /**
2852  * Handle mouse click events.
2853  *
2854  * @private
2855  * @param {jQuery.Event} e Mouse click event
2856  */
2857 OO.ui.ToggleSwitchWidget.prototype.onClick = function ( e ) {
2858         if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
2859                 this.setValue( !this.value );
2860         }
2861         return false;
2862 };
2863
2864 /**
2865  * Handle key press events.
2866  *
2867  * @private
2868  * @param {jQuery.Event} e Key press event
2869  */
2870 OO.ui.ToggleSwitchWidget.prototype.onKeyPress = function ( e ) {
2871         if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) {
2872                 this.setValue( !this.value );
2873                 return false;
2874         }
2875 };
2876
2877 /**
2878  * OutlineControlsWidget is a set of controls for an {@link OO.ui.OutlineSelectWidget outline select widget}.
2879  * Controls include moving items up and down, removing items, and adding different kinds of items.
2880  *
2881  * **Currently, this class is only used by {@link OO.ui.BookletLayout booklet layouts}.**
2882  *
2883  * @class
2884  * @extends OO.ui.Widget
2885  * @mixins OO.ui.mixin.GroupElement
2886  * @mixins OO.ui.mixin.IconElement
2887  *
2888  * @constructor
2889  * @param {OO.ui.OutlineSelectWidget} outline Outline to control
2890  * @param {Object} [config] Configuration options
2891  * @cfg {Object} [abilities] List of abilties
2892  * @cfg {boolean} [abilities.move=true] Allow moving movable items
2893  * @cfg {boolean} [abilities.remove=true] Allow removing removable items
2894  */
2895 OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) {
2896         // Allow passing positional parameters inside the config object
2897         if ( OO.isPlainObject( outline ) && config === undefined ) {
2898                 config = outline;
2899                 outline = config.outline;
2900         }
2901
2902         // Configuration initialization
2903         config = $.extend( { icon: 'add' }, config );
2904
2905         // Parent constructor
2906         OO.ui.OutlineControlsWidget.parent.call( this, config );
2907
2908         // Mixin constructors
2909         OO.ui.mixin.GroupElement.call( this, config );
2910         OO.ui.mixin.IconElement.call( this, config );
2911
2912         // Properties
2913         this.outline = outline;
2914         this.$movers = $( '<div>' );
2915         this.upButton = new OO.ui.ButtonWidget( {
2916                 framed: false,
2917                 icon: 'collapse',
2918                 title: OO.ui.msg( 'ooui-outline-control-move-up' )
2919         } );
2920         this.downButton = new OO.ui.ButtonWidget( {
2921                 framed: false,
2922                 icon: 'expand',
2923                 title: OO.ui.msg( 'ooui-outline-control-move-down' )
2924         } );
2925         this.removeButton = new OO.ui.ButtonWidget( {
2926                 framed: false,
2927                 icon: 'remove',
2928                 title: OO.ui.msg( 'ooui-outline-control-remove' )
2929         } );
2930         this.abilities = { move: true, remove: true };
2931
2932         // Events
2933         outline.connect( this, {
2934                 select: 'onOutlineChange',
2935                 add: 'onOutlineChange',
2936                 remove: 'onOutlineChange'
2937         } );
2938         this.upButton.connect( this, { click: [ 'emit', 'move', -1 ] } );
2939         this.downButton.connect( this, { click: [ 'emit', 'move', 1 ] } );
2940         this.removeButton.connect( this, { click: [ 'emit', 'remove' ] } );
2941
2942         // Initialization
2943         this.$element.addClass( 'oo-ui-outlineControlsWidget' );
2944         this.$group.addClass( 'oo-ui-outlineControlsWidget-items' );
2945         this.$movers
2946                 .addClass( 'oo-ui-outlineControlsWidget-movers' )
2947                 .append( this.removeButton.$element, this.upButton.$element, this.downButton.$element );
2948         this.$element.append( this.$icon, this.$group, this.$movers );
2949         this.setAbilities( config.abilities || {} );
2950 };
2951
2952 /* Setup */
2953
2954 OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget );
2955 OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.mixin.GroupElement );
2956 OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.mixin.IconElement );
2957
2958 /* Events */
2959
2960 /**
2961  * @event move
2962  * @param {number} places Number of places to move
2963  */
2964
2965 /**
2966  * @event remove
2967  */
2968
2969 /* Methods */
2970
2971 /**
2972  * Set abilities.
2973  *
2974  * @param {Object} abilities List of abilties
2975  * @param {boolean} [abilities.move] Allow moving movable items
2976  * @param {boolean} [abilities.remove] Allow removing removable items
2977  */
2978 OO.ui.OutlineControlsWidget.prototype.setAbilities = function ( abilities ) {
2979         var ability;
2980
2981         for ( ability in this.abilities ) {
2982                 if ( abilities[ ability ] !== undefined ) {
2983                         this.abilities[ ability ] = !!abilities[ ability ];
2984                 }
2985         }
2986
2987         this.onOutlineChange();
2988 };
2989
2990 /**
2991  * Handle outline change events.
2992  *
2993  * @private
2994  */
2995 OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () {
2996         var i, len, firstMovable, lastMovable,
2997                 items = this.outline.getItems(),
2998                 selectedItem = this.outline.getSelectedItem(),
2999                 movable = this.abilities.move && selectedItem && selectedItem.isMovable(),
3000                 removable = this.abilities.remove && selectedItem && selectedItem.isRemovable();
3001
3002         if ( movable ) {
3003                 i = -1;
3004                 len = items.length;
3005                 while ( ++i < len ) {
3006                         if ( items[ i ].isMovable() ) {
3007                                 firstMovable = items[ i ];
3008                                 break;
3009                         }
3010                 }
3011                 i = len;
3012                 while ( i-- ) {
3013                         if ( items[ i ].isMovable() ) {
3014                                 lastMovable = items[ i ];
3015                                 break;
3016                         }
3017                 }
3018         }
3019         this.upButton.setDisabled( !movable || selectedItem === firstMovable );
3020         this.downButton.setDisabled( !movable || selectedItem === lastMovable );
3021         this.removeButton.setDisabled( !removable );
3022 };
3023
3024 /**
3025  * OutlineOptionWidget is an item in an {@link OO.ui.OutlineSelectWidget OutlineSelectWidget}.
3026  *
3027  * Currently, this class is only used by {@link OO.ui.BookletLayout booklet layouts}, which contain
3028  * {@link OO.ui.PageLayout page layouts}. See {@link OO.ui.BookletLayout BookletLayout}
3029  * for an example.
3030  *
3031  * @class
3032  * @extends OO.ui.DecoratedOptionWidget
3033  *
3034  * @constructor
3035  * @param {Object} [config] Configuration options
3036  * @cfg {number} [level] Indentation level
3037  * @cfg {boolean} [movable] Allow modification from {@link OO.ui.OutlineControlsWidget outline controls}.
3038  */
3039 OO.ui.OutlineOptionWidget = function OoUiOutlineOptionWidget( config ) {
3040         // Configuration initialization
3041         config = config || {};
3042
3043         // Parent constructor
3044         OO.ui.OutlineOptionWidget.parent.call( this, config );
3045
3046         // Properties
3047         this.level = 0;
3048         this.movable = !!config.movable;
3049         this.removable = !!config.removable;
3050
3051         // Initialization
3052         this.$element.addClass( 'oo-ui-outlineOptionWidget' );
3053         this.setLevel( config.level );
3054 };
3055
3056 /* Setup */
3057
3058 OO.inheritClass( OO.ui.OutlineOptionWidget, OO.ui.DecoratedOptionWidget );
3059
3060 /* Static Properties */
3061
3062 OO.ui.OutlineOptionWidget.static.highlightable = true;
3063
3064 OO.ui.OutlineOptionWidget.static.scrollIntoViewOnSelect = true;
3065
3066 OO.ui.OutlineOptionWidget.static.levelClass = 'oo-ui-outlineOptionWidget-level-';
3067
3068 OO.ui.OutlineOptionWidget.static.levels = 3;
3069
3070 /* Methods */
3071
3072 /**
3073  * Check if item is movable.
3074  *
3075  * Movability is used by {@link OO.ui.OutlineControlsWidget outline controls}.
3076  *
3077  * @return {boolean} Item is movable
3078  */
3079 OO.ui.OutlineOptionWidget.prototype.isMovable = function () {
3080         return this.movable;
3081 };
3082
3083 /**
3084  * Check if item is removable.
3085  *
3086  * Removability is used by {@link OO.ui.OutlineControlsWidget outline controls}.
3087  *
3088  * @return {boolean} Item is removable
3089  */
3090 OO.ui.OutlineOptionWidget.prototype.isRemovable = function () {
3091         return this.removable;
3092 };
3093
3094 /**
3095  * Get indentation level.
3096  *
3097  * @return {number} Indentation level
3098  */
3099 OO.ui.OutlineOptionWidget.prototype.getLevel = function () {
3100         return this.level;
3101 };
3102
3103 /**
3104  * @inheritdoc
3105  */
3106 OO.ui.OutlineOptionWidget.prototype.setPressed = function ( state ) {
3107         OO.ui.OutlineOptionWidget.parent.prototype.setPressed.call( this, state );
3108         if ( this.pressed ) {
3109                 this.setFlags( 'progressive' );
3110         } else if ( !this.selected ) {
3111                 this.clearFlags();
3112         }
3113         return this;
3114 };
3115
3116 /**
3117  * Set movability.
3118  *
3119  * Movability is used by {@link OO.ui.OutlineControlsWidget outline controls}.
3120  *
3121  * @param {boolean} movable Item is movable
3122  * @chainable
3123  */
3124 OO.ui.OutlineOptionWidget.prototype.setMovable = function ( movable ) {
3125         this.movable = !!movable;
3126         this.updateThemeClasses();
3127         return this;
3128 };
3129
3130 /**
3131  * Set removability.
3132  *
3133  * Removability is used by {@link OO.ui.OutlineControlsWidget outline controls}.
3134  *
3135  * @param {boolean} removable Item is removable
3136  * @chainable
3137  */
3138 OO.ui.OutlineOptionWidget.prototype.setRemovable = function ( removable ) {
3139         this.removable = !!removable;
3140         this.updateThemeClasses();
3141         return this;
3142 };
3143
3144 /**
3145  * @inheritdoc
3146  */
3147 OO.ui.OutlineOptionWidget.prototype.setSelected = function ( state ) {
3148         OO.ui.OutlineOptionWidget.parent.prototype.setSelected.call( this, state );
3149         if ( this.selected ) {
3150                 this.setFlags( 'progressive' );
3151         } else {
3152                 this.clearFlags();
3153         }
3154         return this;
3155 };
3156
3157 /**
3158  * Set indentation level.
3159  *
3160  * @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
3161  * @chainable
3162  */
3163 OO.ui.OutlineOptionWidget.prototype.setLevel = function ( level ) {
3164         var levels = this.constructor.static.levels,
3165                 levelClass = this.constructor.static.levelClass,
3166                 i = levels;
3167
3168         this.level = level ? Math.max( 0, Math.min( levels - 1, level ) ) : 0;
3169         while ( i-- ) {
3170                 if ( this.level === i ) {
3171                         this.$element.addClass( levelClass + i );
3172                 } else {
3173                         this.$element.removeClass( levelClass + i );
3174                 }
3175         }
3176         this.updateThemeClasses();
3177
3178         return this;
3179 };
3180
3181 /**
3182  * OutlineSelectWidget is a structured list that contains {@link OO.ui.OutlineOptionWidget outline options}
3183  * A set of controls can be provided with an {@link OO.ui.OutlineControlsWidget outline controls} widget.
3184  *
3185  * **Currently, this class is only used by {@link OO.ui.BookletLayout booklet layouts}.**
3186  *
3187  * @class
3188  * @extends OO.ui.SelectWidget
3189  * @mixins OO.ui.mixin.TabIndexedElement
3190  *
3191  * @constructor
3192  * @param {Object} [config] Configuration options
3193  */
3194 OO.ui.OutlineSelectWidget = function OoUiOutlineSelectWidget( config ) {
3195         // Parent constructor
3196         OO.ui.OutlineSelectWidget.parent.call( this, config );
3197
3198         // Mixin constructors
3199         OO.ui.mixin.TabIndexedElement.call( this, config );
3200
3201         // Events
3202         this.$element.on( {
3203                 focus: this.bindKeyDownListener.bind( this ),
3204                 blur: this.unbindKeyDownListener.bind( this )
3205         } );
3206
3207         // Initialization
3208         this.$element.addClass( 'oo-ui-outlineSelectWidget' );
3209 };
3210
3211 /* Setup */
3212
3213 OO.inheritClass( OO.ui.OutlineSelectWidget, OO.ui.SelectWidget );
3214 OO.mixinClass( OO.ui.OutlineSelectWidget, OO.ui.mixin.TabIndexedElement );
3215
3216 /**
3217  * ButtonOptionWidget is a special type of {@link OO.ui.mixin.ButtonElement button element} that
3218  * can be selected and configured with data. The class is
3219  * used with OO.ui.ButtonSelectWidget to create a selection of button options. Please see the
3220  * [OOjs UI documentation on MediaWiki] [1] for more information.
3221  *
3222  * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Button_selects_and_options
3223  *
3224  * @class
3225  * @extends OO.ui.OptionWidget
3226  * @mixins OO.ui.mixin.ButtonElement
3227  * @mixins OO.ui.mixin.IconElement
3228  * @mixins OO.ui.mixin.IndicatorElement
3229  * @mixins OO.ui.mixin.TitledElement
3230  *
3231  * @constructor
3232  * @param {Object} [config] Configuration options
3233  */
3234 OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( config ) {
3235         // Configuration initialization
3236         config = config || {};
3237
3238         // Parent constructor
3239         OO.ui.ButtonOptionWidget.parent.call( this, config );
3240
3241         // Mixin constructors
3242         OO.ui.mixin.ButtonElement.call( this, config );
3243         OO.ui.mixin.IconElement.call( this, config );
3244         OO.ui.mixin.IndicatorElement.call( this, config );
3245         OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled: this.$button } ) );
3246
3247         // Initialization
3248         this.$element.addClass( 'oo-ui-buttonOptionWidget' );
3249         this.$button.append( this.$icon, this.$label, this.$indicator );
3250         this.$element.append( this.$button );
3251 };
3252
3253 /* Setup */
3254
3255 OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.OptionWidget );
3256 OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.ButtonElement );
3257 OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IconElement );
3258 OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IndicatorElement );
3259 OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TitledElement );
3260
3261 /* Static Properties */
3262
3263 // Allow button mouse down events to pass through so they can be handled by the parent select widget
3264 OO.ui.ButtonOptionWidget.static.cancelButtonMouseDownEvents = false;
3265
3266 OO.ui.ButtonOptionWidget.static.highlightable = false;
3267
3268 /* Methods */
3269
3270 /**
3271  * @inheritdoc
3272  */
3273 OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) {
3274         OO.ui.ButtonOptionWidget.parent.prototype.setSelected.call( this, state );
3275
3276         if ( this.constructor.static.selectable ) {
3277                 this.setActive( state );
3278         }
3279
3280         return this;
3281 };
3282
3283 /**
3284  * ButtonSelectWidget is a {@link OO.ui.SelectWidget select widget} that contains
3285  * button options and is used together with
3286  * OO.ui.ButtonOptionWidget. The ButtonSelectWidget provides an interface for
3287  * highlighting, choosing, and selecting mutually exclusive options. Please see
3288  * the [OOjs UI documentation on MediaWiki] [1] for more information.
3289  *
3290  *     @example
3291  *     // Example: A ButtonSelectWidget that contains three ButtonOptionWidgets
3292  *     var option1 = new OO.ui.ButtonOptionWidget( {
3293  *         data: 1,
3294  *         label: 'Option 1',
3295  *         title: 'Button option 1'
3296  *     } );
3297  *
3298  *     var option2 = new OO.ui.ButtonOptionWidget( {
3299  *         data: 2,
3300  *         label: 'Option 2',
3301  *         title: 'Button option 2'
3302  *     } );
3303  *
3304  *     var option3 = new OO.ui.ButtonOptionWidget( {
3305  *         data: 3,
3306  *         label: 'Option 3',
3307  *         title: 'Button option 3'
3308  *     } );
3309  *
3310  *     var buttonSelect=new OO.ui.ButtonSelectWidget( {
3311  *         items: [ option1, option2, option3 ]
3312  *     } );
3313  *     $( 'body' ).append( buttonSelect.$element );
3314  *
3315  * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options
3316  *
3317  * @class
3318  * @extends OO.ui.SelectWidget
3319  * @mixins OO.ui.mixin.TabIndexedElement
3320  *
3321  * @constructor
3322  * @param {Object} [config] Configuration options
3323  */
3324 OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) {
3325         // Parent constructor
3326         OO.ui.ButtonSelectWidget.parent.call( this, config );
3327
3328         // Mixin constructors
3329         OO.ui.mixin.TabIndexedElement.call( this, config );
3330
3331         // Events
3332         this.$element.on( {
3333                 focus: this.bindKeyDownListener.bind( this ),
3334                 blur: this.unbindKeyDownListener.bind( this )
3335         } );
3336
3337         // Initialization
3338         this.$element.addClass( 'oo-ui-buttonSelectWidget' );
3339 };
3340
3341 /* Setup */
3342
3343 OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
3344 OO.mixinClass( OO.ui.ButtonSelectWidget, OO.ui.mixin.TabIndexedElement );
3345
3346 /**
3347  * TabOptionWidget is an item in a {@link OO.ui.TabSelectWidget TabSelectWidget}.
3348  *
3349  * Currently, this class is only used by {@link OO.ui.IndexLayout index layouts}, which contain
3350  * {@link OO.ui.CardLayout card layouts}. See {@link OO.ui.IndexLayout IndexLayout}
3351  * for an example.
3352  *
3353  * @class
3354  * @extends OO.ui.OptionWidget
3355  *
3356  * @constructor
3357  * @param {Object} [config] Configuration options
3358  */
3359 OO.ui.TabOptionWidget = function OoUiTabOptionWidget( config ) {
3360         // Configuration initialization
3361         config = config || {};
3362
3363         // Parent constructor
3364         OO.ui.TabOptionWidget.parent.call( this, config );
3365
3366         // Initialization
3367         this.$element.addClass( 'oo-ui-tabOptionWidget' );
3368 };
3369
3370 /* Setup */
3371
3372 OO.inheritClass( OO.ui.TabOptionWidget, OO.ui.OptionWidget );
3373
3374 /* Static Properties */
3375
3376 OO.ui.TabOptionWidget.static.highlightable = false;
3377
3378 /**
3379  * TabSelectWidget is a list that contains {@link OO.ui.TabOptionWidget tab options}
3380  *
3381  * **Currently, this class is only used by {@link OO.ui.IndexLayout index layouts}.**
3382  *
3383  * @class
3384  * @extends OO.ui.SelectWidget
3385  * @mixins OO.ui.mixin.TabIndexedElement
3386  *
3387  * @constructor
3388  * @param {Object} [config] Configuration options
3389  */
3390 OO.ui.TabSelectWidget = function OoUiTabSelectWidget( config ) {
3391         // Parent constructor
3392         OO.ui.TabSelectWidget.parent.call( this, config );
3393
3394         // Mixin constructors
3395         OO.ui.mixin.TabIndexedElement.call( this, config );
3396
3397         // Events
3398         this.$element.on( {
3399                 focus: this.bindKeyDownListener.bind( this ),
3400                 blur: this.unbindKeyDownListener.bind( this )
3401         } );
3402
3403         // Initialization
3404         this.$element.addClass( 'oo-ui-tabSelectWidget' );
3405 };
3406
3407 /* Setup */
3408
3409 OO.inheritClass( OO.ui.TabSelectWidget, OO.ui.SelectWidget );
3410 OO.mixinClass( OO.ui.TabSelectWidget, OO.ui.mixin.TabIndexedElement );
3411
3412 /**
3413  * CapsuleItemWidgets are used within a {@link OO.ui.CapsuleMultiselectWidget
3414  * CapsuleMultiselectWidget} to display the selected items.
3415  *
3416  * @class
3417  * @extends OO.ui.Widget
3418  * @mixins OO.ui.mixin.ItemWidget
3419  * @mixins OO.ui.mixin.LabelElement
3420  * @mixins OO.ui.mixin.FlaggedElement
3421  * @mixins OO.ui.mixin.TabIndexedElement
3422  *
3423  * @constructor
3424  * @param {Object} [config] Configuration options
3425  */
3426 OO.ui.CapsuleItemWidget = function OoUiCapsuleItemWidget( config ) {
3427         // Configuration initialization
3428         config = config || {};
3429
3430         // Parent constructor
3431         OO.ui.CapsuleItemWidget.parent.call( this, config );
3432
3433         // Mixin constructors
3434         OO.ui.mixin.ItemWidget.call( this );
3435         OO.ui.mixin.LabelElement.call( this, config );
3436         OO.ui.mixin.FlaggedElement.call( this, config );
3437         OO.ui.mixin.TabIndexedElement.call( this, config );
3438
3439         // Events
3440         this.closeButton = new OO.ui.ButtonWidget( {
3441                 framed: false,
3442                 indicator: 'clear',
3443                 tabIndex: -1
3444         } ).on( 'click', this.onCloseClick.bind( this ) );
3445
3446         this.on( 'disable', function ( disabled ) {
3447                 this.closeButton.setDisabled( disabled );
3448         }.bind( this ) );
3449
3450         // Initialization
3451         this.$element
3452                 .on( {
3453                         click: this.onClick.bind( this ),
3454                         keydown: this.onKeyDown.bind( this )
3455                 } )
3456                 .addClass( 'oo-ui-capsuleItemWidget' )
3457                 .append( this.$label, this.closeButton.$element );
3458 };
3459
3460 /* Setup */
3461
3462 OO.inheritClass( OO.ui.CapsuleItemWidget, OO.ui.Widget );
3463 OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.ItemWidget );
3464 OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.LabelElement );
3465 OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.FlaggedElement );
3466 OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.TabIndexedElement );
3467
3468 /* Methods */
3469
3470 /**
3471  * Handle close icon clicks
3472  */
3473 OO.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
3474         var element = this.getElementGroup();
3475
3476         if ( element && $.isFunction( element.removeItems ) ) {
3477                 element.removeItems( [ this ] );
3478                 element.focus();
3479         }
3480 };
3481
3482 /**
3483  * Handle click event for the entire capsule
3484  */
3485 OO.ui.CapsuleItemWidget.prototype.onClick = function () {
3486         var element = this.getElementGroup();
3487
3488         if ( !this.isDisabled() && element && $.isFunction( element.editItem ) ) {
3489                 element.editItem( this );
3490         }
3491 };
3492
3493 /**
3494  * Handle keyDown event for the entire capsule
3495  *
3496  * @param {jQuery.Event} e Key down event
3497  */
3498 OO.ui.CapsuleItemWidget.prototype.onKeyDown = function ( e ) {
3499         var element = this.getElementGroup();
3500
3501         if ( e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode === OO.ui.Keys.DELETE ) {
3502                 element.removeItems( [ this ] );
3503                 element.focus();
3504                 return false;
3505         } else if ( e.keyCode === OO.ui.Keys.ENTER ) {
3506                 element.editItem( this );
3507                 return false;
3508         } else if ( e.keyCode === OO.ui.Keys.LEFT ) {
3509                 element.getPreviousItem( this ).focus();
3510         } else if ( e.keyCode === OO.ui.Keys.RIGHT ) {
3511                 element.getNextItem( this ).focus();
3512         }
3513 };
3514
3515 /**
3516  * Focuses the capsule
3517  */
3518 OO.ui.CapsuleItemWidget.prototype.focus = function () {
3519         this.$element.focus();
3520 };
3521
3522 /**
3523  * CapsuleMultiselectWidgets are something like a {@link OO.ui.ComboBoxInputWidget combo box widget}
3524  * that allows for selecting multiple values.
3525  *
3526  * For more information about menus and options, please see the [OOjs UI documentation on MediaWiki][1].
3527  *
3528  *     @example
3529  *     // Example: A CapsuleMultiselectWidget.
3530  *     var capsule = new OO.ui.CapsuleMultiselectWidget( {
3531  *         label: 'CapsuleMultiselectWidget',
3532  *         selected: [ 'Option 1', 'Option 3' ],
3533  *         menu: {
3534  *             items: [
3535  *                 new OO.ui.MenuOptionWidget( {
3536  *                     data: 'Option 1',
3537  *                     label: 'Option One'
3538  *                 } ),
3539  *                 new OO.ui.MenuOptionWidget( {
3540  *                     data: 'Option 2',
3541  *                     label: 'Option Two'
3542  *                 } ),
3543  *                 new OO.ui.MenuOptionWidget( {
3544  *                     data: 'Option 3',
3545  *                     label: 'Option Three'
3546  *                 } ),
3547  *                 new OO.ui.MenuOptionWidget( {
3548  *                     data: 'Option 4',
3549  *                     label: 'Option Four'
3550  *                 } ),
3551  *                 new OO.ui.MenuOptionWidget( {
3552  *                     data: 'Option 5',
3553  *                     label: 'Option Five'
3554  *                 } )
3555  *             ]
3556  *         }
3557  *     } );
3558  *     $( 'body' ).append( capsule.$element );
3559  *
3560  * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Menu_selects_and_options
3561  *
3562  * @class
3563  * @extends OO.ui.Widget
3564  * @mixins OO.ui.mixin.GroupElement
3565  * @mixins OO.ui.mixin.PopupElement
3566  * @mixins OO.ui.mixin.TabIndexedElement
3567  * @mixins OO.ui.mixin.IndicatorElement
3568  * @mixins OO.ui.mixin.IconElement
3569  * @uses OO.ui.CapsuleItemWidget
3570  * @uses OO.ui.FloatingMenuSelectWidget
3571  *
3572  * @constructor
3573  * @param {Object} [config] Configuration options
3574  * @cfg {string} [placeholder] Placeholder text
3575  * @cfg {boolean} [allowArbitrary=false] Allow data items to be added even if not present in the menu.
3576  * @cfg {Object} [menu] (required) Configuration options to pass to the
3577  *  {@link OO.ui.MenuSelectWidget menu select widget}.
3578  * @cfg {Object} [popup] Configuration options to pass to the {@link OO.ui.PopupWidget popup widget}.
3579  *  If specified, this popup will be shown instead of the menu (but the menu
3580  *  will still be used for item labels and allowArbitrary=false). The widgets
3581  *  in the popup should use {@link #addItemsFromData} or {@link #addItems} as necessary.
3582  * @cfg {jQuery} [$overlay=this.$element] Render the menu or popup into a separate layer.
3583  *  This configuration is useful in cases where the expanded menu is larger than
3584  *  its containing `<div>`. The specified overlay layer is usually on top of
3585  *  the containing `<div>` and has a larger area. By default, the menu uses
3586  *  relative positioning.
3587  */
3588 OO.ui.CapsuleMultiselectWidget = function OoUiCapsuleMultiselectWidget( config ) {
3589         var $tabFocus;
3590
3591         // Parent constructor
3592         OO.ui.CapsuleMultiselectWidget.parent.call( this, config );
3593
3594         // Configuration initialization
3595         config = $.extend( {
3596                 allowArbitrary: false,
3597                 $overlay: this.$element
3598         }, config );
3599
3600         // Properties (must be set before mixin constructor calls)
3601         this.$handle = $( '<div>' );
3602         this.$input = config.popup ? null : $( '<input>' );
3603         if ( config.placeholder !== undefined && config.placeholder !== '' ) {
3604                 this.$input.attr( 'placeholder', config.placeholder );
3605         }
3606
3607         // Mixin constructors
3608         OO.ui.mixin.GroupElement.call( this, config );
3609         if ( config.popup ) {
3610                 config.popup = $.extend( {}, config.popup, {
3611                         align: 'forwards',
3612                         anchor: false
3613                 } );
3614                 OO.ui.mixin.PopupElement.call( this, config );
3615                 $tabFocus = $( '<span>' );
3616                 OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, { $tabIndexed: $tabFocus } ) );
3617         } else {
3618                 this.popup = null;
3619                 $tabFocus = null;
3620                 OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, { $tabIndexed: this.$input } ) );
3621         }
3622         OO.ui.mixin.IndicatorElement.call( this, config );
3623         OO.ui.mixin.IconElement.call( this, config );
3624
3625         // Properties
3626         this.$content = $( '<div>' );
3627         this.allowArbitrary = config.allowArbitrary;
3628         this.$overlay = config.$overlay;
3629         this.menu = new OO.ui.FloatingMenuSelectWidget( $.extend(
3630                 {
3631                         widget: this,
3632                         $input: this.$input,
3633                         $container: this.$element,
3634                         filterFromInput: true,
3635                         disabled: this.isDisabled()
3636                 },
3637                 config.menu
3638         ) );
3639
3640         // Events
3641         if ( this.popup ) {
3642                 $tabFocus.on( {
3643                         focus: this.onFocusForPopup.bind( this )
3644                 } );
3645                 this.popup.$element.on( 'focusout', this.onPopupFocusOut.bind( this ) );
3646                 if ( this.popup.$autoCloseIgnore ) {
3647                         this.popup.$autoCloseIgnore.on( 'focusout', this.onPopupFocusOut.bind( this ) );
3648                 }
3649                 this.popup.connect( this, {
3650                         toggle: function ( visible ) {
3651                                 $tabFocus.toggle( !visible );
3652                         }
3653                 } );
3654         } else {
3655                 this.$input.on( {
3656                         focus: this.onInputFocus.bind( this ),
3657                         blur: this.onInputBlur.bind( this ),
3658                         'propertychange change click mouseup keydown keyup input cut paste select focus':
3659                                 OO.ui.debounce( this.updateInputSize.bind( this ) ),
3660                         keydown: this.onKeyDown.bind( this ),
3661                         keypress: this.onKeyPress.bind( this )
3662                 } );
3663         }
3664         this.menu.connect( this, {
3665                 choose: 'onMenuChoose',
3666                 toggle: 'onMenuToggle',
3667                 add: 'onMenuItemsChange',
3668                 remove: 'onMenuItemsChange'
3669         } );
3670         this.$handle.on( {
3671                 mousedown: this.onMouseDown.bind( this )
3672         } );
3673
3674         // Initialization
3675         if ( this.$input ) {
3676                 this.$input.prop( 'disabled', this.isDisabled() );
3677                 this.$input.attr( {
3678                         role: 'combobox',
3679                         'aria-autocomplete': 'list'
3680                 } );
3681         }
3682         if ( config.data ) {
3683                 this.setItemsFromData( config.data );
3684         }
3685         this.$content.addClass( 'oo-ui-capsuleMultiselectWidget-content' )
3686                 .append( this.$group );
3687         this.$group.addClass( 'oo-ui-capsuleMultiselectWidget-group' );
3688         this.$handle.addClass( 'oo-ui-capsuleMultiselectWidget-handle' )
3689                 .append( this.$indicator, this.$icon, this.$content );
3690         this.$element.addClass( 'oo-ui-capsuleMultiselectWidget' )
3691                 .append( this.$handle );
3692         if ( this.popup ) {
3693                 this.$content.append( $tabFocus );
3694                 this.$overlay.append( this.popup.$element );
3695         } else {
3696                 this.$content.append( this.$input );
3697                 this.$overlay.append( this.menu.$element );
3698         }
3699
3700         // Input size needs to be calculated after everything else is rendered
3701         setTimeout( function () {
3702                 if ( this.$input ) {
3703                         this.updateInputSize();
3704                 }
3705         }.bind( this ) );
3706
3707         this.onMenuItemsChange();
3708 };
3709
3710 /* Setup */
3711
3712 OO.inheritClass( OO.ui.CapsuleMultiselectWidget, OO.ui.Widget );
3713 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.GroupElement );
3714 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.PopupElement );
3715 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.TabIndexedElement );
3716 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.IndicatorElement );
3717 OO.mixinClass( OO.ui.CapsuleMultiselectWidget, OO.ui.mixin.IconElement );
3718
3719 /* Events */
3720
3721 /**
3722  * @event change
3723  *
3724  * A change event is emitted when the set of selected items changes.
3725  *
3726  * @param {Mixed[]} datas Data of the now-selected items
3727  */
3728
3729 /**
3730  * @event resize
3731  *
3732  * A resize event is emitted when the widget's dimensions change to accomodate newly added items or
3733  * current user input.
3734  */
3735
3736 /* Methods */
3737
3738 /**
3739  * Construct a OO.ui.CapsuleItemWidget (or a subclass thereof) from given label and data.
3740  * May return `null` if the given label and data are not valid.
3741  *
3742  * @protected
3743  * @param {Mixed} data Custom data of any type.
3744  * @param {string} label The label text.
3745  * @return {OO.ui.CapsuleItemWidget|null}
3746  */
3747 OO.ui.CapsuleMultiselectWidget.prototype.createItemWidget = function ( data, label ) {
3748         if ( label === '' ) {
3749                 return null;
3750         }
3751         return new OO.ui.CapsuleItemWidget( { data: data, label: label } );
3752 };
3753
3754 /**
3755  * Get the data of the items in the capsule
3756  *
3757  * @return {Mixed[]}
3758  */
3759 OO.ui.CapsuleMultiselectWidget.prototype.getItemsData = function () {
3760         return this.getItems().map( function ( item ) {
3761                 return item.data;
3762         } );
3763 };
3764
3765 /**
3766  * Set the items in the capsule by providing data
3767  *
3768  * @chainable
3769  * @param {Mixed[]} datas
3770  * @return {OO.ui.CapsuleMultiselectWidget}
3771  */
3772 OO.ui.CapsuleMultiselectWidget.prototype.setItemsFromData = function ( datas ) {
3773         var widget = this,
3774                 menu = this.menu,
3775                 items = this.getItems();
3776
3777         $.each( datas, function ( i, data ) {
3778                 var j, label,
3779                         item = menu.getItemFromData( data );
3780
3781                 if ( item ) {
3782                         label = item.label;
3783                 } else if ( widget.allowArbitrary ) {
3784                         label = String( data );
3785                 } else {
3786                         return;
3787                 }
3788
3789                 item = null;
3790                 for ( j = 0; j < items.length; j++ ) {
3791                         if ( items[ j ].data === data && items[ j ].label === label ) {
3792                                 item = items[ j ];
3793                                 items.splice( j, 1 );
3794                                 break;
3795                         }
3796                 }
3797                 if ( !item ) {
3798                         item = widget.createItemWidget( data, label );
3799                 }
3800                 if ( item ) {
3801                         widget.addItems( [ item ], i );
3802                 }
3803         } );
3804
3805         if ( items.length ) {
3806                 widget.removeItems( items );
3807         }
3808
3809         return this;
3810 };
3811
3812 /**
3813  * Add items to the capsule by providing their data
3814  *
3815  * @chainable
3816  * @param {Mixed[]} datas
3817  * @return {OO.ui.CapsuleMultiselectWidget}
3818  */
3819 OO.ui.CapsuleMultiselectWidget.prototype.addItemsFromData = function ( datas ) {
3820         var widget = this,
3821                 menu = this.menu,
3822                 items = [];
3823
3824         $.each( datas, function ( i, data ) {
3825                 var item;
3826
3827                 if ( !widget.getItemFromData( data ) ) {
3828                         item = menu.getItemFromData( data );
3829                         if ( item ) {
3830                                 item = widget.createItemWidget( data, item.label );
3831                         } else if ( widget.allowArbitrary ) {
3832                                 item = widget.createItemWidget( data, String( data ) );
3833                         }
3834                         if ( item ) {
3835                                 items.push( item );
3836                         }
3837                 }
3838         } );
3839
3840         if ( items.length ) {
3841                 this.addItems( items );
3842         }
3843
3844         return this;
3845 };
3846
3847 /**
3848  * Add items to the capsule by providing a label
3849  *
3850  * @param {string} label
3851  * @return {boolean} Whether the item was added or not
3852  */
3853 OO.ui.CapsuleMultiselectWidget.prototype.addItemFromLabel = function ( label ) {
3854         var item, items;
3855         item = this.menu.getItemFromLabel( label, true );
3856         if ( item ) {
3857                 this.addItemsFromData( [ item.data ] );
3858                 return true;
3859         } else if ( this.allowArbitrary ) {
3860                 items = this.getItems();
3861                 this.addItemsFromData( [ label ] );
3862                 return !OO.compare( this.getItems(), items );
3863         }
3864         return false;
3865 };
3866
3867 /**
3868  * Remove items by data
3869  *
3870  * @chainable
3871  * @param {Mixed[]} datas
3872  * @return {OO.ui.CapsuleMultiselectWidget}
3873  */
3874 OO.ui.CapsuleMultiselectWidget.prototype.removeItemsFromData = function ( datas ) {
3875         var widget = this,
3876                 items = [];
3877
3878         $.each( datas, function ( i, data ) {
3879                 var item = widget.getItemFromData( data );
3880                 if ( item ) {
3881                         items.push( item );
3882                 }
3883         } );
3884
3885         if ( items.length ) {
3886                 this.removeItems( items );
3887         }
3888
3889         return this;
3890 };
3891
3892 /**
3893  * @inheritdoc
3894  */
3895 OO.ui.CapsuleMultiselectWidget.prototype.addItems = function ( items ) {
3896         var same, i, l,
3897                 oldItems = this.items.slice();
3898
3899         OO.ui.mixin.GroupElement.prototype.addItems.call( this, items );
3900
3901         if ( this.items.length !== oldItems.length ) {
3902                 same = false;
3903         } else {
3904                 same = true;
3905                 for ( i = 0, l = oldItems.length; same && i < l; i++ ) {
3906                         same = same && this.items[ i ] === oldItems[ i ];
3907                 }
3908         }
3909         if ( !same ) {
3910                 this.emit( 'change', this.getItemsData() );
3911                 this.updateIfHeightChanged();
3912         }
3913
3914         return this;
3915 };
3916
3917 /**
3918  * Removes the item from the list and copies its label to `this.$input`.
3919  *
3920  * @param {Object} item
3921  */
3922 OO.ui.CapsuleMultiselectWidget.prototype.editItem = function ( item ) {
3923         this.addItemFromLabel( this.$input.val() );
3924         this.clearInput();
3925         this.$input.val( item.label );
3926         this.updateInputSize();
3927         this.focus();
3928         this.menu.updateItemVisibility(); // Hack, we shouldn't be calling this method directly
3929         this.removeItems( [ item ] );
3930 };
3931
3932 /**
3933  * @inheritdoc
3934  */
3935 OO.ui.CapsuleMultiselectWidget.prototype.removeItems = function ( items ) {
3936         var same, i, l,
3937                 oldItems = this.items.slice();
3938
3939         OO.ui.mixin.GroupElement.prototype.removeItems.call( this, items );
3940
3941         if ( this.items.length !== oldItems.length ) {
3942                 same = false;
3943         } else {
3944                 same = true;
3945                 for ( i = 0, l = oldItems.length; same && i < l; i++ ) {
3946                         same = same && this.items[ i ] === oldItems[ i ];
3947                 }
3948         }
3949         if ( !same ) {
3950                 this.emit( 'change', this.getItemsData() );
3951                 this.updateIfHeightChanged();
3952         }
3953
3954         return this;
3955 };
3956
3957 /**
3958  * @inheritdoc
3959  */
3960 OO.ui.CapsuleMultiselectWidget.prototype.clearItems = function () {
3961         if ( this.items.length ) {
3962                 OO.ui.mixin.GroupElement.prototype.clearItems.call( this );
3963                 this.emit( 'change', this.getItemsData() );
3964                 this.updateIfHeightChanged();
3965         }
3966         return this;
3967 };
3968
3969 /**
3970  * Given an item, returns the item after it. If its the last item,
3971  * returns `this.$input`. If no item is passed, returns the very first
3972  * item.
3973  *
3974  * @param {OO.ui.CapsuleItemWidget} [item]
3975  * @return {OO.ui.CapsuleItemWidget|jQuery|boolean}
3976  */
3977 OO.ui.CapsuleMultiselectWidget.prototype.getNextItem = function ( item ) {
3978         var itemIndex;
3979
3980         if ( item === undefined ) {
3981                 return this.items[ 0 ];
3982         }
3983
3984         itemIndex = this.items.indexOf( item );
3985         if ( itemIndex < 0 ) { // Item not in list
3986                 return false;
3987         } else if ( itemIndex === this.items.length - 1 ) { // Last item
3988                 return this.$input;
3989         } else {
3990                 return this.items[ itemIndex + 1 ];
3991         }
3992 };
3993
3994 /**
3995  * Given an item, returns the item before it. If its the first item,
3996  * returns `this.$input`. If no item is passed, returns the very last
3997  * item.
3998  *
3999  * @param {OO.ui.CapsuleItemWidget} [item]
4000  * @return {OO.ui.CapsuleItemWidget|jQuery|boolean}
4001  */
4002 OO.ui.CapsuleMultiselectWidget.prototype.getPreviousItem = function ( item ) {
4003         var itemIndex;
4004
4005         if ( item === undefined ) {
4006                 return this.items[ this.items.length - 1 ];
4007         }
4008
4009         itemIndex = this.items.indexOf( item );
4010         if ( itemIndex < 0 ) { // Item not in list
4011                 return false;
4012         } else if ( itemIndex === 0 ) { // First item
4013                 return this.$input;
4014         } else {
4015                 return this.items[ itemIndex - 1 ];
4016         }
4017 };
4018
4019 /**
4020  * Get the capsule widget's menu.
4021  *
4022  * @return {OO.ui.MenuSelectWidget} Menu widget
4023  */
4024 OO.ui.CapsuleMultiselectWidget.prototype.getMenu = function () {
4025         return this.menu;
4026 };
4027
4028 /**
4029  * Handle focus events
4030  *
4031  * @private
4032  * @param {jQuery.Event} event
4033  */
4034 OO.ui.CapsuleMultiselectWidget.prototype.onInputFocus = function () {
4035         if ( !this.isDisabled() ) {
4036                 this.menu.toggle( true );
4037         }
4038 };
4039
4040 /**
4041  * Handle blur events
4042  *
4043  * @private
4044  * @param {jQuery.Event} event
4045  */
4046 OO.ui.CapsuleMultiselectWidget.prototype.onInputBlur = function () {
4047         this.addItemFromLabel( this.$input.val() );
4048         this.clearInput();
4049 };
4050
4051 /**
4052  * Handle focus events
4053  *
4054  * @private
4055  * @param {jQuery.Event} event
4056  */
4057 OO.ui.CapsuleMultiselectWidget.prototype.onFocusForPopup = function () {
4058         if ( !this.isDisabled() ) {
4059                 this.popup.setSize( this.$handle.width() );
4060                 this.popup.toggle( true );
4061                 OO.ui.findFocusable( this.popup.$element ).focus();
4062         }
4063 };
4064
4065 /**
4066  * Handles popup focus out events.
4067  *
4068  * @private
4069  * @param {jQuery.Event} e Focus out event
4070  */
4071 OO.ui.CapsuleMultiselectWidget.prototype.onPopupFocusOut = function () {
4072         var widget = this.popup;
4073
4074         setTimeout( function () {
4075                 if (
4076                         widget.isVisible() &&
4077                         !OO.ui.contains( widget.$element[ 0 ], document.activeElement, true ) &&
4078                         ( !widget.$autoCloseIgnore || !widget.$autoCloseIgnore.has( document.activeElement ).length )
4079                 ) {
4080                         widget.toggle( false );
4081                 }
4082         } );
4083 };
4084
4085 /**
4086  * Handle mouse down events.
4087  *
4088  * @private
4089  * @param {jQuery.Event} e Mouse down event
4090  */
4091 OO.ui.CapsuleMultiselectWidget.prototype.onMouseDown = function ( e ) {
4092         if ( e.which === OO.ui.MouseButtons.LEFT ) {
4093                 this.focus();
4094                 return false;
4095         } else {
4096                 this.updateInputSize();
4097         }
4098 };
4099
4100 /**
4101  * Handle key press events.
4102  *
4103  * @private
4104  * @param {jQuery.Event} e Key press event
4105  */
4106 OO.ui.CapsuleMultiselectWidget.prototype.onKeyPress = function ( e ) {
4107         if ( !this.isDisabled() ) {
4108                 if ( e.which === OO.ui.Keys.ESCAPE ) {
4109                         this.clearInput();
4110                         return false;
4111                 }
4112
4113                 if ( !this.popup ) {
4114                         this.menu.toggle( true );
4115                         if ( e.which === OO.ui.Keys.ENTER ) {
4116                                 if ( this.addItemFromLabel( this.$input.val() ) ) {
4117                                         this.clearInput();
4118                                 }
4119                                 return false;
4120                         }
4121
4122                         // Make sure the input gets resized.
4123                         setTimeout( this.updateInputSize.bind( this ), 0 );
4124                 }
4125         }
4126 };
4127
4128 /**
4129  * Handle key down events.
4130  *
4131  * @private
4132  * @param {jQuery.Event} e Key down event
4133  */
4134 OO.ui.CapsuleMultiselectWidget.prototype.onKeyDown = function ( e ) {
4135         if (
4136                 !this.isDisabled() &&
4137                 this.$input.val() === '' &&
4138                 this.items.length
4139         ) {
4140                 // 'keypress' event is not triggered for Backspace
4141                 if ( e.keyCode === OO.ui.Keys.BACKSPACE ) {
4142                         if ( e.metaKey || e.ctrlKey ) {
4143                                 this.removeItems( this.items.slice( -1 ) );
4144                         } else {
4145                                 this.editItem( this.items[ this.items.length - 1 ] );
4146                         }
4147                         return false;
4148                 } else if ( e.keyCode === OO.ui.Keys.LEFT ) {
4149                         this.getPreviousItem().focus();
4150                 } else if ( e.keyCode === OO.ui.Keys.RIGHT ) {
4151                         this.getNextItem().focus();
4152                 }
4153         }
4154 };
4155
4156 /**
4157  * Update the dimensions of the text input field to encompass all available area.
4158  *
4159  * @private
4160  * @param {jQuery.Event} e Event of some sort
4161  */
4162 OO.ui.CapsuleMultiselectWidget.prototype.updateInputSize = function () {
4163         var $lastItem, direction, contentWidth, currentWidth, bestWidth;
4164         if ( this.$input && !this.isDisabled() ) {
4165                 this.$input.css( 'width', '1em' );
4166                 $lastItem = this.$group.children().last();
4167                 direction = OO.ui.Element.static.getDir( this.$handle );
4168
4169                 // Get the width of the input with the placeholder text as
4170                 // the value and save it so that we don't keep recalculating
4171                 if (
4172                         this.contentWidthWithPlaceholder === undefined &&
4173                         this.$input.val() === '' &&
4174                         this.$input.attr( 'placeholder' ) !== undefined
4175                 ) {
4176                         this.$input.val( this.$input.attr( 'placeholder' ) );
4177                         this.contentWidthWithPlaceholder = this.$input[ 0 ].scrollWidth;
4178                         this.$input.val( '' );
4179
4180                 }
4181
4182                 // Always keep the input wide enough for the placeholder text
4183                 contentWidth = Math.max(
4184                         this.$input[ 0 ].scrollWidth,
4185                         // undefined arguments in Math.max lead to NaN
4186                         ( this.contentWidthWithPlaceholder === undefined ) ?
4187                                 0 : this.contentWidthWithPlaceholder
4188                 );
4189                 currentWidth = this.$input.width();
4190
4191                 if ( contentWidth < currentWidth ) {
4192                         // All is fine, don't perform expensive calculations
4193                         return;
4194                 }
4195
4196                 if ( $lastItem.length === 0 ) {
4197                         bestWidth = this.$content.innerWidth();
4198                 } else {
4199                         bestWidth = direction === 'ltr' ?
4200                                 this.$content.innerWidth() - $lastItem.position().left - $lastItem.outerWidth() :
4201                                 $lastItem.position().left;
4202                 }
4203
4204                 // Some safety margin for sanity, because I *really* don't feel like finding out where the few
4205                 // pixels this is off by are coming from.
4206                 bestWidth -= 10;
4207                 if ( contentWidth > bestWidth ) {
4208                         // This will result in the input getting shifted to the next line
4209                         bestWidth = this.$content.innerWidth() - 10;
4210                 }
4211                 this.$input.width( Math.floor( bestWidth ) );
4212                 this.updateIfHeightChanged();
4213         }
4214 };
4215
4216 /**
4217  * Determine if widget height changed, and if so, update menu position and emit 'resize' event.
4218  *
4219  * @private
4220  */
4221 OO.ui.CapsuleMultiselectWidget.prototype.updateIfHeightChanged = function () {
4222         var height = this.$element.height();
4223         if ( height !== this.height ) {
4224                 this.height = height;
4225                 this.menu.position();
4226                 this.emit( 'resize' );
4227         }
4228 };
4229
4230 /**
4231  * Handle menu choose events.
4232  *
4233  * @private
4234  * @param {OO.ui.OptionWidget} item Chosen item
4235  */
4236 OO.ui.CapsuleMultiselectWidget.prototype.onMenuChoose = function ( item ) {
4237         if ( item && item.isVisible() ) {
4238                 this.addItemsFromData( [ item.getData() ] );
4239                 this.clearInput();
4240         }
4241 };
4242
4243 /**
4244  * Handle menu toggle events.
4245  *
4246  * @private
4247  * @param {boolean} isVisible Menu toggle event
4248  */
4249 OO.ui.CapsuleMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
4250         this.$element.toggleClass( 'oo-ui-capsuleMultiselectWidget-open', isVisible );
4251 };
4252
4253 /**
4254  * Handle menu item change events.
4255  *
4256  * @private
4257  */
4258 OO.ui.CapsuleMultiselectWidget.prototype.onMenuItemsChange = function () {
4259         this.setItemsFromData( this.getItemsData() );
4260         this.$element.toggleClass( 'oo-ui-capsuleMultiselectWidget-empty', this.menu.isEmpty() );
4261 };
4262
4263 /**
4264  * Clear the input field
4265  *
4266  * @private
4267  */
4268 OO.ui.CapsuleMultiselectWidget.prototype.clearInput = function () {
4269         if ( this.$input ) {
4270                 this.$input.val( '' );
4271                 this.updateInputSize();
4272         }
4273         if ( this.popup ) {
4274                 this.popup.toggle( false );
4275         }
4276         this.menu.toggle( false );
4277         this.menu.selectItem();
4278         this.menu.highlightItem();
4279 };
4280
4281 /**
4282  * @inheritdoc
4283  */
4284 OO.ui.CapsuleMultiselectWidget.prototype.setDisabled = function ( disabled ) {
4285         var i, len;
4286
4287         // Parent method
4288         OO.ui.CapsuleMultiselectWidget.parent.prototype.setDisabled.call( this, disabled );
4289
4290         if ( this.$input ) {
4291                 this.$input.prop( 'disabled', this.isDisabled() );
4292         }
4293         if ( this.menu ) {
4294                 this.menu.setDisabled( this.isDisabled() );
4295         }
4296         if ( this.popup ) {
4297                 this.popup.setDisabled( this.isDisabled() );
4298         }
4299
4300         if ( this.items ) {
4301                 for ( i = 0, len = this.items.length; i < len; i++ ) {
4302                         this.items[ i ].updateDisabled();
4303                 }
4304         }
4305
4306         return this;
4307 };
4308
4309 /**
4310  * Focus the widget
4311  *
4312  * @chainable
4313  * @return {OO.ui.CapsuleMultiselectWidget}
4314  */
4315 OO.ui.CapsuleMultiselectWidget.prototype.focus = function () {
4316         if ( !this.isDisabled() ) {
4317                 if ( this.popup ) {
4318                         this.popup.setSize( this.$handle.width() );
4319                         this.popup.toggle( true );
4320                         OO.ui.findFocusable( this.popup.$element ).focus();
4321                 } else {
4322                         this.updateInputSize();
4323                         this.menu.toggle( true );
4324                         this.$input.focus();
4325                 }
4326         }
4327         return this;
4328 };
4329
4330 /**
4331  * @class
4332  * @deprecated since 0.17.3; use OO.ui.CapsuleMultiselectWidget instead
4333  */
4334 OO.ui.CapsuleMultiSelectWidget = OO.ui.CapsuleMultiselectWidget;
4335
4336 /**
4337  * SelectFileWidgets allow for selecting files, using the HTML5 File API. These
4338  * widgets can be configured with {@link OO.ui.mixin.IconElement icons} and {@link
4339  * OO.ui.mixin.IndicatorElement indicators}.
4340  * Please see the [OOjs UI documentation on MediaWiki] [1] for more information and examples.
4341  *
4342  *     @example
4343  *     // Example of a file select widget
4344  *     var selectFile = new OO.ui.SelectFileWidget();
4345  *     $( 'body' ).append( selectFile.$element );
4346  *
4347  * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets
4348  *
4349  * @class
4350  * @extends OO.ui.Widget
4351  * @mixins OO.ui.mixin.IconElement
4352  * @mixins OO.ui.mixin.IndicatorElement
4353  * @mixins OO.ui.mixin.PendingElement
4354  * @mixins OO.ui.mixin.LabelElement
4355  *
4356  * @constructor
4357  * @param {Object} [config] Configuration options
4358  * @cfg {string[]|null} [accept=null] MIME types to accept. null accepts all types.
4359  * @cfg {string} [placeholder] Text to display when no file is selected.
4360  * @cfg {string} [notsupported] Text to display when file support is missing in the browser.
4361  * @cfg {boolean} [droppable=true] Whether to accept files by drag and drop.
4362  * @cfg {boolean} [showDropTarget=false] Whether to show a drop target. Requires droppable to be true.
4363  * @cfg {number} [thumbnailSizeLimit=20] File size limit in MiB above which to not try and show a
4364  *  preview (for performance)
4365  */
4366 OO.ui.SelectFileWidget = function OoUiSelectFileWidget( config ) {
4367         var dragHandler;
4368
4369         // Configuration initialization
4370         config = $.extend( {
4371                 accept: null,
4372                 placeholder: OO.ui.msg( 'ooui-selectfile-placeholder' ),
4373                 notsupported: OO.ui.msg( 'ooui-selectfile-not-supported' ),
4374                 droppable: true,
4375                 showDropTarget: false,
4376                 thumbnailSizeLimit: 20
4377         }, config );
4378
4379         // Parent constructor
4380         OO.ui.SelectFileWidget.parent.call( this, config );
4381
4382         // Mixin constructors
4383         OO.ui.mixin.IconElement.call( this, config );
4384         OO.ui.mixin.IndicatorElement.call( this, config );
4385         OO.ui.mixin.PendingElement.call( this, $.extend( {}, config, { $pending: this.$info } ) );
4386         OO.ui.mixin.LabelElement.call( this, config );
4387
4388         // Properties
4389         this.$info = $( '<span>' );
4390         this.showDropTarget = config.showDropTarget;
4391         this.thumbnailSizeLimit = config.thumbnailSizeLimit;
4392         this.isSupported = this.constructor.static.isSupported();
4393         this.currentFile = null;
4394         if ( Array.isArray( config.accept ) ) {
4395                 this.accept = config.accept;
4396         } else {
4397                 this.accept = null;
4398         }
4399         this.placeholder = config.placeholder;
4400         this.notsupported = config.notsupported;
4401         this.onFileSelectedHandler = this.onFileSelected.bind( this );
4402
4403         this.selectButton = new OO.ui.ButtonWidget( {
4404                 classes: [ 'oo-ui-selectFileWidget-selectButton' ],
4405                 label: OO.ui.msg( 'ooui-selectfile-button-select' ),
4406                 disabled: this.disabled || !this.isSupported
4407         } );
4408
4409         this.clearButton = new OO.ui.ButtonWidget( {
4410                 classes: [ 'oo-ui-selectFileWidget-clearButton' ],
4411                 framed: false,
4412                 icon: 'close',
4413                 disabled: this.disabled
4414         } );
4415
4416         // Events
4417         this.selectButton.$button.on( {
4418                 keypress: this.onKeyPress.bind( this )
4419         } );
4420         this.clearButton.connect( this, {
4421                 click: 'onClearClick'
4422         } );
4423         if ( config.droppable ) {
4424                 dragHandler = this.onDragEnterOrOver.bind( this );
4425                 this.$element.on( {
4426                         dragenter: dragHandler,
4427                         dragover: dragHandler,
4428                         dragleave: this.onDragLeave.bind( this ),
4429                         drop: this.onDrop.bind( this )
4430                 } );
4431         }
4432
4433         // Initialization
4434         this.addInput();
4435         this.$label.addClass( 'oo-ui-selectFileWidget-label' );
4436         this.$info
4437                 .addClass( 'oo-ui-selectFileWidget-info' )
4438                 .append( this.$icon, this.$label, this.clearButton.$element, this.$indicator );
4439
4440         if ( config.droppable && config.showDropTarget ) {
4441                 this.selectButton.setIcon( 'upload' );
4442                 this.$thumbnail = $( '<div>' ).addClass( 'oo-ui-selectFileWidget-thumbnail' );
4443                 this.setPendingElement( this.$thumbnail );
4444                 this.$element
4445                         .addClass( 'oo-ui-selectFileWidget-dropTarget oo-ui-selectFileWidget' )
4446                         .on( {
4447                                 click: this.onDropTargetClick.bind( this )
4448                         } )
4449                         .append(
4450                                 this.$thumbnail,
4451                                 this.$info,
4452                                 this.selectButton.$element,
4453                                 $( '<span>' )
4454                                         .addClass( 'oo-ui-selectFileWidget-dropLabel' )
4455                                         .text( OO.ui.msg( 'ooui-selectfile-dragdrop-placeholder' ) )
4456                         );
4457         } else {
4458                 this.$element
4459                         .addClass( 'oo-ui-selectFileWidget' )
4460                         .append( this.$info, this.selectButton.$element );
4461         }
4462         this.updateUI();
4463 };
4464
4465 /* Setup */
4466
4467 OO.inheritClass( OO.ui.SelectFileWidget, OO.ui.Widget );
4468 OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.IconElement );
4469 OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.IndicatorElement );
4470 OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.PendingElement );
4471 OO.mixinClass( OO.ui.SelectFileWidget, OO.ui.mixin.LabelElement );
4472
4473 /* Static Properties */
4474
4475 /**
4476  * Check if this widget is supported
4477  *
4478  * @static
4479  * @return {boolean}
4480  */
4481 OO.ui.SelectFileWidget.static.isSupported = function () {
4482         var $input;
4483         if ( OO.ui.SelectFileWidget.static.isSupportedCache === null ) {
4484                 $input = $( '<input>' ).attr( 'type', 'file' );
4485                 OO.ui.SelectFileWidget.static.isSupportedCache = $input[ 0 ].files !== undefined;
4486         }
4487         return OO.ui.SelectFileWidget.static.isSupportedCache;
4488 };
4489
4490 OO.ui.SelectFileWidget.static.isSupportedCache = null;
4491
4492 /* Events */
4493
4494 /**
4495  * @event change
4496  *
4497  * A change event is emitted when the on/off state of the toggle changes.
4498  *
4499  * @param {File|null} value New value
4500  */
4501
4502 /* Methods */
4503
4504 /**
4505  * Get the current value of the field
4506  *
4507  * @return {File|null}
4508  */
4509 OO.ui.SelectFileWidget.prototype.getValue = function () {
4510         return this.currentFile;
4511 };
4512
4513 /**
4514  * Set the current value of the field
4515  *
4516  * @param {File|null} file File to select
4517  */
4518 OO.ui.SelectFileWidget.prototype.setValue = function ( file ) {
4519         if ( this.currentFile !== file ) {
4520                 this.currentFile = file;
4521                 this.updateUI();
4522                 this.emit( 'change', this.currentFile );
4523         }
4524 };
4525
4526 /**
4527  * Focus the widget.
4528  *
4529  * Focusses the select file button.
4530  *
4531  * @chainable
4532  */
4533 OO.ui.SelectFileWidget.prototype.focus = function () {
4534         this.selectButton.$button[ 0 ].focus();
4535         return this;
4536 };
4537
4538 /**
4539  * Update the user interface when a file is selected or unselected
4540  *
4541  * @protected
4542  */
4543 OO.ui.SelectFileWidget.prototype.updateUI = function () {
4544         var $label;
4545         if ( !this.isSupported ) {
4546                 this.$element.addClass( 'oo-ui-selectFileWidget-notsupported' );
4547                 this.$element.removeClass( 'oo-ui-selectFileWidget-empty' );
4548                 this.setLabel( this.notsupported );
4549         } else {
4550                 this.$element.addClass( 'oo-ui-selectFileWidget-supported' );
4551                 if ( this.currentFile ) {
4552                         this.$element.removeClass( 'oo-ui-selectFileWidget-empty' );
4553                         $label = $( [] );
4554                         $label = $label.add(
4555                                 $( '<span>' )
4556                                         .addClass( 'oo-ui-selectFileWidget-fileName' )
4557                                         .text( this.currentFile.name )
4558                         );
4559                         this.setLabel( $label );
4560
4561                         if ( this.showDropTarget ) {
4562                                 this.pushPending();
4563                                 this.loadAndGetImageUrl().done( function ( url ) {
4564                                         this.$thumbnail.css( 'background-image', 'url( ' + url + ' )' );
4565                                 }.bind( this ) ).fail( function () {
4566                                         this.$thumbnail.append(
4567                                                 new OO.ui.IconWidget( {
4568                                                         icon: 'attachment',
4569                                                         classes: [ 'oo-ui-selectFileWidget-noThumbnail-icon' ]
4570                                                 } ).$element
4571                                         );
4572                                 }.bind( this ) ).always( function () {
4573                                         this.popPending();
4574                                 }.bind( this ) );
4575                                 this.$element.off( 'click' );
4576                         }
4577                 } else {
4578                         if ( this.showDropTarget ) {
4579                                 this.$element.off( 'click' );
4580                                 this.$element.on( {
4581                                         click: this.onDropTargetClick.bind( this )
4582                                 } );
4583                                 this.$thumbnail
4584                                         .empty()
4585                                         .css( 'background-image', '' );
4586                         }
4587                         this.$element.addClass( 'oo-ui-selectFileWidget-empty' );
4588                         this.setLabel( this.placeholder );
4589                 }
4590         }
4591 };
4592
4593 /**
4594  * If the selected file is an image, get its URL and load it.
4595  *
4596  * @return {jQuery.Promise} Promise resolves with the image URL after it has loaded
4597  */
4598 OO.ui.SelectFileWidget.prototype.loadAndGetImageUrl = function () {
4599         var deferred = $.Deferred(),
4600                 file = this.currentFile,
4601                 reader = new FileReader();
4602
4603         if (
4604                 file &&
4605                 ( OO.getProp( file, 'type' ) || '' ).indexOf( 'image/' ) === 0 &&
4606                 file.size < this.thumbnailSizeLimit * 1024 * 1024
4607         ) {
4608                 reader.onload = function ( event ) {
4609                         var img = document.createElement( 'img' );
4610                         img.addEventListener( 'load', function () {
4611                                 if (
4612                                         img.naturalWidth === 0 ||
4613                                         img.naturalHeight === 0 ||
4614                                         img.complete === false
4615                                 ) {
4616                                         deferred.reject();
4617                                 } else {
4618                                         deferred.resolve( event.target.result );
4619                                 }
4620                         } );
4621                         img.src = event.target.result;
4622                 };
4623                 reader.readAsDataURL( file );
4624         } else {
4625                 deferred.reject();
4626         }
4627
4628         return deferred.promise();
4629 };
4630
4631 /**
4632  * Add the input to the widget
4633  *
4634  * @private
4635  */
4636 OO.ui.SelectFileWidget.prototype.addInput = function () {
4637         if ( this.$input ) {
4638                 this.$input.remove();
4639         }
4640
4641         if ( !this.isSupported ) {
4642                 this.$input = null;
4643                 return;
4644         }
4645
4646         this.$input = $( '<input>' ).attr( 'type', 'file' );
4647         this.$input.on( 'change', this.onFileSelectedHandler );
4648         this.$input.on( 'click', function ( e ) {
4649                 // Prevents dropTarget to get clicked which calls
4650                 // a click on this input
4651                 e.stopPropagation();
4652         } );
4653         this.$input.attr( {
4654                 tabindex: -1
4655         } );
4656         if ( this.accept ) {
4657                 this.$input.attr( 'accept', this.accept.join( ', ' ) );
4658         }
4659         this.selectButton.$button.append( this.$input );
4660 };
4661
4662 /**
4663  * Determine if we should accept this file
4664  *
4665  * @private
4666  * @param {string} mimeType File MIME type
4667  * @return {boolean}
4668  */
4669 OO.ui.SelectFileWidget.prototype.isAllowedType = function ( mimeType ) {
4670         var i, mimeTest;
4671
4672         if ( !this.accept || !mimeType ) {
4673                 return true;
4674         }
4675
4676         for ( i = 0; i < this.accept.length; i++ ) {
4677                 mimeTest = this.accept[ i ];
4678                 if ( mimeTest === mimeType ) {
4679                         return true;
4680                 } else if ( mimeTest.substr( -2 ) === '/*' ) {
4681                         mimeTest = mimeTest.substr( 0, mimeTest.length - 1 );
4682                         if ( mimeType.substr( 0, mimeTest.length ) === mimeTest ) {
4683                                 return true;
4684                         }
4685                 }
4686         }
4687
4688         return false;
4689 };
4690
4691 /**
4692  * Handle file selection from the input
4693  *
4694  * @private
4695  * @param {jQuery.Event} e
4696  */
4697 OO.ui.SelectFileWidget.prototype.onFileSelected = function ( e ) {
4698         var file = OO.getProp( e.target, 'files', 0 ) || null;
4699
4700         if ( file && !this.isAllowedType( file.type ) ) {
4701                 file = null;
4702         }
4703
4704         this.setValue( file );
4705         this.addInput();
4706 };
4707
4708 /**
4709  * Handle clear button click events.
4710  *
4711  * @private
4712  */
4713 OO.ui.SelectFileWidget.prototype.onClearClick = function () {
4714         this.setValue( null );
4715         return false;
4716 };
4717
4718 /**
4719  * Handle key press events.
4720  *
4721  * @private
4722  * @param {jQuery.Event} e Key press event
4723  */
4724 OO.ui.SelectFileWidget.prototype.onKeyPress = function ( e ) {
4725         if ( this.isSupported && !this.isDisabled() && this.$input &&
4726                 ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER )
4727         ) {
4728                 this.$input.click();
4729                 return false;
4730         }
4731 };
4732
4733 /**
4734  * Handle drop target click events.
4735  *
4736  * @private
4737  * @param {jQuery.Event} e Key press event
4738  */
4739 OO.ui.SelectFileWidget.prototype.onDropTargetClick = function () {
4740         if ( this.isSupported && !this.isDisabled() && this.$input ) {
4741                 this.$input.click();
4742                 return false;
4743         }
4744 };
4745
4746 /**
4747  * Handle drag enter and over events
4748  *
4749  * @private
4750  * @param {jQuery.Event} e Drag event
4751  */
4752 OO.ui.SelectFileWidget.prototype.onDragEnterOrOver = function ( e ) {
4753         var itemOrFile,
4754                 droppableFile = false,
4755                 dt = e.originalEvent.dataTransfer;
4756
4757         e.preventDefault();
4758         e.stopPropagation();
4759
4760         if ( this.isDisabled() || !this.isSupported ) {
4761                 this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
4762                 dt.dropEffect = 'none';
4763                 return false;
4764         }
4765
4766         // DataTransferItem and File both have a type property, but in Chrome files
4767         // have no information at this point.
4768         itemOrFile = OO.getProp( dt, 'items', 0 ) || OO.getProp( dt, 'files', 0 );
4769         if ( itemOrFile ) {
4770                 if ( this.isAllowedType( itemOrFile.type ) ) {
4771                         droppableFile = true;
4772                 }
4773         // dt.types is Array-like, but not an Array
4774         } else if ( Array.prototype.indexOf.call( OO.getProp( dt, 'types' ) || [], 'Files' ) !== -1 ) {
4775                 // File information is not available at this point for security so just assume
4776                 // it is acceptable for now.
4777                 // https://bugzilla.mozilla.org/show_bug.cgi?id=640534
4778                 droppableFile = true;
4779         }
4780
4781         this.$element.toggleClass( 'oo-ui-selectFileWidget-canDrop', droppableFile );
4782         if ( !droppableFile ) {
4783                 dt.dropEffect = 'none';
4784         }
4785
4786         return false;
4787 };
4788
4789 /**
4790  * Handle drag leave events
4791  *
4792  * @private
4793  * @param {jQuery.Event} e Drag event
4794  */
4795 OO.ui.SelectFileWidget.prototype.onDragLeave = function () {
4796         this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
4797 };
4798
4799 /**
4800  * Handle drop events
4801  *
4802  * @private
4803  * @param {jQuery.Event} e Drop event
4804  */
4805 OO.ui.SelectFileWidget.prototype.onDrop = function ( e ) {
4806         var file = null,
4807                 dt = e.originalEvent.dataTransfer;
4808
4809         e.preventDefault();
4810         e.stopPropagation();
4811         this.$element.removeClass( 'oo-ui-selectFileWidget-canDrop' );
4812
4813         if ( this.isDisabled() || !this.isSupported ) {
4814                 return false;
4815         }
4816
4817         file = OO.getProp( dt, 'files', 0 );
4818         if ( file && !this.isAllowedType( file.type ) ) {
4819                 file = null;
4820         }
4821         if ( file ) {
4822                 this.setValue( file );
4823         }
4824
4825         return false;
4826 };
4827
4828 /**
4829  * @inheritdoc
4830  */
4831 OO.ui.SelectFileWidget.prototype.setDisabled = function ( disabled ) {
4832         OO.ui.SelectFileWidget.parent.prototype.setDisabled.call( this, disabled );
4833         if ( this.selectButton ) {
4834                 this.selectButton.setDisabled( disabled );
4835         }
4836         if ( this.clearButton ) {
4837                 this.clearButton.setDisabled( disabled );
4838         }
4839         return this;
4840 };
4841
4842 /**
4843  * SearchWidgets combine a {@link OO.ui.TextInputWidget text input field}, where users can type a search query,
4844  * and a menu of search results, which is displayed beneath the query
4845  * field. Unlike {@link OO.ui.mixin.LookupElement lookup menus}, search result menus are always visible to the user.
4846  * Users can choose an item from the menu or type a query into the text field to search for a matching result item.
4847  * In general, search widgets are used inside a separate {@link OO.ui.Dialog dialog} window.
4848  *
4849  * Each time the query is changed, the search result menu is cleared and repopulated. Please see
4850  * the [OOjs UI demos][1] for an example.
4851  *
4852  * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/#dialogs-mediawiki-vector-ltr
4853  *
4854  * @class
4855  * @extends OO.ui.Widget
4856  *
4857  * @constructor
4858  * @param {Object} [config] Configuration options
4859  * @cfg {string|jQuery} [placeholder] Placeholder text for query input
4860  * @cfg {string} [value] Initial query value
4861  */
4862 OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
4863         // Configuration initialization
4864         config = config || {};
4865
4866         // Parent constructor
4867         OO.ui.SearchWidget.parent.call( this, config );
4868
4869         // Properties
4870         this.query = new OO.ui.TextInputWidget( {
4871                 icon: 'search',
4872                 placeholder: config.placeholder,
4873                 value: config.value
4874         } );
4875         this.results = new OO.ui.SelectWidget();
4876         this.$query = $( '<div>' );
4877         this.$results = $( '<div>' );
4878
4879         // Events
4880         this.query.connect( this, {
4881                 change: 'onQueryChange',
4882                 enter: 'onQueryEnter'
4883         } );
4884         this.query.$input.on( 'keydown', this.onQueryKeydown.bind( this ) );
4885
4886         // Initialization
4887         this.$query
4888                 .addClass( 'oo-ui-searchWidget-query' )
4889                 .append( this.query.$element );
4890         this.$results
4891                 .addClass( 'oo-ui-searchWidget-results' )
4892                 .append( this.results.$element );
4893         this.$element
4894                 .addClass( 'oo-ui-searchWidget' )
4895                 .append( this.$results, this.$query );
4896 };
4897
4898 /* Setup */
4899
4900 OO.inheritClass( OO.ui.SearchWidget, OO.ui.Widget );
4901
4902 /* Methods */
4903
4904 /**
4905  * Handle query key down events.
4906  *
4907  * @private
4908  * @param {jQuery.Event} e Key down event
4909  */
4910 OO.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) {
4911         var highlightedItem, nextItem,
4912                 dir = e.which === OO.ui.Keys.DOWN ? 1 : ( e.which === OO.ui.Keys.UP ? -1 : 0 );
4913
4914         if ( dir ) {
4915                 highlightedItem = this.results.getHighlightedItem();
4916                 if ( !highlightedItem ) {
4917                         highlightedItem = this.results.getSelectedItem();
4918                 }
4919                 nextItem = this.results.getRelativeSelectableItem( highlightedItem, dir );
4920                 this.results.highlightItem( nextItem );
4921                 nextItem.scrollElementIntoView();
4922         }
4923 };
4924
4925 /**
4926  * Handle select widget select events.
4927  *
4928  * Clears existing results. Subclasses should repopulate items according to new query.
4929  *
4930  * @private
4931  * @param {string} value New value
4932  */
4933 OO.ui.SearchWidget.prototype.onQueryChange = function () {
4934         // Reset
4935         this.results.clearItems();
4936 };
4937
4938 /**
4939  * Handle select widget enter key events.
4940  *
4941  * Chooses highlighted item.
4942  *
4943  * @private
4944  * @param {string} value New value
4945  */
4946 OO.ui.SearchWidget.prototype.onQueryEnter = function () {
4947         var highlightedItem = this.results.getHighlightedItem();
4948         if ( highlightedItem ) {
4949                 this.results.chooseItem( highlightedItem );
4950         }
4951 };
4952
4953 /**
4954  * Get the query input.
4955  *
4956  * @return {OO.ui.TextInputWidget} Query input
4957  */
4958 OO.ui.SearchWidget.prototype.getQuery = function () {
4959         return this.query;
4960 };
4961
4962 /**
4963  * Get the search results menu.
4964  *
4965  * @return {OO.ui.SelectWidget} Menu of search results
4966  */
4967 OO.ui.SearchWidget.prototype.getResults = function () {
4968         return this.results;
4969 };
4970
4971 /**
4972  * NumberInputWidgets combine a {@link OO.ui.TextInputWidget text input} (where a value
4973  * can be entered manually) and two {@link OO.ui.ButtonWidget button widgets}
4974  * (to adjust the value in increments) to allow the user to enter a number.
4975  *
4976  *     @example
4977  *     // Example: A NumberInputWidget.
4978  *     var numberInput = new OO.ui.NumberInputWidget( {
4979  *         label: 'NumberInputWidget',
4980  *         input: { value: 5 },
4981  *         min: 1,
4982  *         max: 10
4983  *     } );
4984  *     $( 'body' ).append( numberInput.$element );
4985  *
4986  * @class
4987  * @extends OO.ui.Widget
4988  *
4989  * @constructor
4990  * @param {Object} [config] Configuration options
4991  * @cfg {Object} [input] Configuration options to pass to the {@link OO.ui.TextInputWidget text input widget}.
4992  * @cfg {Object} [minusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget decrementing button widget}.
4993  * @cfg {Object} [plusButton] Configuration options to pass to the {@link OO.ui.ButtonWidget incrementing button widget}.
4994  * @cfg {boolean} [isInteger=false] Whether the field accepts only integer values.
4995  * @cfg {number} [min=-Infinity] Minimum allowed value
4996  * @cfg {number} [max=Infinity] Maximum allowed value
4997  * @cfg {number} [step=1] Delta when using the buttons or up/down arrow keys
4998  * @cfg {number|null} [pageStep] Delta when using the page-up/page-down keys. Defaults to 10 times #step.
4999  * @cfg {boolean} [showButtons=true] Whether to show the plus and minus buttons.
5000  */
5001 OO.ui.NumberInputWidget = function OoUiNumberInputWidget( config ) {
5002         // Configuration initialization
5003         config = $.extend( {
5004                 isInteger: false,
5005                 min: -Infinity,
5006                 max: Infinity,
5007                 step: 1,
5008                 pageStep: null,
5009                 showButtons: true
5010         }, config );
5011
5012         // Parent constructor
5013         OO.ui.NumberInputWidget.parent.call( this, config );
5014
5015         // Properties
5016         this.input = new OO.ui.TextInputWidget( $.extend(
5017                 {
5018                         disabled: this.isDisabled(),
5019                         type: 'number'
5020                 },
5021                 config.input
5022         ) );
5023         if ( config.showButtons ) {
5024                 this.minusButton = new OO.ui.ButtonWidget( $.extend(
5025                         {
5026                                 disabled: this.isDisabled(),
5027                                 tabIndex: -1,
5028                                 classes: [ 'oo-ui-numberInputWidget-minusButton' ],
5029                                 label: '−'
5030                         },
5031                         config.minusButton
5032                 ) );
5033                 this.plusButton = new OO.ui.ButtonWidget( $.extend(
5034                         {
5035                                 disabled: this.isDisabled(),
5036                                 tabIndex: -1,
5037                                 classes: [ 'oo-ui-numberInputWidget-plusButton' ],
5038                                 label: '+'
5039                         },
5040                         config.plusButton
5041                 ) );
5042         }
5043
5044         // Events
5045         this.input.connect( this, {
5046                 change: this.emit.bind( this, 'change' ),
5047                 enter: this.emit.bind( this, 'enter' )
5048         } );
5049         this.input.$input.on( {
5050                 keydown: this.onKeyDown.bind( this ),
5051                 'wheel mousewheel DOMMouseScroll': this.onWheel.bind( this )
5052         } );
5053         if ( config.showButtons ) {
5054                 this.plusButton.connect( this, {
5055                         click: [ 'onButtonClick', +1 ]
5056                 } );
5057                 this.minusButton.connect( this, {
5058                         click: [ 'onButtonClick', -1 ]
5059                 } );
5060         }
5061
5062         // Initialization
5063         this.setIsInteger( !!config.isInteger );
5064         this.setRange( config.min, config.max );
5065         this.setStep( config.step, config.pageStep );
5066
5067         this.$field = $( '<div>' ).addClass( 'oo-ui-numberInputWidget-field' )
5068                 .append( this.input.$element );
5069         this.$element.addClass( 'oo-ui-numberInputWidget' ).append( this.$field );
5070         if ( config.showButtons ) {
5071                 this.$field
5072                         .prepend( this.minusButton.$element )
5073                         .append( this.plusButton.$element );
5074                 this.$element.addClass( 'oo-ui-numberInputWidget-buttoned' );
5075         }
5076         this.input.setValidation( this.validateNumber.bind( this ) );
5077 };
5078
5079 /* Setup */
5080
5081 OO.inheritClass( OO.ui.NumberInputWidget, OO.ui.Widget );
5082
5083 /* Events */
5084
5085 /**
5086  * A `change` event is emitted when the value of the input changes.
5087  *
5088  * @event change
5089  */
5090
5091 /**
5092  * An `enter` event is emitted when the user presses 'enter' inside the text box.
5093  *
5094  * @event enter
5095  */
5096
5097 /* Methods */
5098
5099 /**
5100  * Set whether only integers are allowed
5101  *
5102  * @param {boolean} flag
5103  */
5104 OO.ui.NumberInputWidget.prototype.setIsInteger = function ( flag ) {
5105         this.isInteger = !!flag;
5106         this.input.setValidityFlag();
5107 };
5108
5109 /**
5110  * Get whether only integers are allowed
5111  *
5112  * @return {boolean} Flag value
5113  */
5114 OO.ui.NumberInputWidget.prototype.getIsInteger = function () {
5115         return this.isInteger;
5116 };
5117
5118 /**
5119  * Set the range of allowed values
5120  *
5121  * @param {number} min Minimum allowed value
5122  * @param {number} max Maximum allowed value
5123  */
5124 OO.ui.NumberInputWidget.prototype.setRange = function ( min, max ) {
5125         if ( min > max ) {
5126                 throw new Error( 'Minimum (' + min + ') must not be greater than maximum (' + max + ')' );
5127         }
5128         this.min = min;
5129         this.max = max;
5130         this.input.setValidityFlag();
5131 };
5132
5133 /**
5134  * Get the current range
5135  *
5136  * @return {number[]} Minimum and maximum values
5137  */
5138 OO.ui.NumberInputWidget.prototype.getRange = function () {
5139         return [ this.min, this.max ];
5140 };
5141
5142 /**
5143  * Set the stepping deltas
5144  *
5145  * @param {number} step Normal step
5146  * @param {number|null} pageStep Page step. If null, 10 * step will be used.
5147  */
5148 OO.ui.NumberInputWidget.prototype.setStep = function ( step, pageStep ) {
5149         if ( step <= 0 ) {
5150                 throw new Error( 'Step value must be positive' );
5151         }
5152         if ( pageStep === null ) {
5153                 pageStep = step * 10;
5154         } else if ( pageStep <= 0 ) {
5155                 throw new Error( 'Page step value must be positive' );
5156         }
5157         this.step = step;
5158         this.pageStep = pageStep;
5159 };
5160
5161 /**
5162  * Get the current stepping values
5163  *
5164  * @return {number[]} Step and page step
5165  */
5166 OO.ui.NumberInputWidget.prototype.getStep = function () {
5167         return [ this.step, this.pageStep ];
5168 };
5169
5170 /**
5171  * Get the current value of the widget
5172  *
5173  * @return {string}
5174  */
5175 OO.ui.NumberInputWidget.prototype.getValue = function () {
5176         return this.input.getValue();
5177 };
5178
5179 /**
5180  * Get the current value of the widget as a number
5181  *
5182  * @return {number} May be NaN, or an invalid number
5183  */
5184 OO.ui.NumberInputWidget.prototype.getNumericValue = function () {
5185         return +this.input.getValue();
5186 };
5187
5188 /**
5189  * Set the value of the widget
5190  *
5191  * @param {string} value Invalid values are allowed
5192  */
5193 OO.ui.NumberInputWidget.prototype.setValue = function ( value ) {
5194         this.input.setValue( value );
5195 };
5196
5197 /**
5198  * Adjust the value of the widget
5199  *
5200  * @param {number} delta Adjustment amount
5201  */
5202 OO.ui.NumberInputWidget.prototype.adjustValue = function ( delta ) {
5203         var n, v = this.getNumericValue();
5204
5205         delta = +delta;
5206         if ( isNaN( delta ) || !isFinite( delta ) ) {
5207                 throw new Error( 'Delta must be a finite number' );
5208         }
5209
5210         if ( isNaN( v ) ) {
5211                 n = 0;
5212         } else {
5213                 n = v + delta;
5214                 n = Math.max( Math.min( n, this.max ), this.min );
5215                 if ( this.isInteger ) {
5216                         n = Math.round( n );
5217                 }
5218         }
5219
5220         if ( n !== v ) {
5221                 this.setValue( n );
5222         }
5223 };
5224
5225 /**
5226  * Validate input
5227  *
5228  * @private
5229  * @param {string} value Field value
5230  * @return {boolean}
5231  */
5232 OO.ui.NumberInputWidget.prototype.validateNumber = function ( value ) {
5233         var n = +value;
5234         if ( isNaN( n ) || !isFinite( n ) ) {
5235                 return false;
5236         }
5237
5238         /* eslint-disable no-bitwise */
5239         if ( this.isInteger && ( n | 0 ) !== n ) {
5240                 return false;
5241         }
5242         /* eslint-enable no-bitwise */
5243
5244         if ( n < this.min || n > this.max ) {
5245                 return false;
5246         }
5247
5248         return true;
5249 };
5250
5251 /**
5252  * Handle mouse click events.
5253  *
5254  * @private
5255  * @param {number} dir +1 or -1
5256  */
5257 OO.ui.NumberInputWidget.prototype.onButtonClick = function ( dir ) {
5258         this.adjustValue( dir * this.step );
5259 };
5260
5261 /**
5262  * Handle mouse wheel events.
5263  *
5264  * @private
5265  * @param {jQuery.Event} event
5266  */
5267 OO.ui.NumberInputWidget.prototype.onWheel = function ( event ) {
5268         var delta = 0;
5269
5270         if ( !this.isDisabled() && this.input.$input.is( ':focus' ) ) {
5271                 // Standard 'wheel' event
5272                 if ( event.originalEvent.deltaMode !== undefined ) {
5273                         this.sawWheelEvent = true;
5274                 }
5275                 if ( event.originalEvent.deltaY ) {
5276                         delta = -event.originalEvent.deltaY;
5277                 } else if ( event.originalEvent.deltaX ) {
5278                         delta = event.originalEvent.deltaX;
5279                 }
5280
5281                 // Non-standard events
5282                 if ( !this.sawWheelEvent ) {
5283                         if ( event.originalEvent.wheelDeltaX ) {
5284                                 delta = -event.originalEvent.wheelDeltaX;
5285                         } else if ( event.originalEvent.wheelDeltaY ) {
5286                                 delta = event.originalEvent.wheelDeltaY;
5287                         } else if ( event.originalEvent.wheelDelta ) {
5288                                 delta = event.originalEvent.wheelDelta;
5289                         } else if ( event.originalEvent.detail ) {
5290                                 delta = -event.originalEvent.detail;
5291                         }
5292                 }
5293
5294                 if ( delta ) {
5295                         delta = delta < 0 ? -1 : 1;
5296                         this.adjustValue( delta * this.step );
5297                 }
5298
5299                 return false;
5300         }
5301 };
5302
5303 /**
5304  * Handle key down events.
5305  *
5306  * @private
5307  * @param {jQuery.Event} e Key down event
5308  */
5309 OO.ui.NumberInputWidget.prototype.onKeyDown = function ( e ) {
5310         if ( !this.isDisabled() ) {
5311                 switch ( e.which ) {
5312                         case OO.ui.Keys.UP:
5313                                 this.adjustValue( this.step );
5314                                 return false;
5315                         case OO.ui.Keys.DOWN:
5316                                 this.adjustValue( -this.step );
5317                                 return false;
5318                         case OO.ui.Keys.PAGEUP:
5319                                 this.adjustValue( this.pageStep );
5320                                 return false;
5321                         case OO.ui.Keys.PAGEDOWN:
5322                                 this.adjustValue( -this.pageStep );
5323                                 return false;
5324                 }
5325         }
5326 };
5327
5328 /**
5329  * @inheritdoc
5330  */
5331 OO.ui.NumberInputWidget.prototype.setDisabled = function ( disabled ) {
5332         // Parent method
5333         OO.ui.NumberInputWidget.parent.prototype.setDisabled.call( this, disabled );
5334
5335         if ( this.input ) {
5336                 this.input.setDisabled( this.isDisabled() );
5337         }
5338         if ( this.minusButton ) {
5339                 this.minusButton.setDisabled( this.isDisabled() );
5340         }
5341         if ( this.plusButton ) {
5342                 this.plusButton.setDisabled( this.isDisabled() );
5343         }
5344
5345         return this;
5346 };
5347
5348 }( OO ) );