/*!
- * OOjs UI v0.1.0-pre (8986c46d35)
+ * OOjs UI v0.1.0-pre (eaa1b7f06d)
* 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 Apr 01 2014 19:33:39 GMT-0700 (PDT)
+ * Date: Thu Apr 03 2014 16:56:21 GMT-0700 (PDT)
*/
( function ( OO ) {
this.data = data;
this.selected = false;
this.highlighted = false;
+ this.pressed = false;
// Initialization
this.$element
OO.ui.OptionWidget.static.highlightable = true;
+OO.ui.OptionWidget.static.pressable = true;
+
OO.ui.OptionWidget.static.scrollIntoViewOnSelect = false;
/* Methods */
return this.constructor.static.highlightable && !this.disabled;
};
+/**
+ * Check if option can be pressed.
+ *
+ * @method
+ * @returns {boolean} Item is pressable
+ */
+OO.ui.OptionWidget.prototype.isPressable = function () {
+ return this.constructor.static.pressable && !this.disabled;
+};
+
/**
* Check if option is selected.
*
return this.highlighted;
};
+/**
+ * Check if option is pressed.
+ *
+ * @method
+ * @returns {boolean} Item is pressed
+ */
+OO.ui.OptionWidget.prototype.isPressed = function () {
+ return this.pressed;
+};
+
/**
* Set selected state.
*
return this;
};
+/**
+ * Set pressed state.
+ *
+ * @method
+ * @param {boolean} [state=false] Press option
+ * @chainable
+ */
+OO.ui.OptionWidget.prototype.setPressed = function ( state ) {
+ if ( !this.disabled && this.constructor.static.pressable ) {
+ this.pressed = !!state;
+ if ( this.pressed ) {
+ this.$element.addClass( 'oo-ui-optionWidget-pressed' );
+ } else {
+ this.$element.removeClass( 'oo-ui-optionWidget-pressed' );
+ }
+ }
+ return this;
+};
+
/**
* Make the option's highlight flash.
*
+ * While flashing, the visual style of the pressed state is removed if present.
+ *
* @method
* @param {Function} [done] Callback to execute when flash effect is complete.
*/
OO.ui.OptionWidget.prototype.flash = function ( done ) {
var $this = this.$element;
- if ( !this.disabled && this.constructor.static.highlightable ) {
- $this.removeClass( 'oo-ui-optionWidget-highlighted' );
+ if ( !this.disabled && this.constructor.static.pressable ) {
+ $this.removeClass( 'oo-ui-optionWidget-highlighted oo-ui-optionWidget-pressed' );
setTimeout( OO.ui.bind( function () {
$this.addClass( 'oo-ui-optionWidget-highlighted' );
if ( done ) {
+ // Restore original classes
+ $this
+ .toggleClass( 'oo-ui-optionWidget-highlighted', this.highlighted )
+ .toggleClass( 'oo-ui-optionWidget-pressed', this.pressed );
setTimeout( done, 100 );
}
}, this ), 100 );
} );
// Initialization
- this.$element.addClass( 'oo-ui-selectWidget' );
+ this.$element.addClass( 'oo-ui-selectWidget oo-ui-selectWidget-depressed' );
if ( $.isArray( config.items ) ) {
this.addItems( config.items );
}
* @param {OO.ui.OptionWidget|null} item Highlighted item
*/
+/**
+ * @event press
+ * @param {OO.ui.OptionWidget|null} item Pressed item
+ */
+
/**
* @event select
* @param {OO.ui.OptionWidget|null} item Selected item
var item;
if ( !this.disabled && e.which === 1 ) {
- this.pressed = true;
+ this.togglePressed( true );
item = this.getTargetItem( e );
if ( item && item.isSelectable() ) {
- this.intializeSelection( item );
+ this.pressItem( item );
this.selecting = item;
this.$( this.$.context ).one( 'mouseup', OO.ui.bind( this.onMouseUp, this ) );
}
*/
OO.ui.SelectWidget.prototype.onMouseUp = function ( e ) {
var item;
- this.pressed = false;
+
+ this.togglePressed( false );
if ( !this.selecting ) {
item = this.getTargetItem( e );
if ( item && item.isSelectable() ) {
}
}
if ( !this.disabled && e.which === 1 && this.selecting ) {
+ this.pressItem( null );
this.selectItem( this.selecting );
this.selecting = null;
}
+
return false;
};
if ( !this.disabled && this.pressed ) {
item = this.getTargetItem( e );
if ( item && item !== this.selecting && item.isSelectable() ) {
- this.intializeSelection( item );
+ this.pressItem( item );
this.selecting = item;
}
}
*/
OO.ui.SelectWidget.prototype.onMouseLeave = function () {
if ( !this.disabled ) {
- this.highlightItem();
+ this.highlightItem( null );
}
return false;
};
return null;
};
+/**
+ * Toggle pressed state.
+ *
+ * @param {boolean} pressed An option is being pressed
+ */
+OO.ui.SelectWidget.prototype.togglePressed = function ( pressed ) {
+ if ( pressed === undefined ) {
+ pressed = !this.pressed;
+ }
+ if ( pressed !== this.pressed ) {
+ this.$element.toggleClass( 'oo-ui-selectWidget-pressed', pressed );
+ this.$element.toggleClass( 'oo-ui-selectWidget-depressed', !pressed );
+ this.pressed = pressed;
+ }
+};
+
/**
* Highlight an item.
*
return this;
};
+/**
+ * Press an item.
+ *
+ * @method
+ * @param {OO.ui.OptionWidget} [item] Item to press, omit to depress all
+ * @fires press
+ * @chainable
+ */
+OO.ui.SelectWidget.prototype.pressItem = function ( item ) {
+ var i, len, pressed,
+ changed = false;
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ pressed = this.items[i] === item;
+ if ( this.items[i].isPressed() !== pressed ) {
+ this.items[i].setPressed( pressed );
+ changed = true;
+ }
+ }
+ if ( changed ) {
+ this.emit( 'press', item );
+ }
+
+ return this;
+};
+
/**
* Setup selection and highlighting.
*