resources/oojs-ui/oojs-ui.js

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