/*!
- * OOjs UI v0.1.0-pre (20c61ec865)
+ * OOjs UI v0.2.3
* 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: 2014-11-20T18:41:26Z
+ * Date: 2014-11-26T23:37:00Z
*/
( function ( OO ) {
*
* @param {HTMLElement|HTMLElement[]} containers Container node(s) to search in
* @param {HTMLElement} contained Node to find
- * @param {boolean} [matchContainers] Include the container(s) in the list of nodes to match, otherwise only match descendents
+ * @param {boolean} [matchContainers] Include the container(s) in the list of nodes to match, otherwise only match descendants
* @return {boolean} The node is in the list of target nodes
*/
OO.ui.contains = function ( containers, contained, matchContainers ) {
* @param {Object} [config] Configuration options
*/
OO.ui.ActionSet = function OoUiActionSet( config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
// Mixin constructors
/**
* Organize actions.
*
- * This is called whenver organized information is requested. It will only reorganize the actions
+ * This is called whenever organized information is requested. It will only reorganize the actions
* if something has changed since the last time it ran.
*
* @private
for ( i = 0, iLen = this.list.length; i < iLen; i++ ) {
action = this.list[i];
if ( action.isVisible() ) {
- // Populate catgeories
+ // Populate categories
for ( category in this.categories ) {
if ( !this.categorized[category] ) {
this.categorized[category] = {};
* @cfg {string[]} [classes] CSS class names to add
* @cfg {string} [text] Text to insert
* @cfg {jQuery} [$content] Content elements to append (after text)
+ * @cfg {Mixed} [data] Element data
*/
OO.ui.Element = function OoUiElement( config ) {
// Configuration initialization
// Properties
this.$ = config.$ || OO.ui.Element.getJQuery( document );
+ this.data = config.data;
this.$element = this.$( this.$.context.createElement( this.getTagName() ) );
this.elementGroup = null;
this.debouncedUpdateThemeClassesHandler = this.debouncedUpdateThemeClasses.bind( this );
/* Methods */
+/**
+ * Get element data.
+ *
+ * @return {Mixed} Element data
+ */
+OO.ui.Element.prototype.getData = function () {
+ return this.data;
+};
+
+/**
+ * Set element data.
+ *
+ * @param {Mixed} Element data
+ * @chainable
+ */
+OO.ui.Element.prototype.setData = function ( data ) {
+ this.data = data;
+ return this;
+};
+
/**
* Check if element supports one or more methods.
*
/**
* Update the theme-provided classes.
*
- * @localdoc This is called in element mixins and widget classes anytime state changes.
+ * @localdoc This is called in element mixins and widget classes any time state changes.
* Updating is debounced, minimizing overhead of changing multiple attributes and
* guaranteeing that theme updates do not occur within an element's constructor
*/
*
* Each process (setup, ready, hold and teardown) can be extended in subclasses by overriding
* {@link #getSetupProcess}, {@link #getReadyProcess}, {@link #getHoldProcess} and
- * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchonous
- * processing can complete. Always assume window processes are executed asychronously. See
+ * {@link #getTeardownProcess} respectively. Each process is executed in series, so asynchronous
+ * processing can complete. Always assume window processes are executed asynchronously. See
* OO.ui.Process for more details about how to work with processes. Some events, as well as the
* #open and #close methods, provide promises which are resolved when the window enters a new state.
*
this.$frame.addClass( 'oo-ui-window-frame' );
this.$overlay.addClass( 'oo-ui-window-overlay' );
- // NOTE: Additional intitialization will occur when #setManager is called
+ // NOTE: Additional initialization will occur when #setManager is called
};
/* Setup */
* @return {number} Content height
*/
OO.ui.Window.prototype.getContentHeight = function () {
- // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements
- var bodyHeight, oldHeight = this.$frame[0].style.height;
- this.$frame[0].style.height = '1px';
+ // Temporarily resize the frame so getBodyHeight() can use scrollHeight measurements.
+ // Disable transitions first, otherwise we'll get values from when the window was animating.
+ var bodyHeight, oldHeight, oldTransition,
+ styleObj = this.$frame[0].style;
+ oldTransition = styleObj.transition || styleObj.OTransition || styleObj.MsTransition ||
+ styleObj.MozTransition || styleObj.WebkitTransition;
+ styleObj.transition = styleObj.OTransition = styleObj.MsTransition =
+ styleObj.MozTransition = styleObj.WebkitTransition = 'none';
+ oldHeight = styleObj.height;
+ styleObj.height = '1px';
bodyHeight = this.getBodyHeight();
- this.$frame[0].style.height = oldHeight;
+ styleObj.height = oldHeight;
+ styleObj.transition = styleObj.OTransition = styleObj.MsTransition =
+ styleObj.MozTransition = styleObj.WebkitTransition = oldTransition;
return Math.round(
// Add buffer for border
/**
* Toggle visibility of window.
*
- * If the window is isolated and hasn't fully loaded yet, the visiblity property will be used
+ * If the window is isolated and hasn't fully loaded yet, the visibility property will be used
* instead of display.
*
* @param {boolean} [show] Make window visible, omit to toggle visibility
/**
* Setup window.
*
- * This is called by OO.ui.WindowManager durring window opening, and should not be called directly
+ * This is called by OO.ui.WindowManager during window opening, and should not be called directly
* by other systems.
*
* @param {Object} [data] Window opening data
/**
* Ready window.
*
- * This is called by OO.ui.WindowManager durring window opening, and should not be called directly
+ * This is called by OO.ui.WindowManager during window opening, and should not be called directly
* by other systems.
*
* @param {Object} [data] Window opening data
/**
* Hold window.
*
- * This is called by OO.ui.WindowManager durring window closing, and should not be called directly
+ * This is called by OO.ui.WindowManager during window closing, and should not be called directly
* by other systems.
*
* @param {Object} [data] Window closing data
/**
* Teardown window.
*
- * This is called by OO.ui.WindowManager durring window closing, and should not be called directly
+ * This is called by OO.ui.WindowManager during window closing, and should not be called directly
* by other systems.
*
* @param {Object} [data] Window closing data
this.actions = new OO.ui.ActionSet();
this.attachedActions = [];
this.currentAction = null;
+ this.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this );
// Events
this.actions.connect( this, {
);
}
this.actions.add( items );
+
+ if ( this.constructor.static.escapable ) {
+ this.$document.on( 'keydown', this.onDocumentKeyDownHandler );
+ }
}, this );
};
// Parent method
return OO.ui.Dialog.super.prototype.getTeardownProcess.call( this, data )
.first( function () {
+ if ( this.constructor.static.escapable ) {
+ this.$document.off( 'keydown', this.onDocumentKeyDownHandler );
+ }
+
this.actions.clear();
this.currentAction = null;
}, this );
// Properties
this.title = new OO.ui.LabelWidget( { $: this.$ } );
- // Events
- if ( this.constructor.static.escapable ) {
- this.$document.on( 'keydown', this.onDocumentKeyDown.bind( this ) );
- }
-
// Initialization
this.$content.addClass( 'oo-ui-dialog-content' );
this.setPendingElement( this.$head );
.attr( 'aria-hidden', '' );
}
} else if ( this.$ariaHidden ) {
- // Restore screen reader visiblity
+ // Restore screen reader visibility
this.$ariaHidden.removeAttr( 'aria-hidden' );
this.$ariaHidden = null;
}
/* Methods */
-/** */
+/**
+ * Get tools from the factory
+ *
+ * @param {Array} include Included tools
+ * @param {Array} exclude Excluded tools
+ * @param {Array} promote Promoted tools
+ * @param {Array} demote Demoted tools
+ * @return {string[]} List of tools
+ */
OO.ui.ToolFactory.prototype.getTools = function ( include, exclude, promote, demote ) {
var i, len, included, promoted, demoted,
auto = [],
/**
* Update CSS classes provided by the theme.
*
- * For elements with theme logic hooks, this should be called anytime there's a state change.
+ * For elements with theme logic hooks, this should be called any time there's a state change.
*
* @param {OO.ui.Element} element Element for which to update classes
* @return {Object.<string,string[]>} Categorized class names with `on` and `off` lists
if ( this.isDisabled() || e.which !== 1 ) {
return false;
}
- // Restore the tab-index after the button is up to restore the button's accesssibility
+ // Restore the tab-index after the button is up to restore the button's accessibility
this.$button.attr( 'tabindex', this.tabIndex );
this.$element.removeClass( 'oo-ui-buttonElement-pressed' );
// Stop listening for mouseup, since we only needed this once
* @cfg {jQuery} [$group] Container node, assigned to #$group, omit to use a generated `<div>`
*/
OO.ui.GroupElement = function OoUiGroupElement( config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
// Properties
return this.items.slice( 0 );
};
+/**
+ * Get an item by its data.
+ *
+ * Data is compared by a hash of its value. Only the first item with matching data will be returned.
+ *
+ * @param {Object} data Item data to search for
+ * @return {OO.ui.Element|null} Item with equivalent data, `null` if none exists
+ */
+OO.ui.GroupElement.prototype.getItemFromData = function ( data ) {
+ var i, len, item,
+ hash = OO.getHash( data );
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ item = this.items[i];
+ if ( hash === OO.getHash( item.getData() ) ) {
+ return item;
+ }
+ }
+
+ return null;
+};
+
+/**
+ * Get items by their data.
+ *
+ * Data is compared by a hash of its value. All items with matching data will be returned.
+ *
+ * @param {Object} data Item data to search for
+ * @return {OO.ui.Element[]} Items with equivalent data
+ */
+OO.ui.GroupElement.prototype.getItemsFromData = function ( data ) {
+ var i, len, item,
+ hash = OO.getHash( data ),
+ items = [];
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ item = this.items[i];
+ if ( hash === OO.getHash( item.getData() ) ) {
+ items.push( item );
+ }
+ }
+
+ return items;
+};
+
/**
* Add an aggregate item event.
*
* @cfg {string} [iconTitle] Icon title text or a function that returns text
*/
OO.ui.IconElement = function OoUiIconElement( config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
// Properties
} else {
this.$label.empty();
}
- this.$label.css( 'display', !label ? 'none' : '' );
};
/**
* Dialog title.
*
* A confirmation dialog's title should describe what the progressive action will do. An alert
- * dialog's title should describe what event occured.
+ * dialog's title should describe what event occurred.
*
* @static
* inheritable
/**
* A confirmation dialog's message should describe the consequences of the progressive action. An
- * alert dialog's message should describe why the event occured.
+ * alert dialog's message should describe why the event occurred.
*
* @static
* inheritable
*/
OO.ui.MessageDialog.prototype.onActionResize = function ( action ) {
this.fitActions();
- return OO.ui.ProcessDialog.super.prototype.onActionResize.call( this, action );
+ return OO.ui.MessageDialog.super.prototype.onActionResize.call( this, action );
};
/**
* @inheritdoc
*/
OO.ui.MessageDialog.prototype.getBodyHeight = function () {
- return Math.round( this.text.$element.outerHeight( true ) );
+ var bodyHeight, oldOverflow,
+ $scrollable = this.container.$element;
+
+ oldOverflow = $scrollable[0].style.overflow;
+ $scrollable[0].style.overflow = 'hidden';
+
+ // Force… ugh… something to happen
+ $scrollable.contents().hide();
+ $scrollable.height();
+ $scrollable.contents().show();
+
+ bodyHeight = Math.round( this.text.$element.outerHeight( true ) );
+ $scrollable[0].style.overflow = oldOverflow;
+
+ return bodyHeight;
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.MessageDialog.prototype.setDimensions = function ( dim ) {
+ var $scrollable = this.container.$element;
+ OO.ui.MessageDialog.super.prototype.setDimensions.call( this, dim );
+
+ // Twiddle the overflow property, otherwise an unnecessary scrollbar will be produced.
+ // Need to do it after transition completes (250ms), add 50ms just in case.
+ setTimeout( function () {
+ var oldOverflow = $scrollable[0].style.overflow;
+ $scrollable[0].style.overflow = 'hidden';
+
+ // Force… ugh… something to happen
+ $scrollable.contents().hide();
+ $scrollable.height();
+ $scrollable.contents().show();
+
+ $scrollable[0].style.overflow = oldOverflow;
+ }, 300 );
+
+ return this;
};
/**
special.primary.toggleFramed( false );
}
+ this.manager.updateWindowSize( this );
this.fitActions();
- if ( !this.isOpening() ) {
- this.manager.updateWindowSize( this );
- }
+
this.$body.css( 'bottom', this.$foot.outerHeight( true ) );
};
};
/**
- * Handle errors that occured durring accept or reject processes.
+ * Handle errors that occurred during accept or reject processes.
*
* @param {OO.ui.Error[]} errors Errors to be handled
*/
* @param {OO.ui.PanelLayout|null} page The page panel that is now the current panel
*/
OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) {
- var $input, layout = this;
+ var layout = this;
if ( page ) {
page.scrollElementIntoView( { complete: function () {
if ( layout.autoFocus ) {
- // Set focus to the first input if nothing on the page is focused yet
- if ( !page.$element.find( ':focus' ).length ) {
- $input = page.$element.find( ':input:first' );
- if ( $input.length ) {
- $input[0].focus();
- }
- }
+ layout.focus();
}
} } );
}
};
+/**
+ * Focus the first input in the current page.
+ *
+ * If no page is selected, the first selectable page will be selected.
+ * If the focus is already in an element on the current page, nothing will happen.
+ */
+OO.ui.BookletLayout.prototype.focus = function () {
+ var $input, page = this.stackLayout.getCurrentItem();
+ if ( !page && this.outlined ) {
+ this.selectFirstSelectablePage();
+ page = this.stackLayout.getCurrentItem();
+ if ( !page ) {
+ return;
+ }
+ }
+ // Only change the focus if is not already in the current page
+ if ( !page.$element.find( ':focus' ).length ) {
+ $input = page.$element.find( ':input:first' );
+ if ( $input.length ) {
+ $input[0].focus();
+ }
+ }
+};
+
/**
* Handle outline widget select events.
*
/**
* Get the outline widget.
*
- * @return {OO.ui.OutlineSelectWidget|null} Outline widget, or null if boolet has no outline
+ * @return {OO.ui.OutlineSelectWidget|null} Outline widget, or null if booklet has no outline
*/
OO.ui.BookletLayout.prototype.getOutline = function () {
return this.outlineSelectWidget;
name = page.getName();
this.pages[page.getName()] = page;
if ( this.outlined ) {
- item = new OO.ui.OutlineOptionWidget( name, page, { $: this.$ } );
+ item = new OO.ui.OutlineOptionWidget( { $: this.$, data: name } );
page.setOutlineItem( item );
items.push( item );
}
if ( this.outlined && items.length ) {
this.outlineSelectWidget.addItems( items, index );
- this.updateOutlineSelectWidget();
+ this.selectFirstSelectablePage();
}
this.stackLayout.addItems( pages, index );
this.emit( 'add', pages, index );
}
if ( this.outlined && items.length ) {
this.outlineSelectWidget.removeItems( items );
- this.updateOutlineSelectWidget();
+ this.selectFirstSelectablePage();
}
this.stackLayout.removeItems( pages );
this.emit( 'remove', pages );
};
/**
- * Call this after adding or removing items from the OutlineSelectWidget.
+ * Select the first selectable page.
*
* @chainable
*/
-OO.ui.BookletLayout.prototype.updateOutlineSelectWidget = function () {
- // Auto-select first item when nothing is selected anymore
+OO.ui.BookletLayout.prototype.selectFirstSelectablePage = function () {
if ( !this.outlineSelectWidget.getSelectedItem() ) {
this.outlineSelectWidget.selectItem( this.outlineSelectWidget.getFirstSelectableItem() );
}
// Configuration initialization
config = $.extend( { align: 'left' }, config );
+ // Properties (must be set before parent constructor, which calls #getTagName)
+ this.fieldWidget = fieldWidget;
+
// Parent constructor
OO.ui.FieldLayout.super.call( this, config );
// Properties
this.$field = this.$( '<div>' );
- this.fieldWidget = fieldWidget;
this.align = null;
if ( config.help ) {
this.popupButtonWidget = new OO.ui.PopupButtonWidget( {
OO.inheritClass( OO.ui.FieldLayout, OO.ui.Layout );
OO.mixinClass( OO.ui.FieldLayout, OO.ui.LabelElement );
-/* Static Properties */
-
-OO.ui.FieldLayout.static.tagName = 'label';
-
/* Methods */
+/**
+ * @inheritdoc
+ */
+OO.ui.FieldLayout.prototype.getTagName = function () {
+ if ( this.fieldWidget instanceof OO.ui.InputWidget ) {
+ return 'label';
+ } else {
+ return 'div';
+ }
+};
+
/**
* Handle field disable events.
*
*
* @param {number} x Horizontal position
* @param {number} y Vertical position
- * @return {OO.ui.PanelLayout} The panel at the given postion
+ * @return {OO.ui.PanelLayout} The panel at the given position
*/
OO.ui.GridLayout.prototype.getPanel = function ( x, y ) {
return this.panels[ ( x * this.widths.length ) + y ];
* @cfg {boolean} [expanded=false] Whether the collapsible tools are expanded by default
*/
OO.ui.ListToolGroup = function OoUiListToolGroup( toolbar, config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
// Properties (must be set before parent constructor, which calls #populate)
* Mixin for widgets used as items in widgets that inherit OO.ui.GroupWidget.
*
* Item widgets have a reference to a OO.ui.GroupWidget while they are attached to the group. This
- * allows bidrectional communication.
+ * allows bidirectional communication.
*
* Use together with OO.ui.GroupWidget to make disabled state inheritable.
*
* @chainable
*/
OO.ui.InputWidget.prototype.setValue = function ( value ) {
- value = this.sanitizeValue( value );
+ value = this.cleanUpValue( value );
if ( this.value !== value ) {
this.value = value;
this.emit( 'change', this.value );
}
- // Update the DOM if it has changed. Note that with sanitizeValue, it
+ // Update the DOM if it has changed. Note that with cleanUpValue, it
// is possible for the DOM value to change without this.value changing.
if ( this.$input.val() !== this.value ) {
this.$input.val( this.value );
};
/**
- * Sanitize incoming value.
+ * Clean up incoming value.
*
* Ensures value is a string, and converts undefined and null to empty string.
*
* @private
* @param {string} value Original value
- * @return {string} Sanitized value
+ * @return {string} Cleaned up value
*/
-OO.ui.InputWidget.prototype.sanitizeValue = function ( value ) {
+OO.ui.InputWidget.prototype.cleanUpValue = function ( value ) {
if ( value === undefined || value === null ) {
return '';
} else if ( this.inputFilter ) {
* @return {jQuery} Input element
*/
OO.ui.ButtonInputWidget.prototype.getInputElement = function ( config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
var html = '<' + ( config.useInputTag ? 'input' : 'button' ) + ' type="' + config.type + '">';
}
};
+/**
+ * Radio input widget.
+ *
+ * Radio buttons only make sense as a set, and you probably want to use the OO.ui.RadioSelectWidget
+ * class instead of using this class directly.
+ *
+ * This class doesn't make it possible to learn whether the radio button is selected ("pressed").
+ *
+ * @class
+ * @extends OO.ui.InputWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @param {boolean} [config.selected=false] Whether the radio button is initially selected
+ */
+OO.ui.RadioInputWidget = function OoUiRadioInputWidget( config ) {
+ // Parent constructor
+ OO.ui.RadioInputWidget.super.call( this, config );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-radioInputWidget' );
+ this.setSelected( config.selected !== undefined ? config.selected : false );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.RadioInputWidget, OO.ui.InputWidget );
+
+/* Methods */
+
+/**
+ * Get input element.
+ *
+ * @private
+ * @return {jQuery} Input element
+ */
+OO.ui.RadioInputWidget.prototype.getInputElement = function () {
+ return this.$( '<input type="radio" />' );
+};
+
+/**
+ * @inheritdoc
+ */
+OO.ui.RadioInputWidget.prototype.onEdit = function () {
+ // RadioInputWidget doesn't track its state.
+};
+
+/**
+ * Set selection state of this radio button.
+ *
+ * @param {boolean} state Whether the button is selected
+ * @chainable
+ */
+OO.ui.RadioInputWidget.prototype.setSelected = function ( state ) {
+ // RadioInputWidget doesn't track its state.
+ this.$input.prop( 'checked', state );
+ return this;
+};
+
+/**
+ * Check if this radio button is selected.
+ *
+ * @return {boolean} Radio is selected
+ */
+OO.ui.RadioInputWidget.prototype.isSelected = function () {
+ return this.$input.prop( 'checked' );
+};
+
/**
* Input widget with a text field.
*
*/
OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) {
if ( e.which === OO.ui.Keys.ENTER && !this.multiline ) {
- this.emit( 'enter' );
+ this.emit( 'enter', e );
}
};
/**
* Set the read-only state of the widget.
*
- * This should probably change the widgets's appearance and prevent it from being used.
+ * This should probably change the widget's appearance and prevent it from being used.
*
* @param {boolean} state Make input read-only
* @chainable
/* Methods */
+/**
+ * Get the combobox's menu.
+ * @return {OO.ui.TextInputMenuSelectWidget} Menu widget
+ */
+OO.ui.ComboBoxWidget.prototype.getMenu = function () {
+ return this.menu;
+};
+
/**
* Handle input change events.
*
*
* @constructor
* @param {Object} [config] Configuration options
+ * @cfg {OO.ui.InputWidget} [input] Input widget this label is for
*/
OO.ui.LabelWidget = function OoUiLabelWidget( config ) {
// Configuration initialization
* @mixins OO.ui.FlaggedElement
*
* @constructor
- * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
*/
-OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) {
+OO.ui.OptionWidget = function OoUiOptionWidget( config ) {
// Configuration initialization
config = config || {};
OO.ui.FlaggedElement.call( this, config );
// Properties
- this.data = data;
this.selected = false;
this.highlighted = false;
this.pressed = false;
return deferred.promise();
};
-/**
- * Get option data.
- *
- * @return {Mixed} Option data
- */
-OO.ui.OptionWidget.prototype.getData = function () {
- return this.data;
-};
-
/**
* Option widget with an option icon and indicator.
*
* @mixins OO.ui.IndicatorElement
*
* @constructor
- * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
*/
-OO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( data, config ) {
+OO.ui.DecoratedOptionWidget = function OoUiDecoratedOptionWidget( config ) {
// Parent constructor
- OO.ui.DecoratedOptionWidget.super.call( this, data, config );
+ OO.ui.DecoratedOptionWidget.super.call( this, config );
// Mixin constructors
OO.ui.IconElement.call( this, config );
* @mixins OO.ui.ButtonElement
*
* @constructor
- * @param {Mixed} data Option data
* @param {Object} [config] Configuration options
*/
-OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( data, config ) {
+OO.ui.ButtonOptionWidget = function OoUiButtonOptionWidget( config ) {
// Parent constructor
- OO.ui.ButtonOptionWidget.super.call( this, data, config );
+ OO.ui.ButtonOptionWidget.super.call( this, config );
// Mixin constructors
OO.ui.ButtonElement.call( this, config );
return this;
};
+/**
+ * Option widget that looks like a radio button.
+ *
+ * Use together with OO.ui.RadioSelectWidget.
+ *
+ * @class
+ * @extends OO.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.RadioOptionWidget = function OoUiRadioOptionWidget( config ) {
+ // Parent constructor
+ OO.ui.RadioOptionWidget.super.call( this, config );
+
+ // Properties
+ this.radio = new OO.ui.RadioInputWidget( { value: config.data } );
+
+ // Initialization
+ this.$element
+ .addClass( 'oo-ui-radioOptionWidget' )
+ .prepend( this.radio.$element );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.RadioOptionWidget, OO.ui.OptionWidget );
+
+/* Static Properties */
+
+OO.ui.RadioOptionWidget.static.highlightable = false;
+
+OO.ui.RadioOptionWidget.static.pressable = false;
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.RadioOptionWidget.prototype.setSelected = function ( state ) {
+ OO.ui.RadioOptionWidget.super.prototype.setSelected.call( this, state );
+
+ this.radio.setSelected( state );
+
+ return this;
+};
+
/**
* Item of an OO.ui.MenuSelectWidget.
*
* @extends OO.ui.DecoratedOptionWidget
*
* @constructor
- * @param {Mixed} data Item data
* @param {Object} [config] Configuration options
*/
-OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( data, config ) {
+OO.ui.MenuOptionWidget = function OoUiMenuOptionWidget( config ) {
// Configuration initialization
config = $.extend( { icon: 'check' }, config );
// Parent constructor
- OO.ui.MenuOptionWidget.super.call( this, data, config );
+ OO.ui.MenuOptionWidget.super.call( this, config );
// Initialization
this.$element
* @extends OO.ui.DecoratedOptionWidget
*
* @constructor
- * @param {Mixed} data Item data
* @param {Object} [config] Configuration options
*/
-OO.ui.MenuSectionOptionWidget = function OoUiMenuSectionOptionWidget( data, config ) {
+OO.ui.MenuSectionOptionWidget = function OoUiMenuSectionOptionWidget( config ) {
// Parent constructor
- OO.ui.MenuSectionOptionWidget.super.call( this, data, config );
+ OO.ui.MenuSectionOptionWidget.super.call( this, config );
// Initialization
this.$element.addClass( 'oo-ui-menuSectionOptionWidget' );
* @extends OO.ui.DecoratedOptionWidget
*
* @constructor
- * @param {Mixed} data Item data
* @param {Object} [config] Configuration options
* @cfg {number} [level] Indentation level
* @cfg {boolean} [movable] Allow modification from outline controls
*/
-OO.ui.OutlineOptionWidget = function OoUiOutlineOptionWidget( data, config ) {
+OO.ui.OutlineOptionWidget = function OoUiOutlineOptionWidget( config ) {
// Configuration initialization
config = config || {};
// Parent constructor
- OO.ui.OutlineOptionWidget.super.call( this, data, config );
+ OO.ui.OutlineOptionWidget.super.call( this, config );
// Properties
this.level = 0;
/**
* Check if item is movable.
*
- * Movablilty is used by outline controls.
+ * Movability is used by outline controls.
*
* @return {boolean} Item is movable
*/
/**
* Check if item is removable.
*
- * Removablilty is used by outline controls.
+ * Removability is used by outline controls.
*
* @return {boolean} Item is removable
*/
/**
* Set movability.
*
- * Movablilty is used by outline controls.
+ * Movability is used by outline controls.
*
* @param {boolean} movable Item is movable
* @chainable
/**
* Set removability.
*
- * Removablilty is used by outline controls.
+ * Removability is used by outline controls.
*
* @param {boolean} movable Item is removable
* @chainable
* @cfg {string} [value] Initial query value
*/
OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
// Parent constructor
/**
* Generic selection of options.
*
- * Items can contain any rendering, and are uniquely identified by a hash of their data. Any widget
- * that provides options, from which the user must choose one, should be built on this class.
+ * Items can contain any rendering. Any widget that provides options, from which the user must
+ * choose one, should be built on this class.
*
* Use together with OO.ui.OptionWidget.
*
// Properties
this.pressed = false;
this.selecting = null;
- this.hashes = {};
this.onMouseUpHandler = this.onMouseUp.bind( this );
this.onMouseMoveHandler = this.onMouseMove.bind( this );
return null;
};
-/**
- * Get an existing item with equivilant data.
- *
- * @param {Object} data Item data to search for
- * @return {OO.ui.OptionWidget|null} Item with equivilent value, `null` if none exists
- */
-OO.ui.SelectWidget.prototype.getItemFromData = function ( data ) {
- var hash = OO.getHash( data );
-
- if ( Object.prototype.hasOwnProperty.call( this.hashes, hash ) ) {
- return this.hashes[hash];
- }
-
- return null;
-};
-
/**
* Toggle pressed state.
*
/**
* Get the next selectable item.
*
- * @return {OO.ui.OptionWidget|null} Item, `null` if ther aren't any selectable items
+ * @return {OO.ui.OptionWidget|null} Item, `null` if there aren't any selectable items
*/
OO.ui.SelectWidget.prototype.getFirstSelectableItem = function () {
var i, len, item;
/**
* Add items.
*
- * When items are added with the same values as existing items, the existing items will be
- * automatically removed before the new items are added.
- *
* @param {OO.ui.OptionWidget[]} items Items to add
* @param {number} [index] Index to insert items after
* @fires add
* @chainable
*/
OO.ui.SelectWidget.prototype.addItems = function ( items, index ) {
- var i, len, item, hash,
- remove = [];
-
- for ( i = 0, len = items.length; i < len; i++ ) {
- item = items[i];
- hash = OO.getHash( item.getData() );
- if ( Object.prototype.hasOwnProperty.call( this.hashes, hash ) ) {
- // Remove item with same value
- remove.push( this.hashes[hash] );
- }
- this.hashes[hash] = item;
- }
- if ( remove.length ) {
- this.removeItems( remove );
- }
-
// Mixin method
OO.ui.GroupWidget.prototype.addItems.call( this, items, index );
* @chainable
*/
OO.ui.SelectWidget.prototype.removeItems = function ( items ) {
- var i, len, item, hash;
+ var i, len, item;
+ // Deselect items being removed
for ( i = 0, len = items.length; i < len; i++ ) {
item = items[i];
- hash = OO.getHash( item.getData() );
- if ( Object.prototype.hasOwnProperty.call( this.hashes, hash ) ) {
- // Remove existing item
- delete this.hashes[hash];
- }
if ( item.isSelected() ) {
this.selectItem( null );
}
OO.ui.SelectWidget.prototype.clearItems = function () {
var items = this.items.slice();
- // Clear all items
- this.hashes = {};
// Mixin method
OO.ui.GroupWidget.prototype.clearItems.call( this );
+
+ // Clear selection
this.selectItem( null );
this.emit( 'remove', items );
OO.inheritClass( OO.ui.ButtonSelectWidget, OO.ui.SelectWidget );
+/**
+ * Select widget containing radio button options.
+ *
+ * Use together with OO.ui.RadioOptionWidget.
+ *
+ * @class
+ * @extends OO.ui.SelectWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+OO.ui.RadioSelectWidget = function OoUiRadioSelectWidget( config ) {
+ // Parent constructor
+ OO.ui.RadioSelectWidget.super.call( this, config );
+
+ // Initialization
+ this.$element.addClass( 'oo-ui-radioSelectWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.RadioSelectWidget, OO.ui.SelectWidget );
+
/**
* Overlaid menu of options.
*
* @cfg {jQuery} [$container=input.$element] Element to render menu under
*/
OO.ui.TextInputMenuSelectWidget = function OoUiTextInputMenuSelectWidget( input, config ) {
- // Configuration intialization
+ // Configuration initialization
config = config || {};
// Parent constructor
dépôts / lhc / web / wiklou.git / blobdiff