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

   1 /*!
   2  * OOjs UI v0.1.0-pre (99068355d6)
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2014 OOjs Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: Tue Jun 10 2014 11:03:38 GMT-0700 (PDT)
  10  */
  11 ( function ( OO ) {
  12
  13 'use strict';
  14 /**
  15  * Namespace for all classes, static methods and static properties.
  16  *
  17  * @class
  18  * @singleton
  19  */
  20 OO.ui = {};
  21
  22 OO.ui.bind = $.proxy;
  23
  24 /**
  25  * @property {Object}
  26  */
  27 OO.ui.Keys = {
  28         'UNDEFINED': 0,
  29         'BACKSPACE': 8,
  30         'DELETE': 46,
  31         'LEFT': 37,
  32         'RIGHT': 39,
  33         'UP': 38,
  34         'DOWN': 40,
  35         'ENTER': 13,
  36         'END': 35,
  37         'HOME': 36,
  38         'TAB': 9,
  39         'PAGEUP': 33,
  40         'PAGEDOWN': 34,
  41         'ESCAPE': 27,
  42         'SHIFT': 16,
  43         'SPACE': 32
  44 };
  45
  46 /**
  47  * Get the user's language and any fallback languages.
  48  *
  49  * These language codes are used to localize user interface elements in the user's language.
  50  *
  51  * In environments that provide a localization system, this function should be overridden to
  52  * return the user's language(s). The default implementation returns English (en) only.
  53  *
  54  * @return {string[]} Language codes, in descending order of priority
  55  */
  56 OO.ui.getUserLanguages = function () {
  57         return [ 'en' ];
  58 };
  59
  60 /**
  61  * Get a value in an object keyed by language code.
  62  *
  63  * @param {Object.<string,Mixed>} obj Object keyed by language code
  64  * @param {string|null} [lang] Language code, if omitted or null defaults to any user language
  65  * @param {string} [fallback] Fallback code, used if no matching language can be found
  66  * @return {Mixed} Local value
  67  */
  68 OO.ui.getLocalValue = function ( obj, lang, fallback ) {
  69         var i, len, langs;
  70
  71         // Requested language
  72         if ( obj[lang] ) {
  73                 return obj[lang];
  74         }
  75         // Known user language
  76         langs = OO.ui.getUserLanguages();
  77         for ( i = 0, len = langs.length; i < len; i++ ) {
  78                 lang = langs[i];
  79                 if ( obj[lang] ) {
  80                         return obj[lang];
  81                 }
  82         }
  83         // Fallback language
  84         if ( obj[fallback] ) {
  85                 return obj[fallback];
  86         }
  87         // First existing language
  88         for ( lang in obj ) {
  89                 return obj[lang];
  90         }
  91
  92         return undefined;
  93 };
  94
  95 ( function () {
  96
  97 /**
  98  * Message store for the default implementation of OO.ui.msg
  99  *
 100  * Environments that provide a localization system should not use this, but should override
 101  * OO.ui.msg altogether.
 102  *
 103  * @private
 104  */
 105 var messages = {
 106         // Label text for button to exit from dialog
 107         'ooui-dialog-action-close': 'Close',
 108         // Tool tip for a button that moves items in a list down one place
 109         'ooui-outline-control-move-down': 'Move item down',
 110         // Tool tip for a button that moves items in a list up one place
 111         'ooui-outline-control-move-up': 'Move item up',
 112         // Tool tip for a button that removes items from a list
 113         'ooui-outline-control-remove': 'Remove item',
 114         // Label for the toolbar group that contains a list of all other available tools
 115         'ooui-toolbar-more': 'More',
 116
 117         // Label for the generic dialog used to confirm things
 118         'ooui-dialog-confirm-title': 'Confirm',
 119         // The default prompt of a confirmation dialog
 120         'ooui-dialog-confirm-default-prompt': 'Are you sure?',
 121         // The default OK button text on a confirmation dialog
 122         'ooui-dialog-confirm-default-ok': 'OK',
 123         // The default cancel button text on a confirmation dialog
 124         'ooui-dialog-confirm-default-cancel': 'Cancel'
 125 };
 126
 127 /**
 128  * Get a localized message.
 129  *
 130  * In environments that provide a localization system, this function should be overridden to
 131  * return the message translated in the user's language. The default implementation always returns
 132  * English messages.
 133  *
 134  * After the message key, message parameters may optionally be passed. In the default implementation,
 135  * any occurrences of $1 are replaced with the first parameter, $2 with the second parameter, etc.
 136  * Alternative implementations of OO.ui.msg may use any substitution system they like, as long as
 137  * they support unnamed, ordered message parameters.
 138  *
 139  * @abstract
 140  * @param {string} key Message key
 141  * @param {Mixed...} [params] Message parameters
 142  * @return {string} Translated message with parameters substituted
 143  */
 144 OO.ui.msg = function ( key ) {
 145         var message = messages[key], params = Array.prototype.slice.call( arguments, 1 );
 146         if ( typeof message === 'string' ) {
 147                 // Perform $1 substitution
 148                 message = message.replace( /\$(\d+)/g, function ( unused, n ) {
 149                         var i = parseInt( n, 10 );
 150                         return params[i - 1] !== undefined ? params[i - 1] : '$' + n;
 151                 } );
 152         } else {
 153                 // Return placeholder if message not found
 154                 message = '[' + key + ']';
 155         }
 156         return message;
 157 };
 158
 159 /** */
 160 OO.ui.deferMsg = function ( key ) {
 161         return function () {
 162                 return OO.ui.msg( key );
 163         };
 164 };
 165
 166 /** */
 167 OO.ui.resolveMsg = function ( msg ) {
 168         if ( $.isFunction( msg ) ) {
 169                 return msg();
 170         }
 171         return msg;
 172 };
 173
 174 } )();
 175 /**
 176  * DOM element abstraction.
 177  *
 178  * @abstract
 179  * @class
 180  *
 181  * @constructor
 182  * @param {Object} [config] Configuration options
 183  * @cfg {Function} [$] jQuery for the frame the widget is in
 184  * @cfg {string[]} [classes] CSS class names
 185  * @cfg {string} [text] Text to insert
 186  * @cfg {jQuery} [$content] Content elements to append (after text)
 187  */
 188 OO.ui.Element = function OoUiElement( config ) {
 189         // Configuration initialization
 190         config = config || {};
 191
 192         // Properties
 193         this.$ = config.$ || OO.ui.Element.getJQuery( document );
 194         this.$element = this.$( this.$.context.createElement( this.getTagName() ) );
 195         this.elementGroup = null;
 196
 197         // Initialization
 198         if ( $.isArray( config.classes ) ) {
 199                 this.$element.addClass( config.classes.join( ' ' ) );
 200         }
 201         if ( config.text ) {
 202                 this.$element.text( config.text );
 203         }
 204         if ( config.$content ) {
 205                 this.$element.append( config.$content );
 206         }
 207 };
 208
 209 /* Setup */
 210
 211 OO.initClass( OO.ui.Element );
 212
 213 /* Static Properties */
 214
 215 /**
 216  * HTML tag name.
 217  *
 218  * This may be ignored if getTagName is overridden.
 219  *
 220  * @static
 221  * @inheritable
 222  * @property {string}
 223  */
 224 OO.ui.Element.static.tagName = 'div';
 225
 226 /* Static Methods */
 227
 228 /**
 229  * Get a jQuery function within a specific document.
 230  *
 231  * @static
 232  * @param {jQuery|HTMLElement|HTMLDocument|Window} context Context to bind the function to
 233  * @param {OO.ui.Frame} [frame] Frame of the document context
 234  * @return {Function} Bound jQuery function
 235  */
 236 OO.ui.Element.getJQuery = function ( context, frame ) {
 237         function wrapper( selector ) {
 238                 return $( selector, wrapper.context );
 239         }
 240
 241         wrapper.context = this.getDocument( context );
 242
 243         if ( frame ) {
 244                 wrapper.frame = frame;
 245         }
 246
 247         return wrapper;
 248 };
 249
 250 /**
 251  * Get the document of an element.
 252  *
 253  * @static
 254  * @param {jQuery|HTMLElement|HTMLDocument|Window} obj Object to get the document for
 255  * @return {HTMLDocument|null} Document object
 256  */
 257 OO.ui.Element.getDocument = function ( obj ) {
 258         // jQuery - selections created "offscreen" won't have a context, so .context isn't reliable
 259         return ( obj[0] && obj[0].ownerDocument ) ||
 260                 // Empty jQuery selections might have a context
 261                 obj.context ||
 262                 // HTMLElement
 263                 obj.ownerDocument ||
 264                 // Window
 265                 obj.document ||
 266                 // HTMLDocument
 267                 ( obj.nodeType === 9 && obj ) ||
 268                 null;
 269 };
 270
 271 /**
 272  * Get the window of an element or document.
 273  *
 274  * @static
 275  * @param {jQuery|HTMLElement|HTMLDocument|Window} obj Context to get the window for
 276  * @return {Window} Window object
 277  */
 278 OO.ui.Element.getWindow = function ( obj ) {
 279         var doc = this.getDocument( obj );
 280         return doc.parentWindow || doc.defaultView;
 281 };
 282
 283 /**
 284  * Get the direction of an element or document.
 285  *
 286  * @static
 287  * @param {jQuery|HTMLElement|HTMLDocument|Window} obj Context to get the direction for
 288  * @return {string} Text direction, either `ltr` or `rtl`
 289  */
 290 OO.ui.Element.getDir = function ( obj ) {
 291         var isDoc, isWin;
 292
 293         if ( obj instanceof jQuery ) {
 294                 obj = obj[0];
 295         }
 296         isDoc = obj.nodeType === 9;
 297         isWin = obj.document !== undefined;
 298         if ( isDoc || isWin ) {
 299                 if ( isWin ) {
 300                         obj = obj.document;
 301                 }
 302                 obj = obj.body;
 303         }
 304         return $( obj ).css( 'direction' );
 305 };
 306
 307 /**
 308  * Get the offset between two frames.
 309  *
 310  * TODO: Make this function not use recursion.
 311  *
 312  * @static
 313  * @param {Window} from Window of the child frame
 314  * @param {Window} [to=window] Window of the parent frame
 315  * @param {Object} [offset] Offset to start with, used internally
 316  * @return {Object} Offset object, containing left and top properties
 317  */
 318 OO.ui.Element.getFrameOffset = function ( from, to, offset ) {
 319         var i, len, frames, frame, rect;
 320
 321         if ( !to ) {
 322                 to = window;
 323         }
 324         if ( !offset ) {
 325                 offset = { 'top': 0, 'left': 0 };
 326         }
 327         if ( from.parent === from ) {
 328                 return offset;
 329         }
 330
 331         // Get iframe element
 332         frames = from.parent.document.getElementsByTagName( 'iframe' );
 333         for ( i = 0, len = frames.length; i < len; i++ ) {
 334                 if ( frames[i].contentWindow === from ) {
 335                         frame = frames[i];
 336                         break;
 337                 }
 338         }
 339
 340         // Recursively accumulate offset values
 341         if ( frame ) {
 342                 rect = frame.getBoundingClientRect();
 343                 offset.left += rect.left;
 344                 offset.top += rect.top;
 345                 if ( from !== to ) {
 346                         this.getFrameOffset( from.parent, offset );
 347                 }
 348         }
 349         return offset;
 350 };
 351
 352 /**
 353  * Get the offset between two elements.
 354  *
 355  * @static
 356  * @param {jQuery} $from
 357  * @param {jQuery} $to
 358  * @return {Object} Translated position coordinates, containing top and left properties
 359  */
 360 OO.ui.Element.getRelativePosition = function ( $from, $to ) {
 361         var from = $from.offset(),
 362                 to = $to.offset();
 363         return { 'top': Math.round( from.top - to.top ), 'left': Math.round( from.left - to.left ) };
 364 };
 365
 366 /**
 367  * Get element border sizes.
 368  *
 369  * @static
 370  * @param {HTMLElement} el Element to measure
 371  * @return {Object} Dimensions object with `top`, `left`, `bottom` and `right` properties
 372  */
 373 OO.ui.Element.getBorders = function ( el ) {
 374         var doc = el.ownerDocument,
 375                 win = doc.parentWindow || doc.defaultView,
 376                 style = win && win.getComputedStyle ?
 377                         win.getComputedStyle( el, null ) :
 378                         el.currentStyle,
 379                 $el = $( el ),
 380                 top = parseFloat( style ? style.borderTopWidth : $el.css( 'borderTopWidth' ) ) || 0,
 381                 left = parseFloat( style ? style.borderLeftWidth : $el.css( 'borderLeftWidth' ) ) || 0,
 382                 bottom = parseFloat( style ? style.borderBottomWidth : $el.css( 'borderBottomWidth' ) ) || 0,
 383                 right = parseFloat( style ? style.borderRightWidth : $el.css( 'borderRightWidth' ) ) || 0;
 384
 385         return {
 386                 'top': Math.round( top ),
 387                 'left': Math.round( left ),
 388                 'bottom': Math.round( bottom ),
 389                 'right': Math.round( right )
 390         };
 391 };
 392
 393 /**
 394  * Get dimensions of an element or window.
 395  *
 396  * @static
 397  * @param {HTMLElement|Window} el Element to measure
 398  * @return {Object} Dimensions object with `borders`, `scroll`, `scrollbar` and `rect` properties
 399  */
 400 OO.ui.Element.getDimensions = function ( el ) {
 401         var $el, $win,
 402                 doc = el.ownerDocument || el.document,
 403                 win = doc.parentWindow || doc.defaultView;
 404
 405         if ( win === el || el === doc.documentElement ) {
 406                 $win = $( win );
 407                 return {
 408                         'borders': { 'top': 0, 'left': 0, 'bottom': 0, 'right': 0 },
 409                         'scroll': {
 410                                 'top': $win.scrollTop(),
 411                                 'left': $win.scrollLeft()
 412                         },
 413                         'scrollbar': { 'right': 0, 'bottom': 0 },
 414                         'rect': {
 415                                 'top': 0,
 416                                 'left': 0,
 417                                 'bottom': $win.innerHeight(),
 418                                 'right': $win.innerWidth()
 419                         }
 420                 };
 421         } else {
 422                 $el = $( el );
 423                 return {
 424                         'borders': this.getBorders( el ),
 425                         'scroll': {
 426                                 'top': $el.scrollTop(),
 427                                 'left': $el.scrollLeft()
 428                         },
 429                         'scrollbar': {
 430                                 'right': $el.innerWidth() - el.clientWidth,
 431                                 'bottom': $el.innerHeight() - el.clientHeight
 432                         },
 433                         'rect': el.getBoundingClientRect()
 434                 };
 435         }
 436 };
 437
 438 /**
 439  * Get closest scrollable container.
 440  *
 441  * Traverses up until either a scrollable element or the root is reached, in which case the window
 442  * will be returned.
 443  *
 444  * @static
 445  * @param {HTMLElement} el Element to find scrollable container for
 446  * @param {string} [dimension] Dimension of scrolling to look for; `x`, `y` or omit for either
 447  * @return {HTMLElement|Window} Closest scrollable container
 448  */
 449 OO.ui.Element.getClosestScrollableContainer = function ( el, dimension ) {
 450         var i, val,
 451                 props = [ 'overflow' ],
 452                 $parent = $( el ).parent();
 453
 454         if ( dimension === 'x' || dimension === 'y' ) {
 455                 props.push( 'overflow-' + dimension );
 456         }
 457
 458         while ( $parent.length ) {
 459                 if ( $parent[0] === el.ownerDocument.body ) {
 460                         return $parent[0];
 461                 }
 462                 i = props.length;
 463                 while ( i-- ) {
 464                         val = $parent.css( props[i] );
 465                         if ( val === 'auto' || val === 'scroll' ) {
 466                                 return $parent[0];
 467                         }
 468                 }
 469                 $parent = $parent.parent();
 470         }
 471         return this.getDocument( el ).body;
 472 };
 473
 474 /**
 475  * Scroll element into view.
 476  *
 477  * @static
 478  * @param {HTMLElement} el Element to scroll into view
 479  * @param {Object} [config={}] Configuration config
 480  * @param {string} [config.duration] jQuery animation duration value
 481  * @param {string} [config.direction] Scroll in only one direction, e.g. 'x' or 'y', omit
 482  *  to scroll in both directions
 483  * @param {Function} [config.complete] Function to call when scrolling completes
 484  */
 485 OO.ui.Element.scrollIntoView = function ( el, config ) {
 486         // Configuration initialization
 487         config = config || {};
 488
 489         var anim = {},
 490                 callback = typeof config.complete === 'function' && config.complete,
 491                 sc = this.getClosestScrollableContainer( el, config.direction ),
 492                 $sc = $( sc ),
 493                 eld = this.getDimensions( el ),
 494                 scd = this.getDimensions( sc ),
 495                 rel = {
 496                         'top': eld.rect.top - ( scd.rect.top + scd.borders.top ),
 497                         'bottom': scd.rect.bottom - scd.borders.bottom - scd.scrollbar.bottom - eld.rect.bottom,
 498                         'left': eld.rect.left - ( scd.rect.left + scd.borders.left ),
 499                         'right': scd.rect.right - scd.borders.right - scd.scrollbar.right - eld.rect.right
 500                 };
 501
 502         if ( !config.direction || config.direction === 'y' ) {
 503                 if ( rel.top < 0 ) {
 504                         anim.scrollTop = scd.scroll.top + rel.top;
 505                 } else if ( rel.top > 0 && rel.bottom < 0 ) {
 506                         anim.scrollTop = scd.scroll.top + Math.min( rel.top, -rel.bottom );
 507                 }
 508         }
 509         if ( !config.direction || config.direction === 'x' ) {
 510                 if ( rel.left < 0 ) {
 511                         anim.scrollLeft = scd.scroll.left + rel.left;
 512                 } else if ( rel.left > 0 && rel.right < 0 ) {
 513                         anim.scrollLeft = scd.scroll.left + Math.min( rel.left, -rel.right );
 514                 }
 515         }
 516         if ( !$.isEmptyObject( anim ) ) {
 517                 $sc.stop( true ).animate( anim, config.duration || 'fast' );
 518                 if ( callback ) {
 519                         $sc.queue( function ( next ) {
 520                                 callback();
 521                                 next();
 522                         } );
 523                 }
 524         } else {
 525                 if ( callback ) {
 526                         callback();
 527                 }
 528         }
 529 };
 530
 531 /* Methods */
 532
 533 /**
 534  * Get the HTML tag name.
 535  *
 536  * Override this method to base the result on instance information.
 537  *
 538  * @return {string} HTML tag name
 539  */
 540 OO.ui.Element.prototype.getTagName = function () {
 541         return this.constructor.static.tagName;
 542 };
 543
 544 /**
 545  * Check if the element is attached to the DOM
 546  * @return {boolean} The element is attached to the DOM
 547  */
 548 OO.ui.Element.prototype.isElementAttached = function () {
 549         return $.contains( this.getElementDocument(), this.$element[0] );
 550 };
 551
 552 /**
 553  * Get the DOM document.
 554  *
 555  * @return {HTMLDocument} Document object
 556  */
 557 OO.ui.Element.prototype.getElementDocument = function () {
 558         return OO.ui.Element.getDocument( this.$element );
 559 };
 560
 561 /**
 562  * Get the DOM window.
 563  *
 564  * @return {Window} Window object
 565  */
 566 OO.ui.Element.prototype.getElementWindow = function () {
 567         return OO.ui.Element.getWindow( this.$element );
 568 };
 569
 570 /**
 571  * Get closest scrollable container.
 572  */
 573 OO.ui.Element.prototype.getClosestScrollableElementContainer = function () {
 574         return OO.ui.Element.getClosestScrollableContainer( this.$element[0] );
 575 };
 576
 577 /**
 578  * Get group element is in.
 579  *
 580  * @return {OO.ui.GroupElement|null} Group element, null if none
 581  */
 582 OO.ui.Element.prototype.getElementGroup = function () {
 583         return this.elementGroup;
 584 };
 585
 586 /**
 587  * Set group element is in.
 588  *
 589  * @param {OO.ui.GroupElement|null} group Group element, null if none
 590  * @chainable
 591  */
 592 OO.ui.Element.prototype.setElementGroup = function ( group ) {
 593         this.elementGroup = group;
 594         return this;
 595 };
 596
 597 /**
 598  * Scroll element into view.
 599  *
 600  * @param {Object} [config={}]
 601  */
 602 OO.ui.Element.prototype.scrollElementIntoView = function ( config ) {
 603         return OO.ui.Element.scrollIntoView( this.$element[0], config );
 604 };
 605
 606 /**
 607  * Bind a handler for an event on this.$element
 608  *
 609  * @param {string} event
 610  * @param {Function} callback
 611  */
 612 OO.ui.Element.prototype.onDOMEvent = function ( event, callback ) {
 613         OO.ui.Element.onDOMEvent( this.$element, event, callback );
 614 };
 615
 616 /**
 617  * Unbind a handler bound with #offDOMEvent
 618  *
 619  * @param {string} event
 620  * @param {Function} callback
 621  */
 622 OO.ui.Element.prototype.offDOMEvent = function ( event, callback ) {
 623         OO.ui.Element.offDOMEvent( this.$element, event, callback );
 624 };
 625
 626 ( function () {
 627         // Static
 628
 629         // jQuery 1.8.3 has a bug with handling focusin/focusout events inside iframes.
 630         // Firefox doesn't support focusin/focusout at all, so we listen for 'focus'/'blur' on the
 631         // document, and simulate a 'focusin'/'focusout' event on the target element and make
 632         // it bubble from there.
 633         //
 634         // - http://jsfiddle.net/sw3hr/
 635         // - http://bugs.jquery.com/ticket/14180
 636         // - https://github.com/jquery/jquery/commit/1cecf64e5aa4153
 637         function specialEvent( simulatedName, realName ) {
 638                 function handler( e ) {
 639                         jQuery.event.simulate(
 640                                 simulatedName,
 641                                 e.target,
 642                                 jQuery.event.fix( e ),
 643                                 /* bubble = */ true
 644                         );
 645                 }
 646
 647                 return {
 648                         setup: function () {
 649                                 var doc = this.ownerDocument || this,
 650                                         attaches = $.data( doc, 'ooui-' + simulatedName + '-attaches' );
 651                                 if ( !attaches ) {
 652                                         doc.addEventListener( realName, handler, true );
 653                                 }
 654                                 $.data( doc, 'ooui-' + simulatedName + '-attaches', ( attaches || 0 ) + 1 );
 655                         },
 656                         teardown: function () {
 657                                 var doc = this.ownerDocument || this,
 658                                         attaches = $.data( doc, 'ooui-' + simulatedName + '-attaches' ) - 1;
 659                                 if ( !attaches ) {
 660                                         doc.removeEventListener( realName, handler, true );
 661                                         $.removeData( doc, 'ooui-' + simulatedName + '-attaches' );
 662                                 } else {
 663                                         $.data( doc, 'ooui-' + simulatedName + '-attaches', attaches );
 664                                 }
 665                         }
 666                 };
 667         }
 668
 669         var hasOwn = Object.prototype.hasOwnProperty,
 670                 specialEvents = {
 671                         focusin: specialEvent( 'focusin', 'focus' ),
 672                         focusout: specialEvent( 'focusout', 'blur' )
 673                 };
 674
 675         /**
 676          * Bind a handler for an event on a DOM element.
 677          *
 678          * Uses jQuery internally for everything except for events which are
 679          * known to have issues in the browser or in jQuery. This method
 680          * should become obsolete eventually.
 681          *
 682          * @static
 683          * @param {HTMLElement|jQuery} el DOM element
 684          * @param {string} event Event to bind
 685          * @param {Function} callback Callback to call when the event fires
 686          */
 687         OO.ui.Element.onDOMEvent = function ( el, event, callback ) {
 688                 var orig;
 689
 690                 if ( hasOwn.call( specialEvents, event ) ) {
 691                         // Replace jQuery's override with our own
 692                         orig = $.event.special[event];
 693                         $.event.special[event] = specialEvents[event];
 694
 695                         $( el ).on( event, callback );
 696
 697                         // Restore
 698                         $.event.special[event] = orig;
 699                 } else {
 700                         $( el ).on( event, callback );
 701                 }
 702         };
 703
 704         /**
 705          * Unbind a handler bound with #static-method-onDOMEvent.
 706          *
 707          * @static
 708          * @param {HTMLElement|jQuery} el DOM element
 709          * @param {string} event Event to unbind
 710          * @param {Function} [callback] Callback to unbind
 711          */
 712         OO.ui.Element.offDOMEvent = function ( el, event, callback ) {
 713                 var orig;
 714                 if ( hasOwn.call( specialEvents, event ) ) {
 715                         // Replace jQuery's override with our own
 716                         orig = $.event.special[event];
 717                         $.event.special[event] = specialEvents[event];
 718
 719                         $( el ).off( event, callback );
 720
 721                         // Restore
 722                         $.event.special[event] = orig;
 723                 } else {
 724                         $( el ).off( event, callback );
 725                 }
 726         };
 727 }() );
 728 /**
 729  * Embedded iframe with the same styles as its parent.
 730  *
 731  * @class
 732  * @extends OO.ui.Element
 733  * @mixins OO.EventEmitter
 734  *
 735  * @constructor
 736  * @param {Object} [config] Configuration options
 737  */
 738 OO.ui.Frame = function OoUiFrame( config ) {
 739         // Parent constructor
 740         OO.ui.Frame.super.call( this, config );
 741
 742         // Mixin constructors
 743         OO.EventEmitter.call( this );
 744
 745         // Properties
 746         this.loading = null;
 747         this.config = config;
 748
 749         // Initialize
 750         this.$element
 751                 .addClass( 'oo-ui-frame' )
 752                 .attr( { 'frameborder': 0, 'scrolling': 'no' } );
 753
 754 };
 755
 756 /* Setup */
 757
 758 OO.inheritClass( OO.ui.Frame, OO.ui.Element );
 759 OO.mixinClass( OO.ui.Frame, OO.EventEmitter );
 760
 761 /* Static Properties */
 762
 763 /**
 764  * @static
 765  * @inheritdoc
 766  */
 767 OO.ui.Frame.static.tagName = 'iframe';
 768
 769 /* Events */
 770
 771 /**
 772  * @event load
 773  */
 774
 775 /* Static Methods */
 776
 777 /**
 778  * Transplant the CSS styles from as parent document to a frame's document.
 779  *
 780  * This loops over the style sheets in the parent document, and copies their nodes to the
 781  * frame's document. It then polls the document to see when all styles have loaded, and once they
 782  * have, resolves the promise.
 783  *
 784  * If the styles still haven't loaded after a long time (5 seconds by default), we give up waiting
 785  * and resolve the promise anyway. This protects against cases like a display: none; iframe in
 786  * Firefox, where the styles won't load until the iframe becomes visible.
 787  *
 788  * For details of how we arrived at the strategy used in this function, see #load.
 789  *
 790  * @static
 791  * @inheritable
 792  * @param {HTMLDocument} parentDoc Document to transplant styles from
 793  * @param {HTMLDocument} frameDoc Document to transplant styles to
 794  * @param {number} [timeout=5000] How long to wait before giving up (in ms). If 0, never give up.
 795  * @return {jQuery.Promise} Promise resolved when styles have loaded
 796  */
 797 OO.ui.Frame.static.transplantStyles = function ( parentDoc, frameDoc, timeout ) {
 798         var i, numSheets, styleNode, newNode, timeoutID, pollNodeId, $pendingPollNodes,
 799                 $pollNodes = $( [] ),
 800                 // Fake font-family value
 801                 fontFamily = 'oo-ui-frame-transplantStyles-loaded',
 802                 deferred = $.Deferred();
 803
 804         for ( i = 0, numSheets = parentDoc.styleSheets.length; i < numSheets; i++ ) {
 805                 styleNode = parentDoc.styleSheets[i].ownerNode;
 806                 if ( styleNode.nodeName.toLowerCase() === 'link' ) {
 807                         // External stylesheet
 808                         // Create a node with a unique ID that we're going to monitor to see when the CSS
 809                         // has loaded
 810                         pollNodeId = 'oo-ui-frame-transplantStyles-loaded-' + i;
 811                         $pollNodes = $pollNodes.add( $( '<div>', frameDoc )
 812                                 .attr( 'id', pollNodeId )
 813                                 .appendTo( frameDoc.body )
 814                         );
 815
 816                         // Add <style>@import url(...); #pollNodeId { font-family: ... }</style>
 817                         // The font-family rule will only take effect once the @import finishes
 818                         newNode = frameDoc.createElement( 'style' );
 819                         newNode.textContent = '@import url(' + styleNode.href + ');\n' +
 820                                 '#' + pollNodeId + ' { font-family: ' + fontFamily + '; }';
 821                 } else {
 822                         // Not an external stylesheet, or no polling required; just copy the node over
 823                         newNode = frameDoc.importNode( styleNode, true );
 824                 }
 825                 frameDoc.head.appendChild( newNode );
 826         }
 827
 828         // Poll every 100ms until all external stylesheets have loaded
 829         $pendingPollNodes = $pollNodes;
 830         timeoutID = setTimeout( function pollExternalStylesheets() {
 831                 while (
 832                         $pendingPollNodes.length > 0 &&
 833                         $pendingPollNodes.eq( 0 ).css( 'font-family' ) === fontFamily
 834                 ) {
 835                         $pendingPollNodes = $pendingPollNodes.slice( 1 );
 836                 }
 837
 838                 if ( $pendingPollNodes.length === 0 ) {
 839                         // We're done!
 840                         if ( timeoutID !== null ) {
 841                                 timeoutID = null;
 842                                 $pollNodes.remove();
 843                                 deferred.resolve();
 844                         }
 845                 } else {
 846                         timeoutID = setTimeout( pollExternalStylesheets, 100 );
 847                 }
 848         }, 100 );
 849         // ...but give up after a while
 850         if ( timeout !== 0 ) {
 851                 setTimeout( function () {
 852                         if ( timeoutID ) {
 853                                 clearTimeout( timeoutID );
 854                                 timeoutID = null;
 855                                 $pollNodes.remove();
 856                                 deferred.reject();
 857                         }
 858                 }, timeout || 5000 );
 859         }
 860
 861         return deferred.promise();
 862 };
 863
 864 /* Methods */
 865
 866 /**
 867  * Load the frame contents.
 868  *
 869  * Once the iframe's stylesheets are loaded, the `load` event will be emitted and the returned
 870  * promise will be resolved. Calling while loading will return a promise but not trigger a new
 871  * loading cycle. Calling after loading is complete will return a promise that's already been
 872  * resolved.
 873  *
 874  * Sounds simple right? Read on...
 875  *
 876  * When you create a dynamic iframe using open/write/close, the window.load event for the
 877  * iframe is triggered when you call close, and there's no further load event to indicate that
 878  * everything is actually loaded.
 879  *
 880  * In Chrome, stylesheets don't show up in document.styleSheets until they have loaded, so we could
 881  * just poll that array and wait for it to have the right length. However, in Firefox, stylesheets
 882  * are added to document.styleSheets immediately, and the only way you can determine whether they've
 883  * loaded is to attempt to access .cssRules and wait for that to stop throwing an exception. But
 884  * cross-domain stylesheets never allow .cssRules to be accessed even after they have loaded.
 885  *
 886  * The workaround is to change all `<link href="...">` tags to `<style>@import url(...)</style>` tags.
 887  * Because `@import` is blocking, Chrome won't add the stylesheet to document.styleSheets until
 888  * the `@import` has finished, and Firefox won't allow .cssRules to be accessed until the `@import`
 889  * has finished. And because the contents of the `<style>` tag are from the same origin, accessing
 890  * .cssRules is allowed.
 891  *
 892  * However, now that we control the styles we're injecting, we might as well do away with
 893  * browser-specific polling hacks like document.styleSheets and .cssRules, and instead inject
 894  * `<style>@import url(...); #foo { font-family: someValue; }</style>`, then create `<div id="foo">`
 895  * and wait for its font-family to change to someValue. Because `@import` is blocking, the font-family
 896  * rule is not applied until after the `@import` finishes.
 897  *
 898  * All this stylesheet injection and polling magic is in #transplantStyles.
 899  *
 900  * @return {jQuery.Promise} Promise resolved when loading is complete
 901  * @fires load
 902  */
 903 OO.ui.Frame.prototype.load = function () {
 904         var win, doc;
 905
 906         // Return existing promise if already loading or loaded
 907         if ( this.loading ) {
 908                 return this.loading.promise();
 909         }
 910
 911         // Load the frame
 912         this.loading = $.Deferred();
 913
 914         win = this.$element.prop( 'contentWindow' );
 915         doc = win.document;
 916
 917         // Figure out directionality:
 918         this.dir = OO.ui.Element.getDir( this.$element ) || 'ltr';
 919
 920         // Initialize contents
 921         doc.open();
 922         doc.write(
 923                 '<!doctype html>' +
 924                 '<html>' +
 925                         '<body class="oo-ui-frame-body oo-ui-' + this.dir + '" style="direction:' + this.dir + ';" dir="' + this.dir + '">' +
 926                                 '<div class="oo-ui-frame-content"></div>' +
 927                         '</body>' +
 928                 '</html>'
 929         );
 930         doc.close();
 931
 932         // Properties
 933         this.$ = OO.ui.Element.getJQuery( doc, this );
 934         this.$content = this.$( '.oo-ui-frame-content' ).attr( 'tabIndex', 0 );
 935         this.$document = this.$( doc );
 936
 937         // Initialization
 938         this.constructor.static.transplantStyles( this.getElementDocument(), this.$document[0] )
 939                 .always( OO.ui.bind( function () {
 940                         this.emit( 'load' );
 941                         this.loading.resolve();
 942                 }, this ) );
 943
 944         return this.loading.promise();
 945 };
 946
 947 /**
 948  * Set the size of the frame.
 949  *
 950  * @param {number} width Frame width in pixels
 951  * @param {number} height Frame height in pixels
 952  * @chainable
 953  */
 954 OO.ui.Frame.prototype.setSize = function ( width, height ) {
 955         this.$element.css( { 'width': width, 'height': height } );
 956         return this;
 957 };
 958 /**
 959  * Container for elements in a child frame.
 960  *
 961  * There are two ways to specify a title: set the static `title` property or provide a `title`
 962  * property in the configuration options. The latter will override the former.
 963  *
 964  * @abstract
 965  * @class
 966  * @extends OO.ui.Element
 967  * @mixins OO.EventEmitter
 968  *
 969  * @constructor
 970  * @param {Object} [config] Configuration options
 971  * @cfg {string|Function} [title] Title string or function that returns a string
 972  * @cfg {string} [icon] Symbolic name of icon
 973  * @fires initialize
 974  */
 975 OO.ui.Window = function OoUiWindow( config ) {
 976         var element = this;
 977         // Parent constructor
 978         OO.ui.Window.super.call( this, config );
 979
 980         // Mixin constructors
 981         OO.EventEmitter.call( this );
 982
 983         // Properties
 984         this.visible = false;
 985         this.opening = null;
 986         this.closing = null;
 987         this.opened = null;
 988         this.title = OO.ui.resolveMsg( config.title || this.constructor.static.title );
 989         this.icon = config.icon || this.constructor.static.icon;
 990         this.frame = new OO.ui.Frame( { '$': this.$ } );
 991         this.$frame = this.$( '<div>' );
 992         this.$ = function () {
 993                 throw new Error( 'this.$() cannot be used until the frame has been initialized.' );
 994         };
 995
 996         // Initialization
 997         this.$element
 998                 .addClass( 'oo-ui-window' )
 999                 // Hide the window using visibility: hidden; while the iframe is still loading
1000                 // Can't use display: none; because that prevents the iframe from loading in Firefox
1001                 .css( 'visibility', 'hidden' )
1002                 .append( this.$frame );
1003         this.$frame
1004                 .addClass( 'oo-ui-window-frame' )
1005                 .append( this.frame.$element );
1006
1007         // Events
1008         this.frame.on( 'load', function () {
1009                 element.initialize();
1010                 // Undo the visibility: hidden; hack and apply display: none;
1011                 // We can do this safely now that the iframe has initialized
1012                 // (don't do this from within #initialize because it has to happen
1013                 // after the all subclasses have been handled as well).
1014                 element.$element.hide().css( 'visibility', '' );
1015         } );
1016 };
1017
1018 /* Setup */
1019
1020 OO.inheritClass( OO.ui.Window, OO.ui.Element );
1021 OO.mixinClass( OO.ui.Window, OO.EventEmitter );
1022
1023 /* Events */
1024
1025 /**
1026  * Open window.
1027  *
1028  * Fired after window has been opened.
1029  *
1030  * @event open
1031  * @param {Object} data Window opening data
1032  */
1033
1034 /**
1035  * Close window.
1036  *
1037  * Fired after window has been closed.
1038  *
1039  * @event close
1040  * @param {Object} data Window closing data
1041  */
1042
1043 /* Static Properties */
1044
1045 /**
1046  * Symbolic name of icon.
1047  *
1048  * @static
1049  * @inheritable
1050  * @property {string}
1051  */
1052 OO.ui.Window.static.icon = 'window';
1053
1054 /**
1055  * Window title.
1056  *
1057  * Subclasses must implement this property before instantiating the window.
1058  * Alternatively, override #getTitle with an alternative implementation.
1059  *
1060  * @static
1061  * @abstract
1062  * @inheritable
1063  * @property {string|Function} Title string or function that returns a string
1064  */
1065 OO.ui.Window.static.title = null;
1066
1067 /* Methods */
1068
1069 /**
1070  * Check if window is visible.
1071  *
1072  * @return {boolean} Window is visible
1073  */
1074 OO.ui.Window.prototype.isVisible = function () {
1075         return this.visible;
1076 };
1077
1078 /**
1079  * Check if window is opening.
1080  *
1081  * @return {boolean} Window is opening
1082  */
1083 OO.ui.Window.prototype.isOpening = function () {
1084         return !!this.opening && this.opening.state() !== 'resolved';
1085 };
1086
1087 /**
1088  * Check if window is closing.
1089  *
1090  * @return {boolean} Window is closing
1091  */
1092 OO.ui.Window.prototype.isClosing = function () {
1093         return !!this.closing && this.closing.state() !== 'resolved';
1094 };
1095
1096 /**
1097  * Check if window is opened.
1098  *
1099  * @return {boolean} Window is opened
1100  */
1101 OO.ui.Window.prototype.isOpened = function () {
1102         return !!this.opened && this.opened.state() !== 'resolved';
1103 };
1104
1105 /**
1106  * Get the window frame.
1107  *
1108  * @return {OO.ui.Frame} Frame of window
1109  */
1110 OO.ui.Window.prototype.getFrame = function () {
1111         return this.frame;
1112 };
1113
1114 /**
1115  * Get the title of the window.
1116  *
1117  * @return {string} Title text
1118  */
1119 OO.ui.Window.prototype.getTitle = function () {
1120         return this.title;
1121 };
1122
1123 /**
1124  * Get the window icon.
1125  *
1126  * @return {string} Symbolic name of icon
1127  */
1128 OO.ui.Window.prototype.getIcon = function () {
1129         return this.icon;
1130 };
1131
1132 /**
1133  * Set the size of window frame.
1134  *
1135  * @param {number} [width=auto] Custom width
1136  * @param {number} [height=auto] Custom height
1137  * @chainable
1138  */
1139 OO.ui.Window.prototype.setSize = function ( width, height ) {
1140         if ( !this.frame.$content ) {
1141                 return;
1142         }
1143
1144         this.frame.$element.css( {
1145                 'width': width === undefined ? 'auto' : width,
1146                 'height': height === undefined ? 'auto' : height
1147         } );
1148
1149         return this;
1150 };
1151
1152 /**
1153  * Set the title of the window.
1154  *
1155  * @param {string|Function} title Title text or a function that returns text
1156  * @chainable
1157  */
1158 OO.ui.Window.prototype.setTitle = function ( title ) {
1159         this.title = OO.ui.resolveMsg( title );
1160         if ( this.$title ) {
1161                 this.$title.text( title );
1162         }
1163         return this;
1164 };
1165
1166 /**
1167  * Set the icon of the window.
1168  *
1169  * @param {string} icon Symbolic name of icon
1170  * @chainable
1171  */
1172 OO.ui.Window.prototype.setIcon = function ( icon ) {
1173         if ( this.$icon ) {
1174                 this.$icon.removeClass( 'oo-ui-icon-' + this.icon );
1175         }
1176         this.icon = icon;
1177         if ( this.$icon ) {
1178                 this.$icon.addClass( 'oo-ui-icon-' + this.icon );
1179         }
1180
1181         return this;
1182 };
1183
1184 /**
1185  * Set the position of window to fit with contents.
1186  *
1187  * @param {string} left Left offset
1188  * @param {string} top Top offset
1189  * @chainable
1190  */
1191 OO.ui.Window.prototype.setPosition = function ( left, top ) {
1192         this.$element.css( { 'left': left, 'top': top } );
1193         return this;
1194 };
1195
1196 /**
1197  * Set the height of window to fit with contents.
1198  *
1199  * @param {number} [min=0] Min height
1200  * @param {number} [max] Max height (defaults to content's outer height)
1201  * @chainable
1202  */
1203 OO.ui.Window.prototype.fitHeightToContents = function ( min, max ) {
1204         var height = this.frame.$content.outerHeight();
1205
1206         this.frame.$element.css(
1207                 'height', Math.max( min || 0, max === undefined ? height : Math.min( max, height ) )
1208         );
1209
1210         return this;
1211 };
1212
1213 /**
1214  * Set the width of window to fit with contents.
1215  *
1216  * @param {number} [min=0] Min height
1217  * @param {number} [max] Max height (defaults to content's outer width)
1218  * @chainable
1219  */
1220 OO.ui.Window.prototype.fitWidthToContents = function ( min, max ) {
1221         var width = this.frame.$content.outerWidth();
1222
1223         this.frame.$element.css(
1224                 'width', Math.max( min || 0, max === undefined ? width : Math.min( max, width ) )
1225         );
1226
1227         return this;
1228 };
1229
1230 /**
1231  * Initialize window contents.
1232  *
1233  * The first time the window is opened, #initialize is called when it's safe to begin populating
1234  * its contents. See #setup for a way to make changes each time the window opens.
1235  *
1236  * Once this method is called, this.$$ can be used to create elements within the frame.
1237  *
1238  * @chainable
1239  */
1240 OO.ui.Window.prototype.initialize = function () {
1241         // Properties
1242         this.$ = this.frame.$;
1243         this.$title = this.$( '<div class="oo-ui-window-title"></div>' )
1244                 .text( this.title );
1245         this.$icon = this.$( '<div class="oo-ui-window-icon"></div>' )
1246                 .addClass( 'oo-ui-icon-' + this.icon );
1247         this.$head = this.$( '<div class="oo-ui-window-head"></div>' );
1248         this.$body = this.$( '<div class="oo-ui-window-body"></div>' );
1249         this.$foot = this.$( '<div class="oo-ui-window-foot"></div>' );
1250         this.$overlay = this.$( '<div class="oo-ui-window-overlay"></div>' );
1251
1252         // Initialization
1253         this.frame.$content.append(
1254                 this.$head.append( this.$icon, this.$title ),
1255                 this.$body,
1256                 this.$foot,
1257                 this.$overlay
1258         );
1259
1260         return this;
1261 };
1262
1263 /**
1264  * Get a process for setting up a window for use.
1265  *
1266  * Each time the window is opened this process will set it up for use in a particular context, based
1267  * on the `data` argument.
1268  *
1269  * When you override this method, you can add additional setup steps to the process the parent
1270  * method provides using the 'first' and 'next' methods.
1271  *
1272  * @abstract
1273  * @param {Object} [data] Window opening data
1274  * @return {OO.ui.Process} Setup process
1275  */
1276 OO.ui.Window.prototype.getSetupProcess = function () {
1277         return new OO.ui.Process();
1278 };
1279
1280 /**
1281  * Get a process for readying a window for use.
1282  *
1283  * Each time the window is open and setup, this process will ready it up for use in a particular
1284  * context, based on the `data` argument.
1285  *
1286  * When you override this method, you can add additional setup steps to the process the parent
1287  * method provides using the 'first' and 'next' methods.
1288  *
1289  * @abstract
1290  * @param {Object} [data] Window opening data
1291  * @return {OO.ui.Process} Setup process
1292  */
1293 OO.ui.Window.prototype.getReadyProcess = function () {
1294         return new OO.ui.Process();
1295 };
1296
1297 /**
1298  * Get a process for tearing down a window after use.
1299  *
1300  * Each time the window is closed this process will tear it down and do something with the user's
1301  * interactions within the window, based on the `data` argument.
1302  *
1303  * When you override this method, you can add additional teardown steps to the process the parent
1304  * method provides using the 'first' and 'next' methods.
1305  *
1306  * @abstract
1307  * @param {Object} [data] Window closing data
1308  * @return {OO.ui.Process} Teardown process
1309  */
1310 OO.ui.Window.prototype.getTeardownProcess = function () {
1311         return new OO.ui.Process();
1312 };
1313
1314 /**
1315  * Open window.
1316  *
1317  * Do not override this method. Use #getSetupProcess to do something each time the window closes.
1318  *
1319  * @param {Object} [data] Window opening data
1320  * @fires initialize
1321  * @fires opening
1322  * @fires open
1323  * @fires ready
1324  * @return {jQuery.Promise} Promise resolved when window is opened; when the promise is resolved the
1325  *   first argument will be a promise which will be resolved when the window begins closing
1326  */
1327 OO.ui.Window.prototype.open = function ( data ) {
1328         // Return existing promise if already opening or open
1329         if ( this.opening ) {
1330                 return this.opening.promise();
1331         }
1332
1333         // Open the window
1334         this.opening = $.Deferred();
1335         this.frame.load().done( OO.ui.bind( function () {
1336                 this.$element.show();
1337                 this.visible = true;
1338                 this.emit( 'opening', data );
1339                 this.getSetupProcess( data ).execute().done( OO.ui.bind( function () {
1340                         this.emit( 'open', data );
1341                         setTimeout( OO.ui.bind( function () {
1342                                 // Focus the content div (which has a tabIndex) to inactivate
1343                                 // (but not clear) selections in the parent frame.
1344                                 // Must happen after 'open' is emitted (to ensure it is visible)
1345                                 // but before 'ready' is emitted (so subclasses can give focus to something
1346                                 // else)
1347                                 this.frame.$content.focus();
1348                                 this.getReadyProcess( data ).execute().done( OO.ui.bind( function () {
1349                                         this.emit( 'ready', data );
1350                                         this.opened = $.Deferred();
1351                                         this.opening.resolve( this.opened.promise() );
1352                                         // Now that we are totally done opening, it's safe to allow closing
1353                                         this.closing = null;
1354                                 }, this ) );
1355                         }, this ) );
1356                 }, this ) );
1357         }, this ) );
1358
1359         return this.opening.promise();
1360 };
1361
1362 /**
1363  * Close window.
1364  *
1365  * Do not override this method. Use #getTeardownProcess to do something each time the window closes.
1366  *
1367  * @param {Object} [data] Window closing data
1368  * @fires closing
1369  * @fires close
1370  * @return {jQuery.Promise} Promise resolved when window is closed
1371  */
1372 OO.ui.Window.prototype.close = function ( data ) {
1373         // Return existing promise if already closing or closed
1374         if ( this.closing ) {
1375                 return this.closing.promise();
1376         }
1377
1378         // Close the window
1379         // This.closing needs to exist before we emit the closing event so that handlers can call
1380         // window.close() and trigger the safety check above
1381         this.closing = $.Deferred();
1382         this.frame.$content.find( ':focus' ).blur();
1383         this.emit( 'closing', data );
1384         this.getTeardownProcess( data ).execute().done( OO.ui.bind( function () {
1385                 // To do something different with #opened, resolve/reject #opened in the teardown process
1386                 if ( this.opened.state() === 'pending' ) {
1387                         this.opened.resolve();
1388                 }
1389                 this.emit( 'close', data );
1390                 this.$element.hide();
1391                 this.visible = false;
1392                 this.closing.resolve();
1393                 // Now that we are totally done closing, it's safe to allow opening
1394                 this.opening = null;
1395         }, this ) );
1396
1397         return this.closing.promise();
1398 };
1399 /**
1400  * Set of mutually exclusive windows.
1401  *
1402  * @class
1403  * @extends OO.ui.Element
1404  * @mixins OO.EventEmitter
1405  *
1406  * @constructor
1407  * @param {OO.Factory} factory Window factory
1408  * @param {Object} [config] Configuration options
1409  */
1410 OO.ui.WindowSet = function OoUiWindowSet( factory, config ) {
1411         // Parent constructor
1412         OO.ui.WindowSet.super.call( this, config );
1413
1414         // Mixin constructors
1415         OO.EventEmitter.call( this );
1416
1417         // Properties
1418         this.factory = factory;
1419
1420         /**
1421          * List of all windows associated with this window set.
1422          *
1423          * @property {OO.ui.Window[]}
1424          */
1425         this.windowList = [];
1426
1427         /**
1428          * Mapping of OO.ui.Window objects created by name from the #factory.
1429          *
1430          * @property {Object}
1431          */
1432         this.windows = {};
1433         this.currentWindow = null;
1434
1435         // Initialization
1436         this.$element.addClass( 'oo-ui-windowSet' );
1437 };
1438
1439 /* Setup */
1440
1441 OO.inheritClass( OO.ui.WindowSet, OO.ui.Element );
1442 OO.mixinClass( OO.ui.WindowSet, OO.EventEmitter );
1443
1444 /* Events */
1445
1446 /**
1447  * @event opening
1448  * @param {OO.ui.Window} win Window that's being opened
1449  * @param {Object} config Window opening information
1450  */
1451
1452 /**
1453  * @event open
1454  * @param {OO.ui.Window} win Window that's been opened
1455  * @param {Object} config Window opening information
1456  */
1457
1458 /**
1459  * @event closing
1460  * @param {OO.ui.Window} win Window that's being closed
1461  * @param {Object} config Window closing information
1462  */
1463
1464 /**
1465  * @event close
1466  * @param {OO.ui.Window} win Window that's been closed
1467  * @param {Object} config Window closing information
1468  */
1469
1470 /* Methods */
1471
1472 /**
1473  * Handle a window that's being opened.
1474  *
1475  * @param {OO.ui.Window} win Window that's being opened
1476  * @param {Object} [config] Window opening information
1477  * @fires opening
1478  */
1479 OO.ui.WindowSet.prototype.onWindowOpening = function ( win, config ) {
1480         if ( this.currentWindow && this.currentWindow !== win ) {
1481                 this.currentWindow.close();
1482         }
1483         this.currentWindow = win;
1484         this.emit( 'opening', win, config );
1485 };
1486
1487 /**
1488  * Handle a window that's been opened.
1489  *
1490  * @param {OO.ui.Window} win Window that's been opened
1491  * @param {Object} [config] Window opening information
1492  * @fires open
1493  */
1494 OO.ui.WindowSet.prototype.onWindowOpen = function ( win, config ) {
1495         this.emit( 'open', win, config );
1496 };
1497
1498 /**
1499  * Handle a window that's being closed.
1500  *
1501  * @param {OO.ui.Window} win Window that's being closed
1502  * @param {Object} [config] Window closing information
1503  * @fires closing
1504  */
1505 OO.ui.WindowSet.prototype.onWindowClosing = function ( win, config ) {
1506         this.currentWindow = null;
1507         this.emit( 'closing', win, config );
1508 };
1509
1510 /**
1511  * Handle a window that's been closed.
1512  *
1513  * @param {OO.ui.Window} win Window that's been closed
1514  * @param {Object} [config] Window closing information
1515  * @fires close
1516  */
1517 OO.ui.WindowSet.prototype.onWindowClose = function ( win, config ) {
1518         this.emit( 'close', win, config );
1519 };
1520
1521 /**
1522  * Get the current window.
1523  *
1524  * @return {OO.ui.Window|null} Current window or null if none open
1525  */
1526 OO.ui.WindowSet.prototype.getCurrentWindow = function () {
1527         return this.currentWindow;
1528 };
1529
1530 /**
1531  * Return a given window.
1532  *
1533  * @param {string} name Symbolic name of window
1534  * @return {OO.ui.Window} Window with specified name
1535  */
1536 OO.ui.WindowSet.prototype.getWindow = function ( name ) {
1537         var win;
1538
1539         if ( !this.factory.lookup( name ) ) {
1540                 throw new Error( 'Unknown window: ' + name );
1541         }
1542         if ( !( name in this.windows ) ) {
1543                 win = this.windows[name] = this.createWindow( name );
1544                 this.addWindow( win );
1545         }
1546         return this.windows[name];
1547 };
1548
1549 /**
1550  * Create a window for use in this window set.
1551  *
1552  * @param {string} name Symbolic name of window
1553  * @return {OO.ui.Window} Window with specified name
1554  */
1555 OO.ui.WindowSet.prototype.createWindow = function ( name ) {
1556         return this.factory.create( name, { '$': this.$ } );
1557 };
1558
1559 /**
1560  * Add a given window to this window set.
1561  *
1562  * Connects event handlers and attaches it to the DOM. Calling
1563  * OO.ui.Window#open will not work until the window is added to the set.
1564  *
1565  * @param {OO.ui.Window} win
1566  */
1567 OO.ui.WindowSet.prototype.addWindow = function ( win ) {
1568         if ( this.windowList.indexOf( win ) !== -1 ) {
1569                 // Already set up
1570                 return;
1571         }
1572         this.windowList.push( win );
1573
1574         win.connect( this, {
1575                 'opening': [ 'onWindowOpening', win ],
1576                 'open': [ 'onWindowOpen', win ],
1577                 'closing': [ 'onWindowClosing', win ],
1578                 'close': [ 'onWindowClose', win ]
1579         } );
1580         this.$element.append( win.$element );
1581 };
1582 /**
1583  * Modal dialog window.
1584  *
1585  * @abstract
1586  * @class
1587  * @extends OO.ui.Window
1588  *
1589  * @constructor
1590  * @param {Object} [config] Configuration options
1591  * @cfg {boolean} [footless] Hide foot
1592  * @cfg {string} [size='large'] Symbolic name of dialog size, `small`, `medium` or `large`
1593  */
1594 OO.ui.Dialog = function OoUiDialog( config ) {
1595         // Configuration initialization
1596         config = $.extend( { 'size': 'large' }, config );
1597
1598         // Parent constructor
1599         OO.ui.Dialog.super.call( this, config );
1600
1601         // Properties
1602         this.visible = false;
1603         this.footless = !!config.footless;
1604         this.size = null;
1605         this.pending = 0;
1606         this.onWindowMouseWheelHandler = OO.ui.bind( this.onWindowMouseWheel, this );
1607         this.onDocumentKeyDownHandler = OO.ui.bind( this.onDocumentKeyDown, this );
1608
1609         // Events
1610         this.$element.on( 'mousedown', false );
1611         this.connect( this, { 'open': 'onOpen' } );
1612
1613         // Initialization
1614         this.$element.addClass( 'oo-ui-dialog' );
1615         this.setSize( config.size );
1616 };
1617
1618 /* Setup */
1619
1620 OO.inheritClass( OO.ui.Dialog, OO.ui.Window );
1621
1622 /* Static Properties */
1623
1624 /**
1625  * Symbolic name of dialog.
1626  *
1627  * @abstract
1628  * @static
1629  * @inheritable
1630  * @property {string}
1631  */
1632 OO.ui.Dialog.static.name = '';
1633
1634 /**
1635  * Map of symbolic size names and CSS classes.
1636  *
1637  * @static
1638  * @inheritable
1639  * @property {Object}
1640  */
1641 OO.ui.Dialog.static.sizeCssClasses = {
1642         'small': 'oo-ui-dialog-small',
1643         'medium': 'oo-ui-dialog-medium',
1644         'large': 'oo-ui-dialog-large'
1645 };
1646
1647 /* Methods */
1648
1649 /**
1650  * Handle close button click events.
1651  */
1652 OO.ui.Dialog.prototype.onCloseButtonClick = function () {
1653         this.close( { 'action': 'cancel' } );
1654 };
1655
1656 /**
1657  * Handle window mouse wheel events.
1658  *
1659  * @param {jQuery.Event} e Mouse wheel event
1660  */
1661 OO.ui.Dialog.prototype.onWindowMouseWheel = function () {
1662         return false;
1663 };
1664
1665 /**
1666  * Handle document key down events.
1667  *
1668  * @param {jQuery.Event} e Key down event
1669  */
1670 OO.ui.Dialog.prototype.onDocumentKeyDown = function ( e ) {
1671         switch ( e.which ) {
1672                 case OO.ui.Keys.PAGEUP:
1673                 case OO.ui.Keys.PAGEDOWN:
1674                 case OO.ui.Keys.END:
1675                 case OO.ui.Keys.HOME:
1676                 case OO.ui.Keys.LEFT:
1677                 case OO.ui.Keys.UP:
1678                 case OO.ui.Keys.RIGHT:
1679                 case OO.ui.Keys.DOWN:
1680                         // Prevent any key events that might cause scrolling
1681                         return false;
1682         }
1683 };
1684
1685 /**
1686  * Handle frame document key down events.
1687  *
1688  * @param {jQuery.Event} e Key down event
1689  */
1690 OO.ui.Dialog.prototype.onFrameDocumentKeyDown = function ( e ) {
1691         if ( e.which === OO.ui.Keys.ESCAPE ) {
1692                 this.close( { 'action': 'cancel' } );
1693                 return false;
1694         }
1695 };
1696
1697 /**
1698  * Handle window open events.
1699  */
1700 OO.ui.Dialog.prototype.onOpen = function () {
1701         this.$element.addClass( 'oo-ui-dialog-open' );
1702 };
1703
1704 /**
1705  * Set dialog size.
1706  *
1707  * @param {string} [size='large'] Symbolic name of dialog size, `small`, `medium` or `large`
1708  */
1709 OO.ui.Dialog.prototype.setSize = function ( size ) {
1710         var name, state, cssClass,
1711                 sizeCssClasses = OO.ui.Dialog.static.sizeCssClasses;
1712
1713         if ( !sizeCssClasses[size] ) {
1714                 size = 'large';
1715         }
1716         this.size = size;
1717         for ( name in sizeCssClasses ) {
1718                 state = name === size;
1719                 cssClass = sizeCssClasses[name];
1720                 this.$element.toggleClass( cssClass, state );
1721                 if ( this.frame.$content ) {
1722                         this.frame.$content.toggleClass( cssClass, state );
1723                 }
1724         }
1725 };
1726
1727 /**
1728  * @inheritdoc
1729  */
1730 OO.ui.Dialog.prototype.initialize = function () {
1731         // Parent method
1732         OO.ui.Dialog.super.prototype.initialize.call( this );
1733
1734         // Properties
1735         this.closeButton = new OO.ui.ButtonWidget( {
1736                 '$': this.$,
1737                 'frameless': true,
1738                 'icon': 'close',
1739                 'title': OO.ui.msg( 'ooui-dialog-action-close' )
1740         } );
1741
1742         // Events
1743         this.closeButton.connect( this, { 'click': 'onCloseButtonClick' } );
1744         this.frame.$document.on( 'keydown', OO.ui.bind( this.onFrameDocumentKeyDown, this ) );
1745
1746         // Initialization
1747         this.frame.$content.addClass( 'oo-ui-dialog-content' );
1748         if ( this.footless ) {
1749                 this.frame.$content.addClass( 'oo-ui-dialog-content-footless' );
1750         }
1751         this.closeButton.$element.addClass( 'oo-ui-window-closeButton' );
1752         this.$head.append( this.closeButton.$element );
1753 };
1754
1755 /**
1756  * @inheritdoc
1757  */
1758 OO.ui.Dialog.prototype.getSetupProcess = function ( data ) {
1759         return OO.ui.Dialog.super.prototype.getSetupProcess.call( this, data )
1760                 .next( function () {
1761                         // Prevent scrolling in top-level window
1762                         this.$( window ).on( 'mousewheel', this.onWindowMouseWheelHandler );
1763                         this.$( document ).on( 'keydown', this.onDocumentKeyDownHandler );
1764                 }, this );
1765 };
1766
1767 /**
1768  * @inheritdoc
1769  */
1770 OO.ui.Dialog.prototype.getTeardownProcess = function ( data ) {
1771         return OO.ui.Dialog.super.prototype.getTeardownProcess.call( this, data )
1772                 .first( function () {
1773                         this.$element.removeClass( 'oo-ui-dialog-open' );
1774                         return OO.ui.Process.static.delay( 250 );
1775                 }, this )
1776                 .next( function () {
1777                         // Allow scrolling in top-level window
1778                         this.$( window ).off( 'mousewheel', this.onWindowMouseWheelHandler );
1779                         this.$( document ).off( 'keydown', this.onDocumentKeyDownHandler );
1780                 }, this );
1781 };
1782
1783 /**
1784  * Check if input is pending.
1785  *
1786  * @return {boolean}
1787  */
1788 OO.ui.Dialog.prototype.isPending = function () {
1789         return !!this.pending;
1790 };
1791
1792 /**
1793  * Increase the pending stack.
1794  *
1795  * @chainable
1796  */
1797 OO.ui.Dialog.prototype.pushPending = function () {
1798         if ( this.pending === 0 ) {
1799                 this.frame.$content.addClass( 'oo-ui-dialog-pending' );
1800                 this.$head.addClass( 'oo-ui-texture-pending' );
1801                 this.$foot.addClass( 'oo-ui-texture-pending' );
1802         }
1803         this.pending++;
1804
1805         return this;
1806 };
1807
1808 /**
1809  * Reduce the pending stack.
1810  *
1811  * Clamped at zero.
1812  *
1813  * @chainable
1814  */
1815 OO.ui.Dialog.prototype.popPending = function () {
1816         if ( this.pending === 1 ) {
1817                 this.frame.$content.removeClass( 'oo-ui-dialog-pending' );
1818                 this.$head.removeClass( 'oo-ui-texture-pending' );
1819                 this.$foot.removeClass( 'oo-ui-texture-pending' );
1820         }
1821         this.pending = Math.max( 0, this.pending - 1 );
1822
1823         return this;
1824 };
1825 /**
1826  * Container for elements.
1827  *
1828  * @abstract
1829  * @class
1830  * @extends OO.ui.Element
1831  * @mixins OO.EventEmitter
1832  *
1833  * @constructor
1834  * @param {Object} [config] Configuration options
1835  */
1836 OO.ui.Layout = function OoUiLayout( config ) {
1837         // Initialize config
1838         config = config || {};
1839
1840         // Parent constructor
1841         OO.ui.Layout.super.call( this, config );
1842
1843         // Mixin constructors
1844         OO.EventEmitter.call( this );
1845
1846         // Initialization
1847         this.$element.addClass( 'oo-ui-layout' );
1848 };
1849
1850 /* Setup */
1851
1852 OO.inheritClass( OO.ui.Layout, OO.ui.Element );
1853 OO.mixinClass( OO.ui.Layout, OO.EventEmitter );
1854 /**
1855  * User interface control.
1856  *
1857  * @abstract
1858  * @class
1859  * @extends OO.ui.Element
1860  * @mixins OO.EventEmitter
1861  *
1862  * @constructor
1863  * @param {Object} [config] Configuration options
1864  * @cfg {boolean} [disabled=false] Disable
1865  */
1866 OO.ui.Widget = function OoUiWidget( config ) {
1867         // Initialize config
1868         config = $.extend( { 'disabled': false }, config );
1869
1870         // Parent constructor
1871         OO.ui.Widget.super.call( this, config );
1872
1873         // Mixin constructors
1874         OO.EventEmitter.call( this );
1875
1876         // Properties
1877         this.disabled = null;
1878         this.wasDisabled = null;
1879
1880         // Initialization
1881         this.$element.addClass( 'oo-ui-widget' );
1882         this.setDisabled( !!config.disabled );
1883 };
1884
1885 /* Setup */
1886
1887 OO.inheritClass( OO.ui.Widget, OO.ui.Element );
1888 OO.mixinClass( OO.ui.Widget, OO.EventEmitter );
1889
1890 /* Events */
1891
1892 /**
1893  * @event disable
1894  * @param {boolean} disabled Widget is disabled
1895  */
1896
1897 /* Methods */
1898
1899 /**
1900  * Check if the widget is disabled.
1901  *
1902  * @param {boolean} Button is disabled
1903  */
1904 OO.ui.Widget.prototype.isDisabled = function () {
1905         return this.disabled;
1906 };
1907
1908 /**
1909  * Update the disabled state, in case of changes in parent widget.
1910  *
1911  * @chainable
1912  */
1913 OO.ui.Widget.prototype.updateDisabled = function () {
1914         this.setDisabled( this.disabled );
1915         return this;
1916 };
1917
1918 /**
1919  * Set the disabled state of the widget.
1920  *
1921  * This should probably change the widgets' appearance and prevent it from being used.
1922  *
1923  * @param {boolean} disabled Disable widget
1924  * @chainable
1925  */
1926 OO.ui.Widget.prototype.setDisabled = function ( disabled ) {
1927         var isDisabled;
1928
1929         this.disabled = !!disabled;
1930         isDisabled = this.isDisabled();
1931         if ( isDisabled !== this.wasDisabled ) {
1932                 this.$element.toggleClass( 'oo-ui-widget-disabled', isDisabled );
1933                 this.$element.toggleClass( 'oo-ui-widget-enabled', !isDisabled );
1934                 this.emit( 'disable', isDisabled );
1935         }
1936         this.wasDisabled = isDisabled;
1937         return this;
1938 };
1939 /**
1940  * A list of functions, called in sequence.
1941  *
1942  * If a function added to a process returns boolean false the process will stop; if it returns an
1943  * object with a `promise` method the process will use the promise to either continue to the next
1944  * step when the promise is resolved or stop when the promise is rejected.
1945  *
1946  * @class
1947  *
1948  * @constructor
1949  */
1950 OO.ui.Process = function () {
1951         // Properties
1952         this.steps = [];
1953 };
1954
1955 /* Setup */
1956
1957 OO.initClass( OO.ui.Process );
1958
1959 /* Static Methods */
1960
1961 /**
1962  * Generate a promise which is resolved after a set amount of time.
1963  *
1964  * @param {number} length Number of milliseconds before resolving the promise
1965  * @return {jQuery.Promise} Promise that will be resolved after a set amount of time
1966  */
1967 OO.ui.Process.static.delay = function ( length ) {
1968         var deferred = $.Deferred();
1969
1970         setTimeout( function () {
1971                 deferred.resolve();
1972         }, length );
1973
1974         return deferred.promise();
1975 };
1976
1977 /* Methods */
1978
1979 /**
1980  * Start the process.
1981  *
1982  * @return {jQuery.Promise} Promise that is resolved when all steps have completed or rejected when
1983  *   any of the steps return boolean false or a promise which gets rejected; upon stopping the
1984  *   process, the remaining steps will not be taken
1985  */
1986 OO.ui.Process.prototype.execute = function () {
1987         var i, len, promise;
1988
1989         /**
1990          * Continue execution.
1991          *
1992          * @ignore
1993          * @param {Array} step A function and the context it should be called in
1994          * @return {Function} Function that continues the process
1995          */
1996         function proceed( step ) {
1997                 return function () {
1998                         // Execute step in the correct context
1999                         var result = step[0].call( step[1] );
2000
2001                         if ( result === false ) {
2002                                 // Use rejected promise for boolean false results
2003                                 return $.Deferred().reject().promise();
2004                         }
2005                         // Duck-type the object to see if it can produce a promise
2006                         if ( result && $.isFunction( result.promise ) ) {
2007                                 // Use a promise generated from the result
2008                                 return result.promise();
2009                         }
2010                         // Use resolved promise for other results
2011                         return $.Deferred().resolve().promise();
2012                 };
2013         }
2014
2015         if ( this.steps.length ) {
2016                 // Generate a chain reaction of promises
2017                 promise = proceed( this.steps[0] )();
2018                 for ( i = 1, len = this.steps.length; i < len; i++ ) {
2019                         promise = promise.then( proceed( this.steps[i] ) );
2020                 }
2021         } else {
2022                 promise = $.Deferred().resolve().promise();
2023         }
2024
2025         return promise;
2026 };
2027
2028 /**
2029  * Add step to the beginning of the process.
2030  *
2031  * @param {Function} step Function to execute; if it returns boolean false the process will stop; if
2032  *   it returns an object with a `promise` method the process will use the promise to either
2033  *   continue to the next step when the promise is resolved or stop when the promise is rejected
2034  * @param {Object} [context=null] Context to call the step function in
2035  * @chainable
2036  */
2037 OO.ui.Process.prototype.first = function ( step, context ) {
2038         this.steps.unshift( [ step, context || null ] );
2039         return this;
2040 };
2041
2042 /**
2043  * Add step to the end of the process.
2044  *
2045  * @param {Function} step Function to execute; if it returns boolean false the process will stop; if
2046  *   it returns an object with a `promise` method the process will use the promise to either
2047  *   continue to the next step when the promise is resolved or stop when the promise is rejected
2048  * @param {Object} [context=null] Context to call the step function in
2049  * @chainable
2050  */
2051 OO.ui.Process.prototype.next = function ( step, context ) {
2052         this.steps.push( [ step, context || null ] );
2053         return this;
2054 };
2055 /**
2056  * Dialog for showing a confirmation/warning message.
2057  *
2058  * @class
2059  * @extends OO.ui.Dialog
2060  *
2061  * @constructor
2062  * @param {Object} [config] Configuration options
2063  */
2064 OO.ui.ConfirmationDialog = function OoUiConfirmationDialog( config ) {
2065         // Configuration initialization
2066         config = $.extend( { 'size': 'small' }, config );
2067
2068         // Parent constructor
2069         OO.ui.Dialog.call( this, config );
2070 };
2071
2072 /* Inheritance */
2073
2074 OO.inheritClass( OO.ui.ConfirmationDialog, OO.ui.Dialog );
2075
2076 /* Static Properties */
2077
2078 OO.ui.ConfirmationDialog.static.name = 'confirm';
2079
2080 OO.ui.ConfirmationDialog.static.icon = 'help';
2081
2082 OO.ui.ConfirmationDialog.static.title = OO.ui.deferMsg( 'ooui-dialog-confirm-title' );
2083
2084 /* Methods */
2085
2086 /**
2087  * @inheritdoc
2088  */
2089 OO.ui.ConfirmationDialog.prototype.initialize = function () {
2090         // Parent method
2091         OO.ui.Dialog.prototype.initialize.call( this );
2092
2093         // Set up the layout
2094         var contentLayout = new OO.ui.PanelLayout( {
2095                 '$': this.$,
2096                 'padded': true
2097         } );
2098
2099         this.$promptContainer = this.$( '<div>' ).addClass( 'oo-ui-dialog-confirm-promptContainer' );
2100
2101         this.cancelButton = new OO.ui.ButtonWidget();
2102         this.cancelButton.connect( this, { 'click': [ 'close', 'cancel' ] } );
2103
2104         this.okButton = new OO.ui.ButtonWidget();
2105         this.okButton.connect( this, { 'click': [ 'close', 'ok' ] } );
2106
2107         // Make the buttons
2108         contentLayout.$element.append( this.$promptContainer );
2109         this.$body.append( contentLayout.$element );
2110
2111         this.$foot.append(
2112                 this.okButton.$element,
2113                 this.cancelButton.$element
2114         );
2115
2116         this.connect( this, { 'close': [ 'close', 'cancel' ] } );
2117 };
2118
2119 /*
2120  * Setup a confirmation dialog.
2121  *
2122  * @param {Object} [data] Window opening data including text of the dialog and text for the buttons
2123  * @param {jQuery|string} [data.prompt] Text to display or list of nodes to use as content of the dialog.
2124  * @param {jQuery|string|Function|null} [data.okLabel] Label of the OK button
2125  * @param {jQuery|string|Function|null} [data.cancelLabel] Label of the cancel button
2126  * @param {string|string[]} [data.okFlags="constructive"] Flags for the OK button
2127  * @param {string|string[]} [data.cancelFlags="destructive"] Flags for the cancel button
2128  * @return {OO.ui.Process} Setup process
2129  */
2130 OO.ui.ConfirmationDialog.prototype.getSetupProcess = function ( data ) {
2131         // Parent method
2132         return OO.ui.ConfirmationDialog.super.prototype.getSetupProcess.call( this, data )
2133                 .next( function () {
2134                         var prompt = data.prompt || OO.ui.deferMsg( 'ooui-dialog-confirm-default-prompt' ),
2135                                 okLabel = data.okLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-ok' ),
2136                                 cancelLabel = data.cancelLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-cancel' ),
2137                                 okFlags = data.okFlags || 'constructive',
2138                                 cancelFlags = data.cancelFlags || 'destructive';
2139
2140                         if ( typeof prompt === 'string' ) {
2141                                 this.$promptContainer.text( prompt );
2142                         } else {
2143                                 this.$promptContainer.empty().append( prompt );
2144                         }
2145
2146                         this.okButton.setLabel( okLabel ).clearFlags().setFlags( okFlags );
2147                         this.cancelButton.setLabel( cancelLabel ).clearFlags().setFlags( cancelFlags );
2148                 }, this );
2149 };
2150
2151 /**
2152  * @inheritdoc
2153  */
2154 OO.ui.ConfirmationDialog.prototype.getTeardownProcess = function ( data ) {
2155         // Parent method
2156         return OO.ui.ConfirmationDialog.super.prototype.getTeardownProcess.call( this, data )
2157                 .first( function () {
2158                         if ( data === 'ok' ) {
2159                                 this.opened.resolve();
2160                         } else if ( data === 'cancel' ) {
2161                                 this.opened.reject();
2162                         }
2163                 }, this );
2164 };
2165 /**
2166  * Element with a button.
2167  *
2168  * @abstract
2169  * @class
2170  *
2171  * @constructor
2172  * @param {jQuery} $button Button node, assigned to #$button
2173  * @param {Object} [config] Configuration options
2174  * @cfg {boolean} [frameless] Render button without a frame
2175  * @cfg {number} [tabIndex=0] Button's tab index, use -1 to prevent tab focusing
2176  */
2177 OO.ui.ButtonedElement = function OoUiButtonedElement( $button, config ) {
2178         // Configuration initialization
2179         config = config || {};
2180
2181         // Properties
2182         this.$button = $button;
2183         this.tabIndex = null;
2184         this.active = false;
2185         this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
2186
2187         // Events
2188         this.$button.on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
2189
2190         // Initialization
2191         this.$element.addClass( 'oo-ui-buttonedElement' );
2192         this.$button
2193                 .addClass( 'oo-ui-buttonedElement-button' )
2194                 .attr( 'role', 'button' )
2195                 .prop( 'tabIndex', config.tabIndex || 0 );
2196         if ( config.frameless ) {
2197                 this.$element.addClass( 'oo-ui-buttonedElement-frameless' );
2198         } else {
2199                 this.$element.addClass( 'oo-ui-buttonedElement-framed' );
2200         }
2201 };
2202
2203 /* Setup */
2204
2205 OO.initClass( OO.ui.ButtonedElement );
2206
2207 /* Static Properties */
2208
2209 /**
2210  * Cancel mouse down events.
2211  *
2212  * @static
2213  * @inheritable
2214  * @property {boolean}
2215  */
2216 OO.ui.ButtonedElement.static.cancelButtonMouseDownEvents = true;
2217
2218 /* Methods */
2219
2220 /**
2221  * Handles mouse down events.
2222  *
2223  * @param {jQuery.Event} e Mouse down event
2224  */
2225 OO.ui.ButtonedElement.prototype.onMouseDown = function ( e ) {
2226         if ( this.isDisabled() || e.which !== 1 ) {
2227                 return false;
2228         }
2229         // tabIndex should generally be interacted with via the property, but it's not possible to
2230         // reliably unset a tabIndex via a property so we use the (lowercase) "tabindex" attribute
2231         this.tabIndex = this.$button.attr( 'tabindex' );
2232         this.$button
2233                 // Remove the tab-index while the button is down to prevent the button from stealing focus
2234                 .removeAttr( 'tabindex' )
2235                 .addClass( 'oo-ui-buttonedElement-pressed' );
2236         // Run the mouseup handler no matter where the mouse is when the button is let go, so we can
2237         // reliably reapply the tabindex and remove the pressed class
2238         this.getElementDocument().addEventListener( 'mouseup', this.onMouseUpHandler, true );
2239         // Prevent change of focus unless specifically configured otherwise
2240         if ( this.constructor.static.cancelButtonMouseDownEvents ) {
2241                 return false;
2242         }
2243 };
2244
2245 /**
2246  * Handles mouse up events.
2247  *
2248  * @param {jQuery.Event} e Mouse up event
2249  */
2250 OO.ui.ButtonedElement.prototype.onMouseUp = function ( e ) {
2251         if ( this.isDisabled() || e.which !== 1 ) {
2252                 return false;
2253         }
2254         this.$button
2255                 // Restore the tab-index after the button is up to restore the button's accesssibility
2256                 .attr( 'tabindex', this.tabIndex )
2257                 .removeClass( 'oo-ui-buttonedElement-pressed' );
2258         // Stop listening for mouseup, since we only needed this once
2259         this.getElementDocument().removeEventListener( 'mouseup', this.onMouseUpHandler, true );
2260 };
2261
2262 /**
2263  * Set active state.
2264  *
2265  * @param {boolean} [value] Make button active
2266  * @chainable
2267  */
2268 OO.ui.ButtonedElement.prototype.setActive = function ( value ) {
2269         this.$button.toggleClass( 'oo-ui-buttonedElement-active', !!value );
2270         return this;
2271 };
2272 /**
2273  * Element that can be automatically clipped to visible boundaies.
2274  *
2275  * @abstract
2276  * @class
2277  *
2278  * @constructor
2279  * @param {jQuery} $clippable Nodes to clip, assigned to #$clippable
2280  * @param {Object} [config] Configuration options
2281  */
2282 OO.ui.ClippableElement = function OoUiClippableElement( $clippable, config ) {
2283         // Configuration initialization
2284         config = config || {};
2285
2286         // Properties
2287         this.$clippable = $clippable;
2288         this.clipping = false;
2289         this.clipped = false;
2290         this.$clippableContainer = null;
2291         this.$clippableScroller = null;
2292         this.$clippableWindow = null;
2293         this.idealWidth = null;
2294         this.idealHeight = null;
2295         this.onClippableContainerScrollHandler = OO.ui.bind( this.clip, this );
2296         this.onClippableWindowResizeHandler = OO.ui.bind( this.clip, this );
2297
2298         // Initialization
2299         this.$clippable.addClass( 'oo-ui-clippableElement-clippable' );
2300 };
2301
2302 /* Methods */
2303
2304 /**
2305  * Set clipping.
2306  *
2307  * @param {boolean} value Enable clipping
2308  * @chainable
2309  */
2310 OO.ui.ClippableElement.prototype.setClipping = function ( value ) {
2311         value = !!value;
2312
2313         if ( this.clipping !== value ) {
2314                 this.clipping = value;
2315                 if ( this.clipping ) {
2316                         this.$clippableContainer = this.$( this.getClosestScrollableElementContainer() );
2317                         // If the clippable container is the body, we have to listen to scroll events and check
2318                         // jQuery.scrollTop on the window because of browser inconsistencies
2319                         this.$clippableScroller = this.$clippableContainer.is( 'body' ) ?
2320                                 this.$( OO.ui.Element.getWindow( this.$clippableContainer ) ) :
2321                                 this.$clippableContainer;
2322                         this.$clippableScroller.on( 'scroll', this.onClippableContainerScrollHandler );
2323                         this.$clippableWindow = this.$( this.getElementWindow() )
2324                                 .on( 'resize', this.onClippableWindowResizeHandler );
2325                         // Initial clip after visible
2326                         setTimeout( OO.ui.bind( this.clip, this ) );
2327                 } else {
2328                         this.$clippableContainer = null;
2329                         this.$clippableScroller.off( 'scroll', this.onClippableContainerScrollHandler );
2330                         this.$clippableScroller = null;
2331                         this.$clippableWindow.off( 'resize', this.onClippableWindowResizeHandler );
2332                         this.$clippableWindow = null;
2333                 }
2334         }
2335
2336         return this;
2337 };
2338
2339 /**
2340  * Check if the element will be clipped to fit the visible area of the nearest scrollable container.
2341  *
2342  * @return {boolean} Element will be clipped to the visible area
2343  */
2344 OO.ui.ClippableElement.prototype.isClipping = function () {
2345         return this.clipping;
2346 };
2347
2348 /**
2349  * Check if the bottom or right of the element is being clipped by the nearest scrollable container.
2350  *
2351  * @return {boolean} Part of the element is being clipped
2352  */
2353 OO.ui.ClippableElement.prototype.isClipped = function () {
2354         return this.clipped;
2355 };
2356
2357 /**
2358  * Set the ideal size.
2359  *
2360  * @param {number|string} [width] Width as a number of pixels or CSS string with unit suffix
2361  * @param {number|string} [height] Height as a number of pixels or CSS string with unit suffix
2362  */
2363 OO.ui.ClippableElement.prototype.setIdealSize = function ( width, height ) {
2364         this.idealWidth = width;
2365         this.idealHeight = height;
2366 };
2367
2368 /**
2369  * Clip element to visible boundaries and allow scrolling when needed.
2370  *
2371  * Element will be clipped the bottom or right of the element is within 10px of the edge of, or
2372  * overlapped by, the visible area of the nearest scrollable container.
2373  *
2374  * @chainable
2375  */
2376 OO.ui.ClippableElement.prototype.clip = function () {
2377         if ( !this.clipping ) {
2378                 // this.$clippableContainer and this.$clippableWindow are null, so the below will fail
2379                 return this;
2380         }
2381
2382         var buffer = 10,
2383                 cOffset = this.$clippable.offset(),
2384                 ccOffset = this.$clippableContainer.offset() || { 'top': 0, 'left': 0 },
2385                 ccHeight = this.$clippableContainer.innerHeight() - buffer,
2386                 ccWidth = this.$clippableContainer.innerWidth() - buffer,
2387                 scrollTop = this.$clippableScroller.scrollTop(),
2388                 scrollLeft = this.$clippableScroller.scrollLeft(),
2389                 desiredWidth = ( ccOffset.left + scrollLeft + ccWidth ) - cOffset.left,
2390                 desiredHeight = ( ccOffset.top + scrollTop + ccHeight ) - cOffset.top,
2391                 naturalWidth = this.$clippable.prop( 'scrollWidth' ),
2392                 naturalHeight = this.$clippable.prop( 'scrollHeight' ),
2393                 clipWidth = desiredWidth < naturalWidth,
2394                 clipHeight = desiredHeight < naturalHeight;
2395
2396         if ( clipWidth ) {
2397                 this.$clippable.css( { 'overflow-x': 'auto', 'width': desiredWidth } );
2398         } else {
2399                 this.$clippable.css( { 'overflow-x': '', 'width': this.idealWidth || '' } );
2400         }
2401         if ( clipHeight ) {
2402                 this.$clippable.css( { 'overflow-y': 'auto', 'height': desiredHeight } );
2403         } else {
2404                 this.$clippable.css( { 'overflow-y': '', 'height': this.idealHeight || '' } );
2405         }
2406
2407         this.clipped = clipWidth || clipHeight;
2408
2409         return this;
2410 };
2411 /**
2412  * Element with named flags that can be added, removed, listed and checked.
2413  *
2414  * A flag, when set, adds a CSS class on the `$element` by combing `oo-ui-flaggableElement-` with
2415  * the flag name. Flags are primarily useful for styling.
2416  *
2417  * @abstract
2418  * @class
2419  *
2420  * @constructor
2421  * @param {Object} [config] Configuration options
2422  * @cfg {string[]} [flags=[]] Styling flags, e.g. 'primary', 'destructive' or 'constructive'
2423  */
2424 OO.ui.FlaggableElement = function OoUiFlaggableElement( config ) {
2425         // Config initialization
2426         config = config || {};
2427
2428         // Properties
2429         this.flags = {};
2430
2431         // Initialization
2432         this.setFlags( config.flags );
2433 };
2434
2435 /* Methods */
2436
2437 /**
2438  * Check if a flag is set.
2439  *
2440  * @param {string} flag Name of flag
2441  * @return {boolean} Has flag
2442  */
2443 OO.ui.FlaggableElement.prototype.hasFlag = function ( flag ) {
2444         return flag in this.flags;
2445 };
2446
2447 /**
2448  * Get the names of all flags set.
2449  *
2450  * @return {string[]} flags Flag names
2451  */
2452 OO.ui.FlaggableElement.prototype.getFlags = function () {
2453         return Object.keys( this.flags );
2454 };
2455
2456 /**
2457  * Clear all flags.
2458  *
2459  * @chainable
2460  */
2461 OO.ui.FlaggableElement.prototype.clearFlags = function () {
2462         var flag,
2463                 classPrefix = 'oo-ui-flaggableElement-';
2464
2465         for ( flag in this.flags ) {
2466                 delete this.flags[flag];
2467                 this.$element.removeClass( classPrefix + flag );
2468         }
2469
2470         return this;
2471 };
2472
2473 /**
2474  * Add one or more flags.
2475  *
2476  * @param {string|string[]|Object.<string, boolean>} flags One or more flags to add, or an object
2477  *  keyed by flag name containing boolean set/remove instructions.
2478  * @chainable
2479  */
2480 OO.ui.FlaggableElement.prototype.setFlags = function ( flags ) {
2481         var i, len, flag,
2482                 classPrefix = 'oo-ui-flaggableElement-';
2483
2484         if ( typeof flags === 'string' ) {
2485                 // Set
2486                 this.flags[flags] = true;
2487                 this.$element.addClass( classPrefix + flags );
2488         } else if ( $.isArray( flags ) ) {
2489                 for ( i = 0, len = flags.length; i < len; i++ ) {
2490                         flag = flags[i];
2491                         // Set
2492                         this.flags[flag] = true;
2493                         this.$element.addClass( classPrefix + flag );
2494                 }
2495         } else if ( OO.isPlainObject( flags ) ) {
2496                 for ( flag in flags ) {
2497                         if ( flags[flag] ) {
2498                                 // Set
2499                                 this.flags[flag] = true;
2500                                 this.$element.addClass( classPrefix + flag );
2501                         } else {
2502                                 // Remove
2503                                 delete this.flags[flag];
2504                                 this.$element.removeClass( classPrefix + flag );
2505                         }
2506                 }
2507         }
2508         return this;
2509 };
2510 /**
2511  * Element containing a sequence of child elements.
2512  *
2513  * @abstract
2514  * @class
2515  *
2516  * @constructor
2517  * @param {jQuery} $group Container node, assigned to #$group
2518  * @param {Object} [config] Configuration options
2519  */
2520 OO.ui.GroupElement = function OoUiGroupElement( $group, config ) {
2521         // Configuration
2522         config = config || {};
2523
2524         // Properties
2525         this.$group = $group;
2526         this.items = [];
2527         this.aggregateItemEvents = {};
2528 };
2529
2530 /* Methods */
2531
2532 /**
2533  * Get items.
2534  *
2535  * @return {OO.ui.Element[]} Items
2536  */
2537 OO.ui.GroupElement.prototype.getItems = function () {
2538         return this.items.slice( 0 );
2539 };
2540
2541 /**
2542  * Add an aggregate item event.
2543  *
2544  * Aggregated events are listened to on each item and then emitted by the group under a new name,
2545  * and with an additional leading parameter containing the item that emitted the original event.
2546  * Other arguments that were emitted from the original event are passed through.
2547  *
2548  * @param {Object.<string,string|null>} events Aggregate events emitted by group, keyed by item
2549  *   event, use null value to remove aggregation
2550  * @throws {Error} If aggregation already exists
2551  */
2552 OO.ui.GroupElement.prototype.aggregate = function ( events ) {
2553         var i, len, item, add, remove, itemEvent, groupEvent;
2554
2555         for ( itemEvent in events ) {
2556                 groupEvent = events[itemEvent];
2557
2558                 // Remove existing aggregated event
2559                 if ( itemEvent in this.aggregateItemEvents ) {
2560                         // Don't allow duplicate aggregations
2561                         if ( groupEvent ) {
2562                                 throw new Error( 'Duplicate item event aggregation for ' + itemEvent );
2563                         }
2564                         // Remove event aggregation from existing items
2565                         for ( i = 0, len = this.items.length; i < len; i++ ) {
2566                                 item = this.items[i];
2567                                 if ( item.connect && item.disconnect ) {
2568                                         remove = {};
2569                                         remove[itemEvent] = [ 'emit', groupEvent, item ];
2570                                         item.disconnect( this, remove );
2571                                 }
2572                         }
2573                         // Prevent future items from aggregating event
2574                         delete this.aggregateItemEvents[itemEvent];
2575                 }
2576
2577                 // Add new aggregate event
2578                 if ( groupEvent ) {
2579                         // Make future items aggregate event
2580                         this.aggregateItemEvents[itemEvent] = groupEvent;
2581                         // Add event aggregation to existing items
2582                         for ( i = 0, len = this.items.length; i < len; i++ ) {
2583                                 item = this.items[i];
2584                                 if ( item.connect && item.disconnect ) {
2585                                         add = {};
2586                                         add[itemEvent] = [ 'emit', groupEvent, item ];
2587                                         item.connect( this, add );
2588                                 }
2589                         }
2590                 }
2591         }
2592 };
2593
2594 /**
2595  * Add items.
2596  *
2597  * @param {OO.ui.Element[]} items Item
2598  * @param {number} [index] Index to insert items at
2599  * @chainable
2600  */
2601 OO.ui.GroupElement.prototype.addItems = function ( items, index ) {
2602         var i, len, item, event, events, currentIndex,
2603                 itemElements = [];
2604
2605         for ( i = 0, len = items.length; i < len; i++ ) {
2606                 item = items[i];
2607
2608                 // Check if item exists then remove it first, effectively "moving" it
2609                 currentIndex = $.inArray( item, this.items );
2610                 if ( currentIndex >= 0 ) {
2611                         this.removeItems( [ item ] );
2612                         // Adjust index to compensate for removal
2613                         if ( currentIndex < index ) {
2614                                 index--;
2615                         }
2616                 }
2617                 // Add the item
2618                 if ( item.connect && item.disconnect && !$.isEmptyObject( this.aggregateItemEvents ) ) {
2619                         events = {};
2620                         for ( event in this.aggregateItemEvents ) {
2621                                 events[event] = [ 'emit', this.aggregateItemEvents[event], item ];
2622                         }
2623                         item.connect( this, events );
2624                 }
2625                 item.setElementGroup( this );
2626                 itemElements.push( item.$element.get( 0 ) );
2627         }
2628
2629         if ( index === undefined || index < 0 || index >= this.items.length ) {
2630                 this.$group.append( itemElements );
2631                 this.items.push.apply( this.items, items );
2632         } else if ( index === 0 ) {
2633                 this.$group.prepend( itemElements );
2634                 this.items.unshift.apply( this.items, items );
2635         } else {
2636                 this.items[index].$element.before( itemElements );
2637                 this.items.splice.apply( this.items, [ index, 0 ].concat( items ) );
2638         }
2639
2640         return this;
2641 };
2642
2643 /**
2644  * Remove items.
2645  *
2646  * Items will be detached, not removed, so they can be used later.
2647  *
2648  * @param {OO.ui.Element[]} items Items to remove
2649  * @chainable
2650  */
2651 OO.ui.GroupElement.prototype.removeItems = function ( items ) {
2652         var i, len, item, index, remove, itemEvent;
2653
2654         // Remove specific items
2655         for ( i = 0, len = items.length; i < len; i++ ) {
2656                 item = items[i];
2657                 index = $.inArray( item, this.items );
2658                 if ( index !== -1 ) {
2659                         if (
2660                                 item.connect && item.disconnect &&
2661                                 !$.isEmptyObject( this.aggregateItemEvents )
2662                         ) {
2663                                 remove = {};
2664                                 if ( itemEvent in this.aggregateItemEvents ) {
2665                                         remove[itemEvent] = [ 'emit', this.aggregateItemEvents[itemEvent], item ];
2666                                 }
2667                                 item.disconnect( this, remove );
2668                         }
2669                         item.setElementGroup( null );
2670                         this.items.splice( index, 1 );
2671                         item.$element.detach();
2672                 }
2673         }
2674
2675         return this;
2676 };
2677
2678 /**
2679  * Clear all items.
2680  *
2681  * Items will be detached, not removed, so they can be used later.
2682  *
2683  * @chainable
2684  */
2685 OO.ui.GroupElement.prototype.clearItems = function () {
2686         var i, len, item, remove, itemEvent;
2687
2688         // Remove all items
2689         for ( i = 0, len = this.items.length; i < len; i++ ) {
2690                 item = this.items[i];
2691                 if (
2692                         item.connect && item.disconnect &&
2693                         !$.isEmptyObject( this.aggregateItemEvents )
2694                 ) {
2695                         remove = {};
2696                         if ( itemEvent in this.aggregateItemEvents ) {
2697                                 remove[itemEvent] = [ 'emit', this.aggregateItemEvents[itemEvent], item ];
2698                         }
2699                         item.disconnect( this, remove );
2700                 }
2701                 item.setElementGroup( null );
2702                 item.$element.detach();
2703         }
2704
2705         this.items = [];
2706         return this;
2707 };
2708 /**
2709  * Element containing an icon.
2710  *
2711  * @abstract
2712  * @class
2713  *
2714  * @constructor
2715  * @param {jQuery} $icon Icon node, assigned to #$icon
2716  * @param {Object} [config] Configuration options
2717  * @cfg {Object|string} [icon=''] Symbolic icon name, or map of icon names keyed by language ID;
2718  *  use the 'default' key to specify the icon to be used when there is no icon in the user's
2719  *  language
2720  */
2721 OO.ui.IconedElement = function OoUiIconedElement( $icon, config ) {
2722         // Config intialization
2723         config = config || {};
2724
2725         // Properties
2726         this.$icon = $icon;
2727         this.icon = null;
2728
2729         // Initialization
2730         this.$icon.addClass( 'oo-ui-iconedElement-icon' );
2731         this.setIcon( config.icon || this.constructor.static.icon );
2732 };
2733
2734 /* Setup */
2735
2736 OO.initClass( OO.ui.IconedElement );
2737
2738 /* Static Properties */
2739
2740 /**
2741  * Icon.
2742  *
2743  * Value should be the unique portion of an icon CSS class name, such as 'up' for 'oo-ui-icon-up'.
2744  *
2745  * For i18n purposes, this property can be an object containing a `default` icon name property and
2746  * additional icon names keyed by language code.
2747  *
2748  * Example of i18n icon definition:
2749  *     { 'default': 'bold-a', 'en': 'bold-b', 'de': 'bold-f' }
2750  *
2751  * @static
2752  * @inheritable
2753  * @property {Object|string} Symbolic icon name, or map of icon names keyed by language ID;
2754  *  use the 'default' key to specify the icon to be used when there is no icon in the user's
2755  *  language
2756  */
2757 OO.ui.IconedElement.static.icon = null;
2758
2759 /* Methods */
2760
2761 /**
2762  * Set icon.
2763  *
2764  * @param {Object|string} icon Symbolic icon name, or map of icon names keyed by language ID;
2765  *  use the 'default' key to specify the icon to be used when there is no icon in the user's
2766  *  language
2767  * @chainable
2768  */
2769 OO.ui.IconedElement.prototype.setIcon = function ( icon ) {
2770         icon = OO.isPlainObject( icon ) ? OO.ui.getLocalValue( icon, null, 'default' ) : icon;
2771
2772         if ( this.icon ) {
2773                 this.$icon.removeClass( 'oo-ui-icon-' + this.icon );
2774         }
2775         if ( typeof icon === 'string' ) {
2776                 icon = icon.trim();
2777                 if ( icon.length ) {
2778                         this.$icon.addClass( 'oo-ui-icon-' + icon );
2779                         this.icon = icon;
2780                 }
2781         }
2782         this.$element.toggleClass( 'oo-ui-iconedElement', !!this.icon );
2783
2784         return this;
2785 };
2786
2787 /**
2788  * Get icon.
2789  *
2790  * @return {string} Icon
2791  */
2792 OO.ui.IconedElement.prototype.getIcon = function () {
2793         return this.icon;
2794 };
2795 /**
2796  * Element containing an indicator.
2797  *
2798  * @abstract
2799  * @class
2800  *
2801  * @constructor
2802  * @param {jQuery} $indicator Indicator node, assigned to #$indicator
2803  * @param {Object} [config] Configuration options
2804  * @cfg {string} [indicator] Symbolic indicator name
2805  * @cfg {string} [indicatorTitle] Indicator title text or a function that return text
2806  */
2807 OO.ui.IndicatedElement = function OoUiIndicatedElement( $indicator, config ) {
2808         // Config intialization
2809         config = config || {};
2810
2811         // Properties
2812         this.$indicator = $indicator;
2813         this.indicator = null;
2814         this.indicatorLabel = null;
2815
2816         // Initialization
2817         this.$indicator.addClass( 'oo-ui-indicatedElement-indicator' );
2818         this.setIndicator( config.indicator || this.constructor.static.indicator );
2819         this.setIndicatorTitle( config.indicatorTitle  || this.constructor.static.indicatorTitle );
2820 };
2821
2822 /* Setup */
2823
2824 OO.initClass( OO.ui.IndicatedElement );
2825
2826 /* Static Properties */
2827
2828 /**
2829  * indicator.
2830  *
2831  * @static
2832  * @inheritable
2833  * @property {string|null} Symbolic indicator name or null for no indicator
2834  */
2835 OO.ui.IndicatedElement.static.indicator = null;
2836
2837 /**
2838  * Indicator title.
2839  *
2840  * @static
2841  * @inheritable
2842  * @property {string|Function|null} Indicator title text, a function that return text or null for no
2843  *  indicator title
2844  */
2845 OO.ui.IndicatedElement.static.indicatorTitle = null;
2846
2847 /* Methods */
2848
2849 /**
2850  * Set indicator.
2851  *
2852  * @param {string|null} indicator Symbolic name of indicator to use or null for no indicator
2853  * @chainable
2854  */
2855 OO.ui.IndicatedElement.prototype.setIndicator = function ( indicator ) {
2856         if ( this.indicator ) {
2857                 this.$indicator.removeClass( 'oo-ui-indicator-' + this.indicator );
2858                 this.indicator = null;
2859         }
2860         if ( typeof indicator === 'string' ) {
2861                 indicator = indicator.trim();
2862                 if ( indicator.length ) {
2863                         this.$indicator.addClass( 'oo-ui-indicator-' + indicator );
2864                         this.indicator = indicator;
2865                 }
2866         }
2867         this.$element.toggleClass( 'oo-ui-indicatedElement', !!this.indicator );
2868
2869         return this;
2870 };
2871
2872 /**
2873  * Set indicator label.
2874  *
2875  * @param {string|Function|null} indicator Indicator title text, a function that return text or null
2876  *  for no indicator title
2877  * @chainable
2878  */
2879 OO.ui.IndicatedElement.prototype.setIndicatorTitle = function ( indicatorTitle ) {
2880         this.indicatorTitle = indicatorTitle = OO.ui.resolveMsg( indicatorTitle );
2881
2882         if ( typeof indicatorTitle === 'string' && indicatorTitle.length ) {
2883                 this.$indicator.attr( 'title', indicatorTitle );
2884         } else {
2885                 this.$indicator.removeAttr( 'title' );
2886         }
2887
2888         return this;
2889 };
2890
2891 /**
2892  * Get indicator.
2893  *
2894  * @return {string} title Symbolic name of indicator
2895  */
2896 OO.ui.IndicatedElement.prototype.getIndicator = function () {
2897         return this.indicator;
2898 };
2899
2900 /**
2901  * Get indicator title.
2902  *
2903  * @return {string} Indicator title text
2904  */
2905 OO.ui.IndicatedElement.prototype.getIndicatorTitle = function () {
2906         return this.indicatorTitle;
2907 };
2908 /**
2909  * Element containing a label.
2910  *
2911  * @abstract
2912  * @class
2913  *
2914  * @constructor
2915  * @param {jQuery} $label Label node, assigned to #$label
2916  * @param {Object} [config] Configuration options
2917  * @cfg {jQuery|string|Function} [label] Label nodes, text or a function that returns nodes or text
2918  * @cfg {boolean} [autoFitLabel=true] Whether to fit the label or not.
2919  */
2920 OO.ui.LabeledElement = function OoUiLabeledElement( $label, config ) {
2921         // Config intialization
2922         config = config || {};
2923
2924         // Properties
2925         this.$label = $label;
2926         this.label = null;
2927
2928         // Initialization
2929         this.$label.addClass( 'oo-ui-labeledElement-label' );
2930         this.setLabel( config.label || this.constructor.static.label );
2931         this.autoFitLabel = config.autoFitLabel === undefined || !!config.autoFitLabel;
2932 };
2933
2934 /* Setup */
2935
2936 OO.initClass( OO.ui.LabeledElement );
2937
2938 /* Static Properties */
2939
2940 /**
2941  * Label.
2942  *
2943  * @static
2944  * @inheritable
2945  * @property {string|Function|null} Label text; a function that returns a nodes or text; or null for
2946  *  no label
2947  */
2948 OO.ui.LabeledElement.static.label = null;
2949
2950 /* Methods */
2951
2952 /**
2953  * Set the label.
2954  *
2955  * An empty string will result in the label being hidden. A string containing only whitespace will
2956  * be converted to a single &nbsp;
2957  *
2958  * @param {jQuery|string|Function|null} label Label nodes; text; a function that retuns nodes or
2959  *  text; or null for no label
2960  * @chainable
2961  */
2962 OO.ui.LabeledElement.prototype.setLabel = function ( label ) {
2963         var empty = false;
2964
2965         this.label = label = OO.ui.resolveMsg( label ) || null;
2966         if ( typeof label === 'string' && label.length ) {
2967                 if ( label.match( /^\s*$/ ) ) {
2968                         // Convert whitespace only string to a single non-breaking space
2969                         this.$label.html( '&nbsp;' );
2970                 } else {
2971                         this.$label.text( label );
2972                 }
2973         } else if ( label instanceof jQuery ) {
2974                 this.$label.empty().append( label );
2975         } else {
2976                 this.$label.empty();
2977                 empty = true;
2978         }
2979         this.$element.toggleClass( 'oo-ui-labeledElement', !empty );
2980         this.$label.css( 'display', empty ? 'none' : '' );
2981
2982         return this;
2983 };
2984
2985 /**
2986  * Get the label.
2987  *
2988  * @return {jQuery|string|Function|null} label Label nodes; text; a function that returns nodes or
2989  *  text; or null for no label
2990  */
2991 OO.ui.LabeledElement.prototype.getLabel = function () {
2992         return this.label;
2993 };
2994
2995 /**
2996  * Fit the label.
2997  *
2998  * @chainable
2999  */
3000 OO.ui.LabeledElement.prototype.fitLabel = function () {
3001         if ( this.$label.autoEllipsis && this.autoFitLabel ) {
3002                 this.$label.autoEllipsis( { 'hasSpan': false, 'tooltip': true } );
3003         }
3004         return this;
3005 };
3006 /**
3007  * Popuppable element.
3008  *
3009  * @abstract
3010  * @class
3011  *
3012  * @constructor
3013  * @param {Object} [config] Configuration options
3014  * @cfg {number} [popupWidth=320] Width of popup
3015  * @cfg {number} [popupHeight] Height of popup
3016  * @cfg {Object} [popup] Configuration to pass to popup
3017  */
3018 OO.ui.PopuppableElement = function OoUiPopuppableElement( config ) {
3019         // Configuration initialization
3020         config = $.extend( { 'popupWidth': 320 }, config );
3021
3022         // Properties
3023         this.popup = new OO.ui.PopupWidget( $.extend(
3024                 { 'align': 'center', 'autoClose': true },
3025                 config.popup,
3026                 { '$': this.$, '$autoCloseIgnore': this.$element }
3027         ) );
3028         this.popupWidth = config.popupWidth;
3029         this.popupHeight = config.popupHeight;
3030 };
3031
3032 /* Methods */
3033
3034 /**
3035  * Get popup.
3036  *
3037  * @return {OO.ui.PopupWidget} Popup widget
3038  */
3039 OO.ui.PopuppableElement.prototype.getPopup = function () {
3040         return this.popup;
3041 };
3042
3043 /**
3044  * Show popup.
3045  */
3046 OO.ui.PopuppableElement.prototype.showPopup = function () {
3047         this.popup.show().display( this.popupWidth, this.popupHeight );
3048 };
3049
3050 /**
3051  * Hide popup.
3052  */
3053 OO.ui.PopuppableElement.prototype.hidePopup = function () {
3054         this.popup.hide();
3055 };
3056 /**
3057  * Element with a title.
3058  *
3059  * @abstract
3060  * @class
3061  *
3062  * @constructor
3063  * @param {jQuery} $label Titled node, assigned to #$titled
3064  * @param {Object} [config] Configuration options
3065  * @cfg {string|Function} [title] Title text or a function that returns text
3066  */
3067 OO.ui.TitledElement = function OoUiTitledElement( $titled, config ) {
3068         // Config intialization
3069         config = config || {};
3070
3071         // Properties
3072         this.$titled = $titled;
3073         this.title = null;
3074
3075         // Initialization
3076         this.setTitle( config.title || this.constructor.static.title );
3077 };
3078
3079 /* Setup */
3080
3081 OO.initClass( OO.ui.TitledElement );
3082
3083 /* Static Properties */
3084
3085 /**
3086  * Title.
3087  *
3088  * @static
3089  * @inheritable
3090  * @property {string|Function} Title text or a function that returns text
3091  */
3092 OO.ui.TitledElement.static.title = null;
3093
3094 /* Methods */
3095
3096 /**
3097  * Set title.
3098  *
3099  * @param {string|Function|null} title Title text, a function that returns text or null for no title
3100  * @chainable
3101  */
3102 OO.ui.TitledElement.prototype.setTitle = function ( title ) {
3103         this.title = title = OO.ui.resolveMsg( title ) || null;
3104
3105         if ( typeof title === 'string' && title.length ) {
3106                 this.$titled.attr( 'title', title );
3107         } else {
3108                 this.$titled.removeAttr( 'title' );
3109         }
3110
3111         return this;
3112 };
3113
3114 /**
3115  * Get title.
3116  *
3117  * @return {string} Title string
3118  */
3119 OO.ui.TitledElement.prototype.getTitle = function () {
3120         return this.title;
3121 };
3122 /**
3123  * Generic toolbar tool.
3124  *
3125  * @abstract
3126  * @class
3127  * @extends OO.ui.Widget
3128  * @mixins OO.ui.IconedElement
3129  *
3130  * @constructor
3131  * @param {OO.ui.ToolGroup} toolGroup
3132  * @param {Object} [config] Configuration options
3133  * @cfg {string|Function} [title] Title text or a function that returns text
3134  */
3135 OO.ui.Tool = function OoUiTool( toolGroup, config ) {
3136         // Config intialization
3137         config = config || {};
3138
3139         // Parent constructor
3140         OO.ui.Tool.super.call( this, config );
3141
3142         // Mixin constructors
3143         OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
3144
3145         // Properties
3146         this.toolGroup = toolGroup;
3147         this.toolbar = this.toolGroup.getToolbar();
3148         this.active = false;
3149         this.$title = this.$( '<span>' );
3150         this.$link = this.$( '<a>' );
3151         this.title = null;
3152
3153         // Events
3154         this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );
3155
3156         // Initialization
3157         this.$title.addClass( 'oo-ui-tool-title' );
3158         this.$link
3159                 .addClass( 'oo-ui-tool-link' )
3160                 .append( this.$icon, this.$title );
3161         this.$element
3162                 .data( 'oo-ui-tool', this )
3163                 .addClass(
3164                         'oo-ui-tool ' + 'oo-ui-tool-name-' +
3165                         this.constructor.static.name.replace( /^([^\/]+)\/([^\/]+).*$/, '$1-$2' )
3166                 )
3167                 .append( this.$link );
3168         this.setTitle( config.title || this.constructor.static.title );
3169 };
3170
3171 /* Setup */
3172
3173 OO.inheritClass( OO.ui.Tool, OO.ui.Widget );
3174 OO.mixinClass( OO.ui.Tool, OO.ui.IconedElement );
3175
3176 /* Events */
3177
3178 /**
3179  * @event select
3180  */
3181
3182 /* Static Properties */
3183
3184 /**
3185  * @static
3186  * @inheritdoc
3187  */
3188 OO.ui.Tool.static.tagName = 'span';
3189
3190 /**
3191  * Symbolic name of tool.
3192  *
3193  * @abstract
3194  * @static
3195  * @inheritable
3196  * @property {string}
3197  */
3198 OO.ui.Tool.static.name = '';
3199
3200 /**
3201  * Tool group.
3202  *
3203  * @abstract
3204  * @static
3205  * @inheritable
3206  * @property {string}
3207  */
3208 OO.ui.Tool.static.group = '';
3209
3210 /**
3211  * Tool title.
3212  *
3213  * Title is used as a tooltip when the tool is part of a bar tool group, or a label when the tool
3214  * is part of a list or menu tool group. If a trigger is associated with an action by the same name
3215  * as the tool, a description of its keyboard shortcut for the appropriate platform will be
3216  * appended to the title if the tool is part of a bar tool group.
3217  *
3218  * @abstract
3219  * @static
3220  * @inheritable
3221  * @property {string|Function} Title text or a function that returns text
3222  */
3223 OO.ui.Tool.static.title = '';
3224
3225 /**
3226  * Tool can be automatically added to catch-all groups.
3227  *
3228  * @static
3229  * @inheritable
3230  * @property {boolean}
3231  */
3232 OO.ui.Tool.static.autoAddToCatchall = true;
3233
3234 /**
3235  * Tool can be automatically added to named groups.
3236  *
3237  * @static
3238  * @property {boolean}
3239  * @inheritable
3240  */
3241 OO.ui.Tool.static.autoAddToGroup = true;
3242
3243 /**
3244  * Check if this tool is compatible with given data.
3245  *
3246  * @static
3247  * @inheritable
3248  * @param {Mixed} data Data to check
3249  * @return {boolean} Tool can be used with data
3250  */
3251 OO.ui.Tool.static.isCompatibleWith = function () {
3252         return false;
3253 };
3254
3255 /* Methods */
3256
3257 /**
3258  * Handle the toolbar state being updated.
3259  *
3260  * This is an abstract method that must be overridden in a concrete subclass.
3261  *
3262  * @abstract
3263  */
3264 OO.ui.Tool.prototype.onUpdateState = function () {
3265         throw new Error(
3266                 'OO.ui.Tool.onUpdateState not implemented in this subclass:' + this.constructor
3267         );
3268 };
3269
3270 /**
3271  * Handle the tool being selected.
3272  *
3273  * This is an abstract method that must be overridden in a concrete subclass.
3274  *
3275  * @abstract
3276  */
3277 OO.ui.Tool.prototype.onSelect = function () {
3278         throw new Error(
3279                 'OO.ui.Tool.onSelect not implemented in this subclass:' + this.constructor
3280         );
3281 };
3282
3283 /**
3284  * Check if the button is active.
3285  *
3286  * @param {boolean} Button is active
3287  */
3288 OO.ui.Tool.prototype.isActive = function () {
3289         return this.active;
3290 };
3291
3292 /**
3293  * Make the button appear active or inactive.
3294  *
3295  * @param {boolean} state Make button appear active
3296  */
3297 OO.ui.Tool.prototype.setActive = function ( state ) {
3298         this.active = !!state;
3299         if ( this.active ) {
3300                 this.$element.addClass( 'oo-ui-tool-active' );
3301         } else {
3302                 this.$element.removeClass( 'oo-ui-tool-active' );
3303         }
3304 };
3305
3306 /**
3307  * Get the tool title.
3308  *
3309  * @param {string|Function} title Title text or a function that returns text
3310  * @chainable
3311  */
3312 OO.ui.Tool.prototype.setTitle = function ( title ) {
3313         this.title = OO.ui.resolveMsg( title );
3314         this.updateTitle();
3315         return this;
3316 };
3317
3318 /**
3319  * Get the tool title.
3320  *
3321  * @return {string} Title text
3322  */
3323 OO.ui.Tool.prototype.getTitle = function () {
3324         return this.title;
3325 };
3326
3327 /**
3328  * Get the tool's symbolic name.
3329  *
3330  * @return {string} Symbolic name of tool
3331  */
3332 OO.ui.Tool.prototype.getName = function () {
3333         return this.constructor.static.name;
3334 };
3335
3336 /**
3337  * Update the title.
3338  */
3339 OO.ui.Tool.prototype.updateTitle = function () {
3340         var titleTooltips = this.toolGroup.constructor.static.titleTooltips,
3341                 accelTooltips = this.toolGroup.constructor.static.accelTooltips,
3342                 accel = this.toolbar.getToolAccelerator( this.constructor.static.name ),
3343                 tooltipParts = [];
3344
3345         this.$title.empty()
3346                 .text( this.title )
3347                 .append(
3348                         this.$( '<span>' )
3349                                 .addClass( 'oo-ui-tool-accel' )
3350                                 .text( accel )
3351                 );
3352
3353         if ( titleTooltips && typeof this.title === 'string' && this.title.length ) {
3354                 tooltipParts.push( this.title );
3355         }
3356         if ( accelTooltips && typeof accel === 'string' && accel.length ) {
3357                 tooltipParts.push( accel );
3358         }
3359         if ( tooltipParts.length ) {
3360                 this.$link.attr( 'title', tooltipParts.join( ' ' ) );
3361         } else {
3362                 this.$link.removeAttr( 'title' );
3363         }
3364 };
3365
3366 /**
3367  * Destroy tool.
3368  */
3369 OO.ui.Tool.prototype.destroy = function () {
3370         this.toolbar.disconnect( this );
3371         this.$element.remove();
3372 };
3373 /**
3374  * Collection of tool groups.
3375  *
3376  * @class
3377  * @extends OO.ui.Element
3378  * @mixins OO.EventEmitter
3379  * @mixins OO.ui.GroupElement
3380  *
3381  * @constructor
3382  * @param {OO.ui.ToolFactory} toolFactory Factory for creating tools
3383  * @param {OO.ui.ToolGroupFactory} toolGroupFactory Factory for creating tool groups
3384  * @param {Object} [config] Configuration options
3385  * @cfg {boolean} [actions] Add an actions section opposite to the tools
3386  * @cfg {boolean} [shadow] Add a shadow below the toolbar
3387  */
3388 OO.ui.Toolbar = function OoUiToolbar( toolFactory, toolGroupFactory, config ) {
3389         // Configuration initialization
3390         config = config || {};
3391
3392         // Parent constructor
3393         OO.ui.Toolbar.super.call( this, config );
3394
3395         // Mixin constructors
3396         OO.EventEmitter.call( this );
3397         OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
3398
3399         // Properties
3400         this.toolFactory = toolFactory;
3401         this.toolGroupFactory = toolGroupFactory;
3402         this.groups = [];
3403         this.tools = {};
3404         this.$bar = this.$( '<div>' );
3405         this.$actions = this.$( '<div>' );
3406         this.initialized = false;
3407
3408         // Events
3409         this.$element
3410                 .add( this.$bar ).add( this.$group ).add( this.$actions )
3411                 .on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
3412
3413         // Initialization
3414         this.$group.addClass( 'oo-ui-toolbar-tools' );
3415         this.$bar.addClass( 'oo-ui-toolbar-bar' ).append( this.$group );
3416         if ( config.actions ) {
3417                 this.$actions.addClass( 'oo-ui-toolbar-actions' );
3418                 this.$bar.append( this.$actions );
3419         }
3420         this.$bar.append( '<div style="clear:both"></div>' );
3421         if ( config.shadow ) {
3422                 this.$bar.append( '<div class="oo-ui-toolbar-shadow"></div>' );
3423         }
3424         this.$element.addClass( 'oo-ui-toolbar' ).append( this.$bar );
3425 };
3426
3427 /* Setup */
3428
3429 OO.inheritClass( OO.ui.Toolbar, OO.ui.Element );
3430 OO.mixinClass( OO.ui.Toolbar, OO.EventEmitter );
3431 OO.mixinClass( OO.ui.Toolbar, OO.ui.GroupElement );
3432
3433 /* Methods */
3434
3435 /**
3436  * Get the tool factory.
3437  *
3438  * @return {OO.ui.ToolFactory} Tool factory
3439  */
3440 OO.ui.Toolbar.prototype.getToolFactory = function () {
3441         return this.toolFactory;
3442 };
3443
3444 /**
3445  * Get the tool group factory.
3446  *
3447  * @return {OO.Factory} Tool group factory
3448  */
3449 OO.ui.Toolbar.prototype.getToolGroupFactory = function () {
3450         return this.toolGroupFactory;
3451 };
3452
3453 /**
3454  * Handles mouse down events.
3455  *
3456  * @param {jQuery.Event} e Mouse down event
3457  */
3458 OO.ui.Toolbar.prototype.onMouseDown = function ( e ) {
3459         var $closestWidgetToEvent = this.$( e.target ).closest( '.oo-ui-widget' ),
3460                 $closestWidgetToToolbar = this.$element.closest( '.oo-ui-widget' );
3461         if ( !$closestWidgetToEvent.length || $closestWidgetToEvent[0] === $closestWidgetToToolbar[0] ) {
3462                 return false;
3463         }
3464 };
3465
3466 /**
3467  * Sets up handles and preloads required information for the toolbar to work.
3468  * This must be called immediately after it is attached to a visible document.
3469  */
3470 OO.ui.Toolbar.prototype.initialize = function () {
3471         this.initialized = true;
3472 };
3473
3474 /**
3475  * Setup toolbar.
3476  *
3477  * Tools can be specified in the following ways:
3478  *
3479  * - A specific tool: `{ 'name': 'tool-name' }` or `'tool-name'`
3480  * - All tools in a group: `{ 'group': 'group-name' }`
3481  * - All tools: `'*'` - Using this will make the group a list with a "More" label by default
3482  *
3483  * @param {Object.<string,Array>} groups List of tool group configurations
3484  * @param {Array|string} [groups.include] Tools to include
3485  * @param {Array|string} [groups.exclude] Tools to exclude
3486  * @param {Array|string} [groups.promote] Tools to promote to the beginning
3487  * @param {Array|string} [groups.demote] Tools to demote to the end
3488  */
3489 OO.ui.Toolbar.prototype.setup = function ( groups ) {
3490         var i, len, type, group,
3491                 items = [],
3492                 defaultType = 'bar';
3493
3494         // Cleanup previous groups
3495         this.reset();
3496
3497         // Build out new groups
3498         for ( i = 0, len = groups.length; i < len; i++ ) {
3499                 group = groups[i];
3500                 if ( group.include === '*' ) {
3501                         // Apply defaults to catch-all groups
3502                         if ( group.type === undefined ) {
3503                                 group.type = 'list';
3504                         }
3505                         if ( group.label === undefined ) {
3506                                 group.label = 'ooui-toolbar-more';
3507                         }
3508                 }
3509                 // Check type has been registered
3510                 type = this.getToolGroupFactory().lookup( group.type ) ? group.type : defaultType;
3511                 items.push(
3512                         this.getToolGroupFactory().create( type, this, $.extend( { '$': this.$ }, group ) )
3513                 );
3514         }
3515         this.addItems( items );
3516 };
3517
3518 /**
3519  * Remove all tools and groups from the toolbar.
3520  */
3521 OO.ui.Toolbar.prototype.reset = function () {
3522         var i, len;
3523
3524         this.groups = [];
3525         this.tools = {};
3526         for ( i = 0, len = this.items.length; i < len; i++ ) {
3527                 this.items[i].destroy();
3528         }
3529         this.clearItems();
3530 };
3531
3532 /**
3533  * Destroys toolbar, removing event handlers and DOM elements.
3534  *
3535  * Call this whenever you are done using a toolbar.
3536  */
3537 OO.ui.Toolbar.prototype.destroy = function () {
3538         this.reset();
3539         this.$element.remove();
3540 };
3541
3542 /**
3543  * Check if tool has not been used yet.
3544  *
3545  * @param {string} name Symbolic name of tool
3546  * @return {boolean} Tool is available
3547  */
3548 OO.ui.Toolbar.prototype.isToolAvailable = function ( name ) {
3549         return !this.tools[name];
3550 };
3551
3552 /**
3553  * Prevent tool from being used again.
3554  *
3555  * @param {OO.ui.Tool} tool Tool to reserve
3556  */
3557 OO.ui.Toolbar.prototype.reserveTool = function ( tool ) {
3558         this.tools[tool.getName()] = tool;
3559 };
3560
3561 /**
3562  * Allow tool to be used again.
3563  *
3564  * @param {OO.ui.Tool} tool Tool to release
3565  */
3566 OO.ui.Toolbar.prototype.releaseTool = function ( tool ) {
3567         delete this.tools[tool.getName()];
3568 };
3569
3570 /**
3571  * Get accelerator label for tool.
3572  *
3573  * This is a stub that should be overridden to provide access to accelerator information.
3574  *
3575  * @param {string} name Symbolic name of tool
3576  * @return {string|undefined} Tool accelerator label if available
3577  */
3578 OO.ui.Toolbar.prototype.getToolAccelerator = function () {
3579         return undefined;
3580 };
3581 /**
3582  * Factory for tools.
3583  *
3584  * @class
3585  * @extends OO.Factory
3586  * @constructor
3587  */
3588 OO.ui.ToolFactory = function OoUiToolFactory() {
3589         // Parent constructor
3590         OO.ui.ToolFactory.super.call( this );
3591 };
3592
3593 /* Setup */
3594
3595 OO.inheritClass( OO.ui.ToolFactory, OO.Factory );
3596
3597 /* Methods */
3598
3599 /** */
3600 OO.ui.ToolFactory.prototype.getTools = function ( include, exclude, promote, demote ) {
3601         var i, len, included, promoted, demoted,
3602                 auto = [],
3603                 used = {};
3604
3605         // Collect included and not excluded tools
3606         included = OO.simpleArrayDifference( this.extract( include ), this.extract( exclude ) );
3607
3608         // Promotion
3609         promoted = this.extract( promote, used );
3610         demoted = this.extract( demote, used );
3611
3612         // Auto
3613         for ( i = 0, len = included.length; i < len; i++ ) {
3614                 if ( !used[included[i]] ) {
3615                         auto.push( included[i] );
3616                 }
3617         }
3618
3619         return promoted.concat( auto ).concat( demoted );
3620 };
3621
3622 /**
3623  * Get a flat list of names from a list of names or groups.
3624  *
3625  * Tools can be specified in the following ways:
3626  *
3627  * - A specific tool: `{ 'name': 'tool-name' }` or `'tool-name'`
3628  * - All tools in a group: `{ 'group': 'group-name' }`
3629  * - All tools: `'*'`
3630  *
3631  * @private
3632  * @param {Array|string} collection List of tools
3633  * @param {Object} [used] Object with names that should be skipped as properties; extracted
3634  *  names will be added as properties
3635  * @return {string[]} List of extracted names
3636  */
3637 OO.ui.ToolFactory.prototype.extract = function ( collection, used ) {
3638         var i, len, item, name, tool,
3639                 names = [];
3640
3641         if ( collection === '*' ) {
3642                 for ( name in this.registry ) {
3643                         tool = this.registry[name];
3644                         if (
3645                                 // Only add tools by group name when auto-add is enabled
3646                                 tool.static.autoAddToCatchall &&
3647                                 // Exclude already used tools
3648                                 ( !used || !used[name] )
3649                         ) {
3650                                 names.push( name );
3651                                 if ( used ) {
3652                                         used[name] = true;
3653                                 }
3654                         }
3655                 }
3656         } else if ( $.isArray( collection ) ) {
3657                 for ( i = 0, len = collection.length; i < len; i++ ) {
3658                         item = collection[i];
3659                         // Allow plain strings as shorthand for named tools
3660                         if ( typeof item === 'string' ) {
3661                                 item = { 'name': item };
3662                         }
3663                         if ( OO.isPlainObject( item ) ) {
3664                                 if ( item.group ) {
3665                                         for ( name in this.registry ) {
3666                                                 tool = this.registry[name];
3667                                                 if (
3668                                                         // Include tools with matching group
3669                                                         tool.static.group === item.group &&
3670                                                         // Only add tools by group name when auto-add is enabled
3671                                                         tool.static.autoAddToGroup &&
3672                                                         // Exclude already used tools
3673                                                         ( !used || !used[name] )
3674                                                 ) {
3675                                                         names.push( name );
3676                                                         if ( used ) {
3677                                                                 used[name] = true;
3678                                                         }
3679                                                 }
3680                                         }
3681                                 // Include tools with matching name and exclude already used tools
3682                                 } else if ( item.name && ( !used || !used[item.name] ) ) {
3683                                         names.push( item.name );
3684                                         if ( used ) {
3685                                                 used[item.name] = true;
3686                                         }
3687                                 }
3688                         }
3689                 }
3690         }
3691         return names;
3692 };
3693 /**
3694  * Collection of tools.
3695  *
3696  * Tools can be specified in the following ways:
3697  *
3698  * - A specific tool: `{ 'name': 'tool-name' }` or `'tool-name'`
3699  * - All tools in a group: `{ 'group': 'group-name' }`
3700  * - All tools: `'*'`
3701  *
3702  * @abstract
3703  * @class
3704  * @extends OO.ui.Widget
3705  * @mixins OO.ui.GroupElement
3706  *
3707  * @constructor
3708  * @param {OO.ui.Toolbar} toolbar
3709  * @param {Object} [config] Configuration options
3710  * @cfg {Array|string} [include=[]] List of tools to include
3711  * @cfg {Array|string} [exclude=[]] List of tools to exclude
3712  * @cfg {Array|string} [promote=[]] List of tools to promote to the beginning
3713  * @cfg {Array|string} [demote=[]] List of tools to demote to the end
3714  */
3715 OO.ui.ToolGroup = function OoUiToolGroup( toolbar, config ) {
3716         // Configuration initialization
3717         config = config || {};
3718
3719         // Parent constructor
3720         OO.ui.ToolGroup.super.call( this, config );
3721
3722         // Mixin constructors
3723         OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
3724
3725         // Properties
3726         this.toolbar = toolbar;
3727         this.tools = {};
3728         this.pressed = null;
3729         this.autoDisabled = false;
3730         this.include = config.include || [];
3731         this.exclude = config.exclude || [];
3732         this.promote = config.promote || [];
3733         this.demote = config.demote || [];
3734         this.onCapturedMouseUpHandler = OO.ui.bind( this.onCapturedMouseUp, this );
3735
3736         // Events
3737         this.$element.on( {
3738                 'mousedown': OO.ui.bind( this.onMouseDown, this ),
3739                 'mouseup': OO.ui.bind( this.onMouseUp, this ),
3740                 'mouseover': OO.ui.bind( this.onMouseOver, this ),
3741                 'mouseout': OO.ui.bind( this.onMouseOut, this )
3742         } );
3743         this.toolbar.getToolFactory().connect( this, { 'register': 'onToolFactoryRegister' } );
3744         this.aggregate( { 'disable': 'itemDisable' } );
3745         this.connect( this, { 'itemDisable': 'updateDisabled' } );
3746
3747         // Initialization
3748         this.$group.addClass( 'oo-ui-toolGroup-tools' );
3749         this.$element
3750                 .addClass( 'oo-ui-toolGroup' )
3751                 .append( this.$group );
3752         this.populate();
3753 };
3754
3755 /* Setup */
3756
3757 OO.inheritClass( OO.ui.ToolGroup, OO.ui.Widget );
3758 OO.mixinClass( OO.ui.ToolGroup, OO.ui.GroupElement );
3759
3760 /* Events */
3761
3762 /**
3763  * @event update
3764  */
3765
3766 /* Static Properties */
3767
3768 /**
3769  * Show labels in tooltips.
3770  *
3771  * @static
3772  * @inheritable
3773  * @property {boolean}
3774  */
3775 OO.ui.ToolGroup.static.titleTooltips = false;
3776
3777 /**
3778  * Show acceleration labels in tooltips.
3779  *
3780  * @static
3781  * @inheritable
3782  * @property {boolean}
3783  */
3784 OO.ui.ToolGroup.static.accelTooltips = false;
3785
3786 /**
3787  * Automatically disable the toolgroup when all tools are disabled
3788  *
3789  * @static
3790  * @inheritable
3791  * @property {boolean}
3792  */
3793 OO.ui.ToolGroup.static.autoDisable = true;
3794
3795 /* Methods */
3796
3797 /**
3798  * @inheritdoc
3799  */
3800 OO.ui.ToolGroup.prototype.isDisabled = function () {
3801         return this.autoDisabled || OO.ui.ToolGroup.super.prototype.isDisabled.apply( this, arguments );
3802 };
3803
3804 /**
3805  * @inheritdoc
3806  */
3807 OO.ui.ToolGroup.prototype.updateDisabled = function () {
3808         var i, item, allDisabled = true;
3809
3810         if ( this.constructor.static.autoDisable ) {
3811                 for ( i = this.items.length - 1; i >= 0; i-- ) {
3812                         item = this.items[i];
3813                         if ( !item.isDisabled() ) {
3814                                 allDisabled = false;
3815                                 break;
3816                         }
3817                 }
3818                 this.autoDisabled = allDisabled;
3819         }
3820         OO.ui.ToolGroup.super.prototype.updateDisabled.apply( this, arguments );
3821 };
3822
3823 /**
3824  * Handle mouse down events.
3825  *
3826  * @param {jQuery.Event} e Mouse down event
3827  */
3828 OO.ui.ToolGroup.prototype.onMouseDown = function ( e ) {
3829         if ( !this.isDisabled() && e.which === 1 ) {
3830                 this.pressed = this.getTargetTool( e );
3831                 if ( this.pressed ) {
3832                         this.pressed.setActive( true );
3833                         this.getElementDocument().addEventListener(
3834                                 'mouseup', this.onCapturedMouseUpHandler, true
3835                         );
3836                         return false;
3837                 }
3838         }
3839 };
3840
3841 /**
3842  * Handle captured mouse up events.
3843  *
3844  * @param {Event} e Mouse up event
3845  */
3846 OO.ui.ToolGroup.prototype.onCapturedMouseUp = function ( e ) {
3847         this.getElementDocument().removeEventListener( 'mouseup', this.onCapturedMouseUpHandler, true );
3848         // onMouseUp may be called a second time, depending on where the mouse is when the button is
3849         // released, but since `this.pressed` will no longer be true, the second call will be ignored.
3850         this.onMouseUp( e );
3851 };
3852
3853 /**
3854  * Handle mouse up events.
3855  *
3856  * @param {jQuery.Event} e Mouse up event
3857  */
3858 OO.ui.ToolGroup.prototype.onMouseUp = function ( e ) {
3859         var tool = this.getTargetTool( e );
3860
3861         if ( !this.isDisabled() && e.which === 1 && this.pressed && this.pressed === tool ) {
3862                 this.pressed.onSelect();
3863         }
3864
3865         this.pressed = null;
3866         return false;
3867 };
3868
3869 /**
3870  * Handle mouse over events.
3871  *
3872  * @param {jQuery.Event} e Mouse over event
3873  */
3874 OO.ui.ToolGroup.prototype.onMouseOver = function ( e ) {
3875         var tool = this.getTargetTool( e );
3876
3877         if ( this.pressed && this.pressed === tool ) {
3878                 this.pressed.setActive( true );
3879         }
3880 };
3881
3882 /**
3883  * Handle mouse out events.
3884  *
3885  * @param {jQuery.Event} e Mouse out event
3886  */
3887 OO.ui.ToolGroup.prototype.onMouseOut = function ( e ) {
3888         var tool = this.getTargetTool( e );
3889
3890         if ( this.pressed && this.pressed === tool ) {
3891                 this.pressed.setActive( false );
3892         }
3893 };
3894
3895 /**
3896  * Get the closest tool to a jQuery.Event.
3897  *
3898  * Only tool links are considered, which prevents other elements in the tool such as popups from
3899  * triggering tool group interactions.
3900  *
3901  * @private
3902  * @param {jQuery.Event} e
3903  * @return {OO.ui.Tool|null} Tool, `null` if none was found
3904  */
3905 OO.ui.ToolGroup.prototype.getTargetTool = function ( e ) {
3906         var tool,
3907                 $item = this.$( e.target ).closest( '.oo-ui-tool-link' );
3908
3909         if ( $item.length ) {
3910                 tool = $item.parent().data( 'oo-ui-tool' );
3911         }
3912
3913         return tool && !tool.isDisabled() ? tool : null;
3914 };
3915
3916 /**
3917  * Handle tool registry register events.
3918  *
3919  * If a tool is registered after the group is created, we must repopulate the list to account for:
3920  *
3921  * - a tool being added that may be included
3922  * - a tool already included being overridden
3923  *
3924  * @param {string} name Symbolic name of tool
3925  */
3926 OO.ui.ToolGroup.prototype.onToolFactoryRegister = function () {
3927         this.populate();
3928 };
3929
3930 /**
3931  * Get the toolbar this group is in.
3932  *
3933  * @return {OO.ui.Toolbar} Toolbar of group
3934  */
3935 OO.ui.ToolGroup.prototype.getToolbar = function () {
3936         return this.toolbar;
3937 };
3938
3939 /**
3940  * Add and remove tools based on configuration.
3941  */
3942 OO.ui.ToolGroup.prototype.populate = function () {
3943         var i, len, name, tool,
3944                 toolFactory = this.toolbar.getToolFactory(),
3945                 names = {},
3946                 add = [],
3947                 remove = [],
3948                 list = this.toolbar.getToolFactory().getTools(
3949                         this.include, this.exclude, this.promote, this.demote
3950                 );
3951
3952         // Build a list of needed tools
3953         for ( i = 0, len = list.length; i < len; i++ ) {
3954                 name = list[i];
3955                 if (
3956                         // Tool exists
3957                         toolFactory.lookup( name ) &&
3958                         // Tool is available or is already in this group
3959                         ( this.toolbar.isToolAvailable( name ) || this.tools[name] )
3960                 ) {
3961                         tool = this.tools[name];
3962                         if ( !tool ) {
3963                                 // Auto-initialize tools on first use
3964                                 this.tools[name] = tool = toolFactory.create( name, this );
3965                                 tool.updateTitle();
3966                         }
3967                         this.toolbar.reserveTool( tool );
3968                         add.push( tool );
3969                         names[name] = true;
3970                 }
3971         }
3972         // Remove tools that are no longer needed
3973         for ( name in this.tools ) {
3974                 if ( !names[name] ) {
3975                         this.tools[name].destroy();
3976                         this.toolbar.releaseTool( this.tools[name] );
3977                         remove.push( this.tools[name] );
3978                         delete this.tools[name];
3979                 }
3980         }
3981         if ( remove.length ) {
3982                 this.removeItems( remove );
3983         }
3984         // Update emptiness state
3985         if ( add.length ) {
3986                 this.$element.removeClass( 'oo-ui-toolGroup-empty' );
3987         } else {
3988                 this.$element.addClass( 'oo-ui-toolGroup-empty' );
3989         }
3990         // Re-add tools (moving existing ones to new locations)
3991         this.addItems( add );
3992         // Disabled state may depend on items
3993         this.updateDisabled();
3994 };
3995
3996 /**
3997  * Destroy tool group.
3998  */
3999 OO.ui.ToolGroup.prototype.destroy = function () {
4000         var name;
4001
4002         this.clearItems();
4003         this.toolbar.getToolFactory().disconnect( this );
4004         for ( name in this.tools ) {
4005                 this.toolbar.releaseTool( this.tools[name] );
4006                 this.tools[name].disconnect( this ).destroy();
4007                 delete this.tools[name];
4008         }
4009         this.$element.remove();
4010 };
4011 /**
4012  * Factory for tool groups.
4013  *
4014  * @class
4015  * @extends OO.Factory
4016  * @constructor
4017  */
4018 OO.ui.ToolGroupFactory = function OoUiToolGroupFactory() {
4019         // Parent constructor
4020         OO.Factory.call( this );
4021
4022         var i, l,
4023                 defaultClasses = this.constructor.static.getDefaultClasses();
4024
4025         // Register default toolgroups
4026         for ( i = 0, l = defaultClasses.length; i < l; i++ ) {
4027                 this.register( defaultClasses[i] );
4028         }
4029 };
4030
4031 /* Setup */
4032
4033 OO.inheritClass( OO.ui.ToolGroupFactory, OO.Factory );
4034
4035 /* Static Methods */
4036
4037 /**
4038  * Get a default set of classes to be registered on construction
4039  *
4040  * @return {Function[]} Default classes
4041  */
4042 OO.ui.ToolGroupFactory.static.getDefaultClasses = function () {
4043         return [
4044                 OO.ui.BarToolGroup,
4045                 OO.ui.ListToolGroup,
4046                 OO.ui.MenuToolGroup
4047         ];
4048 };
4049 /**
4050  * Layout made of a fieldset and optional legend.
4051  *
4052  * Just add OO.ui.FieldLayout items.
4053  *
4054  * @class
4055  * @extends OO.ui.Layout
4056  * @mixins OO.ui.LabeledElement
4057  * @mixins OO.ui.IconedElement
4058  * @mixins OO.ui.GroupElement
4059  *
4060  * @constructor
4061  * @param {Object} [config] Configuration options
4062  * @cfg {string} [icon] Symbolic icon name
4063  * @cfg {OO.ui.FieldLayout[]} [items] Items to add
4064  */
4065 OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) {
4066         // Config initialization
4067         config = config || {};
4068
4069         // Parent constructor
4070         OO.ui.FieldsetLayout.super.call( this, config );
4071
4072         // Mixin constructors
4073         OO.ui.IconedElement.call( this, this.$( '<div>' ), config );
4074         OO.ui.LabeledElement.call( this, this.$( '<div>' ), config );
4075         OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
4076
4077         // Initialization
4078         this.$element
4079                 .addClass( 'oo-ui-fieldsetLayout' )
4080                 .prepend( this.$icon, this.$label, this.$group );
4081         if ( $.isArray( config.items ) ) {
4082                 this.addItems( config.items );
4083         }
4084 };
4085
4086 /* Setup */
4087
4088 OO.inheritClass( OO.ui.FieldsetLayout, OO.ui.Layout );
4089 OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.IconedElement );
4090 OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.LabeledElement );
4091 OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.GroupElement );
4092
4093 /* Static Properties */
4094
4095 OO.ui.FieldsetLayout.static.tagName = 'div';
4096 /**
4097  * Layout made of a field and optional label.
4098  *
4099  * @class
4100  * @extends OO.ui.Layout
4101  * @mixins OO.ui.LabeledElement
4102  *
4103  * Available label alignment modes include:
4104  *  - 'left': Label is before the field and aligned away from it, best for when the user will be
4105  *    scanning for a specific label in a form with many fields
4106  *  - 'right': Label is before the field and aligned toward it, best for forms the user is very
4107  *    familiar with and will tab through field checking quickly to verify which field they are in
4108  *  - 'top': Label is before the field and above it, best for when the use will need to fill out all
4109  *    fields from top to bottom in a form with few fields
4110  *  - 'inline': Label is after the field and aligned toward it, best for small boolean fields like
4111  *    checkboxes or radio buttons
4112  *
4113  * @constructor
4114  * @param {OO.ui.Widget} field Field widget
4115  * @param {Object} [config] Configuration options
4116  * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top' or 'inline'
4117  */
4118 OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) {
4119         // Config initialization
4120         config = $.extend( { 'align': 'left' }, config );
4121
4122         // Parent constructor
4123         OO.ui.FieldLayout.super.call( this, config );
4124
4125         // Mixin constructors
4126         OO.ui.LabeledElement.call( this, this.$( '<label>' ), config );
4127
4128         // Properties
4129         this.$field = this.$( '<div>' );
4130         this.field = field;
4131         this.align = null;
4132
4133         // Events
4134         if ( this.field instanceof OO.ui.InputWidget ) {
4135                 this.$label.on( 'click', OO.ui.bind( this.onLabelClick, this ) );
4136         }
4137         this.field.connect( this, { 'disable': 'onFieldDisable' } );
4138
4139         // Initialization
4140         this.$element.addClass( 'oo-ui-fieldLayout' );
4141         this.$field
4142                 .addClass( 'oo-ui-fieldLayout-field' )
4143                 .toggleClass( 'oo-ui-fieldLayout-disable', this.field.isDisabled() )
4144                 .append( this.field.$element );
4145         this.setAlignment( config.align );
4146 };
4147
4148 /* Setup */
4149
4150 OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout );
4151 OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabeledElement );
4152
4153 /* Methods */
4154
4155 /**
4156  * Handle field disable events.
4157  *
4158  * @param {boolean} value Field is disabled
4159  */
4160 OO.ui.FieldLayout.prototype.onFieldDisable = function ( value ) {
4161         this.$element.toggleClass( 'oo-ui-fieldLayout-disabled', value );
4162 };
4163
4164 /**
4165  * Handle label mouse click events.
4166  *
4167  * @param {jQuery.Event} e Mouse click event
4168  */
4169 OO.ui.FieldLayout.prototype.onLabelClick = function () {
4170         this.field.simulateLabelClick();
4171         return false;
4172 };
4173
4174 /**
4175  * Get the field.
4176  *
4177  * @return {OO.ui.Widget} Field widget
4178  */
4179 OO.ui.FieldLayout.prototype.getField = function () {
4180         return this.field;
4181 };
4182
4183 /**
4184  * Set the field alignment mode.
4185  *
4186  * @param {string} value Alignment mode, either 'left', 'right', 'top' or 'inline'
4187  * @chainable
4188  */
4189 OO.ui.FieldLayout.prototype.setAlignment = function ( value ) {
4190         if ( value !== this.align ) {
4191                 // Default to 'left'
4192                 if ( [ 'left', 'right', 'top', 'inline' ].indexOf( value ) === -1 ) {
4193                         value = 'left';
4194                 }
4195                 // Reorder elements
4196                 if ( value === 'inline' ) {
4197                         this.$element.append( this.$field, this.$label );
4198                 } else {
4199                         this.$element.append( this.$label, this.$field );
4200                 }
4201                 // Set classes
4202                 if ( this.align ) {
4203                         this.$element.removeClass( 'oo-ui-fieldLayout-align-' + this.align );
4204                 }
4205                 this.align = value;
4206                 this.$element.addClass( 'oo-ui-fieldLayout-align-' + this.align );
4207         }
4208
4209         return this;
4210 };
4211 /**
4212  * Layout made of proportionally sized columns and rows.
4213  *
4214  * @class
4215  * @extends OO.ui.Layout
4216  *
4217  * @constructor
4218  * @param {OO.ui.PanelLayout[]} panels Panels in the grid
4219  * @param {Object} [config] Configuration options
4220  * @cfg {number[]} [widths] Widths of columns as ratios
4221  * @cfg {number[]} [heights] Heights of columns as ratios
4222  */
4223 OO.ui.GridLayout = function OoUiGridLayout( panels, config ) {
4224         var i, len, widths;
4225
4226         // Config initialization
4227         config = config || {};
4228
4229         // Parent constructor
4230         OO.ui.GridLayout.super.call( this, config );
4231
4232         // Properties
4233         this.panels = [];
4234         this.widths = [];
4235         this.heights = [];
4236
4237         // Initialization
4238         this.$element.addClass( 'oo-ui-gridLayout' );
4239         for ( i = 0, len = panels.length; i < len; i++ ) {
4240                 this.panels.push( panels[i] );
4241                 this.$element.append( panels[i].$element );
4242         }
4243         if ( config.widths || config.heights ) {
4244                 this.layout( config.widths || [ 1 ], config.heights || [ 1 ] );
4245         } else {
4246                 // Arrange in columns by default
4247                 widths = [];
4248                 for ( i = 0, len = this.panels.length; i < len; i++ ) {
4249                         widths[i] = 1;
4250                 }
4251                 this.layout( widths, [ 1 ] );
4252         }
4253 };
4254
4255 /* Setup */
4256
4257 OO.inheritClass( OO.ui.GridLayout, OO.ui.Layout );
4258
4259 /* Events */
4260
4261 /**
4262  * @event layout
4263  */
4264
4265 /**
4266  * @event update
4267  */
4268
4269 /* Static Properties */
4270
4271 OO.ui.GridLayout.static.tagName = 'div';
4272
4273 /* Methods */
4274
4275 /**
4276  * Set grid dimensions.
4277  *
4278  * @param {number[]} widths Widths of columns as ratios
4279  * @param {number[]} heights Heights of rows as ratios
4280  * @fires layout
4281  * @throws {Error} If grid is not large enough to fit all panels
4282  */
4283 OO.ui.GridLayout.prototype.layout = function ( widths, heights ) {
4284         var x, y,
4285                 xd = 0,
4286                 yd = 0,
4287                 cols = widths.length,
4288                 rows = heights.length;
4289
4290         // Verify grid is big enough to fit panels
4291         if ( cols * rows < this.panels.length ) {
4292                 throw new Error( 'Grid is not large enough to fit ' + this.panels.length + 'panels' );
4293         }
4294
4295         // Sum up denominators
4296         for ( x = 0; x < cols; x++ ) {
4297                 xd += widths[x];
4298         }
4299         for ( y = 0; y < rows; y++ ) {
4300                 yd += heights[y];
4301         }
4302         // Store factors
4303         this.widths = [];
4304         this.heights = [];
4305         for ( x = 0; x < cols; x++ ) {
4306                 this.widths[x] = widths[x] / xd;
4307         }
4308         for ( y = 0; y < rows; y++ ) {
4309                 this.heights[y] = heights[y] / yd;
4310         }
4311         // Synchronize view
4312         this.update();
4313         this.emit( 'layout' );
4314 };
4315
4316 /**
4317  * Update panel positions and sizes.
4318  *
4319  * @fires update
4320  */
4321 OO.ui.GridLayout.prototype.update = function () {
4322         var x, y, panel,
4323                 i = 0,
4324                 left = 0,
4325                 top = 0,
4326                 dimensions,
4327                 width = 0,
4328                 height = 0,
4329                 cols = this.widths.length,
4330                 rows = this.heights.length;
4331
4332         for ( y = 0; y < rows; y++ ) {
4333                 for ( x = 0; x < cols; x++ ) {
4334                         panel = this.panels[i];
4335                         width = this.widths[x];
4336                         height = this.heights[y];
4337                         dimensions = {
4338                                 'width': Math.round( width * 100 ) + '%',
4339                                 'height': Math.round( height * 100 ) + '%',
4340                                 'top': Math.round( top * 100 ) + '%'
4341                         };
4342                         // If RTL, reverse:
4343                         if ( OO.ui.Element.getDir( this.$.context ) === 'rtl' ) {
4344                                 dimensions.right = Math.round( left * 100 ) + '%';
4345                         } else {
4346                                 dimensions.left = Math.round( left * 100 ) + '%';
4347                         }
4348                         panel.$element.css( dimensions );
4349                         i++;
4350                         left += width;
4351                 }
4352                 top += height;
4353                 left = 0;
4354         }
4355
4356         this.emit( 'update' );
4357 };
4358
4359 /**
4360  * Get a panel at a given position.
4361  *
4362  * The x and y position is affected by the current grid layout.
4363  *
4364  * @param {number} x Horizontal position
4365  * @param {number} y Vertical position
4366  * @return {OO.ui.PanelLayout} The panel at the given postion
4367  */
4368 OO.ui.GridLayout.prototype.getPanel = function ( x, y ) {
4369         return this.panels[( x * this.widths.length ) + y];
4370 };
4371 /**
4372  * Layout containing a series of pages.
4373  *
4374  * @class
4375  * @extends OO.ui.Layout
4376  *
4377  * @constructor
4378  * @param {Object} [config] Configuration options
4379  * @cfg {boolean} [continuous=false] Show all pages, one after another
4380  * @cfg {boolean} [autoFocus=true] Focus on the first focusable element when changing to a page
4381  * @cfg {boolean} [outlined=false] Show an outline
4382  * @cfg {boolean} [editable=false] Show controls for adding, removing and reordering pages
4383  * @cfg {Object[]} [adders] List of adders for controls, each with name, icon and title properties
4384  */
4385 OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
4386         // Initialize configuration
4387         config = config || {};
4388
4389         // Parent constructor
4390         OO.ui.BookletLayout.super.call( this, config );
4391
4392         // Properties
4393         this.currentPageName = null;
4394         this.pages = {};
4395         this.ignoreFocus = false;
4396         this.stackLayout = new OO.ui.StackLayout( { '$': this.$, 'continuous': !!config.continuous } );
4397         this.autoFocus = config.autoFocus === undefined ? true : !!config.autoFocus;
4398         this.outlineVisible = false;
4399         this.outlined = !!config.outlined;
4400         if ( this.outlined ) {
4401                 this.editable = !!config.editable;
4402                 this.adders = config.adders || null;
4403                 this.outlineControlsWidget = null;
4404                 this.outlineWidget = new OO.ui.OutlineWidget( { '$': this.$ } );
4405                 this.outlinePanel = new OO.ui.PanelLayout( { '$': this.$, 'scrollable': true } );
4406                 this.gridLayout = new OO.ui.GridLayout(
4407                         [ this.outlinePanel, this.stackLayout ],
4408                         { '$': this.$, 'widths': [ 1, 2 ] }
4409                 );
4410                 this.outlineVisible = true;
4411                 if ( this.editable ) {
4412                         this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
4413                                 this.outlineWidget,
4414                                 { '$': this.$, 'adders': this.adders }
4415                         );
4416                 }
4417         }
4418
4419         // Events
4420         this.stackLayout.connect( this, { 'set': 'onStackLayoutSet' } );
4421         if ( this.outlined ) {
4422                 this.outlineWidget.connect( this, { 'select': 'onOutlineWidgetSelect' } );
4423         }
4424         if ( this.autoFocus ) {
4425                 // Event 'focus' does not bubble, but 'focusin' does
4426                 this.stackLayout.onDOMEvent( 'focusin', OO.ui.bind( this.onStackLayoutFocus, this ) );
4427         }
4428
4429         // Initialization
4430         this.$element.addClass( 'oo-ui-bookletLayout' );
4431         this.stackLayout.$element.addClass( 'oo-ui-bookletLayout-stackLayout' );
4432         if ( this.outlined ) {
4433                 this.outlinePanel.$element
4434                         .addClass( 'oo-ui-bookletLayout-outlinePanel' )
4435                         .append( this.outlineWidget.$element );
4436                 if ( this.editable ) {
4437                         this.outlinePanel.$element
4438                                 .addClass( 'oo-ui-bookletLayout-outlinePanel-editable' )
4439                                 .append( this.outlineControlsWidget.$element );
4440                 }
4441                 this.$element.append( this.gridLayout.$element );
4442         } else {
4443                 this.$element.append( this.stackLayout.$element );
4444         }
4445 };
4446
4447 /* Setup */
4448
4449 OO.inheritClass( OO.ui.BookletLayout, OO.ui.Layout );
4450
4451 /* Events */
4452
4453 /**
4454  * @event set
4455  * @param {OO.ui.PageLayout} page Current page
4456  */
4457
4458 /**
4459  * @event add
4460  * @param {OO.ui.PageLayout[]} page Added pages
4461  * @param {number} index Index pages were added at
4462  */
4463
4464 /**
4465  * @event remove
4466  * @param {OO.ui.PageLayout[]} pages Removed pages
4467  */
4468
4469 /* Methods */
4470
4471 /**
4472  * Handle stack layout focus.
4473  *
4474  * @param {jQuery.Event} e Focusin event
4475  */
4476 OO.ui.BookletLayout.prototype.onStackLayoutFocus = function ( e ) {
4477         var name, $target;
4478
4479         // Find the page that an element was focused within
4480         $target = $( e.target ).closest( '.oo-ui-pageLayout' );
4481         for ( name in this.pages ) {
4482                 // Check for page match, exclude current page to find only page changes
4483                 if ( this.pages[name].$element[0] === $target[0] && name !== this.currentPageName ) {
4484                         this.setPage( name );
4485                         break;
4486                 }
4487         }
4488 };
4489
4490 /**
4491  * Handle stack layout set events.
4492  *
4493  * @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
4494  */
4495 OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
4496         if ( page ) {
4497                 page.scrollElementIntoView( { 'complete': OO.ui.bind( function () {
4498                         if ( this.autoFocus ) {
4499                                 // Set focus to the first input if nothing on the page is focused yet
4500                                 if ( !page.$element.find( ':focus' ).length ) {
4501                                         page.$element.find( ':input:first' ).focus();
4502                                 }
4503                         }
4504                 }, this ) } );
4505         }
4506 };
4507
4508 /**
4509  * Handle outline widget select events.
4510  *
4511  * @param {OO.ui.OptionWidget|null} item Selected item
4512  */
4513 OO.ui.BookletLayout.prototype.onOutlineWidgetSelect = function ( item ) {
4514         if ( item ) {
4515                 this.setPage( item.getData() );
4516         }
4517 };
4518
4519 /**
4520  * Check if booklet has an outline.
4521  *
4522  * @return {boolean}
4523  */
4524 OO.ui.BookletLayout.prototype.isOutlined = function () {
4525         return this.outlined;
4526 };
4527
4528 /**
4529  * Check if booklet has editing controls.
4530  *
4531  * @return {boolean}
4532  */
4533 OO.ui.BookletLayout.prototype.isEditable = function () {
4534         return this.editable;
4535 };
4536
4537 /**
4538  * Check if booklet has a visible outline.
4539  *
4540  * @return {boolean}
4541  */
4542 OO.ui.BookletLayout.prototype.isOutlineVisible = function () {
4543         return this.outlined && this.outlineVisible;
4544 };
4545
4546 /**
4547  * Hide or show the outline.
4548  *
4549  * @param {boolean} [show] Show outline, omit to invert current state
4550  * @chainable
4551  */
4552 OO.ui.BookletLayout.prototype.toggleOutline = function ( show ) {
4553         if ( this.outlined ) {
4554                 show = show === undefined ? !this.outlineVisible : !!show;
4555                 this.outlineVisible = show;
4556                 this.gridLayout.layout( show ? [ 1, 2 ] : [ 0, 1 ], [ 1 ] );
4557         }
4558
4559         return this;
4560 };
4561
4562 /**
4563  * Get the outline widget.
4564  *
4565  * @param {OO.ui.PageLayout} page Page to be selected
4566  * @return {OO.ui.PageLayout|null} Closest page to another
4567  */
4568 OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
4569         var next, prev, level,
4570                 pages = this.stackLayout.getItems(),
4571                 index = $.inArray( page, pages );
4572
4573         if ( index !== -1 ) {
4574                 next = pages[index + 1];
4575                 prev = pages[index - 1];
4576                 // Prefer adjacent pages at the same level
4577                 if ( this.outlined ) {
4578                         level = this.outlineWidget.getItemFromData( page.getName() ).getLevel();
4579                         if (
4580                                 prev &&
4581                                 level === this.outlineWidget.getItemFromData( prev.getName() ).getLevel()
4582                         ) {
4583                                 return prev;
4584                         }
4585                         if (
4586                                 next &&
4587                                 level === this.outlineWidget.getItemFromData( next.getName() ).getLevel()
4588                         ) {
4589                                 return next;
4590                         }
4591                 }
4592         }
4593         return prev || next || null;
4594 };
4595
4596 /**
4597  * Get the outline widget.
4598  *
4599  * @return {OO.ui.OutlineWidget|null} Outline widget, or null if boolet has no outline
4600  */
4601 OO.ui.BookletLayout.prototype.getOutline = function () {
4602         return this.outlineWidget;
4603 };
4604
4605 /**
4606  * Get the outline controls widget. If the outline is not editable, null is returned.
4607  *
4608  * @return {OO.ui.OutlineControlsWidget|null} The outline controls widget.
4609  */
4610 OO.ui.BookletLayout.prototype.getOutlineControls = function () {
4611         return this.outlineControlsWidget;
4612 };
4613
4614 /**
4615  * Get a page by name.
4616  *
4617  * @param {string} name Symbolic name of page
4618  * @return {OO.ui.PageLayout|undefined} Page, if found
4619  */
4620 OO.ui.BookletLayout.prototype.getPage = function ( name ) {
4621         return this.pages[name];
4622 };
4623
4624 /**
4625  * Get the current page name.
4626  *
4627  * @return {string|null} Current page name
4628  */
4629 OO.ui.BookletLayout.prototype.getPageName = function () {
4630         return this.currentPageName;
4631 };
4632
4633 /**
4634  * Add a page to the layout.
4635  *
4636  * When pages are added with the same names as existing pages, the existing pages will be
4637  * automatically removed before the new pages are added.
4638  *
4639  * @param {OO.ui.PageLayout[]} pages Pages to add
4640  * @param {number} index Index to insert pages after
4641  * @fires add
4642  * @chainable
4643  */
4644 OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) {
4645         var i, len, name, page, item, currentIndex,
4646                 stackLayoutPages = this.stackLayout.getItems(),
4647                 remove = [],
4648                 items = [];
4649
4650         // Remove pages with same names
4651         for ( i = 0, len = pages.length; i < len; i++ ) {
4652                 page = pages[i];
4653                 name = page.getName();
4654
4655                 if ( Object.prototype.hasOwnProperty.call( this.pages, name ) ) {
4656                         // Correct the insertion index
4657                         currentIndex = $.inArray( this.pages[name], stackLayoutPages );
4658                         if ( currentIndex !== -1 && currentIndex + 1 < index ) {
4659                                 index--;
4660                         }
4661                         remove.push( this.pages[name] );
4662                 }
4663         }
4664         if ( remove.length ) {
4665                 this.removePages( remove );
4666         }
4667
4668         // Add new pages
4669         for ( i = 0, len = pages.length; i < len; i++ ) {
4670                 page = pages[i];
4671                 name = page.getName();
4672                 this.pages[page.getName()] = page;
4673                 if ( this.outlined ) {
4674                         item = new OO.ui.OutlineItemWidget( name, page, { '$': this.$ } );
4675                         page.setOutlineItem( item );
4676                         items.push( item );
4677                 }
4678         }
4679
4680         if ( this.outlined && items.length ) {
4681                 this.outlineWidget.addItems( items, index );
4682                 this.updateOutlineWidget();
4683         }
4684         this.stackLayout.addItems( pages, index );
4685         this.emit( 'add', pages, index );
4686
4687         return this;
4688 };
4689
4690 /**
4691  * Remove a page from the layout.
4692  *
4693  * @fires remove
4694  * @chainable
4695  */
4696 OO.ui.BookletLayout.prototype.removePages = function ( pages ) {
4697         var i, len, name, page,
4698                 items = [];
4699
4700         for ( i = 0, len = pages.length; i < len; i++ ) {
4701                 page = pages[i];
4702                 name = page.getName();
4703                 delete this.pages[name];
4704                 if ( this.outlined ) {
4705                         items.push( this.outlineWidget.getItemFromData( name ) );
4706                         page.setOutlineItem( null );
4707                 }
4708         }
4709         if ( this.outlined && items.length ) {
4710                 this.outlineWidget.removeItems( items );
4711                 this.updateOutlineWidget();
4712         }
4713         this.stackLayout.removeItems( pages );
4714         this.emit( 'remove', pages );
4715
4716         return this;
4717 };
4718
4719 /**
4720  * Clear all pages from the layout.
4721  *
4722  * @fires remove
4723  * @chainable
4724  */
4725 OO.ui.BookletLayout.prototype.clearPages = function () {
4726         var i, len,
4727                 pages = this.stackLayout.getItems();
4728
4729         this.pages = {};
4730         this.currentPageName = null;
4731         if ( this.outlined ) {
4732                 this.outlineWidget.clearItems();
4733                 for ( i = 0, len = pages.length; i < len; i++ ) {
4734                         pages[i].setOutlineItem( null );
4735                 }
4736         }
4737         this.stackLayout.clearItems();
4738
4739         this.emit( 'remove', pages );
4740
4741         return this;
4742 };
4743
4744 /**
4745  * Set the current page by name.
4746  *
4747  * @fires set
4748  * @param {string} name Symbolic name of page
4749  */
4750 OO.ui.BookletLayout.prototype.setPage = function ( name ) {
4751         var selectedItem,
4752                 page = this.pages[name];
4753
4754         if ( name !== this.currentPageName ) {
4755                 if ( this.outlined ) {
4756                         selectedItem = this.outlineWidget.getSelectedItem();
4757                         if ( selectedItem && selectedItem.getData() !== name ) {
4758                                 this.outlineWidget.selectItem( this.outlineWidget.getItemFromData( name ) );
4759                         }
4760                 }
4761                 if ( page ) {
4762                         if ( this.currentPageName && this.pages[this.currentPageName] ) {
4763                                 this.pages[this.currentPageName].setActive( false );
4764                                 // Blur anything focused if the next page doesn't have anything focusable - this
4765                                 // is not needed if the next page has something focusable because once it is focused
4766                                 // this blur happens automatically
4767                                 if ( this.autoFocus && !page.$element.find( ':input' ).length ) {
4768                                         this.pages[this.currentPageName].$element.find( ':focus' ).blur();
4769                                 }
4770                         }
4771                         this.currentPageName = name;
4772                         this.stackLayout.setItem( page );
4773                         page.setActive( true );
4774                         this.emit( 'set', page );
4775                 }
4776         }
4777 };
4778
4779 /**
4780  * Call this after adding or removing items from the OutlineWidget.
4781  *
4782  * @chainable
4783  */
4784 OO.ui.BookletLayout.prototype.updateOutlineWidget = function () {
4785         // Auto-select first item when nothing is selected anymore
4786         if ( !this.outlineWidget.getSelectedItem() ) {
4787                 this.outlineWidget.selectItem( this.outlineWidget.getFirstSelectableItem() );
4788         }
4789
4790         return this;
4791 };
4792 /**
4793  * Layout that expands to cover the entire area of its parent, with optional scrolling and padding.
4794  *
4795  * @class
4796  * @extends OO.ui.Layout
4797  *
4798  * @constructor
4799  * @param {Object} [config] Configuration options
4800  * @cfg {boolean} [scrollable] Allow vertical scrolling
4801  * @cfg {boolean} [padded] Pad the content from the edges
4802  */
4803 OO.ui.PanelLayout = function OoUiPanelLayout( config ) {
4804         // Config initialization
4805         config = config || {};
4806
4807         // Parent constructor
4808         OO.ui.PanelLayout.super.call( this, config );
4809
4810         // Initialization
4811         this.$element.addClass( 'oo-ui-panelLayout' );
4812         if ( config.scrollable ) {
4813                 this.$element.addClass( 'oo-ui-panelLayout-scrollable' );
4814         }
4815
4816         if ( config.padded ) {
4817                 this.$element.addClass( 'oo-ui-panelLayout-padded' );
4818         }
4819 };
4820
4821 /* Setup */
4822
4823 OO.inheritClass( OO.ui.PanelLayout, OO.ui.Layout );
4824 /**
4825  * Page within an booklet layout.
4826  *
4827  * @class
4828  * @extends OO.ui.PanelLayout
4829  *
4830  * @constructor
4831  * @param {string} name Unique symbolic name of page
4832  * @param {Object} [config] Configuration options
4833  * @param {string} [outlineItem] Outline item widget
4834  */
4835 OO.ui.PageLayout = function OoUiPageLayout( name, config ) {
4836         // Configuration initialization
4837         config = $.extend( { 'scrollable': true }, config );
4838
4839         // Parent constructor
4840         OO.ui.PageLayout.super.call( this, config );
4841
4842         // Properties
4843         this.name = name;
4844         this.outlineItem = config.outlineItem || null;
4845         this.active = false;
4846
4847         // Initialization
4848         this.$element.addClass( 'oo-ui-pageLayout' );
4849 };
4850
4851 /* Setup */
4852
4853 OO.inheritClass( OO.ui.PageLayout, OO.ui.PanelLayout );
4854
4855 /* Events */
4856
4857 /**
4858  * @event active
4859  * @param {boolean} active Page is active
4860  */
4861
4862 /* Methods */
4863
4864 /**
4865  * Get page name.
4866  *
4867  * @return {string} Symbolic name of page
4868  */
4869 OO.ui.PageLayout.prototype.getName = function () {
4870         return this.name;
4871 };
4872
4873 /**
4874  * Check if page is active.
4875  *
4876  * @return {boolean} Page is active
4877  */
4878 OO.ui.PageLayout.prototype.isActive = function () {
4879         return this.active;
4880 };
4881
4882 /**
4883  * Get outline item.
4884  *
4885  * @return {OO.ui.OutlineItemWidget|null} Outline item widget
4886  */
4887 OO.ui.PageLayout.prototype.getOutlineItem = function () {
4888         return this.outlineItem;
4889 };
4890
4891 /**
4892  * Get outline item.
4893  *
4894  * @param {OO.ui.OutlineItemWidget|null} outlineItem Outline item widget, null to clear
4895  * @chainable
4896  */
4897 OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
4898         this.outlineItem = outlineItem;
4899         return this;
4900 };
4901
4902 /**
4903  * Set page active state.
4904  *
4905  * @param {boolean} Page is active
4906  * @fires active
4907  */
4908 OO.ui.PageLayout.prototype.setActive = function ( active ) {
4909         active = !!active;
4910
4911         if ( active !== this.active ) {
4912                 this.active = active;
4913                 this.$element.toggleClass( 'oo-ui-pageLayout-active', active );
4914                 this.emit( 'active', this.active );
4915         }
4916 };
4917 /**
4918  * Layout containing a series of mutually exclusive pages.
4919  *
4920  * @class
4921  * @extends OO.ui.PanelLayout
4922  * @mixins OO.ui.GroupElement
4923  *
4924  * @constructor
4925  * @param {Object} [config] Configuration options
4926  * @cfg {boolean} [continuous=false] Show all pages, one after another
4927  * @cfg {string} [icon=''] Symbolic icon name
4928  * @cfg {OO.ui.Layout[]} [items] Layouts to add
4929  */
4930 OO.ui.StackLayout = function OoUiStackLayout( config ) {
4931         // Config initialization
4932         config = $.extend( { 'scrollable': true }, config );
4933
4934         // Parent constructor
4935         OO.ui.StackLayout.super.call( this, config );
4936
4937         // Mixin constructors
4938         OO.ui.GroupElement.call( this, this.$element, config );
4939
4940         // Properties
4941         this.currentItem = null;
4942         this.continuous = !!config.continuous;
4943
4944         // Initialization
4945         this.$element.addClass( 'oo-ui-stackLayout' );
4946         if ( this.continuous ) {
4947                 this.$element.addClass( 'oo-ui-stackLayout-continuous' );
4948         }
4949         if ( $.isArray( config.items ) ) {
4950                 this.addItems( config.items );
4951         }
4952 };
4953
4954 /* Setup */
4955
4956 OO.inheritClass( OO.ui.StackLayout, OO.ui.PanelLayout );
4957 OO.mixinClass( OO.ui.StackLayout, OO.ui.GroupElement );
4958
4959 /* Events */
4960
4961 /**
4962  * @event set
4963  * @param {OO.ui.Layout|null} item Current item or null if there is no longer a layout shown
4964  */
4965
4966 /* Methods */
4967
4968 /**
4969  * Get the current item.
4970  *
4971  * @return {OO.ui.Layout|null}
4972  */
4973 OO.ui.StackLayout.prototype.getCurrentItem = function () {
4974         return this.currentItem;
4975 };
4976
4977 /**
4978  * Unset the current item.
4979  *
4980  * @private
4981  * @param {OO.ui.StackLayout} layout
4982  * @fires set
4983  */
4984 OO.ui.StackLayout.prototype.unsetCurrentItem = function () {
4985         var prevItem = this.currentItem;
4986         if ( prevItem === null ) {
4987                 return;
4988         }
4989
4990         this.currentItem = null;
4991         this.emit( 'set', null );
4992 };
4993
4994 /**
4995  * Add items.
4996  *
4997  * Adding an existing item (by value) will move it.
4998  *
4999  * @param {OO.ui.Layout[]} items Items to add
5000  * @param {number} [index] Index to insert items after
5001  * @chainable
5002  */
5003 OO.ui.StackLayout.prototype.addItems = function ( items, index ) {
5004         // Mixin method
5005         OO.ui.GroupElement.prototype.addItems.call( this, items, index );
5006
5007         if ( !this.currentItem && items.length ) {
5008                 this.setItem( items[0] );
5009         }
5010
5011         return this;
5012 };
5013
5014 /**
5015  * Remove items.
5016  *
5017  * Items will be detached, not removed, so they can be used later.
5018  *
5019  * @param {OO.ui.Layout[]} items Items to remove
5020  * @chainable
5021  * @fires set
5022  */
5023 OO.ui.StackLayout.prototype.removeItems = function ( items ) {
5024         // Mixin method
5025         OO.ui.GroupElement.prototype.removeItems.call( this, items );
5026
5027         if ( $.inArray( this.currentItem, items  ) !== -1 ) {
5028                 if ( this.items.length ) {
5029                         this.setItem( this.items[0] );
5030                 } else {
5031                         this.unsetCurrentItem();
5032                 }
5033         }
5034
5035         return this;
5036 };
5037
5038 /**
5039  * Clear all items.
5040  *
5041  * Items will be detached, not removed, so they can be used later.
5042  *
5043  * @chainable
5044  * @fires set
5045  */
5046 OO.ui.StackLayout.prototype.clearItems = function () {
5047         this.unsetCurrentItem();
5048         OO.ui.GroupElement.prototype.clearItems.call( this );
5049
5050         return this;
5051 };
5052
5053 /**
5054  * Show item.
5055  *
5056  * Any currently shown item will be hidden.
5057  *
5058  * FIXME: If the passed item to show has not been added in the items list, then
5059  * this method drops it and unsets the current item.
5060  *
5061  * @param {OO.ui.Layout} item Item to show
5062  * @chainable
5063  * @fires set
5064  */
5065 OO.ui.StackLayout.prototype.setItem = function ( item ) {
5066         var i, len;
5067
5068         if ( item !== this.currentItem ) {
5069                 if ( !this.continuous ) {
5070                         for ( i = 0, len = this.items.length; i < len; i++ ) {
5071                                 this.items[i].$element.css( 'display', '' );
5072                         }
5073                 }
5074                 if ( $.inArray( item, this.items ) !== -1 ) {
5075                         if ( !this.continuous ) {
5076                                 item.$element.css( 'display', 'block' );
5077                         }
5078                         this.currentItem = item;
5079                         this.emit( 'set', item );
5080                 } else {
5081                         this.unsetCurrentItem();
5082                 }
5083         }
5084
5085         return this;
5086 };
5087 /**
5088  * Horizontal bar layout of tools as icon buttons.
5089  *
5090  * @class
5091  * @extends OO.ui.ToolGroup
5092  *
5093  * @constructor
5094  * @param {OO.ui.Toolbar} toolbar
5095  * @param {Object} [config] Configuration options
5096  */
5097 OO.ui.BarToolGroup = function OoUiBarToolGroup( toolbar, config ) {
5098         // Parent constructor
5099         OO.ui.BarToolGroup.super.call( this, toolbar, config );
5100
5101         // Initialization
5102         this.$element.addClass( 'oo-ui-barToolGroup' );
5103 };
5104
5105 /* Setup */
5106
5107 OO.inheritClass( OO.ui.BarToolGroup, OO.ui.ToolGroup );
5108
5109 /* Static Properties */
5110
5111 OO.ui.BarToolGroup.static.titleTooltips = true;
5112
5113 OO.ui.BarToolGroup.static.accelTooltips = true;
5114
5115 OO.ui.BarToolGroup.static.name = 'bar';
5116 /**
5117  * Popup list of tools with an icon and optional label.
5118  *
5119  * @abstract
5120  * @class
5121  * @extends OO.ui.ToolGroup
5122  * @mixins OO.ui.IconedElement
5123  * @mixins OO.ui.IndicatedElement
5124  * @mixins OO.ui.LabeledElement
5125  * @mixins OO.ui.TitledElement
5126  * @mixins OO.ui.ClippableElement
5127  *
5128  * @constructor
5129  * @param {OO.ui.Toolbar} toolbar
5130  * @param {Object} [config] Configuration options
5131  * @cfg {string} [header] Text to display at the top of the pop-up
5132  */
5133 OO.ui.PopupToolGroup = function OoUiPopupToolGroup( toolbar, config ) {
5134         // Configuration initialization
5135         config = config || {};
5136
5137         // Parent constructor
5138         OO.ui.PopupToolGroup.super.call( this, toolbar, config );
5139
5140         // Mixin constructors
5141         OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
5142         OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
5143         OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
5144         OO.ui.TitledElement.call( this, this.$element, config );
5145         OO.ui.ClippableElement.call( this, this.$group, config );
5146
5147         // Properties
5148         this.active = false;
5149         this.dragging = false;
5150         this.onBlurHandler = OO.ui.bind( this.onBlur, this );
5151         this.$handle = this.$( '<span>' );
5152
5153         // Events
5154         this.$handle.on( {
5155                 'mousedown': OO.ui.bind( this.onHandleMouseDown, this ),
5156                 'mouseup': OO.ui.bind( this.onHandleMouseUp, this )
5157         } );
5158
5159         // Initialization
5160         this.$handle
5161                 .addClass( 'oo-ui-popupToolGroup-handle' )
5162                 .append( this.$icon, this.$label, this.$indicator );
5163         // If the pop-up should have a header, add it to the top of the toolGroup.
5164         // Note: If this feature is useful for other widgets, we could abstract it into an
5165         // OO.ui.HeaderedElement mixin constructor.
5166         if ( config.header !== undefined ) {
5167                 this.$group
5168                         .prepend( this.$( '<span>' )
5169                                 .addClass( 'oo-ui-popupToolGroup-header' )
5170                                 .text( config.header )
5171                         );
5172         }
5173         this.$element
5174                 .addClass( 'oo-ui-popupToolGroup' )
5175                 .prepend( this.$handle );
5176 };
5177
5178 /* Setup */
5179
5180 OO.inheritClass( OO.ui.PopupToolGroup, OO.ui.ToolGroup );
5181 OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.IconedElement );
5182 OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.IndicatedElement );
5183 OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.LabeledElement );
5184 OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.TitledElement );
5185 OO.mixinClass( OO.ui.PopupToolGroup, OO.ui.ClippableElement );
5186
5187 /* Static Properties */
5188
5189 /* Methods */
5190
5191 /**
5192  * @inheritdoc
5193  */
5194 OO.ui.PopupToolGroup.prototype.setDisabled = function () {
5195         // Parent method
5196         OO.ui.PopupToolGroup.super.prototype.setDisabled.apply( this, arguments );
5197
5198         if ( this.isDisabled() && this.isElementAttached() ) {
5199                 this.setActive( false );
5200         }
5201 };
5202
5203 /**
5204  * Handle focus being lost.
5205  *
5206  * The event is actually generated from a mouseup, so it is not a normal blur event object.
5207  *
5208  * @param {jQuery.Event} e Mouse up event
5209  */
5210 OO.ui.PopupToolGroup.prototype.onBlur = function ( e ) {
5211         // Only deactivate when clicking outside the dropdown element
5212         if ( this.$( e.target ).closest( '.oo-ui-popupToolGroup' )[0] !== this.$element[0] ) {
5213                 this.setActive( false );
5214         }
5215 };
5216
5217 /**
5218  * @inheritdoc
5219  */
5220 OO.ui.PopupToolGroup.prototype.onMouseUp = function ( e ) {
5221         if ( !this.isDisabled() && e.which === 1 ) {
5222                 this.setActive( false );
5223         }
5224         return OO.ui.PopupToolGroup.super.prototype.onMouseUp.call( this, e );
5225 };
5226
5227 /**
5228  * Handle mouse up events.
5229  *
5230  * @param {jQuery.Event} e Mouse up event
5231  */
5232 OO.ui.PopupToolGroup.prototype.onHandleMouseUp = function () {
5233         return false;
5234 };
5235
5236 /**
5237  * Handle mouse down events.
5238  *
5239  * @param {jQuery.Event} e Mouse down event
5240  */
5241 OO.ui.PopupToolGroup.prototype.onHandleMouseDown = function ( e ) {
5242         if ( !this.isDisabled() && e.which === 1 ) {
5243                 this.setActive( !this.active );
5244         }
5245         return false;
5246 };
5247
5248 /**
5249  * Switch into active mode.
5250  *
5251  * When active, mouseup events anywhere in the document will trigger deactivation.
5252  */
5253 OO.ui.PopupToolGroup.prototype.setActive = function ( value ) {
5254         value = !!value;
5255         if ( this.active !== value ) {
5256                 this.active = value;
5257                 if ( value ) {
5258                         this.setClipping( true );
5259                         this.$element.addClass( 'oo-ui-popupToolGroup-active' );
5260                         this.getElementDocument().addEventListener( 'mouseup', this.onBlurHandler, true );
5261                 } else {
5262                         this.setClipping( false );
5263                         this.$element.removeClass( 'oo-ui-popupToolGroup-active' );
5264                         this.getElementDocument().removeEventListener( 'mouseup', this.onBlurHandler, true );
5265                 }
5266         }
5267 };
5268 /**
5269  * Drop down list layout of tools as labeled icon buttons.
5270  *
5271  * @class
5272  * @extends OO.ui.PopupToolGroup
5273  *
5274  * @constructor
5275  * @param {OO.ui.Toolbar} toolbar
5276  * @param {Object} [config] Configuration options
5277  */
5278 OO.ui.ListToolGroup = function OoUiListToolGroup( toolbar, config ) {
5279         // Parent constructor
5280         OO.ui.ListToolGroup.super.call( this, toolbar, config );
5281
5282         // Initialization
5283         this.$element.addClass( 'oo-ui-listToolGroup' );
5284 };
5285
5286 /* Setup */
5287
5288 OO.inheritClass( OO.ui.ListToolGroup, OO.ui.PopupToolGroup );
5289
5290 /* Static Properties */
5291
5292 OO.ui.ListToolGroup.static.accelTooltips = true;
5293
5294 OO.ui.ListToolGroup.static.name = 'list';
5295 /**
5296  * Drop down menu layout of tools as selectable menu items.
5297  *
5298  * @class
5299  * @extends OO.ui.PopupToolGroup
5300  *
5301  * @constructor
5302  * @param {OO.ui.Toolbar} toolbar
5303  * @param {Object} [config] Configuration options
5304  */
5305 OO.ui.MenuToolGroup = function OoUiMenuToolGroup( toolbar, config ) {
5306         // Configuration initialization
5307         config = config || {};
5308
5309         // Parent constructor
5310         OO.ui.MenuToolGroup.super.call( this, toolbar, config );
5311
5312         // Events
5313         this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );
5314
5315         // Initialization
5316         this.$element.addClass( 'oo-ui-menuToolGroup' );
5317 };
5318
5319 /* Setup */
5320
5321 OO.inheritClass( OO.ui.MenuToolGroup, OO.ui.PopupToolGroup );
5322
5323 /* Static Properties */
5324
5325 OO.ui.MenuToolGroup.static.accelTooltips = true;
5326
5327 OO.ui.MenuToolGroup.static.name = 'menu';
5328
5329 /* Methods */
5330
5331 /**
5332  * Handle the toolbar state being updated.
5333  *
5334  * When the state changes, the title of each active item in the menu will be joined together and
5335  * used as a label for the group. The label will be empty if none of the items are active.
5336  */
5337 OO.ui.MenuToolGroup.prototype.onUpdateState = function () {
5338         var name,
5339                 labelTexts = [];
5340
5341         for ( name in this.tools ) {
5342                 if ( this.tools[name].isActive() ) {
5343                         labelTexts.push( this.tools[name].getTitle() );
5344                 }
5345         }
5346
5347         this.setLabel( labelTexts.join( ', ' ) || ' ' );
5348 };
5349 /**
5350  * Tool that shows a popup when selected.
5351  *
5352  * @abstract
5353  * @class
5354  * @extends OO.ui.Tool
5355  * @mixins OO.ui.PopuppableElement
5356  *
5357  * @constructor
5358  * @param {OO.ui.Toolbar} toolbar
5359  * @param {Object} [config] Configuration options
5360  */
5361 OO.ui.PopupTool = function OoUiPopupTool( toolbar, config ) {
5362         // Parent constructor
5363         OO.ui.PopupTool.super.call( this, toolbar, config );
5364
5365         // Mixin constructors
5366         OO.ui.PopuppableElement.call( this, config );
5367
5368         // Initialization
5369         this.$element
5370                 .addClass( 'oo-ui-popupTool' )
5371                 .append( this.popup.$element );
5372 };
5373
5374 /* Setup */
5375
5376 OO.inheritClass( OO.ui.PopupTool, OO.ui.Tool );
5377 OO.mixinClass( OO.ui.PopupTool, OO.ui.PopuppableElement );
5378
5379 /* Methods */
5380
5381 /**
5382  * Handle the tool being selected.
5383  *
5384  * @inheritdoc
5385  */
5386 OO.ui.PopupTool.prototype.onSelect = function () {
5387         if ( !this.isDisabled() ) {
5388                 if ( this.popup.isVisible() ) {
5389                         this.hidePopup();
5390                 } else {
5391                         this.showPopup();
5392                 }
5393         }
5394         this.setActive( false );
5395         return false;
5396 };
5397
5398 /**
5399  * Handle the toolbar state being updated.
5400  *
5401  * @inheritdoc
5402  */
5403 OO.ui.PopupTool.prototype.onUpdateState = function () {
5404         this.setActive( false );
5405 };
5406 /**
5407  * Group widget.
5408  *
5409  * Mixin for OO.ui.Widget subclasses.
5410  *
5411  * Use together with OO.ui.ItemWidget to make disabled state inheritable.
5412  *
5413  * @abstract
5414  * @class
5415  * @extends OO.ui.GroupElement
5416  *
5417  * @constructor
5418  * @param {jQuery} $group Container node, assigned to #$group
5419  * @param {Object} [config] Configuration options
5420  */
5421 OO.ui.GroupWidget = function OoUiGroupWidget( $element, config ) {
5422         // Parent constructor
5423         OO.ui.GroupWidget.super.call( this, $element, config );
5424 };
5425
5426 /* Setup */
5427
5428 OO.inheritClass( OO.ui.GroupWidget, OO.ui.GroupElement );
5429
5430 /* Methods */
5431
5432 /**
5433  * Set the disabled state of the widget.
5434  *
5435  * This will also update the disabled state of child widgets.
5436  *
5437  * @param {boolean} disabled Disable widget
5438  * @chainable
5439  */
5440 OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) {
5441         var i, len;
5442
5443         // Parent method
5444         // Note: Calling #setDisabled this way assumes this is mixed into an OO.ui.Widget
5445         OO.ui.Widget.prototype.setDisabled.call( this, disabled );
5446
5447         // During construction, #setDisabled is called before the OO.ui.GroupElement constructor
5448         if ( this.items ) {
5449                 for ( i = 0, len = this.items.length; i < len; i++ ) {
5450                         this.items[i].updateDisabled();
5451                 }
5452         }
5453
5454         return this;
5455 };
5456 /**
5457  * Item widget.
5458  *
5459  * Use together with OO.ui.GroupWidget to make disabled state inheritable.
5460  *
5461  * @abstract
5462  * @class
5463  *
5464  * @constructor
5465  */
5466 OO.ui.ItemWidget = function OoUiItemWidget() {
5467         //
5468 };
5469
5470 /* Methods */
5471
5472 /**
5473  * Check if widget is disabled.
5474  *
5475  * Checks parent if present, making disabled state inheritable.
5476  *
5477  * @return {boolean} Widget is disabled
5478  */
5479 OO.ui.ItemWidget.prototype.isDisabled = function () {
5480         return this.disabled ||
5481                 ( this.elementGroup instanceof OO.ui.Widget && this.elementGroup.isDisabled() );
5482 };
5483
5484 /**
5485  * Set group element is in.
5486  *
5487  * @param {OO.ui.GroupElement|null} group Group element, null if none
5488  * @chainable
5489  */
5490 OO.ui.ItemWidget.prototype.setElementGroup = function ( group ) {
5491         // Parent method
5492         // Note: Calling #setElementGroup this way assumes this is mixed into an OO.ui.Element
5493         OO.ui.Element.prototype.setElementGroup.call( this, group );
5494
5495         // Initialize item disabled states
5496         this.updateDisabled();
5497
5498         return this;
5499 };
5500 /**
5501  * Icon widget.
5502  *
5503  * @class
5504  * @extends OO.ui.Widget
5505  * @mixins OO.ui.IconedElement
5506  * @mixins OO.ui.TitledElement
5507  *
5508  * @constructor
5509  * @param {Object} [config] Configuration options
5510  */
5511 OO.ui.IconWidget = function OoUiIconWidget( config ) {
5512         // Config intialization
5513         config = config || {};
5514
5515         // Parent constructor
5516         OO.ui.IconWidget.super.call( this, config );
5517
5518         // Mixin constructors
5519         OO.ui.IconedElement.call( this, this.$element, config );
5520         OO.ui.TitledElement.call( this, this.$element, config );
5521
5522         // Initialization
5523         this.$element.addClass( 'oo-ui-iconWidget' );
5524 };
5525
5526 /* Setup */
5527
5528 OO.inheritClass( OO.ui.IconWidget, OO.ui.Widget );
5529 OO.mixinClass( OO.ui.IconWidget, OO.ui.IconedElement );
5530 OO.mixinClass( OO.ui.IconWidget, OO.ui.TitledElement );
5531
5532 /* Static Properties */
5533
5534 OO.ui.IconWidget.static.tagName = 'span';
5535 /**
5536  * Indicator widget.
5537  *
5538  * @class
5539  * @extends OO.ui.Widget
5540  * @mixins OO.ui.IndicatedElement
5541  * @mixins OO.ui.TitledElement
5542  *
5543  * @constructor
5544  * @param {Object} [config] Configuration options
5545  */
5546 OO.ui.IndicatorWidget = function OoUiIndicatorWidget( config ) {
5547         // Config intialization
5548         config = config || {};
5549
5550         // Parent constructor
5551         OO.ui.IndicatorWidget.super.call( this, config );
5552
5553         // Mixin constructors
5554         OO.ui.IndicatedElement.call( this, this.$element, config );
5555         OO.ui.TitledElement.call( this, this.$element, config );
5556
5557         // Initialization
5558         this.$element.addClass( 'oo-ui-indicatorWidget' );
5559 };
5560
5561 /* Setup */
5562
5563 OO.inheritClass( OO.ui.IndicatorWidget, OO.ui.Widget );
5564 OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.IndicatedElement );
5565 OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.TitledElement );
5566
5567 /* Static Properties */
5568
5569 OO.ui.IndicatorWidget.static.tagName = 'span';
5570 /**
5571  * Container for multiple related buttons.
5572  *
5573  * Use together with OO.ui.ButtonWidget.
5574  *
5575  * @class
5576  * @extends OO.ui.Widget
5577  * @mixins OO.ui.GroupElement
5578  *
5579  * @constructor
5580  * @param {Object} [config] Configuration options
5581  * @cfg {OO.ui.ButtonWidget} [items] Buttons to add
5582  */
5583 OO.ui.ButtonGroupWidget = function OoUiButtonGroupWidget( config ) {
5584         // Parent constructor
5585         OO.ui.ButtonGroupWidget.super.call( this, config );
5586
5587         // Mixin constructors
5588         OO.ui.GroupElement.call( this, this.$element, config );
5589
5590         // Initialization
5591         this.$element.addClass( 'oo-ui-buttonGroupWidget' );
5592         if ( $.isArray( config.items ) ) {
5593                 this.addItems( config.items );
5594         }
5595 };
5596
5597 /* Setup */
5598
5599 OO.inheritClass( OO.ui.ButtonGroupWidget, OO.ui.Widget );
5600 OO.mixinClass( OO.ui.ButtonGroupWidget, OO.ui.GroupElement );
5601 /**
5602  * Button widget.
5603  *
5604  * @class
5605  * @extends OO.ui.Widget
5606  * @mixins OO.ui.ButtonedElement
5607  * @mixins OO.ui.IconedElement
5608  * @mixins OO.ui.IndicatedElement
5609  * @mixins OO.ui.LabeledElement
5610  * @mixins OO.ui.TitledElement
5611  * @mixins OO.ui.FlaggableElement
5612  *
5613  * @constructor
5614  * @param {Object} [config] Configuration options
5615  * @cfg {string} [title=''] Title text
5616  * @cfg {string} [href] Hyperlink to visit when clicked
5617  * @cfg {string} [target] Target to open hyperlink in
5618  */
5619 OO.ui.ButtonWidget = function OoUiButtonWidget( config ) {
5620         // Configuration initialization
5621         config = $.extend( { 'target': '_blank' }, config );
5622
5623         // Parent constructor
5624         OO.ui.ButtonWidget.super.call( this, config );
5625
5626         // Mixin constructors
5627         OO.ui.ButtonedElement.call( this, this.$( '<a>' ), config );
5628         OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
5629         OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
5630         OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
5631         OO.ui.TitledElement.call( this, this.$button, config );
5632         OO.ui.FlaggableElement.call( this, config );
5633
5634         // Properties
5635         this.isHyperlink = typeof config.href === 'string';
5636
5637         // Events
5638         this.$button.on( {
5639                 'click': OO.ui.bind( this.onClick, this ),
5640                 'keypress': OO.ui.bind( this.onKeyPress, this )
5641         } );
5642
5643         // Initialization
5644         this.$button
5645                 .append( this.$icon, this.$label, this.$indicator )
5646                 .attr( { 'href': config.href, 'target': config.target } );
5647         this.$element
5648                 .addClass( 'oo-ui-buttonWidget' )
5649                 .append( this.$button );
5650 };
5651
5652 /* Setup */
5653
5654 OO.inheritClass( OO.ui.ButtonWidget, OO.ui.Widget );
5655 OO.mixinClass( OO.ui.ButtonWidget, OO.ui.ButtonedElement );
5656 OO.mixinClass( OO.ui.ButtonWidget, OO.ui.IconedElement );
5657 OO.mixinClass( OO.ui.ButtonWidget, OO.ui.IndicatedElement );
5658 OO.mixinClass( OO.ui.ButtonWidget, OO.ui.LabeledElement );
5659 OO.mixinClass( OO.ui.ButtonWidget, OO.ui.TitledElement );
5660 OO.mixinClass( OO.ui.ButtonWidget, OO.ui.FlaggableElement );
5661
5662 /* Events */
5663
5664 /**
5665  * @event click
5666  */
5667
5668 /* Methods */
5669
5670 /**
5671  * Handles mouse click events.
5672  *
5673  * @param {jQuery.Event} e Mouse click event
5674  * @fires click
5675  */
5676 OO.ui.ButtonWidget.prototype.onClick = function () {
5677         if ( !this.isDisabled() ) {
5678                 this.emit( 'click' );
5679                 if ( this.isHyperlink ) {
5680                         return true;
5681                 }
5682         }
5683         return false;
5684 };
5685
5686 /**
5687  * Handles keypress events.
5688  *
5689  * @param {jQuery.Event} e Keypress event
5690  * @fires click
5691  */
5692 OO.ui.ButtonWidget.prototype.onKeyPress = function ( e ) {
5693         if ( !this.isDisabled() && ( e.which === OO.ui.Keys.SPACE || e.which === OO.ui.Keys.ENTER ) ) {
5694                 this.onClick();
5695                 if ( this.isHyperlink ) {
5696                         return true;
5697                 }
5698         }
5699         return false;
5700 };
5701 /**
5702  * Input widget.
5703  *
5704  * @abstract
5705  * @class
5706  * @extends OO.ui.Widget
5707  *
5708  * @constructor
5709  * @param {Object} [config] Configuration options
5710  * @cfg {string} [name=''] HTML input name
5711  * @cfg {string} [value=''] Input value
5712  * @cfg {boolean} [readOnly=false] Prevent changes
5713  * @cfg {Function} [inputFilter] Filter function to apply to the input. Takes a string argument and returns a string.
5714  */
5715 OO.ui.InputWidget = function OoUiInputWidget( config ) {
5716         // Config intialization
5717         config = $.extend( { 'readOnly': false }, config );
5718
5719         // Parent constructor
5720         OO.ui.InputWidget.super.call( this, config );
5721
5722         // Properties
5723         this.$input = this.getInputElement( config );
5724         this.value = '';
5725         this.readOnly = false;
5726         this.inputFilter = config.inputFilter;
5727
5728         // Events
5729         this.$input.on( 'keydown mouseup cut paste change input select', OO.ui.bind( this.onEdit, this ) );
5730
5731         // Initialization
5732         this.$input
5733                 .attr( 'name', config.name )
5734                 .prop( 'disabled', this.isDisabled() );
5735         this.setReadOnly( config.readOnly );
5736         this.$element.addClass( 'oo-ui-inputWidget' ).append( this.$input );
5737         this.setValue( config.value );
5738 };
5739
5740 /* Setup */
5741
5742 OO.inheritClass( OO.ui.InputWidget, OO.ui.Widget );
5743
5744 /* Events */
5745
5746 /**
5747  * @event change
5748  * @param value
5749  */
5750
5751 /* Methods */
5752
5753 /**
5754  * Get input element.
5755  *
5756  * @param {Object} [config] Configuration options
5757  * @return {jQuery} Input element
5758  */
5759 OO.ui.InputWidget.prototype.getInputElement = function () {
5760         return this.$( '<input>' );
5761 };
5762
5763 /**
5764  * Handle potentially value-changing events.
5765  *
5766  * @param {jQuery.Event} e Key down, mouse up, cut, paste, change, input, or select event
5767  */
5768 OO.ui.InputWidget.prototype.onEdit = function () {
5769         if ( !this.isDisabled() ) {
5770                 // Allow the stack to clear so the value will be updated
5771                 setTimeout( OO.ui.bind( function () {
5772                         this.setValue( this.$input.val() );
5773                 }, this ) );
5774         }
5775 };
5776
5777 /**
5778  * Get the value of the input.
5779  *
5780  * @return {string} Input value
5781  */
5782 OO.ui.InputWidget.prototype.getValue = function () {
5783         return this.value;
5784 };
5785
5786 /**
5787  * Sets the direction of the current input, either RTL or LTR
5788  *
5789  * @param {boolean} isRTL
5790  */
5791 OO.ui.InputWidget.prototype.setRTL = function ( isRTL ) {
5792         if ( isRTL ) {
5793                 this.$input.removeClass( 'oo-ui-ltr' );
5794                 this.$input.addClass( 'oo-ui-rtl' );
5795         } else {
5796                 this.$input.removeClass( 'oo-ui-rtl' );
5797                 this.$input.addClass( 'oo-ui-ltr' );
5798         }
5799 };
5800
5801 /**
5802  * Set the value of the input.
5803  *
5804  * @param {string} value New value
5805  * @fires change
5806  * @chainable
5807  */
5808 OO.ui.InputWidget.prototype.setValue = function ( value ) {
5809         value = this.sanitizeValue( value );
5810         if ( this.value !== value ) {
5811                 this.value = value;
5812                 this.emit( 'change', this.value );
5813         }
5814         // Update the DOM if it has changed. Note that with sanitizeValue, it
5815         // is possible for the DOM value to change without this.value changing.
5816         if ( this.$input.val() !== this.value ) {
5817                 this.$input.val( this.value );
5818         }
5819         return this;
5820 };
5821
5822 /**
5823  * Sanitize incoming value.
5824  *
5825  * Ensures value is a string, and converts undefined and null to empty strings.
5826  *
5827  * @param {string} value Original value
5828  * @return {string} Sanitized value
5829  */
5830 OO.ui.InputWidget.prototype.sanitizeValue = function ( value ) {
5831         if ( value === undefined || value === null ) {
5832                 return '';
5833         } else if ( this.inputFilter ) {
5834                 return this.inputFilter( String( value ) );
5835         } else {
5836                 return String( value );
5837         }
5838 };
5839
5840 /**
5841  * Simulate the behavior of clicking on a label bound to this input.
5842  */
5843 OO.ui.InputWidget.prototype.simulateLabelClick = function () {
5844         if ( !this.isDisabled() ) {
5845                 if ( this.$input.is( ':checkbox,:radio' ) ) {
5846                         this.$input.click();
5847                 } else if ( this.$input.is( ':input' ) ) {
5848                         this.$input.focus();
5849                 }
5850         }
5851 };
5852
5853 /**
5854  * Check if the widget is read-only.
5855  *
5856  * @return {boolean}
5857  */
5858 OO.ui.InputWidget.prototype.isReadOnly = function () {
5859         return this.readOnly;
5860 };
5861
5862 /**
5863  * Set the read-only state of the widget.
5864  *
5865  * This should probably change the widgets's appearance and prevent it from being used.
5866  *
5867  * @param {boolean} state Make input read-only
5868  * @chainable
5869  */
5870 OO.ui.InputWidget.prototype.setReadOnly = function ( state ) {
5871         this.readOnly = !!state;
5872         this.$input.prop( 'readOnly', this.readOnly );
5873         return this;
5874 };
5875
5876 /**
5877  * @inheritdoc
5878  */
5879 OO.ui.InputWidget.prototype.setDisabled = function ( state ) {
5880         OO.ui.InputWidget.super.prototype.setDisabled.call( this, state );
5881         if ( this.$input ) {
5882                 this.$input.prop( 'disabled', this.isDisabled() );
5883         }
5884         return this;
5885 };
5886
5887 /**
5888  * Focus the input.
5889  *
5890  * @chainable
5891  */
5892 OO.ui.InputWidget.prototype.focus = function () {
5893         this.$input.focus();
5894         return this;
5895 };
5896 /**
5897  * Checkbox widget.
5898  *
5899  * @class
5900  * @extends OO.ui.InputWidget
5901  *
5902  * @constructor
5903  * @param {Object} [config] Configuration options
5904  */
5905 OO.ui.CheckboxInputWidget = function OoUiCheckboxInputWidget( config ) {
5906         // Parent constructor
5907         OO.ui.CheckboxInputWidget.super.call( this, config );
5908
5909         // Initialization
5910         this.$element.addClass( 'oo-ui-checkboxInputWidget' );
5911 };
5912
5913 /* Setup */
5914
5915 OO.inheritClass( OO.ui.CheckboxInputWidget, OO.ui.InputWidget );
5916
5917 /* Events */
5918
5919 /* Methods */
5920
5921 /**
5922  * Get input element.
5923  *
5924  * @return {jQuery} Input element
5925  */
5926 OO.ui.CheckboxInputWidget.prototype.getInputElement = function () {
5927         return this.$( '<input type="checkbox" />' );
5928 };
5929
5930 /**
5931  * Get checked state of the checkbox
5932  *
5933  * @return {boolean} If the checkbox is checked
5934  */
5935 OO.ui.CheckboxInputWidget.prototype.getValue = function () {
5936         return this.value;
5937 };
5938
5939 /**
5940  * Set value
5941  */
5942 OO.ui.CheckboxInputWidget.prototype.setValue = function ( value ) {
5943         value = !!value;
5944         if ( this.value !== value ) {
5945                 this.value = value;
5946                 this.$input.prop( 'checked', this.value );
5947                 this.emit( 'change', this.value );
5948         }
5949 };
5950
5951 /**
5952  * @inheritdoc
5953  */
5954 OO.ui.CheckboxInputWidget.prototype.onEdit = function () {
5955         if ( !this.isDisabled() ) {
5956                 // Allow the stack to clear so the value will be updated
5957                 setTimeout( OO.ui.bind( function () {
5958                         this.setValue( this.$input.prop( 'checked' ) );
5959                 }, this ) );
5960         }
5961 };
5962 /**
5963  * Label widget.
5964  *
5965  * @class
5966  * @extends OO.ui.Widget
5967  * @mixins OO.ui.LabeledElement
5968  *
5969  * @constructor
5970  * @param {Object} [config] Configuration options
5971  */
5972 OO.ui.LabelWidget = function OoUiLabelWidget( config ) {
5973         // Config intialization
5974         config = config || {};
5975
5976         // Parent constructor
5977         OO.ui.LabelWidget.super.call( this, config );
5978
5979         // Mixin constructors
5980         OO.ui.LabeledElement.call( this, this.$element, config );
5981
5982         // Properties
5983         this.input = config.input;
5984
5985         // Events
5986         if ( this.input instanceof OO.ui.InputWidget ) {
5987                 this.$element.on( 'click', OO.ui.bind( this.onClick, this ) );
5988         }
5989
5990         // Initialization
5991         this.$element.addClass( 'oo-ui-labelWidget' );
5992 };
5993
5994 /* Setup */
5995
5996 OO.inheritClass( OO.ui.LabelWidget, OO.ui.Widget );
5997 OO.mixinClass( OO.ui.LabelWidget, OO.ui.LabeledElement );
5998
5999 /* Static Properties */
6000
6001 OO.ui.LabelWidget.static.tagName = 'label';
6002
6003 /* Methods */
6004
6005 /**
6006  * Handles label mouse click events.
6007  *
6008  * @param {jQuery.Event} e Mouse click event
6009  */
6010 OO.ui.LabelWidget.prototype.onClick = function () {
6011         this.input.simulateLabelClick();
6012         return false;
6013 };
6014 /**
6015  * Lookup input widget.
6016  *
6017  * Mixin that adds a menu showing suggested values to a text input. Subclasses must handle `select`
6018  * and `choose` events on #lookupMenu to make use of selections.
6019  *
6020  * @class
6021  * @abstract
6022  *
6023  * @constructor
6024  * @param {OO.ui.TextInputWidget} input Input widget
6025  * @param {Object} [config] Configuration options
6026  * @cfg {jQuery} [$overlay=this.$( 'body' )] Overlay layer
6027  */
6028 OO.ui.LookupInputWidget = function OoUiLookupInputWidget( input, config ) {
6029         // Config intialization
6030         config = config || {};
6031
6032         // Properties
6033         this.lookupInput = input;
6034         this.$overlay = config.$overlay || this.$( 'body,.oo-ui-window-overlay' ).last();
6035         this.lookupMenu = new OO.ui.TextInputMenuWidget( this, {
6036                 '$': OO.ui.Element.getJQuery( this.$overlay ),
6037                 'input': this.lookupInput,
6038                 '$container': config.$container
6039         } );
6040         this.lookupCache = {};
6041         this.lookupQuery = null;
6042         this.lookupRequest = null;
6043         this.populating = false;
6044
6045         // Events
6046         this.$overlay.append( this.lookupMenu.$element );
6047
6048         this.lookupInput.$input.on( {
6049                 'focus': OO.ui.bind( this.onLookupInputFocus, this ),
6050                 'blur': OO.ui.bind( this.onLookupInputBlur, this ),
6051                 'mousedown': OO.ui.bind( this.onLookupInputMouseDown, this )
6052         } );
6053         this.lookupInput.connect( this, { 'change': 'onLookupInputChange' } );
6054
6055         // Initialization
6056         this.$element.addClass( 'oo-ui-lookupWidget' );
6057         this.lookupMenu.$element.addClass( 'oo-ui-lookupWidget-menu' );
6058 };
6059
6060 /* Methods */
6061
6062 /**
6063  * Handle input focus event.
6064  *
6065  * @param {jQuery.Event} e Input focus event
6066  */
6067 OO.ui.LookupInputWidget.prototype.onLookupInputFocus = function () {
6068         this.openLookupMenu();
6069 };
6070
6071 /**
6072  * Handle input blur event.
6073  *
6074  * @param {jQuery.Event} e Input blur event
6075  */
6076 OO.ui.LookupInputWidget.prototype.onLookupInputBlur = function () {
6077         this.lookupMenu.hide();
6078 };
6079
6080 /**
6081  * Handle input mouse down event.
6082  *
6083  * @param {jQuery.Event} e Input mouse down event
6084  */
6085 OO.ui.LookupInputWidget.prototype.onLookupInputMouseDown = function () {
6086         this.openLookupMenu();
6087 };
6088
6089 /**
6090  * Handle input change event.
6091  *
6092  * @param {string} value New input value
6093  */
6094 OO.ui.LookupInputWidget.prototype.onLookupInputChange = function () {
6095         this.openLookupMenu();
6096 };
6097
6098 /**
6099  * Get lookup menu.
6100  *
6101  * @return {OO.ui.TextInputMenuWidget}
6102  */
6103 OO.ui.LookupInputWidget.prototype.getLookupMenu = function () {
6104         return this.lookupMenu;
6105 };
6106
6107 /**
6108  * Open the menu.
6109  *
6110  * @chainable
6111  */
6112 OO.ui.LookupInputWidget.prototype.openLookupMenu = function () {
6113         var value = this.lookupInput.getValue();
6114
6115         if ( this.lookupMenu.$input.is( ':focus' ) && $.trim( value ) !== '' ) {
6116                 this.populateLookupMenu();
6117                 if ( !this.lookupMenu.isVisible() ) {
6118                         this.lookupMenu.show();
6119                 }
6120         } else {
6121                 this.lookupMenu.clearItems();
6122                 this.lookupMenu.hide();
6123         }
6124
6125         return this;
6126 };
6127
6128 /**
6129  * Populate lookup menu with current information.
6130  *
6131  * @chainable
6132  */
6133 OO.ui.LookupInputWidget.prototype.populateLookupMenu = function () {
6134         if ( !this.populating ) {
6135                 this.populating = true;
6136                 this.getLookupMenuItems()
6137                         .done( OO.ui.bind( function ( items ) {
6138                                 this.lookupMenu.clearItems();
6139                                 if ( items.length ) {
6140                                         this.lookupMenu.show();
6141                                         this.lookupMenu.addItems( items );
6142                                         this.initializeLookupMenuSelection();
6143                                         this.openLookupMenu();
6144                                 } else {
6145                                         this.lookupMenu.hide();
6146                                 }
6147                                 this.populating = false;
6148                         }, this ) )
6149                         .fail( OO.ui.bind( function () {
6150                                 this.lookupMenu.clearItems();
6151                                 this.populating = false;
6152                         }, this ) );
6153         }
6154
6155         return this;
6156 };
6157
6158 /**
6159  * Set selection in the lookup menu with current information.
6160  *
6161  * @chainable
6162  */
6163 OO.ui.LookupInputWidget.prototype.initializeLookupMenuSelection = function () {
6164         if ( !this.lookupMenu.getSelectedItem() ) {
6165                 this.lookupMenu.selectItem( this.lookupMenu.getFirstSelectableItem() );
6166         }
6167         this.lookupMenu.highlightItem( this.lookupMenu.getSelectedItem() );
6168 };
6169
6170 /**
6171  * Get lookup menu items for the current query.
6172  *
6173  * @return {jQuery.Promise} Promise object which will be passed menu items as the first argument
6174  * of the done event
6175  */
6176 OO.ui.LookupInputWidget.prototype.getLookupMenuItems = function () {
6177         var value = this.lookupInput.getValue(),
6178                 deferred = $.Deferred();
6179
6180         if ( value && value !== this.lookupQuery ) {
6181                 // Abort current request if query has changed
6182                 if ( this.lookupRequest ) {
6183                         this.lookupRequest.abort();
6184                         this.lookupQuery = null;
6185                         this.lookupRequest = null;
6186                 }
6187                 if ( value in this.lookupCache ) {
6188                         deferred.resolve( this.getLookupMenuItemsFromData( this.lookupCache[value] ) );
6189                 } else {
6190                         this.lookupQuery = value;
6191                         this.lookupRequest = this.getLookupRequest()
6192                                 .always( OO.ui.bind( function () {
6193                                         this.lookupQuery = null;
6194                                         this.lookupRequest = null;
6195                                 }, this ) )
6196                                 .done( OO.ui.bind( function ( data ) {
6197                                         this.lookupCache[value] = this.getLookupCacheItemFromData( data );
6198                                         deferred.resolve( this.getLookupMenuItemsFromData( this.lookupCache[value] ) );
6199                                 }, this ) )
6200                                 .fail( function () {
6201                                         deferred.reject();
6202                                 } );
6203                         this.pushPending();
6204                         this.lookupRequest.always( OO.ui.bind( function () {
6205                                 this.popPending();
6206                         }, this ) );
6207                 }
6208         }
6209         return deferred.promise();
6210 };
6211
6212 /**
6213  * Get a new request object of the current lookup query value.
6214  *
6215  * @abstract
6216  * @return {jqXHR} jQuery AJAX object, or promise object with an .abort() method
6217  */
6218 OO.ui.LookupInputWidget.prototype.getLookupRequest = function () {
6219         // Stub, implemented in subclass
6220         return null;
6221 };
6222
6223 /**
6224  * Handle successful lookup request.
6225  *
6226  * Overriding methods should call #populateLookupMenu when results are available and cache results
6227  * for future lookups in #lookupCache as an array of #OO.ui.MenuItemWidget objects.
6228  *
6229  * @abstract
6230  * @param {Mixed} data Response from server
6231  */
6232 OO.ui.LookupInputWidget.prototype.onLookupRequestDone = function () {
6233         // Stub, implemented in subclass
6234 };
6235
6236 /**
6237  * Get a list of menu item widgets from the data stored by the lookup request's done handler.
6238  *
6239  * @abstract
6240  * @param {Mixed} data Cached result data, usually an array
6241  * @return {OO.ui.MenuItemWidget[]} Menu items
6242  */
6243 OO.ui.LookupInputWidget.prototype.getLookupMenuItemsFromData = function () {
6244         // Stub, implemented in subclass
6245         return [];
6246 };
6247 /**
6248  * Option widget.
6249  *
6250  * Use with OO.ui.SelectWidget.
6251  *
6252  * @class
6253  * @extends OO.ui.Widget
6254  * @mixins OO.ui.IconedElement
6255  * @mixins OO.ui.LabeledElement
6256  * @mixins OO.ui.IndicatedElement
6257  * @mixins OO.ui.FlaggableElement
6258  *
6259  * @constructor
6260  * @param {Mixed} data Option data
6261  * @param {Object} [config] Configuration options
6262  * @cfg {string} [rel] Value for `rel` attribute in DOM, allowing per-option styling
6263  */
6264 OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
6265         // Config intialization
6266         config = config || {};
6267
6268         // Parent constructor
6269         OO.ui.OptionWidget.super.call( this, config );
6270
6271         // Mixin constructors
6272         OO.ui.ItemWidget.call( this );
6273         OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
6274         OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
6275         OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
6276         OO.ui.FlaggableElement.call( this, config );
6277
6278         // Properties
6279         this.data = data;
6280         this.selected = false;
6281         this.highlighted = false;
6282         this.pressed = false;
6283
6284         // Initialization
6285         this.$element
6286                 .data( 'oo-ui-optionWidget', this )
6287                 .attr( 'rel', config.rel )
6288                 .addClass( 'oo-ui-optionWidget' )
6289                 .append( this.$label );
6290         this.$element
6291                 .prepend( this.$icon )
6292                 .append( this.$indicator );
6293 };
6294
6295 /* Setup */
6296
6297 OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget );
6298 OO.mixinClass( OO.ui.OptionWidget, OO.ui.ItemWidget );
6299 OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement );
6300 OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement );
6301 OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement );
6302 OO.mixinClass( OO.ui.OptionWidget, OO.ui.FlaggableElement );
6303
6304 /* Static Properties */
6305
6306 OO.ui.OptionWidget.static.tagName = 'li';
6307
6308 OO.ui.OptionWidget.static.selectable = true;
6309
6310 OO.ui.OptionWidget.static.highlightable = true;
6311
6312 OO.ui.OptionWidget.static.pressable = true;
6313
6314 OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false;
6315
6316 /* Methods */
6317
6318 /**
6319  * Check if option can be selected.
6320  *
6321  * @return {boolean} Item is selectable
6322  */
6323 OO.ui.OptionWidget.prototype.isSelectable = function () {
6324         return this.constructor.static.selectable && !this.isDisabled();
6325 };
6326
6327 /**
6328  * Check if option can be highlighted.
6329  *
6330  * @return {boolean} Item is highlightable
6331  */
6332 OO.ui.OptionWidget.prototype.isHighlightable = function () {
6333         return this.constructor.static.highlightable && !this.isDisabled();
6334 };
6335
6336 /**
6337  * Check if option can be pressed.
6338  *
6339  * @return {boolean} Item is pressable
6340  */
6341 OO.ui.OptionWidget.prototype.isPressable = function () {
6342         return this.constructor.static.pressable && !this.isDisabled();
6343 };
6344
6345 /**
6346  * Check if option is selected.
6347  *
6348  * @return {boolean} Item is selected
6349  */
6350 OO.ui.OptionWidget.prototype.isSelected = function () {
6351         return this.selected;
6352 };
6353
6354 /**
6355  * Check if option is highlighted.
6356  *
6357  * @return {boolean} Item is highlighted
6358  */
6359 OO.ui.OptionWidget.prototype.isHighlighted = function () {
6360         return this.highlighted;
6361 };
6362
6363 /**
6364  * Check if option is pressed.
6365  *
6366  * @return {boolean} Item is pressed
6367  */
6368 OO.ui.OptionWidget.prototype.isPressed = function () {
6369         return this.pressed;
6370 };
6371
6372 /**
6373  * Set selected state.
6374  *
6375  * @param {boolean} [state=false] Select option
6376  * @chainable
6377  */
6378 OO.ui.OptionWidget.prototype.setSelected = function ( state ) {
6379         if ( this.constructor.static.selectable ) {
6380                 this.selected = !!state;
6381                 if ( this.selected ) {
6382                         this.$element.addClass( 'oo-ui-optionWidget-selected' );
6383                         if ( this.constructor.static.scrollIntoViewOnSelect ) {
6384                                 this.scrollElementIntoView();
6385                         }
6386                 } else {
6387                         this.$element.removeClass( 'oo-ui-optionWidget-selected' );
6388                 }
6389         }
6390         return this;
6391 };
6392
6393 /**
6394  * Set highlighted state.
6395  *
6396  * @param {boolean} [state=false] Highlight option
6397  * @chainable
6398  */
6399 OO.ui.OptionWidget.prototype.setHighlighted = function ( state ) {
6400         if ( this.constructor.static.highlightable ) {
6401                 this.highlighted = !!state;
6402                 if ( this.highlighted ) {
6403                         this.$element.addClass( 'oo-ui-optionWidget-highlighted' );
6404                 } else {
6405                         this.$element.removeClass( 'oo-ui-optionWidget-highlighted' );
6406                 }
6407         }
6408         return this;
6409 };
6410
6411 /**
6412  * Set pressed state.
6413  *
6414  * @param {boolean} [state=false] Press option
6415  * @chainable
6416  */
6417 OO.ui.OptionWidget.prototype.setPressed = function ( state ) {
6418         if ( this.constructor.static.pressable ) {
6419                 this.pressed = !!state;
6420                 if ( this.pressed ) {
6421                         this.$element.addClass( 'oo-ui-optionWidget-pressed' );
6422                 } else {
6423                         this.$element.removeClass( 'oo-ui-optionWidget-pressed' );
6424                 }
6425         }
6426         return this;
6427 };
6428
6429 /**
6430  * Make the option's highlight flash.
6431  *
6432  * While flashing, the visual style of the pressed state is removed if present.
6433  *
6434  * @return {jQuery.Promise} Promise resolved when flashing is done
6435  */
6436 OO.ui.OptionWidget.prototype.flash = function () {
6437         var $this = this.$element,
6438                 deferred = $.Deferred();
6439
6440         if ( !this.isDisabled() && this.constructor.static.pressable ) {
6441                 $this.removeClass( 'oo-ui-optionWidget-highlighted oo-ui-optionWidget-pressed' );
6442                 setTimeout( OO.ui.bind( function () {
6443                         // Restore original classes
6444                         $this
6445                                 .toggleClass( 'oo-ui-optionWidget-highlighted', this.highlighted )
6446                                 .toggleClass( 'oo-ui-optionWidget-pressed', this.pressed );
6447                         setTimeout( function () {
6448                                 deferred.resolve();
6449                         }, 100 );
6450                 }, this ), 100 );
6451         }
6452
6453         return deferred.promise();
6454 };
6455
6456 /**
6457  * Get option data.
6458  *
6459  * @return {Mixed} Option data
6460  */
6461 OO.ui.OptionWidget.prototype.getData = function () {
6462         return this.data;
6463 };
6464 /**
6465  * Selection of options.
6466  *
6467  * Use together with OO.ui.OptionWidget.
6468  *
6469  * @class
6470  * @extends OO.ui.Widget
6471  * @mixins OO.ui.GroupElement
6472  *
6473  * @constructor
6474  * @param {Object} [config] Configuration options
6475  * @cfg {OO.ui.OptionWidget[]} [items] Options to add
6476  */
6477 OO.ui.SelectWidget = function OoUiSelectWidget( config ) {
6478         // Config intialization
6479         config = config || {};
6480
6481         // Parent constructor
6482         OO.ui.SelectWidget.super.call( this, config );
6483
6484         // Mixin constructors
6485         OO.ui.GroupWidget.call( this, this.$element, config );
6486
6487         // Properties
6488         this.pressed = false;
6489         this.selecting = null;
6490         this.hashes = {};
6491         this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
6492         this.onMouseMoveHandler = OO.ui.bind( this.onMouseMove, this );
6493
6494         // Events
6495         this.$element.on( {
6496                 'mousedown': OO.ui.bind( this.onMouseDown, this ),
6497                 'mouseover': OO.ui.bind( this.onMouseOver, this ),
6498                 'mouseleave': OO.ui.bind( this.onMouseLeave, this )
6499         } );
6500
6501         // Initialization
6502         this.$element.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' );
6503         if ( $.isArray( config.items ) ) {
6504                 this.addItems( config.items );
6505         }
6506 };
6507
6508 /* Setup */
6509
6510 OO.inheritClass( OO.ui.SelectWidget, OO.ui.Widget );
6511
6512 // Need to mixin base class as well
6513 OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupElement );
6514 OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupWidget );
6515
6516 /* Events */
6517
6518 /**
6519  * @event highlight
6520  * @param {OO.ui.OptionWidget|null} item Highlighted item
6521  */
6522
6523 /**
6524  * @event press
6525  * @param {OO.ui.OptionWidget|null} item Pressed item
6526  */
6527
6528 /**
6529  * @event select
6530  * @param {OO.ui.OptionWidget|null} item Selected item
6531  */
6532
6533 /**
6534  * @event choose
6535  * @param {OO.ui.OptionWidget|null} item Chosen item
6536  */
6537
6538 /**
6539  * @event add
6540  * @param {OO.ui.OptionWidget[]} items Added items
6541  * @param {number} index Index items were added at
6542  */
6543
6544 /**
6545  * @event remove
6546  * @param {OO.ui.OptionWidget[]} items Removed items
6547  */
6548
6549 /* Static Properties */
6550
6551 OO.ui.SelectWidget.static.tagName = 'ul';
6552
6553 /* Methods */
6554
6555 /**
6556  * Handle mouse down events.
6557  *
6558  * @private
6559  * @param {jQuery.Event} e Mouse down event
6560  */
6561 OO.ui.SelectWidget.prototype.onMouseDown = function ( e ) {
6562         var item;
6563
6564         if ( !this.isDisabled() && e.which === 1 ) {
6565                 this.togglePressed( true );
6566                 item = this.getTargetItem( e );
6567                 if ( item && item.isSelectable() ) {
6568                         this.pressItem( item );
6569                         this.selecting = item;
6570                         this.getElementDocument().addEventListener(
6571                                 'mouseup', this.onMouseUpHandler, true
6572                         );
6573                         this.getElementDocument().addEventListener(
6574                                 'mousemove', this.onMouseMoveHandler, true
6575                         );
6576                 }
6577         }
6578         return false;
6579 };
6580
6581 /**
6582  * Handle mouse up events.
6583  *
6584  * @private
6585  * @param {jQuery.Event} e Mouse up event
6586  */
6587 OO.ui.SelectWidget.prototype.onMouseUp = function ( e ) {
6588         var item;
6589
6590         this.togglePressed( false );
6591         if ( !this.selecting ) {
6592                 item = this.getTargetItem( e );
6593                 if ( item && item.isSelectable() ) {
6594                         this.selecting = item;
6595                 }
6596         }
6597         if ( !this.isDisabled() && e.which === 1 && this.selecting ) {
6598                 this.pressItem( null );
6599                 this.chooseItem( this.selecting );
6600                 this.selecting = null;
6601         }
6602
6603         this.getElementDocument().removeEventListener(
6604                 'mouseup', this.onMouseUpHandler, true
6605         );
6606         this.getElementDocument().removeEventListener(
6607                 'mousemove', this.onMouseMoveHandler, true
6608         );
6609
6610         return false;
6611 };
6612
6613 /**
6614  * Handle mouse move events.
6615  *
6616  * @private
6617  * @param {jQuery.Event} e Mouse move event
6618  */
6619 OO.ui.SelectWidget.prototype.onMouseMove = function ( e ) {
6620         var item;
6621
6622         if ( !this.isDisabled() && this.pressed ) {
6623                 item = this.getTargetItem( e );
6624                 if ( item && item !== this.selecting && item.isSelectable() ) {
6625                         this.pressItem( item );
6626                         this.selecting = item;
6627                 }
6628         }
6629         return false;
6630 };
6631
6632 /**
6633  * Handle mouse over events.
6634  *
6635  * @private
6636  * @param {jQuery.Event} e Mouse over event
6637  */
6638 OO.ui.SelectWidget.prototype.onMouseOver = function ( e ) {
6639         var item;
6640
6641         if ( !this.isDisabled() ) {
6642                 item = this.getTargetItem( e );
6643                 this.highlightItem( item && item.isHighlightable() ? item : null );
6644         }
6645         return false;
6646 };
6647
6648 /**
6649  * Handle mouse leave events.
6650  *
6651  * @private
6652  * @param {jQuery.Event} e Mouse over event
6653  */
6654 OO.ui.SelectWidget.prototype.onMouseLeave = function () {
6655         if ( !this.isDisabled() ) {
6656                 this.highlightItem( null );
6657         }
6658         return false;
6659 };
6660
6661 /**
6662  * Get the closest item to a jQuery.Event.
6663  *
6664  * @private
6665  * @param {jQuery.Event} e
6666  * @return {OO.ui.OptionWidget|null} Outline item widget, `null` if none was found
6667  */
6668 OO.ui.SelectWidget.prototype.getTargetItem = function ( e ) {
6669         var $item = this.$( e.target ).closest( '.oo-ui-optionWidget' );
6670         if ( $item.length ) {
6671                 return $item.data( 'oo-ui-optionWidget' );
6672         }
6673         return null;
6674 };
6675
6676 /**
6677  * Get selected item.
6678  *
6679  * @return {OO.ui.OptionWidget|null} Selected item, `null` if no item is selected
6680  */
6681 OO.ui.SelectWidget.prototype.getSelectedItem = function () {
6682         var i, len;
6683
6684         for ( i = 0, len = this.items.length; i < len; i++ ) {
6685                 if ( this.items[i].isSelected() ) {
6686                         return this.items[i];
6687                 }
6688         }
6689         return null;
6690 };
6691
6692 /**
6693  * Get highlighted item.
6694  *
6695  * @return {OO.ui.OptionWidget|null} Highlighted item, `null` if no item is highlighted
6696  */
6697 OO.ui.SelectWidget.prototype.getHighlightedItem = function () {
6698         var i, len;
6699
6700         for ( i = 0, len = this.items.length; i < len; i++ ) {
6701                 if ( this.items[i].isHighlighted() ) {
6702                         return this.items[i];
6703                 }
6704         }
6705         return null;
6706 };
6707
6708 /**
6709  * Get an existing item with equivilant data.
6710  *
6711  * @param {Object} data Item data to search for
6712  * @return {OO.ui.OptionWidget|null} Item with equivilent value, `null` if none exists
6713  */
6714 OO.ui.SelectWidget.prototype.getItemFromData = function ( data ) {
6715         var hash = OO.getHash( data );
6716
6717         if ( hash in this.hashes ) {
6718                 return this.hashes[hash];
6719         }
6720
6721         return null;
6722 };
6723
6724 /**
6725  * Toggle pressed state.
6726  *
6727  * @param {boolean} pressed An option is being pressed
6728  */
6729 OO.ui.SelectWidget.prototype.togglePressed = function ( pressed ) {
6730         if ( pressed === undefined ) {
6731                 pressed = !this.pressed;
6732         }
6733         if ( pressed !== this.pressed ) {
6734                 this.$element.toggleClass( 'oo-ui-selectWidget-pressed', pressed );
6735                 this.$element.toggleClass( 'oo-ui-selectWidget-depressed', !pressed );
6736                 this.pressed = pressed;
6737         }
6738 };
6739
6740 /**
6741  * Highlight an item.
6742  *
6743  * Highlighting is mutually exclusive.
6744  *
6745  * @param {OO.ui.OptionWidget} [item] Item to highlight, omit to deselect all
6746  * @fires highlight
6747  * @chainable
6748  */
6749 OO.ui.SelectWidget.prototype.highlightItem = function ( item ) {
6750         var i, len, highlighted,
6751                 changed = false;
6752
6753         for ( i = 0, len = this.items.length; i < len; i++ ) {
6754                 highlighted = this.items[i] === item;
6755                 if ( this.items[i].isHighlighted() !== highlighted ) {
6756                         this.items[i].setHighlighted( highlighted );
6757                         changed = true;
6758                 }
6759         }
6760         if ( changed ) {
6761                 this.emit( 'highlight', item );
6762         }
6763
6764         return this;
6765 };
6766
6767 /**
6768  * Select an item.
6769  *
6770  * @param {OO.ui.OptionWidget} [item] Item to select, omit to deselect all
6771  * @fires select
6772  * @chainable
6773  */
6774 OO.ui.SelectWidget.prototype.selectItem = function ( item ) {
6775         var i, len, selected,
6776                 changed = false;
6777
6778         for ( i = 0, len = this.items.length; i < len; i++ ) {
6779                 selected = this.items[i] === item;
6780                 if ( this.items[i].isSelected() !== selected ) {
6781                         this.items[i].setSelected( selected );
6782                         changed = true;
6783                 }
6784         }
6785         if ( changed ) {
6786                 this.emit( 'select', item );
6787         }
6788
6789         return this;
6790 };
6791
6792 /**
6793  * Press an item.
6794  *
6795  * @param {OO.ui.OptionWidget} [item] Item to press, omit to depress all
6796  * @fires press
6797  * @chainable
6798  */
6799 OO.ui.SelectWidget.prototype.pressItem = function ( item ) {
6800         var i, len, pressed,
6801                 changed = false;
6802
6803         for ( i = 0, len = this.items.length; i < len; i++ ) {
6804                 pressed = this.items[i] === item;
6805                 if ( this.items[i].isPressed() !== pressed ) {
6806                         this.items[i].setPressed( pressed );
6807                         changed = true;
6808                 }
6809         }
6810         if ( changed ) {
6811                 this.emit( 'press', item );
6812         }
6813
6814         return this;
6815 };
6816
6817 /**
6818  * Choose an item.
6819  *
6820  * Identical to #selectItem, but may vary in subclasses that want to take additional action when
6821  * an item is selected using the keyboard or mouse.
6822  *
6823  * @param {OO.ui.OptionWidget} item Item to choose
6824  * @fires choose
6825  * @chainable
6826  */
6827 OO.ui.SelectWidget.prototype.chooseItem = function ( item ) {
6828         this.selectItem( item );
6829         this.emit( 'choose', item );
6830
6831         return this;
6832 };
6833
6834 /**
6835  * Get an item relative to another one.
6836  *
6837  * @param {OO.ui.OptionWidget} item Item to start at
6838  * @param {number} direction Direction to move in
6839  * @return {OO.ui.OptionWidget|null} Item at position, `null` if there are no items in the menu
6840  */
6841 OO.ui.SelectWidget.prototype.getRelativeSelectableItem = function ( item, direction ) {
6842         var inc = direction > 0 ? 1 : -1,
6843                 len = this.items.length,
6844                 index = item instanceof OO.ui.OptionWidget ?
6845                         $.inArray( item, this.items ) : ( inc > 0 ? -1 : 0 ),
6846                 stopAt = Math.max( Math.min( index, len - 1 ), 0 ),
6847                 i = inc > 0 ?
6848                         // Default to 0 instead of -1, if nothing is selected let's start at the beginning
6849                         Math.max( index, -1 ) :
6850                         // Default to n-1 instead of -1, if nothing is selected let's start at the end
6851                         Math.min( index, len );
6852
6853         while ( true ) {
6854                 i = ( i + inc + len ) % len;
6855                 item = this.items[i];
6856                 if ( item instanceof OO.ui.OptionWidget && item.isSelectable() ) {
6857                         return item;
6858                 }
6859                 // Stop iterating when we've looped all the way around
6860                 if ( i === stopAt ) {
6861                         break;
6862                 }
6863         }
6864         return null;
6865 };
6866
6867 /**
6868  * Get the next selectable item.
6869  *
6870  * @return {OO.ui.OptionWidget|null} Item, `null` if ther aren't any selectable items
6871  */
6872 OO.ui.SelectWidget.prototype.getFirstSelectableItem = function () {
6873         var i, len, item;
6874
6875         for ( i = 0, len = this.items.length; i < len; i++ ) {
6876                 item = this.items[i];
6877                 if ( item instanceof OO.ui.OptionWidget && item.isSelectable() ) {
6878                         return item;
6879                 }
6880         }
6881
6882         return null;
6883 };
6884
6885 /**
6886  * Add items.
6887  *
6888  * When items are added with the same values as existing items, the existing items will be
6889  * automatically removed before the new items are added.
6890  *
6891  * @param {OO.ui.OptionWidget[]} items Items to add
6892  * @param {number} [index] Index to insert items after
6893  * @fires add
6894  * @chainable
6895  */
6896 OO.ui.SelectWidget.prototype.addItems = function ( items, index ) {
6897         var i, len, item, hash,
6898                 remove = [];
6899
6900         for ( i = 0, len = items.length; i < len; i++ ) {
6901                 item = items[i];
6902                 hash = OO.getHash( item.getData() );
6903                 if ( hash in this.hashes ) {
6904                         // Remove item with same value
6905                         remove.push( this.hashes[hash] );
6906                 }
6907                 this.hashes[hash] = item;
6908         }
6909         if ( remove.length ) {
6910                 this.removeItems( remove );
6911         }
6912
6913         // Mixin method
6914         OO.ui.GroupWidget.prototype.addItems.call( this, items, index );
6915
6916         // Always provide an index, even if it was omitted
6917         this.emit( 'add', items, index === undefined ? this.items.length - items.length - 1 : index );
6918
6919         return this;
6920 };
6921
6922 /**
6923  * Remove items.
6924  *
6925  * Items will be detached, not removed, so they can be used later.
6926  *
6927  * @param {OO.ui.OptionWidget[]} items Items to remove
6928  * @fires remove
6929  * @chainable
6930  */
6931 OO.ui.SelectWidget.prototype.removeItems = function ( items ) {
6932         var i, len, item, hash;
6933
6934         for ( i = 0, len = items.length; i < len; i++ ) {
6935                 item = items[i];
6936                 hash = OO.getHash( item.getData() );
6937                 if ( hash in this.hashes ) {
6938                         // Remove existing item
6939                         delete this.hashes[hash];
6940                 }
6941                 if ( item.isSelected() ) {
6942                         this.selectItem( null );
6943                 }
6944         }
6945
6946         // Mixin method
6947         OO.ui.GroupWidget.prototype.removeItems.call( this, items );
6948
6949         this.emit( 'remove', items );
6950
6951         return this;
6952 };
6953
6954 /**
6955  * Clear all items.
6956  *
6957  * Items will be detached, not removed, so they can be used later.
6958  *
6959  * @fires remove
6960  * @chainable
6961  */
6962 OO.ui.SelectWidget.prototype.clearItems = function () {
6963         var items = this.items.slice();
6964
6965         // Clear all items
6966         this.hashes = {};
6967         // Mixin method
6968         OO.ui.GroupWidget.prototype.clearItems.call( this );
6969         this.selectItem( null );
6970
6971         this.emit( 'remove', items );
6972
6973         return this;
6974 };
6975 /**
6976  * Menu item widget.
6977  *
6978  * Use with OO.ui.MenuWidget.
6979  *
6980  * @class
6981  * @extends OO.ui.OptionWidget
6982  *
6983  * @constructor
6984  * @param {Mixed} data Item data
6985  * @param {Object} [config] Configuration options
6986  */
6987 OO.ui.MenuItemWidget = function OoUiMenuItemWidget( data, config ) {
6988         // Configuration initialization
6989         config = $.extend( { 'icon': 'check' }, config );
6990
6991         // Parent constructor
6992         OO.ui.MenuItemWidget.super.call( this, data, config );
6993
6994         // Initialization
6995         this.$element.addClass( 'oo-ui-menuItemWidget' );
6996 };
6997
6998 /* Setup */
6999
7000 OO.inheritClass( OO.ui.MenuItemWidget, OO.ui.OptionWidget );
7001 /**
7002  * Menu widget.
7003  *
7004  * Use together with OO.ui.MenuItemWidget.
7005  *
7006  * @class
7007  * @extends OO.ui.SelectWidget
7008  * @mixins OO.ui.ClippableElement
7009  *
7010  * @constructor
7011  * @param {Object} [config] Configuration options
7012  * @cfg {OO.ui.InputWidget} [input] Input to bind keyboard handlers to
7013  * @cfg {boolean} [autoHide=true] Hide the menu when the mouse is pressed outside the menu
7014  */
7015 OO.ui.MenuWidget = function OoUiMenuWidget( config ) {
7016         // Config intialization
7017         config = config || {};
7018
7019         // Parent constructor
7020         OO.ui.MenuWidget.super.call( this, config );
7021
7022         // Mixin constructors
7023         OO.ui.ClippableElement.call( this, this.$group, config );
7024
7025         // Properties
7026         this.autoHide = config.autoHide === undefined || !!config.autoHide;
7027         this.newItems = null;
7028         this.$input = config.input ? config.input.$input : null;
7029         this.$previousFocus = null;
7030         this.isolated = !config.input;
7031         this.visible = false;
7032         this.flashing = false;
7033         this.onKeyDownHandler = OO.ui.bind( this.onKeyDown, this );
7034         this.onDocumentMouseDownHandler = OO.ui.bind( this.onDocumentMouseDown, this );
7035
7036         // Initialization
7037         this.$element.hide().addClass( 'oo-ui-menuWidget' );
7038 };
7039
7040 /* Setup */
7041
7042 OO.inheritClass( OO.ui.MenuWidget, OO.ui.SelectWidget );
7043 OO.mixinClass( OO.ui.MenuWidget, OO.ui.ClippableElement );
7044
7045 /* Methods */
7046
7047 /**
7048  * Handles document mouse down events.
7049  *
7050  * @param {jQuery.Event} e Key down event
7051  */
7052 OO.ui.MenuWidget.prototype.onDocumentMouseDown = function ( e ) {
7053         if ( !$.contains( this.$element[0], e.target ) ) {
7054                 this.hide();
7055         }
7056 };
7057
7058 /**
7059  * Handles key down events.
7060  *
7061  * @param {jQuery.Event} e Key down event
7062  */
7063 OO.ui.MenuWidget.prototype.onKeyDown = function ( e ) {
7064         var nextItem,
7065                 handled = false,
7066                 highlightItem = this.getHighlightedItem();
7067
7068         if ( !this.isDisabled() && this.visible ) {
7069                 if ( !highlightItem ) {
7070                         highlightItem = this.getSelectedItem();
7071                 }
7072                 switch ( e.keyCode ) {
7073                         case OO.ui.Keys.ENTER:
7074                                 this.chooseItem( highlightItem );
7075                                 handled = true;
7076                                 break;
7077                         case OO.ui.Keys.UP:
7078                                 nextItem = this.getRelativeSelectableItem( highlightItem, -1 );
7079                                 handled = true;
7080                                 break;
7081                         case OO.ui.Keys.DOWN:
7082                                 nextItem = this.getRelativeSelectableItem( highlightItem, 1 );
7083                                 handled = true;
7084                                 break;
7085                         case OO.ui.Keys.ESCAPE:
7086                                 if ( highlightItem ) {
7087                                         highlightItem.setHighlighted( false );
7088                                 }
7089                                 this.hide();
7090                                 handled = true;
7091                                 break;
7092                 }
7093
7094                 if ( nextItem ) {
7095                         this.highlightItem( nextItem );
7096                         nextItem.scrollElementIntoView();
7097                 }
7098
7099                 if ( handled ) {
7100                         e.preventDefault();
7101                         e.stopPropagation();
7102                         return false;
7103                 }
7104         }
7105 };
7106
7107 /**
7108  * Check if the menu is visible.
7109  *
7110  * @return {boolean} Menu is visible
7111  */
7112 OO.ui.MenuWidget.prototype.isVisible = function () {
7113         return this.visible;
7114 };
7115
7116 /**
7117  * Bind key down listener.
7118  */
7119 OO.ui.MenuWidget.prototype.bindKeyDownListener = function () {
7120         if ( this.$input ) {
7121                 this.$input.on( 'keydown', this.onKeyDownHandler );
7122         } else {
7123                 // Capture menu navigation keys
7124                 this.getElementWindow().addEventListener( 'keydown', this.onKeyDownHandler, true );
7125         }
7126 };
7127
7128 /**
7129  * Unbind key down listener.
7130  */
7131 OO.ui.MenuWidget.prototype.unbindKeyDownListener = function () {
7132         if ( this.$input ) {
7133                 this.$input.off( 'keydown' );
7134         } else {
7135                 this.getElementWindow().removeEventListener( 'keydown', this.onKeyDownHandler, true );
7136         }
7137 };
7138
7139 /**
7140  * Choose an item.
7141  *
7142  * This will close the menu when done, unlike selectItem which only changes selection.
7143  *
7144  * @param {OO.ui.OptionWidget} item Item to choose
7145  * @chainable
7146  */
7147 OO.ui.MenuWidget.prototype.chooseItem = function ( item ) {
7148         // Parent method
7149         OO.ui.MenuWidget.super.prototype.chooseItem.call( this, item );
7150
7151         if ( item && !this.flashing ) {
7152                 this.flashing = true;
7153                 item.flash().done( OO.ui.bind( function () {
7154                         this.hide();
7155                         this.flashing = false;
7156                 }, this ) );
7157         } else {
7158                 this.hide();
7159         }
7160
7161         return this;
7162 };
7163
7164 /**
7165  * Add items.
7166  *
7167  * Adding an existing item (by value) will move it.
7168  *
7169  * @param {OO.ui.MenuItemWidget[]} items Items to add
7170  * @param {number} [index] Index to insert items after
7171  * @chainable
7172  */
7173 OO.ui.MenuWidget.prototype.addItems = function ( items, index ) {
7174         var i, len, item;
7175
7176         // Parent method
7177         OO.ui.MenuWidget.super.prototype.addItems.call( this, items, index );
7178
7179         // Auto-initialize
7180         if ( !this.newItems ) {
7181                 this.newItems = [];
7182         }
7183
7184         for ( i = 0, len = items.length; i < len; i++ ) {
7185                 item = items[i];
7186                 if ( this.visible ) {
7187                         // Defer fitting label until
7188                         item.fitLabel();
7189                 } else {
7190                         this.newItems.push( item );
7191                 }
7192         }
7193
7194         return this;
7195 };
7196
7197 /**
7198  * Show the menu.
7199  *
7200  * @chainable
7201  */
7202 OO.ui.MenuWidget.prototype.show = function () {
7203         var i, len;
7204
7205         if ( this.items.length ) {
7206                 this.$element.show();
7207                 this.visible = true;
7208                 this.bindKeyDownListener();
7209
7210                 // Change focus to enable keyboard navigation
7211                 if ( this.isolated && this.$input && !this.$input.is( ':focus' ) ) {
7212                         this.$previousFocus = this.$( ':focus' );
7213                         this.$input.focus();
7214                 }
7215                 if ( this.newItems && this.newItems.length ) {
7216                         for ( i = 0, len = this.newItems.length; i < len; i++ ) {
7217                                 this.newItems[i].fitLabel();
7218                         }
7219                         this.newItems = null;
7220                 }
7221
7222                 this.setClipping( true );
7223
7224                 // Auto-hide
7225                 if ( this.autoHide ) {
7226                         this.getElementDocument().addEventListener(
7227                                 'mousedown', this.onDocumentMouseDownHandler, true
7228                         );
7229                 }
7230         }
7231
7232         return this;
7233 };
7234
7235 /**
7236  * Hide the menu.
7237  *
7238  * @chainable
7239  */
7240 OO.ui.MenuWidget.prototype.hide = function () {
7241         this.$element.hide();
7242         this.visible = false;
7243         this.unbindKeyDownListener();
7244
7245         if ( this.isolated && this.$previousFocus ) {
7246                 this.$previousFocus.focus();
7247                 this.$previousFocus = null;
7248         }
7249
7250         this.getElementDocument().removeEventListener(
7251                 'mousedown', this.onDocumentMouseDownHandler, true
7252         );
7253
7254         this.setClipping( false );
7255
7256         return this;
7257 };
7258 /**
7259  * Inline menu of options.
7260  *
7261  * Use with OO.ui.MenuOptionWidget.
7262  *
7263  * @class
7264  * @extends OO.ui.Widget
7265  * @mixins OO.ui.IconedElement
7266  * @mixins OO.ui.IndicatedElement
7267  * @mixins OO.ui.LabeledElement
7268  * @mixins OO.ui.TitledElement
7269  *
7270  * @constructor
7271  * @param {Object} [config] Configuration options
7272  * @cfg {Object} [menu] Configuration options to pass to menu widget
7273  */
7274 OO.ui.InlineMenuWidget = function OoUiInlineMenuWidget( config ) {
7275         // Configuration initialization
7276         config = $.extend( { 'indicator': 'down' }, config );
7277
7278         // Parent constructor
7279         OO.ui.InlineMenuWidget.super.call( this, config );
7280
7281         // Mixin constructors
7282         OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
7283         OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
7284         OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
7285         OO.ui.TitledElement.call( this, this.$label, config );
7286
7287         // Properties
7288         this.menu = new OO.ui.MenuWidget( $.extend( { '$': this.$ }, config.menu ) );
7289         this.$handle = this.$( '<span>' );
7290
7291         // Events
7292         this.$element.on( { 'click': OO.ui.bind( this.onClick, this ) } );
7293         this.menu.connect( this, { 'select': 'onMenuSelect' } );
7294
7295         // Initialization
7296         this.$handle
7297                 .addClass( 'oo-ui-inlineMenuWidget-handle' )
7298                 .append( this.$icon, this.$label, this.$indicator );
7299         this.$element
7300                 .addClass( 'oo-ui-inlineMenuWidget' )
7301                 .append( this.$handle, this.menu.$element );
7302 };
7303
7304 /* Setup */
7305
7306 OO.inheritClass( OO.ui.InlineMenuWidget, OO.ui.Widget );
7307 OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.IconedElement );
7308 OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.IndicatedElement );
7309 OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.LabeledElement );
7310 OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.TitledElement );
7311
7312 /* Methods */
7313
7314 /**
7315  * Get the menu.
7316  *
7317  * @return {OO.ui.MenuWidget} Menu of widget
7318  */
7319 OO.ui.InlineMenuWidget.prototype.getMenu = function () {
7320         return this.menu;
7321 };
7322
7323 /**
7324  * Handles menu select events.
7325  *
7326  * @param {OO.ui.MenuItemWidget} item Selected menu item
7327  */
7328 OO.ui.InlineMenuWidget.prototype.onMenuSelect = function ( item ) {
7329         var selectedLabel;
7330
7331         if ( !item ) {
7332                 return;
7333         }
7334
7335         selectedLabel = item.getLabel();
7336
7337         // If the label is a DOM element, clone it, because setLabel will append() it
7338         if ( selectedLabel instanceof jQuery ) {
7339                 selectedLabel = selectedLabel.clone();
7340         }
7341
7342         this.setLabel( selectedLabel );
7343 };
7344
7345 /**
7346  * Handles mouse click events.
7347  *
7348  * @param {jQuery.Event} e Mouse click event
7349  */
7350 OO.ui.InlineMenuWidget.prototype.onClick = function ( e ) {
7351         // Skip clicks within the menu
7352         if ( $.contains( this.menu.$element[0], e.target ) ) {
7353                 return;
7354         }
7355
7356         if ( !this.isDisabled() ) {
7357                 if ( this.menu.isVisible() ) {
7358                         this.menu.hide();
7359                 } else {
7360                         this.menu.show();
7361                 }
7362         }
7363         return false;
7364 };
7365 /**
7366  * Menu section item widget.
7367  *
7368  * Use with OO.ui.MenuWidget.
7369  *
7370  * @class
7371  * @extends OO.ui.OptionWidget
7372  *
7373  * @constructor
7374  * @param {Mixed} data Item data
7375  * @param {Object} [config] Configuration options
7376  */
7377 OO.ui.MenuSectionItemWidget = function OoUiMenuSectionItemWidget( data, config ) {
7378         // Parent constructor
7379         OO.ui.MenuSectionItemWidget.super.call( this, data, config );
7380
7381         // Initialization
7382         this.$element.addClass( 'oo-ui-menuSectionItemWidget' );
7383 };
7384
7385 /* Setup */
7386
7387 OO.inheritClass( OO.ui.MenuSectionItemWidget, OO.ui.OptionWidget );
7388
7389 /* Static Properties */
7390
7391 OO.ui.MenuSectionItemWidget.static.selectable = false;
7392
7393 OO.ui.MenuSectionItemWidget.static.highlightable = false;
7394 /**
7395  * Create an OO.ui.OutlineWidget object.
7396  *
7397  * Use with OO.ui.OutlineItemWidget.
7398  *
7399  * @class
7400  * @extends OO.ui.SelectWidget
7401  *
7402  * @constructor
7403  * @param {Object} [config] Configuration options
7404  */
7405 OO.ui.OutlineWidget = function OoUiOutlineWidget( config ) {
7406         // Config intialization
7407         config = config || {};
7408
7409         // Parent constructor
7410         OO.ui.OutlineWidget.super.call( this, config );
7411
7412         // Initialization
7413         this.$element.addClass( 'oo-ui-outlineWidget' );
7414 };
7415
7416 /* Setup */
7417
7418 OO.inheritClass( OO.ui.OutlineWidget, OO.ui.SelectWidget );
7419 /**
7420  * Creates an OO.ui.OutlineControlsWidget object.
7421  *
7422  * Use together with OO.ui.OutlineWidget.js
7423  *
7424  * @class
7425  *
7426  * @constructor
7427  * @param {OO.ui.OutlineWidget} outline Outline to control
7428  * @param {Object} [config] Configuration options
7429  */
7430 OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) {
7431         // Configuration initialization
7432         config = $.extend( { 'icon': 'add-item' }, config );
7433
7434         // Parent constructor
7435         OO.ui.OutlineControlsWidget.super.call( this, config );
7436
7437         // Mixin constructors
7438         OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
7439         OO.ui.IconedElement.call( this, this.$( '<div>' ), config );
7440
7441         // Properties
7442         this.outline = outline;
7443         this.$movers = this.$( '<div>' );
7444         this.upButton = new OO.ui.ButtonWidget( {
7445                 '$': this.$,
7446                 'frameless': true,
7447                 'icon': 'collapse',
7448                 'title': OO.ui.msg( 'ooui-outline-control-move-up' )
7449         } );
7450         this.downButton = new OO.ui.ButtonWidget( {
7451                 '$': this.$,
7452                 'frameless': true,
7453                 'icon': 'expand',
7454                 'title': OO.ui.msg( 'ooui-outline-control-move-down' )
7455         } );
7456         this.removeButton = new OO.ui.ButtonWidget( {
7457                 '$': this.$,
7458                 'frameless': true,
7459                 'icon': 'remove',
7460                 'title': OO.ui.msg( 'ooui-outline-control-remove' )
7461         } );
7462
7463         // Events
7464         outline.connect( this, {
7465                 'select': 'onOutlineChange',
7466                 'add': 'onOutlineChange',
7467                 'remove': 'onOutlineChange'
7468         } );
7469         this.upButton.connect( this, { 'click': [ 'emit', 'move', -1 ] } );
7470         this.downButton.connect( this, { 'click': [ 'emit', 'move', 1 ] } );
7471         this.removeButton.connect( this, { 'click': [ 'emit', 'remove' ] } );
7472
7473         // Initialization
7474         this.$element.addClass( 'oo-ui-outlineControlsWidget' );
7475         this.$group.addClass( 'oo-ui-outlineControlsWidget-adders' );
7476         this.$movers
7477                 .addClass( 'oo-ui-outlineControlsWidget-movers' )
7478                 .append( this.removeButton.$element, this.upButton.$element, this.downButton.$element );
7479         this.$element.append( this.$icon, this.$group, this.$movers );
7480 };
7481
7482 /* Setup */
7483
7484 OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget );
7485 OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.GroupElement );
7486 OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.IconedElement );
7487
7488 /* Events */
7489
7490 /**
7491  * @event move
7492  * @param {number} places Number of places to move
7493  */
7494
7495 /**
7496  * @event remove
7497  */
7498
7499 /* Methods */
7500
7501 /**
7502  * Handle outline change events.
7503  */
7504 OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () {
7505         var i, len, firstMovable, lastMovable,
7506                 items = this.outline.getItems(),
7507                 selectedItem = this.outline.getSelectedItem(),
7508                 movable = selectedItem && selectedItem.isMovable(),
7509                 removable = selectedItem && selectedItem.isRemovable();
7510
7511         if ( movable ) {
7512                 i = -1;
7513                 len = items.length;
7514                 while ( ++i < len ) {
7515                         if ( items[i].isMovable() ) {
7516                                 firstMovable = items[i];
7517                                 break;
7518                         }
7519                 }
7520                 i = len;
7521                 while ( i-- ) {
7522                         if ( items[i].isMovable() ) {
7523                                 lastMovable = items[i];
7524                                 break;
7525                         }
7526                 }
7527         }
7528         this.upButton.setDisabled( !movable || selectedItem === firstMovable );
7529         this.downButton.setDisabled( !movable || selectedItem === lastMovable );
7530         this.removeButton.setDisabled( !removable );
7531 };
7532 /**
7533  * Creates an OO.ui.OutlineItemWidget object.
7534  *
7535  * Use with OO.ui.OutlineWidget.
7536  *
7537  * @class
7538  * @extends OO.ui.OptionWidget
7539  *
7540  * @constructor
7541  * @param {Mixed} data Item data
7542  * @param {Object} [config] Configuration options
7543  * @cfg {number} [level] Indentation level
7544  * @cfg {boolean} [movable] Allow modification from outline controls
7545  */
7546 OO.ui.OutlineItemWidget = function OoUiOutlineItemWidget( data, config ) {
7547         // Config intialization
7548         config = config || {};
7549
7550         // Parent constructor
7551         OO.ui.OutlineItemWidget.super.call( this, data, config );
7552
7553         // Properties
7554         this.level = 0;
7555         this.movable = !!config.movable;
7556         this.removable = !!config.removable;
7557
7558         // Initialization
7559         this.$element.addClass( 'oo-ui-outlineItemWidget' );
7560         this.setLevel( config.level );
7561 };
7562
7563 /* Setup */
7564
7565 OO.inheritClass( OO.ui.OutlineItemWidget, OO.ui.OptionWidget );
7566
7567 /* Static Properties */
7568
7569 OO.ui.OutlineItemWidget.static.highlightable = false;
7570
7571 OO.ui.OutlineItemWidget.static.scrollIntoViewOnSelect = true;
7572
7573 OO.ui.OutlineItemWidget.static.levelClass = 'oo-ui-outlineItemWidget-level-';
7574
7575 OO.ui.OutlineItemWidget.static.levels = 3;
7576
7577 /* Methods */
7578
7579 /**
7580  * Check if item is movable.
7581  *
7582  * Movablilty is used by outline controls.
7583  *
7584  * @return {boolean} Item is movable
7585  */
7586 OO.ui.OutlineItemWidget.prototype.isMovable = function () {
7587         return this.movable;
7588 };
7589
7590 /**
7591  * Check if item is removable.
7592  *
7593  * Removablilty is used by outline controls.
7594  *
7595  * @return {boolean} Item is removable
7596  */
7597 OO.ui.OutlineItemWidget.prototype.isRemovable = function () {
7598         return this.removable;
7599 };
7600
7601 /**
7602  * Get indentation level.
7603  *
7604  * @return {number} Indentation level
7605  */
7606 OO.ui.OutlineItemWidget.prototype.getLevel = function () {
7607         return this.level;
7608 };
7609
7610 /**
7611  * Set movability.
7612  *
7613  * Movablilty is used by outline controls.
7614  *
7615  * @param {boolean} movable Item is movable
7616  * @chainable
7617  */
7618 OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) {
7619         this.movable = !!movable;
7620         return this;
7621 };
7622
7623 /**
7624  * Set removability.
7625  *
7626  * Removablilty is used by outline controls.
7627  *
7628  * @param {boolean} movable Item is removable
7629  * @chainable
7630  */
7631 OO.ui.OutlineItemWidget.prototype.setRemovable = function ( removable ) {
7632         this.removable = !!removable;
7633         return this;
7634 };
7635
7636 /**
7637  * Set indentation level.
7638  *
7639  * @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
7640  * @chainable
7641  */
7642 OO.ui.OutlineItemWidget.prototype.setLevel = function ( level ) {
7643         var levels = this.constructor.static.levels,
7644                 levelClass = this.constructor.static.levelClass,
7645                 i = levels;
7646
7647         this.level = level ? Math.max( 0, Math.min( levels - 1, level ) ) : 0;
7648         while ( i-- ) {
7649                 if ( this.level === i ) {
7650                         this.$element.addClass( levelClass + i );
7651                 } else {
7652                         this.$element.removeClass( levelClass + i );
7653                 }
7654         }
7655
7656         return this;
7657 };
7658 /**
7659  * Option widget that looks like a button.
7660  *
7661  * Use together with OO.ui.ButtonSelectWidget.
7662  *
7663  * @class
7664  * @extends OO.ui.OptionWidget
7665  * @mixins OO.ui.ButtonedElement
7666  * @mixins OO.ui.FlaggableElement
7667  *
7668  * @constructor
7669  * @param {Mixed} data Option data
7670  * @param {Object} [config] Configuration options
7671  */
7672 OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( data, config ) {
7673         // Parent constructor
7674         OO.ui.ButtonOptionWidget.super.call( this, data, config );
7675
7676         // Mixin constructors
7677         OO.ui.ButtonedElement.call( this, this.$( '<a>' ), config );
7678         OO.ui.FlaggableElement.call( this, config );
7679
7680         // Initialization
7681         this.$element.addClass( 'oo-ui-buttonOptionWidget' );
7682         this.$button.append( this.$element.contents() );
7683         this.$element.append( this.$button );
7684 };
7685
7686 /* Setup */
7687
7688 OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.OptionWidget );
7689 OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.ButtonedElement );
7690 OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.FlaggableElement );
7691
7692 /* Static Properties */
7693
7694 // Allow button mouse down events to pass through so they can be handled by the parent select widget
7695 OO.ui.ButtonOptionWidget.static.cancelButtonMouseDownEvents = false;
7696
7697 /* Methods */
7698
7699 /**
7700  * @inheritdoc
7701  */
7702 OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) {
7703         OO.ui.ButtonOptionWidget.super.prototype.setSelected.call( this, state );
7704
7705         if ( this.constructor.static.selectable ) {
7706                 this.setActive( state );
7707         }
7708
7709         return this;
7710 };
7711 /**
7712  * Select widget containing button options.
7713  *
7714  * Use together with OO.ui.ButtonOptionWidget.
7715  *
7716  * @class
7717  * @extends OO.ui.SelectWidget
7718  *
7719  * @constructor
7720  * @param {Object} [config] Configuration options
7721  */
7722 OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) {
7723         // Parent constructor
7724         OO.ui.ButtonSelectWidget.super.call( this, config );
7725
7726         // Initialization
7727         this.$element.addClass( 'oo-ui-buttonSelectWidget' );
7728 };
7729
7730 /* Setup */
7731
7732 OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
7733 /**
7734  * Container for content that is overlaid and positioned absolutely.
7735  *
7736  * @class
7737  * @extends OO.ui.Widget
7738  * @mixins OO.ui.LabeledElement
7739  *
7740  * @constructor
7741  * @param {Object} [config] Configuration options
7742  * @cfg {boolean} [tail=true] Show tail pointing to origin of popup
7743  * @cfg {string} [align='center'] Alignment of popup to origin
7744  * @cfg {jQuery} [$container] Container to prevent popup from rendering outside of
7745  * @cfg {boolean} [autoClose=false] Popup auto-closes when it loses focus
7746  * @cfg {jQuery} [$autoCloseIgnore] Elements to not auto close when clicked
7747  * @cfg {boolean} [head] Show label and close button at the top
7748  */
7749 OO.ui.PopupWidget = function OoUiPopupWidget( config ) {
7750         // Config intialization
7751         config = config || {};
7752
7753         // Parent constructor
7754         OO.ui.PopupWidget.super.call( this, config );
7755
7756         // Mixin constructors
7757         OO.ui.LabeledElement.call( this, this.$( '<div>' ), config );
7758         OO.ui.ClippableElement.call( this, this.$( '<div>' ), config );
7759
7760         // Properties
7761         this.visible = false;
7762         this.$popup = this.$( '<div>' );
7763         this.$head = this.$( '<div>' );
7764         this.$body = this.$clippable;
7765         this.$tail = this.$( '<div>' );
7766         this.$container = config.$container || this.$( 'body' );
7767         this.autoClose = !!config.autoClose;
7768         this.$autoCloseIgnore = config.$autoCloseIgnore;
7769         this.transitionTimeout = null;
7770         this.tail = false;
7771         this.align = config.align || 'center';
7772         this.closeButton = new OO.ui.ButtonWidget( { '$': this.$, 'frameless': true, 'icon': 'close' } );
7773         this.onMouseDownHandler = OO.ui.bind( this.onMouseDown, this );
7774
7775         // Events
7776         this.closeButton.connect( this, { 'click': 'onCloseButtonClick' } );
7777
7778         // Initialization
7779         this.useTail( config.tail !== undefined ? !!config.tail : true );
7780         this.$body.addClass( 'oo-ui-popupWidget-body' );
7781         this.$tail.addClass( 'oo-ui-popupWidget-tail' );
7782         this.$head
7783                 .addClass( 'oo-ui-popupWidget-head' )
7784                 .append( this.$label, this.closeButton.$element );
7785         if ( !config.head ) {
7786                 this.$head.hide();
7787         }
7788         this.$popup
7789                 .addClass( 'oo-ui-popupWidget-popup' )
7790                 .append( this.$head, this.$body );
7791         this.$element.hide()
7792                 .addClass( 'oo-ui-popupWidget' )
7793                 .append( this.$popup, this.$tail );
7794 };
7795
7796 /* Setup */
7797
7798 OO.inheritClass( OO.ui.PopupWidget, OO.ui.Widget );
7799 OO.mixinClass( OO.ui.PopupWidget, OO.ui.LabeledElement );
7800 OO.mixinClass( OO.ui.PopupWidget, OO.ui.ClippableElement );
7801
7802 /* Events */
7803
7804 /**
7805  * @event hide
7806  */
7807
7808 /**
7809  * @event show
7810  */
7811
7812 /* Methods */
7813
7814 /**
7815  * Handles mouse down events.
7816  *
7817  * @param {jQuery.Event} e Mouse down event
7818  */
7819 OO.ui.PopupWidget.prototype.onMouseDown = function ( e ) {
7820         if (
7821                 this.visible &&
7822                 !$.contains( this.$element[0], e.target ) &&
7823                 ( !this.$autoCloseIgnore || !this.$autoCloseIgnore.has( e.target ).length )
7824         ) {
7825                 this.hide();
7826         }
7827 };
7828
7829 /**
7830  * Bind mouse down listener.
7831  */
7832 OO.ui.PopupWidget.prototype.bindMouseDownListener = function () {
7833         // Capture clicks outside popup
7834         this.getElementWindow().addEventListener( 'mousedown', this.onMouseDownHandler, true );
7835 };
7836
7837 /**
7838  * Handles close button click events.
7839  */
7840 OO.ui.PopupWidget.prototype.onCloseButtonClick = function () {
7841         if ( this.visible ) {
7842                 this.hide();
7843         }
7844 };
7845
7846 /**
7847  * Unbind mouse down listener.
7848  */
7849 OO.ui.PopupWidget.prototype.unbindMouseDownListener = function () {
7850         this.getElementWindow().removeEventListener( 'mousedown', this.onMouseDownHandler, true );
7851 };
7852
7853 /**
7854  * Check if the popup is visible.
7855  *
7856  * @return {boolean} Popup is visible
7857  */
7858 OO.ui.PopupWidget.prototype.isVisible = function () {
7859         return this.visible;
7860 };
7861
7862 /**
7863  * Set whether to show a tail.
7864  *
7865  * @return {boolean} Make tail visible
7866  */
7867 OO.ui.PopupWidget.prototype.useTail = function ( value ) {
7868         value = !!value;
7869         if ( this.tail !== value ) {
7870                 this.tail = value;
7871                 if ( value ) {
7872                         this.$element.addClass( 'oo-ui-popupWidget-tailed' );
7873                 } else {
7874                         this.$element.removeClass( 'oo-ui-popupWidget-tailed' );
7875                 }
7876         }
7877 };
7878
7879 /**
7880  * Check if showing a tail.
7881  *
7882  * @return {boolean} tail is visible
7883  */
7884 OO.ui.PopupWidget.prototype.hasTail = function () {
7885         return this.tail;
7886 };
7887
7888 /**
7889  * Show the context.
7890  *
7891  * @fires show
7892  * @chainable
7893  */
7894 OO.ui.PopupWidget.prototype.show = function () {
7895         if ( !this.visible ) {
7896                 this.setClipping( true );
7897                 this.$element.show();
7898                 this.visible = true;
7899                 this.emit( 'show' );
7900                 if ( this.autoClose ) {
7901                         this.bindMouseDownListener();
7902                 }
7903         }
7904         return this;
7905 };
7906
7907 /**
7908  * Hide the context.
7909  *
7910  * @fires hide
7911  * @chainable
7912  */
7913 OO.ui.PopupWidget.prototype.hide = function () {
7914         if ( this.visible ) {
7915                 this.setClipping( false );
7916                 this.$element.hide();
7917                 this.visible = false;
7918                 this.emit( 'hide' );
7919                 if ( this.autoClose ) {
7920                         this.unbindMouseDownListener();
7921                 }
7922         }
7923         return this;
7924 };
7925
7926 /**
7927  * Updates the position and size.
7928  *
7929  * @param {number} width Width
7930  * @param {number} height Height
7931  * @param {boolean} [transition=false] Use a smooth transition
7932  * @chainable
7933  */
7934 OO.ui.PopupWidget.prototype.display = function ( width, height, transition ) {
7935         var padding = 10,
7936                 originOffset = Math.round( this.$element.offset().left ),
7937                 containerLeft = Math.round( this.$container.offset().left ),
7938                 containerWidth = this.$container.innerWidth(),
7939                 containerRight = containerLeft + containerWidth,
7940                 popupOffset = width * ( { 'left': 0, 'center': -0.5, 'right': -1 } )[this.align],
7941                 popupLeft = popupOffset - padding,
7942                 popupRight = popupOffset + padding + width + padding,
7943                 overlapLeft = ( originOffset + popupLeft ) - containerLeft,
7944                 overlapRight = containerRight - ( originOffset + popupRight );
7945
7946         // Prevent transition from being interrupted
7947         clearTimeout( this.transitionTimeout );
7948         if ( transition ) {
7949                 // Enable transition
7950                 this.$element.addClass( 'oo-ui-popupWidget-transitioning' );
7951         }
7952
7953         if ( overlapRight < 0 ) {
7954                 popupOffset += overlapRight;
7955         } else if ( overlapLeft < 0 ) {
7956                 popupOffset -= overlapLeft;
7957         }
7958
7959         // Position body relative to anchor and resize
7960         this.$popup.css( {
7961                 'left': popupOffset,
7962                 'width': width,
7963                 'height': height === undefined ? 'auto' : height
7964         } );
7965
7966         if ( transition ) {
7967                 // Prevent transitioning after transition is complete
7968                 this.transitionTimeout = setTimeout( OO.ui.bind( function () {
7969                         this.$element.removeClass( 'oo-ui-popupWidget-transitioning' );
7970                 }, this ), 200 );
7971         } else {
7972                 // Prevent transitioning immediately
7973                 this.$element.removeClass( 'oo-ui-popupWidget-transitioning' );
7974         }
7975
7976         return this;
7977 };
7978 /**
7979  * Button that shows and hides a popup.
7980  *
7981  * @class
7982  * @extends OO.ui.ButtonWidget
7983  * @mixins OO.ui.PopuppableElement
7984  *
7985  * @constructor
7986  * @param {Object} [config] Configuration options
7987  */
7988 OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
7989         // Parent constructor
7990         OO.ui.PopupButtonWidget.super.call( this, config );
7991
7992         // Mixin constructors
7993         OO.ui.PopuppableElement.call( this, config );
7994
7995         // Initialization
7996         this.$element
7997                 .addClass( 'oo-ui-popupButtonWidget' )
7998                 .append( this.popup.$element );
7999 };
8000
8001 /* Setup */
8002
8003 OO.inheritClass( OO.ui.PopupButtonWidget, OO.ui.ButtonWidget );
8004 OO.mixinClass( OO.ui.PopupButtonWidget, OO.ui.PopuppableElement );
8005
8006 /* Methods */
8007
8008 /**
8009  * Handles mouse click events.
8010  *
8011  * @param {jQuery.Event} e Mouse click event
8012  */
8013 OO.ui.PopupButtonWidget.prototype.onClick = function ( e ) {
8014         // Skip clicks within the popup
8015         if ( $.contains( this.popup.$element[0], e.target ) ) {
8016                 return;
8017         }
8018
8019         if ( !this.isDisabled() ) {
8020                 if ( this.popup.isVisible() ) {
8021                         this.hidePopup();
8022                 } else {
8023                         this.showPopup();
8024                 }
8025                 OO.ui.PopupButtonWidget.super.prototype.onClick.call( this );
8026         }
8027         return false;
8028 };
8029 /**
8030  * Search widget.
8031  *
8032  * Combines query and results selection widgets.
8033  *
8034  * @class
8035  * @extends OO.ui.Widget
8036  *
8037  * @constructor
8038  * @param {Object} [config] Configuration options
8039  * @cfg {string|jQuery} [placeholder] Placeholder text for query input
8040  * @cfg {string} [value] Initial query value
8041  */
8042 OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
8043         // Configuration intialization
8044         config = config || {};
8045
8046         // Parent constructor
8047         OO.ui.SearchWidget.super.call( this, config );
8048
8049         // Properties
8050         this.query = new OO.ui.TextInputWidget( {
8051                 '$': this.$,
8052                 'icon': 'search',
8053                 'placeholder': config.placeholder,
8054                 'value': config.value
8055         } );
8056         this.results = new OO.ui.SelectWidget( { '$': this.$ } );
8057         this.$query = this.$( '<div>' );
8058         this.$results = this.$( '<div>' );
8059
8060         // Events
8061         this.query.connect( this, {
8062                 'change': 'onQueryChange',
8063                 'enter': 'onQueryEnter'
8064         } );
8065         this.results.connect( this, {
8066                 'highlight': 'onResultsHighlight',
8067                 'select': 'onResultsSelect'
8068         } );
8069         this.query.$input.on( 'keydown', OO.ui.bind( this.onQueryKeydown, this ) );
8070
8071         // Initialization
8072         this.$query
8073                 .addClass( 'oo-ui-searchWidget-query' )
8074                 .append( this.query.$element );
8075         this.$results
8076                 .addClass( 'oo-ui-searchWidget-results' )
8077                 .append( this.results.$element );
8078         this.$element
8079                 .addClass( 'oo-ui-searchWidget' )
8080                 .append( this.$results, this.$query );
8081 };
8082
8083 /* Setup */
8084
8085 OO.inheritClass( OO.ui.SearchWidget, OO.ui.Widget );
8086
8087 /* Events */
8088
8089 /**
8090  * @event highlight
8091  * @param {Object|null} item Item data or null if no item is highlighted
8092  */
8093
8094 /**
8095  * @event select
8096  * @param {Object|null} item Item data or null if no item is selected
8097  */
8098
8099 /* Methods */
8100
8101 /**
8102  * Handle query key down events.
8103  *
8104  * @param {jQuery.Event} e Key down event
8105  */
8106 OO.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) {
8107         var highlightedItem, nextItem,
8108                 dir = e.which === OO.ui.Keys.DOWN ? 1 : ( e.which === OO.ui.Keys.UP ? -1 : 0 );
8109
8110         if ( dir ) {
8111                 highlightedItem = this.results.getHighlightedItem();
8112                 if ( !highlightedItem ) {
8113                         highlightedItem = this.results.getSelectedItem();
8114                 }
8115                 nextItem = this.results.getRelativeSelectableItem( highlightedItem, dir );
8116                 this.results.highlightItem( nextItem );
8117                 nextItem.scrollElementIntoView();
8118         }
8119 };
8120
8121 /**
8122  * Handle select widget select events.
8123  *
8124  * Clears existing results. Subclasses should repopulate items according to new query.
8125  *
8126  * @param {string} value New value
8127  */
8128 OO.ui.SearchWidget.prototype.onQueryChange = function () {
8129         // Reset
8130         this.results.clearItems();
8131 };
8132
8133 /**
8134  * Handle select widget enter key events.
8135  *
8136  * Selects highlighted item.
8137  *
8138  * @param {string} value New value
8139  */
8140 OO.ui.SearchWidget.prototype.onQueryEnter = function () {
8141         // Reset
8142         this.results.selectItem( this.results.getHighlightedItem() );
8143 };
8144
8145 /**
8146  * Handle select widget highlight events.
8147  *
8148  * @param {OO.ui.OptionWidget} item Highlighted item
8149  * @fires highlight
8150  */
8151 OO.ui.SearchWidget.prototype.onResultsHighlight = function ( item ) {
8152         this.emit( 'highlight', item ? item.getData() : null );
8153 };
8154
8155 /**
8156  * Handle select widget select events.
8157  *
8158  * @param {OO.ui.OptionWidget} item Selected item
8159  * @fires select
8160  */
8161 OO.ui.SearchWidget.prototype.onResultsSelect = function ( item ) {
8162         this.emit( 'select', item ? item.getData() : null );
8163 };
8164
8165 /**
8166  * Get the query input.
8167  *
8168  * @return {OO.ui.TextInputWidget} Query input
8169  */
8170 OO.ui.SearchWidget.prototype.getQuery = function () {
8171         return this.query;
8172 };
8173
8174 /**
8175  * Get the results list.
8176  *
8177  * @return {OO.ui.SelectWidget} Select list
8178  */
8179 OO.ui.SearchWidget.prototype.getResults = function () {
8180         return this.results;
8181 };
8182 /**
8183  * Text input widget.
8184  *
8185  * @class
8186  * @extends OO.ui.InputWidget
8187  *
8188  * @constructor
8189  * @param {Object} [config] Configuration options
8190  * @cfg {string} [placeholder] Placeholder text
8191  * @cfg {string} [icon] Symbolic name of icon
8192  * @cfg {boolean} [multiline=false] Allow multiple lines of text
8193  * @cfg {boolean} [autosize=false] Automatically resize to fit content
8194  * @cfg {boolean} [maxRows=10] Maximum number of rows to make visible when autosizing
8195  */
8196 OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
8197         config = $.extend( { 'maxRows': 10 }, config );
8198
8199         // Parent constructor
8200         OO.ui.TextInputWidget.super.call( this, config );
8201
8202         // Properties
8203         this.pending = 0;
8204         this.multiline = !!config.multiline;
8205         this.autosize = !!config.autosize;
8206         this.maxRows = config.maxRows;
8207
8208         // Events
8209         this.$input.on( 'keypress', OO.ui.bind( this.onKeyPress, this ) );
8210         this.$element.on( 'DOMNodeInsertedIntoDocument', OO.ui.bind( this.onElementAttach, this ) );
8211
8212         // Initialization
8213         this.$element.addClass( 'oo-ui-textInputWidget' );
8214         if ( config.icon ) {
8215                 this.$element.addClass( 'oo-ui-textInputWidget-decorated' );
8216                 this.$element.append(
8217                         this.$( '<span>' )
8218                                 .addClass( 'oo-ui-textInputWidget-icon oo-ui-icon-' + config.icon )
8219                                 .mousedown( OO.ui.bind( function () {
8220                                         this.$input.focus();
8221                                         return false;
8222                                 }, this ) )
8223                 );
8224         }
8225         if ( config.placeholder ) {
8226                 this.$input.attr( 'placeholder', config.placeholder );
8227         }
8228 };
8229
8230 /* Setup */
8231
8232 OO.inheritClass( OO.ui.TextInputWidget, OO.ui.InputWidget );
8233
8234 /* Events */
8235
8236 /**
8237  * User presses enter inside the text box.
8238  *
8239  * Not called if input is multiline.
8240  *
8241  * @event enter
8242  */
8243
8244 /* Methods */
8245
8246 /**
8247  * Handle key press events.
8248  *
8249  * @param {jQuery.Event} e Key press event
8250  * @fires enter If enter key is pressed and input is not multiline
8251  */
8252 OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) {
8253         if ( e.which === OO.ui.Keys.ENTER && !this.multiline ) {
8254                 this.emit( 'enter' );
8255         }
8256 };
8257
8258 /**
8259  * Handle element attach events.
8260  *
8261  * @param {jQuery.Event} e Element attach event
8262  */
8263 OO.ui.TextInputWidget.prototype.onElementAttach = function () {
8264         this.adjustSize();
8265 };
8266
8267 /**
8268  * @inheritdoc
8269  */
8270 OO.ui.TextInputWidget.prototype.onEdit = function () {
8271         this.adjustSize();
8272
8273         // Parent method
8274         return OO.ui.TextInputWidget.super.prototype.onEdit.call( this );
8275 };
8276
8277 /**
8278  * Automatically adjust the size of the text input.
8279  *
8280  * This only affects multi-line inputs that are auto-sized.
8281  *
8282  * @chainable
8283  */
8284 OO.ui.TextInputWidget.prototype.adjustSize = function () {
8285         var $clone, scrollHeight, innerHeight, outerHeight, maxInnerHeight, idealHeight;
8286
8287         if ( this.multiline && this.autosize ) {
8288                 $clone = this.$input.clone()
8289                         .val( this.$input.val() )
8290                         .css( { 'height': 0 } )
8291                         .insertAfter( this.$input );
8292                 // Set inline height property to 0 to measure scroll height
8293                 scrollHeight = $clone[0].scrollHeight;
8294                 // Remove inline height property to measure natural heights
8295                 $clone.css( 'height', '' );
8296                 innerHeight = $clone.innerHeight();
8297                 outerHeight = $clone.outerHeight();
8298                 // Measure max rows height
8299                 $clone.attr( 'rows', this.maxRows ).css( 'height', 'auto' );
8300                 maxInnerHeight = $clone.innerHeight();
8301                 $clone.removeAttr( 'rows' ).css( 'height', '' );
8302                 $clone.remove();
8303                 idealHeight = Math.min( maxInnerHeight, scrollHeight );
8304                 // Only apply inline height when expansion beyond natural height is needed
8305                 this.$input.css(
8306                         'height',
8307                         // Use the difference between the inner and outer height as a buffer
8308                         idealHeight > outerHeight ? idealHeight + ( outerHeight - innerHeight ) : ''
8309                 );
8310         }
8311         return this;
8312 };
8313
8314 /**
8315  * Get input element.
8316  *
8317  * @param {Object} [config] Configuration options
8318  * @return {jQuery} Input element
8319  */
8320 OO.ui.TextInputWidget.prototype.getInputElement = function ( config ) {
8321         return config.multiline ? this.$( '<textarea>' ) : this.$( '<input type="text" />' );
8322 };
8323
8324 /* Methods */
8325
8326 /**
8327  * Check if input supports multiple lines.
8328  *
8329  * @return {boolean}
8330  */
8331 OO.ui.TextInputWidget.prototype.isMultiline = function () {
8332         return !!this.multiline;
8333 };
8334
8335 /**
8336  * Check if input automatically adjusts its size.
8337  *
8338  * @return {boolean}
8339  */
8340 OO.ui.TextInputWidget.prototype.isAutosizing = function () {
8341         return !!this.autosize;
8342 };
8343
8344 /**
8345  * Check if input is pending.
8346  *
8347  * @return {boolean}
8348  */
8349 OO.ui.TextInputWidget.prototype.isPending = function () {
8350         return !!this.pending;
8351 };
8352
8353 /**
8354  * Increase the pending stack.
8355  *
8356  * @chainable
8357  */
8358 OO.ui.TextInputWidget.prototype.pushPending = function () {
8359         if ( this.pending === 0 ) {
8360                 this.$element.addClass( 'oo-ui-textInputWidget-pending' );
8361                 this.$input.addClass( 'oo-ui-texture-pending' );
8362         }
8363         this.pending++;
8364
8365         return this;
8366 };
8367
8368 /**
8369  * Reduce the pending stack.
8370  *
8371  * Clamped at zero.
8372  *
8373  * @chainable
8374  */
8375 OO.ui.TextInputWidget.prototype.popPending = function () {
8376         if ( this.pending === 1 ) {
8377                 this.$element.removeClass( 'oo-ui-textInputWidget-pending' );
8378                 this.$input.removeClass( 'oo-ui-texture-pending' );
8379         }
8380         this.pending = Math.max( 0, this.pending - 1 );
8381
8382         return this;
8383 };
8384
8385 /**
8386  * Select the contents of the input.
8387  *
8388  * @chainable
8389  */
8390 OO.ui.TextInputWidget.prototype.select = function () {
8391         this.$input.select();
8392         return this;
8393 };
8394 /**
8395  * Menu for a text input widget.
8396  *
8397  * @class
8398  * @extends OO.ui.MenuWidget
8399  *
8400  * @constructor
8401  * @param {OO.ui.TextInputWidget} input Text input widget to provide menu for
8402  * @param {Object} [config] Configuration options
8403  * @cfg {jQuery} [$container=input.$element] Element to render menu under
8404  */
8405 OO.ui.TextInputMenuWidget = function OoUiTextInputMenuWidget( input, config ) {
8406         // Parent constructor
8407         OO.ui.TextInputMenuWidget.super.call( this, config );
8408
8409         // Properties
8410         this.input = input;
8411         this.$container = config.$container || this.input.$element;
8412         this.onWindowResizeHandler = OO.ui.bind( this.onWindowResize, this );
8413
8414         // Initialization
8415         this.$element.addClass( 'oo-ui-textInputMenuWidget' );
8416 };
8417
8418 /* Setup */
8419
8420 OO.inheritClass( OO.ui.TextInputMenuWidget, OO.ui.MenuWidget );
8421
8422 /* Methods */
8423
8424 /**
8425  * Handle window resize event.
8426  *
8427  * @param {jQuery.Event} e Window resize event
8428  */
8429 OO.ui.TextInputMenuWidget.prototype.onWindowResize = function () {
8430         this.position();
8431 };
8432
8433 /**
8434  * Show the menu.
8435  *
8436  * @chainable
8437  */
8438 OO.ui.TextInputMenuWidget.prototype.show = function () {
8439         // Parent method
8440         OO.ui.TextInputMenuWidget.super.prototype.show.call( this );
8441
8442         this.position();
8443         this.$( this.getElementWindow() ).on( 'resize', this.onWindowResizeHandler );
8444         return this;
8445 };
8446
8447 /**
8448  * Hide the menu.
8449  *
8450  * @chainable
8451  */
8452 OO.ui.TextInputMenuWidget.prototype.hide = function () {
8453         // Parent method
8454         OO.ui.TextInputMenuWidget.super.prototype.hide.call( this );
8455
8456         this.$( this.getElementWindow() ).off( 'resize', this.onWindowResizeHandler );
8457         return this;
8458 };
8459
8460 /**
8461  * Position the menu.
8462  *
8463  * @chainable
8464  */
8465 OO.ui.TextInputMenuWidget.prototype.position = function () {
8466         var frameOffset,
8467                 $container = this.$container,
8468                 dimensions = $container.offset();
8469
8470         // Position under input
8471         dimensions.top += $container.height();
8472
8473         // Compensate for frame position if in a differnt frame
8474         if ( this.input.$.frame && this.input.$.context !== this.$element[0].ownerDocument ) {
8475                 frameOffset = OO.ui.Element.getRelativePosition(
8476                         this.input.$.frame.$element, this.$element.offsetParent()
8477                 );
8478                 dimensions.left += frameOffset.left;
8479                 dimensions.top += frameOffset.top;
8480         } else {
8481                 // Fix for RTL (for some reason, no need to fix if the frameoffset is set)
8482                 if ( this.$element.css( 'direction' ) === 'rtl' ) {
8483                         dimensions.right = this.$element.parent().position().left -
8484                                 $container.width() - dimensions.left;
8485                         // Erase the value for 'left':
8486                         delete dimensions.left;
8487                 }
8488         }
8489
8490         this.$element.css( dimensions );
8491         this.setIdealSize( $container.width() );
8492         return this;
8493 };
8494 /**
8495  * Width with on and off states.
8496  *
8497  * Mixin for widgets with a boolean state.
8498  *
8499  * @abstract
8500  * @class
8501  *
8502  * @constructor
8503  * @param {Object} [config] Configuration options
8504  * @cfg {boolean} [value=false] Initial value
8505  */
8506 OO.ui.ToggleWidget = function OoUiToggleWidget( config ) {
8507         // Configuration initialization
8508         config = config || {};
8509
8510         // Properties
8511         this.value = null;
8512
8513         // Initialization
8514         this.$element.addClass( 'oo-ui-toggleWidget' );
8515         this.setValue( !!config.value );
8516 };
8517
8518 /* Events */
8519
8520 /**
8521  * @event change
8522  * @param {boolean} value Changed value
8523  */
8524
8525 /* Methods */
8526
8527 /**
8528  * Get the value of the toggle.
8529  *
8530  * @return {boolean}
8531  */
8532 OO.ui.ToggleWidget.prototype.getValue = function () {
8533         return this.value;
8534 };
8535
8536 /**
8537  * Set the value of the toggle.
8538  *
8539  * @param {boolean} value New value
8540  * @fires change
8541  * @chainable
8542  */
8543 OO.ui.ToggleWidget.prototype.setValue = function ( value ) {
8544         value = !!value;
8545         if ( this.value !== value ) {
8546                 this.value = value;
8547                 this.emit( 'change', value );
8548                 this.$element.toggleClass( 'oo-ui-toggleWidget-on', value );
8549                 this.$element.toggleClass( 'oo-ui-toggleWidget-off', !value );
8550         }
8551         return this;
8552 };
8553 /**
8554  * Button that toggles on and off.
8555  *
8556  * @class
8557  * @extends OO.ui.ButtonWidget
8558  * @mixins OO.ui.ToggleWidget
8559  *
8560  * @constructor
8561  * @param {Object} [config] Configuration options
8562  * @cfg {boolean} [value=false] Initial value
8563  */
8564 OO.ui.ToggleButtonWidget = function OoUiToggleButtonWidget( config ) {
8565         // Configuration initialization
8566         config = config || {};
8567
8568         // Parent constructor
8569         OO.ui.ToggleButtonWidget.super.call( this, config );
8570
8571         // Mixin constructors
8572         OO.ui.ToggleWidget.call( this, config );
8573
8574         // Initialization
8575         this.$element.addClass( 'oo-ui-toggleButtonWidget' );
8576 };
8577
8578 /* Setup */
8579
8580 OO.inheritClass( OO.ui.ToggleButtonWidget, OO.ui.ButtonWidget );
8581 OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.ToggleWidget );
8582
8583 /* Methods */
8584
8585 /**
8586  * @inheritdoc
8587  */
8588 OO.ui.ToggleButtonWidget.prototype.onClick = function () {
8589         if ( !this.isDisabled() ) {
8590                 this.setValue( !this.value );
8591         }
8592
8593         // Parent method
8594         return OO.ui.ToggleButtonWidget.super.prototype.onClick.call( this );
8595 };
8596
8597 /**
8598  * @inheritdoc
8599  */
8600 OO.ui.ToggleButtonWidget.prototype.setValue = function ( value ) {
8601         value = !!value;
8602         if ( value !== this.value ) {
8603                 this.setActive( value );
8604         }
8605
8606         // Parent method (from mixin)
8607         OO.ui.ToggleWidget.prototype.setValue.call( this, value );
8608
8609         return this;
8610 };
8611 /**
8612  * Switch that slides on and off.
8613  *
8614  * @class
8615  * @extends OO.ui.Widget
8616  * @mixins OO.ui.ToggleWidget
8617  *
8618  * @constructor
8619  * @param {Object} [config] Configuration options
8620  * @cfg {boolean} [value=false] Initial value
8621  */
8622 OO.ui.ToggleSwitchWidget = function OoUiToggleSwitchWidget( config ) {
8623         // Parent constructor
8624         OO.ui.ToggleSwitchWidget.super.call( this, config );
8625
8626         // Mixin constructors
8627         OO.ui.ToggleWidget.call( this, config );
8628
8629         // Properties
8630         this.dragging = false;
8631         this.dragStart = null;
8632         this.sliding = false;
8633         this.$glow = this.$( '<span>' );
8634         this.$grip = this.$( '<span>' );
8635
8636         // Events
8637         this.$element.on( 'click', OO.ui.bind( this.onClick, this ) );
8638
8639         // Initialization
8640         this.$glow.addClass( 'oo-ui-toggleSwitchWidget-glow' );
8641         this.$grip.addClass( 'oo-ui-toggleSwitchWidget-grip' );
8642         this.$element
8643                 .addClass( 'oo-ui-toggleSwitchWidget' )
8644                 .append( this.$glow, this.$grip );
8645 };
8646
8647 /* Setup */
8648
8649 OO.inheritClass( OO.ui.ToggleSwitchWidget, OO.ui.Widget );
8650 OO.mixinClass( OO.ui.ToggleSwitchWidget, OO.ui.ToggleWidget );
8651
8652 /* Methods */
8653
8654 /**
8655  * Handle mouse down events.
8656  *
8657  * @param {jQuery.Event} e Mouse down event
8658  */
8659 OO.ui.ToggleSwitchWidget.prototype.onClick = function ( e ) {
8660         if ( !this.isDisabled() && e.which === 1 ) {
8661                 this.setValue( !this.value );
8662         }
8663 };
8664 }( OO ) );