/*!
- * OOjs UI v0.1.0-pre (85cfc2e735)
+ * OOjs UI v0.1.0-pre (3d8475c0b3)
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2014 OOjs Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2014-07-03T02:33:09Z
+ * Date: 2014-07-30T19:38:45Z
*/
( function ( OO ) {
* @property {Object}
*/
OO.ui.Keys = {
- 'UNDEFINED': 0,
- 'BACKSPACE': 8,
- 'DELETE': 46,
- 'LEFT': 37,
- 'RIGHT': 39,
- 'UP': 38,
- 'DOWN': 40,
- 'ENTER': 13,
- 'END': 35,
- 'HOME': 36,
- 'TAB': 9,
- 'PAGEUP': 33,
- 'PAGEDOWN': 34,
- 'ESCAPE': 27,
- 'SHIFT': 16,
- 'SPACE': 32
+ UNDEFINED: 0,
+ BACKSPACE: 8,
+ DELETE: 46,
+ LEFT: 37,
+ RIGHT: 39,
+ UP: 38,
+ DOWN: 40,
+ ENTER: 13,
+ END: 35,
+ HOME: 36,
+ TAB: 9,
+ PAGEUP: 33,
+ PAGEDOWN: 34,
+ ESCAPE: 27,
+ SHIFT: 16,
+ SPACE: 32
};
/**
};
( function () {
-
/**
* Message store for the default implementation of OO.ui.msg
*
* @private
*/
var messages = {
- // Label text for button to exit from dialog
- 'ooui-dialog-action-close': 'Close',
// Tool tip for a button that moves items in a list down one place
'ooui-outline-control-move-down': 'Move item down',
// Tool tip for a button that moves items in a list up one place
'ooui-outline-control-remove': 'Remove item',
// Label for the toolbar group that contains a list of all other available tools
'ooui-toolbar-more': 'More',
-
- // Label for the generic dialog used to confirm things
- 'ooui-dialog-confirm-title': 'Confirm',
- // The default prompt of a confirmation dialog
- 'ooui-dialog-confirm-default-prompt': 'Are you sure?',
- // The default OK button text on a confirmation dialog
- 'ooui-dialog-confirm-default-ok': 'OK',
- // The default cancel button text on a confirmation dialog
- 'ooui-dialog-confirm-default-cancel': 'Cancel'
+ // Default label for the accept button of a confirmation dialog
+ 'ooui-dialog-message-accept': 'OK',
+ // Default label for the reject button of a confirmation dialog
+ 'ooui-dialog-message-reject': 'Cancel',
+ // Title for process dialog error description
+ 'ooui-dialog-process-error': 'Something went wrong',
+ // Label for process dialog dismiss error button, visible when describing errors
+ 'ooui-dialog-process-dismiss': 'Dismiss',
+ // Label for process dialog retry action button, visible when describing recoverable errors
+ 'ooui-dialog-process-retry': 'Try again'
};
/**
return message;
};
- /** */
- OO.ui.deferMsg = function ( key ) {
+ /**
+ * Package a message and arguments for deferred resolution.
+ *
+ * Use this when you are statically specifying a message and the message may not yet be present.
+ *
+ * @param {string} key Message key
+ * @param {Mixed...} [params] Message parameters
+ * @return {Function} Function that returns the resolved message when executed
+ */
+ OO.ui.deferMsg = function () {
+ var args = arguments;
return function () {
- return OO.ui.msg( key );
+ return OO.ui.msg.apply( OO.ui, args );
};
};
- /** */
+ /**
+ * Resolve a message.
+ *
+ * If the message is a function it will be executed, otherwise it will pass through directly.
+ *
+ * @param {Function|string} msg Deferred message, or message text
+ * @return {string} Resolved message
+ */
OO.ui.resolveMsg = function ( msg ) {
if ( $.isFunction( msg ) ) {
return msg();
} )();
+/**
+ * List of actions.
+ *
+ * @abstract
+ * @class
+ * @mixins OO.EventEmitter
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.ActionSet = function OoUiActionSet( config ) {
+ // Configuration intialization
+ config = config || {};
+
+ // Mixin constructors
+ OO.EventEmitter.call( this );
+
+ // Properties
+ this.list = [];
+ this.categories = {
+ actions: 'getAction',
+ flags: 'getFlags',
+ modes: 'getModes'
+ };
+ this.categorized = {};
+ this.special = {};
+ this.others = [];
+ this.organized = false;
+ this.changing = false;
+ this.changed = false;
+};
+
+/* Setup */
+
+OO.mixinClass( OO.ui.ActionSet, OO.EventEmitter );
+
+/* Static Properties */
+
+/**
+ * Symbolic name of dialog.
+ *
+ * @abstract
+ * @static
+ * @inheritable
+ * @property {string}
+ */
+OO.ui.ActionSet.static.specialFlags = [ 'safe', 'primary' ];
+
+/* Events */
+
+/**
+ * @event click
+ * @param {OO.ui.ActionWidget} action Action that was clicked
+ */
+
+/**
+ * @event resize
+ * @param {OO.ui.ActionWidget} action Action that was resized
+ */
+
+/**
+ * @event add
+ * @param {OO.ui.ActionWidget[]} added Actions added
+ */
+
+/**
+ * @event remove
+ * @param {OO.ui.ActionWidget[]} added Actions removed
+ */
+
+/**
+ * @event change
+ */
+
+/* Methods */
+
+/**
+ * Handle action change events.
+ *
+ * @fires change
+ */
+OO.ui.ActionSet.prototype.onActionChange = function () {
+ this.organized = false;
+ if ( this.changing ) {
+ this.changed = true;
+ } else {
+ this.emit( 'change' );
+ }
+};
+
+/**
+ * Check if a action is one of the special actions.
+ *
+ * @param {OO.ui.ActionWidget} action Action to check
+ * @return {boolean} Action is special
+ */
+OO.ui.ActionSet.prototype.isSpecial = function ( action ) {
+ var flag;
+
+ for ( flag in this.special ) {
+ if ( action === this.special[flag] ) {
+ return true;
+ }
+ }
+
+ return false;
+};
+
+/**
+ * Get actions.
+ *
+ * @param {Object} [filters] Filters to use, omit to get all actions
+ * @param {string|string[]} [filters.actions] Actions that actions must have
+ * @param {string|string[]} [filters.flags] Flags that actions must have
+ * @param {string|string[]} [filters.modes] Modes that actions must have
+ * @param {boolean} [filters.visible] Actions must be visible
+ * @param {boolean} [filters.disabled] Actions must be disabled
+ * @return {OO.ui.ActionWidget[]} Actions matching all criteria
+ */
+OO.ui.ActionSet.prototype.get = function ( filters ) {
+ var i, len, list, category, actions, index, match, matches;
+
+ if ( filters ) {
+ this.organize();
+
+ // Collect category candidates
+ matches = [];
+ for ( category in this.categorized ) {
+ list = filters[category];
+ if ( list ) {
+ if ( !Array.isArray( list ) ) {
+ list = [ list ];
+ }
+ for ( i = 0, len = list.length; i < len; i++ ) {
+ actions = this.categorized[category][list[i]];
+ if ( Array.isArray( actions ) ) {
+ matches.push.apply( matches, actions );
+ }
+ }
+ }
+ }
+ // Remove by boolean filters
+ for ( i = 0, len = matches.length; i < len; i++ ) {
+ match = matches[i];
+ if (
+ ( filters.visible !== undefined && match.isVisible() !== filters.visible ) ||
+ ( filters.disabled !== undefined && match.isDisabled() !== filters.disabled )
+ ) {
+ matches.splice( i, 1 );
+ len--;
+ i--;
+ }
+ }
+ // Remove duplicates
+ for ( i = 0, len = matches.length; i < len; i++ ) {
+ match = matches[i];
+ index = matches.lastIndexOf( match );
+ while ( index !== i ) {
+ matches.splice( index, 1 );
+ len--;
+ index = matches.lastIndexOf( match );
+ }
+ }
+ return matches;
+ }
+ return this.list.slice();
+};
+
+/**
+ * Get special actions.
+ *
+ * Special actions are the first visible actions with special flags, such as 'safe' and 'primary'.
+ * Special flags can be configured by changing #static-specialFlags in a subclass.
+ *
+ * @return {OO.ui.ActionWidget|null} Safe action
+ */
+OO.ui.ActionSet.prototype.getSpecial = function () {
+ this.organize();
+ return $.extend( {}, this.special );
+};
+
+/**
+ * Get other actions.
+ *
+ * Other actions include all non-special visible actions.
+ *
+ * @return {OO.ui.ActionWidget[]} Other actions
+ */
+OO.ui.ActionSet.prototype.getOthers = function () {
+ this.organize();
+ return this.others.slice();
+};
+
+/**
+ * Toggle actions based on their modes.
+ *
+ * Unlike calling toggle on actions with matching flags, this will enforce mutually exclusive
+ * visibility; matching actions will be shown, non-matching actions will be hidden.
+ *
+ * @param {string} mode Mode actions must have
+ * @chainable
+ * @fires toggle
+ * @fires change
+ */
+OO.ui.ActionSet.prototype.setMode = function ( mode ) {
+ var i, len, action;
+
+ this.changing = true;
+ for ( i = 0, len = this.list.length; i < len; i++ ) {
+ action = this.list[i];
+ action.toggle( action.hasMode( mode ) );
+ }
+
+ this.organized = false;
+ this.changing = false;
+ this.emit( 'change' );
+
+ return this;
+};
+
+/**
+ * Change which actions are able to be performed.
+ *
+ * Actions with matching actions will be disabled/enabled. Other actions will not be changed.
+ *
+ * @param {Object.<string,boolean>} actions List of abilities, keyed by action name, values
+ * indicate actions are able to be performed
+ * @chainable
+ */
+OO.ui.ActionSet.prototype.setAbilities = function ( actions ) {
+ var i, len, action, item;
+
+ for ( i = 0, len = this.list.length; i < len; i++ ) {
+ item = this.list[i];
+ action = item.getAction();
+ if ( actions[action] !== undefined ) {
+ item.setDisabled( !actions[action] );
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Executes a function once per action.
+ *
+ * When making changes to multiple actions, use this method instead of iterating over the actions
+ * manually to defer emitting a change event until after all actions have been changed.
+ *
+ * @param {Object|null} actions Filters to use for which actions to iterate over; see #get
+ * @param {Function} callback Callback to run for each action; callback is invoked with three
+ * arguments: the action, the action's index, the list of actions being iterated over
+ * @chainable
+ */
+OO.ui.ActionSet.prototype.forEach = function ( filter, callback ) {
+ this.changed = false;
+ this.changing = true;
+ this.get( filter ).forEach( callback );
+ this.changing = false;
+ if ( this.changed ) {
+ this.emit( 'change' );
+ }
+
+ return this;
+};
+
+/**
+ * Add actions.
+ *
+ * @param {OO.ui.ActionWidget[]} actions Actions to add
+ * @chainable
+ * @fires add
+ * @fires change
+ */
+OO.ui.ActionSet.prototype.add = function ( actions ) {
+ var i, len, action;
+
+ this.changing = true;
+ for ( i = 0, len = actions.length; i < len; i++ ) {
+ action = actions[i];
+ action.connect( this, {
+ click: [ 'emit', 'click', action ],
+ resize: [ 'emit', 'resize', action ],
+ toggle: [ 'onActionChange' ]
+ } );
+ this.list.push( action );
+ }
+ this.organized = false;
+ this.emit( 'add', actions );
+ this.changing = false;
+ this.emit( 'change' );
+
+ return this;
+};
+
+/**
+ * Remove actions.
+ *
+ * @param {OO.ui.ActionWidget[]} actions Actions to remove
+ * @chainable
+ * @fires remove
+ * @fires change
+ */
+OO.ui.ActionSet.prototype.remove = function ( actions ) {
+ var i, len, index, action;
+
+ this.changing = true;
+ for ( i = 0, len = actions.length; i < len; i++ ) {
+ action = actions[i];
+ index = this.list.indexOf( action );
+ if ( index !== -1 ) {
+ action.disconnect( this );
+ this.list.splice( index, 1 );
+ }
+ }
+ this.organized = false;
+ this.emit( 'remove', actions );
+ this.changing = false;
+ this.emit( 'change' );
+
+ return this;
+};
+
+/**
+ * Remove all actions.
+ *
+ * @chainable
+ * @fires remove
+ * @fires change
+ */
+OO.ui.ActionSet.prototype.clear = function () {
+ var i, len, action,
+ removed = this.list.slice();
+
+ this.changing = true;
+ for ( i = 0, len = this.list.length; i < len; i++ ) {
+ action = this.list[i];
+ action.disconnect( this );
+ }
+
+ this.list = [];
+
+ this.organized = false;
+ this.emit( 'remove', removed );
+ this.changing = false;
+ this.emit( 'change' );
+
+ return this;
+};
+
+/**
+ * Organize actions.
+ *
+ * This is called whenver organized information is requested. It will only reorganize the actions
+ * if something has changed since the last time it ran.
+ *
+ * @private
+ * @chainable
+ */
+OO.ui.ActionSet.prototype.organize = function () {
+ var i, iLen, j, jLen, flag, action, category, list, item, special,
+ specialFlags = this.constructor.static.specialFlags;
+
+ if ( !this.organized ) {
+ this.categorized = {};
+ this.special = {};
+ this.others = [];
+ for ( i = 0, iLen = this.list.length; i < iLen; i++ ) {
+ action = this.list[i];
+ if ( action.isVisible() ) {
+ // Populate catgeories
+ for ( category in this.categories ) {
+ if ( !this.categorized[category] ) {
+ this.categorized[category] = {};
+ }
+ list = action[this.categories[category]]();
+ if ( !Array.isArray( list ) ) {
+ list = [ list ];
+ }
+ for ( j = 0, jLen = list.length; j < jLen; j++ ) {
+ item = list[j];
+ if ( !this.categorized[category][item] ) {
+ this.categorized[category][item] = [];
+ }
+ this.categorized[category][item].push( action );
+ }
+ }
+ // Populate special/others
+ special = false;
+ for ( j = 0, jLen = specialFlags.length; j < jLen; j++ ) {
+ flag = specialFlags[j];
+ if ( !this.special[flag] && action.hasFlag( flag ) ) {
+ this.special[flag] = action;
+ special = true;
+ break;
+ }
+ }
+ if ( !special ) {
+ this.others.push( action );
+ }
+ }
+ }
+ this.organized = true;
+ }
+
+ return this;
+};
+
/**
* DOM element abstraction.
*
to = window;
}
if ( !offset ) {
- offset = { 'top': 0, 'left': 0 };
+ offset = { top: 0, left: 0 };
}
if ( from.parent === from ) {
return offset;
OO.ui.Element.getRelativePosition = function ( $from, $to ) {
var from = $from.offset(),
to = $to.offset();
- return { 'top': Math.round( from.top - to.top ), 'left': Math.round( from.left - to.left ) };
+ return { top: Math.round( from.top - to.top ), left: Math.round( from.left - to.left ) };
};
/**
right = parseFloat( style ? style.borderRightWidth : $el.css( 'borderRightWidth' ) ) || 0;
return {
- 'top': Math.round( top ),
- 'left': Math.round( left ),
- 'bottom': Math.round( bottom ),
- 'right': Math.round( right )
+ top: Math.round( top ),
+ left: Math.round( left ),
+ bottom: Math.round( bottom ),
+ right: Math.round( right )
};
};
if ( win === el || el === doc.documentElement ) {
$win = $( win );
return {
- 'borders': { 'top': 0, 'left': 0, 'bottom': 0, 'right': 0 },
- 'scroll': {
- 'top': $win.scrollTop(),
- 'left': $win.scrollLeft()
+ borders: { top: 0, left: 0, bottom: 0, right: 0 },
+ scroll: {
+ top: $win.scrollTop(),
+ left: $win.scrollLeft()
},
- 'scrollbar': { 'right': 0, 'bottom': 0 },
- 'rect': {
- 'top': 0,
- 'left': 0,
- 'bottom': $win.innerHeight(),
- 'right': $win.innerWidth()
+ scrollbar: { right: 0, bottom: 0 },
+ rect: {
+ top: 0,
+ left: 0,
+ bottom: $win.innerHeight(),
+ right: $win.innerWidth()
}
};
} else {
$el = $( el );
return {
- 'borders': this.getBorders( el ),
- 'scroll': {
- 'top': $el.scrollTop(),
- 'left': $el.scrollLeft()
+ borders: this.getBorders( el ),
+ scroll: {
+ top: $el.scrollTop(),
+ left: $el.scrollLeft()
},
- 'scrollbar': {
- 'right': $el.innerWidth() - el.clientWidth,
- 'bottom': $el.innerHeight() - el.clientHeight
+ scrollbar: {
+ right: $el.innerWidth() - el.clientWidth,
+ bottom: $el.innerHeight() - el.clientHeight
},
- 'rect': el.getBoundingClientRect()
+ rect: el.getBoundingClientRect()
};
}
};
if ( $sc.is( 'body' ) ) {
// If the scrollable container is the <body> this is easy
rel = {
- 'top': eld.rect.top,
- 'bottom': $win.innerHeight() - eld.rect.bottom,
- 'left': eld.rect.left,
- 'right': $win.innerWidth() - eld.rect.right
+ top: eld.rect.top,
+ bottom: $win.innerHeight() - eld.rect.bottom,
+ left: eld.rect.left,
+ right: $win.innerWidth() - eld.rect.right
};
} else {
// Otherwise, we have to subtract el's coordinates from sc's coordinates
rel = {
- 'top': eld.rect.top - ( scd.rect.top + scd.borders.top ),
- 'bottom': scd.rect.bottom - scd.borders.bottom - scd.scrollbar.bottom - eld.rect.bottom,
- 'left': eld.rect.left - ( scd.rect.left + scd.borders.left ),
- 'right': scd.rect.right - scd.borders.right - scd.scrollbar.right - eld.rect.right
+ top: eld.rect.top - ( scd.rect.top + scd.borders.top ),
+ bottom: scd.rect.bottom - scd.borders.bottom - scd.scrollbar.bottom - eld.rect.bottom,
+ left: eld.rect.left - ( scd.rect.left + scd.borders.left ),
+ right: scd.rect.right - scd.borders.right - scd.scrollbar.right - eld.rect.right
};
}
// Initialize
this.$element
.addClass( 'oo-ui-frame' )
- .attr( { 'frameborder': 0, 'scrolling': 'no' } );
+ .attr( { frameborder: 0, scrolling: 'no' } );
};
* @fires load
*/
OO.ui.Frame.prototype.load = function () {
- var win, doc;
+ var win, doc,
+ frame = this;
// Return existing promise if already loading or loaded
if ( this.loading ) {
// Initialize contents
doc.open();
+ // The following classes can be used here:
+ // oo-ui-ltr
+ // oo-ui-rtl
doc.write(
'<!doctype html>' +
'<html>' +
- '<body class="oo-ui-frame-body oo-ui-' + this.dir + '" style="direction:' + this.dir + ';" dir="' + this.dir + '">' +
- '<div class="oo-ui-frame-content"></div>' +
+ '<body class="oo-ui-frame-content oo-ui-' + this.dir + '" dir="' + this.dir + '">' +
'</body>' +
'</html>'
);
// Initialization
this.constructor.static.transplantStyles( this.getElementDocument(), this.$document[0] )
- .always( OO.ui.bind( function () {
- this.emit( 'load' );
- this.loading.resolve();
- }, this ) );
+ .always( function () {
+ frame.emit( 'load' );
+ frame.loading.resolve();
+ } );
return this.loading.promise();
};
* @chainable
*/
OO.ui.Frame.prototype.setSize = function ( width, height ) {
- this.$element.css( { 'width': width, 'height': height } );
+ this.$element.css( { width: width, height: height } );
return this;
};
/**
- * Container for elements in a child frame.
- *
- * There are two ways to specify a title: set the static `title` property or provide a `title`
- * property in the configuration options. The latter will override the former.
+ * Container for elements.
*
* @abstract
* @class
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {string|Function} [title] Title string or function that returns a string
- * @cfg {string} [icon] Symbolic name of icon
- * @fires initialize
*/
-OO.ui.Window = function OoUiWindow( config ) {
- var element = this;
+OO.ui.Layout = function OoUiLayout( config ) {
+ // Initialize config
+ config = config || {};
+
// Parent constructor
- OO.ui.Window.super.call( this, config );
+ OO.ui.Layout.super.call( this, config );
// Mixin constructors
OO.EventEmitter.call( this );
- // Properties
- this.visible = false;
- this.opening = null;
- this.closing = null;
- this.opened = null;
- this.title = OO.ui.resolveMsg( config.title || this.constructor.static.title );
- this.icon = config.icon || this.constructor.static.icon;
- this.frame = new OO.ui.Frame( { '$': this.$ } );
- this.$frame = this.$( '<div>' );
- this.$ = function () {
- throw new Error( 'this.$() cannot be used until the frame has been initialized.' );
- };
-
// Initialization
- this.$element
- .addClass( 'oo-ui-window' )
- // Hide the window using visibility: hidden; while the iframe is still loading
- // Can't use display: none; because that prevents the iframe from loading in Firefox
- .css( 'visibility', 'hidden' )
- .append( this.$frame );
- this.$frame
- .addClass( 'oo-ui-window-frame' )
- .append( this.frame.$element );
-
- // Events
- this.frame.on( 'load', function () {
- element.initialize();
- // Undo the visibility: hidden; hack and apply display: none;
- // We can do this safely now that the iframe has initialized
- // (don't do this from within #initialize because it has to happen
- // after the all subclasses have been handled as well).
- element.$element.hide().css( 'visibility', '' );
- } );
+ this.$element.addClass( 'oo-ui-layout' );
};
/* Setup */
-OO.inheritClass( OO.ui.Window, OO.ui.Element );
-OO.mixinClass( OO.ui.Window, OO.EventEmitter );
-
-/* Events */
+OO.inheritClass( OO.ui.Layout, OO.ui.Element );
+OO.mixinClass( OO.ui.Layout, OO.EventEmitter );
/**
- * Window is setup.
+ * User interface control.
*
- * Fired after the setup process has been executed.
+ * @abstract
+ * @class
+ * @extends OO.ui.Element
+ * @mixins OO.EventEmitter
*
- * @event setup
- * @param {Object} data Window opening data
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {boolean} [disabled=false] Disable
*/
+OO.ui.Widget = function OoUiWidget( config ) {
+ // Initialize config
+ config = $.extend( { disabled: false }, config );
+
+ // Parent constructor
+ OO.ui.Widget.super.call( this, config );
+
+ // Mixin constructors
+ OO.EventEmitter.call( this );
+
+ // Properties
+ this.visible = true;
+ this.disabled = null;
+ this.wasDisabled = null;
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-widget' );
+ this.setDisabled( !!config.disabled );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.Widget, OO.ui.Element );
+OO.mixinClass( OO.ui.Widget, OO.EventEmitter );
+
+/* Events */
/**
- * Window is ready.
- *
- * Fired after the ready process has been executed.
- *
- * @event ready
- * @param {Object} data Window opening data
+ * @event disable
+ * @param {boolean} disabled Widget is disabled
*/
/**
- * Window is torn down
- *
- * Fired after the teardown process has been executed.
- *
- * @event teardown
- * @param {Object} data Window closing data
+ * @event toggle
+ * @param {boolean} visible Widget is visible
*/
-/* Static Properties */
+/* Methods */
/**
- * Symbolic name of icon.
+ * Check if the widget is disabled.
*
- * @static
- * @inheritable
- * @property {string}
+ * @param {boolean} Button is disabled
*/
-OO.ui.Window.static.icon = 'window';
+OO.ui.Widget.prototype.isDisabled = function () {
+ return this.disabled;
+};
/**
- * Window title.
+ * Check if widget is visible.
*
- * Subclasses must implement this property before instantiating the window.
- * Alternatively, override #getTitle with an alternative implementation.
+ * @return {boolean} Widget is visible
+ */
+OO.ui.Widget.prototype.isVisible = function () {
+ return this.visible;
+};
+
+/**
+ * Set the disabled state of the widget.
*
- * @static
- * @abstract
- * @inheritable
- * @property {string|Function} Title string or function that returns a string
+ * This should probably change the widgets' appearance and prevent it from being used.
+ *
+ * @param {boolean} disabled Disable widget
+ * @chainable
*/
-OO.ui.Window.static.title = null;
+OO.ui.Widget.prototype.setDisabled = function ( disabled ) {
+ var isDisabled;
-/* Methods */
+ this.disabled = !!disabled;
+ isDisabled = this.isDisabled();
+ if ( isDisabled !== this.wasDisabled ) {
+ this.$element.toggleClass( 'oo-ui-widget-disabled', isDisabled );
+ this.$element.toggleClass( 'oo-ui-widget-enabled', !isDisabled );
+ this.emit( 'disable', isDisabled );
+ }
+ this.wasDisabled = isDisabled;
+
+ return this;
+};
/**
- * Check if window is visible.
+ * Toggle visibility of widget.
*
- * @return {boolean} Window is visible
+ * @param {boolean} [show] Make widget visible, omit to toggle visibility
+ * @fires visible
+ * @chainable
*/
-OO.ui.Window.prototype.isVisible = function () {
- return this.visible;
+OO.ui.Widget.prototype.toggle = function ( show ) {
+ show = show === undefined ? !this.visible : !!show;
+
+ if ( show !== this.isVisible() ) {
+ this.visible = show;
+ this.$element.toggle( show );
+ this.emit( 'toggle', show );
+ }
+
+ return this;
};
/**
- * Check if window is opening.
+ * Update the disabled state, in case of changes in parent widget.
*
- * @return {boolean} Window is opening
+ * @chainable
*/
-OO.ui.Window.prototype.isOpening = function () {
- return !!this.opening && this.opening.state() === 'pending';
+OO.ui.Widget.prototype.updateDisabled = function () {
+ this.setDisabled( this.disabled );
+ return this;
};
/**
- * Check if window is closing.
+ * Container for elements in a child frame.
*
- * @return {boolean} Window is closing
+ * Use together with OO.ui.WindowManager.
+ *
+ * @abstract
+ * @class
+ * @extends OO.ui.Element
+ * @mixins OO.EventEmitter
+ *
+ * When a window is opened, the setup and ready processes are executed. Similarly, the hold and
+ * teardown processes are executed when the window is closed.
+ *
+ * - {@link OO.ui.WindowManager#openWindow} or {@link #open} methods are used to start opening
+ * - Window manager begins opening window
+ * - {@link #getSetupProcess} method is called and its result executed
+ * - {@link #getReadyProcess} method is called and its result executed
+ * - Window is now open
+ *
+ * - {@link OO.ui.WindowManager#closeWindow} or {@link #close} methods are used to start closing
+ * - Window manager begins closing window
+ * - {@link #getHoldProcess} method is called and its result executed
+ * - {@link #getTeardownProcess} method is called and its result executed
+ * - Window is now closed
+ *
+ * Each process (setup, ready, hold and teardown) can be extended in subclasses by overriding
+ * {@link #getSetupProcess}, {@link #getReadyProcess}, {@link #getHoldProcess} and
+ * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchonous
+ * processing can complete. Always assume window processes are executed asychronously. See
+ * OO.ui.Process for more details about how to work with processes. Some events, as well as the
+ * #open and #close methods, provide promises which are resolved when the window enters a new state.
+ *
+ * Sizing of windows is specified using symbolic names which are interpreted by the window manager.
+ * If the requested size is not recognized, the window manager will choose a sensible fallback.
+ *
+ * @constructor
+ * @param {OO.ui.WindowManager} manager Manager of window
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [size] Symbolic name of dialog size, `small`, `medium`, `large` or `full`; omit to
+ * use #static-size
+ * @fires initialize
*/
-OO.ui.Window.prototype.isClosing = function () {
- return !!this.closing && this.closing.state() === 'pending';
+OO.ui.Window = function OoUiWindow( manager, config ) {
+ var win = this;
+
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.Window.super.call( this, config );
+
+ // Mixin constructors
+ OO.EventEmitter.call( this );
+
+ if ( !( manager instanceof OO.ui.WindowManager ) ) {
+ throw new Error( 'Cannot construct window: window must have a manager' );
+ }
+
+ // Properties
+ this.manager = manager;
+ this.initialized = false;
+ this.visible = false;
+ this.opening = null;
+ this.closing = null;
+ this.opened = null;
+ this.timing = null;
+ this.size = config.size || this.constructor.static.size;
+ this.frame = new OO.ui.Frame( { $: this.$ } );
+ this.$frame = this.$( '<div>' );
+ this.$ = function () {
+ throw new Error( 'this.$() cannot be used until the frame has been initialized.' );
+ };
+
+ // Initialization
+ this.$element
+ .addClass( 'oo-ui-window' )
+ // Hide the window using visibility: hidden; while the iframe is still loading
+ // Can't use display: none; because that prevents the iframe from loading in Firefox
+ .css( 'visibility', 'hidden' )
+ .append( this.$frame );
+ this.$frame
+ .addClass( 'oo-ui-window-frame' )
+ .append( this.frame.$element );
+
+ // Events
+ this.frame.on( 'load', function () {
+ win.initialize();
+ win.initialized = true;
+ // Undo the visibility: hidden; hack and apply display: none;
+ // We can do this safely now that the iframe has initialized
+ // (don't do this from within #initialize because it has to happen
+ // after the all subclasses have been handled as well).
+ win.$element.hide().css( 'visibility', '' );
+ } );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.Window, OO.ui.Element );
+OO.mixinClass( OO.ui.Window, OO.EventEmitter );
+
+/* Events */
+
/**
- * Check if window is opened.
+ * @event resize
+ * @param {string} size Symbolic size name, e.g. 'small', 'medium', 'large', 'full'
+ */
+
+/* Static Properties */
+
+/**
+ * Symbolic name of size.
*
- * @return {boolean} Window is opened
+ * Size is used if no size is configured during construction.
+ *
+ * @static
+ * @inheritable
+ * @property {string}
*/
-OO.ui.Window.prototype.isOpened = function () {
- return !!this.opened && this.opened.state() === 'pending';
-};
+OO.ui.Window.static.size = 'medium';
+
+/* Methods */
/**
- * Get the window frame.
+ * Check if window has been initialized.
*
- * @return {OO.ui.Frame} Frame of window
+ * @return {boolean} Window has been initialized
*/
-OO.ui.Window.prototype.getFrame = function () {
- return this.frame;
+OO.ui.Window.prototype.isInitialized = function () {
+ return this.initialized;
};
/**
- * Get the title of the window.
+ * Check if window is visible.
*
- * @return {string} Title text
+ * @return {boolean} Window is visible
*/
-OO.ui.Window.prototype.getTitle = function () {
- return this.title;
+OO.ui.Window.prototype.isVisible = function () {
+ return this.visible;
};
/**
- * Get the window icon.
+ * Check if window is opening.
*
- * @return {string} Symbolic name of icon
+ * This is a wrapper around OO.ui.WindowManager#isOpening.
+ *
+ * @return {boolean} Window is opening
*/
-OO.ui.Window.prototype.getIcon = function () {
- return this.icon;
+OO.ui.Window.prototype.isOpening = function () {
+ return this.manager.isOpening( this );
};
/**
- * Set the size of window frame.
+ * Check if window is closing.
*
- * @param {number} [width=auto] Custom width
- * @param {number} [height=auto] Custom height
- * @chainable
+ * This is a wrapper around OO.ui.WindowManager#isClosing.
+ *
+ * @return {boolean} Window is closing
*/
-OO.ui.Window.prototype.setSize = function ( width, height ) {
- if ( !this.frame.$content ) {
- return;
- }
-
- this.frame.$element.css( {
- 'width': width === undefined ? 'auto' : width,
- 'height': height === undefined ? 'auto' : height
- } );
-
- return this;
+OO.ui.Window.prototype.isClosing = function () {
+ return this.manager.isClosing( this );
};
/**
- * Set the title of the window.
+ * Check if window is opened.
*
- * @param {string|Function} title Title text or a function that returns text
- * @chainable
+ * This is a wrapper around OO.ui.WindowManager#isOpened.
+ *
+ * @return {boolean} Window is opened
*/
-OO.ui.Window.prototype.setTitle = function ( title ) {
- this.title = OO.ui.resolveMsg( title );
- if ( this.$title ) {
- this.$title.text( title );
- }
- return this;
+OO.ui.Window.prototype.isOpened = function () {
+ return this.manager.isOpened( this );
};
/**
- * Set the icon of the window.
+ * Get the window manager.
*
- * @param {string} icon Symbolic name of icon
- * @chainable
+ * @return {OO.ui.WindowManager} Manager of window
*/
-OO.ui.Window.prototype.setIcon = function ( icon ) {
- if ( this.$icon ) {
- this.$icon.removeClass( 'oo-ui-icon-' + this.icon );
- }
- this.icon = icon;
- if ( this.$icon ) {
- this.$icon.addClass( 'oo-ui-icon-' + this.icon );
- }
-
- return this;
+OO.ui.Window.prototype.getManager = function () {
+ return this.manager;
};
/**
- * Set the position of window to fit with contents.
+ * Get the window frame.
*
- * @param {string} left Left offset
- * @param {string} top Top offset
- * @chainable
+ * @return {OO.ui.Frame} Frame of window
*/
-OO.ui.Window.prototype.setPosition = function ( left, top ) {
- this.$element.css( { 'left': left, 'top': top } );
- return this;
+OO.ui.Window.prototype.getFrame = function () {
+ return this.frame;
};
/**
- * Set the height of window to fit with contents.
+ * Get the window size.
*
- * @param {number} [min=0] Min height
- * @param {number} [max] Max height (defaults to content's outer height)
- * @chainable
+ * @return {string} Symbolic size name, e.g. 'small', 'medium', 'large', 'full'
*/
-OO.ui.Window.prototype.fitHeightToContents = function ( min, max ) {
- var height = this.frame.$content.outerHeight();
-
- this.frame.$element.css(
- 'height', Math.max( min || 0, max === undefined ? height : Math.min( max, height ) )
- );
-
- return this;
+OO.ui.Window.prototype.getSize = function () {
+ return this.size;
};
/**
- * Set the width of window to fit with contents.
+ * Get the height of the dialog contents.
*
- * @param {number} [min=0] Min height
- * @param {number} [max] Max height (defaults to content's outer width)
- * @chainable
+ * @return {number} Content height
*/
-OO.ui.Window.prototype.fitWidthToContents = function ( min, max ) {
- var width = this.frame.$content.outerWidth();
-
- this.frame.$element.css(
- 'width', Math.max( min || 0, max === undefined ? width : Math.min( max, width ) )
+OO.ui.Window.prototype.getContentHeight = function () {
+ return Math.round(
+ // Add buffer for border
+ ( ( this.$frame.outerHeight() - this.$frame.innerHeight() ) * 2 ) +
+ // Height of contents
+ ( this.$head.outerHeight( true ) + this.getBodyHeight() + this.$foot.outerHeight( true ) )
);
-
- return this;
};
/**
- * Initialize window contents.
+ * Get the height of the dialog contents.
*
- * The first time the window is opened, #initialize is called when it's safe to begin populating
- * its contents. See #setup for a way to make changes each time the window opens.
- *
- * Once this method is called, this.$$ can be used to create elements within the frame.
- *
- * @chainable
+ * @return {number} Height of content
*/
-OO.ui.Window.prototype.initialize = function () {
- // Properties
- this.$ = this.frame.$;
- this.$title = this.$( '<div class="oo-ui-window-title"></div>' )
- .text( this.title );
- this.$icon = this.$( '<div class="oo-ui-window-icon"></div>' )
- .addClass( 'oo-ui-icon-' + this.icon );
- this.$head = this.$( '<div class="oo-ui-window-head"></div>' );
- this.$body = this.$( '<div class="oo-ui-window-body"></div>' );
- this.$foot = this.$( '<div class="oo-ui-window-foot"></div>' );
- this.$overlay = this.$( '<div class="oo-ui-window-overlay"></div>' );
-
- // Initialization
- this.frame.$content.append(
- this.$head.append( this.$icon, this.$title ),
- this.$body,
- this.$foot,
- this.$overlay
- );
-
- return this;
+OO.ui.Window.prototype.getBodyHeight = function () {
+ return this.$body[0].scrollHeight;
};
/**
};
/**
- * Get a process for tearing down a window after use.
+ * Get a process for holding a window from use.
*
- * Each time the window is closed this process will tear it down and do something with the user's
- * interactions within the window, based on the `data` argument.
+ * Each time the window is closed, this process will hold it from use in a particular context, based
+ * on the `data` argument.
*
- * When you override this method, you can add additional teardown steps to the process the parent
+ * When you override this method, you can add additional setup steps to the process the parent
* method provides using the 'first' and 'next' methods.
*
* @abstract
* @param {Object} [data] Window closing data
- * @return {OO.ui.Process} Teardown process
+ * @return {OO.ui.Process} Hold process
*/
-OO.ui.Window.prototype.getTeardownProcess = function () {
+OO.ui.Window.prototype.getHoldProcess = function () {
return new OO.ui.Process();
};
/**
- * Open window.
+ * Get a process for tearing down a window after use.
*
- * Do not override this method. Use #getSetupProcess to do something each time the window closes.
+ * Each time the window is closed this process will tear it down and do something with the user's
+ * interactions within the window, based on the `data` argument.
*
- * @param {Object} [data] Window opening data
- * @fires initialize
- * @fires opening
- * @fires open
- * @fires ready
- * @return {jQuery.Promise} Promise resolved when window is opened; when the promise is resolved the
- * first argument will be a promise which will be resolved when the window begins closing
+ * When you override this method, you can add additional teardown steps to the process the parent
+ * method provides using the 'first' and 'next' methods.
+ *
+ * @abstract
+ * @param {Object} [data] Window closing data
+ * @return {OO.ui.Process} Teardown process
*/
-OO.ui.Window.prototype.open = function ( data ) {
- // Return existing promise if already opening or open
- if ( this.opening ) {
- return this.opening.promise();
- }
-
- // Open the window
- this.opening = $.Deferred();
-
- this.$ariaHidden = $( 'body' ).children().not( this.$element.parentsUntil( 'body' ).last() )
- .attr( 'aria-hidden', '' );
-
- this.frame.load().done( OO.ui.bind( function () {
- this.$element.show();
- this.visible = true;
- this.getSetupProcess( data ).execute().done( OO.ui.bind( function () {
- this.$element.addClass( 'oo-ui-window-setup' );
- this.emit( 'setup', data );
- setTimeout( OO.ui.bind( function () {
- this.frame.$content.focus();
- this.getReadyProcess( data ).execute().done( OO.ui.bind( function () {
- this.$element.addClass( 'oo-ui-window-ready' );
- this.emit( 'ready', data );
- this.opened = $.Deferred();
- // Now that we are totally done opening, it's safe to allow closing
- this.closing = null;
- this.opening.resolve( this.opened.promise() );
- }, this ) );
- }, this ) );
- }, this ) );
- }, this ) );
-
- return this.opening.promise();
+OO.ui.Window.prototype.getTeardownProcess = function () {
+ return new OO.ui.Process();
};
/**
- * Close window.
+ * Set the window size.
*
- * Do not override this method. Use #getTeardownProcess to do something each time the window closes.
- *
- * @param {Object} [data] Window closing data
- * @fires closing
- * @fires close
- * @return {jQuery.Promise} Promise resolved when window is closed
+ * @param {string} size Symbolic size name, e.g. 'small', 'medium', 'large', 'full'
+ * @chainable
*/
-OO.ui.Window.prototype.close = function ( data ) {
- var close;
-
- // Return existing promise if already closing or closed
- if ( this.closing ) {
- return this.closing.promise();
- }
-
- // Close after opening is done if opening is in progress
- if ( this.opening && this.opening.state() === 'pending' ) {
- close = OO.ui.bind( function () {
- return this.close( data );
- }, this );
- return this.opening.then( close, close );
- }
-
- // Close the window
- // This.closing needs to exist before we emit the closing event so that handlers can call
- // window.close() and trigger the safety check above
- this.closing = $.Deferred();
- this.frame.$content.find( ':focus' ).blur();
- this.$element.removeClass( 'oo-ui-window-ready' );
- this.getTeardownProcess( data ).execute().done( OO.ui.bind( function () {
- this.$element.removeClass( 'oo-ui-window-setup' );
- this.emit( 'teardown', data );
- // To do something different with #opened, resolve/reject #opened in the teardown process
- if ( this.opened && this.opened.state() === 'pending' ) {
- this.opened.resolve();
- }
- this.$element.hide();
- if ( this.$ariaHidden ) {
- this.$ariaHidden.removeAttr( 'aria-hidden' );
- this.$ariaHidden = undefined;
- }
- this.visible = false;
- this.closing.resolve();
- // Now that we are totally done closing, it's safe to allow opening
- this.opening = null;
- }, this ) );
-
- return this.closing.promise();
+OO.ui.Window.prototype.setSize = function ( size ) {
+ this.size = size;
+ this.manager.updateWindowSize( this );
+ return this;
};
/**
- * Set of mutually exclusive windows.
+ * Set window dimensions.
*
- * @class
- * @extends OO.ui.Element
- * @mixins OO.EventEmitter
+ * Properties are applied to the frame container.
*
- * @constructor
- * @param {OO.Factory} factory Window factory
- * @param {Object} [config] Configuration options
+ * @param {Object} dim CSS dimension properties
+ * @param {string|number} [dim.width] Width
+ * @param {string|number} [dim.minWidth] Minimum width
+ * @param {string|number} [dim.maxWidth] Maximum width
+ * @param {string|number} [dim.width] Height, omit to set based on height of contents
+ * @param {string|number} [dim.minWidth] Minimum height
+ * @param {string|number} [dim.maxWidth] Maximum height
+ * @chainable
*/
-OO.ui.WindowSet = function OoUiWindowSet( factory, config ) {
- // Parent constructor
- OO.ui.WindowSet.super.call( this, config );
-
- // Mixin constructors
- OO.EventEmitter.call( this );
-
- // Properties
- this.factory = factory;
-
- /**
- * List of all windows associated with this window set.
- *
- * @property {OO.ui.Window[]}
- */
- this.windowList = [];
-
- /**
- * Mapping of OO.ui.Window objects created by name from the #factory.
- *
- * @property {Object}
- */
- this.windows = {};
- this.currentWindow = null;
-
- // Initialization
- this.$element.addClass( 'oo-ui-windowSet' );
+OO.ui.Window.prototype.setDimensions = function ( dim ) {
+ // Apply width before height so height is not based on wrapping content using the wrong width
+ this.$frame.css( {
+ width: dim.width || '',
+ minWidth: dim.minWidth || '',
+ maxWidth: dim.maxWidth || ''
+ } );
+ this.$frame.css( {
+ height: ( dim.height !== undefined ? dim.height : this.getContentHeight() ) || '',
+ minHeight: dim.minHeight || '',
+ maxHeight: dim.maxHeight || ''
+ } );
+ return this;
};
-/* Setup */
-
-OO.inheritClass( OO.ui.WindowSet, OO.ui.Element );
-OO.mixinClass( OO.ui.WindowSet, OO.EventEmitter );
-
-/* Events */
-
-/**
- * @event setup
- * @param {OO.ui.Window} win Window that's been setup
- * @param {Object} config Window opening information
- */
-
/**
- * @event ready
- * @param {OO.ui.Window} win Window that's ready
- * @param {Object} config Window opening information
+ * Initialize window contents.
+ *
+ * The first time the window is opened, #initialize is called when it's safe to begin populating
+ * its contents. See #getSetupProcess for a way to make changes each time the window opens.
+ *
+ * Once this method is called, this.$ can be used to create elements within the frame.
+ *
+ * @chainable
*/
+OO.ui.Window.prototype.initialize = function () {
+ // Properties
+ this.$ = this.frame.$;
+ this.$head = this.$( '<div>' );
+ this.$body = this.$( '<div>' );
+ this.$foot = this.$( '<div>' );
+ this.$overlay = this.$( '<div>' );
-/**
- * @event teardown
- * @param {OO.ui.Window} win Window that's been torn down
- * @param {Object} config Window closing information
- */
+ // Initialization
+ this.$head.addClass( 'oo-ui-window-head' );
+ this.$body.addClass( 'oo-ui-window-body' );
+ this.$foot.addClass( 'oo-ui-window-foot' );
+ this.$overlay.addClass( 'oo-ui-window-overlay' );
+ this.frame.$content
+ .addClass( 'oo-ui-window-content' )
+ .append( this.$head, this.$body, this.$foot, this.$overlay );
-/* Methods */
+ return this;
+};
/**
- * Handle a window setup event.
+ * Open window.
+ *
+ * This is a wrapper around calling {@link OO.ui.WindowManager#openWindow} on the window manager.
+ * To do something each time the window opens, use #getSetupProcess or #getReadyProcess.
*
- * @param {OO.ui.Window} win Window that's been setup
- * @param {Object} [config] Window opening information
- * @fires setup
+ * @param {Object} [data] Window opening data
+ * @return {jQuery.Promise} Promise resolved when window is opened; when the promise is resolved the
+ * first argument will be a promise which will be resolved when the window begins closing
*/
-OO.ui.WindowSet.prototype.onWindowSetup = function ( win, config ) {
- if ( this.currentWindow && this.currentWindow !== win ) {
- this.currentWindow.close();
- }
- this.currentWindow = win;
- this.emit( 'setup', win, config );
+OO.ui.Window.prototype.open = function ( data ) {
+ return this.manager.openWindow( this, data );
};
/**
- * Handle a window ready event.
+ * Close window.
*
- * @param {OO.ui.Window} win Window that's ready
- * @param {Object} [config] Window opening information
- * @fires ready
+ * This is a wrapper around calling OO.ui.WindowManager#closeWindow on the window manager.
+ * To do something each time the window closes, use #getHoldProcess or #getTeardownProcess.
+ *
+ * @param {Object} [data] Window closing data
+ * @return {jQuery.Promise} Promise resolved when window is closed
*/
-OO.ui.WindowSet.prototype.onWindowReady = function ( win, config ) {
- this.emit( 'ready', win, config );
+OO.ui.Window.prototype.close = function ( data ) {
+ return this.manager.closeWindow( this, data );
};
/**
- * Handle a window teardown event.
+ * Load window.
*
- * @param {OO.ui.Window} win Window that's been torn down
- * @param {Object} [config] Window closing information
- * @fires teardown
+ * This is called by OO.ui.WindowManager durring window adding, and should not be called directly
+ * by other systems.
+ *
+ * @return {jQuery.Promise} Promise resolved when window is loaded
*/
-OO.ui.WindowSet.prototype.onWindowTeardown = function ( win, config ) {
- this.currentWindow = null;
- this.emit( 'teardown', win, config );
+OO.ui.Window.prototype.load = function () {
+ return this.frame.load();
};
/**
- * Get the current window.
+ * Setup window.
*
- * @return {OO.ui.Window|null} Current window or null if none open
+ * This is called by OO.ui.WindowManager durring window opening, and should not be called directly
+ * by other systems.
+ *
+ * @param {Object} [data] Window opening data
+ * @return {jQuery.Promise} Promise resolved when window is setup
*/
-OO.ui.WindowSet.prototype.getCurrentWindow = function () {
- return this.currentWindow;
+OO.ui.Window.prototype.setup = function ( data ) {
+ var win = this,
+ deferred = $.Deferred();
+
+ this.$element.show();
+ this.visible = true;
+ this.getSetupProcess( data ).execute().done( function () {
+ win.manager.updateWindowSize( win );
+ // Force redraw by asking the browser to measure the elements' widths
+ win.$element.addClass( 'oo-ui-window-setup' ).width();
+ win.frame.$content.addClass( 'oo-ui-window-content-setup' ).width();
+ deferred.resolve();
+ } );
+
+ return deferred.promise();
};
/**
- * Return a given window.
+ * Ready window.
+ *
+ * This is called by OO.ui.WindowManager durring window opening, and should not be called directly
+ * by other systems.
*
- * @param {string} name Symbolic name of window
- * @return {OO.ui.Window} Window with specified name
+ * @param {Object} [data] Window opening data
+ * @return {jQuery.Promise} Promise resolved when window is ready
*/
-OO.ui.WindowSet.prototype.getWindow = function ( name ) {
- var win;
+OO.ui.Window.prototype.ready = function ( data ) {
+ var win = this,
+ deferred = $.Deferred();
- if ( !this.factory.lookup( name ) ) {
- throw new Error( 'Unknown window: ' + name );
- }
- if ( !( name in this.windows ) ) {
- win = this.windows[name] = this.createWindow( name );
- this.addWindow( win );
- }
- return this.windows[name];
+ this.frame.$content[0].focus();
+ this.getReadyProcess( data ).execute().done( function () {
+ // Force redraw by asking the browser to measure the elements' widths
+ win.$element.addClass( 'oo-ui-window-ready' ).width();
+ win.frame.$content.addClass( 'oo-ui-window-content-ready' ).width();
+ deferred.resolve();
+ } );
+
+ return deferred.promise();
};
/**
- * Create a window for use in this window set.
+ * Hold window.
*
- * @param {string} name Symbolic name of window
- * @return {OO.ui.Window} Window with specified name
+ * This is called by OO.ui.WindowManager durring window closing, and should not be called directly
+ * by other systems.
+ *
+ * @param {Object} [data] Window closing data
+ * @return {jQuery.Promise} Promise resolved when window is held
*/
-OO.ui.WindowSet.prototype.createWindow = function ( name ) {
- return this.factory.create( name, { '$': this.$ } );
+OO.ui.Window.prototype.hold = function ( data ) {
+ var win = this,
+ deferred = $.Deferred();
+
+ this.getHoldProcess( data ).execute().done( function () {
+ var $focused = win.frame.$content.find( ':focus' );
+ if ( $focused.length ) {
+ $focused[0].blur();
+ }
+ // Force redraw by asking the browser to measure the elements' widths
+ win.$element.removeClass( 'oo-ui-window-ready' ).width();
+ win.frame.$content.removeClass( 'oo-ui-window-content-ready' ).width();
+ deferred.resolve();
+ } );
+
+ return deferred.promise();
};
/**
- * Add a given window to this window set.
+ * Teardown window.
*
- * Connects event handlers and attaches it to the DOM. Calling
- * OO.ui.Window#open will not work until the window is added to the set.
+ * This is called by OO.ui.WindowManager durring window closing, and should not be called directly
+ * by other systems.
*
- * @param {OO.ui.Window} win Window to add
+ * @param {Object} [data] Window closing data
+ * @return {jQuery.Promise} Promise resolved when window is torn down
*/
-OO.ui.WindowSet.prototype.addWindow = function ( win ) {
- if ( this.windowList.indexOf( win ) !== -1 ) {
- // Already set up
- return;
- }
- this.windowList.push( win );
+OO.ui.Window.prototype.teardown = function ( data ) {
+ var win = this,
+ deferred = $.Deferred();
- win.connect( this, {
- 'setup': [ 'onWindowSetup', win ],
- 'ready': [ 'onWindowReady', win ],
- 'teardown': [ 'onWindowTeardown', win ]
+ this.getTeardownProcess( data ).execute().done( function () {
+ // Force redraw by asking the browser to measure the elements' widths
+ win.$element.removeClass( 'oo-ui-window-setup' ).width();
+ win.frame.$content.removeClass( 'oo-ui-window-content-setup' ).width();
+ win.$element.hide();
+ win.visible = false;
+ deferred.resolve();
} );
- this.$element.append( win.$element );
+
+ return deferred.promise();
};
/**
- * Modal dialog window.
+ * Base class for all dialogs.
+ *
+ * Logic:
+ * - Manage the window (open and close, etc.).
+ * - Store the internal name and display title.
+ * - A stack to track one or more pending actions.
+ * - Manage a set of actions that can be performed.
+ * - Configure and create action widgets.
+ *
+ * User interface:
+ * - Close the dialog with Escape key.
+ * - Visually lock the dialog while an action is in
+ * progress (aka "pending").
+ *
+ * Subclass responsibilities:
+ * - Display the title somewhere.
+ * - Add content to the dialog.
+ * - Provide a UI to close the dialog.
+ * - Display the action widgets somewhere.
*
* @abstract
* @class
* @extends OO.ui.Window
+ * @mixins OO.ui.LabeledElement
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {boolean} [footless] Hide foot
- * @cfg {string} [size='large'] Symbolic name of dialog size, `small`, `medium` or `large`
*/
-OO.ui.Dialog = function OoUiDialog( config ) {
- // Configuration initialization
- config = $.extend( { 'size': 'large' }, config );
-
+OO.ui.Dialog = function OoUiDialog( manager, config ) {
// Parent constructor
- OO.ui.Dialog.super.call( this, config );
+ OO.ui.Dialog.super.call( this, manager, config );
// Properties
- this.visible = false;
- this.footless = !!config.footless;
- this.size = null;
+ this.actions = new OO.ui.ActionSet();
+ this.attachedActions = [];
+ this.currentAction = null;
this.pending = 0;
- this.onWindowMouseWheelHandler = OO.ui.bind( this.onWindowMouseWheel, this );
- this.onDocumentKeyDownHandler = OO.ui.bind( this.onDocumentKeyDown, this );
// Events
- this.$element.on( 'mousedown', false );
+ this.actions.connect( this, {
+ click: 'onActionClick',
+ resize: 'onActionResize',
+ change: 'onActionsChange'
+ } );
// Initialization
- this.$element.addClass( 'oo-ui-dialog' ).attr( 'role', 'dialog' );
- this.setSize( config.size );
+ this.$element
+ .addClass( 'oo-ui-dialog' )
+ .attr( 'role', 'dialog' );
};
/* Setup */
OO.ui.Dialog.static.name = '';
/**
- * Map of symbolic size names and CSS classes.
+ * Dialog title.
*
+ * @abstract
* @static
* @inheritable
- * @property {Object}
- */
-OO.ui.Dialog.static.sizeCssClasses = {
- 'small': 'oo-ui-dialog-small',
- 'medium': 'oo-ui-dialog-medium',
- 'large': 'oo-ui-dialog-large'
-};
-
-/* Methods */
-
-/**
- * Handle close button click events.
+ * @property {jQuery|string|Function} Label nodes, text or a function that returns nodes or text
*/
-OO.ui.Dialog.prototype.onCloseButtonClick = function () {
- this.close( { 'action': 'cancel' } );
-};
+OO.ui.Dialog.static.title = '';
/**
- * Handle window mouse wheel events.
+ * List of OO.ui.ActionWidget configuration options.
*
- * @param {jQuery.Event} e Mouse wheel event
+ * @static
+ * inheritable
+ * @property {Object[]}
*/
-OO.ui.Dialog.prototype.onWindowMouseWheel = function () {
- return false;
-};
+OO.ui.Dialog.static.actions = [];
/**
- * Handle document key down events.
+ * Close dialog when the escape key is pressed.
*
- * @param {jQuery.Event} e Key down event
+ * @static
+ * @abstract
+ * @inheritable
+ * @property {boolean}
*/
-OO.ui.Dialog.prototype.onDocumentKeyDown = function ( e ) {
- switch ( e.which ) {
- case OO.ui.Keys.PAGEUP:
- case OO.ui.Keys.PAGEDOWN:
- case OO.ui.Keys.END:
- case OO.ui.Keys.HOME:
- case OO.ui.Keys.LEFT:
- case OO.ui.Keys.UP:
- case OO.ui.Keys.RIGHT:
- case OO.ui.Keys.DOWN:
- // Prevent any key events that might cause scrolling
- return false;
- }
-};
+OO.ui.Dialog.static.escapable = true;
+
+/* Methods */
/**
* Handle frame document key down events.
*/
OO.ui.Dialog.prototype.onFrameDocumentKeyDown = function ( e ) {
if ( e.which === OO.ui.Keys.ESCAPE ) {
- this.close( { 'action': 'cancel' } );
+ this.close();
return false;
}
};
/**
- * Set dialog size.
+ * Handle action resized events.
*
- * @param {string} [size='large'] Symbolic name of dialog size, `small`, `medium` or `large`
+ * @param {OO.ui.ActionWidget} action Action that was resized
*/
-OO.ui.Dialog.prototype.setSize = function ( size ) {
- var name, state, cssClass,
- sizeCssClasses = OO.ui.Dialog.static.sizeCssClasses;
+OO.ui.Dialog.prototype.onActionResize = function () {
+ // Override in subclass
+};
- if ( !sizeCssClasses[size] ) {
- size = 'large';
- }
- this.size = size;
- for ( name in sizeCssClasses ) {
- state = name === size;
- cssClass = sizeCssClasses[name];
- this.$element.toggleClass( cssClass, state );
+/**
+ * Handle action click events.
+ *
+ * @param {OO.ui.ActionWidget} action Action that was clicked
+ */
+OO.ui.Dialog.prototype.onActionClick = function ( action ) {
+ if ( !this.isPending() ) {
+ this.currentAction = action;
+ this.executeAction( action.getAction() );
}
};
/**
- * @inheritdoc
+ * Handle actions change event.
*/
-OO.ui.Dialog.prototype.initialize = function () {
- // Parent method
- OO.ui.Dialog.super.prototype.initialize.call( this );
+OO.ui.Dialog.prototype.onActionsChange = function () {
+ this.detachActions();
+ if ( !this.isClosing() ) {
+ this.attachActions();
+ }
+};
- // Properties
- this.closeButton = new OO.ui.ButtonWidget( {
- '$': this.$,
- 'frameless': true,
- 'icon': 'close',
- 'title': OO.ui.msg( 'ooui-dialog-action-close' )
- } );
+/**
+ * Check if input is pending.
+ *
+ * @return {boolean}
+ */
+OO.ui.Dialog.prototype.isPending = function () {
+ return !!this.pending;
+};
- // Events
- this.closeButton.connect( this, { 'click': 'onCloseButtonClick' } );
- this.frame.$document.on( 'keydown', OO.ui.bind( this.onFrameDocumentKeyDown, this ) );
+/**
+ * Get set of actions.
+ *
+ * @return {OO.ui.ActionSet}
+ */
+OO.ui.Dialog.prototype.getActions = function () {
+ return this.actions;
+};
- // Initialization
- this.frame.$content.addClass( 'oo-ui-dialog-content' );
- if ( this.footless ) {
- this.frame.$content.addClass( 'oo-ui-dialog-content-footless' );
- }
- this.closeButton.$element.addClass( 'oo-ui-window-closeButton' );
- this.$head.append( this.closeButton.$element );
+/**
+ * Get a process for taking action.
+ *
+ * When you override this method, you can add additional accept steps to the process the parent
+ * method provides using the 'first' and 'next' methods.
+ *
+ * @abstract
+ * @param {string} [action] Symbolic name of action
+ * @return {OO.ui.Process} Action process
+ */
+OO.ui.Dialog.prototype.getActionProcess = function ( action ) {
+ return new OO.ui.Process()
+ .next( function () {
+ if ( !action ) {
+ // An empty action always closes the dialog without data, which should always be
+ // safe and make no changes
+ this.close();
+ }
+ }, this );
};
/**
* @inheritdoc
+ *
+ * @param {Object} [data] Dialog opening data
+ * @param {jQuery|string|Function|null} [data.label] Dialog label, omit to use #static-label
+ * @param {Object[]} [data.actions] List of OO.ui.ActionWidget configuration options for each
+ * action item, omit to use #static-actions
*/
OO.ui.Dialog.prototype.getSetupProcess = function ( data ) {
+ data = data || {};
+
+ // Parent method
return OO.ui.Dialog.super.prototype.getSetupProcess.call( this, data )
.next( function () {
- // Prevent scrolling in top-level window
- this.$( window ).on( 'mousewheel', this.onWindowMouseWheelHandler );
- this.$( document ).on( 'keydown', this.onDocumentKeyDownHandler );
+ var i, len,
+ items = [],
+ config = this.constructor.static,
+ actions = data.actions !== undefined ? data.actions : config.actions;
+
+ this.title.setLabel(
+ data.title !== undefined ? data.title : this.constructor.static.title
+ );
+ for ( i = 0, len = actions.length; i < len; i++ ) {
+ items.push(
+ new OO.ui.ActionWidget( $.extend( { $: this.$ }, actions[i] ) )
+ );
+ }
+ this.actions.add( items );
}, this );
};
* @inheritdoc
*/
OO.ui.Dialog.prototype.getTeardownProcess = function ( data ) {
+ // Parent method
return OO.ui.Dialog.super.prototype.getTeardownProcess.call( this, data )
.first( function () {
- // Wait for closing transition
- return OO.ui.Process.static.delay( 250 );
- }, this )
- .next( function () {
- // Allow scrolling in top-level window
- this.$( window ).off( 'mousewheel', this.onWindowMouseWheelHandler );
- this.$( document ).off( 'keydown', this.onDocumentKeyDownHandler );
+ this.actions.clear();
+ this.currentAction = null;
}, this );
};
/**
- * Check if input is pending.
- *
- * @return {boolean}
+ * @inheritdoc
*/
-OO.ui.Dialog.prototype.isPending = function () {
- return !!this.pending;
+OO.ui.Dialog.prototype.initialize = function () {
+ // Parent method
+ OO.ui.Dialog.super.prototype.initialize.call( this );
+
+ // Properties
+ this.title = new OO.ui.LabelWidget( { $: this.$ } );
+
+ // Events
+ if ( this.constructor.static.escapable ) {
+ this.frame.$document.on( 'keydown', OO.ui.bind( this.onFrameDocumentKeyDown, this ) );
+ }
+
+ // Initialization
+ this.frame.$content.addClass( 'oo-ui-dialog-content' );
};
/**
- * Increase the pending stack.
+ * Attach action actions.
+ */
+OO.ui.Dialog.prototype.attachActions = function () {
+ // Remember the list of potentially attached actions
+ this.attachedActions = this.actions.get();
+};
+
+/**
+ * Detach action actions.
+ *
+ * @chainable
+ */
+OO.ui.Dialog.prototype.detachActions = function () {
+ var i, len;
+
+ // Detach all actions that may have been previously attached
+ for ( i = 0, len = this.attachedActions.length; i < len; i++ ) {
+ this.attachedActions[i].$element.detach();
+ }
+ this.attachedActions = [];
+};
+
+/**
+ * Execute an action.
+ *
+ * @param {string} action Symbolic name of action to execute
+ * @return {jQuery.Promise} Promise resolved when action completes, rejected if it fails
+ */
+OO.ui.Dialog.prototype.executeAction = function ( action ) {
+ this.pushPending();
+ return this.getActionProcess( action ).execute()
+ .always( OO.ui.bind( this.popPending, this ) );
+};
+
+/**
+ * Increase the pending stack.
*
* @chainable
*/
OO.ui.Dialog.prototype.pushPending = function () {
if ( this.pending === 0 ) {
- this.frame.$content.addClass( 'oo-ui-dialog-pending' );
+ this.frame.$content.addClass( 'oo-ui-actionDialog-content-pending' );
this.$head.addClass( 'oo-ui-texture-pending' );
- this.$foot.addClass( 'oo-ui-texture-pending' );
}
this.pending++;
*/
OO.ui.Dialog.prototype.popPending = function () {
if ( this.pending === 1 ) {
- this.frame.$content.removeClass( 'oo-ui-dialog-pending' );
+ this.frame.$content.removeClass( 'oo-ui-actionDialog-content-pending' );
this.$head.removeClass( 'oo-ui-texture-pending' );
- this.$foot.removeClass( 'oo-ui-texture-pending' );
}
this.pending = Math.max( 0, this.pending - 1 );
};
/**
- * Container for elements.
+ * Collection of windows.
*
- * @abstract
* @class
* @extends OO.ui.Element
* @mixins OO.EventEmitter
*
+ * Managed windows are mutually exclusive. If a window is opened while there is a current window
+ * already opening or opened, the current window will be closed without data. Empty closing data
+ * should always result in the window being closed without causing constructive or destructive
+ * action.
+ *
+ * As a window is opened and closed, it passes through several stages and the manager emits several
+ * corresponding events.
+ *
+ * - {@link #openWindow} or {@link OO.ui.Window#open} methods are used to start opening
+ * - {@link #event-opening} is emitted with `opening` promise
+ * - {@link #getSetupDelay} is called the returned value is used to time a pause in execution
+ * - {@link OO.ui.Window#getSetupProcess} method is called on the window and its result executed
+ * - `setup` progress notification is emitted from opening promise
+ * - {@link #getReadyDelay} is called the returned value is used to time a pause in execution
+ * - {@link OO.ui.Window#getReadyProcess} method is called on the window and its result executed
+ * - `ready` progress notification is emitted from opening promise
+ * - `opening` promise is resolved with `opened` promise
+ * - Window is now open
+ *
+ * - {@link #closeWindow} or {@link OO.ui.Window#close} methods are used to start closing
+ * - `opened` promise is resolved with `closing` promise
+ * - {@link #event-closing} is emitted with `closing` promise
+ * - {@link #getHoldDelay} is called the returned value is used to time a pause in execution
+ * - {@link OO.ui.Window#getHoldProcess} method is called on the window and its result executed
+ * - `hold` progress notification is emitted from opening promise
+ * - {@link #getTeardownDelay} is called the returned value is used to time a pause in execution
+ * - {@link OO.ui.Window#getTeardownProcess} method is called on the window and its result executed
+ * - `teardown` progress notification is emitted from opening promise
+ * - Closing promise is resolved
+ * - Window is now closed
+ *
* @constructor
* @param {Object} [config] Configuration options
+ * @cfg {OO.Factory} [factory] Window factory to use for automatic instantiation
+ * @cfg {boolean} [modal=true] Prevent interaction outside the dialog
*/
-OO.ui.Layout = function OoUiLayout( config ) {
- // Initialize config
+OO.ui.WindowManager = function OoUiWindowManager( config ) {
+ // Configuration initialization
config = config || {};
// Parent constructor
- OO.ui.Layout.super.call( this, config );
+ OO.ui.WindowManager.super.call( this, config );
// Mixin constructors
OO.EventEmitter.call( this );
+ // Properties
+ this.factory = config.factory;
+ this.modal = config.modal === undefined || !!config.modal;
+ this.windows = {};
+ this.opening = null;
+ this.opened = null;
+ this.closing = null;
+ this.size = null;
+ this.currentWindow = null;
+ this.$ariaHidden = null;
+ this.requestedSize = null;
+ this.onWindowResizeTimeout = null;
+ this.onWindowResizeHandler = OO.ui.bind( this.onWindowResize, this );
+ this.afterWindowResizeHandler = OO.ui.bind( this.afterWindowResize, this );
+ this.onWindowMouseWheelHandler = OO.ui.bind( this.onWindowMouseWheel, this );
+ this.onDocumentKeyDownHandler = OO.ui.bind( this.onDocumentKeyDown, this );
+
+ // Events
+ this.$element.on( 'mousedown', false );
+
// Initialization
- this.$element.addClass( 'oo-ui-layout' );
+ this.$element
+ .addClass( 'oo-ui-windowManager' )
+ .toggleClass( 'oo-ui-windowManager-modal', this.modal );
};
/* Setup */
-OO.inheritClass( OO.ui.Layout, OO.ui.Element );
-OO.mixinClass( OO.ui.Layout, OO.EventEmitter );
+OO.inheritClass( OO.ui.WindowManager, OO.ui.Element );
+OO.mixinClass( OO.ui.WindowManager, OO.EventEmitter );
+
+/* Events */
/**
- * User interface control.
+ * Window is opening.
*
- * @abstract
- * @class
- * @extends OO.ui.Element
- * @mixins OO.EventEmitter
+ * Fired when the window begins to be opened.
*
- * @constructor
- * @param {Object} [config] Configuration options
- * @cfg {boolean} [disabled=false] Disable
+ * @event opening
+ * @param {OO.ui.Window} win Window that's being opened
+ * @param {jQuery.Promise} opening Promise resolved when window is opened; when the promise is
+ * resolved the first argument will be a promise which will be resolved when the window begins
+ * closing, the second argument will be the opening data; progress notifications will be fired on
+ * the promise for `setup` and `ready` when those processes are completed respectively.
+ * @param {Object} data Window opening data
*/
-OO.ui.Widget = function OoUiWidget( config ) {
- // Initialize config
- config = $.extend( { 'disabled': false }, config );
-
- // Parent constructor
- OO.ui.Widget.super.call( this, config );
- // Mixin constructors
- OO.EventEmitter.call( this );
+/**
+ * Window is closing.
+ *
+ * Fired when the window begins to be closed.
+ *
+ * @event closing
+ * @param {OO.ui.Window} win Window that's being closed
+ * @param {jQuery.Promise} opening Promise resolved when window is closed; when the promise
+ * is resolved the first argument will be a the closing data; progress notifications will be fired
+ * on the promise for `hold` and `teardown` when those processes are completed respectively.
+ * @param {Object} data Window closing data
+ */
- // Properties
- this.disabled = null;
- this.wasDisabled = null;
+/* Static Properties */
- // Initialization
- this.$element.addClass( 'oo-ui-widget' );
- this.setDisabled( !!config.disabled );
+/**
+ * Map of symbolic size names and CSS properties.
+ *
+ * @static
+ * @inheritable
+ * @property {Object}
+ */
+OO.ui.WindowManager.static.sizes = {
+ small: {
+ width: 300
+ },
+ medium: {
+ width: 500
+ },
+ large: {
+ width: 700
+ },
+ full: {
+ // These can be non-numeric because they are never used in calculations
+ width: '100%',
+ height: '100%'
+ }
};
-/* Setup */
-
-OO.inheritClass( OO.ui.Widget, OO.ui.Element );
-OO.mixinClass( OO.ui.Widget, OO.EventEmitter );
-
-/* Events */
-
/**
- * @event disable
- * @param {boolean} disabled Widget is disabled
+ * Symbolic name of default size.
+ *
+ * Default size is used if the window's requested size is not recognized.
+ *
+ * @static
+ * @inheritable
+ * @property {string}
*/
+OO.ui.WindowManager.static.defaultSize = 'medium';
/* Methods */
/**
- * Check if the widget is disabled.
+ * Handle window resize events.
*
- * @param {boolean} Button is disabled
+ * @param {jQuery.Event} e Window resize event
*/
-OO.ui.Widget.prototype.isDisabled = function () {
- return this.disabled;
+OO.ui.WindowManager.prototype.onWindowResize = function () {
+ clearTimeout( this.onWindowResizeTimeout );
+ this.onWindowResizeTimeout = setTimeout( this.afterWindowResizeHandler, 200 );
};
/**
- * Update the disabled state, in case of changes in parent widget.
+ * Handle window resize events.
*
- * @chainable
+ * @param {jQuery.Event} e Window resize event
*/
-OO.ui.Widget.prototype.updateDisabled = function () {
- this.setDisabled( this.disabled );
- return this;
+OO.ui.WindowManager.prototype.afterWindowResize = function () {
+ if ( this.currentWindow ) {
+ this.updateWindowSize( this.currentWindow );
+ }
};
/**
- * Set the disabled state of the widget.
- *
- * This should probably change the widgets' appearance and prevent it from being used.
+ * Handle window mouse wheel events.
*
- * @param {boolean} disabled Disable widget
- * @chainable
+ * @param {jQuery.Event} e Mouse wheel event
*/
-OO.ui.Widget.prototype.setDisabled = function ( disabled ) {
- var isDisabled;
+OO.ui.WindowManager.prototype.onWindowMouseWheel = function () {
+ return false;
+};
- this.disabled = !!disabled;
- isDisabled = this.isDisabled();
- if ( isDisabled !== this.wasDisabled ) {
- this.$element.toggleClass( 'oo-ui-widget-disabled', isDisabled );
- this.$element.toggleClass( 'oo-ui-widget-enabled', !isDisabled );
- this.emit( 'disable', isDisabled );
+/**
+ * Handle document key down events.
+ *
+ * @param {jQuery.Event} e Key down event
+ */
+OO.ui.WindowManager.prototype.onDocumentKeyDown = function ( e ) {
+ switch ( e.which ) {
+ case OO.ui.Keys.PAGEUP:
+ case OO.ui.Keys.PAGEDOWN:
+ case OO.ui.Keys.END:
+ case OO.ui.Keys.HOME:
+ case OO.ui.Keys.LEFT:
+ case OO.ui.Keys.UP:
+ case OO.ui.Keys.RIGHT:
+ case OO.ui.Keys.DOWN:
+ // Prevent any key events that might cause scrolling
+ return false;
}
- this.wasDisabled = isDisabled;
- return this;
};
/**
- * A list of functions, called in sequence.
- *
- * If a function added to a process returns boolean false the process will stop; if it returns an
- * object with a `promise` method the process will use the promise to either continue to the next
- * step when the promise is resolved or stop when the promise is rejected.
- *
- * @class
+ * Check if window is opening.
*
- * @constructor
+ * @return {boolean} Window is opening
*/
-OO.ui.Process = function () {
- // Properties
- this.steps = [];
+OO.ui.WindowManager.prototype.isOpening = function ( win ) {
+ return win === this.currentWindow && !!this.opening && this.opening.state() === 'pending';
};
-/* Setup */
-
-OO.initClass( OO.ui.Process );
-
-/* Static Methods */
-
/**
- * Generate a promise which is resolved after a set amount of time.
+ * Check if window is closing.
*
- * @param {number} length Number of milliseconds before resolving the promise
- * @return {jQuery.Promise} Promise that will be resolved after a set amount of time
+ * @return {boolean} Window is closing
*/
-OO.ui.Process.static.delay = function ( length ) {
- var deferred = $.Deferred();
-
- setTimeout( function () {
- deferred.resolve();
- }, length );
-
- return deferred.promise();
+OO.ui.WindowManager.prototype.isClosing = function ( win ) {
+ return win === this.currentWindow && !!this.closing && this.closing.state() === 'pending';
};
-/* Methods */
-
/**
- * Start the process.
+ * Check if window is opened.
*
- * @return {jQuery.Promise} Promise that is resolved when all steps have completed or rejected when
- * any of the steps return boolean false or a promise which gets rejected; upon stopping the
- * process, the remaining steps will not be taken
+ * @return {boolean} Window is opened
*/
-OO.ui.Process.prototype.execute = function () {
- var i, len, promise;
-
- /**
- * Continue execution.
- *
- * @ignore
- * @param {Array} step A function and the context it should be called in
- * @return {Function} Function that continues the process
- */
- function proceed( step ) {
- return function () {
- // Execute step in the correct context
- var result = step[0].call( step[1] );
+OO.ui.WindowManager.prototype.isOpened = function ( win ) {
+ return win === this.currentWindow && !!this.opened && this.opened.state() === 'pending';
+};
- if ( result === false ) {
- // Use rejected promise for boolean false results
- return $.Deferred().reject().promise();
- }
- // Duck-type the object to see if it can produce a promise
- if ( result && $.isFunction( result.promise ) ) {
- // Use a promise generated from the result
- return result.promise();
- }
- // Use resolved promise for other results
- return $.Deferred().resolve().promise();
- };
- }
+/**
+ * Check if a window is being managed.
+ *
+ * @param {OO.ui.Window} win Window to check
+ * @return {boolean} Window is being managed
+ */
+OO.ui.WindowManager.prototype.hasWindow = function ( win ) {
+ var name;
- if ( this.steps.length ) {
- // Generate a chain reaction of promises
- promise = proceed( this.steps[0] )();
- for ( i = 1, len = this.steps.length; i < len; i++ ) {
- promise = promise.then( proceed( this.steps[i] ) );
+ for ( name in this.windows ) {
+ if ( this.windows[name] === win ) {
+ return true;
}
- } else {
- promise = $.Deferred().resolve().promise();
}
- return promise;
+ return false;
};
/**
- * Add step to the beginning of the process.
+ * Get the number of milliseconds to wait between beginning opening and executing setup process.
*
- * @param {Function} step Function to execute; if it returns boolean false the process will stop; if
- * it returns an object with a `promise` method the process will use the promise to either
- * continue to the next step when the promise is resolved or stop when the promise is rejected
- * @param {Object} [context=null] Context to call the step function in
- * @chainable
+ * @param {OO.ui.Window} win Window being opened
+ * @param {Object} [data] Window opening data
+ * @return {number} Milliseconds to wait
*/
-OO.ui.Process.prototype.first = function ( step, context ) {
- this.steps.unshift( [ step, context || null ] );
- return this;
+OO.ui.WindowManager.prototype.getSetupDelay = function () {
+ return 0;
};
/**
- * Add step to the end of the process.
+ * Get the number of milliseconds to wait between finishing setup and executing ready process.
*
- * @param {Function} step Function to execute; if it returns boolean false the process will stop; if
- * it returns an object with a `promise` method the process will use the promise to either
- * continue to the next step when the promise is resolved or stop when the promise is rejected
- * @param {Object} [context=null] Context to call the step function in
- * @chainable
+ * @param {OO.ui.Window} win Window being opened
+ * @param {Object} [data] Window opening data
+ * @return {number} Milliseconds to wait
*/
-OO.ui.Process.prototype.next = function ( step, context ) {
- this.steps.push( [ step, context || null ] );
- return this;
+OO.ui.WindowManager.prototype.getReadyDelay = function () {
+ return 0;
};
/**
- * Dialog for showing a confirmation/warning message.
+ * Get the number of milliseconds to wait between beginning closing and executing hold process.
*
- * @class
- * @extends OO.ui.Dialog
- *
- * @constructor
- * @param {Object} [config] Configuration options
+ * @param {OO.ui.Window} win Window being closed
+ * @param {Object} [data] Window closing data
+ * @return {number} Milliseconds to wait
*/
-OO.ui.ConfirmationDialog = function OoUiConfirmationDialog( config ) {
- // Configuration initialization
- config = $.extend( { 'size': 'small' }, config );
-
- // Parent constructor
- OO.ui.Dialog.call( this, config );
+OO.ui.WindowManager.prototype.getHoldDelay = function () {
+ return 0;
};
-/* Inheritance */
-
-OO.inheritClass( OO.ui.ConfirmationDialog, OO.ui.Dialog );
-
-/* Static Properties */
-
-OO.ui.ConfirmationDialog.static.name = 'confirm';
-
-OO.ui.ConfirmationDialog.static.icon = 'help';
-
-OO.ui.ConfirmationDialog.static.title = OO.ui.deferMsg( 'ooui-dialog-confirm-title' );
-
-/* Methods */
-
/**
- * @inheritdoc
+ * Get the number of milliseconds to wait between finishing hold and executing teardown process.
+ *
+ * @param {OO.ui.Window} win Window being closed
+ * @param {Object} [data] Window closing data
+ * @return {number} Milliseconds to wait
*/
-OO.ui.ConfirmationDialog.prototype.initialize = function () {
- // Parent method
- OO.ui.Dialog.prototype.initialize.call( this );
-
- // Set up the layout
- var contentLayout = new OO.ui.PanelLayout( {
- '$': this.$,
- 'padded': true
- } );
-
- this.$promptContainer = this.$( '<div>' ).addClass( 'oo-ui-dialog-confirm-promptContainer' );
-
- this.cancelButton = new OO.ui.ButtonWidget();
- this.cancelButton.connect( this, { 'click': [ 'close', 'cancel' ] } );
-
- this.okButton = new OO.ui.ButtonWidget();
- this.okButton.connect( this, { 'click': [ 'close', 'ok' ] } );
-
- // Make the buttons
- contentLayout.$element.append( this.$promptContainer );
- this.$body.append( contentLayout.$element );
-
- this.$foot.append(
- this.okButton.$element,
- this.cancelButton.$element
- );
+OO.ui.WindowManager.prototype.getTeardownDelay = function () {
+ return this.modal ? 250 : 0;
};
-/*
- * Setup a confirmation dialog.
+/**
+ * Get managed window by symbolic name.
*
- * @param {Object} [data] Window opening data including text of the dialog and text for the buttons
- * @param {jQuery|string} [data.prompt] Text to display or list of nodes to use as content of the dialog.
- * @param {jQuery|string|Function|null} [data.okLabel] Label of the OK button
- * @param {jQuery|string|Function|null} [data.cancelLabel] Label of the cancel button
- * @param {string|string[]} [data.okFlags="constructive"] Flags for the OK button
- * @param {string|string[]} [data.cancelFlags="destructive"] Flags for the cancel button
- * @return {OO.ui.Process} Setup process
+ * If window is not yet instantiated, it will be instantiated and added automatically.
+ *
+ * @param {string} name Symbolic window name
+ * @return {jQuery.Promise} Promise resolved when window is ready to be accessed; when resolved the
+ * first argument is an OO.ui.Window; when rejected the first argument is an OO.ui.Error
+ * @throws {Error} If the symbolic name is unrecognized by the factory
+ * @throws {Error} If the symbolic name unrecognized as a managed window
*/
-OO.ui.ConfirmationDialog.prototype.getSetupProcess = function ( data ) {
- // Parent method
- return OO.ui.ConfirmationDialog.super.prototype.getSetupProcess.call( this, data )
- .next( function () {
- var prompt = data.prompt || OO.ui.deferMsg( 'ooui-dialog-confirm-default-prompt' ),
- okLabel = data.okLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-ok' ),
- cancelLabel = data.cancelLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-cancel' ),
- okFlags = data.okFlags || 'constructive',
- cancelFlags = data.cancelFlags || 'destructive';
-
- if ( typeof prompt === 'string' ) {
- this.$promptContainer.text( prompt );
+OO.ui.WindowManager.prototype.getWindow = function ( name ) {
+ var deferred = $.Deferred(),
+ win = this.windows[name];
+
+ if ( !( win instanceof OO.ui.Window ) ) {
+ if ( this.factory ) {
+ if ( !this.factory.lookup( name ) ) {
+ deferred.reject( new OO.ui.Error(
+ 'Cannot auto-instantiate window: symbolic name is unrecognized by the factory'
+ ) );
} else {
- this.$promptContainer.empty().append( prompt );
+ win = this.factory.create( name, this, { $: this.$ } );
+ this.addWindows( [ win ] ).then(
+ OO.ui.bind( deferred.resolve, deferred, win ),
+ deferred.reject
+ );
}
+ } else {
+ deferred.reject( new OO.ui.Error(
+ 'Cannot get unmanaged window: symbolic name unrecognized as a managed window'
+ ) );
+ }
+ } else {
+ deferred.resolve( win );
+ }
- this.okButton.setLabel( okLabel ).clearFlags().setFlags( okFlags );
- this.cancelButton.setLabel( cancelLabel ).clearFlags().setFlags( cancelFlags );
- }, this );
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.ConfirmationDialog.prototype.getTeardownProcess = function ( data ) {
- // Parent method
- return OO.ui.ConfirmationDialog.super.prototype.getTeardownProcess.call( this, data )
- .first( function () {
- if ( data === 'ok' ) {
- this.opened.resolve();
- } else { // data === 'cancel', or no data
- this.opened.reject();
- }
- }, this );
+ return deferred.promise();
};
/**
- * Element with a button.
- *
- * @abstract
- * @class
+ * Get current window.
*
- * @constructor
- * @param {jQuery} $button Button node, assigned to #$button
- * @param {Object} [config] Configuration options
- * @cfg {boolean} [frameless] Render button without a frame
- * @cfg {number} [tabIndex=0] Button's tab index, use -1 to prevent tab focusing
+ * @return {OO.ui.Window|null} Currently opening/opened/closing window
*/
-OO.ui.ButtonedElement = function OoUiButtonedElement( $button, config ) {
- // Configuration initialization
- config = config || {};
-
- // Properties
- this.$button = $button;
- this.tabIndex = null;
- this.active = false;
- this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
-
- // Events
- this.$button.on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
-
- // Initialization
- this.$element
- .addClass( 'oo-ui-buttonedElement' )
- .prop( 'tabIndex', config.tabIndex || 0 );
- this.$button
- .addClass( 'oo-ui-buttonedElement-button' )
- .attr( 'role', 'button' );
- if ( config.frameless ) {
- this.$element.addClass( 'oo-ui-buttonedElement-frameless' );
- } else {
- this.$element.addClass( 'oo-ui-buttonedElement-framed' );
- }
+OO.ui.WindowManager.prototype.getCurrentWindow = function () {
+ return this.currentWindow;
};
-/* Setup */
-
-OO.initClass( OO.ui.ButtonedElement );
-
-/* Static Properties */
-
/**
- * Cancel mouse down events.
+ * Open a window.
*
- * @static
- * @inheritable
- * @property {boolean}
+ * @param {OO.ui.Window|string} win Window object or symbolic name of window to open
+ * @param {Object} [data] Window opening data
+ * @return {jQuery.Promise} Promise resolved when window is done opening; see {@link #event-opening}
+ * for more details about the `opening` promise
+ * @fires opening
*/
-OO.ui.ButtonedElement.static.cancelButtonMouseDownEvents = true;
-
-/* Methods */
+OO.ui.WindowManager.prototype.openWindow = function ( win, data ) {
+ var manager = this,
+ preparing = [],
+ opening = $.Deferred();
+
+ // Argument handling
+ if ( typeof win === 'string' ) {
+ return this.getWindow( win ).then( function ( win ) {
+ return manager.openWindow( win, data );
+ } );
+ }
+
+ // Error handling
+ if ( !this.hasWindow( win ) ) {
+ opening.reject( new OO.ui.Error(
+ 'Cannot open window: window is not attached to manager'
+ ) );
+ }
+
+ // Window opening
+ if ( opening.state() !== 'rejected' ) {
+ // Begin loading the window if it's not loaded already - may take noticable time and we want
+ // too do this in paralell with any preparatory actions
+ preparing.push( win.load() );
+
+ if ( this.opening || this.opened ) {
+ // If a window is currently opening or opened, close it first
+ preparing.push( this.closeWindow( this.currentWindow ) );
+ } else if ( this.closing ) {
+ // If a window is currently closing, wait for it to complete
+ preparing.push( this.closing );
+ }
-/**
- * Handles mouse down events.
- *
- * @param {jQuery.Event} e Mouse down event
- */
-OO.ui.ButtonedElement.prototype.onMouseDown = function ( e ) {
- if ( this.isDisabled() || e.which !== 1 ) {
- return false;
- }
- // tabIndex should generally be interacted with via the property, but it's not possible to
- // reliably unset a tabIndex via a property so we use the (lowercase) "tabindex" attribute
- this.tabIndex = this.$button.attr( 'tabindex' );
- this.$button
- // Remove the tab-index while the button is down to prevent the button from stealing focus
- .removeAttr( 'tabindex' )
- .addClass( 'oo-ui-buttonedElement-pressed' );
- // Run the mouseup handler no matter where the mouse is when the button is let go, so we can
- // reliably reapply the tabindex and remove the pressed class
- this.getElementDocument().addEventListener( 'mouseup', this.onMouseUpHandler, true );
- // Prevent change of focus unless specifically configured otherwise
- if ( this.constructor.static.cancelButtonMouseDownEvents ) {
- return false;
+ $.when.apply( $, preparing ).done( function () {
+ if ( manager.modal ) {
+ manager.$( manager.getElementDocument() ).on( {
+ // Prevent scrolling by keys in top-level window
+ keydown: manager.onDocumentKeyDownHandler
+ } );
+ manager.$( manager.getElementWindow() ).on( {
+ // Prevent scrolling by wheel in top-level window
+ mousewheel: manager.onWindowMouseWheelHandler,
+ // Start listening for top-level window dimension changes
+ 'orientationchange resize': manager.onWindowResizeHandler
+ } );
+ // Hide other content from screen readers
+ manager.$ariaHidden = $( 'body' )
+ .children()
+ .not( manager.$element.parentsUntil( 'body' ).last() )
+ .attr( 'aria-hidden', '' );
+ }
+ manager.currentWindow = win;
+ manager.opening = opening;
+ manager.emit( 'opening', win, opening, data );
+ manager.updateWindowSize( win );
+ setTimeout( function () {
+ win.setup( data ).then( function () {
+ manager.opening.notify( { state: 'setup' } );
+ setTimeout( function () {
+ win.ready( data ).then( function () {
+ manager.opening.notify( { state: 'ready' } );
+ manager.opening = null;
+ manager.opened = $.Deferred();
+ opening.resolve( manager.opened.promise(), data );
+ } );
+ }, manager.getReadyDelay() );
+ } );
+ }, manager.getSetupDelay() );
+ } );
}
+
+ return opening;
};
/**
- * Handles mouse up events.
+ * Close a window.
*
- * @param {jQuery.Event} e Mouse up event
+ * @param {OO.ui.Window|string} win Window object or symbolic name of window to close
+ * @param {Object} [data] Window closing data
+ * @return {jQuery.Promise} Promise resolved when window is done opening; see {@link #event-closing}
+ * for more details about the `closing` promise
+ * @throws {Error} If no window by that name is being managed
+ * @fires closing
*/
-OO.ui.ButtonedElement.prototype.onMouseUp = function ( e ) {
- if ( this.isDisabled() || e.which !== 1 ) {
- return false;
+OO.ui.WindowManager.prototype.closeWindow = function ( win, data ) {
+ var manager = this,
+ preparing = [],
+ closing = $.Deferred(),
+ opened = this.opened;
+
+ // Argument handling
+ if ( typeof win === 'string' ) {
+ win = this.windows[win];
+ } else if ( !this.hasWindow( win ) ) {
+ win = null;
+ }
+
+ // Error handling
+ if ( !win ) {
+ closing.reject( new OO.ui.Error(
+ 'Cannot close window: window is not attached to manager'
+ ) );
+ } else if ( win !== this.currentWindow ) {
+ closing.reject( new OO.ui.Error(
+ 'Cannot close window: window already closed with different data'
+ ) );
+ } else if ( this.closing ) {
+ closing.reject( new OO.ui.Error(
+ 'Cannot close window: window already closing with different data'
+ ) );
+ }
+
+ // Window closing
+ if ( closing.state() !== 'rejected' ) {
+ if ( this.opening ) {
+ // If the window is currently opening, close it when it's done
+ preparing.push( this.opening );
+ }
+
+ // Close the window
+ $.when.apply( $, preparing ).done( function () {
+ manager.closing = closing;
+ manager.emit( 'closing', win, closing, data );
+ manager.opened = null;
+ opened.resolve( closing.promise(), data );
+ setTimeout( function () {
+ win.hold( data ).then( function () {
+ closing.notify( { state: 'hold' } );
+ setTimeout( function () {
+ win.teardown( data ).then( function () {
+ closing.notify( { state: 'teardown' } );
+ if ( manager.modal ) {
+ manager.$( manager.getElementDocument() ).off( {
+ // Allow scrolling by keys in top-level window
+ keydown: manager.onDocumentKeyDownHandler
+ } );
+ manager.$( manager.getElementWindow() ).off( {
+ // Allow scrolling by wheel in top-level window
+ mousewheel: manager.onWindowMouseWheelHandler,
+ // Stop listening for top-level window dimension changes
+ 'orientationchange resize': manager.onWindowResizeHandler
+ } );
+ }
+ // Restore screen reader visiblity
+ if ( manager.$ariaHidden ) {
+ manager.$ariaHidden.removeAttr( 'aria-hidden' );
+ manager.$ariaHidden = null;
+ }
+ manager.closing = null;
+ manager.currentWindow = null;
+ closing.resolve( data );
+ } );
+ }, manager.getTeardownDelay() );
+ } );
+ }, manager.getHoldDelay() );
+ } );
}
- this.$button
- // Restore the tab-index after the button is up to restore the button's accesssibility
- .attr( 'tabindex', this.tabIndex )
- .removeClass( 'oo-ui-buttonedElement-pressed' );
- // Stop listening for mouseup, since we only needed this once
- this.getElementDocument().removeEventListener( 'mouseup', this.onMouseUpHandler, true );
-};
-/**
- * Set active state.
- *
- * @param {boolean} [value] Make button active
- * @chainable
- */
-OO.ui.ButtonedElement.prototype.setActive = function ( value ) {
- this.$button.toggleClass( 'oo-ui-buttonedElement-active', !!value );
- return this;
+ return closing;
};
/**
- * Element that can be automatically clipped to visible boundaies.
+ * Add windows.
*
- * @abstract
- * @class
+ * If the window manager is attached to the DOM then windows will be automatically loaded as they
+ * are added.
*
- * @constructor
- * @param {jQuery} $clippable Nodes to clip, assigned to #$clippable
- * @param {Object} [config] Configuration options
+ * @param {Object.<string,OO.ui.Window>|OO.ui.Window[]} windows Windows to add
+ * @return {jQuery.Promise} Promise resolved when all windows are added
+ * @throws {Error} If one of the windows being added without an explicit symbolic name does not have
+ * a statically configured symbolic name
*/
-OO.ui.ClippableElement = function OoUiClippableElement( $clippable, config ) {
- // Configuration initialization
- config = config || {};
-
- // Properties
- this.$clippable = $clippable;
- this.clipping = false;
- this.clipped = false;
- this.$clippableContainer = null;
- this.$clippableScroller = null;
- this.$clippableWindow = null;
- this.idealWidth = null;
- this.idealHeight = null;
- this.onClippableContainerScrollHandler = OO.ui.bind( this.clip, this );
- this.onClippableWindowResizeHandler = OO.ui.bind( this.clip, this );
-
- // Initialization
- this.$clippable.addClass( 'oo-ui-clippableElement-clippable' );
-};
+OO.ui.WindowManager.prototype.addWindows = function ( windows ) {
+ var i, len, win, name, list,
+ promises = [];
-/* Methods */
+ if ( $.isArray( windows ) ) {
+ // Convert to map of windows by looking up symbolic names from static configuration
+ list = {};
+ for ( i = 0, len = windows.length; i < len; i++ ) {
+ name = windows[i].constructor.static.name;
+ if ( typeof name !== 'string' ) {
+ throw new Error( 'Cannot add window' );
+ }
+ list[name] = windows[i];
+ }
+ } else if ( $.isPlainObject( windows ) ) {
+ list = windows;
+ }
-/**
- * Set clipping.
- *
- * @param {boolean} value Enable clipping
- * @chainable
- */
-OO.ui.ClippableElement.prototype.setClipping = function ( value ) {
- value = !!value;
+ // Add windows
+ for ( name in list ) {
+ win = list[name];
+ this.windows[name] = win;
+ this.$element.append( win.$element );
- if ( this.clipping !== value ) {
- this.clipping = value;
- if ( this.clipping ) {
- this.$clippableContainer = this.$( this.getClosestScrollableElementContainer() );
- // If the clippable container is the body, we have to listen to scroll events and check
- // jQuery.scrollTop on the window because of browser inconsistencies
- this.$clippableScroller = this.$clippableContainer.is( 'body' ) ?
- this.$( OO.ui.Element.getWindow( this.$clippableContainer ) ) :
- this.$clippableContainer;
- this.$clippableScroller.on( 'scroll', this.onClippableContainerScrollHandler );
- this.$clippableWindow = this.$( this.getElementWindow() )
- .on( 'resize', this.onClippableWindowResizeHandler );
- // Initial clip after visible
- setTimeout( OO.ui.bind( this.clip, this ) );
- } else {
- this.$clippableContainer = null;
- this.$clippableScroller.off( 'scroll', this.onClippableContainerScrollHandler );
- this.$clippableScroller = null;
- this.$clippableWindow.off( 'resize', this.onClippableWindowResizeHandler );
- this.$clippableWindow = null;
+ if ( this.isElementAttached() ) {
+ promises.push( win.load() );
}
}
- return this;
+ return $.when.apply( $, promises );
};
/**
- * Check if the element will be clipped to fit the visible area of the nearest scrollable container.
+ * Remove windows.
*
- * @return {boolean} Element will be clipped to the visible area
- */
-OO.ui.ClippableElement.prototype.isClipping = function () {
- return this.clipping;
-};
-
-/**
- * Check if the bottom or right of the element is being clipped by the nearest scrollable container.
+ * Windows will be closed before they are removed.
*
- * @return {boolean} Part of the element is being clipped
+ * @param {string} name Symbolic name of window to remove
+ * @return {jQuery.Promise} Promise resolved when window is closed and removed
+ * @throws {Error} If windows being removed are not being managed
*/
-OO.ui.ClippableElement.prototype.isClipped = function () {
- return this.clipped;
+OO.ui.WindowManager.prototype.removeWindows = function ( names ) {
+ var i, len, win, name,
+ manager = this,
+ promises = [],
+ cleanup = function ( name, win ) {
+ delete manager.windows[name];
+ win.$element.detach();
+ };
+
+ for ( i = 0, len = names.length; i < len; i++ ) {
+ name = names[i];
+ win = this.windows[name];
+ if ( !win ) {
+ throw new Error( 'Cannot remove window' );
+ }
+ promises.push( this.closeWindow( name ).then( OO.ui.bind( cleanup, null, name, win ) ) );
+ }
+
+ return $.when.apply( $, promises );
};
/**
- * Set the ideal size.
+ * Remove all windows.
*
- * @param {number|string} [width] Width as a number of pixels or CSS string with unit suffix
- * @param {number|string} [height] Height as a number of pixels or CSS string with unit suffix
+ * Windows will be closed before they are removed.
+ *
+ * @return {jQuery.Promise} Promise resolved when all windows are closed and removed
*/
-OO.ui.ClippableElement.prototype.setIdealSize = function ( width, height ) {
- this.idealWidth = width;
- this.idealHeight = height;
+OO.ui.WindowManager.prototype.clearWindows = function () {
+ return this.removeWindows( Object.keys( this.windows ) );
};
/**
- * Clip element to visible boundaries and allow scrolling when needed.
+ * Set dialog size.
*
- * Element will be clipped the bottom or right of the element is within 10px of the edge of, or
- * overlapped by, the visible area of the nearest scrollable container.
+ * Fullscreen mode will be used if the dialog is too wide to fit in the screen.
*
* @chainable
*/
-OO.ui.ClippableElement.prototype.clip = function () {
- if ( !this.clipping ) {
- // this.$clippableContainer and this.$clippableWindow are null, so the below will fail
- return this;
+OO.ui.WindowManager.prototype.updateWindowSize = function ( win ) {
+ // Bypass for non-current, and thus invisible, windows
+ if ( win !== this.currentWindow ) {
+ return;
}
- var buffer = 10,
- cOffset = this.$clippable.offset(),
- ccOffset = this.$clippableContainer.offset() || { 'top': 0, 'left': 0 },
- ccHeight = this.$clippableContainer.innerHeight() - buffer,
- ccWidth = this.$clippableContainer.innerWidth() - buffer,
- scrollTop = this.$clippableScroller.scrollTop(),
- scrollLeft = this.$clippableScroller.scrollLeft(),
- desiredWidth = ( ccOffset.left + scrollLeft + ccWidth ) - cOffset.left,
- desiredHeight = ( ccOffset.top + scrollTop + ccHeight ) - cOffset.top,
- naturalWidth = this.$clippable.prop( 'scrollWidth' ),
- naturalHeight = this.$clippable.prop( 'scrollHeight' ),
- clipWidth = desiredWidth < naturalWidth,
- clipHeight = desiredHeight < naturalHeight;
+ var viewport = OO.ui.Element.getDimensions( win.getElementWindow() ),
+ sizes = this.constructor.static.sizes,
+ size = win.getSize();
- if ( clipWidth ) {
- this.$clippable.css( { 'overflow-x': 'auto', 'width': desiredWidth } );
- } else {
- this.$clippable.css( 'width', this.idealWidth || '' );
- this.$clippable.width(); // Force reflow for https://code.google.com/p/chromium/issues/detail?id=387290
- this.$clippable.css( 'overflow-x', '' );
+ if ( !sizes[size] ) {
+ size = this.constructor.static.defaultSize;
}
- if ( clipHeight ) {
- this.$clippable.css( { 'overflow-y': 'auto', 'height': desiredHeight } );
- } else {
- this.$clippable.css( 'height', this.idealHeight || '' );
- this.$clippable.height(); // Force reflow for https://code.google.com/p/chromium/issues/detail?id=387290
- this.$clippable.css( 'overflow-y', '' );
+ if ( size !== 'full' && viewport.rect.right - viewport.rect.left < sizes[size].width ) {
+ size = 'full';
}
- this.clipped = clipWidth || clipHeight;
+ this.$element.toggleClass( 'oo-ui-windowManager-fullscreen', size === 'full' );
+ this.$element.toggleClass( 'oo-ui-windowManager-floating', size !== 'full' );
+ win.setDimensions( sizes[size] );
return this;
};
/**
- * Element with named flags that can be added, removed, listed and checked.
- *
- * A flag, when set, adds a CSS class on the `$element` by combing `oo-ui-flaggableElement-` with
- * the flag name. Flags are primarily useful for styling.
- *
* @abstract
* @class
*
* @constructor
+ * @param {string|jQuery} message Description of error
* @param {Object} [config] Configuration options
- * @cfg {string[]} [flags=[]] Styling flags, e.g. 'primary', 'destructive' or 'constructive'
+ * @cfg {boolean} [recoverable=true] Error is recoverable
*/
-OO.ui.FlaggableElement = function OoUiFlaggableElement( config ) {
- // Config initialization
+OO.ui.Error = function OoUiElement( message, config ) {
+ // Configuration initialization
config = config || {};
// Properties
- this.flags = {};
-
- // Initialization
- this.setFlags( config.flags );
+ this.message = message instanceof jQuery ? message : String( message );
+ this.recoverable = config.recoverable === undefined || !!config.recoverable;
};
+/* Setup */
+
+OO.initClass( OO.ui.Error );
+
/* Methods */
/**
- * Check if a flag is set.
+ * Check if error can be recovered from.
*
- * @param {string} flag Name of flag
- * @return {boolean} Has flag
+ * @return {boolean} Error is recoverable
*/
-OO.ui.FlaggableElement.prototype.hasFlag = function ( flag ) {
- return flag in this.flags;
+OO.ui.Error.prototype.isRecoverable = function () {
+ return this.recoverable;
};
/**
- * Get the names of all flags set.
+ * Get error message as DOM nodes.
*
- * @return {string[]} flags Flag names
+ * @return {jQuery} Error message in DOM nodes
*/
-OO.ui.FlaggableElement.prototype.getFlags = function () {
- return Object.keys( this.flags );
+OO.ui.Error.prototype.getMessage = function () {
+ return this.message instanceof jQuery ?
+ this.message.clone() :
+ $( '<div>' ).text( this.message ).contents();
};
/**
- * Clear all flags.
+ * Get error message as text.
*
- * @chainable
+ * @return {string} Error message
*/
-OO.ui.FlaggableElement.prototype.clearFlags = function () {
- var flag,
- classPrefix = 'oo-ui-flaggableElement-';
-
- for ( flag in this.flags ) {
- delete this.flags[flag];
- this.$element.removeClass( classPrefix + flag );
- }
-
- return this;
+OO.ui.Error.prototype.getMessageText = function () {
+ return this.message instanceof jQuery ? this.message.text() : this.message;
};
/**
- * Add one or more flags.
+ * A list of functions, called in sequence.
*
- * @param {string|string[]|Object.<string, boolean>} flags One or more flags to add, or an object
- * keyed by flag name containing boolean set/remove instructions.
- * @chainable
- */
-OO.ui.FlaggableElement.prototype.setFlags = function ( flags ) {
- var i, len, flag,
- classPrefix = 'oo-ui-flaggableElement-';
-
- if ( typeof flags === 'string' ) {
- // Set
- this.flags[flags] = true;
- this.$element.addClass( classPrefix + flags );
- } else if ( $.isArray( flags ) ) {
- for ( i = 0, len = flags.length; i < len; i++ ) {
- flag = flags[i];
- // Set
- this.flags[flag] = true;
- this.$element.addClass( classPrefix + flag );
- }
- } else if ( OO.isPlainObject( flags ) ) {
- for ( flag in flags ) {
- if ( flags[flag] ) {
- // Set
- this.flags[flag] = true;
- this.$element.addClass( classPrefix + flag );
- } else {
- // Remove
- delete this.flags[flag];
- this.$element.removeClass( classPrefix + flag );
- }
- }
- }
- return this;
-};
-
-/**
- * Element containing a sequence of child elements.
+ * If a function added to a process returns boolean false the process will stop; if it returns an
+ * object with a `promise` method the process will use the promise to either continue to the next
+ * step when the promise is resolved or stop when the promise is rejected.
*
- * @abstract
* @class
*
* @constructor
- * @param {jQuery} $group Container node, assigned to #$group
- * @param {Object} [config] Configuration options
+ * @param {number|jQuery.Promise|Function} step Time to wait, promise to wait for or function to
+ * call, see #createStep for more information
+ * @param {Object} [context=null] Context to call the step function in, ignored if step is a number
+ * or a promise
+ * @return {Object} Step object, with `callback` and `context` properties
*/
-OO.ui.GroupElement = function OoUiGroupElement( $group, config ) {
- // Configuration
- config = config || {};
-
+OO.ui.Process = function ( step, context ) {
// Properties
- this.$group = $group;
- this.items = [];
- this.aggregateItemEvents = {};
+ this.steps = [];
+
+ // Initialization
+ if ( step !== undefined ) {
+ this.next( step, context );
+ }
};
-/* Methods */
+/* Setup */
-/**
- * Get items.
- *
- * @return {OO.ui.Element[]} Items
- */
-OO.ui.GroupElement.prototype.getItems = function () {
- return this.items.slice( 0 );
-};
+OO.initClass( OO.ui.Process );
+
+/* Methods */
/**
- * Add an aggregate item event.
- *
- * Aggregated events are listened to on each item and then emitted by the group under a new name,
- * and with an additional leading parameter containing the item that emitted the original event.
- * Other arguments that were emitted from the original event are passed through.
+ * Start the process.
*
- * @param {Object.<string,string|null>} events Aggregate events emitted by group, keyed by item
- * event, use null value to remove aggregation
- * @throws {Error} If aggregation already exists
+ * @return {jQuery.Promise} Promise that is resolved when all steps have completed or rejected when
+ * any of the steps return boolean false or a promise which gets rejected; upon stopping the
+ * process, the remaining steps will not be taken
*/
-OO.ui.GroupElement.prototype.aggregate = function ( events ) {
- var i, len, item, add, remove, itemEvent, groupEvent;
+OO.ui.Process.prototype.execute = function () {
+ var i, len, promise;
- for ( itemEvent in events ) {
- groupEvent = events[itemEvent];
+ /**
+ * Continue execution.
+ *
+ * @ignore
+ * @param {Array} step A function and the context it should be called in
+ * @return {Function} Function that continues the process
+ */
+ function proceed( step ) {
+ return function () {
+ // Execute step in the correct context
+ var deferred,
+ result = step.callback.call( step.context );
- // Remove existing aggregated event
- if ( itemEvent in this.aggregateItemEvents ) {
- // Don't allow duplicate aggregations
- if ( groupEvent ) {
- throw new Error( 'Duplicate item event aggregation for ' + itemEvent );
+ if ( result === false ) {
+ // Use rejected promise for boolean false results
+ return $.Deferred().reject( [] ).promise();
}
- // Remove event aggregation from existing items
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- item = this.items[i];
- if ( item.connect && item.disconnect ) {
- remove = {};
- remove[itemEvent] = [ 'emit', groupEvent, item ];
- item.disconnect( this, remove );
+ if ( typeof result === 'number' ) {
+ if ( result < 0 ) {
+ throw new Error( 'Cannot go back in time: flux capacitor is out of service' );
}
+ // Use a delayed promise for numbers, expecting them to be in milliseconds
+ deferred = $.Deferred();
+ setTimeout( deferred.resolve, result );
+ return deferred.promise();
}
- // Prevent future items from aggregating event
- delete this.aggregateItemEvents[itemEvent];
- }
-
- // Add new aggregate event
- if ( groupEvent ) {
- // Make future items aggregate event
- this.aggregateItemEvents[itemEvent] = groupEvent;
- // Add event aggregation to existing items
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- item = this.items[i];
- if ( item.connect && item.disconnect ) {
- add = {};
- add[itemEvent] = [ 'emit', groupEvent, item ];
- item.connect( this, add );
- }
+ if ( result instanceof OO.ui.Error ) {
+ // Use rejected promise for error
+ return $.Deferred().reject( [ result ] ).promise();
+ }
+ if ( $.isArray( result ) && result.length && result[0] instanceof OO.ui.Error ) {
+ // Use rejected promise for list of errors
+ return $.Deferred().reject( result ).promise();
}
+ // Duck-type the object to see if it can produce a promise
+ if ( result && $.isFunction( result.promise ) ) {
+ // Use a promise generated from the result
+ return result.promise();
+ }
+ // Use resolved promise for other results
+ return $.Deferred().resolve().promise();
+ };
+ }
+
+ if ( this.steps.length ) {
+ // Generate a chain reaction of promises
+ promise = proceed( this.steps[0] )();
+ for ( i = 1, len = this.steps.length; i < len; i++ ) {
+ promise = promise.then( proceed( this.steps[i] ) );
}
+ } else {
+ promise = $.Deferred().resolve().promise();
}
+
+ return promise;
};
/**
- * Add items.
+ * Create a process step.
*
- * @param {OO.ui.Element[]} items Item
- * @param {number} [index] Index to insert items at
- * @chainable
- */
-OO.ui.GroupElement.prototype.addItems = function ( items, index ) {
- var i, len, item, event, events, currentIndex,
- itemElements = [];
-
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
-
- // Check if item exists then remove it first, effectively "moving" it
- currentIndex = $.inArray( item, this.items );
- if ( currentIndex >= 0 ) {
- this.removeItems( [ item ] );
- // Adjust index to compensate for removal
- if ( currentIndex < index ) {
- index--;
- }
- }
- // Add the item
- if ( item.connect && item.disconnect && !$.isEmptyObject( this.aggregateItemEvents ) ) {
- events = {};
- for ( event in this.aggregateItemEvents ) {
- events[event] = [ 'emit', this.aggregateItemEvents[event], item ];
- }
- item.connect( this, events );
- }
- item.setElementGroup( this );
- itemElements.push( item.$element.get( 0 ) );
+ * @private
+ * @param {number|jQuery.Promise|Function} step
+ *
+ * - Number of milliseconds to wait; or
+ * - Promise to wait to be resolved; or
+ * - Function to execute
+ * - If it returns boolean false the process will stop
+ * - If it returns an object with a `promise` method the process will use the promise to either
+ * continue to the next step when the promise is resolved or stop when the promise is rejected
+ * - If it returns a number, the process will wait for that number of milliseconds before
+ * proceeding
+ * @param {Object} [context=null] Context to call the step function in, ignored if step is a number
+ * or a promise
+ * @return {Object} Step object, with `callback` and `context` properties
+ */
+OO.ui.Process.prototype.createStep = function ( step, context ) {
+ if ( typeof step === 'number' || $.isFunction( step.promise ) ) {
+ return {
+ callback: function () {
+ return step;
+ },
+ context: null
+ };
}
-
- if ( index === undefined || index < 0 || index >= this.items.length ) {
- this.$group.append( itemElements );
- this.items.push.apply( this.items, items );
- } else if ( index === 0 ) {
- this.$group.prepend( itemElements );
- this.items.unshift.apply( this.items, items );
- } else {
- this.items[index].$element.before( itemElements );
- this.items.splice.apply( this.items, [ index, 0 ].concat( items ) );
+ if ( $.isFunction( step ) ) {
+ return {
+ callback: step,
+ context: context
+ };
}
+ throw new Error( 'Cannot create process step: number, promise or function expected' );
+};
+/**
+ * Add step to the beginning of the process.
+ *
+ * @inheritdoc #createStep
+ * @return {OO.ui.Process} this
+ * @chainable
+ */
+OO.ui.Process.prototype.first = function ( step, context ) {
+ this.steps.unshift( this.createStep( step, context ) );
return this;
};
/**
- * Remove items.
- *
- * Items will be detached, not removed, so they can be used later.
+ * Add step to the end of the process.
*
- * @param {OO.ui.Element[]} items Items to remove
+ * @inheritdoc #createStep
+ * @return {OO.ui.Process} this
* @chainable
*/
-OO.ui.GroupElement.prototype.removeItems = function ( items ) {
- var i, len, item, index, remove, itemEvent;
-
- // Remove specific items
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
- index = $.inArray( item, this.items );
- if ( index !== -1 ) {
- if (
- item.connect && item.disconnect &&
- !$.isEmptyObject( this.aggregateItemEvents )
- ) {
- remove = {};
- if ( itemEvent in this.aggregateItemEvents ) {
- remove[itemEvent] = [ 'emit', this.aggregateItemEvents[itemEvent], item ];
- }
- item.disconnect( this, remove );
- }
- item.setElementGroup( null );
- this.items.splice( index, 1 );
- item.$element.detach();
- }
- }
-
+OO.ui.Process.prototype.next = function ( step, context ) {
+ this.steps.push( this.createStep( step, context ) );
return this;
};
/**
- * Clear all items.
- *
- * Items will be detached, not removed, so they can be used later.
+ * Factory for tools.
*
- * @chainable
+ * @class
+ * @extends OO.Factory
+ * @constructor
*/
-OO.ui.GroupElement.prototype.clearItems = function () {
- var i, len, item, remove, itemEvent;
+OO.ui.ToolFactory = function OoUiToolFactory() {
+ // Parent constructor
+ OO.ui.ToolFactory.super.call( this );
+};
- // Remove all items
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- item = this.items[i];
- if (
- item.connect && item.disconnect &&
- !$.isEmptyObject( this.aggregateItemEvents )
- ) {
- remove = {};
- if ( itemEvent in this.aggregateItemEvents ) {
- remove[itemEvent] = [ 'emit', this.aggregateItemEvents[itemEvent], item ];
- }
- item.disconnect( this, remove );
- }
- item.setElementGroup( null );
- item.$element.detach();
- }
+/* Setup */
- this.items = [];
- return this;
-};
+OO.inheritClass( OO.ui.ToolFactory, OO.Factory );
-/**
- * Element containing an icon.
- *
- * @abstract
- * @class
- *
- * @constructor
- * @param {jQuery} $icon Icon node, assigned to #$icon
- * @param {Object} [config] Configuration options
- * @cfg {Object|string} [icon=''] Symbolic icon name, or map of icon names keyed by language ID;
- * use the 'default' key to specify the icon to be used when there is no icon in the user's
- * language
- */
-OO.ui.IconedElement = function OoUiIconedElement( $icon, config ) {
- // Config intialization
- config = config || {};
+/* Methods */
- // Properties
- this.$icon = $icon;
- this.icon = null;
+/** */
+OO.ui.ToolFactory.prototype.getTools = function ( include, exclude, promote, demote ) {
+ var i, len, included, promoted, demoted,
+ auto = [],
+ used = {};
- // Initialization
- this.$icon.addClass( 'oo-ui-iconedElement-icon' );
- this.setIcon( config.icon || this.constructor.static.icon );
-};
+ // Collect included and not excluded tools
+ included = OO.simpleArrayDifference( this.extract( include ), this.extract( exclude ) );
-/* Setup */
+ // Promotion
+ promoted = this.extract( promote, used );
+ demoted = this.extract( demote, used );
-OO.initClass( OO.ui.IconedElement );
+ // Auto
+ for ( i = 0, len = included.length; i < len; i++ ) {
+ if ( !used[included[i]] ) {
+ auto.push( included[i] );
+ }
+ }
-/* Static Properties */
+ return promoted.concat( auto ).concat( demoted );
+};
/**
- * Icon.
- *
- * Value should be the unique portion of an icon CSS class name, such as 'up' for 'oo-ui-icon-up'.
+ * Get a flat list of names from a list of names or groups.
*
- * For i18n purposes, this property can be an object containing a `default` icon name property and
- * additional icon names keyed by language code.
+ * Tools can be specified in the following ways:
*
- * Example of i18n icon definition:
- * { 'default': 'bold-a', 'en': 'bold-b', 'de': 'bold-f' }
+ * - A specific tool: `{ name: 'tool-name' }` or `'tool-name'`
+ * - All tools in a group: `{ group: 'group-name' }`
+ * - All tools: `'*'`
*
- * @static
- * @inheritable
- * @property {Object|string} Symbolic icon name, or map of icon names keyed by language ID;
- * use the 'default' key to specify the icon to be used when there is no icon in the user's
- * language
+ * @private
+ * @param {Array|string} collection List of tools
+ * @param {Object} [used] Object with names that should be skipped as properties; extracted
+ * names will be added as properties
+ * @return {string[]} List of extracted names
*/
-OO.ui.IconedElement.static.icon = null;
+OO.ui.ToolFactory.prototype.extract = function ( collection, used ) {
+ var i, len, item, name, tool,
+ names = [];
-/* Methods */
+ if ( collection === '*' ) {
+ for ( name in this.registry ) {
+ tool = this.registry[name];
+ if (
+ // Only add tools by group name when auto-add is enabled
+ tool.static.autoAddToCatchall &&
+ // Exclude already used tools
+ ( !used || !used[name] )
+ ) {
+ names.push( name );
+ if ( used ) {
+ used[name] = true;
+ }
+ }
+ }
+ } else if ( $.isArray( collection ) ) {
+ for ( i = 0, len = collection.length; i < len; i++ ) {
+ item = collection[i];
+ // Allow plain strings as shorthand for named tools
+ if ( typeof item === 'string' ) {
+ item = { name: item };
+ }
+ if ( OO.isPlainObject( item ) ) {
+ if ( item.group ) {
+ for ( name in this.registry ) {
+ tool = this.registry[name];
+ if (
+ // Include tools with matching group
+ tool.static.group === item.group &&
+ // Only add tools by group name when auto-add is enabled
+ tool.static.autoAddToGroup &&
+ // Exclude already used tools
+ ( !used || !used[name] )
+ ) {
+ names.push( name );
+ if ( used ) {
+ used[name] = true;
+ }
+ }
+ }
+ // Include tools with matching name and exclude already used tools
+ } else if ( item.name && ( !used || !used[item.name] ) ) {
+ names.push( item.name );
+ if ( used ) {
+ used[item.name] = true;
+ }
+ }
+ }
+ }
+ }
+ return names;
+};
/**
- * Set icon.
+ * Factory for tool groups.
*
- * @param {Object|string} icon Symbolic icon name, or map of icon names keyed by language ID;
- * use the 'default' key to specify the icon to be used when there is no icon in the user's
- * language
- * @chainable
+ * @class
+ * @extends OO.Factory
+ * @constructor
*/
-OO.ui.IconedElement.prototype.setIcon = function ( icon ) {
- icon = OO.isPlainObject( icon ) ? OO.ui.getLocalValue( icon, null, 'default' ) : icon;
+OO.ui.ToolGroupFactory = function OoUiToolGroupFactory() {
+ // Parent constructor
+ OO.Factory.call( this );
- if ( this.icon ) {
- this.$icon.removeClass( 'oo-ui-icon-' + this.icon );
- }
- if ( typeof icon === 'string' ) {
- icon = icon.trim();
- if ( icon.length ) {
- this.$icon.addClass( 'oo-ui-icon-' + icon );
- this.icon = icon;
- }
- }
- this.$element.toggleClass( 'oo-ui-iconedElement', !!this.icon );
+ var i, l,
+ defaultClasses = this.constructor.static.getDefaultClasses();
- return this;
+ // Register default toolgroups
+ for ( i = 0, l = defaultClasses.length; i < l; i++ ) {
+ this.register( defaultClasses[i] );
+ }
};
+/* Setup */
+
+OO.inheritClass( OO.ui.ToolGroupFactory, OO.Factory );
+
+/* Static Methods */
+
/**
- * Get icon.
+ * Get a default set of classes to be registered on construction
*
- * @return {string} Icon
+ * @return {Function[]} Default classes
*/
-OO.ui.IconedElement.prototype.getIcon = function () {
- return this.icon;
+OO.ui.ToolGroupFactory.static.getDefaultClasses = function () {
+ return [
+ OO.ui.BarToolGroup,
+ OO.ui.ListToolGroup,
+ OO.ui.MenuToolGroup
+ ];
};
/**
- * Element containing an indicator.
+ * Element with a button.
+ *
+ * Buttons are used for controls which can be clicked. They can be configured to use tab indexing
+ * and access keys for accessibility purposes.
*
* @abstract
* @class
*
* @constructor
- * @param {jQuery} $indicator Indicator node, assigned to #$indicator
+ * @param {jQuery} $button Button node, assigned to #$button
* @param {Object} [config] Configuration options
- * @cfg {string} [indicator] Symbolic indicator name
- * @cfg {string} [indicatorTitle] Indicator title text or a function that return text
+ * @cfg {boolean} [framed=true] Render button with a frame
+ * @cfg {number} [tabIndex=0] Button's tab index, use null to have no tabIndex
+ * @cfg {string} [accessKey] Button's access key
*/
-OO.ui.IndicatedElement = function OoUiIndicatedElement( $indicator, config ) {
- // Config intialization
+OO.ui.ButtonedElement = function OoUiButtonedElement( $button, config ) {
+ // Configuration initialization
config = config || {};
// Properties
- this.$indicator = $indicator;
- this.indicator = null;
- this.indicatorLabel = null;
+ this.$button = $button;
+ this.tabIndex = null;
+ this.framed = null;
+ this.active = false;
+ this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
+
+ // Events
+ this.$button.on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
// Initialization
- this.$indicator.addClass( 'oo-ui-indicatedElement-indicator' );
- this.setIndicator( config.indicator || this.constructor.static.indicator );
- this.setIndicatorTitle( config.indicatorTitle || this.constructor.static.indicatorTitle );
+ this.$element.addClass( 'oo-ui-buttonedElement' );
+ this.$button
+ .addClass( 'oo-ui-buttonedElement-button' )
+ .attr( 'role', 'button' );
+ this.setTabIndex( config.tabIndex || 0 );
+ this.setAccessKey( config.accessKey );
+ this.toggleFramed( config.framed === undefined || config.framed );
};
/* Setup */
-OO.initClass( OO.ui.IndicatedElement );
+OO.initClass( OO.ui.ButtonedElement );
/* Static Properties */
/**
- * indicator.
- *
- * @static
- * @inheritable
- * @property {string|null} Symbolic indicator name or null for no indicator
- */
-OO.ui.IndicatedElement.static.indicator = null;
-
-/**
- * Indicator title.
+ * Cancel mouse down events.
*
* @static
* @inheritable
- * @property {string|Function|null} Indicator title text, a function that return text or null for no
- * indicator title
+ * @property {boolean}
*/
-OO.ui.IndicatedElement.static.indicatorTitle = null;
+OO.ui.ButtonedElement.static.cancelButtonMouseDownEvents = true;
/* Methods */
/**
- * Set indicator.
+ * Handles mouse down events.
*
- * @param {string|null} indicator Symbolic name of indicator to use or null for no indicator
- * @chainable
+ * @param {jQuery.Event} e Mouse down event
*/
-OO.ui.IndicatedElement.prototype.setIndicator = function ( indicator ) {
- if ( this.indicator ) {
- this.$indicator.removeClass( 'oo-ui-indicator-' + this.indicator );
- this.indicator = null;
- }
- if ( typeof indicator === 'string' ) {
- indicator = indicator.trim();
- if ( indicator.length ) {
- this.$indicator.addClass( 'oo-ui-indicator-' + indicator );
- this.indicator = indicator;
- }
+OO.ui.ButtonedElement.prototype.onMouseDown = function ( e ) {
+ if ( this.isDisabled() || e.which !== 1 ) {
+ return false;
}
- this.$element.toggleClass( 'oo-ui-indicatedElement', !!this.indicator );
-
- return this;
-};
-
+ // tabIndex should generally be interacted with via the property, but it's not possible to
+ // reliably unset a tabIndex via a property so we use the (lowercase) "tabindex" attribute
+ this.tabIndex = this.$button.attr( 'tabindex' );
+ this.$button
+ // Remove the tab-index while the button is down to prevent the button from stealing focus
+ .removeAttr( 'tabindex' )
+ .addClass( 'oo-ui-buttonedElement-pressed' );
+ // Run the mouseup handler no matter where the mouse is when the button is let go, so we can
+ // reliably reapply the tabindex and remove the pressed class
+ this.getElementDocument().addEventListener( 'mouseup', this.onMouseUpHandler, true );
+ // Prevent change of focus unless specifically configured otherwise
+ if ( this.constructor.static.cancelButtonMouseDownEvents ) {
+ return false;
+ }
+};
+
/**
- * Set indicator label.
+ * Handles mouse up events.
*
- * @param {string|Function|null} indicator Indicator title text, a function that return text or null
- * for no indicator title
+ * @param {jQuery.Event} e Mouse up event
+ */
+OO.ui.ButtonedElement.prototype.onMouseUp = function ( e ) {
+ if ( this.isDisabled() || e.which !== 1 ) {
+ return false;
+ }
+ this.$button
+ // Restore the tab-index after the button is up to restore the button's accesssibility
+ .attr( 'tabindex', this.tabIndex )
+ .removeClass( 'oo-ui-buttonedElement-pressed' );
+ // Stop listening for mouseup, since we only needed this once
+ this.getElementDocument().removeEventListener( 'mouseup', this.onMouseUpHandler, true );
+};
+
+/**
+ * Toggle frame.
+ *
+ * @param {boolean} [framed] Make button framed, omit to toggle
* @chainable
*/
-OO.ui.IndicatedElement.prototype.setIndicatorTitle = function ( indicatorTitle ) {
- this.indicatorTitle = indicatorTitle = OO.ui.resolveMsg( indicatorTitle );
+OO.ui.ButtonedElement.prototype.toggleFramed = function ( framed ) {
+ framed = framed === undefined ? !this.framed : !!framed;
+ if ( framed !== this.framed ) {
+ this.framed = framed;
+ this.$element
+ .toggleClass( 'oo-ui-buttonedElement-frameless', !framed )
+ .toggleClass( 'oo-ui-buttonedElement-framed', framed );
+ }
- if ( typeof indicatorTitle === 'string' && indicatorTitle.length ) {
- this.$indicator.attr( 'title', indicatorTitle );
+ return this;
+};
+
+/**
+ * Set tab index.
+ *
+ * @param {number|null} tabIndex Button's tab index, use null to remove
+ * @chainable
+ */
+OO.ui.ButtonedElement.prototype.setTabIndex = function ( tabIndex ) {
+ if ( typeof tabIndex === 'number' && tabIndex >= 0 ) {
+ this.$button.attr( 'tabindex', tabIndex );
} else {
- this.$indicator.removeAttr( 'title' );
+ this.$button.removeAttr( 'tabindex' );
}
-
return this;
};
/**
- * Get indicator.
+ * Set access key
*
- * @return {string} title Symbolic name of indicator
+ * @param {string} accessKey Button's access key, use empty string to remove
+ * @chainable
*/
-OO.ui.IndicatedElement.prototype.getIndicator = function () {
- return this.indicator;
+OO.ui.ButtonedElement.prototype.setAccessKey = function ( accessKey ) {
+ if ( typeof accessKey === 'string' && accessKey.length ) {
+ this.$button.attr( 'accesskey', accessKey );
+ } else {
+ this.$button.removeAttr( 'accesskey' );
+ }
+ return this;
};
/**
- * Get indicator title.
+ * Set active state.
*
- * @return {string} Indicator title text
+ * @param {boolean} [value] Make button active
+ * @chainable
*/
-OO.ui.IndicatedElement.prototype.getIndicatorTitle = function () {
- return this.indicatorTitle;
+OO.ui.ButtonedElement.prototype.setActive = function ( value ) {
+ this.$button.toggleClass( 'oo-ui-buttonedElement-active', !!value );
+ return this;
};
/**
- * Element containing a label.
+ * Element that can be automatically clipped to visible boundaies.
*
* @abstract
* @class
*
* @constructor
- * @param {jQuery} $label Label node, assigned to #$label
+ * @param {jQuery} $clippable Nodes to clip, assigned to #$clippable
* @param {Object} [config] Configuration options
- * @cfg {jQuery|string|Function} [label] Label nodes, text or a function that returns nodes or text
- * @cfg {boolean} [autoFitLabel=true] Whether to fit the label or not.
*/
-OO.ui.LabeledElement = function OoUiLabeledElement( $label, config ) {
- // Config intialization
+OO.ui.ClippableElement = function OoUiClippableElement( $clippable, config ) {
+ // Configuration initialization
config = config || {};
// Properties
- this.$label = $label;
- this.label = null;
+ this.$clippable = $clippable;
+ this.clipping = false;
+ this.clipped = false;
+ this.$clippableContainer = null;
+ this.$clippableScroller = null;
+ this.$clippableWindow = null;
+ this.idealWidth = null;
+ this.idealHeight = null;
+ this.onClippableContainerScrollHandler = OO.ui.bind( this.clip, this );
+ this.onClippableWindowResizeHandler = OO.ui.bind( this.clip, this );
// Initialization
- this.$label.addClass( 'oo-ui-labeledElement-label' );
- this.setLabel( config.label || this.constructor.static.label );
- this.autoFitLabel = config.autoFitLabel === undefined || !!config.autoFitLabel;
+ this.$clippable.addClass( 'oo-ui-clippableElement-clippable' );
};
-/* Setup */
-
-OO.initClass( OO.ui.LabeledElement );
-
-/* Static Properties */
-
-/**
- * Label.
- *
- * @static
- * @inheritable
- * @property {string|Function|null} Label text; a function that returns a nodes or text; or null for
- * no label
- */
-OO.ui.LabeledElement.static.label = null;
-
/* Methods */
/**
- * Set the label.
- *
- * An empty string will result in the label being hidden. A string containing only whitespace will
- * be converted to a single
+ * Set clipping.
*
- * @param {jQuery|string|Function|null} label Label nodes; text; a function that retuns nodes or
- * text; or null for no label
+ * @param {boolean} value Enable clipping
* @chainable
*/
-OO.ui.LabeledElement.prototype.setLabel = function ( label ) {
- var empty = false;
+OO.ui.ClippableElement.prototype.setClipping = function ( value ) {
+ value = !!value;
- this.label = label = OO.ui.resolveMsg( label ) || null;
- if ( typeof label === 'string' && label.length ) {
- if ( label.match( /^\s*$/ ) ) {
- // Convert whitespace only string to a single non-breaking space
- this.$label.html( ' ' );
+ if ( this.clipping !== value ) {
+ this.clipping = value;
+ if ( this.clipping ) {
+ this.$clippableContainer = this.$( this.getClosestScrollableElementContainer() );
+ // If the clippable container is the body, we have to listen to scroll events and check
+ // jQuery.scrollTop on the window because of browser inconsistencies
+ this.$clippableScroller = this.$clippableContainer.is( 'body' ) ?
+ this.$( OO.ui.Element.getWindow( this.$clippableContainer ) ) :
+ this.$clippableContainer;
+ this.$clippableScroller.on( 'scroll', this.onClippableContainerScrollHandler );
+ this.$clippableWindow = this.$( this.getElementWindow() )
+ .on( 'resize', this.onClippableWindowResizeHandler );
+ // Initial clip after visible
+ setTimeout( OO.ui.bind( this.clip, this ) );
} else {
- this.$label.text( label );
+ this.$clippableContainer = null;
+ this.$clippableScroller.off( 'scroll', this.onClippableContainerScrollHandler );
+ this.$clippableScroller = null;
+ this.$clippableWindow.off( 'resize', this.onClippableWindowResizeHandler );
+ this.$clippableWindow = null;
}
- } else if ( label instanceof jQuery ) {
- this.$label.empty().append( label );
- } else {
- this.$label.empty();
- empty = true;
}
- this.$element.toggleClass( 'oo-ui-labeledElement', !empty );
- this.$label.css( 'display', empty ? 'none' : '' );
return this;
};
/**
- * Get the label.
+ * Check if the element will be clipped to fit the visible area of the nearest scrollable container.
*
- * @return {jQuery|string|Function|null} label Label nodes; text; a function that returns nodes or
- * text; or null for no label
+ * @return {boolean} Element will be clipped to the visible area
*/
-OO.ui.LabeledElement.prototype.getLabel = function () {
- return this.label;
+OO.ui.ClippableElement.prototype.isClipping = function () {
+ return this.clipping;
};
/**
- * Fit the label.
+ * Check if the bottom or right of the element is being clipped by the nearest scrollable container.
*
- * @chainable
+ * @return {boolean} Part of the element is being clipped
*/
-OO.ui.LabeledElement.prototype.fitLabel = function () {
- if ( this.$label.autoEllipsis && this.autoFitLabel ) {
- this.$label.autoEllipsis( { 'hasSpan': false, 'tooltip': true } );
- }
- return this;
+OO.ui.ClippableElement.prototype.isClipped = function () {
+ return this.clipped;
};
/**
- * Popuppable element.
- *
- * @abstract
- * @class
+ * Set the ideal size.
*
- * @constructor
- * @param {Object} [config] Configuration options
- * @cfg {number} [popupWidth=320] Width of popup
- * @cfg {number} [popupHeight] Height of popup
- * @cfg {Object} [popup] Configuration to pass to popup
+ * @param {number|string} [width] Width as a number of pixels or CSS string with unit suffix
+ * @param {number|string} [height] Height as a number of pixels or CSS string with unit suffix
*/
-OO.ui.PopuppableElement = function OoUiPopuppableElement( config ) {
- // Configuration initialization
- config = $.extend( { 'popupWidth': 320 }, config );
-
- // Properties
- this.popup = new OO.ui.PopupWidget( $.extend(
- { 'align': 'center', 'autoClose': true },
- config.popup,
- { '$': this.$, '$autoCloseIgnore': this.$element }
- ) );
- this.popupWidth = config.popupWidth;
- this.popupHeight = config.popupHeight;
+OO.ui.ClippableElement.prototype.setIdealSize = function ( width, height ) {
+ this.idealWidth = width;
+ this.idealHeight = height;
};
-/* Methods */
-
/**
- * Get popup.
+ * Clip element to visible boundaries and allow scrolling when needed.
*
- * @return {OO.ui.PopupWidget} Popup widget
+ * Element will be clipped the bottom or right of the element is within 10px of the edge of, or
+ * overlapped by, the visible area of the nearest scrollable container.
+ *
+ * @chainable
*/
-OO.ui.PopuppableElement.prototype.getPopup = function () {
- return this.popup;
-};
+OO.ui.ClippableElement.prototype.clip = function () {
+ if ( !this.clipping ) {
+ // this.$clippableContainer and this.$clippableWindow are null, so the below will fail
+ return this;
+ }
-/**
- * Show popup.
- */
-OO.ui.PopuppableElement.prototype.showPopup = function () {
- this.popup.show().display( this.popupWidth, this.popupHeight );
-};
+ var buffer = 10,
+ cOffset = this.$clippable.offset(),
+ $container = this.$clippableContainer.is( 'body' ) ? this.$clippableWindow : this.$clippableContainer,
+ ccOffset = $container.offset() || { top: 0, left: 0 },
+ ccHeight = $container.innerHeight() - buffer,
+ ccWidth = $container.innerWidth() - buffer,
+ scrollTop = this.$clippableScroller.scrollTop(),
+ scrollLeft = this.$clippableScroller.scrollLeft(),
+ desiredWidth = ( ccOffset.left + scrollLeft + ccWidth ) - cOffset.left,
+ desiredHeight = ( ccOffset.top + scrollTop + ccHeight ) - cOffset.top,
+ naturalWidth = this.$clippable.prop( 'scrollWidth' ),
+ naturalHeight = this.$clippable.prop( 'scrollHeight' ),
+ clipWidth = desiredWidth < naturalWidth,
+ clipHeight = desiredHeight < naturalHeight;
-/**
- * Hide popup.
- */
-OO.ui.PopuppableElement.prototype.hidePopup = function () {
- this.popup.hide();
+ if ( clipWidth ) {
+ this.$clippable.css( { overflowX: 'auto', width: desiredWidth } );
+ } else {
+ this.$clippable.css( 'width', this.idealWidth || '' );
+ this.$clippable.width(); // Force reflow for https://code.google.com/p/chromium/issues/detail?id=387290
+ this.$clippable.css( 'overflowX', '' );
+ }
+ if ( clipHeight ) {
+ this.$clippable.css( { overflowY: 'auto', height: desiredHeight } );
+ } else {
+ this.$clippable.css( 'height', this.idealHeight || '' );
+ this.$clippable.height(); // Force reflow for https://code.google.com/p/chromium/issues/detail?id=387290
+ this.$clippable.css( 'overflowY', '' );
+ }
+
+ this.clipped = clipWidth || clipHeight;
+
+ return this;
};
/**
- * Element with a title.
+ * Element with named flags that can be added, removed, listed and checked.
+ *
+ * A flag, when set, adds a CSS class on the `$element` by combing `oo-ui-flaggableElement-` with
+ * the flag name. Flags are primarily useful for styling.
*
* @abstract
* @class
*
* @constructor
- * @param {jQuery} $label Titled node, assigned to #$titled
* @param {Object} [config] Configuration options
- * @cfg {string|Function} [title] Title text or a function that returns text
+ * @cfg {string[]} [flags=[]] Styling flags, e.g. 'primary', 'destructive' or 'constructive'
*/
-OO.ui.TitledElement = function OoUiTitledElement( $titled, config ) {
- // Config intialization
+OO.ui.FlaggableElement = function OoUiFlaggableElement( config ) {
+ // Config initialization
config = config || {};
// Properties
- this.$titled = $titled;
- this.title = null;
+ this.flags = {};
// Initialization
- this.setTitle( config.title || this.constructor.static.title );
+ this.setFlags( config.flags );
};
-/* Setup */
+/* Events */
-OO.initClass( OO.ui.TitledElement );
+/**
+ * @event flag
+ * @param {Object.<string,boolean>} changes Object keyed by flag name containing boolean
+ * added/removed properties
+ */
-/* Static Properties */
+/* Methods */
/**
- * Title.
+ * Check if a flag is set.
*
- * @static
- * @inheritable
- * @property {string|Function} Title text or a function that returns text
+ * @param {string} flag Name of flag
+ * @return {boolean} Has flag
*/
-OO.ui.TitledElement.static.title = null;
+OO.ui.FlaggableElement.prototype.hasFlag = function ( flag ) {
+ return flag in this.flags;
+};
-/* Methods */
+/**
+ * Get the names of all flags set.
+ *
+ * @return {string[]} flags Flag names
+ */
+OO.ui.FlaggableElement.prototype.getFlags = function () {
+ return Object.keys( this.flags );
+};
/**
- * Set title.
+ * Clear all flags.
*
- * @param {string|Function|null} title Title text, a function that returns text or null for no title
* @chainable
+ * @fires flag
*/
-OO.ui.TitledElement.prototype.setTitle = function ( title ) {
- this.title = title = OO.ui.resolveMsg( title ) || null;
+OO.ui.FlaggableElement.prototype.clearFlags = function () {
+ var flag,
+ changes = {},
+ classPrefix = 'oo-ui-flaggableElement-';
- if ( typeof title === 'string' && title.length ) {
- this.$titled.attr( 'title', title );
- } else {
- this.$titled.removeAttr( 'title' );
+ for ( flag in this.flags ) {
+ changes[flag] = false;
+ delete this.flags[flag];
+ this.$element.removeClass( classPrefix + flag );
}
+ this.emit( 'flag', changes );
+
return this;
};
/**
- * Get title.
+ * Add one or more flags.
*
- * @return {string} Title string
+ * @param {string|string[]|Object.<string, boolean>} flags One or more flags to add, or an object
+ * keyed by flag name containing boolean set/remove instructions.
+ * @chainable
+ * @fires flag
*/
-OO.ui.TitledElement.prototype.getTitle = function () {
- return this.title;
+OO.ui.FlaggableElement.prototype.setFlags = function ( flags ) {
+ var i, len, flag,
+ changes = {},
+ classPrefix = 'oo-ui-flaggableElement-';
+
+ if ( typeof flags === 'string' ) {
+ // Set
+ this.flags[flags] = true;
+ this.$element.addClass( classPrefix + flags );
+ } else if ( $.isArray( flags ) ) {
+ for ( i = 0, len = flags.length; i < len; i++ ) {
+ flag = flags[i];
+ // Set
+ changes[flag] = true;
+ this.flags[flag] = true;
+ this.$element.addClass( classPrefix + flag );
+ }
+ } else if ( OO.isPlainObject( flags ) ) {
+ for ( flag in flags ) {
+ if ( flags[flag] ) {
+ // Set
+ changes[flag] = true;
+ this.flags[flag] = true;
+ this.$element.addClass( classPrefix + flag );
+ } else {
+ // Remove
+ changes[flag] = false;
+ delete this.flags[flag];
+ this.$element.removeClass( classPrefix + flag );
+ }
+ }
+ }
+
+ this.emit( 'flag', changes );
+
+ return this;
};
/**
- * Generic toolbar tool.
+ * Element containing a sequence of child elements.
*
* @abstract
* @class
- * @extends OO.ui.Widget
- * @mixins OO.ui.IconedElement
*
* @constructor
- * @param {OO.ui.ToolGroup} toolGroup
+ * @param {jQuery} $group Container node, assigned to #$group
* @param {Object} [config] Configuration options
- * @cfg {string|Function} [title] Title text or a function that returns text
*/
-OO.ui.Tool = function OoUiTool( toolGroup, config ) {
- // Config intialization
+OO.ui.GroupElement = function OoUiGroupElement( $group, config ) {
+ // Configuration
config = config || {};
- // Parent constructor
- OO.ui.Tool.super.call( this, config );
-
- // Mixin constructors
- OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
-
// Properties
- this.toolGroup = toolGroup;
- this.toolbar = this.toolGroup.getToolbar();
- this.active = false;
- this.$title = this.$( '<span>' );
- this.$link = this.$( '<a>' );
- this.title = null;
-
- // Events
- this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );
-
- // Initialization
- this.$title.addClass( 'oo-ui-tool-title' );
- this.$link
- .addClass( 'oo-ui-tool-link' )
- .append( this.$icon, this.$title )
- .prop( 'tabIndex', 0 )
- .attr( 'role', 'button' );
- this.$element
- .data( 'oo-ui-tool', this )
- .addClass(
- 'oo-ui-tool ' + 'oo-ui-tool-name-' +
- this.constructor.static.name.replace( /^([^\/]+)\/([^\/]+).*$/, '$1-$2' )
- )
- .append( this.$link );
- this.setTitle( config.title || this.constructor.static.title );
+ this.$group = $group;
+ this.items = [];
+ this.aggregateItemEvents = {};
};
-/* Setup */
-
-OO.inheritClass( OO.ui.Tool, OO.ui.Widget );
-OO.mixinClass( OO.ui.Tool, OO.ui.IconedElement );
-
-/* Events */
-
-/**
- * @event select
- */
-
-/* Static Properties */
-
-/**
- * @static
- * @inheritdoc
- */
-OO.ui.Tool.static.tagName = 'span';
-
-/**
- * Symbolic name of tool.
- *
- * @abstract
- * @static
- * @inheritable
- * @property {string}
- */
-OO.ui.Tool.static.name = '';
+/* Methods */
/**
- * Tool group.
+ * Get items.
*
- * @abstract
- * @static
- * @inheritable
- * @property {string}
+ * @return {OO.ui.Element[]} Items
*/
-OO.ui.Tool.static.group = '';
+OO.ui.GroupElement.prototype.getItems = function () {
+ return this.items.slice( 0 );
+};
/**
- * Tool title.
+ * Add an aggregate item event.
*
- * Title is used as a tooltip when the tool is part of a bar tool group, or a label when the tool
- * is part of a list or menu tool group. If a trigger is associated with an action by the same name
- * as the tool, a description of its keyboard shortcut for the appropriate platform will be
- * appended to the title if the tool is part of a bar tool group.
+ * Aggregated events are listened to on each item and then emitted by the group under a new name,
+ * and with an additional leading parameter containing the item that emitted the original event.
+ * Other arguments that were emitted from the original event are passed through.
*
- * @abstract
- * @static
- * @inheritable
- * @property {string|Function} Title text or a function that returns text
+ * @param {Object.<string,string|null>} events Aggregate events emitted by group, keyed by item
+ * event, use null value to remove aggregation
+ * @throws {Error} If aggregation already exists
*/
-OO.ui.Tool.static.title = '';
+OO.ui.GroupElement.prototype.aggregate = function ( events ) {
+ var i, len, item, add, remove, itemEvent, groupEvent;
-/**
- * Tool can be automatically added to catch-all groups.
- *
- * @static
- * @inheritable
- * @property {boolean}
- */
-OO.ui.Tool.static.autoAddToCatchall = true;
+ for ( itemEvent in events ) {
+ groupEvent = events[itemEvent];
-/**
- * Tool can be automatically added to named groups.
- *
- * @static
- * @property {boolean}
- * @inheritable
- */
-OO.ui.Tool.static.autoAddToGroup = true;
+ // Remove existing aggregated event
+ if ( itemEvent in this.aggregateItemEvents ) {
+ // Don't allow duplicate aggregations
+ if ( groupEvent ) {
+ throw new Error( 'Duplicate item event aggregation for ' + itemEvent );
+ }
+ // Remove event aggregation from existing items
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ item = this.items[i];
+ if ( item.connect && item.disconnect ) {
+ remove = {};
+ remove[itemEvent] = [ 'emit', groupEvent, item ];
+ item.disconnect( this, remove );
+ }
+ }
+ // Prevent future items from aggregating event
+ delete this.aggregateItemEvents[itemEvent];
+ }
-/**
- * Check if this tool is compatible with given data.
- *
- * @static
- * @inheritable
- * @param {Mixed} data Data to check
- * @return {boolean} Tool can be used with data
- */
-OO.ui.Tool.static.isCompatibleWith = function () {
- return false;
+ // Add new aggregate event
+ if ( groupEvent ) {
+ // Make future items aggregate event
+ this.aggregateItemEvents[itemEvent] = groupEvent;
+ // Add event aggregation to existing items
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ item = this.items[i];
+ if ( item.connect && item.disconnect ) {
+ add = {};
+ add[itemEvent] = [ 'emit', groupEvent, item ];
+ item.connect( this, add );
+ }
+ }
+ }
+ }
};
-/* Methods */
-
/**
- * Handle the toolbar state being updated.
- *
- * This is an abstract method that must be overridden in a concrete subclass.
+ * Add items.
*
- * @abstract
+ * @param {OO.ui.Element[]} items Item
+ * @param {number} [index] Index to insert items at
+ * @chainable
*/
-OO.ui.Tool.prototype.onUpdateState = function () {
- throw new Error(
- 'OO.ui.Tool.onUpdateState not implemented in this subclass:' + this.constructor
- );
-};
+OO.ui.GroupElement.prototype.addItems = function ( items, index ) {
+ var i, len, item, event, events, currentIndex,
+ itemElements = [];
-/**
- * Handle the tool being selected.
- *
- * This is an abstract method that must be overridden in a concrete subclass.
- *
- * @abstract
- */
-OO.ui.Tool.prototype.onSelect = function () {
- throw new Error(
- 'OO.ui.Tool.onSelect not implemented in this subclass:' + this.constructor
- );
-};
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
-/**
- * Check if the button is active.
- *
- * @param {boolean} Button is active
- */
-OO.ui.Tool.prototype.isActive = function () {
- return this.active;
-};
+ // Check if item exists then remove it first, effectively "moving" it
+ currentIndex = $.inArray( item, this.items );
+ if ( currentIndex >= 0 ) {
+ this.removeItems( [ item ] );
+ // Adjust index to compensate for removal
+ if ( currentIndex < index ) {
+ index--;
+ }
+ }
+ // Add the item
+ if ( item.connect && item.disconnect && !$.isEmptyObject( this.aggregateItemEvents ) ) {
+ events = {};
+ for ( event in this.aggregateItemEvents ) {
+ events[event] = [ 'emit', this.aggregateItemEvents[event], item ];
+ }
+ item.connect( this, events );
+ }
+ item.setElementGroup( this );
+ itemElements.push( item.$element.get( 0 ) );
+ }
-/**
- * Make the button appear active or inactive.
- *
- * @param {boolean} state Make button appear active
- */
-OO.ui.Tool.prototype.setActive = function ( state ) {
- this.active = !!state;
- if ( this.active ) {
- this.$element.addClass( 'oo-ui-tool-active' );
+ if ( index === undefined || index < 0 || index >= this.items.length ) {
+ this.$group.append( itemElements );
+ this.items.push.apply( this.items, items );
+ } else if ( index === 0 ) {
+ this.$group.prepend( itemElements );
+ this.items.unshift.apply( this.items, items );
} else {
- this.$element.removeClass( 'oo-ui-tool-active' );
+ this.items[index].$element.before( itemElements );
+ this.items.splice.apply( this.items, [ index, 0 ].concat( items ) );
}
+
+ return this;
};
/**
- * Get the tool title.
+ * Remove items.
*
- * @param {string|Function} title Title text or a function that returns text
+ * Items will be detached, not removed, so they can be used later.
+ *
+ * @param {OO.ui.Element[]} items Items to remove
* @chainable
*/
-OO.ui.Tool.prototype.setTitle = function ( title ) {
- this.title = OO.ui.resolveMsg( title );
- this.updateTitle();
+OO.ui.GroupElement.prototype.removeItems = function ( items ) {
+ var i, len, item, index, remove, itemEvent;
+
+ // Remove specific items
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
+ index = $.inArray( item, this.items );
+ if ( index !== -1 ) {
+ if (
+ item.connect && item.disconnect &&
+ !$.isEmptyObject( this.aggregateItemEvents )
+ ) {
+ remove = {};
+ if ( itemEvent in this.aggregateItemEvents ) {
+ remove[itemEvent] = [ 'emit', this.aggregateItemEvents[itemEvent], item ];
+ }
+ item.disconnect( this, remove );
+ }
+ item.setElementGroup( null );
+ this.items.splice( index, 1 );
+ item.$element.detach();
+ }
+ }
+
return this;
};
/**
- * Get the tool title.
+ * Clear all items.
*
- * @return {string} Title text
- */
-OO.ui.Tool.prototype.getTitle = function () {
- return this.title;
-};
-
-/**
- * Get the tool's symbolic name.
+ * Items will be detached, not removed, so they can be used later.
*
- * @return {string} Symbolic name of tool
- */
-OO.ui.Tool.prototype.getName = function () {
- return this.constructor.static.name;
-};
-
-/**
- * Update the title.
+ * @chainable
*/
-OO.ui.Tool.prototype.updateTitle = function () {
- var titleTooltips = this.toolGroup.constructor.static.titleTooltips,
- accelTooltips = this.toolGroup.constructor.static.accelTooltips,
- accel = this.toolbar.getToolAccelerator( this.constructor.static.name ),
- tooltipParts = [];
-
- this.$title.empty()
- .text( this.title )
- .append(
- this.$( '<span>' )
- .addClass( 'oo-ui-tool-accel' )
- .text( accel )
- );
+OO.ui.GroupElement.prototype.clearItems = function () {
+ var i, len, item, remove, itemEvent;
- if ( titleTooltips && typeof this.title === 'string' && this.title.length ) {
- tooltipParts.push( this.title );
- }
- if ( accelTooltips && typeof accel === 'string' && accel.length ) {
- tooltipParts.push( accel );
- }
- if ( tooltipParts.length ) {
- this.$link.attr( 'title', tooltipParts.join( ' ' ) );
- } else {
- this.$link.removeAttr( 'title' );
+ // Remove all items
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ item = this.items[i];
+ if (
+ item.connect && item.disconnect &&
+ !$.isEmptyObject( this.aggregateItemEvents )
+ ) {
+ remove = {};
+ if ( itemEvent in this.aggregateItemEvents ) {
+ remove[itemEvent] = [ 'emit', this.aggregateItemEvents[itemEvent], item ];
+ }
+ item.disconnect( this, remove );
+ }
+ item.setElementGroup( null );
+ item.$element.detach();
}
-};
-/**
- * Destroy tool.
- */
-OO.ui.Tool.prototype.destroy = function () {
- this.toolbar.disconnect( this );
- this.$element.remove();
+ this.items = [];
+ return this;
};
/**
- * Collection of tool groups.
+ * Element containing an icon.
+ *
+ * Icons are graphics, about the size of normal text. They can be used to aid the user in locating
+ * a control or convey information in a more space efficient way. Icons should rarely be used
+ * without labels; such as in a toolbar where space is at a premium or within a context where the
+ * meaning is very clear to the user.
*
+ * @abstract
* @class
- * @extends OO.ui.Element
- * @mixins OO.EventEmitter
- * @mixins OO.ui.GroupElement
*
* @constructor
- * @param {OO.ui.ToolFactory} toolFactory Factory for creating tools
- * @param {OO.ui.ToolGroupFactory} toolGroupFactory Factory for creating tool groups
+ * @param {jQuery} $icon Icon node, assigned to #$icon
* @param {Object} [config] Configuration options
- * @cfg {boolean} [actions] Add an actions section opposite to the tools
- * @cfg {boolean} [shadow] Add a shadow below the toolbar
+ * @cfg {Object|string} [icon=''] Symbolic icon name, or map of icon names keyed by language ID;
+ * use the 'default' key to specify the icon to be used when there is no icon in the user's
+ * language
*/
-OO.ui.Toolbar = function OoUiToolbar( toolFactory, toolGroupFactory, config ) {
- // Configuration initialization
+OO.ui.IconedElement = function OoUiIconedElement( $icon, config ) {
+ // Config intialization
config = config || {};
- // Parent constructor
- OO.ui.Toolbar.super.call( this, config );
-
- // Mixin constructors
- OO.EventEmitter.call( this );
- OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
-
// Properties
- this.toolFactory = toolFactory;
- this.toolGroupFactory = toolGroupFactory;
- this.groups = [];
- this.tools = {};
- this.$bar = this.$( '<div>' );
- this.$actions = this.$( '<div>' );
- this.initialized = false;
-
- // Events
- this.$element
- .add( this.$bar ).add( this.$group ).add( this.$actions )
- .on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
+ this.$icon = $icon;
+ this.icon = null;
// Initialization
- this.$group.addClass( 'oo-ui-toolbar-tools' );
- this.$bar.addClass( 'oo-ui-toolbar-bar' ).append( this.$group );
- if ( config.actions ) {
- this.$actions.addClass( 'oo-ui-toolbar-actions' );
- this.$bar.append( this.$actions );
- }
- this.$bar.append( '<div style="clear:both"></div>' );
- if ( config.shadow ) {
- this.$bar.append( '<div class="oo-ui-toolbar-shadow"></div>' );
- }
- this.$element.addClass( 'oo-ui-toolbar' ).append( this.$bar );
+ this.$icon.addClass( 'oo-ui-iconedElement-icon' );
+ this.setIcon( config.icon || this.constructor.static.icon );
};
/* Setup */
-OO.inheritClass( OO.ui.Toolbar, OO.ui.Element );
-OO.mixinClass( OO.ui.Toolbar, OO.EventEmitter );
-OO.mixinClass( OO.ui.Toolbar, OO.ui.GroupElement );
+OO.initClass( OO.ui.IconedElement );
-/* Methods */
+/* Static Properties */
/**
- * Get the tool factory.
+ * Icon.
*
- * @return {OO.ui.ToolFactory} Tool factory
+ * Value should be the unique portion of an icon CSS class name, such as 'up' for 'oo-ui-icon-up'.
+ *
+ * For i18n purposes, this property can be an object containing a `default` icon name property and
+ * additional icon names keyed by language code.
+ *
+ * Example of i18n icon definition:
+ * { default: 'bold-a', en: 'bold-b', de: 'bold-f' }
+ *
+ * @static
+ * @inheritable
+ * @property {Object|string} Symbolic icon name, or map of icon names keyed by language ID;
+ * use the 'default' key to specify the icon to be used when there is no icon in the user's
+ * language
*/
-OO.ui.Toolbar.prototype.getToolFactory = function () {
- return this.toolFactory;
-};
+OO.ui.IconedElement.static.icon = null;
+
+/* Methods */
/**
- * Get the tool group factory.
+ * Set icon.
*
- * @return {OO.Factory} Tool group factory
- */
-OO.ui.Toolbar.prototype.getToolGroupFactory = function () {
- return this.toolGroupFactory;
-};
-
-/**
- * Handles mouse down events.
- *
- * @param {jQuery.Event} e Mouse down event
+ * @param {Object|string} icon Symbolic icon name, or map of icon names keyed by language ID;
+ * use the 'default' key to specify the icon to be used when there is no icon in the user's
+ * language
+ * @chainable
*/
-OO.ui.Toolbar.prototype.onMouseDown = function ( e ) {
- var $closestWidgetToEvent = this.$( e.target ).closest( '.oo-ui-widget' ),
- $closestWidgetToToolbar = this.$element.closest( '.oo-ui-widget' );
- if ( !$closestWidgetToEvent.length || $closestWidgetToEvent[0] === $closestWidgetToToolbar[0] ) {
- return false;
+OO.ui.IconedElement.prototype.setIcon = function ( icon ) {
+ icon = OO.isPlainObject( icon ) ? OO.ui.getLocalValue( icon, null, 'default' ) : icon;
+
+ if ( this.icon ) {
+ this.$icon.removeClass( 'oo-ui-icon-' + this.icon );
+ }
+ if ( typeof icon === 'string' ) {
+ icon = icon.trim();
+ if ( icon.length ) {
+ this.$icon.addClass( 'oo-ui-icon-' + icon );
+ this.icon = icon;
+ }
}
+ this.$element.toggleClass( 'oo-ui-iconedElement', !!this.icon );
+
+ return this;
};
/**
- * Sets up handles and preloads required information for the toolbar to work.
- * This must be called immediately after it is attached to a visible document.
+ * Get icon.
+ *
+ * @return {string} Icon
*/
-OO.ui.Toolbar.prototype.initialize = function () {
- this.initialized = true;
+OO.ui.IconedElement.prototype.getIcon = function () {
+ return this.icon;
};
/**
- * Setup toolbar.
+ * Element containing an indicator.
*
- * Tools can be specified in the following ways:
+ * Indicators are graphics, smaller than normal text. They can be used to describe unique status or
+ * behavior. Indicators should only be used in exceptional cases; such as a button that opens a menu
+ * instead of performing an action directly, or an item in a list which has errors that need to be
+ * resolved.
*
- * - A specific tool: `{ 'name': 'tool-name' }` or `'tool-name'`
- * - All tools in a group: `{ 'group': 'group-name' }`
- * - All tools: `'*'` - Using this will make the group a list with a "More" label by default
+ * @abstract
+ * @class
*
- * @param {Object.<string,Array>} groups List of tool group configurations
- * @param {Array|string} [groups.include] Tools to include
- * @param {Array|string} [groups.exclude] Tools to exclude
- * @param {Array|string} [groups.promote] Tools to promote to the beginning
- * @param {Array|string} [groups.demote] Tools to demote to the end
+ * @constructor
+ * @param {jQuery} $indicator Indicator node, assigned to #$indicator
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [indicator] Symbolic indicator name
+ * @cfg {string} [indicatorTitle] Indicator title text or a function that return text
*/
-OO.ui.Toolbar.prototype.setup = function ( groups ) {
- var i, len, type, group,
- items = [],
- defaultType = 'bar';
+OO.ui.IndicatedElement = function OoUiIndicatedElement( $indicator, config ) {
+ // Config intialization
+ config = config || {};
- // Cleanup previous groups
- this.reset();
+ // Properties
+ this.$indicator = $indicator;
+ this.indicator = null;
+ this.indicatorLabel = null;
- // Build out new groups
- for ( i = 0, len = groups.length; i < len; i++ ) {
- group = groups[i];
- if ( group.include === '*' ) {
- // Apply defaults to catch-all groups
- if ( group.type === undefined ) {
- group.type = 'list';
- }
- if ( group.label === undefined ) {
- group.label = 'ooui-toolbar-more';
- }
- }
- // Check type has been registered
- type = this.getToolGroupFactory().lookup( group.type ) ? group.type : defaultType;
- items.push(
- this.getToolGroupFactory().create( type, this, $.extend( { '$': this.$ }, group ) )
- );
- }
- this.addItems( items );
+ // Initialization
+ this.$indicator.addClass( 'oo-ui-indicatedElement-indicator' );
+ this.setIndicator( config.indicator || this.constructor.static.indicator );
+ this.setIndicatorTitle( config.indicatorTitle || this.constructor.static.indicatorTitle );
};
+/* Setup */
+
+OO.initClass( OO.ui.IndicatedElement );
+
+/* Static Properties */
+
/**
- * Remove all tools and groups from the toolbar.
+ * indicator.
+ *
+ * @static
+ * @inheritable
+ * @property {string|null} Symbolic indicator name or null for no indicator
*/
-OO.ui.Toolbar.prototype.reset = function () {
- var i, len;
-
- this.groups = [];
- this.tools = {};
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- this.items[i].destroy();
- }
- this.clearItems();
-};
+OO.ui.IndicatedElement.static.indicator = null;
/**
- * Destroys toolbar, removing event handlers and DOM elements.
+ * Indicator title.
*
- * Call this whenever you are done using a toolbar.
+ * @static
+ * @inheritable
+ * @property {string|Function|null} Indicator title text, a function that return text or null for no
+ * indicator title
*/
-OO.ui.Toolbar.prototype.destroy = function () {
- this.reset();
- this.$element.remove();
-};
+OO.ui.IndicatedElement.static.indicatorTitle = null;
+
+/* Methods */
/**
- * Check if tool has not been used yet.
+ * Set indicator.
*
- * @param {string} name Symbolic name of tool
- * @return {boolean} Tool is available
+ * @param {string|null} indicator Symbolic name of indicator to use or null for no indicator
+ * @chainable
*/
-OO.ui.Toolbar.prototype.isToolAvailable = function ( name ) {
- return !this.tools[name];
+OO.ui.IndicatedElement.prototype.setIndicator = function ( indicator ) {
+ if ( this.indicator ) {
+ this.$indicator.removeClass( 'oo-ui-indicator-' + this.indicator );
+ this.indicator = null;
+ }
+ if ( typeof indicator === 'string' ) {
+ indicator = indicator.trim();
+ if ( indicator.length ) {
+ this.$indicator.addClass( 'oo-ui-indicator-' + indicator );
+ this.indicator = indicator;
+ }
+ }
+ this.$element.toggleClass( 'oo-ui-indicatedElement', !!this.indicator );
+
+ return this;
};
/**
- * Prevent tool from being used again.
+ * Set indicator label.
*
- * @param {OO.ui.Tool} tool Tool to reserve
+ * @param {string|Function|null} indicator Indicator title text, a function that return text or null
+ * for no indicator title
+ * @chainable
*/
-OO.ui.Toolbar.prototype.reserveTool = function ( tool ) {
- this.tools[tool.getName()] = tool;
+OO.ui.IndicatedElement.prototype.setIndicatorTitle = function ( indicatorTitle ) {
+ this.indicatorTitle = indicatorTitle = OO.ui.resolveMsg( indicatorTitle );
+
+ if ( typeof indicatorTitle === 'string' && indicatorTitle.length ) {
+ this.$indicator.attr( 'title', indicatorTitle );
+ } else {
+ this.$indicator.removeAttr( 'title' );
+ }
+
+ return this;
};
/**
- * Allow tool to be used again.
+ * Get indicator.
*
- * @param {OO.ui.Tool} tool Tool to release
+ * @return {string} title Symbolic name of indicator
*/
-OO.ui.Toolbar.prototype.releaseTool = function ( tool ) {
- delete this.tools[tool.getName()];
+OO.ui.IndicatedElement.prototype.getIndicator = function () {
+ return this.indicator;
};
/**
- * Get accelerator label for tool.
- *
- * This is a stub that should be overridden to provide access to accelerator information.
+ * Get indicator title.
*
- * @param {string} name Symbolic name of tool
- * @return {string|undefined} Tool accelerator label if available
+ * @return {string} Indicator title text
*/
-OO.ui.Toolbar.prototype.getToolAccelerator = function () {
- return undefined;
+OO.ui.IndicatedElement.prototype.getIndicatorTitle = function () {
+ return this.indicatorTitle;
};
/**
- * Factory for tools.
+ * Element containing a label.
*
+ * @abstract
* @class
- * @extends OO.Factory
+ *
* @constructor
+ * @param {jQuery} $label Label node, assigned to #$label
+ * @param {Object} [config] Configuration options
+ * @cfg {jQuery|string|Function} [label] Label nodes, text or a function that returns nodes or text
+ * @cfg {boolean} [autoFitLabel=true] Whether to fit the label or not.
*/
-OO.ui.ToolFactory = function OoUiToolFactory() {
- // Parent constructor
- OO.ui.ToolFactory.super.call( this );
-};
-
-/* Setup */
+OO.ui.LabeledElement = function OoUiLabeledElement( $label, config ) {
+ // Config intialization
+ config = config || {};
-OO.inheritClass( OO.ui.ToolFactory, OO.Factory );
+ // Properties
+ this.$label = $label;
+ this.label = null;
-/* Methods */
+ // Initialization
+ this.$label.addClass( 'oo-ui-labeledElement-label' );
+ this.setLabel( config.label || this.constructor.static.label );
+ this.autoFitLabel = config.autoFitLabel === undefined || !!config.autoFitLabel;
+};
-/** */
-OO.ui.ToolFactory.prototype.getTools = function ( include, exclude, promote, demote ) {
- var i, len, included, promoted, demoted,
- auto = [],
- used = {};
+/* Setup */
- // Collect included and not excluded tools
- included = OO.simpleArrayDifference( this.extract( include ), this.extract( exclude ) );
+OO.initClass( OO.ui.LabeledElement );
- // Promotion
- promoted = this.extract( promote, used );
- demoted = this.extract( demote, used );
+/* Static Properties */
- // Auto
- for ( i = 0, len = included.length; i < len; i++ ) {
- if ( !used[included[i]] ) {
- auto.push( included[i] );
- }
- }
+/**
+ * Label.
+ *
+ * @static
+ * @inheritable
+ * @property {string|Function|null} Label text; a function that returns a nodes or text; or null for
+ * no label
+ */
+OO.ui.LabeledElement.static.label = null;
- return promoted.concat( auto ).concat( demoted );
-};
+/* Methods */
/**
- * Get a flat list of names from a list of names or groups.
- *
- * Tools can be specified in the following ways:
+ * Set the label.
*
- * - A specific tool: `{ 'name': 'tool-name' }` or `'tool-name'`
- * - All tools in a group: `{ 'group': 'group-name' }`
- * - All tools: `'*'`
+ * An empty string will result in the label being hidden. A string containing only whitespace will
+ * be converted to a single
*
- * @private
- * @param {Array|string} collection List of tools
- * @param {Object} [used] Object with names that should be skipped as properties; extracted
- * names will be added as properties
- * @return {string[]} List of extracted names
+ * @param {jQuery|string|Function|null} label Label nodes; text; a function that retuns nodes or
+ * text; or null for no label
+ * @chainable
*/
-OO.ui.ToolFactory.prototype.extract = function ( collection, used ) {
- var i, len, item, name, tool,
- names = [];
+OO.ui.LabeledElement.prototype.setLabel = function ( label ) {
+ var empty = false;
- if ( collection === '*' ) {
- for ( name in this.registry ) {
- tool = this.registry[name];
- if (
- // Only add tools by group name when auto-add is enabled
- tool.static.autoAddToCatchall &&
- // Exclude already used tools
- ( !used || !used[name] )
- ) {
- names.push( name );
- if ( used ) {
- used[name] = true;
- }
- }
- }
- } else if ( $.isArray( collection ) ) {
- for ( i = 0, len = collection.length; i < len; i++ ) {
- item = collection[i];
- // Allow plain strings as shorthand for named tools
- if ( typeof item === 'string' ) {
- item = { 'name': item };
- }
- if ( OO.isPlainObject( item ) ) {
- if ( item.group ) {
- for ( name in this.registry ) {
- tool = this.registry[name];
- if (
- // Include tools with matching group
- tool.static.group === item.group &&
- // Only add tools by group name when auto-add is enabled
- tool.static.autoAddToGroup &&
- // Exclude already used tools
- ( !used || !used[name] )
- ) {
- names.push( name );
- if ( used ) {
- used[name] = true;
- }
- }
- }
- // Include tools with matching name and exclude already used tools
- } else if ( item.name && ( !used || !used[item.name] ) ) {
- names.push( item.name );
- if ( used ) {
- used[item.name] = true;
- }
- }
- }
+ this.label = label = OO.ui.resolveMsg( label ) || null;
+ if ( typeof label === 'string' && label.length ) {
+ if ( label.match( /^\s*$/ ) ) {
+ // Convert whitespace only string to a single non-breaking space
+ this.$label.html( ' ' );
+ } else {
+ this.$label.text( label );
}
+ } else if ( label instanceof jQuery ) {
+ this.$label.empty().append( label );
+ } else {
+ this.$label.empty();
+ empty = true;
}
- return names;
+ this.$element.toggleClass( 'oo-ui-labeledElement', !empty );
+ this.$label.css( 'display', empty ? 'none' : '' );
+
+ return this;
};
/**
- * Collection of tools.
+ * Get the label.
*
- * Tools can be specified in the following ways:
+ * @return {jQuery|string|Function|null} label Label nodes; text; a function that returns nodes or
+ * text; or null for no label
+ */
+OO.ui.LabeledElement.prototype.getLabel = function () {
+ return this.label;
+};
+
+/**
+ * Fit the label.
*
- * - A specific tool: `{ 'name': 'tool-name' }` or `'tool-name'`
- * - All tools in a group: `{ 'group': 'group-name' }`
- * - All tools: `'*'`
+ * @chainable
+ */
+OO.ui.LabeledElement.prototype.fitLabel = function () {
+ if ( this.$label.autoEllipsis && this.autoFitLabel ) {
+ this.$label.autoEllipsis( { hasSpan: false, tooltip: true } );
+ }
+ return this;
+};
+
+/**
+ * Element containing an OO.ui.PopupWidget object.
*
* @abstract
* @class
- * @extends OO.ui.Widget
- * @mixins OO.ui.GroupElement
*
* @constructor
- * @param {OO.ui.Toolbar} toolbar
* @param {Object} [config] Configuration options
- * @cfg {Array|string} [include=[]] List of tools to include
- * @cfg {Array|string} [exclude=[]] List of tools to exclude
- * @cfg {Array|string} [promote=[]] List of tools to promote to the beginning
- * @cfg {Array|string} [demote=[]] List of tools to demote to the end
+ * @cfg {Object} [popup] Configuration to pass to popup
+ * @cfg {boolean} [autoClose=true] Popup auto-closes when it loses focus
*/
-OO.ui.ToolGroup = function OoUiToolGroup( toolbar, config ) {
+OO.ui.PopuppableElement = function OoUiPopuppableElement( config ) {
// Configuration initialization
config = config || {};
- // Parent constructor
- OO.ui.ToolGroup.super.call( this, config );
-
- // Mixin constructors
- OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
-
// Properties
- this.toolbar = toolbar;
- this.tools = {};
- this.pressed = null;
- this.autoDisabled = false;
- this.include = config.include || [];
- this.exclude = config.exclude || [];
- this.promote = config.promote || [];
- this.demote = config.demote || [];
- this.onCapturedMouseUpHandler = OO.ui.bind( this.onCapturedMouseUp, this );
-
- // Events
- this.$element.on( {
- 'mousedown': OO.ui.bind( this.onMouseDown, this ),
- 'mouseup': OO.ui.bind( this.onMouseUp, this ),
- 'mouseover': OO.ui.bind( this.onMouseOver, this ),
- 'mouseout': OO.ui.bind( this.onMouseOut, this )
- } );
- this.toolbar.getToolFactory().connect( this, { 'register': 'onToolFactoryRegister' } );
- this.aggregate( { 'disable': 'itemDisable' } );
- this.connect( this, { 'itemDisable': 'updateDisabled' } );
-
- // Initialization
- this.$group.addClass( 'oo-ui-toolGroup-tools' );
- this.$element
- .addClass( 'oo-ui-toolGroup' )
- .append( this.$group );
- this.populate();
+ this.popup = new OO.ui.PopupWidget( $.extend(
+ { autoClose: true },
+ config.popup,
+ { $: this.$, $autoCloseIgnore: this.$element }
+ ) );
};
-/* Setup */
-
-OO.inheritClass( OO.ui.ToolGroup, OO.ui.Widget );
-OO.mixinClass( OO.ui.ToolGroup, OO.ui.GroupElement );
-
-/* Events */
-
-/**
- * @event update
- */
-
-/* Static Properties */
+/* Methods */
/**
- * Show labels in tooltips.
+ * Get popup.
*
- * @static
- * @inheritable
- * @property {boolean}
+ * @return {OO.ui.PopupWidget} Popup widget
*/
-OO.ui.ToolGroup.static.titleTooltips = false;
+OO.ui.PopuppableElement.prototype.getPopup = function () {
+ return this.popup;
+};
/**
- * Show acceleration labels in tooltips.
+ * Element with a title.
*
- * @static
- * @inheritable
- * @property {boolean}
+ * Titles are rendered by the browser and are made visible when hovering the element. Titles are
+ * not visible on touch devices.
+ *
+ * @abstract
+ * @class
+ *
+ * @constructor
+ * @param {jQuery} $label Titled node, assigned to #$titled
+ * @param {Object} [config] Configuration options
+ * @cfg {string|Function} [title] Title text or a function that returns text
*/
-OO.ui.ToolGroup.static.accelTooltips = false;
+OO.ui.TitledElement = function OoUiTitledElement( $titled, config ) {
+ // Config intialization
+ config = config || {};
+
+ // Properties
+ this.$titled = $titled;
+ this.title = null;
+
+ // Initialization
+ this.setTitle( config.title || this.constructor.static.title );
+};
+
+/* Setup */
+
+OO.initClass( OO.ui.TitledElement );
+
+/* Static Properties */
/**
- * Automatically disable the toolgroup when all tools are disabled
+ * Title.
*
* @static
* @inheritable
- * @property {boolean}
+ * @property {string|Function} Title text or a function that returns text
*/
-OO.ui.ToolGroup.static.autoDisable = true;
+OO.ui.TitledElement.static.title = null;
/* Methods */
/**
- * @inheritdoc
- */
-OO.ui.ToolGroup.prototype.isDisabled = function () {
- return this.autoDisabled || OO.ui.ToolGroup.super.prototype.isDisabled.apply( this, arguments );
-};
-
-/**
- * @inheritdoc
+ * Set title.
+ *
+ * @param {string|Function|null} title Title text, a function that returns text or null for no title
+ * @chainable
*/
-OO.ui.ToolGroup.prototype.updateDisabled = function () {
- var i, item, allDisabled = true;
+OO.ui.TitledElement.prototype.setTitle = function ( title ) {
+ this.title = title = OO.ui.resolveMsg( title ) || null;
- if ( this.constructor.static.autoDisable ) {
- for ( i = this.items.length - 1; i >= 0; i-- ) {
- item = this.items[i];
- if ( !item.isDisabled() ) {
- allDisabled = false;
- break;
- }
- }
- this.autoDisabled = allDisabled;
+ if ( typeof title === 'string' && title.length ) {
+ this.$titled.attr( 'title', title );
+ } else {
+ this.$titled.removeAttr( 'title' );
}
- OO.ui.ToolGroup.super.prototype.updateDisabled.apply( this, arguments );
-};
-/**
- * Handle mouse down events.
- *
- * @param {jQuery.Event} e Mouse down event
- */
-OO.ui.ToolGroup.prototype.onMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
- this.pressed = this.getTargetTool( e );
- if ( this.pressed ) {
- this.pressed.setActive( true );
- this.getElementDocument().addEventListener(
- 'mouseup', this.onCapturedMouseUpHandler, true
- );
- return false;
- }
- }
+ return this;
};
/**
- * Handle captured mouse up events.
+ * Get title.
*
- * @param {Event} e Mouse up event
+ * @return {string} Title string
*/
-OO.ui.ToolGroup.prototype.onCapturedMouseUp = function ( e ) {
- this.getElementDocument().removeEventListener( 'mouseup', this.onCapturedMouseUpHandler, true );
- // onMouseUp may be called a second time, depending on where the mouse is when the button is
- // released, but since `this.pressed` will no longer be true, the second call will be ignored.
- this.onMouseUp( e );
+OO.ui.TitledElement.prototype.getTitle = function () {
+ return this.title;
};
/**
- * Handle mouse up events.
+ * Generic toolbar tool.
*
- * @param {jQuery.Event} e Mouse up event
- */
-OO.ui.ToolGroup.prototype.onMouseUp = function ( e ) {
- var tool = this.getTargetTool( e );
-
- if ( !this.isDisabled() && e.which === 1 && this.pressed && this.pressed === tool ) {
+ * @abstract
+ * @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.IconedElement
+ *
+ * @constructor
+ * @param {OO.ui.ToolGroup} toolGroup
+ * @param {Object} [config] Configuration options
+ * @cfg {string|Function} [title] Title text or a function that returns text
+ */
+OO.ui.Tool = function OoUiTool( toolGroup, config ) {
+ // Config intialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.Tool.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
+
+ // Properties
+ this.toolGroup = toolGroup;
+ this.toolbar = this.toolGroup.getToolbar();
+ this.active = false;
+ this.$title = this.$( '<span>' );
+ this.$link = this.$( '<a>' );
+ this.title = null;
+
+ // Events
+ this.toolbar.connect( this, { updateState: 'onUpdateState' } );
+
+ // Initialization
+ this.$title.addClass( 'oo-ui-tool-title' );
+ this.$link
+ .addClass( 'oo-ui-tool-link' )
+ .append( this.$icon, this.$title )
+ .prop( 'tabIndex', 0 )
+ .attr( 'role', 'button' );
+ this.$element
+ .data( 'oo-ui-tool', this )
+ .addClass(
+ 'oo-ui-tool ' + 'oo-ui-tool-name-' +
+ this.constructor.static.name.replace( /^([^\/]+)\/([^\/]+).*$/, '$1-$2' )
+ )
+ .append( this.$link );
+ this.setTitle( config.title || this.constructor.static.title );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.Tool, OO.ui.Widget );
+OO.mixinClass( OO.ui.Tool, OO.ui.IconedElement );
+
+/* Events */
+
+/**
+ * @event select
+ */
+
+/* Static Properties */
+
+/**
+ * @static
+ * @inheritdoc
+ */
+OO.ui.Tool.static.tagName = 'span';
+
+/**
+ * Symbolic name of tool.
+ *
+ * @abstract
+ * @static
+ * @inheritable
+ * @property {string}
+ */
+OO.ui.Tool.static.name = '';
+
+/**
+ * Tool group.
+ *
+ * @abstract
+ * @static
+ * @inheritable
+ * @property {string}
+ */
+OO.ui.Tool.static.group = '';
+
+/**
+ * Tool title.
+ *
+ * Title is used as a tooltip when the tool is part of a bar tool group, or a label when the tool
+ * is part of a list or menu tool group. If a trigger is associated with an action by the same name
+ * as the tool, a description of its keyboard shortcut for the appropriate platform will be
+ * appended to the title if the tool is part of a bar tool group.
+ *
+ * @abstract
+ * @static
+ * @inheritable
+ * @property {string|Function} Title text or a function that returns text
+ */
+OO.ui.Tool.static.title = '';
+
+/**
+ * Tool can be automatically added to catch-all groups.
+ *
+ * @static
+ * @inheritable
+ * @property {boolean}
+ */
+OO.ui.Tool.static.autoAddToCatchall = true;
+
+/**
+ * Tool can be automatically added to named groups.
+ *
+ * @static
+ * @property {boolean}
+ * @inheritable
+ */
+OO.ui.Tool.static.autoAddToGroup = true;
+
+/**
+ * Check if this tool is compatible with given data.
+ *
+ * @static
+ * @inheritable
+ * @param {Mixed} data Data to check
+ * @return {boolean} Tool can be used with data
+ */
+OO.ui.Tool.static.isCompatibleWith = function () {
+ return false;
+};
+
+/* Methods */
+
+/**
+ * Handle the toolbar state being updated.
+ *
+ * This is an abstract method that must be overridden in a concrete subclass.
+ *
+ * @abstract
+ */
+OO.ui.Tool.prototype.onUpdateState = function () {
+ throw new Error(
+ 'OO.ui.Tool.onUpdateState not implemented in this subclass:' + this.constructor
+ );
+};
+
+/**
+ * Handle the tool being selected.
+ *
+ * This is an abstract method that must be overridden in a concrete subclass.
+ *
+ * @abstract
+ */
+OO.ui.Tool.prototype.onSelect = function () {
+ throw new Error(
+ 'OO.ui.Tool.onSelect not implemented in this subclass:' + this.constructor
+ );
+};
+
+/**
+ * Check if the button is active.
+ *
+ * @param {boolean} Button is active
+ */
+OO.ui.Tool.prototype.isActive = function () {
+ return this.active;
+};
+
+/**
+ * Make the button appear active or inactive.
+ *
+ * @param {boolean} state Make button appear active
+ */
+OO.ui.Tool.prototype.setActive = function ( state ) {
+ this.active = !!state;
+ if ( this.active ) {
+ this.$element.addClass( 'oo-ui-tool-active' );
+ } else {
+ this.$element.removeClass( 'oo-ui-tool-active' );
+ }
+};
+
+/**
+ * Get the tool title.
+ *
+ * @param {string|Function} title Title text or a function that returns text
+ * @chainable
+ */
+OO.ui.Tool.prototype.setTitle = function ( title ) {
+ this.title = OO.ui.resolveMsg( title );
+ this.updateTitle();
+ return this;
+};
+
+/**
+ * Get the tool title.
+ *
+ * @return {string} Title text
+ */
+OO.ui.Tool.prototype.getTitle = function () {
+ return this.title;
+};
+
+/**
+ * Get the tool's symbolic name.
+ *
+ * @return {string} Symbolic name of tool
+ */
+OO.ui.Tool.prototype.getName = function () {
+ return this.constructor.static.name;
+};
+
+/**
+ * Update the title.
+ */
+OO.ui.Tool.prototype.updateTitle = function () {
+ var titleTooltips = this.toolGroup.constructor.static.titleTooltips,
+ accelTooltips = this.toolGroup.constructor.static.accelTooltips,
+ accel = this.toolbar.getToolAccelerator( this.constructor.static.name ),
+ tooltipParts = [];
+
+ this.$title.empty()
+ .text( this.title )
+ .append(
+ this.$( '<span>' )
+ .addClass( 'oo-ui-tool-accel' )
+ .text( accel )
+ );
+
+ if ( titleTooltips && typeof this.title === 'string' && this.title.length ) {
+ tooltipParts.push( this.title );
+ }
+ if ( accelTooltips && typeof accel === 'string' && accel.length ) {
+ tooltipParts.push( accel );
+ }
+ if ( tooltipParts.length ) {
+ this.$link.attr( 'title', tooltipParts.join( ' ' ) );
+ } else {
+ this.$link.removeAttr( 'title' );
+ }
+};
+
+/**
+ * Destroy tool.
+ */
+OO.ui.Tool.prototype.destroy = function () {
+ this.toolbar.disconnect( this );
+ this.$element.remove();
+};
+
+/**
+ * Collection of tool groups.
+ *
+ * @class
+ * @extends OO.ui.Element
+ * @mixins OO.EventEmitter
+ * @mixins OO.ui.GroupElement
+ *
+ * @constructor
+ * @param {OO.ui.ToolFactory} toolFactory Factory for creating tools
+ * @param {OO.ui.ToolGroupFactory} toolGroupFactory Factory for creating tool groups
+ * @param {Object} [config] Configuration options
+ * @cfg {boolean} [actions] Add an actions section opposite to the tools
+ * @cfg {boolean} [shadow] Add a shadow below the toolbar
+ */
+OO.ui.Toolbar = function OoUiToolbar( toolFactory, toolGroupFactory, config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.Toolbar.super.call( this, config );
+
+ // Mixin constructors
+ OO.EventEmitter.call( this );
+ OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
+
+ // Properties
+ this.toolFactory = toolFactory;
+ this.toolGroupFactory = toolGroupFactory;
+ this.groups = [];
+ this.tools = {};
+ this.$bar = this.$( '<div>' );
+ this.$actions = this.$( '<div>' );
+ this.initialized = false;
+
+ // Events
+ this.$element
+ .add( this.$bar ).add( this.$group ).add( this.$actions )
+ .on( 'mousedown touchstart', OO.ui.bind( this.onPointerDown, this ) );
+
+ // Initialization
+ this.$group.addClass( 'oo-ui-toolbar-tools' );
+ this.$bar.addClass( 'oo-ui-toolbar-bar' ).append( this.$group );
+ if ( config.actions ) {
+ this.$actions.addClass( 'oo-ui-toolbar-actions' );
+ this.$bar.append( this.$actions );
+ }
+ this.$bar.append( '<div style="clear:both"></div>' );
+ if ( config.shadow ) {
+ this.$bar.append( '<div class="oo-ui-toolbar-shadow"></div>' );
+ }
+ this.$element.addClass( 'oo-ui-toolbar' ).append( this.$bar );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.Toolbar, OO.ui.Element );
+OO.mixinClass( OO.ui.Toolbar, OO.EventEmitter );
+OO.mixinClass( OO.ui.Toolbar, OO.ui.GroupElement );
+
+/* Methods */
+
+/**
+ * Get the tool factory.
+ *
+ * @return {OO.ui.ToolFactory} Tool factory
+ */
+OO.ui.Toolbar.prototype.getToolFactory = function () {
+ return this.toolFactory;
+};
+
+/**
+ * Get the tool group factory.
+ *
+ * @return {OO.Factory} Tool group factory
+ */
+OO.ui.Toolbar.prototype.getToolGroupFactory = function () {
+ return this.toolGroupFactory;
+};
+
+/**
+ * Handles mouse down events.
+ *
+ * @param {jQuery.Event} e Mouse down event
+ */
+OO.ui.Toolbar.prototype.onPointerDown = function ( e ) {
+ var $closestWidgetToEvent = this.$( e.target ).closest( '.oo-ui-widget' ),
+ $closestWidgetToToolbar = this.$element.closest( '.oo-ui-widget' );
+ if ( !$closestWidgetToEvent.length || $closestWidgetToEvent[0] === $closestWidgetToToolbar[0] ) {
+ return false;
+ }
+};
+
+/**
+ * Sets up handles and preloads required information for the toolbar to work.
+ * This must be called immediately after it is attached to a visible document.
+ */
+OO.ui.Toolbar.prototype.initialize = function () {
+ this.initialized = true;
+};
+
+/**
+ * Setup toolbar.
+ *
+ * Tools can be specified in the following ways:
+ *
+ * - A specific tool: `{ name: 'tool-name' }` or `'tool-name'`
+ * - All tools in a group: `{ group: 'group-name' }`
+ * - All tools: `'*'` - Using this will make the group a list with a "More" label by default
+ *
+ * @param {Object.<string,Array>} groups List of tool group configurations
+ * @param {Array|string} [groups.include] Tools to include
+ * @param {Array|string} [groups.exclude] Tools to exclude
+ * @param {Array|string} [groups.promote] Tools to promote to the beginning
+ * @param {Array|string} [groups.demote] Tools to demote to the end
+ */
+OO.ui.Toolbar.prototype.setup = function ( groups ) {
+ var i, len, type, group,
+ items = [],
+ defaultType = 'bar';
+
+ // Cleanup previous groups
+ this.reset();
+
+ // Build out new groups
+ for ( i = 0, len = groups.length; i < len; i++ ) {
+ group = groups[i];
+ if ( group.include === '*' ) {
+ // Apply defaults to catch-all groups
+ if ( group.type === undefined ) {
+ group.type = 'list';
+ }
+ if ( group.label === undefined ) {
+ group.label = 'ooui-toolbar-more';
+ }
+ }
+ // Check type has been registered
+ type = this.getToolGroupFactory().lookup( group.type ) ? group.type : defaultType;
+ items.push(
+ this.getToolGroupFactory().create( type, this, $.extend( { $: this.$ }, group ) )
+ );
+ }
+ this.addItems( items );
+};
+
+/**
+ * Remove all tools and groups from the toolbar.
+ */
+OO.ui.Toolbar.prototype.reset = function () {
+ var i, len;
+
+ this.groups = [];
+ this.tools = {};
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ this.items[i].destroy();
+ }
+ this.clearItems();
+};
+
+/**
+ * Destroys toolbar, removing event handlers and DOM elements.
+ *
+ * Call this whenever you are done using a toolbar.
+ */
+OO.ui.Toolbar.prototype.destroy = function () {
+ this.reset();
+ this.$element.remove();
+};
+
+/**
+ * Check if tool has not been used yet.
+ *
+ * @param {string} name Symbolic name of tool
+ * @return {boolean} Tool is available
+ */
+OO.ui.Toolbar.prototype.isToolAvailable = function ( name ) {
+ return !this.tools[name];
+};
+
+/**
+ * Prevent tool from being used again.
+ *
+ * @param {OO.ui.Tool} tool Tool to reserve
+ */
+OO.ui.Toolbar.prototype.reserveTool = function ( tool ) {
+ this.tools[tool.getName()] = tool;
+};
+
+/**
+ * Allow tool to be used again.
+ *
+ * @param {OO.ui.Tool} tool Tool to release
+ */
+OO.ui.Toolbar.prototype.releaseTool = function ( tool ) {
+ delete this.tools[tool.getName()];
+};
+
+/**
+ * Get accelerator label for tool.
+ *
+ * This is a stub that should be overridden to provide access to accelerator information.
+ *
+ * @param {string} name Symbolic name of tool
+ * @return {string|undefined} Tool accelerator label if available
+ */
+OO.ui.Toolbar.prototype.getToolAccelerator = function () {
+ return undefined;
+};
+
+/**
+ * Collection of tools.
+ *
+ * Tools can be specified in the following ways:
+ *
+ * - A specific tool: `{ name: 'tool-name' }` or `'tool-name'`
+ * - All tools in a group: `{ group: 'group-name' }`
+ * - All tools: `'*'`
+ *
+ * @abstract
+ * @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.GroupElement
+ *
+ * @constructor
+ * @param {OO.ui.Toolbar} toolbar
+ * @param {Object} [config] Configuration options
+ * @cfg {Array|string} [include=[]] List of tools to include
+ * @cfg {Array|string} [exclude=[]] List of tools to exclude
+ * @cfg {Array|string} [promote=[]] List of tools to promote to the beginning
+ * @cfg {Array|string} [demote=[]] List of tools to demote to the end
+ */
+OO.ui.ToolGroup = function OoUiToolGroup( toolbar, config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.ToolGroup.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
+
+ // Properties
+ this.toolbar = toolbar;
+ this.tools = {};
+ this.pressed = null;
+ this.autoDisabled = false;
+ this.include = config.include || [];
+ this.exclude = config.exclude || [];
+ this.promote = config.promote || [];
+ this.demote = config.demote || [];
+ this.onCapturedMouseUpHandler = OO.ui.bind( this.onCapturedMouseUp, this );
+
+ // Events
+ this.$element.on( {
+ 'mousedown touchstart': OO.ui.bind( this.onPointerDown, this ),
+ 'mouseup touchend': OO.ui.bind( this.onPointerUp, this ),
+ mouseover: OO.ui.bind( this.onMouseOver, this ),
+ mouseout: OO.ui.bind( this.onMouseOut, this )
+ } );
+ this.toolbar.getToolFactory().connect( this, { register: 'onToolFactoryRegister' } );
+ this.aggregate( { disable: 'itemDisable' } );
+ this.connect( this, { itemDisable: 'updateDisabled' } );
+
+ // Initialization
+ this.$group.addClass( 'oo-ui-toolGroup-tools' );
+ this.$element
+ .addClass( 'oo-ui-toolGroup' )
+ .append( this.$group );
+ this.populate();
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.ToolGroup, OO.ui.Widget );
+OO.mixinClass( OO.ui.ToolGroup, OO.ui.GroupElement );
+
+/* Events */
+
+/**
+ * @event update
+ */
+
+/* Static Properties */
+
+/**
+ * Show labels in tooltips.
+ *
+ * @static
+ * @inheritable
+ * @property {boolean}
+ */
+OO.ui.ToolGroup.static.titleTooltips = false;
+
+/**
+ * Show acceleration labels in tooltips.
+ *
+ * @static
+ * @inheritable
+ * @property {boolean}
+ */
+OO.ui.ToolGroup.static.accelTooltips = false;
+
+/**
+ * Automatically disable the toolgroup when all tools are disabled
+ *
+ * @static
+ * @inheritable
+ * @property {boolean}
+ */
+OO.ui.ToolGroup.static.autoDisable = true;
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.ToolGroup.prototype.isDisabled = function () {
+ return this.autoDisabled || OO.ui.ToolGroup.super.prototype.isDisabled.apply( this, arguments );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.ToolGroup.prototype.updateDisabled = function () {
+ var i, item, allDisabled = true;
+
+ if ( this.constructor.static.autoDisable ) {
+ for ( i = this.items.length - 1; i >= 0; i-- ) {
+ item = this.items[i];
+ if ( !item.isDisabled() ) {
+ allDisabled = false;
+ break;
+ }
+ }
+ this.autoDisabled = allDisabled;
+ }
+ OO.ui.ToolGroup.super.prototype.updateDisabled.apply( this, arguments );
+};
+
+/**
+ * Handle mouse down events.
+ *
+ * @param {jQuery.Event} e Mouse down event
+ */
+OO.ui.ToolGroup.prototype.onPointerDown = function ( e ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 ) {
+ this.pressed = this.getTargetTool( e );
+ if ( this.pressed ) {
+ this.pressed.setActive( true );
+ this.getElementDocument().addEventListener(
+ 'mouseup', this.onCapturedMouseUpHandler, true
+ );
+ }
+ }
+ return false;
+};
+
+/**
+ * Handle captured mouse up events.
+ *
+ * @param {Event} e Mouse up event
+ */
+OO.ui.ToolGroup.prototype.onCapturedMouseUp = function ( e ) {
+ this.getElementDocument().removeEventListener( 'mouseup', this.onCapturedMouseUpHandler, true );
+ // onPointerUp may be called a second time, depending on where the mouse is when the button is
+ // released, but since `this.pressed` will no longer be true, the second call will be ignored.
+ this.onPointerUp( e );
+};
+
+/**
+ * Handle mouse up events.
+ *
+ * @param {jQuery.Event} e Mouse up event
+ */
+OO.ui.ToolGroup.prototype.onPointerUp = function ( e ) {
+ var tool = this.getTargetTool( e );
+
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 && this.pressed && this.pressed === tool ) {
this.pressed.onSelect();
}
};
/**
- * Factory for tool groups.
+ * Dialog for showing a message.
+ *
+ * User interface:
+ * - Registers two actions by default (safe and primary).
+ * - Renders action widgets in the footer.
*
* @class
- * @extends OO.Factory
+ * @extends OO.ui.Dialog
+ *
* @constructor
+ * @param {Object} [config] Configuration options
*/
-OO.ui.ToolGroupFactory = function OoUiToolGroupFactory() {
+OO.ui.MessageDialog = function OoUiMessageDialog( manager, config ) {
// Parent constructor
- OO.Factory.call( this );
+ OO.ui.MessageDialog.super.call( this, manager, config );
- var i, l,
- defaultClasses = this.constructor.static.getDefaultClasses();
+ // Properties
+ this.verticalActionLayout = null;
- // Register default toolgroups
- for ( i = 0, l = defaultClasses.length; i < l; i++ ) {
- this.register( defaultClasses[i] );
+ // Initialization
+ this.$element.addClass( 'oo-ui-messageDialog' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( OO.ui.MessageDialog, OO.ui.Dialog );
+
+/* Static Properties */
+
+OO.ui.MessageDialog.static.name = 'message';
+
+OO.ui.MessageDialog.static.size = 'small';
+
+OO.ui.MessageDialog.static.verbose = false;
+
+/**
+ * Dialog title.
+ *
+ * A confirmation dialog's title should describe what the progressive action will do. An alert
+ * dialog's title should describe what event occured.
+ *
+ * @static
+ * inheritable
+ * @property {jQuery|string|Function|null}
+ */
+OO.ui.MessageDialog.static.title = null;
+
+/**
+ * A confirmation dialog's message should describe the consequences of the progressive action. An
+ * alert dialog's message should describe why the event occured.
+ *
+ * @static
+ * inheritable
+ * @property {jQuery|string|Function|null}
+ */
+OO.ui.MessageDialog.static.message = null;
+
+OO.ui.MessageDialog.static.actions = [
+ { action: 'accept', label: OO.ui.deferMsg( 'ooui-dialog-message-accept' ), flags: 'primary' },
+ { action: 'reject', label: OO.ui.deferMsg( 'ooui-dialog-message-reject' ), flags: 'safe' }
+];
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.onActionResize = function ( action ) {
+ this.fitActions();
+ return OO.ui.ProcessDialog.super.prototype.onActionResize.call( this, action );
+};
+
+/**
+ * Toggle action layout between vertical and horizontal.
+ *
+ * @param {boolean} [value] Layout actions vertically, omit to toggle
+ * @chainable
+ */
+OO.ui.MessageDialog.prototype.toggleVerticalActionLayout = function ( value ) {
+ value = value === undefined ? !this.verticalActionLayout : !!value;
+
+ if ( value !== this.verticalActionLayout ) {
+ this.verticalActionLayout = value;
+ this.$actions
+ .toggleClass( 'oo-ui-messageDialog-actions-vertical', value )
+ .toggleClass( 'oo-ui-messageDialog-actions-horizontal', !value );
}
+
+ return this;
};
-/* Setup */
+/**
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.getActionProcess = function ( action ) {
+ if ( action ) {
+ return new OO.ui.Process( function () {
+ this.close( { action: action } );
+ }, this );
+ }
+ return OO.ui.MessageDialog.super.prototype.getActionProcess.call( this, action );
+};
-OO.inheritClass( OO.ui.ToolGroupFactory, OO.Factory );
+/**
+ * @inheritdoc
+ *
+ * @param {Object} [data] Dialog opening data
+ * @param {jQuery|string|Function|null} [data.title] Description of the action being confirmed
+ * @param {jQuery|string|Function|null} [data.message] Description of the action's consequence
+ * @param {boolean} [data.verbose] Message is verbose and should be styled as a long message
+ * @param {Object[]} [data.actions] List of OO.ui.ActionOptionWidget configuration options for each
+ * action item
+ */
+OO.ui.MessageDialog.prototype.getSetupProcess = function ( data ) {
+ data = data || {};
-/* Static Methods */
+ // Parent method
+ return OO.ui.MessageDialog.super.prototype.getSetupProcess.call( this, data )
+ .next( function () {
+ this.title.setLabel(
+ data.title !== undefined ? data.title : this.constructor.static.title
+ );
+ this.message.setLabel(
+ data.message !== undefined ? data.message : this.constructor.static.message
+ );
+ this.message.$element.toggleClass(
+ 'oo-ui-messageDialog-message-verbose',
+ data.verbose !== undefined ? data.verbose : this.constructor.static.verbose
+ );
+ }, this );
+};
/**
- * Get a default set of classes to be registered on construction
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.getBodyHeight = function () {
+ return Math.round( this.text.$element.outerHeight( true ) );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.initialize = function () {
+ // Parent method
+ OO.ui.MessageDialog.super.prototype.initialize.call( this );
+
+ // Properties
+ this.$actions = this.$( '<div>' );
+ this.container = new OO.ui.PanelLayout( {
+ $: this.$, scrollable: true, classes: [ 'oo-ui-messageDialog-container' ]
+ } );
+ this.text = new OO.ui.PanelLayout( {
+ $: this.$, padded: true, expanded: false, classes: [ 'oo-ui-messageDialog-text' ]
+ } );
+ this.message = new OO.ui.LabelWidget( {
+ $: this.$, classes: [ 'oo-ui-messageDialog-message' ]
+ } );
+
+ // Initialization
+ this.title.$element.addClass( 'oo-ui-messageDialog-title' );
+ this.frame.$content.addClass( 'oo-ui-messageDialog-content' );
+ this.container.$element.append( this.text.$element );
+ this.text.$element.append( this.title.$element, this.message.$element );
+ this.$body.append( this.container.$element );
+ this.$actions.addClass( 'oo-ui-messageDialog-actions' );
+ this.$foot.append( this.$actions );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.attachActions = function () {
+ var i, len, other, special, others;
+
+ // Parent method
+ OO.ui.MessageDialog.super.prototype.attachActions.call( this );
+
+ special = this.actions.getSpecial();
+ others = this.actions.getOthers();
+ if ( special.safe ) {
+ this.$actions.append( special.safe.$element );
+ special.safe.toggleFramed( false );
+ }
+ if ( others.length ) {
+ for ( i = 0, len = others.length; i < len; i++ ) {
+ other = others[i];
+ this.$actions.append( other.$element );
+ other.toggleFramed( false );
+ }
+ }
+ if ( special.primary ) {
+ this.$actions.append( special.primary.$element );
+ special.primary.toggleFramed( false );
+ }
+
+ this.fitActions();
+ if ( !this.isOpening() ) {
+ this.manager.updateWindowSize( this );
+ }
+ this.$body.css( 'bottom', this.$foot.outerHeight( true ) );
+};
+
+/**
+ * Fit action actions into columns or rows.
*
- * @return {Function[]} Default classes
+ * Columns will be used if all labels can fit without overflow, otherwise rows will be used.
*/
-OO.ui.ToolGroupFactory.static.getDefaultClasses = function () {
- return [
- OO.ui.BarToolGroup,
- OO.ui.ListToolGroup,
- OO.ui.MenuToolGroup
- ];
+OO.ui.MessageDialog.prototype.fitActions = function () {
+ var i, len, action,
+ actions = this.actions.get();
+
+ // Detect clipping
+ this.toggleVerticalActionLayout( false );
+ for ( i = 0, len = actions.length; i < len; i++ ) {
+ action = actions[i];
+ if ( action.$element.innerWidth() < action.$label.outerWidth( true ) ) {
+ this.toggleVerticalActionLayout( true );
+ break;
+ }
+ }
};
/**
- * Layout made of a fieldset and optional legend.
+ * Navigation dialog window.
*
- * Just add OO.ui.FieldLayout items.
+ * Logic:
+ * - Show and hide errors.
+ * - Retry an action.
+ *
+ * User interface:
+ * - Renders header with dialog title and one action widget on either side
+ * (a 'safe' button on the left, and a 'primary' button on the right, both of
+ * which close the dialog).
+ * - Displays any action widgets in the footer (none by default).
+ * - Ability to dismiss errors.
*
+ * Subclass responsibilities:
+ * - Register a 'safe' action.
+ * - Register a 'primary' action.
+ * - Add content to the dialog.
+ *
+ * @abstract
* @class
- * @extends OO.ui.Layout
- * @mixins OO.ui.LabeledElement
- * @mixins OO.ui.IconedElement
- * @mixins OO.ui.GroupElement
+ * @extends OO.ui.Dialog
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {string} [icon] Symbolic icon name
- * @cfg {OO.ui.FieldLayout[]} [items] Items to add
*/
-OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) {
- // Config initialization
- config = config || {};
-
+OO.ui.ProcessDialog = function OoUiProcessDialog( manager, config ) {
// Parent constructor
- OO.ui.FieldsetLayout.super.call( this, config );
+ OO.ui.ProcessDialog.super.call( this, manager, config );
- // Mixin constructors
- OO.ui.IconedElement.call( this, this.$( '<div>' ), config );
- OO.ui.LabeledElement.call( this, this.$( '<div>' ), config );
- OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
+ // Initialization
+ this.$element.addClass( 'oo-ui-processDialog' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.ProcessDialog, OO.ui.Dialog );
+
+/* Methods */
+
+/**
+ * Handle dismiss button click events.
+ *
+ * Hides errors.
+ */
+OO.ui.ProcessDialog.prototype.onDismissErrorButtonClick = function () {
+ this.hideErrors();
+};
+
+/**
+ * Handle retry button click events.
+ *
+ * Hides errors and then tries again.
+ */
+OO.ui.ProcessDialog.prototype.onRetryButtonClick = function () {
+ this.hideErrors();
+ this.executeAction( this.currentAction.getAction() );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.ProcessDialog.prototype.onActionResize = function ( action ) {
+ if ( this.actions.isSpecial( action ) ) {
+ this.fitLabel();
+ }
+ return OO.ui.ProcessDialog.super.prototype.onActionResize.call( this, action );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.ProcessDialog.prototype.initialize = function () {
+ // Parent method
+ OO.ui.ProcessDialog.super.prototype.initialize.call( this );
+
+ // Properties
+ this.$navigation = this.$( '<div>' );
+ this.$location = this.$( '<div>' );
+ this.$safeActions = this.$( '<div>' );
+ this.$primaryActions = this.$( '<div>' );
+ this.$otherActions = this.$( '<div>' );
+ this.dismissButton = new OO.ui.ButtonWidget( {
+ $: this.$,
+ label: OO.ui.msg( 'ooui-dialog-process-dismiss' )
+ } );
+ this.retryButton = new OO.ui.ButtonWidget( {
+ $: this.$,
+ label: OO.ui.msg( 'ooui-dialog-process-retry' )
+ } );
+ this.$errors = this.$( '<div>' );
+ this.$errorsTitle = this.$( '<div>' );
+
+ // Events
+ this.dismissButton.connect( this, { click: 'onDismissErrorButtonClick' } );
+ this.retryButton.connect( this, { click: 'onRetryButtonClick' } );
// Initialization
- this.$element
- .addClass( 'oo-ui-fieldsetLayout' )
- .prepend( this.$icon, this.$label, this.$group );
- if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
+ this.title.$element.addClass( 'oo-ui-processDialog-title' );
+ this.$location
+ .append( this.title.$element )
+ .addClass( 'oo-ui-processDialog-location' );
+ this.$safeActions.addClass( 'oo-ui-processDialog-actions-safe' );
+ this.$primaryActions.addClass( 'oo-ui-processDialog-actions-primary' );
+ this.$otherActions.addClass( 'oo-ui-processDialog-actions-other' );
+ this.$errorsTitle
+ .addClass( 'oo-ui-processDialog-errors-title' )
+ .text( OO.ui.msg( 'ooui-dialog-process-error' ) );
+ this.$errors
+ .addClass( 'oo-ui-processDialog-errors' )
+ .append( this.$errorsTitle, this.dismissButton.$element, this.retryButton.$element );
+ this.frame.$content
+ .addClass( 'oo-ui-processDialog-content' )
+ .append( this.$errors );
+ this.$navigation
+ .addClass( 'oo-ui-processDialog-navigation' )
+ .append( this.$safeActions, this.$location, this.$primaryActions );
+ this.$head.append( this.$navigation );
+ this.$foot.append( this.$otherActions );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.ProcessDialog.prototype.attachActions = function () {
+ var i, len, other, special, others;
+
+ // Parent method
+ OO.ui.ProcessDialog.super.prototype.attachActions.call( this );
+
+ special = this.actions.getSpecial();
+ others = this.actions.getOthers();
+ if ( special.primary ) {
+ this.$primaryActions.append( special.primary.$element );
+ special.primary.toggleFramed( true );
+ }
+ if ( others.length ) {
+ for ( i = 0, len = others.length; i < len; i++ ) {
+ other = others[i];
+ this.$otherActions.append( other.$element );
+ other.toggleFramed( true );
+ }
+ }
+ if ( special.safe ) {
+ this.$safeActions.append( special.safe.$element );
+ special.safe.toggleFramed( true );
}
+
+ this.fitLabel();
+ this.$body.css( 'bottom', this.$foot.outerHeight( true ) );
};
-/* Setup */
+/**
+ * @inheritdoc
+ */
+OO.ui.ProcessDialog.prototype.executeAction = function ( action ) {
+ OO.ui.ProcessDialog.super.prototype.executeAction.call( this, action )
+ .fail( OO.ui.bind( this.showErrors, this ) );
+};
-OO.inheritClass( OO.ui.FieldsetLayout, OO.ui.Layout );
-OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.IconedElement );
-OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.LabeledElement );
-OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.GroupElement );
+/**
+ * Fit label between actions.
+ *
+ * @chainable
+ */
+OO.ui.ProcessDialog.prototype.fitLabel = function () {
+ var width = Math.max(
+ this.$safeActions.is( ':visible' ) ? this.$safeActions.width() : 0,
+ this.$primaryActions.is( ':visible' ) ? this.$primaryActions.width() : 0
+ );
+ this.$location.css( { paddingLeft: width, paddingRight: width } );
-/* Static Properties */
+ return this;
+};
+
+/**
+ * Handle errors that occured durring accept or reject processes.
+ *
+ * @param {OO.ui.Error[]} errors Errors to be handled
+ */
+OO.ui.ProcessDialog.prototype.showErrors = function ( errors ) {
+ var i, len, $item,
+ items = [],
+ recoverable = true;
+
+ for ( i = 0, len = errors.length; i < len; i++ ) {
+ if ( !errors[i].isRecoverable() ) {
+ recoverable = false;
+ }
+ $item = this.$( '<div>' )
+ .addClass( 'oo-ui-processDialog-error' )
+ .append( errors[i].getMessage() );
+ items.push( $item[0] );
+ }
+ this.$errorItems = this.$( items );
+ if ( recoverable ) {
+ this.retryButton.clearFlags().setFlags( this.currentAction.getFlags() );
+ } else {
+ this.currentAction.setDisabled( true );
+ }
+ this.retryButton.toggle( recoverable );
+ this.$errorsTitle.after( this.$errorItems );
+ this.$errors.show().scrollTop( 0 );
+};
-OO.ui.FieldsetLayout.static.tagName = 'div';
+/**
+ * Hide errors.
+ */
+OO.ui.ProcessDialog.prototype.hideErrors = function () {
+ this.$errors.hide();
+ this.$errorItems.remove();
+ this.$errorItems = null;
+};
/**
- * Layout made of a field and optional label.
+ * Layout containing a series of pages.
*
* @class
* @extends OO.ui.Layout
- * @mixins OO.ui.LabeledElement
- *
- * Available label alignment modes include:
- * - 'left': Label is before the field and aligned away from it, best for when the user will be
- * scanning for a specific label in a form with many fields
- * - 'right': Label is before the field and aligned toward it, best for forms the user is very
- * familiar with and will tab through field checking quickly to verify which field they are in
- * - 'top': Label is before the field and above it, best for when the use will need to fill out all
- * fields from top to bottom in a form with few fields
- * - 'inline': Label is after the field and aligned toward it, best for small boolean fields like
- * checkboxes or radio buttons
*
* @constructor
- * @param {OO.ui.Widget} field Field widget
* @param {Object} [config] Configuration options
- * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top' or 'inline'
+ * @cfg {boolean} [continuous=false] Show all pages, one after another
+ * @cfg {boolean} [autoFocus=true] Focus on the first focusable element when changing to a page
+ * @cfg {boolean} [outlined=false] Show an outline
+ * @cfg {boolean} [editable=false] Show controls for adding, removing and reordering pages
*/
-OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) {
- // Config initialization
- config = $.extend( { 'align': 'left' }, config );
+OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
+ // Initialize configuration
+ config = config || {};
// Parent constructor
- OO.ui.FieldLayout.super.call( this, config );
-
- // Mixin constructors
- OO.ui.LabeledElement.call( this, this.$( '<label>' ), config );
+ OO.ui.BookletLayout.super.call( this, config );
// Properties
- this.$field = this.$( '<div>' );
- this.field = field;
- this.align = null;
+ this.currentPageName = null;
+ this.pages = {};
+ this.ignoreFocus = false;
+ this.stackLayout = new OO.ui.StackLayout( { $: this.$, continuous: !!config.continuous } );
+ this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
+ this.outlineVisible = false;
+ this.outlined = !!config.outlined;
+ if ( this.outlined ) {
+ this.editable = !!config.editable;
+ this.outlineControlsWidget = null;
+ this.outlineWidget = new OO.ui.OutlineWidget( { $: this.$ } );
+ this.outlinePanel = new OO.ui.PanelLayout( { $: this.$, scrollable: true } );
+ this.gridLayout = new OO.ui.GridLayout(
+ [ this.outlinePanel, this.stackLayout ],
+ { $: this.$, widths: [ 1, 2 ] }
+ );
+ this.outlineVisible = true;
+ if ( this.editable ) {
+ this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
+ this.outlineWidget, { $: this.$ }
+ );
+ }
+ }
// Events
- if ( this.field instanceof OO.ui.InputWidget ) {
- this.$label.on( 'click', OO.ui.bind( this.onLabelClick, this ) );
+ this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
+ if ( this.outlined ) {
+ this.outlineWidget.connect( this, { select: 'onOutlineWidgetSelect' } );
+ }
+ if ( this.autoFocus ) {
+ // Event 'focus' does not bubble, but 'focusin' does
+ this.stackLayout.onDOMEvent( 'focusin', OO.ui.bind( this.onStackLayoutFocus, this ) );
}
- this.field.connect( this, { 'disable': 'onFieldDisable' } );
// Initialization
- this.$element.addClass( 'oo-ui-fieldLayout' );
- this.$field
- .addClass( 'oo-ui-fieldLayout-field' )
- .toggleClass( 'oo-ui-fieldLayout-disable', this.field.isDisabled() )
- .append( this.field.$element );
- this.setAlignment( config.align );
+ this.$element.addClass( 'oo-ui-bookletLayout' );
+ this.stackLayout.$element.addClass( 'oo-ui-bookletLayout-stackLayout' );
+ if ( this.outlined ) {
+ this.outlinePanel.$element
+ .addClass( 'oo-ui-bookletLayout-outlinePanel' )
+ .append( this.outlineWidget.$element );
+ if ( this.editable ) {
+ this.outlinePanel.$element
+ .addClass( 'oo-ui-bookletLayout-outlinePanel-editable' )
+ .append( this.outlineControlsWidget.$element );
+ }
+ this.$element.append( this.gridLayout.$element );
+ } else {
+ this.$element.append( this.stackLayout.$element );
+ }
};
/* Setup */
-OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout );
-OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabeledElement );
+OO.inheritClass( OO.ui.BookletLayout, OO.ui.Layout );
+
+/* Events */
+
+/**
+ * @event set
+ * @param {OO.ui.PageLayout} page Current page
+ */
+
+/**
+ * @event add
+ * @param {OO.ui.PageLayout[]} page Added pages
+ * @param {number} index Index pages were added at
+ */
+
+/**
+ * @event remove
+ * @param {OO.ui.PageLayout[]} pages Removed pages
+ */
/* Methods */
/**
- * Handle field disable events.
+ * Handle stack layout focus.
*
- * @param {boolean} value Field is disabled
+ * @param {jQuery.Event} e Focusin event
*/
-OO.ui.FieldLayout.prototype.onFieldDisable = function ( value ) {
- this.$element.toggleClass( 'oo-ui-fieldLayout-disabled', value );
+OO.ui.BookletLayout.prototype.onStackLayoutFocus = function ( e ) {
+ var name, $target;
+
+ // Find the page that an element was focused within
+ $target = $( e.target ).closest( '.oo-ui-pageLayout' );
+ for ( name in this.pages ) {
+ // Check for page match, exclude current page to find only page changes
+ if ( this.pages[name].$element[0] === $target[0] && name !== this.currentPageName ) {
+ this.setPage( name );
+ break;
+ }
+ }
};
/**
- * Handle label mouse click events.
+ * Handle stack layout set events.
*
- * @param {jQuery.Event} e Mouse click event
+ * @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
*/
-OO.ui.FieldLayout.prototype.onLabelClick = function () {
- this.field.simulateLabelClick();
- return false;
+OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
+ var $input, layout = this;
+ if ( page ) {
+ page.scrollElementIntoView( { complete: function () {
+ if ( layout.autoFocus ) {
+ // Set focus to the first input if nothing on the page is focused yet
+ if ( !page.$element.find( ':focus' ).length ) {
+ $input = page.$element.find( ':input:first' );
+ if ( $input.length ) {
+ $input[0].focus();
+ }
+ }
+ }
+ } } );
+ }
};
/**
- * Get the field.
+ * Handle outline widget select events.
*
- * @return {OO.ui.Widget} Field widget
+ * @param {OO.ui.OptionWidget|null} item Selected item
*/
-OO.ui.FieldLayout.prototype.getField = function () {
- return this.field;
+OO.ui.BookletLayout.prototype.onOutlineWidgetSelect = function ( item ) {
+ if ( item ) {
+ this.setPage( item.getData() );
+ }
};
/**
- * Set the field alignment mode.
+ * Check if booklet has an outline.
*
- * @param {string} value Alignment mode, either 'left', 'right', 'top' or 'inline'
- * @chainable
+ * @return {boolean}
*/
-OO.ui.FieldLayout.prototype.setAlignment = function ( value ) {
- if ( value !== this.align ) {
- // Default to 'left'
- if ( [ 'left', 'right', 'top', 'inline' ].indexOf( value ) === -1 ) {
- value = 'left';
- }
- // Reorder elements
- if ( value === 'inline' ) {
- this.$element.append( this.$field, this.$label );
- } else {
- this.$element.append( this.$label, this.$field );
- }
- // Set classes
- if ( this.align ) {
- this.$element.removeClass( 'oo-ui-fieldLayout-align-' + this.align );
- }
- this.align = value;
- this.$element.addClass( 'oo-ui-fieldLayout-align-' + this.align );
- }
-
- return this;
+OO.ui.BookletLayout.prototype.isOutlined = function () {
+ return this.outlined;
};
/**
- * Layout made of proportionally sized columns and rows.
+ * Check if booklet has editing controls.
*
- * @class
- * @extends OO.ui.Layout
+ * @return {boolean}
+ */
+OO.ui.BookletLayout.prototype.isEditable = function () {
+ return this.editable;
+};
+
+/**
+ * Check if booklet has a visible outline.
*
- * @constructor
- * @param {OO.ui.PanelLayout[]} panels Panels in the grid
- * @param {Object} [config] Configuration options
- * @cfg {number[]} [widths] Widths of columns as ratios
- * @cfg {number[]} [heights] Heights of columns as ratios
+ * @return {boolean}
*/
-OO.ui.GridLayout = function OoUiGridLayout( panels, config ) {
- var i, len, widths;
+OO.ui.BookletLayout.prototype.isOutlineVisible = function () {
+ return this.outlined && this.outlineVisible;
+};
- // Config initialization
- config = config || {};
+/**
+ * Hide or show the outline.
+ *
+ * @param {boolean} [show] Show outline, omit to invert current state
+ * @chainable
+ */
+OO.ui.BookletLayout.prototype.toggleOutline = function ( show ) {
+ if ( this.outlined ) {
+ show = show === undefined ? !this.outlineVisible : !!show;
+ this.outlineVisible = show;
+ this.gridLayout.layout( show ? [ 1, 2 ] : [ 0, 1 ], [ 1 ] );
+ }
- // Parent constructor
- OO.ui.GridLayout.super.call( this, config );
+ return this;
+};
- // Properties
- this.panels = [];
- this.widths = [];
- this.heights = [];
+/**
+ * Get the outline widget.
+ *
+ * @param {OO.ui.PageLayout} page Page to be selected
+ * @return {OO.ui.PageLayout|null} Closest page to another
+ */
+OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
+ var next, prev, level,
+ pages = this.stackLayout.getItems(),
+ index = $.inArray( page, pages );
- // Initialization
- this.$element.addClass( 'oo-ui-gridLayout' );
- for ( i = 0, len = panels.length; i < len; i++ ) {
- this.panels.push( panels[i] );
- this.$element.append( panels[i].$element );
- }
- if ( config.widths || config.heights ) {
- this.layout( config.widths || [ 1 ], config.heights || [ 1 ] );
- } else {
- // Arrange in columns by default
- widths = [];
- for ( i = 0, len = this.panels.length; i < len; i++ ) {
- widths[i] = 1;
+ if ( index !== -1 ) {
+ next = pages[index + 1];
+ prev = pages[index - 1];
+ // Prefer adjacent pages at the same level
+ if ( this.outlined ) {
+ level = this.outlineWidget.getItemFromData( page.getName() ).getLevel();
+ if (
+ prev &&
+ level === this.outlineWidget.getItemFromData( prev.getName() ).getLevel()
+ ) {
+ return prev;
+ }
+ if (
+ next &&
+ level === this.outlineWidget.getItemFromData( next.getName() ).getLevel()
+ ) {
+ return next;
+ }
}
- this.layout( widths, [ 1 ] );
}
+ return prev || next || null;
};
-/* Setup */
-
-OO.inheritClass( OO.ui.GridLayout, OO.ui.Layout );
-
-/* Events */
-
-/**
- * @event layout
- */
-
/**
- * @event update
+ * Get the outline widget.
+ *
+ * @return {OO.ui.OutlineWidget|null} Outline widget, or null if boolet has no outline
*/
-
-/* Static Properties */
-
-OO.ui.GridLayout.static.tagName = 'div';
-
-/* Methods */
+OO.ui.BookletLayout.prototype.getOutline = function () {
+ return this.outlineWidget;
+};
/**
- * Set grid dimensions.
+ * Get the outline controls widget. If the outline is not editable, null is returned.
*
- * @param {number[]} widths Widths of columns as ratios
- * @param {number[]} heights Heights of rows as ratios
- * @fires layout
- * @throws {Error} If grid is not large enough to fit all panels
+ * @return {OO.ui.OutlineControlsWidget|null} The outline controls widget.
*/
-OO.ui.GridLayout.prototype.layout = function ( widths, heights ) {
- var x, y,
- xd = 0,
- yd = 0,
- cols = widths.length,
- rows = heights.length;
-
- // Verify grid is big enough to fit panels
- if ( cols * rows < this.panels.length ) {
- throw new Error( 'Grid is not large enough to fit ' + this.panels.length + 'panels' );
- }
-
- // Sum up denominators
- for ( x = 0; x < cols; x++ ) {
- xd += widths[x];
- }
- for ( y = 0; y < rows; y++ ) {
- yd += heights[y];
- }
- // Store factors
- this.widths = [];
- this.heights = [];
- for ( x = 0; x < cols; x++ ) {
- this.widths[x] = widths[x] / xd;
- }
- for ( y = 0; y < rows; y++ ) {
- this.heights[y] = heights[y] / yd;
- }
- // Synchronize view
- this.update();
- this.emit( 'layout' );
+OO.ui.BookletLayout.prototype.getOutlineControls = function () {
+ return this.outlineControlsWidget;
};
/**
- * Update panel positions and sizes.
+ * Get a page by name.
*
- * @fires update
+ * @param {string} name Symbolic name of page
+ * @return {OO.ui.PageLayout|undefined} Page, if found
*/
-OO.ui.GridLayout.prototype.update = function () {
- var x, y, panel,
- i = 0,
- left = 0,
- top = 0,
- dimensions,
- width = 0,
- height = 0,
- cols = this.widths.length,
- rows = this.heights.length;
-
- for ( y = 0; y < rows; y++ ) {
- for ( x = 0; x < cols; x++ ) {
- panel = this.panels[i];
- width = this.widths[x];
- height = this.heights[y];
- dimensions = {
- 'width': Math.round( width * 100 ) + '%',
- 'height': Math.round( height * 100 ) + '%',
- 'top': Math.round( top * 100 ) + '%'
- };
- // If RTL, reverse:
- if ( OO.ui.Element.getDir( this.$.context ) === 'rtl' ) {
- dimensions.right = Math.round( left * 100 ) + '%';
- } else {
- dimensions.left = Math.round( left * 100 ) + '%';
- }
- panel.$element.css( dimensions );
- i++;
- left += width;
- }
- top += height;
- left = 0;
- }
-
- this.emit( 'update' );
+OO.ui.BookletLayout.prototype.getPage = function ( name ) {
+ return this.pages[name];
};
/**
- * Get a panel at a given position.
- *
- * The x and y position is affected by the current grid layout.
+ * Get the current page name.
*
- * @param {number} x Horizontal position
- * @param {number} y Vertical position
- * @return {OO.ui.PanelLayout} The panel at the given postion
+ * @return {string|null} Current page name
*/
-OO.ui.GridLayout.prototype.getPanel = function ( x, y ) {
- return this.panels[( x * this.widths.length ) + y];
+OO.ui.BookletLayout.prototype.getPageName = function () {
+ return this.currentPageName;
};
/**
- * Layout containing a series of pages.
+ * Add a page to the layout.
*
- * @class
- * @extends OO.ui.Layout
+ * When pages are added with the same names as existing pages, the existing pages will be
+ * automatically removed before the new pages are added.
*
- * @constructor
- * @param {Object} [config] Configuration options
- * @cfg {boolean} [continuous=false] Show all pages, one after another
- * @cfg {boolean} [autoFocus=true] Focus on the first focusable element when changing to a page
- * @cfg {boolean} [outlined=false] Show an outline
- * @cfg {boolean} [editable=false] Show controls for adding, removing and reordering pages
+ * @param {OO.ui.PageLayout[]} pages Pages to add
+ * @param {number} index Index to insert pages after
+ * @fires add
+ * @chainable
*/
-OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
- // Initialize configuration
- config = config || {};
+OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) {
+ var i, len, name, page, item, currentIndex,
+ stackLayoutPages = this.stackLayout.getItems(),
+ remove = [],
+ items = [];
- // Parent constructor
- OO.ui.BookletLayout.super.call( this, config );
+ // Remove pages with same names
+ for ( i = 0, len = pages.length; i < len; i++ ) {
+ page = pages[i];
+ name = page.getName();
- // Properties
- this.currentPageName = null;
- this.pages = {};
- this.ignoreFocus = false;
- this.stackLayout = new OO.ui.StackLayout( { '$': this.$, 'continuous': !!config.continuous } );
- this.autoFocus = config.autoFocus === undefined ? true : !!config.autoFocus;
- this.outlineVisible = false;
- this.outlined = !!config.outlined;
- if ( this.outlined ) {
- this.editable = !!config.editable;
- this.outlineControlsWidget = null;
- this.outlineWidget = new OO.ui.OutlineWidget( { '$': this.$ } );
- this.outlinePanel = new OO.ui.PanelLayout( { '$': this.$, 'scrollable': true } );
- this.gridLayout = new OO.ui.GridLayout(
- [ this.outlinePanel, this.stackLayout ],
- { '$': this.$, 'widths': [ 1, 2 ] }
- );
- this.outlineVisible = true;
- if ( this.editable ) {
- this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
- this.outlineWidget, { '$': this.$ }
- );
+ if ( Object.prototype.hasOwnProperty.call( this.pages, name ) ) {
+ // Correct the insertion index
+ currentIndex = $.inArray( this.pages[name], stackLayoutPages );
+ if ( currentIndex !== -1 && currentIndex + 1 < index ) {
+ index--;
+ }
+ remove.push( this.pages[name] );
}
}
-
- // Events
- this.stackLayout.connect( this, { 'set': 'onStackLayoutSet' } );
- if ( this.outlined ) {
- this.outlineWidget.connect( this, { 'select': 'onOutlineWidgetSelect' } );
- }
- if ( this.autoFocus ) {
- // Event 'focus' does not bubble, but 'focusin' does
- this.stackLayout.onDOMEvent( 'focusin', OO.ui.bind( this.onStackLayoutFocus, this ) );
+ if ( remove.length ) {
+ this.removePages( remove );
}
- // Initialization
- this.$element.addClass( 'oo-ui-bookletLayout' );
- this.stackLayout.$element.addClass( 'oo-ui-bookletLayout-stackLayout' );
- if ( this.outlined ) {
- this.outlinePanel.$element
- .addClass( 'oo-ui-bookletLayout-outlinePanel' )
- .append( this.outlineWidget.$element );
- if ( this.editable ) {
- this.outlinePanel.$element
- .addClass( 'oo-ui-bookletLayout-outlinePanel-editable' )
- .append( this.outlineControlsWidget.$element );
+ // Add new pages
+ for ( i = 0, len = pages.length; i < len; i++ ) {
+ page = pages[i];
+ name = page.getName();
+ this.pages[page.getName()] = page;
+ if ( this.outlined ) {
+ item = new OO.ui.OutlineItemWidget( name, page, { $: this.$ } );
+ page.setOutlineItem( item );
+ items.push( item );
}
- this.$element.append( this.gridLayout.$element );
- } else {
- this.$element.append( this.stackLayout.$element );
}
-};
-
-/* Setup */
-OO.inheritClass( OO.ui.BookletLayout, OO.ui.Layout );
+ if ( this.outlined && items.length ) {
+ this.outlineWidget.addItems( items, index );
+ this.updateOutlineWidget();
+ }
+ this.stackLayout.addItems( pages, index );
+ this.emit( 'add', pages, index );
-/* Events */
+ return this;
+};
/**
- * @event set
- * @param {OO.ui.PageLayout} page Current page
+ * Remove a page from the layout.
+ *
+ * @fires remove
+ * @chainable
*/
+OO.ui.BookletLayout.prototype.removePages = function ( pages ) {
+ var i, len, name, page,
+ items = [];
+
+ for ( i = 0, len = pages.length; i < len; i++ ) {
+ page = pages[i];
+ name = page.getName();
+ delete this.pages[name];
+ if ( this.outlined ) {
+ items.push( this.outlineWidget.getItemFromData( name ) );
+ page.setOutlineItem( null );
+ }
+ }
+ if ( this.outlined && items.length ) {
+ this.outlineWidget.removeItems( items );
+ this.updateOutlineWidget();
+ }
+ this.stackLayout.removeItems( pages );
+ this.emit( 'remove', pages );
+
+ return this;
+};
/**
- * @event add
- * @param {OO.ui.PageLayout[]} page Added pages
- * @param {number} index Index pages were added at
+ * Clear all pages from the layout.
+ *
+ * @fires remove
+ * @chainable
*/
+OO.ui.BookletLayout.prototype.clearPages = function () {
+ var i, len,
+ pages = this.stackLayout.getItems();
+
+ this.pages = {};
+ this.currentPageName = null;
+ if ( this.outlined ) {
+ this.outlineWidget.clearItems();
+ for ( i = 0, len = pages.length; i < len; i++ ) {
+ pages[i].setOutlineItem( null );
+ }
+ }
+ this.stackLayout.clearItems();
-/**
- * @event remove
- * @param {OO.ui.PageLayout[]} pages Removed pages
- */
+ this.emit( 'remove', pages );
-/* Methods */
+ return this;
+};
/**
- * Handle stack layout focus.
+ * Set the current page by name.
*
- * @param {jQuery.Event} e Focusin event
+ * @fires set
+ * @param {string} name Symbolic name of page
*/
-OO.ui.BookletLayout.prototype.onStackLayoutFocus = function ( e ) {
- var name, $target;
+OO.ui.BookletLayout.prototype.setPage = function ( name ) {
+ var selectedItem,
+ $focused,
+ page = this.pages[name];
- // Find the page that an element was focused within
- $target = $( e.target ).closest( '.oo-ui-pageLayout' );
- for ( name in this.pages ) {
- // Check for page match, exclude current page to find only page changes
- if ( this.pages[name].$element[0] === $target[0] && name !== this.currentPageName ) {
- this.setPage( name );
- break;
+ if ( name !== this.currentPageName ) {
+ if ( this.outlined ) {
+ selectedItem = this.outlineWidget.getSelectedItem();
+ if ( selectedItem && selectedItem.getData() !== name ) {
+ this.outlineWidget.selectItem( this.outlineWidget.getItemFromData( name ) );
+ }
+ }
+ if ( page ) {
+ if ( this.currentPageName && this.pages[this.currentPageName] ) {
+ this.pages[this.currentPageName].setActive( false );
+ // Blur anything focused if the next page doesn't have anything focusable - this
+ // is not needed if the next page has something focusable because once it is focused
+ // this blur happens automatically
+ if ( this.autoFocus && !page.$element.find( ':input' ).length ) {
+ $focused = this.pages[this.currentPageName].$element.find( ':focus' );
+ if ( $focused.length ) {
+ $focused[0].blur();
+ }
+ }
+ }
+ this.currentPageName = name;
+ this.stackLayout.setItem( page );
+ page.setActive( true );
+ this.emit( 'set', page );
}
}
};
/**
- * Handle stack layout set events.
+ * Call this after adding or removing items from the OutlineWidget.
*
- * @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
+ * @chainable
*/
-OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
- if ( page ) {
- page.scrollElementIntoView( { 'complete': OO.ui.bind( function () {
- if ( this.autoFocus ) {
- // Set focus to the first input if nothing on the page is focused yet
- if ( !page.$element.find( ':focus' ).length ) {
- page.$element.find( ':input:first' ).focus();
- }
- }
- }, this ) } );
+OO.ui.BookletLayout.prototype.updateOutlineWidget = function () {
+ // Auto-select first item when nothing is selected anymore
+ if ( !this.outlineWidget.getSelectedItem() ) {
+ this.outlineWidget.selectItem( this.outlineWidget.getFirstSelectableItem() );
}
+
+ return this;
};
/**
- * Handle outline widget select events.
+ * Layout made of a field and optional label.
*
- * @param {OO.ui.OptionWidget|null} item Selected item
+ * @class
+ * @extends OO.ui.Layout
+ * @mixins OO.ui.LabeledElement
+ *
+ * Available label alignment modes include:
+ * - left: Label is before the field and aligned away from it, best for when the user will be
+ * scanning for a specific label in a form with many fields
+ * - right: Label is before the field and aligned toward it, best for forms the user is very
+ * familiar with and will tab through field checking quickly to verify which field they are in
+ * - top: Label is before the field and above it, best for when the use will need to fill out all
+ * fields from top to bottom in a form with few fields
+ * - inline: Label is after the field and aligned toward it, best for small boolean fields like
+ * checkboxes or radio buttons
+ *
+ * @constructor
+ * @param {OO.ui.Widget} field Field widget
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [align='left'] Alignment mode, either 'left', 'right', 'top' or 'inline'
+ * @cfg {string} [help] Explanatory text shown as a '?' icon.
*/
-OO.ui.BookletLayout.prototype.onOutlineWidgetSelect = function ( item ) {
- if ( item ) {
- this.setPage( item.getData() );
+OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) {
+ var popupButtonWidget;
+ // Config initialization
+ config = $.extend( { align: 'left' }, config );
+
+ // Parent constructor
+ OO.ui.FieldLayout.super.call( this, config );
+
+ // Mixin constructors
+ this.$help = this.$( '<div>' );
+ OO.ui.LabeledElement.call( this, this.$( '<label>' ), config );
+ if ( config.help ) {
+ popupButtonWidget = new OO.ui.PopupButtonWidget( $.extend(
+ {
+ $: this.$,
+ frameless: true,
+ icon: 'info',
+ title: config.help
+ },
+ config,
+ { label: null }
+ ) );
+ popupButtonWidget.getPopup().$body.append( this.getElementDocument().createTextNode( config.help ) );
+ this.$help = popupButtonWidget.$element;
+ }
+
+ // Properties
+ this.$field = this.$( '<div>' );
+ this.field = field;
+ this.align = null;
+
+ // Events
+ if ( this.field instanceof OO.ui.InputWidget ) {
+ this.$label.on( 'click', OO.ui.bind( this.onLabelClick, this ) );
}
+ this.field.connect( this, { disable: 'onFieldDisable' } );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-fieldLayout' );
+ this.$field
+ .addClass( 'oo-ui-fieldLayout-field' )
+ .toggleClass( 'oo-ui-fieldLayout-disable', this.field.isDisabled() )
+ .append( this.field.$element );
+ this.setAlignment( config.align );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout );
+OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabeledElement );
+
+/* Methods */
+
/**
- * Check if booklet has an outline.
+ * Handle field disable events.
*
- * @return {boolean}
+ * @param {boolean} value Field is disabled
*/
-OO.ui.BookletLayout.prototype.isOutlined = function () {
- return this.outlined;
+OO.ui.FieldLayout.prototype.onFieldDisable = function ( value ) {
+ this.$element.toggleClass( 'oo-ui-fieldLayout-disabled', value );
};
/**
- * Check if booklet has editing controls.
+ * Handle label mouse click events.
*
- * @return {boolean}
+ * @param {jQuery.Event} e Mouse click event
*/
-OO.ui.BookletLayout.prototype.isEditable = function () {
- return this.editable;
+OO.ui.FieldLayout.prototype.onLabelClick = function () {
+ this.field.simulateLabelClick();
+ return false;
};
/**
- * Check if booklet has a visible outline.
+ * Get the field.
*
- * @return {boolean}
+ * @return {OO.ui.Widget} Field widget
*/
-OO.ui.BookletLayout.prototype.isOutlineVisible = function () {
- return this.outlined && this.outlineVisible;
+OO.ui.FieldLayout.prototype.getField = function () {
+ return this.field;
};
/**
- * Hide or show the outline.
+ * Set the field alignment mode.
*
- * @param {boolean} [show] Show outline, omit to invert current state
+ * @param {string} value Alignment mode, either 'left', 'right', 'top' or 'inline'
* @chainable
*/
-OO.ui.BookletLayout.prototype.toggleOutline = function ( show ) {
- if ( this.outlined ) {
- show = show === undefined ? !this.outlineVisible : !!show;
- this.outlineVisible = show;
- this.gridLayout.layout( show ? [ 1, 2 ] : [ 0, 1 ], [ 1 ] );
+OO.ui.FieldLayout.prototype.setAlignment = function ( value ) {
+ if ( value !== this.align ) {
+ // Default to 'left'
+ if ( [ 'left', 'right', 'top', 'inline' ].indexOf( value ) === -1 ) {
+ value = 'left';
+ }
+ // Reorder elements
+ if ( value === 'inline' ) {
+ this.$element.append( this.$field, this.$label, this.$help );
+ } else {
+ this.$element.append( this.$help, this.$label, this.$field );
+ }
+ // Set classes
+ if ( this.align ) {
+ this.$element.removeClass( 'oo-ui-fieldLayout-align-' + this.align );
+ }
+ this.align = value;
+ // The following classes can be used here:
+ // oo-ui-fieldLayout-align-left
+ // oo-ui-fieldLayout-align-right
+ // oo-ui-fieldLayout-align-top
+ // oo-ui-fieldLayout-align-inline
+ this.$element.addClass( 'oo-ui-fieldLayout-align-' + this.align );
}
return this;
};
/**
- * Get the outline widget.
+ * Layout made of a fieldset and optional legend.
*
- * @param {OO.ui.PageLayout} page Page to be selected
- * @return {OO.ui.PageLayout|null} Closest page to another
+ * Just add OO.ui.FieldLayout items.
+ *
+ * @class
+ * @extends OO.ui.Layout
+ * @mixins OO.ui.LabeledElement
+ * @mixins OO.ui.IconedElement
+ * @mixins OO.ui.GroupElement
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [icon] Symbolic icon name
+ * @cfg {OO.ui.FieldLayout[]} [items] Items to add
*/
-OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
- var next, prev, level,
- pages = this.stackLayout.getItems(),
- index = $.inArray( page, pages );
+OO.ui.FieldsetLayout = function OoUiFieldsetLayout( config ) {
+ // Config initialization
+ config = config || {};
- if ( index !== -1 ) {
- next = pages[index + 1];
- prev = pages[index - 1];
- // Prefer adjacent pages at the same level
- if ( this.outlined ) {
- level = this.outlineWidget.getItemFromData( page.getName() ).getLevel();
- if (
- prev &&
- level === this.outlineWidget.getItemFromData( prev.getName() ).getLevel()
- ) {
- return prev;
- }
- if (
- next &&
- level === this.outlineWidget.getItemFromData( next.getName() ).getLevel()
- ) {
- return next;
- }
- }
+ // Parent constructor
+ OO.ui.FieldsetLayout.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.IconedElement.call( this, this.$( '<div>' ), config );
+ OO.ui.LabeledElement.call( this, this.$( '<div>' ), config );
+ OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
+
+ // Initialization
+ this.$element
+ .addClass( 'oo-ui-fieldsetLayout' )
+ .prepend( this.$icon, this.$label, this.$group );
+ if ( $.isArray( config.items ) ) {
+ this.addItems( config.items );
}
- return prev || next || null;
};
+/* Setup */
+
+OO.inheritClass( OO.ui.FieldsetLayout, OO.ui.Layout );
+OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.IconedElement );
+OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.LabeledElement );
+OO.mixinClass( OO.ui.FieldsetLayout, OO.ui.GroupElement );
+
+/* Static Properties */
+
+OO.ui.FieldsetLayout.static.tagName = 'div';
+
/**
- * Get the outline widget.
+ * Layout with an HTML form.
*
- * @return {OO.ui.OutlineWidget|null} Outline widget, or null if boolet has no outline
+ * @class
+ * @extends OO.ui.Layout
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
*/
-OO.ui.BookletLayout.prototype.getOutline = function () {
- return this.outlineWidget;
-};
+OO.ui.FormLayout = function OoUiFormLayout( config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.FormLayout.super.call( this, config );
+
+ // Events
+ this.$element.on( 'submit', OO.ui.bind( this.onFormSubmit, this ) );
-/**
- * Get the outline controls widget. If the outline is not editable, null is returned.
- *
- * @return {OO.ui.OutlineControlsWidget|null} The outline controls widget.
- */
-OO.ui.BookletLayout.prototype.getOutlineControls = function () {
- return this.outlineControlsWidget;
+ // Initialization
+ this.$element.addClass( 'oo-ui-formLayout' );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.FormLayout, OO.ui.Layout );
+
+/* Events */
+
/**
- * Get a page by name.
- *
- * @param {string} name Symbolic name of page
- * @return {OO.ui.PageLayout|undefined} Page, if found
+ * @event submit
*/
-OO.ui.BookletLayout.prototype.getPage = function ( name ) {
- return this.pages[name];
-};
+
+/* Static Properties */
+
+OO.ui.FormLayout.static.tagName = 'form';
+
+/* Methods */
/**
- * Get the current page name.
+ * Handle form submit events.
*
- * @return {string|null} Current page name
+ * @param {jQuery.Event} e Submit event
+ * @fires submit
*/
-OO.ui.BookletLayout.prototype.getPageName = function () {
- return this.currentPageName;
+OO.ui.FormLayout.prototype.onFormSubmit = function () {
+ this.emit( 'submit' );
+ return false;
};
/**
- * Add a page to the layout.
+ * Layout made of proportionally sized columns and rows.
*
- * When pages are added with the same names as existing pages, the existing pages will be
- * automatically removed before the new pages are added.
+ * @class
+ * @extends OO.ui.Layout
*
- * @param {OO.ui.PageLayout[]} pages Pages to add
- * @param {number} index Index to insert pages after
- * @fires add
- * @chainable
+ * @constructor
+ * @param {OO.ui.PanelLayout[]} panels Panels in the grid
+ * @param {Object} [config] Configuration options
+ * @cfg {number[]} [widths] Widths of columns as ratios
+ * @cfg {number[]} [heights] Heights of columns as ratios
*/
-OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) {
- var i, len, name, page, item, currentIndex,
- stackLayoutPages = this.stackLayout.getItems(),
- remove = [],
- items = [];
+OO.ui.GridLayout = function OoUiGridLayout( panels, config ) {
+ var i, len, widths;
- // Remove pages with same names
- for ( i = 0, len = pages.length; i < len; i++ ) {
- page = pages[i];
- name = page.getName();
+ // Config initialization
+ config = config || {};
- if ( Object.prototype.hasOwnProperty.call( this.pages, name ) ) {
- // Correct the insertion index
- currentIndex = $.inArray( this.pages[name], stackLayoutPages );
- if ( currentIndex !== -1 && currentIndex + 1 < index ) {
- index--;
- }
- remove.push( this.pages[name] );
- }
- }
- if ( remove.length ) {
- this.removePages( remove );
- }
+ // Parent constructor
+ OO.ui.GridLayout.super.call( this, config );
- // Add new pages
- for ( i = 0, len = pages.length; i < len; i++ ) {
- page = pages[i];
- name = page.getName();
- this.pages[page.getName()] = page;
- if ( this.outlined ) {
- item = new OO.ui.OutlineItemWidget( name, page, { '$': this.$ } );
- page.setOutlineItem( item );
- items.push( item );
+ // Properties
+ this.panels = [];
+ this.widths = [];
+ this.heights = [];
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-gridLayout' );
+ for ( i = 0, len = panels.length; i < len; i++ ) {
+ this.panels.push( panels[i] );
+ this.$element.append( panels[i].$element );
+ }
+ if ( config.widths || config.heights ) {
+ this.layout( config.widths || [ 1 ], config.heights || [ 1 ] );
+ } else {
+ // Arrange in columns by default
+ widths = [];
+ for ( i = 0, len = this.panels.length; i < len; i++ ) {
+ widths[i] = 1;
}
+ this.layout( widths, [ 1 ] );
}
+};
- if ( this.outlined && items.length ) {
- this.outlineWidget.addItems( items, index );
- this.updateOutlineWidget();
- }
- this.stackLayout.addItems( pages, index );
- this.emit( 'add', pages, index );
+/* Setup */
- return this;
-};
+OO.inheritClass( OO.ui.GridLayout, OO.ui.Layout );
+
+/* Events */
/**
- * Remove a page from the layout.
- *
- * @fires remove
- * @chainable
+ * @event layout
*/
-OO.ui.BookletLayout.prototype.removePages = function ( pages ) {
- var i, len, name, page,
- items = [];
- for ( i = 0, len = pages.length; i < len; i++ ) {
- page = pages[i];
- name = page.getName();
- delete this.pages[name];
- if ( this.outlined ) {
- items.push( this.outlineWidget.getItemFromData( name ) );
- page.setOutlineItem( null );
- }
- }
- if ( this.outlined && items.length ) {
- this.outlineWidget.removeItems( items );
- this.updateOutlineWidget();
- }
- this.stackLayout.removeItems( pages );
- this.emit( 'remove', pages );
+/**
+ * @event update
+ */
- return this;
-};
+/* Static Properties */
+
+OO.ui.GridLayout.static.tagName = 'div';
+
+/* Methods */
/**
- * Clear all pages from the layout.
+ * Set grid dimensions.
*
- * @fires remove
- * @chainable
+ * @param {number[]} widths Widths of columns as ratios
+ * @param {number[]} heights Heights of rows as ratios
+ * @fires layout
+ * @throws {Error} If grid is not large enough to fit all panels
*/
-OO.ui.BookletLayout.prototype.clearPages = function () {
- var i, len,
- pages = this.stackLayout.getItems();
+OO.ui.GridLayout.prototype.layout = function ( widths, heights ) {
+ var x, y,
+ xd = 0,
+ yd = 0,
+ cols = widths.length,
+ rows = heights.length;
- this.pages = {};
- this.currentPageName = null;
- if ( this.outlined ) {
- this.outlineWidget.clearItems();
- for ( i = 0, len = pages.length; i < len; i++ ) {
- pages[i].setOutlineItem( null );
- }
+ // Verify grid is big enough to fit panels
+ if ( cols * rows < this.panels.length ) {
+ throw new Error( 'Grid is not large enough to fit ' + this.panels.length + 'panels' );
}
- this.stackLayout.clearItems();
-
- this.emit( 'remove', pages );
- return this;
+ // Sum up denominators
+ for ( x = 0; x < cols; x++ ) {
+ xd += widths[x];
+ }
+ for ( y = 0; y < rows; y++ ) {
+ yd += heights[y];
+ }
+ // Store factors
+ this.widths = [];
+ this.heights = [];
+ for ( x = 0; x < cols; x++ ) {
+ this.widths[x] = widths[x] / xd;
+ }
+ for ( y = 0; y < rows; y++ ) {
+ this.heights[y] = heights[y] / yd;
+ }
+ // Synchronize view
+ this.update();
+ this.emit( 'layout' );
};
/**
- * Set the current page by name.
+ * Update panel positions and sizes.
*
- * @fires set
- * @param {string} name Symbolic name of page
+ * @fires update
*/
-OO.ui.BookletLayout.prototype.setPage = function ( name ) {
- var selectedItem,
- page = this.pages[name];
+OO.ui.GridLayout.prototype.update = function () {
+ var x, y, panel,
+ i = 0,
+ left = 0,
+ top = 0,
+ dimensions,
+ width = 0,
+ height = 0,
+ cols = this.widths.length,
+ rows = this.heights.length;
- if ( name !== this.currentPageName ) {
- if ( this.outlined ) {
- selectedItem = this.outlineWidget.getSelectedItem();
- if ( selectedItem && selectedItem.getData() !== name ) {
- this.outlineWidget.selectItem( this.outlineWidget.getItemFromData( name ) );
- }
- }
- if ( page ) {
- if ( this.currentPageName && this.pages[this.currentPageName] ) {
- this.pages[this.currentPageName].setActive( false );
- // Blur anything focused if the next page doesn't have anything focusable - this
- // is not needed if the next page has something focusable because once it is focused
- // this blur happens automatically
- if ( this.autoFocus && !page.$element.find( ':input' ).length ) {
- this.pages[this.currentPageName].$element.find( ':focus' ).blur();
- }
+ for ( y = 0; y < rows; y++ ) {
+ height = this.heights[y];
+ for ( x = 0; x < cols; x++ ) {
+ panel = this.panels[i];
+ width = this.widths[x];
+ dimensions = {
+ width: Math.round( width * 100 ) + '%',
+ height: Math.round( height * 100 ) + '%',
+ top: Math.round( top * 100 ) + '%',
+ // HACK: Work around IE bug by setting visibility: hidden; if width or height is zero
+ visibility: width === 0 || height === 0 ? 'hidden' : ''
+ };
+ // If RTL, reverse:
+ if ( OO.ui.Element.getDir( this.$.context ) === 'rtl' ) {
+ dimensions.right = Math.round( left * 100 ) + '%';
+ } else {
+ dimensions.left = Math.round( left * 100 ) + '%';
}
- this.currentPageName = name;
- this.stackLayout.setItem( page );
- page.setActive( true );
- this.emit( 'set', page );
+ panel.$element.css( dimensions );
+ i++;
+ left += width;
}
+ top += height;
+ left = 0;
}
+
+ this.emit( 'update' );
};
/**
- * Call this after adding or removing items from the OutlineWidget.
+ * Get a panel at a given position.
*
- * @chainable
+ * The x and y position is affected by the current grid layout.
+ *
+ * @param {number} x Horizontal position
+ * @param {number} y Vertical position
+ * @return {OO.ui.PanelLayout} The panel at the given postion
*/
-OO.ui.BookletLayout.prototype.updateOutlineWidget = function () {
- // Auto-select first item when nothing is selected anymore
- if ( !this.outlineWidget.getSelectedItem() ) {
- this.outlineWidget.selectItem( this.outlineWidget.getFirstSelectableItem() );
- }
-
- return this;
+OO.ui.GridLayout.prototype.getPanel = function ( x, y ) {
+ return this.panels[( x * this.widths.length ) + y];
};
/**
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {boolean} [scrollable] Allow vertical scrolling
- * @cfg {boolean} [padded] Pad the content from the edges
+ * @cfg {boolean} [scrollable=false] Allow vertical scrolling
+ * @cfg {boolean} [padded=false] Pad the content from the edges
+ * @cfg {boolean} [expanded=true] Expand size to fill the entire parent element
*/
OO.ui.PanelLayout = function OoUiPanelLayout( config ) {
// Config initialization
if ( config.padded ) {
this.$element.addClass( 'oo-ui-panelLayout-padded' );
}
+
+ if ( config.expanded === undefined || config.expanded ) {
+ this.$element.addClass( 'oo-ui-panelLayout-expanded' );
+ }
};
/* Setup */
*/
OO.ui.PageLayout = function OoUiPageLayout( name, config ) {
// Configuration initialization
- config = $.extend( { 'scrollable': true }, config );
+ config = $.extend( { scrollable: true }, config );
// Parent constructor
OO.ui.PageLayout.super.call( this, config );
};
/**
- * Get outline item.
+ * Set outline item.
+ *
+ * @localdoc Subclasses should override #setupOutlineItem instead of this method to adjust the
+ * outline item as desired; this method is called for setting (with an object) and unsetting
+ * (with null) and overriding methods would have to check the value of `outlineItem` to avoid
+ * operating on null instead of an OO.ui.OutlineItemWidget object.
*
* @param {OO.ui.OutlineItemWidget|null} outlineItem Outline item widget, null to clear
* @chainable
*/
OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) {
- this.outlineItem = outlineItem;
+ this.outlineItem = outlineItem || null;
+ if ( outlineItem ) {
+ this.setupOutlineItem();
+ }
+ return this;
+};
+
+/**
+ * Setup outline item.
+ *
+ * @localdoc Subclasses should override this method to adjust the outline item as desired.
+ *
+ * @param {OO.ui.OutlineItemWidget} outlineItem Outline item widget to setup
+ * @chainable
+ */
+OO.ui.PageLayout.prototype.setupOutlineItem = function () {
return this;
};
*/
OO.ui.StackLayout = function OoUiStackLayout( config ) {
// Config initialization
- config = $.extend( { 'scrollable': true }, config );
+ config = $.extend( { scrollable: true }, config );
// Parent constructor
OO.ui.StackLayout.super.call( this, config );
// Mixin method
OO.ui.GroupElement.prototype.removeItems.call( this, items );
- if ( $.inArray( this.currentItem, items ) !== -1 ) {
+ if ( $.inArray( this.currentItem, items ) !== -1 ) {
if ( this.items.length ) {
this.setItem( this.items[0] );
} else {
// Events
this.$handle.on( {
- 'mousedown': OO.ui.bind( this.onHandleMouseDown, this ),
- 'mouseup': OO.ui.bind( this.onHandleMouseUp, this )
+ 'mousedown touchstart': OO.ui.bind( this.onHandlePointerDown, this ),
+ 'mouseup touchend': OO.ui.bind( this.onHandlePointerUp, this )
} );
// Initialization
/**
* @inheritdoc
*/
-OO.ui.PopupToolGroup.prototype.onMouseUp = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
+OO.ui.PopupToolGroup.prototype.onPointerUp = function ( e ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 ) {
this.setActive( false );
}
- return OO.ui.PopupToolGroup.super.prototype.onMouseUp.call( this, e );
+ return OO.ui.PopupToolGroup.super.prototype.onPointerUp.call( this, e );
};
/**
*
* @param {jQuery.Event} e Mouse up event
*/
-OO.ui.PopupToolGroup.prototype.onHandleMouseUp = function () {
+OO.ui.PopupToolGroup.prototype.onHandlePointerUp = function () {
return false;
};
*
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.PopupToolGroup.prototype.onHandleMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
+OO.ui.PopupToolGroup.prototype.onHandlePointerDown = function ( e ) {
+ // e.which is 0 for touch events, 1 for left mouse button
+ if ( !this.isDisabled() && e.which <= 1 ) {
this.setActive( !this.active );
}
return false;
OO.ui.MenuToolGroup.super.call( this, toolbar, config );
// Events
- this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );
+ this.toolbar.connect( this, { updateState: 'onUpdateState' } );
// Initialization
this.$element.addClass( 'oo-ui-menuToolGroup' );
OO.ui.MenuToolGroup.static.accelTooltips = true;
-OO.ui.MenuToolGroup.static.name = 'menu';
+OO.ui.MenuToolGroup.static.name = 'menu';
+
+/* Methods */
+
+/**
+ * Handle the toolbar state being updated.
+ *
+ * When the state changes, the title of each active item in the menu will be joined together and
+ * used as a label for the group. The label will be empty if none of the items are active.
+ */
+OO.ui.MenuToolGroup.prototype.onUpdateState = function () {
+ var name,
+ labelTexts = [];
+
+ for ( name in this.tools ) {
+ if ( this.tools[name].isActive() ) {
+ labelTexts.push( this.tools[name].getTitle() );
+ }
+ }
+
+ this.setLabel( labelTexts.join( ', ' ) || ' ' );
+};
+
+/**
+ * Tool that shows a popup when selected.
+ *
+ * @abstract
+ * @class
+ * @extends OO.ui.Tool
+ * @mixins OO.ui.PopuppableElement
+ *
+ * @constructor
+ * @param {OO.ui.Toolbar} toolbar
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.PopupTool = function OoUiPopupTool( toolbar, config ) {
+ // Parent constructor
+ OO.ui.PopupTool.super.call( this, toolbar, config );
+
+ // Mixin constructors
+ OO.ui.PopuppableElement.call( this, config );
+
+ // Initialization
+ this.$element
+ .addClass( 'oo-ui-popupTool' )
+ .append( this.popup.$element );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.PopupTool, OO.ui.Tool );
+OO.mixinClass( OO.ui.PopupTool, OO.ui.PopuppableElement );
+
+/* Methods */
+
+/**
+ * Handle the tool being selected.
+ *
+ * @inheritdoc
+ */
+OO.ui.PopupTool.prototype.onSelect = function () {
+ if ( !this.isDisabled() ) {
+ this.popup.toggle();
+ }
+ this.setActive( false );
+ return false;
+};
+
+/**
+ * Handle the toolbar state being updated.
+ *
+ * @inheritdoc
+ */
+OO.ui.PopupTool.prototype.onUpdateState = function () {
+ this.setActive( false );
+};
+
+/**
+ * Mixin for OO.ui.Widget subclasses to provide OO.ui.GroupElement.
+ *
+ * Use together with OO.ui.ItemWidget to make disabled state inheritable.
+ *
+ * @abstract
+ * @class
+ * @extends OO.ui.GroupElement
+ *
+ * @constructor
+ * @param {jQuery} $group Container node, assigned to #$group
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.GroupWidget = function OoUiGroupWidget( $element, config ) {
+ // Parent constructor
+ OO.ui.GroupWidget.super.call( this, $element, config );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.GroupWidget, OO.ui.GroupElement );
+
+/* Methods */
+
+/**
+ * Set the disabled state of the widget.
+ *
+ * This will also update the disabled state of child widgets.
+ *
+ * @param {boolean} disabled Disable widget
+ * @chainable
+ */
+OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) {
+ var i, len;
+
+ // Parent method
+ // Note: Calling #setDisabled this way assumes this is mixed into an OO.ui.Widget
+ OO.ui.Widget.prototype.setDisabled.call( this, disabled );
+
+ // During construction, #setDisabled is called before the OO.ui.GroupElement constructor
+ if ( this.items ) {
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ this.items[i].updateDisabled();
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Mixin for widgets used as items in widgets that inherit OO.ui.GroupWidget.
+ *
+ * Item widgets have a reference to a OO.ui.GroupWidget while they are attached to the group. This
+ * allows bidrectional communication.
+ *
+ * Use together with OO.ui.GroupWidget to make disabled state inheritable.
+ *
+ * @abstract
+ * @class
+ *
+ * @constructor
+ */
+OO.ui.ItemWidget = function OoUiItemWidget() {
+ //
+};
+
+/* Methods */
+
+/**
+ * Check if widget is disabled.
+ *
+ * Checks parent if present, making disabled state inheritable.
+ *
+ * @return {boolean} Widget is disabled
+ */
+OO.ui.ItemWidget.prototype.isDisabled = function () {
+ return this.disabled ||
+ ( this.elementGroup instanceof OO.ui.Widget && this.elementGroup.isDisabled() );
+};
+
+/**
+ * Set group element is in.
+ *
+ * @param {OO.ui.GroupElement|null} group Group element, null if none
+ * @chainable
+ */
+OO.ui.ItemWidget.prototype.setElementGroup = function ( group ) {
+ // Parent method
+ // Note: Calling #setElementGroup this way assumes this is mixed into an OO.ui.Element
+ OO.ui.Element.prototype.setElementGroup.call( this, group );
+
+ // Initialize item disabled states
+ this.updateDisabled();
+
+ return this;
+};
+
+/**
+ * Mixin that adds a menu showing suggested values for a text input.
+ *
+ * Subclasses must handle `select` and `choose` events on #lookupMenu to make use of selections.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ * @param {OO.ui.TextInputWidget} input Input widget
+ * @param {Object} [config] Configuration options
+ * @cfg {jQuery} [$overlay=this.$( 'body' )] Overlay layer
+ */
+OO.ui.LookupInputWidget = function OoUiLookupInputWidget( input, config ) {
+ // Config intialization
+ config = config || {};
+
+ // Properties
+ this.lookupInput = input;
+ this.$overlay = config.$overlay || this.$( 'body,.oo-ui-window-overlay' ).last();
+ this.lookupMenu = new OO.ui.TextInputMenuWidget( this, {
+ $: OO.ui.Element.getJQuery( this.$overlay ),
+ input: this.lookupInput,
+ $container: config.$container
+ } );
+ this.lookupCache = {};
+ this.lookupQuery = null;
+ this.lookupRequest = null;
+ this.populating = false;
+
+ // Events
+ this.$overlay.append( this.lookupMenu.$element );
+
+ this.lookupInput.$input.on( {
+ focus: OO.ui.bind( this.onLookupInputFocus, this ),
+ blur: OO.ui.bind( this.onLookupInputBlur, this ),
+ mousedown: OO.ui.bind( this.onLookupInputMouseDown, this )
+ } );
+ this.lookupInput.connect( this, { change: 'onLookupInputChange' } );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-lookupWidget' );
+ this.lookupMenu.$element.addClass( 'oo-ui-lookupWidget-menu' );
+};
+
+/* Methods */
+
+/**
+ * Handle input focus event.
+ *
+ * @param {jQuery.Event} e Input focus event
+ */
+OO.ui.LookupInputWidget.prototype.onLookupInputFocus = function () {
+ this.openLookupMenu();
+};
+
+/**
+ * Handle input blur event.
+ *
+ * @param {jQuery.Event} e Input blur event
+ */
+OO.ui.LookupInputWidget.prototype.onLookupInputBlur = function () {
+ this.lookupMenu.toggle( false );
+};
+
+/**
+ * Handle input mouse down event.
+ *
+ * @param {jQuery.Event} e Input mouse down event
+ */
+OO.ui.LookupInputWidget.prototype.onLookupInputMouseDown = function () {
+ this.openLookupMenu();
+};
+
+/**
+ * Handle input change event.
+ *
+ * @param {string} value New input value
+ */
+OO.ui.LookupInputWidget.prototype.onLookupInputChange = function () {
+ this.openLookupMenu();
+};
-/* Methods */
+/**
+ * Get lookup menu.
+ *
+ * @return {OO.ui.TextInputMenuWidget}
+ */
+OO.ui.LookupInputWidget.prototype.getLookupMenu = function () {
+ return this.lookupMenu;
+};
/**
- * Handle the toolbar state being updated.
+ * Open the menu.
*
- * When the state changes, the title of each active item in the menu will be joined together and
- * used as a label for the group. The label will be empty if none of the items are active.
+ * @chainable
*/
-OO.ui.MenuToolGroup.prototype.onUpdateState = function () {
- var name,
- labelTexts = [];
+OO.ui.LookupInputWidget.prototype.openLookupMenu = function () {
+ var value = this.lookupInput.getValue();
- for ( name in this.tools ) {
- if ( this.tools[name].isActive() ) {
- labelTexts.push( this.tools[name].getTitle() );
- }
+ if ( this.lookupMenu.$input.is( ':focus' ) && $.trim( value ) !== '' ) {
+ this.populateLookupMenu();
+ this.lookupMenu.toggle( true );
+ } else {
+ this.lookupMenu
+ .clearItems()
+ .toggle( false );
}
- this.setLabel( labelTexts.join( ', ' ) || ' ' );
+ return this;
};
/**
- * Tool that shows a popup when selected.
- *
- * @abstract
- * @class
- * @extends OO.ui.Tool
- * @mixins OO.ui.PopuppableElement
+ * Populate lookup menu with current information.
*
- * @constructor
- * @param {OO.ui.Toolbar} toolbar
- * @param {Object} [config] Configuration options
+ * @chainable
*/
-OO.ui.PopupTool = function OoUiPopupTool( toolbar, config ) {
- // Parent constructor
- OO.ui.PopupTool.super.call( this, toolbar, config );
+OO.ui.LookupInputWidget.prototype.populateLookupMenu = function () {
+ var widget = this;
- // Mixin constructors
- OO.ui.PopuppableElement.call( this, config );
+ if ( !this.populating ) {
+ this.populating = true;
+ this.getLookupMenuItems()
+ .done( function ( items ) {
+ widget.lookupMenu.clearItems();
+ if ( items.length ) {
+ widget.lookupMenu
+ .addItems( items )
+ .toggle( true );
+ widget.initializeLookupMenuSelection();
+ widget.openLookupMenu();
+ } else {
+ widget.lookupMenu.toggle( true );
+ }
+ widget.populating = false;
+ } )
+ .fail( function () {
+ widget.lookupMenu.clearItems();
+ widget.populating = false;
+ } );
+ }
- // Initialization
- this.$element
- .addClass( 'oo-ui-popupTool' )
- .append( this.popup.$element );
+ return this;
};
-/* Setup */
-
-OO.inheritClass( OO.ui.PopupTool, OO.ui.Tool );
-OO.mixinClass( OO.ui.PopupTool, OO.ui.PopuppableElement );
-
-/* Methods */
+/**
+ * Set selection in the lookup menu with current information.
+ *
+ * @chainable
+ */
+OO.ui.LookupInputWidget.prototype.initializeLookupMenuSelection = function () {
+ if ( !this.lookupMenu.getSelectedItem() ) {
+ this.lookupMenu.selectItem( this.lookupMenu.getFirstSelectableItem() );
+ }
+ this.lookupMenu.highlightItem( this.lookupMenu.getSelectedItem() );
+};
/**
- * Handle the tool being selected.
+ * Get lookup menu items for the current query.
*
- * @inheritdoc
+ * @return {jQuery.Promise} Promise object which will be passed menu items as the first argument
+ * of the done event
*/
-OO.ui.PopupTool.prototype.onSelect = function () {
- if ( !this.isDisabled() ) {
- if ( this.popup.isVisible() ) {
- this.hidePopup();
+OO.ui.LookupInputWidget.prototype.getLookupMenuItems = function () {
+ var widget = this,
+ value = this.lookupInput.getValue(),
+ deferred = $.Deferred();
+
+ if ( value && value !== this.lookupQuery ) {
+ // Abort current request if query has changed
+ if ( this.lookupRequest ) {
+ this.lookupRequest.abort();
+ this.lookupQuery = null;
+ this.lookupRequest = null;
+ }
+ if ( value in this.lookupCache ) {
+ deferred.resolve( this.getLookupMenuItemsFromData( this.lookupCache[value] ) );
} else {
- this.showPopup();
+ this.lookupQuery = value;
+ this.lookupRequest = this.getLookupRequest()
+ .always( function () {
+ widget.lookupQuery = null;
+ widget.lookupRequest = null;
+ } )
+ .done( function ( data ) {
+ widget.lookupCache[value] = widget.getLookupCacheItemFromData( data );
+ deferred.resolve( widget.getLookupMenuItemsFromData( widget.lookupCache[value] ) );
+ } )
+ .fail( function () {
+ deferred.reject();
+ } );
+ this.pushPending();
+ this.lookupRequest.always( function () {
+ widget.popPending();
+ } );
}
}
- this.setActive( false );
- return false;
+ return deferred.promise();
};
/**
- * Handle the toolbar state being updated.
+ * Get a new request object of the current lookup query value.
*
- * @inheritdoc
+ * @abstract
+ * @return {jqXHR} jQuery AJAX object, or promise object with an .abort() method
*/
-OO.ui.PopupTool.prototype.onUpdateState = function () {
- this.setActive( false );
+OO.ui.LookupInputWidget.prototype.getLookupRequest = function () {
+ // Stub, implemented in subclass
+ return null;
};
/**
- * Group widget.
- *
- * Mixin for OO.ui.Widget subclasses.
+ * Handle successful lookup request.
*
- * Use together with OO.ui.ItemWidget to make disabled state inheritable.
+ * Overriding methods should call #populateLookupMenu when results are available and cache results
+ * for future lookups in #lookupCache as an array of #OO.ui.MenuItemWidget objects.
*
* @abstract
- * @class
- * @extends OO.ui.GroupElement
- *
- * @constructor
- * @param {jQuery} $group Container node, assigned to #$group
- * @param {Object} [config] Configuration options
+ * @param {Mixed} data Response from server
*/
-OO.ui.GroupWidget = function OoUiGroupWidget( $element, config ) {
- // Parent constructor
- OO.ui.GroupWidget.super.call( this, $element, config );
+OO.ui.LookupInputWidget.prototype.onLookupRequestDone = function () {
+ // Stub, implemented in subclass
};
-/* Setup */
-
-OO.inheritClass( OO.ui.GroupWidget, OO.ui.GroupElement );
-
-/* Methods */
-
/**
- * Set the disabled state of the widget.
- *
- * This will also update the disabled state of child widgets.
+ * Get a list of menu item widgets from the data stored by the lookup request's done handler.
*
- * @param {boolean} disabled Disable widget
- * @chainable
+ * @abstract
+ * @param {Mixed} data Cached result data, usually an array
+ * @return {OO.ui.MenuItemWidget[]} Menu items
*/
-OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) {
- var i, len;
-
- // Parent method
- // Note: Calling #setDisabled this way assumes this is mixed into an OO.ui.Widget
- OO.ui.Widget.prototype.setDisabled.call( this, disabled );
-
- // During construction, #setDisabled is called before the OO.ui.GroupElement constructor
- if ( this.items ) {
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- this.items[i].updateDisabled();
- }
- }
-
- return this;
+OO.ui.LookupInputWidget.prototype.getLookupMenuItemsFromData = function () {
+ // Stub, implemented in subclass
+ return [];
};
/**
- * Item widget.
+ * Set of controls for an OO.ui.OutlineWidget.
*
- * Use together with OO.ui.GroupWidget to make disabled state inheritable.
+ * Controls include moving items up and down, removing items, and adding different kinds of items.
*
- * @abstract
* @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.GroupElement
+ * @mixins OO.ui.IconedElement
*
* @constructor
+ * @param {OO.ui.OutlineWidget} outline Outline to control
+ * @param {Object} [config] Configuration options
*/
-OO.ui.ItemWidget = function OoUiItemWidget() {
- //
+OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) {
+ // Configuration initialization
+ config = $.extend( { icon: 'add-item' }, config );
+
+ // Parent constructor
+ OO.ui.OutlineControlsWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
+ OO.ui.IconedElement.call( this, this.$( '<div>' ), config );
+
+ // Properties
+ this.outline = outline;
+ this.$movers = this.$( '<div>' );
+ this.upButton = new OO.ui.ButtonWidget( {
+ $: this.$,
+ framed: false,
+ icon: 'collapse',
+ title: OO.ui.msg( 'ooui-outline-control-move-up' )
+ } );
+ this.downButton = new OO.ui.ButtonWidget( {
+ $: this.$,
+ framed: false,
+ icon: 'expand',
+ title: OO.ui.msg( 'ooui-outline-control-move-down' )
+ } );
+ this.removeButton = new OO.ui.ButtonWidget( {
+ $: this.$,
+ framed: false,
+ icon: 'remove',
+ title: OO.ui.msg( 'ooui-outline-control-remove' )
+ } );
+
+ // Events
+ outline.connect( this, {
+ select: 'onOutlineChange',
+ add: 'onOutlineChange',
+ remove: 'onOutlineChange'
+ } );
+ this.upButton.connect( this, { click: [ 'emit', 'move', -1 ] } );
+ this.downButton.connect( this, { click: [ 'emit', 'move', 1 ] } );
+ this.removeButton.connect( this, { click: [ 'emit', 'remove' ] } );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-outlineControlsWidget' );
+ this.$group.addClass( 'oo-ui-outlineControlsWidget-items' );
+ this.$movers
+ .addClass( 'oo-ui-outlineControlsWidget-movers' )
+ .append( this.removeButton.$element, this.upButton.$element, this.downButton.$element );
+ this.$element.append( this.$icon, this.$group, this.$movers );
};
-/* Methods */
+/* Setup */
+
+OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.GroupElement );
+OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.IconedElement );
+
+/* Events */
/**
- * Check if widget is disabled.
- *
- * Checks parent if present, making disabled state inheritable.
- *
- * @return {boolean} Widget is disabled
+ * @event move
+ * @param {number} places Number of places to move
*/
-OO.ui.ItemWidget.prototype.isDisabled = function () {
- return this.disabled ||
- ( this.elementGroup instanceof OO.ui.Widget && this.elementGroup.isDisabled() );
-};
/**
- * Set group element is in.
- *
- * @param {OO.ui.GroupElement|null} group Group element, null if none
- * @chainable
+ * @event remove
*/
-OO.ui.ItemWidget.prototype.setElementGroup = function ( group ) {
- // Parent method
- // Note: Calling #setElementGroup this way assumes this is mixed into an OO.ui.Element
- OO.ui.Element.prototype.setElementGroup.call( this, group );
- // Initialize item disabled states
- this.updateDisabled();
+/* Methods */
+
+/**
+ * Handle outline change events.
+ */
+OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () {
+ var i, len, firstMovable, lastMovable,
+ items = this.outline.getItems(),
+ selectedItem = this.outline.getSelectedItem(),
+ movable = selectedItem && selectedItem.isMovable(),
+ removable = selectedItem && selectedItem.isRemovable();
- return this;
+ if ( movable ) {
+ i = -1;
+ len = items.length;
+ while ( ++i < len ) {
+ if ( items[i].isMovable() ) {
+ firstMovable = items[i];
+ break;
+ }
+ }
+ i = len;
+ while ( i-- ) {
+ if ( items[i].isMovable() ) {
+ lastMovable = items[i];
+ break;
+ }
+ }
+ }
+ this.upButton.setDisabled( !movable || selectedItem === firstMovable );
+ this.downButton.setDisabled( !movable || selectedItem === lastMovable );
+ this.removeButton.setDisabled( !removable );
};
/**
- * Icon widget.
+ * Mixin for widgets with a boolean on/off state.
*
+ * @abstract
* @class
- * @extends OO.ui.Widget
- * @mixins OO.ui.IconedElement
- * @mixins OO.ui.TitledElement
*
* @constructor
* @param {Object} [config] Configuration options
+ * @cfg {boolean} [value=false] Initial value
*/
-OO.ui.IconWidget = function OoUiIconWidget( config ) {
- // Config intialization
+OO.ui.ToggleWidget = function OoUiToggleWidget( config ) {
+ // Configuration initialization
config = config || {};
- // Parent constructor
- OO.ui.IconWidget.super.call( this, config );
-
- // Mixin constructors
- OO.ui.IconedElement.call( this, this.$element, config );
- OO.ui.TitledElement.call( this, this.$element, config );
+ // Properties
+ this.value = null;
// Initialization
- this.$element.addClass( 'oo-ui-iconWidget' );
+ this.$element.addClass( 'oo-ui-toggleWidget' );
+ this.setValue( !!config.value );
};
-/* Setup */
-
-OO.inheritClass( OO.ui.IconWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.IconWidget, OO.ui.IconedElement );
-OO.mixinClass( OO.ui.IconWidget, OO.ui.TitledElement );
+/* Events */
-/* Static Properties */
+/**
+ * @event change
+ * @param {boolean} value Changed value
+ */
-OO.ui.IconWidget.static.tagName = 'span';
+/* Methods */
/**
- * Indicator widget.
- *
- * @class
- * @extends OO.ui.Widget
- * @mixins OO.ui.IndicatedElement
- * @mixins OO.ui.TitledElement
+ * Get the value of the toggle.
*
- * @constructor
- * @param {Object} [config] Configuration options
+ * @return {boolean}
*/
-OO.ui.IndicatorWidget = function OoUiIndicatorWidget( config ) {
- // Config intialization
- config = config || {};
-
- // Parent constructor
- OO.ui.IndicatorWidget.super.call( this, config );
-
- // Mixin constructors
- OO.ui.IndicatedElement.call( this, this.$element, config );
- OO.ui.TitledElement.call( this, this.$element, config );
-
- // Initialization
- this.$element.addClass( 'oo-ui-indicatorWidget' );
+OO.ui.ToggleWidget.prototype.getValue = function () {
+ return this.value;
};
-/* Setup */
-
-OO.inheritClass( OO.ui.IndicatorWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.IndicatedElement );
-OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.TitledElement );
-
-/* Static Properties */
-
-OO.ui.IndicatorWidget.static.tagName = 'span';
+/**
+ * Set the value of the toggle.
+ *
+ * @param {boolean} value New value
+ * @fires change
+ * @chainable
+ */
+OO.ui.ToggleWidget.prototype.setValue = function ( value ) {
+ value = !!value;
+ if ( this.value !== value ) {
+ this.value = value;
+ this.emit( 'change', value );
+ this.$element.toggleClass( 'oo-ui-toggleWidget-on', value );
+ this.$element.toggleClass( 'oo-ui-toggleWidget-off', !value );
+ }
+ return this;
+};
/**
- * Container for multiple related buttons.
+ * Group widget for multiple related buttons.
*
* Use together with OO.ui.ButtonWidget.
*
OO.mixinClass( OO.ui.ButtonGroupWidget, OO.ui.GroupElement );
/**
- * Button widget.
+ * Generic widget for buttons.
*
* @class
* @extends OO.ui.Widget
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {string} [title=''] Title text
* @cfg {string} [href] Hyperlink to visit when clicked
* @cfg {string} [target] Target to open hyperlink in
*/
OO.ui.ButtonWidget = function OoUiButtonWidget( config ) {
// Configuration initialization
- config = $.extend( { 'target': '_blank' }, config );
+ config = $.extend( { target: '_blank' }, config );
// Parent constructor
OO.ui.ButtonWidget.super.call( this, config );
OO.ui.FlaggableElement.call( this, config );
// Properties
- this.isHyperlink = typeof config.href === 'string';
+ this.href = null;
+ this.target = null;
+ this.isHyperlink = false;
// Events
this.$button.on( {
- 'click': OO.ui.bind( this.onClick, this ),
- 'keypress': OO.ui.bind( this.onKeyPress, this )
+ click: OO.ui.bind( this.onClick, this ),
+ keypress: OO.ui.bind( this.onKeyPress, this )
} );
// Initialization
- this.$button
- .append( this.$icon, this.$label, this.$indicator )
- .attr( { 'href': config.href, 'target': config.target } );
+ this.$button.append( this.$icon, this.$label, this.$indicator );
this.$element
.addClass( 'oo-ui-buttonWidget' )
.append( this.$button );
+ this.setHref( config.href );
+ this.setTarget( config.target );
};
/* Setup */
};
/**
- * Input widget.
+ * Get hyperlink location.
+ *
+ * @return {string} Hyperlink location
+ */
+OO.ui.ButtonWidget.prototype.getHref = function () {
+ return this.href;
+};
+
+/**
+ * Get hyperlink target.
+ *
+ * @return {string} Hyperlink target
+ */
+OO.ui.ButtonWidget.prototype.getTarget = function () {
+ return this.target;
+};
+
+/**
+ * Set hyperlink location.
+ *
+ * @param {string|null} href Hyperlink location, null to remove
+ */
+OO.ui.ButtonWidget.prototype.setHref = function ( href ) {
+ href = typeof href === 'string' ? href : null;
+
+ if ( href !== this.href ) {
+ this.href = href;
+ if ( href !== null ) {
+ this.$button.attr( 'href', href );
+ this.isHyperlink = true;
+ } else {
+ this.$button.removeAttr( 'href' );
+ this.isHyperlink = false;
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Set hyperlink target.
+ *
+ * @param {string|null} target Hyperlink target, null to remove
+ */
+OO.ui.ButtonWidget.prototype.setTarget = function ( target ) {
+ target = typeof target === 'string' ? target : null;
+
+ if ( target !== this.target ) {
+ this.target = target;
+ if ( target !== null ) {
+ this.$button.attr( 'target', target );
+ } else {
+ this.$button.removeAttr( 'target' );
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Button widget that executes an action and is managed by an OO.ui.ActionSet.
*
- * @abstract
* @class
- * @extends OO.ui.Widget
+ * @extends OO.ui.ButtonWidget
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {string} [name=''] HTML input name
- * @cfg {string} [value=''] Input value
- * @cfg {boolean} [readOnly=false] Prevent changes
- * @cfg {Function} [inputFilter] Filter function to apply to the input. Takes a string argument and returns a string.
+ * @cfg {string} [action] Symbolic action name
+ * @cfg {string[]} [modes] Symbolic mode names
*/
-OO.ui.InputWidget = function OoUiInputWidget( config ) {
+OO.ui.ActionWidget = function OoUiActionWidget( config ) {
// Config intialization
- config = $.extend( { 'readOnly': false }, config );
+ config = $.extend( { framed: false }, config );
// Parent constructor
- OO.ui.InputWidget.super.call( this, config );
+ OO.ui.ActionWidget.super.call( this, config );
// Properties
- this.$input = this.getInputElement( config );
- this.value = '';
- this.readOnly = false;
- this.inputFilter = config.inputFilter;
-
- // Events
- this.$input.on( 'keydown mouseup cut paste change input select', OO.ui.bind( this.onEdit, this ) );
+ this.action = config.action || '';
+ this.modes = config.modes || [];
+ this.width = 0;
+ this.height = 0;
// Initialization
- this.$input
- .attr( 'name', config.name )
- .prop( 'disabled', this.isDisabled() );
- this.setReadOnly( config.readOnly );
- this.$element.addClass( 'oo-ui-inputWidget' ).append( this.$input );
- this.setValue( config.value );
+ this.$element.addClass( 'oo-ui-actionWidget' );
};
/* Setup */
-OO.inheritClass( OO.ui.InputWidget, OO.ui.Widget );
+OO.inheritClass( OO.ui.ActionWidget, OO.ui.ButtonWidget );
/* Events */
/**
- * @event change
- * @param value
+ * @event resize
*/
/* Methods */
/**
- * Get input element.
- *
- * @param {Object} [config] Configuration options
- * @return {jQuery} Input element
- */
-OO.ui.InputWidget.prototype.getInputElement = function () {
- return this.$( '<input>' );
-};
-
-/**
- * Handle potentially value-changing events.
+ * Check if action is available in a certain mode.
*
- * @param {jQuery.Event} e Key down, mouse up, cut, paste, change, input, or select event
+ * @param {string} mode Name of mode
+ * @return {boolean} Has mode
*/
-OO.ui.InputWidget.prototype.onEdit = function () {
- if ( !this.isDisabled() ) {
- // Allow the stack to clear so the value will be updated
- setTimeout( OO.ui.bind( function () {
- this.setValue( this.$input.val() );
- }, this ) );
- }
+OO.ui.ActionWidget.prototype.hasMode = function ( mode ) {
+ return this.modes.indexOf( mode ) !== -1;
};
/**
- * Get the value of the input.
+ * Get symbolic action name.
*
- * @return {string} Input value
+ * @return {string}
*/
-OO.ui.InputWidget.prototype.getValue = function () {
- return this.value;
+OO.ui.ActionWidget.prototype.getAction = function () {
+ return this.action;
};
/**
- * Sets the direction of the current input, either RTL or LTR
+ * Get symbolic action name.
*
- * @param {boolean} isRTL
+ * @return {string}
*/
-OO.ui.InputWidget.prototype.setRTL = function ( isRTL ) {
- if ( isRTL ) {
- this.$input.removeClass( 'oo-ui-ltr' );
- this.$input.addClass( 'oo-ui-rtl' );
- } else {
- this.$input.removeClass( 'oo-ui-rtl' );
- this.$input.addClass( 'oo-ui-ltr' );
- }
+OO.ui.ActionWidget.prototype.getModes = function () {
+ return this.modes.slice();
};
/**
- * Set the value of the input.
+ * Emit a resize event if the size has changed.
*
- * @param {string} value New value
- * @fires change
* @chainable
*/
-OO.ui.InputWidget.prototype.setValue = function ( value ) {
- value = this.sanitizeValue( value );
- if ( this.value !== value ) {
- this.value = value;
- this.emit( 'change', this.value );
- }
- // Update the DOM if it has changed. Note that with sanitizeValue, it
- // is possible for the DOM value to change without this.value changing.
- if ( this.$input.val() !== this.value ) {
- this.$input.val( this.value );
+OO.ui.ActionWidget.prototype.propagateResize = function () {
+ var width, height;
+
+ if ( this.isElementAttached() ) {
+ width = this.$element.width();
+ height = this.$element.height();
+
+ if ( width !== this.width || height !== this.height ) {
+ this.width = width;
+ this.height = height;
+ this.emit( 'resize' );
+ }
}
+
return this;
};
/**
- * Sanitize incoming value.
- *
- * Ensures value is a string, and converts undefined and null to empty strings.
- *
- * @param {string} value Original value
- * @return {string} Sanitized value
+ * @inheritdoc
*/
-OO.ui.InputWidget.prototype.sanitizeValue = function ( value ) {
- if ( value === undefined || value === null ) {
- return '';
- } else if ( this.inputFilter ) {
- return this.inputFilter( String( value ) );
- } else {
- return String( value );
- }
-};
+OO.ui.ActionWidget.prototype.setIcon = function () {
+ // Mixin method
+ OO.ui.IconedElement.prototype.setIcon.apply( this, arguments );
+ this.propagateResize();
-/**
- * Simulate the behavior of clicking on a label bound to this input.
- */
-OO.ui.InputWidget.prototype.simulateLabelClick = function () {
- if ( !this.isDisabled() ) {
- if ( this.$input.is( ':checkbox,:radio' ) ) {
- this.$input.click();
- } else if ( this.$input.is( ':input' ) ) {
- this.$input.focus();
- }
- }
+ return this;
};
/**
- * Check if the widget is read-only.
- *
- * @return {boolean}
+ * @inheritdoc
*/
-OO.ui.InputWidget.prototype.isReadOnly = function () {
- return this.readOnly;
+OO.ui.ActionWidget.prototype.setLabel = function () {
+ // Mixin method
+ OO.ui.LabeledElement.prototype.setLabel.apply( this, arguments );
+ this.propagateResize();
+
+ return this;
};
/**
- * Set the read-only state of the widget.
- *
- * This should probably change the widgets's appearance and prevent it from being used.
- *
- * @param {boolean} state Make input read-only
- * @chainable
+ * @inheritdoc
*/
-OO.ui.InputWidget.prototype.setReadOnly = function ( state ) {
- this.readOnly = !!state;
- this.$input.prop( 'readOnly', this.readOnly );
+OO.ui.ActionWidget.prototype.setFlags = function () {
+ // Mixin method
+ OO.ui.FlaggableElement.prototype.setFlags.apply( this, arguments );
+ this.propagateResize();
+
return this;
};
/**
* @inheritdoc
*/
-OO.ui.InputWidget.prototype.setDisabled = function ( state ) {
- OO.ui.InputWidget.super.prototype.setDisabled.call( this, state );
- if ( this.$input ) {
- this.$input.prop( 'disabled', this.isDisabled() );
- }
+OO.ui.ActionWidget.prototype.clearFlags = function () {
+ // Mixin method
+ OO.ui.FlaggableElement.prototype.clearFlags.apply( this, arguments );
+ this.propagateResize();
+
return this;
};
/**
- * Focus the input.
+ * Toggle visibility of button.
*
+ * @param {boolean} [show] Show button, omit to toggle visibility
* @chainable
*/
-OO.ui.InputWidget.prototype.focus = function () {
- this.$input.focus();
+OO.ui.ActionWidget.prototype.toggle = function () {
+ // Parent method
+ OO.ui.ActionWidget.super.prototype.toggle.apply( this, arguments );
+ this.propagateResize();
+
return this;
};
/**
- * Checkbox widget.
+ * Button that shows and hides a popup.
*
* @class
- * @extends OO.ui.InputWidget
+ * @extends OO.ui.ButtonWidget
+ * @mixins OO.ui.PopuppableElement
*
* @constructor
* @param {Object} [config] Configuration options
*/
-OO.ui.CheckboxInputWidget = function OoUiCheckboxInputWidget( config ) {
+OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
// Parent constructor
- OO.ui.CheckboxInputWidget.super.call( this, config );
+ OO.ui.PopupButtonWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.PopuppableElement.call( this, config );
// Initialization
- this.$element.addClass( 'oo-ui-checkboxInputWidget' );
+ this.$element
+ .addClass( 'oo-ui-popupButtonWidget' )
+ .append( this.popup.$element );
};
/* Setup */
-OO.inheritClass( OO.ui.CheckboxInputWidget, OO.ui.InputWidget );
-
-/* Events */
+OO.inheritClass( OO.ui.PopupButtonWidget, OO.ui.ButtonWidget );
+OO.mixinClass( OO.ui.PopupButtonWidget, OO.ui.PopuppableElement );
/* Methods */
/**
- * Get input element.
+ * Handles mouse click events.
*
- * @return {jQuery} Input element
+ * @param {jQuery.Event} e Mouse click event
*/
-OO.ui.CheckboxInputWidget.prototype.getInputElement = function () {
- return this.$( '<input type="checkbox" />' );
+OO.ui.PopupButtonWidget.prototype.onClick = function ( e ) {
+ // Skip clicks within the popup
+ if ( $.contains( this.popup.$element[0], e.target ) ) {
+ return;
+ }
+
+ if ( !this.isDisabled() ) {
+ this.popup.toggle();
+ // Parent method
+ OO.ui.PopupButtonWidget.super.prototype.onClick.call( this );
+ }
+ return false;
};
/**
- * Get checked state of the checkbox
+ * Button that toggles on and off.
*
- * @return {boolean} If the checkbox is checked
+ * @class
+ * @extends OO.ui.ButtonWidget
+ * @mixins OO.ui.ToggleWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {boolean} [value=false] Initial value
*/
-OO.ui.CheckboxInputWidget.prototype.getValue = function () {
- return this.value;
+OO.ui.ToggleButtonWidget = function OoUiToggleButtonWidget( config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.ToggleButtonWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.ToggleWidget.call( this, config );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-toggleButtonWidget' );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.ToggleButtonWidget, OO.ui.ButtonWidget );
+OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.ToggleWidget );
+
+/* Methods */
+
/**
- * Set value
+ * @inheritdoc
*/
-OO.ui.CheckboxInputWidget.prototype.setValue = function ( value ) {
- value = !!value;
- if ( this.value !== value ) {
- this.value = value;
- this.$input.prop( 'checked', this.value );
- this.emit( 'change', this.value );
+OO.ui.ToggleButtonWidget.prototype.onClick = function () {
+ if ( !this.isDisabled() ) {
+ this.setValue( !this.value );
}
+
+ // Parent method
+ return OO.ui.ToggleButtonWidget.super.prototype.onClick.call( this );
};
/**
* @inheritdoc
*/
-OO.ui.CheckboxInputWidget.prototype.onEdit = function () {
- if ( !this.isDisabled() ) {
- // Allow the stack to clear so the value will be updated
- setTimeout( OO.ui.bind( function () {
- this.setValue( this.$input.prop( 'checked' ) );
- }, this ) );
+OO.ui.ToggleButtonWidget.prototype.setValue = function ( value ) {
+ value = !!value;
+ if ( value !== this.value ) {
+ this.setActive( value );
}
+
+ // Parent method (from mixin)
+ OO.ui.ToggleWidget.prototype.setValue.call( this, value );
+
+ return this;
};
/**
- * Label widget.
+ * Icon widget.
*
* @class
* @extends OO.ui.Widget
- * @mixins OO.ui.LabeledElement
+ * @mixins OO.ui.IconedElement
+ * @mixins OO.ui.TitledElement
*
* @constructor
* @param {Object} [config] Configuration options
*/
-OO.ui.LabelWidget = function OoUiLabelWidget( config ) {
+OO.ui.IconWidget = function OoUiIconWidget( config ) {
// Config intialization
config = config || {};
// Parent constructor
- OO.ui.LabelWidget.super.call( this, config );
+ OO.ui.IconWidget.super.call( this, config );
// Mixin constructors
- OO.ui.LabeledElement.call( this, this.$element, config );
-
- // Properties
- this.input = config.input;
-
- // Events
- if ( this.input instanceof OO.ui.InputWidget ) {
- this.$element.on( 'click', OO.ui.bind( this.onClick, this ) );
- }
+ OO.ui.IconedElement.call( this, this.$element, config );
+ OO.ui.TitledElement.call( this, this.$element, config );
// Initialization
- this.$element.addClass( 'oo-ui-labelWidget' );
+ this.$element.addClass( 'oo-ui-iconWidget' );
};
/* Setup */
-OO.inheritClass( OO.ui.LabelWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.LabelWidget, OO.ui.LabeledElement );
+OO.inheritClass( OO.ui.IconWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.IconWidget, OO.ui.IconedElement );
+OO.mixinClass( OO.ui.IconWidget, OO.ui.TitledElement );
/* Static Properties */
-OO.ui.LabelWidget.static.tagName = 'label';
-
-/* Methods */
-
-/**
- * Handles label mouse click events.
- *
- * @param {jQuery.Event} e Mouse click event
- */
-OO.ui.LabelWidget.prototype.onClick = function () {
- this.input.simulateLabelClick();
- return false;
-};
+OO.ui.IconWidget.static.tagName = 'span';
/**
- * Lookup input widget.
+ * Indicator widget.
*
- * Mixin that adds a menu showing suggested values to a text input. Subclasses must handle `select`
- * and `choose` events on #lookupMenu to make use of selections.
+ * See OO.ui.IndicatedElement for more information.
*
* @class
- * @abstract
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.IndicatedElement
+ * @mixins OO.ui.TitledElement
*
* @constructor
- * @param {OO.ui.TextInputWidget} input Input widget
* @param {Object} [config] Configuration options
- * @cfg {jQuery} [$overlay=this.$( 'body' )] Overlay layer
*/
-OO.ui.LookupInputWidget = function OoUiLookupInputWidget( input, config ) {
+OO.ui.IndicatorWidget = function OoUiIndicatorWidget( config ) {
// Config intialization
config = config || {};
- // Properties
- this.lookupInput = input;
- this.$overlay = config.$overlay || this.$( 'body,.oo-ui-window-overlay' ).last();
- this.lookupMenu = new OO.ui.TextInputMenuWidget( this, {
- '$': OO.ui.Element.getJQuery( this.$overlay ),
- 'input': this.lookupInput,
- '$container': config.$container
- } );
- this.lookupCache = {};
- this.lookupQuery = null;
- this.lookupRequest = null;
- this.populating = false;
-
- // Events
- this.$overlay.append( this.lookupMenu.$element );
+ // Parent constructor
+ OO.ui.IndicatorWidget.super.call( this, config );
- this.lookupInput.$input.on( {
- 'focus': OO.ui.bind( this.onLookupInputFocus, this ),
- 'blur': OO.ui.bind( this.onLookupInputBlur, this ),
- 'mousedown': OO.ui.bind( this.onLookupInputMouseDown, this )
- } );
- this.lookupInput.connect( this, { 'change': 'onLookupInputChange' } );
+ // Mixin constructors
+ OO.ui.IndicatedElement.call( this, this.$element, config );
+ OO.ui.TitledElement.call( this, this.$element, config );
// Initialization
- this.$element.addClass( 'oo-ui-lookupWidget' );
- this.lookupMenu.$element.addClass( 'oo-ui-lookupWidget-menu' );
+ this.$element.addClass( 'oo-ui-indicatorWidget' );
};
-/* Methods */
+/* Setup */
-/**
- * Handle input focus event.
- *
- * @param {jQuery.Event} e Input focus event
- */
-OO.ui.LookupInputWidget.prototype.onLookupInputFocus = function () {
- this.openLookupMenu();
-};
+OO.inheritClass( OO.ui.IndicatorWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.IndicatedElement );
+OO.mixinClass( OO.ui.IndicatorWidget, OO.ui.TitledElement );
-/**
- * Handle input blur event.
- *
- * @param {jQuery.Event} e Input blur event
- */
-OO.ui.LookupInputWidget.prototype.onLookupInputBlur = function () {
- this.lookupMenu.hide();
-};
+/* Static Properties */
-/**
- * Handle input mouse down event.
- *
- * @param {jQuery.Event} e Input mouse down event
- */
-OO.ui.LookupInputWidget.prototype.onLookupInputMouseDown = function () {
- this.openLookupMenu();
-};
+OO.ui.IndicatorWidget.static.tagName = 'span';
/**
- * Handle input change event.
+ * Inline menu of options.
*
- * @param {string} value New input value
+ * Inline menus provide a control for accessing a menu and compose a menu within the widget, which
+ * can be accessed using the #getMenu method.
+ *
+ * Use with OO.ui.MenuOptionWidget.
+ *
+ * @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.IconedElement
+ * @mixins OO.ui.IndicatedElement
+ * @mixins OO.ui.LabeledElement
+ * @mixins OO.ui.TitledElement
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {Object} [menu] Configuration options to pass to menu widget
*/
-OO.ui.LookupInputWidget.prototype.onLookupInputChange = function () {
- this.openLookupMenu();
+OO.ui.InlineMenuWidget = function OoUiInlineMenuWidget( config ) {
+ // Configuration initialization
+ config = $.extend( { indicator: 'down' }, config );
+
+ // Parent constructor
+ OO.ui.InlineMenuWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
+ OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
+ OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
+ OO.ui.TitledElement.call( this, this.$label, config );
+
+ // Properties
+ this.menu = new OO.ui.MenuWidget( $.extend( { $: this.$, widget: this }, config.menu ) );
+ this.$handle = this.$( '<span>' );
+
+ // Events
+ this.$element.on( { click: OO.ui.bind( this.onClick, this ) } );
+ this.menu.connect( this, { select: 'onMenuSelect' } );
+
+ // Initialization
+ this.$handle
+ .addClass( 'oo-ui-inlineMenuWidget-handle' )
+ .append( this.$icon, this.$label, this.$indicator );
+ this.$element
+ .addClass( 'oo-ui-inlineMenuWidget' )
+ .append( this.$handle, this.menu.$element );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.InlineMenuWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.IconedElement );
+OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.IndicatedElement );
+OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.LabeledElement );
+OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.TitledElement );
+
+/* Methods */
+
/**
- * Get lookup menu.
+ * Get the menu.
*
- * @return {OO.ui.TextInputMenuWidget}
+ * @return {OO.ui.MenuWidget} Menu of widget
*/
-OO.ui.LookupInputWidget.prototype.getLookupMenu = function () {
- return this.lookupMenu;
+OO.ui.InlineMenuWidget.prototype.getMenu = function () {
+ return this.menu;
};
/**
- * Open the menu.
+ * Handles menu select events.
*
- * @chainable
+ * @param {OO.ui.MenuItemWidget} item Selected menu item
*/
-OO.ui.LookupInputWidget.prototype.openLookupMenu = function () {
- var value = this.lookupInput.getValue();
+OO.ui.InlineMenuWidget.prototype.onMenuSelect = function ( item ) {
+ var selectedLabel;
- if ( this.lookupMenu.$input.is( ':focus' ) && $.trim( value ) !== '' ) {
- this.populateLookupMenu();
- if ( !this.lookupMenu.isVisible() ) {
- this.lookupMenu.show();
- }
- } else {
- this.lookupMenu.clearItems();
- this.lookupMenu.hide();
+ if ( !item ) {
+ return;
}
- return this;
-};
+ selectedLabel = item.getLabel();
-/**
- * Populate lookup menu with current information.
- *
- * @chainable
- */
-OO.ui.LookupInputWidget.prototype.populateLookupMenu = function () {
- if ( !this.populating ) {
- this.populating = true;
- this.getLookupMenuItems()
- .done( OO.ui.bind( function ( items ) {
- this.lookupMenu.clearItems();
- if ( items.length ) {
- this.lookupMenu.show();
- this.lookupMenu.addItems( items );
- this.initializeLookupMenuSelection();
- this.openLookupMenu();
- } else {
- this.lookupMenu.hide();
- }
- this.populating = false;
- }, this ) )
- .fail( OO.ui.bind( function () {
- this.lookupMenu.clearItems();
- this.populating = false;
- }, this ) );
+ // If the label is a DOM element, clone it, because setLabel will append() it
+ if ( selectedLabel instanceof jQuery ) {
+ selectedLabel = selectedLabel.clone();
}
- return this;
+ this.setLabel( selectedLabel );
};
/**
- * Set selection in the lookup menu with current information.
+ * Handles mouse click events.
*
- * @chainable
+ * @param {jQuery.Event} e Mouse click event
*/
-OO.ui.LookupInputWidget.prototype.initializeLookupMenuSelection = function () {
- if ( !this.lookupMenu.getSelectedItem() ) {
- this.lookupMenu.selectItem( this.lookupMenu.getFirstSelectableItem() );
+OO.ui.InlineMenuWidget.prototype.onClick = function ( e ) {
+ // Skip clicks within the menu
+ if ( $.contains( this.menu.$element[0], e.target ) ) {
+ return;
}
- this.lookupMenu.highlightItem( this.lookupMenu.getSelectedItem() );
-};
-
-/**
- * Get lookup menu items for the current query.
- *
- * @return {jQuery.Promise} Promise object which will be passed menu items as the first argument
- * of the done event
- */
-OO.ui.LookupInputWidget.prototype.getLookupMenuItems = function () {
- var value = this.lookupInput.getValue(),
- deferred = $.Deferred();
- if ( value && value !== this.lookupQuery ) {
- // Abort current request if query has changed
- if ( this.lookupRequest ) {
- this.lookupRequest.abort();
- this.lookupQuery = null;
- this.lookupRequest = null;
- }
- if ( value in this.lookupCache ) {
- deferred.resolve( this.getLookupMenuItemsFromData( this.lookupCache[value] ) );
+ if ( !this.isDisabled() ) {
+ if ( this.menu.isVisible() ) {
+ this.menu.toggle( false );
} else {
- this.lookupQuery = value;
- this.lookupRequest = this.getLookupRequest()
- .always( OO.ui.bind( function () {
- this.lookupQuery = null;
- this.lookupRequest = null;
- }, this ) )
- .done( OO.ui.bind( function ( data ) {
- this.lookupCache[value] = this.getLookupCacheItemFromData( data );
- deferred.resolve( this.getLookupMenuItemsFromData( this.lookupCache[value] ) );
- }, this ) )
- .fail( function () {
- deferred.reject();
- } );
- this.pushPending();
- this.lookupRequest.always( OO.ui.bind( function () {
- this.popPending();
- }, this ) );
+ this.menu.toggle( true );
}
}
- return deferred.promise();
-};
-
-/**
- * Get a new request object of the current lookup query value.
- *
- * @abstract
- * @return {jqXHR} jQuery AJAX object, or promise object with an .abort() method
- */
-OO.ui.LookupInputWidget.prototype.getLookupRequest = function () {
- // Stub, implemented in subclass
- return null;
-};
-
-/**
- * Handle successful lookup request.
- *
- * Overriding methods should call #populateLookupMenu when results are available and cache results
- * for future lookups in #lookupCache as an array of #OO.ui.MenuItemWidget objects.
- *
- * @abstract
- * @param {Mixed} data Response from server
- */
-OO.ui.LookupInputWidget.prototype.onLookupRequestDone = function () {
- // Stub, implemented in subclass
+ return false;
};
/**
- * Get a list of menu item widgets from the data stored by the lookup request's done handler.
+ * Base class for input widgets.
*
* @abstract
- * @param {Mixed} data Cached result data, usually an array
- * @return {OO.ui.MenuItemWidget[]} Menu items
- */
-OO.ui.LookupInputWidget.prototype.getLookupMenuItemsFromData = function () {
- // Stub, implemented in subclass
- return [];
-};
-
-/**
- * Option widget.
- *
- * Use with OO.ui.SelectWidget.
- *
* @class
* @extends OO.ui.Widget
- * @mixins OO.ui.IconedElement
- * @mixins OO.ui.LabeledElement
- * @mixins OO.ui.IndicatedElement
- * @mixins OO.ui.FlaggableElement
*
* @constructor
- * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
- * @cfg {string} [rel] Value for `rel` attribute in DOM, allowing per-option styling
+ * @cfg {string} [name=''] HTML input name
+ * @cfg {string} [value=''] Input value
+ * @cfg {boolean} [readOnly=false] Prevent changes
+ * @cfg {Function} [inputFilter] Filter function to apply to the input. Takes a string argument and returns a string.
*/
-OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
+OO.ui.InputWidget = function OoUiInputWidget( config ) {
// Config intialization
- config = config || {};
+ config = $.extend( { readOnly: false }, config );
// Parent constructor
- OO.ui.OptionWidget.super.call( this, config );
-
- // Mixin constructors
- OO.ui.ItemWidget.call( this );
- OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
- OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
- OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
- OO.ui.FlaggableElement.call( this, config );
+ OO.ui.InputWidget.super.call( this, config );
// Properties
- this.data = data;
- this.selected = false;
- this.highlighted = false;
- this.pressed = false;
+ this.$input = this.getInputElement( config );
+ this.value = '';
+ this.readOnly = false;
+ this.inputFilter = config.inputFilter;
+
+ // Events
+ this.$input.on( 'keydown mouseup cut paste change input select', OO.ui.bind( this.onEdit, this ) );
// Initialization
- this.$element
- .data( 'oo-ui-optionWidget', this )
- .attr( 'rel', config.rel )
- .addClass( 'oo-ui-optionWidget' )
- .append( this.$label );
- this.$element
- .prepend( this.$icon )
- .append( this.$indicator );
+ this.$input
+ .attr( 'name', config.name )
+ .prop( 'disabled', this.isDisabled() );
+ this.setReadOnly( config.readOnly );
+ this.$element.addClass( 'oo-ui-inputWidget' ).append( this.$input );
+ this.setValue( config.value );
};
/* Setup */
-OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.OptionWidget, OO.ui.ItemWidget );
-OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement );
-OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement );
-OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement );
-OO.mixinClass( OO.ui.OptionWidget, OO.ui.FlaggableElement );
-
-/* Static Properties */
+OO.inheritClass( OO.ui.InputWidget, OO.ui.Widget );
-OO.ui.OptionWidget.static.tagName = 'li';
+/* Events */
-OO.ui.OptionWidget.static.selectable = true;
+/**
+ * @event change
+ * @param value
+ */
-OO.ui.OptionWidget.static.highlightable = true;
+/* Methods */
-OO.ui.OptionWidget.static.pressable = true;
+/**
+ * Get input element.
+ *
+ * @param {Object} [config] Configuration options
+ * @return {jQuery} Input element
+ */
+OO.ui.InputWidget.prototype.getInputElement = function () {
+ return this.$( '<input>' );
+};
-OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false;
+/**
+ * Handle potentially value-changing events.
+ *
+ * @param {jQuery.Event} e Key down, mouse up, cut, paste, change, input, or select event
+ */
+OO.ui.InputWidget.prototype.onEdit = function () {
+ var widget = this;
+ if ( !this.isDisabled() ) {
+ // Allow the stack to clear so the value will be updated
+ setTimeout( function () {
+ widget.setValue( widget.$input.val() );
+ } );
+ }
+};
-/* Methods */
+/**
+ * Get the value of the input.
+ *
+ * @return {string} Input value
+ */
+OO.ui.InputWidget.prototype.getValue = function () {
+ return this.value;
+};
/**
- * Check if option can be selected.
+ * Sets the direction of the current input, either RTL or LTR
*
- * @return {boolean} Item is selectable
+ * @param {boolean} isRTL
*/
-OO.ui.OptionWidget.prototype.isSelectable = function () {
- return this.constructor.static.selectable && !this.isDisabled();
+OO.ui.InputWidget.prototype.setRTL = function ( isRTL ) {
+ if ( isRTL ) {
+ this.$input.removeClass( 'oo-ui-ltr' );
+ this.$input.addClass( 'oo-ui-rtl' );
+ } else {
+ this.$input.removeClass( 'oo-ui-rtl' );
+ this.$input.addClass( 'oo-ui-ltr' );
+ }
};
/**
- * Check if option can be highlighted.
+ * Set the value of the input.
*
- * @return {boolean} Item is highlightable
+ * @param {string} value New value
+ * @fires change
+ * @chainable
*/
-OO.ui.OptionWidget.prototype.isHighlightable = function () {
- return this.constructor.static.highlightable && !this.isDisabled();
+OO.ui.InputWidget.prototype.setValue = function ( value ) {
+ value = this.sanitizeValue( value );
+ if ( this.value !== value ) {
+ this.value = value;
+ this.emit( 'change', this.value );
+ }
+ // Update the DOM if it has changed. Note that with sanitizeValue, it
+ // is possible for the DOM value to change without this.value changing.
+ if ( this.$input.val() !== this.value ) {
+ this.$input.val( this.value );
+ }
+ return this;
};
/**
- * Check if option can be pressed.
+ * Sanitize incoming value.
*
- * @return {boolean} Item is pressable
- */
-OO.ui.OptionWidget.prototype.isPressable = function () {
- return this.constructor.static.pressable && !this.isDisabled();
-};
-
-/**
- * Check if option is selected.
+ * Ensures value is a string, and converts undefined and null to empty strings.
*
- * @return {boolean} Item is selected
+ * @param {string} value Original value
+ * @return {string} Sanitized value
*/
-OO.ui.OptionWidget.prototype.isSelected = function () {
- return this.selected;
+OO.ui.InputWidget.prototype.sanitizeValue = function ( value ) {
+ if ( value === undefined || value === null ) {
+ return '';
+ } else if ( this.inputFilter ) {
+ return this.inputFilter( String( value ) );
+ } else {
+ return String( value );
+ }
};
/**
- * Check if option is highlighted.
- *
- * @return {boolean} Item is highlighted
+ * Simulate the behavior of clicking on a label bound to this input.
*/
-OO.ui.OptionWidget.prototype.isHighlighted = function () {
- return this.highlighted;
+OO.ui.InputWidget.prototype.simulateLabelClick = function () {
+ if ( !this.isDisabled() ) {
+ if ( this.$input.is( ':checkbox,:radio' ) ) {
+ this.$input.click();
+ } else if ( this.$input.is( ':input' ) ) {
+ this.$input[0].focus();
+ }
+ }
};
/**
- * Check if option is pressed.
+ * Check if the widget is read-only.
*
- * @return {boolean} Item is pressed
+ * @return {boolean}
*/
-OO.ui.OptionWidget.prototype.isPressed = function () {
- return this.pressed;
+OO.ui.InputWidget.prototype.isReadOnly = function () {
+ return this.readOnly;
};
/**
- * Set selected state.
+ * Set the read-only state of the widget.
*
- * @param {boolean} [state=false] Select option
+ * This should probably change the widgets's appearance and prevent it from being used.
+ *
+ * @param {boolean} state Make input read-only
* @chainable
*/
-OO.ui.OptionWidget.prototype.setSelected = function ( state ) {
- if ( this.constructor.static.selectable ) {
- this.selected = !!state;
- if ( this.selected ) {
- this.$element.addClass( 'oo-ui-optionWidget-selected' );
- if ( this.constructor.static.scrollIntoViewOnSelect ) {
- this.scrollElementIntoView();
- }
- } else {
- this.$element.removeClass( 'oo-ui-optionWidget-selected' );
- }
- }
+OO.ui.InputWidget.prototype.setReadOnly = function ( state ) {
+ this.readOnly = !!state;
+ this.$input.prop( 'readOnly', this.readOnly );
return this;
};
/**
- * Set highlighted state.
- *
- * @param {boolean} [state=false] Highlight option
- * @chainable
+ * @inheritdoc
*/
-OO.ui.OptionWidget.prototype.setHighlighted = function ( state ) {
- if ( this.constructor.static.highlightable ) {
- this.highlighted = !!state;
- if ( this.highlighted ) {
- this.$element.addClass( 'oo-ui-optionWidget-highlighted' );
- } else {
- this.$element.removeClass( 'oo-ui-optionWidget-highlighted' );
- }
+OO.ui.InputWidget.prototype.setDisabled = function ( state ) {
+ OO.ui.InputWidget.super.prototype.setDisabled.call( this, state );
+ if ( this.$input ) {
+ this.$input.prop( 'disabled', this.isDisabled() );
}
return this;
};
/**
- * Set pressed state.
+ * Focus the input.
*
- * @param {boolean} [state=false] Press option
* @chainable
*/
-OO.ui.OptionWidget.prototype.setPressed = function ( state ) {
- if ( this.constructor.static.pressable ) {
- this.pressed = !!state;
- if ( this.pressed ) {
- this.$element.addClass( 'oo-ui-optionWidget-pressed' );
- } else {
- this.$element.removeClass( 'oo-ui-optionWidget-pressed' );
- }
- }
+OO.ui.InputWidget.prototype.focus = function () {
+ this.$input[0].focus();
return this;
};
/**
- * Make the option's highlight flash.
- *
- * While flashing, the visual style of the pressed state is removed if present.
- *
- * @return {jQuery.Promise} Promise resolved when flashing is done
- */
-OO.ui.OptionWidget.prototype.flash = function () {
- var $this = this.$element,
- deferred = $.Deferred();
-
- if ( !this.isDisabled() && this.constructor.static.pressable ) {
- $this.removeClass( 'oo-ui-optionWidget-highlighted oo-ui-optionWidget-pressed' );
- setTimeout( OO.ui.bind( function () {
- // Restore original classes
- $this
- .toggleClass( 'oo-ui-optionWidget-highlighted', this.highlighted )
- .toggleClass( 'oo-ui-optionWidget-pressed', this.pressed );
- setTimeout( function () {
- deferred.resolve();
- }, 100 );
- }, this ), 100 );
- }
-
- return deferred.promise();
-};
-
-/**
- * Get option data.
+ * Blur the input.
*
- * @return {Mixed} Option data
+ * @chainable
*/
-OO.ui.OptionWidget.prototype.getData = function () {
- return this.data;
+OO.ui.InputWidget.prototype.blur = function () {
+ this.$input[0].blur();
+ return this;
};
/**
- * Selection of options.
- *
- * Use together with OO.ui.OptionWidget.
+ * Checkbox input widget.
*
* @class
- * @extends OO.ui.Widget
- * @mixins OO.ui.GroupElement
+ * @extends OO.ui.InputWidget
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {OO.ui.OptionWidget[]} [items] Options to add
*/
-OO.ui.SelectWidget = function OoUiSelectWidget( config ) {
- // Config intialization
- config = config || {};
-
+OO.ui.CheckboxInputWidget = function OoUiCheckboxInputWidget( config ) {
// Parent constructor
- OO.ui.SelectWidget.super.call( this, config );
-
- // Mixin constructors
- OO.ui.GroupWidget.call( this, this.$element, config );
-
- // Properties
- this.pressed = false;
- this.selecting = null;
- this.hashes = {};
- this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
- this.onMouseMoveHandler = OO.ui.bind( this.onMouseMove, this );
-
- // Events
- this.$element.on( {
- 'mousedown': OO.ui.bind( this.onMouseDown, this ),
- 'mouseover': OO.ui.bind( this.onMouseOver, this ),
- 'mouseleave': OO.ui.bind( this.onMouseLeave, this )
- } );
+ OO.ui.CheckboxInputWidget.super.call( this, config );
// Initialization
- this.$element.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' );
- if ( $.isArray( config.items ) ) {
- this.addItems( config.items );
- }
+ this.$element.addClass( 'oo-ui-checkboxInputWidget' );
};
/* Setup */
-OO.inheritClass( OO.ui.SelectWidget, OO.ui.Widget );
-
-// Need to mixin base class as well
-OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupElement );
-OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupWidget );
+OO.inheritClass( OO.ui.CheckboxInputWidget, OO.ui.InputWidget );
/* Events */
-/**
- * @event highlight
- * @param {OO.ui.OptionWidget|null} item Highlighted item
- */
-
-/**
- * @event press
- * @param {OO.ui.OptionWidget|null} item Pressed item
- */
-
-/**
- * @event select
- * @param {OO.ui.OptionWidget|null} item Selected item
- */
-
-/**
- * @event choose
- * @param {OO.ui.OptionWidget|null} item Chosen item
- */
-
-/**
- * @event add
- * @param {OO.ui.OptionWidget[]} items Added items
- * @param {number} index Index items were added at
- */
-
-/**
- * @event remove
- * @param {OO.ui.OptionWidget[]} items Removed items
- */
-
-/* Static Properties */
-
-OO.ui.SelectWidget.static.tagName = 'ul';
-
/* Methods */
/**
- * Handle mouse down events.
- *
- * @private
- * @param {jQuery.Event} e Mouse down event
- */
-OO.ui.SelectWidget.prototype.onMouseDown = function ( e ) {
- var item;
-
- if ( !this.isDisabled() && e.which === 1 ) {
- this.togglePressed( true );
- item = this.getTargetItem( e );
- if ( item && item.isSelectable() ) {
- this.pressItem( item );
- this.selecting = item;
- this.getElementDocument().addEventListener(
- 'mouseup', this.onMouseUpHandler, true
- );
- this.getElementDocument().addEventListener(
- 'mousemove', this.onMouseMoveHandler, true
- );
- }
- }
- return false;
-};
-
-/**
- * Handle mouse up events.
- *
- * @private
- * @param {jQuery.Event} e Mouse up event
- */
-OO.ui.SelectWidget.prototype.onMouseUp = function ( e ) {
- var item;
-
- this.togglePressed( false );
- if ( !this.selecting ) {
- item = this.getTargetItem( e );
- if ( item && item.isSelectable() ) {
- this.selecting = item;
- }
- }
- if ( !this.isDisabled() && e.which === 1 && this.selecting ) {
- this.pressItem( null );
- this.chooseItem( this.selecting );
- this.selecting = null;
- }
-
- this.getElementDocument().removeEventListener(
- 'mouseup', this.onMouseUpHandler, true
- );
- this.getElementDocument().removeEventListener(
- 'mousemove', this.onMouseMoveHandler, true
- );
-
- return false;
-};
-
-/**
- * Handle mouse move events.
+ * Get input element.
*
- * @private
- * @param {jQuery.Event} e Mouse move event
+ * @return {jQuery} Input element
*/
-OO.ui.SelectWidget.prototype.onMouseMove = function ( e ) {
- var item;
-
- if ( !this.isDisabled() && this.pressed ) {
- item = this.getTargetItem( e );
- if ( item && item !== this.selecting && item.isSelectable() ) {
- this.pressItem( item );
- this.selecting = item;
- }
- }
- return false;
+OO.ui.CheckboxInputWidget.prototype.getInputElement = function () {
+ return this.$( '<input type="checkbox" />' );
};
/**
- * Handle mouse over events.
+ * Get checked state of the checkbox
*
- * @private
- * @param {jQuery.Event} e Mouse over event
+ * @return {boolean} If the checkbox is checked
*/
-OO.ui.SelectWidget.prototype.onMouseOver = function ( e ) {
- var item;
-
- if ( !this.isDisabled() ) {
- item = this.getTargetItem( e );
- this.highlightItem( item && item.isHighlightable() ? item : null );
- }
- return false;
+OO.ui.CheckboxInputWidget.prototype.getValue = function () {
+ return this.value;
};
/**
- * Handle mouse leave events.
- *
- * @private
- * @param {jQuery.Event} e Mouse over event
+ * Set value
*/
-OO.ui.SelectWidget.prototype.onMouseLeave = function () {
- if ( !this.isDisabled() ) {
- this.highlightItem( null );
+OO.ui.CheckboxInputWidget.prototype.setValue = function ( value ) {
+ value = !!value;
+ if ( this.value !== value ) {
+ this.value = value;
+ this.$input.prop( 'checked', this.value );
+ this.emit( 'change', this.value );
}
- return false;
};
/**
- * Get the closest item to a jQuery.Event.
- *
- * @private
- * @param {jQuery.Event} e
- * @return {OO.ui.OptionWidget|null} Outline item widget, `null` if none was found
+ * @inheritdoc
*/
-OO.ui.SelectWidget.prototype.getTargetItem = function ( e ) {
- var $item = this.$( e.target ).closest( '.oo-ui-optionWidget' );
- if ( $item.length ) {
- return $item.data( 'oo-ui-optionWidget' );
+OO.ui.CheckboxInputWidget.prototype.onEdit = function () {
+ var widget = this;
+ if ( !this.isDisabled() ) {
+ // Allow the stack to clear so the value will be updated
+ setTimeout( function () {
+ widget.setValue( widget.$input.prop( 'checked' ) );
+ } );
}
- return null;
};
/**
- * Get selected item.
+ * Input widget with a text field.
*
- * @return {OO.ui.OptionWidget|null} Selected item, `null` if no item is selected
+ * @class
+ * @extends OO.ui.InputWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {string} [placeholder] Placeholder text
+ * @cfg {string} [icon] Symbolic name of icon
+ * @cfg {boolean} [multiline=false] Allow multiple lines of text
+ * @cfg {boolean} [autosize=false] Automatically resize to fit content
+ * @cfg {boolean} [maxRows=10] Maximum number of rows to make visible when autosizing
*/
-OO.ui.SelectWidget.prototype.getSelectedItem = function () {
- var i, len;
+OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
+ var widget = this;
+ config = $.extend( { maxRows: 10 }, config );
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- if ( this.items[i].isSelected() ) {
- return this.items[i];
- }
+ // Parent constructor
+ OO.ui.TextInputWidget.super.call( this, config );
+
+ // Properties
+ this.pending = 0;
+ this.multiline = !!config.multiline;
+ this.autosize = !!config.autosize;
+ this.maxRows = config.maxRows;
+
+ // Events
+ this.$input.on( 'keypress', OO.ui.bind( this.onKeyPress, this ) );
+ this.$element.on( 'DOMNodeInsertedIntoDocument', OO.ui.bind( this.onElementAttach, this ) );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-textInputWidget' );
+ if ( config.icon ) {
+ this.$element.addClass( 'oo-ui-textInputWidget-decorated' );
+ this.$element.append(
+ this.$( '<span>' )
+ .addClass( 'oo-ui-textInputWidget-icon oo-ui-icon-' + config.icon )
+ .mousedown( function () {
+ widget.$input[0].focus();
+ return false;
+ } )
+ );
}
- return null;
+ if ( config.placeholder ) {
+ this.$input.attr( 'placeholder', config.placeholder );
+ }
+ this.$element.attr( 'role', 'textbox' );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.TextInputWidget, OO.ui.InputWidget );
+
+/* Events */
+
/**
- * Get highlighted item.
+ * User presses enter inside the text box.
*
- * @return {OO.ui.OptionWidget|null} Highlighted item, `null` if no item is highlighted
+ * Not called if input is multiline.
+ *
+ * @event enter
*/
-OO.ui.SelectWidget.prototype.getHighlightedItem = function () {
- var i, len;
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- if ( this.items[i].isHighlighted() ) {
- return this.items[i];
- }
- }
- return null;
-};
+/* Methods */
/**
- * Get an existing item with equivilant data.
+ * Handle key press events.
*
- * @param {Object} data Item data to search for
- * @return {OO.ui.OptionWidget|null} Item with equivilent value, `null` if none exists
+ * @param {jQuery.Event} e Key press event
+ * @fires enter If enter key is pressed and input is not multiline
*/
-OO.ui.SelectWidget.prototype.getItemFromData = function ( data ) {
- var hash = OO.getHash( data );
-
- if ( hash in this.hashes ) {
- return this.hashes[hash];
+OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) {
+ if ( e.which === OO.ui.Keys.ENTER && !this.multiline ) {
+ this.emit( 'enter' );
}
-
- return null;
};
/**
- * Toggle pressed state.
+ * Handle element attach events.
*
- * @param {boolean} pressed An option is being pressed
+ * @param {jQuery.Event} e Element attach event
*/
-OO.ui.SelectWidget.prototype.togglePressed = function ( pressed ) {
- if ( pressed === undefined ) {
- pressed = !this.pressed;
- }
- if ( pressed !== this.pressed ) {
- this.$element.toggleClass( 'oo-ui-selectWidget-pressed', pressed );
- this.$element.toggleClass( 'oo-ui-selectWidget-depressed', !pressed );
- this.pressed = pressed;
- }
+OO.ui.TextInputWidget.prototype.onElementAttach = function () {
+ this.adjustSize();
};
/**
- * Highlight an item.
- *
- * Highlighting is mutually exclusive.
- *
- * @param {OO.ui.OptionWidget} [item] Item to highlight, omit to deselect all
- * @fires highlight
- * @chainable
+ * @inheritdoc
*/
-OO.ui.SelectWidget.prototype.highlightItem = function ( item ) {
- var i, len, highlighted,
- changed = false;
-
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- highlighted = this.items[i] === item;
- if ( this.items[i].isHighlighted() !== highlighted ) {
- this.items[i].setHighlighted( highlighted );
- changed = true;
- }
- }
- if ( changed ) {
- this.emit( 'highlight', item );
- }
+OO.ui.TextInputWidget.prototype.onEdit = function () {
+ this.adjustSize();
- return this;
+ // Parent method
+ return OO.ui.TextInputWidget.super.prototype.onEdit.call( this );
};
/**
- * Select an item.
- *
- * @param {OO.ui.OptionWidget} [item] Item to select, omit to deselect all
- * @fires select
- * @chainable
+ * @inheritdoc
*/
-OO.ui.SelectWidget.prototype.selectItem = function ( item ) {
- var i, len, selected,
- changed = false;
-
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- selected = this.items[i] === item;
- if ( this.items[i].isSelected() !== selected ) {
- this.items[i].setSelected( selected );
- changed = true;
- }
- }
- if ( changed ) {
- this.emit( 'select', item );
- }
+OO.ui.TextInputWidget.prototype.setValue = function ( value ) {
+ // Parent method
+ OO.ui.TextInputWidget.super.prototype.setValue.call( this, value );
+ this.adjustSize();
return this;
};
/**
- * Press an item.
+ * Automatically adjust the size of the text input.
+ *
+ * This only affects multi-line inputs that are auto-sized.
*
- * @param {OO.ui.OptionWidget} [item] Item to press, omit to depress all
- * @fires press
* @chainable
*/
-OO.ui.SelectWidget.prototype.pressItem = function ( item ) {
- var i, len, pressed,
- changed = false;
+OO.ui.TextInputWidget.prototype.adjustSize = function () {
+ var $clone, scrollHeight, innerHeight, outerHeight, maxInnerHeight, idealHeight;
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- pressed = this.items[i] === item;
- if ( this.items[i].isPressed() !== pressed ) {
- this.items[i].setPressed( pressed );
- changed = true;
- }
- }
- if ( changed ) {
- this.emit( 'press', item );
+ if ( this.multiline && this.autosize ) {
+ $clone = this.$input.clone()
+ .val( this.$input.val() )
+ .css( { height: 0 } )
+ .insertAfter( this.$input );
+ // Set inline height property to 0 to measure scroll height
+ scrollHeight = $clone[0].scrollHeight;
+ // Remove inline height property to measure natural heights
+ $clone.css( 'height', '' );
+ innerHeight = $clone.innerHeight();
+ outerHeight = $clone.outerHeight();
+ // Measure max rows height
+ $clone.attr( 'rows', this.maxRows ).css( 'height', 'auto' );
+ maxInnerHeight = $clone.innerHeight();
+ $clone.removeAttr( 'rows' ).css( 'height', '' );
+ $clone.remove();
+ idealHeight = Math.min( maxInnerHeight, scrollHeight );
+ // Only apply inline height when expansion beyond natural height is needed
+ this.$input.css(
+ 'height',
+ // Use the difference between the inner and outer height as a buffer
+ idealHeight > outerHeight ? idealHeight + ( outerHeight - innerHeight ) : ''
+ );
}
-
return this;
};
/**
- * Choose an item.
- *
- * Identical to #selectItem, but may vary in subclasses that want to take additional action when
- * an item is selected using the keyboard or mouse.
+ * Get input element.
*
- * @param {OO.ui.OptionWidget} item Item to choose
- * @fires choose
- * @chainable
+ * @param {Object} [config] Configuration options
+ * @return {jQuery} Input element
*/
-OO.ui.SelectWidget.prototype.chooseItem = function ( item ) {
- this.selectItem( item );
- this.emit( 'choose', item );
+OO.ui.TextInputWidget.prototype.getInputElement = function ( config ) {
+ return config.multiline ? this.$( '<textarea>' ) : this.$( '<input type="text" />' );
+};
- return this;
+/* Methods */
+
+/**
+ * Check if input supports multiple lines.
+ *
+ * @return {boolean}
+ */
+OO.ui.TextInputWidget.prototype.isMultiline = function () {
+ return !!this.multiline;
};
/**
- * Get an item relative to another one.
+ * Check if input automatically adjusts its size.
*
- * @param {OO.ui.OptionWidget} item Item to start at
- * @param {number} direction Direction to move in
- * @return {OO.ui.OptionWidget|null} Item at position, `null` if there are no items in the menu
+ * @return {boolean}
*/
-OO.ui.SelectWidget.prototype.getRelativeSelectableItem = function ( item, direction ) {
- var inc = direction > 0 ? 1 : -1,
- len = this.items.length,
- index = item instanceof OO.ui.OptionWidget ?
- $.inArray( item, this.items ) : ( inc > 0 ? -1 : 0 ),
- stopAt = Math.max( Math.min( index, len - 1 ), 0 ),
- i = inc > 0 ?
- // Default to 0 instead of -1, if nothing is selected let's start at the beginning
- Math.max( index, -1 ) :
- // Default to n-1 instead of -1, if nothing is selected let's start at the end
- Math.min( index, len );
-
- while ( true ) {
- i = ( i + inc + len ) % len;
- item = this.items[i];
- if ( item instanceof OO.ui.OptionWidget && item.isSelectable() ) {
- return item;
- }
- // Stop iterating when we've looped all the way around
- if ( i === stopAt ) {
- break;
- }
- }
- return null;
+OO.ui.TextInputWidget.prototype.isAutosizing = function () {
+ return !!this.autosize;
};
/**
- * Get the next selectable item.
+ * Check if input is pending.
*
- * @return {OO.ui.OptionWidget|null} Item, `null` if ther aren't any selectable items
+ * @return {boolean}
*/
-OO.ui.SelectWidget.prototype.getFirstSelectableItem = function () {
- var i, len, item;
-
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- item = this.items[i];
- if ( item instanceof OO.ui.OptionWidget && item.isSelectable() ) {
- return item;
- }
- }
-
- return null;
+OO.ui.TextInputWidget.prototype.isPending = function () {
+ return !!this.pending;
};
/**
- * Add items.
- *
- * When items are added with the same values as existing items, the existing items will be
- * automatically removed before the new items are added.
+ * Increase the pending stack.
*
- * @param {OO.ui.OptionWidget[]} items Items to add
- * @param {number} [index] Index to insert items after
- * @fires add
* @chainable
*/
-OO.ui.SelectWidget.prototype.addItems = function ( items, index ) {
- var i, len, item, hash,
- remove = [];
-
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
- hash = OO.getHash( item.getData() );
- if ( hash in this.hashes ) {
- // Remove item with same value
- remove.push( this.hashes[hash] );
- }
- this.hashes[hash] = item;
- }
- if ( remove.length ) {
- this.removeItems( remove );
+OO.ui.TextInputWidget.prototype.pushPending = function () {
+ if ( this.pending === 0 ) {
+ this.$element.addClass( 'oo-ui-textInputWidget-pending' );
+ this.$input.addClass( 'oo-ui-texture-pending' );
}
-
- // Mixin method
- OO.ui.GroupWidget.prototype.addItems.call( this, items, index );
-
- // Always provide an index, even if it was omitted
- this.emit( 'add', items, index === undefined ? this.items.length - items.length - 1 : index );
+ this.pending++;
return this;
};
/**
- * Remove items.
+ * Reduce the pending stack.
*
- * Items will be detached, not removed, so they can be used later.
+ * Clamped at zero.
*
- * @param {OO.ui.OptionWidget[]} items Items to remove
- * @fires remove
* @chainable
*/
-OO.ui.SelectWidget.prototype.removeItems = function ( items ) {
- var i, len, item, hash;
-
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
- hash = OO.getHash( item.getData() );
- if ( hash in this.hashes ) {
- // Remove existing item
- delete this.hashes[hash];
- }
- if ( item.isSelected() ) {
- this.selectItem( null );
- }
+OO.ui.TextInputWidget.prototype.popPending = function () {
+ if ( this.pending === 1 ) {
+ this.$element.removeClass( 'oo-ui-textInputWidget-pending' );
+ this.$input.removeClass( 'oo-ui-texture-pending' );
}
-
- // Mixin method
- OO.ui.GroupWidget.prototype.removeItems.call( this, items );
-
- this.emit( 'remove', items );
+ this.pending = Math.max( 0, this.pending - 1 );
return this;
};
/**
- * Clear all items.
- *
- * Items will be detached, not removed, so they can be used later.
+ * Select the contents of the input.
*
- * @fires remove
* @chainable
*/
-OO.ui.SelectWidget.prototype.clearItems = function () {
- var items = this.items.slice();
-
- // Clear all items
- this.hashes = {};
- // Mixin method
- OO.ui.GroupWidget.prototype.clearItems.call( this );
- this.selectItem( null );
-
- this.emit( 'remove', items );
-
+OO.ui.TextInputWidget.prototype.select = function () {
+ this.$input.select();
return this;
};
/**
- * Menu item widget.
- *
- * Use with OO.ui.MenuWidget.
+ * Label widget.
*
* @class
- * @extends OO.ui.OptionWidget
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.LabeledElement
*
* @constructor
- * @param {Mixed} data Item data
* @param {Object} [config] Configuration options
*/
-OO.ui.MenuItemWidget = function OoUiMenuItemWidget( data, config ) {
- // Configuration initialization
- config = $.extend( { 'icon': 'check' }, config );
+OO.ui.LabelWidget = function OoUiLabelWidget( config ) {
+ // Config intialization
+ config = config || {};
// Parent constructor
- OO.ui.MenuItemWidget.super.call( this, data, config );
+ OO.ui.LabelWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.LabeledElement.call( this, this.$element, config );
+
+ // Properties
+ this.input = config.input;
+
+ // Events
+ if ( this.input instanceof OO.ui.InputWidget ) {
+ this.$element.on( 'click', OO.ui.bind( this.onClick, this ) );
+ }
// Initialization
- this.$element.addClass( 'oo-ui-menuItemWidget' );
+ this.$element.addClass( 'oo-ui-labelWidget' );
};
/* Setup */
-OO.inheritClass( OO.ui.MenuItemWidget, OO.ui.OptionWidget );
+OO.inheritClass( OO.ui.LabelWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.LabelWidget, OO.ui.LabeledElement );
+
+/* Static Properties */
+
+OO.ui.LabelWidget.static.tagName = 'label';
+
+/* Methods */
/**
- * Menu widget.
+ * Handles label mouse click events.
*
- * Use together with OO.ui.MenuItemWidget.
+ * @param {jQuery.Event} e Mouse click event
+ */
+OO.ui.LabelWidget.prototype.onClick = function () {
+ this.input.simulateLabelClick();
+ return false;
+};
+
+/**
+ * Generic option widget for use with OO.ui.SelectWidget.
*
* @class
- * @extends OO.ui.SelectWidget
- * @mixins OO.ui.ClippableElement
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.LabeledElement
+ * @mixins OO.ui.FlaggableElement
*
* @constructor
+ * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
- * @cfg {OO.ui.InputWidget} [input] Input to bind keyboard handlers to
- * @cfg {boolean} [autoHide=true] Hide the menu when the mouse is pressed outside the menu
+ * @cfg {string} [rel] Value for `rel` attribute in DOM, allowing per-option styling
*/
-OO.ui.MenuWidget = function OoUiMenuWidget( config ) {
+OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
// Config intialization
config = config || {};
// Parent constructor
- OO.ui.MenuWidget.super.call( this, config );
+ OO.ui.OptionWidget.super.call( this, config );
// Mixin constructors
- OO.ui.ClippableElement.call( this, this.$group, config );
+ OO.ui.ItemWidget.call( this );
+ OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
+ OO.ui.FlaggableElement.call( this, config );
// Properties
- this.autoHide = config.autoHide === undefined || !!config.autoHide;
- this.newItems = null;
- this.$input = config.input ? config.input.$input : null;
- this.$previousFocus = null;
- this.isolated = !config.input;
- this.visible = false;
- this.flashing = false;
- this.onKeyDownHandler = OO.ui.bind( this.onKeyDown, this );
- this.onDocumentMouseDownHandler = OO.ui.bind( this.onDocumentMouseDown, this );
+ this.data = data;
+ this.selected = false;
+ this.highlighted = false;
+ this.pressed = false;
// Initialization
- this.$element.hide().addClass( 'oo-ui-menuWidget' );
+ this.$element
+ .data( 'oo-ui-optionWidget', this )
+ .attr( 'rel', config.rel )
+ .attr( 'role', 'option' )
+ .addClass( 'oo-ui-optionWidget' )
+ .append( this.$label );
+ this.$element
+ .prepend( this.$icon )
+ .append( this.$indicator );
};
/* Setup */
-OO.inheritClass( OO.ui.MenuWidget, OO.ui.SelectWidget );
-OO.mixinClass( OO.ui.MenuWidget, OO.ui.ClippableElement );
+OO.inheritClass( OO.ui.OptionWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.ItemWidget );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.LabeledElement );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.FlaggableElement );
+
+/* Static Properties */
+
+OO.ui.OptionWidget.static.tagName = 'li';
+
+OO.ui.OptionWidget.static.selectable = true;
+
+OO.ui.OptionWidget.static.highlightable = true;
+
+OO.ui.OptionWidget.static.pressable = true;
+
+OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false;
/* Methods */
/**
- * Handles document mouse down events.
+ * Check if option can be selected.
*
- * @param {jQuery.Event} e Key down event
+ * @return {boolean} Item is selectable
*/
-OO.ui.MenuWidget.prototype.onDocumentMouseDown = function ( e ) {
- if ( !$.contains( this.$element[0], e.target ) ) {
- this.hide();
- }
+OO.ui.OptionWidget.prototype.isSelectable = function () {
+ return this.constructor.static.selectable && !this.isDisabled();
+};
+
+/**
+ * Check if option can be highlighted.
+ *
+ * @return {boolean} Item is highlightable
+ */
+OO.ui.OptionWidget.prototype.isHighlightable = function () {
+ return this.constructor.static.highlightable && !this.isDisabled();
+};
+
+/**
+ * Check if option can be pressed.
+ *
+ * @return {boolean} Item is pressable
+ */
+OO.ui.OptionWidget.prototype.isPressable = function () {
+ return this.constructor.static.pressable && !this.isDisabled();
};
/**
- * Handles key down events.
+ * Check if option is selected.
*
- * @param {jQuery.Event} e Key down event
+ * @return {boolean} Item is selected
*/
-OO.ui.MenuWidget.prototype.onKeyDown = function ( e ) {
- var nextItem,
- handled = false,
- highlightItem = this.getHighlightedItem();
-
- if ( !this.isDisabled() && this.visible ) {
- if ( !highlightItem ) {
- highlightItem = this.getSelectedItem();
- }
- switch ( e.keyCode ) {
- case OO.ui.Keys.ENTER:
- this.chooseItem( highlightItem );
- handled = true;
- break;
- case OO.ui.Keys.UP:
- nextItem = this.getRelativeSelectableItem( highlightItem, -1 );
- handled = true;
- break;
- case OO.ui.Keys.DOWN:
- nextItem = this.getRelativeSelectableItem( highlightItem, 1 );
- handled = true;
- break;
- case OO.ui.Keys.ESCAPE:
- if ( highlightItem ) {
- highlightItem.setHighlighted( false );
- }
- this.hide();
- handled = true;
- break;
- }
-
- if ( nextItem ) {
- this.highlightItem( nextItem );
- nextItem.scrollElementIntoView();
- }
-
- if ( handled ) {
- e.preventDefault();
- e.stopPropagation();
- return false;
- }
- }
+OO.ui.OptionWidget.prototype.isSelected = function () {
+ return this.selected;
};
/**
- * Check if the menu is visible.
+ * Check if option is highlighted.
*
- * @return {boolean} Menu is visible
+ * @return {boolean} Item is highlighted
*/
-OO.ui.MenuWidget.prototype.isVisible = function () {
- return this.visible;
+OO.ui.OptionWidget.prototype.isHighlighted = function () {
+ return this.highlighted;
};
/**
- * Bind key down listener.
+ * Check if option is pressed.
+ *
+ * @return {boolean} Item is pressed
*/
-OO.ui.MenuWidget.prototype.bindKeyDownListener = function () {
- if ( this.$input ) {
- this.$input.on( 'keydown', this.onKeyDownHandler );
- } else {
- // Capture menu navigation keys
- this.getElementWindow().addEventListener( 'keydown', this.onKeyDownHandler, true );
- }
+OO.ui.OptionWidget.prototype.isPressed = function () {
+ return this.pressed;
};
/**
- * Unbind key down listener.
+ * Set selected state.
+ *
+ * @param {boolean} [state=false] Select option
+ * @chainable
*/
-OO.ui.MenuWidget.prototype.unbindKeyDownListener = function () {
- if ( this.$input ) {
- this.$input.off( 'keydown' );
- } else {
- this.getElementWindow().removeEventListener( 'keydown', this.onKeyDownHandler, true );
+OO.ui.OptionWidget.prototype.setSelected = function ( state ) {
+ if ( this.constructor.static.selectable ) {
+ this.selected = !!state;
+ this.$element.toggleClass( 'oo-ui-optionWidget-selected', state );
+ if ( state && this.constructor.static.scrollIntoViewOnSelect ) {
+ this.scrollElementIntoView();
+ }
}
+ return this;
};
/**
- * Choose an item.
- *
- * This will close the menu when done, unlike selectItem which only changes selection.
+ * Set highlighted state.
*
- * @param {OO.ui.OptionWidget} item Item to choose
+ * @param {boolean} [state=false] Highlight option
* @chainable
*/
-OO.ui.MenuWidget.prototype.chooseItem = function ( item ) {
- // Parent method
- OO.ui.MenuWidget.super.prototype.chooseItem.call( this, item );
-
- if ( item && !this.flashing ) {
- this.flashing = true;
- item.flash().done( OO.ui.bind( function () {
- this.hide();
- this.flashing = false;
- }, this ) );
- } else {
- this.hide();
+OO.ui.OptionWidget.prototype.setHighlighted = function ( state ) {
+ if ( this.constructor.static.highlightable ) {
+ this.highlighted = !!state;
+ this.$element.toggleClass( 'oo-ui-optionWidget-highlighted', state );
}
-
return this;
};
/**
- * Add items.
- *
- * Adding an existing item (by value) will move it.
+ * Set pressed state.
*
- * @param {OO.ui.MenuItemWidget[]} items Items to add
- * @param {number} [index] Index to insert items after
+ * @param {boolean} [state=false] Press option
* @chainable
*/
-OO.ui.MenuWidget.prototype.addItems = function ( items, index ) {
- var i, len, item;
-
- // Parent method
- OO.ui.MenuWidget.super.prototype.addItems.call( this, items, index );
-
- // Auto-initialize
- if ( !this.newItems ) {
- this.newItems = [];
- }
-
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
- if ( this.visible ) {
- // Defer fitting label until
- item.fitLabel();
- } else {
- this.newItems.push( item );
- }
+OO.ui.OptionWidget.prototype.setPressed = function ( state ) {
+ if ( this.constructor.static.pressable ) {
+ this.pressed = !!state;
+ this.$element.toggleClass( 'oo-ui-optionWidget-pressed', state );
}
-
return this;
};
/**
- * Show the menu.
+ * Make the option's highlight flash.
*
- * @chainable
+ * While flashing, the visual style of the pressed state is removed if present.
+ *
+ * @return {jQuery.Promise} Promise resolved when flashing is done
*/
-OO.ui.MenuWidget.prototype.show = function () {
- var i, len;
-
- if ( this.items.length ) {
- this.$element.show();
- this.visible = true;
- this.bindKeyDownListener();
+OO.ui.OptionWidget.prototype.flash = function () {
+ var widget = this,
+ $element = this.$element,
+ deferred = $.Deferred();
- // Change focus to enable keyboard navigation
- if ( this.isolated && this.$input && !this.$input.is( ':focus' ) ) {
- this.$previousFocus = this.$( ':focus' );
- this.$input.focus();
- }
- if ( this.newItems && this.newItems.length ) {
- for ( i = 0, len = this.newItems.length; i < len; i++ ) {
- this.newItems[i].fitLabel();
- }
- this.newItems = null;
- }
+ if ( !this.isDisabled() && this.constructor.static.pressable ) {
+ $element.removeClass( 'oo-ui-optionWidget-highlighted oo-ui-optionWidget-pressed' );
+ setTimeout( function () {
+ // Restore original classes
+ $element
+ .toggleClass( 'oo-ui-optionWidget-highlighted', widget.highlighted )
+ .toggleClass( 'oo-ui-optionWidget-pressed', widget.pressed );
- this.setClipping( true );
+ setTimeout( function () {
+ deferred.resolve();
+ }, 100 );
- // Auto-hide
- if ( this.autoHide ) {
- this.getElementDocument().addEventListener(
- 'mousedown', this.onDocumentMouseDownHandler, true
- );
- }
+ }, 100 );
}
- return this;
+ return deferred.promise();
};
/**
- * Hide the menu.
+ * Get option data.
*
- * @chainable
+ * @return {Mixed} Option data
*/
-OO.ui.MenuWidget.prototype.hide = function () {
- this.$element.hide();
- this.visible = false;
- this.unbindKeyDownListener();
-
- if ( this.isolated && this.$previousFocus ) {
- this.$previousFocus.focus();
- this.$previousFocus = null;
- }
-
- this.getElementDocument().removeEventListener(
- 'mousedown', this.onDocumentMouseDownHandler, true
- );
-
- this.setClipping( false );
-
- return this;
+OO.ui.OptionWidget.prototype.getData = function () {
+ return this.data;
};
/**
- * Inline menu of options.
+ * Option widget with an option icon and indicator.
*
- * Use with OO.ui.MenuOptionWidget.
+ * Use together with OO.ui.SelectWidget.
*
* @class
- * @extends OO.ui.Widget
+ * @extends OO.ui.OptionWidget
* @mixins OO.ui.IconedElement
* @mixins OO.ui.IndicatedElement
- * @mixins OO.ui.LabeledElement
- * @mixins OO.ui.TitledElement
*
* @constructor
+ * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
- * @cfg {Object} [menu] Configuration options to pass to menu widget
*/
-OO.ui.InlineMenuWidget = function OoUiInlineMenuWidget( config ) {
- // Configuration initialization
- config = $.extend( { 'indicator': 'down' }, config );
-
+OO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( data, config ) {
// Parent constructor
- OO.ui.InlineMenuWidget.super.call( this, config );
+ OO.ui.DecoratedOptionWidget.super.call( this, data, config );
// Mixin constructors
OO.ui.IconedElement.call( this, this.$( '<span>' ), config );
OO.ui.IndicatedElement.call( this, this.$( '<span>' ), config );
- OO.ui.LabeledElement.call( this, this.$( '<span>' ), config );
- OO.ui.TitledElement.call( this, this.$label, config );
-
- // Properties
- this.menu = new OO.ui.MenuWidget( $.extend( { '$': this.$ }, config.menu ) );
- this.$handle = this.$( '<span>' );
-
- // Events
- this.$element.on( { 'click': OO.ui.bind( this.onClick, this ) } );
- this.menu.connect( this, { 'select': 'onMenuSelect' } );
// Initialization
- this.$handle
- .addClass( 'oo-ui-inlineMenuWidget-handle' )
- .append( this.$icon, this.$label, this.$indicator );
this.$element
- .addClass( 'oo-ui-inlineMenuWidget' )
- .append( this.$handle, this.menu.$element );
+ .addClass( 'oo-ui-decoratedOptionWidget' )
+ .prepend( this.$icon )
+ .append( this.$indicator );
};
/* Setup */
-OO.inheritClass( OO.ui.InlineMenuWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.IconedElement );
-OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.IndicatedElement );
-OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.LabeledElement );
-OO.mixinClass( OO.ui.InlineMenuWidget, OO.ui.TitledElement );
-
-/* Methods */
+OO.inheritClass( OO.ui.DecoratedOptionWidget, OO.ui.OptionWidget );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.IconedElement );
+OO.mixinClass( OO.ui.OptionWidget, OO.ui.IndicatedElement );
/**
- * Get the menu.
+ * Option widget that looks like a button.
*
- * @return {OO.ui.MenuWidget} Menu of widget
+ * Use together with OO.ui.ButtonSelectWidget.
+ *
+ * @class
+ * @extends OO.ui.DecoratedOptionWidget
+ * @mixins OO.ui.ButtonedElement
+ *
+ * @constructor
+ * @param {Mixed} data Option data
+ * @param {Object} [config] Configuration options
*/
-OO.ui.InlineMenuWidget.prototype.getMenu = function () {
- return this.menu;
+OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( data, config ) {
+ // Parent constructor
+ OO.ui.ButtonOptionWidget.super.call( this, data, config );
+
+ // Mixin constructors
+ OO.ui.ButtonedElement.call( this, this.$( '<a>' ), config );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-buttonOptionWidget' );
+ this.$button.append( this.$element.contents() );
+ this.$element.append( this.$button );
};
-/**
- * Handles menu select events.
- *
- * @param {OO.ui.MenuItemWidget} item Selected menu item
- */
-OO.ui.InlineMenuWidget.prototype.onMenuSelect = function ( item ) {
- var selectedLabel;
+/* Setup */
- if ( !item ) {
- return;
- }
+OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.DecoratedOptionWidget );
+OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.ButtonedElement );
- selectedLabel = item.getLabel();
+/* Static Properties */
- // If the label is a DOM element, clone it, because setLabel will append() it
- if ( selectedLabel instanceof jQuery ) {
- selectedLabel = selectedLabel.clone();
+// Allow button mouse down events to pass through so they can be handled by the parent select widget
+OO.ui.ButtonOptionWidget.static.cancelButtonMouseDownEvents = false;
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) {
+ OO.ui.ButtonOptionWidget.super.prototype.setSelected.call( this, state );
+
+ if ( this.constructor.static.selectable ) {
+ this.setActive( state );
}
- this.setLabel( selectedLabel );
+ return this;
};
/**
- * Handles mouse click events.
+ * Item of an OO.ui.MenuWidget.
*
- * @param {jQuery.Event} e Mouse click event
+ * @class
+ * @extends OO.ui.DecoratedOptionWidget
+ *
+ * @constructor
+ * @param {Mixed} data Item data
+ * @param {Object} [config] Configuration options
*/
-OO.ui.InlineMenuWidget.prototype.onClick = function ( e ) {
- // Skip clicks within the menu
- if ( $.contains( this.menu.$element[0], e.target ) ) {
- return;
- }
+OO.ui.MenuItemWidget = function OoUiMenuItemWidget( data, config ) {
+ // Configuration initialization
+ config = $.extend( { icon: 'check' }, config );
- if ( !this.isDisabled() ) {
- if ( this.menu.isVisible() ) {
- this.menu.hide();
- } else {
- this.menu.show();
- }
- }
- return false;
+ // Parent constructor
+ OO.ui.MenuItemWidget.super.call( this, data, config );
+
+ // Initialization
+ this.$element
+ .attr( 'role', 'menuitem' )
+ .addClass( 'oo-ui-menuItemWidget' );
};
+/* Setup */
+
+OO.inheritClass( OO.ui.MenuItemWidget, OO.ui.DecoratedOptionWidget );
+
/**
- * Menu section item widget.
- *
- * Use with OO.ui.MenuWidget.
+ * Section to group one or more items in a OO.ui.MenuWidget.
*
* @class
- * @extends OO.ui.OptionWidget
+ * @extends OO.ui.DecoratedOptionWidget
*
* @constructor
* @param {Mixed} data Item data
/* Setup */
-OO.inheritClass( OO.ui.MenuSectionItemWidget, OO.ui.OptionWidget );
+OO.inheritClass( OO.ui.MenuSectionItemWidget, OO.ui.DecoratedOptionWidget );
/* Static Properties */
OO.ui.MenuSectionItemWidget.static.highlightable = false;
/**
- * Create an OO.ui.OutlineWidget object.
- *
- * Use with OO.ui.OutlineItemWidget.
+ * Items for an OO.ui.OutlineWidget.
*
* @class
- * @extends OO.ui.SelectWidget
+ * @extends OO.ui.DecoratedOptionWidget
*
* @constructor
+ * @param {Mixed} data Item data
* @param {Object} [config] Configuration options
+ * @cfg {number} [level] Indentation level
+ * @cfg {boolean} [movable] Allow modification from outline controls
*/
-OO.ui.OutlineWidget = function OoUiOutlineWidget( config ) {
+OO.ui.OutlineItemWidget = function OoUiOutlineItemWidget( data, config ) {
// Config intialization
config = config || {};
// Parent constructor
- OO.ui.OutlineWidget.super.call( this, config );
+ OO.ui.OutlineItemWidget.super.call( this, data, config );
+
+ // Properties
+ this.level = 0;
+ this.movable = !!config.movable;
+ this.removable = !!config.removable;
// Initialization
- this.$element.addClass( 'oo-ui-outlineWidget' );
+ this.$element.addClass( 'oo-ui-outlineItemWidget' );
+ this.setLevel( config.level );
};
/* Setup */
-OO.inheritClass( OO.ui.OutlineWidget, OO.ui.SelectWidget );
-
-/**
- * Creates an OO.ui.OutlineControlsWidget object.
- *
- * Use together with OO.ui.OutlineWidget.js
- *
- * @class
- *
- * @constructor
- * @param {OO.ui.OutlineWidget} outline Outline to control
- * @param {Object} [config] Configuration options
- */
-OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) {
- // Configuration initialization
- config = $.extend( { 'icon': 'add-item' }, config );
+OO.inheritClass( OO.ui.OutlineItemWidget, OO.ui.DecoratedOptionWidget );
- // Parent constructor
- OO.ui.OutlineControlsWidget.super.call( this, config );
+/* Static Properties */
- // Mixin constructors
- OO.ui.GroupElement.call( this, this.$( '<div>' ), config );
- OO.ui.IconedElement.call( this, this.$( '<div>' ), config );
+OO.ui.OutlineItemWidget.static.highlightable = false;
- // Properties
- this.outline = outline;
- this.$movers = this.$( '<div>' );
- this.upButton = new OO.ui.ButtonWidget( {
- '$': this.$,
- 'frameless': true,
- 'icon': 'collapse',
- 'title': OO.ui.msg( 'ooui-outline-control-move-up' )
- } );
- this.downButton = new OO.ui.ButtonWidget( {
- '$': this.$,
- 'frameless': true,
- 'icon': 'expand',
- 'title': OO.ui.msg( 'ooui-outline-control-move-down' )
- } );
- this.removeButton = new OO.ui.ButtonWidget( {
- '$': this.$,
- 'frameless': true,
- 'icon': 'remove',
- 'title': OO.ui.msg( 'ooui-outline-control-remove' )
- } );
+OO.ui.OutlineItemWidget.static.scrollIntoViewOnSelect = true;
- // Events
- outline.connect( this, {
- 'select': 'onOutlineChange',
- 'add': 'onOutlineChange',
- 'remove': 'onOutlineChange'
- } );
- this.upButton.connect( this, { 'click': [ 'emit', 'move', -1 ] } );
- this.downButton.connect( this, { 'click': [ 'emit', 'move', 1 ] } );
- this.removeButton.connect( this, { 'click': [ 'emit', 'remove' ] } );
+OO.ui.OutlineItemWidget.static.levelClass = 'oo-ui-outlineItemWidget-level-';
- // Initialization
- this.$element.addClass( 'oo-ui-outlineControlsWidget' );
- this.$group.addClass( 'oo-ui-outlineControlsWidget-items' );
- this.$movers
- .addClass( 'oo-ui-outlineControlsWidget-movers' )
- .append( this.removeButton.$element, this.upButton.$element, this.downButton.$element );
- this.$element.append( this.$icon, this.$group, this.$movers );
-};
+OO.ui.OutlineItemWidget.static.levels = 3;
-/* Setup */
+/* Methods */
-OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.GroupElement );
-OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.IconedElement );
+/**
+ * Check if item is movable.
+ *
+ * Movablilty is used by outline controls.
+ *
+ * @return {boolean} Item is movable
+ */
+OO.ui.OutlineItemWidget.prototype.isMovable = function () {
+ return this.movable;
+};
-/* Events */
+/**
+ * Check if item is removable.
+ *
+ * Removablilty is used by outline controls.
+ *
+ * @return {boolean} Item is removable
+ */
+OO.ui.OutlineItemWidget.prototype.isRemovable = function () {
+ return this.removable;
+};
/**
- * @event move
- * @param {number} places Number of places to move
+ * Get indentation level.
+ *
+ * @return {number} Indentation level
*/
+OO.ui.OutlineItemWidget.prototype.getLevel = function () {
+ return this.level;
+};
/**
- * @event remove
+ * Set movability.
+ *
+ * Movablilty is used by outline controls.
+ *
+ * @param {boolean} movable Item is movable
+ * @chainable
*/
+OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) {
+ this.movable = !!movable;
+ return this;
+};
-/* Methods */
+/**
+ * Set removability.
+ *
+ * Removablilty is used by outline controls.
+ *
+ * @param {boolean} movable Item is removable
+ * @chainable
+ */
+OO.ui.OutlineItemWidget.prototype.setRemovable = function ( removable ) {
+ this.removable = !!removable;
+ return this;
+};
/**
- * Handle outline change events.
+ * Set indentation level.
+ *
+ * @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
+ * @chainable
*/
-OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () {
- var i, len, firstMovable, lastMovable,
- items = this.outline.getItems(),
- selectedItem = this.outline.getSelectedItem(),
- movable = selectedItem && selectedItem.isMovable(),
- removable = selectedItem && selectedItem.isRemovable();
+OO.ui.OutlineItemWidget.prototype.setLevel = function ( level ) {
+ var levels = this.constructor.static.levels,
+ levelClass = this.constructor.static.levelClass,
+ i = levels;
- if ( movable ) {
- i = -1;
- len = items.length;
- while ( ++i < len ) {
- if ( items[i].isMovable() ) {
- firstMovable = items[i];
- break;
- }
- }
- i = len;
- while ( i-- ) {
- if ( items[i].isMovable() ) {
- lastMovable = items[i];
- break;
- }
+ this.level = level ? Math.max( 0, Math.min( levels - 1, level ) ) : 0;
+ while ( i-- ) {
+ if ( this.level === i ) {
+ this.$element.addClass( levelClass + i );
+ } else {
+ this.$element.removeClass( levelClass + i );
}
}
- this.upButton.setDisabled( !movable || selectedItem === firstMovable );
- this.downButton.setDisabled( !movable || selectedItem === lastMovable );
- this.removeButton.setDisabled( !removable );
+
+ return this;
};
/**
- * Creates an OO.ui.OutlineItemWidget object.
- *
- * Use with OO.ui.OutlineWidget.
+ * Container for content that is overlaid and positioned absolutely.
*
* @class
- * @extends OO.ui.OptionWidget
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.LabeledElement
*
* @constructor
- * @param {Mixed} data Item data
* @param {Object} [config] Configuration options
- * @cfg {number} [level] Indentation level
- * @cfg {boolean} [movable] Allow modification from outline controls
+ * @cfg {number} [width=320] Width of popup in pixels
+ * @cfg {number} [height] Height of popup, omit to use automatic height
+ * @cfg {boolean} [anchor=true] Show anchor pointing to origin of popup
+ * @cfg {string} [align='center'] Alignment of popup to origin
+ * @cfg {jQuery} [$container] Container to prevent popup from rendering outside of
+ * @cfg {jQuery} [$content] Content to append to the popup's body
+ * @cfg {boolean} [autoClose=false] Popup auto-closes when it loses focus
+ * @cfg {jQuery} [$autoCloseIgnore] Elements to not auto close when clicked
+ * @cfg {boolean} [head] Show label and close button at the top
+ * @cfg {boolean} [padded] Add padding to the body
*/
-OO.ui.OutlineItemWidget = function OoUiOutlineItemWidget( data, config ) {
+OO.ui.PopupWidget = function OoUiPopupWidget( config ) {
// Config intialization
config = config || {};
// Parent constructor
- OO.ui.OutlineItemWidget.super.call( this, data, config );
+ OO.ui.PopupWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.LabeledElement.call( this, this.$( '<div>' ), config );
+ OO.ui.ClippableElement.call( this, this.$( '<div>' ), config );
// Properties
- this.level = 0;
- this.movable = !!config.movable;
- this.removable = !!config.removable;
+ this.visible = false;
+ this.$popup = this.$( '<div>' );
+ this.$head = this.$( '<div>' );
+ this.$body = this.$clippable;
+ this.$anchor = this.$( '<div>' );
+ this.$container = config.$container || this.$( 'body' );
+ this.autoClose = !!config.autoClose;
+ this.$autoCloseIgnore = config.$autoCloseIgnore;
+ this.transitionTimeout = null;
+ this.anchor = null;
+ this.width = config.width !== undefined ? config.width : 320;
+ this.height = config.height !== undefined ? config.height : null;
+ this.align = config.align || 'center';
+ this.closeButton = new OO.ui.ButtonWidget( { $: this.$, framed: false, icon: 'close' } );
+ this.onMouseDownHandler = OO.ui.bind( this.onMouseDown, this );
+
+ // Events
+ this.closeButton.connect( this, { click: 'onCloseButtonClick' } );
// Initialization
- this.$element.addClass( 'oo-ui-outlineItemWidget' );
- this.setLevel( config.level );
+ this.toggleAnchor( config.anchor === undefined || config.anchor );
+ this.$body.addClass( 'oo-ui-popupWidget-body' );
+ this.$anchor.addClass( 'oo-ui-popupWidget-anchor' );
+ this.$head
+ .addClass( 'oo-ui-popupWidget-head' )
+ .append( this.$label, this.closeButton.$element );
+ if ( !config.head ) {
+ this.$head.hide();
+ }
+ this.$popup
+ .addClass( 'oo-ui-popupWidget-popup' )
+ .append( this.$head, this.$body );
+ this.$element
+ .hide()
+ .addClass( 'oo-ui-popupWidget' )
+ .append( this.$popup, this.$anchor );
+ // Move content, which was added to #$element by OO.ui.Widget, to the body
+ if ( config.$content instanceof jQuery ) {
+ this.$body.append( config.$content );
+ }
+ if ( config.padded ) {
+ this.$body.addClass( 'oo-ui-popupWidget-body-padded' );
+ }
};
/* Setup */
-OO.inheritClass( OO.ui.OutlineItemWidget, OO.ui.OptionWidget );
-
-/* Static Properties */
-
-OO.ui.OutlineItemWidget.static.highlightable = false;
+OO.inheritClass( OO.ui.PopupWidget, OO.ui.Widget );
+OO.mixinClass( OO.ui.PopupWidget, OO.ui.LabeledElement );
+OO.mixinClass( OO.ui.PopupWidget, OO.ui.ClippableElement );
-OO.ui.OutlineItemWidget.static.scrollIntoViewOnSelect = true;
+/* Events */
-OO.ui.OutlineItemWidget.static.levelClass = 'oo-ui-outlineItemWidget-level-';
+/**
+ * @event hide
+ */
-OO.ui.OutlineItemWidget.static.levels = 3;
+/**
+ * @event show
+ */
/* Methods */
/**
- * Check if item is movable.
- *
- * Movablilty is used by outline controls.
+ * Handles mouse down events.
*
- * @return {boolean} Item is movable
+ * @param {jQuery.Event} e Mouse down event
*/
-OO.ui.OutlineItemWidget.prototype.isMovable = function () {
- return this.movable;
+OO.ui.PopupWidget.prototype.onMouseDown = function ( e ) {
+ if (
+ this.isVisible() &&
+ !$.contains( this.$element[0], e.target ) &&
+ ( !this.$autoCloseIgnore || !this.$autoCloseIgnore.has( e.target ).length )
+ ) {
+ this.toggle( false );
+ }
};
/**
- * Check if item is removable.
- *
- * Removablilty is used by outline controls.
- *
- * @return {boolean} Item is removable
+ * Bind mouse down listener.
*/
-OO.ui.OutlineItemWidget.prototype.isRemovable = function () {
- return this.removable;
+OO.ui.PopupWidget.prototype.bindMouseDownListener = function () {
+ // Capture clicks outside popup
+ this.getElementWindow().addEventListener( 'mousedown', this.onMouseDownHandler, true );
};
/**
- * Get indentation level.
- *
- * @return {number} Indentation level
+ * Handles close button click events.
*/
-OO.ui.OutlineItemWidget.prototype.getLevel = function () {
- return this.level;
+OO.ui.PopupWidget.prototype.onCloseButtonClick = function () {
+ if ( this.isVisible() ) {
+ this.toggle( false );
+ }
};
/**
- * Set movability.
+ * Unbind mouse down listener.
+ */
+OO.ui.PopupWidget.prototype.unbindMouseDownListener = function () {
+ this.getElementWindow().removeEventListener( 'mousedown', this.onMouseDownHandler, true );
+};
+
+/**
+ * Set whether to show a anchor.
*
- * Movablilty is used by outline controls.
+ * @param {boolean} [show] Show anchor, omit to toggle
+ */
+OO.ui.PopupWidget.prototype.toggleAnchor = function ( show ) {
+ show = show === undefined ? !this.anchored : !!show;
+
+ if ( this.anchored !== show ) {
+ if ( show ) {
+ this.$element.addClass( 'oo-ui-popupWidget-anchored' );
+ } else {
+ this.$element.removeClass( 'oo-ui-popupWidget-anchored' );
+ }
+ this.anchored = show;
+ }
+};
+
+/**
+ * Check if showing a anchor.
*
- * @param {boolean} movable Item is movable
- * @chainable
+ * @return {boolean} anchor is visible
*/
-OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) {
- this.movable = !!movable;
+OO.ui.PopupWidget.prototype.hasAnchor = function () {
+ return this.anchor;
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.PopupWidget.prototype.toggle = function ( show ) {
+ show = show === undefined ? !this.isVisible() : !!show;
+
+ var change = show !== this.isVisible();
+
+ // Parent method
+ OO.ui.PopupWidget.super.prototype.toggle.call( this, show );
+
+ if ( change ) {
+ if ( show ) {
+ this.setClipping( true );
+ if ( this.autoClose ) {
+ this.bindMouseDownListener();
+ }
+ this.updateDimensions();
+ } else {
+ this.setClipping( false );
+ if ( this.autoClose ) {
+ this.unbindMouseDownListener();
+ }
+ }
+ }
+
return this;
};
/**
- * Set removability.
+ * Set the size of the popup.
*
- * Removablilty is used by outline controls.
+ * Changing the size may also change the popup's position depending on the alignment.
*
- * @param {boolean} movable Item is removable
+ * @param {number} width Width
+ * @param {number} height Height
+ * @param {boolean} [transition=false] Use a smooth transition
* @chainable
*/
-OO.ui.OutlineItemWidget.prototype.setRemovable = function ( removable ) {
- this.removable = !!removable;
- return this;
+OO.ui.PopupWidget.prototype.setSize = function ( width, height, transition ) {
+ this.width = width;
+ this.height = height !== undefined ? height : null;
+ if ( this.isVisible() ) {
+ this.updateDimensions( transition );
+ }
};
/**
- * Set indentation level.
+ * Update the size and position.
*
- * @param {number} [level=0] Indentation level, in the range of [0,#maxLevel]
+ * Only use this to keep the popup properly anchored. Use #setSize to change the size, and this will
+ * be called automatically.
+ *
+ * @param {boolean} [transition=false] Use a smooth transition
* @chainable
*/
-OO.ui.OutlineItemWidget.prototype.setLevel = function ( level ) {
- var levels = this.constructor.static.levels,
- levelClass = this.constructor.static.levelClass,
- i = levels;
+OO.ui.PopupWidget.prototype.updateDimensions = function ( transition ) {
+ var widget = this,
+ padding = 10,
+ originOffset = Math.round( this.$element.offset().left ),
+ containerLeft = Math.round( this.$container.offset().left ),
+ containerWidth = this.$container.innerWidth(),
+ containerRight = containerLeft + containerWidth,
+ popupOffset = this.width * ( { left: 0, center: -0.5, right: -1 } )[this.align],
+ anchorWidth = this.$anchor.width(),
+ popupLeft = popupOffset - padding,
+ popupRight = popupOffset + padding + this.width + padding,
+ overlapLeft = ( originOffset + popupLeft ) - containerLeft,
+ overlapRight = containerRight - ( originOffset + popupRight );
- this.level = level ? Math.max( 0, Math.min( levels - 1, level ) ) : 0;
- while ( i-- ) {
- if ( this.level === i ) {
- this.$element.addClass( levelClass + i );
- } else {
- this.$element.removeClass( levelClass + i );
- }
+ // Prevent transition from being interrupted
+ clearTimeout( this.transitionTimeout );
+ if ( transition ) {
+ // Enable transition
+ this.$element.addClass( 'oo-ui-popupWidget-transitioning' );
+ }
+
+ if ( overlapRight < 0 ) {
+ popupOffset += overlapRight;
+ } else if ( overlapLeft < 0 ) {
+ popupOffset -= overlapLeft;
+ }
+
+ // Adjust offset to avoid anchor being rendered too close to the edge
+ if ( this.align === 'right' ) {
+ popupOffset += anchorWidth;
+ } else if ( this.align === 'left' ) {
+ popupOffset -= anchorWidth;
+ }
+
+ // Position body relative to anchor and resize
+ this.$popup.css( {
+ left: popupOffset,
+ width: this.width,
+ height: this.height !== null ? this.height : 'auto'
+ } );
+
+ if ( transition ) {
+ // Prevent transitioning after transition is complete
+ this.transitionTimeout = setTimeout( function () {
+ widget.$element.removeClass( 'oo-ui-popupWidget-transitioning' );
+ }, 200 );
+ } else {
+ // Prevent transitioning immediately
+ this.$element.removeClass( 'oo-ui-popupWidget-transitioning' );
}
return this;
};
/**
- * Option widget that looks like a button.
+ * Search widget.
*
- * Use together with OO.ui.ButtonSelectWidget.
+ * Search widgets combine a query input, placed above, and a results selection widget, placed below.
+ * Results are cleared and populated each time the query is changed.
*
* @class
- * @extends OO.ui.OptionWidget
- * @mixins OO.ui.ButtonedElement
- * @mixins OO.ui.FlaggableElement
+ * @extends OO.ui.Widget
*
* @constructor
- * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
+ * @cfg {string|jQuery} [placeholder] Placeholder text for query input
+ * @cfg {string} [value] Initial query value
*/
-OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( data, config ) {
+OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
+ // Configuration intialization
+ config = config || {};
+
// Parent constructor
- OO.ui.ButtonOptionWidget.super.call( this, data, config );
+ OO.ui.SearchWidget.super.call( this, config );
- // Mixin constructors
- OO.ui.ButtonedElement.call( this, this.$( '<a>' ), config );
- OO.ui.FlaggableElement.call( this, config );
+ // Properties
+ this.query = new OO.ui.TextInputWidget( {
+ $: this.$,
+ icon: 'search',
+ placeholder: config.placeholder,
+ value: config.value
+ } );
+ this.results = new OO.ui.SelectWidget( { $: this.$ } );
+ this.$query = this.$( '<div>' );
+ this.$results = this.$( '<div>' );
+
+ // Events
+ this.query.connect( this, {
+ change: 'onQueryChange',
+ enter: 'onQueryEnter'
+ } );
+ this.results.connect( this, {
+ highlight: 'onResultsHighlight',
+ select: 'onResultsSelect'
+ } );
+ this.query.$input.on( 'keydown', OO.ui.bind( this.onQueryKeydown, this ) );
// Initialization
- this.$element.addClass( 'oo-ui-buttonOptionWidget' );
- this.$button.append( this.$element.contents() );
- this.$element.append( this.$button );
+ this.$query
+ .addClass( 'oo-ui-searchWidget-query' )
+ .append( this.query.$element );
+ this.$results
+ .addClass( 'oo-ui-searchWidget-results' )
+ .append( this.results.$element );
+ this.$element
+ .addClass( 'oo-ui-searchWidget' )
+ .append( this.$results, this.$query );
};
/* Setup */
-OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.OptionWidget );
-OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.ButtonedElement );
-OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.FlaggableElement );
+OO.inheritClass( OO.ui.SearchWidget, OO.ui.Widget );
-/* Static Properties */
+/* Events */
-// Allow button mouse down events to pass through so they can be handled by the parent select widget
-OO.ui.ButtonOptionWidget.static.cancelButtonMouseDownEvents = false;
+/**
+ * @event highlight
+ * @param {Object|null} item Item data or null if no item is highlighted
+ */
+
+/**
+ * @event select
+ * @param {Object|null} item Item data or null if no item is selected
+ */
/* Methods */
/**
- * @inheritdoc
+ * Handle query key down events.
+ *
+ * @param {jQuery.Event} e Key down event
*/
-OO.ui.ButtonOptionWidget.prototype.setSelected = function ( state ) {
- OO.ui.ButtonOptionWidget.super.prototype.setSelected.call( this, state );
+OO.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) {
+ var highlightedItem, nextItem,
+ dir = e.which === OO.ui.Keys.DOWN ? 1 : ( e.which === OO.ui.Keys.UP ? -1 : 0 );
- if ( this.constructor.static.selectable ) {
- this.setActive( state );
+ if ( dir ) {
+ highlightedItem = this.results.getHighlightedItem();
+ if ( !highlightedItem ) {
+ highlightedItem = this.results.getSelectedItem();
+ }
+ nextItem = this.results.getRelativeSelectableItem( highlightedItem, dir );
+ this.results.highlightItem( nextItem );
+ nextItem.scrollElementIntoView();
}
+};
- return this;
+/**
+ * Handle select widget select events.
+ *
+ * Clears existing results. Subclasses should repopulate items according to new query.
+ *
+ * @param {string} value New value
+ */
+OO.ui.SearchWidget.prototype.onQueryChange = function () {
+ // Reset
+ this.results.clearItems();
};
/**
- * Select widget containing button options.
+ * Handle select widget enter key events.
*
- * Use together with OO.ui.ButtonOptionWidget.
+ * Selects highlighted item.
*
- * @class
- * @extends OO.ui.SelectWidget
+ * @param {string} value New value
+ */
+OO.ui.SearchWidget.prototype.onQueryEnter = function () {
+ // Reset
+ this.results.selectItem( this.results.getHighlightedItem() );
+};
+
+/**
+ * Handle select widget highlight events.
*
- * @constructor
- * @param {Object} [config] Configuration options
+ * @param {OO.ui.OptionWidget} item Highlighted item
+ * @fires highlight
*/
-OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) {
- // Parent constructor
- OO.ui.ButtonSelectWidget.super.call( this, config );
+OO.ui.SearchWidget.prototype.onResultsHighlight = function ( item ) {
+ this.emit( 'highlight', item ? item.getData() : null );
+};
- // Initialization
- this.$element.addClass( 'oo-ui-buttonSelectWidget' );
+/**
+ * Handle select widget select events.
+ *
+ * @param {OO.ui.OptionWidget} item Selected item
+ * @fires select
+ */
+OO.ui.SearchWidget.prototype.onResultsSelect = function ( item ) {
+ this.emit( 'select', item ? item.getData() : null );
};
-/* Setup */
+/**
+ * Get the query input.
+ *
+ * @return {OO.ui.TextInputWidget} Query input
+ */
+OO.ui.SearchWidget.prototype.getQuery = function () {
+ return this.query;
+};
-OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
+/**
+ * Get the results list.
+ *
+ * @return {OO.ui.SelectWidget} Select list
+ */
+OO.ui.SearchWidget.prototype.getResults = function () {
+ return this.results;
+};
/**
- * Container for content that is overlaid and positioned absolutely.
+ * Generic selection of options.
+ *
+ * Items can contain any rendering, and are uniquely identified by a has of thier data. Any widget
+ * that provides options, from which the user must choose one, should be built on this class.
+ *
+ * Use together with OO.ui.OptionWidget.
*
* @class
* @extends OO.ui.Widget
- * @mixins OO.ui.LabeledElement
+ * @mixins OO.ui.GroupElement
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {boolean} [tail=true] Show tail pointing to origin of popup
- * @cfg {string} [align='center'] Alignment of popup to origin
- * @cfg {jQuery} [$container] Container to prevent popup from rendering outside of
- * @cfg {boolean} [autoClose=false] Popup auto-closes when it loses focus
- * @cfg {jQuery} [$autoCloseIgnore] Elements to not auto close when clicked
- * @cfg {boolean} [head] Show label and close button at the top
+ * @cfg {OO.ui.OptionWidget[]} [items] Options to add
*/
-OO.ui.PopupWidget = function OoUiPopupWidget( config ) {
+OO.ui.SelectWidget = function OoUiSelectWidget( config ) {
// Config intialization
config = config || {};
// Parent constructor
- OO.ui.PopupWidget.super.call( this, config );
+ OO.ui.SelectWidget.super.call( this, config );
// Mixin constructors
- OO.ui.LabeledElement.call( this, this.$( '<div>' ), config );
- OO.ui.ClippableElement.call( this, this.$( '<div>' ), config );
+ OO.ui.GroupWidget.call( this, this.$element, config );
// Properties
- this.visible = false;
- this.$popup = this.$( '<div>' );
- this.$head = this.$( '<div>' );
- this.$body = this.$clippable;
- this.$tail = this.$( '<div>' );
- this.$container = config.$container || this.$( 'body' );
- this.autoClose = !!config.autoClose;
- this.$autoCloseIgnore = config.$autoCloseIgnore;
- this.transitionTimeout = null;
- this.tail = false;
- this.align = config.align || 'center';
- this.closeButton = new OO.ui.ButtonWidget( { '$': this.$, 'frameless': true, 'icon': 'close' } );
- this.onMouseDownHandler = OO.ui.bind( this.onMouseDown, this );
+ this.pressed = false;
+ this.selecting = null;
+ this.hashes = {};
+ this.onMouseUpHandler = OO.ui.bind( this.onMouseUp, this );
+ this.onMouseMoveHandler = OO.ui.bind( this.onMouseMove, this );
// Events
- this.closeButton.connect( this, { 'click': 'onCloseButtonClick' } );
+ this.$element.on( {
+ mousedown: OO.ui.bind( this.onMouseDown, this ),
+ mouseover: OO.ui.bind( this.onMouseOver, this ),
+ mouseleave: OO.ui.bind( this.onMouseLeave, this )
+ } );
// Initialization
- this.useTail( config.tail !== undefined ? !!config.tail : true );
- this.$body.addClass( 'oo-ui-popupWidget-body' );
- this.$tail.addClass( 'oo-ui-popupWidget-tail' );
- this.$head
- .addClass( 'oo-ui-popupWidget-head' )
- .append( this.$label, this.closeButton.$element );
- if ( !config.head ) {
- this.$head.hide();
+ this.$element.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' );
+ if ( $.isArray( config.items ) ) {
+ this.addItems( config.items );
}
- this.$popup
- .addClass( 'oo-ui-popupWidget-popup' )
- .append( this.$head, this.$body );
- this.$element.hide()
- .addClass( 'oo-ui-popupWidget' )
- .append( this.$popup, this.$tail );
};
/* Setup */
-OO.inheritClass( OO.ui.PopupWidget, OO.ui.Widget );
-OO.mixinClass( OO.ui.PopupWidget, OO.ui.LabeledElement );
-OO.mixinClass( OO.ui.PopupWidget, OO.ui.ClippableElement );
+OO.inheritClass( OO.ui.SelectWidget, OO.ui.Widget );
+
+// Need to mixin base class as well
+OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupElement );
+OO.mixinClass( OO.ui.SelectWidget, OO.ui.GroupWidget );
/* Events */
/**
- * @event hide
+ * @event highlight
+ * @param {OO.ui.OptionWidget|null} item Highlighted item
*/
/**
- * @event show
+ * @event press
+ * @param {OO.ui.OptionWidget|null} item Pressed item
+ */
+
+/**
+ * @event select
+ * @param {OO.ui.OptionWidget|null} item Selected item
+ */
+
+/**
+ * @event choose
+ * @param {OO.ui.OptionWidget|null} item Chosen item
+ */
+
+/**
+ * @event add
+ * @param {OO.ui.OptionWidget[]} items Added items
+ * @param {number} index Index items were added at
+ */
+
+/**
+ * @event remove
+ * @param {OO.ui.OptionWidget[]} items Removed items
*/
+/* Static Properties */
+
+OO.ui.SelectWidget.static.tagName = 'ul';
+
/* Methods */
/**
- * Handles mouse down events.
+ * Handle mouse down events.
*
+ * @private
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.PopupWidget.prototype.onMouseDown = function ( e ) {
- if (
- this.visible &&
- !$.contains( this.$element[0], e.target ) &&
- ( !this.$autoCloseIgnore || !this.$autoCloseIgnore.has( e.target ).length )
- ) {
- this.hide();
+OO.ui.SelectWidget.prototype.onMouseDown = function ( e ) {
+ var item;
+
+ if ( !this.isDisabled() && e.which === 1 ) {
+ this.togglePressed( true );
+ item = this.getTargetItem( e );
+ if ( item && item.isSelectable() ) {
+ this.pressItem( item );
+ this.selecting = item;
+ this.getElementDocument().addEventListener(
+ 'mouseup',
+ this.onMouseUpHandler,
+ true
+ );
+ this.getElementDocument().addEventListener(
+ 'mousemove',
+ this.onMouseMoveHandler,
+ true
+ );
+ }
}
+ return false;
};
/**
- * Bind mouse down listener.
+ * Handle mouse up events.
+ *
+ * @private
+ * @param {jQuery.Event} e Mouse up event
*/
-OO.ui.PopupWidget.prototype.bindMouseDownListener = function () {
- // Capture clicks outside popup
- this.getElementWindow().addEventListener( 'mousedown', this.onMouseDownHandler, true );
+OO.ui.SelectWidget.prototype.onMouseUp = function ( e ) {
+ var item;
+
+ this.togglePressed( false );
+ if ( !this.selecting ) {
+ item = this.getTargetItem( e );
+ if ( item && item.isSelectable() ) {
+ this.selecting = item;
+ }
+ }
+ if ( !this.isDisabled() && e.which === 1 && this.selecting ) {
+ this.pressItem( null );
+ this.chooseItem( this.selecting );
+ this.selecting = null;
+ }
+
+ this.getElementDocument().removeEventListener(
+ 'mouseup',
+ this.onMouseUpHandler,
+ true
+ );
+ this.getElementDocument().removeEventListener(
+ 'mousemove',
+ this.onMouseMoveHandler,
+ true
+ );
+
+ return false;
};
/**
- * Handles close button click events.
+ * Handle mouse move events.
+ *
+ * @private
+ * @param {jQuery.Event} e Mouse move event
*/
-OO.ui.PopupWidget.prototype.onCloseButtonClick = function () {
- if ( this.visible ) {
- this.hide();
+OO.ui.SelectWidget.prototype.onMouseMove = function ( e ) {
+ var item;
+
+ if ( !this.isDisabled() && this.pressed ) {
+ item = this.getTargetItem( e );
+ if ( item && item !== this.selecting && item.isSelectable() ) {
+ this.pressItem( item );
+ this.selecting = item;
+ }
}
+ return false;
};
/**
- * Unbind mouse down listener.
+ * Handle mouse over events.
+ *
+ * @private
+ * @param {jQuery.Event} e Mouse over event
*/
-OO.ui.PopupWidget.prototype.unbindMouseDownListener = function () {
- this.getElementWindow().removeEventListener( 'mousedown', this.onMouseDownHandler, true );
+OO.ui.SelectWidget.prototype.onMouseOver = function ( e ) {
+ var item;
+
+ if ( !this.isDisabled() ) {
+ item = this.getTargetItem( e );
+ this.highlightItem( item && item.isHighlightable() ? item : null );
+ }
+ return false;
+};
+
+/**
+ * Handle mouse leave events.
+ *
+ * @private
+ * @param {jQuery.Event} e Mouse over event
+ */
+OO.ui.SelectWidget.prototype.onMouseLeave = function () {
+ if ( !this.isDisabled() ) {
+ this.highlightItem( null );
+ }
+ return false;
};
/**
- * Check if the popup is visible.
+ * Get the closest item to a jQuery.Event.
*
- * @return {boolean} Popup is visible
+ * @private
+ * @param {jQuery.Event} e
+ * @return {OO.ui.OptionWidget|null} Outline item widget, `null` if none was found
*/
-OO.ui.PopupWidget.prototype.isVisible = function () {
- return this.visible;
+OO.ui.SelectWidget.prototype.getTargetItem = function ( e ) {
+ var $item = this.$( e.target ).closest( '.oo-ui-optionWidget' );
+ if ( $item.length ) {
+ return $item.data( 'oo-ui-optionWidget' );
+ }
+ return null;
};
/**
- * Set whether to show a tail.
+ * Get selected item.
*
- * @return {boolean} Make tail visible
+ * @return {OO.ui.OptionWidget|null} Selected item, `null` if no item is selected
*/
-OO.ui.PopupWidget.prototype.useTail = function ( value ) {
- value = !!value;
- if ( this.tail !== value ) {
- this.tail = value;
- if ( value ) {
- this.$element.addClass( 'oo-ui-popupWidget-tailed' );
- } else {
- this.$element.removeClass( 'oo-ui-popupWidget-tailed' );
+OO.ui.SelectWidget.prototype.getSelectedItem = function () {
+ var i, len;
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ if ( this.items[i].isSelected() ) {
+ return this.items[i];
+ }
+ }
+ return null;
+};
+
+/**
+ * Get highlighted item.
+ *
+ * @return {OO.ui.OptionWidget|null} Highlighted item, `null` if no item is highlighted
+ */
+OO.ui.SelectWidget.prototype.getHighlightedItem = function () {
+ var i, len;
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ if ( this.items[i].isHighlighted() ) {
+ return this.items[i];
}
}
+ return null;
+};
+
+/**
+ * Get an existing item with equivilant data.
+ *
+ * @param {Object} data Item data to search for
+ * @return {OO.ui.OptionWidget|null} Item with equivilent value, `null` if none exists
+ */
+OO.ui.SelectWidget.prototype.getItemFromData = function ( data ) {
+ var hash = OO.getHash( data );
+
+ if ( hash in this.hashes ) {
+ return this.hashes[hash];
+ }
+
+ return null;
};
/**
- * Check if showing a tail.
+ * Toggle pressed state.
*
- * @return {boolean} tail is visible
+ * @param {boolean} pressed An option is being pressed
*/
-OO.ui.PopupWidget.prototype.hasTail = function () {
- return this.tail;
+OO.ui.SelectWidget.prototype.togglePressed = function ( pressed ) {
+ if ( pressed === undefined ) {
+ pressed = !this.pressed;
+ }
+ if ( pressed !== this.pressed ) {
+ this.$element
+ .toggleClass( 'oo-ui-selectWidget-pressed', pressed )
+ .toggleClass( 'oo-ui-selectWidget-depressed', !pressed );
+ this.pressed = pressed;
+ }
};
/**
- * Show the context.
+ * Highlight an item.
+ *
+ * Highlighting is mutually exclusive.
*
- * @fires show
+ * @param {OO.ui.OptionWidget} [item] Item to highlight, omit to deselect all
+ * @fires highlight
* @chainable
*/
-OO.ui.PopupWidget.prototype.show = function () {
- if ( !this.visible ) {
- this.setClipping( true );
- this.$element.show();
- this.visible = true;
- this.emit( 'show' );
- if ( this.autoClose ) {
- this.bindMouseDownListener();
+OO.ui.SelectWidget.prototype.highlightItem = function ( item ) {
+ var i, len, highlighted,
+ changed = false;
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ highlighted = this.items[i] === item;
+ if ( this.items[i].isHighlighted() !== highlighted ) {
+ this.items[i].setHighlighted( highlighted );
+ changed = true;
}
}
+ if ( changed ) {
+ this.emit( 'highlight', item );
+ }
+
return this;
};
/**
- * Hide the context.
+ * Select an item.
*
- * @fires hide
+ * @param {OO.ui.OptionWidget} [item] Item to select, omit to deselect all
+ * @fires select
* @chainable
*/
-OO.ui.PopupWidget.prototype.hide = function () {
- if ( this.visible ) {
- this.setClipping( false );
- this.$element.hide();
- this.visible = false;
- this.emit( 'hide' );
- if ( this.autoClose ) {
- this.unbindMouseDownListener();
+OO.ui.SelectWidget.prototype.selectItem = function ( item ) {
+ var i, len, selected,
+ changed = false;
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ selected = this.items[i] === item;
+ if ( this.items[i].isSelected() !== selected ) {
+ this.items[i].setSelected( selected );
+ changed = true;
}
}
+ if ( changed ) {
+ this.emit( 'select', item );
+ }
+
return this;
};
/**
- * Updates the position and size.
+ * Press an item.
*
- * @param {number} width Width
- * @param {number} height Height
- * @param {boolean} [transition=false] Use a smooth transition
+ * @param {OO.ui.OptionWidget} [item] Item to press, omit to depress all
+ * @fires press
* @chainable
*/
-OO.ui.PopupWidget.prototype.display = function ( width, height, transition ) {
- var padding = 10,
- originOffset = Math.round( this.$element.offset().left ),
- containerLeft = Math.round( this.$container.offset().left ),
- containerWidth = this.$container.innerWidth(),
- containerRight = containerLeft + containerWidth,
- popupOffset = width * ( { 'left': 0, 'center': -0.5, 'right': -1 } )[this.align],
- popupLeft = popupOffset - padding,
- popupRight = popupOffset + padding + width + padding,
- overlapLeft = ( originOffset + popupLeft ) - containerLeft,
- overlapRight = containerRight - ( originOffset + popupRight );
-
- // Prevent transition from being interrupted
- clearTimeout( this.transitionTimeout );
- if ( transition ) {
- // Enable transition
- this.$element.addClass( 'oo-ui-popupWidget-transitioning' );
- }
+OO.ui.SelectWidget.prototype.pressItem = function ( item ) {
+ var i, len, pressed,
+ changed = false;
- if ( overlapRight < 0 ) {
- popupOffset += overlapRight;
- } else if ( overlapLeft < 0 ) {
- popupOffset -= overlapLeft;
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ pressed = this.items[i] === item;
+ if ( this.items[i].isPressed() !== pressed ) {
+ this.items[i].setPressed( pressed );
+ changed = true;
+ }
}
-
- // Position body relative to anchor and resize
- this.$popup.css( {
- 'left': popupOffset,
- 'width': width,
- 'height': height === undefined ? 'auto' : height
- } );
-
- if ( transition ) {
- // Prevent transitioning after transition is complete
- this.transitionTimeout = setTimeout( OO.ui.bind( function () {
- this.$element.removeClass( 'oo-ui-popupWidget-transitioning' );
- }, this ), 200 );
- } else {
- // Prevent transitioning immediately
- this.$element.removeClass( 'oo-ui-popupWidget-transitioning' );
+ if ( changed ) {
+ this.emit( 'press', item );
}
return this;
};
/**
- * Button that shows and hides a popup.
+ * Choose an item.
*
- * @class
- * @extends OO.ui.ButtonWidget
- * @mixins OO.ui.PopuppableElement
+ * Identical to #selectItem, but may vary in subclasses that want to take additional action when
+ * an item is selected using the keyboard or mouse.
*
- * @constructor
- * @param {Object} [config] Configuration options
+ * @param {OO.ui.OptionWidget} item Item to choose
+ * @fires choose
+ * @chainable
*/
-OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
- // Parent constructor
- OO.ui.PopupButtonWidget.super.call( this, config );
-
- // Mixin constructors
- OO.ui.PopuppableElement.call( this, config );
+OO.ui.SelectWidget.prototype.chooseItem = function ( item ) {
+ this.selectItem( item );
+ this.emit( 'choose', item );
- // Initialization
- this.$element
- .addClass( 'oo-ui-popupButtonWidget' )
- .append( this.popup.$element );
+ return this;
};
-/* Setup */
-
-OO.inheritClass( OO.ui.PopupButtonWidget, OO.ui.ButtonWidget );
-OO.mixinClass( OO.ui.PopupButtonWidget, OO.ui.PopuppableElement );
-
-/* Methods */
-
/**
- * Handles mouse click events.
+ * Get an item relative to another one.
*
- * @param {jQuery.Event} e Mouse click event
+ * @param {OO.ui.OptionWidget} item Item to start at
+ * @param {number} direction Direction to move in
+ * @return {OO.ui.OptionWidget|null} Item at position, `null` if there are no items in the menu
*/
-OO.ui.PopupButtonWidget.prototype.onClick = function ( e ) {
- // Skip clicks within the popup
- if ( $.contains( this.popup.$element[0], e.target ) ) {
- return;
- }
+OO.ui.SelectWidget.prototype.getRelativeSelectableItem = function ( item, direction ) {
+ var inc = direction > 0 ? 1 : -1,
+ len = this.items.length,
+ index = item instanceof OO.ui.OptionWidget ?
+ $.inArray( item, this.items ) : ( inc > 0 ? -1 : 0 ),
+ stopAt = Math.max( Math.min( index, len - 1 ), 0 ),
+ i = inc > 0 ?
+ // Default to 0 instead of -1, if nothing is selected let's start at the beginning
+ Math.max( index, -1 ) :
+ // Default to n-1 instead of -1, if nothing is selected let's start at the end
+ Math.min( index, len );
- if ( !this.isDisabled() ) {
- if ( this.popup.isVisible() ) {
- this.hidePopup();
- } else {
- this.showPopup();
+ while ( true ) {
+ i = ( i + inc + len ) % len;
+ item = this.items[i];
+ if ( item instanceof OO.ui.OptionWidget && item.isSelectable() ) {
+ return item;
+ }
+ // Stop iterating when we've looped all the way around
+ if ( i === stopAt ) {
+ break;
}
- OO.ui.PopupButtonWidget.super.prototype.onClick.call( this );
}
- return false;
+ return null;
};
/**
- * Search widget.
- *
- * Combines query and results selection widgets.
- *
- * @class
- * @extends OO.ui.Widget
+ * Get the next selectable item.
*
- * @constructor
- * @param {Object} [config] Configuration options
- * @cfg {string|jQuery} [placeholder] Placeholder text for query input
- * @cfg {string} [value] Initial query value
+ * @return {OO.ui.OptionWidget|null} Item, `null` if ther aren't any selectable items
*/
-OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
- // Configuration intialization
- config = config || {};
-
- // Parent constructor
- OO.ui.SearchWidget.super.call( this, config );
-
- // Properties
- this.query = new OO.ui.TextInputWidget( {
- '$': this.$,
- 'icon': 'search',
- 'placeholder': config.placeholder,
- 'value': config.value
- } );
- this.results = new OO.ui.SelectWidget( { '$': this.$ } );
- this.$query = this.$( '<div>' );
- this.$results = this.$( '<div>' );
+OO.ui.SelectWidget.prototype.getFirstSelectableItem = function () {
+ var i, len, item;
- // Events
- this.query.connect( this, {
- 'change': 'onQueryChange',
- 'enter': 'onQueryEnter'
- } );
- this.results.connect( this, {
- 'highlight': 'onResultsHighlight',
- 'select': 'onResultsSelect'
- } );
- this.query.$input.on( 'keydown', OO.ui.bind( this.onQueryKeydown, this ) );
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ item = this.items[i];
+ if ( item instanceof OO.ui.OptionWidget && item.isSelectable() ) {
+ return item;
+ }
+ }
- // Initialization
- this.$query
- .addClass( 'oo-ui-searchWidget-query' )
- .append( this.query.$element );
- this.$results
- .addClass( 'oo-ui-searchWidget-results' )
- .append( this.results.$element );
- this.$element
- .addClass( 'oo-ui-searchWidget' )
- .append( this.$results, this.$query );
+ return null;
};
-/* Setup */
-
-OO.inheritClass( OO.ui.SearchWidget, OO.ui.Widget );
-
-/* Events */
-
-/**
- * @event highlight
- * @param {Object|null} item Item data or null if no item is highlighted
- */
-
-/**
- * @event select
- * @param {Object|null} item Item data or null if no item is selected
- */
-
-/* Methods */
-
/**
- * Handle query key down events.
+ * Add items.
*
- * @param {jQuery.Event} e Key down event
+ * When items are added with the same values as existing items, the existing items will be
+ * automatically removed before the new items are added.
+ *
+ * @param {OO.ui.OptionWidget[]} items Items to add
+ * @param {number} [index] Index to insert items after
+ * @fires add
+ * @chainable
*/
-OO.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) {
- var highlightedItem, nextItem,
- dir = e.which === OO.ui.Keys.DOWN ? 1 : ( e.which === OO.ui.Keys.UP ? -1 : 0 );
+OO.ui.SelectWidget.prototype.addItems = function ( items, index ) {
+ var i, len, item, hash,
+ remove = [];
- if ( dir ) {
- highlightedItem = this.results.getHighlightedItem();
- if ( !highlightedItem ) {
- highlightedItem = this.results.getSelectedItem();
- }
- nextItem = this.results.getRelativeSelectableItem( highlightedItem, dir );
- this.results.highlightItem( nextItem );
- nextItem.scrollElementIntoView();
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
+ hash = OO.getHash( item.getData() );
+ if ( hash in this.hashes ) {
+ // Remove item with same value
+ remove.push( this.hashes[hash] );
+ }
+ this.hashes[hash] = item;
+ }
+ if ( remove.length ) {
+ this.removeItems( remove );
}
+
+ // Mixin method
+ OO.ui.GroupWidget.prototype.addItems.call( this, items, index );
+
+ // Always provide an index, even if it was omitted
+ this.emit( 'add', items, index === undefined ? this.items.length - items.length - 1 : index );
+
+ return this;
};
/**
- * Handle select widget select events.
+ * Remove items.
*
- * Clears existing results. Subclasses should repopulate items according to new query.
+ * Items will be detached, not removed, so they can be used later.
*
- * @param {string} value New value
+ * @param {OO.ui.OptionWidget[]} items Items to remove
+ * @fires remove
+ * @chainable
*/
-OO.ui.SearchWidget.prototype.onQueryChange = function () {
- // Reset
- this.results.clearItems();
+OO.ui.SelectWidget.prototype.removeItems = function ( items ) {
+ var i, len, item, hash;
+
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
+ hash = OO.getHash( item.getData() );
+ if ( hash in this.hashes ) {
+ // Remove existing item
+ delete this.hashes[hash];
+ }
+ if ( item.isSelected() ) {
+ this.selectItem( null );
+ }
+ }
+
+ // Mixin method
+ OO.ui.GroupWidget.prototype.removeItems.call( this, items );
+
+ this.emit( 'remove', items );
+
+ return this;
};
/**
- * Handle select widget enter key events.
+ * Clear all items.
*
- * Selects highlighted item.
+ * Items will be detached, not removed, so they can be used later.
*
- * @param {string} value New value
+ * @fires remove
+ * @chainable
*/
-OO.ui.SearchWidget.prototype.onQueryEnter = function () {
- // Reset
- this.results.selectItem( this.results.getHighlightedItem() );
-};
+OO.ui.SelectWidget.prototype.clearItems = function () {
+ var items = this.items.slice();
-/**
- * Handle select widget highlight events.
- *
- * @param {OO.ui.OptionWidget} item Highlighted item
- * @fires highlight
- */
-OO.ui.SearchWidget.prototype.onResultsHighlight = function ( item ) {
- this.emit( 'highlight', item ? item.getData() : null );
-};
+ // Clear all items
+ this.hashes = {};
+ // Mixin method
+ OO.ui.GroupWidget.prototype.clearItems.call( this );
+ this.selectItem( null );
-/**
- * Handle select widget select events.
- *
- * @param {OO.ui.OptionWidget} item Selected item
- * @fires select
- */
-OO.ui.SearchWidget.prototype.onResultsSelect = function ( item ) {
- this.emit( 'select', item ? item.getData() : null );
-};
+ this.emit( 'remove', items );
-/**
- * Get the query input.
- *
- * @return {OO.ui.TextInputWidget} Query input
- */
-OO.ui.SearchWidget.prototype.getQuery = function () {
- return this.query;
+ return this;
};
/**
- * Get the results list.
+ * Select widget containing button options.
*
- * @return {OO.ui.SelectWidget} Select list
- */
-OO.ui.SearchWidget.prototype.getResults = function () {
- return this.results;
-};
-
-/**
- * Text input widget.
+ * Use together with OO.ui.ButtonOptionWidget.
*
* @class
- * @extends OO.ui.InputWidget
+ * @extends OO.ui.SelectWidget
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {string} [placeholder] Placeholder text
- * @cfg {string} [icon] Symbolic name of icon
- * @cfg {boolean} [multiline=false] Allow multiple lines of text
- * @cfg {boolean} [autosize=false] Automatically resize to fit content
- * @cfg {boolean} [maxRows=10] Maximum number of rows to make visible when autosizing
*/
-OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
- config = $.extend( { 'maxRows': 10 }, config );
-
+OO.ui.ButtonSelectWidget = function OoUiButtonSelectWidget( config ) {
// Parent constructor
- OO.ui.TextInputWidget.super.call( this, config );
-
- // Properties
- this.pending = 0;
- this.multiline = !!config.multiline;
- this.autosize = !!config.autosize;
- this.maxRows = config.maxRows;
-
- // Events
- this.$input.on( 'keypress', OO.ui.bind( this.onKeyPress, this ) );
- this.$element.on( 'DOMNodeInsertedIntoDocument', OO.ui.bind( this.onElementAttach, this ) );
+ OO.ui.ButtonSelectWidget.super.call( this, config );
// Initialization
- this.$element.addClass( 'oo-ui-textInputWidget' );
- if ( config.icon ) {
- this.$element.addClass( 'oo-ui-textInputWidget-decorated' );
- this.$element.append(
- this.$( '<span>' )
- .addClass( 'oo-ui-textInputWidget-icon oo-ui-icon-' + config.icon )
- .mousedown( OO.ui.bind( function () {
- this.$input.focus();
- return false;
- }, this ) )
- );
- }
- if ( config.placeholder ) {
- this.$input.attr( 'placeholder', config.placeholder );
- }
+ this.$element.addClass( 'oo-ui-buttonSelectWidget' );
};
/* Setup */
-OO.inheritClass( OO.ui.TextInputWidget, OO.ui.InputWidget );
-
-/* Events */
+OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
/**
- * User presses enter inside the text box.
+ * Overlaid menu of options.
*
- * Not called if input is multiline.
+ * Menus are clipped to the visible viewport. They do not provide a control for opening or closing
+ * the menu.
*
- * @event enter
+ * Use together with OO.ui.MenuItemWidget.
+ *
+ * @class
+ * @extends OO.ui.SelectWidget
+ * @mixins OO.ui.ClippableElement
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {OO.ui.InputWidget} [input] Input to bind keyboard handlers to
+ * @cfg {OO.ui.Widget} [widget] Widget to bind mouse handlers to
+ * @cfg {boolean} [autoHide=true] Hide the menu when the mouse is pressed outside the menu
*/
+OO.ui.MenuWidget = function OoUiMenuWidget( config ) {
+ // Config intialization
+ config = config || {};
-/* Methods */
+ // Parent constructor
+ OO.ui.MenuWidget.super.call( this, config );
-/**
- * Handle key press events.
- *
- * @param {jQuery.Event} e Key press event
- * @fires enter If enter key is pressed and input is not multiline
- */
-OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) {
- if ( e.which === OO.ui.Keys.ENTER && !this.multiline ) {
- this.emit( 'enter' );
- }
-};
+ // Mixin constructors
+ OO.ui.ClippableElement.call( this, this.$group, config );
-/**
- * Handle element attach events.
- *
- * @param {jQuery.Event} e Element attach event
- */
-OO.ui.TextInputWidget.prototype.onElementAttach = function () {
- this.adjustSize();
+ // Properties
+ this.flashing = false;
+ this.visible = false;
+ this.newItems = null;
+ this.autoHide = config.autoHide === undefined || !!config.autoHide;
+ this.$input = config.input ? config.input.$input : null;
+ this.$widget = config.widget ? config.widget.$element : null;
+ this.$previousFocus = null;
+ this.isolated = !config.input;
+ this.onKeyDownHandler = OO.ui.bind( this.onKeyDown, this );
+ this.onDocumentMouseDownHandler = OO.ui.bind( this.onDocumentMouseDown, this );
+
+ // Initialization
+ this.$element
+ .hide()
+ .attr( 'role', 'menu' )
+ .addClass( 'oo-ui-menuWidget' );
};
-/**
- * @inheritdoc
- */
-OO.ui.TextInputWidget.prototype.onEdit = function () {
- this.adjustSize();
+/* Setup */
- // Parent method
- return OO.ui.TextInputWidget.super.prototype.onEdit.call( this );
-};
+OO.inheritClass( OO.ui.MenuWidget, OO.ui.SelectWidget );
+OO.mixinClass( OO.ui.MenuWidget, OO.ui.ClippableElement );
+
+/* Methods */
/**
- * Automatically adjust the size of the text input.
- *
- * This only affects multi-line inputs that are auto-sized.
+ * Handles document mouse down events.
*
- * @chainable
+ * @param {jQuery.Event} e Key down event
*/
-OO.ui.TextInputWidget.prototype.adjustSize = function () {
- var $clone, scrollHeight, innerHeight, outerHeight, maxInnerHeight, idealHeight;
-
- if ( this.multiline && this.autosize ) {
- $clone = this.$input.clone()
- .val( this.$input.val() )
- .css( { 'height': 0 } )
- .insertAfter( this.$input );
- // Set inline height property to 0 to measure scroll height
- scrollHeight = $clone[0].scrollHeight;
- // Remove inline height property to measure natural heights
- $clone.css( 'height', '' );
- innerHeight = $clone.innerHeight();
- outerHeight = $clone.outerHeight();
- // Measure max rows height
- $clone.attr( 'rows', this.maxRows ).css( 'height', 'auto' );
- maxInnerHeight = $clone.innerHeight();
- $clone.removeAttr( 'rows' ).css( 'height', '' );
- $clone.remove();
- idealHeight = Math.min( maxInnerHeight, scrollHeight );
- // Only apply inline height when expansion beyond natural height is needed
- this.$input.css(
- 'height',
- // Use the difference between the inner and outer height as a buffer
- idealHeight > outerHeight ? idealHeight + ( outerHeight - innerHeight ) : ''
- );
+OO.ui.MenuWidget.prototype.onDocumentMouseDown = function ( e ) {
+ if ( !$.contains( this.$element[0], e.target ) && ( !this.$widget || !$.contains( this.$widget[0], e.target ) ) ) {
+ this.toggle( false );
}
- return this;
};
/**
- * Get input element.
+ * Handles key down events.
*
- * @param {Object} [config] Configuration options
- * @return {jQuery} Input element
+ * @param {jQuery.Event} e Key down event
*/
-OO.ui.TextInputWidget.prototype.getInputElement = function ( config ) {
- return config.multiline ? this.$( '<textarea>' ) : this.$( '<input type="text" />' );
-};
+OO.ui.MenuWidget.prototype.onKeyDown = function ( e ) {
+ var nextItem,
+ handled = false,
+ highlightItem = this.getHighlightedItem();
+
+ if ( !this.isDisabled() && this.isVisible() ) {
+ if ( !highlightItem ) {
+ highlightItem = this.getSelectedItem();
+ }
+ switch ( e.keyCode ) {
+ case OO.ui.Keys.ENTER:
+ this.chooseItem( highlightItem );
+ handled = true;
+ break;
+ case OO.ui.Keys.UP:
+ nextItem = this.getRelativeSelectableItem( highlightItem, -1 );
+ handled = true;
+ break;
+ case OO.ui.Keys.DOWN:
+ nextItem = this.getRelativeSelectableItem( highlightItem, 1 );
+ handled = true;
+ break;
+ case OO.ui.Keys.ESCAPE:
+ if ( highlightItem ) {
+ highlightItem.setHighlighted( false );
+ }
+ this.toggle( false );
+ handled = true;
+ break;
+ }
-/* Methods */
+ if ( nextItem ) {
+ this.highlightItem( nextItem );
+ nextItem.scrollElementIntoView();
+ }
-/**
- * Check if input supports multiple lines.
- *
- * @return {boolean}
- */
-OO.ui.TextInputWidget.prototype.isMultiline = function () {
- return !!this.multiline;
+ if ( handled ) {
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+ }
};
/**
- * Check if input automatically adjusts its size.
- *
- * @return {boolean}
+ * Bind key down listener.
*/
-OO.ui.TextInputWidget.prototype.isAutosizing = function () {
- return !!this.autosize;
+OO.ui.MenuWidget.prototype.bindKeyDownListener = function () {
+ if ( this.$input ) {
+ this.$input.on( 'keydown', this.onKeyDownHandler );
+ } else {
+ // Capture menu navigation keys
+ this.getElementWindow().addEventListener( 'keydown', this.onKeyDownHandler, true );
+ }
};
/**
- * Check if input is pending.
- *
- * @return {boolean}
+ * Unbind key down listener.
*/
-OO.ui.TextInputWidget.prototype.isPending = function () {
- return !!this.pending;
+OO.ui.MenuWidget.prototype.unbindKeyDownListener = function () {
+ if ( this.$input ) {
+ this.$input.off( 'keydown' );
+ } else {
+ this.getElementWindow().removeEventListener( 'keydown', this.onKeyDownHandler, true );
+ }
};
/**
- * Increase the pending stack.
+ * Choose an item.
+ *
+ * This will close the menu when done, unlike selectItem which only changes selection.
*
+ * @param {OO.ui.OptionWidget} item Item to choose
* @chainable
*/
-OO.ui.TextInputWidget.prototype.pushPending = function () {
- if ( this.pending === 0 ) {
- this.$element.addClass( 'oo-ui-textInputWidget-pending' );
- this.$input.addClass( 'oo-ui-texture-pending' );
+OO.ui.MenuWidget.prototype.chooseItem = function ( item ) {
+ var widget = this;
+
+ // Parent method
+ OO.ui.MenuWidget.super.prototype.chooseItem.call( this, item );
+
+ if ( item && !this.flashing ) {
+ this.flashing = true;
+ item.flash().done( function () {
+ widget.toggle( false );
+ widget.flashing = false;
+ } );
+ } else {
+ this.toggle( false );
}
- this.pending++;
return this;
};
/**
- * Reduce the pending stack.
+ * Add items.
*
- * Clamped at zero.
+ * Adding an existing item (by value) will move it.
*
+ * @param {OO.ui.MenuItemWidget[]} items Items to add
+ * @param {number} [index] Index to insert items after
* @chainable
*/
-OO.ui.TextInputWidget.prototype.popPending = function () {
- if ( this.pending === 1 ) {
- this.$element.removeClass( 'oo-ui-textInputWidget-pending' );
- this.$input.removeClass( 'oo-ui-texture-pending' );
+OO.ui.MenuWidget.prototype.addItems = function ( items, index ) {
+ var i, len, item;
+
+ // Parent method
+ OO.ui.MenuWidget.super.prototype.addItems.call( this, items, index );
+
+ // Auto-initialize
+ if ( !this.newItems ) {
+ this.newItems = [];
+ }
+
+ for ( i = 0, len = items.length; i < len; i++ ) {
+ item = items[i];
+ if ( this.isVisible() ) {
+ // Defer fitting label until
+ item.fitLabel();
+ } else {
+ this.newItems.push( item );
+ }
}
- this.pending = Math.max( 0, this.pending - 1 );
return this;
};
/**
- * Select the contents of the input.
- *
- * @chainable
+ * @inheritdoc
*/
-OO.ui.TextInputWidget.prototype.select = function () {
- this.$input.select();
+OO.ui.MenuWidget.prototype.toggle = function ( visible ) {
+ visible = !!visible && !!this.items.length;
+
+ var i, len,
+ change = visible !== this.isVisible();
+
+ // Parent method
+ OO.ui.MenuWidget.super.prototype.toggle.call( this, visible );
+
+ if ( change ) {
+ if ( visible ) {
+ this.bindKeyDownListener();
+
+ // Change focus to enable keyboard navigation
+ if ( this.isolated && this.$input && !this.$input.is( ':focus' ) ) {
+ this.$previousFocus = this.$( ':focus' );
+ this.$input[0].focus();
+ }
+ if ( this.newItems && this.newItems.length ) {
+ for ( i = 0, len = this.newItems.length; i < len; i++ ) {
+ this.newItems[i].fitLabel();
+ }
+ this.newItems = null;
+ }
+ this.setClipping( true );
+
+ // Auto-hide
+ if ( this.autoHide ) {
+ this.getElementDocument().addEventListener(
+ 'mousedown', this.onDocumentMouseDownHandler, true
+ );
+ }
+ } else {
+ this.unbindKeyDownListener();
+ if ( this.isolated && this.$previousFocus ) {
+ this.$previousFocus[0].focus();
+ this.$previousFocus = null;
+ }
+ this.getElementDocument().removeEventListener(
+ 'mousedown', this.onDocumentMouseDownHandler, true
+ );
+ this.setClipping( false );
+ }
+ }
+
return this;
};
/**
* Menu for a text input widget.
*
+ * This menu is specially designed to be positioned beneeth the text input widget. Even if the input
+ * is in a different frame, the menu's position is automatically calulated and maintained when the
+ * menu is toggled or the window is resized.
+ *
* @class
* @extends OO.ui.MenuWidget
*
};
/**
- * Show the menu.
- *
- * @chainable
+ * @inheritdoc
*/
-OO.ui.TextInputMenuWidget.prototype.show = function () {
- // Parent method
- OO.ui.TextInputMenuWidget.super.prototype.show.call( this );
+OO.ui.TextInputMenuWidget.prototype.toggle = function ( visible ) {
+ visible = !!visible;
- this.position();
- this.$( this.getElementWindow() ).on( 'resize', this.onWindowResizeHandler );
- return this;
-};
+ var change = visible !== this.isVisible();
-/**
- * Hide the menu.
- *
- * @chainable
- */
-OO.ui.TextInputMenuWidget.prototype.hide = function () {
// Parent method
- OO.ui.TextInputMenuWidget.super.prototype.hide.call( this );
+ OO.ui.TextInputMenuWidget.super.prototype.toggle.call( this, visible );
- this.$( this.getElementWindow() ).off( 'resize', this.onWindowResizeHandler );
+ if ( change ) {
+ if ( this.isVisible() ) {
+ this.position();
+ this.$( this.getElementWindow() ).on( 'resize', this.onWindowResizeHandler );
+ } else {
+ this.$( this.getElementWindow() ).off( 'resize', this.onWindowResizeHandler );
+ }
+ }
return this;
};
delete dimensions.left;
}
}
-
this.$element.css( dimensions );
this.setIdealSize( $container.width() );
- return this;
-};
-
-/**
- * Width with on and off states.
- *
- * Mixin for widgets with a boolean state.
- *
- * @abstract
- * @class
- *
- * @constructor
- * @param {Object} [config] Configuration options
- * @cfg {boolean} [value=false] Initial value
- */
-OO.ui.ToggleWidget = function OoUiToggleWidget( config ) {
- // Configuration initialization
- config = config || {};
-
- // Properties
- this.value = null;
-
- // Initialization
- this.$element.addClass( 'oo-ui-toggleWidget' );
- this.setValue( !!config.value );
-};
-
-/* Events */
-
-/**
- * @event change
- * @param {boolean} value Changed value
- */
-
-/* Methods */
-
-/**
- * Get the value of the toggle.
- *
- * @return {boolean}
- */
-OO.ui.ToggleWidget.prototype.getValue = function () {
- return this.value;
-};
-/**
- * Set the value of the toggle.
- *
- * @param {boolean} value New value
- * @fires change
- * @chainable
- */
-OO.ui.ToggleWidget.prototype.setValue = function ( value ) {
- value = !!value;
- if ( this.value !== value ) {
- this.value = value;
- this.emit( 'change', value );
- this.$element.toggleClass( 'oo-ui-toggleWidget-on', value );
- this.$element.toggleClass( 'oo-ui-toggleWidget-off', !value );
- }
return this;
};
/**
- * Button that toggles on and off.
+ * Structured list of items.
+ *
+ * Use with OO.ui.OutlineItemWidget.
*
* @class
- * @extends OO.ui.ButtonWidget
- * @mixins OO.ui.ToggleWidget
+ * @extends OO.ui.SelectWidget
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {boolean} [value=false] Initial value
*/
-OO.ui.ToggleButtonWidget = function OoUiToggleButtonWidget( config ) {
- // Configuration initialization
+OO.ui.OutlineWidget = function OoUiOutlineWidget( config ) {
+ // Config intialization
config = config || {};
// Parent constructor
- OO.ui.ToggleButtonWidget.super.call( this, config );
-
- // Mixin constructors
- OO.ui.ToggleWidget.call( this, config );
+ OO.ui.OutlineWidget.super.call( this, config );
// Initialization
- this.$element.addClass( 'oo-ui-toggleButtonWidget' );
+ this.$element.addClass( 'oo-ui-outlineWidget' );
};
/* Setup */
-OO.inheritClass( OO.ui.ToggleButtonWidget, OO.ui.ButtonWidget );
-OO.mixinClass( OO.ui.ToggleButtonWidget, OO.ui.ToggleWidget );
-
-/* Methods */
-
-/**
- * @inheritdoc
- */
-OO.ui.ToggleButtonWidget.prototype.onClick = function () {
- if ( !this.isDisabled() ) {
- this.setValue( !this.value );
- }
-
- // Parent method
- return OO.ui.ToggleButtonWidget.super.prototype.onClick.call( this );
-};
-
-/**
- * @inheritdoc
- */
-OO.ui.ToggleButtonWidget.prototype.setValue = function ( value ) {
- value = !!value;
- if ( value !== this.value ) {
- this.setActive( value );
- }
-
- // Parent method (from mixin)
- OO.ui.ToggleWidget.prototype.setValue.call( this, value );
-
- return this;
-};
+OO.inheritClass( OO.ui.OutlineWidget, OO.ui.SelectWidget );
/**
* Switch that slides on and off.
dépôts / lhc / web / wiklou.git / blobdiff