Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/124381
Change subject: [BREAKING CHANGE] Death to initializeSelection
......................................................................
[BREAKING CHANGE] Death to initializeSelection
In the future, if there's a method that does the same thing as another, except
it doesn't emit an event like the other one does, take cover and/or run for
your life.
Changes:
* Remove initializeSelection because it's made of pure evil
* Introduce chooseItem method and "choose" event which are used in connection
with the user making a deliberate selection, which is a subset of the use of
selectItem and the "select" event
* Change highlight to null when hovering a disabled item instead of doing
nothing
* Use choose instead of select for deliberate user selection
* Use choose event instead of select to respond to deliberate user selection
* Make selected items in menus have transparent backgrounds (they have a check
icon to show state instead) and make highlighting and selection use the same
background color
Change-Id: Ib3826edb30fa021d2d7a591e36285ec76dcb3a75
---
M src/themes/apex/widgets/MenuItemWidget.less
M src/widgets/LookupInputWidget.js
M src/widgets/MenuWidget.js
M src/widgets/SelectWidget.js
4 files changed, 37 insertions(+), 34 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/81/124381/1
diff --git a/src/themes/apex/widgets/MenuItemWidget.less
b/src/themes/apex/widgets/MenuItemWidget.less
index cd621aa..fbe732e 100644
--- a/src/themes/apex/widgets/MenuItemWidget.less
+++ b/src/themes/apex/widgets/MenuItemWidget.less
@@ -1,6 +1,10 @@
.oo-ui-menuItemWidget {
&.oo-ui-optionWidget {
- &-highlighted {
+ &-selected {
+ background-color: transparent;
+ }
+ &-highlighted,
+ &-highlighted.oo-ui-optionWidget-selected {
background-color: #e1f3ff;
}
}
diff --git a/src/widgets/LookupInputWidget.js b/src/widgets/LookupInputWidget.js
index ca67b26..4a6ed7b 100644
--- a/src/widgets/LookupInputWidget.js
+++ b/src/widgets/LookupInputWidget.js
@@ -2,7 +2,7 @@
* Lookup input widget.
*
* Mixin that adds a menu showing suggested values to a text input. Subclasses
must handle `select`
- * events on #lookupMenu to make use of selections.
+ * and 'choose' events on #lookupMenu to make use of selections.
*
* @class
* @abstract
@@ -147,7 +147,7 @@
*/
OO.ui.LookupInputWidget.prototype.initializeLookupMenuSelection = function () {
if ( !this.lookupMenu.getSelectedItem() ) {
- this.lookupMenu.initializeSelection(
this.lookupMenu.getFirstSelectableItem() );
+ this.lookupMenu.selectItem(
this.lookupMenu.getFirstSelectableItem() );
}
this.lookupMenu.highlightItem( this.lookupMenu.getSelectedItem() );
};
diff --git a/src/widgets/MenuWidget.js b/src/widgets/MenuWidget.js
index 9af355a..5cd2c00 100644
--- a/src/widgets/MenuWidget.js
+++ b/src/widgets/MenuWidget.js
@@ -25,6 +25,7 @@
this.$previousFocus = null;
this.isolated = !config.input;
this.visible = false;
+ this.flashing = false;
this.onKeyDownHandler = OO.ui.bind( this.onKeyDown, this );
// Initialization
@@ -55,7 +56,7 @@
}
switch ( e.keyCode ) {
case OO.ui.Keys.ENTER:
- this.selectItem( highlightItem );
+ this.chooseItem( highlightItem );
handled = true;
break;
case OO.ui.Keys.UP:
@@ -126,28 +127,26 @@
};
/**
- * Select an item.
+ * Choose an item.
*
- * The menu will stay open if an item is silently selected.
+ * This will close the menu when done, unlike selectItem which only changes
selection.
*
* @method
- * @param {OO.ui.OptionWidget} [item] Item to select, omit to deselect all
+ * @param {OO.ui.OptionWidget} item Item to choose
* @chainable
*/
-OO.ui.MenuWidget.prototype.selectItem = function ( item ) {
+OO.ui.MenuWidget.prototype.chooseItem = function ( item ) {
// Parent method
- OO.ui.SelectWidget.prototype.selectItem.call( this, item );
+ OO.ui.MenuWidget.super.prototype.chooseItem.call( this, item );
- if ( !this.disabled ) {
- if ( item ) {
- this.disabled = true;
- item.flash( OO.ui.bind( function () {
- this.hide();
- this.disabled = false;
- }, this ) );
- } else {
+ if ( item && !this.flashing ) {
+ this.flashing = true;
+ item.flash( OO.ui.bind( function () {
this.hide();
- }
+ this.flashing = false;
+ }, this ) );
+ } else {
+ this.hide();
}
return this;
diff --git a/src/widgets/SelectWidget.js b/src/widgets/SelectWidget.js
index 36c5bf6..16d5a2c 100644
--- a/src/widgets/SelectWidget.js
+++ b/src/widgets/SelectWidget.js
@@ -67,6 +67,11 @@
*/
/**
+ * @event choose
+ * @param {OO.ui.OptionWidget|null} item Chosen item
+ */
+
+/**
* @event add
* @param {OO.ui.OptionWidget[]} items Added items
* @param {number} index Index items were added at
@@ -124,7 +129,7 @@
}
if ( !this.disabled && e.which === 1 && this.selecting ) {
this.pressItem( null );
- this.selectItem( this.selecting );
+ this.chooseItem( this.selecting );
this.selecting = null;
}
@@ -163,9 +168,7 @@
if ( !this.disabled ) {
item = this.getTargetItem( e );
- if ( item && item.isHighlightable() ) {
- this.highlightItem( item );
- }
+ this.highlightItem( item && item.isHighlightable() ? item :
null );
}
return false;
};
@@ -348,22 +351,19 @@
};
/**
- * Setup selection and highlighting.
+ * Choose an item.
*
- * This should be used to synchronize the UI with the model without emitting
events that would in
- * turn update the model.
+ * Identical to #selectItem, but may vary in subclasses that want to take
additional action when
+ * an item is selected using the keyboard or mouse.
*
- * @param {OO.ui.OptionWidget} [item] Item to select
+ * @method
+ * @param {OO.ui.OptionWidget} item Item to choose
+ * @fires choose
* @chainable
*/
-OO.ui.SelectWidget.prototype.initializeSelection = function ( item ) {
- var i, len, selected;
-
- for ( i = 0, len = this.items.length; i < len; i++ ) {
- selected = this.items[i] === item;
- this.items[i].setSelected( selected );
- this.items[i].setHighlighted( selected );
- }
+OO.ui.SelectWidget.prototype.chooseItem = function ( item ) {
+ this.selectItem( item );
+ this.emit( 'choose', item );
return this;
};
--
To view, visit https://gerrit.wikimedia.org/r/124381
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib3826edb30fa021d2d7a591e36285ec76dcb3a75
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
