.oo-ui-dialog {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
+ /* Opening and closing animation */
+
opacity: 0;
+}
+
+.oo-ui-dialog > .oo-ui-window-frame {
+ -webkit-transform: scale(0.5);
+ -moz-transform: scale(0.5);
+ -ms-transform: scale(0.5);
+ -o-transform: scale(0.5);
+ transform: scale(0.5);
+}
+
+.oo-ui-dialog.oo-ui-window-setup,
+.oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
+.oo-ui-dialog.oo-ui-window-ready {
+ opacity: 1;
+}
+
+.oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ transform: scale(1);
+}
+
.oo-ui-dialog-content .oo-ui-window-head,
.oo-ui-dialog-content .oo-ui-window-body,
.oo-ui-dialog-content .oo-ui-window-foot {
background-color: #fff;
border: solid 1px #ccc;
border-radius: 0.5em;
- -webkit-transform: scale(0.5);
- -moz-transform: scale(0.5);
- -ms-transform: scale(0.5);
- -o-transform: scale(0.5);
- transform: scale(0.5);
box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
- -webkit-transition: all 250ms ease-in-out;
- -moz-transition: all 250ms ease-in-out;
- -ms-transition: all 250ms ease-in-out;
- -o-transition: all 250ms ease-in-out;
- transition: all 250ms ease-in-out;
}
.oo-ui-dialog-small > .oo-ui-window-frame {
max-height: 690px;
}
-.oo-ui-dialog-open {
- opacity: 1;
-}
-
-.oo-ui-dialog-open > .oo-ui-window-frame {
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -ms-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
-}
-
.oo-ui-dialog-content .oo-ui-window-head,
.oo-ui-dialog-content .oo-ui-window-foot {
z-index: 1;
/*!
- * OOjs UI v0.1.0-pre (99068355d6)
+ * OOjs UI v0.1.0-pre (9f4f250f88)
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2014 OOjs Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: Tue Jun 10 2014 11:03:38 GMT-0700 (PDT)
+ * Date: Wed Jun 11 2014 17:02:17 GMT-0700 (PDT)
*/
( function ( OO ) {
/* Events */
/**
- * Open window.
+ * Window is setup.
*
- * Fired after window has been opened.
+ * Fired after the setup process has been executed.
*
- * @event open
+ * @event setup
* @param {Object} data Window opening data
*/
/**
- * Close window.
+ * Window is ready.
*
- * Fired after window has been closed.
+ * Fired after the ready process has been executed.
*
- * @event close
+ * @event ready
+ * @param {Object} data Window opening data
+ */
+
+/**
+ * Window is torn down
+ *
+ * Fired after the teardown process has been executed.
+ *
+ * @event teardown
* @param {Object} data Window closing data
*/
* @return {boolean} Window is opening
*/
OO.ui.Window.prototype.isOpening = function () {
- return !!this.opening && this.opening.state() !== 'resolved';
+ return !!this.opening && this.opening.state() === 'pending';
};
/**
* @return {boolean} Window is closing
*/
OO.ui.Window.prototype.isClosing = function () {
- return !!this.closing && this.closing.state() !== 'resolved';
+ return !!this.closing && this.closing.state() === 'pending';
};
/**
* @return {boolean} Window is opened
*/
OO.ui.Window.prototype.isOpened = function () {
- return !!this.opened && this.opened.state() !== 'resolved';
+ return !!this.opened && this.opened.state() === 'pending';
};
/**
this.frame.load().done( OO.ui.bind( function () {
this.$element.show();
this.visible = true;
- this.emit( 'opening', data );
this.getSetupProcess( data ).execute().done( OO.ui.bind( function () {
- this.emit( 'open', data );
+ this.$element.addClass( 'oo-ui-window-setup' );
+ this.emit( 'setup', data );
setTimeout( OO.ui.bind( function () {
- // Focus the content div (which has a tabIndex) to inactivate
- // (but not clear) selections in the parent frame.
- // Must happen after 'open' is emitted (to ensure it is visible)
- // but before 'ready' is emitted (so subclasses can give focus to something
- // else)
this.frame.$content.focus();
this.getReadyProcess( data ).execute().done( OO.ui.bind( function () {
+ this.$element.addClass( 'oo-ui-window-ready' );
this.emit( 'ready', data );
this.opened = $.Deferred();
- this.opening.resolve( this.opened.promise() );
// Now that we are totally done opening, it's safe to allow closing
this.closing = null;
+ this.opening.resolve( this.opened.promise() );
}, this ) );
}, this ) );
}, this ) );
* @return {jQuery.Promise} Promise resolved when window is closed
*/
OO.ui.Window.prototype.close = function ( data ) {
+ var close;
+
// Return existing promise if already closing or closed
if ( this.closing ) {
return this.closing.promise();
}
+ // Close after opening is done if opening is in progress
+ if ( this.opening && this.opening.state() === 'pending' ) {
+ close = OO.ui.bind( function () {
+ return this.close( data );
+ }, this );
+ return this.opening.then( close, close );
+ }
+
// Close the window
// This.closing needs to exist before we emit the closing event so that handlers can call
// window.close() and trigger the safety check above
this.closing = $.Deferred();
this.frame.$content.find( ':focus' ).blur();
- this.emit( 'closing', data );
+ this.$element.removeClass( 'oo-ui-window-ready' );
this.getTeardownProcess( data ).execute().done( OO.ui.bind( function () {
+ this.$element.removeClass( 'oo-ui-window-setup' );
+ this.emit( 'teardown', data );
// To do something different with #opened, resolve/reject #opened in the teardown process
- if ( this.opened.state() === 'pending' ) {
+ if ( this.opened && this.opened.state() === 'pending' ) {
this.opened.resolve();
}
- this.emit( 'close', data );
this.$element.hide();
this.visible = false;
this.closing.resolve();
/* Events */
/**
- * @event opening
- * @param {OO.ui.Window} win Window that's being opened
+ * @event setup
+ * @param {OO.ui.Window} win Window that's been setup
* @param {Object} config Window opening information
*/
/**
- * @event open
- * @param {OO.ui.Window} win Window that's been opened
+ * @event ready
+ * @param {OO.ui.Window} win Window that's ready
* @param {Object} config Window opening information
*/
/**
- * @event closing
- * @param {OO.ui.Window} win Window that's being closed
- * @param {Object} config Window closing information
- */
-
-/**
- * @event close
- * @param {OO.ui.Window} win Window that's been closed
+ * @event teardown
+ * @param {OO.ui.Window} win Window that's been torn down
* @param {Object} config Window closing information
*/
/* Methods */
/**
- * Handle a window that's being opened.
+ * Handle a window setup event.
*
- * @param {OO.ui.Window} win Window that's being opened
+ * @param {OO.ui.Window} win Window that's been setup
* @param {Object} [config] Window opening information
- * @fires opening
+ * @fires setup
*/
-OO.ui.WindowSet.prototype.onWindowOpening = function ( win, config ) {
+OO.ui.WindowSet.prototype.onWindowSetup = function ( win, config ) {
if ( this.currentWindow && this.currentWindow !== win ) {
this.currentWindow.close();
}
this.currentWindow = win;
- this.emit( 'opening', win, config );
+ this.emit( 'setup', win, config );
};
/**
- * Handle a window that's been opened.
+ * Handle a window ready event.
*
- * @param {OO.ui.Window} win Window that's been opened
+ * @param {OO.ui.Window} win Window that's ready
* @param {Object} [config] Window opening information
- * @fires open
+ * @fires ready
*/
-OO.ui.WindowSet.prototype.onWindowOpen = function ( win, config ) {
- this.emit( 'open', win, config );
+OO.ui.WindowSet.prototype.onWindowReady = function ( win, config ) {
+ this.emit( 'ready', win, config );
};
/**
- * Handle a window that's being closed.
+ * Handle a window teardown event.
*
- * @param {OO.ui.Window} win Window that's being closed
+ * @param {OO.ui.Window} win Window that's been torn down
* @param {Object} [config] Window closing information
- * @fires closing
+ * @fires teardown
*/
-OO.ui.WindowSet.prototype.onWindowClosing = function ( win, config ) {
+OO.ui.WindowSet.prototype.onWindowTeardown = function ( win, config ) {
this.currentWindow = null;
- this.emit( 'closing', win, config );
-};
-
-/**
- * Handle a window that's been closed.
- *
- * @param {OO.ui.Window} win Window that's been closed
- * @param {Object} [config] Window closing information
- * @fires close
- */
-OO.ui.WindowSet.prototype.onWindowClose = function ( win, config ) {
- this.emit( 'close', win, config );
+ this.emit( 'teardown', win, config );
};
/**
* Connects event handlers and attaches it to the DOM. Calling
* OO.ui.Window#open will not work until the window is added to the set.
*
- * @param {OO.ui.Window} win
+ * @param {OO.ui.Window} win Window to add
*/
OO.ui.WindowSet.prototype.addWindow = function ( win ) {
if ( this.windowList.indexOf( win ) !== -1 ) {
this.windowList.push( win );
win.connect( this, {
- 'opening': [ 'onWindowOpening', win ],
- 'open': [ 'onWindowOpen', win ],
- 'closing': [ 'onWindowClosing', win ],
- 'close': [ 'onWindowClose', win ]
+ 'setup': [ 'onWindowSetup', win ],
+ 'ready': [ 'onWindowReady', win ],
+ 'teardown': [ 'onWindowTeardown', win ]
} );
this.$element.append( win.$element );
};
// Events
this.$element.on( 'mousedown', false );
- this.connect( this, { 'open': 'onOpen' } );
// Initialization
this.$element.addClass( 'oo-ui-dialog' );
}
};
-/**
- * Handle window open events.
- */
-OO.ui.Dialog.prototype.onOpen = function () {
- this.$element.addClass( 'oo-ui-dialog-open' );
-};
-
/**
* Set dialog size.
*
state = name === size;
cssClass = sizeCssClasses[name];
this.$element.toggleClass( cssClass, state );
- if ( this.frame.$content ) {
- this.frame.$content.toggleClass( cssClass, state );
- }
}
};
OO.ui.Dialog.prototype.getTeardownProcess = function ( data ) {
return OO.ui.Dialog.super.prototype.getTeardownProcess.call( this, data )
.first( function () {
- this.$element.removeClass( 'oo-ui-dialog-open' );
+ // Wait for closing transition
return OO.ui.Process.static.delay( 250 );
}, this )
.next( function () {
this.cancelButton.$element
);
- this.connect( this, { 'close': [ 'close', 'cancel' ] } );
+ this.connect( this, { 'teardown': [ 'close', 'cancel' ] } );
};
/*
* @cfg {boolean} [autoFocus=true] Focus on the first focusable element when changing to a page
* @cfg {boolean} [outlined=false] Show an outline
* @cfg {boolean} [editable=false] Show controls for adding, removing and reordering pages
- * @cfg {Object[]} [adders] List of adders for controls, each with name, icon and title properties
*/
OO.ui.BookletLayout = function OoUiBookletLayout( config ) {
// Initialize configuration
this.outlined = !!config.outlined;
if ( this.outlined ) {
this.editable = !!config.editable;
- this.adders = config.adders || null;
this.outlineControlsWidget = null;
this.outlineWidget = new OO.ui.OutlineWidget( { '$': this.$ } );
this.outlinePanel = new OO.ui.PanelLayout( { '$': this.$, 'scrollable': true } );
this.outlineVisible = true;
if ( this.editable ) {
this.outlineControlsWidget = new OO.ui.OutlineControlsWidget(
- this.outlineWidget,
- { '$': this.$, 'adders': this.adders }
+ this.outlineWidget, { '$': this.$ }
);
}
}
// Initialization
this.$element.addClass( 'oo-ui-outlineControlsWidget' );
- this.$group.addClass( 'oo-ui-outlineControlsWidget-adders' );
+ this.$group.addClass( 'oo-ui-outlineControlsWidget-items' );
this.$movers
.addClass( 'oo-ui-outlineControlsWidget-movers' )
.append( this.removeButton.$element, this.upButton.$element, this.downButton.$element );