/*!
- * OOjs UI v0.23.1
+ * OOjs UI v0.24.2
* https://www.mediawiki.org/wiki/OOjs_UI
*
* Copyright 2011–2017 OOjs UI Team and other contributors.
* Released under the MIT license
* http://oojs.mit-license.org
*
- * Date: 2017-09-20T00:31:56Z
+ * Date: 2017-11-07T22:52:40Z
*/
( function ( OO ) {
*
* @constructor
* @param {Object} [config] Configuration options
+ * @cfg {boolean} [expanded=true] Expand the layout to fill the entire parent element.
* @cfg {boolean} [showMenu=true] Show menu
* @cfg {string} [menuPosition='before'] Position of menu: `top`, `after`, `bottom` or `before`
*/
OO.ui.MenuLayout = function OoUiMenuLayout( config ) {
// Configuration initialization
config = $.extend( {
+ expanded: true,
showMenu: true,
menuPosition: 'before'
}, config );
// Parent constructor
OO.ui.MenuLayout.parent.call( this, config );
+ this.expanded = !!config.expanded;
/**
* Menu DOM node
*
.addClass( 'oo-ui-menuLayout-menu' );
this.$content.addClass( 'oo-ui-menuLayout-content' );
this.$element
- .addClass( 'oo-ui-menuLayout' )
- .append( this.$content, this.$menu );
+ .addClass( 'oo-ui-menuLayout' );
+ if ( config.expanded ) {
+ this.$element.addClass( 'oo-ui-menuLayout-expanded' );
+ } else {
+ this.$element.addClass( 'oo-ui-menuLayout-static' );
+ }
this.setMenuPosition( config.menuPosition );
this.toggleMenu( config.showMenu );
};
OO.ui.MenuLayout.prototype.setMenuPosition = function ( position ) {
this.$element.removeClass( 'oo-ui-menuLayout-' + this.menuPosition );
this.menuPosition = position;
+ if ( this.menuPosition === 'top' || this.menuPosition === 'before' ) {
+ this.$element.append( this.$menu, this.$content );
+ } else {
+ this.$element.append( this.$content, this.$menu );
+ }
this.$element.addClass( 'oo-ui-menuLayout-' + position );
return this;
this.currentPageName = null;
this.pages = {};
this.ignoreFocus = false;
- this.stackLayout = new OO.ui.StackLayout( { continuous: !!config.continuous } );
+ this.stackLayout = new OO.ui.StackLayout( {
+ continuous: !!config.continuous,
+ expanded: this.expanded
+ } );
this.$content.append( this.stackLayout.$element );
this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
this.outlineVisible = false;
this.editable = !!config.editable;
this.outlineControlsWidget = null;
this.outlineSelectWidget = new OO.ui.OutlineSelectWidget();
- this.outlinePanel = new OO.ui.PanelLayout( { scrollable: true } );
+ this.outlinePanel = new OO.ui.PanelLayout( {
+ expanded: this.expanded,
+ scrollable: true
+ } );
this.$menu.append( this.outlinePanel.$element );
this.outlineVisible = true;
if ( this.editable ) {
* @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
*/
OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
- var layout = this;
- if ( !this.scrolling && page ) {
- page.scrollElementIntoView().done( function () {
- if ( layout.autoFocus && !OO.ui.isMobile() ) {
- layout.focus();
- }
+ var promise, layout = this;
+ // If everything is unselected, do nothing
+ if ( !page ) {
+ return;
+ }
+ // For continuous BookletLayouts, scroll the selected page into view first
+ if ( this.stackLayout.continuous && !this.scrolling ) {
+ promise = page.scrollElementIntoView();
+ } else {
+ promise = $.Deferred().resolve();
+ }
+ // Focus the first element on the newly selected panel
+ if ( this.autoFocus && !OO.ui.isMobile() ) {
+ promise.done( function () {
+ layout.focus();
} );
}
};
* @constructor
* @param {Object} [config] Configuration options
* @cfg {boolean} [continuous=false] Show all tab panels, one after another
- * @cfg {boolean} [expanded=true] Expand the content panel to fill the entire parent element.
* @cfg {boolean} [autoFocus=true] Focus on the first focusable element when a new tab panel is displayed. Disabled on mobile.
*/
OO.ui.IndexLayout = function OoUiIndexLayout( config ) {
this.ignoreFocus = false;
this.stackLayout = new OO.ui.StackLayout( {
continuous: !!config.continuous,
- expanded: config.expanded
+ expanded: this.expanded
} );
this.$content.append( this.stackLayout.$element );
this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
this.tabSelectWidget = new OO.ui.TabSelectWidget();
- this.tabPanel = new OO.ui.PanelLayout();
+ this.tabPanel = new OO.ui.PanelLayout( {
+ expanded: this.expanded
+ } );
this.$menu.append( this.tabPanel.$element );
this.toggleMenu( true );
* @param {OO.ui.PanelLayout|null} tabPanel The tab panel that is now the current panel
*/
OO.ui.IndexLayout.prototype.onStackLayoutSet = function ( tabPanel ) {
- var layout = this;
- if ( tabPanel ) {
- tabPanel.scrollElementIntoView().done( function () {
- if ( layout.autoFocus && !OO.ui.isMobile() ) {
- layout.focus();
- }
- } );
+ // If everything is unselected, do nothing
+ if ( !tabPanel ) {
+ return;
+ }
+ // Focus the first element on the newly selected panel
+ if ( this.autoFocus && !OO.ui.isMobile() ) {
+ this.focus();
}
};
* Handle menu toggle events.
*
* @private
- * @param {boolean} isVisible Menu toggle event
+ * @param {boolean} isVisible Open state of the menu
*/
OO.ui.CapsuleMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
this.$element.toggleClass( 'oo-ui-capsuleMultiselectWidget-open', isVisible );