review

2 files changed, 5 insertions, 31 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index c50ac667c20..a3eaf5b32cd 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -5,7 +5,7 @@ import {
   togglePopover,
   inserted,
   mouseenter,
-  mouseleave,
+  debouncedMouseleave,
 } from './feature_highlight_helper';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
@@ -13,7 +13,6 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $parent = $selector.parent();
   const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
   const hideOnScroll = togglePopover.bind($selector, false);
-  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
 
   $selector
     // Setup popover
@@ -29,7 +28,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
       `,
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave)
+    .on('mouseleave', debouncedMouseleave(debounceTimeout))
     .on('inserted.bs.popover', inserted)
     .on('show.bs.popover', () => {
       window.addEventListener('scroll', hideOnScroll);
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index f480e72961c..bcc7cefc2f2 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import Flash from '../flash';
 import LazyLoader from '../lazy_loader';
+import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-export function togglePopover(show) {
-  const isAlreadyShown = this.hasClass('js-popover-show');
-  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
-    return false;
-  }
-  this.popover(show ? 'show' : 'hide');
-  this.toggleClass('disable-animation js-popover-show', show);
-
-  return true;
-}
-
 export function dismiss(highlightId) {
   axios.post(this.attr('data-dismiss-endpoint'), {
     feature_name: highlightId,
@@ -27,23 +17,6 @@ export function dismiss(highlightId) {
   this.hide();
 }
 
-export function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    togglePopover.call($featureHighlight, false);
-  }
-}
-
-export function mouseenter() {
-  const $featureHighlight = $(this);
-
-  const showedPopover = togglePopover.call($featureHighlight, true);
-  if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($featureHighlight));
-  }
-}
-
 export function inserted() {
   const popoverId = this.getAttribute('aria-describedby');
   const highlightId = this.dataset.highlight;
@@ -58,3 +31,5 @@ export function inserted() {
     LazyLoader.loadImage(lazyImg);
   }
 }
+
+export { togglePopover, mouseenter, debouncedMouseleave };