mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-15 18:39:52 +00:00
2e76271b4e
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
187 lines
4 KiB
JavaScript
187 lines
4 KiB
JavaScript
/*!
|
|
* VisualEditor UserInterface Element class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* Creates an ve.Element object.
|
|
*
|
|
* @class
|
|
* @abstract
|
|
*
|
|
* @constructor
|
|
* @param {Object} [config] Config options
|
|
* @cfg {Function} [$$] jQuery for the frame the widget is in
|
|
*/
|
|
ve.Element = function VeElement( config ) {
|
|
// Initialize config
|
|
config = config || {};
|
|
// Properties
|
|
this.$$ = config.$$ || ve.Element.static.get$$( document );
|
|
this.$ = this.$$( this.$$.context.createElement( this.getTagName() ) );
|
|
};
|
|
|
|
/* Static Properties */
|
|
|
|
/**
|
|
* @static
|
|
* @property
|
|
* @inheritable
|
|
*/
|
|
ve.Element.static = {};
|
|
|
|
/**
|
|
* HTML tag name.
|
|
*
|
|
* This may be ignored if getTagName is overridden.
|
|
*
|
|
* @static
|
|
* @property {string}
|
|
* @inheritable
|
|
*/
|
|
ve.Element.static.tagName = 'div';
|
|
|
|
/* Static Methods */
|
|
|
|
/**
|
|
* Gets a jQuery function within a specific document.
|
|
*
|
|
* @method
|
|
* @param {jQuery|HTMLElement|HTMLDocument|Window} context Context to bind the function to
|
|
* @param {ve.ui.Frame} [frame] Frame of the document context
|
|
* @returns {Function} Bound jQuery function
|
|
*/
|
|
ve.Element.static.get$$ = function ( context, frame ) {
|
|
function wrapper( selector ) {
|
|
return $( selector, wrapper.context );
|
|
}
|
|
|
|
wrapper.context = this.getDocument( context );
|
|
|
|
if ( frame ) {
|
|
wrapper.frame = frame;
|
|
}
|
|
|
|
return wrapper;
|
|
};
|
|
|
|
/**
|
|
* Get the document of an element.
|
|
*
|
|
* @method
|
|
* @param {jQuery|HTMLElement|HTMLDocument|Window} context Context to bind the function to
|
|
* @return {HTMLDocument} Document object
|
|
* @throws {Error} If context is invalid
|
|
*/
|
|
ve.Element.static.getDocument = function ( context ) {
|
|
var doc =
|
|
// jQuery - selections created "offscreen" won't have a context, so .context isn't reliable
|
|
( context[0] && context[0].ownerDocument ) ||
|
|
// HTMLElement
|
|
context.ownerDocument ||
|
|
// Window
|
|
context.document ||
|
|
// HTMLDocument
|
|
( context.nodeType === 9 && context );
|
|
|
|
if ( doc ) {
|
|
return doc;
|
|
}
|
|
|
|
throw new Error( 'Invalid context' );
|
|
};
|
|
|
|
/**
|
|
* Get the window of an element or document.
|
|
*
|
|
* @method
|
|
* @param {jQuery|HTMLElement|HTMLDocument|Window} context Context to bind the function to
|
|
* @return {Window} Window object
|
|
*/
|
|
ve.Element.static.getWindow = function ( context ) {
|
|
var doc = this.getDocument( context );
|
|
return doc.parentWindow || doc.defaultView;
|
|
};
|
|
|
|
|
|
/**
|
|
* Get the offset between two frames.
|
|
*
|
|
* TODO: Make this function not use recursion.
|
|
*
|
|
* @method
|
|
* @param {Window} from Window of the child frame
|
|
* @param {Window} [to=window] Window of the parent frame
|
|
* @param {Object} [offset] Offset to start with, used internally
|
|
* @returns {Object} Offset object, containing left and top properties
|
|
*/
|
|
ve.Element.static.getFrameOffset = function ( from, to, offset ) {
|
|
var i, len, frames, frame, rect;
|
|
|
|
if ( !to ) {
|
|
to = window;
|
|
}
|
|
if ( !offset ) {
|
|
offset = { 'top': 0, 'left': 0 };
|
|
}
|
|
if ( from.parent === from ) {
|
|
return offset;
|
|
}
|
|
|
|
// Get iframe element
|
|
frames = from.parent.document.getElementsByTagName( 'iframe' );
|
|
for ( i = 0, len = frames.length; i < len; i++) {
|
|
if ( frames[i].contentWindow === from ) {
|
|
frame = frames[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Recursively accumulate offset values
|
|
if ( frame ) {
|
|
rect = frame.getBoundingClientRect();
|
|
offset.left += rect.left;
|
|
offset.top += rect.top;
|
|
if ( from !== to ) {
|
|
this.getFrameOffset( from.parent, offset );
|
|
}
|
|
}
|
|
return offset;
|
|
};
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Get the HTML tag name.
|
|
*
|
|
* Override this method to base the result on instance information.
|
|
*
|
|
* @method
|
|
* @return {string} HTML tag name
|
|
*/
|
|
ve.Element.prototype.getTagName = function () {
|
|
return this.constructor.static.tagName;
|
|
};
|
|
|
|
/**
|
|
* Get the DOM document.
|
|
*
|
|
* @method
|
|
* @return {HTMLDocument} Document object
|
|
*/
|
|
ve.Element.prototype.getElementDocument = function () {
|
|
return ve.Element.static.getDocument( this.$ );
|
|
};
|
|
|
|
/**
|
|
* Get the DOM window.
|
|
*
|
|
* @method
|
|
* @return {Window} Window object
|
|
*/
|
|
ve.Element.prototype.getElementWindow = function () {
|
|
return ve.Element.static.getWindow( this.$ );
|
|
};
|