Move tooltip events to the tooltip creation

Change-Id: I0de2aa4fabde1d4a063373de26336ccf6c8bda5e
This commit is contained in:
WMDE-Fisch 2023-09-06 09:09:26 +02:00
parent 0debea3f8b
commit f77502f526

View file

@ -130,7 +130,6 @@ $.extend( RevisionListView.prototype, {
); );
} }
this.keepTooltipsOnHover();
this.closeTooltipsOnClick(); this.closeTooltipsOnClick();
return this.$html; return this.$html;
@ -233,18 +232,25 @@ $.extend( RevisionListView.prototype, {
* Clears the current revision focus and removes highlights and tooltip * Clears the current revision focus and removes highlights and tooltip
*/ */
removeCurrentRevisionFocus: function () { removeCurrentRevisionFocus: function () {
window.clearTimeout( this.tooltipTimeout ); this.clearRevisionFocusDelay();
this.removeCurrentRevisionFocusHighlight(); this.removeCurrentRevisionFocusHighlight();
$( '.mw-revslider-revision-tooltip' ).remove(); $( '.mw-revslider-revision-tooltip' ).remove();
}, },
/** /**
* Removes the current revision focus after 500ms * Removes the current revision focus after 750ms
* *
* @private * @private
*/ */
removeCurrentRevisionFocusWithDelay: function () { removeCurrentRevisionFocusWithDelay: function () {
this.tooltipTimeout = window.setTimeout( this.removeCurrentRevisionFocus.bind( this ), 500 ); this.tooltipTimeout = window.setTimeout( this.removeCurrentRevisionFocus.bind( this ), 750 );
},
/**
* @private
*/
clearRevisionFocusDelay: function () {
window.clearTimeout( this.tooltipTimeout );
}, },
removeCurrentRevisionFocusHighlight: function () { removeCurrentRevisionFocusHighlight: function () {
@ -259,7 +265,7 @@ $.extend( RevisionListView.prototype, {
*/ */
setRevisionFocus: function ( $revisionWrapper ) { setRevisionFocus: function ( $revisionWrapper ) {
if ( $revisionWrapper.hasClass( 'mw-revslider-revision-wrapper-hovered' ) ) { if ( $revisionWrapper.hasClass( 'mw-revslider-revision-wrapper-hovered' ) ) {
window.clearTimeout( this.tooltipTimeout ); this.clearRevisionFocusDelay();
return; return;
} }
this.removeCurrentRevisionFocus(); this.removeCurrentRevisionFocus();
@ -297,7 +303,10 @@ $.extend( RevisionListView.prototype, {
// eslint-disable-next-line mediawiki/class-doc // eslint-disable-next-line mediawiki/class-doc
tooltip.$element tooltip.$element
.addClass( 'mw-revslider-revision-tooltip-' + pos ) .addClass( 'mw-revslider-revision-tooltip-' + pos )
.on( 'focusout', this.onFocusBlur.bind( this ) ); .on( 'focusout', this.onFocusBlur.bind( this ) )
// Set event handlers so that tooltips do not disappear immediately when hover is gone
.on( 'mouseleave', this.removeCurrentRevisionFocusWithDelay.bind( this ) )
.on( 'mouseenter', this.clearRevisionFocusDelay.bind( this ) );
const $focusedRevisionPointer = $( '.mw-revslider-pointer[data-pos="' + pos + '"]' ); const $focusedRevisionPointer = $( '.mw-revslider-pointer[data-pos="' + pos + '"]' );
if ( $focusedRevisionPointer.length ) { if ( $focusedRevisionPointer.length ) {
@ -310,23 +319,6 @@ $.extend( RevisionListView.prototype, {
tooltip.toggle( true ); tooltip.toggle( true );
}, },
/**
* Sets event handlers on tooltips so they do not disappear when hovering over them
*
* @private
*/
keepTooltipsOnHover: function () {
const self = this;
$( document )
.on( 'mouseenter', '.mw-revslider-revision-tooltip', function () {
window.clearTimeout( self.tooltipTimeout );
} )
.on( 'mouseleave', '.mw-revslider-revision-tooltip', function () {
self.removeCurrentRevisionFocusWithDelay();
} );
},
/** /**
* Sets an event handler to close tooltips when clicking somewhere outside * Sets an event handler to close tooltips when clicking somewhere outside
* *