mediawiki-extensions-Visual.../modules/ve/ui/ve.ui.Window.js
Roan Kattouw e9ca44c86c Transplant CSS from the main document to each iframe
We previously manually loaded CSS into these frames, which is flawed
because it completely bypasses ResourceLoader (so CSSJanus didn't flip
them, necessitating a bunch of hacks for RTL), and doesn't pull in
MediaWiki styles (so templates inside references don't render correctly).
Instead, this commit copies all styles from the main document into each
frame's document, inlining what it can.

Loading all styles in dialogs and inspectors caused some problems,
initially. We didn't namespace our styles for dialogs vs. inspectors
at all; the only reason inspector styles weren't being applied to dialogs
and vice versa was because we controlled which files were being loaded
in which context. This commit namespaces the inspector and dialog styles
where needed so they don't conflict and try to override each other.

Tested in Vector and Monobook, but not in Apex and not in RTL.

ve.init.mw.ViewPageTarget*.css:
* Namespace styles that are only intended for the main document
* Undo Monobook's font-size: x-small; in frames

*Dialog.js:
* Remove addLocalStylesheet() calls, we don't need those any more
** ve.ui.MWDialog seems to be unneeded now, we may want to remove it

*.css:
* Remove @noflip-ped RTL rules where they were just flipped versions of
  their LTR counterparts

ve.ui.Dialog.css, ve.ui.Inspector.css:
* Namespace styles with .ve-ui-dialog-content / .ve-ui-inspector-content

ve.ui.Frame.css:
* Move the margin:0 and padding:0 here (were in the frame <body>'s style
  attribute) and add background:none to prevent frames from getting
  the skin's background (grey in Vector, a book in Monobook)

ve.ui.Dialog.js, ve.ui.Inspector.js:
* Add ve-ui-dialog-content / ve-ui-inspector-content class to the
  frame's content <div> so we can restrict styles to only apply in
  dialogs / inspectors

ve.ui.Frame.js:
* Replace infrastructure for @import-ing stylesheets with transplantation
* Remove code polling to see when the stylesheets were loaded
** We can't do this in the new approach AFAIK, since all styles in the
   frame are either inlined or inaccessible due to the same-origin policy
** We also shouldn't need it because the browser should have cached the
   styles when it loaded the main document
* Apply ve-ui-frame-body class to the frame's <body> so we can style it
** Move inline padding:0;margin:0; into ve.ui.Frame.css
** Move the ve-ltr/ve-rtl class up to the <body>

ve.ui.Window.js:
* Remove infrastructure registering stylesheet URLs to load

Change-Id: I4a37115301811ad860f4578344a04873ea8c2b69
2013-07-09 16:13:28 -07:00

290 lines
6.2 KiB
JavaScript

/*!
* VisualEditor UserInterface Window class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* UserInterface window.
*
* @class
* @abstract
* @extends ve.Element
* @mixins ve.EventEmitter
*
* @constructor
* @param {ve.ui.Surface} surface
* @param {Object} [config] Config options
* @emits initialize
*/
ve.ui.Window = function VeUiWindow( surface, config ) {
// Parent constructor
ve.Element.call( this, config );
// Mixin constructors
ve.EventEmitter.call( this );
// Properties
this.surface = surface;
this.visible = false;
this.opening = false;
this.closing = false;
this.frame = null;
this.$frame = this.$$( '<div>' );
// Initialization
this.$
.addClass( 've-ui-window' )
.append( this.$frame );
this.frame = new ve.ui.Frame();
this.$frame
.addClass( 've-ui-window-frame' )
.append( this.frame.$ );
// Events
this.frame.connect( this, { 'initialize': 'onFrameInitialize' } );
};
/* Inheritance */
ve.inheritClass( ve.ui.Window, ve.Element );
ve.mixinClass( ve.ui.Window, ve.EventEmitter );
/* Events */
/**
* @event initialize
*/
/**
* @event setup
* @param {ve.ui.Window} win Window that's been setup
*/
/**
* @event open
* @param {ve.ui.Window} win Window that's been opened
*/
/**
* @event close
* @param {ve.ui.Window} win Window that's been closed
* @param {string} action Action that caused the window to be closed
*/
/* Static Properties */
/**
* Symbolic name of icon.
*
* @static
* @inheritable
* @property {string}
*/
ve.ui.Window.static.icon = 'window';
/**
* Localized message for title.
*
* @static
* @inheritable
* @property {string}
*/
ve.ui.Window.static.titleMessage = null;
/* Methods */
/**
* Handle frame initialize event.
*
* @method
*/
ve.ui.Window.prototype.onFrameInitialize = function () {
this.initialize();
this.emit( 'initialize' );
};
/**
* Handle the window being initialized.
*
* @method
*/
ve.ui.Window.prototype.initialize = function () {
// Properties
this.$title = this.$$( '<div class="ve-ui-window-title"></div>' );
if ( this.constructor.static.titleMessage ) {
this.$title.text( ve.msg( this.constructor.static.titleMessage ) );
}
this.$icon = this.$$( '<div class="ve-ui-window-icon"></div>' )
.addClass( 've-ui-icon-' + this.constructor.static.icon );
this.$head = this.$$( '<div class="ve-ui-window-head"></div>' );
this.$body = this.$$( '<div class="ve-ui-window-body"></div>' );
this.$foot = this.$$( '<div class="ve-ui-window-foot"></div>' );
this.$overlay = this.$$( '<div class="ve-ui-window-overlay"></div>' );
// Initialization
this.frame.$content.append(
this.$head.append( this.$icon, this.$title ),
this.$body,
this.$foot,
this.$overlay
);
};
/**
* Handle the window being opened.
*
* Any changes to the document in that need to be done prior to opening should be made here.
*
* To be notified after this method is called, listen to the `setup` event.
*
* @method
*/
ve.ui.Window.prototype.onSetup = function () {
// This is a stub, override functionality in child classes
};
/**
* Handle the window being opened.
*
* Any changes to the window that need to be done prior to opening should be made here.
*
* To be notified after this method is called, listen to the `open` event.
*
* @method
*/
ve.ui.Window.prototype.onOpen = function () {
// This is a stub, override functionality in child classes
};
/**
* Handle the window being closed.
*
* Any changes to the document that need to be done prior to closing should be made here.
*
* To be notified after this method is called, listen to the `close` event.
*
* @method
* @param {string} action Action that caused the window to be closed
*/
ve.ui.Window.prototype.onClose = function () {
// This is a stub, override functionality in child classes
};
/**
* Check if window is visible.
*
* @method
* @returns {boolean} Window is visible
*/
ve.ui.Window.prototype.isVisible = function () {
return this.visible;
};
/**
* Get the window frame.
*
* @method
* @returns {ve.ui.Frame} Frame of window
*/
ve.ui.Window.prototype.getFrame = function () {
return this.frame;
};
/**
*
* @method
*/
ve.ui.Window.prototype.setSize = function ( width, height ) {
if ( !this.frame.$content ) {
return;
}
this.frame.$.css( {
'width': width === undefined ? 'auto' : width,
'height': height === undefined ? 'auto' : height
} );
};
/**
*
* @method
*/
ve.ui.Window.prototype.fitHeightToContents = function ( min, max ) {
var height = this.frame.$content.outerHeight();
this.frame.$.css(
'height', Math.max( min || 0, max === undefined ? height : Math.min( max, height ) )
);
};
/**
*
*/
ve.ui.Window.prototype.fitWidthToContents = function ( min, max ) {
var width = this.frame.$content.outerWidth();
this.frame.$.css(
'width', Math.max( min || 0, max === undefined ? width : Math.min( max, width ) )
);
};
/**
*
* @method
*/
ve.ui.Window.prototype.setPosition = function ( left, top ) {
this.$.css( { 'left': left, 'top': top } );
};
/**
* Open window.
*
* @method
* @emits setup
* @emits open
*/
ve.ui.Window.prototype.open = function () {
if ( !this.opening ) {
this.opening = true;
this.onSetup();
this.emit( 'setup' );
this.$.show();
this.visible = true;
this.frame.$.focus();
this.frame.run( ve.bind( function () {
this.onOpen();
this.opening = false;
this.emit( 'open' );
}, this ) );
}
};
/**
* Close window.
*
* This method guards against recursive calling internally. This protects against changes made while
* closing the window which themselves would cause the window to be closed from causing an infinate
* loop.
*
* @method
* @param {string} action Action that caused the window to be closed
* @emits close
*/
ve.ui.Window.prototype.close = function ( action ) {
if ( !this.closing ) {
this.closing = true;
this.$.hide();
this.visible = false;
this.onClose( action );
this.frame.$content.find( ':focus' ).blur();
this.surface.getView().focus();
this.emit( 'close', action );
// Note that focussing the surface view calls an on focus event, which in turn will
// try to close the window again, hence we put this.closing = false right at the bottom
this.closing = false;
}
};