/*!
- * OOjs UI v0.1.0-pre (5ab041a801)
+ * 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-19T22:45:44Z
+ * 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
};
/**
// Properties
this.list = [];
this.categories = {
- 'actions': 'getAction',
- 'flags': 'getFlags',
- 'modes': 'getModes'
+ actions: 'getAction',
+ flags: 'getFlags',
+ modes: 'getModes'
};
this.categorized = {};
this.special = {};
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' ]
+ click: [ 'emit', 'click', action ],
+ resize: [ 'emit', 'resize', action ],
+ toggle: [ 'onActionChange' ]
} );
this.list.push( action );
}
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' } );
};
// 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-content oo-ui-' + this.dir + '" style="direction:' + this.dir + ';" dir="' + this.dir + '">' +
+ '<body class="oo-ui-frame-content oo-ui-' + this.dir + '" dir="' + this.dir + '">' +
'</body>' +
'</html>'
);
* @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;
};
*/
OO.ui.Widget = function OoUiWidget( config ) {
// Initialize config
- config = $.extend( { 'disabled': false }, config );
+ config = $.extend( { disabled: false }, config );
// Parent constructor
OO.ui.Widget.super.call( this, config );
this.opened = null;
this.timing = null;
this.size = config.size || this.constructor.static.size;
- this.frame = new OO.ui.Frame( { '$': this.$ } );
+ 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.' );
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 || '',
- 'min-width': dim.minWidth || '',
- 'max-width': dim.maxWidth || ''
+ width: dim.width || '',
+ minWidth: dim.minWidth || '',
+ maxWidth: dim.maxWidth || ''
} );
this.$frame.css( {
- 'height': ( dim.height !== undefined ? dim.height : this.getContentHeight() ) || '',
- 'min-height': dim.minHeight || '',
- 'max-height': dim.maxHeight || ''
+ height: ( dim.height !== undefined ? dim.height : this.getContentHeight() ) || '',
+ minHeight: dim.minHeight || '',
+ maxHeight: dim.maxHeight || ''
} );
return this;
};
var win = this,
deferred = $.Deferred();
- this.frame.$content.focus();
+ 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();
deferred = $.Deferred();
this.getHoldProcess( data ).execute().done( function () {
- win.frame.$content.find( ':focus' ).blur();
+ 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();
// Events
this.actions.connect( this, {
- 'click': 'onActionClick',
- 'resize': 'onActionResize',
- 'change': 'onActionsChange'
+ click: 'onActionClick',
+ resize: 'onActionResize',
+ change: 'onActionsChange'
} );
// Initialization
);
for ( i = 0, len = actions.length; i < len; i++ ) {
items.push(
- new OO.ui.ActionWidget( $.extend( { '$': this.$ }, actions[i] ) )
+ new OO.ui.ActionWidget( $.extend( { $: this.$ }, actions[i] ) )
);
}
this.actions.add( items );
OO.ui.Dialog.super.prototype.initialize.call( this );
// Properties
- this.title = new OO.ui.LabelWidget( { '$': this.$ } );
+ this.title = new OO.ui.LabelWidget( { $: this.$ } );
// Events
if ( this.constructor.static.escapable ) {
*
* - {@link #closeWindow} or {@link OO.ui.Window#close} methods are used to start closing
* - `opened` promise is resolved with `closing` promise
- * - {@link #event-opening} is emitted 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
* @property {Object}
*/
OO.ui.WindowManager.static.sizes = {
- 'small': {
- 'width': 300
+ small: {
+ width: 300
},
- 'medium': {
- 'width': 500
+ medium: {
+ width: 500
},
- 'large': {
- 'width': 700
+ large: {
+ width: 700
},
- 'full': {
+ full: {
// These can be non-numeric because they are never used in calculations
- 'width': '100%',
- 'height': '100%'
+ width: '100%',
+ height: '100%'
}
};
'Cannot auto-instantiate window: symbolic name is unrecognized by the factory'
) );
} else {
- win = this.factory.create( name, this, { '$': this.$ } );
+ win = this.factory.create( name, this, { $: this.$ } );
this.addWindows( [ win ] ).then(
OO.ui.bind( deferred.resolve, deferred, win ),
deferred.reject
if ( manager.modal ) {
manager.$( manager.getElementDocument() ).on( {
// Prevent scrolling by keys in top-level window
- 'keydown': manager.onDocumentKeyDownHandler
+ keydown: manager.onDocumentKeyDownHandler
} );
manager.$( manager.getElementWindow() ).on( {
// Prevent scrolling by wheel in top-level window
- 'mousewheel': manager.onWindowMouseWheelHandler,
+ mousewheel: manager.onWindowMouseWheelHandler,
// Start listening for top-level window dimension changes
'orientationchange resize': manager.onWindowResizeHandler
} );
manager.updateWindowSize( win );
setTimeout( function () {
win.setup( data ).then( function () {
- manager.opening.notify( { 'state': 'setup' } );
+ manager.opening.notify( { state: 'setup' } );
setTimeout( function () {
win.ready( data ).then( function () {
- manager.opening.notify( { 'state': 'ready' } );
+ manager.opening.notify( { state: 'ready' } );
manager.opening = null;
manager.opened = $.Deferred();
opening.resolve( manager.opened.promise(), data );
opened.resolve( closing.promise(), data );
setTimeout( function () {
win.hold( data ).then( function () {
- closing.notify( { 'state': 'hold' } );
+ closing.notify( { state: 'hold' } );
setTimeout( function () {
win.teardown( data ).then( function () {
- closing.notify( { 'state': 'teardown' } );
+ closing.notify( { state: 'teardown' } );
if ( manager.modal ) {
manager.$( manager.getElementDocument() ).off( {
// Allow scrolling by keys in top-level window
- 'keydown': manager.onDocumentKeyDownHandler
+ keydown: manager.onDocumentKeyDownHandler
} );
manager.$( manager.getElementWindow() ).off( {
// Allow scrolling by wheel in top-level window
- 'mousewheel': manager.onWindowMouseWheelHandler,
+ mousewheel: manager.onWindowMouseWheelHandler,
// Stop listening for top-level window dimension changes
'orientationchange resize': manager.onWindowResizeHandler
} );
OO.ui.Process.prototype.createStep = function ( step, context ) {
if ( typeof step === 'number' || $.isFunction( step.promise ) ) {
return {
- 'callback': function () {
+ callback: function () {
return step;
},
- 'context': null
+ context: null
};
}
if ( $.isFunction( step ) ) {
return {
- 'callback': step,
- 'context': context
+ callback: step,
+ context: context
};
}
throw new Error( 'Cannot create process step: number, promise or function expected' );
*
* 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' }`
+ * - A specific tool: `{ name: 'tool-name' }` or `'tool-name'`
+ * - All tools in a group: `{ group: 'group-name' }`
* - All tools: `'*'`
*
* @private
item = collection[i];
// Allow plain strings as shorthand for named tools
if ( typeof item === 'string' ) {
- item = { 'name': item };
+ item = { name: item };
}
if ( OO.isPlainObject( item ) ) {
if ( item.group ) {
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,
+ $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,
clipHeight = desiredHeight < naturalHeight;
if ( clipWidth ) {
- this.$clippable.css( { 'overflow-x': 'auto', 'width': desiredWidth } );
+ 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( 'overflow-x', '' );
+ this.$clippable.css( 'overflowX', '' );
}
if ( clipHeight ) {
- this.$clippable.css( { 'overflow-y': 'auto', 'height': desiredHeight } );
+ 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( 'overflow-y', '' );
+ this.$clippable.css( 'overflowY', '' );
}
this.clipped = clipWidth || clipHeight;
* additional icon names keyed by language code.
*
* Example of i18n icon definition:
- * { 'default': 'bold-a', 'en': 'bold-b', 'de': 'bold-f' }
+ * { default: 'bold-a', en: 'bold-b', de: 'bold-f' }
*
* @static
* @inheritable
// 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.setIndicatorTitle( config.indicatorTitle || this.constructor.static.indicatorTitle );
};
/* Setup */
*/
OO.ui.LabeledElement.prototype.fitLabel = function () {
if ( this.$label.autoEllipsis && this.autoFitLabel ) {
- this.$label.autoEllipsis( { 'hasSpan': false, 'tooltip': true } );
+ this.$label.autoEllipsis( { hasSpan: false, tooltip: true } );
}
return this;
};
// Properties
this.popup = new OO.ui.PopupWidget( $.extend(
- { 'autoClose': true },
+ { autoClose: true },
config.popup,
- { '$': this.$, '$autoCloseIgnore': this.$element }
+ { $: this.$, $autoCloseIgnore: this.$element }
) );
};
this.title = null;
// Events
- this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );
+ this.toolbar.connect( this, { updateState: 'onUpdateState' } );
// Initialization
this.$title.addClass( 'oo-ui-tool-title' );
// Events
this.$element
.add( this.$bar ).add( this.$group ).add( this.$actions )
- .on( 'mousedown', OO.ui.bind( this.onMouseDown, this ) );
+ .on( 'mousedown touchstart', OO.ui.bind( this.onPointerDown, this ) );
// Initialization
this.$group.addClass( 'oo-ui-toolbar-tools' );
*
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.Toolbar.prototype.onMouseDown = function ( e ) {
+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] ) {
*
* 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' }`
+ * - 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
// 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.getToolGroupFactory().create( type, this, $.extend( { $: this.$ }, group ) )
);
}
this.addItems( items );
*
* 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' }`
+ * - A specific tool: `{ name: 'tool-name' }` or `'tool-name'`
+ * - All tools in a group: `{ group: 'group-name' }`
* - All tools: `'*'`
*
* @abstract
// 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 )
+ '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' } );
+ this.toolbar.getToolFactory().connect( this, { register: 'onToolFactoryRegister' } );
+ this.aggregate( { disable: 'itemDisable' } );
+ this.connect( this, { itemDisable: 'updateDisabled' } );
// Initialization
this.$group.addClass( 'oo-ui-toolGroup-tools' );
*
* @param {jQuery.Event} e Mouse down event
*/
-OO.ui.ToolGroup.prototype.onMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === 1 ) {
+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 );
*/
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
+ // 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.onMouseUp( e );
+ this.onPointerUp( e );
};
/**
*
* @param {jQuery.Event} e Mouse up event
*/
-OO.ui.ToolGroup.prototype.onMouseUp = function ( e ) {
+OO.ui.ToolGroup.prototype.onPointerUp = function ( e ) {
var tool = this.getTargetTool( e );
- if ( !this.isDisabled() && e.which === 1 && this.pressed && this.pressed === tool ) {
+ // 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();
}
OO.ui.MessageDialog.static.message = null;
OO.ui.MessageDialog.static.actions = [
- { 'label': OO.ui.deferMsg( 'ooui-dialog-message-accept' ), 'flags': 'primary' },
- { 'label': OO.ui.deferMsg( 'ooui-dialog-message-reject' ), 'flags': 'safe' }
+ { 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 */
OO.ui.MessageDialog.prototype.getActionProcess = function ( action ) {
if ( action ) {
return new OO.ui.Process( function () {
- this.close( { 'action': action } );
+ this.close( { action: action } );
}, this );
}
return OO.ui.MessageDialog.super.prototype.getActionProcess.call( this, action );
// Properties
this.$actions = this.$( '<div>' );
this.container = new OO.ui.PanelLayout( {
- '$': this.$, 'scrollable': true, 'classes': [ 'oo-ui-messageDialog-container' ]
+ $: 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.$, padded: true, expanded: false, classes: [ 'oo-ui-messageDialog-text' ]
} );
this.message = new OO.ui.LabelWidget( {
- '$': this.$, 'classes': [ 'oo-ui-messageDialog-message' ]
+ $: this.$, classes: [ 'oo-ui-messageDialog-message' ]
} );
// Initialization
this.$primaryActions = this.$( '<div>' );
this.$otherActions = this.$( '<div>' );
this.dismissButton = new OO.ui.ButtonWidget( {
- '$': this.$,
- 'label': OO.ui.msg( 'ooui-dialog-process-dismiss' )
+ $: 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.$,
+ 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' } );
+ this.dismissButton.connect( this, { click: 'onDismissErrorButtonClick' } );
+ this.retryButton.connect( this, { click: 'onRetryButtonClick' } );
// Initialization
this.title.$element.addClass( 'oo-ui-processDialog-title' );
this.$safeActions.is( ':visible' ) ? this.$safeActions.width() : 0,
this.$primaryActions.is( ':visible' ) ? this.$primaryActions.width() : 0
);
- this.$location.css( { 'padding-left': width, 'padding-right': width } );
+ this.$location.css( { paddingLeft: width, paddingRight: width } );
return this;
};
this.currentPageName = null;
this.pages = {};
this.ignoreFocus = false;
- this.stackLayout = new OO.ui.StackLayout( { '$': this.$, 'continuous': !!config.continuous } );
+ 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.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.$, widths: [ 1, 2 ] }
);
this.outlineVisible = true;
if ( this.editable ) {
this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
- this.outlineWidget, { '$': this.$ }
+ this.outlineWidget, { $: this.$ }
);
}
}
// Events
- this.stackLayout.connect( this, { 'set': 'onStackLayoutSet' } );
+ this.stackLayout.connect( this, { set: 'onStackLayoutSet' } );
if ( this.outlined ) {
- this.outlineWidget.connect( this, { 'select': 'onOutlineWidgetSelect' } );
+ this.outlineWidget.connect( this, { select: 'onOutlineWidgetSelect' } );
}
if ( this.autoFocus ) {
// Event 'focus' does not bubble, but 'focusin' does
* @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
*/
OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
- var layout = this;
+ var $input, layout = this;
if ( page ) {
- page.scrollElementIntoView( { 'complete': function () {
+ 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 ) {
- page.$element.find( ':input:first' ).focus();
+ $input = page.$element.find( ':input:first' );
+ if ( $input.length ) {
+ $input[0].focus();
+ }
}
}
} } );
name = page.getName();
this.pages[page.getName()] = page;
if ( this.outlined ) {
- item = new OO.ui.OutlineItemWidget( name, page, { '$': this.$ } );
+ item = new OO.ui.OutlineItemWidget( name, page, { $: this.$ } );
page.setOutlineItem( item );
items.push( item );
}
*/
OO.ui.BookletLayout.prototype.setPage = function ( name ) {
var selectedItem,
+ $focused,
page = this.pages[name];
if ( name !== this.currentPageName ) {
// 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();
+ $focused = this.pages[this.currentPageName].$element.find( ':focus' );
+ if ( $focused.length ) {
+ $focused[0].blur();
+ }
}
}
this.currentPageName = name;
* @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
+ * - 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
+ * - 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
+ * - 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
+ * - inline: Label is after the field and aligned toward it, best for small boolean fields like
* checkboxes or radio buttons
*
* @constructor
OO.ui.FieldLayout = function OoUiFieldLayout( field, config ) {
var popupButtonWidget;
// Config initialization
- config = $.extend( { 'align': 'left' }, config );
+ config = $.extend( { align: 'left' }, config );
// Parent constructor
OO.ui.FieldLayout.super.call( this, config );
if ( config.help ) {
popupButtonWidget = new OO.ui.PopupButtonWidget( $.extend(
{
- '$': this.$,
- 'frameless': true,
- 'icon': 'info',
- 'title': config.help
+ $: this.$,
+ frameless: true,
+ icon: 'info',
+ title: config.help
},
config,
{ label: null }
if ( this.field instanceof OO.ui.InputWidget ) {
this.$label.on( 'click', OO.ui.bind( this.onLabelClick, this ) );
}
- this.field.connect( this, { 'disable': 'onFieldDisable' } );
+ this.field.connect( this, { disable: 'onFieldDisable' } );
// Initialization
this.$element.addClass( 'oo-ui-fieldLayout' );
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 );
}
panel = this.panels[i];
width = this.widths[x];
dimensions = {
- 'width': Math.round( width * 100 ) + '%',
- 'height': Math.round( height * 100 ) + '%',
- 'top': Math.round( top * 100 ) + '%',
+ 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' : ''
+ visibility: width === 0 || height === 0 ? 'hidden' : ''
};
// If RTL, reverse:
if ( OO.ui.Element.getDir( this.$.context ) === 'rtl' ) {
*/
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 );
*/
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' );
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
+ $: OO.ui.Element.getJQuery( this.$overlay ),
+ input: this.lookupInput,
+ $container: config.$container
} );
this.lookupCache = {};
this.lookupQuery = null;
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 )
+ 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' } );
+ this.lookupInput.connect( this, { change: 'onLookupInputChange' } );
// Initialization
this.$element.addClass( 'oo-ui-lookupWidget' );
*/
OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) {
// Configuration initialization
- config = $.extend( { 'icon': 'add-item' }, config );
+ config = $.extend( { icon: 'add-item' }, config );
// Parent constructor
OO.ui.OutlineControlsWidget.super.call( this, config );
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.$,
+ 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.$,
+ 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' )
+ $: this.$,
+ framed: false,
+ icon: 'remove',
+ title: OO.ui.msg( 'ooui-outline-control-remove' )
} );
// Events
outline.connect( this, {
- 'select': 'onOutlineChange',
- 'add': 'onOutlineChange',
- 'remove': 'onOutlineChange'
+ 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' ] } );
+ 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' );
*/
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 );
// 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
*/
OO.ui.ActionWidget = function OoUiActionWidget( config ) {
// Config intialization
- config = $.extend( { 'framed': false }, config );
+ config = $.extend( { framed: false }, config );
// Parent constructor
OO.ui.ActionWidget.super.call( this, config );
*/
OO.ui.InlineMenuWidget = function OoUiInlineMenuWidget( config ) {
// Configuration initialization
- config = $.extend( { 'indicator': 'down' }, config );
+ config = $.extend( { indicator: 'down' }, config );
// Parent constructor
OO.ui.InlineMenuWidget.super.call( this, config );
OO.ui.TitledElement.call( this, this.$label, config );
// Properties
- this.menu = new OO.ui.MenuWidget( $.extend( { '$': this.$, 'widget': this }, config.menu ) );
+ 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' } );
+ this.$element.on( { click: OO.ui.bind( this.onClick, this ) } );
+ this.menu.connect( this, { select: 'onMenuSelect' } );
// Initialization
this.$handle
*/
OO.ui.InputWidget = function OoUiInputWidget( config ) {
// Config intialization
- config = $.extend( { 'readOnly': false }, config );
+ config = $.extend( { readOnly: false }, config );
// Parent constructor
OO.ui.InputWidget.super.call( this, config );
if ( this.$input.is( ':checkbox,:radio' ) ) {
this.$input.click();
} else if ( this.$input.is( ':input' ) ) {
- this.$input.focus();
+ this.$input[0].focus();
}
}
};
* @chainable
*/
OO.ui.InputWidget.prototype.focus = function () {
- this.$input.focus();
+ this.$input[0].focus();
return this;
};
* @chainable
*/
OO.ui.InputWidget.prototype.blur = function () {
- this.$input.blur();
+ this.$input[0].blur();
return this;
};
*/
OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) {
var widget = this;
- config = $.extend( { 'maxRows': 10 }, config );
+ config = $.extend( { maxRows: 10 }, config );
// Parent constructor
OO.ui.TextInputWidget.super.call( this, config );
this.$( '<span>' )
.addClass( 'oo-ui-textInputWidget-icon oo-ui-icon-' + config.icon )
.mousedown( function () {
- widget.$input.focus();
+ widget.$input[0].focus();
return false;
} )
);
if ( config.placeholder ) {
this.$input.attr( 'placeholder', config.placeholder );
}
+ this.$element.attr( 'role', 'textbox' );
};
/* Setup */
return OO.ui.TextInputWidget.super.prototype.onEdit.call( this );
};
+/**
+ * @inheritdoc
+ */
+OO.ui.TextInputWidget.prototype.setValue = function ( value ) {
+ // Parent method
+ OO.ui.TextInputWidget.super.prototype.setValue.call( this, value );
+
+ this.adjustSize();
+ return this;
+};
+
/**
* Automatically adjust the size of the text input.
*
if ( this.multiline && this.autosize ) {
$clone = this.$input.clone()
.val( this.$input.val() )
- .css( { 'height': 0 } )
+ .css( { height: 0 } )
.insertAfter( this.$input );
// Set inline height property to 0 to measure scroll height
scrollHeight = $clone[0].scrollHeight;
this.$element
.data( 'oo-ui-optionWidget', this )
.attr( 'rel', config.rel )
+ .attr( 'role', 'option' )
.addClass( 'oo-ui-optionWidget' )
.append( this.$label );
this.$element
*/
OO.ui.MenuItemWidget = function OoUiMenuItemWidget( data, config ) {
// Configuration initialization
- config = $.extend( { 'icon': 'check' }, config );
+ config = $.extend( { icon: 'check' }, config );
// Parent constructor
OO.ui.MenuItemWidget.super.call( this, data, config );
// Initialization
- this.$element.addClass( 'oo-ui-menuItemWidget' );
+ this.$element
+ .attr( 'role', 'menuitem' )
+ .addClass( 'oo-ui-menuItemWidget' );
};
/* Setup */
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.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' } );
+ this.closeButton.connect( this, { click: 'onCloseButtonClick' } );
// Initialization
this.toggleAnchor( config.anchor === undefined || config.anchor );
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],
+ 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,
// Position body relative to anchor and resize
this.$popup.css( {
- 'left': popupOffset,
- 'width': this.width,
- 'height': this.height !== null ? this.height : 'auto'
+ left: popupOffset,
+ width: this.width,
+ height: this.height !== null ? this.height : 'auto'
} );
if ( transition ) {
// Properties
this.query = new OO.ui.TextInputWidget( {
- '$': this.$,
- 'icon': 'search',
- 'placeholder': config.placeholder,
- 'value': config.value
+ $: this.$,
+ icon: 'search',
+ placeholder: config.placeholder,
+ value: config.value
} );
- this.results = new OO.ui.SelectWidget( { '$': this.$ } );
+ this.results = new OO.ui.SelectWidget( { $: this.$ } );
this.$query = this.$( '<div>' );
this.$results = this.$( '<div>' );
// Events
this.query.connect( this, {
- 'change': 'onQueryChange',
- 'enter': 'onQueryEnter'
+ change: 'onQueryChange',
+ enter: 'onQueryEnter'
} );
this.results.connect( this, {
- 'highlight': 'onResultsHighlight',
- 'select': 'onResultsSelect'
+ highlight: 'onResultsHighlight',
+ select: 'onResultsSelect'
} );
this.query.$input.on( 'keydown', OO.ui.bind( this.onQueryKeydown, 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 )
+ mousedown: OO.ui.bind( this.onMouseDown, this ),
+ mouseover: OO.ui.bind( this.onMouseOver, this ),
+ mouseleave: OO.ui.bind( this.onMouseLeave, this )
} );
// Initialization
// Initialization
this.$element
.hide()
+ .attr( 'role', 'menu' )
.addClass( 'oo-ui-menuWidget' );
};
// Change focus to enable keyboard navigation
if ( this.isolated && this.$input && !this.$input.is( ':focus' ) ) {
this.$previousFocus = this.$( ':focus' );
- this.$input.focus();
+ this.$input[0].focus();
}
if ( this.newItems && this.newItems.length ) {
for ( i = 0, len = this.newItems.length; i < len; i++ ) {
} else {
this.unbindKeyDownListener();
if ( this.isolated && this.$previousFocus ) {
- this.$previousFocus.focus();
+ this.$previousFocus[0].focus();
this.$previousFocus = null;
}
this.getElementDocument().removeEventListener(
dépôts / lhc / web / wiklou.git / blobdiff