mediawiki-extensions-Visual.../modules/ve/ui/widgets/ve.ui.PopupWidget.js

201 lines
4.7 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor UserInterface PopupWidget class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.PopupWidget object.
*
* @class
* @extends ve.ui.Widget
*
* @constructor
* @param {Object} [config] Configuration options
* @cfg {jQuery} [$container] Container to make popup positioned relative to
* @cfg {boolean} [autoClose=false] Popup auto-closes when it loses focus
*/
ve.ui.PopupWidget = function VeUiPopupWidget( config ) {
// Config intialization
config = config || {};
// Parent constructor
ve.ui.Widget.call( this, config );
// Properties
this.visible = false;
this.$callout = this.$$( '<div>' );
this.$container = config.$container || this.$$( 'body' );
this.$body = this.$$( '<div>' );
this.transitionTimeout = null;
this.align = config.align || 'center';
this.autoClose = !!config.autoClose;
// Events
this.$.add( this.$body ).add( this.$callout )
.on( 'mousedown', function ( e ) {
// Cancel only local mousedown events
return e.target !== this;
} );
// Initialization
if ( this.autoClose ) {
// Tab index on body so that it may blur
this.$body.attr( 'tabindex', 1 );
// Listen for blur events
this.$body.on( 'blur', ve.bind( this.onPopupBlur, this ) );
}
this.$.hide()
.addClass( 've-ui-popupWidget' )
.append(
The Great ve.ui.Surface refactor of 2013 Prologue: Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't see you there! In a world where iframes are outlaws, and symbols like document and window are global, there were more than a few assumptions about which document or window was being used. But fear not - for this commit (probably) tracks them all down, leaving a trail of iframe-compatible awesomeness in its wake. With the great ve.ui.Surface now able to be used inside of iframes, let the reference editing commence. But there, lurking in the darkness is a DM issue so fierce it may take Roan and/or Ed up to 3 whole hours to sort it out. Note to Roan and/or Ed: Editing references seems to work fine, but when saving the page there are "no changes" which is a reasonable indication to the contrary. Objectives: * Make it possible to have multiple surfaces be instantiated, get along nicely, and be embedded inside of iframes if needed. * Make reference content editable within a dialog Approach: * Move what's left of ve.Editor to ve.ui.Surface and essentially obliterate all use of it * Make even more stuff inherit from ve.Element (long live this.$$) * Use the correct document or window anywhere it was being assumed to be the top level one * Resolve stacking order issues by removing the excessive use of z-index and introducing global and local overlay elements for each editor * Add a surface to the reference dialog, load up the reference contents and save them back on apply * Actually destroy what we create in ce and ui surfaces * Add recursive frame offset calculation method to ve.Element * Moved ve.ce.Surface's getSelectionRect method to the prototype Bonus: * Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it was separate in the first place, but I'm likely the one to blame) * Fix blatant lies in documentation * Whitespace cleanup here and there * Get rid of ve.ui.Window overlays - not used or needed Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
this.$body.addClass( 've-ui-popupWidget-body' ),
this.$callout.addClass( 've-ui-popupWidget-callout' )
);
};
/* Inheritance */
ve.inheritClass( ve.ui.PopupWidget, ve.ui.Widget );
/* Events */
/**
* @event hide
*/
/* Methods */
/**
* Handle blur events.
*
* @param {jQuery.Event} e Blur event
*/
ve.ui.PopupWidget.prototype.onPopupBlur = function () {
var $body = this.$body;
// Find out what is focused after blur
setTimeout( ve.bind( function () {
var $focused = $body.find( ':focus' );
// Is there a focused child element?
if ( $focused.length > 0 ) {
// Bind a one off blur event to that focused child element
$focused.one( 'blur', ve.bind( function () {
setTimeout( ve.bind( function () {
if ( $body.find( ':focus' ).length === 0 ) {
// Be sure focus is not the popup itself.
if ( $body.is( ':focus' ) ) {
return;
}
// Not a child and not the popup itself, so hide.
this.hide();
}
}, this ), 0 );
}, this ) );
} else {
this.hide();
}
}, this ), 0 );
};
/**
* Check if the popup is visible.
*
* @method
* @returns {boolean} Popup is visible
*/
ve.ui.PopupWidget.prototype.isVisible = function () {
return this.visible;
};
/**
* Show the context.
*
* @method
* @chainable
*/
ve.ui.PopupWidget.prototype.show = function () {
this.$.show();
this.visible = true;
if ( this.autoClose ) {
// Focus body so that it may blur
this.$body.focus();
}
return this;
};
/**
* Hide the context.
*
* @method
* @chainable
*/
ve.ui.PopupWidget.prototype.hide = function () {
this.$.hide();
this.visible = false;
this.emit( 'hide' );
return this;
};
/**
* Updates the position and size.
*
* @method
* @param {number} x Horizontal position
* @param {number} y Vertical position
* @param {number} width Width
* @param {number} height Height
* @param {boolean} [transition=false] Use a smooth transition
* @chainable
*/
ve.ui.PopupWidget.prototype.display = function ( x, y, width, height, transition ) {
var left, overlapLeft, overlapRight,
overlapOffset = 0, padding = 7;
switch ( this.align ) {
case 'left':
// Inset callout from left
left = -padding;
break;
case 'right':
// Inset callout from right
left = -width + padding;
break;
default:
// Place callout in center
left = -width / 2;
break;
}
// Prevent viewport clipping, using padding between body and popup edges
overlapRight = this.$container.outerWidth( true ) - ( x + ( width + left + ( padding * 2 ) ) );
overlapLeft = x + ( left - ( padding * 2 ) );
if ( overlapRight < 0 ) {
overlapOffset = overlapRight;
} else if ( overlapLeft < 0 ) {
overlapOffset -= overlapLeft;
}
// Prevent transition from being interrupted
clearTimeout( this.transitionTimeout );
if ( transition ) {
// Enable transition
this.$.addClass( 've-ui-popupWidget-transitioning' );
// Prevent transitioning after transition is complete
this.transitionTimeout = setTimeout( ve.bind( function () {
this.$.removeClass( 've-ui-popupWidget-transitioning' );
}, this ), 200 );
} else {
// Prevent transitioning immediately
this.$.removeClass( 've-ui-popupWidget-transitioning' );
}
// Position body relative to anchor and adjust size
this.$body.css( {
'left': left + overlapOffset, 'width': width, 'height': height === undefined ? 'auto' : height
} );
return this;
};