/*!
- * OOjs UI v0.22.4
+ * OOjs UI v0.23.3
* 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-08-03T19:36:51Z
+ * Date: 2017-10-04T01:20:41Z
*/
( function ( OO ) {
this.index = null;
this.$handle = config.$handle || this.$element;
this.wasHandleUsed = null;
- this.draggable = config.draggable === undefined ? true : !!config.draggable;
// Initialize and events
- this.$element.addClass( 'oo-ui-draggableElement' )
- // We make the entire element draggable, not just the handle, so that
- // the whole element appears to move. wasHandleUsed prevents drags from
- // starting outside the handle
- .attr( 'draggable', true )
+ this.$element
+ .addClass( 'oo-ui-draggableElement' )
.on( {
mousedown: this.onDragMouseDown.bind( this ),
dragstart: this.onDragStart.bind( this ),
drop: this.onDrop.bind( this )
} );
this.$handle.addClass( 'oo-ui-draggableElement-handle' );
+ this.toggleDraggable( config.draggable === undefined ? true : !!config.draggable );
};
OO.initClass( OO.ui.mixin.DraggableElement );
this.draggable = isDraggable;
this.$handle.toggleClass( 'oo-ui-draggableElement-undraggable', !this.draggable );
+
+ // We make the entire element draggable, not just the handle, so that
+ // the whole element appears to move. wasHandleUsed prevents drags from
+ // starting outside the handle
+ this.$element.prop( 'draggable', this.draggable );
}
};
*/
OO.ui.mixin.LookupElement.prototype.initializeLookupMenuSelection = function () {
if ( this.lookupHighlightFirstItem && !this.lookupMenu.getSelectedItem() ) {
- this.lookupMenu.highlightItem( this.lookupMenu.getFirstSelectableItem() );
+ this.lookupMenu.highlightItem( this.lookupMenu.findFirstSelectableItem() );
}
};
}
};
-/**
- * The deprecated name for the TabPanelLayout, provided for backwards-compatibility.
- *
- * @class
- * @extends OO.ui.TabPanelLayout
- *
- * @constructor
- * @deprecated since v0.21.3
- */
-OO.ui.CardLayout = function OoUiCardLayout() {
- OO.ui.warnDeprecation( 'CardLayout has been renamed to TabPanel layout. Use that instead. See T155152' );
- // Parent constructor
- OO.ui.CardLayout.parent.apply( this, arguments );
-};
-
-OO.inheritClass( OO.ui.CardLayout, OO.ui.TabPanelLayout );
-
/**
* PageLayouts are used within {@link OO.ui.BookletLayout booklet layouts} to create pages that users can select and display
* from the booklet's optional {@link OO.ui.OutlineSelectWidget outline} navigation. Pages are usually not instantiated directly,
*
* @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();
} );
}
};
this.outlineVisible = show;
this.toggleMenu( show );
if ( show && this.editable ) {
- // HACK: When the sidebar stops animating, kill dumb scrollbars (T161798). Only necessary when
- // outline controls are present, The delay matches transition on `.oo-ui-menuLayout-menu`.
+ // HACK: Kill dumb scrollbars when the sidebar stops animating, see T161798. Only necessary when
+ // outline controls are present, delay matches transition on `.oo-ui-menuLayout-menu`.
setTimeout( function () {
OO.ui.Element.static.reconsiderScrollbars( booklet.outlinePanel.$element[ 0 ] );
}, 200 );
};
/**
- * Get the page closest to the specified page.
+ * Find the page closest to the specified page.
*
* @param {OO.ui.PageLayout} page Page to use as a reference point
* @return {OO.ui.PageLayout|null} Page closest to the specified page
*/
-OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
+OO.ui.BookletLayout.prototype.findClosestPage = function ( page ) {
var next, prev, level,
pages = this.stackLayout.getItems(),
index = pages.indexOf( page );
return prev || next || null;
};
+/**
+ * Get the page closest to the specified page.
+ *
+ * @deprecated 0.23.0 Use {@link OO.ui.BookletLayout#findClosestPage} instead.
+ * @param {OO.ui.PageLayout} page Page to use as a reference point
+ * @return {OO.ui.PageLayout|null} Page closest to the specified page
+ */
+OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) {
+ OO.ui.warnDeprecation( 'BookletLayout#getClosestPage: Deprecated function. Use findClosestPage instead. See T76630.' );
+ return this.findClosestPage( page );
+};
+
/**
* Get the outline widget.
*
*/
OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
if ( !this.outlineSelectWidget.getSelectedItem() ) {
- this.outlineSelectWidget.selectItem( this.outlineSelectWidget.getFirstSelectableItem() );
+ this.outlineSelectWidget.selectItem( this.outlineSelectWidget.findFirstSelectableItem() );
}
return this;
* @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.currentTabPanelName = null;
this.tabPanels = {};
- Object.defineProperty( this, 'currentCardName', {
- // TODO: read documentation
- configurable: true,
- enumerable: true,
- get: function () {
- OO.ui.warnDeprecation( 'IndexLayout\'s currentCardName property is deprecated. Use currentTabPanelName instead. See T155152' );
- return this.currentTabPanelName;
- },
- set: function ( value ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s currentCardName property is deprecated. Use currentTabPanelName instead. See T155152' );
- this.currentTabPanelName = value;
- }
- } );
-
- Object.defineProperty( this, 'cards', {
- // TODO: read documentation
- configurable: true,
- enumerable: true,
- get: function () {
- OO.ui.warnDeprecation( 'IndexLayout\'s cards property is deprecated. Use tabPanels instead. See T155152' );
- return this.tabPanels;
- },
- set: function ( value ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s cards property is deprecated. Use tabPanels instead. See T155152' );
- this.tabPanels = value;
- }
- } );
-
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();
}
};
return prev || next || null;
};
-/**
- * Get the tab panel closest to the specified tab panel.
- *
- * @param {OO.ui.TabPanelLayout} tabPanel Tab panel to use as a reference point
- * @return {OO.ui.TabPanelLayout|null} Tab panel closest to the specified
- * @deprecated since v0.21.3, use `getClosestTabPanel` instead
- */
-OO.ui.IndexLayout.prototype.getClosestCard = function ( tabPanel ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s getClosestCard method is deprecated. Use getClosestTabPanel instead. See T155152' );
- return this.getClosestTabPanel( tabPanel );
-};
-
/**
* Get the tabs widget.
*
return this.tabPanels[ name ];
};
-/**
- * Get a tab panel by its symbolic name.
- *
- * @param {string} name Symbolic name of tab panel
- * @return {OO.ui.TabPanelLayout|undefined} Tab panel, if found
- * @deprecated since v0.21.3, use `getTabPanel` instead
- */
-OO.ui.IndexLayout.prototype.getCard = function ( name ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s getCard method is deprecated. Use getTabPanel instead. See T155152' );
- return this.getTabPanel( name );
-};
-
/**
* Get the current tab panel.
*
return name ? this.getTabPanel( name ) : undefined;
};
-/**
- * Get the current tab panel.
- *
- * @return {OO.ui.TabPanelLayout|undefined} Current tab panel, if found
- * @deprecated since v0.21.3, use `getCurrentTabPanel` instead
- */
-OO.ui.IndexLayout.prototype.getCurrentCard = function () {
- OO.ui.warnDeprecation( 'IndexLayout\'s getCurrentCard method is deprecated. Use getCurrentTabPanel instead. See T155152' );
- return this.getCurrentTabPanel();
-};
-
/**
* Get the symbolic name of the current tab panel.
*
return this.currentTabPanelName;
};
-/**
- * Get the symbolic name of the current tab panel.
- *
- * @return {string|null} Symbolic name of the current tab panel
- * @deprecated since v0.21.3, use `getCurrentTabPanelName` instead
- */
-OO.ui.IndexLayout.prototype.getCurrentCardName = function () {
- OO.ui.warnDeprecation( 'IndexLayout\'s getCurrentCardName method is deprecated. Use getCurrentTabPanelName instead. See T155152' );
- return this.getCurrentTabPanelName();
-};
-
/**
* Add tab panels to the index layout
*
return this;
};
-/**
- * Add tab panels to the index layout
- *
- * When tab panels are added with the same names as existing tab panels, the existing tab panels
- * will be automatically removed before the new tab panels are added.
- *
- * @param {OO.ui.TabPanelLayout[]} tabPanels Tab panels to add
- * @param {number} index Index of the insertion point
- * @fires add
- * @chainable
- * @deprecated since v0.21.3, use `addTabPanels` instead
- */
-OO.ui.IndexLayout.prototype.addCards = function ( tabPanels, index ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s addCards method is deprecated. Use addTabPanels instead. See T155152' );
- return this.addTabPanels( tabPanels, index );
-};
-
/**
* Remove the specified tab panels from the index layout.
*
return this;
};
-/**
- * Remove the specified tab panels from the index layout.
- *
- * To remove all tab panels from the index, you may wish to use the #clearTabPanels method instead.
- *
- * @param {OO.ui.TabPanelLayout[]} tabPanels An array of tab panels to remove
- * @fires remove
- * @chainable
- * @deprecated since v0.21.3, use `removeTabPanels` instead
- */
-OO.ui.IndexLayout.prototype.removeCards = function ( tabPanels ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s removeCards method is deprecated. Use removeTabPanels instead. See T155152.' );
- return this.removeTabPanels( tabPanels );
-};
-
/**
* Clear all tab panels from the index layout.
*
return this;
};
-/**
- * Clear all tab panels from the index layout.
- *
- * To remove only a subset of tab panels from the index, use the #removeTabPanels method.
- *
- * @fires remove
- * @chainable
- * @deprecated since v0.21.3, use `clearTabPanels` instead
- */
-OO.ui.IndexLayout.prototype.clearCards = function () {
- OO.ui.warnDeprecation( 'IndexLayout\'s clearCards method is deprecated. Use clearTabPanels instead. See T155152.' );
- return this.clearTabPanels();
-};
-
/**
* Set the current tab panel by symbolic name.
*
}
};
-/**
- * Set the current tab panel by symbolic name.
- *
- * @fires set
- * @param {string} name Symbolic name of tab panel
- * @deprecated since v0.21.3, use `setTabPanel` instead
- */
-OO.ui.IndexLayout.prototype.setCard = function ( name ) {
- OO.ui.warnDeprecation( 'IndexLayout\'s setCard method is deprecated. Use setTabPanel instead. See T155152.' );
- return this.setTabPanel( name );
-};
-
/**
* Select the first selectable tab panel.
*
*/
OO.ui.IndexLayout.prototype.selectFirstSelectableTabPanel = function () {
if ( !this.tabSelectWidget.getSelectedItem() ) {
- this.tabSelectWidget.selectItem( this.tabSelectWidget.getFirstSelectableItem() );
+ this.tabSelectWidget.selectItem( this.tabSelectWidget.findFirstSelectableItem() );
}
return this;
};
-/**
- * Select the first selectable tab panel.
- *
- * @chainable
- * @deprecated since v0.21.3, use `selectFirstSelectableTabPanel` instead
- */
-OO.ui.IndexLayout.prototype.selectFirstSelectableCard = function () {
- OO.ui.warnDeprecation( 'IndexLayout\'s selectFirstSelectableCard method is deprecated. Use selectFirestSelectableTabPanel instead. See T155152.' );
- return this.selectFirstSelectableTabPanel();
-};
-
/**
* ToggleWidget implements basic behavior of widgets with an on/off state.
* Please see OO.ui.ToggleButtonWidget and OO.ui.ToggleSwitchWidget for examples.
this.closeButton = new OO.ui.ButtonWidget( {
framed: false,
icon: 'close',
- tabIndex: -1
+ tabIndex: -1,
+ title: OO.ui.msg( 'ooui-item-remove' )
} ).on( 'click', this.onCloseClick.bind( this ) );
this.on( 'disable', function ( disabled ) {
this.closeButton = new OO.ui.ButtonWidget( {
framed: false,
icon: 'close',
- tabIndex: -1
+ tabIndex: -1,
+ title: OO.ui.msg( 'ooui-item-remove' )
} );
this.closeButton.setDisabled( this.isDisabled() );
true : !!config.allowReordering
);
- this.inputPosition = this.constructor.static.allowedInputPositions.indexOf( config.inputPosition ) > -1 ?
+ this.inputPosition =
+ this.constructor.static.allowedInputPositions.indexOf( config.inputPosition ) > -1 ?
config.inputPosition : 'inline';
this.allowEditTags = config.allowEditTags === undefined ? true : !!config.allowEditTags;
this.allowArbitrary = !!config.allowArbitrary;
OO.ui.MenuTagMultiselectWidget.prototype.addTagFromInput = function () {
var inputValue = this.input.getValue(),
validated = false,
- highlightedItem = this.menu.getHighlightedItem(),
+ highlightedItem = this.menu.findHighlightedItem(),
item = this.menu.getItemFromData( inputValue );
// Override the parent method so we add from the menu
dir = e.which === OO.ui.Keys.DOWN ? 1 : ( e.which === OO.ui.Keys.UP ? -1 : 0 );
if ( dir ) {
- highlightedItem = this.results.getHighlightedItem();
+ highlightedItem = this.results.findHighlightedItem();
if ( !highlightedItem ) {
highlightedItem = this.results.getSelectedItem();
}
- nextItem = this.results.getRelativeSelectableItem( highlightedItem, dir );
+ nextItem = this.results.findRelativeSelectableItem( highlightedItem, dir );
this.results.highlightItem( nextItem );
nextItem.scrollElementIntoView();
}
* @param {string} value New value
*/
OO.ui.SearchWidget.prototype.onQueryEnter = function () {
- var highlightedItem = this.results.getHighlightedItem();
+ var highlightedItem = this.results.findHighlightedItem();
if ( highlightedItem ) {
this.results.chooseItem( highlightedItem );
}