Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/77469
Change subject: Make drop down tool work with generic toolbars
......................................................................
Make drop down tool work with generic toolbars
Objective:
* Remove ve.ui.DropdownTool's dependency on ve.ui.SurfaceToolbar so it can be
used with any ve.ui.Toolbar
Changes:
ve.ui.DropdownTool.js
* Bind onBlur to document mousedown in capture mode instead of trying to add
more and more things we are listening to which is a losing battle
* Refactor activate/deactivate mode changes
* Get rid of isEnabled check - surface should disable toolbar, the tools
shouldn't be checking if the surface is enabled after the fact (also, this is
harmless and doesn't change any actual interactions)
Change-Id: I738209d17649358c2f9812f9abac576960af867b
---
M modules/ve/ui/tools/ve.ui.DropdownTool.js
1 file changed, 39 insertions(+), 15 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/69/77469/1
diff --git a/modules/ve/ui/tools/ve.ui.DropdownTool.js
b/modules/ve/ui/tools/ve.ui.DropdownTool.js
index 7d7c07f..89e3377 100644
--- a/modules/ve/ui/tools/ve.ui.DropdownTool.js
+++ b/modules/ve/ui/tools/ve.ui.DropdownTool.js
@@ -12,7 +12,7 @@
* @class
* @extends ve.ui.Tool
* @constructor
- * @param {ve.ui.SurfaceToolbar} toolbar
+ * @param {ve.ui.Toolbar} toolbar
* @param {Object} [config] Config options
*/
ve.ui.DropdownTool = function VeUiDropdownTool( toolbar, config ) {
@@ -24,11 +24,9 @@
this.$icon = this.$$( '<div class="ve-ui-dropdownTool-icon
ve-ui-icon-down"></div>' );
this.$label = this.$$( '<div class="ve-ui-dropdownTool-label"></div>' );
this.$labelText = this.$$( '<span> </span>' );
+ this.onBlurHandler = ve.bind( this.onBlur, this );
// Events
- this.$$( this.getElementDocument() )
- .add( this.toolbar.getSurface().getView().$ )
- .mousedown( ve.bind( this.onBlur, this ) );
this.$.on( {
'mousedown': ve.bind( this.onMouseDown, this ),
'mouseup': ve.bind( this.onMouseUp, this )
@@ -76,26 +74,54 @@
if ( e.which === 1 ) {
// Toggle menu
if ( this.menu.isVisible() ) {
- this.menu.hide();
+ this.deactivate();
} else {
- this.menu.show();
+ this.activate();
}
}
return false;
};
/**
+ * Switch into active mode.
+ *
+ * When active, the menu is visible, the tool has a different style and
mousedown events are being
+ * captured from the document and will trigger deactivation.
+ *
+ * @method
+ */
+ve.ui.DropdownTool.prototype.activate = function () {
+ this.menu.show();
+ this.$.addClass( 've-ui-dropdownTool-active' );
+ this.getElementDocument().addEventListener( 'mousedown',
this.onBlurHandler, true );
+};
+
+/**
+ * Switch out of active mode.
+ *
+ * When inactive, the menu is hidden, the tool returns to normal styling and
mousedown events are
+ * no longer captured.
+ *
+ * @method
+ */
+ve.ui.DropdownTool.prototype.deactivate = function () {
+ this.menu.hide();
+ this.$.removeClass( 've-ui-dropdownTool-active' );
+ this.getElementDocument().removeEventListener( 'mousedown',
this.onBlurHandler, true );
+};
+
+/**
* Handle focus being lost.
*
- * The event is actually generated from a mousedown on an element outside the
menu, so it is not
- * a normal blur event object.
+ * The event is actually generated from a mousedown, so it is not a normal
blur event object.
*
* @method
* @param {jQuery.Event} e Mouse down event
*/
ve.ui.DropdownTool.prototype.onBlur = function ( e ) {
- if ( e.which === 1 ) {
- this.menu.hide();
+ // Only deactivate when clicking outside the dropdown element
+ if ( $( e.target ).closest( '.ve-ui-dropdownTool' )[0] !== this.$[0] ) {
+ this.deactivate();
}
};
@@ -109,11 +135,9 @@
* @param {ve.ui.MenuItemWidget|null} item Selected menu item, null if none is
selected
*/
ve.ui.DropdownTool.prototype.onMenuItemSelect = function ( item ) {
-
- if ( this.toolbar.getSurface().isEnabled() ) {
- this.setLabel( item && item.$label.text() );
- this.onSelect( item );
- }
+ this.setLabel( item && item.$label.text() );
+ this.onSelect( item );
+ this.deactivate();
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/77469
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I738209d17649358c2f9812f9abac576960af867b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
