/*!
- * OOjs UI v0.1.0-pre (521a9e242b)
+ * OOjs UI v0.1.0-pre (7b283a9dcc)
* 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: Mon May 19 2014 10:42:43 GMT-0700 (PDT)
+ * Date: Tue May 27 2014 15:41:42 GMT-0700 (PDT)
*/
( function ( OO ) {
this.loading = true;
// Figure out directionality:
- this.dir = this.$element.closest( '[dir]' ).prop( 'dir' ) || 'ltr';
+ this.dir = OO.ui.Element.getDir( this.$element ) || 'ltr';
// Initialize contents
doc.open();
this.$promptContainer = this.$( '<div>' ).addClass( 'oo-ui-dialog-confirm-promptContainer' );
- this.cancelButton = new OO.ui.ButtonWidget( {
- 'flags': [ 'destructive' ]
- } );
+ this.cancelButton = new OO.ui.ButtonWidget();
this.cancelButton.connect( this, { 'click': [ 'emit', 'cancel' ] } );
- this.okButton = new OO.ui.ButtonWidget( {
- 'flags': [ 'constructive' ]
- } );
+ this.okButton = new OO.ui.ButtonWidget();
this.okButton.connect( this, { 'click': [ 'emit', 'ok' ] } );
// Make the buttons
/*
* Open a confirmation dialog.
*
- * @param {object} [data] Window opening data including text of the dialog and text for the buttons
- * @param {jQuery|string} [data.prompt] The text of the dialog.
- * @param {jQuery|string|Function|null} [data.okLabel] The text used on the OK button
- * @param {jQuery|string|Function|null} [data.cancelLabel] The text used on the cancel button
+ * @param {Object} [data] Window opening data including text of the dialog and text for the buttons
+ * @param {jQuery|string} [data.prompt] Text to display or list of nodes to use as content of the dialog.
+ * @param {jQuery|string|Function|null} [data.okLabel] Label of the OK button
+ * @param {jQuery|string|Function|null} [data.cancelLabel] Label of the cancel button
+ * @param {string|string[]} [data.okFlags="constructive"] Flags for the OK button
+ * @param {string|string[]} [data.cancelFlags="destructive"] Flags for the cancel button
*/
OO.ui.ConfirmationDialog.prototype.setup = function ( data ) {
// Parent method
var prompt = data.prompt || OO.ui.deferMsg( 'ooui-dialog-confirm-default-prompt' ),
okLabel = data.okLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-ok' ),
- cancelLabel = data.cancelLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-cancel' );
+ cancelLabel = data.cancelLabel || OO.ui.deferMsg( 'ooui-dialog-confirm-default-cancel' ),
+ okFlags = data.okFlags || 'constructive',
+ cancelFlags = data.cancelFlags || 'destructive';
if ( typeof prompt === 'string' ) {
this.$promptContainer.text( prompt );
this.$promptContainer.empty().append( prompt );
}
- this.okButton.setLabel( okLabel );
- this.cancelButton.setLabel( cancelLabel );
+ this.okButton.setLabel( okLabel ).clearFlags().setFlags( okFlags );
+ this.cancelButton.setLabel( cancelLabel ).clearFlags().setFlags( cancelFlags );
};
/**
* Element with a button.
/**
* Add one or more flags.
*
- * @param {string[]|Object.<string, boolean>} flags List of flags to add, or list of set/remove
- * values, keyed by flag name
+ * @param {string|string[]|Object.<string, boolean>} flags One or more flags to add, or an object
+ * keyed by flag name containing boolean set/remove instructions.
* @chainable
*/
OO.ui.FlaggableElement.prototype.setFlags = function ( flags ) {
var i, len, flag,
classPrefix = 'oo-ui-flaggableElement-';
- if ( $.isArray( flags ) ) {
+ if ( typeof flags === 'string' ) {
+ // Set
+ this.flags[flags] = true;
+ this.$element.addClass( classPrefix + flags );
+ } else if ( $.isArray( flags ) ) {
for ( i = 0, len = flags.length; i < len; i++ ) {
flag = flags[i];
// Set
this.$element.append( panels[i].$element );
}
if ( config.widths || config.heights ) {
- this.layout( config.widths || [1], config.heights || [1] );
+ this.layout( config.widths || [ 1 ], config.heights || [ 1 ] );
} else {
// Arrange in columns by default
widths = [];
for ( i = 0, len = this.panels.length; i < len; i++ ) {
widths[i] = 1;
}
- this.layout( widths, [1] );
+ this.layout( widths, [ 1 ] );
}
};
this.outlineWidget = new OO.ui.OutlineWidget( { '$': this.$ } );
this.outlinePanel = new OO.ui.PanelLayout( { '$': this.$, 'scrollable': true } );
this.gridLayout = new OO.ui.GridLayout(
- [this.outlinePanel, this.stackLayout], { '$': this.$, 'widths': [1, 2] }
+ [ this.outlinePanel, this.stackLayout ],
+ { '$': this.$, 'widths': [ 1, 2 ] }
);
this.outlineVisible = true;
if ( this.editable ) {
* @constructor
* @param {OO.ui.Toolbar} toolbar
* @param {Object} [config] Configuration options
+ * @cfg {string} [header] Text to display at the top of the pop-up
*/
OO.ui.PopupToolGroup = function OoUiPopupToolGroup( toolbar, config ) {
// Configuration initialization
this.$handle
.addClass( 'oo-ui-popupToolGroup-handle' )
.append( this.$icon, this.$label, this.$indicator );
+ // If the pop-up should have a header, add it to the top of the toolGroup.
+ // Note: If this feature is useful for other widgets, we could abstract it into an
+ // OO.ui.HeaderedElement mixin constructor.
+ if ( config.header !== undefined ) {
+ this.$group
+ .prepend( this.$( '<span>' )
+ .addClass( 'oo-ui-popupToolGroup-header' )
+ .text( config.header )
+ );
+ }
this.$element
.addClass( 'oo-ui-popupToolGroup' )
.prepend( this.$handle );
'add': 'onOutlineChange',
'remove': 'onOutlineChange'
} );
- this.upButton.connect( this, { 'click': ['emit', 'move', -1] } );
- this.downButton.connect( this, { 'click': ['emit', 'move', 1] } );
- this.removeButton.connect( this, { 'click': ['emit', 'remove'] } );
+ this.upButton.connect( this, { 'click': [ 'emit', 'move', -1 ] } );
+ this.downButton.connect( this, { 'click': [ 'emit', 'move', 1 ] } );
+ this.removeButton.connect( this, { 'click': [ 'emit', 'remove' ] } );
// Initialization
this.$element.addClass( 'oo-ui-outlineControlsWidget' );