mediawiki-extensions-Visual.../modules/ve/ui/ve.ui.Dialog.js
Trevor Parscal f1d481ff64 Prevent scrolling in top-level window while dialog is open
Because scroll events cannot be canceled or prevented from bubbling
up, the only way to prevent the scrolling is to cancel the actual key
and mouse wheel events.

PhantomJs -= 2

Change-Id: I540738459181c37d11caf5db07345703e7000ef9
2013-06-06 23:43:19 +00:00

158 lines
3.8 KiB
JavaScript

/*!
* VisualEditor UserInterface Dialog class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* UserInterface dialog.
*
* @class
* @abstract
* @extends ve.ui.Window
*
* @constructor
* @param {ve.ui.Surface} surface
* @param {Object} [config] Config options
*/
ve.ui.Dialog = function VeUiDialog( surface, config ) {
// Parent constructor
ve.ui.Window.call( this, surface, config );
// Properties
this.visible = false;
this.onWindowMouseWheelHandler = ve.bind( this.onWindowMouseWheel, this );
this.onDocumentKeyDownHandler = ve.bind( this.onDocumentKeyDown, this );
// Initialization
this.$.addClass( 've-ui-dialog' );
this.$.on( 'mousedown', false );
};
/* Inheritance */
ve.inheritClass( ve.ui.Dialog, ve.ui.Window );
/* Methods */
/**
* Handle close button click events.
*
* @method
*/
ve.ui.Dialog.prototype.onCloseButtonClick = function () {
this.close( 'cancel' );
};
/**
* Handle apply button click events.
*
* @method
*/
ve.ui.Dialog.prototype.onApplyButtonClick = function () {
this.close( 'apply' );
};
/**
* Handle window mouse wheel events.
*
* @method
* @param {jQuery.Event} e Mouse wheel event
*/
ve.ui.Dialog.prototype.onWindowMouseWheel = function () {
return false;
};
/**
* Handle document key down events.
*
* @method
* @param {jQuery.Event} e Key down event
*/
ve.ui.Dialog.prototype.onDocumentKeyDown = function ( e ) {
switch ( e.which ) {
case ve.Keys.PAGEUP:
case ve.Keys.PAGEDOWN:
case ve.Keys.END:
case ve.Keys.HOME:
case ve.Keys.LEFT:
case ve.Keys.UP:
case ve.Keys.RIGHT:
case ve.Keys.DOWN:
// Prevent any key events that might cause scrolling
return false;
}
};
/**
* Open window.
*
* Wraps the parent open method. Disables native top-level window scrolling behavior.
*
* @method
* @emits setup
* @emits open
*/
ve.ui.Dialog.prototype.open = function () {
ve.ui.Window.prototype.open.call( this );
// Prevent scrolling in top-level window
$( window ).on( 'mousewheel', this.onWindowMouseWheelHandler );
$( document ).on( 'keydown', this.onDocumentKeyDownHandler );
};
/**
* Close dialog.
*
* Wraps the parent close method. Allows animation by delaying parent close call, while still
* providing the same recursion blocking. Restores native top-level window scrolling behavior.
*
* @method
* @param {boolean} action Action that caused the window to be closed
* @emits close
*/
ve.ui.Dialog.prototype.close = function ( action ) {
if ( !this.closing ) {
this.$.addClass( 've-ui-dialog-closing' );
setTimeout( ve.bind( function () {
ve.ui.Window.prototype.close.call( this, action );
this.$.removeClass( 've-ui-dialog-closing' );
}, this ), 250 );
// Allow scrolling in top-level window
$( window ).off( 'mousewheel', this.onWindowMouseWheelHandler );
$( document ).off( 'keydown', this.onDocumentKeyDownHandler );
}
};
/**
* Initialize frame contents.
*
* @method
*/
ve.ui.Dialog.prototype.initialize = function () {
// Call parent method
ve.ui.Window.prototype.initialize.call( this );
this.applyButton = new ve.ui.ButtonWidget( {
'$$': this.$$, 'label': ve.msg( 'visualeditor-dialog-action-apply' ), 'flags': ['primary']
} );
// Properties
this.closeButton = new ve.ui.IconButtonWidget( {
'$$': this.$$, 'title': ve.msg( 'visualeditor-dialog-action-close' ), 'icon': 'close'
} );
// Events
this.closeButton.connect( this, { 'click': 'onCloseButtonClick' } );
this.applyButton.connect( this, { 'click': 'onApplyButtonClick' } );
// Initialization
this.closeButton.$.addClass( 've-ui-window-closeButton' );
this.applyButton.$.addClass( 've-ui-window-applyButton' );
this.$head.append( this.closeButton.$ );
this.$foot.append( this.applyButton.$ );
};
/* Initialization */
ve.ui.Dialog.static.addLocalStylesheets( [ 've.ui.Dialog.css' ] );