mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 12:16:51 +00:00
7233ea8f1b
The EventEmitter API we inherited from Node.js and then bastardized was getting awkward and cumbersome. The number of uses of ve.bind was getting out of control, and removing events meant caching the bound method in a property. Many of the "features" of EventEmitter wasn't even being used, some causing overhead, others just causing bloat. This change cleans up how EventEmitter is used throughout the codebase. The new event emitter API includes: * emit - identical to the previous API, no longer throws an error if you emit error without a handler * once - identical to the previous API, still introduces a wrapper* on - compatible with the previous API but has some new features * off - identical to removeListener in the previous API * connect - very similar to addListenerMethods but doesn't wrap callbacks in closures anymore * disconnect - new, basically the opposite of addListenerMethods Another change that is made in this commit is mixing in rather than inheriting from EventEmitter. Finally, there are changes throughout the codebase anywhere connect/disconnect could be used. Change-Id: Ic3085d39172a8a719ce7f036690f673e59848d3a
141 lines
3.6 KiB
JavaScript
141 lines
3.6 KiB
JavaScript
/*!
|
|
* VisualEditor UserInterface Frame class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* UserInterface iframe abstraction.
|
|
*
|
|
* @class
|
|
* @mixins ve.EventEmitter
|
|
*
|
|
* @constructor
|
|
* @param {Object} [config] Config options
|
|
* @cfg {string[]} [stylesheets] List of stylesheet file names, each relative to ve/ui/styles
|
|
*/
|
|
ve.ui.Frame = function VeUiFrame( config ) {
|
|
// Mixin constructors
|
|
ve.EventEmitter.call( this );
|
|
|
|
// Properties
|
|
this.initialized = false;
|
|
this.config = config;
|
|
this.$ = $( '<iframe>' );
|
|
|
|
// Events
|
|
this.$.load( ve.bind( this.onLoad, this ) );
|
|
|
|
// Initialize
|
|
this.$
|
|
.addClass( 've-ui-frame' )
|
|
.attr( { 'frameborder': 0, 'scrolling': 'no' } );
|
|
};
|
|
|
|
/* Inheritance */
|
|
|
|
ve.mixinClass( ve.ui.Frame, ve.EventEmitter );
|
|
|
|
/* Events */
|
|
|
|
/**
|
|
* @event initialize
|
|
*/
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Handle frame load events.
|
|
*
|
|
* Once the iframe's stylesheets are loaded, the `initialize` event will be emitted.
|
|
*
|
|
* Sounds simple right? Read on...
|
|
*
|
|
* When you create a dynamic iframe using open/write/close, the window.load event for the
|
|
* iframe is triggered when you call close, and there's no further load event to indicate that
|
|
* everything is actually loaded.
|
|
*
|
|
* By dynamically adding stylesheet links, we can detect when each link is loaded by testing if we
|
|
* have access to each of their `sheet.cssRules` properties. Every 10ms we poll to see if we have
|
|
* access to the style's `sheet.cssRules` property yet.
|
|
*
|
|
* However, because of security issues, we never have such access if the stylesheet came from a
|
|
* different site. Thus, we are left with linking to the stylesheets through a style element with
|
|
* multiple `@import` statements - which ends up being simpler anyway. Since we created that style,
|
|
* we always have access, and its contents are only available when everything is done loading.
|
|
*
|
|
* @emits initialize
|
|
*/
|
|
ve.ui.Frame.prototype.onLoad = function () {
|
|
var interval, rules,
|
|
win = this.$.prop( 'contentWindow' ),
|
|
doc = win.document,
|
|
style = doc.createElement( 'style' ),
|
|
initialize = ve.bind( function () {
|
|
this.initialized = true;
|
|
this.emit( 'initialize' );
|
|
}, this );
|
|
|
|
// Initialize contents
|
|
doc.open();
|
|
doc.write(
|
|
'<!doctype html>' +
|
|
'<html>' +
|
|
'<body style="padding:0;margin:0;">' +
|
|
'<div class="ve-ui-frame-content"></div>' +
|
|
'</body>' +
|
|
'</html>'
|
|
);
|
|
doc.close();
|
|
|
|
// Import all stylesheets
|
|
style.textContent = '@import "' + this.config.stylesheets.join( '";\n@import "' ) + '";';
|
|
doc.body.appendChild( style );
|
|
|
|
// Poll for access to stylesheet content
|
|
interval = setInterval( ve.bind( function () {
|
|
try {
|
|
// MAGIC: only accessible when the stylesheet is loaded
|
|
rules = style.sheet.cssRules;
|
|
} catch ( e ) {
|
|
// Try again in 10ms
|
|
return;
|
|
}
|
|
// If that didn't throw an exception, we're done loading
|
|
clearInterval( interval );
|
|
// Protect against IE running interval one extra time after clearing
|
|
if ( !this.initialized ) {
|
|
initialize();
|
|
}
|
|
}, this ), 10 );
|
|
|
|
// Properties
|
|
this.$$ = ve.ui.get$$( doc, this );
|
|
this.$content = this.$$( '.ve-ui-frame-content' );
|
|
};
|
|
|
|
/**
|
|
* @param {Function} callback
|
|
*/
|
|
ve.ui.Frame.prototype.run = function ( callback ) {
|
|
if ( this.initialized ) {
|
|
callback();
|
|
} else {
|
|
this.once( 'initialize', callback );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the size of the frame.
|
|
*
|
|
* @method
|
|
* @param {number} width Frame width in pixels
|
|
* @param {number} height Frame height in pixels
|
|
* @chainable
|
|
*/
|
|
ve.ui.Frame.prototype.setSize = function ( width, height ) {
|
|
this.$.css( { 'width': width, 'height': height } );
|
|
return this;
|
|
};
|