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

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