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