Santhosh has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/216615

Change subject: Callout widget: Improve the hover behavior
......................................................................

Callout widget: Improve the hover behavior

Avoid showing multiple callouts if the trigger is 'hover'.
Also hide the callout, if mouse entered in siblings of triggers,
if present.

For contribution menu, this improves a user experience. Now moving
mouse over contribution list to logout link, horizontally does not
cause the contribution menu hide. With this patch it will hide.

For stats page, we can improve the custom hover handler because
the widget will make sure only one callout is shown. While fixing
that, fixed a small bug that the menu is coming only when tail for
bars(bar with ...) is present.

Change-Id: Iadadf68023eaa7aa8506e9076d80847eef64296c
---
M modules/campaigns/ext.cx.campaigns.contributionsmenu.js
M modules/stats/ext.cx.stats.js
M modules/widgets/callout/ext.cx.callout.js
3 files changed, 12 insertions(+), 12 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation 
refs/changes/15/216615/1

diff --git a/modules/campaigns/ext.cx.campaigns.contributionsmenu.js 
b/modules/campaigns/ext.cx.campaigns.contributionsmenu.js
index 33ef2fe..d58a4a6 100644
--- a/modules/campaigns/ext.cx.campaigns.contributionsmenu.js
+++ b/modules/campaigns/ext.cx.campaigns.contributionsmenu.js
@@ -65,7 +65,7 @@
                        $myContributions, $myTranslations, $myUploads,
                        $menu, callout;
 
-               $trigger = $( '#pt-mycontris a' );
+               $trigger = $( '#pt-mycontris' );
 
                $myContributions = $( '<li>' )
                        .addClass( 'cx-campaign-contributions' )
diff --git a/modules/stats/ext.cx.stats.js b/modules/stats/ext.cx.stats.js
index 6ef6b2e..553b533 100644
--- a/modules/stats/ext.cx.stats.js
+++ b/modules/stats/ext.cx.stats.js
@@ -310,19 +310,15 @@
                                        .text( '…' )
                                        .css( 'width', tailWidth + '%' );
                                $translations.append( $tail );
-                               /*jslint loopfunc: true */
-                               $tail.callout( {
-                                               trigger: 'manual',
-                                               direction: 
$.fn.callout.autoDirection( '0' ),
-                                               content: $callout
-                                       } ).on( 'mouseenter', function () {
-                                               $( this ).callout( 'show' );
-                                       } )
-                                       .on( 'mouseleave', function () {
-                                               $( this ).callout( 'hide' );
-                                       } );
                        }
 
+                       /*jslint loopfunc: true */
+                       $translations.find( '.cx-stats-chart__bar' 
).last().callout( {
+                               trigger: 'hover',
+                               direction: $.fn.callout.autoDirection( '0' ),
+                               content: $callout
+                       } );
+
                        $row.append(
                                $( '<span>' )
                                        .addClass( 'cx-stats-chart__langcode' )
diff --git a/modules/widgets/callout/ext.cx.callout.js 
b/modules/widgets/callout/ext.cx.callout.js
index 9508dd0..1469abd 100644
--- a/modules/widgets/callout/ext.cx.callout.js
+++ b/modules/widgets/callout/ext.cx.callout.js
@@ -209,7 +209,11 @@
 
                if ( this.options.trigger === 'hover' ) {
                        this.$element.on( 'mouseenter', function () {
+                               // Hide all other cx-callouts
+                               $( '.cx-callout' ).hide();
                                self.show();
+                               // On mouse enter of siblings, hide.
+                               self.$element.siblings().one( 'mouseenter', 
$.proxy( self.hide, self ) );
                                self.$dialog.one( 'mouseleave', $.proxy( 
self.hide, self ) );
                                $( document ).one( 'click', $.proxy( self.hide, 
self ) );
                        } );

-- 
To view, visit https://gerrit.wikimedia.org/r/216615
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Iadadf68023eaa7aa8506e9076d80847eef64296c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to